*{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;display:grid;min-height:50px;grid-template-columns:minmax(0,1fr) auto;grid-auto-rows:max-content;align-content:center;column-gap:5px}
.clean-name{grid-column:1;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{grid-column:2;align-self:center;font-size:9px;font-weight:1000;color:#b4ff43;margin-top:0;white-space:nowrap}
.clean-xp-bar{grid-column:1/3;height:4px;border-radius:99px;background:rgba(255,255,255,.12);overflow:hidden;margin-top:4px}
.clean-xp-bar span{display:block;height:100%;background:linear-gradient(90deg,#a5ff3e,#4fc316);border-radius:99px}
.clean-xp-text{grid-column:1/3;text-align:right;font-size:7px;font-weight:800;color:#f0f7ff;margin-top:1px}
.clean-city-switch{grid-column:1/3;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:3px;min-width:0;margin-top:2px;height:13px;line-height:13px}
.clean-city-switch span{display:block;font-size:7px;font-weight:1000;color:#8ea1b7;line-height:13px}
.clean-city-switch select{display:block;width:100%;min-width:0;max-width:86px;height:13px;border:0;background:transparent;color:#fff;font-size:8px;font-weight:900;line-height:13px;padding:0;margin:0;appearance:none;-webkit-appearance:none}

.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}
.investor-drawer .hint{line-height:1.35}
.investor-stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px}
.investor-stat-grid div{border-radius:14px;background:rgba(135,255,62,.08);border:1px solid rgba(135,255,62,.18);padding:9px 7px;text-align:center}
.investor-stat-grid b{display:block;color:#aaff43;font-size:14px;font-weight:1000}
.investor-stat-grid span{display:block;color:#dce8f5;font-size:9px;font-weight:900;margin-top:2px}
.investor-claim-row{display:grid;grid-template-columns:1fr 112px;gap:8px;align-items:center;margin-top:10px}
.investor-claim-row p{color:#dce8f5;font-size:11px;font-weight:900;line-height:1.25}
.investor-claim-row button{height:34px;border:0;border-radius:12px;background:linear-gradient(180deg,#82e13c,#4eb618);color:#fff;font-size:11px;font-weight:1000;box-shadow:inset 0 1px rgba(255,255,255,.25),0 6px 13px rgba(0,0,0,.22)}
.investor-claim-row button:disabled{opacity:.55}
.investor-list{display:grid;gap:10px}
.investor-card{display:grid;grid-template-columns:42px 1fr 74px;align-items:center;gap:9px;padding:10px;border-radius:16px;background:rgba(7,44,30,.70);border:1px solid rgba(141,255,70,.20)}
.investor-card-icon{width:42px;height:42px;border-radius:14px;background:rgba(145,255,66,.12);display:flex;align-items:center;justify-content:center}
.investor-card-icon img{width:25px;height:25px;object-fit:contain}
.investor-card-body{min-width:0}
.investor-card-body small{display:block;color:#aaff43;font-size:9px;font-weight:1000;text-transform:uppercase}
.investor-card-body h3{margin:2px 0 3px;font-size:14px;line-height:1.1;font-weight:1000}
.investor-card-body p,.investor-card-body em{display:block;color:#dce8f5;font-size:10px;line-height:1.25;font-style:normal}
.investor-buy-form{display:grid;gap:5px}
.investor-buy-form input{width:100%;height:28px;border-radius:10px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.08);color:#fff;text-align:center;font-weight:1000}
.investor-buy-form button{height:28px;border:0;border-radius:10px;background:linear-gradient(180deg,#82e13c,#4eb618);color:#fff;font-size:10px;font-weight:1000}
.investor-buy-form button:disabled{opacity:.55}
.investor-loading{text-align:center;color:#dce8f5;font-size:12px;font-weight:900}
.investor-owned-list{display:grid;gap:7px}
.investor-owned-row{display:grid;grid-template-columns:1fr auto;gap:4px 8px;align-items:center;padding:8px;border-radius:12px;background:rgba(255,255,255,.06)}
.investor-owned-row span{font-size:12px;font-weight:1000}
.investor-owned-row b{color:#aaff43;font-size:12px}
.investor-owned-row small{grid-column:1/-1;color:#dce8f5;font-size:10px}
.inventory-drawer .hint{line-height:1.35}
.inventory-stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px}
.inventory-stat-grid div{border-radius:14px;background:rgba(135,255,62,.08);border:1px solid rgba(135,255,62,.18);padding:9px 7px;text-align:center}
.inventory-stat-grid b{display:block;color:#aaff43;font-size:14px;font-weight:1000}
.inventory-stat-grid span{display:block;color:#dce8f5;font-size:9px;font-weight:900;margin-top:2px}
.inventory-loading{text-align:center;color:#dce8f5;font-size:12px;font-weight:900}
.inventory-group-list{display:grid;gap:12px}
.inventory-group{border-radius:16px;background:rgba(4,13,28,.78);border:1px solid rgba(255,255,255,.12);padding:10px}
.inventory-group header{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
.inventory-group h3{margin:0;color:#aaff43;font-size:14px;font-weight:1000}
.inventory-group header span{color:#dce8f5;font-size:10px;font-weight:900}
.inventory-items{display:grid;gap:8px}
.inventory-item{display:grid;grid-template-columns:44px 1fr auto;align-items:center;gap:9px;padding:9px;border-radius:14px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.09)}
.inventory-item img{width:44px;height:44px;object-fit:contain;filter:drop-shadow(0 7px 10px rgba(0,0,0,.35))}
.inventory-item h4{margin:0 0 3px;color:#fff;font-size:13px;line-height:1.12;font-weight:1000}
.inventory-item p{margin:0 0 2px;color:#dce8f5;font-size:10px;line-height:1.2;font-weight:800}
.inventory-item span{display:block;color:#aaff43;font-size:9px;font-weight:900}
.inventory-item strong{min-width:42px;text-align:right;color:#fff;font-size:14px;font-weight:1000}
.inventory-empty{text-align:center;color:#dce8f5}
.inventory-empty img{width:72px;height:72px;object-fit:contain;margin-bottom:8px}
.inventory-empty h3{margin:0 0 6px;color:#aaff43;font-size:16px}
.inventory-empty p{margin:0;font-size:12px}
.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{
    display:block !important;
    overflow:hidden !important;
  }

  body.login-body,
  body.auth-body{
    display:flex !important;
    justify-content:center !important;
    align-items:center !important;
    overflow:hidden !important;
  }

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

  .login-screen,
  .auth-screen{
    transform-origin:top center !important;
    margin:0 auto !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(4,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-role-switch{
  display:grid;
  grid-template-columns:1fr 26px 1fr;
  align-items:center;
  gap:6px;
  margin-bottom:12px;
  color:#fff;
  text-align:center;
}
#drawer-profile .profile-role-switch span{
  padding:9px 6px;
  border:1px solid rgba(145,255,70,.24);
  border-radius:8px;
  background:rgba(0,0,0,.24);
  font-size:11px;
  font-weight:1000;
}
#drawer-profile .profile-role-switch b{color:#aaff43;font-size:18px;}
#drawer-profile .profile-role-payment{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
#drawer-profile .profile-role-payment label{position:relative;cursor:pointer;}
#drawer-profile .profile-role-payment input{position:absolute;opacity:0;pointer-events:none;}
#drawer-profile .profile-role-payment span{
  min-height:48px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:8px;
  background:rgba(255,255,255,.06);
  color:#fff;
}
#drawer-profile .profile-role-payment input:checked + span{border-color:#aaff43;background:rgba(91,190,30,.22);}
#drawer-profile .profile-role-payment span b{font-size:14px;}
#drawer-profile .profile-role-payment span small{font-size:10px;letter-spacing:0;}
#drawer-profile .profile-role-form > button{
  width:100%;
  height:44px;
  margin-top:10px;
  border:0;
  border-radius:8px;
  background:#58bd1d;
  color:#fff;
  font-size:13px;
  font-weight:1000;
  text-transform:uppercase;
}
#drawer-profile .profile-role-form > button:disabled{opacity:.5;filter:grayscale(.35);}
#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;
}

.job-claim-toast{
  position:fixed;
  left:50%;
  bottom:calc(92px + env(safe-area-inset-bottom,0px));
  z-index:2147482600;
  transform:translate(-50%,18px) scale(.96);
  width:min(330px,calc(100vw - 34px));
  min-height:52px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:12px 16px;
  border-radius:16px;
  background:linear-gradient(135deg,rgba(9,38,24,.96),rgba(4,14,28,.96));
  border:1px solid rgba(170,255,67,.38);
  box-shadow:0 18px 38px rgba(0,0,0,.42),inset 0 1px rgba(255,255,255,.12);
  color:#f3ffe8;
  text-align:center;
  font-size:13px;
  font-weight:1000;
  line-height:1.25;
  opacity:0;
  pointer-events:none;
  transition:opacity .18s ease,transform .18s ease;
}

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

@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 1000 ===== */
#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 active 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;
  }
}

/* ===== DASHBOARD VEHICLE DOWN NEAR STATS FINAL ===== */
/*
  Anchor kendaraan dari stack bawah, bukan dari top fixed.
  Ini menjaga jarak ke card Durability/Fuel tetap dekat di semua tinggi HP.
*/
.clean-vehicle-area{
  top:auto !important;
  bottom:449px !important;
  height:242px !important;
  overflow:visible !important;
}

.clean-vehicle-img{
  top:50px !important;
}

.clean-walk-box img{
  bottom:4px !important;
}

@media (pointer: coarse), (max-width:900px){
  .clean-vehicle-area{
    top:auto !important;
    bottom:449px !important;
    height:242px !important;
    overflow:visible !important;
  }

  .clean-vehicle-img{
    top:50px !important;
  }

  .clean-walk-box img{
    bottom:4px !important;
  }
}

/* ===== DASHBOARD SIDE MENU MEDIUM SIZE ===== */
.clean-side-left,
.clean-side-right{
  gap:8px !important;
}
.clean-side-left{
  left:8px !important;
}
.clean-side-right{
  right:8px !important;
  top:94px !important;
}
.clean-side-left button,
.clean-side-right button{
  width:42px !important;
  height:51px !important;
  border-radius:14px !important;
  gap:3px !important;
  padding:3px 2px !important;
}
.clean-side-left button img,
.clean-side-right button img,
.clean-side-right .free-menu-button img,
.clean-side-right [data-open="reward-chest"] img{
  width:20px !important;
  height:20px !important;
}
.clean-side-left button span,
.clean-side-right button span{
  font-size:6px !important;
  line-height:.95 !important;
}

/* Regular web always uses the same portrait frame as the phone canvas. */
html.drivergas-web body .antario-phone{
  width:437px !important;
  height:757px !important;
  min-width:437px !important;
  min-height:757px !important;
  max-width:437px !important;
  max-height:757px !important;
  margin:0 auto !important;
  overflow:hidden !important;
}

html.drivergas-web body #drawer-kerja,
html.drivergas-web body #drawer-shop,
html.drivergas-web body #drawer-topup{
  position:fixed !important;
  inset:auto !important;
  left:50% !important;
  top:0 !important;
  right:auto !important;
  bottom:auto !important;
  width:437px !important;
  height:757px !important;
  min-width:0 !important;
  min-height:0 !important;
  max-width:437px !important;
  max-height:757px !important;
  margin:0 !important;
  box-sizing:border-box !important;
  transform-origin:top center !important;
  transform:translateX(-50%) translateY(18px) scale(.985) !important;
}

html.drivergas-web body #drawer-kerja.open,
html.drivergas-web body #drawer-shop.open,
html.drivergas-web body #drawer-topup.open{
  transform:translateX(-50%) translateY(0) scale(1) !important;
}

html.drivergas-web body #drawer-kerja::before,
html.drivergas-web body #drawer-kerja::after{
  position:absolute !important;
  width:437px !important;
  height:757px !important;
}

html.drivergas-web body #drawer-shop .shop-home{
  height:639px !important;
  max-height:639px !important;
}

html.drivergas-web body #drawer-shop .shop-sub,
html.drivergas-web body #drawer-topup .topup-modal-content{
  height:653px !important;
  max-height:653px !important;
}

/* Remove the outer Garage frame without flattening its inner cards. */
#drawer-garasi .garage-bg{
  border:0 !important;
  box-shadow:0 28px 50px rgba(0,0,0,.38) !important;
}

#drawer-garasi .garage-slider{
  cursor:grab;
  user-select:none;
}

#drawer-garasi .garage-slider.is-dragging{
  cursor:grabbing;
  scroll-behavior:auto !important;
  scroll-snap-type:none !important;
}

/* ===== CRAFTING WORKSHOP, QUEUE, INVENTORY, AND BAG ===== */
#drawer-crafting.crafting-drawer{
  position:fixed;
  inset:0;
  z-index:1100;
  width:100%;
  height:100dvh;
  overflow:hidden;
  background:#06111f;
  color:#fff;
}
#drawer-crafting .crafting-bg{
  position:absolute;
  inset:0;
  background:url('../backgrounds/bg_antario_city_night.webp') center/cover no-repeat;
}
#drawer-crafting .crafting-bg::after{content:"";position:absolute;inset:0;background:rgba(2,8,20,.86);}
#drawer-crafting .crafting-head{
  position:relative;
  z-index:2;
  height:82px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:18px 18px 10px;
}
#drawer-crafting .crafting-head h2{margin:0;color:#aaff43;font-size:30px;line-height:1;letter-spacing:0;font-weight:1000;}
#drawer-crafting .crafting-head p{margin:5px 0 0;color:#dce8f5;font-size:10px;font-weight:800;}
#drawer-crafting .crafting-close{width:44px;height:44px;border:1px solid rgba(170,255,67,.32);border-radius:50%;background:#071426;color:#aaff43;font-size:30px;line-height:1;}
#drawer-crafting .crafting-tabs{
  position:relative;
  z-index:2;
  height:48px;
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:4px;
  padding:0 10px 8px;
}
#drawer-crafting .crafting-tabs button,
#drawer-crafting .crafting-filters button{
  min-width:0;
  border:1px solid rgba(255,255,255,.13);
  border-radius:6px;
  background:rgba(255,255,255,.06);
  color:#dce8f5;
  font-size:9px;
  font-weight:1000;
}
#drawer-crafting .crafting-tabs button.active,
#drawer-crafting .crafting-filters button.active{border-color:#8fe83a;background:#346f19;color:#fff;}
#drawer-crafting .crafting-body{position:relative;z-index:2;height:calc(100% - 130px);overflow:hidden;padding:0 10px 12px;}
#drawer-crafting .crafting-panel{display:none;height:100%;overflow-y:auto;overflow-x:hidden;padding:2px 2px 20px;scrollbar-width:none;}
#drawer-crafting .crafting-panel::-webkit-scrollbar{display:none;}
#drawer-crafting .crafting-panel.active{display:block;}
#drawer-crafting .crafting-panel > .drawer-head{display:none;}
#drawer-crafting .crafting-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:8px;}
#drawer-crafting .crafting-summary > div{padding:9px 7px;border:1px solid rgba(255,255,255,.10);border-radius:7px;background:rgba(3,15,29,.84);text-align:center;}
#drawer-crafting .crafting-summary small{display:block;color:#c9d7e5;font-size:8px;font-weight:900;text-transform:uppercase;}
#drawer-crafting .crafting-summary b{display:block;margin-top:4px;color:#aaff43;font-size:13px;font-weight:1000;}
#drawer-crafting .crafting-filters{height:38px;display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:8px;}
#drawer-crafting .crafting-list{display:grid;gap:8px;}
#drawer-crafting .crafting-recipe-card,
#drawer-crafting .crafting-queue-card{
  display:grid;
  grid-template-columns:54px minmax(0,1fr) 78px;
  align-items:center;
  gap:9px;
  min-height:88px;
  padding:9px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:8px;
  background:rgba(3,15,29,.90);
}
#drawer-crafting .crafting-recipe-card > img,
#drawer-crafting .crafting-queue-card > img{width:52px;height:52px;object-fit:contain;}
#drawer-crafting .crafting-recipe-title{display:flex;align-items:center;justify-content:space-between;gap:6px;}
#drawer-crafting .crafting-recipe-title h3,
#drawer-crafting .crafting-queue-card h3{margin:0;color:#fff;font-size:13px;line-height:1.1;font-weight:1000;}
#drawer-crafting .crafting-recipe-title span{flex:0 0 auto;color:#aaff43;font-size:8px;font-weight:1000;}
#drawer-crafting .crafting-recipe-main > p,
#drawer-crafting .crafting-queue-card p{margin:4px 0;color:#dce8f5;font-size:9px;font-weight:850;}
#drawer-crafting .crafting-materials{display:flex;flex-wrap:wrap;gap:3px;margin-top:5px;}
#drawer-crafting .crafting-materials span{padding:2px 4px;border-radius:4px;background:rgba(255,255,255,.07);font-size:7px;font-weight:900;}
#drawer-crafting .crafting-materials .enough{color:#b9ff81;}
#drawer-crafting .crafting-materials .missing{color:#ffaaaa;background:rgba(180,30,30,.18);}
#drawer-crafting .crafting-recipe-meta{display:flex;gap:8px;margin-top:5px;color:#9fb2c5;font-size:8px;font-weight:800;}
#drawer-crafting .crafting-recipe-card > button,
#drawer-crafting .crafting-queue-card > button,
#drawer-crafting .crafting-upgrade-card > button{
  min-height:38px;
  border:0;
  border-radius:7px;
  padding:5px 7px;
  background:#58bd1d;
  color:#fff;
  font-size:9px;
  line-height:1.1;
  font-weight:1000;
}
#drawer-crafting button:disabled{opacity:.48;filter:grayscale(.5);}
#drawer-crafting .crafting-queue-card b{color:#aaff43;font-size:13px;font-weight:1000;}
#drawer-crafting .crafting-queue-empty,
#drawer-crafting .crafting-empty,
#drawer-crafting .inventory-loading{padding:18px;border:1px dashed rgba(255,255,255,.16);border-radius:8px;background:rgba(3,15,29,.72);color:#cbd8e5;text-align:center;font-size:11px;font-weight:850;}
#drawer-crafting .inventory-summary{margin-bottom:8px;padding:10px;border:1px solid rgba(255,255,255,.10);border-radius:8px;background:rgba(3,15,29,.84);}
#drawer-crafting .inventory-summary h2{margin:0 0 8px;color:#aaff43;font-size:16px;}
#drawer-crafting .inventory-stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;}
#drawer-crafting .inventory-stat-grid div{padding:7px;border-radius:6px;background:rgba(255,255,255,.06);text-align:center;}
#drawer-crafting .inventory-stat-grid b{display:block;color:#aaff43;font-size:13px;}
#drawer-crafting .inventory-stat-grid span{display:block;margin-top:3px;color:#dce8f5;font-size:7px;font-weight:900;}
#drawer-crafting .crafting-upgrade-panel{display:grid;gap:10px;}
#drawer-crafting .crafting-level-card,
#drawer-crafting .crafting-upgrade-card{padding:15px;border:1px solid rgba(255,255,255,.12);border-radius:8px;background:rgba(3,15,29,.90);}
#drawer-crafting .crafting-level-card small{color:#aaff43;font-size:9px;font-weight:1000;}
#drawer-crafting .crafting-level-card h2,
#drawer-crafting .crafting-upgrade-card h3{margin:6px 0;color:#fff;font-size:20px;letter-spacing:0;}
#drawer-crafting .crafting-level-card p,
#drawer-crafting .crafting-upgrade-card p{margin:6px 0;color:#dce8f5;font-size:11px;line-height:1.4;font-weight:800;}
#drawer-crafting .crafting-upgrade-card strong{display:block;margin:12px 0 4px;color:#aaff43;font-size:12px;}
#drawer-crafting .crafting-upgrade-card > button{width:100%;margin-top:9px;font-size:11px;}
#drawer-crafting .crafting-capacity b{display:block;color:#fff;font-size:18px;}
#drawer-crafting .crafting-capacity > span{display:block;height:8px;margin-top:7px;border-radius:4px;background:rgba(255,255,255,.10);overflow:hidden;}
#drawer-crafting .crafting-capacity i{display:block;height:100%;background:#68ce28;}
#drawer-crafting .crafting-confirm{position:absolute;inset:0;z-index:20;display:none;align-items:center;justify-content:center;padding:25px;background:rgba(0,0,0,.70);}
#drawer-crafting .crafting-confirm.show{display:flex;}
#drawer-crafting .crafting-confirm-box{width:100%;max-width:330px;padding:20px;border:1px solid rgba(170,255,67,.28);border-radius:8px;background:#071426;text-align:center;}
#drawer-crafting .crafting-confirm-box h3{margin:0 0 8px;color:#aaff43;font-size:20px;}
#drawer-crafting .crafting-confirm-box p{margin:0;color:#e5eef7;font-size:13px;line-height:1.45;font-weight:800;}
#drawer-crafting .crafting-confirm-box > div{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:16px;}
#drawer-crafting .crafting-confirm-box button{height:42px;border:0;border-radius:7px;background:#26384b;color:#fff;font-weight:1000;}
#drawer-crafting #craftingConfirmOk{background:#58bd1d;}
#drawer-crafting .crafting-toast{position:absolute;left:50%;bottom:18px;z-index:30;max-width:88%;padding:10px 14px;border-radius:7px;background:#205c20;color:#fff;font-size:11px;font-weight:900;opacity:0;pointer-events:none;transform:translate(-50%,15px);transition:.18s ease;}
#drawer-crafting .crafting-toast.error{background:#8c2525;}
#drawer-crafting .crafting-toast.show{opacity:1;transform:translate(-50%,0);}

html.drivergas-web body #drawer-crafting{
  inset:auto !important;
  left:50% !important;
  top:0 !important;
  width:437px !important;
  height:757px !important;
  max-width:437px !important;
  max-height:757px !important;
  opacity:0 !important;
  pointer-events:none !important;
  transform:translateX(-50%) translateY(18px) scale(.985) !important;
}
html.drivergas-web body #drawer-crafting.open{
  opacity:1 !important;
  pointer-events:auto !important;
  transform:translateX(-50%) translateY(0) scale(1) !important;
}
@media (max-width:900px), (pointer:coarse){
  html body #drawer-crafting.crafting-drawer{
    inset:0 !important;
    left:0 !important;
    top:0 !important;
    width:100% !important;
    height:100dvh !important;
    max-width:none !important;
    max-height:none !important;
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
    transform:translateY(100%) !important;
    transition:transform .24s ease,opacity .18s ease,visibility 0s linear .24s !important;
  }
  html body #drawer-crafting.crafting-drawer.open{
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
    transform:translateY(0) !important;
    transition-delay:0s !important;
  }
}
@media (max-width:480px){
  #drawer-crafting .crafting-recipe-card{grid-template-columns:48px minmax(0,1fr) 70px;}
  #drawer-crafting .crafting-recipe-card > img{width:46px;height:46px;}
}

/* ===== ITEM MARKETPLACE AND INVENTORY ACTIONS ===== */
#drawer-marketplace.item-market-drawer{max-height:88svh;overflow:hidden;}
#drawer-marketplace .item-market-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:10px;}
#drawer-marketplace .item-market-summary>div{padding:8px 5px;border:1px solid rgba(255,255,255,.1);border-radius:7px;background:rgba(255,255,255,.05);text-align:center;}
#drawer-marketplace .item-market-summary small{display:block;color:#c9d7e5;font-size:8px;font-weight:900;text-transform:uppercase;}
#drawer-marketplace .item-market-summary b{display:block;margin-top:3px;color:#aaff43;font-size:11px;}
#drawer-marketplace .item-market-panel{display:none;height:calc(88svh - 160px);overflow-y:auto;padding-bottom:18px;scrollbar-width:none;}
#drawer-marketplace .item-market-panel.active{display:block;}
#drawer-marketplace .item-market-panel::-webkit-scrollbar{display:none;}
#drawer-marketplace .item-market-list{display:grid;gap:8px;}
#drawer-marketplace .item-market-card{display:grid;grid-template-columns:48px minmax(0,1fr) 76px;align-items:center;gap:8px;padding:9px;border:1px solid rgba(255,255,255,.11);border-radius:8px;background:rgba(3,15,29,.9);}
#drawer-marketplace .item-market-card>img{width:46px;height:46px;object-fit:contain;}
#drawer-marketplace .item-market-card h3{margin:0;color:#fff;font-size:12px;line-height:1.15;}
#drawer-marketplace .item-market-card p{margin:4px 0;color:#dce8f5;font-size:9px;line-height:1.25;font-weight:800;}
#drawer-marketplace .item-market-card span{color:#aaff43;font-size:8px;font-weight:900;}
#drawer-marketplace .item-market-card>button{min-height:38px;border:0;border-radius:7px;padding:5px;background:#58bd1d;color:#fff;font-size:9px;line-height:1.1;font-weight:1000;}
#drawer-marketplace .item-market-card>button.cancel{background:#8b3030;}
#drawer-marketplace .item-market-status{display:grid;place-items:center;min-height:38px;border-radius:7px;background:#245f29;color:#b9ff72;font-size:8px;font-weight:1000;text-align:center;}
#drawer-marketplace .item-market-status.cancelled{background:#542525;color:#ffb5b5;}
#drawer-marketplace .item-market-fields{display:grid;grid-template-columns:1fr 1fr;gap:5px;}
#drawer-marketplace .item-market-fields label{color:#b9c8d8;font-size:7px;font-weight:900;text-transform:uppercase;}
#drawer-marketplace .item-market-fields input{width:100%;height:29px;margin-top:2px;border:1px solid rgba(255,255,255,.14);border-radius:5px;background:#071426;color:#fff;padding:0 5px;font-size:10px;}
#drawer-marketplace .item-market-empty{padding:24px 12px;border:1px dashed rgba(255,255,255,.15);border-radius:8px;color:#cbd8e5;text-align:center;font-size:11px;font-weight:850;}
#drawer-marketplace .item-market-confirm{position:absolute;inset:0;z-index:20;display:none;align-items:center;justify-content:center;padding:24px;background:rgba(0,0,0,.72);}
#drawer-marketplace .item-market-confirm.show{display:flex;}
#drawer-marketplace .item-market-confirm>div{width:100%;max-width:320px;padding:18px;border:1px solid rgba(170,255,67,.28);border-radius:8px;background:#071426;text-align:center;}
#drawer-marketplace .item-market-confirm h3{margin:0 0 7px;color:#aaff43;font-size:18px;}
#drawer-marketplace .item-market-confirm p{margin:0;color:#e5eef7;font-size:12px;line-height:1.4;}
#drawer-marketplace .item-market-confirm section{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:14px;}
#drawer-marketplace .item-market-confirm button{height:40px;border:0;border-radius:6px;background:#26384b;color:#fff;font-weight:1000;}
#drawer-marketplace #itemMarketOk{background:#58bd1d;}
#drawer-marketplace .item-market-toast{position:absolute;left:50%;bottom:16px;z-index:30;max-width:88%;padding:9px 13px;border-radius:7px;background:#205c20;color:#fff;font-size:10px;font-weight:900;opacity:0;pointer-events:none;transform:translate(-50%,12px);transition:.18s ease;}
#drawer-marketplace .item-market-toast.error{background:#8c2525;}
#drawer-marketplace .item-market-toast.show{opacity:1;transform:translate(-50%,0);}
#drawer-crafting .inventory-action{display:grid;justify-items:end;gap:5px;min-width:48px;}
#drawer-crafting .inventory-action button{min-width:48px;height:28px;border:0;border-radius:6px;background:#58bd1d;color:#fff;font-size:9px;font-weight:1000;}
#drawer-crafting .inventory-action button:disabled{opacity:.55;}

html.drivergas-web body #drawer-marketplace.item-market-drawer{
  position:fixed !important;inset:auto !important;left:50% !important;top:0 !important;
  width:437px !important;height:757px !important;max-width:437px !important;max-height:757px !important;
  opacity:0 !important;pointer-events:none !important;transform:translateX(-50%) translateY(18px) scale(.985) !important;
}
html.drivergas-web body #drawer-marketplace.item-market-drawer.open{opacity:1 !important;pointer-events:auto !important;transform:translateX(-50%) translateY(0) scale(1) !important;}
html.drivergas-web body #drawer-marketplace .item-market-panel{height:604px;}

/* Guild economy */
#drawer-guild.guild-drawer{height:100dvh;max-height:100dvh;overflow:hidden;}
#drawer-guild .guild-benefits{margin-bottom:9px;padding:9px;border:1px solid rgba(170,255,67,.22);border-radius:7px;background:rgba(48,105,28,.24);}
#drawer-guild .guild-benefits b,#drawer-guild .guild-benefits span{display:block;}
#drawer-guild .guild-benefits b{color:#aaff43;font-size:12px;}
#drawer-guild .guild-benefits span{margin-top:3px;color:#dce8f5;font-size:9px;line-height:1.35;}
#drawer-guild .guild-tabs{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,44px);gap:5px;margin-bottom:9px;}
#drawer-guild .guild-tabs button,#drawer-marketplace .market-scope-switch button{min-height:34px;border:1px solid rgba(255,255,255,.11);border-radius:6px;background:#0a192b;color:#c9d7e5;font-size:8px;font-weight:1000;}
#drawer-guild .guild-tabs button.is-active,#drawer-marketplace .market-scope-switch button.is-active{border-color:#72d735;background:#245f29;color:#fff;}
#drawer-guild .guild-body{height:auto;overflow:hidden;}
#drawer-guild .guild-panel{display:none;height:100%;overflow-y:auto;padding:0 1px 20px;scrollbar-width:none;}
#drawer-guild .guild-panel.active{display:block;}
#drawer-guild .guild-panel::-webkit-scrollbar{display:none;}
#drawer-guild .guild-search-form{display:grid;grid-template-columns:1fr 74px;gap:6px;margin-bottom:8px;}
#drawer-guild input,#drawer-guild textarea,#drawer-guild select{width:100%;border:1px solid rgba(255,255,255,.14);border-radius:6px;background:#071426;color:#fff;font:inherit;}
#drawer-guild input,#drawer-guild select{height:38px;padding:0 9px;}
#drawer-guild textarea{min-height:70px;padding:8px;resize:vertical;}
#drawer-guild button{cursor:pointer;}
#drawer-guild button:disabled{cursor:not-allowed;opacity:.45;}
#drawer-guild .guild-search-form button,#drawer-guild .guild-form button,#drawer-guild .guild-info button,#drawer-guild .guild-leave{border:0;border-radius:6px;background:#58bd1d;color:#fff;font-size:9px;font-weight:1000;}
#drawer-guild .guild-row{display:grid;grid-template-columns:minmax(0,1fr) 78px;align-items:center;gap:8px;margin-bottom:7px;padding:10px;border:1px solid rgba(255,255,255,.11);border-radius:8px;background:rgba(3,15,29,.9);}
#drawer-guild .guild-row.promoted{border-color:rgba(255,207,68,.55);box-shadow:inset 3px 0 #e9bb31;}
#drawer-guild .guild-row small,#drawer-guild .guild-hero small,#drawer-guild .guild-bag-card small{color:#aaff43;font-size:8px;font-weight:1000;}
#drawer-guild .guild-row.promoted small{color:#ffd85c;}
#drawer-guild .guild-row h3{margin:2px 0;color:#fff;font-size:13px;}
#drawer-guild .guild-row p{margin:0 0 4px;color:#d6e2ef;font-size:9px;line-height:1.3;}
#drawer-guild .guild-row span{color:#8fa7bb;font-size:8px;}
#drawer-guild .guild-row>button{min-height:39px;border:0;border-radius:6px;background:#58bd1d;color:#fff;font-size:8px;font-weight:1000;}
#drawer-guild .guild-notice,#drawer-guild .guild-info,#drawer-guild .guild-form,#drawer-guild .guild-hero,#drawer-guild .guild-bag-card,#drawer-guild .guild-treasury-total{margin-bottom:8px;padding:11px;border:1px solid rgba(255,255,255,.11);border-radius:8px;background:rgba(3,15,29,.9);}
#drawer-guild .guild-notice b,#drawer-guild .guild-notice span{display:block;}
#drawer-guild .guild-notice b{color:#ffd85c;font-size:11px;}
#drawer-guild .guild-notice span{margin:3px 0 7px;color:#dce8f5;font-size:9px;}
#drawer-guild .guild-notice button{height:32px;border:0;border-radius:6px;background:#7a3434;color:#fff;font-size:8px;font-weight:1000;}
#drawer-guild .guild-empty{padding:25px 12px;border:1px dashed rgba(255,255,255,.15);border-radius:8px;color:#cbd8e5;text-align:center;font-size:10px;}
#drawer-guild .guild-form{display:grid;gap:8px;}
#drawer-guild .guild-form.compact{grid-template-columns:minmax(0,1fr) 92px;align-items:end;}
#drawer-guild .guild-form.compact p{grid-column:1/-1;}
#drawer-guild .guild-form label{display:grid;gap:3px;color:#b9c8d8;font-size:8px;font-weight:900;text-transform:uppercase;}
#drawer-guild .guild-form p,#drawer-guild .guild-info p,#drawer-guild .guild-bag-card p{margin:0;color:#cbd9e6;font-size:9px;line-height:1.4;}
#drawer-guild .guild-form button,#drawer-guild .guild-info button{min-height:38px;padding:6px 10px;}
#drawer-guild .guild-form.danger{border-color:rgba(255,95,95,.34);}
#drawer-guild .guild-form.danger button,#drawer-guild .guild-leave{background:#8b3030;}
#drawer-guild .guild-leave{width:100%;height:40px;}
#drawer-guild .guild-info h3{margin:0 0 5px;color:#fff;font-size:13px;}
#drawer-guild .guild-info>b{display:block;margin:7px 0;color:#aaff43;font-size:13px;}
#drawer-guild .guild-hero h2,#drawer-guild .guild-bag-card h2{margin:3px 0;color:#fff;font-size:20px;}
#drawer-guild .guild-hero p{margin:0 0 8px;color:#dce8f5;font-size:10px;line-height:1.4;}
#drawer-guild .guild-hero>div{display:flex;gap:6px;flex-wrap:wrap;}
#drawer-guild .guild-hero span{padding:5px 7px;border-radius:5px;background:rgba(170,255,67,.1);color:#aaff43;font-size:8px;font-weight:900;}
#drawer-guild .guild-section-title{margin:11px 0 6px;color:#aaff43;font-size:11px;text-transform:uppercase;}
#drawer-guild .guild-member,#drawer-guild .guild-request,#drawer-guild .guild-ledger{display:flex;align-items:center;justify-content:space-between;gap:7px;margin-bottom:6px;padding:9px;border:1px solid rgba(255,255,255,.1);border-radius:7px;background:rgba(3,15,29,.88);}
#drawer-guild .guild-member b,#drawer-guild .guild-member span,#drawer-guild .guild-request b,#drawer-guild .guild-request span,#drawer-guild .guild-ledger b,#drawer-guild .guild-ledger span{display:block;}
#drawer-guild .guild-member b,#drawer-guild .guild-request b,#drawer-guild .guild-ledger b{color:#fff;font-size:10px;text-transform:capitalize;}
#drawer-guild .guild-member span,#drawer-guild .guild-request span,#drawer-guild .guild-ledger span{margin-top:2px;color:#91a8bc;font-size:8px;}
#drawer-guild .guild-member small{color:#aaff43;font-size:8px;font-weight:900;}
#drawer-guild .guild-request section{display:flex;gap:4px;}
#drawer-guild .guild-request button{height:30px;border:0;border-radius:5px;background:#58bd1d;color:#fff;font-size:7px;font-weight:1000;}
#drawer-guild .guild-request button.reject{background:#7a3434;}
#drawer-guild .guild-treasury-total small{display:block;color:#9db0c2;font-size:8px;font-weight:900;}
#drawer-guild .guild-treasury-total b{display:block;margin-top:3px;color:#ffd85c;font-size:22px;}
#drawer-guild .guild-ledger strong{color:#aaff43;font-size:10px;}
#drawer-guild .guild-ledger strong.negative{color:#ff9a9a;}
#drawer-guild .guild-bag-card b{display:block;margin:7px 0;color:#aaff43;font-size:15px;}
#drawer-guild .guild-confirm{position:absolute;inset:0;z-index:20;display:none;align-items:center;justify-content:center;padding:24px;background:rgba(0,0,0,.72);}
#drawer-guild .guild-confirm.show{display:flex;}
#drawer-guild .guild-confirm>div{width:100%;max-width:320px;padding:18px;border:1px solid rgba(170,255,67,.28);border-radius:8px;background:#071426;text-align:center;}
#drawer-guild .guild-confirm h3{margin:0 0 7px;color:#aaff43;font-size:18px;}
#drawer-guild .guild-confirm p{margin:0;color:#e5eef7;font-size:11px;line-height:1.4;}
#drawer-guild .guild-confirm section{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:14px;}
#drawer-guild .guild-confirm button{height:40px;border:0;border-radius:6px;background:#26384b;color:#fff;font-weight:1000;}
#drawer-guild #guildConfirmOk{background:#58bd1d;}
#drawer-guild .guild-toast{position:absolute;left:50%;bottom:16px;z-index:30;max-width:88%;padding:9px 13px;border-radius:7px;background:#205c20;color:#fff;font-size:10px;font-weight:900;opacity:0;pointer-events:none;transform:translate(-50%,12px);transition:.18s ease;}
#drawer-guild .guild-toast.error{background:#8c2525;}
#drawer-guild .guild-toast.show{opacity:1;transform:translate(-50%,0);}
#drawer-marketplace .market-scope-switch{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin-bottom:8px;}
#drawer-marketplace .item-market-card>button:disabled{opacity:.45;}
html.drivergas-web body #drawer-guild.guild-drawer{width:437px!important;height:100dvh!important;max-width:437px!important;max-height:100dvh!important;left:50%!important;top:0!important;transform:translateX(-50%) translateY(18px) scale(.985)!important;}
html.drivergas-web body #drawer-guild.guild-drawer.open{opacity:1!important;pointer-events:auto!important;transform:translateX(-50%) translateY(0) scale(1)!important;}
html.drivergas-web body #drawer-guild .guild-body{height:auto;}

.forgot-password-link{display:block;margin-top:10px;color:#9cff44;text-align:center;text-decoration:none;font-size:12px;font-weight:800;}
#drawer-profile .profile-password-form input{width:100%;box-sizing:border-box;}
#drawer-profile [data-profile-panel="account"] .locked-payout b{overflow-wrap:anywhere;}
.ranking-summary {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}

.ranking-summary strong { color: #8fff32; font-size: 13px; }
.ranking-summary span { color: rgba(255, 255, 255, .62); font-size: 11px; text-align: right; }
.ranking-list { padding: 8px 12px 20px; }

.ranking-row {
  display: grid;
  grid-template-columns: 38px 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 62px;
  padding: 8px 6px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.ranking-row.is-current { background: rgba(143, 255, 50, .09); }
.ranking-number { color: #8fff32; font-weight: 800; text-align: center; }
.ranking-row > img { width: 42px; height: 42px; object-fit: cover; border-radius: 50%; }
.ranking-player { min-width: 0; }
.ranking-player b, .ranking-player small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ranking-player b { color: #fff; font-size: 13px; }
.ranking-player small { margin-top: 3px; color: rgba(255, 255, 255, .56); font-size: 10px; }
.ranking-income { color: #fff; font-size: 13px; text-align: right; }
.ranking-income small { display: block; margin-top: 2px; color: #8fff32; font-size: 9px; }
.ranking-empty { padding: 28px 12px; color: rgba(255, 255, 255, .58); text-align: center; }
.player-transaction-list { display: grid; }
.player-transaction-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 58px; padding: 9px 0; border-bottom: 1px solid rgba(255,255,255,.08); }
.player-transaction-row div { min-width: 0; }
.player-transaction-row b, .player-transaction-row small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.player-transaction-row b { color: #fff; font-size: 12px; }
.player-transaction-row small { margin-top: 4px; color: rgba(255,255,255,.5); font-size: 9px; }
.player-transaction-row strong { color: #8fff32; font-size: 11px; text-align: right; }
.event-live-card h3 { margin: 0 0 8px; color: #8fff32; }
.event-live-card p { margin: 0 0 12px; color: rgba(255,255,255,.72); }
.event-live-card > div { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 7px; }
.event-live-card span { padding: 7px; border: 1px solid rgba(255,255,255,.1); color: #fff; font-size: 10px; text-align: center; }
.event-live-card small { display: block; margin-top: 10px; color: rgba(255,255,255,.5); }

/* ===== GUILD NETWORK - GAME UI REDESIGN ===== */
#drawer-guild.guild-drawer{
  --guild-green:#9cff43;
  --guild-green-deep:#397d1b;
  --guild-gold:#ffd45a;
  --guild-ink:#06111f;
  position:fixed !important;
  inset:0 !important;
  z-index:2147482100 !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:var(--guild-ink) !important;
  color:#fff;
}
#drawer-guild .guild-bg{position:absolute;inset:0;background:url('../backgrounds/bg_antario_city_night.webp') center/cover no-repeat;}
#drawer-guild .guild-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(1,8,18,.62) 0%,rgba(2,11,23,.90) 34%,rgba(2,10,20,.97) 100%);}
#drawer-guild .guild-head{position:relative;z-index:2;height:88px;display:grid;grid-template-columns:54px minmax(0,1fr) 46px;align-items:center;gap:10px;padding:14px 14px 8px;}
#drawer-guild .guild-title-crest{position:relative;display:grid;place-items:center;width:52px;height:58px;}
#drawer-guild .guild-title-crest::before{content:"";position:absolute;width:42px;height:42px;border:1px solid rgba(156,255,67,.5);transform:rotate(45deg);background:rgba(35,91,24,.42);box-shadow:0 0 18px rgba(126,255,53,.18);}
#drawer-guild .guild-title-crest img{position:relative;z-index:1;width:35px;height:35px;object-fit:contain;filter:drop-shadow(0 5px 7px rgba(0,0,0,.5));}
#drawer-guild .guild-head h2{margin:0;color:var(--guild-green);font-size:31px;line-height:1;font-weight:1000;letter-spacing:0;text-shadow:0 3px 0 rgba(0,0,0,.3),0 0 20px rgba(156,255,67,.2);}
#drawer-guild .guild-head p{margin:5px 0 0;color:#dce8f5;font-size:8px;line-height:1;font-weight:1000;}
#drawer-guild .guild-close{position:static !important;width:44px !important;height:44px !important;border:1px solid rgba(156,255,67,.38) !important;border-radius:50% !important;background:rgba(3,15,29,.88) !important;color:var(--guild-green) !important;font-size:29px !important;line-height:1 !important;}
#drawer-guild .guild-benefits{position:relative;z-index:2;display:grid;grid-template-columns:repeat(3,1fr);height:57px;margin:0 12px 8px !important;padding:0 !important;border:1px solid rgba(255,255,255,.1) !important;border-radius:8px !important;background:rgba(3,15,29,.82) !important;overflow:hidden;box-shadow:0 10px 20px rgba(0,0,0,.22);}
#drawer-guild .guild-benefits>div{display:grid;grid-template-columns:25px 1fr;grid-template-rows:1fr 1fr;align-items:center;padding:7px 8px;border-right:1px solid rgba(255,255,255,.08);}
#drawer-guild .guild-benefits>div:last-child{border-right:0;}
#drawer-guild .guild-benefits img{grid-row:1/3;width:21px;height:21px;object-fit:contain;}
#drawer-guild .guild-benefits span{align-self:end;margin:0 !important;color:#91a8bc !important;font-size:6px !important;font-weight:1000;line-height:1;}
#drawer-guild .guild-benefits b{align-self:start;color:var(--guild-gold) !important;font-size:14px !important;line-height:1.1;}
#drawer-guild .guild-tabs{position:relative;z-index:2;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,44px);height:100px;margin:0 !important;padding:6px 9px 8px;gap:5px;}
#drawer-guild .guild-tabs button{position:relative;display:flex;min-width:0;min-height:0 !important;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:3px 1px;border:1px solid rgba(255,255,255,.11) !important;border-radius:7px !important;background:rgba(5,20,36,.84) !important;color:#9eb0c1 !important;box-shadow:inset 0 1px rgba(255,255,255,.03);}
#drawer-guild .guild-tabs button::after{content:"";position:absolute;left:10px;right:10px;bottom:0;height:2px;background:transparent;}
#drawer-guild .guild-tabs button img{width:18px;height:18px;object-fit:contain;opacity:.68;filter:grayscale(.25);}
#drawer-guild .guild-tabs button span{font-size:6.5px;line-height:1;font-weight:1000;white-space:nowrap;}
#drawer-guild .guild-tabs button.is-active{border-color:rgba(156,255,67,.48) !important;background:rgba(45,103,24,.76) !important;color:#fff !important;box-shadow:0 0 15px rgba(117,231,43,.12),inset 0 1px rgba(255,255,255,.08);}
#drawer-guild .guild-tabs button.is-active::after{background:var(--guild-green);box-shadow:0 0 8px rgba(156,255,67,.7);}
#drawer-guild .guild-tabs button.is-active img{opacity:1;filter:none;}
#drawer-guild .guild-body{position:absolute;z-index:2;top:145px;right:0;bottom:100px;left:0;height:auto !important;padding:0 9px 8px;overflow:hidden;}
#drawer-guild .guild-panel{display:none;height:100%;overflow-y:auto;overflow-x:hidden;padding:2px 2px 28px !important;scrollbar-width:none;}
#drawer-guild .guild-panel.active{display:block;animation:guild-panel-in .18s ease-out;}
@keyframes guild-panel-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
#drawer-guild .guild-search-form{display:grid;grid-template-columns:minmax(0,1fr) 78px;gap:6px;margin:0 0 9px;padding:7px;border:1px solid rgba(255,255,255,.1);border-radius:8px;background:rgba(3,15,29,.86);}
#drawer-guild .guild-search-form input{height:38px;border-color:rgba(156,255,67,.2);background:#05101f;padding:0 11px;color:#fff;font-size:10px;font-weight:800;}
#drawer-guild .guild-search-form button{height:38px;border:0;border-radius:6px;background:linear-gradient(180deg,#8beb37,#4ea51d);color:#102902;font-size:9px;font-weight:1000;}
#drawer-guild .guild-row{position:relative;display:grid !important;grid-template-columns:48px minmax(0,1fr) 66px !important;align-items:center;gap:9px;min-height:91px;margin:0 0 7px !important;padding:9px !important;border:1px solid rgba(255,255,255,.11) !important;border-radius:8px !important;background:linear-gradient(105deg,rgba(5,21,38,.96),rgba(3,14,27,.91)) !important;overflow:hidden;box-shadow:0 9px 18px rgba(0,0,0,.2);}
#drawer-guild .guild-row::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:#4d672f;}
#drawer-guild .guild-row.promoted{border-color:rgba(255,212,90,.45) !important;box-shadow:0 9px 20px rgba(0,0,0,.24),inset 0 0 22px rgba(255,204,61,.035) !important;}
#drawer-guild .guild-row.promoted::before{background:var(--guild-gold);box-shadow:0 0 10px rgba(255,212,90,.7);}
#drawer-guild .guild-row-crest,#drawer-guild .guild-hero-crest{position:relative;display:grid;place-items:center;width:46px;height:54px;}
#drawer-guild .guild-row-crest::before,#drawer-guild .guild-hero-crest::before{content:"";position:absolute;width:37px;height:37px;transform:rotate(45deg);border:1px solid rgba(156,255,67,.38);background:rgba(49,111,25,.32);}
#drawer-guild .guild-row.promoted .guild-row-crest::before{border-color:rgba(255,212,90,.55);background:rgba(116,86,18,.3);}
#drawer-guild .guild-row-crest img,#drawer-guild .guild-hero-crest img{position:absolute;width:35px;height:35px;object-fit:contain;opacity:.82;}
#drawer-guild .guild-row-crest b,#drawer-guild .guild-hero-crest b{position:relative;z-index:1;color:#fff;font-size:9px;line-height:1;font-weight:1000;text-shadow:0 2px 4px #000;}
#drawer-guild .guild-row-copy{min-width:0;}
#drawer-guild .guild-row-copy small{display:block;color:var(--guild-green);font-size:6px;font-weight:1000;}
#drawer-guild .guild-row.promoted .guild-row-copy small{color:var(--guild-gold);}
#drawer-guild .guild-row-copy h3{margin:3px 0 2px !important;overflow:hidden;color:#fff;font-size:14px !important;line-height:1.05;text-overflow:ellipsis;white-space:nowrap;}
#drawer-guild .guild-row-copy p{display:-webkit-box;margin:0 0 5px !important;overflow:hidden;color:#aebdcc !important;font-size:8px !important;line-height:1.25 !important;-webkit-box-orient:vertical;-webkit-line-clamp:2;}
#drawer-guild .guild-row-copy span{display:block;overflow:hidden;color:#71879b !important;font-size:6px !important;font-weight:1000;text-overflow:ellipsis;white-space:nowrap;}
#drawer-guild .guild-row>button{width:66px;min-height:36px !important;padding:4px !important;border:1px solid rgba(156,255,67,.35) !important;border-radius:6px !important;background:rgba(70,145,30,.82) !important;color:#fff !important;font-size:8px !important;font-weight:1000;}
#drawer-guild .guild-notice{display:grid;grid-template-columns:minmax(0,1fr) 92px;align-items:center;gap:8px;border-color:rgba(255,212,90,.32) !important;background:rgba(54,43,15,.72) !important;}
#drawer-guild .guild-notice button{grid-column:2;grid-row:1/3;}
#drawer-guild .guild-create-intro{position:relative;padding:18px 18px 16px;text-align:center;border-bottom:1px solid rgba(156,255,67,.22);background:linear-gradient(180deg,rgba(47,106,24,.26),rgba(3,15,29,.82));}
#drawer-guild .guild-create-crest{display:grid;place-items:center;width:78px;height:78px;margin:0 auto 6px;border:1px solid rgba(156,255,67,.34);transform:rotate(45deg);background:rgba(29,78,18,.45);box-shadow:0 0 28px rgba(132,255,53,.15);}
#drawer-guild .guild-create-crest img{width:52px;height:52px;object-fit:contain;transform:rotate(-45deg);}
#drawer-guild .guild-create-intro>small{color:var(--guild-green);font-size:7px;font-weight:1000;}
#drawer-guild .guild-create-intro h2{margin:4px 0;color:#fff;font-size:24px;line-height:1;font-weight:1000;}
#drawer-guild .guild-create-intro p{max-width:290px;margin:0 auto;color:#b8c8d7;font-size:9px;line-height:1.4;}
#drawer-guild .guild-create-benefits{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin-top:13px;text-align:left;}
#drawer-guild .guild-create-benefits>div{display:grid;grid-template-columns:24px 1fr;grid-template-rows:auto auto;align-items:center;min-height:54px;padding:7px 6px;border:1px solid rgba(255,255,255,.1);border-radius:7px;background:rgba(2,12,23,.7);}
#drawer-guild .guild-create-benefits img{grid-row:1/3;width:20px;height:20px;object-fit:contain;}
#drawer-guild .guild-create-benefits b{color:var(--guild-gold);font-size:14px;line-height:1;}
#drawer-guild .guild-create-benefits span{color:#9fb1c1;font-size:5px;line-height:1.25;font-weight:1000;}
#drawer-guild .guild-owner-benefit{display:flex;align-items:center;gap:8px;margin-top:7px;padding:8px 10px;border-left:3px solid var(--guild-green);border-radius:6px;background:rgba(59,125,29,.2);text-align:left;}
#drawer-guild .guild-owner-benefit>img{width:27px;height:27px;object-fit:contain;}
#drawer-guild .guild-owner-benefit b,#drawer-guild .guild-owner-benefit span{display:block;}
#drawer-guild .guild-owner-benefit b{color:#fff;font-size:8px;}
#drawer-guild .guild-owner-benefit span{margin-top:2px;color:#aebdca;font-size:7px;line-height:1.25;}
#drawer-guild .guild-create-intro>em{display:block;margin-top:11px;color:#8297aa;font-size:6px;font-style:normal;font-weight:1000;}
#drawer-guild .guild-create-cost{display:inline-flex;align-items:center;gap:5px;margin-top:3px;color:var(--guild-gold);font-size:16px;}
#drawer-guild .guild-create-cost img,#drawer-guild .guild-upgrade-card>b img{width:21px;height:21px;object-fit:contain;}
#drawer-guild .guild-create-form{margin-top:8px !important;}
#drawer-guild .guild-form,#drawer-guild .guild-info{padding:11px !important;border:1px solid rgba(255,255,255,.11) !important;border-radius:8px !important;background:rgba(3,15,29,.9) !important;box-shadow:0 8px 16px rgba(0,0,0,.16);}
#drawer-guild .guild-form label{color:#93a8bb !important;font-size:7px !important;letter-spacing:0 !important;}
#drawer-guild .guild-form input,#drawer-guild .guild-form select,#drawer-guild .guild-form textarea{border-color:rgba(255,255,255,.12);background:#061321;color:#fff;font-size:10px;text-transform:none;}
#drawer-guild .guild-form button,#drawer-guild .guild-info button{background:linear-gradient(180deg,#89e936,#4ba31b) !important;color:#102902 !important;font-weight:1000 !important;}
#drawer-guild .guild-form.danger button,#drawer-guild .guild-leave{background:linear-gradient(180deg,#a84242,#712828) !important;color:#fff !important;}
#drawer-guild .guild-hero{padding:0 !important;overflow:hidden;border:1px solid rgba(156,255,67,.25) !important;background:linear-gradient(145deg,rgba(35,87,21,.52),rgba(3,15,29,.94) 58%) !important;box-shadow:0 13px 25px rgba(0,0,0,.25) !important;}
#drawer-guild .guild-hero-main{display:grid;grid-template-columns:64px minmax(0,1fr);align-items:center;gap:10px;padding:14px 14px 10px;}
#drawer-guild .guild-hero-crest{width:60px;height:68px;}
#drawer-guild .guild-hero-crest::before{width:48px;height:48px;}
#drawer-guild .guild-hero-crest img{width:45px;height:45px;}
#drawer-guild .guild-hero-crest b{font-size:11px;}
#drawer-guild .guild-hero-main small{color:var(--guild-green);font-size:7px;font-weight:1000;}
#drawer-guild .guild-hero-main h2{margin:3px 0 4px !important;font-size:21px !important;line-height:1;}
#drawer-guild .guild-hero-main p{display:-webkit-box;margin:0 !important;overflow:hidden;color:#b9c8d5 !important;font-size:9px !important;-webkit-box-orient:vertical;-webkit-line-clamp:2;}
#drawer-guild .guild-hero-stats{display:grid !important;grid-template-columns:1fr 1fr;gap:0 !important;border-top:1px solid rgba(255,255,255,.09);}
#drawer-guild .guild-hero-stats span{display:grid !important;grid-template-columns:27px 1fr;grid-template-rows:1fr 1fr;align-items:center;padding:9px 13px !important;border-radius:0 !important;background:rgba(1,10,20,.46) !important;}
#drawer-guild .guild-hero-stats span:first-child{border-right:1px solid rgba(255,255,255,.08);}
#drawer-guild .guild-hero-stats img{grid-row:1/3;width:23px;height:23px;object-fit:contain;}
#drawer-guild .guild-hero-stats b{color:#fff;font-size:14px;line-height:1;}
#drawer-guild .guild-hero-stats small{color:#8196aa;font-size:6px;font-weight:1000;}
#drawer-guild .guild-section-title{display:flex;align-items:center;gap:7px;margin:12px 2px 7px !important;color:var(--guild-green) !important;font-size:9px !important;}
#drawer-guild .guild-section-title::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,rgba(156,255,67,.35),transparent);}
#drawer-guild .guild-member{display:grid !important;grid-template-columns:38px minmax(0,1fr) auto;min-height:57px;padding:8px 10px !important;background:linear-gradient(90deg,rgba(5,22,39,.94),rgba(3,14,27,.89)) !important;}
#drawer-guild .guild-member-avatar{display:grid;place-items:center;width:34px;height:34px;border:1px solid rgba(156,255,67,.24);border-radius:50%;background:rgba(44,105,24,.3);}
#drawer-guild .guild-member-avatar img{width:22px;height:22px;object-fit:contain;}
#drawer-guild .guild-member-copy{min-width:0;}
#drawer-guild .guild-member-copy b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
#drawer-guild .guild-member>small{padding:5px 7px;border-radius:5px;background:rgba(156,255,67,.1);}
#drawer-guild .guild-panel[data-guild-panel="chat"]{display:none;grid-template-rows:minmax(0,1fr) auto;gap:8px;}
#drawer-guild .guild-panel[data-guild-panel="chat"].active{display:grid;}
#drawer-guild #guildChat{min-height:0;height:100%;display:flex;flex-direction:column;gap:8px;}
#drawer-guild .guild-chat-box{min-height:0;overflow-y:auto;padding:8px;border:1px solid rgba(156,255,67,.16);border-radius:8px;background:rgba(3,15,29,.74);scrollbar-width:none;}
#drawer-guild #guildChat .guild-chat-box{flex:1;}
#drawer-guild .guild-chat-box::-webkit-scrollbar{display:none;}
#drawer-guild .guild-chat-message{max-width:86%;margin:0 0 7px;padding:8px 9px;border:1px solid rgba(255,255,255,.10);border-radius:8px;background:rgba(6,25,43,.92);}
#drawer-guild .guild-chat-message.mine{margin-left:auto;border-color:rgba(156,255,67,.28);background:linear-gradient(135deg,rgba(37,96,25,.92),rgba(5,28,33,.92));}
#drawer-guild .guild-chat-message>div{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:4px;}
#drawer-guild .guild-chat-message b{min-width:0;color:#fff;font-size:9px;font-weight:1000;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
#drawer-guild .guild-chat-message em{flex:0 0 auto;padding:3px 5px;border-radius:5px;background:rgba(255,95,95,.13);color:#ffb5b5;font-size:7px;font-style:normal;font-weight:1000;}
#drawer-guild .guild-chat-message small{flex:0 0 auto;color:#8aa0b5;font-size:7px;font-weight:900;}
#drawer-guild .guild-chat-message p{margin:0;color:#eaf6ff;font-size:10px;line-height:1.35;font-weight:800;overflow-wrap:anywhere;}
#drawer-guild .guild-chat-tools{display:flex;flex-wrap:wrap;gap:5px;margin-top:7px;}
#drawer-guild .guild-chat-tools button,#drawer-guild .guild-chat-blocked button{min-height:23px;border:1px solid rgba(255,255,255,.12);border-radius:6px;background:rgba(255,255,255,.07);color:#dce8f5;padding:0 7px;font-size:7px;font-weight:1000;}
#drawer-guild .guild-chat-tools button.danger{border-color:rgba(255,95,95,.28);color:#ffb5b5;}
#drawer-guild .guild-chat-blocked{display:flex;align-items:center;gap:5px;min-height:31px;overflow-x:auto;padding:5px 7px;border:1px solid rgba(255,255,255,.10);border-radius:8px;background:rgba(3,15,29,.82);scrollbar-width:none;}
#drawer-guild .guild-chat-blocked::-webkit-scrollbar{display:none;}
#drawer-guild .guild-chat-blocked small{flex:0 0 auto;color:#91a8bc;font-size:7px;font-weight:1000;}
#drawer-guild .guild-chat-blocked button{flex:0 0 auto;color:#9cff44;border-color:rgba(156,255,67,.22);}
#drawer-guild .guild-chat-form{display:grid;grid-template-columns:minmax(0,1fr) 70px;gap:6px;padding:7px;border:1px solid rgba(255,255,255,.10);border-radius:8px;background:rgba(3,15,29,.90);}
#drawer-guild .guild-chat-form input{height:36px;border:1px solid rgba(156,255,67,.20);border-radius:7px;background:#05101f;color:#fff;padding:0 10px;font-size:10px;font-weight:900;outline:none;}
#drawer-guild .guild-chat-form button{height:36px;border:0;border-radius:7px;background:linear-gradient(180deg,#8beb37,#4ea51d);color:#102902;font-size:9px;font-weight:1000;}
#drawer-guild .guild-treasury-total{display:flex !important;align-items:center;justify-content:center;gap:12px;min-height:104px;border-color:rgba(255,212,90,.32) !important;background:radial-gradient(circle at 35% 45%,rgba(111,82,18,.35),rgba(3,15,29,.94) 62%) !important;text-align:left;}
#drawer-guild .guild-treasury-total>img{width:54px;height:54px;object-fit:contain;filter:drop-shadow(0 8px 12px rgba(0,0,0,.35));}
#drawer-guild .guild-treasury-total small{font-size:7px !important;}
#drawer-guild .guild-treasury-total b{display:inline !important;margin:2px 4px 0 0 !important;color:var(--guild-gold) !important;font-size:25px !important;line-height:1;}
#drawer-guild .guild-treasury-total span{color:#aebdca;font-size:7px;font-weight:1000;}
#drawer-guild .guild-ledger{min-height:51px;background:rgba(3,15,29,.86) !important;}
#drawer-guild .guild-bag-card{display:grid !important;grid-template-columns:110px minmax(0,1fr);align-items:center;gap:12px;min-height:145px;padding:14px !important;border-color:rgba(156,255,67,.3) !important;background:linear-gradient(120deg,rgba(38,91,22,.48),rgba(3,15,29,.94) 62%) !important;}
#drawer-guild .guild-bag-visual{position:relative;display:grid;place-items:center;width:100px;height:100px;}
#drawer-guild .guild-bag-visual::before{content:"";position:absolute;width:76px;height:76px;border:2px solid rgba(156,255,67,.38);border-radius:50%;box-shadow:0 0 24px rgba(156,255,67,.13),inset 0 0 22px rgba(156,255,67,.08);}
#drawer-guild .guild-bag-visual img{position:relative;width:63px;height:63px;object-fit:contain;filter:drop-shadow(0 10px 12px rgba(0,0,0,.4));}
#drawer-guild .guild-bag-visual i{position:absolute;right:4px;bottom:8px;display:grid;place-items:center;min-width:35px;height:25px;padding:0 5px;border:1px solid rgba(255,212,90,.48);border-radius:6px;background:#604815;color:var(--guild-gold);font-size:10px;font-style:normal;font-weight:1000;}
#drawer-guild .guild-bag-card h2{font-size:18px !important;}
#drawer-guild .guild-bag-card b{font-size:10px !important;}
#drawer-guild .guild-upgrade-card>small{color:var(--guild-green);font-size:7px;font-weight:1000;}
#drawer-guild .guild-upgrade-card>b{display:flex !important;align-items:center;gap:5px;}
#drawer-guild .guild-confirm{backdrop-filter:blur(4px);}
#drawer-guild .guild-confirm>div{border-color:rgba(156,255,67,.38) !important;background:linear-gradient(180deg,#0a1d2e,#05111f) !important;box-shadow:0 24px 60px rgba(0,0,0,.55);}
html.drivergas-web body #drawer-guild.guild-drawer{width:437px !important;height:100dvh !important;max-width:437px !important;max-height:100dvh !important;left:50% !important;right:auto !important;top:0 !important;bottom:auto !important;transform:translateX(-50%) translateY(18px) scale(.985) !important;}
html.drivergas-web body #drawer-guild.guild-drawer.open{transform:translateX(-50%) translateY(0) scale(1) !important;}
html.drivergas-web body #drawer-guild .guild-body{height:auto !important;}
@media (max-height:680px){
  #drawer-guild .guild-head{height:76px;padding-top:8px;}
  #drawer-guild .guild-benefits{height:49px;}
  #drawer-guild .guild-tabs{height:96px;}
  #drawer-guild .guild-body{height:auto !important;}
}
@media (prefers-reduced-motion:reduce){#drawer-guild .guild-panel.active{animation:none;}}

/* Guild drawer state: closed must never render or intercept dashboard input. */
#drawer-guild.guild-drawer{
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
  transform:translateY(18px) scale(.985) !important;
  transition:opacity .2s ease,transform .26s cubic-bezier(.18,.9,.22,1),visibility 0s linear .26s !important;
}
#drawer-guild.guild-drawer.open{
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
  transform:translateY(0) scale(1) !important;
  transition-delay:0s !important;
}
#drawer-guild.guild-drawer.closing{
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
}
html.drivergas-web body #drawer-guild.guild-drawer{
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
  transform:translateX(-50%) translateY(18px) scale(.985) !important;
}
html.drivergas-web body #drawer-guild.guild-drawer.open{
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
  transform:translateX(-50%) translateY(0) scale(1) !important;
}

/* Stable portrait composition for phones, WebView safe areas, and desktop frame. */
#drawer-guild.guild-drawer{
  --guild-safe-top:env(safe-area-inset-top,0px);
  --guild-safe-bottom:env(safe-area-inset-bottom,0px);
}
#drawer-guild.guild-drawer,
#drawer-guild.guild-drawer *{
  box-sizing:border-box;
}
#drawer-guild .guild-head{
  height:calc(82px + var(--guild-safe-top)) !important;
  padding:calc(10px + var(--guild-safe-top)) 12px 7px !important;
}
#drawer-guild .guild-benefits{
  height:56px !important;
  margin:0 10px 7px !important;
}
#drawer-guild .guild-tabs{
  position:absolute !important;
  left:0 !important;
  right:0 !important;
  bottom:0 !important;
  height:calc(100px + var(--guild-safe-bottom)) !important;
  padding:6px 9px calc(8px + var(--guild-safe-bottom)) !important;
  background:rgba(2,10,20,.97);
  border-top:1px solid rgba(255,255,255,.1);
  box-shadow:0 -10px 22px rgba(0,0,0,.3);
}
#drawer-guild .guild-body,
html.drivergas-web body #drawer-guild .guild-body{
  position:absolute !important;
  top:calc(145px + var(--guild-safe-top)) !important;
  right:0 !important;
  bottom:calc(100px + var(--guild-safe-bottom)) !important;
  left:0 !important;
  width:auto !important;
  height:auto !important;
  padding:0 9px 8px !important;
}
#drawer-guild .guild-join-benefits{margin-bottom:8px;padding:10px;border:1px solid rgba(156,255,67,.28);border-radius:8px;background:linear-gradient(120deg,rgba(42,99,23,.48),rgba(3,15,29,.94) 62%);box-shadow:0 9px 18px rgba(0,0,0,.2);}
#drawer-guild .guild-join-benefit-title{display:flex;align-items:center;gap:8px;padding-bottom:8px;border-bottom:1px solid rgba(255,255,255,.08);}
#drawer-guild .guild-join-benefit-title>img{width:32px;height:32px;object-fit:contain;}
#drawer-guild .guild-join-benefit-title small,#drawer-guild .guild-join-benefit-title b{display:block;}
#drawer-guild .guild-join-benefit-title small{color:var(--guild-green);font-size:6px;font-weight:1000;}
#drawer-guild .guild-join-benefit-title b{margin-top:2px;color:#fff;font-size:11px;line-height:1;}
#drawer-guild .guild-join-benefit-stats{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:8px;}
#drawer-guild .guild-join-benefit-stats span{display:grid;grid-template-columns:28px 1fr;grid-template-rows:auto auto;align-items:center;padding:7px;border-radius:7px;background:rgba(1,10,20,.52);}
#drawer-guild .guild-join-benefit-stats img{grid-row:1/3;width:23px;height:23px;object-fit:contain;}
#drawer-guild .guild-join-benefit-stats b{color:var(--guild-gold);font-size:15px;line-height:1;}
#drawer-guild .guild-join-benefit-stats small{color:#92a7b9;font-size:6px;font-weight:1000;}
#drawer-guild .guild-join-benefits>p{margin:8px 0 0;color:#b9c8d6;font-size:8px;line-height:1.35;text-align:center;}
@media (max-width:380px){
  #drawer-guild .guild-head{grid-template-columns:46px minmax(0,1fr) 42px !important;gap:7px !important;}
  #drawer-guild .guild-title-crest{transform:scale(.86);transform-origin:center;}
  #drawer-guild .guild-head h2{font-size:27px;}
  #drawer-guild .guild-benefits>div{grid-template-columns:21px 1fr;padding:6px 5px;}
  #drawer-guild .guild-benefits img{width:18px;height:18px;}
  #drawer-guild .guild-row{grid-template-columns:42px minmax(0,1fr) 58px !important;gap:6px !important;padding:8px 7px !important;}
  #drawer-guild .guild-row-crest{transform:scale(.88);transform-origin:center;}
  #drawer-guild .guild-row>button{width:58px !important;font-size:7px !important;}
  #drawer-guild .guild-create-benefits{grid-template-columns:1fr;}
  #drawer-guild .guild-create-benefits>div{min-height:43px;}
}

/* Android WebView already scales .antario-phone from the 437px game canvas. */
html.drivergas-app body #drawer-guild.guild-drawer{
  --guild-safe-top:0px;
  --guild-safe-bottom:0px;
  position:fixed !important;
  inset:auto !important;
  left:0 !important;
  top:0 !important;
  right:auto !important;
  bottom:auto !important;
  width:437px !important;
  min-width:437px !important;
  max-width:437px !important;
  height:100% !important;
  min-height:757px !important;
  max-height:none !important;
  transform-origin:top left !important;
  transform:translateY(18px) scale(.985) !important;
}
html.drivergas-app body #drawer-guild.guild-drawer.open{
  transform:translateY(0) scale(1) !important;
}
html.drivergas-app body #drawer-guild .guild-head{
  height:82px !important;
  padding:10px 12px 7px !important;
  grid-template-columns:54px minmax(0,1fr) 46px !important;
  gap:10px !important;
}
html.drivergas-app body #drawer-guild .guild-title-crest{transform:none !important;}
html.drivergas-app body #drawer-guild .guild-head h2{font-size:31px !important;}
html.drivergas-app body #drawer-guild .guild-benefits{
  height:56px !important;
  margin:0 10px 7px !important;
}
html.drivergas-app body #drawer-guild .guild-benefits>div{grid-template-columns:25px 1fr !important;padding:7px 8px !important;}
html.drivergas-app body #drawer-guild .guild-benefits img{width:21px !important;height:21px !important;}
html.drivergas-app body #drawer-guild .guild-tabs{
  height:100px !important;
  padding:6px 9px 8px !important;
}
html.drivergas-app body #drawer-guild .guild-body{
  top:145px !important;
  bottom:100px !important;
  width:auto !important;
  height:auto !important;
}
html.drivergas-app body #drawer-guild .guild-row{grid-template-columns:48px minmax(0,1fr) 66px !important;gap:9px !important;padding:9px !important;}
html.drivergas-app body #drawer-guild .guild-row-crest{transform:none !important;}
html.drivergas-app body #drawer-guild .guild-row>button{width:66px !important;font-size:8px !important;}
html.drivergas-app body #drawer-guild .guild-create-benefits{grid-template-columns:repeat(3,1fr) !important;}
html.drivergas-app body #drawer-guild .guild-create-benefits>div{min-height:54px !important;}

/* Guild canvas sizing: mirrors Garage and Membership on every viewport. */
#drawer-guild.guild-drawer{
  inset:auto !important;
  width:437px !important;
  min-width:0 !important;
  overflow:hidden !important;
}
#drawer-guild .guild-head{
  height:82px !important;
  padding:10px 12px 7px !important;
  grid-template-columns:54px minmax(0,1fr) 46px !important;
  gap:10px !important;
}
#drawer-guild .guild-title-crest{
  transform:none !important;
}
#drawer-guild .guild-head h2{
  font-size:31px !important;
}
#drawer-guild .guild-benefits{
  height:56px !important;
  margin:0 10px 7px !important;
}
#drawer-guild .guild-benefits>div{
  grid-template-columns:25px minmax(0,1fr) !important;
  padding:7px 8px !important;
}
#drawer-guild .guild-benefits img{
  width:21px !important;
  height:21px !important;
}
#drawer-guild .guild-tabs{
  height:100px !important;
  padding:6px 9px 8px !important;
}
#drawer-guild .guild-body,
html.drivergas-web body #drawer-guild .guild-body,
html.drivergas-app body #drawer-guild .guild-body{
  top:145px !important;
  right:0 !important;
  bottom:100px !important;
  left:0 !important;
  width:auto !important;
  height:auto !important;
  min-height:0 !important;
}
#drawer-guild .guild-row,
html.drivergas-app body #drawer-guild .guild-row{
  grid-template-columns:48px minmax(0,1fr) 66px !important;
  gap:9px !important;
  padding:9px !important;
}

#drawer-guild .guild-row-crest{
  transform:none !important;
}
#drawer-guild .guild-row>button{
  width:66px !important;
  font-size:8px !important;
}
#drawer-guild .guild-create-benefits{
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
}
#drawer-guild .guild-create-benefits>div{
  min-height:54px !important;
}

/* Compact vehicle shop details with the actual maximum-duration payout. */
#drawer-shop .vehicle-sale-card h4{
  margin:0 0 4px !important;
  font-size:18px !important;
  line-height:1.05 !important;
}
#drawer-shop .vehicle-sale-card p{
  margin:0 0 4px !important;
  font-size:11px !important;
  line-height:1.2 !important;
}
#drawer-shop .vehicle-sale-card .vehicle-work-reward{
  display:block !important;
  margin:0 0 4px !important;
  color:#fff !important;
  font-size:12px !important;
  line-height:1.2 !important;
  font-weight:1000 !important;
}
#drawer-shop .vehicle-sale-card span{
  font-size:11px !important;
  line-height:1.2 !important;
}
@media (max-width:390px){
  #drawer-shop .vehicle-sale-card h4{font-size:16px !important;}
  #drawer-shop .vehicle-sale-card p,
  #drawer-shop .vehicle-sale-card .vehicle-work-reward,
  #drawer-shop .vehicle-sale-card span{font-size:10px !important;}
}

/* ===== JOB START INFO MODAL OK - REAL FIX ===== */
.game-message-modal{display:none !important;}
.game-message-modal.show{position:fixed !important;inset:0 !important;z-index:2147483000 !important;display:flex !important;align-items:center !important;justify-content:center !important;padding:18px !important;background:rgba(0,0,0,.30) !important;}
.game-message-modal .game-message-box{width:min(84vw,280px) !important;max-width:280px !important;padding:16px 15px 14px !important;border-radius:18px !important;background:linear-gradient(180deg,rgba(7,28,18,.98),rgba(3,11,23,.98)) !important;border:1px solid rgba(145,255,70,.42) !important;box-shadow:0 18px 44px rgba(0,0,0,.60) !important;text-align:center !important;}
.game-message-modal .game-message-icon{display:none !important;}
.game-message-modal small{display:block !important;margin:0 0 4px !important;color:#9cff44 !important;font-size:10px !important;line-height:1.1 !important;font-weight:900 !important;letter-spacing:.08em !important;}
.game-message-modal h2{margin:0 0 8px !important;color:#fff !important;font-size:17px !important;line-height:1.1 !important;font-weight:1000 !important;}
.game-message-modal p{margin:0 0 12px !important;color:#f4fbff !important;font-size:14px !important;line-height:1.3 !important;font-weight:800 !important;overflow-wrap:anywhere !important;}
.game-message-modal .game-message-actions{display:flex !important;justify-content:center !important;gap:8px !important;}
.game-message-modal button{min-width:82px !important;height:36px !important;padding:0 16px !important;border:0 !important;border-radius:12px !important;background:linear-gradient(180deg,#9cff44,#50ba16) !important;color:#fff !important;font-size:14px !important;line-height:1 !important;font-weight:1000 !important;text-transform:uppercase !important;}
.game-message-modal:not(.is-confirm) .game-message-cancel{display:none !important;}
#jobInfoModal.job-info-modal{display:none !important;}
#jobInfoModal.job-info-modal.show{position:fixed !important;inset:0 !important;z-index:2147483600 !important;display:flex !important;align-items:center !important;justify-content:center !important;padding:calc(env(safe-area-inset-top,0px) + 16px) 18px calc(env(safe-area-inset-bottom,0px) + 16px) !important;background:rgba(0,0,0,.26) !important;}
#jobInfoModal .job-info-box{width:min(82vw,270px) !important;max-width:270px !important;padding:16px 15px 14px !important;border-radius:18px !important;background:linear-gradient(180deg,rgba(7,28,18,.99),rgba(3,11,23,.99)) !important;border:1px solid rgba(145,255,70,.52) !important;box-shadow:0 22px 54px rgba(0,0,0,.62), inset 0 1px 0 rgba(255,255,255,.08) !important;text-align:center !important;transform:translateY(-18px) !important;}
#jobInfoModal .job-info-label{margin:0 0 8px !important;color:#9cff44 !important;font-size:11px !important;line-height:1 !important;font-weight:1000 !important;letter-spacing:.08em !important;text-transform:uppercase !important;}
#jobInfoModal #jobInfoText{margin:0 0 13px !important;padding:0 !important;color:#f4fbff !important;font-size:15px !important;line-height:1.28 !important;font-weight:900 !important;text-align:center !important;overflow-wrap:anywhere !important;}
#jobInfoModal #jobInfoOkBtn{min-width:94px !important;height:38px !important;padding:0 20px !important;border:0 !important;border-radius:12px !important;background:linear-gradient(180deg,#9cff44,#50ba16) !important;color:#fff !important;font-size:15px !important;line-height:1 !important;font-weight:1000 !important;text-transform:uppercase !important;box-shadow:0 10px 22px rgba(69,190,22,.28) !important;}

/* Guild Inventory shared storage */
#drawer-guild .guild-storage-row{
  display:grid;
  grid-template-columns:42px minmax(0,1fr) 64px 74px;
  align-items:center;
  gap:7px;
  margin-bottom:7px;
  padding:9px;
  border:1px solid rgba(255,255,255,.11);
  border-radius:8px;
  background:rgba(3,15,29,.88);
}
#drawer-guild .guild-storage-row.owner{
  grid-template-columns:42px minmax(0,1fr) 96px 58px 62px;
}
#drawer-guild .guild-storage-row.view-only{
  grid-template-columns:42px minmax(0,1fr) 54px;
}
#drawer-guild .guild-storage-row>img{
  width:42px;
  height:42px;
  object-fit:contain;
  filter:drop-shadow(0 7px 10px rgba(0,0,0,.34));
}
#drawer-guild .guild-storage-row b{
  display:block;
  overflow:hidden;
  color:#fff;
  font-size:10px;
  font-weight:1000;
  line-height:1.12;
  text-overflow:ellipsis;
  white-space:nowrap;
}
#drawer-guild .guild-storage-row span{
  display:block;
  margin-top:2px;
  color:#91a8bc;
  font-size:8px;
  font-weight:800;
  line-height:1.2;
}
#drawer-guild .guild-storage-row label{
  display:grid;
  gap:2px;
  color:#9eb0c1;
  font-size:7px;
  font-weight:1000;
  text-transform:uppercase;
}
#drawer-guild .guild-storage-row input,
#drawer-guild .guild-storage-row select{
  height:32px;
  min-width:0;
  padding:0 6px;
  border:1px solid rgba(255,255,255,.13);
  border-radius:6px;
  background:#061321;
  color:#fff;
  font-size:9px;
  font-weight:900;
}
#drawer-guild .guild-storage-row button{
  height:32px;
  border:0;
  border-radius:6px;
  background:linear-gradient(180deg,#89e936,#4ba31b);
  color:#102902;
  font-size:8px;
  font-weight:1000;
}
#drawer-guild .guild-storage-row strong{
  color:#aaff43;
  font-size:10px;
  font-weight:1000;
  text-align:right;
}
@media (max-width:420px){
  #drawer-guild .guild-storage-row,
  #drawer-guild .guild-storage-row.owner{
    grid-template-columns:38px minmax(0,1fr) 58px;
  }
  #drawer-guild .guild-storage-row.owner label:first-of-type,
  #drawer-guild .guild-storage-row.owner button,
  #drawer-guild .guild-storage-row button{
    grid-column:auto;
  }
  #drawer-guild .guild-storage-row.owner label:first-of-type{
    grid-column:2 / -1;
  }
}

/* Guild Storage portrait fix: keep deposit/withdraw rows the same narrow portrait size as other guild cards. */
#drawer-guild #guildBag,
#drawer-guild .guild-panel[data-guild-panel="bag"]{
  max-width:100% !important;
  overflow-x:hidden !important;
}
#drawer-guild .guild-storage-row{
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  overflow:hidden !important;
  align-items:center !important;
}
#drawer-guild .guild-storage-row>div{
  min-width:0 !important;
  overflow:hidden !important;
}
#drawer-guild .guild-storage-row[data-guild-form="bag_deposit"]{
  grid-template-columns:38px minmax(0,1fr) 76px !important;
  grid-template-rows:auto auto !important;
  gap:7px !important;
}
#drawer-guild .guild-storage-row[data-guild-form="bag_deposit"]>img{
  grid-column:1 !important;
  grid-row:1 !important;
  width:38px !important;
  height:38px !important;
}
#drawer-guild .guild-storage-row[data-guild-form="bag_deposit"]>div{
  grid-column:2 / -1 !important;
  grid-row:1 !important;
}
#drawer-guild .guild-storage-row[data-guild-form="bag_deposit"]>label{
  grid-column:1 / 3 !important;
  grid-row:2 !important;
}
#drawer-guild .guild-storage-row[data-guild-form="bag_deposit"]>button{
  grid-column:3 !important;
  grid-row:2 !important;
  width:100% !important;
}
#drawer-guild .guild-storage-row.owner[data-guild-form="bag_withdraw"]{
  grid-template-columns:38px minmax(0,1fr) 76px !important;
  grid-template-rows:auto auto auto !important;
  gap:7px !important;
}
#drawer-guild .guild-storage-row.owner[data-guild-form="bag_withdraw"]>img{
  grid-column:1 !important;
  grid-row:1 !important;
  width:38px !important;
  height:38px !important;
}
#drawer-guild .guild-storage-row.owner[data-guild-form="bag_withdraw"]>div{
  grid-column:2 / -1 !important;
  grid-row:1 !important;
}
#drawer-guild .guild-storage-row.owner[data-guild-form="bag_withdraw"]>label:first-of-type{
  grid-column:1 / -1 !important;
  grid-row:2 !important;
}
#drawer-guild .guild-storage-row.owner[data-guild-form="bag_withdraw"]>label:nth-of-type(2){
  grid-column:1 / 3 !important;
  grid-row:3 !important;
}
#drawer-guild .guild-storage-row.owner[data-guild-form="bag_withdraw"]>button{
  grid-column:3 !important;
  grid-row:3 !important;
  width:100% !important;
}
#drawer-guild .guild-storage-row.view-only[data-guild-form="bag_withdraw"]{
  grid-template-columns:38px minmax(0,1fr) 50px !important;
  grid-template-rows:auto !important;
}
#drawer-guild .guild-storage-row.view-only[data-guild-form="bag_withdraw"]>img{
  width:38px !important;
  height:38px !important;
}
#drawer-guild .guild-storage-row.view-only[data-guild-form="bag_withdraw"]>strong{
  justify-self:end !important;
}
#drawer-guild .guild-storage-row input,
#drawer-guild .guild-storage-row select,
#drawer-guild .guild-storage-row button{
  max-width:100% !important;
}

/* Guild Storage compact real fix: storage must follow the same portrait scale as other item cards. */
#drawer-guild .guild-panel[data-guild-panel="bag"],
#drawer-guild #guildBag{
  overflow-x:hidden !important;
}
#drawer-guild .guild-bag-card{
  grid-template-columns:52px minmax(0,1fr) !important;
  gap:8px !important;
  min-height:0 !important;
  padding:10px !important;
  align-items:center !important;
}
#drawer-guild .guild-bag-visual{
  width:46px !important;
  height:46px !important;
}
#drawer-guild .guild-bag-visual::before{
  width:38px !important;
  height:38px !important;
  border-width:1px !important;
  box-shadow:0 0 13px rgba(156,255,67,.12), inset 0 0 10px rgba(156,255,67,.06) !important;
}
#drawer-guild .guild-bag-visual img{
  width:30px !important;
  height:30px !important;
  max-width:30px !important;
  max-height:30px !important;
}
#drawer-guild .guild-bag-visual i{
  right:-2px !important;
  bottom:0 !important;
  min-width:24px !important;
  height:17px !important;
  padding:0 3px !important;
  border-radius:5px !important;
  font-size:7px !important;
}
#drawer-guild .guild-bag-card h2{
  margin:2px 0 !important;
  font-size:14px !important;
  line-height:1.05 !important;
}
#drawer-guild .guild-bag-card b{
  margin:4px 0 !important;
  font-size:8px !important;
}
#drawer-guild .guild-bag-card p{
  font-size:8px !important;
  line-height:1.25 !important;
}
#drawer-guild .guild-storage-row,
#drawer-guild .guild-storage-row.owner,
#drawer-guild .guild-storage-row.view-only,
#drawer-guild .guild-storage-row[data-guild-form="bag_deposit"],
#drawer-guild .guild-storage-row.owner[data-guild-form="bag_withdraw"],
#drawer-guild .guild-storage-row.view-only[data-guild-form="bag_withdraw"]{
  padding:8px !important;
  gap:6px !important;
  border-radius:8px !important;
}
#drawer-guild .guild-storage-row[data-guild-form="bag_deposit"]{
  grid-template-columns:32px minmax(0,1fr) 70px !important;
}
#drawer-guild .guild-storage-row.owner[data-guild-form="bag_withdraw"]{
  grid-template-columns:32px minmax(0,1fr) 70px !important;
}
#drawer-guild .guild-storage-row.view-only[data-guild-form="bag_withdraw"]{
  grid-template-columns:32px minmax(0,1fr) 44px !important;
}
#drawer-guild .guild-storage-row>img,
#drawer-guild .guild-storage-row[data-guild-form="bag_deposit"]>img,
#drawer-guild .guild-storage-row.owner[data-guild-form="bag_withdraw"]>img,
#drawer-guild .guild-storage-row.view-only[data-guild-form="bag_withdraw"]>img{
  width:32px !important;
  height:32px !important;
  max-width:32px !important;
  max-height:32px !important;
  object-fit:contain !important;
  align-self:center !important;
}
#drawer-guild .guild-storage-row b{
  font-size:9px !important;
  line-height:1.12 !important;
}
#drawer-guild .guild-storage-row span{
  font-size:7px !important;
  line-height:1.15 !important;
}
#drawer-guild .guild-storage-row label{
  font-size:6.5px !important;
  gap:2px !important;
}
#drawer-guild .guild-storage-row input,
#drawer-guild .guild-storage-row select{
  height:29px !important;
  padding:0 6px !important;
  font-size:8px !important;
}
#drawer-guild .guild-storage-row button{
  height:29px !important;
  font-size:7px !important;
}
#drawer-guild .guild-section-title{
  margin-top:9px !important;
  margin-bottom:6px !important;
}

/* GUILD BAG HARD FIX: prevent any bag/storage icon from rendering at natural huge size in WebView. */
#drawer-guild .guild-panel[data-guild-panel="bag"],
#drawer-guild #guildBag{
  width:100% !important;
  max-width:100% !important;
  overflow-x:hidden !important;
}
#drawer-guild #guildBag .guild-bag-card{
  display:grid !important;
  grid-template-columns:44px minmax(0,1fr) !important;
  align-items:center !important;
  gap:8px !important;
  width:100% !important;
  max-width:100% !important;
  min-height:0 !important;
  padding:10px !important;
  overflow:hidden !important;
}
#drawer-guild #guildBag .guild-bag-card *{
  min-width:0 !important;
}
#drawer-guild #guildBag .guild-bag-visual{
  position:relative !important;
  display:grid !important;
  place-items:center !important;
  width:38px !important;
  height:38px !important;
  max-width:38px !important;
  max-height:38px !important;
  overflow:hidden !important;
}
#drawer-guild #guildBag .guild-bag-visual::before{
  width:34px !important;
  height:34px !important;
  border-width:1px !important;
}
#drawer-guild #guildBag .guild-bag-visual img,
#drawer-guild #guildBag img.guild-bag-visual-img{
  position:relative !important;
  display:block !important;
  width:28px !important;
  height:28px !important;
  max-width:28px !important;
  max-height:28px !important;
  object-fit:contain !important;
  transform:none !important;
}
#drawer-guild #guildBag .guild-bag-visual i{
  right:0 !important;
  bottom:0 !important;
  min-width:20px !important;
  height:15px !important;
  padding:0 3px !important;
  font-size:7px !important;
  line-height:15px !important;
}
#drawer-guild #guildBag .guild-storage-row,
#drawer-guild #guildBag .guild-storage-row.owner,
#drawer-guild #guildBag .guild-storage-row.view-only{
  width:100% !important;
  max-width:100% !important;
  box-sizing:border-box !important;
  overflow:hidden !important;
}
#drawer-guild #guildBag .guild-storage-row > img,
#drawer-guild #guildBag img.guild-storage-icon{
  display:block !important;
  width:30px !important;
  height:30px !important;
  max-width:30px !important;
  max-height:30px !important;
  object-fit:contain !important;
  transform:none !important;
}
#drawer-guild #guildBag img:not(.guild-bag-visual-img):not(.guild-storage-icon){
  max-width:30px !important;
  max-height:30px !important;
  object-fit:contain !important;
}

/* Marketplace pagination */
#drawer-marketplace .item-market-pagination{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  margin:10px 0 2px;
}
#drawer-marketplace .item-market-pagination:empty{display:none;}
#drawer-marketplace .item-market-pagination button{
  min-width:62px;
  height:32px;
  border:1px solid rgba(170,255,67,.22);
  border-radius:7px;
  background:#10243a;
  color:#fff;
  font-size:9px;
  font-weight:1000;
}
#drawer-marketplace .item-market-pagination button:disabled{
  opacity:.4;
}
#drawer-marketplace .item-market-pagination span{
  min-width:68px;
  text-align:center;
  color:#aaff43;
  font-size:10px;
  font-weight:1000;
}

/* ===== WORK DRAWER FINAL FIT LIKE CRAFT ===== */
#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;
  min-width:0 !important;
  min-height:0 !important;
  padding:0 10px 12px !important;
  overflow:hidden !important;
  border:0 !important;
  border-radius:0 !important;
  background:#06111f !important;
  color:#fff !important;
  transform:translateY(100%) !important;
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
  transition:transform .24s ease,opacity .18s ease,visibility 0s linear .24s !important;
}
#drawer-kerja.job-screen.open{
  transform:translateY(0) !important;
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
  transition-delay:0s !important;
}
#drawer-kerja.job-screen::before,
#drawer-kerja.job-screen::after{
  position:fixed !important;
  inset:0 !important;
  width:100vw !important;
  height:100dvh !important;
}
#drawer-kerja.job-screen .drawer-head{
  position:relative !important;
  top:auto !important;
  height:82px !important;
  min-height:82px !important;
  margin:0 -10px 0 !important;
  padding:18px 18px 10px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  background:transparent !important;
  border:0 !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}
#drawer-kerja.job-screen .drawer-head h2{
  margin:0 !important;
  color:#aaff43 !important;
  font-size:30px !important;
  line-height:1 !important;
  font-weight:1000 !important;
  letter-spacing:0 !important;
  text-transform:uppercase !important;
  text-shadow:none !important;
}
#drawer-kerja.job-screen .drawer-close{
  position:static !important;
  width:44px !important;
  height:44px !important;
  border:1px solid rgba(170,255,67,.32) !important;
  border-radius:50% !important;
  background:#071426 !important;
  color:#aaff43 !important;
  font-size:30px !important;
  line-height:1 !important;
  box-shadow:none !important;
}
#drawer-kerja.job-screen .panel-card{
  margin:0 0 8px !important;
  padding:9px !important;
  border:1px solid rgba(255,255,255,.12) !important;
  border-radius:8px !important;
  background:rgba(3,15,29,.90) !important;
  box-shadow:none !important;
}
#drawer-kerja.job-screen .panel-card h2{
  margin:0 0 8px !important;
  color:#aaff43 !important;
  font-size:16px !important;
  line-height:1 !important;
  font-weight:1000 !important;
  text-transform:uppercase !important;
}
#drawer-kerja.job-screen .job-list{
  display:grid !important;
  gap:8px !important;
}
#drawer-kerja.job-screen .job-card,
#drawer-kerja.job-screen .job-card.job-card-dynamic{
  display:grid !important;
  grid-template-columns:54px minmax(0,1fr) !important;
  align-items:center !important;
  gap:9px !important;
  min-height:88px !important;
  padding:9px !important;
  border:1px solid rgba(255,255,255,.12) !important;
  border-radius:8px !important;
  background:rgba(3,15,29,.90) !important;
}
#drawer-kerja.job-screen .job-card > img,
#drawer-kerja.job-screen .job-card.job-card-dynamic > img{
  width:52px !important;
  height:52px !important;
  max-width:52px !important;
  max-height:52px !important;
  object-fit:contain !important;
  filter:none !important;
}
#drawer-kerja.job-screen .job-card h3{
  margin:0 0 4px !important;
  color:#fff !important;
  font-size:13px !important;
  line-height:1.1 !important;
  font-weight:1000 !important;
  text-shadow:none !important;
}
#drawer-kerja.job-screen .job-card p{
  margin:0 0 4px !important;
  color:#dce8f5 !important;
  font-size:9px !important;
  line-height:1.2 !important;
  font-weight:850 !important;
}
#drawer-kerja.job-screen .job-card small{
  display:block !important;
  color:#aaff43 !important;
  font-size:8.5px !important;
  line-height:1.2 !important;
  font-weight:900 !important;
}
#drawer-kerja.job-screen .job-card small.job-lock-note{
  color:#ffc857 !important;
  margin-top:4px !important;
}
#drawer-kerja.job-screen .job-duration-options{
  display:flex !important;
  flex-wrap:wrap !important;
  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:0 !important;
  border-radius:999px !important;
  background:#58bd1d !important;
  color:#fff !important;
  font-size:8.5px !important;
  line-height:1 !important;
  font-weight:1000 !important;
}
#drawer-kerja.job-screen .btn.primary{
  min-height:38px !important;
  height:38px !important;
  margin-top:8px !important;
  border-radius:7px !important;
  font-size:10px !important;
}
#drawer-kerja.job-screen .job-row.big{
  display:grid !important;
  grid-template-columns:54px minmax(0,1fr) 70px !important;
  gap:9px !important;
  align-items:center !important;
  min-height:74px !important;
}
#drawer-kerja.job-screen .job-row.big img{
  width:52px !important;
  height:52px !important;
  object-fit:contain !important;
}
#drawer-kerja.job-screen .timer{
  min-width:62px !important;
  min-height:34px !important;
  border-radius:7px !important;
  background:rgba(255,255,255,.07) !important;
  color:#aaff43 !important;
  font-size:11px !important;
  font-weight:1000 !important;
}

@media (min-width:901px) and (pointer:fine){
  html.drivergas-web body #drawer-kerja.job-screen,
  #drawer-kerja.job-screen{
    left:50% !important;
    width:437px !important;
    height:757px !important;
    max-width:437px !important;
    max-height:757px !important;
    transform:translateX(-50%) translateY(18px) scale(.985) !important;
  }
  html.drivergas-web body #drawer-kerja.job-screen.open,
  #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;
  }
}

@media (max-width:480px){
  #drawer-kerja.job-screen .job-card,
  #drawer-kerja.job-screen .job-card.job-card-dynamic{
    grid-template-columns:48px minmax(0,1fr) !important;
    min-height:82px !important;
  }
  #drawer-kerja.job-screen .job-card > img,
  #drawer-kerja.job-screen .job-card.job-card-dynamic > img{
    width:46px !important;
    height:46px !important;
  }
}

/* ===== WORK DRAWER MOBILE CLIP FIX ===== */
@media (max-width:900px), (pointer:coarse){
  html body #drawer-kerja.job-screen{
    inset:0 !important;
    left:0 !important;
    right:0 !important;
    top:0 !important;
    bottom:0 !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    height:100dvh !important;
    max-height:100dvh !important;
    padding:0 10px 12px !important;
    box-sizing:border-box !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    transform:translateY(100%) !important;
  }
  html body #drawer-kerja.job-screen.open{
    transform:translateY(0) !important;
  }
  html body #drawer-kerja.job-screen::before,
  html body #drawer-kerja.job-screen::after{
    left:0 !important;
    right:0 !important;
    width:100% !important;
    max-width:100% !important;
  }
  html body #drawer-kerja.job-screen .drawer-head{
    width:100% !important;
    margin:0 !important;
    padding:18px 4px 10px !important;
    box-sizing:border-box !important;
  }
  html body #drawer-kerja.job-screen .panel-card,
  html body #drawer-kerja.job-screen .job-card,
  html body #drawer-kerja.job-screen .job-card.job-card-dynamic{
    width:100% !important;
    max-width:100% !important;
    box-sizing:border-box !important;
    margin-left:0 !important;
    margin-right:0 !important;
  }
}

/* Coin Market tab inside Marketplace */
#drawer-marketplace .coin-market-box{display:grid;gap:10px;}
#drawer-marketplace .coin-market-info{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:2px;}
#drawer-marketplace .coin-market-info>div{padding:8px 5px;border:1px solid rgba(255,255,255,.1);border-radius:7px;background:rgba(255,255,255,.05);text-align:center;}
#drawer-marketplace .coin-market-info small{display:block;color:#c9d7e5;font-size:8px;font-weight:900;text-transform:uppercase;}
#drawer-marketplace .coin-market-info b{display:block;margin-top:3px;color:#aaff43;font-size:11px;}
#drawer-marketplace .coin-market-form{display:grid;gap:8px;padding:10px;border:1px solid rgba(170,255,67,.18);border-radius:9px;background:rgba(3,15,29,.9);}
#drawer-marketplace .coin-market-form h3,#drawer-marketplace .coin-market-title{margin:0;color:#aaff43;font-size:13px;font-weight:1000;text-transform:uppercase;}
#drawer-marketplace .coin-market-form p{margin:0;color:#dce8f5;font-size:9px;line-height:1.35;font-weight:800;}
#drawer-marketplace .coin-market-fields{display:grid;grid-template-columns:1fr 1fr;gap:6px;}
#drawer-marketplace .coin-market-fields label{color:#b9c8d8;font-size:8px;font-weight:900;text-transform:uppercase;}
#drawer-marketplace .coin-market-fields input{width:100%;height:32px;margin-top:3px;border:1px solid rgba(255,255,255,.14);border-radius:6px;background:#071426;color:#fff;padding:0 7px;font-size:11px;font-weight:850;}
#drawer-marketplace .coin-market-preview{display:grid;grid-template-columns:repeat(5,1fr);gap:5px;}
#drawer-marketplace .coin-market-preview>div{padding:7px 4px;border-radius:6px;background:rgba(255,255,255,.055);text-align:center;}
#drawer-marketplace .coin-market-preview small{display:block;color:#b9c8d8;font-size:7px;font-weight:900;text-transform:uppercase;}
#drawer-marketplace .coin-market-preview b{display:block;margin-top:2px;color:#fff;font-size:9px;font-weight:1000;}
#drawer-marketplace .coin-market-form button{height:36px;border:0;border-radius:7px;background:#58bd1d;color:#fff;font-size:10px;font-weight:1000;text-transform:uppercase;}
#drawer-marketplace .coin-market-card{grid-template-columns:48px minmax(0,1fr) 86px;}
#drawer-marketplace .coin-market-title{margin-top:4px;}
@media (max-width:480px){
  #drawer-marketplace .coin-market-info{grid-template-columns:repeat(2,1fr);}
  #drawer-marketplace .coin-market-preview{grid-template-columns:repeat(2,1fr);}
}

/* ===== PATCH 2026-07-02: ITEM DIRECT + TOPUP/MARKET FIT ===== */
#drawer-items,
#drawer-items *,
#drawer-topup,
#drawer-topup *,
#drawer-marketplace,
#drawer-marketplace *{
  box-sizing:border-box !important;
  min-width:0;
}

/* Modal frame: follow the Guild/Membership portrait size but never exceed phone width. */
html body #drawer-items.item-shop-drawer,
html.drivergas-web body #drawer-items.item-shop-drawer,
html.drivergas-app body #drawer-items.item-shop-drawer,
html body #drawer-topup.drawer-sheet,
html body #drawer-topup.topup-modal-screen,
html.drivergas-web body #drawer-topup.drawer-sheet,
html.drivergas-web body #drawer-topup.topup-modal-screen,
html.drivergas-app body #drawer-topup.drawer-sheet,
html.drivergas-app body #drawer-topup.topup-modal-screen,
html body #drawer-marketplace.drawer-sheet,
html body #drawer-marketplace.item-market-drawer,
html.drivergas-web body #drawer-marketplace.drawer-sheet,
html.drivergas-web body #drawer-marketplace.item-market-drawer,
html.drivergas-app body #drawer-marketplace.drawer-sheet,
html.drivergas-app body #drawer-marketplace.item-market-drawer{
  position:fixed !important;
  left:50% !important;
  right:auto !important;
  top:0 !important;
  bottom:auto !important;
  width:min(100vw,437px) !important;
  max-width:100vw !important;
  height:min(100dvh,757px) !important;
  max-height:100dvh !important;
  padding:0 !important;
  overflow:hidden !important;
  border-radius:0 !important;
  border:0 !important;
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
  transform:translateX(-50%) translateY(18px) scale(.985) !important;
  transition:opacity .2s ease,transform .26s cubic-bezier(.18,.9,.22,1),visibility 0s linear .26s !important;
}

html body #drawer-items.item-shop-drawer.open,
html.drivergas-web body #drawer-items.item-shop-drawer.open,
html.drivergas-app body #drawer-items.item-shop-drawer.open,
html body #drawer-topup.drawer-sheet.open,
html body #drawer-topup.topup-modal-screen.open,
html.drivergas-web body #drawer-topup.drawer-sheet.open,
html.drivergas-web body #drawer-topup.topup-modal-screen.open,
html.drivergas-app body #drawer-topup.drawer-sheet.open,
html.drivergas-app body #drawer-topup.topup-modal-screen.open,
html body #drawer-marketplace.drawer-sheet.open,
html body #drawer-marketplace.item-market-drawer.open,
html.drivergas-web body #drawer-marketplace.drawer-sheet.open,
html.drivergas-web body #drawer-marketplace.item-market-drawer.open,
html.drivergas-app body #drawer-marketplace.drawer-sheet.open,
html.drivergas-app body #drawer-marketplace.item-market-drawer.open{
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
  transform:translateX(-50%) translateY(0) scale(1) !important;
  transition-delay:0s !important;
}

/* Direct ITEM drawer, separated from SHOP. */
#drawer-items.item-shop-drawer{
  z-index:2147481500 !important;
  background:#06111f !important;
  color:#fff !important;
}
#drawer-items .item-shop-bg{
  position:absolute !important;
  inset:0 !important;
  z-index:0 !important;
  background:linear-gradient(180deg,rgba(2,8,20,.08),rgba(2,8,20,.93)),url('../shop/shop_city_buildings.webp') center center/cover no-repeat !important;
}
#drawer-items .item-shop-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-items .item-shop-head{
  position:relative !important;
  z-index:3 !important;
  height:94px !important;
  padding:20px 54px 7px 16px !important;
  display:flex !important;
  justify-content:center !important;
  align-items:flex-start !important;
  text-align:center !important;
}
#drawer-items .item-shop-head h2{
  margin:0 !important;
  color:#f7fbff !important;
  font-size:38px !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-items .item-shop-head p{
  margin:8px 0 0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px !important;
  color:#f4f8ff !important;
  font-size:12px !important;
  line-height:1.15 !important;
  font-weight:800 !important;
}
#drawer-items .item-shop-head p span{
  display:block !important;
  width:28px !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-items .item-shop-close{
  position:absolute !important;
  right:14px !important;
  top:18px !important;
  width:44px !important;
  height:44px !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:30px !important;
  line-height:1 !important;
}
#drawer-items .item-shop-content{
  position:relative !important;
  z-index:3 !important;
  height:calc(100% - 94px) !important;
  padding:0 10px calc(env(safe-area-inset-bottom,0px) + 14px) !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  scrollbar-width:none !important;
}
#drawer-items .item-shop-content::-webkit-scrollbar{display:none !important;}
#drawer-items .item-shop-status-card,
#drawer-items .item-shop-group{
  width:100% !important;
  margin-bottom:10px !important;
  padding:11px !important;
  border-radius:18px !important;
  background:linear-gradient(180deg,rgba(5,42,24,.90),rgba(3,15,29,.95)) !important;
  border:1px solid rgba(145,255,70,.26) !important;
  box-shadow:0 10px 20px rgba(0,0,0,.25) !important;
}
#drawer-items .item-shop-status-card{display:grid !important;grid-template-columns:minmax(0,1fr) 58px !important;align-items:center !important;gap:10px !important;}
#drawer-items .item-shop-status-card small{display:block !important;color:#edf6ff !important;font-size:10px !important;font-weight:1000 !important;text-transform:uppercase !important;}
#drawer-items .item-shop-status-card strong{display:block !important;margin-top:4px !important;color:#aaff43 !important;font-size:26px !important;line-height:1 !important;font-weight:1000 !important;}
#drawer-items .item-shop-status-card p{margin:7px 0 0 !important;color:#dcecff !important;font-size:10px !important;line-height:1.25 !important;font-weight:800 !important;}
#drawer-items .item-shop-status-card img{width:56px !important;height:56px !important;object-fit:contain !important;}
#drawer-items .item-shop-group h3{margin:0 0 4px !important;color:#aaff43 !important;font-size:15px !important;line-height:1 !important;font-weight:1000 !important;text-transform:uppercase !important;}
#drawer-items .item-shop-subtitle{margin:0 0 9px !important;color:#e8f2ff !important;font-size:10px !important;line-height:1.25 !important;font-weight:800 !important;}
#drawer-items .item-shop-list{display:grid !important;gap:8px !important;}
#drawer-items .item-shop-card{
  display:grid !important;
  grid-template-columns:44px minmax(0,1fr) 64px !important;
  gap:8px !important;
  align-items:center !important;
  padding:8px !important;
  border-radius:13px !important;
  background:rgba(3,15,29,.92) !important;
  border:1px solid rgba(255,255,255,.11) !important;
}
#drawer-items .item-shop-card>img{width:42px !important;height:42px !important;object-fit:contain !important;filter:drop-shadow(0 7px 10px rgba(0,0,0,.35)) !important;}
#drawer-items .item-shop-card h4{margin:0 0 3px !important;color:#fff !important;font-size:12px !important;line-height:1.12 !important;font-weight:1000 !important;overflow-wrap:anywhere !important;}
#drawer-items .item-shop-card p{margin:0 0 3px !important;color:#dce8f5 !important;font-size:9px !important;line-height:1.24 !important;font-weight:800 !important;overflow-wrap:anywhere !important;}
#drawer-items .item-shop-card span{display:block !important;color:#aaff43 !important;font-size:8px !important;line-height:1.18 !important;font-weight:1000 !important;overflow-wrap:anywhere !important;}
#drawer-items .item-shop-buy-btn{min-height:36px !important;width:100% !important;border:0 !important;border-radius:8px !important;padding:4px !important;background:#58bd1d !important;color:#fff !important;font-size:9px !important;line-height:1.05 !important;font-weight:1000 !important;text-transform:uppercase !important;}
#drawer-items .item-shop-buy-btn:disabled{opacity:.45 !important;background:#445163 !important;}
#drawer-items .item-shop-confirm,
#drawer-items .item-shop-success{position:absolute !important;inset:0 !important;z-index:20 !important;background:rgba(0,0,0,.66) !important;display:none !important;align-items:center !important;justify-content:center !important;padding:22px !important;}
#drawer-items .item-shop-confirm.show,
#drawer-items .item-shop-success.show{display:flex !important;}
#drawer-items .item-shop-confirm-box,
#drawer-items .item-shop-success-box{width:100% !important;max-width:320px !important;border-radius:20px !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;padding:18px !important;text-align:center !important;}
#drawer-items .item-shop-confirm-box h3,
#drawer-items .item-shop-success-box h3{margin:0 0 9px !important;color:#aaff43 !important;font-size:19px !important;font-weight:1000 !important;text-transform:uppercase !important;}
#drawer-items .item-shop-confirm-box p,
#drawer-items .item-shop-success-box p{margin:0 !important;color:#eef6ff !important;font-size:13px !important;font-weight:800 !important;line-height:1.35 !important;}
#drawer-items .item-shop-confirm-box p span{display:block !important;margin-top:6px !important;color:#aaff43 !important;font-size:12px !important;}
#drawer-items .item-shop-confirm-actions{display:grid !important;grid-template-columns:1fr 1fr !important;gap:8px !important;margin-top:16px !important;}
#drawer-items .item-shop-confirm-actions button{height:42px !important;border-radius:13px !important;font-size:12px !important;font-weight:1000 !important;text-transform:uppercase !important;}
#drawer-items .item-shop-confirm-cancel{border:1px solid rgba(255,255,255,.16) !important;background:rgba(255,255,255,.08) !important;color:#fff !important;}
#drawer-items .item-shop-confirm-ok{border:0 !important;background:linear-gradient(180deg,#9cff44,#50ba16) !important;color:#fff !important;}
#drawer-items .item-shop-success-box b{display:flex !important;align-items:center !important;justify-content:center !important;margin:0 auto 10px !important;width:52px !important;height:52px !important;border-radius:50% !important;background:linear-gradient(180deg,#9cff44,#50ba16) !important;color:#fff !important;font-size:34px !important;}

/* Topup: keep nominal grid inside phone width. */
html body #drawer-topup .topup-modal-bg,
html body #drawer-topup .topup-modal-overlay{width:100% !important;height:100% !important;}
html body #drawer-topup .topup-modal-head{height:88px !important;padding:19px 54px 6px 16px !important;}
html body #drawer-topup .topup-modal-head h2{font-size:36px !important;line-height:1 !important;}
html body #drawer-topup .topup-modal-head p{margin-top:7px !important;font-size:12px !important;line-height:1.12 !important;}
html body #drawer-topup .topup-modal-head p span{width:26px !important;}
html body #drawer-topup .topup-modal-close{right:14px !important;top:17px !important;width:44px !important;height:44px !important;font-size:30px !important;}
html body #drawer-topup .topup-modal-content{height:calc(100% - 88px) !important;width:100% !important;padding:0 10px calc(env(safe-area-inset-bottom,0px) + 14px) !important;overflow-x:hidden !important;}
html body #drawer-topup .topup-balance-card{width:100% !important;margin-bottom:9px !important;padding:10px !important;border-radius:18px !important;gap:8px !important;}
html body #drawer-topup .topup-balance-card strong{font-size:23px !important;overflow-wrap:anywhere !important;}
html body #drawer-topup .topup-balance-card img{width:50px !important;height:50px !important;flex:0 0 50px !important;}
html body #drawer-topup .topup-grid{width:100% !important;display:grid !important;grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:8px !important;}
html body #drawer-topup .topup-amount-card{width:100% !important;min-height:78px !important;padding:9px 8px !important;border-radius:17px !important;overflow:hidden !important;}
html body #drawer-topup .topup-amount-card span{font-size:8px !important;line-height:1.1 !important;}
html body #drawer-topup .topup-amount-card strong{font-size:18px !important;line-height:1 !important;white-space:nowrap !important;}
html body #drawer-topup .topup-amount-card small{font-size:9px !important;line-height:1.12 !important;overflow-wrap:anywhere !important;}
html body #drawer-topup .topup-custom-card{width:100% !important;margin-top:9px !important;padding:10px !important;border-radius:18px !important;}
html body #drawer-topup .topup-custom-card h3{font-size:15px !important;margin-bottom:8px !important;}
html body #drawer-topup .topup-custom-row{grid-template-columns:minmax(0,1fr) 76px !important;gap:7px !important;}
html body #drawer-topup .topup-custom-row input,
html body #drawer-topup .topup-custom-row button{height:40px !important;border-radius:12px !important;font-size:11px !important;}
html body #drawer-topup .topup-custom-row input{padding:0 9px !important;}
html body #drawer-topup .topup-custom-card p{font-size:10px !important;line-height:1.28 !important;}
html body #drawer-topup .topup-confirm-box{max-width:min(320px,92vw) !important;padding:17px !important;border-radius:20px !important;}

/* Marketplace: prevent horizontal cut on tabs, cards, forms, and Coin Market. */
html body #drawer-marketplace.item-market-drawer{background:rgba(5,14,28,.98) !important;padding:10px !important;color:#fff !important;}
html body #drawer-marketplace .drawer-head{height:42px !important;margin:0 0 8px !important;}
html body #drawer-marketplace .drawer-head h2{font-size:18px !important;line-height:1 !important;}
html body #drawer-marketplace .drawer-close{width:38px !important;height:38px !important;flex:0 0 38px !important;}
html body #drawer-marketplace .item-market-summary{grid-template-columns:repeat(3,minmax(0,1fr)) !important;gap:5px !important;margin-bottom:8px !important;}
html body #drawer-marketplace .item-market-summary>div{padding:7px 4px !important;overflow:hidden !important;}
html body #drawer-marketplace .item-market-summary small{font-size:7px !important;line-height:1.05 !important;}
html body #drawer-marketplace .item-market-summary b{font-size:10px !important;line-height:1.1 !important;overflow-wrap:anywhere !important;}
html body #drawer-marketplace .marketplace-tabs{display:grid !important;grid-template-columns:repeat(5,minmax(0,1fr)) !important;gap:4px !important;margin-bottom:8px !important;}
html body #drawer-marketplace .marketplace-tabs button{width:100% !important;min-width:0 !important;height:34px !important;padding:0 2px !important;font-size:8px !important;line-height:1.05 !important;white-space:normal !important;overflow:hidden !important;}
html body #drawer-marketplace .item-market-panel{height:calc(100% - 145px) !important;overflow-y:auto !important;overflow-x:hidden !important;padding-bottom:18px !important;}
html body #drawer-marketplace .market-scope-switch{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:5px !important;}
html body #drawer-marketplace .market-scope-switch button{min-width:0 !important;white-space:normal !important;font-size:8px !important;line-height:1.1 !important;}
html body #drawer-marketplace .item-market-list{width:100% !important;display:grid !important;gap:8px !important;}
html body #drawer-marketplace .item-market-card{width:100% !important;grid-template-columns:42px minmax(0,1fr) 66px !important;gap:7px !important;padding:8px !important;overflow:hidden !important;}
html body #drawer-marketplace .item-market-card>img{width:40px !important;height:40px !important;}
html body #drawer-marketplace .item-market-card h3{font-size:11px !important;line-height:1.12 !important;overflow-wrap:anywhere !important;}
html body #drawer-marketplace .item-market-card p{font-size:8px !important;line-height:1.22 !important;overflow-wrap:anywhere !important;}
html body #drawer-marketplace .item-market-card span{font-size:7px !important;line-height:1.15 !important;overflow-wrap:anywhere !important;}
html body #drawer-marketplace .item-market-card>button,
html body #drawer-marketplace .item-market-status{width:100% !important;min-height:34px !important;padding:4px !important;font-size:7px !important;line-height:1.05 !important;overflow-wrap:anywhere !important;}
html body #drawer-marketplace .item-market-fields,
html body #drawer-marketplace .coin-market-fields{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:5px !important;}
html body #drawer-marketplace .item-market-fields input,
html body #drawer-marketplace .coin-market-fields input{width:100% !important;min-width:0 !important;}
html body #drawer-marketplace .coin-market-info{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:5px !important;}
html body #drawer-marketplace .coin-market-preview{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:5px !important;}
html body #drawer-marketplace .coin-market-card{grid-template-columns:42px minmax(0,1fr) 66px !important;}

@media (max-width:370px){
  #drawer-items .item-shop-head h2{font-size:33px !important;}
  #drawer-items .item-shop-head p{font-size:10px !important;}
  #drawer-items .item-shop-card{grid-template-columns:38px minmax(0,1fr) 56px !important;gap:6px !important;padding:7px !important;}
  #drawer-items .item-shop-card>img{width:36px !important;height:36px !important;}
  #drawer-items .item-shop-buy-btn{font-size:8px !important;}
  html body #drawer-topup .topup-modal-head h2{font-size:32px !important;}
  html body #drawer-topup .topup-amount-card{min-height:72px !important;padding:8px 7px !important;}
  html body #drawer-topup .topup-amount-card strong{font-size:16px !important;}
  html body #drawer-marketplace.item-market-drawer{padding:8px !important;}
  html body #drawer-marketplace .item-market-card{grid-template-columns:38px minmax(0,1fr) 58px !important;gap:6px !important;padding:7px !important;}
  html body #drawer-marketplace .item-market-card>img{width:36px !important;height:36px !important;}
  html body #drawer-marketplace .marketplace-tabs button{font-size:7px !important;}
}

/* ===== PATCH 2026-07-02: CRAFTING ECONOMY GUIDE MERGED ===== */
/* Crafting economy guide panel - 2026-07-02 */
#drawer-crafting .crafting-tabs{grid-template-columns:repeat(6,minmax(0,1fr));}
#drawer-crafting .crafting-economy-line{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:3px;margin:5px 0;}
#drawer-crafting .crafting-economy-line span{min-width:0;padding:3px 4px;border-radius:4px;background:rgba(170,255,67,.07);color:#cfddea;font-size:7px;font-weight:900;}
#drawer-crafting .crafting-economy-line b{display:block;color:#aaff43;font-size:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
#drawer-crafting .crafting-guide-panel{display:grid;gap:10px;padding-bottom:24px;}
#drawer-crafting .crafting-guide-card{padding:12px;border:1px solid rgba(255,255,255,.12);border-radius:8px;background:rgba(3,15,29,.90);}
#drawer-crafting .crafting-guide-card h3{margin:0 0 7px;color:#aaff43;font-size:15px;font-weight:1000;}
#drawer-crafting .crafting-guide-card h4{margin:10px 0 5px;color:#fff;font-size:10px;font-weight:1000;}
#drawer-crafting .crafting-guide-card p,#drawer-crafting .crafting-muted{margin:0 0 8px;color:#dce8f5;font-size:10px;line-height:1.35;font-weight:800;}
#drawer-crafting .crafting-guide-kpi{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;}
#drawer-crafting .crafting-guide-kpi div{min-width:0;padding:8px 6px;border-radius:7px;background:rgba(255,255,255,.06);text-align:center;}
#drawer-crafting .crafting-guide-kpi small{display:block;color:#b9c8d8;font-size:8px;font-weight:900;text-transform:uppercase;}
#drawer-crafting .crafting-guide-kpi b{display:block;margin-top:3px;color:#fff;font-size:10px;font-weight:1000;line-height:1.15;}
#drawer-crafting .crafting-price-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px;}
#drawer-crafting .crafting-price-row{min-width:0;display:flex;align-items:center;justify-content:space-between;gap:5px;padding:7px;border-radius:6px;background:rgba(255,255,255,.06);}
#drawer-crafting .crafting-price-row span{min-width:0;color:#f3f7fb;font-size:9px;font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
#drawer-crafting .crafting-price-row b{flex:0 0 auto;color:#aaff43;font-size:9px;font-weight:1000;}
#drawer-crafting .crafting-chain-list{display:grid;gap:8px;}
#drawer-crafting .crafting-chain-card{padding:10px;border:1px solid rgba(170,255,67,.12);border-radius:8px;background:rgba(255,255,255,.045);}
#drawer-crafting .crafting-chain-head{display:flex;align-items:center;justify-content:space-between;gap:8px;}
#drawer-crafting .crafting-chain-head h3{margin:0;color:#fff;font-size:13px;}
#drawer-crafting .crafting-chain-head span{flex:0 0 auto;color:#aaff43;font-size:9px;font-weight:1000;}
#drawer-crafting .crafting-chain-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;margin-top:8px;}
#drawer-crafting .crafting-chain-stats div{min-width:0;padding:6px;border-radius:6px;background:rgba(0,0,0,.18);}
#drawer-crafting .crafting-chain-stats small{display:block;color:#b6c5d3;font-size:7px;font-weight:900;text-transform:uppercase;}
#drawer-crafting .crafting-chain-stats b{display:block;margin-top:2px;color:#fff;font-size:9px;font-weight:1000;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
#drawer-crafting .guide-materials span{color:#dff8d1;background:rgba(170,255,67,.08);}
#drawer-crafting .crafting-raw-list{display:flex;flex-wrap:wrap;gap:4px;}
#drawer-crafting .crafting-raw-list span{padding:3px 5px;border-radius:5px;background:rgba(255,255,255,.07);color:#eaf3fb;font-size:8px;font-weight:900;}
#drawer-crafting .crafting-raw-list b{color:#aaff43;}
#drawer-crafting .crafting-drop-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px;}
#drawer-crafting .crafting-drop-grid div,#drawer-crafting .crafting-drop-row{min-width:0;padding:7px;border-radius:6px;background:rgba(255,255,255,.055);}
#drawer-crafting .crafting-drop-grid span,#drawer-crafting .crafting-drop-row span{display:block;color:#fff;font-size:9px;font-weight:1000;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
#drawer-crafting .crafting-drop-grid b,#drawer-crafting .crafting-drop-row b{display:block;color:#aaff43;font-size:10px;font-weight:1000;}
#drawer-crafting .crafting-drop-grid small,#drawer-crafting .crafting-drop-row small{display:block;color:#c3d1df;font-size:8px;font-weight:800;}
#drawer-crafting .crafting-drop-table{display:grid;gap:5px;}
#drawer-crafting .crafting-drop-row{display:grid;grid-template-columns:minmax(0,1fr) 42px minmax(0,1.1fr);align-items:center;gap:5px;}
#drawer-crafting .crafting-empty.small{padding:10px;font-size:9px;}
@media (max-width:380px){
  #drawer-crafting .crafting-tabs button{font-size:8px;}
  #drawer-crafting .crafting-price-list,#drawer-crafting .crafting-drop-grid{grid-template-columns:1fr;}
  #drawer-crafting .crafting-chain-stats{grid-template-columns:repeat(2,minmax(0,1fr));}
}



/* ===== GARAGE SLOT SUMMARY PATCH ===== */
.garage-slot-summary{position:relative;z-index:3;margin:0 auto 8px;max-width:92%;display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;padding:7px 10px;border:1px solid rgba(170,255,67,.18);border-radius:10px;background:rgba(3,15,29,.78);color:#dce8f5;font-size:10px;font-weight:900;text-align:center;}
.garage-slot-summary b{color:#aaff43;font-size:12px;}
.garage-slot-summary span{color:#aebdca;font-size:8px;font-weight:800;}


/* ===== GARAGE + SHOP REAL HP FIX V3 ===== */
/* Cache-busted from dashboard.php. This is the final override for phone portrait. */
html body #drawer-garasi.garage-screen{
  position:fixed !important;
  left:0 !important;
  top:0 !important;
  right:0 !important;
  bottom:0 !important;
  width:100vw !important;
  height:100dvh !important;
  min-width:100vw !important;
  min-height:100dvh !important;
  max-width:none !important;
  max-height:none !important;
  margin:0 !important;
  padding:0 !important;
  overflow:hidden !important;
  border:0 !important;
  border-radius:0 !important;
  background:#06111f !important;
  box-shadow:none !important;
  transform-origin:center center !important;
  z-index:2147483600 !important;
}
html body #drawer-garasi.garage-screen.open{
  transform:translate3d(0,0,0) scale(1) !important;
  opacity:1 !important;
  pointer-events:auto !important;
}
html body #drawer-garasi.garage-screen.closing{
  transform:translate3d(0,18px,0) scale(.985) !important;
}
html body #drawer-garasi.garage-screen .garage-bg,
html body #drawer-garasi.garage-screen .garage-overlay{
  inset:0 !important;
  border-radius:0 !important;
}
html body #drawer-garasi.garage-screen .garage-slider-wrap{
  height:calc(100dvh - 86px) !important;
  padding:0 12px 12px !important;
}
html body #drawer-garasi.garage-screen .garage-slider{
  height:100% !important;
}
@supports not (height:100dvh){
  html body #drawer-garasi.garage-screen{height:100vh !important;min-height:100vh !important;}
  html body #drawer-garasi.garage-screen .garage-slider-wrap{height:calc(100vh - 86px) !important;}
}
@media (min-width:901px) and (pointer:fine){
  html body #drawer-garasi.garage-screen{
    left:50% !important;
    right:auto !important;
    width:437px !important;
    height:757px !important;
    min-width:437px !important;
    min-height:757px !important;
    max-width:437px !important;
    max-height:757px !important;
    transform-origin:top left !important;
  }
  html body #drawer-garasi.garage-screen.open{
    transform:translateX(-50%) translateY(0) scale(1) !important;
  }
  html body #drawer-garasi.garage-screen.closing{
    transform:translateX(-50%) translateY(18px) scale(.985) !important;
  }
}

/* Shop: beri safe area kiri-kanan dan kecilkan kartu/list supaya tidak mepet di HP. */
html body #drawer-shop.shop-screen .shop-home{
  padding-left:24px !important;
  padding-right:24px !important;
  padding-bottom:22px !important;
}
html body #drawer-shop.shop-screen .shop-category-grid{
  gap:16px !important;
  padding:0 8px !important;
}
html body #drawer-shop.shop-screen .shop-category-card img{
  width:92% !important;
  max-width:92% !important;
  margin:0 auto !important;
}
html body #drawer-shop.shop-screen .shop-helper{
  margin-left:4px !important;
  margin-right:4px !important;
}
html body #drawer-shop.shop-screen .shop-sub{
  padding-left:20px !important;
  padding-right:20px !important;
  padding-bottom:22px !important;
}
html body #drawer-shop.shop-screen .shop-item-list{
  gap:12px !important;
}
html body #drawer-shop.shop-screen .shop-item-card,
html body #drawer-shop.shop-screen .vehicle-sale-card,
html body #drawer-shop.shop-screen .fuel-card{
  min-height:114px !important;
  grid-template-columns:72px minmax(0,1fr) 74px !important;
  gap:8px !important;
  padding:10px !important;
  border-radius:18px !important;
}
html body #drawer-shop.shop-screen .shop-item-card > img,
html body #drawer-shop.shop-screen .vehicle-sale-card > img,
html body #drawer-shop.shop-screen .fuel-card > img{
  width:68px !important;
  height:68px !important;
  max-width:68px !important;
  max-height:68px !important;
}
html body #drawer-shop.shop-screen .shop-item-card h4,
html body #drawer-shop.shop-screen .vehicle-sale-card h4,
html body #drawer-shop.shop-screen .fuel-card h4{
  font-size:16px !important;
  line-height:1.08 !important;
  margin:0 0 5px !important;
}
html body #drawer-shop.shop-screen .shop-item-card p,
html body #drawer-shop.shop-screen .vehicle-sale-card p,
html body #drawer-shop.shop-screen .fuel-card p{
  font-size:11px !important;
  line-height:1.18 !important;
  margin:0 0 4px !important;
}
html body #drawer-shop.shop-screen .shop-item-card span,
html body #drawer-shop.shop-screen .vehicle-sale-card span,
html body #drawer-shop.shop-screen .fuel-card span{
  font-size:10.5px !important;
  line-height:1.2 !important;
}
html body #drawer-shop.shop-screen .shop-buy-btn{
  min-width:0 !important;
  width:100% !important;
  height:42px !important;
  padding:0 6px !important;
  border-radius:14px !important;
  font-size:13px !important;
}
@media (max-width:390px){
  html body #drawer-shop.shop-screen .shop-home{
    padding-left:20px !important;
    padding-right:20px !important;
  }
  html body #drawer-shop.shop-screen .shop-category-grid{
    gap:14px !important;
    padding:0 6px !important;
  }
  html body #drawer-shop.shop-screen .shop-sub{
    padding-left:16px !important;
    padding-right:16px !important;
  }
  html body #drawer-shop.shop-screen .shop-item-card,
  html body #drawer-shop.shop-screen .vehicle-sale-card,
  html body #drawer-shop.shop-screen .fuel-card{
    grid-template-columns:62px minmax(0,1fr) 68px !important;
    gap:7px !important;
    padding:9px !important;
    min-height:104px !important;
  }
  html body #drawer-shop.shop-screen .shop-item-card > img,
  html body #drawer-shop.shop-screen .vehicle-sale-card > img,
  html body #drawer-shop.shop-screen .fuel-card > img{
    width:58px !important;
    height:58px !important;
    max-width:58px !important;
    max-height:58px !important;
  }
  html body #drawer-shop.shop-screen .shop-item-card h4,
  html body #drawer-shop.shop-screen .vehicle-sale-card h4,
  html body #drawer-shop.shop-screen .fuel-card h4{
    font-size:14px !important;
  }
  html body #drawer-shop.shop-screen .shop-buy-btn{
    height:38px !important;
    font-size:12px !important;
  }
}


/* ===== GARAGE V4: REMOVE ITEM TARGET LAYOUT + ARROWS WITH VEHICLE IMAGE ===== */
/* Tombol Item Target sudah dihapus dari dashboard.php; action sekarang cuma Open Work + Service. */
html body #drawer-garasi.garage-screen .garage-actions.hero-actions{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:8px !important;
}

/* Panah kiri/kanan dipaksa naik ke area gambar kendaraan, bukan di area card bawah. */
html body #drawer-garasi.garage-screen .garage-slider-wrap.garage-bottom-rebuild .garage-nav{
  position:absolute !important;
  top:23% !important;
  transform:translateY(-50%) !important;
  z-index:999 !important;
  width:46px !important;
  height:46px !important;
  font-size:38px !important;
  line-height:1 !important;
}
html body #drawer-garasi.garage-screen .garage-slider-wrap.garage-bottom-rebuild .garage-nav.prev{
  left:12px !important;
}
html body #drawer-garasi.garage-screen .garage-slider-wrap.garage-bottom-rebuild .garage-nav.next{
  right:12px !important;
}

@media (max-height:760px){
  html body #drawer-garasi.garage-screen .garage-slider-wrap.garage-bottom-rebuild .garage-nav{
    top:22% !important;
    width:42px !important;
    height:42px !important;
    font-size:34px !important;
  }
}

/* ===== DRIVERGAS V5: SHOP + ALL MENU PHONE RESPONSIVE FINAL ===== */
/* Akar bug HP: beberapa drawer di mode drivergas-web masih dipaksa 437px x 757px.
   Override ini khusus HP/touch agar semua menu mengikuti layar portrait asli. */
@media (max-width:900px), (pointer:coarse){
  html body .drawer-backdrop{z-index:2147480000 !important;}

  html.drivergas-web body #drawer-shop,
  html.drivergas-web body #drawer-kerja,
  html.drivergas-web body #drawer-topup,
  html.drivergas-web body #drawer-garasi,
  html.drivergas-web body #drawer-items,
  html.drivergas-web body #drawer-membership,
  html.drivergas-web body #drawer-reward-chest,
  html.drivergas-web body #drawer-profile,
  html.drivergas-web body #drawer-guild,
  html.drivergas-web body #drawer-marketplace,
  html.drivergas-web body #drawer-crafting,
  html.drivergas-web body #drawer-mission,
  html.drivergas-web body #drawer-event,
  html.drivergas-web body #drawer-ranking,
  html.drivergas-app body #drawer-shop,
  html.drivergas-app body #drawer-kerja,
  html.drivergas-app body #drawer-topup,
  html.drivergas-app body #drawer-garasi,
  html.drivergas-app body #drawer-items,
  html.drivergas-app body #drawer-membership,
  html.drivergas-app body #drawer-reward-chest,
  html.drivergas-app body #drawer-profile,
  html.drivergas-app body #drawer-guild,
  html.drivergas-app body #drawer-marketplace,
  html.drivergas-app body #drawer-crafting,
  html.drivergas-app body #drawer-mission,
  html.drivergas-app body #drawer-event,
  html.drivergas-app body #drawer-ranking{
    position:fixed !important;
    inset:0 !important;
    left:0 !important;
    top:0 !important;
    right:0 !important;
    bottom:0 !important;
    width:100vw !important;
    height:100dvh !important;
    min-width:0 !important;
    min-height:0 !important;
    max-width:none !important;
    max-height:none !important;
    margin:0 !important;
    box-sizing:border-box !important;
    border-radius:0 !important;
    transform-origin:center center !important;
  }

  html.drivergas-web body #drawer-shop:not(.open),
  html.drivergas-web body #drawer-kerja:not(.open),
  html.drivergas-web body #drawer-topup:not(.open),
  html.drivergas-web body #drawer-garasi:not(.open),
  html.drivergas-web body #drawer-items:not(.open),
  html.drivergas-web body #drawer-membership:not(.open),
  html.drivergas-web body #drawer-reward-chest:not(.open),
  html.drivergas-web body #drawer-profile:not(.open),
  html.drivergas-web body #drawer-guild:not(.open),
  html.drivergas-web body #drawer-marketplace:not(.open),
  html.drivergas-web body #drawer-crafting:not(.open),
  html.drivergas-web body #drawer-mission:not(.open),
  html.drivergas-web body #drawer-event:not(.open),
  html.drivergas-web body #drawer-ranking:not(.open),
  html.drivergas-app body #drawer-shop:not(.open),
  html.drivergas-app body #drawer-kerja:not(.open),
  html.drivergas-app body #drawer-topup:not(.open),
  html.drivergas-app body #drawer-garasi:not(.open),
  html.drivergas-app body #drawer-items:not(.open),
  html.drivergas-app body #drawer-membership:not(.open),
  html.drivergas-app body #drawer-reward-chest:not(.open),
  html.drivergas-app body #drawer-profile:not(.open),
  html.drivergas-app body #drawer-guild:not(.open),
  html.drivergas-app body #drawer-marketplace:not(.open),
  html.drivergas-app body #drawer-crafting:not(.open),
  html.drivergas-app body #drawer-mission:not(.open),
  html.drivergas-app body #drawer-event:not(.open),
  html.drivergas-app body #drawer-ranking:not(.open){
    transform:translate3d(0,18px,0) scale(.985) !important;
    opacity:0 !important;
    pointer-events:none !important;
  }

  html.drivergas-web body #drawer-shop.open,
  html.drivergas-web body #drawer-kerja.open,
  html.drivergas-web body #drawer-topup.open,
  html.drivergas-web body #drawer-garasi.open,
  html.drivergas-web body #drawer-items.open,
  html.drivergas-web body #drawer-membership.open,
  html.drivergas-web body #drawer-reward-chest.open,
  html.drivergas-web body #drawer-profile.open,
  html.drivergas-web body #drawer-guild.open,
  html.drivergas-web body #drawer-marketplace.open,
  html.drivergas-web body #drawer-crafting.open,
  html.drivergas-web body #drawer-mission.open,
  html.drivergas-web body #drawer-event.open,
  html.drivergas-web body #drawer-ranking.open,
  html.drivergas-app body #drawer-shop.open,
  html.drivergas-app body #drawer-kerja.open,
  html.drivergas-app body #drawer-topup.open,
  html.drivergas-app body #drawer-garasi.open,
  html.drivergas-app body #drawer-items.open,
  html.drivergas-app body #drawer-membership.open,
  html.drivergas-app body #drawer-reward-chest.open,
  html.drivergas-app body #drawer-profile.open,
  html.drivergas-app body #drawer-guild.open,
  html.drivergas-app body #drawer-marketplace.open,
  html.drivergas-app body #drawer-crafting.open,
  html.drivergas-app body #drawer-mission.open,
  html.drivergas-app body #drawer-event.open,
  html.drivergas-app body #drawer-ranking.open{
    transform:translate3d(0,0,0) scale(1) !important;
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
  }

  /* SHOP: root dan isi tidak boleh lagi mepet/kepotong di HP kecil. */
  html body #drawer-shop.shop-screen{
    padding:0 !important;
    overflow:hidden !important;
    background:#06111f !important;
    z-index:2147483800 !important;
  }
  html body #drawer-shop.shop-screen .shop-head{
    height:92px !important;
    padding:20px 54px 6px 16px !important;
  }
  html body #drawer-shop.shop-screen .shop-head h2{
    font-size:36px !important;
  }
  html body #drawer-shop.shop-screen .shop-head p{
    margin-top:6px !important;
    font-size:11px !important;
    gap:7px !important;
  }
  html body #drawer-shop.shop-screen .shop-close{
    top:18px !important;
    right:14px !important;
    width:42px !important;
    height:42px !important;
    font-size:30px !important;
  }
  html body #drawer-shop.shop-screen .shop-home{
    height:calc(100dvh - 92px) !important;
    max-height:none !important;
    padding:0 22px calc(18px + env(safe-area-inset-bottom,0px)) !important;
    gap:10px !important;
    overflow:hidden !important;
  }
  html body #drawer-shop.shop-screen .shop-category-grid{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:12px !important;
    padding:0 4px !important;
  }
  html body #drawer-shop.shop-screen .shop-category-card{
    min-width:0 !important;
  }
  html body #drawer-shop.shop-screen .shop-category-card img{
    width:92% !important;
    max-width:92% !important;
    margin:0 auto !important;
  }
  html body #drawer-shop.shop-screen .shop-helper{
    grid-template-columns:1fr 12px 1fr 12px 1fr !important;
    gap:3px !important;
    padding:8px !important;
    margin:0 !important;
  }
  html body #drawer-shop.shop-screen .shop-helper b{
    width:20px !important;
    height:20px !important;
    font-size:10px !important;
  }
  html body #drawer-shop.shop-screen .shop-helper span{
    font-size:8.5px !important;
  }
  html body #drawer-shop.shop-screen .shop-sub{
    height:calc(100dvh - 92px) !important;
    max-height:none !important;
    padding:0 14px calc(18px + env(safe-area-inset-bottom,0px)) !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    scrollbar-width:none !important;
  }
  html body #drawer-shop.shop-screen .shop-sub::-webkit-scrollbar{display:none !important;}
  html body #drawer-shop.shop-screen .shop-back{
    height:30px !important;
    margin-bottom:8px !important;
    font-size:11px !important;
  }
  html body #drawer-shop.shop-screen .shop-sub h3{
    font-size:21px !important;
    line-height:1.05 !important;
  }
  html body #drawer-shop.shop-screen .shop-subtitle{
    font-size:10.5px !important;
    margin:4px 0 9px !important;
  }
  html body #drawer-shop.shop-screen .shop-item-list{
    gap:9px !important;
    padding-bottom:18px !important;
  }
  html body #drawer-shop.shop-screen .shop-item-card,
  html body #drawer-shop.shop-screen .vehicle-sale-card,
  html body #drawer-shop.shop-screen .fuel-card{
    width:100% !important;
    min-width:0 !important;
    min-height:92px !important;
    grid-template-columns:54px minmax(0,1fr) 62px !important;
    gap:7px !important;
    padding:8px !important;
    border-radius:16px !important;
  }
  html body #drawer-shop.shop-screen .shop-item-card > img,
  html body #drawer-shop.shop-screen .vehicle-sale-card > img,
  html body #drawer-shop.shop-screen .fuel-card > img{
    width:52px !important;
    height:52px !important;
    max-width:52px !important;
    max-height:52px !important;
  }
  html body #drawer-shop.shop-screen .shop-item-card h4,
  html body #drawer-shop.shop-screen .vehicle-sale-card h4,
  html body #drawer-shop.shop-screen .fuel-card h4{
    font-size:13px !important;
    line-height:1.08 !important;
    margin:0 0 3px !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    display:-webkit-box !important;
    -webkit-line-clamp:2 !important;
    -webkit-box-orient:vertical !important;
  }
  html body #drawer-shop.shop-screen .shop-item-card p,
  html body #drawer-shop.shop-screen .vehicle-sale-card p,
  html body #drawer-shop.shop-screen .fuel-card p{
    font-size:9.5px !important;
    line-height:1.14 !important;
    margin:0 0 3px !important;
  }
  html body #drawer-shop.shop-screen .shop-item-card span,
  html body #drawer-shop.shop-screen .vehicle-sale-card span,
  html body #drawer-shop.shop-screen .fuel-card span,
  html body #drawer-shop.shop-screen .vehicle-work-reward{
    font-size:9px !important;
    line-height:1.15 !important;
    white-space:normal !important;
    overflow-wrap:anywhere !important;
  }
  html body #drawer-shop.shop-screen .shop-buy-btn{
    min-width:0 !important;
    width:100% !important;
    height:34px !important;
    padding:0 4px !important;
    border-radius:12px !important;
    font-size:10.5px !important;
    line-height:1 !important;
    white-space:normal !important;
  }

  /* Other menu roots: content wajib scroll, bukan kepotong. */
  html body #drawer-event,
  html body #drawer-ranking,
  html body #drawer-mission{
    padding:14px 14px calc(18px + env(safe-area-inset-bottom,0px)) !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    background:rgba(5,14,28,.98) !important;
    z-index:2147482600 !important;
  }
  html body #drawer-guild.guild-drawer,
  html body #drawer-marketplace.item-market-drawer,
  html body #drawer-crafting.crafting-drawer,
  html body #drawer-items.item-shop-drawer,
  html body #drawer-profile.profile-screen,
  html body #drawer-membership.membership-screen,
  html body #drawer-reward-chest.free-screen{
    overflow:hidden !important;
    z-index:2147482600 !important;
  }
  html body #drawer-guild .guild-body,
  html body #drawer-marketplace .item-market-panel,
  html body #drawer-crafting .crafting-body,
  html body #drawer-items .item-shop-body,
  html body #drawer-profile .profile-content,
  html body #drawer-membership .membership-content,
  html body #drawer-reward-chest .free-screen-body{
    overflow-y:auto !important;
    overflow-x:hidden !important;
    scrollbar-width:none !important;
  }
  html body #drawer-guild .guild-body::-webkit-scrollbar,
  html body #drawer-marketplace .item-market-panel::-webkit-scrollbar,
  html body #drawer-crafting .crafting-body::-webkit-scrollbar,
  html body #drawer-items .item-shop-body::-webkit-scrollbar,
  html body #drawer-profile .profile-content::-webkit-scrollbar,
  html body #drawer-membership .membership-content::-webkit-scrollbar,
  html body #drawer-reward-chest .free-screen-body::-webkit-scrollbar{display:none !important;}
}

@media (max-width:360px), (max-height:680px){
  html body #drawer-shop.shop-screen .shop-head{height:82px !important;padding-top:16px !important;}
  html body #drawer-shop.shop-screen .shop-head h2{font-size:31px !important;}
  html body #drawer-shop.shop-screen .shop-head p{font-size:9.5px !important;}
  html body #drawer-shop.shop-screen .shop-home{height:calc(100dvh - 82px) !important;padding-left:18px !important;padding-right:18px !important;}
  html body #drawer-shop.shop-screen .shop-sub{height:calc(100dvh - 82px) !important;padding-left:10px !important;padding-right:10px !important;}
  html body #drawer-shop.shop-screen .shop-category-grid{gap:8px !important;}
  html body #drawer-shop.shop-screen .shop-helper{padding:7px !important;}
  html body #drawer-shop.shop-screen .shop-helper span{font-size:7.5px !important;}
  html body #drawer-shop.shop-screen .shop-item-card,
  html body #drawer-shop.shop-screen .vehicle-sale-card,
  html body #drawer-shop.shop-screen .fuel-card{
    grid-template-columns:46px minmax(0,1fr) 56px !important;
    min-height:84px !important;
    gap:6px !important;
    padding:7px !important;
  }
  html body #drawer-shop.shop-screen .shop-item-card > img,
  html body #drawer-shop.shop-screen .vehicle-sale-card > img,
  html body #drawer-shop.shop-screen .fuel-card > img{
    width:44px !important;
    height:44px !important;
    max-width:44px !important;
    max-height:44px !important;
  }
  html body #drawer-shop.shop-screen .shop-item-card h4,
  html body #drawer-shop.shop-screen .vehicle-sale-card h4,
  html body #drawer-shop.shop-screen .fuel-card h4{font-size:11.5px !important;}
  html body #drawer-shop.shop-screen .shop-item-card p,
  html body #drawer-shop.shop-screen .vehicle-sale-card p,
  html body #drawer-shop.shop-screen .fuel-card p{font-size:8.5px !important;}
  html body #drawer-shop.shop-screen .shop-item-card span,
  html body #drawer-shop.shop-screen .vehicle-sale-card span,
  html body #drawer-shop.shop-screen .fuel-card span,
  html body #drawer-shop.shop-screen .vehicle-work-reward{font-size:8px !important;}
  html body #drawer-shop.shop-screen .shop-buy-btn{height:31px !important;font-size:9.5px !important;}
}

@supports not (height:100dvh){
  @media (max-width:900px), (pointer:coarse){
    html.drivergas-web body #drawer-shop,
    html.drivergas-web body #drawer-kerja,
    html.drivergas-web body #drawer-topup,
    html.drivergas-web body #drawer-garasi,
    html.drivergas-web body #drawer-items,
    html.drivergas-web body #drawer-membership,
    html.drivergas-web body #drawer-reward-chest,
    html.drivergas-web body #drawer-profile,
    html.drivergas-web body #drawer-guild,
    html.drivergas-web body #drawer-marketplace,
    html.drivergas-web body #drawer-crafting,
    html.drivergas-web body #drawer-mission,
    html.drivergas-web body #drawer-event,
    html.drivergas-web body #drawer-ranking,
    html.drivergas-app body #drawer-shop,
    html.drivergas-app body #drawer-kerja,
    html.drivergas-app body #drawer-topup,
    html.drivergas-app body #drawer-garasi,
    html.drivergas-app body #drawer-items,
    html.drivergas-app body #drawer-membership,
    html.drivergas-app body #drawer-reward-chest,
    html.drivergas-app body #drawer-profile,
    html.drivergas-app body #drawer-guild,
    html.drivergas-app body #drawer-marketplace,
    html.drivergas-app body #drawer-crafting,
    html.drivergas-app body #drawer-mission,
    html.drivergas-app body #drawer-event,
    html.drivergas-app body #drawer-ranking{height:100vh !important;}
    html body #drawer-shop.shop-screen .shop-home{height:calc(100vh - 92px) !important;}
    html body #drawer-shop.shop-screen .shop-sub{height:calc(100vh - 92px) !important;}
  }
}

/* ===== DRIVERGAS V6: GARAGE PHONE RESPONSIVE FINAL + TIMER FIX CACHE ===== */
/* Khusus HP/touch: Garasi harus ikut layar portrait asli, bukan ukuran canvas lama 437px. */
@media (max-width:900px), (pointer:coarse){
  html.drivergas-web body #drawer-garasi.garage-screen,
  html.drivergas-app body #drawer-garasi.garage-screen,
  html body #drawer-garasi.garage-screen{
    position:fixed !important;
    inset:0 !important;
    left:0 !important;
    top:0 !important;
    right:0 !important;
    bottom:0 !important;
    width:100vw !important;
    height:100dvh !important;
    min-width:100vw !important;
    min-height:100dvh !important;
    max-width:100vw !important;
    max-height:none !important;
    margin:0 !important;
    padding:0 !important;
    overflow:hidden !important;
    border:0 !important;
    border-radius:0 !important;
    background:#06111f !important;
    transform-origin:center center !important;
    box-sizing:border-box !important;
    z-index:2147483900 !important;
  }

  html.drivergas-web body #drawer-garasi.garage-screen.open,
  html.drivergas-app body #drawer-garasi.garage-screen.open,
  html body #drawer-garasi.garage-screen.open{
    transform:translate3d(0,0,0) scale(1) !important;
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
  }

  html.drivergas-web body #drawer-garasi.garage-screen:not(.open),
  html.drivergas-app body #drawer-garasi.garage-screen:not(.open),
  html body #drawer-garasi.garage-screen:not(.open){
    transform:translate3d(0,18px,0) scale(.985) !important;
    opacity:0 !important;
    pointer-events:none !important;
  }

  html body #drawer-garasi.garage-screen .garage-bg,
  html body #drawer-garasi.garage-screen .garage-overlay{
    inset:0 !important;
    border-radius:0 !important;
  }

  html body #drawer-garasi.garage-screen .garage-head{
    height:78px !important;
    padding:calc(env(safe-area-inset-top,0px) + 14px) 56px 4px 16px !important;
  }
  html body #drawer-garasi.garage-screen .garage-head-centered h2{
    font-size:30px !important;
    line-height:1 !important;
  }
  html body #drawer-garasi.garage-screen .garage-head-centered p{
    margin-top:5px !important;
    gap:7px !important;
    font-size:10px !important;
  }
  html body #drawer-garasi.garage-screen .garage-head-centered p span{
    width:28px !important;
    height:2px !important;
  }
  html body #drawer-garasi.garage-screen .garage-close{
    top:calc(env(safe-area-inset-top,0px) + 12px) !important;
    right:14px !important;
    width:42px !important;
    height:42px !important;
    font-size:28px !important;
  }

  html body #drawer-garasi.garage-screen .garage-slot-summary{
    margin:0 auto 4px !important;
    max-width:calc(100vw - 22px) !important;
    padding:5px 8px !important;
    gap:5px !important;
    font-size:8.5px !important;
    line-height:1.12 !important;
  }
  html body #drawer-garasi.garage-screen .garage-slot-summary b{font-size:9.5px !important;}
  html body #drawer-garasi.garage-screen .garage-slot-summary span{font-size:7.5px !important;}

  html body #drawer-garasi.garage-screen .garage-slider-wrap,
  html body #drawer-garasi.garage-screen .garage-slider-wrap.garage-bottom-rebuild{
    height:calc(100dvh - 104px - env(safe-area-inset-top,0px)) !important;
    padding:4px 10px calc(8px + env(safe-area-inset-bottom,0px)) !important;
    overflow:hidden !important;
    box-sizing:border-box !important;
  }
  html body #drawer-garasi.garage-screen .garage-slider{
    height:100% !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    align-items:stretch !important;
  }
  html body #drawer-garasi.garage-screen .garage-slide,
  html body #drawer-garasi.garage-screen .garage-slide-rebuilt{
    height:100% !important;
    min-height:0 !important;
    display:flex !important;
    flex-direction:column !important;
    gap:6px !important;
    padding:0 2px !important;
    box-sizing:border-box !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    scrollbar-width:none !important;
  }
  html body #drawer-garasi.garage-screen .garage-slide::-webkit-scrollbar,
  html body #drawer-garasi.garage-screen .garage-slide-rebuilt::-webkit-scrollbar{display:none !important;}

  html body #drawer-garasi.garage-screen .garage-stage,
  html body #drawer-garasi.garage-screen .garage-stage-rebuilt{
    flex:0 0 auto !important;
    height:260px !important;
    min-height:260px !important;
    max-height:260px !important;
    margin:0 !important;
    padding:0 !important;
    display:flex !important;
    align-items:flex-end !important;
    justify-content:center !important;
  }
  html body #drawer-garasi.garage-screen .garage-vehicle{
    max-width:54% !important;
    max-height:140px !important;
    object-fit:contain !important;
  }
  html body #drawer-garasi.garage-screen .garage-nav{
    top:92px !important;
    width:42px !important;
    height:42px !important;
    font-size:34px !important;
    transform:translateY(0) !important;
    z-index:999 !important;
  }
  html body #drawer-garasi.garage-screen .garage-nav.prev{left:8px !important;}
  html body #drawer-garasi.garage-screen .garage-nav.next{right:8px !important;}

  html body #drawer-garasi.garage-screen .garage-bottom-stack{
    flex:1 1 auto !important;
    min-height:0 !important;
    display:flex !important;
    flex-direction:column !important;
    justify-content:flex-end !important;
    gap:6px !important;
    padding:0 3px 2px !important;
  }
  html body #drawer-garasi.garage-screen .garage-namebar{padding:0 4px !important;gap:7px !important;}
  html body #drawer-garasi.garage-screen .garage-name-left{gap:6px !important;min-width:0 !important;}
  html body #drawer-garasi.garage-screen .garage-name-left img{width:22px !important;height:22px !important;}
  html body #drawer-garasi.garage-screen .garage-name-left h3{font-size:14px !important;min-width:0 !important;}
  html body #drawer-garasi.garage-screen .garage-tier{height:23px !important;padding:0 7px !important;font-size:9px !important;}
  html body #drawer-garasi.garage-screen .garage-stats-card{margin:0 !important;padding:8px 9px 7px !important;border-radius:14px !important;border-width:1px !important;}
  html body #drawer-garasi.garage-screen .garage-main-box{padding:0 6px 7px !important;}
  html body #drawer-garasi.garage-screen .garage-main-label{gap:5px !important;font-size:9px !important;}
  html body #drawer-garasi.garage-screen .garage-main-icon{font-size:15px !important;}
  html body #drawer-garasi.garage-screen .garage-main-value{font-size:16px !important;margin:5px 0 6px !important;}
  html body #drawer-garasi.garage-screen .garage-main-box em{height:7px !important;}
  html body #drawer-garasi.garage-screen .garage-mini-stats{margin-top:6px !important;padding-top:6px !important;}
  html body #drawer-garasi.garage-screen .garage-mini-item{padding:4px !important;}
  html body #drawer-garasi.garage-screen .garage-mini-item span{font-size:7.8px !important;}
  html body #drawer-garasi.garage-screen .garage-mini-item strong{font-size:10px !important;}
  html body #drawer-garasi.garage-screen .garage-job-card.wide{margin:0 !important;padding:7px 9px !important;border-radius:13px !important;border-width:1px !important;}
  html body #drawer-garasi.garage-screen .garage-job-card span{font-size:9px !important;margin-bottom:3px !important;}
  html body #drawer-garasi.garage-screen .garage-job-card strong{font-size:12px !important;line-height:1.18 !important;}
  html body #drawer-garasi.garage-screen .garage-dots-block{gap:2px !important;padding:0 !important;margin:0 !important;}
  html body #drawer-garasi.garage-screen .garage-hint span{font-size:8px !important;min-height:16px !important;padding:0 5px !important;}
  html body #drawer-garasi.garage-screen .garage-dots{gap:7px !important;}
  html body #drawer-garasi.garage-screen .garage-dot{width:7px !important;height:7px !important;}
  html body #drawer-garasi.garage-screen .garage-actions.hero-actions{display:grid !important;grid-template-columns:1fr .82fr !important;gap:7px !important;margin-top:0 !important;padding:0 !important;}
  html body #drawer-garasi.garage-screen .garage-actions .btn{height:40px !important;border-radius:13px !important;font-size:12px !important;padding:0 7px !important;}
}

@media (max-width:360px), (max-height:680px){
  html body #drawer-garasi.garage-screen .garage-head{height:70px !important;padding-top:calc(env(safe-area-inset-top,0px) + 11px) !important;}
  html body #drawer-garasi.garage-screen .garage-head-centered h2{font-size:26px !important;}
  html body #drawer-garasi.garage-screen .garage-head-centered p{font-size:8.5px !important;}
  html body #drawer-garasi.garage-screen .garage-close{width:38px !important;height:38px !important;font-size:25px !important;}
  html body #drawer-garasi.garage-screen .garage-slider-wrap,
  html body #drawer-garasi.garage-screen .garage-slider-wrap.garage-bottom-rebuild{height:calc(100dvh - 94px - env(safe-area-inset-top,0px)) !important;padding-left:8px !important;padding-right:8px !important;}
  html body #drawer-garasi.garage-screen .garage-stage,
  html body #drawer-garasi.garage-screen .garage-stage-rebuilt{height:210px !important;min-height:210px !important;max-height:210px !important;}
  html body #drawer-garasi.garage-screen .garage-vehicle{max-width:48% !important;max-height:116px !important;}
  html body #drawer-garasi.garage-screen .garage-nav{top:80px !important;width:38px !important;height:38px !important;font-size:30px !important;}
  html body #drawer-garasi.garage-screen .garage-bottom-stack{gap:5px !important;}
  html body #drawer-garasi.garage-screen .garage-actions .btn{height:37px !important;font-size:11px !important;}
}

@supports not (height:100dvh){
  @media (max-width:900px), (pointer:coarse){
    html body #drawer-garasi.garage-screen{height:100vh !important;min-height:100vh !important;}
    html body #drawer-garasi.garage-screen .garage-slider-wrap,
    html body #drawer-garasi.garage-screen .garage-slider-wrap.garage-bottom-rebuild{height:calc(100vh - 104px - env(safe-area-inset-top,0px)) !important;}
  }
}

/* Guild Inventory: self take + owner send actions */
#drawer-guild .guild-stock-actions{
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:7px !important;
  min-width:0 !important;
}
#drawer-guild .guild-inline-form{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) 62px !important;
  gap:6px !important;
  align-items:end !important;
  min-width:0 !important;
}
#drawer-guild .guild-inline-form label{
  min-width:0 !important;
}
#drawer-guild .guild-inline-form select,
#drawer-guild .guild-inline-form input{
  width:100% !important;
}
#drawer-guild .guild-storage-row .guild-stock-actions button{
  width:100% !important;
}
#drawer-guild .guild-storage-row .guild-stock-actions form[data-guild-form="bag_withdraw"]{
  grid-template-columns:minmax(0,1fr) 68px 62px !important;
}
@media (max-width:420px){
  #drawer-guild .guild-storage-row.owner,
  #drawer-guild .guild-storage-row.view-only{
    grid-template-columns:38px minmax(0,1fr) !important;
    grid-template-rows:auto auto !important;
  }
  #drawer-guild .guild-storage-row .guild-stock-actions{
    grid-column:1 / -1 !important;
    grid-row:2 !important;
  }
  #drawer-guild .guild-storage-row .guild-stock-actions form[data-guild-form="bag_withdraw"]{
    grid-template-columns:1fr !important;
  }
}

/* Crafting role lock: hide recipe controls until guild owner selects a business role. */
#drawer-crafting.guild-role-locked #craftingFilters,
#drawer-crafting.guild-role-locked [data-craft-filter]{
  display:none !important;
}
#drawer-crafting .crafting-role-lock-card{
  margin:10px 0;
  padding:16px 12px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:14px;
  background:rgba(4,16,30,.92);
  color:#eaf8ff;
  text-align:center;
}
#drawer-crafting .crafting-role-lock-card h3{
  margin:0 0 6px;
  color:#aaff43;
  font-size:15px;
  font-weight:1000;
  text-transform:uppercase;
}
#drawer-crafting .crafting-role-lock-card p{
  margin:0;
  color:#9eb0c1;
  font-size:11px;
  font-weight:800;
  line-height:1.35;
}

@media (min-width:901px) and (pointer:fine){
/* Dashboard web/PC final: lower and shrink the walking/vehicle visual without changing mobile. */
html.drivergas-web body .clean-vehicle-img{
  top:63px !important;
  height:205px !important;
  max-width:310px !important;
}
html.drivergas-web body .clean-walk-box img{
  bottom:-10px !important;
  width:190px !important;
  height:190px !important;
}
html.drivergas-web body .clean-bottom{
  bottom:2px !important;
}

/* Garage web portrait final: keep Garage in the same portrait canvas as the game. */
html.drivergas-web body #drawer-garasi.garage-screen .garage-bg,
html.drivergas-web body #drawer-garasi.garage-screen .garage-overlay{inset:0 !important;border-radius:0 !important;}
html.drivergas-web body #drawer-garasi.garage-screen .garage-head{height:78px !important;padding:calc(env(safe-area-inset-top,0px) + 14px) 56px 4px 16px !important;}
html.drivergas-web body #drawer-garasi.garage-screen .garage-head-centered h2{font-size:30px !important;line-height:1 !important;}
html.drivergas-web body #drawer-garasi.garage-screen .garage-head-centered p{margin-top:5px !important;gap:7px !important;font-size:10px !important;}
html.drivergas-web body #drawer-garasi.garage-screen .garage-head-centered p span{width:28px !important;height:2px !important;}
html.drivergas-web body #drawer-garasi.garage-screen .garage-close{top:calc(env(safe-area-inset-top,0px) + 12px) !important;right:14px !important;width:42px !important;height:42px !important;font-size:28px !important;}
html.drivergas-web body #drawer-garasi.garage-screen .garage-slot-summary{margin:0 auto 4px !important;max-width:415px !important;padding:5px 8px !important;gap:5px !important;font-size:8.5px !important;line-height:1.12 !important;}
html.drivergas-web body #drawer-garasi.garage-screen .garage-slot-summary b{font-size:9.5px !important;}
html.drivergas-web body #drawer-garasi.garage-screen .garage-slot-summary span{font-size:7.5px !important;}
html.drivergas-web body #drawer-garasi.garage-screen .garage-slider-wrap,
html.drivergas-web body #drawer-garasi.garage-screen .garage-slider-wrap.garage-bottom-rebuild{height:calc(100% - 104px - env(safe-area-inset-top,0px)) !important;padding:4px 10px calc(8px + env(safe-area-inset-bottom,0px)) !important;overflow:hidden !important;box-sizing:border-box !important;}
html.drivergas-web body #drawer-garasi.garage-screen .garage-slider{height:100% !important;overflow-x:auto !important;overflow-y:hidden !important;align-items:stretch !important;}
html.drivergas-web body #drawer-garasi.garage-screen .garage-slide,
html.drivergas-web body #drawer-garasi.garage-screen .garage-slide-rebuilt{height:100% !important;min-height:0 !important;overflow-y:auto !important;overflow-x:hidden !important;gap:6px !important;padding:0 2px !important;scrollbar-width:none !important;}
html.drivergas-web body #drawer-garasi.garage-screen .garage-slide::-webkit-scrollbar,
html.drivergas-web body #drawer-garasi.garage-screen .garage-slide-rebuilt::-webkit-scrollbar{display:none !important;}
html.drivergas-web body #drawer-garasi.garage-screen .garage-stage,
html.drivergas-web body #drawer-garasi.garage-screen .garage-stage-rebuilt{height:150px !important;min-height:150px !important;max-height:150px !important;padding-top:0 !important;}
html.drivergas-web body #drawer-garasi.garage-screen .garage-stage-floor{bottom:-58px !important;}
html.drivergas-web body #drawer-garasi.garage-screen .garage-stage::after{bottom:-60px !important;}
html.drivergas-web body #drawer-garasi.garage-screen .garage-vehicle{max-width:58% !important;max-height:142px !important;transform:translateY(68px) !important;}
html.drivergas-web body #drawer-garasi.garage-screen .garage-nav{top:102px !important;width:40px !important;height:40px !important;font-size:31px !important;}
html.drivergas-web body #drawer-garasi.garage-screen .garage-nav.prev{left:8px !important;}
html.drivergas-web body #drawer-garasi.garage-screen .garage-nav.next{right:8px !important;}
html.drivergas-web body #drawer-garasi.garage-screen .garage-bottom-stack{
  flex:1 1 auto !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:flex-end !important;
  gap:6px !important;
  min-height:0 !important;
  margin-top:auto !important;
  padding:0 4px 4px !important;
}
html.drivergas-web body #drawer-garasi.garage-screen .garage-namebar{padding:0 4px !important;gap:7px !important;}
html.drivergas-web body #drawer-garasi.garage-screen .garage-name-left{gap:6px !important;min-width:0 !important;}
html.drivergas-web body #drawer-garasi.garage-screen .garage-name-left img{width:24px !important;height:24px !important;}
html.drivergas-web body #drawer-garasi.garage-screen .garage-name-left h3{font-size:14px !important;min-width:0 !important;}
html.drivergas-web body #drawer-garasi.garage-screen .garage-tier{height:23px !important;padding:0 7px !important;font-size:9px !important;}
html.drivergas-web body #drawer-garasi.garage-screen .garage-stats-card{margin:0 !important;padding:8px 9px 7px !important;border-radius:14px !important;border-width:1px !important;}
html.drivergas-web body #drawer-garasi.garage-screen .garage-main-box{padding:0 6px 7px !important;}
html.drivergas-web body #drawer-garasi.garage-screen .garage-main-label{gap:5px !important;font-size:9px !important;}
html.drivergas-web body #drawer-garasi.garage-screen .garage-main-icon{font-size:15px !important;}
html.drivergas-web body #drawer-garasi.garage-screen .garage-main-value{font-size:16px !important;margin:5px 0 6px !important;}
html.drivergas-web body #drawer-garasi.garage-screen .garage-main-box em{height:7px !important;}
html.drivergas-web body #drawer-garasi.garage-screen .garage-mini-stats{margin-top:6px !important;padding-top:6px !important;}
html.drivergas-web body #drawer-garasi.garage-screen .garage-mini-item{padding:4px !important;}
html.drivergas-web body #drawer-garasi.garage-screen .garage-mini-item span{font-size:7.8px !important;}
html.drivergas-web body #drawer-garasi.garage-screen .garage-mini-item strong{font-size:10px !important;}
html.drivergas-web body #drawer-garasi.garage-screen .garage-job-card.wide{margin:0 !important;padding:7px 9px !important;border-radius:13px !important;border-width:1px !important;}
html.drivergas-web body #drawer-garasi.garage-screen .garage-job-card span{font-size:9px !important;margin-bottom:3px !important;}
html.drivergas-web body #drawer-garasi.garage-screen .garage-job-card strong{font-size:12px !important;line-height:1.18 !important;}
html.drivergas-web body #drawer-garasi.garage-screen .garage-dots-block{gap:2px !important;padding:0 !important;margin:0 !important;}
html.drivergas-web body #drawer-garasi.garage-screen .garage-hint span{font-size:8px !important;min-height:16px !important;padding:0 5px !important;}
html.drivergas-web body #drawer-garasi.garage-screen .garage-dots{gap:7px !important;}
html.drivergas-web body #drawer-garasi.garage-screen .garage-dot{width:7px !important;height:7px !important;}
html.drivergas-web body #drawer-garasi.garage-screen .garage-actions.hero-actions{display:grid !important;grid-template-columns:1fr .82fr !important;gap:7px !important;margin-top:0 !important;padding:0 !important;}
html.drivergas-web body #drawer-garasi.garage-screen .garage-actions .btn{height:40px !important;border-radius:13px !important;font-size:12px !important;padding:0 7px !important;}
}

#drawer-profile .referral-estimate-box{
  display:grid !important;
  gap:7px !important;
  margin-top:8px !important;
  padding:8px !important;
  border-radius:12px !important;
  background:rgba(156,255,68,.08) !important;
  border:1px solid rgba(156,255,68,.18) !important;
}

#drawer-profile .referral-estimate-box>span{
  display:block !important;
  color:#aaff43 !important;
  font-size:9px !important;
  line-height:1 !important;
  font-weight:1000 !important;
  letter-spacing:.06em !important;
  text-transform:uppercase !important;
}

#drawer-profile .referral-tier-list{
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:5px !important;
}

#drawer-profile .referral-tier-row{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) auto !important;
  gap:3px 7px !important;
  align-items:center !important;
  padding:7px 8px !important;
  border-radius:10px !important;
  background:rgba(0,0,0,.20) !important;
  border:1px solid rgba(255,255,255,.08) !important;
}

#drawer-profile .referral-tier-row b,
#drawer-profile .referral-tier-row strong,
#drawer-profile .referral-tier-row em{
  min-width:0 !important;
  line-height:1.12 !important;
}

#drawer-profile .referral-tier-row b{
  color:#f5fff6 !important;
  font-size:11px !important;
  font-weight:1000 !important;
  overflow-wrap:anywhere !important;
}

#drawer-profile .referral-tier-row strong{
  color:#aaff43 !important;
  font-size:12px !important;
  font-weight:1000 !important;
  text-align:right !important;
  white-space:nowrap !important;
}

#drawer-profile .referral-tier-row em{
  grid-column:1/3 !important;
  color:#cfe8d8 !important;
  font-size:9px !important;
  font-style:normal !important;
  font-weight:800 !important;
  overflow-wrap:anywhere !important;
}


/* ===== LOGIN INDEX CENTER FIX V2 ===== */
body.login-body{
  width:100% !important;
  height:100svh !important;
  min-height:100vh !important;
  display:grid !important;
  place-items:center !important;
  margin:0 !important;
  padding:0 !important;
}
body.login-body > .login-screen{
  position:relative !important;
  left:auto !important;
  right:auto !important;
  top:auto !important;
  margin:0 !important;
  justify-self:center !important;
  align-self:center !important;
  transform:none !important;
  transform-origin:center center !important;
}

/* Coin marketplace redesign */
#drawer-marketplace .coin-market-box{display:grid;gap:10px;}
#drawer-marketplace .coin-market-info{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;}
#drawer-marketplace .coin-market-info>div,
#drawer-marketplace .coin-best-card,
#drawer-marketplace .coin-market-form.coin-market-compact,
#drawer-marketplace .coin-order-row{box-shadow:0 8px 20px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.03);}
#drawer-marketplace .coin-market-info>div{padding:10px 9px;border-radius:10px;border:1px solid rgba(115,154,255,.16);background:linear-gradient(180deg,rgba(12,27,55,.96),rgba(5,13,26,.96));}
#drawer-marketplace .coin-market-info small{display:block;color:#8ea4be;font-size:7px;font-weight:1000;letter-spacing:.06em;text-transform:uppercase;}
#drawer-marketplace .coin-market-info b{display:block;margin-top:3px;color:#fff;font-size:11px;font-weight:1000;}
#drawer-marketplace .coin-best-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;}
#drawer-marketplace .coin-best-card{padding:11px 10px;border-radius:12px;border:1px solid rgba(255,255,255,.12);background:linear-gradient(180deg,rgba(12,27,55,.96),rgba(5,13,26,.96));}
#drawer-marketplace .coin-best-card.is-buy{border-color:rgba(77,219,125,.38);background:linear-gradient(180deg,rgba(13,53,33,.96),rgba(4,18,14,.96));}
#drawer-marketplace .coin-best-card.is-sell{border-color:rgba(255,134,86,.35);background:linear-gradient(180deg,rgba(60,27,14,.96),rgba(21,10,7,.96));}
#drawer-marketplace .coin-best-card small{display:block;color:#d1e2f1;font-size:8px;font-weight:1000;text-transform:uppercase;letter-spacing:.05em;}
#drawer-marketplace .coin-best-card strong{display:block;margin-top:5px;color:#fff;font-size:16px;font-weight:1000;}
#drawer-marketplace .coin-best-card span{display:block;margin-top:4px;color:#d7e4ef;font-size:8px;font-weight:850;line-height:1.35;}
#drawer-marketplace .coin-market-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;}
#drawer-marketplace .coin-market-tabs button{height:34px;border:1px solid rgba(118,149,255,.22);border-radius:10px;background:linear-gradient(180deg,#0f223c,#081523);color:#c7d6e5;font-size:9px;font-weight:1000;text-transform:uppercase;box-shadow:0 6px 14px rgba(0,0,0,.22);}
#drawer-marketplace .coin-market-tabs button.is-active{border-color:rgba(78,142,255,.58);background:linear-gradient(180deg,#2666ff,#1237a0);color:#fff;}
#drawer-marketplace .coin-market-panel{display:none;gap:8px;}
#drawer-marketplace .coin-market-panel.active{display:grid;}
#drawer-marketplace .coin-market-form.coin-market-compact{display:grid;gap:8px;padding:11px;border:1px solid rgba(118,149,255,.18);border-radius:12px;background:linear-gradient(180deg,rgba(12,27,55,.98),rgba(5,13,26,.98));}
#drawer-marketplace .coin-market-form.coin-market-compact>div:first-child{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;}
#drawer-marketplace .coin-market-form.coin-market-compact>div:first-child h3{margin:0;font-size:12px;font-weight:1000;color:#fff;}
#drawer-marketplace .coin-market-form.coin-market-compact>div:first-child p{margin:0;max-width:58%;color:#c4d3e2;font-size:8px;line-height:1.35;text-align:right;}
#drawer-marketplace .coin-market-form.coin-market-best{border-color:rgba(79,214,121,.34);background:linear-gradient(180deg,rgba(15,47,24,.96),rgba(6,17,11,.96));}
#drawer-marketplace .coin-market-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;}
#drawer-marketplace .coin-market-form label{display:block;color:#cbd8e6;font-size:8px;font-weight:1000;text-transform:uppercase;letter-spacing:.03em;}
#drawer-marketplace .coin-market-form input{width:100%;height:34px;margin-top:4px;padding:0 10px;border:1px solid rgba(255,255,255,.12);border-radius:9px;background:rgba(4,10,20,.86);color:#fff;font-size:11px;font-weight:900;}
#drawer-marketplace .coin-market-simple-preview{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:38px;padding:8px 10px;border-radius:9px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.05);}
#drawer-marketplace .coin-market-simple-preview b{display:block;color:#aaff43;font-size:10px;font-weight:1000;}
#drawer-marketplace .coin-market-simple-preview span{display:block;color:#d4e0eb;font-size:8px;font-weight:850;text-align:right;line-height:1.35;}
#drawer-marketplace .coin-market-form button{min-height:36px;border:0;border-radius:9px;background:linear-gradient(180deg,#2666ff,#1237a0);color:#fff;font-size:10px;font-weight:1000;box-shadow:0 8px 16px rgba(8,26,82,.35);}
#drawer-marketplace .coin-market-title{margin:3px 0 0 !important;color:#eef6ff;font-size:10px !important;font-weight:1000;letter-spacing:.04em;}
#drawer-marketplace .coin-order-book{display:grid;gap:7px;}
#drawer-marketplace .coin-order-row{display:grid;grid-template-columns:minmax(0,1fr) 94px;align-items:center;gap:8px;padding:10px;border:1px solid rgba(255,255,255,.1);border-radius:11px;background:linear-gradient(180deg,rgba(11,24,45,.97),rgba(5,12,24,.96));}
#drawer-marketplace .coin-order-row.buy{border-left:3px solid #58bd1d;}
#drawer-marketplace .coin-order-row.sell{border-left:3px solid #ffaa3b;}
#drawer-marketplace .coin-order-row.mine{border-left:3px solid #4e8eff;}
#drawer-marketplace .coin-order-row.history{grid-template-columns:minmax(0,1fr) 102px;}
#drawer-marketplace .coin-order-row small{display:block;color:#97aac0;font-size:7px;font-weight:1000;letter-spacing:.05em;}
#drawer-marketplace .coin-order-row strong{display:block;margin:2px 0;color:#fff;font-size:11px;font-weight:1000;}
#drawer-marketplace .coin-order-row span{display:block;color:#d3deea;font-size:7px;font-weight:850;line-height:1.35;}
#drawer-marketplace .coin-order-row>button{min-height:34px;border:0;border-radius:9px;background:linear-gradient(180deg,#2666ff,#1237a0);color:#fff;font-size:8px;font-weight:1000;padding:0 8px;}
#drawer-marketplace .coin-order-row>button.cancel{background:linear-gradient(180deg,#8c3434,#5a1717);}
#drawer-marketplace .coin-order-row>b{display:block;color:#aaff43;font-size:10px;font-weight:1000;text-align:center;overflow-wrap:anywhere;}
#drawer-marketplace.coin-market-processing .coin-market-panel{pointer-events:none;opacity:.72;}
@media (max-width: 430px){
  #drawer-marketplace .coin-market-info,#drawer-marketplace .coin-best-cards,#drawer-marketplace .coin-market-fields{grid-template-columns:repeat(2,minmax(0,1fr));}
}