.simple-step-card {
  border: none !important;
  border-radius: 20px !important;
  background: #ffffff !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0,0,0,0.02) !important;
  padding: 24px !important;
  margin-bottom: 20px !important;
}

/* Clean wallet slip verification loading state. */
html body #walletView .wallet-create-transfer.is-loading,
html body #walletView .wallet-create-transfer.is-loading:hover {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 11px !important;
  min-height: 112px !important;
  padding: 18px !important;
  border: 1.5px solid #a9c5e8 !important;
  background: linear-gradient(180deg, #f8fbff, #edf5ff) !important;
  color: transparent !important;
  opacity: 1 !important;
  cursor: wait !important;
  overflow: hidden !important;
}

html body #walletView .wallet-create-transfer.is-loading::before {
  content: "" !important;
  position: static !important;
  box-sizing: border-box !important;
  display: block !important;
  width: 34px !important;
  height: 34px !important;
  margin: 0 !important;
  border: 3px solid #c9dcf4 !important;
  border-top-color: #2e66aa !important;
  border-radius: 50% !important;
  background: transparent !important;
  animation: wallet-slip-spin .75s linear infinite !important;
}

html body #walletView .wallet-create-transfer.is-loading::after {
  content: "กำลังตรวจสอบสลิป กรุณารอสักครู่..." !important;
  position: static !important;
  display: block !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  border: 0 !important;
  color: #244c80 !important;
  font-size: 13px !important;
  font-weight: 850 !important;
  line-height: 1.5 !important;
  text-align: center !important;
  white-space: normal !important;
  animation: none !important;
}

/* Bank wallet flow layout: keep the full heading visible below the sticky header. */
html body #walletView #walletForm.wallet-channel-flow {
  scroll-margin-top: 88px !important;
}

html body #walletView #walletForm.wallet-slip-auto-amount {
  display: block;
  width: 100% !important;
  max-width: 720px !important;
  margin: 0 auto !important;
  padding: 22px 30px 34px !important;
  border: 1px solid #d9e4ee !important;
  border-radius: 18px !important;
  background: #fff !important;
}

html body #walletView #walletForm.wallet-slip-auto-amount .wallet-channel-back {
  margin: 0 0 14px !important;
}

html body #walletView #walletForm.wallet-slip-auto-amount .wallet-section-title {
  justify-content: center !important;
  margin: 0 0 16px !important;
  text-align: center !important;
}

html body #walletView #walletForm.wallet-slip-auto-amount .wallet-title-copy {
  justify-items: center !important;
  width: 100% !important;
}

html body #walletView #walletForm.wallet-slip-auto-amount .wallet-transfer-warning {
  margin-bottom: 18px !important;
}

html body #walletView #walletForm.wallet-slip-auto-amount .wallet-method-wrapper {
  margin: 0 !important;
}

html body #walletView #walletForm.wallet-slip-auto-amount .wallet-receiver-preview {
  margin: 0 !important;
}

@media (max-width: 640px) {
  html body #walletView #walletForm.wallet-channel-flow {
    scroll-margin-top: 76px !important;
  }

  html body #walletView #walletForm.wallet-slip-auto-amount {
    padding: 16px 12px 24px !important;
    border-radius: 15px !important;
  }
}

@keyframes wallet-slip-spin {
  to { transform: rotate(360deg); }
}

/* Wallet channel selection shown before the transfer form. */
html body #walletView .wallet-channel-selector {
  box-sizing: border-box;
  width: 100%;
  padding: 30px;
  border: 1px solid #dce8e0;
  border-radius: 22px;
  background:
    radial-gradient(circle at 12% 0%, rgba(61, 222, 113, .14), transparent 35%),
    linear-gradient(145deg, #fbfffc, #f2fbf5);
  box-shadow: 0 18px 46px rgba(27, 83, 43, .11);
}

html body #walletView .wallet-channel-heading small {
  display: block;
  margin-bottom: 5px;
  color: #17984b;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .1em;
}

html body #walletView .wallet-channel-heading h1 {
  margin: 0;
  color: #14281b;
  font-size: clamp(22px, 3vw, 32px);
  line-height: 1.2;
}

html body #walletView .wallet-channel-heading p {
  margin: 8px 0 0;
  color: #68766d;
  font-size: 12px;
}

html body #walletView .wallet-channel-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 24px;
}

html body #walletView .wallet-channel-card {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 255px;
  padding: 20px;
  border: 1px solid #d8e8dc;
  border-radius: 18px;
  background: rgba(255, 255, 255, .94);
  color: #203228;
  box-shadow: 0 8px 24px rgba(25, 71, 39, .07);
  cursor: pointer;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

html body #walletView .wallet-channel-card:hover {
  border-color: #2fc568;
  box-shadow: 0 14px 30px rgba(22, 163, 74, .14);
  transform: translateY(-3px);
}

html body #walletView .wallet-channel-note {
  min-height: 34px;
  color: #6f7d74;
  font-size: 10px;
  line-height: 1.55;
  text-align: center;
}

html body #walletView .wallet-channel-icon {
  display: grid;
  place-items: center;
  width: 86px;
  height: 86px;
  margin: 12px 0 14px;
  border-radius: 18px;
  background: #f3faf5;
  overflow: hidden;
}

html body #walletView .wallet-channel-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

html body #walletView .wallet-channel-slip-icon svg {
  width: 66px;
  height: 66px;
  fill: none;
  stroke: #2563a9;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

html body #walletView .wallet-channel-card > strong {
  color: #15251b;
  font-size: 17px;
  font-weight: 900;
}

html body #walletView .wallet-channel-meta {
  display: flex;
  gap: 10px;
  margin-top: 9px;
  color: #748179;
  font-size: 10px;
}

html body #walletView .wallet-channel-meta b {
  color: #15984a;
}

html body #walletView .wallet-channel-back {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin: 0 0 18px;
  padding: 8px 11px;
  border: 1px solid #d7e5db;
  border-radius: 9px;
  background: #f7fbf8;
  color: #2f4738;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}

html body #walletView .wallet-channel-back svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

@media (max-width: 640px) {
  html body #walletView .wallet-channel-selector {
    padding: 19px 14px;
    border-radius: 17px;
  }

  html body #walletView .wallet-channel-grid {
    grid-template-columns: 1fr;
    gap: 12px;
    margin-top: 18px;
  }

  html body #walletView .wallet-channel-card {
    min-height: 205px;
    padding: 16px;
  }

  html body #walletView .wallet-channel-icon {
    width: 72px;
    height: 72px;
    margin: 8px 0 10px;
  }

  html body #walletView .wallet-channel-slip-icon svg {
    width: 56px;
    height: 56px;
  }
}

html body #walletView #walletForm.wallet-slip-auto-amount .wallet-input-wrapper,
html body #walletView #walletForm.wallet-slip-auto-amount .wallet-method-wrapper > span,
html body #walletView #walletForm.wallet-slip-auto-amount .wallet-method-grid {
  display: none !important;
}

html body #walletView .wallet-auto-amount-note {
  box-sizing: border-box;
  display: grid;
  gap: 5px;
  width: 100%;
  margin: 12px 0 18px;
  padding: 12px;
  border: 1px solid #b9e8c8;
  border-radius: 12px;
  background: #f0fbf4;
  text-align: center;
}

html body #walletView .wallet-auto-amount-note span {
  color: #688071;
  font-size: 10px;
}

html body #walletView .wallet-auto-amount-note strong {
  color: #148b43;
  font-size: 15px;
}

html body #walletView .wallet-receiver-preview.is-truemoney .wallet-selected-amount {
  box-sizing: border-box !important;
  display: grid !important;
  gap: 5px !important;
  width: 100% !important;
  margin: 12px 0 18px !important;
  padding: 12px !important;
  border: 1px solid #b9e8c8 !important;
  border-radius: 12px !important;
  background: #f0fbf4 !important;
  text-align: center !important;
}

html body #walletView .wallet-receiver-preview.is-truemoney .wallet-selected-amount span,
html body #walletView .wallet-receiver-preview.is-truemoney .wallet-selected-amount strong {
  font-size: 0 !important;
}

html body #walletView .wallet-receiver-preview.is-truemoney .wallet-selected-amount span::after {
  content: "����ͧ�к��ʹ��ǧ˹��" !important;
  color: #688071 !important;
  font-size: 10px !important;
}

html body #walletView .wallet-receiver-preview.is-truemoney .wallet-selected-amount strong::after {
  content: "�к��������ʹ��ԧ���Ի" !important;
  color: #148b43 !important;
  font-size: 15px !important;
  font-weight: 850 !important;
}

html body #walletView .wallet-receiver-preview.is-truemoney > p {
  font-size: 0 !important;
}

html body #walletView .wallet-receiver-preview.is-truemoney > p::after {
  content: "�͹������� Wallet ��� �����ѻ��Ŵ��Ի �к�����ҹ�ʹ��ԧ�������ôԵ����ѵ��ѵ�" !important;
  color: #718096 !important;
  font-size: 11px !important;
  line-height: 1.6 !important;
}

.premium-mobile-wallet-balance { display: none; }
@media (max-width: 900px) {
  html body .site-header #headerBalance:not(.hidden) {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 0 !important;
    width: auto !important;
    height: 38px !important;
    padding: 4px 9px !important;
    border: 1px solid #bfe8cd !important;
    border-radius: 11px !important;
    background: #effbf3 !important;
  }
  html body .site-header #headerBalance:not(.hidden) > .icon { display: none !important; }
  html body .site-header #headerBalance:not(.hidden) > span { display: block !important; }
  html body .site-header #headerBalance:not(.hidden) small { display: none !important; }
  html body .site-header #headerBalance:not(.hidden) strong {
    color: #129849 !important;
    font-size: 11px !important;
    white-space: nowrap !important;
  }
  html body.premium-fullscreen.premium-detail-open .premium-mobile-wallet-balance {
    box-sizing: border-box !important;
    position: sticky !important;
    top: calc(8px + env(safe-area-inset-top)) !important;
    z-index: 3 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: calc(100% - 52px) !important;
    min-height: 39px !important;
    margin: 0 52px 8px 0 !important;
    padding: 7px 12px !important;
    border: 1px solid #bee8cd !important;
    border-radius: 12px !important;
    background: rgba(239, 251, 243, .96) !important;
    box-shadow: 0 5px 14px rgba(19, 140, 68, .08) !important;
    backdrop-filter: blur(8px) !important;
  }
  html body.premium-fullscreen.premium-detail-open .premium-mobile-wallet-balance span {
    color: #647269 !important;
    font-size: 9px !important;
    font-weight: 700 !important;
  }
  html body.premium-fullscreen.premium-detail-open .premium-mobile-wallet-balance strong {
    color: #0ba64a !important;
    font-size: 15px !important;
    font-weight: 900 !important;
  }
}

/* Admin SMM app category selector */
.admin-service-app-filters{padding:16px;border:1px solid #c8e8d1;border-radius:15px;background:rgba(255,255,255,.88);box-shadow:0 8px 24px rgba(23,120,61,.06)}
.admin-profit-calculator{display:grid;gap:14px;padding:18px;border:1px solid #bce6c8;border-radius:17px;background:linear-gradient(135deg,#f4fff6 0%,#eafaf0 100%);box-shadow:0 10px 28px rgba(19,137,61,.07)}.admin-profit-controls{display:grid;grid-template-columns:minmax(230px,1fr) auto;align-items:end;gap:12px}.admin-profit-controls label{display:grid;gap:7px;font-weight:700}.admin-profit-controls label>small{font-size:11px}.admin-profit-controls label>span{display:flex;height:44px;overflow:hidden;border:1px solid #b9ddc3;border-radius:10px;background:#fff}.admin-profit-controls input{box-sizing:border-box;width:100%;min-width:0;padding:0 13px;border:0;outline:0;font:inherit;font-weight:700}.admin-profit-controls b{display:grid;place-items:center;padding:0 14px;color:#129447}.admin-profit-preview{padding:15px;border:1px solid #d6e9db;border-radius:13px;background:#fff}.admin-profit-preview-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:12px}.admin-profit-preview-head>div{display:grid;gap:3px;min-width:0}.admin-profit-preview-head span{color:#159247;font-size:11px;font-weight:800}.admin-profit-preview-head strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px}.admin-profit-preview-head em{flex:none;padding:6px 10px;border-radius:999px;background:#e8faed;color:#118d40;font-size:11px;font-style:normal;font-weight:800}.admin-profit-compare{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}.admin-profit-compare>div{display:grid;gap:4px;padding:11px;border-radius:10px;background:#f5f8f6}.admin-profit-compare small{color:#718078;font-size:10px}.admin-profit-compare strong{font-size:16px}.admin-profit-compare .new-price{background:#e8faed;color:#087e35}.admin-profit-compare .price-change{background:#effaf2;color:#0b9541}.admin-profit-compare .price-change.down{background:#fff1f1;color:#d53b3b}.admin-profit-preview>p,.admin-profit-warning{margin:10px 0 0;color:#75817a;font-size:10px}.admin-profit-warning{margin:0}
.admin-service-app-title{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}.admin-service-app-title>div{display:grid;gap:2px}.admin-service-app-title strong{font-size:15px}.admin-service-app-title small,.admin-service-app-title>span{color:#75817a;font-size:11px}
.admin-service-app-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(125px,1fr));gap:8px}.admin-service-app-btn{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:44px;padding:9px 12px;border:1px solid #cfe3d5;border-radius:11px;background:#fff;color:#26362c;font:inherit;font-weight:700;cursor:pointer;transition:.18s ease}.admin-service-app-btn:hover{border-color:#32c75d;transform:translateY(-1px)}.admin-service-app-btn b{display:grid;place-items:center;min-width:27px;height:27px;padding:0 6px;border-radius:999px;background:#eef7f0;color:#168e42;font-size:11px}.admin-service-app-btn.active{border-color:#21b94f;background:#66e535;color:#073f1b;box-shadow:0 7px 16px rgba(31,190,79,.18)}.admin-service-app-btn.active b{background:rgba(255,255,255,.75);color:#08722d}
@media(max-width:600px){.admin-service-app-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.admin-service-app-title{align-items:flex-start;flex-direction:column}.admin-service-app-title>span{align-self:flex-end}.admin-profit-controls{grid-template-columns:1fr}.admin-profit-compare{grid-template-columns:repeat(2,1fr)}.admin-profit-preview-head{flex-direction:column}.admin-profit-preview-head em{align-self:flex-start}}

body #gameTopupView .simple-game-info {
  position: sticky !important;
  top: 92px !important;
  display: block !important;
  overflow: hidden !important;
  padding: 0 0 18px !important;
  border-radius: 20px !important;
  border: none !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05) !important;
}

body #gameTopupView .simple-game-cover {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  aspect-ratio: 16 / 9 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  background: #f8fafc !important;
}

body #gameTopupView .simple-game-cover img,
body #gameTopupView .simple-game-cover .topup-card-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
}

body #gameTopupView .simple-game-copy {
  padding: 20px 24px 0 !important;
}

body #gameTopupView .simple-game-badges {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin: 12px 0 10px !important;
}

body #gameTopupView .simple-game-badges span {
  padding: 4px 10px !important;
  border-radius: 999px !important;
  background: #f0fdf4 !important;
  color: #16a34a !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 0.2px !important;
}

body #gameTopupView .simple-game-kicker {
  color: #64748b !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
}

body #gameTopupView .simple-game-copy h2 {
  margin: 0 0 10px !important;
  color: #0f172a !important;
  font-size: 1.4rem !important;
  line-height: 1.25 !important;
  font-weight: 800 !important;
}

body #gameTopupView .simple-game-copy p {
  color: #475569 !important;
  font-size: 13px !important;
  line-height: 1.6 !important;
  margin: 0 !important;
}

body #gameTopupView .simple-game-notes {
  display: flex !important;
  gap: 16px !important;
  margin-top: 20px !important;
  padding-top: 16px !important;
  border-top: 1px solid #f1f5f9 !important;
}

body #gameTopupView .simple-game-notes span {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  color: #0f172a !important;
  font-size: 14px !important;
  font-weight: 800 !important;
}

body #gameTopupView .simple-game-notes span svg {
  width: 18px !important;
  height: 18px !important;
  color: #22c55e !important;
}

.simple-step-title {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  margin: 0 0 20px !important;
}

body #gameTopupView .simple-step-title > span {
  display: grid !important;
  place-items: center !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #22c55e, #16a34a) !important;
  color: #ffffff !important;
  font-weight: 900 !important;
  font-size: 18px !important;
  box-shadow: 0 4px 14px rgba(34, 197, 94, 0.4) !important;
  flex: 0 0 auto !important;
}

body #gameTopupView .simple-step-title h2 {
  margin: 2px 0 0 !important;
  color: #0f172a !important;
  font-size: 1.4rem !important;
  line-height: 1.2 !important;
  font-weight: 800 !important;
}

body #gameTopupView .simple-step-title small {
  color: #64748b !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

body #gameTopupView .game-topup-form {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 16px !important;
  order: 1 !important;
  position: static !important;
  width: auto !important;
  margin: 0 !important;
}

body #gameTopupView .game-topup-form label {
  grid-column: 1 / -1 !important;
  color: #1e293b !important;
  font-weight: 800 !important;
  font-size: 14px !important;
}

body #gameTopupView .uid-warning {
  grid-column: 1 / -1 !important;
  margin: 4px 0 0 !important;
  padding: 14px 16px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(239, 68, 68, 0.2) !important;
  background: #fef2f2 !important;
  color: #b91c1c !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.5 !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

body #gameTopupView .uid-warning::before {
  content: "!";
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  background: #ef4444;
  color: #fff;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 900;
  flex: 0 0 auto;
}

body #gameTopupView .pack-list-panel {
  order: 2 !important;
  padding: 24px !important;
}

body #gameTopupView .game-topup-form .simple-step-title,
body #gameTopupView .game-topup-form label:last-of-type {
  grid-column: 1 / -1 !important;
}

body #gameTopupView .game-topup-form input,
body #gameTopupView .game-topup-form textarea {
  border-radius: 14px !important;
  background: #f8fafc !important;
  border: 2px solid #e2e8f0 !important;
  padding: 16px 20px !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  color: #0f172a !important;
  margin-top: 8px !important;
  transition: all 0.2s ease !important;
  width: 100% !important;
}

body #gameTopupView .game-topup-form input:focus,
body #gameTopupView .game-topup-form textarea:focus {
  border-color: #22c55e !important;
  background: #ffffff !important;
  box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.1) !important;
  outline: none !important;
}

body #gameTopupView .game-topup-form input::placeholder {
  color: #94a3b8 !important;
  font-weight: 500 !important;
}

.simple-step-card {
  border: 1px solid rgba(52, 211, 153, 0.34) !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.96) !important;
  box-shadow: 0 18px 44px rgba(15, 23, 42, 0.08) !important;
}

body #gameTopupView .simple-game-info {
  position: sticky !important;
  top: 92px !important;
  display: block !important;
  overflow: hidden !important;
  padding: 0 0 18px !important;
}

body #gameTopupView .simple-game-cover {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  aspect-ratio: 16 / 9 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  border-radius: 12px 12px 0 0 !important;
  background: #06351f !important;
}

body #gameTopupView .simple-game-cover img,
body #gameTopupView .simple-game-cover .topup-card-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
}

body #gameTopupView .simple-game-copy {
  padding: 18px 20px 0 !important;
}

body #gameTopupView .simple-game-badges {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin: 12px 0 10px !important;
}

body #gameTopupView .simple-game-badges span {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  min-height: 28px !important;
  padding: 6px 10px !important;
  border-radius: 999px !important;
  background: #f0fdf4 !important;
  color: #087443 !important;
  border: 1px solid #bbf7d0 !important;
  font-size: 0.78rem !important;
  font-weight: 950 !important;
}

body #gameTopupView .simple-game-badges span::before {
  content: "" !important;
  display: inline-block !important;
  width: 7px !important;
  height: 7px !important;
  border-radius: 999px !important;
  background: #22c55e !important;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.16) !important;
}

body #gameTopupView .simple-game-kicker,
body #gameTopupView .simple-step-title small {
  display: inline-flex !important;
  width: fit-content !important;
  color: #00a35c !important;
  font-size: 0.75rem !important;
  font-weight: 900 !important;
}

body #gameTopupView .simple-game-copy h2 {
  margin: 6px 0 8px !important;
  color: #101828 !important;
  font-size: 1.45rem !important;
  line-height: 1.1 !important;
}

body #gameTopupView .simple-game-copy p {
  margin: 0 0 14px !important;
  color: #667085 !important;
  font-weight: 800 !important;
  line-height: 1.6 !important;
}

body #gameTopupView .simple-game-notes {
  display: grid !important;
  gap: 8px !important;
}

body #gameTopupView .simple-game-notes span {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  border-radius: 8px !important;
  background: #ecfdf3 !important;
  color: #087443 !important;
  font-weight: 900 !important;
  padding: 10px 12px !important;
}

body #gameTopupView .simple-game-notes span::after {
  content: "พร้อมใช้" !important;
  color: #00a35c !important;
  font-size: 0.72rem !important;
  font-weight: 950 !important;
}

body #gameTopupView .simple-topup-main {
  display: grid !important;
  gap: 16px !important;
}

body #gameTopupView .simple-step-card {
  padding: 18px !important;
}

body #gameTopupView .simple-step-title {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin: 0 0 14px !important;
}

body #gameTopupView .simple-step-title > span {
  display: grid !important;
  place-items: center !important;
  width: 42px !important;
  height: 42px !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, #20d970, #b9f542) !important;
  color: #062116 !important;
  font-weight: 1000 !important;
  box-shadow: 0 10px 22px rgba(32, 217, 112, 0.24) !important;
  flex: 0 0 auto !important;
}

body #gameTopupView .simple-step-title h2 {
  margin: 2px 0 0 !important;
  color: #101828 !important;
  font-size: 1.3rem !important;
  line-height: 1.15 !important;
}

body #gameTopupView .game-topup-form {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 14px !important;
  order: 1 !important;
  position: static !important;
  width: auto !important;
  margin: 0 !important;
}

body #gameTopupView .game-topup-form label {
  grid-column: 1 / -1 !important;
}

body #gameTopupView .uid-warning {
  grid-column: 1 / -1 !important;
  margin: -4px 0 0 !important;
  padding: 10px 12px !important;
  border-radius: 8px !important;
  border: 1px solid rgba(245, 158, 11, 0.32) !important;
  background: #fffbeb !important;
  color: #92400e !important;
  font-size: 0.86rem !important;
  font-weight: 900 !important;
  line-height: 1.45 !important;
}

body #gameTopupView .pack-list-panel {
  order: 2 !important;
}

body #gameTopupView .game-topup-form .simple-step-title,
body #gameTopupView .game-topup-form label:last-of-type {
  grid-column: 1 / -1 !important;
}

body #gameTopupView .game-topup-form input,
body #gameTopupView .game-topup-form textarea {
  border-radius: 8px !important;
  background: #f8fafc !important;
  border-color: #c7d7e8 !important;
}

body #gameTopupView .pack-list-panel .topup-panel-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin-bottom: 8px !important;
}

body #gameTopupView .pack-list-header {
  display: none !important;
}

body #gameTopupView .simple-pack-grid,
body #gameTopupView .pack-card-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(260px, 1fr)) !important;
  gap: 12px !important;
  max-height: 560px !important;
  overflow: auto !important;
  padding: 2px 4px 8px 2px !important;
  border: 0 !important;
  background: transparent !important;
}

body #gameTopupView .pack-pick-card {
  display: grid !important;
  grid-template-columns: 62px minmax(0, 1fr) auto !important;
  grid-template-rows: auto auto !important;
  align-items: center !important;
  gap: 12px !important;
  min-height: 94px !important;
  padding: 12px !important;
  border: 1px solid #d9e6f2 !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  color: #101828 !important;
  text-align: left !important;
  box-shadow: none !important;
}

body #gameTopupView .pack-pick-card:hover,
body #gameTopupView .pack-pick-card.active {
  border-color: #34d399 !important;
  background: #effdf5 !important;
  box-shadow: 0 10px 24px rgba(16, 185, 129, 0.14) !important;
}

body #gameTopupView .pack-pick-card .pack-pick-media {
  width: 62px !important;
  height: 62px !important;
  border-radius: 8px !important;
}

body #gameTopupView .pack-pick-card .pack-info {
  min-width: 0 !important;
}

body #gameTopupView .pack-pick-card .pack-pick-name {
  display: block !important;
  color: #101828 !important;
  font-size: 0.98rem !important;
  line-height: 1.25 !important;
  font-weight: 1000 !important;
}

body #gameTopupView .pack-pick-card small {
  display: block !important;
  margin-top: 5px !important;
  color: #667085 !important;
  line-height: 1.35 !important;
  font-weight: 700 !important;
}

body #gameTopupView .pack-pick-card .pack-sku {
  display: none !important;
}

body #gameTopupView .pack-pick-card .pack-price {
  grid-column: 3 !important;
  grid-row: 1 !important;
  padding: 8px 12px !important;
  border-radius: 999px !important;
  background: #dcfce7 !important;
  color: #009f55 !important;
  font-size: 1rem !important;
  white-space: nowrap !important;
}

body #gameTopupView .pack-pick-card .pack-action {
  grid-column: 3 !important;
  grid-row: 2 !important;
  align-self: end !important;
  justify-self: end !important;
  min-width: 74px !important;
  border-radius: 8px !important;
  border-color: #a7f3d0 !important;
  background: #ffffff !important;
  color: #047857 !important;
}

body #gameTopupView .pack-pick-card.active .pack-action {
  background: #22c55e !important;
  color: #062116 !important;
}

body #gameTopupView .simple-checkout-bar {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 220px !important;
  gap: 12px !important;
  align-items: stretch !important;
  margin-top: 14px !important;
  padding-top: 14px !important;
  border-top: 1px solid #e4eef7 !important;
}

body #gameTopupView .topup-summary {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  min-height: 56px !important;
  border-radius: 8px !important;
  background: #ecfdf3 !important;
  color: #087443 !important;
  border: 1px solid #bbf7d0 !important;
  padding: 12px 14px !important;
  font-weight: 900 !important;
}

body #gameTopupView .topup-summary.is-empty {
  color: #667085 !important;
  background: #f8fafc !important;
  border-color: #d9e6f2 !important;
}

body #gameTopupView #gameTopupSubmitButton:disabled {
  opacity: 0.55 !important;
  cursor: not-allowed !important;
}

body .floating-cart,
body.premium-fullscreen .floating-cart,
body.premium-fullscreen.premium-detail-open .floating-cart {
  display: none !important;
}

@media (max-width: 980px) {
  body #gameTopupView .simple-topup-shell {
    grid-template-columns: 1fr !important;
  }

  body #gameTopupView .simple-game-info {
    position: static !important;
  }

  body #gameTopupView .game-topup-form,
  body #gameTopupView .simple-pack-grid,
  body #gameTopupView .pack-card-grid,
  body #gameTopupView .simple-checkout-bar {
    grid-template-columns: 1fr !important;
  }

  body #gameTopupView .pack-pick-card {
    grid-template-columns: 58px minmax(0, 1fr) !important;
  }

  body #gameTopupView .pack-pick-card .pack-price,
  body #gameTopupView .pack-pick-card .pack-action {
    grid-column: 2 !important;
    grid-row: auto !important;
    justify-self: start !important;
    transform: none !important;
  }
}

@media (min-width: 981px) {
  .game-menu-page .game-package-layout {
    grid-template-columns: minmax(320px, 390px) minmax(0, 1fr) !important;
    gap: 16px !important;
    align-items: start !important;
  }

  .game-menu-page .game-topup-form {
    order: 1 !important;
    position: sticky !important;
    top: 96px !important;
    width: auto !important;
    margin: 0 !important;
  }

  .game-menu-page .pack-list-panel {
    order: 2 !important;
  }

  .game-menu-page .pack-card-grid {
    max-height: calc(100vh - 300px) !important;
  }
}

@media (max-width: 980px) {
  .game-menu-page .game-package-layout {
    grid-template-columns: 1fr !important;
  }

  .game-menu-page .pack-list-panel {
    order: 1 !important;
  }

  .game-menu-page .game-topup-form {
    order: 2 !important;
    position: static !important;
    width: min(100%, 560px) !important;
    margin: 0 auto !important;
  }

  .game-menu-page .pack-card-grid {
    max-height: none !important;
  }
}

@media (max-width: 760px) {
  .orange-hero.has-uploaded-banner {
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: var(--fit-mobile-natural-ratio, var(--fit-desktop-natural-ratio, 16 / 9)) !important;
    background: #ffffff !important;
  }

  .orange-hero.has-uploaded-banner > .managed-image {
    object-fit: contain !important;
    object-position: var(--fit-mobile-x, 50%) var(--fit-mobile-y, 50%) !important;
    transform: scale(var(--fit-mobile-zoom, 1)) !important;
    transform-origin: var(--fit-mobile-x, 50%) var(--fit-mobile-y, 50%) !important;
    background: #ffffff !important;
  }
}

@media (max-width: 760px) {
  .orange-hero.has-uploaded-banner {
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: var(--fit-mobile-natural-ratio, var(--fit-desktop-natural-ratio, 16 / 9)) !important;
    background: #ffffff !important;
  }

  .orange-hero.has-uploaded-banner > .managed-image {
    object-fit: contain !important;
    object-position: var(--fit-mobile-x, 50%) var(--fit-mobile-y, 50%) !important;
    transform: scale(var(--fit-mobile-zoom, 1)) !important;
    transform-origin: var(--fit-mobile-x, 50%) var(--fit-mobile-y, 50%) !important;
    background: #ffffff !important;
  }
}

@media (max-width: 760px) {
  .orange-hero.has-uploaded-banner {
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: var(--fit-mobile-natural-ratio, var(--fit-desktop-natural-ratio, var(--fit-mobile-ratio, 16 / 9))) !important;
    background: #ffffff !important;
  }

  .orange-hero.has-uploaded-banner > .managed-image {
    object-fit: contain !important;
    object-position: var(--fit-mobile-x, 50%) var(--fit-mobile-y, 50%) !important;
    transform: scale(var(--fit-mobile-zoom, 1)) !important;
    transform-origin: var(--fit-mobile-x, 50%) var(--fit-mobile-y, 50%) !important;
    background: #ffffff !important;
  }
}

@media (max-width: 760px) {
  .orange-hero.has-uploaded-banner {
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: var(--fit-mobile-natural-ratio, var(--fit-desktop-natural-ratio, 16 / 9)) !important;
    background: #ffffff !important;
  }

  .orange-hero.has-uploaded-banner > .managed-image {
    object-fit: contain !important;
    object-position: var(--fit-mobile-x, 50%) var(--fit-mobile-y, 50%) !important;
    transform: scale(var(--fit-mobile-zoom, 1)) !important;
    transform-origin: var(--fit-mobile-x, 50%) var(--fit-mobile-y, 50%) !important;
    background: #ffffff !important;
  }
}

@media (max-width: 760px) {
  body.premium-fullscreen .premium-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-items: start !important;
    gap: 8px !important;
  }

  body.premium-fullscreen .premium-card {
    grid-template-rows: auto auto auto !important;
    align-content: start !important;
    min-height: 0 !important;
    height: auto !important;
    gap: 6px !important;
    padding-bottom: 8px !important;
  }

  body.premium-fullscreen .premium-card-img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: auto !important;
    border-radius: 14px 14px 0 0 !important;
    background: #f8fffb !important;
  }

  body.premium-fullscreen .premium-card-img img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    object-fit: contain !important;
    padding: 0 !important;
    filter: none !important;
  }

  body.premium-fullscreen .premium-card-img .premium-img-fallback {
    aspect-ratio: 1 / 1 !important;
    min-height: 0 !important;
  }

  body.premium-fullscreen .premium-card-body strong {
    min-height: 0 !important;
  }

  body.premium-fullscreen .premium-card-bottom {
    align-self: start !important;
  }

  body.premium-fullscreen .premium-head-actions {
    grid-template-columns: 1fr !important;
    gap: 9px !important;
  }

  body.premium-fullscreen .premium-mini-stats {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
    width: 100% !important;
  }

  body.premium-fullscreen .premium-mini-stats span {
    justify-content: center !important;
    min-height: 34px !important;
    padding: 6px 8px !important;
    font-size: 10px !important;
  }

  body.premium-fullscreen .premium-filter-row {
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 7px !important;
  }

  body.premium-fullscreen .premium-stock-filter {
    min-height: 42px !important;
    padding: 0 11px !important;
    border-radius: 13px !important;
    font-size: 11px !important;
  }

  body.premium-fullscreen .premium-stock-filter .icon {
    width: 14px !important;
    height: 14px !important;
  }
}

.premium-coupon-card {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(34, 197, 94, .18);
  border-radius: 14px;
  background: linear-gradient(180deg, #ffffff 0%, #f0fdf4 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
}

.premium-coupon-head {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #102519;
}

.premium-coupon-head span {
  display: inline-grid;
  place-items: center;
  min-width: 50px;
  height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  color: #0f8f55;
  background: #dcfce7;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .04em;
}

.premium-coupon-head strong {
  font-size: 13px;
  font-weight: 950;
}

.premium-coupon-card .premium-coupon-row {
  gap: 10px;
}

.premium-coupon-card input {
  min-height: 44px;
  border-color: rgba(34, 197, 94, .24);
  border-radius: 12px;
  background: #ffffff;
  font-weight: 850;
}

.premium-coupon-card .light-btn {
  min-width: 92px;
  min-height: 44px;
  border-color: rgba(34, 197, 94, .28);
  border-radius: 12px;
  color: #0f8f55;
  background: #dcfce7;
  font-weight: 950;
}

.premium-coupon-result {
  align-items: stretch;
  padding: 12px;
  border-radius: 14px;
  box-shadow: 0 10px 26px rgba(22, 163, 74, .12);
}

.premium-coupon-result > div {
  display: grid;
  gap: 2px;
}

.premium-coupon-result span {
  color: #607568;
  font-size: 12px;
  font-weight: 850;
}

.premium-coupon-result strong {
  color: #16a34a;
  font-size: 22px;
  line-height: 1.05;
}

.premium-coupon-result small {
  color: #0f8f55;
  font-weight: 900;
}

.premium-coupon-result .ghost {
  align-self: center;
  min-height: 36px;
  padding: 8px 12px;
  border-radius: 999px;
  background: #ffffff;
}

.premium-mobile-price-discount {
  display: grid !important;
  gap: 4px;
}

.premium-mobile-price-discount em {
  width: fit-content;
}

body.premium-fullscreen .premium-coupon-card {
  padding: 12px;
  border-radius: 15px;
}

body.premium-fullscreen .premium-coupon-card .premium-coupon-row {
  grid-template-columns: minmax(0, 1fr) 92px;
}

body.premium-fullscreen .premium-coupon-result strong {
  font-size: 22px;
}

* { box-sizing: border-box; }

:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--gold-dark) 72%, #ffffff);
  outline-offset: 3px;
}

.skip-link {
  position: fixed;
  left: 16px;
  top: 12px;
  z-index: 10000;
  transform: translateY(-140%);
  border-radius: 10px;
  background: var(--ink);
  color: #fff;
  padding: 10px 14px;
  box-shadow: var(--shadow);
  transition: transform .16s ease;
}

.skip-link:focus {
  transform: translateY(0);
}

html {
  scrollbar-color: rgba(34, 197, 94, .22) transparent;
  scrollbar-width: thin;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track {
  background: transparent;
}

html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 999px;
  background: rgba(34, 197, 94, .24);
  background-clip: padding-box;
}

body {
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 12% 0%, var(--gold-glow), transparent 30%),
    radial-gradient(circle at 88% 8%, var(--orange-glow), transparent 34%),
    linear-gradient(180deg, var(--page), var(--page));
  font-family: "Noto Sans Thai", "Segoe UI", Tahoma, sans-serif;
  font-weight: 400;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .001ms !important;
  }
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(0,0,0,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,.025) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: linear-gradient(180deg, rgba(0,0,0,.55), transparent 70%);
}

.ambient-icons {
  position: fixed;
  inset: 72px 0 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.ambient-icons::before {
  content: "";
  position: absolute;
  inset: -10% -8%;
  background-image:
    radial-gradient(circle at 18% 22%, color-mix(in srgb, var(--gold) 18%, transparent), transparent 24%),
    radial-gradient(circle at 78% 12%, color-mix(in srgb, var(--gold-dark) 12%, transparent), transparent 22%),
    radial-gradient(circle at 66% 78%, color-mix(in srgb, var(--gold) 10%, transparent), transparent 20%);
  filter: blur(2px);
}

.ambient-icons span {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: calc(42px * var(--s));
  height: calc(42px * var(--s));
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--gold-dark) 18%, transparent);
  border-radius: 14px;
  color: color-mix(in srgb, var(--gold-dark) 52%, transparent);
  background: color-mix(in srgb, var(--panel) 62%, transparent);
  box-shadow: 0 14px 38px color-mix(in srgb, var(--gold-dark) 8%, transparent);
  opacity: .32;
  transform: translate3d(-50%, -50%, 0) rotate(var(--r));
  animation: floatIcon 9s ease-in-out infinite;
  animation-delay: var(--d);
}

.ambient-icons svg {
  width: 54%;
  height: 54%;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ambient-icons span:nth-child(3n) {
  border-radius: 999px;
}

.ambient-icons span:nth-child(4n) {
  opacity: .24;
}

@keyframes floatIcon {
  0%, 100% {
    transform: translate3d(-50%, -50%, 0) rotate(var(--r));
  }
  50% {
    transform: translate3d(-50%, calc(-50% - 18px), 0) rotate(calc(var(--r) + 8deg));
  }
}

button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }

main:focus {
  outline: none;
}

.icon {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  color: var(--gold-dark);
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

.title-icon {
  width: 24px;
  height: 24px;
  stroke: var(--gold-dark);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  vertical-align: -3px;
}

.shell {
  width: min(1440px, calc(100vw - 48px));
  margin: 0 auto;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  width: 100%;
  margin: 0;
  border: 0;
  border-bottom: 1px solid rgba(255,255,255,.9);
  border-radius: 0;
  background: rgba(255, 255, 255, .78);
  backdrop-filter: blur(18px);
  box-shadow: 0 10px 34px rgba(0,0,0,.06);
}

.header-inner {
  height: 70px;
  display: flex;
  align-items: center;
  gap: 22px;
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 82px;
  font-size: 18px;
  font-weight: 800;
}

.site-logo-image {
  width: 32px;
  height: 32px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center;
  border-radius: 8px;
  background: #fff;
  display: block;
}

.logo-mark {
  width: 28px;
  height: 28px;
  border-radius: 9px;
  background: linear-gradient(135deg, #f0fff4, var(--gold) 55%, var(--gold-dark));
  box-shadow: inset 0 0 0 2px #fff;
}

.main-nav {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.main-nav a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 14px;
  color: #626262;
  border-radius: 14px;
  font-size: 14px;
  font-weight: 600;
  transition: background .18s ease, color .18s ease, transform .18s ease;
}

.main-nav a.active,
.main-nav a:hover {
  color: #111;
  background: linear-gradient(180deg, #fff, #f6f6f6);
  transform: translateY(-1px);
  box-shadow: 0 12px 26px rgba(0,0,0,.07);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.point-pill,
.account-pill,
.ghost,
.light-btn,
.admin-tabs button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid var(--line);
  background: #fff;
  color: #111;
  border-radius: 14px;
  padding: 9px 14px;
  font-weight: 750;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.point-pill {
  border: 0;
  background: #ecfff2;
  color: #166534;
  box-shadow: inset 0 0 0 1px #bbf7d0, 0 8px 22px rgba(22, 163, 74, .10);
}
.site-header .header-wallet-balance{justify-content:flex-start!important;gap:9px!important;min-width:155px!important;padding:6px 13px!important;text-decoration:none!important}.site-header .header-wallet-balance>.icon{flex:none;width:22px!important;height:22px!important;color:#169c4d}.site-header .header-wallet-balance>span{display:grid;gap:1px;line-height:1.05}.site-header .header-wallet-balance small{color:#748078;font-size:8px;font-weight:600}.site-header .header-wallet-balance strong{color:#118c43;font-size:13px;font-weight:850}

.account-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 138px;
  justify-content: center;
  box-shadow: 0 2px 12px rgba(0,0,0,.05);
}

.account-pill:hover,
.point-pill:hover,
.ghost:hover,
.light-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(0,0,0,.08);
}

main {
  position: relative;
  z-index: 1;
  width: 100%;
  margin: 0;
  border: 0;
  border-radius: 0;
  background:
    linear-gradient(180deg, rgba(255,255,255,.76), rgba(255,255,255,.9)),
    color-mix(in srgb, var(--page) 72%, transparent);
  box-shadow: none;
  min-height: 680px;
  padding: 38px 0 78px;
  overflow: hidden;
}

.view {
  position: relative;
  z-index: 1;
  display: none;
}
.view.active {
  display: block;
}

.view.view-entering {
  opacity: 0;
  transform: translateY(14px);
}

.view.view-entered {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity .42s ease,
    transform .48s cubic-bezier(.2, .8, .2, 1);
}

@media (prefers-reduced-motion: reduce) {
  .view.view-entering,
  .view.view-entered {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

.page-loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  padding: 24px;
  color: #ffffff;
  background:
    radial-gradient(circle at 50% 42%, rgba(255,255,255,.18), transparent 13%),
    radial-gradient(circle at 28% 16%, color-mix(in srgb, var(--gold) 42%, transparent), transparent 30%),
    radial-gradient(circle at 82% 24%, rgba(32, 226, 171, .34), transparent 26%),
    linear-gradient(135deg, #0b7f3a 0%, var(--green) 48%, #04743b 100%);
  opacity: 1;
  visibility: visible;
  transform: translateZ(0);
  transition: opacity .62s ease, visibility .62s ease;
}

.page-loader::before,
.page-loader::after {
  content: "";
  position: absolute;
  pointer-events: none;
  border-radius: 999px;
}

.page-loader::before {
  width: min(68vw, 520px);
  height: min(68vw, 520px);
  background: radial-gradient(circle, rgba(255,255,255,.16), transparent 62%);
  filter: blur(10px);
}

.page-loader::after {
  inset: 0;
  background:
    linear-gradient(115deg, rgba(255,255,255,.10), transparent 34%),
    linear-gradient(295deg, rgba(0,0,0,.18), transparent 46%);
}

.page-loader.hidden {
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
}

.page-loader-card {
  position: relative;
  display: grid;
  place-items: center;
  gap: 14px;
  width: min(100%, 280px);
  min-height: 230px;
  text-align: center;
  opacity: 0;
  transform: translateY(10px) scale(.98);
  transition: opacity .62s ease, transform .72s cubic-bezier(.2, .8, .2, 1);
}

.page-loader.is-visible .page-loader-card {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.page-loader-orbit {
  position: absolute;
  width: 150px;
  height: 150px;
  border: 4px solid rgba(255, 255, 255, .18);
  border-top-color: #ffffff;
  border-right-color: color-mix(in srgb, var(--gold) 92%, #ffffff);
  border-bottom-color: rgba(255,255,255,.08);
  border-radius: 50%;
  box-shadow:
    0 0 0 13px rgba(255,255,255,.06),
    0 0 38px rgba(126, 226, 58, .22),
    0 24px 70px rgba(7, 64, 28, .32);
  opacity: .72;
  animation:
    spin 1.35s linear infinite,
    loader-breathe 2.4s ease-in-out infinite;
}

.page-loader-orbit::before,
.page-loader-orbit::after {
  content: "";
  position: absolute;
  inset: 14px;
  border-radius: inherit;
}

.page-loader-orbit::before {
  border: 1px solid rgba(255,255,255,.18);
}

.page-loader-orbit::after {
  inset: 25px;
  background: radial-gradient(circle, rgba(255,255,255,.18), transparent 68%);
}

.page-loader-logo {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 112px;
  height: 112px;
  color: #ffffff;
  filter: drop-shadow(0 18px 28px rgba(3, 57, 26, .34));
  animation: loader-logo-breathe 2.4s ease-in-out infinite;
}

.page-loader-logo .site-logo-image {
  width: 92px;
  height: 92px;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  object-fit: contain;
}

.page-loader-logo .logo-mark {
  width: 74px;
  height: 74px;
  border-radius: 22px;
  box-shadow: none;
}

.page-loader-logo strong {
  max-width: 116px;
  overflow: hidden;
  color: #ffffff;
  font-size: 20px;
  font-weight: 900;
  line-height: 1.15;
  text-shadow: 0 3px 14px rgba(0,0,0,.24);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.page-loader p {
  position: relative;
  z-index: 1;
  margin: 0;
  color: rgba(255,255,255,.96);
  font-size: 18px;
  font-weight: 900;
  text-shadow: 0 3px 18px rgba(0,0,0,.22);
  opacity: .84;
  animation: loader-text-fade 2.4s ease-in-out infinite;
}

@keyframes loader-breathe {
  0%, 100% {
    opacity: .54;
    box-shadow:
      0 0 0 10px rgba(255,255,255,.04),
      0 0 24px rgba(126, 226, 58, .14),
      0 22px 58px rgba(7, 64, 28, .24);
  }
  50% {
    opacity: .9;
    box-shadow:
      0 0 0 17px rgba(255,255,255,.08),
      0 0 48px rgba(126, 226, 58, .26),
      0 28px 76px rgba(7, 64, 28, .34);
  }
}

@keyframes loader-logo-breathe {
  0%, 100% {
    opacity: .82;
    transform: translateY(2px) scale(.985);
  }
  50% {
    opacity: 1;
    transform: translateY(-2px) scale(1.015);
  }
}

@keyframes loader-text-fade {
  0%, 100% { opacity: .62; }
  50% { opacity: 1; }
}

.hero-frame {
  position: relative;
  margin: 0 0 32px;
}

.orange-hero {
  position: relative;
  height: 310px;
  border-radius: 22px;
  overflow: hidden;
  background:
    radial-gradient(circle at 15% 25%, rgba(255,255,255,.45), transparent 12%),
    radial-gradient(circle at 78% 22%, rgba(255,255,255,.28), transparent 10%),
    linear-gradient(135deg, #8df05a, #22c55e 50%, #16a34a);
  box-shadow: var(--deep-shadow);
}

.orange-hero.has-uploaded-banner {
  height: auto;
  min-height: 0;
  aspect-ratio: var(--fit-desktop-ratio, 16 / 5);
  background-size: cover;
  background-position: center;
}

.managed-image {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: auto;
  object-fit: var(--fit-desktop-fit, cover);
  object-position: var(--fit-desktop-x, 50%) var(--fit-desktop-y, 50%);
  transform: scale(var(--fit-desktop-zoom, 1));
  transform-origin: var(--fit-desktop-x, 50%) var(--fit-desktop-y, 50%);
}

.managed-image-mobile {
  display: none;
}

.orange-hero.has-uploaded-banner .hero-copy,
.orange-hero.has-uploaded-banner .hero-device {
  display: none;
}

.orange-hero.has-uploaded-banner::before {
  opacity: 0;
}

.orange-hero.has-uploaded-banner::after {
  opacity: 0;
}

.orange-hero::before,
.orange-hero::after {
  content: "";
  position: absolute;
  inset: -30px;
  background-image:
    linear-gradient(45deg, rgba(255,255,255,.4) 0 8px, transparent 8px 24px),
    radial-gradient(circle, rgba(255,255,255,.35) 0 3px, transparent 4px);
  background-size: 72px 72px, 96px 96px;
  opacity: .45;
}

.orange-hero::before {
  animation: floatPattern 18s linear infinite;
}

@keyframes floatPattern {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(72px, 0, 0); }
}

.orange-hero::after {
  inset: auto 0 0;
  height: 70px;
  background: #fff;
  clip-path: polygon(0 42%, 100% 0, 100% 100%, 0 100%);
  opacity: .98;
}

.hero-copy {
  position: relative;
  z-index: 2;
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 28px clamp(24px, 7vw, 92px);
  color: #fff;
  text-align: left;
  text-shadow: 0 3px 18px rgba(6, 78, 37, .24);
}

.hero-copy h1 {
  margin: 0;
  max-width: 720px;
  font-size: clamp(38px, 5vw, 70px);
  line-height: 1.02;
  font-weight: 900;
  letter-spacing: 0;
}

.sample-chip {
  width: fit-content;
  margin-bottom: 18px;
  color: #0f3d22;
  background: rgba(255,255,255,.94);
  padding: 9px 16px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 800;
  text-shadow: none;
  box-shadow: 0 16px 35px rgba(0,0,0,.12);
}

.hero-device {
  position: absolute;
  z-index: 2;
  right: clamp(30px, 7vw, 96px);
  bottom: 58px;
  width: clamp(180px, 22vw, 310px);
  aspect-ratio: 1.35;
  transform: rotate(5deg);
  transform-origin: bottom right;
}

.device-screen {
  position: absolute;
  inset: 20% 14%;
  border: 10px solid rgba(255,255,255,.96);
  border-radius: 28px;
  background:
    radial-gradient(circle at 70% 30%, rgba(126,226,58,.55), transparent 38%),
    linear-gradient(135deg, rgba(16,37,25,.92), rgba(18,48,29,.78));
  box-shadow: 0 26px 60px rgba(6, 78, 37, .28);
}

.device-screen::before,
.device-screen::after {
  content: "";
  position: absolute;
  background: #7ee23a;
  box-shadow: 0 0 0 6px rgba(126,226,58,.14);
}

.device-screen::before {
  left: 22%;
  top: 48%;
  width: 32%;
  height: 8px;
  border-radius: 999px;
}

.device-screen::after {
  right: 22%;
  top: 40%;
  width: 14px;
  height: 14px;
  border-radius: 50%;
}

.device-pad {
  position: absolute;
  top: 38%;
  width: 54px;
  height: 68px;
  border-radius: 20px;
  background: rgba(255,255,255,.95);
  box-shadow: 0 18px 40px rgba(6, 78, 37, .2);
}

.pad-left { left: 2%; }
.pad-right { right: 2%; }

.device-spark {
  position: absolute;
  border-radius: 999px;
  background: rgba(255,255,255,.96);
  box-shadow: 0 14px 35px rgba(6, 78, 37, .16);
}

.spark-one {
  right: 5%;
  top: 7%;
  width: 54px;
  height: 16px;
}

.spark-two {
  left: 11%;
  bottom: 4%;
  width: 74px;
  height: 16px;
}

.slider-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 15;
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 50%;
  background: #8b8b8b;
  color: #fff;
  font-size: 42px;
  line-height: 1;
  display: grid;
  place-items: center;
}

.slider-btn .icon {
  width: 30px;
  height: 30px;
  stroke-width: 2.6;
}

.slider-btn.left { left: -22px; }
.slider-btn.right { right: -22px; }

.service-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: -12px 0 28px;
}

.service-strip article {
  display: flex;
  gap: 13px;
  align-items: center;
  min-height: 84px;
  padding: 16px;
  border: 1px solid rgba(34, 197, 94, .18);
  border-radius: 16px;
  background: rgba(255,255,255,.9);
  box-shadow: 0 16px 36px rgba(15, 61, 34, .07);
}

.service-strip i {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: var(--soft);
  color: var(--gold-dark);
  flex: 0 0 auto;
}

.service-strip strong,
.service-strip span {
  display: block;
}

.service-strip strong {
  color: #102519;
  font-size: 15px;
  font-weight: 900;
}

.service-strip span {
  margin-top: 3px;
  color: #64748b;
  font-size: 12px;
  line-height: 1.45;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
  margin-bottom: 44px;
}

.stat-card {
  min-height: 108px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,255,255,.86)),
    radial-gradient(circle at 90% 10%, rgba(255,194,26,.22), transparent 35%);
  box-shadow: 0 14px 34px rgba(0,0,0,.055);
  position: relative;
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease;
}

.stat-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 46px rgba(0,0,0,.09);
}

.stat-card span {
  display: block;
  color: #111;
  font-weight: 750;
}

.stat-card strong {
  display: inline-block;
  margin-top: 4px;
  color: var(--gold-dark);
  font-size: 34px;
  line-height: 1;
  letter-spacing: 0;
}

.stat-card small {
  color: #555;
  margin-left: 4px;
}

.stat-card .stat-icon {
  position: absolute;
  right: 18px;
  top: 19px;
  color: #f3d866;
  display: grid;
  place-items: center;
}

.stat-card .stat-icon .icon {
  width: 24px;
  height: 24px;
  stroke-width: 1.8;
}

.section-row {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 20px;
  margin: 14px 0 24px;
}

.section-row h2,
.page-title h1 {
  margin: 0;
  color: #090909;
  font-size: 32px;
  line-height: 1.2;
}

.section-row p,
.page-title p {
  margin: 6px 0 0;
  color: #8a8a8a;
  font-style: italic;
}

.section-row a {
  font-weight: 800;
  font-size: 14px;
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.text-link .icon {
  width: 16px;
  height: 16px;
}

.category-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 26px;
  padding-bottom: 34px;
  border-bottom: 1px solid #f0f0f0;
}

.category-grid.all {
  border-bottom: 0;
  margin-bottom: 28px;
}

.category-admin-tools {
  display: flex;
  justify-content: flex-end;
  margin: 10px 0 0;
}

.split-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.category-modal-form {
  margin-top: 14px;
  padding: 0;
  border: 0;
  background: transparent;
}

.category-card {
  min-height: 190px;
  position: relative;
  aspect-ratio: var(--fit-desktop-ratio, auto);
  overflow: hidden;
  border-radius: 22px;
  background:
    linear-gradient(135deg, rgba(22, 163, 74, .92), rgba(126, 226, 58, .78)),
    radial-gradient(circle at 70% 30%, rgba(255,255,255,.4), transparent 25%);
  box-shadow: 0 18px 42px rgba(22, 163, 74, .18);
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
  background-size: cover;
  background-position: center;
}

.category-card .managed-image {
  opacity: 1;
}

.category-card.has-category-image {
  min-height: 0;
  background:
    linear-gradient(135deg, rgba(22, 163, 74, .92), rgba(126, 226, 58, .78));
}

.category-card.has-category-image {
  background-size: cover;
  background-position: center;
}

.category-card:hover {
  transform: translateY(-5px) scale(1.01);
  box-shadow: 0 26px 60px rgba(22, 163, 74, .26);
  filter: saturate(1.08);
}

.category-card::before {
  content: "";
  position: absolute;
  inset: -20px;
  background-image: radial-gradient(circle, rgba(255,255,255,.38) 0 3px, transparent 4px);
  background-size: 60px 60px;
}

.category-card .card-dog {
  position: absolute;
  left: 28px;
  top: 23px;
  width: 92px;
  height: 88px;
  transform: rotate(-10deg);
}

.card-dog::before {
  content: "";
  display: block;
  width: 76px;
  height: 58px;
  margin: 20px auto 0;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 0 0 6px #15803d, 13px 10px 0 #22c55e, -12px 14px 0 #22c55e;
}

.category-shortcut {
  background:
    linear-gradient(135deg, rgba(15, 118, 110, .92), rgba(34, 197, 94, .74)),
    radial-gradient(circle at 78% 20%, rgba(255,255,255,.55), transparent 24%);
}

.category-shortcut .card-route-icon {
  position: absolute;
  left: 28px;
  top: 26px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 68px;
  height: 68px;
  border-radius: 20px;
  color: #052e16;
  background: rgba(255,255,255,.86);
  border: 1px solid rgba(255,255,255,.74);
  box-shadow: 0 18px 34px rgba(5, 46, 22, .18);
}

.category-shortcut .card-route-icon .icon {
  width: 34px;
  height: 34px;
  stroke-width: 2.2;
}

.category-card h3 {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  padding: 18px 24px;
  background: rgba(255,255,255,.94);
  border-radius: 0 0 22px 22px;
  box-shadow: 0 -10px 20px rgba(255,255,255,.7);
}

.category-card h3 span {
  display: block;
  color: #9b9b9b;
  font-size: 12px;
  font-weight: 500;
  margin-top: 4px;
}

.review-slider-section {
  margin: 18px auto 28px;
  padding: 18px;
  overflow: hidden;
  border: 1px solid #bbf7d0;
  border-radius: 20px;
  background:
    radial-gradient(circle at 20% 0%, rgba(250, 204, 21, .16), transparent 28%),
    linear-gradient(135deg, rgba(255,255,255,.98), rgba(240,253,244,.94));
  box-shadow: 0 18px 44px rgba(22, 163, 74, .1);
}

.review-slider-head {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 10px;
  margin-bottom: 14px;
  text-align: center;
}

.review-slider-head span {
  color: #16a34a;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0;
}

.review-slider-head strong {
  color: #10251a;
  font-size: 18px;
  font-weight: 900;
}

.review-slider-track {
  display: flex;
  width: max-content;
  gap: 14px;
  animation: reviewSlide 60s linear infinite;
}

.review-slider-section:hover .review-slider-track {
  animation-play-state: paused;
}

.review-slider-track:has(.review-empty-card) {
  width: 100%;
  justify-content: center;
  animation: none;
}

.review-slide-card {
  width: min(360px, 78vw);
  min-height: 122px;
  display: grid;
  gap: 6px;
  padding: 14px 16px;
  border: 1px solid #dcfce7;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 12px 28px rgba(15, 118, 110, .08);
}

.review-stars {
  color: #f59e0b;
  font-size: 17px;
  line-height: 1;
}

.review-stars span:not(.filled) {
  color: #d1d5db;
}

.review-slide-card p {
  margin: 0;
  color: #10251a;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.45;
}

.review-slide-card small {
  color: #64748b;
  font-size: 12px;
  font-weight: 700;
}

.review-slide-card strong {
  color: #16a34a;
  font-size: 13px;
  font-weight: 900;
}

@keyframes reviewSlide {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.review-modal {
  position: fixed;
  inset: 0;
  z-index: 1600;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(15, 23, 42, .48);
  backdrop-filter: blur(10px);
}

.review-modal.hidden {
  display: none;
}

.review-modal-card {
  position: relative;
  width: min(430px, 100%);
  display: grid;
  gap: 14px;
  padding: 28px;
  border: 1px solid #bbf7d0;
  border-radius: 24px;
  background: #ffffff;
  box-shadow: 0 30px 80px rgba(15, 23, 42, .22);
}

.review-modal-kicker {
  color: #16a34a;
  font-size: 12px;
  font-weight: 900;
}

.review-modal-card h2 {
  margin: 0;
  color: #10251a;
  font-size: 26px;
}

.review-modal-card p {
  margin: 0;
  color: #64748b;
  font-weight: 700;
}

.review-rating-buttons {
  display: flex;
  justify-content: center;
  gap: 8px;
}

.review-rating-buttons button {
  width: 46px;
  height: 46px;
  border: 1px solid #dcfce7;
  border-radius: 14px;
  background: #f8fafc;
  color: #cbd5e1;
  font-size: 25px;
  cursor: pointer;
}

.review-rating-buttons button.active {
  color: #f59e0b;
  background: #fffbeb;
  border-color: #fde68a;
  box-shadow: 0 10px 22px rgba(245, 158, 11, .16);
}

#reviewMessageInput {
  width: 100%;
  resize: vertical;
  border: 1px solid #bbf7d0;
  border-radius: 16px;
  padding: 14px;
  font: inherit;
  color: #10251a;
  background: #f8fffb;
}

.review-modal-actions {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 10px;
}

.category-card.premium-brand-category {
  min-height: 154px;
  aspect-ratio: auto;
  background:
    radial-gradient(circle at 86% 16%, rgba(34, 197, 94, .22), transparent 28%),
    linear-gradient(135deg, #ffffff, #effdf4);
  border: 1px solid #bbf7d0;
  box-shadow: 0 14px 32px rgba(22, 163, 74, .1);
}

.category-card.premium-brand-category::before {
  opacity: .35;
}

.category-card.premium-brand-category .managed-image {
  position: absolute;
  left: 24px;
  top: 22px;
  width: 72px;
  height: 72px;
  border-radius: 18px;
  object-fit: contain;
  background: #ffffff;
  border: 1px solid #dcfce7;
  box-shadow: 0 14px 28px rgba(15, 118, 110, .14);
}

.category-card.premium-brand-category .card-route-icon {
  left: 24px;
  top: 22px;
  width: 72px;
  height: 72px;
  border-radius: 18px;
}

.category-card.premium-brand-category h3 {
  left: 112px;
  right: 18px;
  top: 28px;
  bottom: auto;
  padding: 0;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
}

.category-card.premium-brand-category h3 span {
  color: #64748b;
}

.premium-category-row {
  margin: 0 0 16px;
}

#featuredCategories .category-card.premium-brand-category,
#categoryList.category-grid .category-card.premium-brand-category,
.category-card.premium-brand-category {
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr);
  align-items: center;
  min-height: 132px;
  aspect-ratio: auto;
  padding: 22px 24px;
  gap: 16px;
  background:
    radial-gradient(circle at 82% 20%, rgba(255,255,255,.76), transparent 24%),
    linear-gradient(110deg, #ffffff 0%, #f5fff8 48%, #d8fbe4 100%);
  border: 1px solid #a7f3c2;
  border-radius: 22px;
  box-shadow: 0 18px 42px rgba(22, 163, 74, .08);
}

#featuredCategories .category-card.premium-brand-category:hover,
#categoryList.category-grid .category-card.premium-brand-category:hover {
  transform: translateY(-3px);
  box-shadow: 0 24px 54px rgba(22, 163, 74, .16);
}

.category-card.premium-brand-category::before {
  opacity: .18;
}

.category-card.premium-brand-category .managed-image {
  position: relative;
  inset: auto;
  width: 72px;
  height: 72px;
  aspect-ratio: 1;
  object-fit: contain;
  object-position: center;
  padding: 8px;
  border-radius: 18px;
  background: #ffffff;
  border: 1px solid #dcfce7;
  box-shadow: 0 16px 28px rgba(15, 118, 110, .12);
}

.category-card.premium-brand-category .card-route-icon {
  position: relative;
  left: auto;
  top: auto;
  width: 72px;
  height: 72px;
  border-radius: 18px;
}

.category-card.premium-brand-category h3,
#featuredCategories .category-card.premium-brand-category h3,
#categoryList.category-grid .category-card.premium-brand-category h3 {
  position: relative;
  inset: auto;
  left: auto;
  right: auto;
  bottom: auto;
  min-height: 0;
  padding: 0;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
}

.category-card.premium-brand-category h3 span {
  color: #64748b;
  font-size: 13px;
  font-weight: 800;
}

.premium-category-admin-panel {
  padding: 16px;
  border: 1px solid #bbf7d0;
  border-radius: 18px;
  background: linear-gradient(135deg, #ffffff, #f3fff7);
}

.premium-category-admin-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.premium-category-image-card {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 14px;
  border: 1px solid #dcfce7;
  border-radius: 16px;
  background: #ffffff;
}

.premium-category-image-preview {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 16px;
  background: #f8fffb;
  border: 1px solid #dcfce7;
  overflow: hidden;
}

.premium-category-image-preview img {
  width: 100%;
  height: auto;
  object-fit: contain;
  padding: 6px;
}

.premium-category-image-preview .icon {
  width: 28px;
  height: 28px;
  color: #16a34a;
}

.premium-category-image-card strong,
.premium-category-image-card small {
  display: block;
}

.premium-category-image-card input[name="image_url"] {
  width: 100%;
  margin-top: 8px;
}

.premium-category-image-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

/* premium category cards should match the big banner category UI */
#featuredCategories .category-card.premium-brand-category.has-category-image,
#categoryList.category-grid .category-card.premium-brand-category.has-category-image,
.category-card.premium-brand-category.has-category-image {
  display: block;
  min-height: 0;
  aspect-ratio: var(--fit-desktop-ratio, var(--fit-desktop-natural-ratio, 16 / 9));
  padding: 0;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid #a7f3c2;
  border-radius: 22px;
  box-shadow: 0 18px 42px rgba(22, 163, 74, .12);
}

.category-card.premium-brand-category.has-category-image .managed-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  object-fit: var(--fit-desktop-fit, cover);
  object-position: var(--fit-desktop-x, 50%) var(--fit-desktop-y, 50%);
  transform: scale(var(--fit-desktop-zoom, 1));
  transform-origin: var(--fit-desktop-x, 50%) var(--fit-desktop-y, 50%);
  box-shadow: none;
  background: #ffffff;
}

.category-card.premium-brand-category.has-category-image .card-route-icon {
  position: absolute;
  left: 28px;
  top: 26px;
  z-index: 3;
  width: 68px;
  height: 68px;
  border-radius: 20px;
}

.category-card.premium-brand-category.has-category-image h3,
#featuredCategories .category-card.premium-brand-category.has-category-image h3,
#categoryList.category-grid .category-card.premium-brand-category.has-category-image h3 {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  top: auto;
  bottom: 0;
  margin: 0;
  padding: 18px 24px;
  min-height: 72px;
  background: linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,255,255,.96));
  border-radius: 0 0 22px 22px;
  box-shadow: 0 -18px 30px rgba(255,255,255,.78);
}

.category-card.premium-brand-category.has-category-image h3 span {
  color: #8a8f98;
  font-size: 12px;
  font-weight: 600;
}

@media (max-width: 760px) {
  #featuredCategories .category-card.premium-brand-category.has-category-image,
  #categoryList.category-grid .category-card.premium-brand-category.has-category-image {
    display: block !important;
    height: 176px !important;
    min-height: 176px !important;
    aspect-ratio: auto !important;
    padding: 0 !important;
  }

  #featuredCategories .category-card.premium-brand-category.has-category-image > .managed-image,
  #categoryList.category-grid .category-card.premium-brand-category.has-category-image > .managed-image {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    aspect-ratio: auto !important;
    object-fit: cover !important;
    object-position: var(--fit-mobile-x, var(--fit-desktop-x, 50%)) var(--fit-mobile-y, var(--fit-desktop-y, 50%)) !important;
    transform: scale(var(--fit-mobile-zoom, var(--fit-desktop-zoom, 1))) !important;
  }

  #featuredCategories .category-card.premium-brand-category.has-category-image h3,
  #categoryList.category-grid .category-card.premium-brand-category.has-category-image h3 {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    min-height: 56px !important;
    padding: 11px 14px !important;
    background: linear-gradient(180deg, rgba(255,255,255,.62), rgba(255,255,255,.97)) !important;
    border-radius: 0 0 16px 16px !important;
  }

  #featuredCategories .category-card.premium-brand-category.has-category-image h3,
  #categoryList.category-grid .category-card.premium-brand-category.has-category-image h3 {
    font-size: 15px !important;
    line-height: 1.15 !important;
  }

  #featuredCategories .category-card.premium-brand-category.has-category-image h3 span,
  #categoryList.category-grid .category-card.premium-brand-category.has-category-image h3 span {
    margin-top: 3px !important;
    font-size: 10.5px !important;
    line-height: 1.25 !important;
    white-space: normal !important;
  }

  #featuredCategories .category-card.premium-brand-category.has-category-image .card-route-icon,
  #categoryList.category-grid .category-card.premium-brand-category.has-category-image .card-route-icon {
    width: 48px !important;
    height: 48px !important;
    left: 16px !important;
    top: 16px !important;
    border-radius: 14px !important;
  }

  #featuredCategories .category-card.premium-brand-category.has-category-image .card-route-icon .icon,
  #categoryList.category-grid .category-card.premium-brand-category.has-category-image .card-route-icon .icon {
    width: 24px !important;
    height: 24px !important;
  }

  .premium-category-admin-grid {
    grid-template-columns: 1fr;
  }

  .premium-category-image-card {
    grid-template-columns: 58px minmax(0, 1fr);
    padding: 12px;
  }

  .premium-category-image-preview {
    width: 54px;
    height: 54px;
    border-radius: 14px;
  }

  .premium-category-image-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .premium-category-image-actions .danger-action {
    grid-column: 1 / -1;
  }
}

.recommendations-head { margin-top: 4px; }

.recommend-box {
  min-height: 150px;
  display: block;
  gap: 16px;
  padding: 18px;
  border: 1px solid #bbf7d0;
  border-radius: 22px;
  background:
    radial-gradient(circle at 15% 0%, rgba(126, 226, 58, .18), transparent 30%),
    linear-gradient(180deg, #f7fff9, #ffffff);
  box-shadow: 0 18px 48px rgba(22, 163, 74, .08);
  overflow: hidden;
}

.recommend-track {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
  width: 100%;
}

.recommend-track.is-looping {
  animation: none;
}

.recommend-box:hover .recommend-track.is-looping {
  animation-play-state: paused;
}

@keyframes recommend-loop {
  from { transform: translateX(0); }
  to { transform: translateX(calc(-50% - 8px)); }
}

.recommend-card {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 14px;
  align-items: stretch;
  padding: 12px;
  border: 1px solid #d8f5df;
  border-radius: 18px;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 12px 28px rgba(22, 163, 74, .08);
  cursor: pointer;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.recommend-card:hover {
  transform: translateY(-3px);
  border-color: #22c55e;
  box-shadow: 0 22px 42px rgba(22, 163, 74, .16);
}

.recommend-media {
  position: relative;
  min-height: 0;
  aspect-ratio: var(--fit-desktop-ratio, auto);
  overflow: hidden;
  border-radius: 14px;
  background: #ecfff2;
}

.recommend-media img {
  width: 100%;
  height: auto;
  min-height: 0;
  object-fit: cover;
  display: block;
}

.recommend-media .managed-image {
  min-height: 0;
  object-fit: var(--fit-desktop-fit, cover);
  object-position: var(--fit-desktop-x, 50%) var(--fit-desktop-y, 50%);
}

.recommend-media span {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 8px;
  padding: 6px 8px;
  border-radius: 999px;
  color: #166534;
  background: rgba(236, 255, 242, .94);
  font-size: 12px;
  font-weight: 900;
  text-align: center;
}

.recommend-fallback-art {
  width: 100%;
  height: 180px;
  min-height: 180px;
  display: grid;
  place-items: center;
  color: #064e3b;
  background:
    radial-gradient(circle at 30% 25%, rgba(34,197,94,.32), transparent 32%),
    linear-gradient(135deg, #dcfce7, #f7fff9);
  font-size: 34px;
  font-weight: 950;
  letter-spacing: 0;
}

.recommend-body {
  min-width: 0;
  display: grid;
  gap: 8px;
  align-content: center;
}

.recommend-body strong {
  color: #12301d;
  font-size: 18px;
  line-height: 1.25;
}

.recommend-body p {
  margin: 0;
  color: #5f7467;
  font-size: 13px;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.recommend-card.recommend-peamsub .recommend-media {
  background: linear-gradient(135deg, #ecfdf5, #ffffff);
}

.recommend-card.recommend-game_topup .recommend-media {
  background: linear-gradient(135deg, #eff6ff, #ecfeff);
}

.recommend-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: baseline;
}

.recommend-meta b {
  color: #16a34a;
  font-size: 20px;
}

.recommend-meta small {
  color: #52705e;
  font-weight: 750;
}

.recommend-empty {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  min-height: 130px;
  padding: 22px;
  border: 1px dashed #86efac;
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(236,255,242,.96), rgba(255,255,255,.9));
}

.recommend-empty strong,
.recommend-empty span {
  display: block;
}

.recommend-empty strong {
  color: #12301d;
  font-size: 20px;
}

.recommend-empty span {
  margin-top: 4px;
  color: #52705e;
  font-weight: 700;
}

.empty-products-message {
  grid-column: 1 / -1;
  min-height: 150px;
  display: grid;
  place-items: center;
  padding: 28px;
  border: 1px dashed #86efac;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(236,255,242,.96), rgba(255,255,255,.9));
  color: #12301d;
  font-size: 22px;
  font-weight: 900;
  text-align: center;
}

.store-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 16px;
}

.product-card,
.panel,
.order-card,
.policy {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(0,0,0,.045);
}

.product-card {
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease;
}

.product-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 24px 54px rgba(0,0,0,.10);
}

.product-card.is-out-of-stock {
  filter: grayscale(1);
  opacity: .58;
}

.product-card.is-out-of-stock:hover {
  transform: none;
  box-shadow: 0 10px 30px rgba(0,0,0,.045);
}

.product-card.is-out-of-stock .gold-btn {
  cursor: not-allowed;
  background: #cbd5e1;
  color: #475569;
  box-shadow: none;
}

.product-card img {
  width: 100%;
  height: 172px;
  object-fit: cover;
  display: block;
}

.product-body {
  padding: 16px;
  display: grid;
  gap: 11px;
}

.product-body h3 {
  margin: 0;
  font-size: 17px;
}

.badge {
  width: fit-content;
  padding: 4px 8px;
  color: #166534;
  background: linear-gradient(180deg, #ecfff2, #dcfce7);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
}

.role-select {
  display: block;
  width: min(150px, 100%);
  margin-top: 8px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
  font-weight: 800;
}

.dev-editor-panel {
  gap: 14px;
}

.dev-editor-toolbar {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) auto auto;
  gap: 10px;
  align-items: end;
}

.dev-editor-toolbar label {
  display: grid;
  gap: 6px;
  font-weight: 900;
}

.dev-editor-toolbar select {
  width: 100%;
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0 12px;
  font-weight: 800;
}

.dev-code-editor {
  width: 100%;
  min-height: min(64vh, 720px);
  resize: vertical;
  border: 1px solid rgba(22, 163, 74, .28);
  border-radius: 12px;
  padding: 16px;
  background: #07130c;
  color: #d9fbe5;
  font: 700 13px/1.55 ui-monospace, SFMono-Regular, Consolas, monospace;
  tab-size: 2;
}

.price {
  color: var(--gold-dark);
  font-size: 22px;
  font-weight: 900;
}

.agent-price-note {
  display: block;
  margin-top: -4px;
  color: #15803d;
  font-size: 12px;
  font-weight: 900;
}

.category-sale-header {
  display: grid;
  gap: 4px;
  margin: 0 0 20px;
  min-height: 180px;
  align-content: center;
  padding: clamp(28px, 5vw, 54px);
  border: 1px solid rgba(34, 197, 94, .24);
  border-radius: 22px;
  background:
    radial-gradient(circle at 84% 28%, rgba(126, 226, 58, .28), transparent 28%),
    linear-gradient(135deg, #ffffff, #dcfce7 58%, #f0fdf4);
  box-shadow: 0 24px 60px rgba(21, 128, 61, .08);
  overflow: hidden;
}

.category-sale-header span {
  color: #15803d;
  font-size: 12px;
  font-weight: 900;
}

.category-sale-header strong {
  color: var(--ink);
  font-size: clamp(34px, 5vw, 62px);
  line-height: 1.05;
}

.category-sale-header small {
  color: var(--muted);
  font-weight: 800;
  max-width: 720px;
}

.category-products-panel {
  margin-top: 20px;
  padding: 22px;
  border: 1px solid rgba(34, 197, 94, .22);
  border-radius: 18px;
  background:
    linear-gradient(rgba(22, 163, 74, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(22, 163, 74, .035) 1px, transparent 1px),
    #fff;
  background-size: 28px 28px;
}

.category-products-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}

.category-products-head h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  color: var(--ink);
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1.1;
}

.category-products-head h2 span {
  width: 8px;
  height: 36px;
  border-radius: 999px;
  background: linear-gradient(180deg, #22c55e, #86efac);
  box-shadow: 0 0 0 6px rgba(34, 197, 94, .12);
}

.category-products-head p {
  margin: 8px 0 0;
  color: var(--muted);
  font-weight: 800;
}

.category-products-metrics,
.category-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.category-products-metrics {
  justify-content: flex-end;
}

.category-products-metrics span,
.category-chip-row button {
  border: 1px solid rgba(34, 197, 94, .24);
  border-radius: 999px;
  background: #fff;
  color: #166534;
  font-weight: 900;
  box-shadow: 0 10px 28px rgba(22, 163, 74, .06);
}

.category-products-metrics span {
  padding: 10px 14px;
  white-space: nowrap;
}

.category-chip-row {
  margin: 0 0 18px;
}

.category-chip-row button {
  min-height: 44px;
  padding: 0 18px;
  cursor: pointer;
  transition: transform .16s ease, background .16s ease, color .16s ease, border-color .16s ease;
}

.category-chip-row button:hover {
  transform: translateY(-2px);
  border-color: rgba(34, 197, 94, .5);
}

.category-chip-row button.active {
  background:#4ade80;
  border-color: transparent;
  color: #052e16;
  box-shadow: 0 14px 30px rgba(34, 197, 94, .22);
}

.recommend-box {
  grid-template-columns: repeat(auto-fill, minmax(194px, 1fr));
}

.store-grid {
  grid-template-columns: repeat(auto-fill, minmax(194px, 1fr));
}

.recommend-card,
.product-card {
  display: grid;
  gap: 0;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--product-card-button) 36%, transparent);
  border-radius: 14px;
  background: var(--product-card-bg);
  box-shadow: 0 20px 48px rgba(15, 23, 42, .14);
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}

.recommend-card {
  grid-template-columns: 1fr;
  align-items: initial;
  border-color: rgba(34, 197, 94, .24);
  background: linear-gradient(180deg, #ffffff 0%, #f0fdf4 100%);
  box-shadow: 0 18px 44px rgba(15, 61, 34, .1);
}

.recommend-card:hover,
.product-card:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--product-card-button) 72%, #ffffff);
  box-shadow: 0 26px 60px rgba(15, 23, 42, .18);
}

.recommend-card:hover {
  background: linear-gradient(180deg, #f7fff9 0%, #dcfce7 100%);
  box-shadow: 0 24px 54px rgba(34, 197, 94, .16);
}

.product-card:hover {
  background: var(--product-card-hover);
}

.recommend-media,
.product-media {
  min-height: 180px;
  overflow: hidden;
  border-radius: 7px;
  background: #122b1d;
}

.recommend-media {
  background: #e8f8ee;
}

.recommend-media img,
.product-media img,
.product-card img {
  width: 100%;
  height: 180px;
  min-height: 180px;
  object-fit: cover;
  display: block;
  opacity: .72;
  filter: saturate(.95) contrast(.96);
  transition: opacity .18s ease, transform .18s ease;
}

.recommend-card:hover img,
.product-card:hover img {
  opacity: .86;
  transform: scale(1.025);
}

.recommend-body,
.product-body {
  min-width: 0;
  display: grid;
  gap: 8px;
  padding: 15px 2px 4px;
  align-content: end;
}

.recommend-body strong,
.product-body h3 {
  margin: 0;
  font-size: 16px;
  line-height: 1.25;
  text-transform: uppercase;
}

.recommend-body strong {
  color: #102519;
}

.product-body h3 {
  color: var(--product-card-text);
}

.recommend-body > b,
.product-body .price {
  font-size: 14px;
  font-weight: 900;
  line-height: 1.1;
}

.recommend-body > b {
  color: #16a34a;
}

.product-body .price {
  color: var(--product-card-price);
}

.recommend-body button,
.product-body .gold-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 40px;
  margin-top: 10px;
  border: 0;
  border-radius: 7px;
  background: var(--product-card-button);
  color: var(--product-card-button-text);
  font-weight: 900;
  box-shadow: 0 14px 24px color-mix(in srgb, var(--product-card-button) 22%, transparent);
}

.recommend-body button .icon,
.product-body .gold-btn .icon {
  width: 17px;
  height: 17px;
  color: currentColor;
  stroke-width: 2.35;
}

.recommend-body button:hover,
.product-body .gold-btn:hover {
  background: color-mix(in srgb, var(--product-card-button) 88%, #ffffff);
}

.recommend-body small,
.sold-line {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: fit-content;
  justify-self: center;
  min-height: 24px;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 850;
}

.recommend-body small {
  background: #dcfce7;
  color: #0f8f55;
}

.sold-line {
  background: color-mix(in srgb, var(--product-card-meta) 10%, transparent);
  color: var(--product-card-meta);
}

.recommend-body small .icon,
.sold-line .icon {
  width: 14px;
  height: 14px;
  stroke-width: 2.5;
}

.recommend-body small .icon {
  color: #0f8f55;
}

.sold-line .icon {
  color: var(--product-card-meta);
}

.sold-icon {
  display: inline-grid;
  place-items: center;
}

.muted { color: var(--muted); }

.page-title {
  margin: 0 0 22px;
}

.page-title h1 span {
  color: var(--gold);
}

.filter-bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 220px;
  gap: 12px;
  margin-bottom: 20px;
}

input,
select,
textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  padding: 12px 13px;
  font-size: 16px;
}

input[type="checkbox"] {
  width: 20px;
  height: 20px;
  padding: 0;
}

label:not(.option-toggle):not(.check-row):has(> input[type="checkbox"]) {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  width: fit-content;
  padding: 9px 11px;
  border: 1px solid #eadfce;
  border-radius: 13px;
  background: #fff;
}

label:not(.option-toggle):not(.check-row):has(> input[type="checkbox"]) input[type="checkbox"] {
  appearance: none;
  position: relative;
  flex: 0 0 auto;
  border: 1px solid #e1d2b7;
  border-radius: 7px;
  background: #fff;
  cursor: pointer;
}

label:not(.option-toggle):not(.check-row):has(> input[type="checkbox"]) input[type="checkbox"]::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 3px;
  width: 5px;
  height: 10px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  opacity: 0;
  transform: rotate(45deg);
}

label:not(.option-toggle):not(.check-row):has(> input[type="checkbox"]) input[type="checkbox"]:checked {
  border-color: var(--gold-dark);
  background: linear-gradient(135deg, var(--gold), var(--gold-dark));
  box-shadow: 0 6px 16px rgba(22, 163, 74, .20);
}

label:not(.option-toggle):not(.check-row):has(> input[type="checkbox"]) input[type="checkbox"]:checked::after {
  opacity: 1;
}

label {
  display: grid;
  gap: 7px;
  color: #2f343b;
  font-weight: 650;
}

.gold-btn {
  border: 0;
  border-radius: 14px;
  background:#b7f86a);
  color: #12301d;
  padding: 11px 16px;
  font-weight: 900;
  box-shadow: 0 12px 26px rgba(22, 163, 74, .18);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.gold-btn:hover {
  background:#8df05a);
  transform: translateY(-1px);
  box-shadow: 0 16px 32px rgba(22, 163, 74, .24);
}

.gold-btn:disabled,
.gold-btn.is-loading {
  cursor: wait;
  opacity: .78;
  transform: none;
  filter: saturate(.86);
  box-shadow: none;
}

.gold-btn.is-loading {
  position: relative;
}

.gold-btn.is-loading::after {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-left: 8px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  vertical-align: -2px;
  animation: spin .7s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}
.small { padding: 8px 12px; }
.full { width: 100%; }

.row,
.drawer-head,
.cart-total,
.line-item,
.status-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.stack { display: grid; gap: 12px; }
.compact { gap: 8px; font-size: 14px; }

.two-col {
  display: grid;
  grid-template-columns: minmax(300px, .8fr) 1fr;
  gap: 18px;
}

.page-narrow {
  max-width: 1180px;
}

.wallet-page {
  max-width: 1400px;
}

.wallet-layout {
  grid-template-columns: minmax(0, 680px);
  justify-content: center;
  gap: 24px;
  align-items: start;
}

.panel,
.policy,
.order-card {
  padding: 20px;
}

.wallet-form-panel,
.wallet-history-panel {
  padding: 30px;
  border-color: #c9f7d4;
  box-shadow: 0 18px 48px rgba(22, 163, 74, .08);
}

.wallet-form-panel {
  gap: 18px;
  background:
    radial-gradient(circle at 92% 0%, rgba(126, 226, 58, .16), transparent 28%),
    linear-gradient(180deg, #ffffff, #f7fff9);
}

.wallet-form-panel h2 {
  margin-bottom: 2px;
}

.wallet-form-panel > label {
  gap: 10px;
  color: #12301d;
}

.wallet-form-panel input[name="amount"] {
  min-height: 58px;
  border-color: #bbf7d0;
  border-radius: 16px;
  background: #ffffff;
  color: #12301d;
  font-size: 22px;
  font-weight: 900;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
}

.wallet-balance {
  margin: 12px 0 18px;
  color: var(--gold-dark);
  font-size: 38px;
  font-weight: 950;
}

.wallet-history-subtitle {
  margin: -4px 0 16px;
  color: #52705e;
  font-size: 13px;
  font-weight: 700;
}

.quick-amounts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(106px, 1fr));
  gap: 12px;
}

.quick-amounts button {
  min-height: 58px;
  border: 1px solid #ccefd5;
  background:#ffffff;
  color: var(--gold-dark);
  border-radius: 16px;
  padding: 10px 8px;
  font-size: 16px;
  font-weight: 850;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(22, 163, 74, .06);
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease, background .16s ease;
}

.quick-amounts button:hover,
.quick-amounts button.active {
  border-color: var(--gold-dark);
  background:#eaffef;
  box-shadow: 0 12px 26px rgba(22, 163, 74, .16);
  transform: translateY(-1px);
}

.wallet-methods {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  gap: 12px;
}

.wallet-methods label {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  min-width: 0;
  min-height: 88px;
  padding: 16px;
  border: 1px solid #bbf7d0;
  border-radius: 18px;
  background: #f7fff9;
  cursor: pointer;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease, transform .18s ease;
}

.wallet-methods label:has(input:checked) {
  border-color: #22c55e;
  background: linear-gradient(180deg, #ecfff2, #ffffff);
  box-shadow: 0 12px 28px rgba(22, 163, 74, .14);
}

.wallet-methods label:hover {
  transform: translateY(-1px);
  border-color: #22c55e;
}

.wallet-method-icon {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 15px;
  background: linear-gradient(180deg, #dcfce7, #bbf7d0);
  color: #15803d;
  box-shadow: 0 10px 22px rgba(22, 163, 74, .12);
}

.wallet-method-icon .icon {
  width: 20px;
  height: 20px;
  color: inherit;
  stroke-width: 2.25;
}

.wallet-methods input {
  width: 20px;
  height: 20px;
  accent-color: var(--gold-dark);
}

.wallet-methods strong,
.wallet-methods small {
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
}

.wallet-methods small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 650;
  line-height: 1.45;
}

#walletSubmitButton {
  min-height: 58px;
  border-radius: 18px;
  font-size: 16px;
  letter-spacing: 0;
}

.wallet-pay-card {
  display: grid;
  justify-items: center;
  gap: 18px;
  padding: 24px;
  border: 1px solid #bbf7d0;
  border-radius: 22px;
  background: linear-gradient(180deg, #f0fdf4, #ffffff);
  text-align: center;
}

.wallet-pay-card h3 {
  margin: 8px 0 0;
  color: var(--gold-dark);
  font-size: 28px;
}

.wallet-pay-card img {
  width: min(320px, 100%);
  border: 1px solid #bbf7d0;
  border-radius: 18px;
  background: #f7fff9;
  padding: 12px;
}

.promptpay-info {
  display: grid;
  gap: 4px;
  width: min(420px, 100%);
  padding: 12px;
  border-radius: 14px;
  background: #ecfff2;
}

.wallet-history-panel .line-item {
  align-items: flex-start;
  padding: 14px;
  border: 1px solid #d8f5df;
  border-radius: 14px;
  background: #ffffff;
}

.wallet-history-panel .compact {
  gap: 10px;
}

.wallet-tx-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: start;
  padding: 16px;
  border: 1px solid #d8f5df;
  border-radius: 16px;
  background: linear-gradient(180deg, #ffffff, #f8fff9);
}

.wallet-tx-title {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 5px;
}

.wallet-tx-title strong {
  color: #12301d;
}

.wallet-tx-title span {
  padding: 4px 8px;
  border-radius: 999px;
  background: #ecfff2;
  color: #166534;
  font-size: 12px;
  font-weight: 900;
}

.wallet-tx-card p {
  margin: 0 0 6px;
  color: #52705e;
  font-size: 13px;
  line-height: 1.45;
}

.wallet-tx-card small {
  display: block;
  color: #6b7c70;
  font-weight: 650;
  line-height: 1.45;
}

.wallet-tx-card > b {
  color: #12301d;
  white-space: nowrap;
}

.wallet-tx-card.status-completed,
.wallet-tx-card.status-paid {
  border-color: #86efac;
}

.wallet-tx-card.status-rejected .wallet-tx-title span {
  background: #fff1f2;
  color: #be123c;
}

.wallet-tx-card.status-pending .wallet-tx-title span,
.wallet-tx-card.status-slip_uploaded .wallet-tx-title span {
  background: #fef9c3;
  color: #854d0e;
}

.wallet-admin-review {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  padding: 18px;
  border: 1px solid #c8f5d4;
  border-radius: 18px;
  background: linear-gradient(180deg, #ffffff, #f4fff7);
  box-shadow: 0 16px 36px rgba(34, 197, 94, .08);
}

.wallet-admin-review p {
  margin: 5px 0 8px;
  color: #52705e;
  font-size: 14px;
}

.wallet-admin-review a,
.wallet-admin-review span {
  display: inline-flex;
  margin-right: 10px;
}

.wallet-admin-review > div:last-child {
  display: grid;
  justify-items: end;
  gap: 8px;
}

.wallet-admin-review b {
  color: var(--green);
  font-size: 20px;
}

.promptpay-info span {
  color: #6f7480;
  font-weight: 700;
}

.wallet-proof-form input[type="file"] {
  padding: 10px;
}

.wallet-proof-form.is-verifying {
  opacity: .86;
  pointer-events: none;
}

#walletQr {
  display: grid;
  gap: 18px;
}

#walletQr > * {
  margin: 0;
}

#walletView .wallet-proof-form {
  gap: 14px;
  padding-top: 2px;
}

#walletView .wallet-proof-form .file-field {
  padding: 12px 0 14px;
  border: 0;
  border-bottom: 1px solid #22c55e;
  border-radius: 0;
  background: transparent;
}

#walletView .wallet-proof-form input[type="file"] {
  border: 0;
  border-radius: 0;
  border-bottom: 1px solid #cbd5e1;
  background: transparent;
  box-shadow: none;
}

#walletView .wallet-proof-form input[type="file"]::file-selector-button {
  border-radius: 8px;
  background: #22c55e;
  box-shadow: none;
}

#walletView .wallet-proof-form input[type="file"]::file-selector-button:hover {
  background: #16a34a;
}

#walletView .wallet-proof-form .gold-btn {
  border: 0;
  background: #22c55e;
  box-shadow: none;
  color: #10351d;
}

#walletView .wallet-proof-form .gold-btn:hover {
  background: #16a34a;
  transform: none;
  box-shadow: none;
}

.wallet-qr-expiry {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 8px;
  padding-top: 10px;
  border-top: 1px solid #bbf7d0;
  color: #475569;
}

.wallet-qr-expiry strong {
  min-width: 58px;
  color: #15803d;
  font-size: 18px;
  text-align: right;
}

.wallet-proof-form.is-expired {
  opacity: .55;
}

.verify-note {
  display: grid;
  gap: 4px;
  padding: 12px;
  border: 1px solid #bbf7d0;
  border-radius: 12px;
  background: #f0fdf4;
  text-align: left;
}

.verify-note strong {
  color: var(--red);
}

.verify-note span {
  color: var(--muted);
  font-size: 13px;
}

.qr-box img {
  display: block;
  max-width: 240px;
  width: 100%;
  margin-top: 14px;
}

.contact-panel {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  background: linear-gradient(180deg, #f7fff9, #ffffff);
  border-color: #bbf7d0;
}

.contact-panel div {
  display: grid;
  gap: 4px;
  padding: 14px;
  background: #fafafa;
  border-radius: 10px;
}

.contact-card {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 12px;
  align-items: center;
  min-height: 112px;
  padding: 18px;
  border: 1px solid #bbf7d0;
  border-radius: 18px;
  background: linear-gradient(145deg, #f0fdf4, #ffffff);
  color: inherit;
  text-decoration: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85), 0 14px 30px rgba(22, 163, 74, .06);
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
}

.contact-card::after {
  content: "";
  position: absolute;
  inset: auto -24px -34px auto;
  width: 96px;
  height: 96px;
  border-radius: 999px;
  background: rgba(126, 226, 58, .16);
  pointer-events: none;
}

.contact-card i {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  grid-row: span 2;
  border-radius: 14px;
  background: linear-gradient(180deg, #dcfce7, #bbf7d0);
  color: #15803d;
  box-shadow: 0 10px 22px rgba(22, 163, 74, .12);
}

.contact-card i .icon {
  width: 20px;
  height: 20px;
  stroke-width: 2.3;
}

.contact-card strong {
  color: #12301d;
  font-size: 16px;
  line-height: 1.2;
}

.contact-card:hover {
  transform: translateY(-2px);
  border-color: #22c55e;
  background: linear-gradient(145deg, #ecfff2, #ffffff);
  box-shadow: 0 18px 42px rgba(22, 163, 74, .14);
}

.contact-panel span {
  color: #52705e;
  font-weight: 700;
}

.contact-admin-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1.4fr 90px auto auto auto;
  gap: 8px;
  align-items: center;
  padding: 10px;
  border: 1px solid #f0e3cc;
  border-radius: 16px;
  background: #fff;
}

.theme-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.theme-grid label {
  display: grid;
  grid-template-columns: 1fr 58px;
  align-items: center;
  gap: 10px;
}

.theme-grid input[type="color"] {
  width: 58px;
  height: 42px;
  padding: 4px;
}

.asset-preview {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid #c8f5d4;
  border-radius: 16px;
  background: #f4fff7;
}

.asset-preview span {
  color: #355342;
  font-size: 13px;
  font-weight: 850;
}

.asset-preview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.asset-preview img {
  width: 100%;
  max-height: 220px;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid #d8f5df;
  background: #fff;
}

.settings-number-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  gap: 12px;
}

.settings-number-grid label {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 14px;
  border: 1px solid #c8f5d4;
  border-radius: 16px;
  background: linear-gradient(180deg, #ffffff, #f4fff7);
}

.settings-number-grid span {
  color: #355342;
  font-weight: 850;
  white-space: nowrap;
}

.settings-number-grid input {
  width: 100%;
  min-width: 0;
  min-height: 48px;
  text-align: left;
}

.profile-hero {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 18px;
  margin-bottom: 18px;
  background:
    radial-gradient(circle at 12% 20%, rgba(126, 226, 58, .22), transparent 26%),
    linear-gradient(135deg, #fff, #f2fff5);
}

.profile-avatar {
  width: 74px;
  height: 74px;
  display: grid;
  place-items: center;
  border-radius: 22px;
  color: #166534;
  background: linear-gradient(135deg, #dcfce7, var(--gold));
  box-shadow: 0 16px 34px rgba(22, 163, 74, .18);
}

.profile-avatar .icon {
  width: 34px;
  height: 34px;
  stroke-width: 1.8;
}

.profile-hero h1 {
  margin: 4px 0;
  font-size: 32px;
}

.profile-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

.profile-menu {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 0 0 22px;
}

.profile-menu-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 76px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(15, 23, 42, .045);
}

.profile-menu-card strong,
.profile-menu-card small {
  grid-column: 2;
  min-width: 0;
}

.profile-menu-card strong {
  font-size: 15px;
}

.profile-menu-card small {
  color: var(--muted);
  font-weight: 700;
}

.profile-menu-card i {
  grid-column: 3;
  grid-row: 1 / span 2;
  color: #94a3b8;
}

.profile-menu-card.active {
  border-color: rgba(34, 197, 94, .45);
  background: linear-gradient(135deg, #f0fdf4, #ffffff);
  box-shadow: 0 14px 28px rgba(34, 197, 94, .12);
}

.profile-menu-icon {
  grid-row: 1 / span 2;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: #ecfdf5;
  color: #16a34a;
}

.profile-menu-icon-youtube {
  background: #fff1f2;
  color: #ef4444;
}

.profile-menu-icon-wallet {
  background: #fff7ed;
  color: #f97316;
}

.profile-menu-icon-orders {
  background: #eff6ff;
  color: #2563eb;
}

.profile-menu-icon-like {
  background: #faf5ff;
  color: #a855f7;
}

.profile-history-head {
  margin-top: 6px;
}

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

@media (max-width: 620px) {
  .profile-menu {
    grid-template-columns: 1fr;
  }

  .profile-menu-card {
    min-height: 68px;
  }
}

.password-panel {
  margin: 0 0 30px;
  padding: 22px;
}

.password-panel .section-row {
  margin-bottom: 6px;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.form-grid label {
  display: grid;
  gap: 7px;
  color: #334155;
  font-size: 13px;
  font-weight: 800;
}

.form-grid input {
  min-width: 0;
  width: 100%;
  border: 1px solid #d8f5df;
  border-radius: 12px;
  background: #fff;
  padding: 12px 13px;
  color: var(--ink);
}

.policy {
  padding: 26px;
}

.policy + .policy {
  margin-top: 18px;
}

.policy h1,
.policy h2 {
  color: #102519;
  line-height: 1.2;
}

.policy h1 {
  margin: 0 0 14px;
  font-size: clamp(26px, 3vw, 38px);
}

.policy h2 {
  margin: 22px 0 8px;
  font-size: 20px;
}

.policy p {
  margin: 8px 0;
  color: #475569;
  line-height: 1.75;
}

.profile-stat-card {
  display: grid;
  gap: 6px;
}

.profile-stat-card span {
  color: #555;
  font-weight: 700;
}

.profile-stat-card strong {
  color: var(--gold-dark);
  font-size: 28px;
  line-height: 1;
}

.profile-stat-card small {
  color: var(--muted);
}

.profile-orders {
  display: grid;
  gap: 12px;
}

.profile-order-card {
  display: grid;
  gap: 8px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 2px 10px rgba(0,0,0,.035);
  cursor: pointer;
}

.profile-detail-btn {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 7px 11px;
  border: 1px solid #047857;
  border-radius: 999px;
  background:#16a34a;
  color: #ffffff;
  font-weight: 900;
  font-size: 13px;
  cursor: pointer;
  opacity: 1;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .22);
  box-shadow: 0 10px 22px rgba(4, 120, 87, .24);
}

.profile-detail-btn .icon {
  width: 14px;
  height: 14px;
  color: currentColor;
  stroke: currentColor;
  background: transparent;
}

.wallet-tx-card.is-clickable {
  cursor: pointer;
}

.wallet-tx-card.is-clickable .profile-detail-btn {
  grid-column: 1 / -1;
}

.profile-history-detail-card {
  position: relative;
  width: min(620px, calc(100vw - 26px));
  max-height: min(760px, calc(100vh - 40px));
  overflow: auto;
  padding: 24px;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 30px 90px rgba(15, 23, 42, .24);
}

.profile-history-detail {
  display: grid;
  gap: 16px;
}

.profile-history-detail h2 {
  margin: 0;
  color: var(--ink);
  font-size: clamp(22px, 4vw, 32px);
}

.profile-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.profile-detail-grid div,
.profile-detail-section {
  padding: 12px;
  border: 1px solid #d8f5df;
  border-radius: 14px;
  background: #f8fff9;
}

.profile-detail-grid span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.profile-detail-grid strong {
  display: block;
  margin-top: 4px;
  overflow-wrap: anywhere;
  color: var(--ink);
}

.profile-detail-section h3 {
  margin: 0 0 8px;
  font-size: 16px;
}

.profile-detail-section p {
  margin: 0;
  color: var(--muted);
  line-height: 1.65;
}

.profile-order-top,
.profile-order-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.profile-order-top div {
  display: grid;
  gap: 2px;
}

.profile-order-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.profile-order-top span,
.profile-order-bottom span {
  color: var(--muted);
  font-size: 13px;
}

.profile-order-items {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.profile-order-items span {
  padding: 6px 10px;
  border-radius: 999px;
  background: #fafafa;
  color: #555;
  font-size: 13px;
}

.status-badge {
  width: fit-content;
  padding: 6px 10px;
  border-radius: 999px;
  color: #6e4a00;
  background: var(--soft);
  font-size: 12px;
  font-weight: 800;
}

.status-waiting_admin {
  color: #854d0e;
  background: #fef3c7;
}

.status-cleared {
  color: #065f46;
  background: #d1fae5;
}

.preorder-help {
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  border: 1px solid #fde68a;
  border-radius: 12px;
  background: #fffbeb;
  color: #78350f;
  font-size: 12px;
  line-height: 1.45;
}

.preorder-help strong {
  font-size: 13px;
}

.admin-preorder-prize {
  max-width: 280px;
  max-height: 120px;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
}

.preorder-admin-form {
  display: grid;
  gap: 8px;
  min-width: min(320px, 42vw);
}

.preorder-admin-form textarea {
  min-height: 82px;
  resize: vertical;
}

.admin-head-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}

.premium-order-groups {
  display: grid;
  gap: 16px;
}

.premium-order-group {
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--gold-dark) 14%, transparent);
  border-radius: 14px;
  background: rgba(255,255,255,.74);
}

.premium-order-group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  border-bottom: 1px solid color-mix(in srgb, var(--gold-dark) 12%, transparent);
  background: color-mix(in srgb, var(--soft) 70%, #ffffff);
}

.premium-order-group-head h4 {
  margin: 0 0 4px;
  color: var(--ink);
  font-size: 17px;
}

.premium-order-group-head h4 span {
  display: inline-grid;
  min-width: 28px;
  min-height: 24px;
  place-items: center;
  margin-left: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  color: #065f46;
  background: #dcfce7;
  font-size: 13px;
}

.premium-order-group-head p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.premium-order-group-failed .premium-order-group-head {
  background: #fff7ed;
}

.premium-order-group-failed .premium-order-group-head h4 span {
  color: #991b1b;
  background: #fee2e2;
}

.premium-order-table {
  min-width: 900px;
}

.premium-order-table th:nth-child(1),
.premium-order-table td:nth-child(1) {
  width: 15%;
}

.premium-order-table th:nth-child(2),
.premium-order-table td:nth-child(2) {
  width: 16%;
}

.premium-order-table th:nth-child(3),
.premium-order-table td:nth-child(3) {
  width: 18%;
}

.premium-order-table th:nth-child(4),
.premium-order-table td:nth-child(4) {
  width: 8%;
}

.premium-order-table th:nth-child(5),
.premium-order-table td:nth-child(5) {
  width: 20%;
}

.premium-order-table th:nth-child(6),
.premium-order-table td:nth-child(6) {
  width: 23%;
}

.premium-order-table td {
  vertical-align: middle;
}

.status-paid,
.status-completed {
  color: #087044;
  background: #e9fff4;
}

.status-rejected {
  color: #166534;
  background: #f0fdf4;
}

.footer {
  width: min(1240px, calc(100vw - 24px));
  margin: 0 auto;
  background: rgba(255,255,255,.9);
  border-top: 1px solid #f4f4f4;
  padding: 62px 0 24px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr .8fr 1fr;
  gap: 90px;
}

.footer h2,
.footer h3 { margin-top: 0; }

.footer p,
.footer a {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #7a7a7a;
  line-height: 1.8;
}

.footer a .icon {
  width: 16px;
  height: 16px;
}

.footer-trust h3 {
  margin-bottom: 16px;
}

.trust-list {
  display: grid;
  gap: 12px;
}

.trust-list article {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 14px;
  border: 1px solid #bbf7d0;
  border-radius: 16px;
  background: linear-gradient(145deg, #f0fdf4, #ffffff);
  box-shadow: 0 12px 28px rgba(22, 163, 74, .07);
}

.trust-list i {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: linear-gradient(180deg, #dcfce7, #bbf7d0);
  color: #15803d;
  box-shadow: 0 10px 22px rgba(22, 163, 74, .12);
}

.trust-list i .icon {
  width: 20px;
  height: 20px;
  color: inherit;
  stroke-width: 2.35;
}

.trust-list strong,
.trust-list span {
  display: block;
}

.trust-list strong {
  color: #12301d;
  font-size: 15px;
  line-height: 1.25;
}

.trust-list span {
  margin-top: 3px;
  color: #52705e;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.45;
}

.footer-bottom {
  margin-top: 48px;
  padding-top: 26px;
  border-top: 1px solid #f2f2f2;
  display: flex;
  justify-content: space-between;
  color: #9b9b9b;
  font-size: 13px;
}

.drawer {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 130;
  width: min(440px, 100vw);
  height: 100vh;
  padding: 20px;
  background: #fff;
  border-left: 1px solid var(--line);
  transform: translateX(100%);
  transition: transform .18s ease;
  overflow: auto;
}

.drawer.open { transform: translateX(0); }

.line-item {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
}

.cart-total {
  margin: 18px 0;
  font-size: 20px;
}

#cartTotal {
  display: grid;
  justify-items: end;
  gap: 2px;
}

.cart-original-price {
  color: var(--muted);
  font-size: 14px;
  font-weight: 800;
  text-decoration: line-through;
  text-decoration-thickness: 2px;
}

.cart-final-price {
  color: var(--green);
  font-size: 22px;
  font-weight: 950;
}

.sale-price {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 5px 8px;
  line-height: 1.15;
}

.sale-price em {
  color: color-mix(in srgb, var(--muted) 82%, var(--ink));
  font-size: .78em;
  font-style: normal;
  font-weight: 850;
  text-decoration: line-through;
  text-decoration-thickness: 2px;
}

.sale-price b {
  color: currentColor;
  font: inherit;
  font-weight: 950;
}

.sale-price small {
  padding: 3px 7px;
  border-radius: 999px;
  color: color-mix(in srgb, var(--green) 82%, var(--ink));
  background: color-mix(in srgb, var(--green) 12%, #ffffff);
  font-size: 11px;
  font-weight: 950;
}

.detail-sale-price {
  justify-content: flex-start;
}

.site-sale-admin-card {
  gap: 14px;
}

.site-sale-controls {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(180px, 260px);
  gap: 12px;
  align-items: end;
}

.site-sale-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.site-sale-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 10px;
  max-height: 460px;
  overflow: auto;
  padding: 2px;
}

.site-sale-item {
  display: grid;
  grid-template-columns: 22px 48px minmax(0, 1fr) minmax(78px, auto);
  grid-template-areas: "check thumb copy price";
  column-gap: 10px;
  row-gap: 2px;
  align-items: center;
  min-height: 74px;
  margin: 0;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--green) 18%, var(--line));
  border-radius: 12px;
  background: color-mix(in srgb, var(--panel) 94%, var(--soft));
}

.site-sale-list label.site-sale-item {
  display: grid !important;
  width: 100% !important;
  max-width: 100%;
  box-sizing: border-box;
}

.site-sale-list .site-sale-item > input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.site-sale-check {
  grid-area: check;
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  margin: 0;
  border: 1px solid color-mix(in srgb, var(--green) 36%, var(--line));
  border-radius: 7px;
  background: #fff;
  justify-self: center;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.55);
  transition: background .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.site-sale-check::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 3px;
  width: 5px;
  height: 10px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  opacity: 0;
  transform: rotate(45deg);
}

.site-sale-list .site-sale-item > input[type="checkbox"]:checked + .site-sale-check {
  border-color: var(--green);
  background: linear-gradient(135deg, var(--gold), var(--green));
  box-shadow: 0 6px 16px rgba(22, 163, 74, .22);
}

.site-sale-list .site-sale-item > input[type="checkbox"]:checked + .site-sale-check::after {
  opacity: 1;
}

.site-sale-list .site-sale-item:has(> input[type="checkbox"]:checked) {
  border-color: color-mix(in srgb, var(--green) 72%, var(--line));
  background: color-mix(in srgb, var(--soft) 64%, #fff);
  box-shadow: 0 10px 24px rgba(22, 163, 74, .08);
}

.game-price-table tr.is-hidden-sale-row {
  background: color-mix(in srgb, #f3f4f6 82%, #fff);
  opacity: .78;
}

.hidden-sale-note {
  display: inline-flex;
  width: fit-content;
  margin-top: 4px;
  padding: 3px 8px;
  border-radius: 999px;
  background: #fee2e2;
  color: #991b1b;
  font-style: normal;
  font-size: 11px;
  font-weight: 950;
}

.premium-hidden-toggle {
  border-color: color-mix(in srgb, var(--green) 22%, var(--line));
}

.premium-hidden-toggle.is-hidden {
  border-color: #fecaca !important;
  background: #fff1f2 !important;
  color: #991b1b;
}

.premium-hidden-toggle.is-hidden input[type="checkbox"]:checked {
  border-color: #ef4444 !important;
  background: linear-gradient(135deg, #fb7185, #ef4444) !important;
}

.premium-hidden-action {
  justify-content: center;
  min-height: 42px;
  border-color: #fecaca !important;
  background: #fff7f7 !important;
  color: #991b1b !important;
  font-weight: 950;
}

.premium-hidden-action:hover {
  background: #fee2e2 !important;
}

.premium-hidden-action.is-hidden {
  border-color: color-mix(in srgb, var(--green) 34%, var(--line)) !important;
  background: color-mix(in srgb, var(--soft) 72%, #fff) !important;
  color: #166534 !important;
}

.site-sale-thumb {
  grid-area: thumb;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  overflow: hidden;
  border-radius: 10px;
  background: #fff;
}

.site-sale-thumb img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

.site-sale-copy {
  grid-area: copy;
  display: grid;
  min-width: 0;
  gap: 2px;
}

.site-sale-copy strong,
.site-sale-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.site-sale-copy strong {
  font-size: 13px;
  font-weight: 950;
}

.site-sale-copy small,
.site-sale-price small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.site-sale-price {
  grid-area: price;
  display: grid;
  justify-items: end;
  align-content: center;
  gap: 2px;
  white-space: nowrap;
}

@media (max-width: 760px) {
  .site-sale-controls {
    grid-template-columns: 1fr;
  }

  .site-sale-list {
    grid-template-columns: 1fr;
  }

  .site-sale-item {
    grid-template-columns: 22px 44px minmax(0, 1fr);
    grid-template-areas:
      "check thumb copy"
      "check thumb price";
  }

  .site-sale-price {
    grid-column: 3;
    justify-items: start;
  }
}

.payment-choice {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 12px;
}

.payment-choice label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
}

.payment-credit-note {
  display: grid;
  gap: 4px;
  margin-bottom: 12px;
  padding: 13px 14px;
  border: 1px solid rgba(34, 197, 94, .24);
  border-radius: 14px;
  background: linear-gradient(135deg, #f0fdf4, #ffffff);
  color: #12301d;
  box-shadow: 0 12px 28px rgba(22, 163, 74, .08);
}

.payment-credit-note strong {
  font-size: 15px;
  font-weight: 900;
}

.payment-credit-note span {
  color: #64746b;
  font-size: 12px;
  font-weight: 800;
}

.checkout-assurance {
  display: grid;
  gap: 8px;
  margin: 0 0 14px;
  padding: 12px;
  border: 1px solid rgba(34, 197, 94, .18);
  border-radius: 12px;
  background: #f7fff9;
  color: #42614d;
  font-size: 12px;
  font-weight: 700;
}

.checkout-assurance span {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.checkout-assurance .icon {
  width: 16px;
  height: 16px;
  margin-top: 1px;
}

.floating-cart {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 120;
  border: 0;
  border-radius: 999px;
  padding: 12px 15px;
  background: #111;
  color: #fff;
  font-weight: 900;
  box-shadow: 0 12px 35px rgba(0,0,0,.2);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.floating-cart .icon {
  width: 20px;
  height: 20px;
}

body.premium-fullscreen .floating-cart {
  display: none !important;
}

.modal {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 18% 18%, rgba(126, 226, 58, .26), transparent 28%),
    radial-gradient(circle at 82% 20%, rgba(22, 163, 74, .20), transparent 30%),
    rgba(10, 10, 10, .42);
  padding: 16px;
  backdrop-filter: blur(8px);
}

#authModal.modal{z-index:2200!important}
#forgotPasswordModal.modal{z-index:2400!important}
#premiumStockFilter{display:none!important}
.game-price-admin .admin-table-wrap{background:#f4f8f5!important}.game-price-admin .game-price-table,.game-price-admin .game-price-table tbody{background:transparent!important}.game-price-admin .game-price-table td{padding:0 0 12px!important;border:0!important;background:transparent!important}
.game-price-admin .admin-pack-price-card{display:grid!important;grid-template-columns:minmax(350px,1.35fr) minmax(260px,1fr) minmax(230px,.8fr) 108px!important;grid-template-areas:"main image price save" "main image status save"!important;gap:12px 16px!important;align-items:center!important;min-height:154px!important;padding:16px!important;border:1px solid #dce9e0!important;border-radius:16px!important;background:#fff!important;box-shadow:0 6px 18px rgba(25,67,40,.06)!important}
.game-price-admin .admin-pack-main{grid-area:main!important;display:grid!important;grid-template-columns:96px minmax(0,1fr)!important;gap:14px!important;align-items:center!important}.game-price-admin .admin-pack-image-preview{width:96px!important;height:96px!important;border-radius:14px!important;background:#eef6f0!important;box-shadow:inset 0 0 0 1px #dce8df!important;overflow:hidden!important}
.game-price-admin .admin-pack-title{display:grid!important;gap:6px!important;min-width:0!important}.game-price-admin .admin-pack-title>strong{font-size:12px!important;line-height:1.4!important}.game-price-admin .admin-pack-title>small{font-size:8px!important;color:#8a968e!important;overflow-wrap:anywhere!important}.game-price-admin .admin-pack-title>span{width:max-content!important;padding:5px 8px!important;border-radius:999px!important;background:#edf9f1!important;color:#118a43!important;font-size:9px!important;font-weight:700!important}
.admin-pack-name-edit{display:grid!important;gap:5px!important;color:#334139!important;font-size:9px!important;font-weight:700!important}.admin-pack-name-edit input{box-sizing:border-box!important;width:100%!important;height:38px!important;padding:0 11px!important;border:1px solid #bcdcca!important;border-radius:9px!important;background:#fbfefc!important;color:#17251b!important;font:inherit!important;font-size:11px!important;font-weight:700!important;outline:0!important}.admin-pack-name-edit input:focus{border-color:#1eb65a!important;box-shadow:0 0 0 3px rgba(30,182,90,.1)!important}
.game-price-admin .admin-pack-image-fields{grid-area:image!important;display:grid!important;gap:8px!important;padding:12px!important;border:1px solid #e0ebe3!important;border-radius:12px!important;background:#f9fcfa!important}.game-price-admin .admin-pack-image-fields label{font-size:9px!important}.game-price-admin .admin-pack-upload-row{display:grid!important;grid-template-columns:1fr auto!important;gap:7px!important}.game-price-admin .admin-pack-price-fields{grid-area:price!important;display:grid!important;grid-template-columns:1fr 1fr!important;gap:8px!important}.game-price-admin .admin-pack-price-fields label,.game-price-admin .admin-pack-status-fields{font-size:9px!important}.game-price-admin .admin-pack-price-fields input{height:42px!important;border-radius:9px!important}.game-price-admin .admin-pack-status-fields{grid-area:status!important;display:grid!important;grid-template-columns:auto 1fr!important;gap:8px!important;align-items:center!important}.game-price-admin .admin-pack-status-fields>input{height:38px!important;border-radius:9px!important}.game-price-admin .admin-pack-save{grid-area:save!important;align-self:stretch!important}.game-price-admin .admin-pack-save button{width:100%!important;height:100%!important;min-height:88px!important;border-radius:12px!important;font-size:11px!important}
@media(max-width:1050px){.game-price-admin .admin-pack-price-card{grid-template-columns:1fr 1fr!important;grid-template-areas:"main main" "image price" "status save"!important}.game-price-admin .admin-pack-save button{min-height:42px!important}}@media(max-width:700px){.game-price-admin .admin-pack-price-card{grid-template-columns:1fr!important;grid-template-areas:"main" "price" "image" "status" "save"!important;padding:12px!important}.game-price-admin .admin-pack-main{grid-template-columns:70px minmax(0,1fr)!important}.game-price-admin .admin-pack-image-preview{width:70px!important;height:70px!important}.game-price-admin .admin-pack-price-fields{grid-template-columns:1fr 1fr!important}.game-price-admin .admin-pack-status-fields{grid-template-columns:1fr!important}}
.forgot-password-card{position:relative;z-index:1;box-sizing:border-box;width:min(440px,100%);padding:30px;border:1px solid rgba(255,255,255,.9);border-radius:22px;background:#fff;box-shadow:0 30px 90px rgba(9,40,20,.28)}
.forgot-password-icon{display:grid;place-items:center;width:56px;height:56px;margin-bottom:18px;border-radius:17px;background:linear-gradient(145deg,#dfffd5,#7ee23a);color:#12843e;box-shadow:0 10px 26px rgba(22,163,74,.18)}
.forgot-password-icon svg{width:27px;height:27px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.forgot-password-card h2{margin:6px 0 5px;color:#17251b;font-size:26px;line-height:1.15}
.forgot-password-card>p{margin:0 0 22px;color:#6f7d74;font-size:12px;line-height:1.65}
.forgot-password-card .field{display:grid;gap:8px;color:#27342b;font-size:12px;font-weight:700}
.forgot-password-card .input-wrap{height:52px;border-color:#cfe2d5;background:#fbfefc}
.forgot-password-card .input-wrap:focus-within{border-color:#24bd5b;box-shadow:0 0 0 4px rgba(36,189,91,.11)}
.forgot-password-actions{display:grid;grid-template-columns:120px 1fr;gap:10px;margin-top:22px}
.forgot-password-actions button{height:48px;border-radius:12px;font-weight:700}
@media(max-width:520px){.forgot-password-card{padding:24px 20px;border-radius:19px}.forgot-password-card h2{font-size:23px}.forgot-password-actions{grid-template-columns:1fr}.forgot-password-actions .light-btn{order:2}.forgot-password-actions .gold-btn{order:1}}

/* Desktop category gallery: size cards from the 3:1 artwork and compact copy. */
@media(min-width:761px){
html body #categoriesView #featuredCategories,
html body #categoriesView #categoryList.category-grid{align-items:start!important;grid-auto-rows:max-content!important}
}

/* A selected custom category is a product view, so its category gallery must
   stay hidden. Keep this after the forced category-grid layout rules above. */
html body #categoriesView #categoryList.category-grid.hidden {
  display: none !important;
}

/* Compact mobile homepage, matching the supplied four-column storefront. */
@media (max-width: 600px) {
  html body #shopView .stats-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 5px !important;
    margin: 10px 0 18px !important;
    padding: 7px !important;
    border: 1px solid #dcebd9 !important;
    border-radius: 13px !important;
    background: #fff !important;
    box-shadow: 0 6px 18px rgba(35, 105, 49, .07) !important;
  }

  html body #shopView .stat-card {
    min-width: 0 !important;
    min-height: 61px !important;
    padding: 7px 3px 5px !important;
    border: 0 !important;
    border-right: 1px solid #edf2ea !important;
    border-radius: 0 !important;
    background: #fff !important;
    box-shadow: none !important;
    text-align: center !important;
  }

  html body #shopView .stat-card:last-child { border-right: 0 !important; }
  html body #shopView .stat-card span {
    display: block !important;
    overflow: hidden !important;
    padding: 0 !important;
    color: #68766c !important;
    font-size: 6.5px !important;
    line-height: 1.15 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  html body #shopView .stat-card strong {
    display: inline !important;
    margin: 4px 0 0 !important;
    color: #20a94f !important;
    font-size: 13px !important;
    line-height: 1 !important;
  }
  html body #shopView .stat-card small {
    color: #20a94f !important;
    font-size: 6px !important;
  }
  html body #shopView .stat-card .stat-icon { display: none !important; }

  html body #shopView .recommendations-head {
    align-items: center !important;
    margin: 0 0 7px !important;
    padding: 0 3px !important;
  }
  html body #shopView .recommendations-head h2 {
    margin: 0 !important;
    font-size: 13px !important;
    line-height: 1.2 !important;
  }
  html body #shopView .recommendations-head p { display: none !important; }
  html body #shopView .recommendations-head .text-link {
    font-size: 7px !important;
    white-space: nowrap !important;
  }
  html body #shopView .recommendations-head .text-link svg {
    width: 10px !important;
    height: 10px !important;
  }

  html body #shopView #recommendedProducts.recommend-box {
    min-height: 0 !important;
    margin: 0 0 18px !important;
    padding: 9px 7px !important;
    border: 1px solid #dcebd9 !important;
    border-radius: 13px !important;
    background: #fff !important;
    box-shadow: 0 7px 20px rgba(35, 105, 49, .07) !important;
    overflow: hidden !important;
  }
  html body #shopView #recommendedProducts .recommend-track {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    grid-auto-flow: row !important;
    gap: 5px !important;
    width: 100% !important;
    animation: none !important;
    transform: none !important;
  }
  html body #shopView #recommendedProducts .recommend-card {
    display: flex !important;
    align-items: center !important;
    flex-direction: column !important;
    min-width: 0 !important;
    padding: 3px !important;
    border: 0 !important;
    border-radius: 9px !important;
    background: #fff !important;
    box-shadow: none !important;
  }
  html body #shopView #recommendedProducts .recommend-card:nth-child(n + 5) { display: none !important; }
  html body #shopView #recommendedProducts .recommend-media {
    width: 100% !important;
    min-height: 0 !important;
    aspect-ratio: 1 / .62 !important;
    border-radius: 8px !important;
    background: #f3f7f2 !important;
  }
  html body #shopView #recommendedProducts .recommend-media > img,
  html body #shopView #recommendedProducts .recommend-media > .managed-image {
    object-fit: cover !important;
    background: #f3f7f2 !important;
  }
  html body #shopView #recommendedProducts .recommend-media > span { display: none !important; }
  html body #shopView #recommendedProducts .recommend-body {
    display: flex !important;
    align-items: center !important;
    flex-direction: column !important;
    width: 100% !important;
    gap: 2px !important;
    padding: 4px 0 0 !important;
    text-align: center !important;
  }
  html body #shopView #recommendedProducts .recommend-body > strong {
    display: -webkit-box !important;
    min-height: 17px !important;
    max-height: 17px !important;
    overflow: hidden !important;
    font-size: 6.5px !important;
    line-height: 1.25 !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
  }
  html body #shopView #recommendedProducts .recommend-body > p,
  html body #shopView #recommendedProducts .recommend-body > small { display: none !important; }
  html body #shopView #recommendedProducts .recommend-body > b {
    min-height: 10px !important;
    color: #159b42 !important;
    font-size: 8px !important;
    line-height: 1 !important;
  }
  html body #shopView #recommendedProducts .recommend-body > button {
    width: auto !important;
    min-width: 46px !important;
    min-height: 14px !important;
    margin: 1px 0 0 !important;
    padding: 2px 6px !important;
    border-radius: 999px !important;
    font-size: 5.5px !important;
    line-height: 1 !important;
  }
  html body #shopView #recommendedProducts .recommend-body > button svg { display: none !important; }
}
@media(min-width:761px){
  html body #categoriesView .category-card,
  html body #categoriesView .category-card.has-category-image,
  html body #categoriesView .peam-cat-card{align-self:start!important;height:auto!important;min-height:0!important;aspect-ratio:auto!important}
  html body #categoriesView .category-card>.managed-image,
  html body #categoriesView .peam-cat-card-img{display:block!important;width:100%!important;height:auto!important;min-height:0!important;aspect-ratio:3 / 1!important;object-fit:cover!important;object-position:center!important}
  html body #categoriesView .category-card>h3,
  html body #categoriesView .peam-cat-card-body{box-sizing:border-box!important;flex:none!important;width:100%!important;height:auto!important;min-height:74px!important;padding:13px 16px!important}
}

.admin-service-table-head,.admin-service-row{grid-template-columns:minmax(250px,1.7fr) 90px 105px 115px 105px minmax(180px,1fr)!important}
.admin-service-profit-tools{display:grid;grid-template-columns:minmax(230px,1fr) auto;align-items:end;gap:10px;padding:15px;border:1px solid #bfe5ca;border-radius:14px;background:linear-gradient(135deg,#f3fff5,#ebfaf0)}
.admin-service-profit-tools label{display:grid;gap:6px;font-size:11px;font-weight:700}.admin-service-profit-tools label>span{display:flex;align-items:center;height:43px;border:1px solid #b9d9c2;border-radius:9px;background:#fff;overflow:hidden}.admin-service-profit-tools input{box-sizing:border-box;min-width:0;width:100%;height:100%;padding:0 12px;border:0;outline:0;font:inherit}.admin-service-profit-tools b{padding:0 13px;color:#15994b}.admin-service-profit-tools small{grid-column:1/-1;color:#6d7b72;font-size:9px}.service-profit-field{display:flex;align-items:center;border:1px solid #dce5df;border-radius:7px;overflow:hidden}.service-profit-field input{border:0!important;border-radius:0!important}.service-profit-field span{padding-right:8px;color:#15994b;font-weight:700}
@media(max-width:900px){.admin-service-table-head{display:none}.admin-service-row{grid-template-columns:1fr 1fr!important}.admin-service-profit-tools{grid-template-columns:1fr}.admin-service-profit-tools small{grid-column:1}.service-profit-field{min-width:0}}

.auth-card {
  position: relative;
  width: min(920px, 100%);
  min-height: 560px;
  display: grid;
  grid-template-columns: .92fr 1fr;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.8);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 34px 100px rgba(0,0,0,.24);
}

.auth-visual {
  position: relative;
  padding: 36px;
  color: #12301d;
  background:
    radial-gradient(circle at 20% 20%, rgba(255,255,255,.75), transparent 20%),
    radial-gradient(circle at 78% 28%, rgba(255,255,255,.42), transparent 20%),
    linear-gradient(145deg, #dcfce7, #7ee23a 48%, #16a34a);
}

.auth-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(45deg, rgba(255,255,255,.28) 0 8px, transparent 8px 30px),
    radial-gradient(circle, rgba(255,255,255,.36) 0 3px, transparent 4px);
  background-size: 72px 72px, 92px 92px;
  opacity: .48;
}

.auth-visual > * {
  position: relative;
  z-index: 1;
}

.auth-logo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.72);
  font-weight: 900;
  box-shadow: 0 12px 28px rgba(151, 82, 0, .16);
}

.auth-visual h2 {
  margin: 74px 0 14px;
  max-width: 360px;
  font-size: 44px;
  line-height: 1.04;
  letter-spacing: 0;
}

.auth-visual p {
  max-width: 360px;
  margin: 0;
  color: rgba(36,24,0,.74);
  line-height: 1.8;
}

.auth-benefits {
  display: grid;
  gap: 12px;
  margin-top: 42px;
}

.auth-benefits span {
  display: flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  padding: 10px 13px;
  border-radius: 14px;
  background: rgba(255,255,255,.72);
  font-size: 14px;
  font-weight: 700;
}

.auth-benefits .icon {
  color: #b87500;
}

.auth-form {
  display: grid;
  align-content: center;
  gap: 16px;
  padding: clamp(28px, 5vw, 54px);
}

.auth-heading {
  margin-bottom: 8px;
}

.auth-heading h2 {
  margin: 6px 0 6px;
  font-size: 34px;
  line-height: 1.1;
}

.auth-heading p,
.modal-card p {
  margin: 0;
  color: var(--muted);
}

.auth-kicker {
  color: var(--gold-dark);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.auth-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fafafa;
}

.auth-tabs button {
  min-height: 42px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--muted);
  font-weight: 900;
  cursor: pointer;
}

.auth-tabs button.active {
  background: linear-gradient(135deg, var(--gold), #dcfce7);
  color: #2a1600;
  box-shadow: 0 12px 26px rgba(22, 163, 74, .18);
}

.auth-panel {
  display: grid;
  gap: 14px;
}

.auth-identity-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.field {
  gap: 8px;
}

.input-wrap {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 0 14px;
  background: #fff;
  transition: border-color .18s ease, box-shadow .18s ease;
}

.input-wrap:focus-within {
  border-color: rgba(34, 197, 94, .95);
  box-shadow: 0 0 0 4px rgba(126, 226, 58, .18);
}

.input-wrap .icon {
  color: #a6a6a6;
}

.input-wrap input {
  border: 0;
  border-radius: 0;
  padding: 14px 0;
  outline: 0;
}

.auth-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 4px;
}

.auth-actions button {
  min-height: 46px;
}

.auth-submit {
  min-height: 48px;
}

.check-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
  cursor: pointer;
}

.check-row input {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  appearance: none;
  position: relative;
  flex: 0 0 auto;
  border: 1px solid #e1d2b7;
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
  transition: background .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.check-row input::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 3px;
  width: 5px;
  height: 9px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  opacity: 0;
  transform: rotate(45deg);
}

.check-row input:checked {
  border-color: var(--gold-dark);
  background: linear-gradient(135deg, var(--gold), var(--gold-dark));
  box-shadow: 0 6px 16px rgba(22, 163, 74, .20);
}

.check-row input:checked::after {
  opacity: 1;
}

.modal-close {
  position: absolute;
  right: 14px;
  top: 14px;
  z-index: 2;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 50%;
  background: rgba(255,255,255,.82);
  color: #333;
  font-size: 24px;
  line-height: 1;
  box-shadow: 0 10px 22px rgba(0,0,0,.08);
}

.ad-popup-modal {
  position: fixed;
  inset: 0;
  z-index: 95;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(5, 19, 12, .62);
  backdrop-filter: blur(10px);
}

.ad-popup-card {
  position: relative;
  width: min(92vw, 860px);
  border-radius: 24px;
  background: rgba(247, 255, 250, .96);
  border: 1px solid rgba(34, 197, 94, .28);
  box-shadow: 0 30px 80px rgba(3, 22, 12, .32);
  overflow: hidden;
}

.ad-popup-close {
  top: 12px;
  right: 12px;
  z-index: 2;
  width: 38px;
  height: 38px;
  background: rgba(255, 255, 255, .94);
}

.ad-popup-image-button {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  min-height: 240px;
  overflow: hidden;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  line-height: 0;
}

.ad-popup-image-button img {
  position: absolute!important;
  inset: 0!important;
  display: block!important;
  width: 100%!important;
  height: 100%!important;
  min-width: 100%!important;
  min-height: 100%!important;
  object-fit: contain!important;
  background: #ecfff4;
}
.ad-popup-image-button img:not([src]){display:none!important}

/* Never show the mobile Premium checkout overlay on desktop pointer devices. */
@media (pointer:fine) {
  body.premium-fullscreen.premium-detail-open::after{
    content:none!important;
    display:none!important;
    background:none!important;
    backdrop-filter:none!important;
    pointer-events:none!important;
  }
  body.premium-fullscreen.premium-detail-open .premium-checkout-panel{
    display:none!important;
    visibility:hidden!important;
    pointer-events:none!important;
  }
  body.premium-fullscreen.premium-detail-open{
    overflow:auto!important;
  }
  body.premium-fullscreen.premium-detail-open .premium-shop-head{
    display:flex!important;
  }
  body.premium-fullscreen.premium-detail-open .premium-products-panel{
    display:block!important;
  }
}

.ad-popup-dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 12px;
  display: flex;
  justify-content: center;
  gap: 7px;
  pointer-events: none;
}

.ad-popup-dots button {
  width: 8px;
  height: 8px;
  border: 0;
  border-radius: 999px;
  padding: 0;
  background: rgba(255, 255, 255, .68);
  box-shadow: 0 0 0 1px rgba(2, 44, 24, .16);
  pointer-events: auto;
}

.ad-popup-dots button.active {
  width: 22px;
  background: #22c55e;
}

.product-detail-card {
  position: relative;
  width: min(920px, 100%);
  display: grid;
  grid-template-columns: .95fr 1fr;
  overflow: hidden;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 34px 100px rgba(0,0,0,.24);
}

.product-detail-media {
  min-height: 520px;
  background:
    radial-gradient(circle at 18% 20%, rgba(126, 226, 58, .20), transparent 26%),
    #f2fff5;
}

.product-detail-media img {
  width: 100%;
  height: auto;
  min-height: 520px;
  object-fit: cover;
  display: block;
}

.product-detail-info {
  display: grid;
  align-content: center;
  gap: 16px;
  padding: clamp(28px, 5vw, 54px);
}

.product-detail-info h2 {
  margin: 0;
  font-size: 34px;
  line-height: 1.15;
}

.detail-price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.detail-price-row strong {
  color: var(--gold-dark);
  font-size: 34px;
  line-height: 1;
}

.detail-note {
  display: grid;
  gap: 4px;
  padding: 14px;
  border-radius: 14px;
  background: #f2fff5;
}

.detail-note p {
  margin: 0;
  color: #6b7280;
}

.qty-control span {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 48px;
  gap: 8px;
}

.qty-control input {
  text-align: center;
  font-weight: 800;
}

.detail-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.detail-actions button {
  min-height: 48px;
}

.cookie {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 75;
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 18px 60px rgba(0,0,0,.12);
}

.cookie p { margin: 4px 0 0; color: var(--muted); }

.cookie-options,
.cookie-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.cookie-options label {
  display: flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}

.cookie-options input {
  appearance: none;
  position: relative;
  width: 20px;
  height: 20px;
  border: 1px solid #e1d2b7;
  border-radius: 7px;
  background: #fff;
  cursor: pointer;
  transition: background .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.cookie-options input::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 3px;
  width: 5px;
  height: 10px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  opacity: 0;
  transform: rotate(45deg);
}

.cookie-options input:checked {
  border-color: var(--gold-dark);
  background: linear-gradient(135deg, var(--gold), var(--gold-dark));
  box-shadow: 0 6px 16px rgba(22, 163, 74, .20);
}

.cookie-options input:checked::after {
  opacity: 1;
}

.cookie-actions .light-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.toast-stack {
  position: fixed;
  right: 18px;
  bottom: 82px;
  z-index: 95;
  width: min(360px, calc(100vw - 28px));
  display: grid;
  gap: 8px;
  pointer-events: none;
}

.toast-card {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  overflow: hidden;
  padding: 12px 12px 12px 14px;
  border: 1px solid color-mix(in srgb, var(--toast-color) 18%, rgba(255,255,255,.9));
  border-radius: 14px;
  color: #1f2a24;
  background:
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,255,255,.94)),
    var(--toast-bg);
  box-shadow: 0 16px 38px rgba(15, 23, 42, .12);
  backdrop-filter: blur(18px);
  pointer-events: auto;
  animation: toast-in .22s ease both;
}

.toast-card.leaving {
  animation: toast-out .18s ease both;
}

.toast-success {
  --toast-color: #22c55e;
  --toast-bg: #ecfff2;
}

.toast-purchase {
  --toast-color: #16a34a;
  --toast-bg: #edfff4;
  border-color: rgba(34, 197, 94, .36);
  box-shadow: 0 22px 54px rgba(22, 163, 74, .22);
}

.toast-purchase .toast-icon {
  color: #ffffff;
  background: linear-gradient(135deg, #22c55e, #16a34a);
  box-shadow: 0 10px 24px rgba(34, 197, 94, .28);
}

.toast-error {
  --toast-color: #ef4444;
  --toast-bg: #fff7f7;
}

.toast-warning {
  --toast-color: #f59e0b;
  --toast-bg: #fff8e6;
}

.toast-info {
  --toast-color: #0ea5e9;
  --toast-bg: #eef8ff;
}

.toast-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--toast-color);
  background: color-mix(in srgb, var(--toast-color) 13%, #fff);
}

.toast-error .toast-icon {
  color: #ef4444;
  background: #fff;
  border: 2px solid #ef4444;
  box-shadow: 0 8px 18px rgba(239, 68, 68, .16);
}

.toast-icon .icon {
  width: 18px;
  height: 18px;
  color: inherit;
  stroke: currentColor;
}

.toast-text {
  white-space: pre-line;
  color: #17231c;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.45;
}

.toast-close {
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 50%;
  background: rgba(15, 23, 42, .06);
  color: #758079;
  font-size: 20px;
  line-height: 1;
}

.toast-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--toast-color);
  transform-origin: left;
  animation: toast-progress 4.2s linear both;
}

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

@keyframes toast-out {
  to { opacity: 0; transform: translateX(18px) scale(.98); }
}

@keyframes toast-progress {
  from { transform: scaleX(1); }
  to { transform: scaleX(0); }
}

.admin-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.admin-tabs button.active {
  border-color: var(--gold);
  background: var(--gold);
}

.admin-tabs button .icon {
  width: 17px;
  height: 17px;
  color: var(--green);
  stroke-width: 2.2;
}

.admin-tabs button.active .icon {
  color: #0b3d1f;
}

.admin-section-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
}

.admin-table-wrap {
  width: 100%;
  overflow-x: auto;
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 840px;
}

.admin-table th,
.admin-table td {
  padding: 12px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: middle;
}

.admin-table th {
  color: var(--muted);
  font-size: 12px;
}

.game-price-game {
  display: flex;
  gap: 10px;
  align-items: center;
  min-width: 210px;
}

.game-price-game img {
  width: 42px;
  height: 42px;
  border-radius: 8px;
  object-fit: cover;
}

.game-price-table small {
  display: block;
  color: var(--muted);
  font-size: 11px;
  margin-top: 4px;
}

.game-price-table input[type="number"],
.game-price-table input[name="note"] {
  width: 100%;
  min-width: 120px;
}

.custom-premium-panel .admin-table-wrap {
  overflow-x: auto;
}

.custom-premium-table {
  min-width: 1180px;
  table-layout: fixed;
}

.custom-premium-table th:nth-child(1),
.custom-premium-table td:nth-child(1) {
  width: 34%;
}

.custom-premium-table th:nth-child(2),
.custom-premium-table td:nth-child(2) {
  width: 14%;
}

.custom-premium-table th:nth-child(3),
.custom-premium-table td:nth-child(3) {
  width: 22%;
}

.custom-premium-table th:nth-child(4),
.custom-premium-table td:nth-child(4) {
  width: 23%;
}

.custom-premium-table th:nth-child(5),
.custom-premium-table td:nth-child(5) {
  width: 7%;
}

.custom-premium-table td {
  vertical-align: top;
}

.custom-premium-table td > input,
.custom-premium-table td > select,
.custom-premium-table td > textarea,
.custom-premium-table td > label {
  width: 100%;
  margin-top: 10px;
}

.custom-premium-table td > label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.custom-premium-table td > label input,
.custom-premium-table td > label select {
  width: 100%;
  min-width: 0;
}

.custom-premium-table .game-price-game {
  min-width: 0;
  margin-bottom: 10px;
}

.custom-premium-table .premium-image-actions {
  display: grid;
  grid-template-columns: minmax(190px, 1fr) auto;
  gap: 10px;
  align-items: end;
  margin-top: 10px;
}

.custom-premium-table .compact-file {
  margin: 0;
}

.custom-premium-table .inline-check {
  display: flex;
  width: fit-content;
  min-height: 42px;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255,255,255,.84);
  color: var(--ink);
}

.custom-premium-table .inline-check input {
  width: auto;
  min-width: 0;
  margin: 0;
}

.custom-premium-table td:last-child {
  padding-left: 16px;
}

.custom-premium-table td:last-child .small-btn {
  width: 100%;
  margin: 0 0 10px;
}

.custom-premium-list {
  display: grid;
  gap: 14px;
}

.custom-premium-card {
  display: grid;
  gap: 16px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(255,255,255,.82);
}

.custom-premium-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid color-mix(in srgb, var(--orange) 14%, var(--line));
}

.custom-premium-card-head .game-price-game {
  min-width: 0;
}

.custom-premium-card-head .game-price-game span {
  min-width: 0;
}

.custom-premium-card-head .game-price-game strong,
.custom-premium-card-head .game-price-game small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.custom-premium-actions {
  display: flex;
  flex: 0 0 auto;
  gap: 10px;
}

.custom-premium-actions .small-btn {
  min-width: 82px;
}

.custom-premium-form-grid {
  display: grid;
  grid-template-columns: minmax(340px, 1.25fr) minmax(220px, .7fr) minmax(240px, .75fr);
  gap: 16px;
  align-items: start;
}

.custom-premium-block {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.custom-premium-block h4 {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 950;
}

.custom-premium-block input,
.custom-premium-block select,
.custom-premium-block textarea {
  width: 100%;
  min-width: 0;
}

.custom-premium-block label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.custom-premium-main {
  grid-template-columns: 1fr 1fr;
}

.custom-premium-main h4,
.custom-premium-main .premium-image-actions,
.custom-premium-main textarea,
.custom-premium-main .muted {
  grid-column: 1 / -1;
}

.custom-premium-main .premium-image-actions {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  gap: 10px;
  align-items: end;
}

.custom-premium-card .inline-check {
  display: flex;
  width: fit-content;
  min-height: 44px;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255,255,255,.84);
  color: var(--ink);
}

.custom-premium-card .inline-check input {
  width: auto;
  min-width: 0;
  margin: 0;
}

@media (max-width: 1180px) {
  .custom-premium-form-grid {
    grid-template-columns: 1fr;
  }

  .custom-premium-main {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 640px) {
  .custom-premium-card {
    padding: 12px;
    border-radius: 14px;
  }

  .custom-premium-card-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .custom-premium-actions {
    width: 100%;
  }

  .custom-premium-actions .small-btn {
    flex: 1;
  }

  .custom-premium-main,
  .custom-premium-main .premium-image-actions {
    grid-template-columns: 1fr;
  }

  .custom-premium-main h4,
  .custom-premium-main .premium-image-actions,
  .custom-premium-main textarea {
    grid-column: auto;
  }
}

.admin-game-picker {
  display: grid;
  gap: 14px;
}

.admin-game-picker-tools {
  display: grid;
  grid-template-columns: minmax(220px, 360px) 1fr;
  gap: 12px;
  align-items: center;
}

.admin-game-picker-tools input[type="search"] {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px 14px;
  font: inherit;
  font-weight: 700;
}

.admin-game-type-tabs {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 6px;
  width: fit-content;
  max-width: 100%;
  padding: 5px;
  border: 1px solid color-mix(in srgb, var(--orange) 20%, var(--line));
  border-radius: 12px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--panel) 96%, var(--soft)), color-mix(in srgb, var(--panel) 92%, var(--page)));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 10px 24px rgba(22, 163, 74, .08);
}

.admin-game-type-tabs button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 36px;
  padding: 0 12px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: color-mix(in srgb, var(--ink) 78%, var(--muted));
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background .16s ease, color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.admin-game-type-tabs button:hover {
  background: color-mix(in srgb, var(--orange) 9%, var(--panel));
  color: var(--ink);
}

.admin-game-type-tabs button.active {
  background: linear-gradient(135deg, var(--gold), var(--orange));
  color: #062116;
  box-shadow: 0 8px 18px color-mix(in srgb, var(--orange) 18%, transparent);
  transform: translateY(-1px);
}

.admin-game-type-tabs button span {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ink) 7%, var(--panel));
  color: color-mix(in srgb, var(--ink) 58%, var(--muted));
  font-size: 10px;
  font-weight: 1000;
  line-height: 1;
  margin-left: 0;
}

.admin-game-type-tabs button.active span {
  background: rgba(255,255,255,.5);
  color: #062116;
}

.admin-game-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 16px;
}

.admin-game-select-card {
  border: 1px solid var(--line);
  background: var(--panel);
  border-radius: 8px;
  padding: 10px;
  display: grid;
  grid-template-rows: auto auto auto;
  align-content: start;
  gap: 9px;
  text-align: left;
  cursor: pointer;
  min-height: 0;
  outline: none;
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease, background .16s ease;
}

.admin-game-select-card:hover,
.admin-game-select-card:focus-visible,
.admin-game-select-card.active {
  border-color: var(--accent-dark);
  background: color-mix(in srgb, var(--soft) 34%, var(--panel));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-dark) 16%, transparent), 0 12px 24px rgba(22, 163, 74, .10);
}

.admin-game-select-card:hover,
.admin-game-select-card.active {
  transform: translateY(-1px);
}

.admin-game-select-card .game-pick-media {
  position: relative;
  width: 100%;
  aspect-ratio: 21 / 9;
  border-radius: 8px;
  overflow: hidden;
  background: transparent;
}

.admin-game-select-card .game-pick-media img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
  padding: 0;
  background: transparent;
}

.admin-game-select-card strong {
  font-size: 16px;
  line-height: 1.2;
}

.admin-game-select-card small {
  color: var(--muted);
  font-weight: 800;
}

.selected-admin-game {
  display: grid;
  grid-template-columns: minmax(240px, .8fr) minmax(320px, 1.2fr);
  align-items: center;
  gap: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: var(--soft);
}

/* polished admin game API catalog */
.game-price-admin {
  gap: 20px;
  padding: 22px;
}

.game-price-admin > .admin-section-head {
  align-items: center;
  padding-bottom: 16px;
  border-bottom: 1px solid color-mix(in srgb, var(--orange) 14%, var(--line));
}

.game-price-admin > .admin-section-head h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.game-price-admin > .admin-section-head h3::before {
  content: "";
  width: 8px;
  height: 28px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--gold), var(--orange));
  box-shadow: 0 10px 22px color-mix(in srgb, var(--orange) 24%, transparent);
}

.game-price-admin .admin-game-picker {
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--orange) 16%, var(--line));
  border-radius: 16px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--soft) 54%, transparent), transparent),
    color-mix(in srgb, var(--panel) 92%, var(--page));
}

.game-price-admin .admin-game-picker-tools {
  grid-template-columns: minmax(260px, 420px) minmax(0, 1fr);
  margin-bottom: 4px;
}

.game-price-admin .admin-game-picker-tools input[type="search"] {
  min-height: 48px;
  border-radius: 14px;
  padding: 0 16px;
  background: color-mix(in srgb, var(--panel) 94%, #fff);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
}

.game-price-admin .admin-game-card-grid {
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 14px;
}

.game-price-admin .admin-game-select-card {
  position: relative;
  min-height: 184px;
  padding: 12px;
  border-radius: 14px;
  border-color: color-mix(in srgb, var(--orange) 16%, var(--line));
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--panel) 96%, var(--soft)), color-mix(in srgb, var(--panel) 86%, var(--page)));
  box-shadow: 0 10px 24px color-mix(in srgb, var(--orange) 8%, transparent);
}

.game-price-admin .admin-game-select-card.active::after {
  content: "เลือกอยู่";
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  padding: 5px 9px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--gold), var(--orange));
  color: #062116;
  font-size: 10px;
  font-weight: 1000;
}

.game-price-admin .admin-game-select-card .game-pick-media {
  /* aspect-ratio removed for natural scaling */
  border-radius: 12px;
  background:
    radial-gradient(circle at 50% 20%, rgba(255,255,255,.82), transparent 44%),
    color-mix(in srgb, var(--soft) 78%, #fff);
  box-shadow: 0 14px 24px color-mix(in srgb, var(--ink) 12%, transparent);
}

.game-price-admin .admin-game-select-card .game-pick-media img {
  object-fit: contain;
  padding: 4px;
}

.game-price-admin .admin-game-select-card .game-pick-media em {
  position: absolute;
  right: 8px;
  bottom: 8px;
  z-index: 1;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.82);
  color: color-mix(in srgb, var(--ink) 76%, var(--orange));
  font-size: 10px;
  font-style: normal;
  font-weight: 1000;
  box-shadow: 0 8px 18px rgba(0,0,0,.10);
}

.game-price-admin .admin-game-select-card strong {
  min-height: 38px;
  color: var(--ink);
  font-size: 15px;
  line-height: 1.25;
}

.game-price-admin .admin-game-select-card small {
  width: fit-content;
  padding: 5px 9px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--soft) 74%, var(--panel));
  color: var(--muted);
  font-size: 12px;
}

.game-price-admin .inline-selected-admin-game {
  border-radius: 16px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--soft) 82%, var(--panel)), color-mix(in srgb, var(--panel) 92%, #fff));
}

@media (max-width: 760px) {
  .game-price-admin {
    padding: 14px;
  }

  .game-price-admin .admin-game-picker-tools {
    grid-template-columns: 1fr;
  }

  .game-price-admin .admin-game-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .game-price-admin .admin-game-select-card {
    min-height: 158px;
    padding: 10px;
  }
}

.admin-game-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: start center;
  padding: 96px 18px 24px;
  background: rgba(15, 23, 42, .28);
  backdrop-filter: blur(6px);
}

.admin-game-modal-backdrop.hidden {
  display: none !important;
}

.admin-game-modal-backdrop .selected-admin-game {
  position: relative;
  width: min(940px, 100%);
  max-height: calc(100vh - 130px);
  overflow: auto;
  border-color: #bae6fd;
  background: linear-gradient(135deg, #ffffff, #f0fdf4);
  box-shadow: 0 30px 90px rgba(15, 23, 42, .22);
}

.admin-game-modal-backdrop .modal-close {
  position: absolute;
  top: 10px;
  right: 10px;
}

.selected-admin-game-main {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}

.selected-admin-game-image {
  position: relative;
  isolation: isolate;
  width: 74px;
  height: 74px;
  border-radius: 12px;
  overflow: hidden;
  background: #052e16;
}

.selected-admin-game-main strong,
.selected-admin-game-main small {
  display: block;
}

.selected-admin-game-main strong {
  font-size: 18px;
  line-height: 1.25;
}

.selected-admin-game-main small {
  margin: 3px 0 8px;
  color: var(--muted);
  font-weight: 800;
}

.admin-game-image-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(130px, auto);
  gap: 10px;
  align-items: end;
}

.admin-game-image-form label {
  margin: 0;
}

.admin-game-image-form input {
  min-width: 0;
}

.admin-game-image-form > input[name="note"],
.admin-game-image-actions {
  grid-column: 1 / -1;
}

.admin-game-image-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.inline-selected-admin-game {
  grid-template-columns: minmax(240px, auto) 1fr;
}

.inline-selected-admin-game > .muted {
  margin: 0;
  font-weight: 800;
}

.admin-pack-filter-actions {
  display: grid;
  gap: 8px;
  justify-items: start;
}

.admin-pack-filter-actions .muted {
  margin: 0;
  font-weight: 800;
}

.admin-pack-filter-tabs {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 6px;
  width: fit-content;
  max-width: 100%;
  padding: 5px;
  border: 1px solid color-mix(in srgb, var(--orange) 20%, var(--line));
  border-radius: 12px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--panel) 96%, var(--soft)), color-mix(in srgb, var(--panel) 92%, var(--page)));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 10px 24px rgba(22, 163, 74, .08);
}

.admin-pack-filter-tabs button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 36px;
  padding: 0 12px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: color-mix(in srgb, var(--ink) 78%, var(--muted));
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background .16s ease, color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.admin-pack-filter-tabs button:hover {
  background: color-mix(in srgb, var(--orange) 9%, var(--panel));
  color: var(--ink);
}

.admin-pack-filter-tabs button.active {
  background: linear-gradient(135deg, var(--gold), var(--orange));
  color: #062116;
  box-shadow: 0 8px 18px color-mix(in srgb, var(--orange) 18%, transparent);
  transform: translateY(-1px);
}

.admin-pack-filter-tabs button span {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ink) 7%, var(--panel));
  color: color-mix(in srgb, var(--ink) 58%, var(--muted));
  font-size: 10px;
  font-weight: 1000;
  line-height: 1;
  margin-left: 0;
}

.admin-pack-filter-tabs button.active span {
  background: rgba(255,255,255,.5);
  color: #062116;
}

.admin-stock-filter-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--green) 16%, var(--line));
  border-radius: 10px;
  background: color-mix(in srgb, var(--soft) 64%, #ffffff);
}

.admin-stock-filter-bar .muted {
  margin: 0;
  font-weight: 800;
}

.admin-pack-image-editor {
  display: grid;
  grid-template-columns: 72px minmax(220px, 1fr);
  gap: 10px;
  align-items: start;
  min-width: 340px;
}

.admin-pack-image-preview {
  position: relative;
  isolation: isolate;
  width: 72px;
  height: 72px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--soft);
  border: 1px solid var(--line);
}

.admin-pack-image-fields {
  display: grid;
  gap: 8px;
}

.admin-pack-image-fields input[name="image_url"] {
  width: 100%;
  min-width: 0;
}

.admin-pack-image-fields .compact-file {
  min-width: 0;
}

.admin-pack-image-fields .small-btn {
  justify-self: start;
}

.game-price-table {
  border-collapse: separate;
  border-spacing: 0 12px;
  min-width: 980px;
}

.game-price-table th {
  padding: 6px 12px;
  border: 0;
}

.game-price-table td {
  padding: 0;
  border: 0;
}

.admin-pack-price-card {
  display: grid;
  grid-template-columns: minmax(260px, 1.1fr) minmax(280px, 1.3fr) minmax(240px, .95fr) minmax(220px, .9fr) auto;
  gap: 14px;
  align-items: center;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--green) 18%, var(--line));
  border-radius: 10px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--soft) 72%, #ffffff), #ffffff 56%),
    var(--panel);
  box-shadow: 0 12px 30px rgba(15, 23, 42, .06);
}

.admin-pack-main {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  min-width: 0;
}

.admin-pack-main .admin-pack-image-preview {
  width: 92px;
  height: 92px;
  border-radius: 10px;
  box-shadow: 0 10px 24px rgba(15, 23, 42, .14);
}

.admin-pack-title {
  min-width: 0;
}

.admin-pack-title strong,
.admin-pack-title small,
.admin-pack-title span {
  display: block;
}

.admin-pack-title strong {
  color: var(--ink);
  font-size: 16px;
  line-height: 1.25;
}

.admin-pack-title small {
  margin-top: 5px;
  color: var(--muted);
  font-size: 11px;
  word-break: break-all;
}

.admin-pack-title span {
  width: fit-content;
  margin-top: 8px;
  padding: 5px 9px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--green) 10%, #ffffff);
  color: color-mix(in srgb, var(--ink) 78%, var(--green));
  font-size: 12px;
  font-weight: 900;
}

.admin-pack-image-fields,
.admin-pack-price-fields,
.admin-pack-status-fields {
  display: grid;
  gap: 9px;
}

.admin-pack-price-fields {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.admin-pack-image-fields label,
.admin-pack-price-fields label {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
}

.admin-pack-image-fields input,
.admin-pack-price-fields input,
.admin-pack-status-fields input[name="note"] {
  width: 100%;
  min-width: 0;
}

.admin-pack-upload-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.admin-pack-status-fields .inline-check {
  width: fit-content;
  min-height: 36px;
  padding: 8px 12px;
  border: 1px solid color-mix(in srgb, var(--green) 20%, var(--line));
  border-radius: 999px;
  background: color-mix(in srgb, var(--green) 7%, #ffffff);
}

.admin-pack-save {
  display: flex;
  justify-content: flex-end;
}

.admin-pack-save .gold-btn {
  min-width: 86px;
  min-height: 42px;
  box-shadow: 0 12px 28px color-mix(in srgb, var(--green) 20%, transparent);
}

@media (max-width: 1280px) {
  .admin-pack-price-card {
    grid-template-columns: minmax(260px, 1fr) minmax(280px, 1fr);
  }

  .admin-pack-save {
    justify-content: flex-start;
  }
}

@media (max-width: 980px) {
  .selected-admin-game {
    grid-template-columns: 1fr;
  }

  .admin-game-image-form {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 761px) {
  .site-header .shell.header-inner {
    width: min(1500px, calc(100vw - 32px));
    gap: 14px;
  }

  .site-header .logo {
    flex: 0 0 auto;
    min-width: 132px;
  }

  .site-header .main-nav {
    flex: 1 1 auto;
    min-width: 0;
    justify-content: flex-start;
    gap: 4px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .site-header .main-nav::-webkit-scrollbar {
    display: none;
  }

  .site-header .main-nav a {
    flex: 0 0 auto;
    min-width: max-content;
    white-space: nowrap;
    padding: 9px 11px;
    border-radius: 12px;
    font-size: 13px;
    line-height: 1;
  }

  .site-header .main-nav a .icon {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
  }

  .site-header .header-actions {
    flex: 0 0 auto;
    gap: 8px;
  }

  .site-header .point-pill,
  .site-header .account-pill {
    min-height: 42px;
    white-space: nowrap;
    padding: 9px 13px;
  }

  .site-header .account-pill {
    min-width: 118px;
  }
}

.game-menu-page .game-package-layout {
  grid-template-columns: 1fr !important;
  gap: 14px !important;
}

.game-menu-page .pack-list-panel {
  order: 1;
}

.game-menu-page .game-topup-form {
  order: 2;
  position: static !important;
  width: min(100%, 560px);
  margin: 0 auto;
}

.game-menu-page .game-topup-form.hidden {
  display: none !important;
}

.game-menu-page .pack-card-grid {
  max-height: none;
}

@media (max-width: 980px) {
  .game-menu-page .game-topup-form {
    order: 2 !important;
  }
}

.inline-check {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  color: var(--ink);
  font-weight: 700;
}

.inline-check input {
  width: auto;
}

.small-btn {
  min-height: 38px;
  padding: 8px 14px;
}

.metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.metric-card { padding: 16px; }
.metric-card strong {
  display: block;
  color: var(--gold-dark);
  font-size: 28px;
}

.sales-chart-card {
  position: relative;
  padding: 24px;
  margin-bottom: 18px;
  background:
    linear-gradient(135deg, rgba(22, 163, 74, .14), transparent 38%),
    radial-gradient(circle at 92% 18%, rgba(6, 182, 212, .16), transparent 28%),
    linear-gradient(180deg, #fbfffc, #f8fffb 52%, #ffffff);
  border-color: rgba(134, 239, 172, .95);
  box-shadow: 0 22px 70px rgba(22, 163, 74, .1);
  overflow: hidden;
}

.sales-chart-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 18px;
}

.sales-chart-head h3 {
  margin: 4px 0 0;
  color: #12301d;
  font-size: 24px;
}

.sales-chart-head p {
  margin: 7px 0 0;
  color: #607568;
  font-weight: 800;
}

.sales-chart-summary {
  display: grid;
  justify-items: end;
  gap: 5px;
  color: #52705e;
  text-align: right;
}

.sales-chart-summary strong {
  color: #0f9f4f;
  font-size: 34px;
  line-height: 1;
  text-shadow: 0 10px 22px rgba(22, 163, 74, .14);
}

.sales-chart-insights {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 0 0 16px;
}

.sales-chart-insights span {
  min-width: 0;
  padding: 14px 16px;
  border: 1px solid rgba(187, 247, 208, .9);
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(240, 253, 244, .78));
  box-shadow: 0 14px 34px rgba(22, 163, 74, .08);
  color: #63776a;
  font-size: 12px;
  font-weight: 900;
}

.sales-chart-insights small {
  display: block;
  margin-bottom: 4px;
  color: #6f8276;
}

.sales-chart-insights b {
  display: block;
  color: #12301d;
  font-size: 18px;
  overflow-wrap: anywhere;
}

.sales-chart {
  position: relative;
  display: grid;
  gap: 14px;
  min-height: 360px;
  padding: 18px 22px 14px;
  border: 1px solid rgba(187, 247, 208, .9);
  border-radius: 14px;
  background:
    radial-gradient(circle at 18% 10%, rgba(34, 197, 94, .08), transparent 28%),
    linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(255, 255, 255, .9)),
    repeating-linear-gradient(90deg, rgba(22, 163, 74, .032) 0 1px, transparent 1px 52px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
  overflow: hidden;
}

.sales-chart.is-empty {
  min-height: 350px;
}

.sales-chart.is-empty .sales-chart-legend {
  opacity: .72;
}

.sales-chart-legend {
  display: flex;
  justify-content: flex-end;
  gap: 14px;
  color: #52705e;
  font-size: 12px;
  font-weight: 900;
}

.sales-chart-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border-radius: 999px;
  background: rgba(240, 253, 244, .8);
}

.sales-chart-legend i {
  width: 22px;
  height: 4px;
  border-radius: 999px;
}

.legend-revenue { background: #22c55e; }
.legend-profit { background: #06b6d4; }

.sales-line-chart {
  width: 100%;
  min-height: 300px;
  display: block;
  overflow: visible;
}

.sales-y-tick line {
  stroke: rgba(22, 163, 74, .12);
  stroke-width: 1;
}

.sales-y-tick text {
  fill: #52685b;
  font-size: 10px;
  font-weight: 900;
}

.sales-bar {
  fill: url(#salesRevenueFill);
  opacity: .9;
  transform-box: fill-box;
  transform-origin: bottom;
  transition: opacity .18s ease, transform .18s ease;
}

.sales-bar.has-value {
  filter: drop-shadow(0 12px 18px rgba(34, 197, 94, .2));
}

.sales-bar:hover {
  opacity: 1;
  transform: scaleY(1.03);
}

.sales-area {
  fill: url(#salesAreaFill);
}

.sales-line {
  fill: none;
  stroke-width: 3.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.revenue-line {
  stroke: #22c55e;
  filter: drop-shadow(0 8px 12px rgba(34, 197, 94, .16));
}

.profit-line {
  stroke: #06b6d4;
  stroke-width: 3;
  filter: drop-shadow(0 8px 12px rgba(6, 182, 212, .13));
}

.revenue-dot,
.profit-dot {
  stroke: #ffffff;
  stroke-width: 2.2;
}

.revenue-dot { fill: #16a34a; }
.profit-dot { fill: #0891b2; }

.sales-axis-labels text {
  fill: #52685b;
  font-size: 11px;
  font-weight: 800;
}

.sales-real-empty {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  min-height: 260px;
  border: 1px dashed rgba(134, 239, 172, .95);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.84), rgba(240,253,244,.58)),
    repeating-linear-gradient(135deg, rgba(22, 163, 74, .045) 0 2px, transparent 2px 18px);
  text-align: center;
}

.sales-real-empty strong {
  color: #12301d;
  font-size: 22px;
}

.sales-real-empty span {
  max-width: 520px;
  color: #607568;
  font-weight: 800;
  line-height: 1.7;
}

.sales-empty-state {
  display: grid;
  grid-template-columns: minmax(220px, .8fr) 1.2fr;
  align-items: center;
  gap: 26px;
  min-height: 258px;
  padding: 22px;
  border: 1px dashed rgba(134, 239, 172, .95);
  border-radius: 14px;
  background:
    linear-gradient(135deg, rgba(220, 252, 231, .86), rgba(255,255,255,.94)),
    repeating-linear-gradient(135deg, rgba(22, 163, 74, .05) 0 2px, transparent 2px 18px);
  color: #52705e;
  text-align: left;
  font-weight: 800;
}

.sales-empty-visual {
  position: relative;
  min-height: 170px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background:
    radial-gradient(circle at 50% 38%, rgba(34, 197, 94, .18), transparent 42%),
    linear-gradient(180deg, rgba(255,255,255,.84), rgba(240,253,244,.84));
  overflow: hidden;
}

.sales-empty-visual i {
  position: absolute;
  bottom: 28px;
  width: 26px;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(180deg, #86efac, #22c55e);
  opacity: .82;
}

.sales-empty-visual i:nth-child(1) { left: 22%; height: 46px; }
.sales-empty-visual i:nth-child(2) { left: 38%; height: 74px; }
.sales-empty-visual i:nth-child(3) { left: 54%; height: 58px; }
.sales-empty-visual i:nth-child(4) { left: 70%; height: 98px; }

.sales-empty-visual span {
  position: relative;
  z-index: 1;
  width: 62px;
  height: 62px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background: rgba(255,255,255,.92);
  box-shadow: 0 18px 42px rgba(22, 163, 74, .18);
  color: #16a34a;
}

.sales-empty-state .icon {
  width: 30px;
  height: 30px;
}

.sales-empty-state strong {
  color: #12301d;
  font-size: 22px;
}

.sales-empty-state p {
  max-width: 520px;
  margin: 8px 0 0;
  color: #6f8276;
  line-height: 1.7;
}

.sales-empty-steps {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.sales-empty-steps span {
  padding: 8px 11px;
  border-radius: 999px;
  background: rgba(255,255,255,.86);
  border: 1px solid rgba(187, 247, 208, .9);
  color: #166534;
  font-size: 12px;
  font-weight: 900;
}

.promotion-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
  margin: 16px 0;
}

.promotion-card {
  min-height: 112px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  align-items: center;
  padding: 16px;
  border-radius: 16px;
  background: var(--promo-bg);
  color: var(--promo-text);
  box-shadow: 0 18px 44px rgba(22, 163, 74, .18);
  overflow: hidden;
}

.promotion-card img {
  width: 84px;
  height: 84px;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.38);
}

.promotion-card div {
  display: grid;
  gap: 4px;
}

.promotion-card span {
  width: fit-content;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.22);
  font-size: 12px;
  font-weight: 900;
}

.promotion-card strong {
  font-size: 20px;
}

.promotion-card small {
  opacity: .9;
}

.coupon-form {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  margin: 10px 0;
}

.coupon-result {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid #d7f8e8;
  border-radius: 12px;
  color: var(--green);
  background: #f0fff7;
  font-weight: 800;
}

.admin-grid {
  display: grid;
  grid-template-columns: 360px minmax(0, 1fr);
  gap: 16px;
}

.admin-shell {
  width: min(1460px, calc(100vw - 56px));
}

.settings-admin-grid {
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}

.settings-card,
.settings-contact-card {
  align-self: start;
}

.settings-card {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  padding: 16px;
}

.settings-card-single {
  grid-template-columns: minmax(0, 1fr);
}

.settings-block {
  display: grid;
  align-content: start;
  gap: 12px;
  min-width: 0;
  padding: 18px;
  border: 1px solid #d8f5df;
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,255,250,.78)),
    #ffffff;
  box-shadow: 0 12px 34px rgba(22, 163, 74, .055);
}

.settings-block-wide,
.settings-save-bar {
  grid-column: 1 / -1;
}

.settings-block h3 {
  margin: 0;
  padding-bottom: 10px;
  border-bottom: 1px solid #d8f5df;
  color: #12301d;
  font-size: 18px;
}

.settings-block .hint {
  margin: -2px 0 2px;
  color: #64746b;
  font-size: 13px;
  line-height: 1.55;
}

.settings-save-bar {
  position: sticky;
  bottom: 12px;
  z-index: 3;
  display: flex;
  justify-content: flex-end;
  padding: 12px;
  border: 1px solid #d8f5df;
  border-radius: 18px;
  background: rgba(255, 255, 255, .88);
  backdrop-filter: blur(12px);
  box-shadow: 0 18px 42px rgba(22, 163, 74, .12);
}

.settings-save-bar .gold-btn {
  min-width: 210px;
}

.media-settings-card {
  gap: 16px;
}

.media-settings-block {
  gap: 18px;
}

.media-form-head {
  padding: 18px;
  border: 1px solid color-mix(in srgb, var(--gold-dark) 14%, transparent);
  border-radius: 8px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--gold) 13%, transparent), transparent 52%),
    linear-gradient(180deg, #ffffff, #f8fffb);
}

.media-size-guide {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.media-size-guide div {
  display: grid;
  gap: 2px;
  padding: 14px 16px;
  border: 1px solid color-mix(in srgb, var(--gold-dark) 18%, transparent);
  border-radius: 8px;
  background: linear-gradient(180deg, #ffffff, color-mix(in srgb, var(--soft) 52%, #ffffff));
}

.media-size-guide strong {
  color: var(--ink);
  font-size: 14px;
}

.media-size-guide span {
  color: var(--gold-dark);
  font-size: 18px;
  font-weight: 900;
}

.media-upload-grid {
  display: grid;
  gap: 16px;
}

.media-upload-card {
  display: grid;
  grid-template-columns: minmax(240px, 34%) minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--gold-dark) 18%, transparent);
  border-radius: 8px;
  background: rgba(255, 255, 255, .9);
  box-shadow: 0 18px 45px rgba(15, 23, 42, .06);
}

.media-preview {
  position: relative;
  min-height: 220px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 18% 18%, rgba(255,255,255,.34), transparent 18%),
    linear-gradient(135deg, color-mix(in srgb, var(--gold-dark) 82%, #0f172a), color-mix(in srgb, var(--gold) 72%, #0f172a));
}

.media-logo .media-preview {
  min-height: 240px;
}

.media-preview::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle, rgba(255,255,255,.32) 0 2px, transparent 3px),
    linear-gradient(45deg, transparent 46%, rgba(255,255,255,.16) 47% 52%, transparent 53%);
  background-size: 44px 44px, 58px 58px;
  opacity: .55;
}

.media-preview span {
  position: relative;
  z-index: 1;
  width: 84px;
  height: 84px;
  display: grid;
  place-items: center;
  border-radius: 20px;
  color: #ffffff;
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.32);
  box-shadow: 0 18px 38px rgba(0,0,0,.16);
}

.media-preview span .icon {
  width: 40px;
  height: 40px;
  color: #ffffff;
}

.media-preview img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
  min-height: 220px;
  object-fit: cover;
}

.media-preview .managed-image {
  position: absolute;
  z-index: 1;
  min-height: 0;
  object-fit: var(--fit-desktop-fit, cover);
  object-position: var(--fit-desktop-x, 50%) var(--fit-desktop-y, 50%);
}

.media-upload-card.fit-editor-open {
  align-items: stretch;
}

.media-upload-card.fit-editor-open .media-preview {
  min-height: min(620px, 70vh);
  cursor: grab;
  touch-action: none;
}

.media-upload-card.fit-editor-open .media-preview::before {
  content: "ลากรูปเพื่อขยับตำแหน่ง";
  position: absolute;
  left: 14px;
  bottom: 14px;
  z-index: 3;
  padding: 8px 12px;
  border-radius: 999px;
  color: #0f3d23;
  background: rgba(255,255,255,.88);
  box-shadow: 0 10px 24px rgba(15, 23, 42, .16);
  font-size: 12px;
  font-weight: 900;
}

.media-preview.fit-drag-enabled.is-dragging {
  cursor: grabbing;
}

.media-logo .media-preview img {
  width: 150px;
  height: 150px;
  min-height: 0;
  object-fit: contain;
  border-radius: 26px;
  padding: 12px;
  background: rgba(255,255,255,.9);
  box-shadow: 0 20px 45px rgba(0,0,0,.18);
}

.media-upload-body {
  display: grid;
  gap: 14px;
  padding: 18px;
}

.media-upload-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.media-upload-head i {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 8px;
  color: var(--gold-dark);
  background: var(--soft);
}

.media-upload-head h4 {
  margin: 0 0 4px;
  color: var(--ink);
  font-size: 20px;
}

.media-upload-head p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

.image-fit-panel {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--gold-dark) 16%, transparent);
  border-radius: 8px;
  background: linear-gradient(180deg, #ffffff, color-mix(in srgb, var(--soft) 42%, #ffffff));
}

.image-fit-panel.is-collapsed {
  display: none;
}

.media-fit-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.media-fit-actions small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.image-fit-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.image-fit-device {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--gold-dark) 14%, transparent);
  border-radius: 8px;
  background: rgba(255,255,255,.82);
}

.image-fit-device > strong {
  color: var(--ink);
  font-size: 13px;
}

.image-fit-device label {
  gap: 5px;
  font-size: 11px;
}

.image-fit-device input[type="range"] {
  min-height: 28px;
  padding: 0;
  accent-color: var(--gold-dark);
}

.fit-preview-card {
  min-height: 170px;
  border: 1px solid color-mix(in srgb, var(--gold-dark) 18%, transparent);
  border-radius: 8px;
}

.media-specs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.media-specs span {
  padding: 7px 10px;
  border: 1px solid color-mix(in srgb, var(--gold-dark) 16%, transparent);
  border-radius: 999px;
  color: var(--gold-dark);
  background: color-mix(in srgb, var(--soft) 68%, #ffffff);
  font-size: 12px;
  font-weight: 900;
}

.media-url-field {
  display: grid;
  gap: 8px;
}

.media-url-field span {
  color: var(--ink);
  font-weight: 900;
}

.media-file-drop {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: 12px;
  row-gap: 2px;
  min-height: 76px;
  padding: 14px;
  border: 1.5px dashed color-mix(in srgb, var(--gold-dark) 32%, transparent);
  border-radius: 8px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--soft) 50%, #ffffff), #ffffff);
  cursor: pointer;
  transition: border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}

.media-file-drop:hover {
  transform: translateY(-1px);
  border-color: var(--gold-dark);
  box-shadow: 0 14px 30px rgba(22, 163, 74, .1);
}

.media-file-drop input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.media-file-icon {
  grid-row: span 2;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--gold), var(--gold-dark));
}

.media-file-icon .icon {
  color: #ffffff;
}

.media-file-drop strong {
  color: var(--ink);
}

.media-file-drop small {
  color: var(--muted);
  font-weight: 700;
}

@media (max-width: 760px) {
  .media-size-guide,
  .media-upload-card {
    grid-template-columns: 1fr;
  }

  .media-preview,
  .media-logo .media-preview {
    min-height: 180px;
  }

  .media-upload-head h4 {
    font-size: 18px;
  }
}

.api-settings-card {
  gap: 18px;
}

.api-settings-block {
  position: relative;
  overflow: hidden;
  padding: 20px;
  border-color: rgba(34, 197, 94, .2);
  background:
    radial-gradient(circle at 96% 10%, rgba(34, 197, 94, .12), transparent 28%),
    linear-gradient(180deg, #ffffff, #f8fffb);
}

.api-settings-block::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
  background: linear-gradient(180deg, #22c55e, #86efac);
}

.api-settings-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(34, 197, 94, .18);
}

.api-settings-head i {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  flex: 0 0 auto;
  border-radius: 16px;
  background: linear-gradient(135deg, #22c55e, #86efac);
  color: #052e16;
  box-shadow: 0 14px 28px rgba(34, 197, 94, .2);
}

.api-settings-head .icon {
  width: 24px;
  height: 24px;
  stroke-width: 2.4;
}

.api-settings-head span {
  display: block;
  margin-bottom: 2px;
  color: #16a34a;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.api-settings-head h3 {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 20px;
}

.api-settings-block label:not(.option-toggle) {
  display: grid;
  gap: 8px;
  color: #26352d;
  font-weight: 900;
}

.api-settings-block input:not([type="checkbox"]) {
  min-height: 52px;
  padding-inline: 14px;
  border-color: rgba(34, 197, 94, .22);
  border-radius: 14px;
  background: rgba(255, 255, 255, .88);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
}

.api-settings-block input:not([type="checkbox"]):focus {
  border-color: #22c55e;
  box-shadow: 0 0 0 4px rgba(34, 197, 94, .14);
}

.api-game .api-settings-head i {
  background: linear-gradient(135deg, #22c55e, #38bdf8);
}

.api-app .api-settings-head i {
  background: linear-gradient(135deg, #22c55e, #a3e635);
}

.api-bell .api-settings-head i {
  background: linear-gradient(135deg, #22c55e, #facc15);
}

.api-save-bar {
  gap: 10px;
}

.theme-preset-grid,
.theme-saved-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
}

.theme-preset-card,
.theme-saved-card button:first-child {
  display: grid;
  gap: 8px;
  width: 100%;
  min-height: 116px;
  padding: 14px;
  border: 1px solid #d8f5df;
  border-radius: 16px;
  background: #fff;
  color: #12301d;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 12px 28px rgba(22, 163, 74, .07);
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.theme-preset-card:hover,
.theme-saved-card button:first-child:hover {
  transform: translateY(-2px);
  border-color: #86efac;
  box-shadow: 0 18px 38px rgba(22, 163, 74, .12);
}

.theme-preset-card strong,
.theme-saved-card strong {
  font-size: 17px;
  font-weight: 900;
}

.theme-preset-card small {
  color: #64746b;
  font-weight: 800;
}

.theme-swatch-strip {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 5px;
  min-height: 32px;
}

.theme-swatch-strip i {
  display: block;
  border: 1px solid rgba(15, 23, 42, .12);
  border-radius: 8px;
}

.theme-action-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.theme-saved-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: stretch;
}

.theme-saved-card button:first-child {
  min-height: 94px;
}

.theme-delete-btn {
  align-self: center;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid #fecaca;
  border-radius: 14px;
  background: #fff5f5;
  color: #b91c1c;
  font-weight: 900;
  cursor: pointer;
}

.settings-contact-card {
  gap: 16px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,250,240,.64)),
    #fff;
}

.settings-contact-card .image-mini-form {
  min-width: 0;
  padding: 14px;
  border: 1px solid #f0e3cc;
  border-radius: 16px;
  background: #fffdf7;
}

.settings-card input,
.settings-card select,
.settings-card textarea,
.settings-contact-card input,
.settings-contact-card select,
.settings-contact-card textarea,
.contact-admin-row input {
  color: #3f4650;
  font-weight: 520;
}

.settings-card input::placeholder,
.settings-card textarea::placeholder,
.settings-contact-card input::placeholder,
.settings-contact-card textarea::placeholder {
  color: #9aa1aa;
  font-weight: 500;
}

.contact-admin-list {
  display: grid;
  gap: 10px;
}

.product-admin-grid {
  grid-template-columns: minmax(420px, 480px) minmax(760px, 1fr);
  gap: 24px;
  align-items: start;
}

.product-create-card {
  position: sticky;
  top: 96px;
  gap: 15px;
  border-radius: 20px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,250,240,.72)),
    #fff;
  box-shadow: 0 20px 55px rgba(28, 20, 5, .08);
}

.product-admin-grid .table-wrap {
  min-width: 0;
  border-radius: 18px;
  border: 1px solid #d8f5df;
  background: #fff;
  box-shadow: 0 18px 48px rgba(22, 163, 74, .06);
}

.ad-popup-admin-card {
  grid-column: 1 / -1;
  position: static;
}

.ad-admin-preview-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.ad-admin-preview {
  display: grid;
  gap: 8px;
  padding: 8px;
  border: 1px solid rgba(34, 197, 94, .22);
  border-radius: 14px;
  background: rgba(240, 253, 244, .72);
}

.ad-admin-preview img {
  width: 100%;
  /* aspect-ratio removed for natural scaling */
  object-fit: cover;
  border-radius: 10px;
  background: #fff;
}

.ad-admin-preview span {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .82rem;
}

.product-manager-panel {
  min-width: 0;
  display: grid;
  gap: 14px;
  padding: 18px;
  border: 1px solid #d8f5df;
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,255,250,.84)),
    #ffffff;
  box-shadow: 0 18px 48px rgba(22, 163, 74, .07);
}

.product-manager-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: end;
  padding-bottom: 14px;
  border-bottom: 1px solid #d8f5df;
}

.product-manager-head h3 {
  margin: 4px 0 4px;
  color: #12301d;
  font-size: 24px;
  line-height: 1.15;
}

.product-manager-head p {
  margin: 0;
  color: #52705e;
  font-size: 13px;
  line-height: 1.55;
}

.product-manager-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(128px, 1fr));
  gap: 8px;
}

.product-manager-stats span {
  display: grid;
  gap: 2px;
  padding: 10px 12px;
  border: 1px solid #bbf7d0;
  border-radius: 14px;
  background: #f0fdf4;
  color: #52705e;
  font-size: 11px;
  font-weight: 800;
}

.product-manager-stats strong {
  color: #14532d;
  font-size: 16px;
  line-height: 1.1;
}

.product-card-list {
  display: grid;
  gap: 12px;
  max-height: calc(100vh - 190px);
  overflow: auto;
  padding-right: 4px;
}

.admin-product-card {
  display: grid;
  gap: 14px;
  padding: 14px;
  border: 1px solid #d8f5df;
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 12px 30px rgba(15, 23, 42, .04);
}

.admin-product-card.is-inactive {
  background: #f8fafc;
}

.admin-product-main {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr) minmax(300px, .9fr);
  gap: 14px;
  align-items: center;
}

.admin-product-img {
  width: 76px;
  height: 76px;
  border: 1px solid #d8f5df;
  border-radius: 16px;
  background: #f0fdf4;
  object-fit: cover;
}

.admin-product-info {
  min-width: 0;
  display: grid;
  gap: 8px;
}

.admin-product-title-row {
  display: grid;
  gap: 5px;
}

.admin-product-title-row h4 {
  margin: 0;
  overflow: hidden;
  color: #0f172a;
  font-size: 17px;
  font-weight: 900;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-product-category {
  width: fit-content;
  max-width: 100%;
  overflow: hidden;
  padding: 5px 9px;
  border-radius: 999px;
  background: #ecfff2;
  color: #166534;
  font-size: 12px;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-product-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.admin-product-credentials {
  margin: 0;
  color: #64748b;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.45;
}

.admin-product-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.admin-product-metrics span {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 10px;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  background: #f8fafc;
}

.admin-product-metrics small {
  color: #64748b;
  font-size: 11px;
  font-weight: 850;
}

.admin-product-metrics strong {
  overflow: hidden;
  color: #12301d;
  font-size: 14px;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-product-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.admin-edit-modal {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  align-items: center;
  justify-items: center;
  padding: 24px;
  background: rgba(4, 12, 9, .52);
  backdrop-filter: blur(6px);
}

.admin-edit-card {
  position: relative;
  width: min(680px, calc(100vw - 32px));
  max-height: min(78vh, 720px);
  display: grid;
  gap: 14px;
  overflow: auto;
  padding: 22px;
  border: 1px solid #bbf7d0;
  border-radius: 24px;
  background: #ffffff;
  box-shadow: 0 28px 80px rgba(15, 23, 42, .24);
}

.admin-edit-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 14px;
  padding: 0 52px 12px 0;
  border-bottom: 1px solid #d8f5df;
}

.admin-edit-head .modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 4;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid #bbf7d0;
  border-radius: 999px;
  background: #f0fdf4;
  color: #14532d;
  font-size: 28px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 12px 28px rgba(22, 163, 74, .16);
}

.admin-edit-head .modal-close:hover {
  border-color: #22c55e;
  background: #dcfce7;
}

.admin-edit-head h3 {
  margin: 4px 0 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  color: #0f172a;
  font-size: 22px;
  line-height: 1.25;
}

.product-edit-details {
  flex: 1 1 100%;
  min-width: 0;
}

.product-edit-details summary {
  width: fit-content;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 14px;
  border: 1px solid #bbf7d0;
  border-radius: 12px;
  background: #f0fdf4;
  color: #14532d;
  font-weight: 900;
  cursor: pointer;
  list-style: none;
}

.product-edit-details summary::-webkit-details-marker {
  display: none;
}

.product-edit-details[open] summary {
  margin-bottom: 10px;
  border-color: #22c55e;
  background: #dcfce7;
}

.product-edit-form {
  min-width: 0;
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid #d8f5df;
  border-radius: 16px;
  background: #f8fffb;
}

.product-edit-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.product-edit-grid label,
.product-edit-toggles {
  min-width: 0;
}

.product-edit-wide {
  grid-column: span 3;
}

.product-edit-form input,
.product-edit-form select,
.product-edit-form textarea {
  width: 100%;
  min-width: 0;
  border: 1px solid #d7e2ef;
  border-radius: 12px;
  background: #ffffff;
}

.product-edit-toggles {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: flex-end;
}

.admin-empty-state {
  padding: 28px;
  border: 1px dashed #bbf7d0;
  border-radius: 16px;
  background: #f0fdf4;
  color: #166534;
  text-align: center;
  font-weight: 900;
}

.recommended-admin-grid .admin-thumb {
  border-radius: 12px;
  background: #ecfff2;
  object-fit: cover;
}

.recommended-admin-grid .image-mini-form select,
.recommended-admin-grid .image-mini-form input {
  min-width: 0;
}

.recommended-edit-form {
  min-width: 320px;
}

.recommended-manager-panel {
  min-width: 0;
  display: grid;
  gap: 14px;
  padding: 18px;
  border: 1px solid #d8f5df;
  border-radius: 22px;
  background: #ffffff;
  box-shadow: 0 18px 48px rgba(22, 163, 74, .07);
}

.recommended-card-list {
  display: grid;
  gap: 12px;
  max-height: calc(100vh - 210px);
  overflow: auto;
  padding-right: 4px;
}

.recommended-admin-card {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid #d8f5df;
  border-radius: 18px;
  background: linear-gradient(180deg, #ffffff, #fbfffd);
}

.recommended-admin-main {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr) minmax(230px, .7fr);
  gap: 14px;
  align-items: center;
}

.recommended-admin-info {
  min-width: 0;
  display: grid;
  gap: 7px;
}

.recommended-admin-info h4 {
  margin: 0;
  color: #0f172a;
  font-size: 17px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.recommended-admin-info p {
  margin: 0;
  color: #64748b;
  font-size: 13px;
  font-weight: 750;
  line-height: 1.35;
}

.recommended-admin-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.recommended-admin-meta span {
  min-width: 0;
  display: grid;
  gap: 3px;
  padding: 10px;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  background: #f8fafc;
}

.recommended-admin-meta small {
  color: #64748b;
  font-size: 11px;
  font-weight: 850;
}

.recommended-admin-meta strong {
  color: #12301d;
  font-size: 14px;
  font-weight: 950;
  overflow-wrap: anywhere;
}

.recommended-admin-meta em {
  color: #64748b;
  font-size: 12px;
  font-style: normal;
  font-weight: 750;
  overflow-wrap: anywhere;
}

.recommended-admin-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.recommended-fallback-thumb {
  display: grid;
  place-items: center;
  color: #166534;
  font-size: 26px;
  font-weight: 950;
}

.product-admin-grid table {
  min-width: 1080px;
}

.product-admin-grid .category-admin-table {
  width: 100%;
  min-width: 0;
  table-layout: fixed;
}

.category-admin-table th:nth-child(1) { width: 46%; }
.category-admin-table th:nth-child(2) { width: 22%; }
.category-admin-table th:nth-child(3) { width: 32%; }

.category-admin-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.category-admin-actions .light-btn,
.category-admin-actions .danger-action {
  min-height: 40px;
  padding: 8px 14px;
  border-radius: 13px;
}

.product-admin-grid th:nth-child(1) { width: 260px; }
.product-admin-grid th:nth-child(2) { width: 170px; }
.product-admin-grid th:nth-child(3) { width: 100px; }
.product-admin-grid th:nth-child(4) { width: 160px; }
.product-admin-grid th:nth-child(5) { width: 390px; }

.product-edit-form {
  min-width: 360px;
}

.product-edit-form .row {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.admin-form-head {
  padding-bottom: 4px;
  border-bottom: 1px solid #f1e7d8;
}

.admin-form-head h3 {
  margin: 4px 0 5px;
  color: #1f2328;
  font-size: 24px;
  font-weight: 800;
  line-height: 1.15;
}

.admin-form-head p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.65;
}

.form-kicker,
.form-section-title {
  color: var(--gold-dark);
  font-size: 12px;
  font-weight: 950;
  letter-spacing: .04em;
}

.form-kicker {
  text-transform: uppercase;
}

.form-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  color: #9a6b00;
  font-weight: 800;
}

.form-section-title::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, #f3d38a, transparent);
}

.form-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.product-create-card input,
.product-create-card select,
.product-create-card textarea {
  border-radius: 14px;
  border-color: #eadfce;
  background: rgba(255,255,255,.9);
  color: #3f4650;
  font-weight: 520;
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}

.product-create-card input::placeholder,
.product-create-card textarea::placeholder {
  color: #9aa1aa;
  font-weight: 500;
}

.product-create-card input:focus,
.product-create-card select:focus,
.product-create-card textarea:focus {
  outline: none;
  border-color: var(--gold);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(126, 226, 58, .16);
}

.form-status {
  margin: 0;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid #bbf7d0;
  background: #f0fdf4;
  color: #166534;
  font-weight: 850;
  line-height: 1.45;
}

.form-status.error {
  border-color: #fecaca;
  background: #fff1f2;
  color: #b91c1c;
}

.form-status.info {
  border-color: #bbf7d0;
  background: #f0fdf4;
  color: #166534;
}

.credential-builder {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid #bbf7d0;
  border-radius: 18px;
  background: linear-gradient(180deg, #f7fff9, #ffffff);
}

.credential-builder-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.credential-builder-head strong,
.credential-builder-head span {
  display: block;
}

.credential-builder-head span {
  margin-top: 2px;
  color: #52705e;
  font-size: 13px;
  font-weight: 650;
}

.credential-rows {
  display: grid;
  gap: 10px;
}

.credential-row {
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid #d8f5df;
  border-radius: 14px;
  background: #fff;
}

.credential-row span {
  color: #166534;
  font-weight: 900;
  white-space: nowrap;
}

.credential-empty {
  margin: 0;
  padding: 14px;
  border: 1px dashed #bbf7d0;
  border-radius: 14px;
  background: #f0fdf4;
  color: #52705e;
  font-weight: 800;
  text-align: center;
}

.file-field {
  padding: 12px;
  border: 1px dashed #22c55e;
  border-radius: 16px;
  background: linear-gradient(180deg, #f0fdf4, #ffffff);
}

.file-field input[type="file"] {
  padding: 9px;
  border-color: #bbf7d0;
  background: #f7fff9;
}

.file-field input[type="file"]::file-selector-button {
  margin-right: 10px;
  border: 0;
  border-radius: 10px;
  background:#7ee23a;
  color: #12301d;
  padding: 9px 12px;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(22, 163, 74, .16);
}

.file-field input[type="file"]::file-selector-button:hover {
  background:#8df05a;
}

.compact-file {
  padding: 9px;
  font-size: 13px;
}

.compact-file input[type="file"] {
  padding: 7px;
}

.info-hint {
  margin: -2px 0 2px;
  padding: 10px 12px;
  border: 1px solid #bbf7d0;
  border-radius: 14px;
  background: #f0fdf4;
  color: #166534;
  line-height: 1.65;
}

.option-toggle {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid #eadfce;
  border-radius: 16px;
  background: #fff;
  cursor: pointer;
}

.option-toggle input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.toggle-ui {
  position: relative;
  width: 46px;
  height: 26px;
  border-radius: 999px;
  background: #e6e6e6;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.06);
  transition: background .18s ease, box-shadow .18s ease;
}

.toggle-ui::before {
  content: "";
  position: absolute;
  right: 8px;
  top: 50%;
  width: 8px;
  height: 4px;
  border-left: 2px solid rgba(255,255,255,.92);
  border-bottom: 2px solid rgba(255,255,255,.92);
  opacity: 0;
  transform: translateY(-58%) rotate(-45deg);
  transition: opacity .18s ease;
}

.toggle-ui::after {
  content: "✓";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #fff;
  color: transparent;
  font-size: 13px;
  font-weight: 950;
  line-height: 1;
  box-shadow: 0 4px 12px rgba(0,0,0,.18);
  transition: transform .18s ease, color .18s ease;
}

.option-toggle input:checked + .toggle-ui {
  background: linear-gradient(135deg, var(--gold), var(--gold-dark));
  box-shadow: 0 8px 20px rgba(22, 163, 74, .20);
}

.option-toggle input:checked + .toggle-ui::before {
  opacity: 1;
}

.option-toggle input:checked + .toggle-ui::after {
  transform: translateX(20px);
  color: var(--gold-dark);
}

.option-toggle strong,
.option-toggle small {
  display: block;
}

.option-toggle strong {
  color: #2f343b;
  font-weight: 750;
}

.option-toggle small {
  margin-top: 2px;
  color: var(--muted);
  font-weight: 500;
  line-height: 1.45;
}

.mini-toggle {
  min-width: 180px;
  padding: 9px 10px;
  border-radius: 13px;
  font-size: 13px;
}

.mini-toggle .toggle-ui {
  width: 38px;
  height: 22px;
}

.mini-toggle .toggle-ui::before {
  right: 7px;
  width: 7px;
  height: 4px;
}

.mini-toggle .toggle-ui::after {
  width: 16px;
  height: 16px;
  font-size: 11px;
}

.mini-toggle input:checked + .toggle-ui::after {
  transform: translateX(16px);
}

.contact-toggle {
  min-width: 98px;
}

.product-save-btn {
  min-height: 50px;
  margin-top: 2px;
}

.table-wrap { overflow-x: auto; }
table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
}

th, td {
  text-align: left;
  border-bottom: 1px solid var(--line);
  padding: 10px;
  vertical-align: top;
}

th { background: #f0fdf4; }

.admin-thumb {
  width: 54px;
  height: 38px;
  object-fit: cover;
  border-radius: 8px;
  margin-right: 10px;
  vertical-align: middle;
  border: 1px solid var(--line);
}

.image-mini-form {
  display: grid;
  gap: 8px;
  min-width: 220px;
  margin-bottom: 8px;
}

.image-mini-form input {
  padding: 8px 10px;
  color: #3f4650;
  font-size: 13px;
  font-weight: 520;
}

.credential-box {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid #bbf7d0;
  border-radius: 14px;
  background: #f0fdf4;
  width: 100%;
  box-sizing: border-box;
  min-width: 0;
  overflow: hidden;
}

.credential-box pre {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
  line-height: 1.65;
}

.credential-box > strong {
  color: #166534;
}

.credential-line {
  display: grid;
  gap: 6px;
  padding: 10px;
  border-radius: 10px;
  background: #fff;
}

.credential-line span {
  font-weight: 800;
}

.credential-line code {
  display: block;
  padding: 7px 9px;
  border-radius: 8px;
  background: #f7f7f7;
  color: #111;
  word-break: break-all;
}

.game-topup-page {
  margin-top: -24px;
  min-height: 760px;
  padding: 34px 0 56px;
  background: #242424;
  color: #fff;
}

.game-topup-shell {
  display: grid;
  gap: 24px;
  width: min(1160px, calc(100vw - 44px));
}

.game-catalog-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.game-catalog-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #fff;
}

.game-catalog-logo {
  display: grid;
  place-items: center;
  width: 92px;
  height: 42px;
  border-radius: 8px;
  background: linear-gradient(135deg, #ff7a18, #facc15);
  color: #161616;
  font-weight: 950;
  letter-spacing: 0;
}

.game-catalog-brand strong {
  font-size: 20px;
  font-weight: 900;
}

.game-topup-balance {
  min-width: 150px;
  padding: 12px 16px;
  border: 1px solid rgba(255,122,24,.34);
  border-radius: 8px;
  background: #1b1b1b;
}

.game-topup-balance span,
.game-topup-balance strong {
  display: block;
}

.game-topup-balance span {
  color: rgba(248,251,255,.66);
  font-size: 13px;
  font-weight: 700;
}

.game-topup-balance strong {
  margin-top: 4px;
  color: #ffb020;
  font-size: 22px;
}

.game-catalog-section,
.game-package-section {
  display: grid;
  gap: 28px;
}

.game-catalog-search {
  width: 100%;
  height: 40px;
  border: 0;
  border-radius: 7px;
  padding: 0 18px;
  background: #fff;
  color: #111;
  font-size: 16px;
  font-style: italic;
  outline: none;
}

.game-topup-panel {
  padding: 18px;
  border: 1px solid rgba(148, 163, 184, .25);
  border-radius: 8px;
  background: rgba(255,255,255,.96);
  color: #0f172a;
  box-shadow: 0 18px 40px rgba(0,0,0,.16);
}

.topup-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.topup-panel-head p {
  margin: 4px 0 0;
  color: #64748b;
  font-size: 13px;
}

.topup-panel-head input {
  max-width: 280px;
}

.topup-panel-head h2,
.game-topup-form h2 {
  margin: 0;
  font-size: 20px;
}

.topup-panel-head input,
.game-topup-form input,
.game-topup-form textarea {
  width: 100%;
  border: 1px solid #d7dee8;
  border-radius: 8px;
  padding: 11px 12px;
  background: #f8fafc;
  color: #0f172a;
}

.game-card-grid,
.pack-card-grid,
.game-topup-form,
.topup-order-list {
  display: grid;
  gap: 10px;
}

.game-card-grid {
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  align-content: start;
  column-gap: 38px;
  row-gap: 34px;
}

.game-pick-card {
  min-height: 120px;
  display: grid;
  grid-template-rows: auto auto auto;
  gap: 12px;
  justify-items: center;
  text-align: center;
  border: 0;
  border-radius: 8px;
  padding: 0;
  background: transparent;
  color: #fff;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease, background .16s ease;
}

.pack-pick-card {
  min-height: 84px;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  text-align: left;
  border: 1px solid #dbe7f3;
  border-radius: 8px;
  padding: 12px;
  background: #f8fafc;
  color: #0f172a;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease, background .16s ease;
}

.game-pick-card:hover,
.game-pick-card.active {
  transform: translateY(-4px);
}

.game-pick-media {
  width: 140px;
  aspect-ratio: 1 / 1; /* height removed */
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 15px;
  background: #0f172a;
  box-shadow: 0 14px 30px rgba(0,0,0,.34);
  transition: box-shadow .16s ease, transform .16s ease;
}

.game-pick-card:hover .game-pick-media,
.game-pick-card.active .game-pick-media {
  box-shadow: 0 18px 38px rgba(255,122,24,.24);
  transform: scale(1.03);
}

.game-pick-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pack-pick-media {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid #dbe7f3;
  border-radius: 8px;
  background: #eaf3ff;
}

.pack-pick-token {
  position: relative;
  isolation: isolate;
  gap: 0;
  border: 1px solid rgba(34, 197, 94, .24);
  background:
    radial-gradient(circle at 28% 20%, rgba(255,255,255,.9), transparent 22%),
    linear-gradient(135deg, #ecfff2, #d9f99d);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.7), 0 10px 20px rgba(22, 163, 74, .12);
}

.pack-pick-token::after {
  content: "";
  position: absolute;
  inset: auto 8px 7px 8px;
  height: 2px;
  border-radius: 999px;
  background: rgba(15, 118, 110, .16);
}

.pack-pick-token i,
.pack-pick-token svg {
  width: 25px;
  height: 25px;
  display: block;
  color: #047857;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

.pack-pick-token b {
  position: absolute;
  right: 5px;
  top: 4px;
  min-width: 22px;
  padding: 1px 5px;
  border-radius: 999px;
  background: #062d1b;
  color: #86efac;
  font-size: 10px;
  font-weight: 950;
  line-height: 1.35;
  text-align: center;
}

.pack-pick-token small {
  position: absolute;
  left: 5px;
  right: 5px;
  bottom: 10px;
  overflow: hidden;
  color: #065f46;
  font-size: 9px;
  font-weight: 950;
  line-height: 1;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pack-token-diamond {
  border-color: rgba(14, 165, 233, .24);
  background:
    radial-gradient(circle at 28% 18%, rgba(255,255,255,.92), transparent 22%),
    linear-gradient(135deg, #e0f2fe, #cffafe 52%, #dbeafe);
}

.pack-token-diamond i,
.pack-token-diamond svg { color: #0284c7; }
.pack-token-diamond small { color: #075985; }
.pack-token-diamond b { background: #082f49; color: #bae6fd; }

.pack-token-coin {
  border-color: rgba(245, 158, 11, .28);
  background:
    radial-gradient(circle at 28% 18%, rgba(255,255,255,.92), transparent 22%),
    linear-gradient(135deg, #fef3c7, #fde68a);
}

.pack-token-coin i,
.pack-token-coin svg { color: #b45309; }
.pack-token-coin small { color: #92400e; }
.pack-token-coin b { background: #451a03; color: #fde68a; }

.pack-token-card {
  border-color: rgba(99, 102, 241, .22);
  background:
    radial-gradient(circle at 28% 18%, rgba(255,255,255,.92), transparent 22%),
    linear-gradient(135deg, #eef2ff, #ddd6fe);
}

.pack-token-card i,
.pack-token-card svg { color: #4f46e5; }
.pack-token-card small { color: #4338ca; }
.pack-token-card b { background: #312e81; color: #ddd6fe; }

.pack-pick-media img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

.pack-pick-placeholder .icon {
  color: #0ea5e9;
}

.game-art-letter {
  width: 100%;
  height: auto;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--game-tone), #0f172a);
  color: #fff;
  font-size: 42px;
  font-weight: 900;
}

.game-pick-card strong {
  width: 150px;
  color: #fff;
  font-size: 13px;
  font-weight: 850;
  line-height: 1.25;
  word-break: break-word;
}

.game-package-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 16px;
  align-items: start;
}

.game-back-btn {
  justify-self: start;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 8px;
  padding: 10px 14px;
  background: #171717;
  color: #fff;
  font-weight: 800;
}

.pack-pick-card:hover,
.pack-pick-card.active {
  transform: translateY(-2px);
  border-color: #ff8a1f;
  background: #fff8ed;
  box-shadow: 0 14px 28px rgba(255,122,24,.14);
}

.pack-card-grid {
  grid-template-columns: 1fr;
  align-content: start;
}

.pack-pick-card strong {
  color: #16a34a;
  font-size: 18px;
  text-align: right;
  white-space: nowrap;
}

.selected-game-preview {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  padding: 12px;
  border: 1px solid #bae6fd;
  border-radius: 8px;
  background: linear-gradient(135deg, #ecfeff, #f0fdf4);
}

.selected-game-preview .game-pick-media,
.selected-game-art {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 8px;
  background: #0f172a;
}

.selected-game-art img,
.selected-game-art .game-art-letter {
  width: 100%;
  height: auto;
  object-fit: cover;
}

.selected-game-preview strong,
.selected-game-preview small {
  display: block;
}

.selected-game-preview strong {
  color: #0f172a;
  font-size: 17px;
}

.selected-game-preview small {
  color: #64748b;
}

.pack-pick-card .pack-pick-name,
.pack-pick-card small {
  grid-column: 2;
}

.game-topup-form label {
  display: grid;
  gap: 7px;
  color: #334155;
  font-weight: 750;
}

.topup-summary {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 14px;
  border: 1px solid #bbf7d0;
  border-radius: 8px;
  background: #f0fdf4;
  color: #166534;
  font-weight: 800;
}

.topup-orders-panel {
  background: rgba(255,255,255,.94);
}

.topup-order-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  padding: 14px;
  border: 1px solid #dbe7f3;
  border-radius: 8px;
  background: #f8fafc;
}

.topup-order-card strong,
.topup-order-card span,
.topup-order-card small {
  display: block;
}

.topup-order-card span,
.topup-order-card small {
  color: #64748b;
}

.topup-order-card b {
  display: block;
  margin-bottom: 8px;
  color: #16a34a;
  text-align: right;
}

.topup-empty {
  grid-column: 1 / -1;
  max-width: 380px;
  padding: 18px;
  border: 1px dashed #9bd5c7;
  border-radius: 8px;
  color: #475569;
  background: #f8fafc;
}

.game-topup-page {
  margin-top: -24px;
  min-height: 780px;
  padding: 28px 0 54px;
  background:
    linear-gradient(180deg, rgba(5, 18, 32, .94), rgba(7, 22, 20, .96)),
    radial-gradient(circle at 14% 0%, rgba(34, 197, 94, .20), transparent 34%),
    #07131d;
  color: #eef7ff;
}

.game-topup-shell {
  width: min(1420px, calc(100vw - 38px));
  display: grid;
  gap: 16px;
}

.game-topup-hero {
  min-height: 188px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(330px, 520px);
  align-items: end;
  gap: 18px;
  padding: 26px;
  border: 1px solid rgba(125, 211, 252, .18);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(8, 47, 73, .92), rgba(20, 83, 45, .78)),
    repeating-linear-gradient(90deg, rgba(255,255,255,.04) 0 1px, transparent 1px 58px);
  box-shadow: 0 22px 54px rgba(0, 0, 0, .28);
}

.game-topup-hero-copy span,
.checkout-title span {
  display: block;
  color: #67e8f9;
  font-size: 12px;
  font-weight: 900;
}

.game-topup-hero-copy h1 {
  max-width: 680px;
  margin: 8px 0 8px;
  color: #f8fafc;
  font-size: clamp(34px, 5vw, 64px);
  line-height: 1.05;
  letter-spacing: 0;
}

.game-topup-hero-copy p {
  max-width: 640px;
  margin: 0;
  color: rgba(226, 232, 240, .84);
  font-weight: 700;
}

.game-topup-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.game-topup-stats div {
  min-height: 86px;
  padding: 14px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 8px;
  background: rgba(4, 12, 20, .56);
}

.game-topup-stats span {
  display: block;
  color: rgba(203, 213, 225, .74);
  font-size: 12px;
  font-weight: 800;
}

.game-topup-stats strong {
  display: block;
  margin-top: 8px;
  color: #86efac;
  font-size: 26px;
  font-weight: 950;
}

.game-topup-workspace {
  display: grid;
  grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.game-catalog-section,
.game-package-section {
  display: grid;
  gap: 14px;
}

.game-catalog-section {
  position: sticky;
  top: 88px;
  max-height: calc(100vh - 110px);
  padding: 16px;
  border: 1px solid rgba(148, 163, 184, .22);
  border-radius: 8px;
  background: rgba(8, 19, 32, .92);
  overflow: hidden;
}

.game-section-head,
.topup-panel-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 0;
}

.game-section-head h2,
.topup-panel-head h2,
.game-topup-form h2 {
  margin: 0;
  color: inherit;
  font-size: 20px;
  line-height: 1.2;
}

.game-section-head p,
.topup-panel-head p {
  margin: 4px 0 0;
  color: #93a4b8;
  font-size: 13px;
}

.game-search-wrap {
  position: relative;
}

.game-catalog-search {
  height: 44px;
  width: 100%;
  border: 1px solid rgba(148, 163, 184, .26);
  border-radius: 8px;
  padding: 0 14px;
  background: #0e1b2e;
  color: #f8fafc;
  font-size: 15px;
  font-style: normal;
}

.game-catalog-search::placeholder {
  color: #71839a;
}

.game-card-grid {
  max-height: calc(100vh - 250px);
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding-right: 4px;
}

.game-card-grid::-webkit-scrollbar,
.pack-card-grid::-webkit-scrollbar {
  width: 8px;
}

.game-card-grid::-webkit-scrollbar-thumb,
.pack-card-grid::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(148, 163, 184, .34);
}

.game-pick-card {
  min-height: 156px;
  display: grid;
  gap: 8px;
  justify-items: center;
  align-content: start;
  padding: 10px 8px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: rgba(15, 30, 49, .76);
  color: #fff;
  text-align: center;
}

.game-pick-card:hover,
.game-pick-card.active {
  transform: translateY(-2px);
  border-color: rgba(45, 212, 191, .72);
  background: rgba(8, 47, 73, .92);
  box-shadow: 0 16px 28px rgba(6, 182, 212, .12);
}

.game-pick-media {
  width: 82px;
  aspect-ratio: 1 / 1; /* height removed */
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 12px 22px rgba(0,0,0,.34);
}

.game-pick-card:hover .game-pick-media,
.game-pick-card.active .game-pick-media {
  transform: none;
  box-shadow: 0 16px 28px rgba(45, 212, 191, .16);
}

.game-pick-card strong {
  width: 100%;
  color: #f8fafc;
  font-size: 12px;
  line-height: 1.25;
}

.game-pick-card small {
  color: #93c5fd;
  font-size: 11px;
  font-weight: 800;
}

.game-package-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 370px);
  gap: 16px;
  align-items: start;
}

.game-topup-panel {
  border: 1px solid rgba(148, 163, 184, .18);
  border-radius: 8px;
  background: rgba(248, 250, 252, .98);
  color: #0f172a;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .22);
}

.pack-list-panel {
  min-height: 558px;
}

.pack-card-grid {
  max-height: 632px;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(245px, 1fr));
  gap: 10px;
  padding-right: 4px;
}

.pack-pick-card {
  min-height: 82px;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: 7px 10px;
  align-items: center;
  border-radius: 8px;
  border-color: #d7e2ef;
  background: #f8fafc;
}

.pack-pick-card strong {
  grid-column: 1 / -1;
  justify-self: start;
  padding: 6px 10px;
  border-radius: 999px;
  background: #dcfce7;
  color: #15803d;
  font-size: 14px;
  text-align: left;
}

.pack-pick-card:hover,
.pack-pick-card.active {
  transform: translateY(-2px);
  border-color: #14b8a6;
  background: #ecfeff;
  box-shadow: 0 14px 30px rgba(20, 184, 166, .14);
}

.pack-pick-card .pack-pick-name,
.pack-pick-card small {
  grid-column: auto;
}

.pack-pick-name {
  display: block;
  color: #0f172a;
  font-weight: 900;
  line-height: 1.25;
}

.pack-pick-card small {
  display: block;
  margin-top: 3px;
  color: #64748b;
  font-size: 11px;
}

.pack-pick-media {
  border-radius: 8px;
  background: #e0f2fe;
}

.selected-game-preview {
  margin: 0;
  border-color: rgba(45, 212, 191, .26);
  background: linear-gradient(135deg, rgba(236, 254, 255, .98), rgba(240, 253, 244, .98));
}

.selected-game-art {
  border-radius: 13px;
}

.game-topup-form {
  position: sticky;
  top: 88px;
  gap: 12px;
}

.checkout-title {
  display: grid;
  gap: 3px;
}

.game-topup-form label {
  color: #334155;
  font-weight: 850;
}

.game-topup-form input,
.game-topup-form textarea {
  border-color: #d6e0ec;
  background: #f8fafc;
}

.topup-summary {
  align-items: center;
  min-height: 58px;
  border-color: #bbf7d0;
  background: linear-gradient(135deg, #f0fdf4, #ecfeff);
}

.topup-summary strong {
  font-size: 20px;
}

.topup-orders-panel {
  background: rgba(248,250,252,.96);
}

.game-back-btn {
  min-height: 34px;
  padding: 7px 12px;
  border-color: rgba(148, 163, 184, .22);
  background: rgba(15, 30, 49, .8);
  color: #dbeafe;
}

.topup-empty {
  max-width: none;
  border-color: rgba(125, 211, 252, .36);
  background: rgba(248, 250, 252, .9);
}

@media (max-width: 1180px) {
  .game-topup-hero,
  .game-topup-workspace,
  .game-package-layout {
    grid-template-columns: 1fr;
  }

  .game-catalog-section,
  .game-topup-form {
    position: static;
    max-height: none;
  }

  .game-card-grid {
    max-height: none;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  }

  .pack-card-grid {
    max-height: none;
  }
}

@media (max-width: 640px) {
  .game-topup-shell {
    width: min(100% - 18px, 1420px);
  }

  .game-topup-hero {
    padding: 18px;
  }

  .game-topup-stats {
    grid-template-columns: 1fr;
  }

  .game-card-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }

  .game-pick-media {
    width: 68px;
    aspect-ratio: 1 / 1; /* height removed */
    border-radius: 14px;
  }

  .game-pick-card {
    min-height: 136px;
  }

  .pack-card-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .service-strip {
    margin: -4px 0 20px;
    gap: 10px;
  }

  .service-strip article {
    min-height: 72px;
    padding: 13px;
  }

  .form-grid {
    grid-template-columns: 1fr;
  }

  .password-panel,
  .policy {
    padding: 18px;
  }
}

@media (max-width: 760px) {
  .ad-popup-modal {
    padding: 14px;
  }

  .ad-popup-card {
    width: min(96vw, 620px);
    border-radius: 20px;
  }

  .ad-popup-image-button {
    min-height: 0;
    aspect-ratio: 3 / 2;
  }

  .ad-popup-close {
    width: 34px;
    height: 34px;
    font-size: 21px;
  }

  .ad-admin-preview-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.hidden { display: none !important; }
.ok { color: var(--green); font-weight: 800; }
.warn { color: #b87500; font-weight: 800; }
.danger { color: var(--red); font-weight: 800; }
.danger-action {
  color: #166534;
  border-color: #bbf7d0;
  background: #f0fdf4;
}
.danger-action:hover {
  border-color: #86efac;
  box-shadow: 0 10px 24px rgba(22, 163, 74, .12);
}
.hint { color: var(--muted); font-size: 13px; }

@media (max-width: 640px) {
  .header-inner { height: auto; padding: 12px 0; flex-wrap: wrap; }
  .main-nav { order: 3; width: 100%; overflow-x: auto; }
  .category-sale-header {
    min-height: 142px;
    border-radius: 18px;
  }
  .category-products-panel {
    padding: 16px;
    border-radius: 16px;
  }
  .category-products-head {
    display: grid;
  }
  .category-products-metrics {
    justify-content: flex-start;
  }
  .category-chip-row {
    gap: 8px;
  }
  .category-chip-row button {
    min-height: 40px;
    padding: 0 14px;
  }
  .stats-grid, .category-grid, .two-col, .footer-grid, .contact-panel, .admin-grid, .profile-stats, .profile-hero { grid-template-columns: 1fr; }
  .service-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin: -2px 0 18px;
  }
  .service-strip article {
    min-height: 104px;
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 8px;
    padding: 10px 6px;
    text-align: center;
    border-radius: 14px;
  }
  .service-strip i {
    width: 36px;
    height: 36px;
    border-radius: 12px;
  }
  .service-strip i .icon {
    width: 17px;
    height: 17px;
  }
  .service-strip strong {
    font-size: 11px;
    line-height: 1.25;
  }
  .service-strip span {
    display: none;
  }
  .profile-hero {
    text-align: left;
  }
  .filter-bar { grid-template-columns: 1fr; }
  .wallet-methods { grid-template-columns: 1fr; }
  .quick-amounts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .game-topup-hero,
  .game-topup-grid,
  .topup-order-card {
    grid-template-columns: 1fr;
  }
  .game-topup-hero {
    padding: 24px;
  }
  .game-topup-hero h1 {
    font-size: 40px;
  }
  .contact-admin-row { grid-template-columns: 1fr; }
  .theme-grid { grid-template-columns: 1fr; }
  .orange-hero { height: 330px; }
  .hero-copy { text-align: left; }
  .sample-chip { font-size: 14px; }
  .hero-device { right: 22px; transform: scale(.82) rotate(5deg); transform-origin: bottom right; }
  .slider-btn { display: none; }
  .footer-bottom { display: grid; gap: 10px; }
  .cookie { grid-template-columns: 1fr; }
  .auth-card {
    min-height: auto;
    grid-template-columns: 1fr;
    max-height: calc(100vh - 28px);
    overflow: auto;
  }
  .auth-visual {
    padding: 28px;
  }
  .auth-visual h2 {
    margin-top: 36px;
    font-size: 34px;
  }
  .auth-benefits {
    margin-top: 24px;
  }
  .auth-actions {
    grid-template-columns: 1fr;
  }

  .auth-identity-row {
    grid-template-columns: 1fr;
  }
  .product-detail-card {
    grid-template-columns: 1fr;
    max-height: calc(100vh - 28px);
    overflow: auto;
  }
  .product-detail-media,
  .product-detail-media img {
    min-height: 260px;
    height: 260px;
  }
  .detail-actions {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1180px) {
  .site-header,
  main,
  .footer {
    width: min(100vw - 16px, 1120px);
  }

  .shell {
    width: min(100vw - 32px, 1040px);
  }

  .header-inner {
    gap: 12px;
  }

  .logo {
    min-width: auto;
  }

  .main-nav {
    min-width: 0;
  }

  .main-nav a {
    padding: 9px 10px;
    font-size: 13px;
  }

  .orange-hero {
    height: 280px;
  }

  .hero-copy h1 {
    max-width: 620px;
    font-size: clamp(40px, 5.5vw, 66px);
  }
}

.premium-page {
  padding: 18px 0 34px;
}

.premium-shell {
  display: grid;
  gap: 18px;
}

.premium-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(260px, .75fr);
  gap: 18px;
  align-items: stretch;
  padding: 34px;
  border: 1px solid rgba(20, 184, 166, .24);
  border-radius: 8px;
  color: #f8fafc;
  background:
    linear-gradient(135deg, rgba(15, 23, 42, .95), rgba(20, 83, 45, .88)),
    repeating-linear-gradient(90deg, rgba(255,255,255,.06) 0 1px, transparent 1px 68px);
}

.premium-hero span,
.premium-card-category {
  color: #67e8f9;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0;
}

.premium-hero h1 {
  margin: 8px 0 10px;
  max-width: 760px;
  font-size: clamp(34px, 5vw, 58px);
  line-height: 1.08;
}

.premium-hero p {
  margin: 0;
  max-width: 720px;
  color: rgba(248, 250, 252, .72);
  font-weight: 700;
}

.premium-hero-stats {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.premium-hero-stats div,
.premium-toolbar,
.premium-products-panel,
.premium-checkout-panel,
.premium-orders-panel {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.premium-hero-stats div {
  padding: 16px;
  background: rgba(2, 6, 23, .35);
  border-color: rgba(148, 163, 184, .22);
}

.premium-hero-stats span {
  display: block;
  color: rgba(248, 250, 252, .62);
}

.premium-hero-stats strong {
  display: block;
  margin-top: 4px;
  color: #86efac;
  font-size: 24px;
}

.premium-toolbar {
  display: grid;
  grid-template-columns: minmax(260px, 360px) 1fr;
  gap: 14px;
  align-items: center;
  padding: 14px;
}

.premium-toolbar input {
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 14px;
  background: var(--soft);
  font: inherit;
}

.premium-chip-row {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 2px;
}

.premium-chip-row button {
  flex: 0 0 auto;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 9px 13px;
  background: #fff;
  color: var(--ink);
  font-weight: 800;
  cursor: pointer;
}

.premium-chip-row button.active {
  border-color: rgba(34, 197, 94, .45);
  background: #dcfce7;
  color: #166534;
}

.premium-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 18px;
  align-items: start;
}

.premium-products-panel,
.premium-checkout-panel,
.premium-orders-panel {
  padding: 18px;
}

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

.premium-section-head h2,
.premium-section-head h3 {
  margin: 0;
}

.premium-section-head p {
  margin: 4px 0 0;
  color: var(--muted);
  font-weight: 700;
}

.premium-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(205px, 1fr));
  gap: 16px;
}

.premium-card {
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  gap: 10px;
  min-height: 338px;
  padding: 0 0 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  background: #ffffff;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  box-shadow: 0 16px 28px rgba(15, 23, 42, .08);
}

.premium-card:hover,
.premium-card.active {
  border-color: rgba(34, 197, 94, .55);
  box-shadow: 0 14px 30px rgba(15, 23, 42, .12);
  transform: translateY(-1px);
}

.premium-card-img,
.premium-selected-img {
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 8px;
  background: #0f172a;
}

.premium-poster {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 174px;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(circle at 72% 18%, rgba(255,255,255,.22), transparent 24%),
    linear-gradient(135deg, #111827, #020617);
}

.premium-poster::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .38;
  background:
    linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 34px 34px;
}

.premium-poster-netflix { background: linear-gradient(135deg, #050505, #451111); }
.premium-poster-youtube { background: linear-gradient(135deg, #170606, #b91c1c); }
.premium-poster-canva { background: linear-gradient(135deg, #0f766e, #7c3aed); }
.premium-poster-disney { background: linear-gradient(135deg, #0c1e43, #0369a1); }
.premium-poster-prime { background: linear-gradient(135deg, #082f49, #0284c7); }
.premium-poster-max { background: linear-gradient(135deg, #08111f, #1d4ed8); }
.premium-poster-iqiyi { background: linear-gradient(135deg, #064e3b, #84cc16); }
.premium-poster-viu { background: linear-gradient(135deg, #713f12, #f59e0b); }
.premium-poster-trueid { background: linear-gradient(135deg, #7f1d1d, #dc2626); }
.premium-poster-chatgpt { background: linear-gradient(135deg, #064e3b, #0f766e); }

.premium-poster-kicker {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 2;
  padding: 3px 7px;
  border-radius: 999px;
  background: rgba(15, 23, 42, .65);
  color: #fff;
  font-size: 10px;
  font-weight: 900;
}

.premium-poster-icon {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 74px;
  height: 74px;
  margin-top: 14px;
  border-radius: 18px;
  background: rgba(255,255,255,.92);
  box-shadow: 0 18px 34px rgba(0,0,0,.28);
}

.premium-poster-icon img {
  width: 56px;
  height: 56px;
  object-fit: contain;
}

.premium-poster-icon .premium-img-fallback {
  border-radius: 18px;
  font-size: 18px;
}

.premium-poster strong {
  position: relative;
  z-index: 2;
  margin-top: 8px;
  max-width: calc(100% - 22px);
  overflow: hidden;
  color: #fff;
  font-size: 24px;
  font-weight: 950;
  line-height: 1;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
  text-shadow: 0 4px 18px rgba(0,0,0,.45);
}

.premium-poster small {
  position: relative;
  z-index: 2;
  margin-top: 5px;
  color: #fff;
  font-size: 16px;
  font-weight: 950;
  text-shadow: 0 3px 12px rgba(0,0,0,.45);
}

.premium-poster em {
  position: absolute;
  z-index: 2;
  bottom: 8px;
  left: 0;
  right: 0;
  color: rgba(255,255,255,.86);
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
  text-align: center;
}

.premium-card-img {
  width: 92px;
  height: 92px;
}

.premium-card-img img,
.premium-selected-img img {
  width: 100%;
  height: auto;
  object-fit: contain;
  padding: 14px;
}

.premium-img-fallback {
  display: grid;
  place-items: center;
  width: 100%;
  height: auto;
  color: #f8fafc;
  font-size: 22px;
  font-weight: 900;
  background:
    linear-gradient(135deg, rgba(34, 197, 94, .28), rgba(14, 165, 233, .24)),
    #0f172a;
}

.premium-card-body {
  display: grid;
  gap: 8px;
  align-content: start;
  padding: 0 14px;
}

.premium-card-body strong {
  line-height: 1.28;
  min-height: 42px;
  overflow: hidden;
  font-size: 15px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.premium-card-body small {
  color: var(--muted);
  font-weight: 700;
}

.premium-provider-line {
  width: fit-content;
  padding: 4px 9px;
  border-radius: 999px;
  color: #047857 !important;
  background: #dcfce7;
  font-size: 11px;
  font-weight: 900 !important;
}

.premium-card-price {
  color: #111827;
  font-weight: 900;
}

.premium-detail-line {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #4b5563 !important;
}

.premium-detail-line .icon {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.premium-card-action {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  margin: 0 14px;
  border-radius: 6px;
  background: linear-gradient(135deg, #dcfce7, #bbf7d0);
  color: #166534;
  font-weight: 900;
}

.premium-card.active .premium-card-action {
  background: linear-gradient(135deg, #22c55e, #16a34a);
  color: #fff;
}

.premium-stock-line {
  display: block;
  padding: 0 14px;
  color: #4b5563;
  font-weight: 800;
  text-align: right;
}

.premium-selected-empty {
  display: grid;
  place-items: center;
  min-height: 220px;
  color: var(--muted);
  font-weight: 800;
  text-align: center;
}

.premium-selected {
  display: grid;
  gap: 16px;
}

.premium-selected-top {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 14px;
  align-items: center;
}

.premium-selected-img {
  width: 92px;
  height: 92px;
}

.premium-selected h2 {
  margin: 4px 0;
  font-size: 21px;
}

.premium-selected p {
  margin: 0;
  color: var(--muted);
  font-weight: 700;
}

.premium-price-box {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.premium-price-box div {
  padding: 12px;
  border-radius: 8px;
  background: var(--soft);
}

.premium-price-box span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.premium-price-box strong {
  display: block;
  margin-top: 4px;
  color: #15803d;
}

.premium-price-box strong em,
.premium-mobile-price em {
  display: block;
  color: #94a3b8;
  font-size: .62em;
  font-style: normal;
  line-height: 1.15;
  text-decoration: line-through;
}

.premium-discount-box {
  border: 1px solid rgba(34, 197, 94, .22);
  background: #dcfce7 !important;
  animation: premiumDiscountPop .24s ease-out;
}

.premium-discount-box small,
.premium-coupon-result {
  color: #16a34a;
  font-weight: 900;
}

.premium-coupon-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.premium-coupon-result {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(34, 197, 94, .2);
  border-radius: 12px;
  background: #f0fdf4;
  animation: premiumDiscountPop .24s ease-out;
}

@keyframes premiumDiscountPop {
  from { transform: translateY(4px) scale(.98); opacity: .35; }
  to { transform: translateY(0) scale(1); opacity: 1; }
}

.premium-buy-form {
  display: grid;
  gap: 12px;
  margin-top: 16px;
}

.premium-demo-note {
  padding: 12px;
  border: 1px dashed rgba(20, 184, 166, .55);
  border-radius: 8px;
  background: rgba(236, 253, 245, .8);
  color: #0f766e !important;
}

.premium-order-list {
  display: grid;
  gap: 10px;
}

.premium-order-card {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.premium-order-card span,
.premium-order-card small {
  display: block;
  color: var(--muted);
  font-weight: 700;
}

.premium-order-card pre {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  margin: 8px 0 0;
  padding: 10px;
  border-radius: 8px;
  background: #0f172a;
  color: #e0f2fe;
  font: 700 12px/1.55 ui-monospace, SFMono-Regular, Consolas, monospace;
}

.premium-banner {
  min-height: 178px;
  border: 1px solid rgba(34, 197, 94, .22);
  border-radius: 8px;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(15, 23, 42, .96), rgba(20, 83, 45, .88)),
    repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 1px, transparent 1px 58px);
  background-position: center;
  background-size: cover;
}

.premium-banner.has-image {
  min-height: 0;
  aspect-ratio: var(--fit-desktop-ratio, 16 / 5);
}

.premium-banner-empty {
  display: grid;
  align-content: center;
  min-height: 178px;
  padding: 28px 32px;
  color: #f8fafc;
}

.premium-banner.has-image .premium-banner-empty {
  display: none;
}

.premium-banner-empty span {
  color: #67e8f9;
  font-size: 12px;
  font-weight: 900;
}

.premium-banner-empty strong {
  margin-top: 6px;
  font-size: clamp(30px, 5vw, 54px);
  line-height: 1.05;
}

.premium-shop-head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 18px 22px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: linear-gradient(180deg, #ffffff, #f8fafc);
}

.premium-shop-head h2 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 24px;
}

.premium-shop-head h2 > span:first-child {
  width: 4px;
  height: 22px;
  border-radius: 999px;
  background: var(--gold-dark);
}

.premium-shop-head h2 > span:last-child {
  color: var(--gold-dark);
}

.premium-shop-head p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.premium-head-actions {
  display: grid;
  grid-template-columns: auto minmax(260px, 360px);
  gap: 12px;
  align-items: center;
}

.premium-filter-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.premium-head-actions input {
  height: 42px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 14px;
  background: #fff;
  font: inherit;
}

.premium-stock-filter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 42px;
  padding: 0 14px;
  border-radius: 8px;
  white-space: nowrap;
}

.premium-stock-filter.active {
  border-color: rgba(34, 197, 94, .48);
  background: linear-gradient(135deg, #22c55e, #16a34a);
  color: #ffffff;
  box-shadow: 0 10px 24px rgba(22, 163, 74, .18);
}

.premium-stock-filter .icon {
  width: 16px;
  height: 16px;
}

.premium-mini-stats {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.premium-mini-stats span {
  display: inline-flex;
  gap: 5px;
  align-items: center;
  padding: 8px 10px;
  border: 1px solid #bbf7d0;
  border-radius: 999px;
  background: #ecfdf5;
  color: #166534;
  font-size: 12px;
  font-weight: 900;
}

.premium-chip-row {
  grid-column: 1 / -1;
}

.premium-toolbar {
  display: none;
}

.premium-grid {
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 14px;
}

.premium-card {
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 10px;
  min-height: 250px;
  padding: 12px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 12px 24px rgba(15, 23, 42, .08);
}

.premium-card:hover,
.premium-card.active {
  border-color: rgba(34, 197, 94, .42);
  box-shadow: 0 16px 30px rgba(15, 23, 42, .12);
}

.premium-card-img {
  width: 100%;
  height: 126px;
  border-radius: 8px;
  background: linear-gradient(135deg, #0f172a, #164e3a);
}

.premium-card-img img {
  width: 100%;
  height: auto;
  object-fit: contain;
  padding: 30px;
}

.premium-card-body {
  gap: 8px;
  padding: 0;
}

.premium-card-body strong {
  min-height: 40px;
  font-size: 14px;
}

.premium-card-price {
  color: #111827;
  font-size: 14px;
}

.premium-detail-line {
  color: #4b5563 !important;
}

.premium-stock-line {
  padding: 0;
  color: #4b5563;
  text-align: right;
}

body.premium-fullscreen {
  background:
    radial-gradient(circle at 0% 70%, rgba(16, 185, 129, .28), transparent 26%),
    radial-gradient(circle at 88% 16%, rgba(6, 182, 212, .22), transparent 30%),
    #06111e;
}

body.premium-fullscreen body::before {
  display: none;
}

body.premium-fullscreen .site-header {
  top: 0;
  width: 100%;
  border-width: 0 0 1px;
  border-radius: 0;
  border-color: rgba(20, 184, 166, .25);
  background: rgba(7, 18, 31, .9);
  box-shadow: none;
}

body.premium-fullscreen .site-header .shell {
  width: min(100% - 48px, 1840px);
}

body.premium-fullscreen .logo strong,
body.premium-fullscreen .main-nav a,
body.premium-fullscreen .account-pill {
  color: #e5f9f2;
}

body.premium-fullscreen .main-nav a.active,
body.premium-fullscreen .main-nav a:hover {
  color: #04131f;
  background: #16e7cf;
}

body.premium-fullscreen main {
  width: 100%;
  min-height: calc(100vh - 70px);
  margin: 0;
  padding: 0 0 56px;
  border: 0;
  border-radius: 0;
  background:
    linear-gradient(180deg, rgba(4, 19, 31, .96), rgba(5, 15, 27, .98)),
    #06111e;
  box-shadow: none;
  overflow: visible;
}

body.premium-fullscreen main > .view:not(#premiumAppsView),
body.premium-fullscreen #shopView {
  display: none !important;
}

body.premium-fullscreen #premiumAppsView {
  min-height: calc(100vh - 70px);
}

body.premium-fullscreen .premium-page {
  width: 100%;
  padding: 22px 0 60px;
  color: #e7fff8;
}

body.premium-fullscreen .premium-shell {
  width: min(100% - 48px, 1500px);
  max-width: 1500px;
  gap: 20px;
}

body.premium-fullscreen .premium-banner {
  min-height: 178px;
  border-color: rgba(20, 184, 166, .35);
  border-radius: 22px;
  background:
    linear-gradient(90deg, rgba(5, 18, 31, .84), rgba(5, 97, 83, .42)),
    radial-gradient(circle at 80% 20%, rgba(20, 184, 166, .35), transparent 24%),
    linear-gradient(135deg, #081525, #063a3b);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04), 0 24px 80px rgba(0,0,0,.2);
}

body.premium-fullscreen .premium-banner.has-image {
  min-height: 0;
  aspect-ratio: var(--fit-desktop-ratio, 16 / 5);
}

body.premium-fullscreen .premium-shop-head {
  grid-template-columns: 1fr auto;
  padding: 18px 24px;
  border-color: rgba(20, 184, 166, .22);
  background: linear-gradient(90deg, rgba(7, 18, 31, .92), rgba(5, 68, 82, .76));
  color: #effffb;
  box-shadow: 0 18px 55px rgba(0,0,0,.2);
}

body.premium-fullscreen .premium-shop-head h2 {
  color: #f8fffe;
  font-size: 25px;
}

body.premium-fullscreen .premium-shop-head h2 > span:first-child {
  background: #11f5c9;
}

body.premium-fullscreen .premium-shop-head h2 > span:last-child {
  color: #22f5ad;
}

body.premium-fullscreen .premium-shop-head p {
  color: rgba(231,255,248,.62);
}

body.premium-fullscreen .premium-head-actions {
  grid-template-columns: auto minmax(240px, 320px);
}

body.premium-fullscreen .premium-head-actions input {
  border-color: rgba(20, 184, 166, .5);
  background: rgba(3, 12, 22, .88);
  color: #e7fff8;
}

body.premium-fullscreen .premium-head-actions input::placeholder {
  color: rgba(231,255,248,.45);
}

body.premium-fullscreen .premium-mini-stats span {
  border-color: rgba(17, 245, 201, .28);
  background: rgba(17, 245, 201, .1);
  color: #abfff0;
}

body.premium-fullscreen .premium-chip-row button {
  border-color: rgba(20, 184, 166, .32);
  background: rgba(9, 25, 40, .92);
  color: #b7fff2;
}

body.premium-fullscreen .premium-chip-row button.active {
  border-color: transparent;
  background: #16e7cf;
  color: #04131f;
}

body.premium-fullscreen .premium-layout {
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 20px;
}

body.premium-fullscreen .premium-products-panel,
body.premium-fullscreen .premium-checkout-panel,
body.premium-fullscreen .premium-orders-panel {
  border-color: rgba(20, 184, 166, .18);
  background: rgba(7, 18, 31, .78);
  color: #e7fff8;
  box-shadow: 0 20px 65px rgba(0,0,0,.18);
}

body.premium-fullscreen .premium-products-panel {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

body.premium-fullscreen .premium-section-head {
  padding: 0 2px;
}

body.premium-fullscreen .premium-section-head h2,
body.premium-fullscreen .premium-section-head h3 {
  color: #f8fffe;
}

body.premium-fullscreen .premium-section-head p {
  color: rgba(231,255,248,.56);
}

body.premium-fullscreen .premium-grid {
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 16px;
}

body.premium-fullscreen .premium-card {
  min-height: 470px;
  padding: 0 0 20px;
  border-color: rgba(20, 184, 166, .18);
  border-radius: 22px;
  background: #071522;
  color: #e7fff8;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.03), 0 18px 45px rgba(0,0,0,.22);
  transform: translateY(0) scale(1);
  transition:
    border-color .34s ease,
    box-shadow .34s ease,
    transform .34s cubic-bezier(.2, .8, .2, 1),
    filter .34s ease;
}

body.premium-fullscreen .premium-card:hover,
body.premium-fullscreen .premium-card.active {
  border-color: rgba(17, 245, 201, .52);
  box-shadow: 0 26px 62px rgba(0,0,0,.34);
  transform: translateY(-3px) scale(1.01);
}

body.premium-fullscreen .premium-card.active {
  animation: premium-card-soft-select .46s cubic-bezier(.2, .8, .2, 1);
}

body.premium-fullscreen .premium-card.active .premium-card-img {
  animation: premium-card-image-glow .58s ease;
}

body.premium-fullscreen .premium-card-img {
  height: 238px;
  border-radius: 22px 22px 0 0;
  background:
    radial-gradient(circle at 70% 20%, rgba(17,245,201,.18), transparent 24%),
    linear-gradient(135deg, #13293b, #233748);
}

body.premium-fullscreen .premium-card-img img {
  padding: 34px;
  filter: drop-shadow(0 22px 34px rgba(0,0,0,.4));
}

body.premium-fullscreen .premium-img-fallback {
  color: #e7fff8;
  font-size: 54px;
  background:
    radial-gradient(circle at 70% 20%, rgba(17,245,201,.22), transparent 26%),
    linear-gradient(135deg, #17364c, #092337);
}

body.premium-fullscreen .premium-card-body {
  gap: 10px;
  padding: 0 18px;
}

body.premium-fullscreen .premium-card-body strong {
  min-height: 54px;
  color: #f3fffb;
  font-size: 18px;
}

body.premium-fullscreen .premium-card-price {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  width: fit-content;
  padding: 7px 11px;
  border: 1px solid rgba(126, 226, 58, .18);
  border-radius: 999px;
  background: rgba(126, 226, 58, .10);
  color: var(--gold);
  font-size: 14px;
  font-weight: 900;
}

body.premium-fullscreen .premium-card-price small {
  color: rgba(244, 255, 247, .68);
  font-size: 12px;
  font-weight: 800;
}

body.premium-fullscreen .premium-card-price b {
  color: var(--gold);
  font-size: 21px;
  font-weight: 950;
}

body.premium-fullscreen .premium-card-price em {
  color: #bbf7d0;
  font-size: 13px;
  font-style: normal;
  font-weight: 850;
}

body.premium-fullscreen .premium-card::after {
  content: "ซื้อเลย";
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  margin: 8px 18px 0;
  border-radius: 14px;
  background: linear-gradient(135deg, #20f0d0, #15d99d);
  color: #04131f;
  font-weight: 950;
  box-shadow: 0 14px 28px rgba(34, 197, 94, .18);
}

body.premium-fullscreen .premium-card.active::after {
  content: "เลือกแล้ว";
  background: linear-gradient(135deg, #86efac, #22c55e);
}

body.premium-fullscreen {
  background:
    radial-gradient(circle at 0% 72%, rgba(126, 226, 58, .20), transparent 28%),
    radial-gradient(circle at 92% 8%, rgba(34, 197, 94, .18), transparent 30%),
    linear-gradient(180deg, #07130d, #0b1711);
}

body.premium-fullscreen .site-header {
  border-color: rgba(126, 226, 58, .22);
  background: rgba(8, 20, 13, .92);
}

body.premium-fullscreen .main-nav a.active,
body.premium-fullscreen .main-nav a:hover {
  background: linear-gradient(135deg, var(--gold), var(--gold-dark));
  color: #06130b;
}

body.premium-fullscreen main {
  background:
    radial-gradient(circle at 5% 82%, rgba(22, 163, 74, .18), transparent 28%),
    linear-gradient(180deg, #07130d, #0b1711);
}

body.premium-fullscreen .premium-banner {
  border-color: rgba(126, 226, 58, .28);
  background:
    linear-gradient(90deg, rgba(7, 19, 13, .88), rgba(18, 80, 36, .44)),
    radial-gradient(circle at 78% 18%, rgba(126, 226, 58, .22), transparent 26%),
    linear-gradient(135deg, #07130d, #154124);
}

body.premium-fullscreen .premium-shop-head {
  border-color: rgba(126, 226, 58, .20);
  background: linear-gradient(90deg, rgba(8, 22, 14, .94), rgba(18, 65, 31, .82));
}

body.premium-fullscreen .premium-shop-head h2 > span:first-child,
body.premium-fullscreen .premium-chip-row button.active,
body.premium-fullscreen .premium-card::after {
  background: linear-gradient(135deg, var(--gold), var(--gold-dark));
  color: #06130b;
}

body.premium-fullscreen .premium-shop-head h2 > span:last-child,
body.premium-fullscreen .premium-card-price,
body.premium-fullscreen .premium-hero-stats strong {
  color: var(--gold);
}

body.premium-fullscreen .premium-head-actions input {
  border-color: rgba(126, 226, 58, .30);
  background: rgba(6, 19, 11, .92);
  color: #f3fff6;
}

body.premium-fullscreen .premium-mini-stats span,
body.premium-fullscreen .premium-chip-row button {
  border-color: rgba(126, 226, 58, .24);
  background: rgba(126, 226, 58, .08);
  color: #dfffd6;
}

body.premium-fullscreen .premium-card {
  border-color: rgba(126, 226, 58, .16);
  background: linear-gradient(180deg, #102519, #0b1811);
  color: #f4fff7;
}

body.premium-fullscreen .premium-card:hover,
body.premium-fullscreen .premium-card.active {
  border-color: rgba(126, 226, 58, .50);
  box-shadow: 0 28px 65px rgba(22, 163, 74, .14), 0 22px 56px rgba(0,0,0,.32);
}

body.premium-fullscreen .premium-card-img {
  background:
    radial-gradient(circle at 72% 20%, rgba(126, 226, 58, .14), transparent 26%),
    linear-gradient(135deg, #173524, #203828);
}

body.premium-fullscreen .premium-card-body strong {
  color: #f4fff7;
}

body.premium-fullscreen .premium-detail-line,
body.premium-fullscreen .premium-stock-line {
  color: rgba(244, 255, 247, .68) !important;
}

body.premium-fullscreen .premium-detail-line {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  width: fit-content;
  padding: 4px 0;
}

body.premium-fullscreen .premium-card-bottom {
  display: flex;
  justify-content: flex-end;
  padding: 0 24px;
}

body.premium-fullscreen .premium-stock-line {
  display: inline-flex;
  gap: 5px;
  align-items: center;
  width: fit-content;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .05);
  font-size: 12px;
  font-weight: 850;
  text-align: right;
}

body.premium-fullscreen .premium-stock-line b {
  color: #bbf7d0;
}

body.premium-fullscreen .premium-card.is-out-of-stock {
  border-color: rgba(148, 163, 184, .36);
  background: linear-gradient(180deg, #f4f6f5, #e8edeb);
  color: #647067;
  filter: grayscale(1);
  opacity: .72;
  box-shadow: none;
}

body.premium-fullscreen .premium-card.is-out-of-stock:hover,
body.premium-fullscreen .premium-card.is-out-of-stock.active {
  border-color: rgba(100, 116, 139, .48);
  box-shadow: 0 10px 24px rgba(15, 23, 42, .08);
}

body.premium-fullscreen .premium-card.is-out-of-stock .premium-card-img {
  background: linear-gradient(135deg, #e5e7eb, #cbd5e1);
}

body.premium-fullscreen .premium-card.is-out-of-stock .premium-card-img img,
body.premium-fullscreen .premium-selected.is-out-of-stock .premium-selected-img img,
body.premium-fullscreen .premium-selected.is-out-of-stock .premium-mobile-hero img {
  filter: grayscale(1) contrast(.86);
  opacity: .56;
}

body.premium-fullscreen .premium-card.is-out-of-stock .premium-card-price,
body.premium-fullscreen .premium-card.is-out-of-stock .premium-stock-line,
body.premium-fullscreen .premium-selected.is-out-of-stock .premium-price-box div {
  border-color: rgba(148, 163, 184, .34);
  background: #edf1ef;
  color: #64748b !important;
}

body.premium-fullscreen .premium-card.is-out-of-stock .premium-card-price b,
body.premium-fullscreen .premium-card.is-out-of-stock .premium-stock-line b,
body.premium-fullscreen .premium-selected.is-out-of-stock .premium-price-box strong,
body.premium-fullscreen .premium-selected.is-out-of-stock .premium-mobile-price {
  color: #64748b !important;
}

.premium-soldout-badge {
  display: inline-flex;
  align-items: center;
  width: max-content;
  min-height: 24px;
  padding: 4px 10px;
  border: 1px solid rgba(100, 116, 139, .24);
  border-radius: 999px;
  background: #e5e7eb;
  color: #475569 !important;
  font-size: 12px;
  font-weight: 900;
}

body.premium-fullscreen .premium-selected.is-out-of-stock {
  border-color: rgba(148, 163, 184, .36);
  background: linear-gradient(180deg, rgba(248, 250, 252, .96), rgba(226, 232, 240, .78));
}

body.premium-fullscreen .premium-buy-form .gold-btn:disabled,
.premium-selected-buy:disabled {
  cursor: not-allowed;
  background:#cbd5e1 !important;
  color: #475569 !important;
  box-shadow: none !important;
  opacity: .9;
}

body.premium-fullscreen .premium-checkout-panel,
body.premium-fullscreen .premium-orders-panel {
  border-color: rgba(126, 226, 58, .18);
  background: linear-gradient(180deg, rgba(16, 37, 25, .96), rgba(9, 22, 15, .96));
}

body.premium-fullscreen .premium-price-box div,
body.premium-fullscreen .premium-demo-note {
  border-color: rgba(126, 226, 58, .22);
  background: rgba(126, 226, 58, .10);
}

body.premium-fullscreen .premium-buy-form .gold-btn {
  background: linear-gradient(135deg, var(--gold), var(--gold-dark));
  color: #06130b;
}

body.premium-fullscreen .premium-selected {
  gap: 18px;
}

body.premium-fullscreen .premium-selected-top {
  grid-template-columns: 82px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

body.premium-fullscreen .premium-selected-img {
  width: 82px;
  height: 82px;
  border-radius: 10px;
  background: rgba(126, 226, 58, .08);
}

body.premium-fullscreen .premium-selected-img img {
  padding: 14px;
}

body.premium-fullscreen .premium-selected-top span {
  display: inline-block;
  margin-bottom: 6px;
  color: #a7f3d0;
  font-size: 13px;
  font-weight: 750;
}

body.premium-fullscreen .premium-selected h2 {
  margin: 0 0 8px;
  color: #f4fff7;
  font-size: 20px;
  font-weight: 850;
  line-height: 1.34;
}

body.premium-fullscreen .premium-selected p {
  color: rgba(244, 255, 247, .62);
  font-size: 14px;
  line-height: 1.55;
}

body.premium-fullscreen .premium-price-box {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

body.premium-fullscreen .premium-price-box div {
  padding: 12px;
  border-radius: 10px;
}

body.premium-fullscreen .premium-price-box span {
  font-size: 11px;
}

body.premium-fullscreen .premium-price-box strong {
  font-size: 16px;
}

body.premium-fullscreen .premium-demo-note {
  padding: 12px;
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.5;
}

body.premium-fullscreen .premium-buy-form {
  gap: 12px;
}

body.premium-fullscreen .premium-buy-form label {
  font-size: 13px;
  font-weight: 800;
}

body.premium-fullscreen .premium-buy-form textarea {
  min-height: 96px;
  border-radius: 10px;
  font-size: 13px;
}

body.premium-fullscreen .premium-buy-form .gold-btn {
  min-height: 46px;
  border-radius: 12px;
  font-size: 15px;
}

body.premium-fullscreen .premium-detail-line {
  color: rgba(231,255,248,.62) !important;
}

body.premium-fullscreen .premium-stock-line {
  padding: 7px 10px;
  color: rgba(231,255,248,.68);
}

body.premium-fullscreen .premium-buy-form label,
body.premium-fullscreen .premium-selected p,
body.premium-fullscreen .premium-price-box span,
body.premium-fullscreen .premium-order-card span,
body.premium-fullscreen .premium-order-card small {
  color: rgba(231,255,248,.68);
}

body.premium-fullscreen .premium-checkout-panel {
  position: sticky;
  top: 92px;
  padding: 22px;
  border-radius: 10px;
}

body.premium-fullscreen .premium-price-box div {
  background: rgba(17,245,201,.08);
}

body.premium-fullscreen {
  background:
    radial-gradient(circle at 0% 78%, rgba(187, 247, 208, .52), transparent 30%),
    radial-gradient(circle at 94% 8%, rgba(220, 252, 231, .74), transparent 34%),
    linear-gradient(180deg, #f6fff8, #ecfff2);
  color: #102519;
}

body.premium-fullscreen .site-header {
  border-color: #d8f8df;
  background: rgba(255, 255, 255, .88);
  box-shadow: 0 10px 34px rgba(22, 163, 74, .08);
}

body.premium-fullscreen .logo strong,
body.premium-fullscreen .main-nav a,
body.premium-fullscreen .account-pill {
  color: #102519;
}

body.premium-fullscreen .main-nav a.active,
body.premium-fullscreen .main-nav a:hover {
  background: linear-gradient(135deg, #86efac, #22c55e);
  color: #052e16;
}

body.premium-fullscreen main {
  background:
    radial-gradient(circle at 4% 82%, rgba(187, 247, 208, .45), transparent 28%),
    linear-gradient(180deg, #f7fff9, #effff4);
}

body.premium-fullscreen .premium-banner {
  border-color: #bbf7d0;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, .78), rgba(220, 252, 231, .72)),
    radial-gradient(circle at 78% 18%, rgba(126, 226, 58, .20), transparent 26%),
    linear-gradient(135deg, #ffffff, #dcfce7);
  box-shadow: 0 18px 45px rgba(22, 163, 74, .10);
}

body.premium-fullscreen .premium-banner-empty {
  color: #102519;
}

body.premium-fullscreen .premium-banner-empty span {
  color: #16a34a;
}

body.premium-fullscreen .premium-shop-head,
body.premium-fullscreen .premium-products-panel,
body.premium-fullscreen .premium-checkout-panel,
body.premium-fullscreen .premium-orders-panel {
  border-color: #bbf7d0;
  background: rgba(255, 255, 255, .86);
  color: #102519;
  box-shadow: 0 18px 48px rgba(22, 163, 74, .09);
}

body.premium-fullscreen .premium-products-panel {
  background: transparent;
  box-shadow: none;
}

body.premium-fullscreen .premium-shop-head h2,
body.premium-fullscreen .premium-section-head h2,
body.premium-fullscreen .premium-section-head h3,
body.premium-fullscreen .premium-card-body strong,
body.premium-fullscreen .premium-selected h2 {
  color: #102519;
}

body.premium-fullscreen .premium-shop-head p,
body.premium-fullscreen .premium-section-head p,
body.premium-fullscreen .premium-detail-line,
body.premium-fullscreen .premium-stock-line,
body.premium-fullscreen .premium-selected p,
body.premium-fullscreen .premium-buy-form label,
body.premium-fullscreen .premium-order-card span,
body.premium-fullscreen .premium-order-card small {
  color: #5f7467 !important;
}

body.premium-fullscreen .premium-head-actions input {
  border-color: #bbf7d0;
  background: #ffffff;
  color: #102519;
}

body.premium-fullscreen .premium-head-actions input::placeholder {
  color: #8fa196;
}

body.premium-fullscreen .premium-mini-stats span,
body.premium-fullscreen .premium-chip-row button {
  border-color: #bbf7d0;
  background: #ffffff;
  color: #166534;
}

body.premium-fullscreen .premium-chip-row button.active {
  background:#86efac;
  color: #052e16;
}

body.premium-fullscreen .premium-card {
  border-color: #bbf7d0;
  background: #ffffff;
  color: #102519;
  box-shadow: 0 16px 34px rgba(22, 163, 74, .10);
}

body.premium-fullscreen .premium-card:hover,
body.premium-fullscreen .premium-card.active {
  border-color: #22c55e;
  box-shadow: 0 24px 54px rgba(22, 163, 74, .16);
}

body.premium-fullscreen .premium-card-img {
  background:
    radial-gradient(circle at 72% 20%, rgba(126, 226, 58, .18), transparent 26%),
    linear-gradient(135deg, #f0fdf4, #dcfce7);
}

body.premium-fullscreen .premium-card-img img {
  filter: drop-shadow(0 18px 26px rgba(15, 23, 42, .16));
}

body.premium-fullscreen .premium-card-price {
  border-color: #bbf7d0;
  background: #ecfff2;
}

body.premium-fullscreen .premium-card-price small,
body.premium-fullscreen .premium-card-price em {
  color: #166534;
}

body.premium-fullscreen .premium-card-price b,
body.premium-fullscreen .premium-shop-head h2 > span:last-child {
  color: #16a34a;
}

body.premium-fullscreen .premium-stock-line {
  background: #f0fdf4;
}

body.premium-fullscreen .premium-stock-line b {
  color: #16a34a;
}

body.premium-fullscreen .premium-card::after,
body.premium-fullscreen .premium-buy-form .gold-btn {
  background:#86efac;
  color: #052e16;
  box-shadow: 0 14px 28px rgba(22, 163, 74, .20);
}

body.premium-fullscreen .premium-price-box div,
body.premium-fullscreen .premium-demo-note {
  border-color: #bbf7d0;
  background: #f0fdf4;
}

body.premium-fullscreen .premium-price-box strong {
  color: #16a34a;
}

body.premium-fullscreen .premium-selected-img {
  background: #f0fdf4;
}

body.premium-fullscreen .premium-shop-head {
  position: relative;
  overflow: hidden;
  padding: 22px 24px 20px;
  border: 1px solid rgba(34, 197, 94, .22);
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .96), rgba(240, 253, 244, .92)),
    radial-gradient(circle at 88% 0%, rgba(134, 239, 172, .28), transparent 28%);
  box-shadow: 0 20px 50px rgba(22, 163, 74, .10);
}

body.premium-fullscreen .premium-shop-head::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(22, 163, 74, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(22, 163, 74, .045) 1px, transparent 1px);
  background-size: 26px 26px;
  mask-image: linear-gradient(90deg, rgba(0,0,0,.55), transparent 68%);
}

body.premium-fullscreen .premium-shop-head > * {
  position: relative;
  z-index: 1;
}

body.premium-fullscreen .premium-shop-head h2 {
  gap: 10px;
  font-size: 28px;
  line-height: 1.1;
}

body.premium-fullscreen .premium-shop-head h2 > span:first-child {
  width: 5px;
  height: 30px;
  box-shadow: 0 0 0 5px rgba(34, 197, 94, .10);
}

body.premium-fullscreen .premium-shop-head p {
  margin-top: 8px;
  color: #64756a !important;
}

body.premium-fullscreen .premium-head-actions {
  align-self: start;
  grid-template-columns: auto minmax(240px, 320px);
  gap: 14px;
}

body.premium-fullscreen .premium-mini-stats {
  gap: 8px;
}

body.premium-fullscreen .premium-mini-stats span {
  min-height: 42px;
  padding: 9px 12px;
  border-color: rgba(34, 197, 94, .24);
  background: rgba(255, 255, 255, .82);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.75), 0 10px 24px rgba(22, 163, 74, .08);
}

body.premium-fullscreen .premium-mini-stats strong {
  color: #16a34a;
}

body.premium-fullscreen .premium-head-actions input {
  min-height: 46px;
  border-color: rgba(34, 197, 94, .28);
  border-radius: 14px;
  background:
    linear-gradient(180deg, #ffffff, #f8fffa);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 10px 24px rgba(22, 163, 74, .08);
}

body.premium-fullscreen .premium-head-actions input:focus {
  outline: none;
  border-color: #22c55e;
  box-shadow: 0 0 0 4px rgba(34, 197, 94, .12), 0 10px 24px rgba(22, 163, 74, .08);
}

body.premium-fullscreen .premium-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  max-height: 112px;
  overflow: auto;
  padding: 10px 0 0;
  scrollbar-width: thin;
  scrollbar-color: rgba(34, 197, 94, .35) transparent;
}

body.premium-fullscreen .premium-chip-row::-webkit-scrollbar {
  height: 6px;
  width: 6px;
}

body.premium-fullscreen .premium-chip-row::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(34, 197, 94, .28);
}

body.premium-fullscreen .premium-chip-row button {
  min-height: 40px;
  padding: 9px 15px;
  border-color: rgba(34, 197, 94, .26);
  border-radius: 999px;
  background: rgba(255, 255, 255, .86);
  color: #166534;
  box-shadow: 0 8px 18px rgba(22, 163, 74, .07);
}

body.premium-fullscreen .premium-chip-row button:hover {
  transform: translateY(-1px);
  border-color: rgba(34, 197, 94, .48);
  background: #f0fdf4;
}

body.premium-fullscreen .premium-chip-row button.active {
  background:#86efac;
  color: #052e16;
  box-shadow: 0 14px 26px rgba(34, 197, 94, .20);
}

body.premium-fullscreen .premium-order-card {
  border-color: rgba(20, 184, 166, .18);
  background: rgba(8, 22, 36, .8);
}

.premium-selected-bar {
  display: none;
}

.game-menu-page {
  margin-top: -24px;
  min-height: 780px;
  padding: 32px 0 54px;
  background: #ffffff;
  color: #0f172a;
}

.game-menu-page .game-topup-shell {
  width: min(1536px, calc(100vw - 32px));
  gap: 28px;
}

.game-menu-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 430px);
  gap: 24px;
  align-items: start;
}

.game-menu-head h1 {
  margin: 0 0 22px;
  font-size: 28px;
  line-height: 1.2;
  font-weight: 850;
}

.game-menu-head h2 {
  margin: 0 0 18px;
  font-size: 24px;
  line-height: 1.35;
  font-weight: 700;
}

.game-menu-head p {
  max-width: 1280px;
  margin: 0;
  color: #334155;
  font-size: 15px;
  line-height: 1.8;
}

.game-menu-search {
  display: grid;
  gap: 12px;
  justify-items: stretch;
}

.game-menu-page .game-catalog-search {
  width: 100%;
  height: 44px;
  border: 1px solid #d9e2ec;
  border-radius: 8px;
  background: #ffffff;
  color: #0f172a;
}

.game-menu-page .game-catalog-search::placeholder {
  color: #94a3b8;
}

.game-menu-stats {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}

.game-menu-stats span {
  display: inline-flex;
  gap: 5px;
  align-items: center;
  padding: 8px 11px;
  border: 1px solid #bbf7d0;
  border-radius: 999px;
  background: #f0fdf4;
  color: #166534;
  font-size: 12px;
  font-weight: 850;
}

.game-menu-catalog {
  padding-top: 18px;
}

.game-menu-page .game-card-grid {
  max-height: none;
  overflow: visible;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
  gap: 22px 18px;
  padding: 0;
}

.game-menu-page .game-pick-card {
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px;
  border: 1px solid #f1f5f9;
  border-radius: 20px;
  background: #ffffff;
  color: #0f172a;
  box-shadow: 0 4px 20px rgba(0,0,0,0.03);
  text-align: center;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  width: 100%;
}

.game-menu-page .game-pick-card:hover,
.game-menu-page .game-pick-card.active {
  transform: translateY(-4px);
  background: #ffffff;
  box-shadow: 0 16px 32px rgba(68, 197, 56, 0.15);
  border-color: #bbf7d0;
}

.game-menu-page .game-pick-media {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 18px;
  overflow: hidden;
  background: #f8fafc;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.04);
  margin-bottom: 12px;
}

.game-menu-page .game-pick-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.game-menu-page .game-pick-card:hover .game-pick-media img {
  transform: scale(1.08);
}

.game-menu-page .game-card-cover::before,
.game-menu-page .game-card-cover::after {
  display: none !important;
}

.game-menu-page .game-card-cover em {
  display: none !important;
}

.game-menu-page .game-pick-card strong {
  max-width: 100%;
  color: #1e293b;
  font-size: 13.5px;
  font-weight: 800;
  line-height: 1.3;
  padding: 0;
  margin-bottom: 4px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}

.game-menu-page .game-pick-card small {
  display: block;
  color: #94a3b8;
  font-size: 11px;
  font-weight: 600;
  margin-bottom: 12px;
}

.game-menu-page .game-pick-btn {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 100%;
  padding: 8px;
  border-radius: 999px;
  background: #4cc73b;
  color: #ffffff;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.2px;
  transition: background 0.2s;
}

.game-menu-page .game-pick-btn svg {
  width: 14px;
  height: 14px;
  stroke-width: 2.5;
}

.game-menu-page .game-pick-card:hover .game-pick-btn {
  background: #40b031;
}

.game-menu-page .game-pick-card small {
  display: none;
}

.game-menu-page .game-package-section.hidden {
  display: none;
}

.game-menu-page .game-package-section {
  display: grid;
  gap: 14px;
  margin-top: 12px;
}

#gameTopupView.package-mode .game-menu-catalog {
  display: none;
}

#gameTopupView.package-mode .game-menu-head {
  display: none;
}

#gameTopupView.package-mode .topup-orders-panel {
  display: none;
}

#gameTopupView.package-mode .game-package-section {
  min-height: calc(100vh - 110px);
  align-content: start;
}

.game-menu-page .selected-game-preview {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  align-items: center;
  padding: 18px;
  border: 1px solid #bbf7d0;
  border-radius: 12px;
  background: linear-gradient(135deg, #f0fdf4, #ecfeff);
  color: #0f172a;
}

.game-menu-page .selected-game-card {
  position: relative;
  width: 62px;
  height: 88px;
  border-radius: 12px;
  background: #07110c;
  box-shadow: 0 12px 24px rgba(15, 23, 42, .12);
}

.game-menu-page .selected-game-card::before {
  top: 3px;
  width: 24px;
  height: 9px;
  background: url("data:image/svg+xml,%3Csvg width='48' height='20' viewBox='0 0 48 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 10H17.2C18 4.2 20.6 0 24 0C27.4 0 30 4.2 30.8 10H44C46.2 10 48 11.8 48 14V15C48 17.76 45.76 20 43 20H5C2.24 20 0 17.76 0 15V14C0 11.8 1.8 10 4 10Z' fill='white'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .14));
}

.game-menu-page .selected-game-card em {
  left: 6px;
  right: 6px;
  bottom: 7px;
  padding: 4px 5px;
  font-size: 8px;
}

.game-menu-page .game-package-layout {
  grid-template-columns: minmax(320px, 390px) minmax(0, 1fr);
  align-items: start;
}

.game-menu-page .game-topup-panel {
  border-color: #dce7ef;
  background: #ffffff;
  color: #0f172a;
  box-shadow: 0 14px 36px rgba(15, 23, 42, .08);
}

.game-menu-page .pack-list-panel {
  min-height: calc(100vh - 230px);
  padding: 18px;
}

.game-menu-page .pack-card-grid {
  max-height: calc(100vh - 300px);
  grid-template-columns: 1fr;
  gap: 0;
  overflow: auto;
  border: 1px solid #d7e2ef;
  border-radius: 18px;
  background: #f8fafc;
}

.game-menu-page .pack-list-header,
.game-menu-page .pack-pick-card {
  display: grid;
  grid-template-columns: 58px minmax(180px, 1fr) minmax(180px, .85fr) 120px 86px;
  gap: 12px;
  align-items: center;
}

.game-menu-page .pack-list-header {
  position: sticky;
  top: 0;
  z-index: 5;
  padding: 10px 16px;
  border-bottom: 1px solid #d7e2ef;
  background: #ecfdf5;
  color: #064e3b;
  font-size: 12px;
  font-weight: 950;
}

.game-menu-page .pack-pick-card {
  min-height: 0;
  padding: 10px 16px;
  border: 0;
  border-bottom: 1px solid #e2e8f0;
  border-radius: 0;
  background: #ffffff;
  text-align: left;
}

.game-menu-page .pack-pick-card:last-child {
  border-bottom: 0;
}

.game-menu-page .pack-pick-media {
  position: relative;
  isolation: isolate;
  width: 48px;
  height: 48px;
  justify-self: start;
  display: grid;
  place-items: center;
  border: 1px solid #d7e2ef;
  border-radius: 8px;
  overflow: hidden;
  background: linear-gradient(145deg, #ecfeff, #e0f2fe 55%, #f0fdf4);
  box-shadow: none;
}

.game-menu-page .pack-pick-media img {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.game-menu-page .pack-real-art {
  background: #07110c;
  border-color: rgba(34, 197, 94, .35);
  box-shadow: 0 16px 32px rgba(15, 23, 42, .18);
}

.game-menu-page .pack-real-art::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(180deg, rgba(2, 6, 23, .08), transparent 34%),
    linear-gradient(0deg, rgba(2, 6, 23, .86), transparent 48%);
  pointer-events: none;
}

.game-menu-page .pack-pick-media i {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  color: #0284c7;
}

.game-menu-page .pack-pick-media i svg {
  width: 30px;
  height: 30px;
  stroke: currentColor;
  stroke-width: 1.9;
  fill: none;
}

.game-menu-page .pack-token-coupon {
  background: linear-gradient(145deg, #ecfdf5, #d1fae5);
  border-color: #86efac;
}

.game-menu-page .pack-token-coupon i { color: #047857; }

.game-menu-page .pack-token-coin {
  background: linear-gradient(145deg, #fff7ed, #fef3c7);
  border-color: #fde68a;
}

.game-menu-page .pack-token-coin i { color: #b45309; }

.game-menu-page .pack-token-card,
.game-menu-page .pack-token-box {
  background: linear-gradient(145deg, #f8fafc, #e2e8f0);
  border-color: #cbd5e1;
}

.game-menu-page .pack-token-card i,
.game-menu-page .pack-token-box i { color: #0f766e; }

.game-menu-page .pack-pick-media em {
  display: none;
}

.game-menu-page .pack-real-art em {
  background: rgba(240,253,244,.92);
  color: #052e16;
}

.game-menu-page .pack-pick-card > span:not(.pack-pick-media) {
  min-width: 0;
  text-align: left;
}

.game-menu-page .pack-info {
  grid-column: 2;
  min-width: 0;
}

.game-menu-page .pack-pick-card .pack-pick-name {
  display: block;
  color: #0f172a;
  font-size: 14px;
  font-weight: 950;
  line-height: 1.25;
}

.game-menu-page .pack-pick-card small {
  display: block;
  margin-top: 3px;
  color: #64748b;
  font-size: 11px;
}

.game-menu-page .pack-sku {
  grid-column: 3;
  min-width: 0;
  overflow: hidden;
  color: #2563eb;
  font-size: 11px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.game-menu-page .pack-pick-card .pack-price {
  grid-column: 4;
  justify-self: end;
  padding: 8px 12px;
  border-radius: 999px;
  background: #dcfce7;
  color: #15803d;
  font-size: 15px;
  line-height: 1;
  white-space: nowrap;
}

.game-menu-page .pack-action {
  grid-column: 5;
  justify-self: end;
  padding: 8px 13px;
  border: 1px solid #bbf7d0;
  border-radius: 12px;
  background: #f0fdf4;
  color: #047857;
  font-size: 12px;
  font-weight: 950;
}

.game-menu-page .pack-pick-card:hover,
.game-menu-page .pack-pick-card.active {
  border-color: #16a34a;
  background: #f0fdf4;
}

.game-menu-page .pack-pick-card.active .pack-action {
  background: #22c55e;
  color: #052e16;
}

.game-menu-page .game-topup-form {
  position: sticky;
  top: 96px;
  padding: 18px;
}

.game-menu-page .topup-orders-panel {
  margin-top: 8px;
}

@media (max-width: 980px) {
  .header-inner {
    height: auto;
    padding: 12px 0;
    flex-wrap: wrap;
  }

  .main-nav {
    order: 3;
    width: 100%;
    justify-content: flex-start;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: none;
  }

  .main-nav::-webkit-scrollbar {
    display: none;
  }

  .stats-grid,
  .profile-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .category-grid,
  .two-col,
  .footer-grid,
  .contact-panel,
  .admin-grid {
    grid-template-columns: 1fr;
  }

  .admin-shell {
    width: min(100vw - 24px, 1120px);
  }

  .product-admin-grid {
    grid-template-columns: 1fr;
  }

  .product-create-card {
    position: static;
  }

  .product-manager-panel {
    order: -1;
  }

  .product-manager-head,
  .admin-product-main,
  .recommended-admin-main {
    grid-template-columns: 1fr;
  }

  .product-manager-stats,
  .admin-product-metrics,
  .recommended-admin-meta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .product-card-list,
  .recommended-card-list {
    max-height: none;
    overflow: visible;
    padding-right: 0;
  }

  .admin-product-main {
    align-items: start;
  }

  .admin-product-img {
    width: 92px;
    height: 92px;
  }

  .product-edit-grid {
    grid-template-columns: 1fr;
  }

  .product-edit-wide {
    grid-column: auto;
  }

  .admin-edit-modal {
    padding: 14px;
  }

  .admin-edit-card {
    width: calc(100vw - 28px);
    max-height: 82vh;
    padding: 18px;
    border-radius: 20px;
  }

  .admin-edit-head {
    padding-right: 48px;
  }

  .wallet-page {
    max-width: 760px;
  }

  .wallet-layout {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .game-topup-grid {
    grid-template-columns: 1fr;
  }

  .game-topup-hero {
    grid-template-columns: 1fr;
  }

  .premium-hero,
  .premium-toolbar,
  .premium-layout,
  .premium-shop-head,
  .premium-head-actions {
    grid-template-columns: 1fr;
  }

  .premium-head-actions,
  .premium-mini-stats {
    justify-content: stretch;
  }

  body.premium-fullscreen .premium-layout,
  body.premium-fullscreen .premium-shop-head,
  body.premium-fullscreen .premium-head-actions {
    grid-template-columns: 1fr;
  }

  body.premium-fullscreen .premium-grid {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  }

  body.premium-fullscreen .premium-card {
    min-height: 440px;
  }

  body.premium-fullscreen .premium-card-img {
    height: 220px;
  }

  .premium-checkout-panel {
    position: static;
  }

  .settings-number-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .wallet-form-panel,
  .wallet-history-panel {
    padding: 22px;
  }

  .quick-amounts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .product-detail-card,
  .auth-card {
    width: min(760px, calc(100vw - 28px));
    grid-template-columns: 1fr;
    max-height: calc(100vh - 28px);
    overflow: auto;
  }

  .auth-visual {
    min-height: 320px;
  }

  .product-detail-media,
  .product-detail-media img {
    min-height: 330px;
    height: 330px;
  }

  .profile-hero {
    grid-template-columns: auto 1fr;
  }

  .profile-hero #logoutButton {
    grid-column: 1 / -1;
    width: fit-content;
  }
}

@media (min-width: 761px) and (max-width: 980px) {
  .site-header,
  body.premium-fullscreen .site-header {
    border-bottom-color: rgba(34, 197, 94, .16);
    background: rgba(255, 255, 255, .94);
    backdrop-filter: blur(12px);
  }

  .header-inner,
  body.premium-fullscreen .site-header .header-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px 14px;
    min-height: 78px;
    padding: 10px 0 9px;
  }

  .logo {
    min-width: 0;
    grid-column: 1;
    grid-row: 1;
  }

  .logo strong {
    max-width: 210px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .header-actions {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    gap: 8px;
    min-width: 0;
  }

  .point-pill,
  .account-pill {
    min-height: 38px;
    padding: 8px 12px;
    border-radius: 13px;
    white-space: nowrap;
  }

  .main-nav,
  body.premium-fullscreen .main-nav {
    grid-column: 1 / -1;
    grid-row: 2;
    order: initial;
    width: 100%;
    display: flex;
    justify-content: flex-start;
    gap: 7px;
    padding: 0 2px 2px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }

  .main-nav::-webkit-scrollbar {
    display: none;
  }

  .main-nav a,
  body.premium-fullscreen .main-nav a {
    flex: 0 0 auto;
    min-height: 40px;
    min-width: 102px;
    gap: 7px;
    padding: 9px 12px;
    border: 1px solid rgba(187, 247, 208, .74);
    border-radius: 13px;
    background: rgba(255, 255, 255, .82);
    color: #315240;
    font-size: 12px;
    line-height: 1;
    white-space: nowrap;
    scroll-snap-align: start;
    box-shadow: 0 8px 20px rgba(15, 23, 42, .05);
  }

  .main-nav a .icon,
  body.premium-fullscreen .main-nav a .icon {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
  }

  .main-nav a.active,
  .main-nav a:hover,
  body.premium-fullscreen .main-nav a.active,
  body.premium-fullscreen .main-nav a:hover {
    color: #052e16;
    background: linear-gradient(180deg, #eafff0, #ffffff);
    border-color: #86efac;
    transform: none;
    box-shadow: 0 10px 22px rgba(34, 197, 94, .13);
  }
}

@media (max-width: 720px) {
  .shell {
    width: min(100vw - 24px, 640px);
  }

  .settings-number-grid {
    grid-template-columns: 1fr;
  }

  .site-header,
  main,
  .footer {
    width: 100%;
    border-radius: 0;
  }

  .header-actions {
    margin-left: auto;
  }

  .point-pill {
    display: none;
  }

  main {
    padding-top: 18px;
  }

  .orange-hero {
    height: 360px;
  }

  .hero-copy {
    justify-content: flex-start;
    padding: 36px 24px;
  }

  .hero-copy h1 {
    max-width: 430px;
    font-size: clamp(38px, 10vw, 54px);
  }

  .hero-device {
    right: 18px;
    bottom: 42px;
    transform: scale(.72) rotate(5deg);
  }

  .sample-chip {
    font-size: 13px;
  }

  .stats-grid,
  .category-grid,
  .two-col,
  .footer-grid,
  .contact-panel,
  .admin-grid,
  .profile-stats,
  .profile-hero {
    grid-template-columns: 1fr;
  }

  .filter-bar {
    grid-template-columns: 1fr;
  }

  .section-row {
    align-items: flex-start;
    flex-direction: column;
  }

  .store-grid {
    grid-template-columns: 1fr;
  }

  .slider-btn {
    display: none;
  }

  .footer-bottom {
    display: grid;
    gap: 10px;
  }

  .cookie {
    grid-template-columns: 1fr;
  }

  .auth-actions,
  .detail-actions {
    grid-template-columns: 1fr;
  }

  .recommend-card {
    grid-template-columns: 1fr;
  }

  .recommend-empty {
    align-items: stretch;
    flex-direction: column;
  }

  .credential-builder-head,
  .credential-row {
    grid-template-columns: 1fr;
  }

  .credential-builder-head {
    display: grid;
  }

  .product-detail-media,
  .product-detail-media img {
    min-height: 260px;
    height: 260px;
  }

  .premium-hero,
  .premium-products-panel,
  .premium-checkout-panel,
  .premium-orders-panel {
    padding: 16px;
  }

  .premium-price-box,
  .premium-order-card {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 430px) {
  .logo strong {
    max-width: 118px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .account-pill {
    min-width: auto;
    padding: 9px 11px;
  }

  .main-nav a {
    min-width: 92px;
    justify-content: center;
  }

  .orange-hero {
    height: 330px;
  }

  .hero-copy h1 {
    font-size: 37px;
  }

  .product-detail-info,
  .auth-form,
  .auth-visual {
    padding: 24px;
  }

  .profile-order-top,
  .profile-order-bottom {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* Mobile app shell */
@media (max-width: 760px) {
  html {
    scroll-padding-top: 76px;
  }

  body {
    min-width: 0;
    padding-bottom: calc(86px + env(safe-area-inset-bottom));
    background:
      radial-gradient(circle at 0% 0%, rgba(126, 226, 58, .2), transparent 28%),
      linear-gradient(180deg, #f7fff9, #ffffff 42%, #f2fff6);
    -webkit-tap-highlight-color: transparent;
  }

  body::before {
    opacity: .42;
    background-size: 24px 24px;
  }

  .shell,
  body.premium-fullscreen .site-header .shell,
  body.premium-fullscreen .premium-shell,
  .game-menu-page .game-topup-shell {
    width: min(100% - 24px, 540px);
  }

  .site-header,
  body.premium-fullscreen .site-header {
    position: sticky;
    top: 0;
    z-index: 70;
    border-bottom: 1px solid rgba(34, 197, 94, .18);
    background: rgba(255, 255, 255, .92);
    backdrop-filter: none;
    box-shadow: 0 10px 30px rgba(15, 23, 42, .08);
  }

  .header-inner {
    height: 62px;
    padding: 9px 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
  }

  .logo {
    min-width: 0;
    font-size: 16px;
  }

  .site-logo-image,
  .logo-mark {
    width: 34px;
    height: 34px;
    border-radius: 10px;
  }

  .logo strong {
    max-width: 48vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #0f2a1b;
  }

  .header-actions {
    gap: 8px;
    margin-left: 0;
  }

  .account-pill {
    min-width: 44px;
    min-height: 44px;
    padding: 0 13px;
    border-radius: 14px;
    background: #f7fff9;
    color: #0f2a1b;
    font-size: 0;
  }

  .account-pill .icon {
    width: 20px;
    height: 20px;
  }

  .main-nav,
  body.premium-fullscreen .main-nav {
    position: fixed;
    left: 10px;
    right: 10px;
    bottom: calc(10px + env(safe-area-inset-bottom));
    z-index: 90;
    order: initial;
    width: auto;
    height: 66px;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(62px, 1fr);
    gap: 5px;
    align-items: center;
    justify-content: initial;
    padding: 7px;
    overflow-x: auto;
    border: 1px solid rgba(34, 197, 94, .22);
    border-radius: 22px;
    background: rgba(255, 255, 255, .95);
    box-shadow: 0 18px 45px rgba(15, 23, 42, .18);
    backdrop-filter: blur(20px);
    scrollbar-width: none;
  }

  .main-nav::-webkit-scrollbar {
    display: none;
  }

  .main-nav a,
  body.premium-fullscreen .main-nav a {
    min-width: 62px;
  height: 52px;
    display: grid;
    grid-template-rows: 20px 1fr;
    place-items: center;
    gap: 3px;
    padding: 6px 5px 5px;
    border-radius: 16px;
    color: #42604c;
    font-size: 10px;
    line-height: 1.05;
    font-weight: 850;
    white-space: nowrap;
    box-shadow: none;
    transform: none;
  }

  .main-nav a .icon {
    width: 19px;
    height: 19px;
  }

  .main-nav a.active,
  .main-nav a:hover,
  body.premium-fullscreen .main-nav a.active,
  body.premium-fullscreen .main-nav a:hover {
    color: #052e16;
    background: linear-gradient(180deg, #86efac, #22c55e);
    box-shadow: 0 10px 22px rgba(34, 197, 94, .26);
    transform: none;
  }

  main,
  body.premium-fullscreen main {
    width: 100%;
    min-height: calc(100vh - 62px);
    padding: 12px 0 calc(138px + env(safe-area-inset-bottom));
    border: 0;
    border-radius: 0;
    background: transparent;
    overflow: visible;
  }

  .view.active::after {
    content: "";
    display: block;
    height: calc(52px + env(safe-area-inset-bottom));
  }

  .footer {
    padding: 22px 0 calc(126px + env(safe-area-inset-bottom));
  }

  .footer-grid {
    grid-template-columns: .9fr 1.1fr;
    gap: 16px 14px;
    align-items: start;
  }

  .footer-grid > div:first-child {
    grid-column: 1 / -1;
  }

  .footer h2 {
    margin-bottom: 8px;
    font-size: 21px;
    line-height: 1.1;
  }

  .footer h3 {
    margin-bottom: 8px;
    font-size: 15px;
    line-height: 1.2;
  }

  .footer p,
  .footer a {
    font-size: 12px;
    line-height: 1.45;
  }

  .footer p {
    margin: 0;
  }

  .footer-trust h3 {
    margin-bottom: 8px;
  }

  .trust-list {
    gap: 8px;
  }

  .trust-list article {
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 8px;
    min-height: 58px;
    padding: 8px;
    border-radius: 13px;
  }

  .trust-list i {
    width: 32px;
    height: 32px;
    border-radius: 11px;
  }

  .trust-list i .icon {
    width: 16px;
    height: 16px;
  }

  .trust-list strong {
    font-size: 12px;
  }

  .trust-list span {
    margin-top: 1px;
    font-size: 10px;
    line-height: 1.25;
  }

  .footer-bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: 16px;
    padding-top: 12px;
    gap: 8px;
    font-size: 10px;
  }

  .page-title {
    margin: 10px 0 18px;
  }

  .page-title h1,
  .section-row h2 {
    font-size: clamp(24px, 7vw, 34px);
    line-height: 1.15;
  }

  .section-row p,
  .page-title p {
    font-size: 13px;
    line-height: 1.55;
  }

  .hero-frame {
    margin-bottom: 22px;
    border-radius: 18px;
  }

  .orange-hero {
    height: clamp(165px, 45vw, 230px);
    border-radius: 18px;
    box-shadow: 0 18px 42px rgba(22, 163, 74, .14);
  }

  .orange-hero::after {
    height: 44px;
  }

  .hero-copy {
    padding: 18px 16px;
  }

  .hero-copy h1 {
    max-width: 80%;
    font-size: clamp(23px, 7.8vw, 34px);
    line-height: 1.05;
    text-shadow: 0 3px 18px rgba(6, 78, 37, .2);
  }

  .sample-chip,
  .hero-device {
    display: none;
  }

  .promotion-strip {
    grid-auto-columns: minmax(240px, 82vw);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 4px;
  }

  .promotion-card {
    min-height: 116px;
    scroll-snap-align: start;
  }

  .stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 30px;
  }

  .stat-card {
    min-height: 82px;
    padding: 12px;
    border-radius: 16px;
  }

  .stat-card strong {
    margin-top: 2px;
    font-size: 22px;
  }

  .stat-card span {
    padding-right: 28px;
    font-size: 13px;
    line-height: 1.2;
  }

  .stat-card small {
    font-size: 11px;
  }

  .stat-card .stat-icon {
    right: 12px;
    top: 14px;
  }

  .stat-card .stat-icon .icon {
    width: 19px;
    height: 19px;
  }

  .category-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .category-grid.all {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 18px;
  }

  #featuredCategories .category-card,
  .category-grid.all .category-card {
    min-height: 124px;
    border-radius: 16px;
    box-shadow: 0 12px 30px rgba(22, 163, 74, .14);
  }

  #featuredCategories .category-card::before,
  .category-grid.all .category-card::before {
    inset: -12px;
    background-size: 44px 44px;
  }

  #featuredCategories .category-card .card-dog,
  .category-grid.all .category-card .card-dog {
    left: 16px;
    top: 16px;
    width: 54px;
  height: 50px;
  }

  #featuredCategories .category-shortcut .card-route-icon,
  .category-grid.all .category-shortcut .card-route-icon {
    left: 16px;
    top: 16px;
    width: 46px;
    height: 46px;
    border-radius: 14px;
  }

  #featuredCategories .category-shortcut .card-route-icon .icon,
  .category-grid.all .category-shortcut .card-route-icon .icon {
    width: 24px;
    height: 24px;
  }

  #featuredCategories .card-dog::before,
  .category-grid.all .card-dog::before {
    width: 44px;
  height: 34px;
    margin-top: 10px;
    border-radius: 10px;
  }

  #featuredCategories .category-card h3,
  .category-grid.all .category-card h3 {
    padding: 10px 12px;
    border-radius: 0 0 16px 16px;
    font-size: 14px;
    line-height: 1.25;
  }

  #featuredCategories .category-card h3 span,
  .category-grid.all .category-card h3 span {
    margin-top: 2px;
    font-size: 10px;
  }

  .recommend-box {
    min-height: 0;
    padding: 8px;
    border-radius: 18px;
  }

  .recommend-track {
    grid-auto-columns: minmax(128px, 36vw);
    gap: 8px;
    animation-duration: 24s;
  }

  .recommend-card {
    min-width: 0;
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 8px;
    border-radius: 14px;
  }

  .product-card {
    min-width: 0;
    padding: 10px;
    border-radius: 18px;
  }

  .recommend-media {
    min-height: 88px;
    border-radius: 11px;
  }

  .product-media {
    min-height: 128px;
    border-radius: 13px;
  }

  .recommend-media img,
  .recommend-fallback-art {
    height: 88px;
    min-height: 88px;
  }

  .product-media img,
  .product-card img {
    height: 128px;
    min-height: 128px;
  }

  .recommend-media span {
    left: 6px;
    right: 6px;
    bottom: 5px;
    padding: 4px 5px;
    font-size: 9px;
  }

  .recommend-body {
    padding: 0;
    gap: 5px;
  }

  .product-body {
    padding: 11px 2px 2px;
    gap: 7px;
  }

  .recommend-body strong {
    min-height: 32px;
    font-size: 11px;
    line-height: 1.25;
  }

  .product-body h3 {
    min-height: 40px;
    font-size: 13px;
    line-height: 1.25;
  }

  .recommend-body p {
    display: none;
  }

  .recommend-body > b {
    font-size: 11px;
  }

  .product-body .price {
    font-size: 13px;
  }

  .recommend-body button {
    min-height: 31px;
    margin-top: 2px;
    border-radius: 10px;
    font-size: 10px;
  }

  .product-body .gold-btn {
    min-height: 38px;
    margin-top: 4px;
    border-radius: 12px;
    font-size: 12px;
  }

  .recommend-body small {
    font-size: 9px;
    padding: 4px 6px;
  }

  .sold-line {
    max-width: 100%;
    font-size: 10px;
  }

  .store-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .filter-bar {
    position: sticky;
    top: 72px;
    z-index: 25;
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 10px;
    border: 1px solid rgba(34, 197, 94, .16);
    border-radius: 18px;
    background: rgba(255,255,255,.94);
    backdrop-filter: blur(14px);
  }

  input,
  select,
  textarea {
    font-size: 16px;
  }

  .floating-cart {
    right: 14px;
    bottom: calc(92px + env(safe-area-inset-bottom));
    z-index: 125;
    width: 52px;
    height: 52px;
    min-width: 52px;
    min-height: 52px;
    padding: 0;
    justify-content: center;
    gap: 0;
    border: 1px solid rgba(34, 197, 94, .28);
    background: #07140d;
    box-shadow: 0 10px 24px rgba(0,0,0,.18);
  }

  .floating-cart .icon {
    width: 22px;
    height: 22px;
  }

  .floating-cart #cartCount {
    position: absolute;
    right: 5px;
    top: 6px;
    min-width: 16px;
    height: 16px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: #fff;
    color: #07140d;
    font-size: 9px;
    line-height: 1;
  }

  .drawer {
    z-index: 140;
    top: auto;
    left: 12px;
    right: 12px;
    bottom: calc(92px + env(safe-area-inset-bottom));
    width: auto;
    height: auto;
    max-height: min(76vh, 560px);
    overflow: auto;
    border-left: 0;
    border: 1px solid #bbf7d0;
    border-radius: 22px;
    padding: 14px;
    transform: translateY(calc(100% + 120px));
    box-shadow: 0 24px 70px rgba(15, 23, 42, .22);
  }

  .drawer.open {
    transform: translateY(0);
  }

  .drawer-head {
    margin-bottom: 10px;
  }

  .drawer-head h2 {
    font-size: 18px;
  }

  #cartItems {
    max-height: 150px;
    overflow: auto;
  }

  .cart-total {
    margin: 12px 0;
    font-size: 17px;
  }

  .coupon-form {
    gap: 8px;
  }

  .coupon-form input {
    min-height: 46px;
  }

  .payment-choice label {
    min-height: 44px;
    justify-content: center;
    padding: 8px;
    font-size: 13px;
  }

  #checkoutButton {
    position: sticky;
    bottom: 0;
    z-index: 2;
    min-height: 46px;
    border-radius: 14px;
    box-shadow: 0 12px 26px rgba(22, 163, 74, .2);
  }

  .modal {
    align-items: end;
    padding: 10px;
  }

  .product-detail-card,
  .auth-card {
    width: 100%;
    max-height: calc(100vh - 22px);
    border-radius: 24px 24px 18px 18px;
  }

  .product-detail-media,
  .product-detail-media img {
    height: 220px;
    min-height: 220px;
  }
}

@media (max-width: 760px) {
  body.premium-fullscreen {
    background: #f8fff9;
  }

  body.premium-fullscreen .site-header {
    background: rgba(255, 255, 255, .94);
  }

  body.premium-fullscreen .logo strong,
  body.premium-fullscreen .account-pill {
    color: #0f2a1b;
  }

  body.premium-fullscreen .premium-page {
    padding: 10px 0 calc(96px + env(safe-area-inset-bottom));
    color: #0f2a1b;
  }

  body.premium-fullscreen .premium-banner,
  body.premium-fullscreen .premium-banner.has-image {
    min-height: 118px;
    border-radius: 22px;
  }

  body.premium-fullscreen .premium-banner.has-image {
    min-height: 0;
    aspect-ratio: var(--fit-mobile-ratio, var(--fit-desktop-ratio, 16 / 5));
  }

  body.premium-fullscreen .premium-banner-empty strong {
    font-size: clamp(28px, 9vw, 42px);
  }

  body.premium-fullscreen .premium-shop-head {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 16px;
    border-radius: 22px;
    background: linear-gradient(135deg, #f0fdf4, #ffffff);
    color: #0f2a1b;
    box-shadow: 0 18px 44px rgba(22, 163, 74, .1);
  }

  body.premium-fullscreen .premium-shop-head h2,
  body.premium-fullscreen .premium-section-head h2,
  body.premium-fullscreen .premium-section-head h3,
  body.premium-fullscreen .premium-card-body strong,
  body.premium-fullscreen .premium-selected h2 {
    color: #0f2a1b;
  }

  body.premium-fullscreen .premium-shop-head p,
  body.premium-fullscreen .premium-section-head p,
  body.premium-fullscreen .premium-detail-line,
  body.premium-fullscreen .premium-stock-line,
  body.premium-fullscreen .premium-selected p,
  body.premium-fullscreen .premium-buy-form label,
  body.premium-fullscreen .premium-order-card span,
  body.premium-fullscreen .premium-order-card small {
    color: #567262;
  }

  body.premium-fullscreen .premium-head-actions {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  body.premium-fullscreen .premium-head-actions input {
    width: 100%;
    min-height: 46px;
    border-color: #bbf7d0;
    background: #ffffff;
    color: #0f172a;
  }

  body.premium-fullscreen .premium-mini-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
  }

  body.premium-fullscreen .premium-mini-stats span {
    min-width: 0;
    justify-content: center;
    padding: 8px 6px;
    border-color: #bbf7d0;
    background: #f0fdf4;
    color: #166534;
    font-size: 10px;
  }

  body.premium-fullscreen .premium-chip-row {
    margin: 0 -4px;
    padding: 2px 4px 7px;
    overflow-x: auto;
    flex-wrap: nowrap;
    scrollbar-width: none;
  }

  body.premium-fullscreen .premium-chip-row::-webkit-scrollbar {
    display: none;
  }

  body.premium-fullscreen .premium-chip-row button {
    flex: 0 0 auto;
    min-height: 40px;
    border-color: #bbf7d0;
    background: #ffffff;
    color: #166534;
    font-size: 12px;
  }

  body.premium-fullscreen .premium-chip-row button.active {
    color: #052e16;
    background:#86efac;
  }

  body.premium-fullscreen .premium-layout {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  body.premium-fullscreen .premium-products-panel,
  body.premium-fullscreen .premium-orders-panel {
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  body.premium-fullscreen .premium-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  body.premium-fullscreen .premium-card {
    min-height: 252px;
    gap: 7px;
    padding-bottom: 10px;
    border-radius: 16px;
    background: #ffffff;
    color: #0f2a1b;
    box-shadow: 0 16px 36px rgba(22, 163, 74, .1);
  }

  body.premium-fullscreen .premium-card-img {
    height: 104px;
    border-radius: 16px 16px 0 0;
    background: linear-gradient(135deg, #eafff0, #f8fffb);
  }

  body.premium-fullscreen .premium-card-img img {
    padding: 18px;
    filter: drop-shadow(0 10px 16px rgba(15, 23, 42, .12));
  }

  body.premium-fullscreen .premium-card-body {
    padding: 0 10px;
    gap: 6px;
  }

  body.premium-fullscreen .premium-card-body strong {
    min-height: 36px;
    font-size: 11px;
    line-height: 1.28;
  }

  body.premium-fullscreen .premium-card-price {
    padding: 5px 8px;
    font-size: 10px;
    color: #16a34a;
    background: #ecfff2;
  }

  body.premium-fullscreen .premium-card-price b {
    font-size: 17px;
  }

  body.premium-fullscreen .premium-detail-line {
    font-size: 10px;
  }

  body.premium-fullscreen .premium-card-bottom {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 0 10px;
  }

  body.premium-fullscreen .premium-stock-line {
    justify-self: start;
    text-align: left;
    padding: 5px 8px;
    font-size: 10px;
  }

  body.premium-fullscreen .premium-card::after {
    display: none;
    content: none;
  }

  body.premium-fullscreen .premium-checkout-panel {
    position: static;
    padding: 14px;
    border-radius: 22px;
    background: #ffffff;
    box-shadow: 0 16px 42px rgba(22, 163, 74, .12);
  }

  body.premium-fullscreen .premium-selected-top {
    grid-template-columns: 74px 1fr;
    gap: 12px;
  }

  body.premium-fullscreen .premium-selected-img {
    width: 74px;
    height: 74px;
    border-radius: 16px;
  }

  body.premium-fullscreen .premium-selected h2 {
    font-size: 18px;
  }

  body.premium-fullscreen .premium-price-box {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  body.premium-fullscreen .premium-buy-form textarea {
    min-height: 96px;
  }
}

@media (max-width: 760px) {
  .game-menu-page {
    margin-top: -12px;
    padding: 18px 0 calc(96px + env(safe-area-inset-bottom));
    min-height: calc(100vh - 62px);
  }

  #gameTopupView.package-mode .game-menu-page {
    min-height: auto;
    padding-bottom: calc(18px + env(safe-area-inset-bottom));
  }

  #gameTopupView.package-mode .game-package-section {
    min-height: auto;
  }

  main:has(#gameTopupView.package-mode) {
    min-height: 0;
    padding-bottom: 18px;
  }

  main:has(#gameTopupView.package-mode) + .footer {
    padding-top: 8px;
  }

  .game-menu-head {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .game-menu-head h1 {
    margin-bottom: 10px;
    font-size: clamp(26px, 8vw, 36px);
  }

  .game-menu-head h2 {
    margin-bottom: 10px;
    font-size: 17px;
  }

  .game-menu-head p {
    font-size: 13px;
    line-height: 1.65;
  }

  .game-menu-search {
    justify-items: stretch;
  }

  .game-menu-page .game-catalog-search {
    width: 100%;
    min-height: 46px;
    border-radius: 14px;
  }

  .game-menu-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    justify-content: stretch;
  }

  .game-menu-stats span {
    justify-content: center;
    padding: 8px 6px;
    font-size: 10px;
  }

  .game-menu-page .game-card-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px 2px;
  }

  .game-menu-page .game-pick-card {
    min-height: 0;
    gap: 5px;
    padding: 2px 0;
    border-radius: 12px;
  }

  .game-menu-page .game-pick-media {
    width: clamp(78px, 22vw, 104px);
    aspect-ratio: 1 / 1; /* height removed to make it square */
    border-radius: 14px;
  }

  .game-menu-page .game-pick-card strong {
    max-width: 100%;
    min-height: 0;
    font-size: 9.5px;
  }

  .game-menu-page .game-pick-card small {
    max-width: 100%;
    font-size: 9px;
  }

  .game-menu-page .selected-game-preview {
    grid-template-columns: 58px minmax(0, 1fr);
    gap: 12px;
    padding: 12px;
    border-radius: 18px;
    box-shadow: 0 14px 34px rgba(22, 163, 74, .10);
  }

  .game-menu-page .selected-game-card {
    width: 58px;
  height: 82px;
    border-radius: 12px;
  }

  .game-menu-page .selected-game-preview strong {
    display: block;
    overflow-wrap: anywhere;
    font-size: 18px;
    line-height: 1.15;
  }

  .game-menu-page .selected-game-preview small {
    display: block;
    margin-top: 5px;
    color: #64748b;
    font-size: 11px;
    line-height: 1.3;
  }

  .game-menu-page .game-package-layout {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .game-menu-page .game-topup-form {
    order: -1;
    position: static;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    padding: 12px;
    border-radius: 18px;
    box-shadow: 0 14px 34px rgba(15, 23, 42, .08);
  }

  .game-menu-page .game-topup-form .checkout-title {
    grid-column: 1 / -1;
    margin-bottom: 0;
  }

  .game-menu-page .game-topup-form .checkout-title span {
    font-size: 10px;
  }

  .game-menu-page .game-topup-form .checkout-title h2 {
    font-size: 18px;
    line-height: 1.15;
  }

  .game-menu-page .game-topup-form label {
    min-width: 0;
    gap: 5px;
    margin-bottom: 0;
    font-size: 12px;
  }

  .game-menu-page .game-topup-form label:first-of-type,
  .game-menu-page .game-topup-form label:nth-of-type(2),
  .game-menu-page .game-topup-form label:nth-of-type(3),
  .game-menu-page .game-topup-form .topup-summary,
  .game-menu-page .game-topup-form .gold-btn {
    grid-column: 1 / -1;
  }

  .game-menu-page .game-topup-form input,
  .game-menu-page .game-topup-form textarea {
    width: 100%;
    min-height: 42px;
    padding: 10px 12px;
    border-radius: 10px;
    font-size: 13px;
  }

  .game-menu-page .game-topup-form textarea {
    height: 48px;
    min-height: 48px;
    resize: vertical;
  }

  .game-menu-page .game-topup-form .topup-summary {
    min-height: 44px;
    margin-top: 0;
    padding: 10px 12px;
    border-radius: 12px;
    font-size: 14px;
  }

  .game-menu-page .game-topup-form .gold-btn {
    min-height: 44px;
    margin-top: 0;
    border-radius: 13px;
    font-size: 14px;
  }

  .game-menu-page .pack-list-panel {
    min-height: auto;
    padding: 12px;
    border-radius: 18px;
    box-shadow: 0 16px 38px rgba(15, 23, 42, .08);
  }

  .game-menu-page .pack-head {
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
  }

  .game-menu-page .pack-head h2 {
    font-size: 20px;
    line-height: 1.1;
  }

  .game-menu-page .pack-head .muted {
    font-size: 12px;
  }

  .game-menu-page .pack-head .light-btn {
    min-height: 42px;
    padding: 9px 12px;
    border-radius: 14px;
    font-size: 12px;
  }

  .game-menu-page .pack-card-grid {
    max-height: none;
    grid-template-columns: 1fr;
    gap: 8px;
    border: 0;
    border-radius: 0;
    background: transparent;
    overflow: visible;
  }

  .game-menu-page .pack-list-header {
    display: none;
  }

  .game-menu-page .pack-pick-card {
    grid-template-columns: 52px minmax(0, 1fr) auto;
    gap: 10px;
    min-height: 0;
    padding: 10px;
    border: 1px solid #dbeafe;
    border-radius: 14px;
    background: linear-gradient(135deg, #ffffff, #f8fffb);
    box-shadow: 0 10px 22px rgba(15, 23, 42, .05);
  }

  .game-menu-page .pack-pick-media {
    width: 52px;
    height: 52px;
    border-radius: 10px;
  }

  .game-menu-page .pack-sku {
    grid-column: 2 / 3;
    margin-top: -2px;
    font-size: 9px;
  }

  .game-menu-page .pack-pick-card .pack-pick-name {
    font-size: 14px;
    line-height: 1.15;
  }

  .game-menu-page .pack-pick-card small {
    margin-top: 3px;
    font-size: 10px;
  }

  .game-menu-page .pack-pick-card .pack-price {
    grid-column: 3 / 4;
    grid-row: 1 / 3;
    align-self: center;
    padding: 7px 9px;
    font-size: 12px;
    box-shadow: 0 8px 18px rgba(34, 197, 94, .14);
  }

  .game-menu-page .pack-action {
    display: none;
  }

}

@media (max-width: 420px) {
  .store-grid,
  .recommend-box,
  body.premium-fullscreen .premium-grid {
    gap: 10px;
  }

  .recommend-media,
  .product-media,
  .recommend-media img,
  .product-media img,
  .product-card img,
  .recommend-fallback-art {
    height: 116px;
    min-height: 116px;
  }

  .recommend-body strong,
  .product-body h3,
  body.premium-fullscreen .premium-card-body strong {
    font-size: 12px;
  }

  body.premium-fullscreen .premium-card {
    min-height: 298px;
  }

  body.premium-fullscreen .premium-card-img {
    height: 132px;
  }

  .game-menu-page .game-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .game-menu-page .game-pick-media {
    width: 78px;
  height: 112px;
  }
}

@media (max-width: 760px) {
  html,
  body {
    scrollbar-width: none;
  }

  html::-webkit-scrollbar,
  body::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
  }

  #profileView .shell {
    width: min(100vw - 16px, 430px);
  }

  #profileView .profile-hero {
    grid-template-columns: 48px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    margin-bottom: 10px;
    padding: 14px;
    border-radius: 18px;
  }

  #profileView .profile-avatar {
    width: 48px;
    height: 48px;
    border-radius: 15px;
    box-shadow: 0 10px 22px rgba(22, 163, 74, .14);
  }

  #profileView .profile-avatar .icon {
    width: 24px;
    height: 24px;
  }

  #profileView .profile-hero .auth-kicker {
    font-size: 10px;
  }

  #profileView .profile-hero h1 {
    margin: 2px 0 1px;
    overflow: hidden;
    font-size: 22px;
    line-height: 1.08;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #profileView #profileEmail {
    overflow: hidden;
    font-size: 11px;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #profileView .profile-hero #logoutButton {
    grid-column: auto;
    min-height: 36px;
    padding: 8px 10px;
    border-radius: 12px;
    font-size: 12px;
    white-space: nowrap;
  }

  #profileView .profile-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 14px;
  }

  #profileView .profile-stat-card {
    min-height: 92px;
    gap: 4px;
    padding: 12px;
    border-radius: 16px;
  }

  #profileView .profile-stat-card span {
    font-size: 12px;
    line-height: 1.2;
  }

  #profileView .profile-stat-card strong {
    font-size: 24px;
  }

  #profileView .profile-stat-card small {
    font-size: 11px;
    line-height: 1.3;
  }

  #profileView .section-row {
    gap: 8px;
    margin: 10px 0 12px;
  }

  #profileView .section-row h2 {
    font-size: 22px;
    line-height: 1.12;
  }

  #profileView .section-row p,
  #profileView .section-row a {
    font-size: 12px;
  }

  #profileView .profile-orders {
    gap: 8px;
  }

  #profileView .profile-order-card {
    gap: 8px;
    padding: 10px 12px;
    border-radius: 12px;
  }

  #profileView .profile-order-top {
    flex-direction: row;
    align-items: flex-start;
    gap: 8px;
  }

  #profileView .profile-order-bottom {
    gap: 6px;
  }

  #profileView .profile-order-actions {
    gap: 6px;
  }

  #profileView .profile-detail-btn {
    min-height: 30px;
    padding: 6px 10px;
    font-size: 12px;
  }

  #authModal.modal {
    align-items: center;
    padding: max(6px, env(safe-area-inset-top)) 6px max(6px, env(safe-area-inset-bottom));
    width: 100vw;
    max-width: 100vw;
    overflow-x: hidden;
    overflow-y: auto;
    touch-action: pan-y;
    overscroll-behavior-x: none;
  }

  #authModal .auth-card {
    box-sizing: border-box;
    width: min(calc(100vw - 24px), 430px);
    max-width: calc(100vw - 24px);
    max-height: calc(100dvh - 12px);
    min-height: 0;
    min-width: 0;
    grid-template-columns: 1fr;
    border-radius: 20px;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    touch-action: pan-y;
  }

  #authModal .modal-close {
    top: 12px;
    right: 12px;
    width: 34px;
    height: 34px;
    font-size: 20px;
  }

  #authModal .auth-visual {
    width: 100%;
    max-width: 100%;
    min-height: 0;
    min-width: 0;
    padding: 18px 28px 16px;
    overflow: hidden;
  }

  #authModal .auth-logo {
    max-width: calc(100% - 48px);
    padding: 7px 10px;
    font-size: 14px;
  }

  #authModal .auth-logo .site-logo-image,
  #authModal .auth-logo .logo-mark {
    width: 32px;
    height: 32px;
  }

  #authModal .auth-visual h2 {
    margin: 22px 0 7px;
    max-width: 310px;
    font-size: 28px;
    line-height: 1.08;
  }

  #authModal .auth-visual p {
    max-width: 340px;
    font-size: 13px;
    line-height: 1.45;
  }

  #authModal .auth-benefits {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin-top: 13px;
    padding-bottom: 2px;
    overflow: hidden;
    scrollbar-width: none;
  }

  #authModal .auth-benefits span {
    flex: 1 1 min(100%, 138px);
    gap: 8px;
    width: auto;
    max-width: 100%;
    min-height: 34px;
    padding: 7px 10px;
    border-radius: 12px;
    font-size: 12px;
    line-height: 1.25;
    white-space: normal;
  }

  #authModal .auth-benefits .icon {
    width: 17px;
    height: 17px;
    flex: 0 0 auto;
  }

  #authModal .auth-form {
    width: 100%;
    max-width: 100%;
    gap: 11px;
    min-width: 0;
    padding: 20px 28px 22px;
    align-content: start;
    overflow-x: hidden;
    touch-action: pan-y;
  }

  #authModal .auth-heading {
    margin-bottom: 0;
  }

  #authModal .auth-kicker {
    font-size: 11px;
  }

  #authModal .auth-heading h2 {
    margin: 4px 0;
    font-size: 28px;
    line-height: 1.05;
  }

  #authModal .auth-heading p {
    font-size: 13px;
    line-height: 1.45;
  }

  #authModal .auth-tabs {
    gap: 5px;
    padding: 4px;
    border-radius: 14px;
  }

  #authModal .auth-tabs button {
    min-height: 38px;
    border-radius: 10px;
    font-size: 13px;
  }

  #authModal .auth-panel {
    gap: 10px;
  }

  #authModal .field {
    gap: 6px;
    font-size: 13px;
  }

  #authModal .input-wrap {
    grid-template-columns: 19px minmax(0, 1fr);
    gap: 8px;
    min-height: 46px;
    padding: 0 12px;
    border-radius: 13px;
  }

  #authModal .input-wrap input {
    min-height: 44px;
    padding: 10px 0;
    font-size: 13px;
  }

  #authModal .input-wrap .icon {
    width: 18px;
    height: 18px;
  }

  #authModal .check-row {
    gap: 8px;
    font-size: 12px;
    line-height: 1.35;
  }

  #authModal .check-row input {
    width: 17px;
    height: 17px;
    margin-top: 0;
  }

  #authModal .auth-submit {
    min-height: 44px;
    border-radius: 13px;
    font-size: 14px;
  }
  #cookieBanner.cookie {
    z-index: 1100 !important;
    left: 10px !important;
    right: 10px !important;
    bottom: calc(82px + env(safe-area-inset-bottom)) !important;
    max-height: calc(100dvh - 110px) !important;
    overflow-y: auto !important;
  }
}

@media (max-width: 380px) {
  #authModal .auth-visual {
    padding: 18px 18px 16px;
  }

  #authModal .auth-form {
    padding: 18px;
  }

  #authModal .auth-visual h2 {
    margin-top: 24px;
    font-size: 27px;
  }

  #authModal .auth-benefits span {
    font-size: 11px;
  }
}

@media (max-width: 760px) {
  #adminView .admin-shell {
    width: min(100vw - 16px, 430px);
  }

  #adminView .page-title {
    margin-bottom: 12px;
  }

  #adminView .page-title h1 {
    font-size: 28px;
    line-height: 1.05;
  }

  #adminView .page-title p {
    max-width: 92%;
    font-size: 12px;
    line-height: 1.35;
  }

  #adminView .admin-tabs {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    gap: 7px;
    margin: 0 -8px 12px;
    padding: 0 8px 4px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    flex-wrap: nowrap;
  }

  #adminView .admin-tabs::-webkit-scrollbar {
    display: none;
  }

  #adminView .admin-tabs button {
    min-height: 38px;
    padding: 8px 11px;
    border-radius: 13px;
    gap: 6px;
    font-size: 12px;
    white-space: nowrap;
    box-shadow: 0 8px 18px rgba(15, 23, 42, .05);
  }

  #adminView .admin-tabs button .icon {
    width: 15px;
    height: 15px;
  }

  #adminView .metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 10px;
  }

  #adminView .metric-card {
    min-height: 86px;
    padding: 12px;
    border-radius: 16px;
  }

  #adminView .metric-card span {
    font-size: 12px;
    line-height: 1.2;
  }

  #adminView .metric-card strong {
    margin-top: 4px;
    overflow-wrap: anywhere;
    font-size: 24px;
  }

  #adminView .sales-chart-card {
    padding: 13px;
    border-radius: 17px;
  }

  #adminView .sales-chart-head {
    gap: 8px;
    align-items: flex-start;
    margin-bottom: 10px;
  }

  #adminView .sales-chart-head h3 {
    font-size: 16px;
    line-height: 1.18;
  }

  #adminView .sales-chart-head .auth-kicker {
    font-size: 10px;
  }

  #adminView .sales-chart-insights {
    grid-template-columns: 1fr;
    gap: 7px;
  }

  #adminView .sales-chart-insights span {
    padding: 8px 10px;
    border-radius: 12px;
    font-size: 10px;
  }

  #adminView .sales-chart-insights b {
    font-size: 13px;
  }

  #adminView .sales-chart-summary strong {
    font-size: 22px;
  }

  #adminView .sales-chart-summary span {
    font-size: 11px;
  }

  #adminView .sales-chart {
    min-height: 112px;
    padding: 9px 8px 6px;
    border-radius: 14px;
  }

  #adminView .sales-chart-legend {
    gap: 9px;
    font-size: 10px;
  }

  #adminView .sales-chart-legend i {
    width: 16px;
  }

  #adminView .sales-line-chart {
    min-height: 118px;
  }

  #adminView .sales-line {
    stroke-width: 2.4;
  }

  #adminView .profit-line {
    stroke-width: 2.4;
  }

  #adminView .sales-axis-labels text {
    font-size: 8px;
  }

  #adminView .chart-note {
    margin-top: 8px;
    font-size: 11px;
    line-height: 1.4;
  }

  #adminView .admin-section-head {
    display: grid;
    gap: 10px;
  }

  #adminView .admin-section-head h3 {
    margin: 0;
    font-size: 18px;
    line-height: 1.2;
  }

  #adminView .admin-section-head p {
    font-size: 12px;
    line-height: 1.35;
  }

  #adminView .admin-table-wrap {
    margin: 0 -4px;
    padding-bottom: 4px;
    border-radius: 14px;
  }

  #adminView .admin-table {
    min-width: 680px;
  }

  #adminView .admin-table th,
  #adminView .admin-table td {
    padding: 9px;
    font-size: 12px;
  }

  #adminView .panel {
    border-radius: 17px;
  }
}

@media (max-width: 760px) {
  .shell,
  body.premium-fullscreen .premium-shell,
  .game-menu-page .game-topup-shell {
    width: min(100% - 14px, 520px);
  }

  main,
  body.premium-fullscreen main {
    padding-top: 14px;
    padding-bottom: calc(136px + env(safe-area-inset-bottom));
  }

  .section-row,
  .page-title {
    margin-bottom: 12px;
  }

  .section-row h2,
  .page-title h1 {
    font-size: clamp(22px, 7vw, 30px);
    line-height: 1.1;
  }

  .section-row p,
  .page-title p {
    font-size: 12px;
    line-height: 1.45;
  }

  .stats-grid,
  .category-grid,
  .store-grid,
  .recommend-box,
  body.premium-fullscreen .premium-grid {
    gap: 9px;
  }

  .store-grid,
  body.premium-fullscreen .premium-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .category-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .category-card {
    min-height: 124px;
    border-radius: 16px;
  }

  .category-card h3 {
    padding: 12px 13px;
    border-radius: 0 0 16px 16px;
    font-size: 13px;
  }

  .category-card h3 span {
    font-size: 10px;
  }

  .product-card,
  .recommend-card,
  body.premium-fullscreen .premium-card {
    border-radius: 12px;
  }

  .wallet-form-panel,
  .wallet-history-panel,
  .contact-card,
  .panel {
    border-radius: 16px;
  }

  .game-menu-page {
    padding-top: 12px;
  }

  .game-menu-head {
    gap: 10px;
  }

  .game-menu-head h1 {
    margin: 0 0 6px;
    font-size: clamp(22px, 6.2vw, 30px);
    line-height: 1.05;
  }

  .game-menu-head h2 {
    margin: 0 0 7px;
    font-size: clamp(14px, 4.2vw, 18px);
    line-height: 1.28;
  }

  .game-menu-head p {
    font-size: 12px;
    line-height: 1.5;
  }

  .game-menu-page .game-catalog-search {
    min-height: 42px;
  }

  .game-menu-stats {
    gap: 7px;
  }

  .game-menu-stats span {
    min-width: 0;
    min-height: 32px;
    padding: 6px 5px;
    border-radius: 999px;
    font-size: 9px;
  }

  .game-menu-page .game-card-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px 4px;
    justify-items: center;
  }

  .game-menu-page .game-pick-card {
    width: 100%;
    gap: 4px;
    padding: 0;
    border-radius: 10px;
  }

  .game-menu-page .game-pick-media {
    width: clamp(82px, 25vw, 104px);
    aspect-ratio: 1 / 1; /* height removed to make it square */
    border-radius: 13px;
  }

  .game-menu-page .game-card-cover::after {
    left: 9px;
    right: 9px;
    bottom: 12px;
    height: 24px;
    font-size: 8px;
  }

  .game-menu-page .game-card-cover b {
    inset: 18px 7px 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    font-size: clamp(30px, 11vw, 48px);
    line-height: .82;
    word-break: break-all;
    opacity: .88;
  }

  .game-menu-page .game-card-cover b.game-card-fallback {
    display: grid;
    padding: 18px 10px 34px;
    font-size: 10px;
    word-break: normal;
  }

  .game-menu-page .game-card-cover b.game-card-fallback svg {
    width: 30px;
    height: 30px;
  }

  .game-menu-page .game-card-cover b.game-card-fallback span {
    font-size: 11px;
  }

  .game-menu-page .game-card-cover::before {
    top: 8px;
    left: 50%;
    width: 40px;
  height: 7px;
    transform: translateX(-50%);
  }

  .game-menu-page .game-pick-card strong {
    width: 100%;
    padding: 0 1px;
    font-size: clamp(8.5px, 2.55vw, 10px);
    line-height: 1.2;
    text-align: center;
  }

  .game-menu-page .game-pick-card small {
    display: none;
  }
}

@media (max-width: 370px) {
  .shell,
  body.premium-fullscreen .premium-shell,
  .game-menu-page .game-topup-shell {
    width: min(100% - 10px, 360px);
  }

  .main-nav,
  body.premium-fullscreen .main-nav {
    left: 5px;
    right: 5px;
    grid-auto-columns: minmax(54px, 1fr);
    padding: 5px;
  }

  .main-nav a,
  body.premium-fullscreen .main-nav a {
    min-width: 54px;
    font-size: 9px;
  }

  .game-menu-page .game-card-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px 3px;
  }

  .game-menu-page .game-pick-media {
    width: clamp(76px, 25vw, 86px);
    aspect-ratio: 1 / 1; /* height removed to make it square */
    border-radius: 11px;
  }

  .game-menu-page .game-pick-card strong {
    font-size: 8px;
  }
}

@media (min-width: 430px) and (max-width: 760px) {
  .game-menu-page .game-card-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px 2px;
  }

  .game-menu-page .game-pick-media {
    width: clamp(76px, 19vw, 92px);
    aspect-ratio: 1 / 1; /* height removed to make it square */
  }

  .game-menu-page .game-card-cover b {
    font-size: clamp(30px, 9vw, 42px);
  }
}

@media (max-width: 760px) {
  #categoriesView .page-title {
    margin: 4px 0 10px;
  }

  #categoriesView .page-title h1 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: clamp(21px, 6vw, 26px);
    line-height: 1.08;
  }

  #categoriesView .title-icon {
    width: 19px;
    height: 19px;
  }

  #categoriesView .page-title p {
    max-width: 94%;
    margin-top: 5px;
    font-size: 11px;
    line-height: 1.35;
  }

  #categoriesView .filter-bar {
    position: static;
    grid-template-columns: minmax(0, 1fr) minmax(118px, .58fr);
    gap: 6px;
    margin-bottom: 12px;
    padding: 7px;
    border-radius: 14px;
    box-shadow: 0 10px 24px rgba(22, 163, 74, .06);
  }

  #categoriesView .filter-bar input,
  #categoriesView .filter-bar select {
    min-height: 38px;
    padding: 8px 10px;
    border-radius: 11px;
    font-size: 12px;
  }

  #categoriesView .category-grid.all {
    gap: 8px;
    margin-bottom: 10px;
  }
}

@media (max-width: 380px) {
  #categoriesView .filter-bar {
    grid-template-columns: minmax(0, 1fr) 116px;
  }
}

@media (max-width: 760px) {
  body.premium-fullscreen .premium-page {
    padding-top: 6px;
  }

  body.premium-fullscreen .premium-banner,
  body.premium-fullscreen .premium-banner.has-image {
    min-height: 74px;
    border-radius: 16px;
  }

  body.premium-fullscreen .premium-banner.has-image {
    min-height: 0;
    aspect-ratio: var(--fit-mobile-ratio, var(--fit-desktop-ratio, 16 / 5));
  }

  body.premium-fullscreen .premium-banner-empty {
    gap: 3px;
    padding: 12px 16px;
    align-items: flex-start;
  }

  body.premium-fullscreen .premium-banner-empty span {
    font-size: 9px;
  }

  body.premium-fullscreen .premium-banner-empty strong {
    font-size: clamp(22px, 6.5vw, 30px);
    line-height: 1.05;
  }

  body.premium-fullscreen .premium-shop-head {
    gap: 9px;
    margin-top: 10px;
    padding: 12px;
    border-radius: 17px;
  }

  body.premium-fullscreen .premium-shop-head h2 {
    gap: 7px;
    margin: 0;
    font-size: clamp(20px, 6vw, 26px);
    line-height: 1.08;
  }

  body.premium-fullscreen .premium-shop-head h2::before {
    width: 5px;
  height: 30px;
    border-radius: 999px;
  }

  body.premium-fullscreen .premium-shop-head p {
    margin-top: 5px;
    font-size: 11px;
    line-height: 1.35;
  }

  body.premium-fullscreen .premium-head-actions {
    gap: 7px;
  }

  body.premium-fullscreen .premium-mini-stats {
    gap: 6px;
  }

  body.premium-fullscreen .premium-mini-stats span {
    min-height: 34px;
    padding: 6px 5px;
    border-radius: 999px;
    font-size: 9px;
  }

  body.premium-fullscreen .premium-mini-stats strong {
    font-size: 9px;
  }

  body.premium-fullscreen .premium-head-actions input {
    min-height: 40px;
    padding: 8px 12px;
    border-radius: 13px;
    font-size: 12px;
  }

  body.premium-fullscreen .premium-chip-row {
    gap: 6px;
    padding-bottom: 2px;
  }

  body.premium-fullscreen .premium-chip-row button {
    min-height: 35px;
    padding: 7px 12px;
    border-radius: 999px;
    font-size: 11px;
  }

  body.premium-fullscreen .premium-section-head {
    align-items: center;
    margin: 16px 0 10px;
  }

  body.premium-fullscreen .premium-section-head h2,
  body.premium-fullscreen .premium-section-head h3 {
    font-size: clamp(20px, 6vw, 26px);
    line-height: 1.1;
  }

  body.premium-fullscreen .premium-section-head p {
    font-size: 11px;
    line-height: 1.35;
  }

  body.premium-fullscreen .premium-section-head .light-btn {
    min-height: 38px;
    padding: 8px 12px;
    border-radius: 13px;
    font-size: 12px;
  }
}

@media (max-width: 760px) {
  #walletView .wallet-page {
    width: min(100% - 14px, 430px);
  }

  #walletView .page-title {
    margin: 4px 0 10px;
  }

  #walletView .page-title h1 {
    font-size: clamp(22px, 6.4vw, 28px);
    line-height: 1.08;
  }

  #walletView .page-title p {
    max-width: 95%;
    font-size: 11px;
    line-height: 1.35;
  }

  #walletView .wallet-layout {
    gap: 10px;
  }

  #walletView .wallet-form-panel,
  #walletView .wallet-history-panel {
    gap: 10px;
    padding: 12px;
    border-radius: 17px;
  }

  #walletView .wallet-form-panel h2,
  #walletView .wallet-history-panel h2 {
    margin: 0;
    font-size: 18px;
    line-height: 1.1;
  }

  #walletView .wallet-form-panel > label {
    gap: 6px;
    font-size: 12px;
  }

  #walletView .wallet-form-panel input[name="amount"] {
    min-height: 44px;
    padding: 8px 12px;
    border-radius: 13px;
    font-size: 20px;
  }

  #walletView .wallet-methods {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
  }

  #walletView .wallet-methods label {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 8px;
    min-height: 70px;
    padding: 10px;
    border-radius: 14px;
  }

  #walletView .wallet-methods input {
    grid-row: 1 / 3;
    width: 16px;
    height: 16px;
  }

  #walletView .wallet-method-icon {
    width: 34px;
    height: 34px;
    border-radius: 12px;
  }

  #walletView .wallet-method-icon .icon {
    width: 17px;
    height: 17px;
  }

  #walletView .wallet-methods strong {
    font-size: 12px;
    line-height: 1.15;
  }

  #walletView .wallet-methods small {
    display: none;
    margin-top: 2px;
    overflow: hidden;
    font-size: 9.5px;
    line-height: 1.25;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  #walletView .quick-amounts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
  }

  #walletView .quick-amounts button {
    min-height: 42px;
    padding: 7px 5px;
    border-radius: 13px;
    font-size: 13px;
  }

  #walletView #walletSubmitButton {
    min-height: 46px;
    border-radius: 14px;
    font-size: 14px;
  }
}

@media (max-width: 340px) {
  #walletView .wallet-methods {
    grid-template-columns: 1fr;
  }

  #walletView .wallet-methods label {
    min-height: 58px;
  }
}

@media (max-width: 760px) {
  #walletView .qr-box {
    display: grid;
    gap: 8px;
  }

  #walletView .wallet-pay-card {
    gap: 10px;
    padding: 12px;
    border-radius: 16px;
  }

  #walletView .wallet-pay-card h3 {
    margin-top: 2px;
    font-size: 22px;
    line-height: 1;
  }

  #walletView .wallet-pay-card p {
    font-size: 12px;
  }

  #walletView .wallet-pay-card img {
    width: min(165px, 100%);
    padding: 5px;
    border-radius: 12px;
  }

  #walletView .promptpay-info {
    gap: 2px;
    width: min(260px, 100%);
    padding: 9px 10px;
    border-radius: 12px;
  }

  #walletView .promptpay-info strong {
    font-size: 13px;
  }

  #walletView .promptpay-info span {
    font-size: 12px;
  }

  #walletView .verify-note {
    gap: 3px;
    padding: 9px 10px;
    border-radius: 12px;
    font-size: 12px;
  }

  #walletView .verify-note span {
    font-size: 11px;
    line-height: 1.35;
  }

  #walletView .wallet-proof-form {
    gap: 7px;
  }

  #walletView .wallet-proof-form label {
    gap: 5px;
    font-size: 12px;
  }

  #walletView .wallet-proof-form input {
    min-height: 38px;
    padding: 8px 10px;
    border-radius: 11px;
    font-size: 12px;
  }

  #walletView .wallet-proof-form input[type="file"] {
    padding: 8px;
  }
}

@media (max-width: 760px) {
  #walletView .wallet-history-panel {
    gap: 8px;
    padding: 11px;
  }

  #walletView .wallet-history-subtitle {
    margin: -3px 0 4px;
    font-size: 10.5px;
    line-height: 1.3;
  }

  #walletView .wallet-tx-card {
    gap: 8px;
    padding: 10px;
    border-radius: 13px;
  }

  #walletView .wallet-tx-title {
    gap: 5px;
    margin-bottom: 3px;
  }

  #walletView .wallet-tx-title strong {
    font-size: 12px;
    line-height: 1.15;
  }

  #walletView .wallet-tx-title span {
    padding: 3px 7px;
    font-size: 9px;
  }

  #walletView .wallet-tx-card p {
    display: -webkit-box;
    margin-bottom: 4px;
    overflow: hidden;
    color: #587565;
    font-size: 10.5px;
    line-height: 1.32;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  #walletView .wallet-tx-card small {
    font-size: 9.5px;
    line-height: 1.28;
  }

  #walletView .wallet-tx-card > b {
    align-self: start;
    font-size: 13px;
  }

  #contactView .page-title {
    margin: 4px 0 9px;
  }

  #contactView .page-title h1 {
    font-size: clamp(22px, 6vw, 28px);
    line-height: 1.08;
  }

  #contactView .page-title p {
    font-size: 11px;
    line-height: 1.35;
  }

  #contactView .contact-panel {
    gap: 8px;
    padding: 10px;
    border-radius: 16px;
  }

  #contactView .contact-card {
    min-height: 72px;
    gap: 5px 10px;
    padding: 10px 12px;
    border-radius: 14px;
  }

  #contactView .contact-card::after {
    right: -22px;
    bottom: -26px;
    width: 70px;
    height: 70px;
    opacity: .55;
  }

  #contactView .contact-card i {
    width: 34px;
    height: 34px;
    border-radius: 12px;
  }

  #contactView .contact-card i .icon {
    width: 17px;
    height: 17px;
  }

  #contactView .contact-card strong {
    font-size: 13px;
    line-height: 1.18;
  }

  #contactView .contact-panel span {
    font-size: 12px;
    line-height: 1.35;
  }
}

@media (max-width: 430px) {
  .footer {
    width: 100%;
    padding-right: 12px;
    padding-left: 12px;
    padding-top: 18px;
    box-sizing: border-box;
  }

  .footer .shell {
    width: 100%;
    max-width: 430px;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .footer h2 {
    margin-bottom: 5px;
    font-size: 19px;
  }

  .footer h3 {
    margin-bottom: 7px;
    font-size: 14px;
  }

  .footer p,
  .footer a {
    font-size: 11.5px;
    line-height: 1.45;
  }

  .trust-list {
    gap: 7px;
  }

  .trust-list article {
    min-height: 52px;
    padding: 8px 10px;
  }

  .footer-bottom {
    display: grid;
    justify-content: stretch;
    gap: 7px;
  }
}

.footer {
  width: 100%;
  max-width: none;
  margin: 56px 0 0;
  padding: 46px 0 24px;
  background: rgba(255, 255, 255, .92);
  border-top: 1px solid rgba(22, 163, 74, .12);
  box-sizing: border-box;
  overflow: hidden;
}

.footer .shell {
  width: min(1240px, calc(100vw - 48px));
  margin-inline: auto;
}

.footer-grid {
  grid-template-columns: minmax(260px, 1.2fr) minmax(180px, .62fr) minmax(320px, .95fr);
  gap: clamp(28px, 5vw, 84px);
  align-items: start;
}

.footer h2 {
  margin-bottom: 16px;
  color: #0f1f16;
  font-size: 24px;
  line-height: 1.15;
}

.footer h3 {
  margin-bottom: 16px;
  color: #0f1f16;
  font-size: 18px;
  line-height: 1.2;
}

.footer p {
  max-width: 620px;
  margin: 0;
}

.footer p,
.footer a {
  color: #6b766f;
  font-size: 14px;
  line-height: 1.75;
}

.footer a {
  width: fit-content;
  text-decoration: none;
}

.footer a:hover {
  color: var(--red);
}

.footer-bottom {
  width: min(1240px, calc(100vw - 48px));
  margin: 34px auto 0;
  padding-top: 18px;
  border-top: 1px solid rgba(15, 23, 42, .08);
  align-items: center;
}

.footer-bottom span:last-child {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.footer-bottom a {
  color: inherit;
}

@media (max-width: 900px) {
  .footer {
    margin-top: 34px;
    padding: 34px 0 calc(96px + env(safe-area-inset-bottom));
  }

  .footer .shell,
  .footer-bottom {
    width: min(100vw - 28px, 720px);
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .footer-bottom {
    display: grid;
    gap: 10px;
    justify-content: stretch;
  }

  .footer-bottom span:last-child {
    justify-content: flex-start;
  }
}

@media (max-width: 760px) {
  .toast-stack {
    left: 10px;
    right: 10px;
    bottom: calc(78px + env(safe-area-inset-bottom));
    width: auto;
    gap: 6px;
    z-index: 2147483600;
  }

  .toast-card {
    grid-template-columns: 28px minmax(0, 1fr) 26px;
    gap: 8px;
    padding: 9px 10px;
    border-radius: 12px;
    box-shadow: 0 12px 28px rgba(15, 23, 42, .14);
  }

  .toast-icon {
    width: 28px;
    height: 28px;
  }

  .toast-icon .icon {
    width: 15px;
    height: 15px;
  }

  .toast-text {
    font-size: 12px;
    line-height: 1.35;
  }

  .toast-close {
    width: 26px;
    height: 26px;
    font-size: 18px;
  }

  body.premium-fullscreen .premium-checkout-panel {
    display: none;
  }

  body.premium-fullscreen.premium-detail-open .site-header,
  body.premium-fullscreen.premium-detail-open .main-nav,
  body.premium-fullscreen.premium-detail-open .floating-cart {
    display: none !important;
  }

  body.premium-fullscreen.premium-detail-open {
    overflow: auto;
    background:
      radial-gradient(circle at 0% 18%, rgba(134, 239, 172, .24), transparent 34%),
      radial-gradient(circle at 94% 0%, rgba(187, 247, 208, .22), transparent 32%),
      linear-gradient(180deg, #fbfffc 0%, #f1fff6 52%, #ffffff 100%);
  }

  body.premium-fullscreen.premium-detail-open .premium-banner,
  body.premium-fullscreen.premium-detail-open .premium-shop-head,
  body.premium-fullscreen.premium-detail-open .premium-products-panel,
  body.premium-fullscreen.premium-detail-open .premium-orders-panel,
  body.premium-fullscreen.premium-detail-open .premium-selected-bar {
    display: none !important;
  }

  body.premium-fullscreen.premium-detail-open #premiumAppsView,
  body.premium-fullscreen.premium-detail-open .premium-page,
  body.premium-fullscreen.premium-detail-open .premium-shell,
  body.premium-fullscreen.premium-detail-open .premium-layout {
    display: block;
    width: 100%;
    min-height: 100svh;
    margin: 0;
    padding: 0;
  }

  body.premium-fullscreen.premium-detail-open::after {
    display: none;
  }

  body.premium-fullscreen.premium-detail-open .premium-checkout-panel {
    position: relative;
    inset: auto;
    z-index: 1;
    display: block;
    width: min(100%, 520px);
    min-height: 100svh;
    margin: 0 auto;
    padding: calc(10px + env(safe-area-inset-top)) 14px 16px;
    overflow-x: hidden;
    overflow-y: visible;
    overscroll-behavior: auto;
    touch-action: auto;
    contain: none;
    -webkit-overflow-scrolling: auto;
    border: 0;
    border-radius: 0;
    color: #123524;
    background:
      radial-gradient(circle at 0% 18%, rgba(134, 239, 172, .24), transparent 34%),
      radial-gradient(circle at 94% 0%, rgba(187, 247, 208, .22), transparent 32%),
      linear-gradient(180deg, #fbfffc 0%, #f1fff6 52%, #ffffff 100%);
    box-shadow: none;
  }

  body.premium-fullscreen .premium-detail-close {
    position: sticky;
    top: calc(8px + env(safe-area-inset-top));
    float: right;
    z-index: 1002;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 999px;
    border: 1px solid rgba(34, 197, 94, .22);
    background: #ffffff;
    color: #0f5f34;
    font-size: 20px;
    font-weight: 900;
  }

  body.premium-fullscreen.premium-detail-open .premium-selected-bar:not(.hidden) {
    display: none;
  }

  body.premium-fullscreen.premium-detail-open .premium-buy-form > label {
    display: none;
  }

  body.premium-fullscreen.premium-detail-open .premium-buy-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    position: static;
    width: min(100%, 460px);
    margin: 10px auto 0;
    padding: 10px;
    transform: none;
    background: rgba(255, 255, 255, .98);
    border: 1px solid rgba(34, 197, 94, .16);
    border-radius: 18px;
    box-shadow: 0 18px 44px rgba(15, 23, 42, .08);
  }

  body.premium-fullscreen.premium-detail-open .premium-coupon-card,
  body.premium-fullscreen.premium-detail-open .premium-coupon-result,
  body.premium-fullscreen.premium-detail-open .premium-buy-form .gold-btn {
    grid-column: 1 / -1;
  }

  body.premium-fullscreen.premium-detail-open .premium-form-close {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    min-width: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
  }

  body.premium-fullscreen.premium-detail-open .premium-coupon-card {
    display: grid;
    gap: 7px;
    padding: 9px;
    border-radius: 13px;
  }

  body.premium-fullscreen.premium-detail-open .premium-coupon-head {
    gap: 7px;
  }

  body.premium-fullscreen.premium-detail-open .premium-coupon-head span {
    min-width: 44px;
  height: 22px;
    padding: 0 8px;
    font-size: 10px;
  }

  body.premium-fullscreen.premium-detail-open .premium-coupon-head strong {
    font-size: 12px;
  }

  body.premium-fullscreen.premium-detail-open .premium-coupon-card .premium-coupon-row {
    grid-template-columns: minmax(0, 1fr) 84px;
    gap: 7px;
  }

  body.premium-fullscreen.premium-detail-open .premium-coupon-card input {
    min-width: 0;
    min-height: 40px;
    padding: 9px 10px;
    border-radius: 11px;
    font-size: 12px;
  }

  body.premium-fullscreen.premium-detail-open .premium-coupon-card .light-btn {
    min-width: 0;
    min-height: 40px;
    padding: 8px 9px;
    border-radius: 11px;
    font-size: 12px;
    white-space: nowrap;
  }

  body.premium-fullscreen.premium-detail-open .premium-coupon-result {
    padding: 9px 10px;
    border-radius: 13px;
  }

  body.premium-fullscreen.premium-detail-open .premium-coupon-result strong {
    font-size: 18px;
  }

  body.premium-fullscreen.premium-detail-open .premium-coupon-result .ghost {
    min-height: 32px;
    padding: 7px 10px;
    font-size: 12px;
  }

  body.premium-fullscreen.premium-detail-open .premium-selected {
    display: grid;
    gap: 10px;
    max-width: 460px;
    min-height: auto;
    margin: 0 auto;
    padding: 0;
  }

  body.premium-fullscreen.premium-detail-open .premium-mobile-hero {
    grid-template-columns: 68px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    padding-top: 2px;
  }

  body.premium-fullscreen.premium-detail-open .premium-selected-img {
    width: 68px;
    height: 68px;
    border: 1px solid rgba(34, 197, 94, .20);
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 14px 32px rgba(34, 197, 94, .12);
  }

  body.premium-fullscreen.premium-detail-open .premium-selected-img img {
    object-fit: contain;
  }

  body.premium-fullscreen.premium-detail-open .premium-selected h2 {
    color: #10261a;
    font-size: 18px;
    line-height: 1.22;
    text-shadow: none;
  }

  body.premium-fullscreen.premium-detail-open .premium-mobile-title > span {
    color: #16a34a;
    background: rgba(34, 197, 94, .10);
    box-shadow: none;
  }

  body.premium-fullscreen.premium-detail-open .premium-mobile-price {
    display: block;
    color: #16a34a;
    font-size: 30px;
    line-height: 1;
    font-weight: 1000;
    letter-spacing: 0;
  }

  body.premium-fullscreen.premium-detail-open .premium-price-box {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  body.premium-fullscreen.premium-detail-open .premium-price-box div {
    min-height: 50px;
    padding: 8px;
    border: 1px solid rgba(34, 197, 94, .12);
    border-radius: 12px;
    background: rgba(236, 253, 245, .72);
  }

  body.premium-fullscreen.premium-detail-open .premium-price-box span {
    color: #6b8073;
    font-size: 10px;
  }

  body.premium-fullscreen.premium-detail-open .premium-price-box strong {
    color: #16a34a;
    font-size: 13px;
    line-height: 1.1;
    word-break: break-word;
  }

  body.premium-fullscreen.premium-detail-open .premium-mobile-detail-box {
    display: grid;
    gap: 10px;
    margin-top: 2px;
    padding: 14px;
    border: 1px solid rgba(34, 197, 94, .18);
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 14px 34px rgba(15, 23, 42, .08);
  }

  body.premium-fullscreen.premium-detail-open .premium-mobile-detail-box h3 {
    margin: 0;
    color: #10261a;
    font-size: 15px;
    line-height: 1.2;
    font-weight: 950;
  }

  body.premium-fullscreen.premium-detail-open .premium-mobile-detail-box ul {
    display: grid;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  body.premium-fullscreen.premium-detail-open .premium-mobile-detail-box li,
  body.premium-fullscreen.premium-detail-open .premium-mobile-warning {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    align-items: start;
    gap: 6px;
    margin: 0;
    color: #52665b;
    font-size: 13px;
    font-weight: 850;
    line-height: 1.35;
  }

  body.premium-fullscreen.premium-detail-open .premium-mobile-detail-box li > span:not(.premium-detail-icon) {
    color: #52665b;
  }

  body.premium-fullscreen.premium-detail-open .premium-detail-icon-ok {
    color: #16a34a;
  }

  body.premium-fullscreen.premium-detail-open .premium-detail-icon-bad {
    color: #ff285e;
  }

  body.premium-fullscreen.premium-detail-open .premium-demo-note {
    color: #5d7165;
    background: rgba(236, 253, 245, .72);
    border-color: rgba(34, 197, 94, .16);
    font-size: 11px;
    line-height: 1.45;
    padding: 10px;
    border-radius: 14px;
  }

  body.premium-fullscreen.premium-detail-open .premium-buy-form .gold-btn {
    width: 100%;
    min-height: 48px;
    border-radius: 14px;
    color: #052e16;
    background:#86efac;
    box-shadow: 0 14px 30px rgba(34, 197, 94, .18);
    pointer-events: auto;
  }

  body.premium-fullscreen .premium-page,
  body.premium-fullscreen .premium-shell {
    padding-bottom: calc(34px + env(safe-area-inset-bottom));
  }

  body.premium-fullscreen .premium-selected-bar:not(.hidden) {
    position: fixed;
    left: 10px;
    right: 10px;
    bottom: calc(82px + env(safe-area-inset-bottom));
    z-index: 145;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    width: auto;
    min-height: 68px;
    padding: 10px;
    border: 1px solid rgba(34, 197, 94, .34);
    border-radius: 20px;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 18px 45px rgba(15, 23, 42, .18), 0 0 0 1px rgba(255, 255, 255, .78) inset;
    backdrop-filter: blur(18px);
  }

  body.premium-fullscreen .premium-selected-pill {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    min-width: 0;
  }

  body.premium-fullscreen .premium-selected-pill-img,
  body.premium-fullscreen .premium-selected-pill-img img {
    width: 44px;
    height: 44px;
    border-radius: 14px;
  }

  body.premium-fullscreen .premium-selected-pill-copy {
    display: grid;
    gap: 3px;
    min-width: 0;
  }

  body.premium-fullscreen .premium-selected-pill-copy strong {
    overflow: hidden;
    color: #0f1f16;
    font-size: 13px;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body.premium-fullscreen .premium-selected-pill-copy small {
    overflow: hidden;
    color: #66756c;
    font-size: 11px;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body.premium-fullscreen .premium-selected-buy {
    min-width: 92px;
    min-height: 46px;
    padding: 0 14px;
    border-radius: 15px;
    white-space: nowrap;
  }
}

body.premium-fullscreen .premium-card::after {
  display: none !important;
  content: none !important;
}


body.premium-fullscreen .premium-card-action {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  min-height: 42px;
  padding: 0 12px;
  border: 1px solid rgba(34, 197, 94, .28);
  border-radius: 14px;
  color: #06391f;
  background: #ffffff;
  font-size: 13px;
  font-weight: 950;
  box-shadow: 0 10px 22px rgba(15, 23, 42, .08);
}

body.premium-fullscreen .premium-card-action .icon {
  width: 16px;
  height: 16px;
}

body.premium-fullscreen .premium-card.active .premium-card-action {
  border-color: rgba(34, 197, 94, .45);
  color: #052e16;
  background: linear-gradient(135deg, #dcfce7, #bbf7d0);
  transition:
    border-color .3s ease,
    background .3s ease,
    color .3s ease,
    box-shadow .3s ease;
  box-shadow: 0 12px 28px rgba(34, 197, 94, .16);
}

body.premium-fullscreen #premiumAppsView.premium-selection-changing .premium-selected,
body.premium-fullscreen #premiumAppsView.premium-selection-changing .premium-selected-bar:not(.hidden) {
  opacity: .72;
  transform: translateY(7px) scale(.992);
}

body.premium-fullscreen #premiumAppsView.premium-selection-settled .premium-selected,
body.premium-fullscreen #premiumAppsView.premium-selection-settled .premium-selected-bar:not(.hidden) {
  animation: premium-detail-soft-in .42s cubic-bezier(.2, .8, .2, 1);
}

body.premium-fullscreen .premium-selected,
body.premium-fullscreen .premium-selected-bar:not(.hidden) {
  transition:
    opacity .34s ease,
    transform .34s cubic-bezier(.2, .8, .2, 1),
    box-shadow .34s ease;
}

@keyframes premium-card-soft-select {
  0% {
    transform: translateY(0) scale(.985);
    filter: saturate(.92);
  }
  55% {
    transform: translateY(-5px) scale(1.018);
    filter: saturate(1.12);
  }
  100% {
    transform: translateY(-3px) scale(1.01);
    filter: saturate(1);
  }
}

@keyframes premium-card-image-glow {
  0% { filter: brightness(.96); }
  50% { filter: brightness(1.08); }
  100% { filter: brightness(1); }
}

@keyframes premium-detail-soft-in {
  0% {
    opacity: .62;
    transform: translateY(10px) scale(.99);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.premium-card-action-short {
  display: none;
}

.premium-mobile-hero {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
}

.premium-mobile-title {
  display: grid;
  gap: 6px;
}

.premium-mobile-title > span {
  width: fit-content;
  padding: 5px 12px;
  border-radius: 999px;
  color: #0f8f55;
  background: rgba(34, 197, 94, .10);
  font-size: 12px;
  font-weight: 950;
}

.premium-mobile-title h2 {
  margin: 0;
}

.premium-mobile-price {
  display: none;
}

.premium-mobile-detail-box {
  display: none;
}

.premium-form-close {
  display: none;
}

.premium-image-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}

.premium-image-actions .compact-file {
  margin: 0;
}

.premium-image-actions .small-btn {
  min-height: 36px;
  padding: 8px 12px;
}

.premium-detail-icon {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  flex: 0 0 auto;
}

.premium-detail-icon svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.premium-detail-icon-ok {
  color: #16a34a;
  background: #dcfce7;
}

.premium-detail-icon-bad {
  color: #ef4444;
  background: #fee2e2;
}

@media (max-width: 760px) {
  body.premium-fullscreen .premium-card-action {
    min-height: 38px;
    border-radius: 12px;
    font-size: 12px;
  }
}

@media (max-width: 760px) {
  body.premium-fullscreen .premium-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 7px !important;
  }

  body.premium-fullscreen .premium-card {
    min-height: 152px !important;
    gap: 5px !important;
    padding-bottom: 6px !important;
    border: 1px solid rgba(34, 197, 94, .24) !important;
    border-radius: 14px !important;
    background: linear-gradient(180deg, #ffffff, #f7fff9) !important;
    box-shadow: 0 12px 28px rgba(22, 163, 74, .12) !important;
  }

  body.premium-fullscreen .premium-card-img {
    height: 58px !important;
    border-radius: 14px 14px 0 0 !important;
    background: linear-gradient(135deg, #ecfff2, #ffffff) !important;
  }

  body.premium-fullscreen .premium-card-img img {
    padding: 5px !important;
  }

  body.premium-fullscreen .premium-card-body {
    gap: 4px !important;
    padding: 0 7px !important;
  }

  body.premium-fullscreen .premium-card-body strong {
    min-height: 26px !important;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: 9.5px !important;
    line-height: 1.2 !important;
  }

  body.premium-fullscreen .premium-card-price {
    justify-content: center;
    width: 100%;
    min-height: 24px;
    padding: 2px 5px !important;
    border-radius: 999px !important;
    font-size: 8px !important;
    border: 1px solid rgba(34, 197, 94, .18);
  }

  body.premium-fullscreen .premium-card-price b {
    font-size: 12px !important;
  }

  body.premium-fullscreen .premium-card-price small,
  body.premium-fullscreen .premium-card-price em {
    display: none !important;
  }

  body.premium-fullscreen .premium-card-price em {
    font-size: 8px !important;
  }

  body.premium-fullscreen .premium-detail-line {
    display: none !important;
  }

  body.premium-fullscreen .premium-card-bottom {
    justify-items: center !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 0 7px !important;
  }

  body.premium-fullscreen .premium-stock-line {
    justify-self: center !important;
    max-width: 100%;
    min-width: 26px;
    padding: 2px 6px !important;
    border-radius: 999px !important;
    font-size: 8px !important;
    white-space: nowrap;
  }

  body.premium-fullscreen .premium-stock-line b {
    font-size: 9px !important;
  }

  body.premium-fullscreen .premium-card-action {
    display: grid !important;
    place-items: center !important;
    justify-content: center !important;
    align-content: center !important;
    min-height: 26px !important;
    width: 100%;
    padding: 0 6px !important;
    border-radius: 10px !important;
    font-size: 0 !important;
    line-height: 1;
    text-align: center;
    gap: 0 !important;
  }

  body.premium-fullscreen .premium-card-action .icon {
    display: block !important;
    width: 14px !important;
    height: 14px !important;
    margin: 0 auto !important;
  }

  body.premium-fullscreen .premium-card-action-text {
    display: none;
  }

  body.premium-fullscreen .premium-card-action-short {
    display: none;
  }

  body.premium-fullscreen.premium-detail-open .premium-checkout-panel {
    width: min(100%, 430px);
    min-height: auto;
    padding-left: 12px;
    padding-right: 12px;
    padding-bottom: calc(42px + env(safe-area-inset-bottom));
  }

  body.premium-fullscreen.premium-detail-open .premium-mobile-hero {
    grid-template-columns: 56px minmax(0, 1fr);
    gap: 9px;
  }

  body.premium-fullscreen.premium-detail-open .premium-selected-img {
    width: 56px;
    height: 56px;
    border-radius: 15px;
  }

  body.premium-fullscreen.premium-detail-open .premium-selected h2 {
    font-size: 16px;
  }

  body.premium-fullscreen.premium-detail-open .premium-mobile-price {
    font-size: 26px;
  }

  body.premium-fullscreen.premium-detail-open .premium-mobile-detail-box {
    padding: 12px;
    border-radius: 16px;
  }

  body.premium-fullscreen.premium-detail-open .premium-buy-form {
    position: static !important;
    inset: auto !important;
    width: min(100%, 430px);
    margin: 12px auto 0;
    padding-bottom: calc(14px + env(safe-area-inset-bottom));
    transform: none !important;
  }
}

@media (max-width: 760px) {
  .main-nav,
  body.premium-fullscreen .main-nav {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
  }

  .main-nav a,
  body.premium-fullscreen .main-nav a {
    flex: 0 0 72px !important;
    min-width: 72px !important;
    scroll-snap-align: center;
  }
}

@media (max-width: 370px) {
  .main-nav a,
  body.premium-fullscreen .main-nav a {
    flex-basis: 64px !important;
    min-width: 64px !important;
  }
}

@media (min-width: 761px) {
  body.premium-fullscreen .premium-layout {
    grid-template-columns: minmax(0, 1fr) minmax(390px, 440px);
    gap: 22px;
  }

  body.premium-fullscreen .premium-checkout-panel {
    position: sticky;
    top: 96px;
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    gap: 16px;
    max-height: calc(100svh - 118px);
    overflow: hidden;
    padding: 22px;
    border-radius: 18px;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(246, 255, 249, .94)),
      radial-gradient(circle at 96% 0%, rgba(134, 239, 172, .22), transparent 32%);
    box-shadow: 0 24px 54px rgba(22, 163, 74, .12);
  }

  body.premium-fullscreen .premium-detail-close,
  body.premium-fullscreen .premium-form-close {
    display: none;
  }

  body.premium-fullscreen .premium-selected {
    display: grid;
    gap: 16px;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    padding-right: 6px;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--orange) 40%, transparent) transparent;
  }

  body.premium-fullscreen .premium-selected::-webkit-scrollbar {
    width: 6px;
  }

  body.premium-fullscreen .premium-selected::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: color-mix(in srgb, var(--orange) 34%, transparent);
  }

  body.premium-fullscreen .premium-selected::-webkit-scrollbar-track {
    background: transparent;
  }

  body.premium-fullscreen .premium-mobile-hero {
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr);
    gap: 14px;
    align-items: center;
    padding-bottom: 4px;
  }

  body.premium-fullscreen .premium-selected-img {
    width: 76px;
    height: 76px;
    border: 1px solid rgba(34, 197, 94, .16);
    border-radius: 16px;
    background: #f0fdf4;
  }

  body.premium-fullscreen .premium-selected-img img {
    padding: 6px;
    object-fit: cover;
  }

  body.premium-fullscreen .premium-mobile-title {
    display: grid;
    gap: 8px;
    min-width: 0;
  }

  body.premium-fullscreen .premium-mobile-title > span {
    width: fit-content;
    max-width: 100%;
    padding: 6px 12px;
    border-radius: 999px;
    color: #0f8f55;
    background: #dcfce7;
    font-size: 12px;
    font-weight: 950;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  body.premium-fullscreen .premium-mobile-title h2 {
    margin: 0;
    color: #102519;
    font-size: 20px;
    line-height: 1.3;
  }

  body.premium-fullscreen .premium-mobile-price {
    display: block;
    color: #16a34a;
    font-size: 30px;
    line-height: 1;
  }

  body.premium-fullscreen .premium-price-box {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  body.premium-fullscreen .premium-price-box div {
    min-height: 72px;
    padding: 13px;
    border: 1px solid rgba(34, 197, 94, .14);
    border-radius: 15px;
    background: #f0fdf4;
  }

  body.premium-fullscreen .premium-price-box span {
    color: #607568 !important;
    font-size: 12px;
    font-weight: 850;
  }

  body.premium-fullscreen .premium-price-box strong {
    margin-top: 5px;
    color: #16a34a;
    font-size: 18px;
  }

  body.premium-fullscreen .premium-mobile-detail-box {
    display: grid;
    gap: 10px;
    padding: 15px;
    border: 1px solid rgba(34, 197, 94, .16);
    border-radius: 16px;
    background: #ffffff;
  }

  body.premium-fullscreen .premium-mobile-detail-box h3 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: #102519;
    font-size: 16px;
    line-height: 1.25;
  }

  body.premium-fullscreen .premium-mobile-detail-box ul {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  body.premium-fullscreen .premium-mobile-detail-box li,
  body.premium-fullscreen .premium-mobile-warning {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    gap: 8px;
    margin: 0;
    color: #52665b;
    font-size: 13px;
    font-weight: 750;
    line-height: 1.45;
  }

  body.premium-fullscreen .premium-mobile-detail-box li > span:not(.premium-detail-icon) {
    color: #52665b;
  }

  body.premium-fullscreen .premium-detail-icon-ok {
    color: #16a34a;
  }

  body.premium-fullscreen .premium-detail-icon-bad {
    color: #ef4444;
  }

  body.premium-fullscreen .premium-demo-note {
    margin: 0;
    padding: 13px 14px;
    border: 1px dashed rgba(34, 197, 94, .24);
    border-radius: 15px;
    color: #52665b !important;
    background: #f0fdf4;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.55;
  }

  body.premium-fullscreen .premium-buy-form {
    display: grid;
    gap: 11px;
    margin-top: 0;
    padding-top: 14px;
    border-top: 1px solid color-mix(in srgb, var(--orange) 18%, var(--line));
    background: linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,255,255,.96));
  }

  body.premium-fullscreen .premium-buy-form label {
    display: grid;
    gap: 8px;
    color: #52665b !important;
    font-size: 13px;
    font-weight: 900;
  }

  body.premium-fullscreen .premium-buy-form textarea {
    min-height: 92px;
    padding: 12px 14px;
    border-radius: 14px;
    font-size: 13px;
    line-height: 1.45;
  }

  body.premium-fullscreen .premium-buy-form .gold-btn {
    min-height: 48px;
    border-radius: 14px;
    font-size: 15px;
  }
}

@media (max-width: 760px) {
  #authModal,
  #authModal * {
    box-sizing: border-box;
  }

  #authModal,
  #authModal .auth-card,
  #authModal .auth-visual,
  #authModal .auth-form,
  #authModal .auth-panel,
  #authModal .field,
  #authModal .input-wrap,
  #authModal .auth-tabs,
  #authModal .check-row {
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
    touch-action: pan-y !important;
  }

  #authModal input,
  #authModal button {
    max-width: 100% !important;
  }

  input,
  select,
  textarea,
  .input-wrap input,
  .wallet-proof-form input,
  .premium-coupon-card input,
  .premium-buy-form textarea,
  .auth-form input {
    font-size: 16px !important;
  }

  .main-nav,
  body.premium-fullscreen .main-nav {
    position: fixed !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    will-change: auto;
  }

  body.premium-fullscreen.premium-detail-open .premium-checkout-panel {
    width: min(100%, 440px) !important;
    padding: calc(12px + env(safe-area-inset-top)) 18px calc(56px + env(safe-area-inset-bottom)) !important;
  }

  body.premium-fullscreen.premium-detail-open .premium-selected {
    gap: 14px !important;
    max-width: 440px !important;
  }

  body.premium-fullscreen.premium-detail-open .premium-mobile-hero {
    grid-template-columns: 64px minmax(0, 1fr) !important;
    gap: 13px !important;
    align-items: start !important;
    padding: 4px 0 2px !important;
  }

  body.premium-fullscreen.premium-detail-open .premium-selected-img {
    width: 64px !important;
    height: 64px !important;
    border-radius: 17px !important;
  }

  body.premium-fullscreen.premium-detail-open .premium-selected h2 {
    font-size: 16px !important;
    line-height: 1.36 !important;
  }

  body.premium-fullscreen.premium-detail-open .premium-mobile-title {
    gap: 7px !important;
  }

  body.premium-fullscreen.premium-detail-open .premium-mobile-price {
    margin-top: 4px !important;
    font-size: 28px !important;
    line-height: 1.1 !important;
  }

  body.premium-fullscreen.premium-detail-open .premium-price-box {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  body.premium-fullscreen.premium-detail-open .premium-price-box div {
    min-height: 66px !important;
    padding: 12px !important;
    border-radius: 16px !important;
  }

  body.premium-fullscreen.premium-detail-open .premium-price-box span {
    margin-bottom: 5px !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
  }

  body.premium-fullscreen.premium-detail-open .premium-price-box strong {
    font-size: 15px !important;
    line-height: 1.25 !important;
  }

  body.premium-fullscreen.premium-detail-open .premium-mobile-detail-box {
    gap: 13px !important;
    padding: 16px !important;
    border-radius: 20px !important;
  }

  body.premium-fullscreen.premium-detail-open .premium-mobile-detail-box h3 {
    font-size: 16px !important;
    line-height: 1.35 !important;
  }

  body.premium-fullscreen.premium-detail-open .premium-mobile-detail-box ul {
    gap: 9px !important;
  }

  body.premium-fullscreen.premium-detail-open .premium-mobile-detail-box li,
  body.premium-fullscreen.premium-detail-open .premium-mobile-warning {
    grid-template-columns: 22px minmax(0, 1fr) !important;
    gap: 8px !important;
    font-size: 12.5px !important;
    line-height: 1.55 !important;
  }

  body.premium-fullscreen.premium-detail-open .premium-detail-icon {
    margin-top: 1px !important;
  }

  body.premium-fullscreen.premium-detail-open .premium-buy-form {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px !important;
    position: static !important;
    inset: auto !important;
    width: min(100%, 440px) !important;
    margin: 14px auto 0 !important;
    padding: 12px 12px calc(18px + env(safe-area-inset-bottom)) !important;
    border-radius: 20px !important;
    transform: none !important;
  }

  body.premium-fullscreen.premium-detail-open .premium-buy-form > label,
  body.premium-fullscreen.premium-detail-open .premium-buy-form textarea,
  body.premium-fullscreen.premium-detail-open .premium-form-close {
    display: none !important;
  }

  body.premium-fullscreen.premium-detail-open .premium-coupon-card,
  body.premium-fullscreen.premium-detail-open .premium-coupon-result,
  body.premium-fullscreen.premium-detail-open .premium-buy-form .gold-btn {
    grid-column: 1 / -1 !important;
    width: 100% !important;
  }

  body.premium-fullscreen.premium-detail-open .premium-coupon-card {
    gap: 10px !important;
    padding: 12px !important;
    border-radius: 16px !important;
  }

  body.premium-fullscreen.premium-detail-open .premium-coupon-card .premium-coupon-row {
    grid-template-columns: minmax(0, 1fr) 82px !important;
    gap: 9px !important;
  }

  body.premium-fullscreen.premium-detail-open .premium-coupon-result {
    padding: 12px !important;
    border-radius: 16px !important;
  }

  body.premium-fullscreen.premium-detail-open .premium-buy-form .gold-btn {
    min-height: 54px;
    white-space: normal;
  }
}

@media (max-width: 340px) {
  body.premium-fullscreen.premium-detail-open .premium-checkout-panel {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  body.premium-fullscreen.premium-detail-open .premium-coupon-card .premium-coupon-row {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

@media (max-width: 760px) {
  html,
  body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  .site-header,
  main,
  .footer,
  body.premium-fullscreen .site-header,
  body.premium-fullscreen main {
    width: 100% !important;
    max-width: 100% !important;
  }

  .shell,
  body.premium-fullscreen .site-header .shell,
  body.premium-fullscreen .premium-shell,
  .game-menu-page .game-topup-shell {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }

  .main-nav,
  body.premium-fullscreen .main-nav {
    left: 8px !important;
    right: 8px !important;
    width: auto !important;
    display: grid !important;
    grid-auto-flow: column !important;
    grid-auto-columns: minmax(62px, 1fr) !important;
    justify-content: stretch !important;
    overflow-x: auto !important;
  }

  .main-nav a,
  body.premium-fullscreen .main-nav a {
    min-width: 0 !important;
    width: 100% !important;
    flex: initial !important;
  }

  .recommend-track {
    grid-auto-columns: minmax(154px, 46vw) !important;
  }

  #recommendedProducts .recommend-track {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-columns: auto !important;
    gap: 9px !important;
    width: 100% !important;
  }

  #recommendedProducts .recommend-card {
    padding: 8px !important;
    border-radius: 16px !important;
  }

  .store-grid,
  body.premium-fullscreen .premium-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .recommend-card,
  .product-card,
  body.premium-fullscreen .premium-card {
    width: 100% !important;
    min-width: 0 !important;
  }

  .recommend-media,
  .product-media,
  body.premium-fullscreen .premium-poster {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 100 / 78 !important;
    overflow: hidden !important;
  }

  .recommend-media {
    aspect-ratio: var(--fit-mobile-ratio, var(--fit-desktop-ratio, 1 / 1)) !important;
    background: #071f14 !important;
  }

  #recommendedProducts .recommend-media {
    border-radius: 12px !important;
  }

  .recommend-media > img,
  .product-media > img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    display: block !important;
  }

  .recommend-media > .managed-image,
  .orange-hero > .managed-image,
  body.premium-fullscreen .premium-banner > .managed-image {
    object-fit: contain !important;
    object-position: var(--fit-mobile-x, 50%) var(--fit-mobile-y, 50%) !important;
    transform: scale(var(--fit-mobile-zoom, 1)) !important;
    transform-origin: var(--fit-mobile-x, 50%) var(--fit-mobile-y, 50%) !important;
    background: #071f14 !important;
  }

  #categoriesView .category-card > .managed-image {
    position: relative !important;
    inset: auto !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 3 / 1 !important;
    object-fit: cover !important;
    object-position: center !important;
    transform: none !important;
    background: #f1f3f2 !important;
  }

  .managed-image-desktop:has(+ .managed-image-mobile),
  .managed-image-desktop.has-mobile-pair {
    display: none !important;
  }

  .managed-image-mobile {
    display: block !important;
  }

  .category-grid,
  #featuredCategories {
    overflow: hidden !important;
  }

  #featuredCategories,
  #categoryList.category-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 9px !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .category-card.has-category-image {
    min-height: 0 !important;
    aspect-ratio: auto !important;
    background-color: #071f14 !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
  }

  #featuredCategories .category-card.has-category-image,
  #categoryList.category-grid .category-card.has-category-image {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 16px !important;
  }

  .orange-hero.has-uploaded-banner,
  body.premium-fullscreen .premium-banner.has-image {
    min-height: 0 !important;
    height: auto !important;
    aspect-ratio: var(--fit-mobile-ratio, var(--fit-desktop-ratio, 16 / 5)) !important;
  }
}

body.premium-fullscreen .premium-selected-pill-img,
body.premium-fullscreen .premium-selected-img {
  position: relative;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  overflow: hidden;
}

body.premium-fullscreen .premium-selected-pill-img img,
body.premium-fullscreen .premium-selected-img img {
  position: absolute;
  inset: 4px;
  display: block;
  width: calc(100% - 8px);
  height: calc(100% - 8px);
  box-sizing: border-box;
  padding: 0;
  object-fit: contain !important;
}

@media (max-width: 760px) {
  body.premium-fullscreen .premium-card {
    min-height: 260px !important;
  }

  body.premium-fullscreen .premium-card-img {
    position: relative !important;
    display: grid !important;
    place-items: center !important;
    height: 150px !important;
    min-height: 150px !important;
    overflow: hidden !important;
  }

  body.premium-fullscreen .premium-card-img img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    padding: 0 !important;
  }

  body.premium-fullscreen .premium-card-img .premium-img-fallback {
    height: 100% !important;
    min-height: 150px !important;
  }
}

/* theme-synced navigation and header surfaces */
body:not(.premium-fullscreen) .site-header {
  border-bottom-color: color-mix(in srgb, var(--gold-dark) 18%, transparent);
  background: color-mix(in srgb, var(--panel) 86%, transparent);
  box-shadow: 0 10px 34px color-mix(in srgb, var(--ink) 8%, transparent);
}

body:not(.premium-fullscreen) .site-header .shell.header-inner {
  background: transparent;
}

body:not(.premium-fullscreen) .main-nav {
  color: var(--ink);
}

body:not(.premium-fullscreen) .main-nav a {
  color: color-mix(in srgb, var(--ink) 72%, var(--muted)) !important;
}

body:not(.premium-fullscreen) .main-nav a.active,
body:not(.premium-fullscreen) .main-nav a:hover {
  border-color: color-mix(in srgb, var(--gold-dark) 62%, var(--line)) !important;
  color: var(--ink) !important;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--gold) 58%, var(--panel)),
    color-mix(in srgb, var(--gold-dark) 76%, var(--panel))
  ) !important;
  box-shadow: 0 10px 24px color-mix(in srgb, var(--gold-dark) 26%, transparent) !important;
}

body:not(.premium-fullscreen) .point-pill {
  background: color-mix(in srgb, var(--soft) 78%, var(--panel)) !important;
  color: color-mix(in srgb, var(--ink) 78%, var(--gold-dark)) !important;
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--gold-dark) 28%, var(--line)),
    0 8px 22px color-mix(in srgb, var(--gold-dark) 12%, transparent) !important;
}

body:not(.premium-fullscreen) .account-pill,
body:not(.premium-fullscreen) .ghost,
body:not(.premium-fullscreen) .light-btn {
  border-color: color-mix(in srgb, var(--gold-dark) 18%, var(--line)) !important;
  background: color-mix(in srgb, var(--panel) 88%, transparent) !important;
  color: var(--ink) !important;
}

body:not(.premium-fullscreen) .gold-btn,
body:not(.premium-fullscreen) .primary-btn {
  color: color-mix(in srgb, var(--ink) 82%, #ffffff) !important;
  background: linear-gradient(135deg, var(--gold), var(--gold-dark)) !important;
  box-shadow: 0 12px 28px color-mix(in srgb, var(--gold-dark) 24%, transparent) !important;
}

@media (max-width: 760px) {
  body:not(.premium-fullscreen) .main-nav {
    border-color: color-mix(in srgb, var(--gold-dark) 22%, transparent) !important;
    background: color-mix(in srgb, var(--panel) 92%, transparent) !important;
    box-shadow: 0 18px 45px color-mix(in srgb, var(--gold-dark) 16%, transparent) !important;
  }

  body:not(.premium-fullscreen) .main-nav a {
    border-color: color-mix(in srgb, var(--gold-dark) 16%, var(--line)) !important;
    background: color-mix(in srgb, var(--panel) 78%, transparent) !important;
  }
}

/* soft game top-up selection changes */
#gameTopupView .game-package-section,
#gameTopupView .simple-game-info,
#gameTopupView .game-topup-form,
#gameTopupView .pack-list-panel,
#gameTopupView .pack-card-grid,
#gameTopupView .simple-checkout-bar,
#gameTopupView .topup-summary {
  will-change: opacity, transform, filter;
}

#gameTopupView.topup-game-changing .game-package-section,
#gameTopupView.topup-game-changing .simple-game-info,
#gameTopupView.topup-game-changing .game-topup-form,
#gameTopupView.topup-game-changing .pack-list-panel {
  opacity: 0;
  transform: translateY(14px) scale(.992);
  filter: saturate(.92);
}

#gameTopupView.topup-game-entered .game-package-section,
#gameTopupView.topup-game-entered .simple-game-info,
#gameTopupView.topup-game-entered .game-topup-form,
#gameTopupView.topup-game-entered .pack-list-panel {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: saturate(1);
  transition:
    opacity .46s ease,
    transform .54s cubic-bezier(.2, .8, .2, 1),
    filter .46s ease;
}

#gameTopupView.topup-pack-changing .pack-card-grid,
#gameTopupView.topup-pack-changing .simple-checkout-bar,
#gameTopupView.topup-pack-changing .topup-summary {
  opacity: .46;
  transform: translateY(8px);
  filter: saturate(.88);
}

#gameTopupView.topup-pack-entered .pack-card-grid,
#gameTopupView.topup-pack-entered .simple-checkout-bar,
#gameTopupView.topup-pack-entered .topup-summary {
  opacity: 1;
  transform: translateY(0);
  filter: saturate(1);
  transition:
    opacity .38s ease,
    transform .44s cubic-bezier(.2, .8, .2, 1),
    filter .38s ease;
}

#gameTopupView.topup-pack-entered .pack-pick-card.active {
  animation: topup-pack-soft-select .52s cubic-bezier(.2, .8, .2, 1) both;
}

@keyframes topup-pack-soft-select {
  0% {
    opacity: .58;
    transform: translateY(7px) scale(.985);
  }
  60% {
    opacity: 1;
    transform: translateY(-2px) scale(1.006);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  #gameTopupView.topup-game-changing .game-package-section,
  #gameTopupView.topup-game-changing .simple-game-info,
  #gameTopupView.topup-game-changing .game-topup-form,
  #gameTopupView.topup-game-changing .pack-list-panel,
  #gameTopupView.topup-pack-changing .pack-card-grid,
  #gameTopupView.topup-pack-changing .simple-checkout-bar,
  #gameTopupView.topup-pack-changing .topup-summary,
  #gameTopupView.topup-game-entered .game-package-section,
  #gameTopupView.topup-game-entered .simple-game-info,
  #gameTopupView.topup-game-entered .game-topup-form,
  #gameTopupView.topup-game-entered .pack-list-panel,
  #gameTopupView.topup-pack-entered .pack-card-grid,
  #gameTopupView.topup-pack-entered .simple-checkout-bar,
  #gameTopupView.topup-pack-entered .topup-summary {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
    animation: none;
  }
}

/* theme-synced game top-up surfaces */
body:not(.premium-fullscreen) #gameTopupView .simple-game-info,
body:not(.premium-fullscreen) #gameTopupView .simple-step-card,
body:not(.premium-fullscreen) #gameTopupView .pack-list-panel {
  border-color: color-mix(in srgb, var(--orange) 28%, var(--line)) !important;
  background: color-mix(in srgb, var(--panel) 94%, var(--page)) !important;
  box-shadow: 0 18px 44px color-mix(in srgb, var(--orange) 10%, transparent) !important;
}

body:not(.premium-fullscreen) #gameTopupView .simple-game-kicker,
body:not(.premium-fullscreen) #gameTopupView .simple-step-title small {
  color: var(--orange) !important;
}

body:not(.premium-fullscreen) #gameTopupView .simple-step-title > span {
  color: color-mix(in srgb, var(--ink) 84%, var(--panel)) !important;
  background: linear-gradient(135deg, var(--orange), var(--gold-dark)) !important;
  box-shadow: 0 10px 22px color-mix(in srgb, var(--orange) 24%, transparent) !important;
}

body:not(.premium-fullscreen) #gameTopupView .simple-game-badges span,
body:not(.premium-fullscreen) #gameTopupView .simple-game-notes span,
body:not(.premium-fullscreen) #gameTopupView .topup-summary {
  border-color: color-mix(in srgb, var(--orange) 26%, var(--line)) !important;
  background: color-mix(in srgb, var(--soft) 74%, var(--panel)) !important;
  color: color-mix(in srgb, var(--ink) 82%, var(--orange)) !important;
}

body:not(.premium-fullscreen) #gameTopupView .simple-game-badges span::before {
  background: var(--orange) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--orange) 18%, transparent) !important;
}

body:not(.premium-fullscreen) #gameTopupView .simple-game-notes span::after {
  color: var(--orange) !important;
}

body:not(.premium-fullscreen) #gameTopupView .pack-pick-card {
  border-color: color-mix(in srgb, var(--orange) 18%, var(--line)) !important;
  background: color-mix(in srgb, var(--panel) 96%, var(--page)) !important;
  color: var(--ink) !important;
}

body:not(.premium-fullscreen) #gameTopupView .pack-pick-card:hover,
body:not(.premium-fullscreen) #gameTopupView .pack-pick-card.active {
  border-color: color-mix(in srgb, var(--orange) 62%, var(--line)) !important;
  background: color-mix(in srgb, var(--soft) 70%, var(--panel)) !important;
  box-shadow: 0 10px 24px color-mix(in srgb, var(--orange) 18%, transparent) !important;
}

body:not(.premium-fullscreen) #gameTopupView .pack-pick-card .pack-pick-name {
  color: var(--ink) !important;
}

body:not(.premium-fullscreen) #gameTopupView .pack-pick-card small {
  color: var(--muted) !important;
}

body:not(.premium-fullscreen) #gameTopupView .pack-pick-card .pack-price {
  background: color-mix(in srgb, var(--orange) 16%, var(--panel)) !important;
  color: var(--orange) !important;
}

body:not(.premium-fullscreen) #gameTopupView .pack-pick-card .pack-action {
  border-color: color-mix(in srgb, var(--orange) 30%, var(--line)) !important;
  background: color-mix(in srgb, var(--panel) 90%, var(--soft)) !important;
  color: var(--orange) !important;
}

body:not(.premium-fullscreen) #gameTopupView .pack-pick-card.active .pack-action {
  background: linear-gradient(135deg, var(--orange), var(--gold-dark)) !important;
  color: color-mix(in srgb, var(--ink) 84%, var(--panel)) !important;
}

body:not(.premium-fullscreen) #gameTopupView .topup-summary.is-empty {
  border-color: color-mix(in srgb, var(--orange) 14%, var(--line)) !important;
  background: color-mix(in srgb, var(--panel) 84%, var(--page)) !important;
  color: var(--muted) !important;
}

body:not(.premium-fullscreen) #gameTopupView #gameTopupSubmitButton.pay-transaction-btn {
  border-color: color-mix(in srgb, var(--orange) 32%, var(--line)) !important;
  background: color-mix(in srgb, var(--panel) 92%, var(--soft)) !important;
  color: var(--ink) !important;
  box-shadow: 0 16px 34px color-mix(in srgb, var(--orange) 16%, transparent) !important;
}

body:not(.premium-fullscreen) #gameTopupView #gameTopupSubmitButton.pay-transaction-btn:not(:disabled) {
  background: linear-gradient(135deg, var(--orange), var(--gold-dark)) !important;
}

/* Reference-matched game checkout */
#gameTopupView.package-mode .game-topup-shell{max-width:1440px}
#gameTopupView.package-mode .simple-topup-shell{display:block}
#gameTopupView.package-mode .simple-game-info{display:grid!important;grid-template-columns:190px 1fr;gap:28px;padding:24px;margin-bottom:16px;border:1px solid #dcebe1!important;border-radius:18px!important;background:linear-gradient(120deg,#fff 55%,#e9fbef)!important;box-shadow:0 6px 22px #163d2410!important}
#gameTopupView.package-mode .simple-game-cover{width:190px;height:150px;border-radius:14px;overflow:hidden}
#gameTopupView.package-mode .simple-game-cover img{width:100%;height:100%;object-fit:cover}
#gameTopupView.package-mode .simple-game-copy{display:flex;flex-direction:column;justify-content:center}
#gameTopupView.package-mode .simple-game-kicker{display:none}
#gameTopupView.package-mode .simple-game-copy h2{order:-2;margin:0 0 8px;font-size:25px;color:#172033}
#gameTopupView.package-mode .simple-game-copy p{order:-1;margin:0 0 18px;max-width:760px;line-height:1.65;color:#657080;font-size:14px}
#gameTopupView.package-mode .simple-game-badges{display:none}
#gameTopupView.package-mode .simple-game-notes{display:grid;grid-template-columns:repeat(4,minmax(130px,1fr));gap:12px}
#gameTopupView.package-mode .simple-game-notes span{padding:11px 12px!important;border:0!important;border-radius:9px;background:#f2faf5!important;color:#23372a!important;font-size:12px}
#gameTopupView.package-mode .simple-game-notes span:first-child:before{content:'??? ';}
#gameTopupView.package-mode .simple-game-notes:after{content:'��ԡ�õ�ʹ 24 ��.';padding:11px 12px;border-radius:9px;background:#f2faf5;color:#23372a;font-size:12px}
#gameTopupView.package-mode .simple-topup-main{display:grid;grid-template-columns:minmax(0,2.1fr) minmax(310px,.9fr);gap:18px;align-items:start}
#gameTopupView.package-mode .topup-left-column{display:grid;gap:16px}
#gameTopupView.package-mode .simple-step-card{padding:20px!important;border:1px solid #dfe7e2!important;border-radius:16px!important;background:#fff!important;box-shadow:0 5px 18px #163d240c!important}
#gameTopupView.package-mode .simple-step-title{display:flex;align-items:center;gap:12px;margin-bottom:15px}
#gameTopupView.package-mode .simple-step-title>span{width:30px;height:30px;display:grid;place-items:center;border-radius:50%;background:#0da246!important;color:#fff!important;box-shadow:none!important}
#gameTopupView.package-mode .simple-step-title small{display:none}
#gameTopupView.package-mode .simple-step-title h2{font-size:16px;margin:0;color:#222b36}
#gameTopupView.package-mode .game-topup-form label{font-size:0}
#gameTopupView.package-mode .game-topup-form input{height:48px;border:1px solid #ccd7df;border-radius:9px;font-size:14px;padding:0 15px}
#gameTopupView.package-mode .uid-warning{margin:9px 0 0;padding:9px 12px;border:1px solid #ffd99a;border-radius:8px;background:#fff9ed;color:#d78313;font-size:12px}
#gameTopupView.package-mode .pack-head{display:flex;justify-content:space-between;align-items:center}
#gameTopupView.package-mode #gameTopupBack{font-size:12px;color:#07913d;background:#effaf3;border:0;border-radius:8px}
#gameTopupView.package-mode .simple-pack-grid{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
#gameTopupView.package-mode .pack-list-header{display:none}
#gameTopupView.package-mode .pack-pick-card{display:grid!important;grid-template-columns:58px 1fr!important;grid-template-rows:auto auto!important;gap:5px 10px!important;min-height:108px;padding:12px!important;border:1px solid #d7dfe2!important;border-radius:9px!important;background:#fff!important;text-align:left}
#gameTopupView.package-mode .pack-pick-card.active{border-color:#0bad50!important;box-shadow:0 0 0 1px #0bad50!important}
#gameTopupView.package-mode .pack-art{grid-row:1/3;width:58px;height:58px}
#gameTopupView.package-mode .pack-info{min-width:0}.pack-pick-name{font-size:14px!important}.pack-sku{display:none}
#gameTopupView.package-mode .pack-price{padding:0!important;background:none!important;color:#079d42!important;font-size:13px}
#gameTopupView.package-mode .pack-action{position:absolute;right:10px;bottom:9px;padding:5px 14px!important;border:0!important;border-radius:5px!important;background:#079d42!important;color:#fff!important;font-size:11px}
#gameTopupView.package-mode .pack-pick-card{position:relative}
#gameTopupView.package-mode>.simple-checkout-bar{display:block}
#gameTopupView.package-mode .simple-topup-main>aside.simple-checkout-bar{position:sticky;top:92px;padding:20px;border:1px solid #dfe7e2;border-radius:16px;background:#fff;box-shadow:0 5px 18px #163d240c}
.checkout-heading,.checkout-uid,.checkout-total{display:flex;justify-content:space-between;align-items:center}.checkout-heading{padding-bottom:14px;border-bottom:1px solid #e5ebe7}.checkout-heading h3{margin:0;font-size:18px}.checkout-heading span{padding:5px 8px;border-radius:12px;background:#effaf3;color:#078d3b;font-size:11px}.checkout-product{padding:16px 0;border-bottom:1px solid #e5ebe7;font-size:12px;color:#68737c}.checkout-product p{margin:10px 0 0}.checkout-product div{display:flex;justify-content:space-between;margin-top:10px;color:#202a32}.checkout-product b{color:#079d42}.checkout-uid{padding:14px 0;border-bottom:1px solid #e5ebe7;font-size:12px}.checkout-total{padding:17px 0;font-weight:700}.checkout-total strong{font-size:22px;color:#079d42}.checkout-safe{display:flex;gap:10px;padding:13px;border:1px solid #ccebd7;border-radius:8px;background:#f2fbf5;font-size:12px;color:#31513b}.checkout-safe small{color:#738078}.checkout-note{display:block;margin-top:16px;font-size:12px;color:#465149;position:relative}.checkout-note textarea{width:100%;height:78px;margin-top:8px;padding:10px;border:1px solid #d7dfe2;border-radius:8px;resize:none;font:inherit}.checkout-note>small{position:absolute;right:9px;bottom:7px;color:#89938c}.simple-topup-main>aside>.simple-checkout-bar{display:block!important;margin-top:12px}.simple-topup-main>aside .topup-summary{display:none!important}.simple-topup-main>aside .gold-btn{width:100%;min-height:48px;background:#079d42!important;color:#fff!important;border:0!important}.checkout-trust{text-align:center;color:#68766e;font-size:11px;margin:13px 0 0}
@media(max-width:900px){#gameTopupView.package-mode .simple-topup-main{grid-template-columns:1fr}#gameTopupView.package-mode .simple-topup-main>aside.simple-checkout-bar{position:static}#gameTopupView.package-mode .simple-pack-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){#gameTopupView.package-mode .simple-game-info{grid-template-columns:90px 1fr;padding:14px;gap:14px}#gameTopupView.package-mode .simple-game-cover{width:90px;height:90px}#gameTopupView.package-mode .simple-game-copy h2{font-size:17px}#gameTopupView.package-mode .simple-game-copy p,#gameTopupView.package-mode .simple-game-notes{display:none}#gameTopupView.package-mode .simple-pack-grid{grid-template-columns:1fr}#gameTopupView.package-mode .simple-step-card{padding:14px!important}}

body:not(.premium-fullscreen) #gameTopupView #gameTopupSubmitButton.pay-transaction-btn .pay-copy {
  color: var(--ink) !important;
  text-shadow: none !important;
}

body:not(.premium-fullscreen) #gameTopupView #gameTopupSubmitButton.pay-transaction-btn .pay-copy svg {
  stroke: var(--orange) !important;
}

body:not(.premium-fullscreen) #gameTopupView #gameTopupSubmitButton.pay-transaction-btn:not(:disabled) .pay-copy,
body:not(.premium-fullscreen) #gameTopupView #gameTopupSubmitButton.pay-transaction-btn:not(:disabled) .pay-copy svg {
  color: color-mix(in srgb, var(--ink) 88%, var(--panel)) !important;
  stroke: color-mix(in srgb, var(--ink) 88%, var(--panel)) !important;
}

@media (max-width: 760px) {
  body:not(.premium-fullscreen) #gameTopupView #gameTopupSubmitButton.pay-transaction-btn {
    min-height: 78px !important;
    opacity: 1 !important;
  }

  body:not(.premium-fullscreen) #gameTopupView #gameTopupSubmitButton.pay-transaction-btn:disabled {
    opacity: .82 !important;
  }

  body:not(.premium-fullscreen) #gameTopupView #gameTopupSubmitButton.pay-transaction-btn .pay-copy {
    color: var(--ink) !important;
    font-size: 15px !important;
    font-weight: 1000 !important;
  }
}

/* compact premium mobile detail spacing */
@media (max-width: 760px) {
  body.premium-fullscreen.premium-detail-open main,
  body.premium-fullscreen.premium-detail-open #premiumAppsView,
  body.premium-fullscreen.premium-detail-open .premium-page,
  body.premium-fullscreen.premium-detail-open .premium-shell,
  body.premium-fullscreen.premium-detail-open .premium-layout {
    min-height: auto !important;
    padding-bottom: 0 !important;
  }

  body.premium-fullscreen.premium-detail-open .premium-checkout-panel {
    min-height: auto !important;
    padding-bottom: calc(14px + env(safe-area-inset-bottom)) !important;
  }

  body.premium-fullscreen.premium-detail-open .premium-buy-form {
    margin-top: 8px !important;
    padding-bottom: 10px !important;
  }

  body.premium-fullscreen.premium-detail-open main + .footer,
  body.premium-fullscreen.premium-detail-open .footer {
    margin-top: 0 !important;
  }
}

/* global theme cohesion overrides */
body {
  background:
    radial-gradient(circle at 10% 12%, color-mix(in srgb, var(--gold) 14%, transparent), transparent 30%),
    radial-gradient(circle at 88% 8%, color-mix(in srgb, var(--orange) 12%, transparent), transparent 32%),
    var(--page) !important;
  color: var(--ink);
}

main {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--panel) 78%, transparent), color-mix(in srgb, var(--panel) 90%, transparent)),
    var(--page) !important;
}

.panel,
.policy,
.order-card,
.metric-card,
.sales-chart-card,
.admin-section,
.admin-table-wrap,
.product-manager-panel,
.recommended-manager-panel,
.settings-card,
.settings-contact-card,
.product-create-card,
.wallet-form-panel,
.wallet-history-panel,
.wallet-pay-card,
.wallet-admin-review,
.contact-panel,
.contact-card,
.trust-list article,
.profile-hero,
.profile-stat-card,
.profile-order-card,
.password-panel,
.asset-preview,
.settings-number-grid label,
.theme-preset-card,
.premium-order-group,
.coupon-history-wrap,
body #adminView .panel,
body #adminView .coupon-history-wrap,
body #adminView .coupon-history-table tr,
body.premium-fullscreen .premium-products-panel,
body.premium-fullscreen .premium-checkout-panel,
body.premium-fullscreen .premium-orders-panel,
body.premium-fullscreen .premium-selected,
body.premium-fullscreen .premium-selected-bar:not(.hidden),
body.premium-fullscreen .premium-card,
body.premium-fullscreen.premium-detail-open .premium-checkout-panel,
body.premium-fullscreen.premium-detail-open .premium-buy-form,
body.premium-fullscreen.premium-detail-open .premium-mobile-detail-box,
body.premium-fullscreen.premium-detail-open .premium-price-box div,
body.premium-fullscreen.premium-detail-open .premium-demo-note {
  border-color: color-mix(in srgb, var(--orange) 20%, var(--line)) !important;
  background: color-mix(in srgb, var(--panel) 92%, var(--page)) !important;
  color: var(--ink) !important;
  box-shadow: 0 16px 42px color-mix(in srgb, var(--orange) 8%, transparent) !important;
}

.admin-tabs button,
.light-btn,
.ghost,
.small-btn,
.quick-amounts button,
.wallet-methods label,
.option-toggle .toggle-ui,
.mini-toggle .toggle-ui,
.coupon-form input,
.premium-coupon-card,
.premium-coupon-card input,
.premium-coupon-card .light-btn,
.premium-coupon-result,
.payment-credit-note,
.checkout-assurance,
.verify-note,
.promptpay-info,
.wallet-tx-card,
.line-item,
.contact-panel div,
.preorder-help,
.premium-order-group-head {
  border-color: color-mix(in srgb, var(--orange) 22%, var(--line)) !important;
  background: color-mix(in srgb, var(--soft) 62%, var(--panel)) !important;
  color: var(--ink) !important;
}

input,
select,
textarea,
.input-wrap,
.form-grid input,
.settings-card input,
.settings-card select,
.settings-card textarea,
.settings-contact-card input,
.settings-contact-card select,
.settings-contact-card textarea,
.contact-admin-row input,
.product-edit-form input,
.product-edit-form select,
.product-edit-form textarea,
.product-create-card input,
.product-create-card select,
.product-create-card textarea,
.game-topup-form input,
.game-topup-form textarea,
.topup-panel-head input,
.api-settings-block input:not([type="checkbox"]),
.premium-head-actions input,
body.premium-fullscreen .premium-head-actions input,
body.premium-fullscreen .premium-buy-form textarea {
  border-color: color-mix(in srgb, var(--orange) 24%, var(--line)) !important;
  background: color-mix(in srgb, var(--panel) 90%, var(--page)) !important;
  color: var(--ink) !important;
  box-shadow: none !important;
}

input:focus,
select:focus,
textarea:focus,
.input-wrap:focus-within,
.api-settings-block input:not([type="checkbox"]):focus,
body.premium-fullscreen .premium-head-actions input:focus {
  border-color: var(--orange) !important;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--orange) 16%, transparent) !important;
}

.admin-tabs button.active,
.admin-tabs button:hover,
.gold-btn,
.primary-btn,
.quick-amounts button:hover,
.quick-amounts button.active,
.wallet-methods label:has(input:checked),
.option-toggle input:checked + .toggle-ui,
.mini-toggle input:checked + .toggle-ui,
.file-field input[type="file"]::file-selector-button,
body.premium-fullscreen .premium-card.active .premium-card-action,
body.premium-fullscreen .premium-selected-buy,
body.premium-fullscreen .premium-buy-form .gold-btn,
body.premium-fullscreen.premium-detail-open .premium-buy-form .gold-btn {
  border-color: color-mix(in srgb, var(--orange) 54%, var(--line)) !important;
  background: linear-gradient(135deg, var(--gold), var(--orange), var(--gold-dark)) !important;
  color: color-mix(in srgb, var(--ink) 86%, var(--panel)) !important;
  box-shadow: 0 12px 28px color-mix(in srgb, var(--orange) 24%, transparent) !important;
}

.admin-tabs button .icon,
.light-btn .icon,
.ghost .icon,
.contact-card i,
.trust-list i,
.wallet-method-icon,
.profile-avatar,
.premium-detail-icon-ok,
.premium-mobile-title > span,
body.premium-fullscreen .premium-detail-icon-ok,
body.premium-fullscreen .premium-mobile-title > span,
body.premium-fullscreen.premium-detail-open .premium-mobile-title > span {
  color: var(--orange) !important;
  background: color-mix(in srgb, var(--orange) 16%, var(--panel)) !important;
}

.main-nav a .icon,
body.premium-fullscreen .main-nav a .icon {
  width: 16px !important;
  height: 16px !important;
  color: currentColor !important;
  stroke: currentColor !important;
  fill: none !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.status-paid,
.status-completed,
.status-cleared,
.wallet-tx-card.status-completed,
.wallet-tx-card.status-paid,
.premium-order-group-head h4 span,
.cart-final-price,
.wallet-balance,
.wallet-admin-review b,
.premium-mobile-price,
body.premium-fullscreen .premium-mobile-price,
body.premium-fullscreen.premium-detail-open .premium-mobile-price,
.premium-price-box strong,
body.premium-fullscreen .premium-price-box strong,
body.premium-fullscreen.premium-detail-open .premium-price-box strong {
  color: var(--orange) !important;
  background-color: color-mix(in srgb, var(--orange) 12%, var(--panel)) !important;
}

.admin-table th,
.admin-table td,
body #adminView .coupon-history-table th,
body #adminView .coupon-history-table td,
.product-admin-grid table th,
.product-admin-grid table td,
.premium-order-table th,
.premium-order-table td {
  border-color: color-mix(in srgb, var(--orange) 16%, var(--line)) !important;
}

.admin-table th,
body #adminView .coupon-history-table th,
.product-admin-grid table th,
.premium-order-table th {
  background: color-mix(in srgb, var(--soft) 70%, var(--panel)) !important;
  color: var(--ink) !important;
}

.page-title h1,
.section-row h2,
.admin-section-head h3,
.footer h2,
.footer h3,
.trust-list strong,
.contact-card strong,
.wallet-tx-title strong,
.premium-selected h2,
body.premium-fullscreen .premium-selected h2,
body.premium-fullscreen.premium-detail-open .premium-selected h2 {
  color: var(--ink) !important;
}

.page-title p,
.section-row p,
.admin-section-head p,
.muted,
.footer p,
.footer a,
.trust-list span,
.contact-panel span,
.wallet-tx-card p,
.wallet-tx-card small,
.premium-selected p,
body.premium-fullscreen .premium-selected p,
body.premium-fullscreen.premium-detail-open .premium-mobile-detail-box li,
body.premium-fullscreen.premium-detail-open .premium-mobile-detail-box li > span:not(.premium-detail-icon),
body.premium-fullscreen.premium-detail-open .premium-mobile-warning {
  color: var(--muted) !important;
}

.footer {
  border-top-color: color-mix(in srgb, var(--orange) 16%, var(--line)) !important;
  background: color-mix(in srgb, var(--panel) 88%, transparent) !important;
}

/* password visibility toggle */
.input-wrap:has(.password-toggle) {
  grid-template-columns: 22px minmax(0, 1fr) 36px;
  padding-right: 8px;
}

.password-toggle {
  position: relative;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  min-width: 34px;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--orange) 16%, var(--line));
  border-radius: 999px;
  background: color-mix(in srgb, var(--panel) 88%, transparent);
  color: color-mix(in srgb, var(--ink) 56%, var(--orange));
  box-shadow: none;
}

.password-toggle .icon {
  width: 17px;
  height: 17px;
  stroke-width: 2.4;
  color: currentColor !important;
  background: transparent !important;
}

.password-toggle .icon-eye-off {
  display: none;
}

.password-toggle.is-visible {
  border-color: color-mix(in srgb, var(--orange) 54%, var(--line));
  background: color-mix(in srgb, var(--orange) 18%, var(--panel));
  color: var(--orange);
}

.password-toggle.is-visible .icon-eye {
  display: none;
}

.password-toggle.is-visible .icon-eye-off {
  display: block;
}

.password-toggle:hover {
  transform: translateY(-1px) scale(1.08) !important;
}

/* tactile themed button interactions */
button,
.main-nav a[href],
.light-btn,
.ghost,
.gold-btn,
.primary-btn,
.small-btn,
.slider-btn,
.modal-close,
.toast-close,
.category-chip-row button,
.premium-chip-row button,
.theme-preset-card,
.game-pick-card,
.pack-pick-card,
.premium-card,
.product-card,
.recommend-card,
.wallet-methods label,
.quick-amounts button,
.admin-tabs button {
  -webkit-tap-highlight-color: transparent;
  transform-origin: center;
}

button:not(:disabled),
.main-nav a[href],
.light-btn:not(:disabled),
.ghost:not(:disabled),
.gold-btn:not(:disabled),
.primary-btn:not(:disabled),
.small-btn:not(:disabled),
.slider-btn:not(:disabled),
.modal-close:not(:disabled),
.toast-close:not(:disabled),
.category-chip-row button:not(:disabled),
.premium-chip-row button:not(:disabled),
.theme-preset-card,
.game-pick-card:not(:disabled),
.pack-pick-card:not(:disabled),
.premium-card:not(:disabled),
.product-card,
.recommend-card,
.wallet-methods label,
.quick-amounts button:not(:disabled),
.admin-tabs button:not(:disabled) {
  transition:
    transform .22s cubic-bezier(.2, .9, .25, 1.35),
    background .22s ease,
    border-color .22s ease,
    color .22s ease,
    box-shadow .22s ease,
    filter .22s ease !important;
}

button:not(:disabled):hover,
.light-btn:not(:disabled):hover,
.ghost:not(:disabled):hover,
.gold-btn:not(:disabled):hover,
.primary-btn:not(:disabled):hover,
.small-btn:not(:disabled):hover,
.slider-btn:not(:disabled):hover,
.modal-close:not(:disabled):hover,
.toast-close:not(:disabled):hover,
.category-chip-row button:not(:disabled):hover,
.premium-chip-row button:not(:disabled):hover,
.theme-preset-card:hover,
.game-pick-card:not(:disabled):hover,
.pack-pick-card:not(:disabled):hover,
.premium-card:not(:disabled):hover,
.product-card:hover,
.recommend-card:hover,
.wallet-methods label:hover,
.quick-amounts button:not(:disabled):hover,
.admin-tabs button:not(:disabled):hover {
  transform: translateY(-2px) scale(1.025) !important;
  border-color: color-mix(in srgb, var(--orange) 58%, var(--line)) !important;
  filter: saturate(1.08) brightness(1.02);
  box-shadow:
    0 14px 30px color-mix(in srgb, var(--orange) 20%, transparent),
    0 0 0 4px color-mix(in srgb, var(--gold) 12%, transparent) !important;
}

button:not(:disabled):active,
.light-btn:not(:disabled):active,
.ghost:not(:disabled):active,
.gold-btn:not(:disabled):active,
.primary-btn:not(:disabled):active,
.small-btn:not(:disabled):active,
.slider-btn:not(:disabled):active,
.modal-close:not(:disabled):active,
.toast-close:not(:disabled):active,
.category-chip-row button:not(:disabled):active,
.premium-chip-row button:not(:disabled):active,
.theme-preset-card:active,
.game-pick-card:not(:disabled):active,
.pack-pick-card:not(:disabled):active,
.premium-card:not(:disabled):active,
.product-card:active,
.recommend-card:active,
.wallet-methods label:active,
.quick-amounts button:not(:disabled):active,
.admin-tabs button:not(:disabled):active {
  transform: translateY(1px) scale(.96) !important;
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--gold) 70%, var(--panel)),
    color-mix(in srgb, var(--orange) 86%, var(--panel)),
    color-mix(in srgb, var(--gold-dark) 78%, var(--panel))
  ) !important;
  color: color-mix(in srgb, var(--ink) 88%, var(--panel)) !important;
  box-shadow:
    0 7px 16px color-mix(in srgb, var(--orange) 22%, transparent),
    inset 0 0 0 999px color-mix(in srgb, #ffffff 8%, transparent) !important;
}

button:not(:disabled):focus-visible,
.light-btn:not(:disabled):focus-visible,
.ghost:not(:disabled):focus-visible,
.gold-btn:not(:disabled):focus-visible,
.primary-btn:not(:disabled):focus-visible,
.small-btn:not(:disabled):focus-visible,
.slider-btn:not(:disabled):focus-visible,
.modal-close:not(:disabled):focus-visible,
.toast-close:not(:disabled):focus-visible,
.category-chip-row button:not(:disabled):focus-visible,
.premium-chip-row button:not(:disabled):focus-visible,
.theme-preset-card:focus-visible,
.game-pick-card:not(:disabled):focus-visible,
.pack-pick-card:not(:disabled):focus-visible,
.premium-card:not(:disabled):focus-visible,
.quick-amounts button:not(:disabled):focus-visible,
.admin-tabs button:not(:disabled):focus-visible {
  outline: 0 !important;
  box-shadow:
    0 0 0 4px color-mix(in srgb, var(--gold) 22%, transparent),
    0 14px 28px color-mix(in srgb, var(--orange) 18%, transparent) !important;
}

.modal-close:not(:disabled):hover,
.toast-close:not(:disabled):hover,
.slider-btn:not(:disabled):hover,
body.premium-fullscreen .premium-detail-close:not(:disabled):hover {
  border-radius: 999px !important;
  background: color-mix(in srgb, var(--orange) 18%, var(--panel)) !important;
  color: var(--orange) !important;
}

@media (prefers-reduced-motion: reduce) {
  button,
  .light-btn,
  .ghost,
  .gold-btn,
  .primary-btn,
  .small-btn,
  .slider-btn,
  .modal-close,
  .toast-close,
  .category-chip-row button,
  .premium-chip-row button,
  .theme-preset-card,
  .game-pick-card,
  .pack-pick-card,
  .premium-card,
  .product-card,
  .recommend-card,
  .wallet-methods label,
  .quick-amounts button,
  .admin-tabs button {
    transition: none !important;
  }
}

/* calmer default theme pass */
body {
  background:
    radial-gradient(circle at 8% 12%, color-mix(in srgb, var(--gold) 7%, transparent), transparent 32%),
    radial-gradient(circle at 90% 8%, color-mix(in srgb, var(--orange) 5%, transparent), transparent 34%),
    var(--page) !important;
}

main {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--panel) 84%, transparent), color-mix(in srgb, var(--panel) 96%, transparent)),
    var(--page) !important;
}

.panel,
.policy,
.order-card,
.metric-card,
.sales-chart-card,
.admin-section,
.admin-table-wrap,
.product-manager-panel,
.recommended-manager-panel,
.settings-card,
.settings-contact-card,
.product-create-card,
.wallet-form-panel,
.wallet-history-panel,
.wallet-pay-card,
.wallet-admin-review,
.contact-panel,
.contact-card,
.trust-list article,
.profile-hero,
.profile-stat-card,
.profile-order-card,
.password-panel,
.asset-preview,
.settings-number-grid label,
.theme-preset-card,
.premium-order-group,
body #adminView .panel,
body #adminView .coupon-history-wrap,
body.premium-fullscreen .premium-products-panel,
body.premium-fullscreen .premium-checkout-panel,
body.premium-fullscreen .premium-orders-panel,
body.premium-fullscreen .premium-selected,
body.premium-fullscreen .premium-selected-bar:not(.hidden),
body.premium-fullscreen .premium-card,
body.premium-fullscreen.premium-detail-open .premium-checkout-panel,
body.premium-fullscreen.premium-detail-open .premium-buy-form,
body.premium-fullscreen.premium-detail-open .premium-mobile-detail-box,
body.premium-fullscreen.premium-detail-open .premium-price-box div {
  border-color: color-mix(in srgb, var(--orange) 12%, var(--line)) !important;
  background: color-mix(in srgb, var(--panel) 98%, var(--page)) !important;
  box-shadow: 0 10px 28px rgba(15, 23, 42, .055) !important;
}

.admin-tabs button.active,
.admin-tabs button:hover,
.gold-btn,
.primary-btn,
.quick-amounts button:hover,
.quick-amounts button.active,
.wallet-methods label:has(input:checked),
.option-toggle input:checked + .toggle-ui,
.mini-toggle input:checked + .toggle-ui,
body.premium-fullscreen .premium-selected-buy,
body.premium-fullscreen .premium-buy-form .gold-btn,
body.premium-fullscreen.premium-detail-open .premium-buy-form .gold-btn {
  border-color: color-mix(in srgb, var(--orange) 32%, var(--line)) !important;
  background: linear-gradient(180deg, color-mix(in srgb, var(--orange) 14%, var(--panel)), color-mix(in srgb, var(--orange) 24%, var(--panel))) !important;
  color: var(--ink) !important;
  box-shadow: 0 8px 18px color-mix(in srgb, var(--orange) 12%, transparent) !important;
}

body.premium-fullscreen .premium-card.active,
body.premium-fullscreen .premium-card:hover {
  border-color: color-mix(in srgb, var(--orange) 36%, var(--line)) !important;
  background: color-mix(in srgb, var(--orange) 5%, var(--panel)) !important;
  box-shadow: 0 10px 24px color-mix(in srgb, var(--orange) 10%, transparent) !important;
}

body.premium-fullscreen .premium-card.active .premium-card-img,
body.premium-fullscreen .premium-card-img,
body.premium-fullscreen.premium-detail-open .premium-selected-img,
body.premium-fullscreen .premium-selected-img {
  background: color-mix(in srgb, var(--panel) 92%, var(--page)) !important;
  box-shadow: none !important;
}

body.premium-fullscreen .premium-card-price,
body.premium-fullscreen .premium-stock-line,
body.premium-fullscreen .premium-mobile-title > span,
body.premium-fullscreen.premium-detail-open .premium-mobile-title > span,
body.premium-fullscreen.premium-detail-open .premium-demo-note,
.premium-coupon-card,
.premium-coupon-result,
.payment-credit-note,
.checkout-assurance {
  border-color: color-mix(in srgb, var(--orange) 14%, var(--line)) !important;
  background: color-mix(in srgb, var(--orange) 7%, var(--panel)) !important;
  color: color-mix(in srgb, var(--ink) 82%, var(--orange)) !important;
  box-shadow: none !important;
}

body.premium-fullscreen .premium-card.active .premium-card-action,
body.premium-fullscreen .premium-card-action,
body.premium-fullscreen.premium-detail-open .premium-buy-form .gold-btn,
body.premium-fullscreen .premium-buy-form .gold-btn {
  border-color: color-mix(in srgb, var(--orange) 22%, var(--line)) !important;
  background: color-mix(in srgb, var(--panel) 92%, var(--page)) !important;
  color: color-mix(in srgb, var(--ink) 74%, var(--orange)) !important;
  box-shadow: 0 8px 18px rgba(15, 23, 42, .06) !important;
}

body.premium-fullscreen .premium-mobile-price,
body.premium-fullscreen.premium-detail-open .premium-mobile-price,
body.premium-fullscreen .premium-price-box strong,
body.premium-fullscreen.premium-detail-open .premium-price-box strong,
.cart-final-price,
.wallet-balance {
  color: color-mix(in srgb, var(--orange) 86%, var(--ink)) !important;
  background: transparent !important;
}

button:not(:disabled):hover,
.light-btn:not(:disabled):hover,
.ghost:not(:disabled):hover,
.gold-btn:not(:disabled):hover,
.primary-btn:not(:disabled):hover,
.small-btn:not(:disabled):hover,
.slider-btn:not(:disabled):hover,
.modal-close:not(:disabled):hover,
.toast-close:not(:disabled):hover,
.category-chip-row button:not(:disabled):hover,
.premium-chip-row button:not(:disabled):hover,
.theme-preset-card:hover,
.game-pick-card:not(:disabled):hover,
.pack-pick-card:not(:disabled):hover,
.premium-card:not(:disabled):hover,
.product-card:hover,
.recommend-card:hover,
.wallet-methods label:hover,
.quick-amounts button:not(:disabled):hover,
.admin-tabs button:not(:disabled):hover {
  transform: translateY(-1px) scale(1.012) !important;
  filter: none !important;
  box-shadow: 0 10px 22px color-mix(in srgb, var(--orange) 10%, transparent) !important;
}

button:not(:disabled):active,
.light-btn:not(:disabled):active,
.ghost:not(:disabled):active,
.gold-btn:not(:disabled):active,
.primary-btn:not(:disabled):active,
.small-btn:not(:disabled):active,
.slider-btn:not(:disabled):active,
.modal-close:not(:disabled):active,
.toast-close:not(:disabled):active,
.category-chip-row button:not(:disabled):active,
.premium-chip-row button:not(:disabled):active,
.theme-preset-card:active,
.game-pick-card:not(:disabled):active,
.pack-pick-card:not(:disabled):active,
.premium-card:not(:disabled):active,
.product-card:active,
.recommend-card:active,
.wallet-methods label:active,
.quick-amounts button:not(:disabled):active,
.admin-tabs button:not(:disabled):active {
  transform: translateY(1px) scale(.98) !important;
  background: color-mix(in srgb, var(--orange) 12%, var(--panel)) !important;
  color: var(--ink) !important;
  box-shadow: inset 0 0 0 999px color-mix(in srgb, var(--orange) 5%, transparent) !important;
}

/* flat eye icon on password fields */
.input-wrap:has(.password-toggle),
#authModal .input-wrap:has(.password-toggle) {
  display: grid !important;
  grid-template-columns: 22px minmax(0, 1fr) 28px !important;
  align-items: center !important;
  gap: 8px !important;
  padding-right: 12px !important;
}

#authModal .input-wrap:has(.password-toggle) {
  grid-template-columns: 19px minmax(0, 1fr) 28px !important;
}

.password-toggle,
#authModal .password-toggle {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  min-height: 28px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: color-mix(in srgb, var(--muted) 78%, var(--orange)) !important;
  box-shadow: none !important;
  transform: none !important;
}

.password-toggle:hover,
.password-toggle:active,
#authModal .password-toggle:hover,
#authModal .password-toggle:active {
  background: transparent !important;
  color: var(--orange) !important;
  box-shadow: none !important;
  transform: scale(1.08) !important;
}

.password-toggle.is-visible,
#authModal .password-toggle.is-visible {
  border: 0 !important;
  background: transparent !important;
  color: var(--orange) !important;
}

.password-toggle .icon,
#authModal .password-toggle .icon {
  width: 18px !important;
  height: 18px !important;
  background: transparent !important;
}

/* reliable auth checkbox state */
.check-row input[type="checkbox"],
#authModal .check-row input[type="checkbox"] {
  position: relative !important;
  display: inline-grid !important;
  place-items: center !important;
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  min-height: 18px !important;
  margin: 1px 0 0 !important;
  padding: 0 !important;
  appearance: none !important;
  border: 1px solid color-mix(in srgb, var(--orange) 28%, var(--line)) !important;
  border-radius: 6px !important;
  background: var(--panel) !important;
  cursor: pointer !important;
  box-shadow: none !important;
}

.check-row input[type="checkbox"]::after,
#authModal .check-row input[type="checkbox"]::after {
  content: "" !important;
  position: absolute !important;
  left: 5px !important;
  top: 2px !important;
  width: 5px !important;
  height: 10px !important;
  border-right: 2px solid color-mix(in srgb, var(--ink) 84%, var(--panel)) !important;
  border-bottom: 2px solid color-mix(in srgb, var(--ink) 84%, var(--panel)) !important;
  opacity: 0 !important;
  transform: rotate(45deg) scale(.78) !important;
  transition: opacity .16s ease, transform .16s ease !important;
}

.check-row input[type="checkbox"]:checked,
#authModal .check-row input[type="checkbox"]:checked {
  border-color: color-mix(in srgb, var(--orange) 48%, var(--line)) !important;
  background: color-mix(in srgb, var(--orange) 18%, var(--panel)) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--orange) 12%, transparent) !important;
}

.check-row input[type="checkbox"]:checked::after,
#authModal .check-row input[type="checkbox"]:checked::after {
  opacity: 1 !important;
  transform: rotate(45deg) scale(1) !important;
}

/* theme-driven admin surfaces */
#adminView .admin-tabs button,
#adminView .metric-card,
#adminView .sales-chart-card,
#adminView .settings-card,
#adminView .panel {
  border-color: color-mix(in srgb, var(--orange) 24%, var(--line)) !important;
}

#adminView .admin-tabs button {
  background: color-mix(in srgb, var(--panel) 92%, var(--page)) !important;
  color: var(--ink) !important;
}

#adminView .admin-tabs button.active,
#adminView .admin-tabs button:hover {
  border-color: color-mix(in srgb, var(--orange) 54%, var(--line)) !important;
  background: linear-gradient(135deg, var(--gold), var(--orange)) !important;
  color: color-mix(in srgb, var(--ink) 82%, var(--panel)) !important;
  box-shadow: 0 10px 24px color-mix(in srgb, var(--orange) 18%, transparent) !important;
}

#adminView .admin-tabs button .icon,
#adminView .admin-section-head .icon,
#adminView .metric-card .icon {
  color: var(--orange) !important;
  stroke: currentColor !important;
}

#adminView .metric-card strong,
#adminView .sales-chart-summary strong,
#adminView .sales-chart-insights b,
#adminView .sales-chart-head .auth-kicker {
  color: var(--orange) !important;
}

#adminView .sales-chart-insights span,
#adminView .sales-chart-legend span {
  background: color-mix(in srgb, var(--orange) 9%, var(--panel)) !important;
  color: color-mix(in srgb, var(--ink) 78%, var(--orange)) !important;
}

#adminView .sales-y-tick line,
#adminView .sales-chart-card input,
#adminView .settings-block {
  border-color: color-mix(in srgb, var(--orange) 18%, var(--line)) !important;
}

/* even premium product cards */
body.premium-fullscreen .premium-grid {
  align-items: stretch !important;
}

body.premium-fullscreen .premium-card {
  display: grid !important;
  grid-template-rows: 168px minmax(132px, 1fr) 58px !important;
  height: 100% !important;
  min-height: 360px !important;
  padding-bottom: 10px !important;
}

body.premium-fullscreen .premium-card-img {
  width: 100% !important;
  height: 168px !important;
  min-height: 168px !important;
  aspect-ratio: auto !important;
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
  background: color-mix(in srgb, var(--panel) 94%, var(--page)) !important;
}

body.premium-fullscreen .premium-card-img img,
body.premium-fullscreen .premium-card-img .premium-img-fallback {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  padding: 0 !important;
}

body.premium-fullscreen .premium-card-body {
  display: grid !important;
  grid-template-rows: minmax(38px, auto) auto auto auto 1fr !important;
  align-content: start !important;
  min-height: 132px !important;
}

body.premium-fullscreen .premium-card-body strong {
  min-height: 38px !important;
}

body.premium-fullscreen .premium-card-price {
  justify-content: center !important;
  width: 100% !important;
  min-height: 30px !important;
  margin-top: 2px !important;
}

body.premium-fullscreen .premium-card-bottom {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(44px, 80px) !important;
  align-items: center !important;
  align-self: end !important;
  gap: 8px !important;
  width: 100% !important;
  min-height: 48px !important;
  margin-top: auto !important;
  padding: 0 10px !important;
}

body.premium-fullscreen .premium-stock-line,
body.premium-fullscreen .premium-card-action {
  width: 100% !important;
  min-height: 34px !important;
  margin: 0 !important;
}

/* keep premium product copy visible after card/image sizing overrides */
body.premium-fullscreen .premium-card::after {
  content: none !important;
  display: none !important;
}

body.premium-fullscreen .premium-card-body,
body.premium-fullscreen .premium-card-body *,
body.premium-fullscreen .premium-mobile-detail-box,
body.premium-fullscreen .premium-mobile-detail-box * {
  visibility: visible !important;
  opacity: 1 !important;
}

body.premium-fullscreen .premium-card-body {
  display: grid !important;
  grid-template-rows: auto auto auto auto auto !important;
  gap: 8px !important;
  align-content: start !important;
  min-height: 132px !important;
  padding: 8px 14px 0 !important;
  color: var(--ink) !important;
  overflow: visible !important;
}

body.premium-fullscreen .premium-card-body strong {
  display: -webkit-box !important;
  min-height: 38px !important;
  margin: 0 !important;
  color: var(--ink) !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  line-height: 1.28 !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

body.premium-fullscreen .premium-card-name {
  position: relative !important;
  z-index: 2 !important;
  display: -webkit-box !important;
  min-height: 40px !important;
  color: #102519 !important;
  background: transparent !important;
  font-size: 15px !important;
  font-weight: 950 !important;
  line-height: 1.3 !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

body.premium-fullscreen .premium-card-body small,
body.premium-fullscreen .premium-detail-line,
body.premium-fullscreen .agent-price-note {
  color: color-mix(in srgb, var(--ink) 58%, var(--muted)) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  line-height: 1.35 !important;
}

body.premium-fullscreen .premium-provider-line,
body.premium-fullscreen .premium-soldout-badge {
  display: inline-flex !important;
  align-items: center !important;
  width: fit-content !important;
  min-height: 24px !important;
  padding: 4px 9px !important;
  border-radius: 999px !important;
  color: color-mix(in srgb, var(--orange) 78%, var(--ink)) !important;
  background: color-mix(in srgb, var(--orange) 9%, var(--panel)) !important;
}

body.premium-fullscreen .premium-detail-line {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  min-height: 20px !important;
  margin-top: 2px !important;
}

body.premium-fullscreen .premium-detail-line .icon {
  width: 13px !important;
  height: 13px !important;
  color: currentColor !important;
  background: transparent !important;
}

body.premium-fullscreen .premium-mobile-detail-box {
  color: var(--ink) !important;
}

@media (max-width: 760px) {
  body.premium-fullscreen .premium-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-items: stretch !important;
    gap: 8px !important;
  }

  body.premium-fullscreen .premium-card {
    grid-template-rows: 150px minmax(128px, 1fr) 42px !important;
    min-height: 320px !important;
    height: 100% !important;
    padding-bottom: 7px !important;
  }

  body.premium-fullscreen .premium-card-img {
    height: 116px !important;
    min-height: 116px !important;
    padding: 0 !important;
  }

  body.premium-fullscreen .premium-card-body {
    grid-template-rows: auto auto auto auto auto !important;
    min-height: 128px !important;
    gap: 6px !important;
    padding-top: 8px !important;
  }

  body.premium-fullscreen .premium-card-body strong,
  body.premium-fullscreen .premium-card-name {
    min-height: 38px !important;
    font-size: 13px !important;
    line-height: 1.28 !important;
  }

  body.premium-fullscreen .premium-card-price {
    min-height: 24px !important;
  }

  body.premium-fullscreen .premium-card-bottom {
    grid-template-columns: minmax(0, 1fr) 42px !important;
    min-height: 38px !important;
    gap: 6px !important;
    padding: 0 7px !important;
  }

  body.premium-fullscreen .premium-stock-line,
  body.premium-fullscreen .premium-card-action {
    min-height: 28px !important;
  }
}

/* final premium mobile card lock */
@media (max-width: 760px) {
  body.premium-fullscreen .premium-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  body.premium-fullscreen .premium-card {
    display: grid !important;
    grid-template-rows: 150px minmax(138px, auto) 42px !important;
    min-height: 334px !important;
    overflow: hidden !important;
    background: #ffffff !important;
  }

  body.premium-fullscreen .premium-card-img {
    position: relative !important;
    display: grid !important;
    place-items: center !important;
    width: 100% !important;
    height: 150px !important;
    min-height: 150px !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: #ffffff !important;
  }

  body.premium-fullscreen .premium-card-img img,
  body.premium-fullscreen .premium-card-img .premium-img-fallback {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
    padding: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  body.premium-fullscreen .premium-card-body {
    position: relative !important;
    z-index: 3 !important;
    display: grid !important;
    grid-template-rows: auto auto auto auto auto !important;
    gap: 6px !important;
    min-height: 138px !important;
    padding: 9px 10px 0 !important;
    overflow: visible !important;
    background: #ffffff !important;
  }

  body.premium-fullscreen .premium-card-name,
  body.premium-fullscreen .premium-card-body > strong {
    position: relative !important;
    z-index: 4 !important;
    display: block !important;
    min-height: 34px !important;
    margin: 0 !important;
    color: #102519 !important;
    background: transparent !important;
    font-size: 13px !important;
    font-weight: 950 !important;
    line-height: 1.25 !important;
    white-space: normal !important;
    overflow: hidden !important;
    text-overflow: clip !important;
  }

  body.premium-fullscreen .premium-detail-line {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    min-height: 18px !important;
    color: #52665b !important;
    font-size: 10.5px !important;
  }
}

/* premium image final override: do not show hidden fallback over real images */
body.premium-fullscreen .premium-card-img img[hidden],
body.premium-fullscreen .premium-card-img .premium-img-fallback[hidden],
body.premium-fullscreen .premium-selected-img img[hidden],
body.premium-fullscreen .premium-selected-img .premium-img-fallback[hidden] {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

body.premium-fullscreen .premium-card-img img:not([hidden]) {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  padding: 0 !important;
  opacity: 1 !important;
  visibility: visible !important;
}

body.premium-fullscreen .premium-card-img .premium-img-fallback:not([hidden]) {
  position: absolute !important;
  inset: 0 !important;
  display: grid !important;
  place-items: center !important;
  width: 100% !important;
  height: 100% !important;
  color: #f8fafc !important;
  background:
    radial-gradient(circle at 68% 20%, rgba(255,255,255,.16), transparent 24%),
    linear-gradient(135deg, #334155, #111827) !important;
}

/* admin tab icon cleanup */
#adminView .admin-tabs button .icon,
.admin-tabs button .icon {
  width: 16px !important;
  height: 16px !important;
  color: currentColor !important;
  stroke: currentColor !important;
  fill: none !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

#adminView .admin-tabs button.active .icon,
#adminView .admin-tabs button:hover .icon,
.admin-tabs button.active .icon,
.admin-tabs button:hover .icon {
  color: currentColor !important;
  background: transparent !important;
}

/* loader logo centering */
.page-loader-card {
  grid-template-rows: 150px auto !important;
  align-content: center !important;
  gap: 18px !important;
  min-height: 230px !important;
}

.page-loader-orbit {
  top: 0 !important;
  left: 50% !important;
  margin-left: -75px !important;
}

.page-loader-logo {
  position: relative !important;
  z-index: 1 !important;
  grid-row: 1 !important;
  width: 150px !important;
  height: 150px !important;
  animation: loader-logo-breathe-centered 2.4s ease-in-out infinite !important;
}

.page-loader-logo .site-logo-image,
.page-loader-logo .logo-mark {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
}

.page-loader-logo .site-logo-image {
  width: 88px !important;
  height: 88px !important;
}

.page-loader-logo .logo-mark {
  width: 78px !important;
  height: 78px !important;
}

.page-loader-logo strong {
  position: absolute !important;
  top: calc(50% + 48px) !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  margin: 0 !important;
}

.page-loader p {
  grid-row: 2 !important;
}

@keyframes loader-logo-breathe-centered {
  0%, 100% { opacity: .84; transform: scale(.985); }
  50% { opacity: 1; transform: scale(1.015); }
}

/* premium mobile detail final surface alignment */
@media (max-width: 760px) {
  body.premium-fullscreen.premium-detail-open {
    overflow-x: hidden !important;
    background: #f5fff8 !important;
  }

  body.premium-fullscreen.premium-detail-open main,
  body.premium-fullscreen.premium-detail-open #premiumAppsView,
  body.premium-fullscreen.premium-detail-open .premium-page,
  body.premium-fullscreen.premium-detail-open .premium-shell,
  body.premium-fullscreen.premium-detail-open .premium-layout {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  body.premium-fullscreen.premium-detail-open .premium-checkout-panel {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: calc(10px + env(safe-area-inset-top)) 8px calc(14px + env(safe-area-inset-bottom)) !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: linear-gradient(180deg, #fbfffc 0%, #f4fff7 100%) !important;
    box-shadow: none !important;
    overflow-x: hidden !important;
  }

  body.premium-fullscreen.premium-detail-open .premium-selected {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  body.premium-fullscreen.premium-detail-open .premium-buy-form {
    width: 100% !important;
    max-width: none !important;
    margin: 8px 0 0 !important;
    padding: 0 0 calc(10px + env(safe-area-inset-bottom)) !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  body.premium-fullscreen.premium-detail-open .premium-mobile-detail-box,
  body.premium-fullscreen.premium-detail-open .premium-coupon-card,
  body.premium-fullscreen.premium-detail-open .premium-buy-form .gold-btn {
    box-sizing: border-box !important;
    width: 100% !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
  }
}

/* premium products page breathing room */
body.premium-fullscreen:not(.premium-detail-open) .premium-shell {
  box-sizing: border-box !important;
  width: min(100% - 96px, 1480px) !important;
  max-width: 1480px !important;
  margin-inline: auto !important;
}

body.premium-fullscreen:not(.premium-detail-open) .premium-products-panel {
  box-sizing: border-box !important;
  padding: 24px 28px 30px !important;
  border-radius: 14px !important;
}

body.premium-fullscreen:not(.premium-detail-open) .premium-grid {
  gap: 18px !important;
}

@media (max-width: 900px) {
  body.premium-fullscreen:not(.premium-detail-open) .premium-shell {
    width: min(100% - 56px, 720px) !important;
  }

  body.premium-fullscreen:not(.premium-detail-open) .premium-products-panel {
    padding: 18px 18px 22px !important;
  }
}

@media (max-width: 560px) {
  body.premium-fullscreen:not(.premium-detail-open) .premium-shell {
    width: min(100% - 40px, 520px) !important;
  }

  body.premium-fullscreen:not(.premium-detail-open) .premium-products-panel {
    padding: 14px 14px 18px !important;
    border-radius: 16px !important;
  }
}
/* --- New Wallet UI --- */
.wallet-page-header {
  background: linear-gradient(135deg, #e4fce9 0%, #cbf2d4 100%);
  padding: 30px 20px 60px 20px;
  position: relative;
  overflow: hidden;
}
.wallet-page-header-bg {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  /* Can add clovers pattern here */
  background-image: radial-gradient(#93e7a2 2px, transparent 2px);
  background-size: 30px 30px;
  opacity: 0.2;
}
.wallet-page-header-content {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 600px;
  margin: 0 auto;
}
.wallet-page-header-text h1 {
  font-size: 1.5rem;
  margin: 0 0 5px 0;
  color: #1a1a1a;
  font-weight: bold;
}
.wallet-page-header-text p {
  font-size: 0.85rem;
  color: #666;
  margin: 0;
}
.wallet-header-bunny {
  width: 100px;
  height: auto;
  object-fit: contain;
}

.wallet-page-content {
  margin-top: -40px;
  position: relative;
  z-index: 2;
  padding-bottom: 40px;
}
.wallet-main-card {
  background: #fff;
  border-radius: 24px;
  padding: 20px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.05);
}

.wallet-section-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: #333;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.wallet-amount-section,
.wallet-method-section,
.wallet-quick-section {
  margin-bottom: 24px;
}

.wallet-input-wrapper {
  background: #ffffff;
  border: 1px solid var(--green);
  border-radius: 8px;
  padding: 8px 16px;
  display: flex;
  flex-direction: column;
}
.wallet-input-label {
  font-size: 0.8rem;
  color: #888;
  margin-bottom: 4px;
}
.wallet-input-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.wallet-input-inner input {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 1.5rem !important;
  font-weight: bold !important;
  color: #333 !important;
  width: 100% !important;
  outline: none !important;
  padding: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
}
.wallet-input-suffix {
  font-size: 1rem;
  color: #666;
  white-space: nowrap;
  margin-left: 10px;
}

.wallet-methods-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.wallet-method-card {
  cursor: pointer;
  position: relative;
}
.wallet-method-card input {
  display: none;
}
.wallet-method-card-inner {
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  padding: 16px 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: all 0.2s;
  background: #fff;
  height: auto;
}
.wallet-method-card input:checked + .wallet-method-card-inner {
  border-color: #3bb54a;
  background: #f4fdf5;
}
.wallet-method-check {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 24px;
  height: 24px;
  background: #3bb54a;
  border-radius: 50%;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(0.5);
  transition: all 0.2s;
}
.wallet-method-check svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}
.wallet-method-card input:checked + .wallet-method-card-inner .wallet-method-check {
  opacity: 1;
  transform: scale(1);
}
.wallet-method-img {
  height: 24px;
  width: auto;
}
.wallet-method-icon-red {
  color: #e53935;
  display: flex;
  align-items: center;
}
.wallet-method-icon-red svg {
  width: 28px;
  height: 28px;
}
.wallet-method-text {
  display: flex;
  flex-direction: column;
}
.wallet-method-text strong {
  font-size: 0.95rem;
  color: #333;
}
.wallet-method-desc {
  font-size: 0.75rem;
  color: #888;
  line-height: 1.2;
  margin-top: 2px;
}

.wallet-quick-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}
.wallet-quick-grid button {
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 10px 4px;
  font-size: 0.85rem;
  font-weight: 600;
  color: #555;
  cursor: pointer;
  transition: all 0.2s;
}
.wallet-quick-grid button.active,
.wallet-quick-grid button:hover {
  background: #e8f5e9;
  border-color: #3bb54a;
  color: #2e7d32;
}

.wallet-btn-green {
  width: 100%;
  background: #3bb54a;
  color: #fff;
  border: none;
  border-radius: 12px;
  padding: 14px;
  font-size: 1rem;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  transition: opacity 0.2s;
}
.wallet-btn-green:hover {
  opacity: 0.9;
}
.wallet-btn-green svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

.wallet-qr-container {
  margin-top: 20px;
}

/* PromptPay QR specific styling */
.wallet-qr-result {
  border: 1px solid #e0e0e0;
  border-radius: 16px;
  padding: 24px;
  text-align: center;
  background: #fff;
}
.wallet-qr-header {
  margin-bottom: 16px;
}
.wallet-qr-header .badge {
  color: #3bb54a;
  font-weight: bold;
  font-size: 0.9rem;
}
.wallet-qr-amount {
  font-size: 2.5rem;
  font-weight: bold;
  color: #3bb54a;
  margin: 8px 0;
}
.wallet-qr-ref {
  font-size: 0.75rem;
  color: #888;
}
.wallet-qr-account {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 20px;
  text-align: left;
}
.wallet-qr-avatar {
  width: 40px;
  height: 40px;
  background: #e8f5e9;
  color: #3bb54a;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.wallet-qr-avatar svg {
  width: 24px;
  height: 24px;
  fill: currentColor;
}
.wallet-qr-name {
  font-weight: bold;
  color: #333;
}
.wallet-qr-number {
  font-size: 0.85rem;
  color: #666;
}
.wallet-qr-image {
  max-width: 200px;
  margin: 0 auto 16px auto;
}
.wallet-qr-note {
  font-size: 0.8rem;
  color: #3bb54a;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.wallet-qr-note svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
}

.wallet-slip-notice {
  background: #e8f5e9;
  border-radius: 12px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
  margin-bottom: 16px;
}
.wallet-slip-notice-icon {
  background: #3bb54a;
  color: #fff;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.wallet-slip-notice-icon svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}
.wallet-slip-notice-text {
  font-size: 0.8rem;
  color: #2e7d32;
  flex-grow: 1;
}
.wallet-slip-notice-text strong {
  display: block;
}

.wallet-upload-area {
  border: 2px dashed #a5d6a7;
  border-radius: 12px;
  padding: 24px;
  text-align: center;
  background: #f4fdf5;
  cursor: pointer;
  position: relative;
  margin-bottom: 16px;
}
.wallet-upload-area:hover {
  background: #e8f5e9;
}
.wallet-upload-area input[type="file"] {
  position: absolute;
  top: 0; left: 0; width: 100%; height: auto;
  opacity: 0;
  cursor: pointer;
}
.wallet-upload-icon {
  color: #3bb54a;
  margin-bottom: 8px;
}
.wallet-upload-icon svg {
  width: 32px;
  height: 32px;
  fill: currentColor;
}
.wallet-upload-text strong {
  display: block;
  color: #333;
  font-size: 0.9rem;
}
.wallet-upload-text span {
  display: block;
  color: #888;
  font-size: 0.75rem;
  margin-top: 4px;
}
/* New Flex QR Result Layout */
.wallet-qr-result-flex {
  border: 1px solid #e0e0e0;
  border-radius: 16px;
  padding: 20px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 16px;
}
.wallet-qr-result-left {
  flex: 1;
  text-align: left;
  padding-right: 12px;
}
.wallet-qr-result-right {
  flex-shrink: 0;
  background: #f9f9f9;
  padding: 10px;
  border-radius: 12px;
  border: 1px solid #eee;
}
@media (max-width: 400px) {
  .wallet-qr-result-flex {
    flex-direction: column;
    text-align: center;
  }
  .wallet-qr-result-left {
    padding-right: 0;
    text-align: center;
    margin-bottom: 16px;
  }
  .wallet-qr-account-left, .wallet-qr-note-left {
    justify-content: center !important;
  }
}

@media (max-width: 760px) {
  .wallet-page-content {
    margin-top: -30px !important;
  }
}

.wallet-input-inner input[type=number]::-webkit-inner-spin-button, 
.wallet-input-inner input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}
.wallet-input-inner input[type=number] {
  -moz-appearance: textfield;
}

/* Mobile Bottom Nav */
.mobile-bottom-nav {
  display: none;
}
@media (max-width: 760px) {
  body {
    padding-bottom: 80px !important;
  }
  .mobile-bottom-nav {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #ffffff;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    box-shadow: 0 -4px 15px rgba(0,0,0,0.06);
    z-index: 1000;
    justify-content: space-around;
    align-items: flex-end;
    padding: 10px 0 25px;
  }
  
  .mobile-bottom-nav-item {
    transition: all 0.2s ease;
    -webkit-tap-highlight-color: transparent;
  }
  .mobile-bottom-nav-item:active {
    transform: scale(0.92);
    color: var(--green);
  }
  .mobile-bottom-nav-item.active {
    color: var(--green);
  }
  .mobile-bottom-nav-center {
    transition: all 0.2s ease;
    -webkit-tap-highlight-color: transparent;
  }
  .mobile-bottom-nav-center:active .mobile-bottom-nav-fab {
    transform: translateX(-50%) scale(0.92);
    background: var(--gold-dark);
  }
  .mobile-bottom-nav-center:active span {
    transform: scale(0.95);
  }

  .mobile-bottom-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #888;
    text-decoration: none;
    font-size: 11px;
    flex: 1;
    position: relative;
    padding-bottom: 5px;
  }
  .mobile-bottom-nav-item svg {
    width: 24px;
    height: 24px;
    margin-bottom: 4px;
    stroke: currentColor;
    fill: none;
  }
  .mobile-bottom-nav-center {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 11px;
    color: var(--green);
    padding-bottom: 5px;
    text-decoration: none;
  }
  .mobile-bottom-nav-fab {
    width: 56px;
    height: 56px;
    background: var(--green);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    position: absolute;
    top: -34px;
    left: 50%;
    transform: translateX(-50%);
    box-shadow: 0 4px 10px rgba(34,197,94,0.3); border: 4px solid #ffffff;
  }
  .mobile-bottom-nav-fab svg {
    width: 28px;
    height: 28px;
    fill: currentColor;
    stroke: none;
  }
  .mobile-bottom-nav-center span {
    margin-top: 28px; font-weight: bold;
  }
  /* Hide the horizontal scroll top nav on mobile */
  .main-nav {
    display: none !important;
  }
}

/* --- Custom Game Menu Banner Styles --- */
.game-menu-head.custom-banner-mode {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    padding: 0 !important;
    background: transparent !important;
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
}

.game-menu-banner-wrapper {
    width: 100%;
    border-radius: 16px;
    overflow: hidden;
    position: relative;
    max-height: 400px;
    background: #0f172a;
    display: flex;
    justify-content: center;
    align-items: center;
}
.game-menu-banner {
    width: 100%;
    height: auto;
    max-height: 400px;
    object-fit: cover;
    display: block;
}

@media (max-width: 768px) {
  .game-card-grid-new {
    /* Flex handles mobile perfectly without grid-template-columns */
    gap: 8px !important;
  }
  .new-game-card {
    width: calc(50% - 8px) !important;
  }
  .new-game-card {
  width: 100%;
    padding: 8px !important;
  }
  .new-game-card-img {
    width: 60px !important;
    height: 60px !important;
    min-width: 60px !important;
    min-height: 60px !important;
    border-radius: 16px !important;
  }
  .new-game-card-img img {
    border-radius: 16px !important;
  }
  .new-game-card-info strong {
    font-size: 12px !important;
  }
  .new-game-card-btn {
    font-size: 11px !important;
    padding: 4px 8px !important;
  }
}

.new-game-card-img {
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  height: auto !important;
  min-width: unset !important;
  min-height: unset !important;
  border-radius: 20px !important;
  overflow: hidden !important;
  margin: 0 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}
.new-game-card-img img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 20px !important;
  display: block !important;
}
.new-game-card-info strong {
  display: block;
  font-size: 14px;
  color: #1e293b;
  margin-bottom: 2px;
}
.new-game-card-info small {
  font-size: 12px;
  color: #64748b;
}
.new-game-card-btn {
  background: #22c55e;
  color: white;
  border-radius: 20px;
  padding: 6px 16px;
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 4px;
  width: 100%;
  justify-content: center;
  margin-top: auto;
}

/* Mobile Topup UI */
.mtopup-step-card {
  background: #fff;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 16px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.mtopup-step-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.mtopup-step-num {
  width: 28px;
  height: 28px;
  background: #22c55e;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
}
.mtopup-step-header h3 {
  font-size: 16px;
  font-weight: 600;
  color: #1e293b;
  margin: 0;
}
.mtopup-network-grid {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 8px;
}
.mtopup-network-btn {
  flex: 0 0 auto;
  width: 80px;
  height: 80px;
  border-radius: 16px;
  border: 2px solid transparent;
  background: #f8fafc;
  padding: 8px;
  cursor: pointer;
  transition: all 0.2s;
}
.mtopup-network-btn img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.mtopup-network-btn.active {
  border-color: #22c55e;
  background: #f0fdf4;
}
.mtopup-input-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}
.mtopup-tab {
  flex: 1;
  padding: 10px;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  color: #64748b;
  font-weight: 600;
  cursor: pointer;
}
.mtopup-tab.active {
  background: #fff;
  border-color: #22c55e;
  color: #22c55e;
}
.mtopup-input-box input {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  font-size: 16px;
  outline: none;
}
.mtopup-input-box input:focus {
  border-color: #22c55e;
}
.mtopup-pack-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.mtopup-pack-card {
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 16px;
  background: #fff;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.mtopup-pack-card.active {
  border-color: #22c55e;
  background: #f0fdf4;
}
.mtopup-pack-info strong {
  display: block;
  font-size: 14px;
  color: #1e293b;
  margin-bottom: 4px;
}
.mtopup-pack-info span {
  font-size: 16px;
  font-weight: 700;
  color: #22c55e;
}
.mtopup-pack-select-btn {
  background: transparent;
  color: #22c55e;
  border: 1px solid #22c55e;
  border-radius: 20px;
  padding: 6px;
  width: 100%;
  font-size: 14px;
  font-weight: 600;
  transition: all 0.2s;
}
.mtopup-pack-card.active .mtopup-pack-select-btn {
  background: #22c55e;
  color: #fff;
}
.mtopup-fixed-footer {
  position: fixed;
  bottom: 60px; /* Above bottom nav */
  left: 0;
  right: 0;
  background: #fff;
  border-top: 1px solid #e2e8f0;
  padding: 16px 0;
  z-index: 40;
  box-shadow: 0 -4px 12px rgba(0,0,0,0.05);
}
.mtopup-footer-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.mtopup-submit-btn {
  background: #22c55e;
  color: #fff;
  border: none;
  border-radius: 24px;
  padding: 12px 24px;
  font-weight: 600;
  font-size: 16px;
}
.mtopup-submit-btn:disabled {
  background: #cbd5e1;
  cursor: not-allowed;
}

/* Wallet Topup UI */
.wallet-input-inner {
  display: flex;
  align-items: center;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 4px 16px;
  margin-top: 8px;
}
.wallet-input-inner input {
  flex: 1;
  border: none;
  font-size: 24px;
  font-weight: 700;
  color: #1e293b;
  padding: 12px 0;
  outline: none;
}
.wallet-input-unit {
  font-size: 16px;
  color: #64748b;
  font-weight: 600;
}
.wallet-quick-amounts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 16px;
}
.wallet-amount-btn {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 12px;
  font-size: 16px;
  font-weight: 600;
  color: #1e293b;
  cursor: pointer;
  transition: all 0.2s;
}
.wallet-amount-btn.active {
  background: #f0fdf4;
  border-color: #22c55e;
  color: #22c55e;
}
.wallet-method-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 8px;
}
.wallet-method-card {
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  background: #fff;
  transition: all 0.2s;
}
.wallet-method-card.active {
  border-color: #22c55e;
  background: #f0fdf4;
}
.wallet-method-card img {
  width: 32px;
  height: 32px;
}
.wallet-method-card.wallet-method-maintenance {
  border-style: dashed;
  border-color: #f0c36a;
  background: #fffbeb;
  color: #64748b;
  cursor: not-allowed;
  opacity: 0.9;
}
.wallet-method-card.wallet-method-maintenance:hover {
  border-color: #f0c36a;
  transform: none;
  box-shadow: none;
}
.wallet-method-copy {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 14px;
}
.wallet-method-copy small {
  color: #b45309;
  font-size: 12px;
  font-weight: 700;
}
.wallet-maintenance-notice {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  padding: 12px 14px;
  border: 1px solid #f3d28b;
  border-radius: 12px;
  background: #fffbeb;
  color: #92400e;
  font-size: 13px;
  line-height: 1.5;
}
.wallet-maintenance-notice svg {
  flex: 0 0 auto;
}

/* Custom QR Code area */
.qr-code-box {
  background: #f0fdf4;
  border-radius: 16px;
  padding: 24px;
  text-align: center;
  margin-top: 16px;
  position: relative;
  overflow: hidden;
}
.qr-code-box::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-image: url('data:image/svg+xml;utf8,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z" fill="%2322c55e" fill-opacity="0.1"/></svg>');
  background-size: 60px;
  z-index: 0;
  opacity: 0.5;
}
.qr-code-inner {
  position: relative;
  z-index: 1;
  background: #fff;
  padding: 16px;
  border-radius: 12px;
  display: inline-block;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}
.qr-code-details {
  position: relative;
  z-index: 1;
  margin-top: 16px;
}

/* Upload Slip */
.upload-slip-area {
  border: 2px dashed #22c55e;
  border-radius: 12px;
  padding: 32px 16px;
  text-align: center;
  background: #f8fafc;
  cursor: pointer;
  margin-top: 16px;
  transition: all 0.2s;
}
.upload-slip-area:hover {
  background: #f0fdf4;
}
.upload-slip-area svg {
  color: #22c55e;
  margin-bottom: 8px;
}

/* Bottom Nav Adjustments */




/* ===== CLEAN GAME CARD STYLES ===== */
/* Desktop & tablet: show in 2�4 columns depending on screen */
.game-card-grid-new {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)) !important;
  gap: 16px !important;
  padding: 16px 0 !important;
  width: 100% !important;
}

/* Each card base style */
.new-game-card {
  width: 100% !important;
  max-width: 100% !important;
  background: #ffffff !important;
  border: none !important;
  outline: none !important;
  border-radius: 16px !important;
  padding: 12px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  gap: 8px !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.07) !important;
}
.new-game-card:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 20px rgba(34,197,94,0.18) !important;
}
.new-game-card.active {
  box-shadow: 0 0 0 2px #22c55e, 0 8px 20px rgba(34,197,94,0.18) !important;
}
.new-game-card-img {
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}
.new-game-card-img img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 14px !important;
  display: block !important;
}
.new-game-card-info {
  width: 100% !important;
  text-align: center !important;
}
.new-game-card-info strong {
  display: block !important;
  font-size: 13px !important;
  color: #1e293b !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  margin-bottom: 2px !important;
}
.new-game-card-info small {
  font-size: 11px !important;
  color: #64748b !important;
}
.new-game-card-btn {
  background:#22c55e !important;
  color: white !important;
  border-radius: 20px !important;
  padding: 7px 14px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  width: 100% !important;
  justify-content: center !important;
  margin-top: auto !important;
  border: none !important;
  transition: all 0.2s !important;
}

/* Mobile: 2 columns */
@media (max-width: 640px) {
  .game-card-grid-new {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
    padding: 10px 0 !important;
  }
  .new-game-card {
    padding: 10px 8px !important;
    border-radius: 14px !important;
    gap: 6px !important;
  }
  .new-game-card-img {
    border-radius: 12px !important;
  }
  .new-game-card-img img {
    border-radius: 12px !important;
  }
  .new-game-card-info strong {
    font-size: 12px !important;
  }
  .new-game-card-btn {
    padding: 6px 10px !important;
    font-size: 11px !important;
  }
}

/* ===== SEARCH BAR ===== */
.game-menu-search-container {
  padding: 0 4px;
  margin-bottom: 8px;
}
.search-input-wrapper {
  display: flex;
  align-items: center;
  background: #f8fafc;
  border: 1.5px solid #e2e8f0;
  border-radius: 14px;
  padding: 0 14px;
  gap: 8px;
  transition: border-color 0.2s;
}
.search-input-wrapper:focus-within {
  border-color: #22c55e;
  background: #fff;
}
.search-input-wrapper svg {
  flex-shrink: 0;
  color: #94a3b8;
}
.game-catalog-search {
  border: none !important;
  background: transparent !important;
  padding: 12px 0 !important;
  font-size: 15px !important;
  flex: 1 !important;
  outline: none !important;
  color: #1e293b !important;
  height: auto !important;
  font-style: normal !important;
}
.filter-icon-btn {
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
  color: #64748b;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

/* ===== FILTER PILLS ===== */
.game-filter-pills {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  gap: 8px !important;
  padding: 8px 4px !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}
.game-filter-pills::-webkit-scrollbar {
  display: none !important;
}
.game-filter-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  padding: 7px 14px !important;
  border-radius: 100px !important;
  background: #ffffff !important;
  border: 1.5px solid #e2e8f0 !important;
  color: #475569 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}
.game-filter-pill svg {
  color: #94a3b8 !important;
  flex-shrink: 0 !important;
}
.game-filter-pill:hover {
  border-color: #22c55e !important;
  color: #22c55e !important;
}
.game-filter-pill.active {
  background: linear-gradient(135deg, #22c55e, #16a34a) !important;
  color: #ffffff !important;
  border-color: transparent !important;
  box-shadow: 0 4px 12px rgba(34, 197, 94, 0.3) !important;
}
.game-filter-pill.active svg {
  color: #ffffff !important;
}

/* ===== HERO BANNER ===== */
.game-topup-hero-banner {
  border-radius: 16px !important;
  overflow: hidden !important;
  margin-bottom: 16px !important;
  width: 100% !important;
}
.game-topup-hero-banner img {
  width: 100% !important;
  height: 180px !important;
  object-fit: cover !important;
  display: block !important;
}
@media (max-width: 640px) {
  .game-topup-hero-banner img {
    height: 130px !important;
  }
}


/* ===== FINAL MOBILE CENTERING FIX ===== */
@media (max-width: 760px) {
  /* Game topup page: full width, centered */
  .game-topup-page,
  .game-topup-page.game-menu-page {
    background: #f1f5f9 !important;
    padding: 0 !important;
    margin-top: 0 !important;
    min-height: auto !important;
  }

  .game-menu-page .game-topup-shell {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 12px 100px 12px !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
  }

  /* Hero banner: full width */
  .game-topup-hero-banner {
    margin: 0 -12px 0 -12px !important;
    border-radius: 0 !important;
  }
  .game-topup-hero-banner img {
    border-radius: 0 !important;
    height: 160px !important;
  }

  /* game-menu-head: 1 column on mobile */
  .game-menu-head {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
  }
  
  /* Make game menu search container full width */
  .game-menu-search-container {
    width: 100% !important;
    padding: 0 !important;
  }

  /* Game catalog section: full width */
  .game-menu-catalog,
  section.game-menu-catalog {
    width: 100% !important;
    padding: 0 !important;
  }

  /* 2 cols for cards */
  .game-card-grid-new {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
    width: 100% !important;
  }

  /* Hide stats section if present */
  .game-topup-stats {
    display: none !important;
  }
}


/* ===== 4-COLUMN GAME GRID ON MOBILE ===== */
@media (max-width: 760px) {
  .game-card-grid-new {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 8px !important;
    padding: 8px 0 !important;
    width: 100% !important;
  }

  .new-game-card {
    width: 100% !important;
    max-width: 100% !important;
    padding: 6px 4px !important;
    border-radius: 10px !important;
    gap: 4px !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08) !important;
  }

  /* Image: square, fill completely */
  .new-game-card-img {
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    border-radius: 8px !important;
    overflow: hidden !important;
  }
  .new-game-card-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
    border-radius: 8px !important;
  }

  /* Smaller text */
  .new-game-card-info strong {
    font-size: 10px !important;
    line-height: 1.2 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }
  .new-game-card-info small {
    font-size: 9px !important;
  }

  /* Select button: compact */
  .new-game-card-btn {
    font-size: 10px !important;
    padding: 5px 6px !important;
    border-radius: 12px !important;
    gap: 2px !important;
  }
  .new-game-card-btn svg {
    width: 10px !important;
    height: 10px !important;
  }
}


/* ======================================
   FINAL GAME CARD STYLES - DO NOT EDIT ABOVE
   ====================================== */

/* Grid: 4 columns on mobile, auto-fill on desktop */
.game-card-grid-new {
  display: grid !important;
  gap: 10px !important;
  padding: 10px 0 !important;
  width: 100% !important;
}

@media (min-width: 761px) {
  .game-card-grid-new {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important;
    gap: 16px !important;
  }
}

@media (max-width: 760px) {
  .game-card-grid-new {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 8px !important;
  }
}

/* Card itself */
.new-game-card {
  width: 100% !important;
  max-width: 100% !important;
  background: #ffffff !important;
  border: none !important;
  outline: none !important;
  border-radius: 12px !important;
  padding: 6px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  gap: 5px !important;
  cursor: pointer !important;
  transition: transform 0.2s, box-shadow 0.2s !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.08) !important;
}
.new-game-card:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 16px rgba(34,197,94,0.2) !important;
}
.new-game-card.active {
  box-shadow: 0 0 0 2px #22c55e, 0 4px 12px rgba(34,197,94,0.2) !important;
}

/* IMAGE CONTAINER: always square, full width */
.new-game-card-img {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1 / 1 !important;
  min-width: unset !important;
  min-height: unset !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  display: block !important;
  flex-shrink: 0 !important;
}

/* IMAGE: fill the square container completely */
.new-game-card-img img {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: cover !important;
  object-position: center center !important;
  border-radius: 0 !important;
}

/* Text info */
.new-game-card-info {
  width: 100% !important;
  text-align: center !important;
}
.new-game-card-info strong {
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  font-size: 11px !important;
  color: #1e293b !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
  margin-bottom: 1px !important;
}
.new-game-card-info small {
  font-size: 9px !important;
  color: #64748b !important;
  display: block !important;
}

/* Select button */
.new-game-card-btn {
  background:#22c55e !important;
  color: #fff !important;
  border: none !important;
  border-radius: 10px !important;
  padding: 5px 4px !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2px !important;
  width: 100% !important;
  margin-top: auto !important;
  cursor: pointer !important;
}
.new-game-card-btn svg {
  width: 10px !important;
  height: 10px !important;
}


/* ======================================
   BALANCED GRID - DESKTOP & MOBILE FINAL
   ====================================== */

/* Desktop: auto-fill 6-8 columns centered */
@media (min-width: 1024px) {
  .game-card-grid-new {
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)) !important;
    gap: 16px !important;
    justify-items: stretch !important;
  }
}

/* Tablet: 5 columns */
@media (min-width: 761px) and (max-width: 1023px) {
  .game-card-grid-new {
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 14px !important;
  }
}

/* Mobile: 4 columns */
@media (max-width: 760px) {
  .game-card-grid-new {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 8px !important;
  }
}

/* Ad banner inside grid: always span full width */
.game-feed-ad {
  grid-column: 1 / -1 !important;
  margin: 6px 0 !important;
}
.game-feed-ad img {
  width: 100% !important;
  height: auto !important;
  display: block !important;
  border-radius: 14px !important;
  object-fit: cover !important;
}


/* ======================================
   FOOTER DARK THEME - FINAL OVERRIDE
   ====================================== */

/* Desktop footer: dark background, white text, 4-column grid */
.footer {
  background: #0f172a !important;
  color: #94a3b8 !important;
  border-top: none !important;
  margin: 0 !important;
  padding: 48px 0 32px !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.footer-grid {
  display: grid !important;
  grid-template-columns: 2fr 1fr 1fr 1.2fr !important;
  gap: 40px !important;
  width: min(1200px, calc(100% - 48px)) !important;
  margin: 0 auto !important;
}

/* Store name */
.footer h2#footerStoreName,
.footer h2 {
  font-size: 20px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  margin: 0 0 12px !important;
}
.footer p {
  font-size: 13px !important;
  color: #64748b !important;
  line-height: 1.6 !important;
  margin: 0 0 20px !important;
}

/* Section headings */
.footer h3,
.footer-grid > div > h3 {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #ffffff !important;
  margin: 0 0 16px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

/* Links */
.footer a {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  color: #64748b !important;
  font-size: 13px !important;
  text-decoration: none !important;
  padding: 4px 0 !important;
  transition: color 0.2s !important;
}
.footer a:hover {
  color: #22c55e !important;
}
.footer a .icon,
.footer a svg {
  width: 16px !important;
  height: 16px !important;
  stroke: currentColor !important;
  flex-shrink: 0 !important;
}

/* Social icons */
.footer-social {
  display: flex !important;
  gap: 12px !important;
  margin-top: 16px !important;
}
.footer-social a {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  background: #1e293b !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  transition: background 0.2s !important;
}
.footer-social a:hover {
  background: #22c55e !important;
  color: #fff !important;
}

/* Bottom bar */
.footer-bottom,
.footer-copy {
  margin-top: 32px !important;
  padding-top: 20px !important;
  border-top: 1px solid #1e293b !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  font-size: 12px !important;
  color: #475569 !important;
  width: min(1200px, calc(100% - 48px)) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.footer-bottom a,
.footer-copy a {
  display: inline !important;
  color: #475569 !important;
  padding: 0 !important;
}
.footer-bottom a:hover,
.footer-copy a:hover {
  color: #22c55e !important;
}

/* Mobile: stack to 2 columns, add spacing above bottom nav */
@media (max-width: 760px) {
  .footer {
    padding: 32px 0 calc(90px + env(safe-area-inset-bottom)) !important;
  }
  
  .footer .shell.footer-grid,
  .footer-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 28px 20px !important;
    width: calc(100% - 32px) !important;
    margin: 0 16px !important;
  }
  
  /* First col (brand) spans full width */
  .footer-grid > div:first-child {
    grid-column: 1 / -1 !important;
  }
  
  .footer h3 {
    font-size: 13px !important;
    margin-bottom: 10px !important;
  }
  .footer a {
    font-size: 12px !important;
    padding: 3px 0 !important;
  }
  .footer a svg,
  .footer a .icon {
    width: 14px !important;
    height: 14px !important;
  }
  
  .footer-bottom,
  .footer-copy {
    flex-direction: column !important;
    gap: 6px !important;
    text-align: center !important;
    width: calc(100% - 32px) !important;
    margin-left: 16px !important;
    margin-right: 16px !important;
  }

  /* Fix: main nav overlapping footer on mobile */
  .main-nav {
    display: none !important;
  }
}


/* ======================================
   FOOTER - EXACT MATCH TO REFERENCE
   ====================================== */

/* Reset footer */
.footer {
  background: #111827 !important;
  color: #9ca3af !important;
  border-top: none !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Main inner grid */
.footer-inner {
  display: grid !important;
  grid-template-columns: 1.8fr 1fr 1fr 1.4fr !important;
  gap: 48px !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 52px 48px 40px !important;
  box-sizing: border-box !important;
}

/* Col 1 - Brand */
.footer-brand .footer-logo {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-bottom: 14px !important;
}
.footer-brand .footer-logo img {
  width: 36px !important;
  height: 36px !important;
  object-fit: contain !important;
  border-radius: 8px !important;
}
.footer-brand .footer-logo span {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
}
.footer-brand p {
  font-size: 13px !important;
  color: #6b7280 !important;
  line-height: 1.7 !important;
  margin: 0 0 20px !important;
}

/* Social icons row */
.footer-social {
  display: flex !important;
  gap: 10px !important;
  margin-top: 4px !important;
}
.footer-social a {
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  transition: opacity 0.2s, transform 0.2s !important;
  flex-shrink: 0 !important;
}
.footer-social a:hover {
  opacity: 0.85 !important;
  transform: translateY(-2px) !important;
}

/* Col 2, 3 - Menu / Services */
.footer-col h3 {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #ffffff !important;
  margin: 0 0 18px !important;
  letter-spacing: 0.3px !important;
}
.footer-col nav {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}
.footer-col nav a {
  color: #6b7280 !important;
  font-size: 13px !important;
  text-decoration: none !important;
  display: block !important;
  padding: 0 !important;
  transition: color 0.2s !important;
  line-height: 1.4 !important;
}
.footer-col nav a:hover {
  color: #22c55e !important;
}

/* Col 4 - Contact */
.footer-contacts {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
}
.footer-contacts a {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  text-decoration: none !important;
  transition: opacity 0.2s !important;
  padding: 0 !important;
}
.footer-contacts a:hover {
  opacity: 0.8 !important;
}
.contact-icon {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}
.footer-contacts strong {
  display: block !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #e5e7eb !important;
  line-height: 1.3 !important;
}
.footer-contacts span {
  font-size: 12px !important;
  color: #6b7280 !important;
  line-height: 1.3 !important;
}
.footer-contacts .contact-icon svg{width:17px!important;height:17px!important;fill:none!important;stroke:#fff!important;stroke-width:1.8!important;stroke-linecap:round!important;stroke-linejoin:round!important}.footer-contacts .contact-icon-line svg,.footer-contacts .contact-icon-facebook svg{fill:#fff!important;stroke:none!important}

/* Bottom bar */
.footer-bottom {
  border-top: 1px solid #1f2937 !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 20px 48px !important;
  font-size: 12px !important;
  color: #4b5563 !important;
  box-sizing: border-box !important;
}
.footer-bottom a {
  color: #4b5563 !important;
  text-decoration: none !important;
  padding: 0 !important;
  display: inline !important;
  transition: color 0.2s !important;
}
.footer-bottom a:hover {
  color: #22c55e !important;
}

/* ===== MOBILE ===== */
@media (max-width: 760px) {
  .footer {
    padding-bottom: calc(80px + env(safe-area-inset-bottom)) !important;
  }
  
  .footer-inner {
    grid-template-columns: 1fr 1fr !important;
    gap: 32px 24px !important;
    padding: 36px 20px 28px !important;
  }
  
  /* Brand spans full width on mobile */
  .footer-brand {
    grid-column: 1 / -1 !important;
  }
  
  .footer-col h3 {
    font-size: 13px !important;
    margin-bottom: 12px !important;
  }
  .footer-col nav a {
    font-size: 12px !important;
  }
  .footer-contacts strong {
    font-size: 12px !important;
  }
  .footer-contacts span {
    font-size: 11px !important;
  }
  
  .footer-bottom {
    flex-direction: column !important;
    gap: 8px !important;
    text-align: center !important;
    padding: 16px 20px !important;
  }
}

/* ===== FIX: Hide duplicate floating nav on mobile ===== */
@media (max-width: 760px) {
  /* The desktop menu bar (���ٷ�����) should never show over the footer */
  .main-nav-desktop,
  .desktop-only-nav {
    display: none !important;
  }
}

/* FINAL GAME TOPUP DETAIL � locked to supplied reference */
body:has(#gameTopupView.package-mode) main{max-width:none!important;width:100%!important;padding-left:32px!important;padding-right:32px!important;background:#f8fafb!important}
#gameTopupView.package-mode .game-topup-page{background:#f8fafb!important}
#gameTopupView.package-mode .game-topup-shell{width:min(1400px,100%)!important;max-width:1400px!important;margin:auto!important;padding:20px 0 50px!important}
#gameTopupView.package-mode .game-topup-hero-banner,#gameTopupView.package-mode .game-menu-head,#gameTopupView.package-mode .game-menu-catalog{display:none!important}
#gameTopupView.package-mode .game-package-section{display:block!important;margin:0!important;padding:0!important}
#gameTopupView.package-mode .simple-game-info{display:grid!important;grid-template-columns:170px minmax(0,1fr)!important;gap:28px!important;min-height:190px!important;margin:0 0 16px!important;padding:22px!important;border:1px solid #e1e9e5!important;border-radius:16px!important;background:linear-gradient(115deg,#fff 0%,#fff 56%,#e9f9ee 100%)!important;box-shadow:0 5px 20px rgba(30,70,45,.06)!important}
#gameTopupView.package-mode .simple-game-cover{width:170px!important;height:150px!important;border-radius:13px!important;align-self:center!important;overflow:hidden!important;box-shadow:0 8px 18px rgba(15,30,20,.14)!important}
#gameTopupView.package-mode .simple-game-cover img{width:100%!important;height:100%!important;object-fit:cover!important}
#gameTopupView.package-mode .simple-game-copy h2{order:-3!important;margin:0 0 7px!important;font-size:23px!important;line-height:1.25!important;color:#182333!important}
#gameTopupView.package-mode .simple-game-copy p{order:-2!important;margin:0 0 17px!important;max-width:780px!important;font-size:13px!important;line-height:1.6!important;color:#596675!important;display:block!important}
#gameTopupView.package-mode .simple-game-kicker,#gameTopupView.package-mode .simple-game-badges{display:none!important}
#gameTopupView.package-mode .simple-game-notes{display:grid!important;grid-template-columns:repeat(4,minmax(120px,1fr))!important;gap:10px!important}
#gameTopupView.package-mode .simple-game-notes span,#gameTopupView.package-mode .simple-game-notes:after{display:flex!important;align-items:center!important;min-height:43px!important;padding:9px 11px!important;border:0!important;border-radius:8px!important;background:#f1faf4!important;color:#263c2d!important;font-size:11px!important;line-height:1.3!important}
#gameTopupView.package-mode .simple-game-notes:after{content:'��ԡ�õ�ʹ 24 ��.'!important}
#gameTopupView.package-mode .simple-topup-main{display:grid!important;grid-template-columns:minmax(0,2.1fr) 360px!important;gap:18px!important;align-items:start!important}
#gameTopupView.package-mode .topup-left-column{display:grid!important;gap:16px!important;min-width:0!important}
#gameTopupView.package-mode .simple-step-card,#gameTopupView.package-mode .simple-topup-main>aside.simple-checkout-bar{margin:0!important;padding:19px!important;border:1px solid #e0e8e3!important;border-radius:15px!important;background:#fff!important;box-shadow:0 4px 16px rgba(30,70,45,.05)!important}
#gameTopupView.package-mode .simple-step-title{display:flex!important;align-items:center!important;gap:11px!important;margin:0 0 14px!important}
#gameTopupView.package-mode .simple-step-title>span{width:29px!important;height:29px!important;flex:0 0 29px!important;display:grid!important;place-items:center!important;border-radius:50%!important;background:#0ba64b!important;color:#fff!important;font-size:13px!important;box-shadow:none!important}
#gameTopupView.package-mode .simple-step-title h2{margin:0!important;font-size:16px!important;color:#212b35!important}.simple-step-title small{display:none!important}
#gameTopupView.package-mode .game-topup-form label{display:block!important;margin:0!important;font-size:0!important}
#gameTopupView.package-mode .game-topup-form input[name=game_uid]{display:block!important;width:100%!important;height:46px!important;padding:0 15px!important;border:1px solid #ccd7df!important;border-radius:8px!important;background:#fff!important;font-size:13px!important;color:#202b35!important;box-sizing:border-box!important}
#gameTopupView.package-mode .uid-warning{margin:8px 0 0!important;padding:8px 12px!important;border:1px solid #ffd590!important;border-radius:7px!important;background:#fff9ed!important;color:#ce7510!important;font-size:11px!important;line-height:1.35!important}
#gameTopupView.package-mode .pack-head{display:flex!important;align-items:center!important;justify-content:space-between!important;margin-bottom:13px!important}
#gameTopupView.package-mode #gameTopupBack{padding:7px 10px!important;border:0!important;background:#eff9f2!important;color:#078f3d!important;font-size:11px!important}
#gameTopupView.package-mode .simple-pack-grid{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:12px!important;max-height:none!important;overflow:visible!important}
#gameTopupView.package-mode .pack-list-header{display:none!important}
#gameTopupView.package-mode .pack-pick-card{position:relative!important;display:grid!important;grid-template-columns:54px minmax(0,1fr)!important;grid-template-rows:auto auto!important;gap:3px 10px!important;width:100%!important;min-width:0!important;height:104px!important;min-height:104px!important;margin:0!important;padding:11px!important;border:1px solid #d8e1dc!important;border-radius:8px!important;background:#fff!important;box-shadow:none!important;text-align:left!important;overflow:hidden!important}
#gameTopupView.package-mode .pack-pick-card.active{border-color:#0aaa4b!important;box-shadow:0 0 0 1px #0aaa4b!important}
#gameTopupView.package-mode .pack-art{grid-row:1/3!important;width:54px!important;height:54px!important;align-self:center!important;border-radius:7px!important;overflow:hidden!important}
#gameTopupView.package-mode .pack-info{display:block!important;min-width:0!important;padding:0!important}.pack-info .pack-pick-name{display:block!important;max-height:34px!important;overflow:hidden!important;font-size:12px!important;line-height:1.35!important;font-weight:700!important;color:#202a34!important}.pack-info small{display:block!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;font-size:9px!important;line-height:1.4!important;color:#78828b!important}
#gameTopupView.package-mode .pack-sku{display:none!important}
#gameTopupView.package-mode .pack-price{align-self:end!important;padding:0!important;border:0!important;background:transparent!important;color:#079d43!important;font-size:12px!important;line-height:1!important}
#gameTopupView.package-mode .pack-action{position:absolute!important;right:9px!important;bottom:8px!important;padding:5px 12px!important;border:0!important;border-radius:5px!important;background:#079d43!important;color:#fff!important;font-size:10px!important;line-height:1!important}
#gameTopupView.package-mode .simple-topup-main>aside.simple-checkout-bar{position:sticky!important;top:78px!important;display:block!important;width:auto!important}
#gameTopupView.package-mode .checkout-heading h3{font-size:17px!important}.checkout-heading span{font-size:10px!important}.checkout-product,.checkout-uid{font-size:11px!important}.checkout-total{font-size:12px!important}.checkout-total strong{font-size:20px!important}.checkout-safe{font-size:11px!important}.checkout-note{font-size:11px!important}.checkout-note textarea{height:76px!important;font-size:11px!important}
#gameTopupView.package-mode .simple-topup-main>aside>.simple-checkout-bar{display:block!important;margin:12px 0 0!important;padding:0!important;border:0!important;background:none!important;box-shadow:none!important}
#gameTopupView.package-mode .simple-topup-main>aside .topup-summary{display:none!important}
#gameTopupView.package-mode #gameTopupSubmitButton{display:flex!important;width:100%!important;min-height:46px!important;margin:0!important;border:0!important;border-radius:7px!important;background:#079d43!important;color:#fff!important;box-shadow:none!important}
@media(max-width:960px){body:has(#gameTopupView.package-mode) main{padding-left:15px!important;padding-right:15px!important}#gameTopupView.package-mode .simple-topup-main{grid-template-columns:1fr!important}#gameTopupView.package-mode .simple-topup-main>aside.simple-checkout-bar{position:static!important}#gameTopupView.package-mode .simple-pack-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media(max-width:600px){#gameTopupView.package-mode .game-topup-shell{padding-top:10px!important}#gameTopupView.package-mode .simple-game-info{grid-template-columns:88px 1fr!important;min-height:0!important;padding:13px!important;gap:13px!important}#gameTopupView.package-mode .simple-game-cover{width:88px!important;height:88px!important}#gameTopupView.package-mode .simple-game-copy h2{font-size:16px!important}#gameTopupView.package-mode .simple-game-copy p,#gameTopupView.package-mode .simple-game-notes{display:none!important}#gameTopupView.package-mode .simple-pack-grid{grid-template-columns:1fr!important}}

/* STEP 1: game information hero */
@media(min-width:961px){
  #gameTopupView.package-mode .game-topup-shell{position:relative!important;left:50%!important;width:calc(100vw - 64px)!important;max-width:1400px!important;margin-left:0!important;transform:translateX(-50%)!important}
}
#gameTopupView.package-mode .simple-game-info{
  position:relative!important;inset:auto!important;box-sizing:border-box!important;
  width:100%!important;height:auto!important;min-height:205px!important;overflow:hidden!important;
  grid-template-columns:190px minmax(0,1fr)!important;gap:28px!important;
  padding:22px!important;margin:0 0 16px!important;
  border:1px solid #dce8e1!important;border-radius:16px!important;
  background:linear-gradient(115deg,#fff 0%,#fff 58%,#ecfaf1 82%,#d9f5e3 100%)!important;
}
#gameTopupView.package-mode .simple-game-info:after{content:''!important;position:absolute!important;right:-35px!important;top:-80px!important;width:330px!important;height:330px!important;border-radius:48% 0 48% 48%!important;background:linear-gradient(135deg,rgba(255,255,255,.9),rgba(44,190,95,.18))!important;transform:rotate(25deg)!important;pointer-events:none!important}
#gameTopupView.package-mode .simple-game-cover{position:relative!important;z-index:1!important;width:190px!important;height:160px!important;margin:0!important;align-self:center!important;border-radius:13px!important}
#gameTopupView.package-mode .simple-game-copy{position:relative!important;z-index:1!important;display:flex!important;min-width:0!important;justify-content:center!important}
#gameTopupView.package-mode .simple-game-copy h2{margin:0 0 7px!important;font-size:23px!important;line-height:1.3!important;font-weight:800!important}
#gameTopupView.package-mode .simple-game-copy p{margin:0 0 17px!important;font-size:13px!important;line-height:1.55!important}
#gameTopupView.package-mode .simple-game-notes{width:min(850px,100%)!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:10px!important;margin:0!important}
#gameTopupView.package-mode .simple-game-notes span,#gameTopupView.package-mode .simple-game-notes:after{box-sizing:border-box!important;min-width:0!important;min-height:44px!important;margin:0!important;padding:9px 11px!important;border-radius:8px!important;background:#f1faf4!important;font-size:11px!important;line-height:1.3!important;white-space:normal!important}
#gameTopupView.package-mode .simple-game-notes:after{position:static!important;width:auto!important;height:auto!important;transform:none!important;content:'��ԡ�õ�ʹ 24 ��.'!important;color:#263c2d!important}
@media(max-width:700px){#gameTopupView.package-mode .simple-game-info{min-height:116px!important;grid-template-columns:88px 1fr!important;gap:13px!important;padding:13px!important}#gameTopupView.package-mode .simple-game-cover{width:88px!important;height:88px!important}}

/* STEP 2: UID form */
#gameTopupView.package-mode .game-topup-form.simple-step-card{box-sizing:border-box!important;width:100%!important;min-height:164px!important;padding:18px 20px 16px!important;border:1px solid #e1e8e4!important;border-radius:15px!important;background:#fff!important;box-shadow:0 4px 16px rgba(30,70,45,.05)!important}
#gameTopupView.package-mode .game-topup-form .simple-step-title{display:flex!important;align-items:flex-start!important;width:100%!important;margin:0 0 13px!important;gap:11px!important}
#gameTopupView.package-mode .game-topup-form .simple-step-title>span{width:29px!important;height:29px!important;flex:0 0 29px!important;margin-top:1px!important;display:grid!important;place-items:center!important;border-radius:50%!important;background:#079d43!important;color:#fff!important;font-size:13px!important;font-weight:800!important}
#gameTopupView.package-mode .game-topup-form .simple-step-title>div{min-width:0!important;display:block!important}
#gameTopupView.package-mode .game-topup-form .simple-step-title h2{margin:0!important;font-size:15px!important;line-height:1.35!important;font-weight:800!important;color:#202a34!important}
#gameTopupView.package-mode .game-topup-form .simple-step-title small{display:block!important;margin-top:2px!important;font-size:10px!important;line-height:1.35!important;color:#748078!important}
#gameTopupView.package-mode .uid-help{margin-left:auto!important;padding:5px 0!important;color:#079d43!important;font-size:10px!important;font-weight:700!important;text-decoration:none!important;white-space:nowrap!important}
#gameTopupView.package-mode .game-topup-form label{position:relative!important;display:block!important;width:100%!important;margin:0!important}
#gameTopupView.package-mode .game-topup-form label:before{content:'?'!important;position:absolute!important;left:14px!important;top:50%!important;z-index:2!important;transform:translateY(-50%)!important;color:#82909a!important;font-size:15px!important}
#gameTopupView.package-mode .game-topup-form input[name=game_uid]{box-sizing:border-box!important;display:block!important;width:100%!important;height:45px!important;margin:0!important;padding:0 15px 0 39px!important;border:1px solid #cad5dd!important;border-radius:8px!important;background:#fff!important;color:#202a34!important;font-size:12px!important;line-height:45px!important;outline:none!important;box-shadow:none!important}
#gameTopupView.package-mode .game-topup-form input[name=game_uid]:focus{border-color:#079d43!important;box-shadow:0 0 0 3px rgba(7,157,67,.10)!important}
#gameTopupView.package-mode .game-topup-form input[name=game_uid]::placeholder{color:#8a98a3!important;opacity:1!important}
#gameTopupView.package-mode .uid-warning{box-sizing:border-box!important;display:flex!important;align-items:center!important;width:100%!important;min-height:32px!important;margin:8px 0 0!important;padding:7px 11px!important;border:1px solid #ffd38a!important;border-radius:7px!important;background:#fff8eb!important;color:#cf7410!important;font-size:10px!important;line-height:1.35!important;font-weight:600!important}
#gameTopupView.package-mode .uid-warning:before{content:'!'!important;display:grid!important;place-items:center!important;width:17px!important;height:17px!important;flex:0 0 17px!important;margin-right:8px!important;border-radius:50%!important;background:#f5a623!important;color:#fff!important;font-size:11px!important;font-weight:800!important}
@media(max-width:600px){#gameTopupView.package-mode .game-topup-form.simple-step-card{min-height:0!important;padding:14px!important}#gameTopupView.package-mode .uid-help{display:none!important}}

/* STEP 3: package picker */
#gameTopupView.package-mode .pack-list-panel.simple-step-card{box-sizing:border-box!important;width:100%!important;padding:18px 20px 20px!important;border:1px solid #e1e8e4!important;border-radius:15px!important;background:#fff!important;box-shadow:0 4px 16px rgba(30,70,45,.05)!important;overflow:visible!important}
#gameTopupView.package-mode .pack-list-panel .pack-head{display:flex!important;align-items:flex-start!important;justify-content:space-between!important;width:100%!important;margin:0 0 14px!important}
#gameTopupView.package-mode .pack-list-panel .simple-step-title{display:flex!important;align-items:flex-start!important;gap:11px!important;margin:0!important}
#gameTopupView.package-mode .pack-list-panel .simple-step-title>span{width:29px!important;height:29px!important;flex:0 0 29px!important;display:grid!important;place-items:center!important;border-radius:50%!important;background:#079d43!important;color:#fff!important;font-size:13px!important;font-weight:800!important}
#gameTopupView.package-mode .pack-list-panel .simple-step-title h2{margin:0!important;font-size:15px!important;line-height:1.35!important;color:#202a34!important;font-weight:800!important}
#gameTopupView.package-mode .pack-list-panel .simple-step-title small{display:block!important;margin-top:2px!important;color:#748078!important;font-size:10px!important;line-height:1.35!important}
#gameTopupView.package-mode #gameTopupBack{margin-top:2px!important;padding:6px 10px!important;border:0!important;border-radius:7px!important;background:#eff9f2!important;color:#078e3c!important;font-size:10px!important;font-weight:700!important;white-space:nowrap!important}
#gameTopupView.package-mode .simple-pack-grid{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:12px!important;width:100%!important;max-height:none!important;padding:0!important;margin:0!important;overflow:visible!important}
#gameTopupView.package-mode .pack-pick-card{box-sizing:border-box!important;position:relative!important;display:grid!important;grid-template-columns:58px minmax(0,1fr)!important;grid-template-rows:1fr auto!important;column-gap:11px!important;row-gap:3px!important;width:100%!important;height:106px!important;min-height:106px!important;margin:0!important;padding:11px 10px!important;border:1px solid #d8e1dc!important;border-radius:8px!important;background:#fff!important;box-shadow:none!important;overflow:hidden!important;text-align:left!important;cursor:pointer!important}
#gameTopupView.package-mode .pack-pick-card:hover{border-color:#70c991!important;box-shadow:0 5px 14px rgba(7,157,67,.08)!important;transform:none!important}
#gameTopupView.package-mode .pack-pick-card.active{border-color:#079d43!important;background:#fbfffc!important;box-shadow:0 0 0 1px #079d43!important}
#gameTopupView.package-mode .pack-pick-card.active:before{content:'�й�'!important;position:absolute!important;left:0!important;top:0!important;padding:4px 10px!important;border-radius:7px 0 7px 0!important;background:#079d43!important;color:#fff!important;font-size:9px!important;font-weight:700!important}
#gameTopupView.package-mode .pack-art{grid-column:1!important;grid-row:1/3!important;width:58px!important;height:58px!important;align-self:center!important;margin:0!important;border-radius:7px!important;overflow:hidden!important;box-shadow:0 4px 9px rgba(15,30,20,.12)!important}
#gameTopupView.package-mode .pack-art img{width:100%!important;height:100%!important;object-fit:cover!important}
#gameTopupView.package-mode .pack-info{grid-column:2!important;grid-row:1!important;display:block!important;min-width:0!important;margin:0!important;padding:0 48px 0 0!important;align-self:center!important}
#gameTopupView.package-mode .pack-info .pack-pick-name{display:-webkit-box!important;-webkit-box-orient:vertical!important;-webkit-line-clamp:2!important;max-height:35px!important;margin:0!important;overflow:hidden!important;color:#202a34!important;font-size:12px!important;line-height:1.4!important;font-weight:800!important}
#gameTopupView.package-mode .pack-info small{display:block!important;max-width:100%!important;margin-top:2px!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;color:#7b868f!important;font-size:9px!important;line-height:1.35!important}
#gameTopupView.package-mode .pack-price{grid-column:2!important;grid-row:2!important;align-self:end!important;width:max-content!important;margin:0!important;padding:0!important;border:0!important;background:none!important;color:#079d43!important;font-size:12px!important;line-height:1.2!important;font-weight:800!important}
#gameTopupView.package-mode .pack-price small{display:none!important}
#gameTopupView.package-mode .pack-action{position:absolute!important;right:9px!important;bottom:8px!important;min-width:48px!important;margin:0!important;padding:5px 9px!important;border:0!important;border-radius:5px!important;background:#079d43!important;color:#fff!important;font-size:9px!important;line-height:1!important;font-weight:700!important;text-align:center!important}
#gameTopupView.package-mode .pack-sku{display:none!important}
@media(max-width:1100px) and (min-width:961px){#gameTopupView.package-mode .simple-pack-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media(max-width:700px){#gameTopupView.package-mode .pack-list-panel.simple-step-card{padding:14px!important}#gameTopupView.package-mode .simple-pack-grid{grid-template-columns:1fr!important}}

/* STEP 3 polish: clearer, balanced package cards */
#gameTopupView.package-mode .pack-pick-card{grid-template-columns:64px minmax(0,1fr)!important;grid-template-rows:minmax(0,1fr) 25px!important;column-gap:12px!important;height:118px!important;min-height:118px!important;padding:12px!important;border-color:#d9e3dd!important;border-radius:9px!important;background:#fff!important}
#gameTopupView.package-mode .pack-pick-card:hover{background:#fbfffc!important;border-color:#48bc73!important;box-shadow:0 7px 18px rgba(7,157,67,.09)!important}
#gameTopupView.package-mode .pack-art{width:64px!important;height:64px!important;border-radius:8px!important;box-shadow:0 5px 12px rgba(18,35,25,.13)!important}
#gameTopupView.package-mode .pack-info{align-self:start!important;padding:1px 0 0!important;overflow:visible!important}
#gameTopupView.package-mode .pack-info .pack-pick-name{display:-webkit-box!important;-webkit-box-orient:vertical!important;-webkit-line-clamp:2!important;max-height:38px!important;white-space:normal!important;overflow:hidden!important;text-overflow:ellipsis!important;font-size:12px!important;line-height:1.45!important;letter-spacing:0!important}
#gameTopupView.package-mode .pack-info small{display:-webkit-box!important;-webkit-box-orient:vertical!important;-webkit-line-clamp:2!important;max-height:25px!important;margin-top:3px!important;white-space:normal!important;overflow:hidden!important;font-size:9px!important;line-height:1.35!important;color:#7d878f!important}
#gameTopupView.package-mode .pack-price{position:static!important;grid-column:2!important;grid-row:2!important;align-self:center!important;justify-self:start!important;display:block!important;width:auto!important;min-width:0!important;height:auto!important;margin:0!important;padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;color:#079d43!important;font-size:12px!important;line-height:1.2!important;font-weight:800!important}
#gameTopupView.package-mode .pack-action{position:absolute!important;right:10px!important;bottom:10px!important;display:grid!important;place-items:center!important;width:54px!important;min-width:54px!important;height:25px!important;padding:0!important;border:0!important;border-radius:5px!important;background:#079d43!important;color:#fff!important;font-size:9px!important;line-height:1!important;font-weight:700!important;box-shadow:0 3px 8px rgba(7,157,67,.18)!important}
#gameTopupView.package-mode .pack-pick-card.active .pack-action{background:#078b3b!important;color:#fff!important}
#gameTopupView.package-mode .pack-pick-card.active:after{content:'?'!important;position:absolute!important;right:7px!important;top:7px!important;display:grid!important;place-items:center!important;width:17px!important;height:17px!important;border-radius:50%!important;background:#079d43!important;color:#fff!important;font-size:10px!important}
#gameTopupView.package-mode .pack-pick-card.active:before{content:'�й�'!important;padding:3px 8px!important;font-size:8px!important}

/* STEP 4: order summary */
#gameTopupView.package-mode .simple-topup-main>aside.simple-checkout-bar{box-sizing:border-box!important;padding:18px!important;border:1px solid #e1e8e4!important;border-radius:15px!important;background:#fff!important;box-shadow:0 4px 16px rgba(30,70,45,.05)!important;overflow:hidden!important}
#gameTopupView.package-mode .checkout-heading{display:flex!important;align-items:center!important;justify-content:space-between!important;padding:0 0 13px!important;border-bottom:1px solid #e6ece8!important}
#gameTopupView.package-mode .checkout-heading h3{margin:0!important;color:#202a34!important;font-size:16px!important;font-weight:800!important}
#gameTopupView.package-mode .checkout-heading span{padding:5px 8px!important;border-radius:12px!important;background:#eff9f2!important;color:#078f3d!important;font-size:9px!important}
#gameTopupView.package-mode .checkout-product{padding:13px 0!important;border-bottom:1px solid #e6ece8!important;color:#68746d!important;font-size:10px!important}
#gameTopupView.package-mode .checkout-product>span{display:block!important;margin-bottom:9px!important}
#gameTopupView.package-mode .checkout-product p{margin:0!important;color:#7c8780!important;font-size:10px!important}
#gameTopupView.package-mode .checkout-product-row{display:grid!important;grid-template-columns:42px minmax(0,1fr) auto!important;gap:9px!important;align-items:center!important;margin:0!important;color:#202a34!important}
#gameTopupView.package-mode .checkout-product-row .pack-art{grid-column:1!important;grid-row:1!important;width:42px!important;height:42px!important;margin:0!important;border-radius:6px!important}
#gameTopupView.package-mode .checkout-product-row strong{min-width:0!important;font-size:10px!important;line-height:1.35!important;font-weight:700!important}
#gameTopupView.package-mode .checkout-product-row b{color:#079d43!important;font-size:10px!important;white-space:nowrap!important}
#gameTopupView.package-mode .checkout-uid{display:flex!important;justify-content:space-between!important;padding:12px 0!important;border-bottom:1px solid #e6ece8!important;color:#536059!important;font-size:10px!important}
#gameTopupView.package-mode .checkout-total{display:flex!important;align-items:center!important;justify-content:space-between!important;padding:14px 0!important;color:#202a34!important;font-size:11px!important;font-weight:800!important}
#gameTopupView.package-mode .checkout-total strong{color:#079d43!important;font-size:20px!important}
#gameTopupView.package-mode .checkout-safe{display:flex!important;gap:9px!important;padding:11px!important;border:1px solid #cdebd8!important;border-radius:8px!important;background:#f2fbf5!important;color:#31513b!important;font-size:10px!important;line-height:1.4!important}
#gameTopupView.package-mode .checkout-safe small{color:#748078!important;font-size:9px!important}
#gameTopupView.package-mode .checkout-note{display:block!important;margin-top:14px!important;color:#465149!important;font-size:10px!important}
#gameTopupView.package-mode .checkout-note textarea{box-sizing:border-box!important;display:block!important;width:100%!important;height:75px!important;margin-top:7px!important;padding:10px!important;border:1px solid #d5ded8!important;border-radius:8px!important;background:#fff!important;color:#202a34!important;font-size:10px!important;resize:none!important;outline:none!important}
#gameTopupView.package-mode .checkout-note textarea:focus{border-color:#079d43!important;box-shadow:0 0 0 3px rgba(7,157,67,.08)!important}
#gameTopupView.package-mode #gameTopupSubmitButton{position:relative!important;display:flex!important;align-items:center!important;justify-content:center!important;width:100%!important;height:45px!important;min-height:45px!important;margin:0!important;padding:0 14px!important;border:0!important;border-radius:7px!important;background:#079d43!important;color:#fff!important;box-shadow:none!important;overflow:hidden!important;font-size:11px!important}
#gameTopupView.package-mode #gameTopupSubmitButton:before,#gameTopupView.package-mode #gameTopupSubmitButton:after,#gameTopupView.package-mode #gameTopupSubmitButton *:before,#gameTopupView.package-mode #gameTopupSubmitButton *:after{display:none!important;content:none!important}
#gameTopupView.package-mode #gameTopupSubmitButton:disabled{background:#e8ece9!important;color:#939b96!important;opacity:1!important}
#gameTopupView.package-mode #gameTopupSubmitButton .pay-copy{display:block!important;color:inherit!important;font-size:11px!important;font-weight:700!important;transform:none!important}
#gameTopupView.package-mode #gameTopupSubmitButton svg{width:15px!important;height:15px!important;margin-right:7px!important}
#gameTopupView.package-mode .checkout-trust{margin:11px 0 0!important;text-align:center!important;color:#77827b!important;font-size:9px!important}

/* Icon-only UI and summary refinement � no emoji */
#gameTopupView.package-mode .simple-topup-main{grid-template-columns:minmax(0,1fr) 380px!important}
#gameTopupView.package-mode .simple-game-notes span:first-child:before{content:''!important;display:inline-block!important;width:16px!important;height:16px!important;flex:0 0 16px!important;margin-right:7px!important;background:no-repeat center/16px 16px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23079d43' stroke-width='1.8' viewBox='0 0 24 24'%3E%3Cpath d='M12 3 4.5 6v5.4c0 4.7 3.2 8.2 7.5 9.6 4.3-1.4 7.5-4.9 7.5-9.6V6L12 3Z'/%3E%3Cpath d='m8.8 12 2 2 4.4-4.5'/%3E%3C/svg%3E")!important;box-shadow:none!important;border-radius:0!important}
#gameTopupView.package-mode .game-topup-form label:before{content:''!important;width:16px!important;height:16px!important;background:no-repeat center/16px 16px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%2382909a' stroke-width='1.8' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='8' r='3.5'/%3E%3Cpath d='M5.5 20c.7-4 3-6 6.5-6s5.8 2 6.5 6'/%3E%3C/svg%3E")!important}
#gameTopupView.package-mode .checkout-heading span{display:flex!important;align-items:center!important;gap:4px!important}
#gameTopupView.package-mode .checkout-heading span svg{display:block!important;width:12px!important;height:12px!important;fill:none!important;stroke:#078f3d!important;stroke-width:1.8!important;stroke-linecap:round!important;stroke-linejoin:round!important}
#gameTopupView.package-mode .checkout-safe>svg{display:block!important;width:18px!important;height:18px!important;flex:0 0 18px!important;fill:none!important;stroke:#079d43!important;stroke-width:1.8!important;stroke-linecap:round!important;stroke-linejoin:round!important}
#gameTopupView.package-mode .checkout-trust{display:flex!important;align-items:center!important;justify-content:center!important;gap:5px!important}
#gameTopupView.package-mode .checkout-trust svg{display:block!important;width:12px!important;height:12px!important;fill:none!important;stroke:#079d43!important;stroke-width:1.8!important}
#gameTopupView.package-mode #gameTopupSubmitButton .pay-visual,#gameTopupView.package-mode #gameTopupSubmitButton .pay-copy>svg{display:none!important}
#gameTopupView.package-mode #gameTopupSubmitButton .pay-copy,#gameTopupView.package-mode #gameTopupSubmitButton .pay-copy>span{display:block!important;color:inherit!important;margin:0!important;padding:0!important}
@media(max-width:960px){#gameTopupView.package-mode .simple-topup-main{grid-template-columns:1fr!important}}

/* Fix feature strip: remove legacy generated labels and text squeezing */
#gameTopupView.package-mode .simple-game-notes{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:10px!important;width:min(900px,100%)!important}
#gameTopupView.package-mode .simple-game-notes span,#gameTopupView.package-mode .simple-game-notes:after{box-sizing:border-box!important;display:flex!important;align-items:center!important;justify-content:flex-start!important;min-width:0!important;height:48px!important;min-height:48px!important;padding:8px 11px!important;border:0!important;border-radius:8px!important;background:#f1faf4!important;color:#25382c!important;font-size:10px!important;line-height:1.35!important;font-weight:600!important;white-space:normal!important;overflow:hidden!important}
#gameTopupView.package-mode .simple-game-notes span:after{content:none!important;display:none!important}
#gameTopupView.package-mode .simple-game-notes span:before{content:''!important;display:block!important;width:17px!important;height:17px!important;flex:0 0 17px!important;margin:0 8px 0 0!important;border-radius:0!important;background-color:transparent!important;background-repeat:no-repeat!important;background-position:center!important;background-size:17px 17px!important;box-shadow:none!important}
#gameTopupView.package-mode .simple-game-notes span:nth-child(1):before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23079d43' stroke-width='1.8' viewBox='0 0 24 24'%3E%3Cpath d='M12 3 4.5 6v5.4c0 4.7 3.2 8.2 7.5 9.6 4.3-1.4 7.5-4.9 7.5-9.6V6L12 3Z'/%3E%3Cpath d='m8.8 12 2 2 4.4-4.5'/%3E%3C/svg%3E")!important}
#gameTopupView.package-mode .simple-game-notes span:nth-child(2):before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23079d43' stroke-width='1.8' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E")!important}
#gameTopupView.package-mode .simple-game-notes span:nth-child(3):before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23079d43' stroke-width='1.8' viewBox='0 0 24 24'%3E%3Crect x='5' y='6' width='14' height='13' rx='2'/%3E%3Cpath d='M9 6V4m6 2V4M8 11h8m-4 0v5'/%3E%3C/svg%3E")!important}
#gameTopupView.package-mode .simple-game-notes:after{content:none!important;display:none!important}
#gameTopupView.package-mode .simple-game-notes span:nth-child(4):before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23079d43' stroke-width='1.8' viewBox='0 0 24 24'%3E%3Cpath d='M4 12a8 8 0 1 0 3-6.2'/%3E%3Cpath d='M4 5v5h5M12 8v4l3 2'/%3E%3C/svg%3E")!important}
@media(max-width:800px){#gameTopupView.package-mode .simple-game-notes{grid-template-columns:repeat(2,minmax(0,1fr))!important}}

/* Page back action */
#gameTopupView.package-mode .topup-page-back{position:absolute!important;z-index:5!important;left:0!important;top:-45px!important;display:flex!important;align-items:center!important;gap:7px!important;height:34px!important;margin:0!important;padding:0 12px!important;border:1px solid #d6e3da!important;border-radius:8px!important;background:#fff!important;color:#34433a!important;box-shadow:0 3px 10px rgba(30,70,45,.05)!important;font:inherit!important;font-size:11px!important;font-weight:700!important;cursor:pointer!important}
#gameTopupView.package-mode .topup-page-back:hover{border-color:#079d43!important;background:#f3fbf6!important;color:#079d43!important}
#gameTopupView.package-mode .topup-page-back svg{display:block!important;width:16px!important;height:16px!important;fill:none!important;stroke:currentColor!important;stroke-width:1.8!important;stroke-linecap:round!important;stroke-linejoin:round!important}
#gameTopupView.package-mode .simple-game-info{margin-top:45px!important;overflow:visible!important}
#gameTopupView.package-mode .simple-game-info:after{overflow:hidden!important}
@media(max-width:600px){#gameTopupView.package-mode .topup-page-back{top:-41px!important;height:31px!important;font-size:10px!important}#gameTopupView.package-mode .simple-game-info{margin-top:41px!important}}

/* Mobile sidebar must never render as an unstyled footer duplicate on desktop */
#mobileSidebar{display:none!important}
@media(max-width:760px){#mobileSidebar.open{display:block!important}}

/* Balanced game catalog and intrinsic-size hero */
#gameTopupView:not(.package-mode) .game-topup-hero-banner{width:100%!important;height:auto!important;margin:0 0 22px!important;border-radius:14px!important;overflow:hidden!important;background:transparent!important}
#gameTopupView:not(.package-mode) .game-topup-hero-banner img{display:block!important;width:100%!important;max-width:100%!important;height:auto!important;max-height:none!important;aspect-ratio:auto!important;object-fit:contain!important;object-position:center!important;border-radius:14px!important}
#gameTopupView:not(.package-mode) .game-card-grid-new{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(138px,1fr))!important;grid-auto-rows:196px!important;align-items:stretch!important;gap:14px!important;padding:10px 0!important}
#gameTopupView:not(.package-mode) .new-game-card{box-sizing:border-box!important;display:grid!important;grid-template-rows:126px 38px 24px!important;align-items:start!important;width:100%!important;height:196px!important;min-height:196px!important;margin:0!important;padding:5px!important;gap:2px!important;border:1px solid #e7ede9!important;border-radius:11px!important;background:#fff!important;overflow:hidden!important}
#gameTopupView:not(.package-mode) .new-game-card-img{box-sizing:border-box!important;width:100%!important;height:126px!important;min-height:126px!important;aspect-ratio:auto!important;padding:7px!important;border-radius:8px!important;background:#fff!important;overflow:hidden!important}
#gameTopupView:not(.package-mode) .new-game-card-img img{display:block!important;width:100%!important;height:100%!important;border-radius:7px!important;object-fit:contain!important;object-position:center!important}
#gameTopupView:not(.package-mode) .new-game-card-info{box-sizing:border-box!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;width:100%!important;height:38px!important;min-height:38px!important;padding:0 3px!important;overflow:hidden!important}
#gameTopupView:not(.package-mode) .new-game-card-info strong{display:-webkit-box!important;-webkit-box-orient:vertical!important;-webkit-line-clamp:2!important;max-height:27px!important;margin:0!important;overflow:hidden!important;font-size:10px!important;line-height:1.3!important;text-align:center!important}
#gameTopupView:not(.package-mode) .new-game-card-info small{display:block!important;margin:1px 0 0!important;font-size:8px!important;line-height:1!important}
#gameTopupView:not(.package-mode) .new-game-card-btn{box-sizing:border-box!important;display:flex!important;align-items:center!important;justify-content:center!important;width:100%!important;height:24px!important;min-height:24px!important;margin:0!important;padding:0 5px!important;border-radius:7px!important;font-size:9px!important;line-height:1!important}
@media(min-width:1300px){#gameTopupView:not(.package-mode) .game-card-grid-new{grid-template-columns:repeat(8,minmax(0,1fr))!important}}
@media(max-width:760px){#gameTopupView:not(.package-mode) .game-topup-hero-banner{margin:0!important;border-radius:10px!important}#gameTopupView:not(.package-mode) .game-topup-hero-banner img{height:auto!important;border-radius:10px!important}#gameTopupView:not(.package-mode) .game-card-grid-new{grid-template-columns:repeat(3,minmax(0,1fr))!important;grid-auto-rows:160px!important;gap:8px!important}#gameTopupView:not(.package-mode) .new-game-card{grid-template-rows:98px 34px 22px!important;height:160px!important;min-height:160px!important}#gameTopupView:not(.package-mode) .new-game-card-img{height:98px!important;min-height:98px!important;padding:5px!important}#gameTopupView:not(.package-mode) .new-game-card-info{height:34px!important;min-height:34px!important}}

/* Centered catalog controls */
#gameTopupView:not(.package-mode) .game-menu-head{display:flex!important;justify-content:center!important;width:100%!important;margin:0 auto 24px!important;padding:0!important}
#gameTopupView:not(.package-mode) .game-menu-search-container{display:flex!important;flex-direction:column!important;align-items:center!important;width:min(1080px,100%)!important;margin:0 auto!important}
#gameTopupView:not(.package-mode) .search-input-wrapper{box-sizing:border-box!important;width:100%!important;max-width:1080px!important;height:46px!important;margin:0 auto!important;border-radius:12px!important}
#gameTopupView:not(.package-mode) .game-filter-pills{display:flex!important;align-items:center!important;justify-content:center!important;flex-wrap:wrap!important;gap:8px!important;width:100%!important;margin:9px auto 0!important}
#gameTopupView:not(.package-mode) .game-filter-pill{display:flex!important;align-items:center!important;justify-content:center!important;min-height:34px!important;margin:0!important;padding:0 14px!important;border-radius:18px!important;transition:background .18s,border-color .18s,color .18s,box-shadow .18s!important}
#gameTopupView:not(.package-mode) .game-filter-pill.active{box-shadow:0 5px 13px rgba(7,157,67,.16)!important}
@media(max-width:600px){#gameTopupView:not(.package-mode) .game-menu-head{margin-bottom:15px!important}#gameTopupView:not(.package-mode) .game-filter-pills{justify-content:flex-start!important;flex-wrap:nowrap!important;overflow-x:auto!important;padding:0 2px 5px!important;scrollbar-width:none!important}#gameTopupView:not(.package-mode) .game-filter-pill{flex:0 0 auto!important;min-height:31px!important;padding:0 12px!important;font-size:10px!important}}

/* Hamburger is mobile-only */
@media(min-width:761px){#mobileMenuBtn{display:none!important}}

/* Mobile catalog spacing and card balance */
@media(max-width:760px){
  #gameTopupView:not(.package-mode) .game-menu-search-container{box-sizing:border-box!important;width:100%!important;padding:0!important;overflow:visible!important}
  #gameTopupView:not(.package-mode) .game-filter-pills{box-sizing:border-box!important;width:calc(100% + 24px)!important;margin:8px -12px 0!important;padding:6px 12px 9px!important;gap:8px!important;overflow-x:auto!important;overflow-y:visible!important;scroll-padding-left:12px!important;-webkit-overflow-scrolling:touch!important}
  #gameTopupView:not(.package-mode) .game-filter-pills::-webkit-scrollbar{display:none!important}
  #gameTopupView:not(.package-mode) .game-filter-pill{height:34px!important;min-height:34px!important;padding:0 14px!important;border-radius:17px!important;box-shadow:none!important}
  #gameTopupView:not(.package-mode) .game-filter-pill.active{box-shadow:0 5px 12px rgba(7,157,67,.18)!important}
  #gameTopupView:not(.package-mode) .game-card-grid-new{box-sizing:border-box!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;grid-auto-rows:auto!important;align-items:stretch!important;width:100%!important;gap:9px!important;padding:10px 0!important}
  #gameTopupView:not(.package-mode) .new-game-card{box-sizing:border-box!important;display:grid!important;grid-template-rows:104px 42px 27px!important;width:100%!important;height:185px!important;min-height:185px!important;padding:6px!important;gap:3px!important;border-radius:10px!important}
  #gameTopupView:not(.package-mode) .new-game-card-img{box-sizing:border-box!important;width:100%!important;height:104px!important;min-height:104px!important;padding:8px!important;border-radius:8px!important;background:#fff!important}
  #gameTopupView:not(.package-mode) .new-game-card-img img{width:100%!important;height:100%!important;object-fit:contain!important;object-position:center!important}
  #gameTopupView:not(.package-mode) .new-game-card-info{box-sizing:border-box!important;display:flex!important;height:42px!important;min-height:42px!important;padding:1px 2px!important;justify-content:center!important}
  #gameTopupView:not(.package-mode) .new-game-card-info strong{width:100%!important;max-height:27px!important;font-size:9px!important;line-height:1.35!important}
  #gameTopupView:not(.package-mode) .new-game-card-info small{height:10px!important;margin-top:2px!important;font-size:7px!important;line-height:10px!important}
  #gameTopupView:not(.package-mode) .new-game-card-btn{box-sizing:border-box!important;width:calc(100% - 4px)!important;height:27px!important;min-height:27px!important;margin:0 2px!important;padding:0 6px!important;border-radius:7px!important;font-size:9px!important}
  #gameTopupView:not(.package-mode) .game-feed-ad{align-self:start!important;height:auto!important;margin:6px 0 10px!important}
}

/* Mobile homepage: keep promo banners, stats and recommendations compact like the supplied reference. */
@media (max-width: 600px) {
  html body #shopView .shell {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    padding-right: 10px !important;
    padding-left: 10px !important;
    overflow-x: hidden !important;
  }
  html body #shopView .home-promo-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
    width: 100% !important;
    margin: 10px 0 14px !important;
  }
  html body #shopView .home-promo-card {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 112px !important;
    border-radius: 11px !important;
    background-position: center !important;
  }
  html body #shopView .home-promo-copy {
    box-sizing: border-box !important;
    width: 64% !important;
    min-height: 112px !important;
    padding: 9px 0 8px 8px !important;
  }
  html body #shopView .home-promo-copy h2 { font-size: clamp(13px, 4vw, 17px) !important; }
  html body #shopView .home-promo-copy p { font-size: 6px !important; }
  html body #shopView .home-promo-button { padding: 5px 6px !important; font-size: 6.5px !important; }

  html body #shopView .stats-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 0 !important;
    width: 100% !important;
    margin: 12px 0 18px !important;
    padding: 6px 3px !important;
    border: 1px solid #cbe7aa !important;
    border-radius: 13px !important;
    background: #fff !important;
    box-shadow: 0 6px 18px rgba(60, 127, 36, .08) !important;
    overflow: hidden !important;
  }
  html body #shopView .stat-card {
    display: flex !important;
    align-items: center !important;
    flex-direction: column !important;
    justify-content: center !important;
    min-width: 0 !important;
    min-height: 67px !important;
    padding: 5px 2px !important;
    border: 0 !important;
    border-right: 1px solid #e7eee2 !important;
    border-radius: 0 !important;
    background: #fff !important;
    box-shadow: none !important;
    text-align: center !important;
  }
  html body #shopView .stat-card:last-child { border-right: 0 !important; }
  html body #shopView .stat-card > span {
    width: 100% !important;
    overflow: hidden !important;
    color: #68746b !important;
    font-size: 6.5px !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
  }
  html body #shopView .stat-card strong { color: #20ad50 !important; font-size: 14px !important; line-height: 1.2 !important; }
  html body #shopView .stat-card small { margin-left: 2px !important; font-size: 6px !important; }

  html body #shopView .recommendations-head { margin: 0 0 8px !important; padding: 0 3px !important; }
  html body #shopView .recommendations-head h2 { margin: 0 !important; font-size: 14px !important; }
  html body #shopView .recommendations-head p { display: none !important; }
  html body #shopView .recommendations-head .text-link { font-size: 8px !important; }
  html body #shopView #recommendedProducts.recommend-box {
    width: 100% !important;
    min-height: 0 !important;
    margin: 0 0 22px !important;
    padding: 7px !important;
    border: 1px solid #cbe7aa !important;
    border-radius: 13px !important;
    background: #fff !important;
    box-shadow: 0 6px 18px rgba(60, 127, 36, .08) !important;
    overflow: hidden !important;
  }
  html body #shopView #recommendedProducts .recommend-track {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    grid-auto-flow: row !important;
    gap: 6px !important;
    width: 100% !important;
    animation: none !important;
    transform: none !important;
  }
  html body #shopView #recommendedProducts .recommend-card {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 126px !important;
    padding: 4px !important;
    border: 1px solid #e6eee3 !important;
    border-radius: 9px !important;
    background: #fff !important;
    box-shadow: none !important;
  }
  html body #shopView #recommendedProducts .recommend-card:nth-child(n + 5) { display: none !important; }
  html body #shopView #recommendedProducts .recommend-media {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 1 / 1 !important;
    border-radius: 7px !important;
  }
  html body #shopView #recommendedProducts .recommend-media > span,
  html body #shopView #recommendedProducts .recommend-body > p,
  html body #shopView #recommendedProducts .recommend-body > small { display: none !important; }
  html body #shopView #recommendedProducts .recommend-body { display: flex !important; align-items: center !important; gap: 2px !important; padding: 0 !important; text-align: center !important; }
  html body #shopView #recommendedProducts .recommend-body > strong {
    display: -webkit-box !important;
    min-height: 20px !important;
    max-height: 20px !important;
    overflow: hidden !important;
    font-size: 7px !important;
    line-height: 1.35 !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
  }
  html body #shopView #recommendedProducts .recommend-body > b { color: #169b42 !important; font-size: 9px !important; }
  html body #shopView #recommendedProducts .recommend-body > button {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 20px !important;
    padding: 3px 2px !important;
    border-radius: 999px !important;
    font-size: 6px !important;
  }
  html body #shopView #recommendedProducts .recommend-body > button svg { display: none !important; }
}

/* Premium app category catalog: compact, scannable app groups. */
html body #premiumAppsView #premiumCategoryChips.premium-grid{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  align-items:start!important;
  gap:14px!important;
  width:100%!important;
  margin:14px 0 26px!important;
}
html body #premiumAppsView #premiumCategoryChips .peam-cat-card{
  position:relative!important;
  display:grid!important;
  grid-template-rows:auto auto!important;
  align-self:start!important;
  min-width:0!important;
  height:auto!important;
  margin:0!important;
  padding:0!important;
  border:1px solid #dfe8e2!important;
  border-radius:16px!important;
  background:#fff!important;
  box-shadow:0 6px 18px rgba(26,65,39,.07)!important;
  overflow:hidden!important;
  cursor:pointer!important;
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease!important;
}
html body #premiumAppsView #premiumCategoryChips .peam-cat-card:hover{
  transform:translateY(-3px)!important;
  border-color:#9ddcad!important;
  box-shadow:0 11px 26px rgba(25,119,55,.13)!important;
}
html body #premiumAppsView #premiumCategoryChips .peam-cat-card.active{
  border-color:#20aa51!important;
  box-shadow:0 0 0 2px rgba(32,170,81,.13),0 10px 24px rgba(24,126,57,.12)!important;
}
html body #premiumAppsView #premiumCategoryChips .peam-cat-card-img{
  display:block!important;
  width:100%!important;
  height:auto!important;
  min-height:0!important;
  aspect-ratio:16/7!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:linear-gradient(135deg,#eff9f2,#e3f4e8)!important;
  overflow:hidden!important;
}
html body #premiumAppsView #premiumCategoryChips .peam-cat-card-img img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  object-position:center!important;
}
html body #premiumAppsView #premiumCategoryChips .peam-cat-card-body{
  box-sizing:border-box!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  align-items:center!important;
  gap:9px!important;
  width:100%!important;
  min-height:66px!important;
  padding:11px 12px!important;
  background:#fff!important;
}
html body #premiumAppsView #premiumCategoryChips .peam-cat-card-text{
  display:grid!important;
  min-width:0!important;
  gap:3px!important;
  text-align:left!important;
}
html body #premiumAppsView #premiumCategoryChips .peam-cat-card-text strong{
  overflow:hidden!important;
  color:#1c2920!important;
  font-size:13px!important;
  line-height:1.25!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}
html body #premiumAppsView #premiumCategoryChips .peam-cat-card-text small{
  overflow:hidden!important;
  color:#829087!important;
  font-size:8px!important;
  line-height:1.35!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}
html body #premiumAppsView #premiumCategoryChips .peam-cat-card-count{
  padding:5px 7px!important;
  border-radius:999px!important;
  background:#eaf8ee!important;
  color:#168842!important;
  font-size:8px!important;
  font-weight:800!important;
  white-space:nowrap!important;
}
@media(max-width:1180px){
  html body #premiumAppsView #premiumCategoryChips.premium-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
}
@media(max-width:780px){
  html body #premiumAppsView #premiumCategoryChips.premium-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important;margin:10px 0 18px!important}
  html body #premiumAppsView #premiumCategoryChips .peam-cat-card{border-radius:13px!important}
  html body #premiumAppsView #premiumCategoryChips .peam-cat-card-img{aspect-ratio:16/8!important}
  html body #premiumAppsView #premiumCategoryChips .peam-cat-card-body{display:block!important;min-height:58px!important;padding:9px 10px!important}
  html body #premiumAppsView #premiumCategoryChips .peam-cat-card-text strong{font-size:11px!important}
  html body #premiumAppsView #premiumCategoryChips .peam-cat-card-text small{font-size:7px!important}
  html body #premiumAppsView #premiumCategoryChips .peam-cat-card-count{display:none!important}
}

/* Exact mobile checkout button sizing */
@media(max-width:760px){
  html body #gameTopupView.package-mode .simple-topup-main>aside.simple-checkout-bar{grid-template-columns:minmax(0,1fr) 76px 108px!important;padding:9px 10px!important}
  html body #gameTopupView.package-mode .simple-topup-main>aside>.simple-checkout-bar{box-sizing:border-box!important;display:block!important;width:108px!important;height:42px!important;min-height:42px!important;margin:0!important;padding:0!important;align-self:center!important;overflow:hidden!important}
  html body #gameTopupView.package-mode #gameTopupSubmitButton,html body #gameTopupView.package-mode #gameTopupSubmitButton:not(:disabled){box-sizing:border-box!important;display:flex!important;width:108px!important;max-width:108px!important;height:42px!important;min-height:42px!important;max-height:42px!important;margin:0!important;padding:0 7px!important;align-items:center!important;justify-content:center!important;border-radius:7px!important;overflow:hidden!important}
}
@media(max-width:390px){html body #gameTopupView.package-mode .simple-topup-main>aside.simple-checkout-bar{grid-template-columns:minmax(0,1fr) 66px 94px!important}html body #gameTopupView.package-mode .simple-topup-main>aside>.simple-checkout-bar,html body #gameTopupView.package-mode #gameTopupSubmitButton,html body #gameTopupView.package-mode #gameTopupSubmitButton:not(:disabled){width:94px!important;max-width:94px!important}}

html body #premiumAppsView.premium-service-page #premiumCategoryChips{display:none!important;height:0!important;min-height:0!important;margin:0!important;padding:0!important;overflow:hidden!important}

/* Clean premium purchase button */
html body #premiumAppsView #premiumBuyForm .pay-transaction-btn{box-sizing:border-box!important;position:relative!important;display:flex!important;align-items:center!important;justify-content:center!important;width:100%!important;height:48px!important;min-height:48px!important;max-height:48px!important;margin:12px 0 0!important;padding:0 16px!important;border:1px solid #128e43!important;border-radius:8px!important;background:#16a34a!important;background-image:none!important;color:#fff!important;box-shadow:none!important;overflow:hidden!important;transform:none!important;filter:none!important}
html body #premiumAppsView #premiumBuyForm .pay-transaction-btn:before{content:''!important;position:static!important;display:block!important;width:17px!important;height:17px!important;flex:0 0 17px!important;margin-right:8px!important;background:no-repeat center/17px 17px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='white' stroke-width='1.8' viewBox='0 0 24 24'%3E%3Crect x='3' y='6' width='18' height='13' rx='2'/%3E%3Cpath d='M16 11h5v4h-5zM3 9h18'/%3E%3C/svg%3E")!important;transform:none!important}
html body #premiumAppsView #premiumBuyForm .pay-transaction-btn:after,html body #premiumAppsView #premiumBuyForm .pay-transaction-btn .pay-visual,html body #premiumAppsView #premiumBuyForm .pay-transaction-btn .pay-copy svg{display:none!important;content:none!important}
html body #premiumAppsView #premiumBuyForm .pay-transaction-btn .pay-copy,html body #premiumAppsView #premiumBuyForm .pay-transaction-btn .pay-copy span{position:static!important;display:block!important;width:auto!important;height:auto!important;margin:0!important;padding:0!important;color:#fff!important;font-size:12px!important;line-height:1.2!important;font-weight:700!important;text-align:center!important;text-shadow:none!important;transform:none!important;translate:none!important;opacity:1!important}
html body #premiumAppsView #premiumBuyForm .pay-transaction-btn:hover{border-color:#0f7e3a!important;background:#138f43!important;background-image:none!important;transform:none!important}
html body #premiumAppsView #premiumBuyForm .pay-transaction-btn:disabled{border-color:#d8dfda!important;background:#e4e9e6!important;background-image:none!important;color:#8b958f!important;opacity:1!important}
html body #premiumAppsView #premiumBuyForm .pay-transaction-btn:disabled:before{filter:grayscale(1)!important;opacity:.45!important}
html body #premiumAppsView #premiumBuyForm .pay-transaction-btn:disabled .pay-copy,html body #premiumAppsView #premiumBuyForm .pay-transaction-btn:disabled .pay-copy span{color:#8b958f!important}

/* Premium product cards matched to supplied reference */
html body #premiumAppsView.premium-service-page #premiumProducts:has(>.premium-card){display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;align-items:stretch!important;gap:14px!important;width:100%!important;margin:0!important;padding:0!important}
html body #premiumAppsView .premium-card{box-sizing:border-box!important;position:relative!important;display:grid!important;grid-template-rows:162px 1fr 38px!important;width:100%!important;height:330px!important;min-height:330px!important;margin:0!important;padding:0!important;border:1px solid #dce5df!important;border-radius:13px!important;background:#fff!important;color:#172019!important;box-shadow:0 3px 12px rgba(20,48,30,.05)!important;overflow:hidden!important;text-align:left!important;transform:none!important;filter:none!important;opacity:1!important}
html body #premiumAppsView .premium-card:hover{border-color:#75c993!important;box-shadow:0 8px 20px rgba(22,163,74,.10)!important;transform:translateY(-1px)!important}
html body #premiumAppsView .premium-card.active{border-color:#16a34a!important;box-shadow:0 0 0 1px #16a34a!important}
html body #premiumAppsView .premium-card-img{box-sizing:border-box!important;display:grid!important;place-items:center!important;width:100%!important;height:162px!important;margin:0!important;padding:0!important;border:0!important;border-radius:0!important;background:#fafbfa!important;overflow:hidden!important}
html body #premiumAppsView .premium-card-img img,html body #premiumAppsView .premium-card-img .premium-img-fallback{display:block!important;width:100%!important;height:100%!important;max-width:100%!important;max-height:100%!important;margin:0!important;border-radius:0!important;object-fit:contain!important;object-position:center!important}
html body #premiumAppsView .premium-card-body{box-sizing:border-box!important;display:flex!important;flex-direction:column!important;align-items:stretch!important;width:100%!important;min-width:0!important;margin:0!important;padding:12px 12px 8px!important;background:#fff!important;overflow:hidden!important}
html body #premiumAppsView .premium-card-name{display:-webkit-box!important;-webkit-box-orient:vertical!important;-webkit-line-clamp:2!important;width:100%!important;max-height:36px!important;margin:0 0 8px!important;overflow:hidden!important;color:#172019!important;font-size:12px!important;line-height:1.45!important;font-weight:800!important}
html body #premiumAppsView .premium-provider-line{display:none!important}
html body #premiumAppsView .premium-soldout-badge{align-self:flex-start!important;margin:0 0 7px!important;padding:4px 7px!important;border:1px solid #d9ddda!important;border-radius:10px!important;background:#f7f8f7!important;color:#747d77!important;font-size:8px!important;line-height:1!important;font-weight:700!important}
html body #premiumAppsView .premium-card-price{box-sizing:border-box!important;display:flex!important;align-items:center!important;justify-content:center!important;width:100%!important;min-height:34px!important;margin:auto 0 7px!important;padding:5px 9px!important;border:1px solid #cce7d5!important;border-radius:18px!important;background:#eff9f2!important;color:#148d43!important;font-size:15px!important;line-height:1!important;font-weight:800!important;white-space:nowrap!important}
html body #premiumAppsView .premium-card-price .price-original,html body #premiumAppsView .premium-card-price del{margin-right:7px!important;color:#647169!important;font-size:9px!important;font-weight:600!important}
html body #premiumAppsView .premium-card-price .price-discount,html body #premiumAppsView .premium-card-price small{margin-left:7px!important;color:#526159!important;font-size:8px!important;font-weight:700!important}
html body #premiumAppsView .premium-detail-line{display:flex!important;align-items:center!important;gap:5px!important;margin:0!important;color:#455149!important;font-size:9px!important;line-height:1.2!important}
html body #premiumAppsView .premium-detail-line svg{width:12px!important;height:12px!important;fill:none!important;stroke:currentColor!important;stroke-width:1.7!important}
html body #premiumAppsView .agent-price-note{display:none!important}
html body #premiumAppsView .premium-card-bottom{box-sizing:border-box!important;display:flex!important;align-items:center!important;justify-content:space-between!important;gap:8px!important;width:100%!important;height:38px!important;margin:0!important;padding:0 10px 9px!important;background:#fff!important}
html body #premiumAppsView .premium-stock-line{display:flex!important;align-items:center!important;flex:1!important;height:26px!important;margin:0!important;padding:0 9px!important;border-radius:13px!important;background:#edf8f1!important;color:#188143!important;font-size:9px!important;font-weight:700!important}
html body #premiumAppsView .premium-card-action{display:grid!important;place-items:center!important;width:48px!important;height:26px!important;min-width:48px!important;margin:0!important;padding:0!important;border:1px solid #69c68a!important;border-radius:13px!important;background:#fff!important;color:#16a34a!important}
html body #premiumAppsView .premium-card-action svg{width:14px!important;height:14px!important;fill:none!important;stroke:currentColor!important;stroke-width:1.8!important}
html body #premiumAppsView .premium-card.is-out-of-stock{filter:none!important;opacity:.62!important}
html body #premiumAppsView .premium-card.is-out-of-stock .premium-card-img{filter:grayscale(1)!important}
html body #premiumAppsView .premium-card.is-out-of-stock .premium-card-price{border-color:#e0e3e1!important;background:#f5f6f5!important;color:#7c847f!important}
html body #premiumAppsView .premium-card.is-out-of-stock .premium-stock-line{background:#f3f4f3!important;color:#8a918c!important}
@media(max-width:1000px){html body #premiumAppsView.premium-service-page #premiumProducts:has(>.premium-card){grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media(max-width:600px){html body #premiumAppsView.premium-service-page #premiumProducts:has(>.premium-card){grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}html body #premiumAppsView .premium-card{grid-template-rows:120px 1fr 34px!important;height:278px!important;min-height:278px!important;border-radius:10px!important}html body #premiumAppsView .premium-card-img{height:120px!important}html body #premiumAppsView .premium-card-body{padding:9px 9px 6px!important}html body #premiumAppsView .premium-card-name{font-size:10px!important;max-height:30px!important;margin-bottom:6px!important}html body #premiumAppsView .premium-card-price{min-height:30px!important;padding:4px!important;font-size:12px!important}html body #premiumAppsView .premium-detail-line{font-size:8px!important}html body #premiumAppsView .premium-card-bottom{height:34px!important;padding:0 8px 7px!important}html body #premiumAppsView .premium-stock-line{height:25px!important;font-size:8px!important}html body #premiumAppsView .premium-card-action{width:40px!important;min-width:40px!important;height:25px!important}}

/* Hard containment for premium artwork */
html body #premiumAppsView .premium-card>.premium-card-img{box-sizing:border-box!important;position:relative!important;inset:auto!important;z-index:1!important;display:block!important;width:100%!important;height:162px!important;min-height:162px!important;max-height:162px!important;margin:0!important;padding:0!important;overflow:hidden!important;isolation:isolate!important;background:#f7f9f7!important}
html body #premiumAppsView .premium-card>.premium-card-img>img{box-sizing:border-box!important;position:absolute!important;inset:0!important;z-index:1!important;display:block!important;width:100%!important;height:100%!important;min-width:0!important;min-height:0!important;max-width:100%!important;max-height:100%!important;margin:0!important;padding:0!important;object-fit:contain!important;object-position:center!important;transform:none!important;filter:none!important}
html body #premiumAppsView .premium-card>.premium-card-img>.premium-img-fallback{position:absolute!important;inset:0!important;z-index:1!important;width:100%!important;height:100%!important;max-width:100%!important;max-height:100%!important;object-fit:contain!important;overflow:hidden!important}
html body #premiumAppsView .premium-card>.premium-card-body,html body #premiumAppsView .premium-card>.premium-card-bottom{position:relative!important;z-index:3!important}
html body #premiumAppsView .premium-card>.premium-card-img:before,html body #premiumAppsView .premium-card>.premium-card-img:after{display:none!important;content:none!important}
@media(max-width:600px){html body #premiumAppsView .premium-card>.premium-card-img{height:120px!important;min-height:120px!important;max-height:120px!important}}

/* Lock stock and view action to the same baseline on every card */
html body #premiumAppsView .premium-card{position:relative!important;padding-bottom:44px!important}
html body #premiumAppsView .premium-card>.premium-card-body{box-sizing:border-box!important;padding-bottom:8px!important;min-height:0!important;overflow:hidden!important}
html body #premiumAppsView .premium-card>.premium-card-bottom{box-sizing:border-box!important;position:absolute!important;z-index:5!important;left:0!important;right:0!important;bottom:8px!important;display:flex!important;align-items:center!important;width:auto!important;height:28px!important;margin:0!important;padding:0 12px!important;background:#fff!important;overflow:visible!important}
html body #premiumAppsView .premium-card>.premium-card-bottom .premium-stock-line{box-sizing:border-box!important;height:26px!important;min-height:26px!important;margin:0!important}
html body #premiumAppsView .premium-card>.premium-card-bottom .premium-card-action{box-sizing:border-box!important;height:26px!important;min-height:26px!important;margin:0 0 0 8px!important;transform:none!important;align-self:center!important}
@media(max-width:600px){html body #premiumAppsView .premium-card{padding-bottom:39px!important}html body #premiumAppsView .premium-card>.premium-card-bottom{bottom:6px!important;height:26px!important;padding:0 8px!important}html body #premiumAppsView .premium-card>.premium-card-bottom .premium-stock-line,html body #premiumAppsView .premium-card>.premium-card-bottom .premium-card-action{height:24px!important;min-height:24px!important}}

/* Deterministic premium card layout: image, name, price, detail, stock */
html body #premiumAppsView .premium-card{display:block!important;height:330px!important;min-height:330px!important;padding:0!important;overflow:hidden!important}
html body #premiumAppsView .premium-card>.premium-card-img{position:absolute!important;left:0!important;right:0!important;top:0!important;width:100%!important;height:162px!important;min-height:162px!important;max-height:162px!important}
html body #premiumAppsView .premium-card>.premium-card-body{box-sizing:border-box!important;position:absolute!important;z-index:3!important;left:0!important;right:0!important;top:162px!important;bottom:42px!important;display:block!important;width:auto!important;height:auto!important;min-height:0!important;margin:0!important;padding:12px!important;background:#fff!important;overflow:visible!important}
html body #premiumAppsView .premium-card .premium-card-name{display:-webkit-box!important;-webkit-box-orient:vertical!important;-webkit-line-clamp:2!important;width:100%!important;height:auto!important;max-height:34px!important;margin:0!important;overflow:hidden!important;font-size:11px!important;line-height:1.45!important}
html body #premiumAppsView .premium-card .premium-soldout-badge{display:inline-flex!important;align-items:center!important;width:max-content!important;height:20px!important;margin:8px 0 0!important;padding:0 7px!important}
html body #premiumAppsView .premium-card .premium-card-price{box-sizing:border-box!important;position:absolute!important;left:12px!important;right:12px!important;bottom:32px!important;display:flex!important;width:auto!important;height:30px!important;min-height:30px!important;margin:0!important;padding:0 8px!important;overflow:hidden!important}
html body #premiumAppsView .premium-card .premium-detail-line{position:absolute!important;left:12px!important;right:12px!important;bottom:9px!important;display:flex!important;height:15px!important;margin:0!important;overflow:hidden!important}
html body #premiumAppsView .premium-card>.premium-card-bottom{position:absolute!important;z-index:4!important;left:0!important;right:0!important;bottom:7px!important;width:auto!important;height:27px!important;margin:0!important;padding:0 12px!important;background:#fff!important}
html body #premiumAppsView .premium-card.is-out-of-stock .premium-card-price{display:flex!important;visibility:visible!important;opacity:1!important}
@media(max-width:600px){html body #premiumAppsView .premium-card{height:278px!important;min-height:278px!important}html body #premiumAppsView .premium-card>.premium-card-img{height:120px!important;min-height:120px!important;max-height:120px!important}html body #premiumAppsView .premium-card>.premium-card-body{top:120px!important;bottom:38px!important;padding:9px!important}html body #premiumAppsView .premium-card .premium-card-name{font-size:9px!important;max-height:27px!important}html body #premiumAppsView .premium-card .premium-soldout-badge{height:18px!important;margin-top:6px!important;font-size:7px!important}html body #premiumAppsView .premium-card .premium-card-price{left:9px!important;right:9px!important;bottom:28px!important;height:27px!important;min-height:27px!important;font-size:11px!important}html body #premiumAppsView .premium-card .premium-detail-line{left:9px!important;right:9px!important;bottom:7px!important;font-size:7px!important}html body #premiumAppsView .premium-card>.premium-card-bottom{bottom:5px!important;height:25px!important;padding:0 8px!important}}

/* Remove mobile floating selected-product bar */
@media(max-width:760px){html body #premiumAppsView #premiumSelectedBar,html body #premiumAppsView .premium-selected-bar{display:none!important;visibility:hidden!important;height:0!important;min-height:0!important;margin:0!important;padding:0!important;overflow:hidden!important;pointer-events:none!important}}

/* SMM catalog and checkout */
.smm-category-tabs{display:flex;gap:8px;overflow-x:auto;padding:4px 0}.smm-category-btn{flex:0 0 auto;padding:8px 13px;border:1px solid #d8e4dc;border-radius:18px;background:#fff;color:#344239;font:inherit;font-size:11px}.smm-category-btn.active{border-color:#16a34a;background:#16a34a;color:#fff}.smm-service-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:20px}.smm-service-card{box-sizing:border-box;display:grid;grid-template-columns:48px 1fr;gap:7px 10px;min-height:150px;padding:14px;border:1px solid #dce6df;border-radius:12px;background:#fff;color:#172019;text-align:left}.smm-service-card:hover{border-color:#16a34a;box-shadow:0 7px 18px rgba(22,163,74,.1)}.smm-service-icon{grid-row:1/3;display:grid;place-items:center;width:48px;height:48px;border-radius:10px;background:#edf9f1;color:#16a34a;overflow:hidden}.smm-service-icon img{width:100%;height:100%;object-fit:cover}.smm-service-icon svg{width:23px;height:23px;fill:none;stroke:currentColor}.smm-service-card span>small,.smm-service-card span>strong,.smm-service-card span>em{display:block}.smm-service-card span>small{color:#168443;font-size:9px}.smm-service-card span>strong{margin-top:3px;font-size:12px;line-height:1.4}.smm-service-card span>em{margin-top:4px;color:#748078;font-size:9px;font-style:normal}.smm-service-card>b{grid-column:1/-1;color:#16a34a;font-size:15px}.smm-service-card>i{grid-column:1/-1;color:#6e7972;font-size:9px;font-style:normal}.smm-order-overlay{position:fixed;z-index:4000;inset:0;display:grid;place-items:center;padding:16px;background:rgba(9,17,12,.55)}.smm-order-dialog{position:relative;box-sizing:border-box;width:min(460px,100%);padding:22px;border-radius:15px;background:#fff;box-shadow:0 24px 60px rgba(0,0,0,.2)}.smm-order-close{position:absolute;right:12px;top:12px;width:32px;height:32px;border:1px solid #dce5df;border-radius:8px;background:#fff}.smm-order-dialog>small{color:#16a34a}.smm-order-dialog h2{margin:5px 35px 6px 0;font-size:18px}.smm-order-dialog p{color:#6b776f;font-size:11px}.smm-order-dialog form{display:grid;gap:12px;margin-top:17px}.smm-order-dialog label{display:grid;gap:6px;font-size:11px;font-weight:700}.smm-order-dialog input{box-sizing:border-box;width:100%;height:43px;padding:0 12px;border:1px solid #d3ded7;border-radius:8px;font:inherit}.smm-order-total{display:flex;justify-content:space-between;padding:12px;border-radius:8px;background:#eff9f2}.smm-order-total strong{color:#16a34a}.smm-order-dialog .gold-btn{height:45px;border:0;border-radius:8px;background:#16a34a;color:#fff}
@media(max-width:800px){.smm-service-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:480px){.smm-service-grid{grid-template-columns:1fr}.smm-service-card{min-height:135px}}

/* Easy-to-scan SMM service picker */
.smm-catalog-shell{display:grid;gap:16px;margin-top:20px;padding:20px;border:1px solid #dce8df;border-radius:18px;background:#fff;box-shadow:0 14px 38px rgba(26,92,47,.07)}
.smm-catalog-head{display:flex;align-items:center;justify-content:space-between;gap:16px}.smm-catalog-head small{color:#169347;font-size:10px;font-weight:800}.smm-catalog-head h2{margin:3px 0 0;font-size:22px}.smm-catalog-head>span{padding:9px 13px;border-radius:999px;background:#edf9f1;color:#4b5d50;font-size:10px}.smm-catalog-head>span b{color:#159447;font-size:15px}
.smm-easy-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.smm-easy-card{display:grid;grid-template-columns:46px minmax(0,1fr) auto;align-items:center;gap:11px;width:100%;min-height:104px;padding:13px;border:1px solid #dce7df;border-radius:14px;background:#fff;color:#19251d;text-align:left;transition:.2s ease}.smm-easy-card:hover{border-color:#55c879;box-shadow:0 8px 22px rgba(22,163,74,.1);transform:translateY(-1px)}.smm-easy-card.active{border-color:#16a34a;background:#f1fbf4;box-shadow:0 0 0 3px rgba(22,163,74,.1)}
.smm-easy-icon{display:grid;place-items:center;width:46px;height:46px;border-radius:12px;background:#edf8f0;color:#16a34a}.smm-easy-icon img,.smm-easy-icon svg{width:23px;height:23px}.smm-easy-copy{display:grid;min-width:0;gap:4px}.smm-easy-copy>small{color:#5e6d63;font-size:9px}.smm-easy-copy>small em{margin-left:5px;padding:3px 6px;border-radius:999px;background:#e7f8ec;color:#168b43;font-style:normal}.smm-easy-copy>strong{display:-webkit-box;overflow:hidden;font-size:12px;line-height:1.4;-webkit-box-orient:vertical;-webkit-line-clamp:2}.smm-easy-copy>span{color:#849087;font-size:9px}
.smm-easy-price{display:grid;justify-items:end;gap:4px;min-width:92px}.smm-easy-price small{color:#859087;font-size:8px}.smm-easy-price b{color:#159447;font-size:15px}.smm-easy-price em{padding:5px 8px;border-radius:8px;background:#16a34a;color:#fff;font-size:8px;font-style:normal;font-weight:800}.smm-easy-card.active .smm-easy-price em{background:#0f7d38}
.smm-show-more{justify-self:center;min-width:220px;padding:11px 18px;border:1px solid #bfe0ca;border-radius:10px;background:#f4fbf6;color:#14833d;font-weight:800}.smm-no-results{display:grid;place-items:center;gap:5px;min-height:140px;border:1px dashed #cbdad0;border-radius:14px;color:#708078}.smm-no-results b{color:#28372d}.smm-picker-empty{padding:18px;border:1px dashed #cbdad0;border-radius:12px;color:#7b8980;text-align:center}.smm-checkout-easy{display:grid;gap:12px;padding-top:4px}
@media(max-width:800px){.smm-easy-grid{grid-template-columns:1fr}}@media(max-width:520px){.smm-catalog-shell{padding:12px;border-radius:14px}.smm-catalog-head h2{font-size:18px}.smm-easy-card{grid-template-columns:40px minmax(0,1fr);min-height:116px;padding:11px}.smm-easy-icon{width:40px;height:40px}.smm-easy-price{grid-column:2;grid-template-columns:1fr auto;align-items:center;justify-items:start;width:100%;min-width:0}.smm-easy-price small{display:none}.smm-easy-price em{justify-self:end}}

/* Center disabled payment button content */
@media(max-width:760px){
  html body #gameTopupView.package-mode #gameTopupSubmitButton:disabled{display:flex!important;align-items:center!important;justify-content:center!important;height:42px!important;min-height:42px!important;padding:0 7px!important;overflow:hidden!important}
  html body #gameTopupView.package-mode #gameTopupSubmitButton:disabled .pay-visual{display:none!important}
  html body #gameTopupView.package-mode #gameTopupSubmitButton:disabled .pay-copy,html body #gameTopupView.package-mode #gameTopupSubmitButton:disabled .pay-copy span{position:static!important;inset:auto!important;display:block!important;width:auto!important;height:auto!important;margin:0!important;padding:0!important;transform:none!important;translate:none!important;line-height:1.25!important;text-align:center!important;opacity:1!important}
}

/* Product route must never show the category chooser above products */
html body #premiumAppsView.premium-service-page #premiumCategoryChips,
html body:has([id="premiumAppsView"].premium-service-page) #premiumCategoryChips{
  display:none!important;
  height:0!important;
  min-height:0!important;
  margin:0!important;
  padding:0!important;
  overflow:hidden!important;
}

/* Mobile catalog card button inset */
@media(max-width:760px){
  html body #gameTopupView:not(.package-mode) .new-game-card{box-sizing:border-box!important;grid-template-rows:100px 38px 25px!important;height:181px!important;min-height:181px!important;padding:6px!important;gap:3px!important;overflow:hidden!important}
  html body #gameTopupView:not(.package-mode) .new-game-card-img{height:100px!important;min-height:100px!important;padding:7px!important}
  html body #gameTopupView:not(.package-mode) .new-game-card-info{height:38px!important;min-height:38px!important}
  html body #gameTopupView:not(.package-mode) .new-game-card-btn{box-sizing:border-box!important;width:calc(100% - 8px)!important;height:25px!important;min-height:25px!important;margin:0 4px!important;padding:0 5px!important;border-radius:6px!important;align-self:center!important;overflow:hidden!important}
}

/* Mobile slide-out navigation drawer */
@media(max-width:760px){
  body.mobile-sidebar-open{overflow:hidden!important}
  #mobileSidebar{position:fixed!important;z-index:3000!important;inset:0!important;display:block!important;visibility:hidden!important;pointer-events:none!important}
  #mobileSidebar.open{visibility:visible!important;pointer-events:auto!important}
  #mobileSidebar .mobile-sidebar-backdrop{position:absolute!important;inset:0!important;background:rgba(8,15,11,.58)!important;opacity:0!important;transition:opacity .25s ease!important}
  #mobileSidebar.open .mobile-sidebar-backdrop{opacity:1!important}
  #mobileSidebar .mobile-sidebar-content{position:absolute!important;left:0!important;top:0!important;bottom:0!important;width:min(84vw,330px)!important;padding:0 12px calc(24px + env(safe-area-inset-bottom))!important;background:#172019!important;color:#fff!important;box-shadow:12px 0 35px rgba(0,0,0,.28)!important;overflow-y:auto!important;transform:translateX(-105%)!important;transition:transform .28s cubic-bezier(.22,.8,.24,1)!important}
  #mobileSidebar.open .mobile-sidebar-content{transform:translateX(0)!important}
  #mobileSidebar .mobile-sidebar-header{position:sticky!important;top:0!important;z-index:2!important;display:flex!important;align-items:center!important;justify-content:space-between!important;height:68px!important;margin:0 -12px 12px!important;padding:0 16px!important;border-bottom:1px solid rgba(255,255,255,.13)!important;background:#172019!important}
  #mobileSidebar .mobile-sidebar-header>div{display:flex!important;align-items:center!important;gap:9px!important}.sidebar-brand-mark{display:grid!important;place-items:center!important;width:24px!important;height:24px!important;border-radius:7px!important;background:#16a34a!important;color:#fff!important;font-size:13px!important}.mobile-sidebar-header strong{font-size:16px!important}
  #mobileSidebar .sidebar-brand-mark svg{width:14px!important;height:14px!important;fill:none!important;stroke:#fff!important;stroke-width:2!important;stroke-linecap:round!important}
  #mobileSidebarClose{display:grid!important;place-items:center!important;width:36px!important;height:36px!important;padding:0!important;border:1px solid rgba(255,255,255,.25)!important;border-radius:8px!important;background:transparent!important;color:#fff!important}
  #mobileSidebarClose svg{width:18px!important;height:18px!important;fill:none!important;stroke:currentColor!important;stroke-width:2!important;stroke-linecap:round!important}
  #mobileSidebar .mobile-sidebar-nav{display:grid!important;gap:5px!important}
  #mobileSidebar .mobile-nav-link{box-sizing:border-box!important;display:flex!important;align-items:center!important;gap:13px!important;width:100%!important;min-height:48px!important;padding:0 13px!important;border:1px solid transparent!important;border-radius:9px!important;color:#e8eee9!important;text-decoration:none!important;font-size:13px!important;font-weight:600!important;transition:background .15s,border-color .15s,color .15s!important}
  #mobileSidebar .mobile-nav-link:hover,#mobileSidebar .mobile-nav-link.active{border-color:rgba(22,163,74,.5)!important;background:#16a34a!important;color:#fff!important}
  #mobileSidebar .mobile-nav-link svg{width:21px!important;height:21px!important;flex:0 0 21px!important;fill:none!important;stroke:currentColor!important;stroke-width:1.8!important;stroke-linecap:round!important;stroke-linejoin:round!important}
  #mobileSidebar .mobile-sidebar-divider{height:1px!important;margin:10px 5px!important;background:rgba(255,255,255,.13)!important}
}

/* Black / green / white mobile menu theme */
@media(max-width:760px){
  html body #mobileMenuBtn{box-sizing:border-box!important;display:grid!important;place-items:center!important;width:40px!important;height:40px!important;min-width:40px!important;margin:0!important;padding:0!important;border:1px solid #16a34a!important;border-radius:9px!important;background:#0b0d0c!important;color:#fff!important;box-shadow:0 4px 12px rgba(0,0,0,.12)!important;appearance:none!important}
  html body #mobileMenuBtn:hover,html body #mobileMenuBtn:active{background:#16a34a!important;color:#fff!important}
  html body #mobileMenuBtn svg{display:block!important;width:22px!important;height:22px!important;fill:none!important;stroke:#fff!important;stroke-width:2!important;stroke-linecap:round!important}
  #mobileSidebar .mobile-sidebar-content,#mobileSidebar .mobile-sidebar-header{background:#0b0d0c!important;color:#fff!important}
  #mobileSidebar .mobile-sidebar-header{border-bottom-color:#253028!important}
  #mobileSidebar .sidebar-brand-mark{background:#16a34a!important;color:#fff!important}
  #mobileSidebarClose{border-color:#334038!important;background:#111512!important;color:#fff!important}
  #mobileSidebarClose:hover{border-color:#16a34a!important;background:#16a34a!important}
  #mobileSidebar .mobile-nav-link{color:#f5f7f5!important;background:transparent!important}
  #mobileSidebar .mobile-nav-link:hover{border-color:#16a34a!important;background:#111a14!important;color:#fff!important}
  #mobileSidebar .mobile-nav-link.active{border-color:#16a34a!important;background:#16a34a!important;color:#fff!important}
  #mobileSidebar .mobile-nav-link svg{color:#aeb8b1!important}
  #mobileSidebar .mobile-nav-link:hover svg,#mobileSidebar .mobile-nav-link.active svg{color:#fff!important}
  #mobileSidebar .mobile-sidebar-divider{background:#253028!important}
}

/* White mobile navigation theme */
@media(max-width:760px){
  html body #mobileMenuBtn{border:1px solid #d7e3da!important;background:#fff!important;color:#111813!important;box-shadow:0 3px 10px rgba(20,45,28,.08)!important}
  html body #mobileMenuBtn svg{stroke:#111813!important}
  html body #mobileMenuBtn:hover,html body #mobileMenuBtn:active{border-color:#16a34a!important;background:#f0faf3!important;color:#16a34a!important}
  html body #mobileMenuBtn:hover svg,html body #mobileMenuBtn:active svg{stroke:#16a34a!important}
  #mobileSidebar .mobile-sidebar-content,#mobileSidebar .mobile-sidebar-header{background:#fff!important;color:#111813!important}
  #mobileSidebar .mobile-sidebar-header{border-bottom-color:#e3ebe5!important}
  #mobileSidebar .mobile-sidebar-header strong{color:#ffffff!important}
  #mobileSidebar .sidebar-brand-mark{background:#16a34a!important;color:#fff!important}
  #mobileSidebarClose{border-color:#d7e3da!important;background:#f8faf8!important;color:#111813!important}
  #mobileSidebarClose svg{stroke:#111813!important}
  #mobileSidebarClose:hover{border-color:#16a34a!important;background:#f0faf3!important;color:#16a34a!important}
  #mobileSidebarClose:hover svg{stroke:#16a34a!important}
  #mobileSidebar .mobile-nav-link{border-color:transparent!important;background:transparent!important;color:#18201a!important}
  #mobileSidebar .mobile-nav-link svg{color:#657169!important;stroke:currentColor!important}
  #mobileSidebar .mobile-nav-link:hover{border-color:#d8eadf!important;background:#f0faf3!important;color:#128640!important}
  #mobileSidebar .mobile-nav-link:hover svg{color:#16a34a!important}
  #mobileSidebar .mobile-nav-link.active{border-color:#16a34a!important;background:#16a34a!important;color:#fff!important}
  #mobileSidebar .mobile-nav-link.active svg{color:#fff!important}
  #mobileSidebar .mobile-sidebar-divider{background:#e3ebe5!important}
}

/* Authorization visibility must override the mobile link layout. */
#mobileSidebar .mobile-nav-link.hidden{display:none!important}

/* Keep order and wallet details centered and clear of mobile navigation. */
#profileHistoryModal.modal{
  z-index:2300!important;
  display:grid!important;
  place-items:center!important;
  align-items:center!important;
  justify-items:center!important;
  box-sizing:border-box!important;
  padding:max(16px,env(safe-area-inset-top)) 14px max(16px,env(safe-area-inset-bottom))!important;
}
/* The modal layout above must never override its closed state. */
#profileHistoryModal.modal.hidden{display:none!important}
#profileHistoryModal .profile-history-detail-card{
  box-sizing:border-box!important;
  width:min(620px,100%)!important;
  max-width:100%!important;
  max-height:calc(100dvh - 32px)!important;
  margin:0!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  overscroll-behavior:contain!important;
}
body:has(#profileHistoryModal:not(.hidden)) .mobile-bottom-nav{display:none!important}
@media(max-width:600px){
  #profileHistoryModal .profile-history-detail-card{
    width:100%!important;
    max-height:calc(100dvh - 28px)!important;
    padding:20px!important;
    border-radius:20px!important;
  }
  #profileHistoryModal .profile-history-detail{gap:12px!important}
  #profileHistoryModal .profile-history-detail h2{padding-right:38px!important;font-size:20px!important}
  #profileHistoryModal .profile-detail-grid{gap:7px!important}
  #profileHistoryModal .profile-detail-grid div,#profileHistoryModal .profile-detail-section{padding:10px!important;border-radius:11px!important}
}

/* Premium catalog is entered from the all-categories card, not primary navigation */
header [data-route-link="premiumApps"],.topbar [data-route-link="premiumApps"],.main-nav [data-route-link="premiumApps"]{display:none!important}

/* Premium service category cards */
#premiumAppsView .premium-filter-row{display:block!important}
#premiumAppsView #premiumCategoryChips.premium-grid{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(190px,1fr))!important;gap:12px!important;width:100%!important;margin:0 0 22px!important}
#premiumAppsView .peam-cat-card{box-sizing:border-box!important;display:flex!important;align-items:center!important;gap:12px!important;width:100%!important;min-height:82px!important;margin:0!important;padding:12px!important;border:1px solid #dce6df!important;border-radius:12px!important;background:#fff!important;color:#18221b!important;box-shadow:0 3px 12px rgba(25,55,34,.05)!important;text-align:left!important;cursor:pointer!important;transition:border-color .18s,box-shadow .18s,transform .18s,background .18s!important}
#premiumAppsView .peam-cat-card:hover{border-color:#70c98f!important;background:#f8fdf9!important;box-shadow:0 7px 18px rgba(22,163,74,.10)!important;transform:translateY(-1px)!important}
#premiumAppsView .peam-cat-card.active{border-color:#16a34a!important;background:#effaf3!important;box-shadow:0 0 0 1px #16a34a!important}
#premiumAppsView .peam-cat-card-img{display:grid!important;place-items:center!important;width:52px!important;height:52px!important;min-width:52px!important;margin:0!important;border-radius:11px!important;background:#f2faf5!important;overflow:hidden!important}
#premiumAppsView .peam-cat-card-img img{display:block!important;width:100%!important;height:100%!important;object-fit:cover!important}
#premiumAppsView .peam-cat-placeholder{display:grid!important;place-items:center!important;width:100%!important;height:100%!important;padding:4px!important;color:#159447!important;font-size:9px!important;font-weight:800!important;text-align:center!important;overflow:hidden!important}
#premiumAppsView .peam-cat-card-body{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:8px!important;min-width:0!important;flex:1!important}
#premiumAppsView .peam-cat-card-text{display:block!important;min-width:0!important}
#premiumAppsView .peam-cat-card-text strong{display:block!important;margin:0 0 4px!important;color:#18221b!important;font-size:13px!important;line-height:1.25!important;font-weight:800!important}
#premiumAppsView .peam-cat-card-text small{display:-webkit-box!important;-webkit-box-orient:vertical!important;-webkit-line-clamp:2!important;max-height:28px!important;overflow:hidden!important;color:#6d786f!important;font-size:9px!important;line-height:1.4!important}
#premiumAppsView .peam-cat-card-count{flex:0 0 auto!important;padding:5px 7px!important;border-radius:12px!important;background:#eaf7ee!important;color:#128640!important;font-size:8px!important;font-weight:700!important;white-space:nowrap!important}
@media(max-width:600px){#premiumAppsView #premiumCategoryChips.premium-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}#premiumAppsView .peam-cat-card{min-height:74px!important;padding:9px!important;gap:8px!important}#premiumAppsView .peam-cat-card-img{width:43px!important;height:43px!important;min-width:43px!important}#premiumAppsView .peam-cat-card-text strong{font-size:11px!important}#premiumAppsView .peam-cat-card-count{display:none!important}}


  /* Separate premium category index from its product page */
#premiumAppsView #premiumCategoryChips{display:none!important}
#premiumAppsView:not(.premium-service-page) .premium-layout{display:block!important}
#premiumAppsView:not(.premium-service-page) .premium-products-panel{width:100%!important;max-width:none!important}
#premiumAppsView:not(.premium-service-page) .premium-checkout-panel{display:none!important}
#premiumAppsView.premium-service-page #premiumProducts:has(>.premium-card){display:grid!important}
#premiumAppsView #premiumBackBtn{align-items:center!important;gap:6px!important;margin:0 0 12px!important;padding:8px 11px!important;border:1px solid #d9e5dc!important;border-radius:8px!important;background:#fff!important;color:#27332b!important;font-size:11px!important;font-weight:700!important}
#premiumAppsView #premiumBackBtn:not(.hidden){display:flex!important}
#premiumAppsView #premiumBackBtn svg{width:15px!important;height:15px!important;fill:none!important;stroke:currentColor!important;stroke-width:1.8!important;stroke-linecap:round!important;stroke-linejoin:round!important}
#premiumAppsView #premiumBackBtn:hover{border-color:#16a34a!important;background:#effaf3!important;color:#148640!important}

/* Desktop catalog card button inset */
@media(min-width:761px){
  html body #gameTopupView:not(.package-mode) .new-game-card{box-sizing:border-box!important;grid-template-rows:118px 34px 24px!important;height:196px!important;min-height:196px!important;padding:7px!important;gap:3px!important;overflow:hidden!important}
  html body #gameTopupView:not(.package-mode) .new-game-card-img{height:118px!important;min-height:118px!important;padding:7px!important}
  html body #gameTopupView:not(.package-mode) .new-game-card-info{height:34px!important;min-height:34px!important}
  html body #gameTopupView:not(.package-mode) .new-game-card-btn{box-sizing:border-box!important;width:calc(100% - 14px)!important;height:24px!important;min-height:24px!important;margin:0 7px!important;padding:0 6px!important;border-radius:6px!important;align-self:center!important;overflow:hidden!important}
}

/* Preserve the advertisement image's intrinsic aspect ratio */
html body #gameTopupView:not(.package-mode) .game-card-grid-new{grid-auto-rows:auto!important;align-items:start!important}
html body #gameTopupView:not(.package-mode) .game-feed-ad{box-sizing:border-box!important;grid-column:1/-1!important;width:100%!important;height:auto!important;min-height:0!important;max-height:none!important;margin:8px 0!important;padding:0!important;border-radius:14px!important;overflow:hidden!important;align-self:start!important}
html body #gameTopupView:not(.package-mode) .game-feed-ad a{display:block!important;width:100%!important;height:auto!important;margin:0!important;padding:0!important}
html body #gameTopupView:not(.package-mode) .game-feed-ad img{display:block!important;width:100%!important;max-width:100%!important;height:auto!important;min-height:0!important;max-height:none!important;aspect-ratio:auto!important;object-fit:contain!important;object-position:center!important;margin:0!important;padding:0!important;border-radius:14px!important}

@media(max-width:760px){
  html body #gameTopupView.package-mode .simple-topup-main>aside.simple-checkout-bar{bottom:calc(126px + env(safe-area-inset-bottom))!important}
}

/* Ensure the mobile checkout bar is fixed to the viewport, not a transformed ancestor */
@media(max-width:760px){
  body:has(#gameTopupView.package-mode),body:has(#gameTopupView.package-mode) main,#gameTopupView.package-mode,#gameTopupView.package-mode .game-topup-page,#gameTopupView.package-mode .game-topup-shell,#gameTopupView.package-mode .game-package-section,#gameTopupView.package-mode .simple-topup-shell,#gameTopupView.package-mode .simple-topup-main{transform:none!important;translate:none!important;filter:none!important;perspective:none!important;will-change:auto!important}
  body #gameTopupView.package-mode .simple-topup-main>aside.simple-checkout-bar{position:fixed!important;z-index:999!important;left:max(8px,env(safe-area-inset-left))!important;right:max(8px,env(safe-area-inset-right))!important;bottom:calc(94px + env(safe-area-inset-bottom))!important;top:auto!important;margin:0!important;transform:none!important;translate:none!important;animation:none!important}
}

/* Fix mobile sticky checkout overlap and product thumbnail */
@media(max-width:760px){
  body #gameTopupView.package-mode .pack-list-panel{padding-bottom:86px!important;max-height:none!important;overflow:visible!important}
  body #gameTopupView.package-mode .simple-pack-grid{max-height:none!important;overflow:visible!important;padding-bottom:0!important}
  body #gameTopupView.package-mode .simple-topup-main>aside.simple-checkout-bar{box-sizing:border-box!important;left:8px!important;right:8px!important;bottom:68px!important;grid-template-columns:minmax(0,1fr) 82px 120px!important;width:auto!important;height:62px!important;min-height:62px!important;padding:7px 9px!important;gap:7px!important;overflow:hidden!important}
  body #gameTopupView.package-mode .checkout-product{box-sizing:border-box!important;min-width:0!important;height:48px!important;padding:0!important;overflow:hidden!important}
  body #gameTopupView.package-mode .checkout-product>span{display:none!important}
  body #gameTopupView.package-mode .checkout-product-row{box-sizing:border-box!important;display:grid!important;grid-template-columns:40px minmax(0,1fr)!important;align-items:center!important;width:100%!important;height:48px!important;margin:0!important;gap:7px!important;overflow:hidden!important}
  body #gameTopupView.package-mode .checkout-product-row .pack-pick-media{box-sizing:border-box!important;position:relative!important;grid-column:1!important;display:block!important;width:40px!important;height:40px!important;min-width:40px!important;min-height:40px!important;margin:0!important;padding:0!important;border-radius:6px!important;overflow:hidden!important;isolation:isolate!important}
  body #gameTopupView.package-mode .checkout-product-row .pack-pick-media img{position:absolute!important;inset:0!important;display:block!important;width:100%!important;height:100%!important;max-width:100%!important;max-height:100%!important;object-fit:cover!important;border-radius:6px!important}
  body #gameTopupView.package-mode .checkout-product-row .pack-pick-media:before,body #gameTopupView.package-mode .checkout-product-row .pack-pick-media:after,body #gameTopupView.package-mode .checkout-product-row .pack-pick-media small,body #gameTopupView.package-mode .checkout-product-row .pack-pick-media em{display:none!important;content:none!important}
  body #gameTopupView.package-mode .checkout-product-row strong{grid-column:2!important;display:-webkit-box!important;-webkit-box-orient:vertical!important;-webkit-line-clamp:2!important;max-height:25px!important;margin:0!important;overflow:hidden!important;font-size:8px!important;line-height:1.35!important}
  body #gameTopupView.package-mode .checkout-product-row b{display:none!important}
  body #gameTopupView.package-mode .checkout-total{box-sizing:border-box!important;min-width:0!important;overflow:hidden!important}
  body #gameTopupView.package-mode .checkout-total strong{font-size:13px!important;white-space:nowrap!important}
  body #gameTopupView.package-mode #gameTopupSubmitButton{width:120px!important;height:44px!important;min-height:44px!important;padding:0 8px!important;overflow:hidden!important}
  body #gameTopupView.package-mode #gameTopupSubmitButton .pay-copy,body #gameTopupView.package-mode #gameTopupSubmitButton .pay-copy span{font-size:9px!important;line-height:1.2!important;white-space:normal!important;text-align:center!important}
}

/* Mobile package row hard reset */
@media(max-width:760px){
  body #gameTopupView.package-mode .simple-pack-grid .pack-pick-card{box-sizing:border-box!important;position:relative!important;display:grid!important;grid-template-columns:50px minmax(0,1fr) 68px 76px!important;grid-template-rows:56px!important;align-items:center!important;width:100%!important;height:70px!important;min-height:70px!important;margin:0!important;padding:7px!important;column-gap:7px!important;border:1px solid #d7e3db!important;border-radius:8px!important;background:#fff!important;overflow:hidden!important;text-align:left!important}
  body #gameTopupView.package-mode .simple-pack-grid .pack-pick-card.active{border-color:#079d43!important;background:#f3fff7!important;box-shadow:0 0 0 1px #079d43!important}
  body #gameTopupView.package-mode .simple-pack-grid .pack-pick-media{box-sizing:border-box!important;position:static!important;grid-column:1!important;grid-row:1!important;display:block!important;width:50px!important;height:50px!important;min-width:50px!important;min-height:50px!important;margin:0!important;padding:0!important;border:0!important;border-radius:7px!important;overflow:hidden!important;align-self:center!important;transform:none!important}
  body #gameTopupView.package-mode .simple-pack-grid .pack-pick-media img{display:block!important;width:100%!important;height:100%!important;margin:0!important;border-radius:7px!important;object-fit:cover!important;object-position:center!important}
  body #gameTopupView.package-mode .simple-pack-grid .pack-pick-media small,body #gameTopupView.package-mode .simple-pack-grid .pack-pick-media em{display:none!important}
  body #gameTopupView.package-mode .simple-pack-grid .pack-info{box-sizing:border-box!important;position:static!important;grid-column:2!important;grid-row:1!important;display:block!important;min-width:0!important;width:auto!important;margin:0!important;padding:0!important;align-self:center!important;overflow:hidden!important;transform:none!important}
  body #gameTopupView.package-mode .simple-pack-grid .pack-info .pack-pick-name{display:-webkit-box!important;-webkit-box-orient:vertical!important;-webkit-line-clamp:2!important;width:100%!important;max-width:100%!important;max-height:30px!important;margin:0!important;overflow:hidden!important;white-space:normal!important;text-overflow:ellipsis!important;color:#202a34!important;font-size:9px!important;line-height:1.35!important;font-weight:700!important}
  body #gameTopupView.package-mode .simple-pack-grid .pack-info small{display:block!important;width:100%!important;margin:2px 0 0!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;color:#7a8580!important;font-size:7px!important;line-height:1.2!important}
  body #gameTopupView.package-mode .simple-pack-grid .pack-price{position:static!important;grid-column:3!important;grid-row:1!important;align-self:center!important;justify-self:end!important;display:block!important;width:auto!important;min-width:0!important;height:auto!important;margin:0!important;padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;color:#079d43!important;font-size:10px!important;line-height:1.2!important;font-weight:800!important;white-space:nowrap!important;transform:none!important}
  body #gameTopupView.package-mode .simple-pack-grid .pack-action{position:static!important;grid-column:4!important;grid-row:1!important;align-self:center!important;justify-self:stretch!important;display:grid!important;place-items:center!important;width:76px!important;min-width:76px!important;height:30px!important;margin:0!important;padding:0!important;border:1px solid #079d43!important;border-radius:6px!important;background:#fff!important;color:#079d43!important;box-shadow:none!important;font-size:8px!important;line-height:1!important;font-weight:700!important;transform:none!important}
  body #gameTopupView.package-mode .simple-pack-grid .pack-pick-card.active .pack-action{background:#079d43!important;color:#fff!important}
  body #gameTopupView.package-mode .simple-pack-grid .pack-pick-card:before,body #gameTopupView.package-mode .simple-pack-grid .pack-pick-card:after{display:none!important;content:none!important}
}
@media(max-width:390px){body #gameTopupView.package-mode .simple-pack-grid .pack-pick-card{grid-template-columns:46px minmax(0,1fr) 61px!important}body #gameTopupView.package-mode .simple-pack-grid .pack-action{position:absolute!important;right:7px!important;bottom:6px!important;width:61px!important;min-width:61px!important;height:23px!important}body #gameTopupView.package-mode .simple-pack-grid .pack-price{grid-column:3!important;align-self:start!important;margin-top:5px!important}}

/* Keep absolutely-positioned pack artwork inside its thumbnail */
@media(max-width:760px){
  body #gameTopupView.package-mode .simple-pack-grid .pack-pick-media{position:relative!important;isolation:isolate!important}
  body #gameTopupView.package-mode .simple-pack-grid .pack-pick-media img{position:absolute!important;inset:0!important;z-index:1!important;max-width:100%!important;max-height:100%!important}
  body #gameTopupView.package-mode .simple-pack-grid .pack-pick-media:before,body #gameTopupView.package-mode .simple-pack-grid .pack-pick-media:after{display:none!important;content:none!important;background:none!important}
}
@media(max-width:390px){#gameTopupView:not(.package-mode) .game-card-grid-new{grid-template-columns:repeat(2,minmax(0,1fr))!important}}

/* Mobile game checkout matched to supplied reference */
@media(max-width:760px){
  body:has(#gameTopupView.package-mode) main{padding:0 12px 150px!important;background:#f8fafb!important}
  #gameTopupView.package-mode .game-topup-shell{width:100%!important;padding:8px 0 30px!important}
  #gameTopupView.package-mode .topup-page-back{position:static!important;width:max-content!important;height:30px!important;margin:0 0 8px!important;padding:0!important;border:0!important;background:transparent!important;box-shadow:none!important;color:#4d5962!important}
  #gameTopupView.package-mode .topup-page-back span{font-size:10px!important}
  #gameTopupView.package-mode .simple-game-info{display:grid!important;grid-template-columns:74px minmax(0,1fr)!important;grid-template-rows:auto auto!important;gap:8px 11px!important;width:100%!important;min-height:0!important;margin:0 0 10px!important;padding:11px!important;border-radius:12px!important;overflow:hidden!important}
  #gameTopupView.package-mode .simple-game-cover{grid-column:1!important;grid-row:1!important;width:74px!important;height:74px!important;align-self:start!important;border-radius:9px!important}
  #gameTopupView.package-mode .simple-game-copy{display:contents!important}
  #gameTopupView.package-mode .simple-game-copy h2{grid-column:2!important;grid-row:1!important;align-self:start!important;margin:0!important;padding-top:1px!important;font-size:14px!important;line-height:1.35!important}
  #gameTopupView.package-mode .simple-game-copy p{display:block!important;grid-column:2!important;grid-row:1!important;align-self:end!important;margin:0!important;padding-bottom:1px!important;font-size:9px!important;line-height:1.45!important;color:#617078!important;max-height:43px!important;overflow:hidden!important}
  #gameTopupView.package-mode .simple-game-notes{grid-column:1/-1!important;grid-row:2!important;display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:5px!important;width:100%!important;margin:0!important}
  #gameTopupView.package-mode .simple-game-notes span{display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;height:45px!important;min-height:45px!important;padding:4px 2px!important;text-align:center!important;font-size:7px!important;line-height:1.25!important}
  #gameTopupView.package-mode .simple-game-notes span:before{width:15px!important;height:15px!important;flex:0 0 15px!important;margin:0 0 3px!important;background-size:15px!important}
  #gameTopupView.package-mode .simple-topup-main{display:block!important;width:100%!important}
  #gameTopupView.package-mode .topup-left-column{display:grid!important;gap:9px!important}
  #gameTopupView.package-mode .game-topup-form.simple-step-card,#gameTopupView.package-mode .pack-list-panel.simple-step-card{padding:12px!important;border-radius:11px!important}
  #gameTopupView.package-mode .game-topup-form .simple-step-title,#gameTopupView.package-mode .pack-list-panel .simple-step-title{margin-bottom:9px!important}
  #gameTopupView.package-mode .simple-step-title>span{width:25px!important;height:25px!important;flex-basis:25px!important;font-size:11px!important}
  #gameTopupView.package-mode .simple-step-title h2{font-size:12px!important}
  #gameTopupView.package-mode .simple-step-title small{font-size:8px!important}
  #gameTopupView.package-mode .uid-help{display:block!important;font-size:8px!important}
  #gameTopupView.package-mode .game-topup-form input[name=game_uid]{height:38px!important;padding-left:35px!important;font-size:10px!important}
  #gameTopupView.package-mode .uid-warning{min-height:28px!important;padding:5px 8px!important;font-size:8px!important}
  #gameTopupView.package-mode #gameTopupBack{font-size:8px!important;padding:5px 7px!important}
  #gameTopupView.package-mode .simple-pack-grid{display:grid!important;grid-template-columns:1fr!important;gap:7px!important}
  #gameTopupView.package-mode .pack-pick-card{display:grid!important;grid-template-columns:48px minmax(0,1fr) 82px!important;grid-template-rows:1fr!important;width:100%!important;height:64px!important;min-height:64px!important;padding:7px 8px!important;gap:8px!important;border-radius:7px!important}
  #gameTopupView.package-mode .pack-art{grid-column:1!important;grid-row:1!important;width:48px!important;height:48px!important;align-self:center!important}
  #gameTopupView.package-mode .pack-info{grid-column:2!important;grid-row:1!important;align-self:center!important;padding:0!important}
  #gameTopupView.package-mode .pack-info .pack-pick-name{max-height:30px!important;font-size:10px!important;line-height:1.35!important}
  #gameTopupView.package-mode .pack-info small{font-size:7px!important;-webkit-line-clamp:1!important;max-height:10px!important}
  #gameTopupView.package-mode .pack-price{position:absolute!important;right:92px!important;bottom:9px!important;font-size:10px!important}
  #gameTopupView.package-mode .pack-action{position:static!important;grid-column:3!important;grid-row:1!important;align-self:center!important;justify-self:stretch!important;width:82px!important;min-width:82px!important;height:32px!important;border:1px solid #079d43!important;background:#fff!important;color:#079d43!important;box-shadow:none!important;font-size:9px!important}
  #gameTopupView.package-mode .pack-pick-card.active .pack-action{background:#079d43!important;color:#fff!important}
  #gameTopupView.package-mode .pack-pick-card.active:before{left:0!important;top:0!important}
  #gameTopupView.package-mode .pack-pick-card.active:after{display:none!important}
  #gameTopupView.package-mode .simple-topup-main>aside.simple-checkout-bar{position:fixed!important;z-index:70!important;left:7px!important;right:7px!important;bottom:62px!important;top:auto!important;display:grid!important;grid-template-columns:minmax(0,1fr) 96px 130px!important;align-items:center!important;gap:8px!important;width:auto!important;height:64px!important;padding:8px 10px!important;border-radius:11px!important;box-shadow:0 -3px 18px rgba(27,55,38,.13)!important}
  #gameTopupView.package-mode .checkout-heading,#gameTopupView.package-mode .checkout-uid,#gameTopupView.package-mode .checkout-safe,#gameTopupView.package-mode .checkout-note,#gameTopupView.package-mode .checkout-trust{display:none!important}
  #gameTopupView.package-mode .checkout-product{grid-column:1!important;padding:0!important;border:0!important;overflow:hidden!important}
  #gameTopupView.package-mode .checkout-product>span{margin:0 0 2px!important;font-size:8px!important}
  #gameTopupView.package-mode .checkout-product p{font-size:9px!important}
  #gameTopupView.package-mode .checkout-product-row{grid-template-columns:38px minmax(0,1fr)!important;gap:6px!important}
  #gameTopupView.package-mode .checkout-product-row .pack-art{width:38px!important;height:38px!important}
  #gameTopupView.package-mode .checkout-product-row strong{font-size:8px!important}.checkout-product-row b{display:none!important}
  #gameTopupView.package-mode .checkout-total{grid-column:2!important;display:block!important;padding:0!important;text-align:left!important}
  #gameTopupView.package-mode .checkout-total span{display:block!important;font-size:8px!important;font-weight:400!important;color:#65726a!important}
  #gameTopupView.package-mode .checkout-total strong{display:block!important;margin-top:2px!important;font-size:14px!important}
  #gameTopupView.package-mode .simple-topup-main>aside>.simple-checkout-bar{grid-column:3!important;display:block!important;margin:0!important;padding:0!important}
  #gameTopupView.package-mode #gameTopupSubmitButton{height:42px!important;min-height:42px!important;border-radius:7px!important;font-size:10px!important}
}

/* Final mobile checkout vertical position */
@media(max-width:760px){
  html body #gameTopupView.package-mode .simple-topup-main>aside.simple-checkout-bar{
    position:fixed!important;
    top:auto!important;
    bottom:calc(126px + env(safe-area-inset-bottom))!important;
  }
}

/* Polished mobile floating checkout */
@media(max-width:760px){
  html body #gameTopupView.package-mode .simple-topup-main>aside.simple-checkout-bar{box-sizing:border-box!important;display:grid!important;grid-template-columns:minmax(0,1fr) 76px 116px!important;align-items:center!important;gap:8px!important;left:10px!important;right:10px!important;width:auto!important;height:72px!important;min-height:72px!important;padding:9px 9px!important;border:1px solid #dce7e0!important;border-radius:13px!important;background:rgba(255,255,255,.97)!important;box-shadow:0 8px 28px rgba(20,48,31,.18)!important;backdrop-filter:blur(12px)!important;overflow:hidden!important}
  html body #gameTopupView.package-mode .checkout-product{display:block!important;width:100%!important;height:50px!important;min-width:0!important;margin:0!important;padding:0!important;border:0!important}
  html body #gameTopupView.package-mode .checkout-product-row{display:grid!important;grid-template-columns:44px minmax(0,1fr)!important;align-items:center!important;width:100%!important;height:50px!important;gap:8px!important}
  html body #gameTopupView.package-mode .checkout-product-row .pack-pick-media{width:44px!important;height:44px!important;min-width:44px!important;min-height:44px!important;border:1px solid #dbe5df!important;border-radius:8px!important;background:#fff!important;box-shadow:0 3px 9px rgba(25,50,33,.10)!important}
  html body #gameTopupView.package-mode .checkout-product-row strong{display:-webkit-box!important;-webkit-box-orient:vertical!important;-webkit-line-clamp:2!important;max-height:28px!important;color:#26322b!important;font-size:9px!important;line-height:1.4!important;font-weight:700!important}
  html body #gameTopupView.package-mode .checkout-total{display:flex!important;flex-direction:column!important;align-items:flex-start!important;justify-content:center!important;width:76px!important;height:48px!important;margin:0!important;padding:0!important;border:0!important;overflow:visible!important}
  html body #gameTopupView.package-mode .checkout-total span{display:block!important;margin:0 0 4px!important;color:#7a857e!important;font-size:8px!important;line-height:1!important;font-weight:500!important}
  html body #gameTopupView.package-mode .checkout-total strong{display:block!important;margin:0!important;color:#079d43!important;font-size:14px!important;line-height:1!important;font-weight:800!important;white-space:nowrap!important}
  html body #gameTopupView.package-mode .simple-topup-main>aside>.simple-checkout-bar{display:block!important;width:116px!important;height:48px!important;margin:0!important;padding:0!important}
  html body #gameTopupView.package-mode #gameTopupSubmitButton{display:flex!important;align-items:center!important;justify-content:center!important;width:116px!important;height:48px!important;min-height:48px!important;margin:0!important;padding:0 9px!important;border:0!important;border-radius:9px!important;background:#079d43!important;color:#fff!important;box-shadow:0 5px 13px rgba(7,157,67,.22)!important}
  html body #gameTopupView.package-mode #gameTopupSubmitButton:disabled{background:#dfe6e1!important;color:#8b958f!important;box-shadow:none!important}
  html body #gameTopupView.package-mode #gameTopupSubmitButton .pay-copy,html body #gameTopupView.package-mode #gameTopupSubmitButton .pay-copy span{display:block!important;color:inherit!important;font-size:9px!important;line-height:1.25!important;font-weight:700!important;text-align:center!important}
}
@media(max-width:390px){html body #gameTopupView.package-mode .simple-topup-main>aside.simple-checkout-bar{grid-template-columns:minmax(0,1fr) 68px 100px!important;left:6px!important;right:6px!important;gap:6px!important;padding:8px!important}html body #gameTopupView.package-mode .checkout-total{width:68px!important}html body #gameTopupView.package-mode .simple-topup-main>aside>.simple-checkout-bar,html body #gameTopupView.package-mode #gameTopupSubmitButton{width:100px!important}}

/* Solid-color mobile payment button */
@media(max-width:760px){
  html body #gameTopupView.package-mode #gameTopupSubmitButton,html body #gameTopupView.package-mode #gameTopupSubmitButton:not(:disabled){border:1px solid #109447!important;border-radius:8px!important;background:#16a34a!important;background-image:none!important;color:#fff!important;box-shadow:none!important;text-shadow:none!important;filter:none!important;opacity:1!important}
  html body #gameTopupView.package-mode #gameTopupSubmitButton:hover,html body #gameTopupView.package-mode #gameTopupSubmitButton:active{background:#138f43!important;background-image:none!important;color:#fff!important;transform:none!important}
  html body #gameTopupView.package-mode #gameTopupSubmitButton .pay-copy,html body #gameTopupView.package-mode #gameTopupSubmitButton .pay-copy span{color:#fff!important;text-shadow:none!important;font-size:10px!important;font-weight:700!important;letter-spacing:0!important;opacity:1!important}
  html body #gameTopupView.package-mode #gameTopupSubmitButton:disabled{border-color:#d7ded9!important;background:#e3e8e5!important;background-image:none!important;color:#8a948e!important;box-shadow:none!important}
  html body #gameTopupView.package-mode #gameTopupSubmitButton:disabled .pay-copy,html body #gameTopupView.package-mode #gameTopupSubmitButton:disabled .pay-copy span{color:#8a948e!important}
}

@media(max-width:760px){html body #gameTopupView.package-mode .simple-topup-main>aside.simple-checkout-bar{grid-template-columns:minmax(0,1fr) 76px 108px!important;padding:9px 10px!important}html body #gameTopupView.package-mode .simple-topup-main>aside>.simple-checkout-bar{box-sizing:border-box!important;width:108px!important;height:42px!important;min-height:42px!important;margin:0!important;padding:0!important;overflow:hidden!important}html body #gameTopupView.package-mode #gameTopupSubmitButton,html body #gameTopupView.package-mode #gameTopupSubmitButton:not(:disabled){box-sizing:border-box!important;width:108px!important;max-width:108px!important;height:42px!important;min-height:42px!important;max-height:42px!important;margin:0!important;padding:0 7px!important;border-radius:7px!important;overflow:hidden!important}}
@media(max-width:390px){html body #gameTopupView.package-mode .simple-topup-main>aside.simple-checkout-bar{grid-template-columns:minmax(0,1fr) 66px 94px!important}html body #gameTopupView.package-mode .simple-topup-main>aside>.simple-checkout-bar,html body #gameTopupView.package-mode #gameTopupSubmitButton,html body #gameTopupView.package-mode #gameTopupSubmitButton:not(:disabled){width:94px!important;max-width:94px!important}}
/* SMM platform categories and search */
.net-page .net-hero{display:block!important;width:100vw!important;max-width:none!important;min-height:0!important;aspect-ratio:3/1!important;margin-left:calc(50% - 50vw)!important;padding:0!important;border:0!important;border-radius:0!important;background:#050805 url('/images/net-topup-banner.png?v=1') center center/cover no-repeat!important;box-shadow:none!important}.net-page .net-hero:before,.net-page .net-hero:after,.net-page .net-hero>div,.net-page .net-hero-wifi{display:none!important}@media(max-width:700px){.net-page .net-hero{width:100%!important;aspect-ratio:16/7!important;margin-left:0!important;background-position:center center!important}}
.net-page{max-width:none!important;width:100%!important;padding-top:0!important}.net-page .net-hero{box-sizing:border-box!important;width:100vw!important;max-width:none!important;min-height:310px!important;margin-left:calc(50% - 50vw)!important;padding:54px max(540px,calc((100vw - 1440px)/2 + 560px)) 54px max(32px,calc((100vw - 1440px)/2))!important;border-left:0!important;border-right:0!important;border-radius:0!important}.net-page .net-hero:before{left:max(18px,calc((100vw - 1440px)/2 - 18px))!important;width:8px!important;height:calc(100% - 70px)!important;top:35px!important;border-radius:8px!important}.net-page .net-hero:after{content:none!important;display:none!important}.net-page .net-hero-wifi{box-sizing:border-box!important;position:absolute!important;right:max(32px,calc((100vw - 1440px)/2))!important;top:34px!important;display:grid!important;place-items:center!important;width:500px!important;height:242px!important;border:2px dashed #a8cfb6!important;border-radius:20px!important;background:rgba(255,255,255,.6)!important;box-shadow:none!important}.net-page .net-hero-wifi:before{content:"��鹷������Ѻ�ٻẹ����"!important;display:block!important;position:static!important;width:auto!important;height:auto!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;color:#6d8a77!important;font:700 13px var(--font-body)!important}.net-page .net-hero-wifi:after{content:"�й��ٻ�ǹ͹ �ѵ����ǹ����ҳ 2:1"!important;display:block!important;position:absolute!important;left:50%!important;top:55%!important;transform:translateX(-50%)!important;width:auto!important;height:auto!important;padding:0!important;background:transparent!important;color:#91a799!important;font:500 9px var(--font-body)!important;white-space:nowrap!important}.net-page .net-hero-wifi i{display:none!important}.net-page .net-layout{width:min(1440px,calc(100% - 40px));margin-left:auto!important;margin-right:auto!important}@media(max-width:900px){.net-page .net-hero{width:100%!important;min-height:0!important;margin-left:0!important;padding:28px 20px!important}.net-page .net-hero-wifi{display:none!important}.net-page .net-layout{width:calc(100% - 24px)}}
.net-page .net-hero{box-sizing:border-box;position:relative;isolation:isolate;display:flex!important;align-items:center!important;justify-content:space-between!important;min-height:196px!important;padding:32px 410px 32px 40px!important;border:1px solid #cfe5d6!important;border-radius:22px!important;background:#eef8f1!important;background-image:none!important;color:#173e27!important;box-shadow:0 14px 34px rgba(25,103,55,.1)!important;overflow:hidden!important}.net-page .net-hero:before{content:""!important;display:block!important;position:absolute!important;z-index:-1!important;left:0!important;top:0!important;width:9px!important;height:100%!important;background:#199b50!important}.net-page .net-hero:after{content:"��ࡨ�ҡ API �ͧ��ҹ"!important;position:absolute!important;right:53px!important;bottom:28px!important;display:block!important;width:auto!important;height:auto!important;padding:7px 12px!important;border:0!important;border-radius:999px!important;background:#fff!important;color:#187c43!important;font:700 9px var(--font-body)!important;box-shadow:0 5px 14px rgba(20,100,50,.09)!important;transform:none!important}.net-page .net-hero small{padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;color:#168b49!important;font-size:10px!important;letter-spacing:.13em!important}.net-page .net-hero h1{margin:7px 0 3px!important;color:#163d27!important;font-size:34px!important}.net-page .net-hero p{margin:0 0 17px!important;color:#5d7164!important;font-size:12px!important}.net-page .net-hero>div>div{display:flex!important;gap:7px!important}.net-page .net-hero>div>div span{padding:6px 10px!important;border:1px solid #d5e7da!important;border-radius:8px!important;background:#fff!important;color:#3f5949!important;font-size:9px!important;box-shadow:none!important}.net-page .net-hero-wifi{position:absolute!important;right:40px!important;top:34px!important;display:grid!important;grid-template-columns:repeat(3,92px)!important;gap:9px!important;width:auto!important;height:auto!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;transform:none!important}.net-page .net-hero-wifi:before{content:none!important;display:none!important}.net-page .net-hero-wifi:after{content:none!important;display:none!important}.net-page .net-hero-wifi i{position:relative!important;inset:auto!important;display:grid!important;place-items:center!important;box-sizing:border-box!important;width:92px!important;height:82px!important;border:1px solid #d2e5d8!important;border-radius:15px!important;background:#fff!important;color:#243c2d!important;box-shadow:0 8px 20px rgba(19,91,45,.08)!important;font:800 16px var(--font-display)!important;transform:none!important}.net-page .net-hero-wifi i:nth-child(1):before{content:"AIS"}.net-page .net-hero-wifi i:nth-child(2):before{content:"dtac";color:#1684cf}.net-page .net-hero-wifi i:nth-child(3):before{content:"true";color:#e51f31}.net-page .net-hero-wifi i:nth-child(1):after{content:"���͢���"!important;position:absolute!important;left:auto!important;top:auto!important;bottom:12px!important;width:auto!important;height:auto!important;background:transparent!important;color:#8a978f!important;font:500 8px var(--font-body)!important}.net-page .net-hero-wifi i:nth-child(2):after,.net-page .net-hero-wifi i:nth-child(3):after{content:"���͢���";position:absolute;bottom:12px;color:#8a978f;font:500 8px var(--font-body)}@media(max-width:800px){.net-page .net-hero{padding:25px!important}.net-page .net-hero:after,.net-page .net-hero-wifi{display:none!important}.net-page .net-hero h1{font-size:27px!important}}
.net-hero{box-sizing:border-box;position:relative;isolation:isolate;min-height:210px;padding:34px 390px 34px 42px!important;border:1px solid #d4eadc;border-radius:24px!important;background:#15934b!important;color:#fff;box-shadow:0 16px 38px rgba(19,124,65,.14)!important;overflow:hidden}.net-hero:before{content:"";position:absolute;z-index:-1;right:0;top:0;width:350px;height:100%;background:#eefaf2}.net-hero:after{content:"5G";position:absolute;z-index:2;right:270px;top:26px;display:grid;place-items:center;width:52px;height:52px;border:6px solid #fff;border-radius:50%;background:#b9ef43;color:#136f3d;font:800 15px var(--font-display);box-shadow:0 8px 20px rgba(17,104,53,.18);transform:rotate(-8deg)}.net-hero>div{position:relative;z-index:2}.net-hero small{display:inline-flex;padding:5px 10px;border:1px solid rgba(255,255,255,.45);border-radius:999px;background:rgba(255,255,255,.12);font-size:10px}.net-hero h1{margin:10px 0 4px!important;font-size:34px!important}.net-hero p{font-size:13px}.net-hero>div>div{gap:8px!important}.net-hero>div>div span{display:inline-flex;align-items:center;padding:6px 10px;border-radius:8px;background:rgba(255,255,255,.14);font-weight:600}.net-hero-wifi{box-sizing:border-box;position:absolute!important;z-index:1;right:45px;top:25px;width:245px!important;height:160px!important;border:1px solid #cde6d6;border-radius:22px;background:#fff;box-shadow:0 16px 35px rgba(18,102,51,.14);transform:none!important}.net-hero-wifi:before{content:"";position:absolute;left:32px;top:20px;width:78px;height:126px;border:7px solid #168d49;border-radius:18px;background:#effaf3;box-shadow:inset 0 0 0 5px #fff}.net-hero-wifi:after{content:"�������ѹ��";position:absolute;left:121px;bottom:24px;padding:7px 10px;border-radius:8px;background:#15934b;color:#fff;font-size:9px;font-weight:700;white-space:nowrap}.net-hero-wifi i{left:auto!important;right:28px!important;bottom:auto!important;border-width:5px!important;border-color:#80d928 transparent transparent!important;transform:none!important}.net-hero-wifi i:nth-child(1){top:29px;width:82px!important;height:82px!important}.net-hero-wifi i:nth-child(2){top:48px;right:45px!important;width:48px!important;height:48px!important}.net-hero-wifi i:nth-child(3){top:67px;right:62px!important;width:14px!important;height:14px!important}.net-hero-wifi i:nth-child(1):after{content:"";position:absolute;left:-116px;top:91px;width:36px;height:5px;border-radius:5px;background:#168d49}@media(max-width:800px){.net-hero{min-height:0;padding:26px!important}.net-hero:before,.net-hero:after,.net-hero-wifi{display:none!important}.net-hero h1{font-size:27px!important}.net-hero>div>div{display:flex!important;flex-wrap:wrap!important}.net-hero>div>div span{font-size:8px}}
.net-page{padding:28px 0 70px}.net-hero{display:flex;align-items:center;justify-content:space-between;padding:32px 42px;border-radius:22px;background:#168f49;color:#fff;overflow:hidden}.net-hero small{font-weight:800;letter-spacing:.15em}.net-hero h1{margin:4px 0;font-size:32px}.net-hero p{margin:0 0 16px;opacity:.9}.net-hero>div>div{display:flex;gap:18px;font-size:10px}.net-hero-wifi{position:relative;width:130px;height:90px}.net-hero-wifi i{position:absolute;left:50%;bottom:0;border:6px solid #b7f248;border-color:#b7f248 transparent transparent;border-radius:50%;transform:translateX(-50%)}.net-hero-wifi i:nth-child(1){width:100px;height:100px}.net-hero-wifi i:nth-child(2){width:65px;height:65px}.net-hero-wifi i:nth-child(3){width:25px;height:25px}.net-layout{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:22px;margin-top:20px}.net-builder,.net-summary{padding:22px;border:1px solid #dce8e0;border-radius:17px;background:#fff;box-shadow:0 8px 24px rgba(20,60,35,.06)}.net-builder section+section{margin-top:22px}.net-builder h2{display:flex;align-items:center;gap:9px;margin:0 0 12px;font-size:15px}.net-builder h2 i{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#199a50;color:#fff;font-size:11px;font-style:normal}.net-phone{display:flex;align-items:center;gap:10px;height:50px;padding:0 13px;border:1px solid #cfe0d5;border-radius:11px}.net-phone svg{width:20px;fill:none;stroke:#18a255;stroke-width:2}.net-phone input{width:100%;border:0;outline:0;font:inherit}.net-networks{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.net-networks button{display:grid;place-items:center;gap:6px;min-height:92px;border:1px solid #e0e8e2;border-radius:12px;background:#fff}.net-networks button.active{border:2px solid #199b50;background:#f1fbf4}.net-networks span{display:block;width:42px;height:42px}.net-networks img{width:100%;height:100%;object-fit:contain}.net-filters{display:flex;gap:7px;overflow:auto;margin-bottom:12px}.net-filters button{padding:7px 13px;border:1px solid #dae5dd;border-radius:999px;background:#fff;white-space:nowrap}.net-filters button.active{border-color:#198f49;background:#198f49;color:#fff}.net-packs{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.net-pack{position:relative;display:grid;align-content:start;min-height:145px;padding:15px;border:1px solid #dfe8e2;border-radius:13px;background:#fff;text-align:left}.net-pack.active{border:2px solid #199b50;background:#f3fbf5}.net-pack em{min-height:15px;color:#f29b19;font-size:9px;font-style:normal}.net-pack strong{font-size:13px;line-height:1.35}.net-pack p{color:#738178;font-size:9px;line-height:1.5}.net-pack span{margin-top:auto;padding:7px;border-radius:7px;background:#168f49;color:#fff;text-align:center;font-weight:800}.net-summary{position:sticky;top:96px;height:max-content}.net-summary h2{margin:0 0 18px;font-size:18px}.net-summary>div{display:grid;gap:3px;padding:12px 0;border-bottom:1px solid #edf1ee}.net-summary span{color:#7d8981;font-size:9px}.net-summary strong{font-size:12px}.net-summary-total{display:flex!important;align-items:center;justify-content:space-between}.net-summary-total b{color:#16924b;font-size:20px}.net-summary button{width:100%;height:49px;margin-top:16px;border:0;border-radius:10px;background:#168f49;color:#fff;font-weight:800}.net-summary button:disabled{background:#dbe4de;color:#89948d}.net-summary>small{display:block;margin-top:9px;color:#87938b;font-size:8px;text-align:center}@media(max-width:900px){.net-page{padding-top:15px}.net-hero{padding:24px}.net-hero h1{font-size:25px}.net-hero-wifi{display:none}.net-layout{grid-template-columns:1fr}.net-summary{position:static}.net-packs{grid-template-columns:repeat(2,1fr)}}@media(max-width:520px){.net-hero>div>div{align-items:flex-start;flex-direction:column;gap:4px}.net-builder{padding:15px}.net-networks{grid-template-columns:repeat(2,1fr)}.net-packs{grid-template-columns:1fr}}
.new-game-card.is-hot{overflow:hidden!important;border-radius:12px!important}.new-game-card.is-hot .game-hot-badge{left:8px!important;top:8px!important;padding:5px 9px!important;border-radius:6px!important;box-shadow:0 4px 10px rgba(210,25,38,.24)!important}.new-game-card.is-hot .game-hot-badge:after{content:none!important;display:none!important}.new-game-card.is-hot:before{inset:5px!important;border-radius:7px!important}
@media(min-width:701px){.game-price-admin.has-game-selection .selected-admin-game{top:170px!important;height:146px!important}.game-price-admin.has-game-selection .admin-table-wrap{top:315px!important;bottom:18px!important}.game-price-admin.has-game-selection:before{padding-top:154px!important}}
.new-game-card.is-hot{border:2px solid #f02f3d!important;background:#fff8f8!important;box-shadow:0 9px 24px rgba(239,47,61,.22)!important}.new-game-card.is-hot:before{content:"";position:absolute;z-index:4;inset:4px;border:1px solid rgba(240,47,61,.22);border-radius:9px;pointer-events:none}.new-game-card.is-hot .game-hot-badge{position:absolute!important;z-index:8!important;left:-7px!important;top:9px!important;padding:5px 11px 5px 9px!important;border-radius:0 7px 7px 0!important;background:#f02f3d!important;color:#fff!important;font-size:10px!important;font-weight:900!important;letter-spacing:.1em!important;box-shadow:0 5px 12px rgba(210,25,38,.3)!important}.new-game-card.is-hot .game-hot-badge:after{content:"";position:absolute;left:0;bottom:-6px;border-top:6px solid #a9121e;border-left:6px solid transparent}
.game-price-admin.has-game-selection .selected-admin-game{top:92px!important;height:146px!important}.game-price-admin.has-game-selection .admin-table-wrap{top:237px!important;bottom:24px!important}.admin-game-main-image-form{display:flex;align-items:center;gap:7px;margin-top:8px}.admin-game-main-image-form>input{box-sizing:border-box;width:230px;height:34px;padding:0 9px;border:1px solid #cfe0d5;border-radius:8px;font-size:9px}.admin-game-main-image-form label{display:flex;align-items:center;height:34px;margin:0;padding:0 9px;border:1px dashed #62c88c;border-radius:8px;background:#fff;color:#168c4d;font-size:9px;cursor:pointer}.admin-game-main-image-form label input{display:none}.admin-game-main-image-form button{height:34px;padding:0 11px;border:0;border-radius:8px;background:#20bb63;color:#fff;font-size:9px;font-weight:700}@media(max-width:700px){.game-price-admin.has-game-selection .selected-admin-game{top:76px!important;height:190px!important}.game-price-admin.has-game-selection .admin-table-wrap{top:265px!important}.admin-game-main-image-form{align-items:stretch;flex-wrap:wrap;gap:5px!important;margin-top:10px!important}.admin-game-main-image-form>input{width:100%!important}.admin-game-main-image-form label{flex:1!important;justify-content:center!important}.admin-game-main-image-form button{flex:1!important}}
@media(min-width:901px){body:not(.premium-fullscreen) .site-header .main-nav>a,body:not(.premium-fullscreen) .site-header .main-nav>a.active,body:not(.premium-fullscreen) .site-header .main-nav>a:hover,body:not(.premium-fullscreen) .site-header .main-nav>a:focus{border:0!important;background:transparent!important;background-color:transparent!important;background-image:none!important;box-shadow:none!important;transform:none!important}body:not(.premium-fullscreen) .site-header .main-nav>a{color:#525b55!important}body:not(.premium-fullscreen) .site-header .main-nav>a.active{color:#171c19!important;font-weight:700!important}body:not(.premium-fullscreen) .site-header .main-nav>a.active:before,body:not(.premium-fullscreen) .site-header .main-nav>a.active:after{content:none!important;display:none!important}body:not(.premium-fullscreen) .site-header .logo{min-width:238px!important}body:not(.premium-fullscreen) .site-header .site-logo-image{display:block!important;width:46px!important;height:46px!important;min-width:46px!important;max-width:46px!important;max-height:46px!important;margin-right:11px!important;object-fit:contain!important;transform:scale(1.12)!important}body:not(.premium-fullscreen) .site-header #siteLogoText{color:#171c19!important;font-size:22px!important;font-weight:800!important;letter-spacing:-.03em!important}}
@media(min-width:1251px){body:not(.premium-fullscreen) .site-header{height:76px!important}body:not(.premium-fullscreen) .site-header .shell.header-inner{box-sizing:border-box!important;width:min(100%,1600px)!important;max-width:1600px!important;height:76px!important;padding:0 28px!important;gap:34px!important}body:not(.premium-fullscreen) .site-header .logo{min-width:205px!important}body:not(.premium-fullscreen) #siteLogoText{font-size:21px!important;line-height:1!important}body:not(.premium-fullscreen) .site-logo-image{width:31px!important;height:31px!important;margin-right:10px!important}body:not(.premium-fullscreen) .main-nav{gap:24px!important;flex:1 1 auto!important;justify-content:flex-start!important}body:not(.premium-fullscreen) .main-nav>a{display:flex!important;align-items:center!important;height:76px!important;padding:0!important;font-size:12px!important;font-weight:500!important;line-height:1!important}body:not(.premium-fullscreen) .main-nav>a.active{position:relative!important}body:not(.premium-fullscreen) .main-nav>a.active:after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;border-radius:3px 3px 0 0;background:#20b963}body:not(.premium-fullscreen) .desktop-header-search{flex:0 0 250px!important;width:250px!important;height:42px!important;padding:0 13px!important;border-radius:10px!important}body:not(.premium-fullscreen) .desktop-header-search input{font-size:11px!important}body:not(.premium-fullscreen) .site-header .account-pill{height:44px!important;padding:0 8px!important;font-size:14px!important;font-weight:700!important}body:not(.premium-fullscreen) .site-header .account-pill .icon{width:34px!important;height:34px!important}.site-header .point-pill:not(.hidden){height:44px!important;font-size:12px!important}}
@media(min-width:901px) and (max-width:1250px){body:not(.premium-fullscreen) .site-header{height:70px!important}body:not(.premium-fullscreen) .site-header .shell.header-inner{height:70px!important;padding:0 20px!important}body:not(.premium-fullscreen) #siteLogoText{font-size:18px!important}body:not(.premium-fullscreen) .main-nav>a{height:70px!important;padding:0!important;font-size:10.5px!important}.desktop-header-search{display:none!important}}
@media(min-width:901px){body:not(.premium-fullscreen) .main-nav{gap:18px!important;min-width:0!important}body:not(.premium-fullscreen) .main-nav>a{padding:25px 0!important;font-size:10px!important}body:not(.premium-fullscreen) .desktop-header-search{width:210px!important;flex:0 1 210px!important}.site-header #headerBalance.hidden{display:none!important}.site-header #adminLink.hidden{display:none!important}.site-header .header-actions{min-width:0!important}.site-header .account-pill{flex:none!important}.site-header .point-pill:not(.hidden){min-width:120px!important}.site-header .header-inner{gap:22px!important}}@media(min-width:901px) and (max-width:1250px){body:not(.premium-fullscreen) .main-nav{gap:11px!important}body:not(.premium-fullscreen) .main-nav>a{font-size:9px!important}.desktop-header-search{display:none!important}}
.game-price-admin.has-game-selection:before{content:"";position:fixed;z-index:4990;inset:0;background:rgba(8,20,13,.58);backdrop-filter:blur(5px)}.game-price-admin.has-game-selection .selected-admin-game{box-sizing:border-box;position:fixed!important;z-index:5001!important;left:50%!important;top:34px!important;width:min(1380px,calc(100vw - 38px))!important;height:128px!important;margin:0!important;padding:18px 58px 18px 20px!important;border:1px solid #d8e8de!important;border-radius:18px 18px 0 0!important;background:#f5fcf7!important;box-shadow:0 22px 70px rgba(3,31,15,.28)!important;transform:translateX(-50%)!important}.game-price-admin.has-game-selection .admin-table-wrap{box-sizing:border-box;position:fixed!important;z-index:5000!important;left:50%!important;top:161px!important;bottom:28px!important;width:min(1380px,calc(100vw - 38px))!important;margin:0!important;padding:16px!important;border:1px solid #d8e8de!important;border-top:0!important;border-radius:0 0 18px 18px!important;background:#fff!important;box-shadow:0 22px 70px rgba(3,31,15,.28)!important;overflow:auto!important;transform:translateX(-50%)!important}.game-price-admin.has-game-selection .game-price-table{display:table!important;width:100%!important}.admin-game-modal-close{position:absolute;right:17px;top:17px;display:grid;place-items:center;width:38px;height:38px;padding:0;border:1px solid #d5e3da;border-radius:50%;background:#fff;color:#33473b;font-size:24px;line-height:1;cursor:pointer}.admin-game-modal-close:hover{border-color:#ef3340;color:#ef3340}.game-price-admin.has-game-selection .selected-admin-game-main{padding-right:10px}@media(max-width:700px){.game-price-admin.has-game-selection .selected-admin-game{top:10px!important;width:calc(100vw - 16px)!important;height:240px!important;padding:14px 34px 14px 14px!important;overflow-y:auto!important;}.game-price-admin.has-game-selection .admin-table-wrap{top:255px!important;bottom:10px!important;width:calc(100vw - 16px)!important;padding:9px!important}.admin-game-modal-close{right:10px;top:10px}.game-price-admin.has-game-selection .selected-admin-game-main{align-items:flex-start!important;grid-template-columns:54px minmax(0, 1fr)!important;}.game-price-admin.has-game-selection .selected-admin-game-image{width:54px!important;height:54px!important}}
@media(min-width:901px){body:not(.premium-fullscreen) .site-header{height:68px!important;border-bottom:1px solid #edf1ee!important;background:#fff!important;box-shadow:0 2px 10px rgba(30,55,40,.04)!important}body:not(.premium-fullscreen) .site-header .header-inner{box-sizing:border-box!important;display:flex!important;align-items:center!important;gap:28px!important;height:68px!important;max-width:1480px!important;padding:0 20px!important}body:not(.premium-fullscreen) .site-header .logo{flex:none!important}body:not(.premium-fullscreen) #siteLogoText{color:#179447!important;font-size:18px!important}body:not(.premium-fullscreen) .site-logo-image{width:28px!important;height:28px!important;object-fit:contain!important}body:not(.premium-fullscreen) .main-nav{display:flex!important;align-items:center!important;gap:25px!important;flex:none!important}body:not(.premium-fullscreen) .main-nav>a,body:not(.premium-fullscreen) .desktop-nav-dropdown>button{height:auto!important;padding:25px 0!important;border:0!important;border-radius:0!important;background:transparent!important;color:#4d5751!important;box-shadow:none!important;font-size:11px!important;font-weight:500!important;white-space:nowrap!important}body:not(.premium-fullscreen) .main-nav>a .icon{display:none!important}body:not(.premium-fullscreen) .main-nav>a.active{color:#19a653!important;font-weight:700!important;background:transparent!important}body:not(.premium-fullscreen) .desktop-nav-dropdown{position:relative}body:not(.premium-fullscreen) .desktop-nav-dropdown>button{display:flex;align-items:center;gap:5px;cursor:pointer}body:not(.premium-fullscreen) .desktop-nav-dropdown>button span{color:#18a253;font-size:14px}body:not(.premium-fullscreen) .desktop-nav-dropdown>div{position:absolute;z-index:300;left:-15px;top:55px;display:grid;min-width:170px;padding:8px;border:1px solid #e2ebe5;border-radius:12px;background:#fff;box-shadow:0 14px 35px rgba(24,55,37,.13);opacity:0;visibility:hidden;transform:translateY(-5px);transition:.18s}body:not(.premium-fullscreen) .desktop-nav-dropdown:hover>div,body:not(.premium-fullscreen) .desktop-nav-dropdown:focus-within>div{opacity:1;visibility:visible;transform:none}body:not(.premium-fullscreen) .desktop-nav-dropdown>div a{padding:10px 12px;border-radius:8px;color:#445049;font-size:11px;text-decoration:none}body:not(.premium-fullscreen) .desktop-nav-dropdown>div a:hover{background:#eff9f2;color:#15954c}body:not(.premium-fullscreen) .header-actions{display:flex!important;align-items:center!important;gap:10px!important;margin-left:auto!important}.desktop-header-search{box-sizing:border-box;display:flex;align-items:center;width:240px;height:38px;padding:0 11px;border:1px solid #e0e8e3;border-radius:8px;background:#fafcfb}.desktop-header-search input{min-width:0;width:100%;border:0;outline:0;background:transparent;font-size:10px}.desktop-header-search svg{width:17px;fill:none;stroke:#55645b;stroke-width:2}.site-header .point-pill{box-sizing:border-box!important;display:flex!important;align-items:center!important;min-width:132px!important;height:40px!important;padding:0 13px!important;border:1px solid #dce9e0!important;border-radius:9px!important;background:#f6fcf8!important;color:#15964d!important;font-size:11px!important;box-shadow:none!important}.site-header .account-pill{height:40px!important;padding:0 13px!important;border:0!important;background:transparent!important;color:#344139!important;box-shadow:none!important}.site-header .account-pill .icon{width:30px!important;height:30px!important;padding:6px!important;border-radius:50%!important;background:#edf1ef!important;color:#748078!important}}@media(max-width:900px){.desktop-header-search,.desktop-nav-dropdown{display:none!important}}
.new-game-card.is-hot{border:2px solid #ef3340!important;box-shadow:0 7px 18px rgba(239,51,64,.16)!important}.game-hot-badge{position:absolute;z-index:5;left:7px;top:7px;padding:4px 7px;border-radius:6px;background:#ef3340;color:#fff;font-size:9px;font-weight:800;letter-spacing:.08em;box-shadow:0 4px 10px rgba(210,25,38,.25)}.new-game-card{position:relative}.admin-hot-toggle{margin-top:7px;padding:7px 11px;border:1px solid #ef3340;border-radius:8px;background:#fff;color:#dc2633;font:inherit;font-size:10px;font-weight:700}.admin-hot-toggle.active{background:#ef3340;color:#fff}
/* Commercial-use typography: Google Fonts, SIL Open Font License. */
:root{--font-body:"Noto Sans Thai","Segoe UI",sans-serif;--font-display:"Bai Jamjuree","Noto Sans Thai",sans-serif}html body,html body input,html body select,html body textarea,html body button{font-family:var(--font-body)}html body h1,html body h2,html body h3,html body .section-title,html body .page-title,html body .hero-title,html body .brand,html body .logo-text,html body .wallet-section-title,html body .game-topup-panel>h2,html body .otp-card>h2,html body .otp-guide-title h2{font-family:var(--font-display);font-weight:700;letter-spacing:-.025em}html body h1{line-height:1.22}html body h2{line-height:1.28}html body h3{line-height:1.35}html body .topbar .brand,html body .mobile-sidebar-brand{font-family:var(--font-display);font-weight:700;letter-spacing:-.03em}html body .nav a,html body .mobile-nav-link{font-weight:600;letter-spacing:-.01em}@media(max-width:600px){html body h1{letter-spacing:-.035em}html body h2{letter-spacing:-.03em}}
/* OTP flat color theme � intentionally no gradients. */
#otpView .otp-hero{background:#20c467!important}#otpView .otp-buy{background:#20c467!important}#otpView .otp-guide{background:#f6fbf8!important}#otpView .otp-guide-steps i{background:#20b965!important}#otpView .otp-app-item.active{background:#eaf8ef!important}#otpView .otp-quote{background:#eaf8ef!important}#otpView [style*="linear-gradient"]{background-image:none!important}
.otp-guide{margin-top:18px;padding:20px 22px;border:1px solid #d8eadf;border-radius:18px;background:linear-gradient(135deg,#fff,#f3fbf6);box-shadow:0 8px 26px rgba(28,82,48,.06)}.otp-guide-title{display:flex;align-items:center;justify-content:space-between;gap:14px}.otp-guide-title span{color:#16a258;font-size:10px;font-weight:800;letter-spacing:.08em}.otp-guide-title h2{margin:2px 0 0;font-size:18px}.otp-guide-title button{padding:8px 12px;border:1px solid #cce2d4;border-radius:9px;background:#fff;color:#168b4c;font:inherit;font-size:10px;font-weight:700}.otp-guide-steps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:9px;margin-top:16px}.otp-guide-steps article{display:flex;gap:9px;min-width:0;padding:12px 10px;border:1px solid #e0ece4;border-radius:12px;background:#fff}.otp-guide-steps i{display:grid;place-items:center;flex:0 0 25px;width:25px;height:25px;border-radius:8px;background:linear-gradient(135deg,#20bd68,#7bdf39);color:#fff;font-size:11px;font-style:normal;font-weight:800}.otp-guide-steps b{font-size:11px}.otp-guide-steps p{margin:3px 0 0;color:#738178;font-size:8px;line-height:1.45}.otp-guide-note{display:flex;align-items:center;gap:10px;margin-top:11px;padding:10px 12px;border-radius:10px;background:#fff8e8;color:#745b23;font-size:9px}.otp-guide-note strong{flex:none;color:#9b6e0b}.otp-guide.collapsed .otp-guide-steps,.otp-guide.collapsed .otp-guide-note{display:none}@media(max-width:900px){.otp-guide-steps{grid-template-columns:repeat(2,minmax(0,1fr))}.otp-guide-steps article:last-child{grid-column:1/-1}}@media(max-width:560px){.otp-guide{padding:16px;margin-top:14px}.otp-guide-title h2{font-size:15px}.otp-guide-steps{grid-template-columns:1fr;gap:7px}.otp-guide-steps article:last-child{grid-column:auto}.otp-guide-note{align-items:flex-start;flex-direction:column;gap:3px;line-height:1.5}}
.otp-card .otp-picker-head>label{box-sizing:border-box!important;position:relative!important;display:flex!important;align-items:center!important;gap:10px!important;width:250px!important;height:44px!important;min-height:44px!important;margin:0!important;padding:4px 13px 4px 5px!important;border:1px solid #cfe2d5!important;border-radius:14px!important;background:#fff!important;box-shadow:0 4px 14px rgba(28,91,51,.06)!important;overflow:hidden!important}.otp-card .otp-picker-head>label:before,.otp-card .otp-picker-head>label:after{content:none!important;display:none!important}.otp-card .otp-picker-head>label svg{box-sizing:border-box;flex:0 0 34px!important;width:34px!important;height:34px!important;padding:8px!important;border-radius:10px!important;background:#eaf9ef!important;stroke:#159251!important}.otp-card .otp-picker-head>label input{box-sizing:border-box!important;display:block!important;width:100%!important;height:34px!important;min-height:0!important;margin:0!important;padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;color:#26372d!important;font-size:11px!important;font-weight:500!important}.otp-card .otp-picker-head>label:focus-within{border-color:#24b866!important;box-shadow:0 0 0 3px rgba(36,184,102,.12)!important}.otp-card .otp-picker-head>label input::placeholder{color:#87958c!important;opacity:1!important}@media(max-width:560px){.otp-card .otp-picker-head>label{width:100%!important}}
.otp-native-product{display:none!important}.otp-layout{grid-template-columns:minmax(560px,700px) minmax(420px,1fr)!important}.otp-app-picker{margin-bottom:15px}.otp-picker-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}.otp-picker-head>strong{font-size:14px}.otp-picker-head label{display:flex!important;align-items:center;gap:7px;width:220px!important;height:38px;margin:0!important;padding:0 11px;border:1px solid #d5e5da;border-radius:10px;background:#f9fcfa}.otp-picker-head svg{width:17px;fill:none;stroke:#73847a;stroke-width:2}.otp-picker-head input{min-width:0;width:100%;border:0;outline:0;background:transparent;font:inherit;font-size:11px}.otp-app-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;max-height:390px;padding:2px 5px 2px 2px;overflow:auto}.otp-app-item{position:relative;display:grid;justify-items:center;min-width:0;padding:12px 6px 10px;border:1px solid #e0eae3;border-radius:13px;background:#fff;color:#23352a;text-align:center;cursor:pointer;transition:.18s}.otp-app-item:hover{border-color:#41c878;transform:translateY(-2px);box-shadow:0 8px 18px rgba(24,160,83,.11)}.otp-app-item.active{border-color:#19b862;background:linear-gradient(145deg,#effcf4,#e2f9ea);box-shadow:0 0 0 3px rgba(25,184,98,.12)}.otp-app-item>span{display:grid;place-items:center;width:46px;height:46px;margin-bottom:7px;border:1px solid #edf1ee;border-radius:13px;background:#fff;overflow:hidden}.otp-app-item img{width:32px;height:32px;object-fit:contain}.otp-app-item b{max-width:100%;overflow:hidden;font-size:11px;text-overflow:ellipsis;white-space:nowrap}.otp-app-item small{margin-top:3px;color:#159052;font-size:9px}.otp-app-item em{margin-top:2px;color:#89968e;font-size:8px;font-style:normal}.otp-app-empty{grid-column:1/-1;padding:35px;color:#87948c;text-align:center}@media(max-width:950px){.otp-layout{grid-template-columns:1fr!important}}@media(max-width:560px){.otp-picker-head{align-items:stretch;flex-direction:column}.otp-picker-head label{box-sizing:border-box;width:100%!important}.otp-app-grid{grid-template-columns:repeat(3,minmax(0,1fr));max-height:360px}.otp-app-item{padding:10px 4px}.otp-app-item>span{width:42px;height:42px}}
.otp-hero>span{font-size:0!important;position:relative;width:48px!important;height:64px;border:4px solid rgba(255,255,255,.92);border-radius:11px}.otp-hero>span:before{content:"";position:absolute;left:50%;top:8px;width:17px;height:3px;border-radius:3px;background:#fff;transform:translateX(-50%)}.otp-hero>span:after{content:"";position:absolute;left:50%;bottom:7px;width:7px;height:7px;border:2px solid #fff;border-radius:50%;transform:translateX(-50%)}
.otp-page{padding-top:38px;padding-bottom:70px}.otp-hero{display:flex;align-items:center;justify-content:space-between;padding:28px 34px;border-radius:24px;background:linear-gradient(120deg,#079a51,#2dcc70 58%,#9be83e);color:#fff;box-shadow:0 18px 45px rgba(15,155,82,.2)}.otp-hero small{font-weight:800;letter-spacing:.16em}.otp-hero h1{margin:5px 0;font-size:30px}.otp-hero p{margin:0;opacity:.9}.otp-hero>span{font-size:58px}.otp-layout{display:grid;grid-template-columns:380px 1fr;gap:18px;margin-top:20px}.otp-card{padding:22px;border:1px solid #dce9e0;border-radius:18px;background:#fff;box-shadow:0 8px 28px rgba(24,60,38,.07)}.otp-card h2{margin:0 0 18px}.otp-card label{display:grid;gap:7px;margin:13px 0;font-size:12px;font-weight:700}.otp-card select{height:48px;padding:0 13px;border:1px solid #cfe0d5;border-radius:11px;background:#fbfefc;font:inherit}.otp-quote{margin:16px 0;padding:14px;border-radius:11px;background:#ecf9f1;color:#168a4b;font-weight:700}.otp-buy{width:100%;height:48px;border:0;border-radius:11px;background:linear-gradient(100deg,#75df30,#19bd65);color:#fff;font-weight:800}.otp-title{display:flex;justify-content:space-between}.otp-title button,.otp-order button{padding:7px 10px;border:1px solid #cfe0d5;border-radius:8px;background:#fff;color:#15874a}.otp-orders{display:grid;gap:10px}.otp-order{display:grid;grid-template-columns:minmax(0,1fr) 130px 130px auto;align-items:center;gap:12px;padding:13px;border:1px solid #e0ebe4;border-radius:12px}.otp-order small{display:block;color:#819087}.otp-order em{color:#168a4b;font-style:normal}.otp-order .danger{color:#dc3848}@media(max-width:800px){.otp-page{padding-top:20px}.otp-hero{padding:22px}.otp-hero h1{font-size:23px}.otp-hero>span{font-size:40px}.otp-layout{grid-template-columns:1fr}.otp-order{grid-template-columns:1fr}.otp-order>div:last-child{display:flex;gap:6px;flex-wrap:wrap}}
/* Keep every notification above checkout/order overlays. */
html body #toast.toast-stack{z-index:2147483646!important;isolation:isolate}.swal2-container,.sweet-alert,.modal-alert{z-index:2147483647!important}
.smm-order-heading{position:relative;z-index:1;display:flex;align-items:flex-start;gap:14px}.smm-order-heading>div{min-width:0}.smm-order-appicon{display:grid;place-items:center;flex:0 0 58px;width:58px;height:58px;margin-top:2px;border:1px solid rgba(255,255,255,.55);border-radius:17px;background:#fff;box-shadow:0 10px 24px rgba(1,71,34,.18)}.smm-order-appicon img{width:31px;height:31px;object-fit:contain}.smm-order-details{margin:-5px 0 18px;padding:14px;border:1px solid #dceee2;border-radius:14px;background:linear-gradient(120deg,#f7fcf9,#effaf3)}.smm-order-details>strong{display:block;color:#16894b;font-size:12px}.smm-order-details>p{margin:5px 0 11px;color:#617268;font-size:10px;line-height:1.55}.smm-order-details>div{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.smm-order-details>div span{padding:7px 5px;border-radius:8px;background:#fff;color:#7b8a80;font-size:8px;text-align:center}.smm-order-details>div b{display:block;margin-top:2px;color:#20372a;font-size:10px}@media(max-width:480px){.smm-order-appicon{flex-basis:50px;width:50px;height:50px;border-radius:14px}.smm-order-appicon img{width:27px;height:27px}.smm-order-heading{gap:11px}.smm-order-details{margin-bottom:14px;padding:12px}}

/* Compact SMM order builder: platform, category and service in one place. */
.smm-purchase-card{box-sizing:border-box;display:grid;gap:16px;width:min(760px,100%);margin:20px auto 0!important;padding:22px;border:1px solid #dce6df;border-radius:17px;background:#fff;box-shadow:0 8px 28px rgba(27,65,39,.07)}
.smm-picker-title{display:flex;align-items:center;gap:10px;padding-bottom:13px;border-bottom:1px solid #edf1ee}.smm-picker-title>span{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:#fff4e8;color:#e97818}.smm-picker-title>span .icon{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8}.smm-picker-title small{color:#ef7b18;font-size:10px;font-weight:800}.smm-picker-title h2{margin:2px 0 0;font-size:17px}
.smm-picker-field{display:grid;gap:7px;color:#35433a;font-size:12px;font-weight:800}.smm-picker-field>span:before{content:"";display:inline-block;width:7px;height:7px;margin-right:8px;border:2px solid #77827b;border-radius:2px;vertical-align:1px}.smm-picker-field select{box-sizing:border-box;width:100%;height:48px;padding:0 14px;border:1px solid #d9e2dc;border-radius:13px;background:#fff;color:#26332b;font:inherit;font-size:12px;outline:none}.smm-picker-field select:focus{border-color:#23ae60;box-shadow:0 0 0 3px rgba(35,174,96,.1)}
.smm-selected-info{padding:14px;border:1px solid #d9ecdf;border-radius:13px;background:#f5fbf7}.smm-selected-info>strong{color:#168a49;font-size:13px}.smm-selected-info>p{margin:5px 0 11px;color:#66756c;font-size:10px;line-height:1.5}.smm-selected-info>div{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.smm-selected-info span{padding:7px;border-radius:8px;background:#fff;color:#7a877f;font-size:9px;text-align:center}.smm-selected-info b{display:block;margin-top:2px;color:#24362a;font-size:11px}
.smm-inline-order{display:grid;gap:14px}.smm-inline-order label{display:grid;gap:6px;color:#35433a;font-size:12px;font-weight:800}.smm-inline-order input{box-sizing:border-box;width:100%;height:48px;padding:0 14px;border:1px solid #d8e2dc;border-radius:12px;background:#fff;font:inherit;font-size:13px;outline:none}.smm-inline-order input:focus{border-color:#20ad5e;box-shadow:0 0 0 3px rgba(32,173,94,.1)}.smm-inline-balance{display:flex;align-items:center;justify-content:space-between;padding:13px 15px;border:1px solid #9bdcf2;border-radius:12px;background:#effaff;color:#24627b;font-size:11px}.smm-inline-balance strong{color:#087eaf;font-size:18px}.smm-inline-order .gold-btn{height:50px;border:0;border-radius:12px;background:#72df31;color:#fff;font-weight:800}.smm-picker-empty{padding:22px;border:1px dashed #ccd9d0;border-radius:12px;color:#7b8980;font-size:11px;text-align:center}
@media(max-width:600px){.smm-purchase-card{gap:13px;margin-top:14px!important;padding:15px;border-radius:14px}.smm-toolbar{margin-top:4px}.smm-toolbar .smm-search{display:none}.smm-category-tabs{padding-bottom:6px}.smm-category-btn{min-height:36px!important}.smm-selected-info>div{grid-template-columns:repeat(3,minmax(0,1fr))}.smm-inline-order input,.smm-picker-field select{font-size:16px!important}}

/* Branded SMM platform pills. */
html body #smmView .smm-toolbar{display:block!important}
html body #smmView .smm-category-tabs{display:flex!important;flex-wrap:wrap!important;gap:8px!important;overflow:visible!important;padding:5px 0 8px!important}
html body #smmView .smm-category-btn{box-sizing:border-box!important;display:inline-flex!important;align-items:center!important;gap:7px!important;min-height:34px!important;margin:0!important;padding:7px 13px!important;border:0!important;border-radius:999px!important;color:#fff!important;font-size:10px!important;font-weight:800!important;line-height:1!important;box-shadow:none!important;white-space:nowrap!important;opacity:.92;transition:transform .15s,opacity .15s,box-shadow .15s!important}
html body #smmView .smm-category-btn:hover,html body #smmView .smm-category-btn.active{opacity:1!important;transform:translateY(-1px)!important;box-shadow:0 5px 12px rgba(20,40,28,.16)!important}
html body #smmView .smm-category-btn img{width:15px!important;height:15px!important;filter:brightness(0) invert(1)!important}
html body #smmView .smm-category-btn .smm-category-all{display:grid!important;place-items:center!important;width:15px!important;height:15px!important;color:#fff!important;font-size:13px!important}
html body #smmView .smm-category-btn .smm-category-all .icon{width:14px!important;height:14px!important;fill:none!important;stroke:currentColor!important;stroke-width:2!important}
html body #smmView .smm-category-btn[data-smm-platform="all"]{background:#42bfd1!important}
html body #smmView .smm-category-btn[data-smm-platform="facebook"]{background:#1877d2!important}
html body #smmView .smm-category-btn[data-smm-platform="instagram"]{background:#bd72bc!important}
html body #smmView .smm-category-btn[data-smm-platform="lemon8"]{background:#f3d348!important;color:#3e3b25!important}
html body #smmView .smm-category-btn[data-smm-platform="lemon8"] img{filter:none!important}
html body #smmView .smm-category-btn[data-smm-platform="shopee"]{background:#f67c6b!important}
html body #smmView .smm-category-btn[data-smm-platform="telegram"]{background:#52abd3!important}
html body #smmView .smm-category-btn[data-smm-platform="threads"]{background:#4e4e4e!important}
html body #smmView .smm-category-btn[data-smm-platform="tiktok"]{background:#333!important}
html body #smmView .smm-category-btn[data-smm-platform="twitter"]{background:#a765ef!important}
html body #smmView .smm-category-btn[data-smm-platform="twitch"]{background:#a765ef!important}
html body #smmView .smm-category-btn[data-smm-platform="vk"]{background:#8daac5!important}
html body #smmView .smm-category-btn[data-smm-platform="youtube"]{background:#ff5757!important}
html body #smmView .smm-category-btn[data-smm-platform="spotify"]{background:#1db954!important}
html body #smmView .smm-category-btn[data-smm-platform="discord"]{background:#5865f2!important}
html body #smmView .smm-category-btn[data-smm-platform="other"]{background:#6f8176!important}
html body #smmView .smm-search{display:none!important}
@media(max-width:520px){html body #smmView .smm-category-tabs{gap:7px 6px!important}html body #smmView .smm-category-btn{min-height:32px!important;padding:7px 11px!important;font-size:9px!important}}
.smm-order-overlay{padding:18px;background:rgba(5,18,12,.66);backdrop-filter:blur(7px)}.smm-order-dialog{overflow:hidden;width:min(480px,100%);padding:0 24px 24px;border:1px solid rgba(255,255,255,.72);border-radius:24px;background:linear-gradient(180deg,#f5fff9 0,#fff 46%);box-shadow:0 28px 90px rgba(2,44,23,.28)}.smm-order-hero{position:relative;margin:0 -24px 22px;padding:28px 58px 25px 24px;background:linear-gradient(135deg,#0e9f57 0%,#22c76b 48%,#a8ed4c 100%);color:#fff}.smm-order-hero:after{content:"";position:absolute;right:-42px;bottom:-66px;width:180px;height:180px;border:35px solid rgba(255,255,255,.12);border-radius:50%}.smm-order-badge{position:relative;z-index:1;display:inline-flex;padding:5px 10px;border:1px solid rgba(255,255,255,.32);border-radius:999px;background:rgba(255,255,255,.18);font-size:11px;font-weight:700;letter-spacing:.02em;backdrop-filter:blur(4px)}.smm-order-dialog .smm-order-hero h2{position:relative;z-index:1;margin:10px 0 8px;color:#fff;font-size:20px;line-height:1.4}.smm-order-dialog .smm-order-hero p{position:relative;z-index:1;margin:0;color:rgba(255,255,255,.9);font-size:12px}.smm-order-hero p b{color:#fff;font-size:14px}.smm-order-hero p span{margin:0 5px;opacity:.65}.smm-order-close{z-index:2;right:15px;top:15px;width:36px;height:36px;border:1px solid rgba(255,255,255,.35);border-radius:50%;background:rgba(255,255,255,.2);color:#fff;font-size:20px;line-height:1;backdrop-filter:blur(5px);cursor:pointer;transition:.2s}.smm-order-close:hover{background:#fff;color:#118d4f;transform:rotate(8deg)}.smm-order-dialog form{gap:15px;margin-top:0}.smm-order-dialog label{gap:7px;color:#263a2f;font-size:12px}.smm-order-dialog label>span{padding-left:2px}.smm-order-dialog input{height:50px;padding:0 15px;border:1px solid #cfe1d5;border-radius:12px;background:#fbfefc;font-size:14px;outline:0;transition:.2s}.smm-order-dialog input:focus{border-color:#22bd67;background:#fff;box-shadow:0 0 0 4px rgba(34,189,103,.12)}.smm-order-total{align-items:center;padding:15px 16px;border:1px solid #d9efdf;border-radius:14px;background:linear-gradient(105deg,#effbf3,#e5f8ec)}.smm-order-total>span{font-size:12px;font-weight:700}.smm-order-total small{display:block;margin-top:2px;color:#789082;font-size:9px;font-weight:400}.smm-order-total strong{font-size:19px}.smm-order-dialog .gold-btn{display:flex;align-items:center;justify-content:center;gap:5px;height:52px;border-radius:13px;background:#76df2f;box-shadow:0 10px 24px rgba(20,178,91,.23);font-size:15px;font-weight:800;cursor:pointer;transition:.2s}.smm-order-dialog .gold-btn:hover{transform:translateY(-2px);box-shadow:0 14px 28px rgba(20,178,91,.3)}.smm-order-dialog .gold-btn span{font-weight:600}.smm-order-dialog .gold-btn b{margin-left:auto;margin-right:18px;font-size:20px}.smm-order-dialog .gold-btn span:first-child{margin-left:auto}@media(max-width:480px){.smm-order-dialog{padding:0 18px 18px;border-radius:20px}.smm-order-hero{margin:0 -18px 18px;padding:23px 52px 21px 18px}.smm-order-dialog .smm-order-hero h2{font-size:18px}.smm-order-dialog input{height:48px}.smm-order-dialog .gold-btn{height:50px}}
.smm-toolbar{display:flex;align-items:center;gap:16px;margin-top:10px}.smm-toolbar .smm-category-tabs{flex:1;min-width:0}.smm-category-btn{display:inline-flex!important;align-items:center;gap:7px;min-height:38px;padding:7px 13px!important}.smm-category-btn img{width:18px;height:18px;object-fit:contain}.smm-category-btn.active img{filter:brightness(0) invert(1)}.smm-category-all,.smm-category-generic{display:grid;place-items:center;width:18px;height:18px;font-size:14px}.smm-search{box-sizing:border-box;display:flex;align-items:center;gap:8px;flex:0 0 270px;height:42px;padding:0 13px;border:1px solid #d8e4dc;border-radius:12px;background:#fff;transition:border-color .2s,box-shadow .2s}.smm-search:focus-within{border-color:#16a34a;box-shadow:0 0 0 3px rgba(22,163,74,.1)}.smm-search svg{flex:none;fill:none;stroke:#718078;stroke-width:2;stroke-linecap:round}.smm-search input{width:100%;border:0;outline:0;background:transparent;color:#172019;font:inherit;font-size:12px}.smm-search input::placeholder{color:#8a968e}.smm-empty{grid-column:1/-1;padding:54px 20px;border:1px dashed #cad8cf;border-radius:14px;background:rgba(255,255,255,.72);color:#516059;text-align:center;font-weight:700}.smm-empty small{display:inline-block;margin-top:6px;color:#8a968e;font-weight:400}@media(max-width:800px){.smm-toolbar{align-items:stretch;flex-direction:column;gap:10px}.smm-toolbar .smm-category-tabs{order:2}.smm-search{flex-basis:auto;width:100%}}

/* Polished classic SMM dropdown flow */
html body #smmView .smm-purchase-card{gap:18px;width:min(780px,100%);padding:24px;border:1px solid #e0e9e3;border-radius:20px;background:linear-gradient(180deg,#fff 0%,#fbfefc 100%);box-shadow:0 18px 50px rgba(24,74,40,.09)}
html body #smmView .smm-picker-title{gap:12px;padding-bottom:16px;border-bottom:1px solid #edf2ee}html body #smmView .smm-picker-title>span{width:40px;height:40px;border-radius:12px;background:#fff3e6;color:#ee7c18;box-shadow:inset 0 0 0 1px #ffe0bd}html body #smmView .smm-picker-title small{color:#e97513;font-size:10px;letter-spacing:.02em}html body #smmView .smm-picker-title h2{font-size:19px}
html body #smmView .smm-picker-field{gap:8px;color:#344239;font-size:11px}html body #smmView .smm-picker-field>span:before{width:8px;height:8px;margin-right:7px;border:0;border-radius:3px;background:#64736a;box-shadow:0 0 0 3px #edf2ee}html body #smmView .smm-picker-field select{height:52px;padding:0 42px 0 15px;border:1px solid #d8e3dc;border-radius:14px;background-color:#fff;color:#243229;font-size:13px;font-weight:650;box-shadow:0 3px 10px rgba(24,66,37,.035);cursor:pointer}html body #smmView .smm-picker-field select:hover{border-color:#9acbab}html body #smmView .smm-picker-field select:focus{border-color:#20ae5c;box-shadow:0 0 0 4px rgba(32,174,92,.11)}
html body #smmView .smm-picker-empty{padding:24px;border-color:#cbd9d0;border-radius:14px;background:rgba(248,252,249,.72);color:#829087}
html body #smmView .smm-selected-info{padding:16px;border-color:#cfe7d7;border-radius:15px;background:linear-gradient(135deg,#f3fbf6,#ecf9f1)}html body #smmView .smm-selected-info>strong{font-size:14px}html body #smmView .smm-selected-info>p{font-size:11px}html body #smmView .smm-selected-info span{padding:9px;border:1px solid #e2eee6;border-radius:10px}
html body #smmView .smm-inline-order{grid-template-columns:minmax(0,1fr) 170px;gap:13px}html body #smmView .smm-inline-order label:first-child{grid-column:1}html body #smmView .smm-inline-order label:nth-child(2){grid-column:2}html body #smmView .smm-inline-order input{height:50px;border-radius:13px;background:#fff}html body #smmView .smm-inline-balance,html body #smmView .smm-inline-order .gold-btn{grid-column:1/-1}html body #smmView .smm-inline-balance{padding:14px 16px;border-color:#b7e0ef;border-radius:13px;background:linear-gradient(100deg,#effaff,#eaf8fd)}html body #smmView .smm-inline-order .gold-btn{height:52px;border-radius:13px;box-shadow:0 10px 24px rgba(24,181,84,.18)}
@media(max-width:600px){html body #smmView .smm-purchase-card{gap:15px;margin-top:12px!important;padding:14px;border-radius:17px}html body #smmView .smm-picker-title{padding-bottom:13px}html body #smmView .smm-picker-title>span{width:36px;height:36px}html body #smmView .smm-picker-title h2{font-size:16px}html body #smmView .smm-picker-field select{height:50px;font-size:16px!important}html body #smmView .smm-inline-order{grid-template-columns:1fr}html body #smmView .smm-inline-order label:first-child,html body #smmView .smm-inline-order label:nth-child(2),html body #smmView .smm-inline-balance,html body #smmView .smm-inline-order .gold-btn{grid-column:1}html body #smmView .smm-selected-info>div{gap:5px}html body #smmView .smm-selected-info span{padding:7px 4px}}

/* Net-topup hero: supplied artwork is the complete banner. Keep this last. */

/* Net package cards � compact green version of the requested reference UI. */
.net-packs{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:16px!important}
.net-pack{display:flex!important;flex-direction:column!important;min-height:272px!important;padding:0!important;border:1px solid #d8dfda!important;border-radius:12px!important;background:#fff!important;box-shadow:0 3px 10px rgba(20,55,34,.12)!important;overflow:hidden!important;text-align:left!important;cursor:pointer!important;transition:border-color .18s,box-shadow .18s,transform .18s!important}
.net-pack:hover{border-color:#16a34a!important;box-shadow:0 8px 22px rgba(22,125,65,.16)!important;transform:translateY(-2px)!important}
.net-pack.active{border:2px solid #16a34a!important;background:#fff!important;box-shadow:0 0 0 3px rgba(22,163,74,.12),0 8px 22px rgba(22,125,65,.14)!important}
.net-pack-body{display:flex;flex:1;flex-direction:column;padding:18px 18px 13px!important}
.net-pack-body>em{min-height:18px!important;color:#159447!important;font-size:10px!important;font-style:normal!important;font-weight:700!important}
.net-pack-body>strong{display:block;min-height:48px;color:#222!important;font-size:17px!important;line-height:1.4!important;letter-spacing:.01em!important}
.net-pack-offer{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;margin-top:22px!important}
.net-pack-facts{display:grid;gap:8px;color:#4c5650;font-size:13px}
.net-pack-facts span{display:flex;align-items:center;gap:7px}
.net-pack-facts b{display:inline-grid;place-items:center;width:20px;color:#4d5b52;font-size:18px;line-height:1}
.net-pack-price{display:grid;justify-items:end;color:#16a34a;white-space:nowrap}
.net-pack-price>b{font-size:30px!important;line-height:1!important;font-weight:800!important}
.net-pack-price>small{margin-top:8px;color:#626b65;font-size:9px}
.net-pack-body>p{display:-webkit-box;margin:13px 0 0!important;color:#7b857e!important;font-size:9px!important;line-height:1.45!important;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.net-pack-actions{display:grid;grid-template-columns:1fr 1fr;height:57px;border-top:1px solid #dce4de}
.net-pack-actions button{display:flex;align-items:center;justify-content:center;gap:9px;margin:0!important;padding:0 10px!important;border:0!important;border-radius:0!important;font-family:inherit;font-size:12px!important;font-weight:700!important}
.net-pack-detail{background:#fff!important;color:#159447!important}
.net-pack-detail i{font-size:17px;font-style:normal}
.net-pack-buy{background:#16a34a!important;color:#fff!important}
.net-pack-buy i{font-size:29px;font-style:normal;font-weight:300;line-height:1}
.net-pack.active .net-pack-buy{background:#12843d!important}
@media(max-width:700px){.net-packs{grid-template-columns:1fr!important}.net-pack{min-height:255px!important}.net-pack-body{padding:16px!important}.net-pack-body>strong{min-height:auto;font-size:15px!important}.net-pack-offer{margin-top:20px!important}.net-pack-price>b{font-size:27px!important}}

/* Keep the net banner flush with the navigation bar. */
html body #netTopupView .net-page{padding-top:0!important}
html body #netTopupView .net-hero{margin-top:0!important}
html body:has(#netTopupView.active) main{padding-top:0!important}

/* Exact clean package-card treatment: no green selection frame. */
html body .net-pack,html body .net-pack.active{border:1px solid #d3d7d4!important;background:#fff!important;box-shadow:0 2px 7px rgba(0,0,0,.16)!important;transform:none!important}
html body .net-pack:hover{border-color:#c9ceca!important;box-shadow:0 4px 12px rgba(0,0,0,.17)!important;transform:none!important}
html body .net-pack-body{padding:17px 16px 15px!important}
html body .net-pack-body>strong{min-height:47px!important;color:#222!important;font-size:17px!important;letter-spacing:.025em!important}
html body .net-pack-offer{margin-top:43px!important}
html body .net-pack-facts span{display:flex!important;align-items:center!important;gap:7px!important;width:auto!important;min-height:0!important;margin:0!important;padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;color:#515953!important;font-size:13px!important;font-weight:400!important;text-align:left!important}
html body .net-pack-facts span b{padding:0!important;background:transparent!important;color:#515953!important}
html body .net-pack-price>b{display:flex!important;align-items:baseline!important;gap:4px!important;color:#16a34a!important;font-size:31px!important}
html body .net-pack-price>b small{color:#16a34a!important;font-size:12px!important;font-weight:500!important}
html body .net-pack-price>span{width:auto!important;margin:8px 0 0!important;padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;color:#626b65!important;font-size:9px!important;font-weight:400!important}
html body .net-pack-actions{height:55px!important}
html body .net-pack-detail{border-right:1px solid #dce1dd!important;background:#fff!important;color:#159447!important}
html body .net-pack-buy,html body .net-pack.active .net-pack-buy{background:#159447!important;color:#fff!important}
html body .net-pack-buy:hover{background:#117c3b!important}

/* Net-package cards and payment handoff on narrow mobile screens. */
@media (max-width: 700px) {
  html body #netTopupView .net-page,
  html body #netTopupView .net-layout,
  html body #netTopupView .net-builder,
  html body #netTopupView .net-builder section,
  html body #netTopupView .net-packs,
  html body #netTopupView .net-pack {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
  html body #netTopupView .net-page { overflow-x: clip !important; }
  html body #netTopupView .net-packs { grid-template-columns: minmax(0, 1fr) !important; }
  html body #netTopupView .net-pack-body { min-width: 0 !important; }
  html body #netTopupView .net-pack-offer {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: end !important;
    gap: 8px !important;
  }
  html body #netTopupView .net-pack-price {
    min-width: 0 !important;
    max-width: 132px !important;
  }
  html body #netTopupView .net-pack-price > b {
    max-width: 100% !important;
    font-size: clamp(20px, 7vw, 27px) !important;
  }
  html body #netTopupView .net-pack-price > span {
    white-space: normal !important;
    text-align: right !important;
  }
  html body #netTopupView .net-summary {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    scroll-margin-top: 14px !important;
    scroll-margin-bottom: 90px !important;
  }
}

/* Dedicated mobile recharge screen. */
body:has(#mobileTopupView.active) main{padding-top:0!important;background:#f7f8f7!important}.mobile-recharge-page{width:min(760px,100%);margin:0 auto 70px;background:#fff;box-shadow:0 8px 30px rgba(25,45,30,.08)}.mobile-recharge-hero{display:flex;align-items:center;justify-content:space-between;min-height:190px;padding:28px 40px;background:radial-gradient(circle at 85% 50%,#83e41b 0 9%,transparent 10%),linear-gradient(115deg,#050805 25%,#12330b 68%,#70d900);color:#fff;overflow:hidden}.mobile-recharge-hero small{color:#9aef25;font-weight:800}.mobile-recharge-hero h1{margin:8px 0 5px;font-size:29px;line-height:1.25}.mobile-recharge-hero h1 b{color:#8fec22}.mobile-recharge-hero p{margin:0;font-size:11px}.mobile-recharge-hero>span{font-size:92px;filter:drop-shadow(0 8px 16px #102)}.mobile-service-tabs{display:grid;grid-template-columns:1fr 1fr;margin:-16px 15px 0;border:5px solid #0d0f0e;border-radius:17px;background:#171918;box-shadow:0 4px 8px #999;overflow:hidden}.mobile-service-tabs a{display:flex;align-items:center;justify-content:center;height:54px;color:#fff;font-size:14px;font-weight:800;text-decoration:none}.mobile-service-tabs a.active{border-radius:11px;background:linear-gradient(100deg,#8deb18,#58d612);color:#132414}.mobile-recharge-form{display:grid;gap:20px;padding:17px 25px 25px}.mobile-number-field{display:grid;grid-template-columns:28px 1fr 28px;align-items:center;height:51px;padding:0 13px;border:1px solid #e3e9e4;border-radius:12px;box-shadow:0 3px 9px rgba(0,0,0,.08);color:#41ad22}.mobile-number-field input{height:100%;border:0;outline:0;font:inherit}.mobile-recharge-form section h2{margin:0 0 10px;font-size:12px}.mobile-amount-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}.mobile-amount-grid button{height:39px;border:1px solid #a9db7e;border-radius:8px;background:#fff;color:#263126;font-weight:700}.mobile-amount-grid button.active{background:#6bdc18;color:#fff}.mobile-provider-grid{display:grid;grid-template-columns:1fr 1fr;gap:11px}.mobile-provider{display:grid;grid-template-columns:58px 1fr 15px;align-items:center;min-height:72px;padding:10px 14px;border:1px solid #e3e7e4;border-radius:12px;background:#fff;text-align:left;box-shadow:0 3px 9px rgba(0,0,0,.07)}.mobile-provider.active{border-color:#71cc31;background:#f7fff2}.mobile-provider>strong{font-size:21px}.provider-ais>strong{color:#78be20}.provider-dtac>strong{color:#09a7e5}.provider-true>strong{color:#ed1c24}.provider-nt>strong{color:#f37021}.mobile-provider span{font-size:11px;font-weight:700}.mobile-provider small{display:block;margin-top:4px;color:#59b72c;font-size:8px}.mobile-provider>i{font-size:22px;font-style:normal}.mobile-payment-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.mobile-payment-grid button{display:grid;grid-template-columns:38px 1fr 14px;align-items:center;min-height:63px;padding:9px 13px;border:1px solid #e0e5e1;border-radius:10px;background:#fff;text-align:left}.mobile-payment-grid button.active{border-color:#45b833}.mobile-payment-grid b{font-size:22px}.mobile-payment-grid span{font-size:10px;font-weight:700}.mobile-payment-grid small{display:block;color:#7b867e;font-weight:400}.mobile-payment-grid i{color:#198b35}.mobile-recharge-submit{height:54px;border:0;border-radius:10px;background:linear-gradient(#42bf16,#129a05);color:#fff;font-size:15px;font-weight:800;box-shadow:0 5px 12px rgba(34,156,15,.25)}.mobile-recharge-submit:disabled{background:#dce3dc;color:#8e978f;box-shadow:none}@media(max-width:600px){.mobile-recharge-page{width:100%}.mobile-recharge-hero{min-height:150px;padding:20px}.mobile-recharge-hero h1{font-size:23px}.mobile-recharge-hero>span{font-size:62px}.mobile-recharge-form{padding:15px}.mobile-amount-grid{grid-template-columns:repeat(3,1fr)}.mobile-provider-grid{grid-template-columns:1fr}.mobile-service-tabs{margin-top:-12px}.mobile-service-tabs a{height:48px}}

/* Full-width desktop layout for mobile recharge. */
@media(min-width:901px){
  html body #mobileTopupView{width:100%!important}
  html body .mobile-recharge-page{width:100%!important;max-width:none!important;margin:0 0 70px!important;background:#f8fbf8!important;box-shadow:none!important}
  html body .mobile-recharge-hero{box-sizing:border-box;width:100%!important;min-height:300px!important;padding:50px max(55px,calc((100vw - 1440px)/2 + 30px))!important;background:radial-gradient(circle at 82% 46%,#7ce514 0 8%,transparent 8.5%),radial-gradient(circle at 72% 75%,rgba(113,255,25,.22),transparent 25%),linear-gradient(112deg,#030504 18%,#092207 63%,#55bf00)!important}
  html body .mobile-recharge-hero>div{width:min(720px,55vw)!important}
  html body .mobile-recharge-hero small{font-size:13px!important}
  html body .mobile-recharge-hero h1{font-size:42px!important}
  html body .mobile-recharge-hero p{font-size:14px!important}
  html body .mobile-recharge-hero>span{margin-right:max(60px,calc((100vw - 1440px)/2 + 70px));font-size:145px!important}
  html body .mobile-service-tabs{box-sizing:border-box;width:min(1400px,calc(100% - 64px))!important;margin:-28px auto 0!important}
  html body .mobile-service-tabs a{height:68px!important;font-size:16px!important}
  html body .mobile-recharge-form{box-sizing:border-box;width:min(1400px,calc(100% - 64px))!important;margin:0 auto!important;padding:28px 0 38px!important;gap:28px!important}
  html body .mobile-number-field{height:62px!important;padding:0 20px!important;background:#fff!important;font-size:14px!important}
  html body .mobile-recharge-form section h2{margin-bottom:13px!important;font-size:14px!important}
  html body .mobile-amount-grid{grid-template-columns:repeat(8,minmax(0,1fr))!important;gap:12px!important}
  html body .mobile-amount-grid button{height:49px!important;font-size:14px!important;background:#fff!important}
  html body .mobile-amount-grid button.active{background:#64d817!important}
  html body .mobile-provider-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:14px!important}
  html body .mobile-provider{min-height:92px!important;grid-template-columns:72px 1fr 18px!important;padding:14px 18px!important}
  html body .mobile-provider>strong{font-size:27px!important}
  html body .mobile-provider span{font-size:12px!important}
  html body .mobile-payment-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:16px!important}
  html body .mobile-payment-grid button{min-height:79px!important;padding:13px 20px!important}
  html body .mobile-payment-grid b{font-size:27px!important}
  html body .mobile-payment-grid span{font-size:12px!important}
  html body .mobile-recharge-submit{height:64px!important;font-size:17px!important}
}

/* Mobile-topup supplied artwork is the complete hero banner. */
html body .mobile-recharge-hero{display:block!important;width:100%!important;min-height:0!important;aspect-ratio:3/1!important;padding:0!important;background:#020402 url('/images/mobile-topup-banner.png?v=1') center/cover no-repeat!important}
html body .mobile-recharge-hero>div,html body .mobile-recharge-hero>span{display:none!important}
@media(max-width:600px){html body .mobile-recharge-hero{aspect-ratio:3/1!important;background-size:cover!important;background-position:center!important}}

/* Clean single-outline phone number field. */
html body .mobile-number-field{box-sizing:border-box!important;display:grid!important;grid-template-columns:32px minmax(0,1fr) 32px!important;align-items:center!important;width:100%!important;height:62px!important;margin:0!important;padding:0 16px!important;border:1px solid #dce5de!important;border-radius:13px!important;background:#fff!important;box-shadow:0 4px 13px rgba(23,55,34,.10)!important;color:#25a844!important;transition:border-color .18s,box-shadow .18s!important;overflow:hidden!important}
html body .mobile-number-field:focus-within{border-color:#34b958!important;box-shadow:0 0 0 3px rgba(52,185,88,.12),0 5px 15px rgba(23,55,34,.10)!important}
html body .mobile-number-field>span,html body .mobile-number-field>i{display:grid!important;place-items:center!important;width:32px!important;height:32px!important;margin:0!important;padding:0!important;border:0!important;background:transparent!important;color:#26aa45!important;font-size:17px!important;font-style:normal!important}
html body .mobile-number-field input,html body .mobile-number-field input:focus{box-sizing:border-box!important;display:block!important;width:100%!important;max-width:none!important;min-width:0!important;height:60px!important;margin:0!important;padding:0 12px!important;border:0!important;border-radius:0!important;outline:0!important;background:transparent!important;box-shadow:none!important;color:#26352b!important;font-family:inherit!important;font-size:15px!important;font-weight:600!important;line-height:60px!important;appearance:none!important}
html body .mobile-number-field input::placeholder{color:#8a948d!important;font-weight:500!important;opacity:1!important}
@media(max-width:600px){html body .mobile-number-field{height:54px!important;padding:0 10px!important;grid-template-columns:28px minmax(0,1fr) 28px!important}html body .mobile-number-field input,html body .mobile-number-field input:focus{height:52px!important;padding:0 8px!important;font-size:13px!important;line-height:52px!important}}

html body .mobile-number-field svg{width:20px!important;height:20px!important;fill:none!important;stroke:currentColor!important;stroke-width:1.8!important;stroke-linecap:round!important;stroke-linejoin:round!important}
html body .main-nav a{display:inline-flex!important;align-items:center!important;gap:5px!important}
html body .main-nav a>svg{width:14px!important;height:14px!important;flex:0 0 14px!important;fill:none!important;stroke:currentColor!important;stroke-width:1.8!important;stroke-linecap:round!important;stroke-linejoin:round!important}

/* Category gallery: two cards per desktop row, one per mobile row. */
html body #categoriesView #featuredCategories,
html body #categoriesView #categoryList.category-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;align-items:stretch!important;gap:18px!important;width:100%!important;overflow:visible!important}
html body #categoriesView .category-card,
html body #categoriesView .peam-cat-card{box-sizing:border-box!important;display:flex!important;flex-direction:column!important;width:100%!important;min-width:0!important;height:auto!important;min-height:0!important;margin:0!important;padding:0!important;border:1px solid #e1e5e2!important;border-radius:14px!important;background:#fff!important;box-shadow:0 5px 16px rgba(31,49,37,.09)!important;overflow:hidden!important;text-decoration:none!important;transition:transform .18s,box-shadow .18s!important}
html body #categoriesView .category-card:hover,
html body #categoriesView .peam-cat-card:hover{transform:translateY(-3px)!important;box-shadow:0 10px 24px rgba(31,49,37,.14)!important}
html body #categoriesView .category-card:before,
html body #categoriesView .category-card .card-dog,
html body #categoriesView .category-card .card-route-icon{display:none!important}
html body #categoriesView .category-card>.managed-image,
html body #categoriesView .peam-cat-card-img{position:relative!important;inset:auto!important;display:block!important;width:100%!important;height:auto!important;aspect-ratio:3/1!important;min-height:0!important;margin:0!important;padding:0!important;border:0!important;border-radius:0!important;background:#f1f3f2!important;overflow:hidden!important;transform:none!important}
html body #categoriesView .category-card>.managed-image{object-fit:cover!important;object-position:center!important}
html body #categoriesView .peam-cat-card-img img{display:block!important;width:100%!important;height:100%!important;object-fit:cover!important;object-position:center!important}
html body #categoriesView .category-card h3{position:relative!important;inset:auto!important;display:flex!important;flex:1!important;flex-direction:column!important;justify-content:center!important;min-height:72px!important;margin:0!important;padding:12px 16px!important;border:0!important;border-radius:0!important;background:#fff!important;box-shadow:none!important;color:#202a23!important;font-size:14px!important;line-height:1.3!important;text-shadow:none!important}
html body #categoriesView .category-card h3 span{display:block!important;margin-top:5px!important;color:#7a857d!important;font-size:10px!important;font-weight:400!important;line-height:1.35!important}
html body #categoriesView .peam-cat-card-body{display:flex!important;flex:1!important;align-items:center!important;justify-content:space-between!important;gap:12px!important;min-height:72px!important;padding:12px 16px!important;background:#fff!important}
html body #categoriesView .peam-cat-card-text strong{color:#202a23!important;font-size:14px!important}
html body #categoriesView .peam-cat-card-text small{display:block!important;margin-top:5px!important;color:#7a857d!important;font-size:10px!important}
html body #categoriesView .peam-cat-card-count{color:#68736b!important;font-size:10px!important;white-space:nowrap!important}
@media(max-width:700px){html body #categoriesView #featuredCategories,html body #categoriesView #categoryList.category-grid{grid-template-columns:1fr!important;gap:13px!important}html body #categoriesView .category-card>.managed-image,html body #categoriesView .peam-cat-card-img{aspect-ratio:3/1!important}html body #categoriesView .category-card h3,html body #categoriesView .peam-cat-card-body{min-height:64px!important;padding:10px 13px!important}}


  /* 2-up gallery override removed to restore grid */
  .admin-service-manager{display:grid;gap:16px}.admin-service-manager .admin-panel-head{display:flex;align-items:center;justify-content:space-between;gap:16px}.admin-service-manager h2{margin:0}.admin-service-search{display:flex;align-items:center;gap:10px;padding:12px;border:1px solid #dce7df;border-radius:12px;background:#fff}.admin-service-search input{flex:1;height:40px;border:0;outline:0}.admin-service-table-head,.admin-service-row{display:grid;grid-template-columns:minmax(280px,1.8fr) 100px 120px 110px minmax(190px,1fr);gap:12px;align-items:center}.admin-service-table-head{padding:8px 14px;color:#718078;font-size:10px;font-weight:700}.admin-service-row{margin-bottom:9px;padding:13px;border:1px solid #dfe8e2;border-radius:12px;background:#fff}.admin-service-row>div:first-child{display:grid;gap:6px}.admin-service-row input,.admin-service-row textarea{box-sizing:border-box;width:100%;padding:8px;border:1px solid #dce5df;border-radius:7px;font:inherit}.admin-service-row .service-name{font-weight:700}.admin-service-row small{color:#78857d}.admin-service-row>div:last-child{display:grid;grid-template-columns:1fr 1fr;gap:7px;align-items:end}.admin-service-row>div:last-child button{grid-column:1/-1}.service-enabled{display:flex;align-items:center;gap:6px}.service-enabled input,.service-featured{width:auto!important}@media(max-width:900px){.admin-service-table-head{display:none}.admin-service-row{grid-template-columns:1fr 1fr}.admin-service-row>div:first-child{grid-column:1/-1}.admin-service-row>div:last-child{grid-column:1/-1}}
html body .net-page .net-hero{
  box-sizing:border-box!important;
  display:block!important;
  width:100vw!important;
  max-width:none!important;
  min-height:0!important;
  aspect-ratio:3 / 1!important;
  margin:0 0 0 calc(50% - 50vw)!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background-color:#050805!important;
  background-image:url('/images/net-topup-banner.png?v=2')!important;
  background-position:center!important;
  background-repeat:no-repeat!important;
  background-size:cover!important;
  box-shadow:none!important;
  overflow:hidden!important;
}
html body .net-page .net-hero::before,
html body .net-page .net-hero::after,
html body .net-page .net-hero > div,
html body .net-page .net-hero .net-hero-wifi{
  content:none!important;
  display:none!important;
}
@media(max-width:700px){
  html body .net-page .net-hero{
    width:100%!important;
    aspect-ratio:3 / 1!important;
    margin-left:0!important;
    background-size:cover!important;
  }
}

/* Modern storefront loading screen */
html body .page-loader{isolation:isolate;overflow:hidden;padding:24px!important;background:linear-gradient(145deg,#f1fff5 0%,#dcf9e5 45%,#effff5 100%)!important;color:#173622!important}
html body .page-loader:before{inset:auto!important;top:-22%;left:-8%;width:58vw!important;height:58vw!important;background:radial-gradient(circle,rgba(63,220,104,.23),rgba(63,220,104,0) 68%)!important;filter:blur(8px)!important}
html body .page-loader:after{inset:0!important;border-radius:0!important;background-image:radial-gradient(rgba(25,164,72,.12) 1px,transparent 1px)!important;background-size:25px 25px!important;opacity:.45}
.page-loader-glow{position:absolute;border-radius:50%;pointer-events:none;filter:blur(1px)}.page-loader-glow.glow-one{right:-8vw;bottom:-18vw;width:48vw;height:48vw;background:radial-gradient(circle,rgba(32,196,86,.2),transparent 68%)}.page-loader-glow.glow-two{top:13%;right:17%;width:190px;height:190px;background:radial-gradient(circle,rgba(143,240,80,.22),transparent 70%)}
html body .page-loader .page-loader-card{z-index:2;box-sizing:border-box;display:flex!important;flex-direction:column;align-items:stretch!important;justify-content:center!important;gap:0!important;width:min(92vw,430px)!important;min-height:0!important;padding:32px!important;border:1px solid rgba(255,255,255,.9)!important;border-radius:28px!important;background:rgba(255,255,255,.82)!important;box-shadow:0 30px 80px rgba(14,111,49,.16),inset 0 1px 0 #fff!important;backdrop-filter:blur(18px);text-align:left!important}
.page-loader-brand{display:flex;align-items:center;gap:14px}.page-loader-brand-copy{display:grid;gap:3px;min-width:0}.page-loader-brand-copy small{color:#21a951;font-size:9px;font-weight:900;letter-spacing:2px}.page-loader-brand-copy strong{position:static!important;display:block;max-width:280px!important;margin:0!important;overflow:hidden;color:#152c1d!important;font-size:21px!important;font-weight:900!important;line-height:1.1!important;text-overflow:ellipsis;text-shadow:none!important;transform:none!important;white-space:nowrap}
html body .page-loader .page-loader-logo{position:relative!important;display:grid!important;flex:0 0 58px;grid-row:auto!important;place-items:center;width:58px!important;height:58px!important;border:1px solid #d7f1df;border-radius:18px;background:linear-gradient(145deg,#f4fff6,#e3f9e9);box-shadow:0 9px 24px rgba(27,154,68,.12);animation:loader-new-logo 2.2s ease-in-out infinite!important}
html body .page-loader .page-loader-logo .site-logo-image,html body .page-loader .page-loader-logo .logo-mark{position:static!important;inset:auto!important;transform:none!important}.page-loader .page-loader-logo .site-logo-image{width:42px!important;height:42px!important;object-fit:contain!important}.page-loader .page-loader-logo .logo-mark{width:34px!important;height:34px!important;border-radius:11px!important}
.page-loader-message{margin-top:32px}.page-loader-message h2{margin:0;color:#173622;font-size:24px;line-height:1.25}.page-loader-message p{position:static!important;margin:7px 0 0!important;color:#738078!important;font-size:12px!important;font-weight:500!important;text-shadow:none!important;opacity:1!important;animation:none!important}
.page-loader-progress{height:7px;margin-top:25px;overflow:hidden;border-radius:999px;background:#e7f2ea}.page-loader-progress span{display:block;width:42%;height:100%;border-radius:inherit;background:linear-gradient(90deg,#82e932,#1dc85b);box-shadow:0 0 14px rgba(34,199,89,.36);animation:loader-new-progress 1.45s ease-in-out infinite}
.page-loader-status{display:flex;align-items:center;gap:7px;margin-top:13px;color:#72907b;font-size:10px}.page-loader-status i{width:7px;height:7px;border-radius:50%;background:#24c65c;box-shadow:0 0 0 5px rgba(36,198,92,.1);animation:loader-new-status 1.5s ease-in-out infinite}
@keyframes loader-new-progress{0%{transform:translateX(-115%)}55%,100%{transform:translateX(245%)}}@keyframes loader-new-logo{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}@keyframes loader-new-status{0%,100%{opacity:.45}50%{opacity:1}}
@media(max-width:520px){html body .page-loader .page-loader-card{width:min(92vw,370px)!important;padding:25px!important;border-radius:24px!important}.page-loader-message{margin-top:27px}.page-loader-message h2{font-size:21px}.page-loader-brand-copy strong{font-size:18px!important}}
@media(prefers-reduced-motion:reduce){.page-loader-progress span,.page-loader-status i,html body .page-loader .page-loader-logo{animation:none!important}}

/* In-app admin handbook */
.admin-guide{display:grid;gap:16px}.admin-guide-hero{display:flex;align-items:center;justify-content:space-between;gap:22px;padding:25px 28px;border:1px solid #bde6c9;border-radius:20px;background:linear-gradient(135deg,#effff3 0%,#dcf9e6 58%,#f8fff9 100%);box-shadow:0 15px 38px rgba(25,137,61,.08)}.admin-guide-hero>div:first-child{display:grid;gap:5px}.admin-guide-hero span{color:#139849;font-size:10px;font-weight:900;letter-spacing:1.7px}.admin-guide-hero h2{margin:0;font-size:25px}.admin-guide-hero p{margin:0;color:#67766c;font-size:12px}.admin-guide-hero-badge{display:grid;flex:0 0 92px;place-items:center;padding:13px;border:1px solid rgba(33,185,79,.2);border-radius:15px;background:rgba(255,255,255,.8)}.admin-guide-hero-badge strong{color:#16a34a;font-size:25px}.admin-guide-hero-badge small{color:#728078;font-size:9px}.admin-guide-start{display:flex;align-items:center;gap:20px;padding:14px 18px;border:1px solid #e1eae4;border-radius:15px;background:#fff}.admin-guide-start>strong{flex:none;font-size:12px}.admin-guide-start>div{display:flex;flex-wrap:wrap;gap:7px}.admin-guide-start span{padding:6px 9px;border-radius:999px;background:#edf9f0;color:#218347;font-size:9px;font-weight:700}.admin-guide-search{display:flex;align-items:center;gap:10px;padding:0 15px;height:50px;border:1px solid #cfe1d4;border-radius:14px;background:#fff;box-shadow:0 7px 20px rgba(24,68,38,.05)}.admin-guide-search svg{width:19px;fill:none;stroke:#249e4d;stroke-width:2}.admin-guide-search input{min-width:0;width:100%;border:0;outline:0;background:transparent;font:inherit}.admin-guide-search b{flex:none;padding:5px 9px;border-radius:999px;background:#eff9f2;color:#21864a;font-size:9px}.admin-guide-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;gap:12px}.admin-guide-card{overflow:hidden;border:1px solid #dce8df;border-radius:16px;background:#fff;box-shadow:0 7px 22px rgba(25,68,39,.045)}.admin-guide-card[open]{border-color:#9edcaf;box-shadow:0 12px 28px rgba(29,146,66,.09)}.admin-guide-card summary{display:flex;align-items:center;gap:12px;padding:16px;cursor:pointer;list-style:none}.admin-guide-card summary::-webkit-details-marker{display:none}.admin-guide-card summary>i{display:grid;flex:0 0 42px;place-items:center;width:42px;height:42px;border-radius:13px;background:#effaf2;font-size:19px;font-style:normal}.admin-guide-card summary>span{display:grid;min-width:0;gap:3px}.admin-guide-card summary strong{font-size:13px}.admin-guide-card summary small{overflow:hidden;color:#758079;font-size:9px;text-overflow:ellipsis;white-space:nowrap}.admin-guide-card summary em{margin-left:auto;color:#249f4e;font-style:normal;transition:transform .2s}.admin-guide-card[open] summary em{transform:rotate(180deg)}.admin-guide-body{display:grid;gap:13px;padding:0 16px 16px;border-top:1px solid #eef3ef}.admin-guide-body ol{display:grid;gap:9px;margin:14px 0 0;padding-left:24px}.admin-guide-body li{padding-left:3px;color:#49564e;font-size:10px;line-height:1.55}.admin-guide-body li::marker{color:#20a951;font-weight:900}.admin-guide-tip{display:flex;align-items:flex-start;gap:8px;padding:10px 11px;border-radius:11px;background:#fff9e9;color:#6f5c24;font-size:9px;line-height:1.45}.admin-guide-tip b{flex:none;color:#b28200}.admin-guide-body .light-btn{justify-self:start;font-size:10px}.admin-guide-empty{grid-column:1/-1;padding:35px;border:1px dashed #c9ddd0;border-radius:16px;color:#738078;text-align:center}
@media(max-width:760px){.admin-guide-hero{align-items:flex-start;padding:20px}.admin-guide-hero h2{font-size:21px}.admin-guide-hero-badge{flex-basis:70px}.admin-guide-start{align-items:flex-start;flex-direction:column;gap:9px}.admin-guide-grid{grid-template-columns:1fr}.admin-guide-card summary small{white-space:normal}.admin-guide-search b{display:none}}

.policy-document{margin-bottom:18px}.policy-document h1{margin:0 0 14px;color:#183322;font-size:24px}.policy-document h2{margin:22px 0 9px;color:#1e432b;font-size:16px}.policy-document p,.policy-document li{color:#536359;font-size:12px;line-height:1.8}.policy-document ul{display:grid;gap:5px;margin:0;padding-left:21px}.policy-acknowledgement{margin-top:20px!important;padding:13px 15px;border-left:4px solid #16a34a;border-radius:8px;background:#effaf3;color:#27643b!important;font-weight:600}@media(max-width:600px){.policy-document{padding:17px!important}.policy-document h1{font-size:19px}.policy-document h2{font-size:14px}.policy-document p,.policy-document li{font-size:11px}}
.footer-merchant-grid strong a{color:inherit;text-decoration:none}.footer-merchant-grid strong a:hover{color:#8ee79d;text-decoration:underline}
.notification-button{position:relative;display:grid;place-items:center;width:40px;height:40px;padding:0;border:1px solid #dce8e0;border-radius:50%;background:#fff;color:#198f4a}.notification-button svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8}.notification-button>span{position:absolute;right:-3px;top:-4px;display:grid;place-items:center;min-width:18px;height:18px;padding:0 4px;border:2px solid #fff;border-radius:10px;background:#ef3340;color:#fff;font-size:9px;font-weight:800}.notification-modal-card{position:relative;width:min(560px,calc(100vw - 24px));max-height:min(720px,calc(100dvh - 28px));padding:24px;border-radius:20px;background:#fff;overflow:auto}.notification-modal-card h2{margin:4px 0}.notification-list{display:grid;gap:9px;margin-top:16px}.notification-item{display:grid;grid-template-columns:36px 1fr;gap:10px;padding:12px;border:1px solid #dfebe3;border-radius:13px;background:#fff}.notification-item.unread{border-color:#67d58c;background:#f0fbf4}.notification-item>i{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:#eaf8ef;color:#15954c;font-style:normal}.notification-item h3{margin:0 0 3px;font-size:12px}.notification-item p{margin:0;color:#637168;font-size:10px;line-height:1.5}.notification-item time{display:block;margin-top:5px;color:#95a098;font-size:8px}.auth-text-button{justify-self:end;padding:2px 0;border:0;background:transparent;color:#15954c;font:inherit;font-size:12px;font-weight:700;cursor:pointer}

/* Keep the member form above the mobile navigation without covering required fields. */
@media (max-width: 900px) {
  #authModal.modal { z-index: 2200 !important; }
  body:has(#authModal:not(.hidden)) .mobile-bottom-nav { display: none !important; }
  #authModal .auth-form { padding-bottom: 24px !important; }
  #authModal .auth-submit {
    position: static !important;
    width: 100% !important;
    min-height: 52px !important;
    transform: none !important;
    border: 1px solid rgba(255,255,255,.8) !important;
    box-shadow: 0 10px 28px rgba(13,112,55,.28) !important;
  }
}

/* Keep HOT badge comfortably inside each game card. */
html body .new-game-card.is-hot .game-hot-badge{left:10px!important;top:10px!important;padding:5px 9px!important;border-radius:6px!important}
html body .new-game-card.is-hot .game-hot-badge:after{display:none!important;content:none!important}
@media(max-width:600px){html body .new-game-card.is-hot .game-hot-badge{left:8px!important;top:8px!important;padding:4px 7px!important;font-size:8px!important}}

.footer-merchant-info{box-sizing:border-box;width:min(1440px,calc(100% - 40px));margin:0 auto 18px;padding:18px 20px;border:1px solid rgba(255,255,255,.12);border-radius:14px;background:rgba(255,255,255,.045)}.footer-merchant-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:14px}.footer-merchant-head h3{margin:0;color:#fff;font-size:15px}.footer-merchant-head>span{padding:5px 9px;border-radius:999px;background:rgba(84,208,105,.14);color:#8ee79d;font-size:9px}.footer-merchant-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px 20px}.footer-merchant-grid p{display:grid;gap:3px;margin:0}.footer-merchant-grid span{color:rgba(255,255,255,.55);font-size:9px}.footer-merchant-grid strong{color:#fff;font-size:11px;font-weight:600;overflow-wrap:anywhere}@media(max-width:800px){.footer-merchant-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:520px){.footer-merchant-info{width:calc(100% - 24px);padding:15px}.footer-merchant-head{align-items:flex-start;flex-direction:column}.footer-merchant-grid{grid-template-columns:1fr}}

/* Mobile category cards stay compact; image and copy must not split apart. */
@media(max-width:700px){
  html body #categoriesView #featuredCategories,
  html body #categoriesView #categoryList.category-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:9px!important}
  html body #categoriesView .category-card,
  html body #categoriesView .category-card.has-category-image,
  html body #categoriesView .peam-cat-card{display:block!important;width:100%!important;height:auto!important;min-height:0!important;max-height:none!important;aspect-ratio:auto!important;padding:0!important;overflow:hidden!important}
  html body #categoriesView .category-card>.managed-image{position:relative!important;inset:auto!important;width:100%!important;height:auto!important;min-height:0!important;max-height:none!important;aspect-ratio:3/1!important;margin:0!important;object-fit:cover!important;object-position:center!important;transform:none!important}
  html body #categoriesView .category-card>.managed-image-desktop.has-mobile-pair{display:none!important}
  html body #categoriesView .category-card>.managed-image-mobile{display:block!important}
  html body #categoriesView .category-card>h3{position:relative!important;inset:auto!important;width:auto!important;height:auto!important;min-height:58px!important;margin:0!important;padding:8px 9px!important;font-size:11px!important}
  html body #categoriesView .category-card>h3 span{margin-top:3px!important;font-size:8px!important;line-height:1.25!important}
  html body #categoriesView .peam-cat-card-img{height:auto!important;min-height:0!important;aspect-ratio:3/1!important;margin:0!important}
  html body #categoriesView .peam-cat-card-body{height:auto!important;min-height:58px!important;margin:0!important;padding:8px 9px!important}
  html body #categoriesView .peam-cat-card-text strong{font-size:11px!important}
  html body #categoriesView .peam-cat-card-text small{font-size:8px!important}
  html body #categoriesView .peam-cat-card-count{display:none!important}
}

/* Size each mobile category card from its banner and copy, never from the row height. */
@media(max-width:700px){
  html body #categoriesView #featuredCategories,
  html body #categoriesView #categoryList.category-grid{align-items:start!important;grid-auto-rows:max-content!important}
  html body #categoriesView .category-card,
  html body #categoriesView .category-card.has-category-image,
  html body #categoriesView .peam-cat-card{align-self:start!important;display:grid!important;grid-template-rows:max-content max-content!important}
  html body #categoriesView .category-card>.managed-image,
  html body #categoriesView .peam-cat-card-img{display:block!important;align-self:start!important}
  html body #categoriesView .category-card>h3,
  html body #categoriesView .peam-cat-card-body{box-sizing:border-box!important;flex:none!important;align-self:start!important;width:100%!important}
}

.admin-guide-path{display:grid;gap:3px;margin-top:14px;padding:10px 12px;border-left:3px solid #25b95a;border-radius:0 10px 10px 0;background:#f0faf3}.admin-guide-path small{color:#718078;font-size:8px}.admin-guide-path strong{color:#158d43;font-size:10px}.admin-guide-body .admin-guide-path+ol{margin-top:0}.admin-guide-example{padding:11px 12px;border:1px solid #cce8d4;border-radius:11px;background:#f5fff7}.admin-guide-example b{color:#168e43;font-size:9px}.admin-guide-example p{margin:5px 0 0;color:#44554a;font-size:9px;line-height:1.55}
.admin-guide-visual{margin-top:15px;overflow:hidden;border:1px solid #d8e6dc;border-radius:14px;background:#f5f8f6;box-shadow:0 9px 24px rgba(25,73,40,.07)}.guide-visual-bar{display:flex;align-items:center;gap:5px;height:26px;padding:0 10px;background:#25322a}.guide-visual-bar>i{width:6px;height:6px;border-radius:50%;background:#ff6868}.guide-visual-bar>i:nth-child(2){background:#ffd45d}.guide-visual-bar>i:nth-child(3){background:#4fd57a}.guide-visual-bar>span{margin-left:5px;color:#d8e4db;font-size:7px}.guide-visual-screen{display:grid;grid-template-columns:115px 1fr;min-height:215px;background:#f8fbf9}.guide-visual-nav{padding:10px 8px;border-right:1px solid #e0e9e3;background:#fff}.guide-visual-brand{margin-bottom:10px;color:#198f44;font-size:8px;font-weight:900}.guide-visual-tabs{display:grid;gap:4px}.guide-visual-tabs>span{position:relative;padding:7px 7px;border-radius:6px;color:#7b867f;font-size:7px}.guide-visual-tabs>.selected{background:#dff7e6;color:#117b38;font-weight:800}.guide-visual-tabs b,.guide-visual-head button b,.guide-visual-form b,.guide-visual-save b{display:grid;position:absolute;z-index:2;place-items:center;width:18px;height:18px;border:2px solid #fff;border-radius:50%;background:#ff3f4f;color:#fff;font-size:8px;box-shadow:0 3px 8px rgba(176,29,43,.3)}.guide-visual-tabs b{top:-7px;right:-7px}.guide-visual-work{padding:13px}.guide-visual-head{display:flex;align-items:center;justify-content:space-between;gap:8px}.guide-visual-head>div{display:grid;gap:2px}.guide-visual-head small{color:#8a958e;font-size:6px}.guide-visual-head strong{font-size:10px}.guide-visual-head button{position:relative;padding:7px 9px;border:0;border-radius:7px;background:#24c65b;color:#fff;font-size:7px;font-weight:800}.guide-visual-head button b{top:-9px;right:-7px}.guide-visual-form{display:grid;grid-template-columns:1.2fr 1fr;gap:7px;margin-top:12px}.guide-visual-form label{display:grid;gap:4px}.guide-visual-form label>span{color:#728078;font-size:6px}.guide-visual-form label>div{position:relative;min-height:12px;padding:8px;border:1px solid #d8e5dc;border-radius:6px;background:#fff;color:#4c5a51;font-size:7px}.guide-visual-form b{right:-8px;bottom:-8px}.guide-visual-preview{display:grid;place-items:center;height:48px;margin-top:8px;border:1px dashed #bddac5;border-radius:7px;background:#eff9f2;color:#718078;font-size:6px;text-align:center}.guide-visual-save{position:relative;float:right;margin-top:9px;padding:7px 15px;border:0;border-radius:7px;background:linear-gradient(90deg,#66df35,#20c75a);color:#124623;font-size:7px;font-weight:900}.guide-visual-save b{top:-8px;right:-8px}.guide-visual-caption{display:grid;grid-template-columns:repeat(2,1fr);gap:6px;padding:9px;background:#fff}.guide-visual-caption span{display:flex;align-items:center;gap:6px;color:#536158;font-size:7px}.guide-visual-caption b{display:grid;flex:0 0 17px;place-items:center;width:17px;height:17px;border-radius:50%;background:#ff3f4f;color:#fff;font-size:7px}
@media(max-width:520px){.guide-visual-screen{grid-template-columns:85px 1fr}.guide-visual-work{padding:10px}.guide-visual-form{grid-template-columns:1fr}.guide-visual-preview{height:38px}.guide-visual-caption{grid-template-columns:1fr}}

/* Simple loading screen */
html body .page-loader{padding:20px!important;background:#f7fbf8!important;color:#1d2f23!important}
html body .page-loader:before,html body .page-loader:after{display:none!important}
html body .page-loader .page-loader-card.page-loader-simple{display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:0!important;width:260px!important;min-height:0!important;padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;backdrop-filter:none!important;text-align:center!important}
html body .page-loader-simple .page-loader-logo{position:relative!important;display:grid!important;flex:0 0 66px!important;place-items:center!important;width:66px!important;height:66px!important;margin:0 0 15px!important;border:1px solid #dce9df!important;border-radius:18px!important;background:#fff!important;box-shadow:0 8px 24px rgba(27,104,52,.08)!important;animation:none!important}
html body .page-loader-simple .page-loader-logo .site-logo-image,html body .page-loader-simple .page-loader-logo .logo-mark{position:static!important;inset:auto!important;width:46px!important;height:46px!important;transform:none!important;object-fit:contain!important}
html body .page-loader-simple>#pageLoaderLogoText{position:static!important;display:block!important;max-width:250px!important;margin:0!important;overflow:hidden!important;color:#1b2c21!important;font-size:19px!important;font-weight:850!important;line-height:1.25!important;text-overflow:ellipsis!important;text-shadow:none!important;transform:none!important;white-space:nowrap!important}
html body .page-loader-simple>p{position:static!important;margin:6px 0 17px!important;color:#7c8980!important;font-size:11px!important;font-weight:500!important;text-shadow:none!important;opacity:1!important;animation:none!important}
html body .page-loader-simple>.page-loader-progress{width:124px!important;height:3px!important;margin:0!important;border-radius:999px!important;background:#e4ece6!important}
html body .page-loader-simple>.page-loader-progress span{width:38%!important;background:#22b957!important;box-shadow:none!important;animation:loader-simple-progress 1.25s ease-in-out infinite!important}
@keyframes loader-simple-progress{0%{transform:translateX(-110%)}100%{transform:translateX(300%)}}

/* Keep the game package editor below the fixed desktop header. */
@media(min-width:701px){.game-price-admin.has-game-selection .selected-admin-game{top:88px!important}.game-price-admin.has-game-selection .admin-table-wrap{top:215px!important;bottom:24px!important}}
.standalone-premium-categories{padding:22px!important}.standalone-premium-categories .premium-category-admin-grid{margin-top:4px}@media(max-width:700px){.standalone-premium-categories{padding:14px!important}}

/* Structured Premium API product editor */
.premium-api-card-list{display:grid;gap:14px}.premium-api-product-card{overflow:hidden;border:1px solid #dce8df;border-radius:17px;background:#fff;box-shadow:0 7px 22px rgba(28,76,43,.055)}.premium-api-product-card.is-hidden-sale-row{border-color:#ead9d9;background:#fffafa;opacity:.82}.premium-api-card-head{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:15px 17px;border-bottom:1px solid #e8efea;background:linear-gradient(90deg,#f9fcfa,#f0faf3)}.premium-api-product-identity{display:flex;align-items:center;min-width:0;gap:12px}.premium-api-product-image{display:grid;flex:0 0 58px;place-items:center;width:58px;height:58px;overflow:hidden;border:1px solid #d8e6dc;border-radius:13px;background:#fff}.premium-api-product-image img{width:100%;height:100%;object-fit:cover}.premium-api-product-image svg{width:25px}.premium-api-product-identity>div{display:grid;min-width:0;gap:3px}.premium-api-product-identity>div>small{color:#8a958e;font-size:8px}.premium-api-product-identity strong{overflow:hidden;font-size:14px;text-overflow:ellipsis;white-space:nowrap}.premium-api-meta{display:flex;flex-wrap:wrap;gap:5px}.premium-api-meta span{padding:4px 7px;border-radius:999px;background:#eaf8ee;color:#187e3f;font-size:8px;font-weight:700}.premium-api-stock{display:grid;flex:0 0 90px;place-items:end}.premium-api-stock small{color:#7c8981;font-size:8px}.premium-api-stock strong{font-size:21px;line-height:1}.premium-api-stock span{margin-top:4px;font-size:8px;font-weight:700}.premium-api-stock.in-stock span{color:#159747}.premium-api-stock.out-stock span{color:#d14b4b}.premium-api-card-body{display:grid;grid-template-columns:minmax(210px,.75fr) minmax(410px,1.45fr) minmax(210px,.8fr);gap:12px;padding:14px 17px}.premium-api-card-section{display:flex;flex-direction:column;gap:9px;min-width:0;padding:12px;border:1px solid #e4ece6;border-radius:12px;background:#fbfdfb}.premium-api-card-section h4{margin:0;color:#34433a;font-size:10px}.premium-api-card-section>small{color:#839087;font-size:8px}.premium-api-card-section .premium-image-actions{display:grid;grid-template-columns:1fr auto;gap:7px;margin:0}.premium-api-card-section .file-field{min-width:0;margin:0}.premium-api-section-title{display:flex;align-items:center;justify-content:space-between;gap:10px}.premium-api-section-title>span{padding:5px 8px;border-radius:999px;font-size:8px;font-weight:800}.premium-api-section-title .positive{background:#e8f9ed;color:#128c40}.premium-api-section-title .negative{background:#fff0f0;color:#d03d3d}.premium-api-price-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.premium-api-price-grid label{display:grid;gap:5px;color:#6d7a72;font-size:8px}.premium-api-price-grid input,.premium-api-card-section.setting-section>input{box-sizing:border-box;width:100%;height:40px;padding:0 10px;border:1px solid #cfe0d4;border-radius:8px;background:#fff;font:inherit;font-size:11px;outline:0}.premium-api-price-grid input:focus,.premium-api-card-section.setting-section>input:focus{border-color:#20b656;box-shadow:0 0 0 3px rgba(32,182,86,.09)}.premium-api-price-grid label small{color:#8d9891;font-size:7px}.premium-api-toggle{display:flex;align-items:center;gap:8px;padding:9px;border-radius:9px;background:#eef9f1;color:#246b3d;font-size:9px;font-weight:700}.premium-api-card-footer{display:flex;justify-content:flex-end;gap:9px;padding:12px 17px;border-top:1px solid #e8efea;background:#fbfdfb}.premium-api-card-footer button{min-width:140px;height:38px;border-radius:9px}.premium-api-card-footer .premium-price-save{min-width:190px}
@media(max-width:1100px){.premium-api-card-body{grid-template-columns:1fr 1fr}.premium-api-card-section.price-section{grid-column:1/-1;grid-row:1}.premium-api-price-grid{grid-template-columns:repeat(3,1fr)}}@media(max-width:700px){.premium-api-card-head{align-items:flex-start;padding:13px}.premium-api-product-image{flex-basis:48px;width:48px;height:48px}.premium-api-stock{flex-basis:65px}.premium-api-card-body{grid-template-columns:1fr;padding:10px}.premium-api-card-section.price-section{grid-column:auto;grid-row:auto}.premium-api-price-grid{grid-template-columns:1fr}.premium-api-card-footer{display:grid;grid-template-columns:1fr 1fr;padding:10px}.premium-api-card-footer button,.premium-api-card-footer .premium-price-save{width:100%;min-width:0}.premium-api-product-identity strong{white-space:normal}}

/* Mobile admin workspace */
.admin-mobile-nav{display:none}
@media(max-width:760px){
  body #adminView{padding-bottom:88px!important;overflow-x:hidden!important;overflow-y:auto!important}
  body #adminView .admin-shell{box-sizing:border-box!important;width:100%!important;max-width:none!important;padding:10px!important}
  body #adminView .page-title{margin:0 0 9px!important;padding:4px 2px!important}
  body #adminView .page-title h1{margin:0!important;font-size:22px!important}
  body #adminView .page-title p{margin:3px 0 0!important;font-size:10px!important;line-height:1.4!important}
  body #adminView .admin-mobile-nav{position:sticky;z-index:180;top:62px;display:flex!important;align-items:center;gap:12px;margin:0 -2px 12px;padding:9px 12px;border:1px solid #cde4d3;border-radius:13px;background:rgba(247,255,249,.96);box-shadow:0 8px 22px rgba(23,91,43,.1);backdrop-filter:blur(12px)}
  body #adminView .admin-mobile-nav .admin-mobile-menu-btn{display:flex;align-items:center;gap:6px;background:#16a34a;color:#fff;border:none;padding:8px 12px;border-radius:8px;font-size:12px;font-weight:600;cursor:pointer}
  body #adminView .admin-mobile-nav .admin-mobile-menu-btn svg{stroke:#fff}
  body #adminView .admin-mobile-nav .admin-mobile-current-tab{font-size:14px;font-weight:700;color:#1d2b22;flex:1}
  body #adminView .admin-mobile-nav .admin-mobile-close-menu-btn{display:flex;align-items:center;justify-content:center;background:#ef4444;color:#fff;border:none;width:34px;height:34px;border-radius:8px;cursor:pointer}
  body #adminView .admin-mobile-nav .admin-mobile-close-menu-btn svg{stroke:#fff}
  body #adminView .admin-tabs{display:none!important}
  body #adminView #adminContent{display:block!important;min-width:0!important;width:100%!important}
  body #adminView #adminContent>.panel,body #adminView #adminContent>.stack,body #adminView #adminContent>section{box-sizing:border-box!important;width:100%!important;min-width:0!important}
  body #adminView .panel{padding:13px!important;border-radius:14px!important}
  body #adminView .admin-section-head,body #adminView .admin-panel-head,body #adminView .section-row,body #adminView .admin-form-head{align-items:flex-start!important;flex-direction:column!important;gap:9px!important}
  body #adminView .admin-section-head h3,body #adminView .admin-panel-head h2{font-size:18px!important}
  body #adminView .admin-head-actions,body #adminView .section-actions{display:grid!important;grid-template-columns:1fr 1fr!important;width:100%!important;gap:7px!important}
  body #adminView .admin-head-actions button,body #adminView .section-actions button{width:100%!important;min-width:0!important}
  body #adminView .form-grid,body #adminView .two-col,body #adminView .settings-grid,body #adminView .api-settings-grid{grid-template-columns:1fr!important}
  body #adminView input:not([type=checkbox]):not([type=radio]):not([type=file]),body #adminView select,body #adminView textarea{box-sizing:border-box;max-width:100%;font-size:16px!important}
  body #adminView button,body #adminView .light-btn,body #adminView .gold-btn,body #adminView .ghost{min-height:42px;padding:9px 11px;font-size:11px}
  body #adminView .metrics{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}
  body #adminView .metric-card{min-width:0!important;padding:12px!important}.metric-card strong{font-size:18px!important}
  body #adminView .admin-table-wrap{box-sizing:border-box;width:100%!important;max-width:100%!important;overflow-x:auto!important;border-radius:12px;-webkit-overflow-scrolling:touch}
  body #adminView .admin-table{min-width:760px!important;font-size:10px!important}
  body #adminView .admin-table th,body #adminView .admin-table td{padding:9px!important}
  body #adminView .admin-service-row{grid-template-columns:1fr!important;gap:9px!important;padding:12px!important}
  body #adminView .admin-service-row>code{justify-self:start}
  body #adminView .admin-service-row>div:last-child{display:grid!important;grid-template-columns:1fr 1fr!important;gap:7px!important}
  body #adminView .admin-profit-controls,body #adminView .admin-service-profit-tools{grid-template-columns:1fr!important}
  body #adminView .premium-category-admin-grid,body #adminView .premium-category-image-card{grid-template-columns:1fr!important}
  body #adminView .premium-category-image-card{padding:12px!important}.premium-category-image-preview{width:64px!important;height:64px!important}
  body #adminView .premium-category-image-actions{display:grid!important;grid-template-columns:1fr 1fr!important}.premium-category-image-actions .file-field{grid-column:1/-1}
  body #adminView .premium-api-card-head{gap:8px}.premium-api-stock{place-items:end!important}.premium-api-card-body{grid-template-columns:1fr!important}.premium-api-price-grid{grid-template-columns:1fr!important}
  body #adminView .admin-stock-filter-bar{padding:10px!important}.admin-stock-filter-bar .segmented-control{display:grid!important;grid-template-columns:1fr 1fr!important;width:100%!important}
  body #adminView .admin-pack-filter-tabs { display: grid!important; grid-template-columns: 1fr 1fr!important; width: 100%!important; gap: 5px!important; }
  body #adminView .admin-pack-filter-tabs button{width:100%!important;min-width:0!important;padding: 0 4px!important;}
  body #adminView .settings-save-bar,body #adminView .api-save-bar{position:static!important;display:grid!important;grid-template-columns:1fr 1fr!important;width:100%!important;padding:10px!important}
  body #adminView .settings-save-bar .gold-btn,body #adminView .api-save-bar .gold-btn{grid-column:1/-1!important}
  body #adminView .compact-file{min-width:0!important;width:100%!important}
  body #adminView .game-price-admin.has-game-selection .selected-admin-game{top:72px!important;width:calc(100vw - 12px)!important;height:146px!important}
  body #adminView .game-price-admin.has-game-selection .admin-table-wrap{top:217px!important;bottom:8px!important;width:calc(100vw - 12px)!important}
}
@media(max-width:390px){body #adminView .metrics{grid-template-columns:1fr!important}body #adminView .admin-head-actions,body #adminView .section-actions,body #adminView .premium-api-card-footer{grid-template-columns:1fr!important}}

/* Final desktop clearance for the fixed package editor. */
@media(min-width:761px){html body #adminView .game-price-admin.has-game-selection .selected-admin-game{top:108px!important}html body #adminView .game-price-admin.has-game-selection .admin-table-wrap{top:235px!important;bottom:22px!important}}

/* Guide screenshots mirror the real horizontal admin workspace. */
.real-guide-screen{padding:13px;background:linear-gradient(120deg,#f4fff6,#f9fcfa)}.real-guide-page-title{display:grid;gap:2px;margin-bottom:9px}.real-guide-page-title strong{font-size:13px}.real-guide-page-title small{color:#7a867e;font-size:6px}.real-guide-admin-tabs{display:flex;gap:5px;overflow:hidden;margin-bottom:10px}.real-guide-admin-tabs>span{position:relative;flex:none;padding:6px 8px;border:1px solid #cfe2d4;border-radius:7px;background:#fff;color:#48554c;font-size:6px;font-weight:700}.real-guide-admin-tabs>.selected{border-color:#26bd59;background:#dff8e6;color:#107b38}.real-guide-admin-tabs b,.real-guide-panel-head b,.real-guide-fields b,.real-guide-actions b{display:grid;position:absolute;z-index:2;place-items:center;width:18px;height:18px;border:2px solid #fff;border-radius:50%;background:#ff3f4f;color:#fff;font-size:8px;box-shadow:0 3px 8px rgba(176,29,43,.3)}.real-guide-admin-tabs b{top:-8px;right:-8px}.real-guide-panel{padding:12px;border:1px solid #dce8df;border-radius:11px;background:#fff;box-shadow:0 5px 16px rgba(27,78,42,.05)}.real-guide-panel-head{display:flex;align-items:center;justify-content:space-between;gap:10px}.real-guide-panel-head>div{display:grid;gap:2px}.real-guide-panel-head small{color:#87928b;font-size:6px}.real-guide-panel-head strong{font-size:10px}.real-guide-panel-head button{position:relative;padding:7px 10px;border:0;border-radius:7px;background:#25c35b;color:#fff;font-size:7px;font-weight:800}.real-guide-panel-head b{top:-9px;right:-8px}.real-guide-fields{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:11px}.real-guide-fields label{display:grid;gap:4px}.real-guide-fields label>span{color:#66746b;font-size:6px}.real-guide-fields label>div{position:relative;padding:8px;border:1px solid #cfe0d4;border-radius:6px;background:#fff;color:#849087;font-size:7px}.real-guide-fields b{right:-8px;bottom:-8px}.real-guide-preview{display:grid;place-items:center;height:42px;margin-top:8px;border:1px dashed #b9d9c2;border-radius:7px;background:#f1faf4;color:#7d8981;font-size:6px}.real-guide-actions{display:flex;justify-content:flex-end;gap:6px;margin-top:8px}.real-guide-actions button{position:relative;padding:7px 12px;border:1px solid #d2e1d6;border-radius:7px;background:#fff;color:#56635b;font-size:7px}.real-guide-actions .save{border-color:#25c35b;background:#25c35b;color:#fff;font-weight:800}.real-guide-actions b{top:-8px;right:-8px}
@media(max-width:520px){.real-guide-screen{padding:9px}.real-guide-page-title small{display:none}.real-guide-admin-tabs{padding-top:6px}.real-guide-fields{grid-template-columns:1fr}.real-guide-preview{height:34px}}

.premium-app-category-bar{display:grid;gap:12px;padding:15px;border:1px solid #cfe6d5;border-radius:15px;background:linear-gradient(135deg,#f8fff9,#eefaf2)}.premium-app-category-head{display:flex;align-items:center;justify-content:space-between;gap:14px}.premium-app-category-head>div{display:grid;gap:3px}.premium-app-category-head strong{font-size:14px}.premium-app-category-head small{color:#728078;font-size:9px}.premium-app-category-head .gold-btn{flex:none;min-width:190px}.premium-app-category-tabs{display:flex;gap:8px;overflow-x:auto;padding:2px 1px 5px;scrollbar-width:thin}.premium-app-category-tabs button{display:flex;align-items:center;justify-content:space-between;gap:9px;flex:0 0 auto;min-width:120px;height:40px;padding:0 10px;border:1px solid #cfe1d4;border-radius:10px;background:#fff;color:#35433a;font:inherit;font-size:10px;font-weight:750;cursor:pointer}.premium-app-category-tabs button b{display:grid;place-items:center;min-width:24px;height:24px;padding:0 5px;border-radius:999px;background:#edf7f0;color:#198d45;font-size:8px}.premium-app-category-tabs button.active{border-color:#25bd58;background:#27c65c;color:#fff;box-shadow:0 7px 17px rgba(32,180,80,.16)}.premium-app-category-tabs button.active b{background:rgba(255,255,255,.85);color:#118039}
@media(max-width:700px){.premium-app-category-head{align-items:stretch;flex-direction:column}.premium-app-category-head .gold-btn{width:100%;min-width:0}.premium-app-category-tabs button{min-width:105px}}

.mobile-recharge-submit{display:flex!important;align-items:center!important;justify-content:center!important;gap:8px!important}.mobile-recharge-submit>svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}.mobile-hero-mark img{width:105px;height:105px;object-fit:contain}.admin-guide-card summary>i svg{width:21px;height:21px;fill:none;stroke:#16984a;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.otp-hero>span svg{width:78px;height:78px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.mobile-recharge-warning{display:flex;align-items:flex-start;gap:11px;padding:12px 14px;border:1px solid #f0d69a;border-radius:11px;background:#fffaf0;color:#75591b}.mobile-recharge-warning>svg{flex:0 0 21px;width:21px;height:21px;fill:none;stroke:#d29410;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.mobile-recharge-warning>div{display:grid;gap:3px}.mobile-recharge-warning strong{font-size:11px}.mobile-recharge-warning p{margin:0;color:#806d43;font-size:9px;line-height:1.5}@media(max-width:600px){.mobile-recharge-warning{padding:10px 11px}.mobile-recharge-warning p{font-size:8px}}
/* Homepage 3D service showcase */
.home-service-showcase{position:relative;isolation:isolate;overflow:hidden;margin:22px 0 26px;padding:26px;border:1px solid #d7eddb;border-radius:24px;background:#fbfdf9 url('/images/services-3d-bg-v1.png') center/cover no-repeat;box-shadow:0 18px 45px rgba(23,92,46,.08)}
.home-service-showcase::before{content:"";position:absolute;z-index:-1;inset:0;background:rgba(255,255,255,.62);backdrop-filter:blur(1px)}
.home-service-art{display:none;width:100%;height:auto;border-radius:16px;object-fit:contain}.home-service-showcase.has-service-art{padding:0;border-color:#d7eddb;background:#fff}.home-service-showcase.has-service-art::before,.home-service-showcase.has-service-art .home-service-heading,.home-service-showcase.has-service-art .home-service-grid{display:none}.home-service-showcase.has-service-art .home-service-art{display:block}
.home-service-heading{display:flex;align-items:end;justify-content:space-between;gap:18px;margin-bottom:20px}.home-service-heading span{color:#16a34a;font-size:12px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.home-service-heading h2{margin:4px 0 3px;color:#17251c;font-size:clamp(21px,2.1vw,30px)}.home-service-heading p{margin:0;color:#66756b;font-size:14px}.home-service-heading>a{display:inline-flex;flex:0 0 auto;align-items:center;gap:6px;color:#168542;font-size:13px;font-weight:800}.home-service-heading>a svg{width:18px;fill:none;stroke:currentColor;stroke-width:2}
.home-service-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.home-service-card{display:grid;grid-template-columns:58px minmax(0,1fr);grid-template-rows:auto auto;align-items:center;column-gap:13px;min-height:88px;padding:13px;border:1px solid rgba(190,221,197,.9);border-radius:17px;background:rgba(255,255,255,.9);color:#173020;box-shadow:0 8px 20px rgba(23,92,46,.07);transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}.home-service-card:hover{transform:translateY(-4px);border-color:#77cf8d;box-shadow:0 15px 28px rgba(23,92,46,.13)}
.home-service-icon{display:grid;grid-row:1/3;place-items:center;width:58px;height:58px;border:1px solid rgba(255,255,255,.8);border-radius:17px;background:#2bc65c;color:#fff;box-shadow:inset 0 2px 2px rgba(255,255,255,.42),0 7px 13px rgba(20,125,57,.2)}.home-service-icon svg{width:30px;height:30px;fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.8}.home-service-card strong{align-self:end;font-size:14px}.home-service-card small{align-self:start;overflow:hidden;color:#718078;font-size:10.5px;line-height:1.35;text-overflow:ellipsis;white-space:nowrap}.service-game .home-service-icon{background:#63bd28}.service-wallet .home-service-icon{background:#c98a2b}.service-net .home-service-icon{background:#36b95b}.service-safe .home-service-icon{background:#16a34a}.service-mobile .home-service-icon{background:#78bd32}.service-value .home-service-icon{background:#d5a421}.service-support .home-service-icon{background:#249d56}
@media(max-width:900px){.home-service-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.home-service-showcase{margin:14px 0 20px;padding:16px 12px;border-radius:20px;background-position:center}.home-service-showcase::before{background:rgba(255,255,255,.76)}.home-service-heading{align-items:start;margin-bottom:14px}.home-service-heading h2{font-size:20px;line-height:1.25}.home-service-heading p{font-size:12px}.home-service-heading>a{display:none}.home-service-grid{gap:8px}.home-service-card{grid-template-columns:44px minmax(0,1fr);min-height:70px;padding:9px;column-gap:9px;border-radius:14px}.home-service-icon{width:44px;height:44px;border-radius:13px}.home-service-icon svg{width:24px;height:24px}.home-service-card strong{font-size:12px}.home-service-card small{font-size:9px}}

/* Compact 4x2 service menu inspired by the supplied reference. */
html body #shopView .home-service-showcase{overflow:hidden;margin:18px 0 24px;padding:7px;border:3px solid #b9df8b;border-radius:22px;background:linear-gradient(180deg,#e9f8d8 0,#f8fff1 7%,#fff 48%,#edf9df 52%,#fff 100%);box-shadow:0 10px 28px rgba(60,127,36,.11)}
html body #shopView .home-service-showcase::before,html body #shopView .home-service-heading{display:none!important}
html body #shopView .home-service-grid{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:0!important;overflow:hidden;border:1px solid #d8e8ca;border-radius:15px;background:#fff}
html body #shopView .home-service-card{display:flex!important;align-items:center!important;flex-direction:column!important;justify-content:center!important;gap:5px!important;min-width:0!important;min-height:112px!important;padding:10px 6px!important;border:0!important;border-right:1px solid #e5ecdf!important;border-bottom:1px solid #dce8d3!important;border-radius:0!important;background:#fff!important;color:#203622!important;box-shadow:none!important;text-align:center!important;transform:none!important}
html body #shopView .home-service-card:nth-child(4n){border-right:0!important}html body #shopView .home-service-card:nth-child(n+5){border-bottom:0!important}
html body #shopView .home-service-card:hover{z-index:1;background:#f4fbea!important;box-shadow:inset 0 0 0 2px #a9d86e!important}
html body #shopView .home-service-icon{display:grid!important;flex:0 0 48px!important;place-items:center!important;width:48px!important;height:48px!important;margin:0!important;border:0!important;border-radius:14px!important;background:linear-gradient(145deg,#39c85f,#149f41)!important;color:#fff!important;box-shadow:0 5px 10px rgba(33,146,66,.17)!important}
html body #shopView .service-game .home-service-icon{background:linear-gradient(145deg,#78c936,#45a91d)!important}html body #shopView .service-wallet .home-service-icon{background:linear-gradient(145deg,#e1a133,#b97317)!important}html body #shopView .service-net .home-service-icon{background:linear-gradient(145deg,#70c849,#29a747)!important}html body #shopView .service-safe .home-service-icon{background:linear-gradient(145deg,#43cb66,#11933b)!important}html body #shopView .service-mobile .home-service-icon{background:linear-gradient(145deg,#8cca45,#4faa24)!important}html body #shopView .service-value .home-service-icon{background:linear-gradient(145deg,#f0c337,#d99c08)!important}html body #shopView .service-support .home-service-icon{background:linear-gradient(145deg,#43c667,#159747)!important}
html body #shopView .home-service-icon svg{width:28px!important;height:28px!important}html body #shopView .home-service-card strong{align-self:auto!important;width:100%!important;overflow:hidden!important;color:#263b29!important;font-size:12px!important;line-height:1.15!important;text-overflow:ellipsis!important;white-space:nowrap!important}html body #shopView .home-service-card small{align-self:auto!important;width:100%!important;overflow:hidden!important;color:#869287!important;font-size:8.5px!important;line-height:1.2!important;text-overflow:ellipsis!important;white-space:nowrap!important}
html body #shopView .home-service-icon img{display:block;width:100%!important;height:100%!important;border-radius:13px!important;object-fit:cover!important}
@media(max-width:600px){html body #shopView .home-service-showcase{margin:12px 0 18px;padding:4px;border-width:2px;border-radius:15px}html body #shopView .home-service-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important;border-radius:10px}html body #shopView .home-service-card{min-height:91px!important;padding:7px 3px!important;gap:3px!important}html body #shopView .home-service-icon{flex-basis:38px!important;width:38px!important;height:38px!important;border-radius:11px!important}html body #shopView .home-service-icon svg{width:23px!important;height:23px!important}html body #shopView .home-service-card strong{font-size:9px!important}html body #shopView .home-service-card small{font-size:6.5px!important}}

/* Homepage promotional banners: artwork stays image-only; all copy and actions are live HTML. */
.home-promo-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:18px 0 24px}
.home-promo-card{position:relative;isolation:isolate;min-height:210px;overflow:hidden;border:1px solid #cfe7bd;border-radius:20px;background-color:#eff9df;background-position:center;background-size:cover;box-shadow:0 10px 26px rgba(45,112,42,.12)}
.home-promo-premium{background-image:url('/images/home-promo-premium.png')}
.home-promo-game{background-image:url('/images/home-promo-game.png')}
.home-promo-card::after{content:"";position:absolute;z-index:-1;inset:0;background:linear-gradient(90deg,rgba(249,255,241,.98) 0%,rgba(249,255,241,.88) 36%,rgba(249,255,241,.05) 67%);pointer-events:none}
.home-promo-copy{display:flex;align-items:flex-start;flex-direction:column;justify-content:center;width:58%;min-height:210px;padding:20px 0 20px 22px}
.home-promo-badge{display:inline-flex;padding:4px 10px;border-radius:999px;background:#249b3f;color:#fff;font-size:10px;font-weight:800;line-height:1.2;box-shadow:0 3px 9px rgba(25,116,48,.18)}
.home-promo-copy h2{margin:7px 0 2px;color:#245126;font-size:clamp(22px,2.2vw,31px);font-weight:950;line-height:.98;letter-spacing:-.035em}
.home-promo-copy p{margin:5px 0 10px;color:#69786a;font-size:10px;font-weight:600;white-space:nowrap}
.home-promo-button{display:inline-flex;align-items:center;gap:4px;padding:7px 11px;border-radius:999px;background:#65bd2d;color:#fff!important;font-size:10px;font-weight:850;line-height:1;text-decoration:none;box-shadow:0 5px 12px rgba(32,130,54,.24);transition:transform .18s ease,box-shadow .18s ease}
.home-promo-button:hover{transform:translateY(-2px);box-shadow:0 8px 17px rgba(32,130,54,.3)}
.home-promo-button svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:700px){.home-promo-grid{gap:8px;margin:12px 0 18px}.home-promo-card{min-height:132px;border-radius:13px;background-position:center}.home-promo-copy{width:62%;min-height:132px;padding:11px 0 11px 11px}.home-promo-badge{padding:3px 6px;font-size:7px}.home-promo-copy h2{margin-top:5px;font-size:16px;line-height:1}.home-promo-copy p{max-width:100%;margin:4px 0 7px;overflow:hidden;font-size:6.5px;text-overflow:ellipsis}.home-promo-button{gap:2px;padding:5px 7px;font-size:7px}.home-promo-button svg{width:9px;height:9px}}
@media(max-width:390px){.home-promo-grid{grid-template-columns:1fr}.home-promo-card{min-height:142px}.home-promo-copy{min-height:142px}.home-promo-copy h2{font-size:19px}.home-promo-copy p{font-size:8px}.home-promo-button{font-size:8px}}

/* Live mobile-services hero: generated artwork is background-only; copy and controls remain accessible HTML. */
html body .mobile-recharge-hero{position:relative!important;isolation:isolate!important;display:flex!important;align-items:center!important;width:100%!important;min-height:430px!important;aspect-ratio:auto!important;padding:42px max(40px,calc((100vw - 1440px)/2 + 28px))!important;background:#020402 url('/images/mobile-services-hero-bg.png?v=2026071801') center/cover no-repeat!important;color:#fff!important;overflow:hidden!important}
html body .mobile-recharge-hero::before{content:"";position:absolute;z-index:-1;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.84) 0%,rgba(0,0,0,.63) 43%,rgba(0,0,0,.02) 72%);pointer-events:none}
html body .mobile-recharge-hero>.mobile-recharge-hero-content{display:flex!important;align-items:flex-start!important;flex-direction:column!important;width:min(720px,58vw)!important;margin:0!important;padding:0!important}
html body .mobile-recharge-hero-content>small{display:inline-flex!important;padding:6px 12px!important;border:1px solid rgba(153,238,40,.46)!important;border-radius:999px!important;background:rgba(124,216,22,.13)!important;color:#a8f135!important;font-size:11px!important;font-weight:900!important;letter-spacing:.15em!important}
html body .mobile-recharge-hero-content h1{margin:13px 0 8px!important;color:#fff!important;font-size:clamp(34px,3.4vw,57px)!important;font-weight:950!important;line-height:1.06!important;letter-spacing:-.04em!important;text-shadow:0 3px 18px rgba(0,0,0,.72)!important}
html body .mobile-recharge-hero-content h1 b{color:#a8ec23!important}
html body .mobile-recharge-hero-content>p{max-width:590px!important;margin:0!important;color:#d2dbc9!important;font-size:14px!important;line-height:1.65!important}
.mobile-hero-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;width:min(610px,100%);margin-top:22px}
.mobile-hero-actions>a{display:grid;grid-template-columns:42px minmax(0,1fr);align-items:center;gap:11px;min-height:68px;padding:10px 17px;border:1px solid rgba(174,239,49,.48);border-radius:18px;background:rgba(7,14,8,.77);color:#fff;text-decoration:none;box-shadow:inset 0 1px rgba(255,255,255,.12),0 9px 24px rgba(0,0,0,.28);backdrop-filter:blur(7px);transition:transform .18s,border-color .18s,background .18s}
.mobile-hero-actions>a:hover{transform:translateY(-2px);border-color:#b9fa32;background:rgba(40,78,15,.86)}
.mobile-hero-actions>a.active{border-color:#b7f22d;background:linear-gradient(135deg,#9fe616,#59bd12);color:#102009;box-shadow:0 0 22px rgba(153,231,28,.28)}
.mobile-hero-actions svg{width:34px;height:34px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.mobile-hero-actions span{display:grid;gap:3px;font-size:14px;font-weight:900}.mobile-hero-actions span small{color:inherit;font-size:9px;font-weight:600;opacity:.72}
.mobile-hero-features{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));width:min(670px,100%);margin-top:18px;padding:10px 13px;border:1px solid rgba(255,255,255,.13);border-radius:14px;background:rgba(3,7,4,.62);backdrop-filter:blur(6px)}
.mobile-hero-features>span{display:flex;align-items:center;justify-content:center;gap:6px;min-height:26px;padding:0 8px;border-right:1px solid rgba(255,255,255,.14);color:#e7eee3;font-size:10px;font-weight:750;white-space:nowrap}.mobile-hero-features>span:last-child{border-right:0}.mobile-hero-features b{display:grid;place-items:center;min-width:22px;height:22px;color:#adf12d;font-size:11px}
@media(max-width:700px){html body .mobile-recharge-hero{min-height:390px!important;padding:22px 16px!important;background-position:66% center!important}html body .mobile-recharge-hero::before{background:linear-gradient(90deg,rgba(0,0,0,.94),rgba(0,0,0,.72) 58%,rgba(0,0,0,.18))}html body .mobile-recharge-hero>.mobile-recharge-hero-content{width:76%!important}html body .mobile-recharge-hero-content>small{padding:4px 8px!important;font-size:8px!important}html body .mobile-recharge-hero-content h1{margin-top:9px!important;font-size:28px!important}html body .mobile-recharge-hero-content>p{font-size:10px!important;line-height:1.5!important}.mobile-hero-actions{grid-template-columns:1fr;gap:7px;margin-top:14px}.mobile-hero-actions>a{grid-template-columns:31px minmax(0,1fr);gap:8px;min-height:48px;padding:7px 11px;border-radius:12px}.mobile-hero-actions svg{width:26px;height:26px}.mobile-hero-actions span{font-size:11px}.mobile-hero-actions span small{font-size:7px}.mobile-hero-features{grid-template-columns:repeat(2,minmax(0,1fr));gap:4px;margin-top:10px;padding:6px}.mobile-hero-features>span{justify-content:flex-start;min-height:22px;padding:0 4px;border:0;font-size:7px}.mobile-hero-features b{min-width:17px;height:17px;font-size:8px}}

/* The internet page shares the live service switcher and background with mobile top-up. */
html body .net-page .net-hero.mobile-recharge-hero{position:relative!important;isolation:isolate!important;display:flex!important;align-items:center!important;justify-content:flex-start!important;box-sizing:border-box!important;width:100vw!important;max-width:none!important;min-height:430px!important;aspect-ratio:auto!important;margin:0 0 0 calc(50% - 50vw)!important;padding:42px max(40px,calc((100vw - 1440px)/2 + 28px))!important;border:0!important;border-radius:0!important;background:#020402 url('/images/mobile-services-hero-bg.png?v=2026071801') center/cover no-repeat!important;color:#fff!important;box-shadow:none!important;overflow:hidden!important}
html body .net-page .net-hero.mobile-recharge-hero::before{content:""!important;display:block!important;position:absolute!important;z-index:-1!important;inset:0!important;width:auto!important;height:auto!important;border:0!important;border-radius:0!important;background:linear-gradient(90deg,rgba(0,0,0,.84) 0%,rgba(0,0,0,.63) 43%,rgba(0,0,0,.02) 72%)!important;pointer-events:none!important}
html body .net-page .net-hero.mobile-recharge-hero::after{content:none!important;display:none!important}
html body .net-page .net-hero.mobile-recharge-hero>.mobile-recharge-hero-content{position:relative!important;z-index:1!important;display:flex!important;align-items:flex-start!important;flex-direction:column!important;width:min(720px,58vw)!important;margin:0!important;padding:0!important}
html body .net-page .net-hero.mobile-recharge-hero .mobile-recharge-hero-content>small{display:inline-flex!important;padding:6px 12px!important;border:1px solid rgba(153,238,40,.46)!important;border-radius:999px!important;background:rgba(124,216,22,.13)!important;color:#a8f135!important;font-size:11px!important;font-weight:900!important;letter-spacing:.15em!important}
html body .net-page .net-hero.mobile-recharge-hero .mobile-recharge-hero-content h1{margin:13px 0 8px!important;color:#fff!important;font-size:clamp(34px,3.4vw,57px)!important;font-weight:950!important;line-height:1.06!important;letter-spacing:-.04em!important;text-shadow:0 3px 18px rgba(0,0,0,.72)!important}
html body .net-page .net-hero.mobile-recharge-hero .mobile-recharge-hero-content h1 b{color:#a8ec23!important}
html body .net-page .net-hero.mobile-recharge-hero .mobile-recharge-hero-content>p{max-width:590px!important;margin:0!important;color:#d2dbc9!important;font-size:14px!important;line-height:1.65!important}
html body .net-page .net-hero.mobile-recharge-hero .mobile-hero-actions{display:grid!important;gap:12px!important;margin-top:22px!important}
html body .net-page .net-hero.mobile-recharge-hero .mobile-hero-actions a{display:grid!important}
html body .net-page .net-hero.mobile-recharge-hero .mobile-hero-features{display:grid!important;gap:0!important}
html body .net-page .net-hero.mobile-recharge-hero .mobile-hero-features span{display:flex!important}
@media(max-width:700px){html body .net-page .net-hero.mobile-recharge-hero{width:100%!important;min-height:390px!important;margin-left:0!important;padding:22px 16px!important;background-position:66% center!important}html body .net-page .net-hero.mobile-recharge-hero::before{background:linear-gradient(90deg,rgba(0,0,0,.94),rgba(0,0,0,.72) 58%,rgba(0,0,0,.18))!important}html body .net-page .net-hero.mobile-recharge-hero>.mobile-recharge-hero-content{width:76%!important}html body .net-page .net-hero.mobile-recharge-hero .mobile-recharge-hero-content>small{padding:4px 8px!important;font-size:8px!important}html body .net-page .net-hero.mobile-recharge-hero .mobile-recharge-hero-content h1{margin-top:9px!important;font-size:28px!important}html body .net-page .net-hero.mobile-recharge-hero .mobile-recharge-hero-content>p{font-size:10px!important;line-height:1.5!important}html body .net-page .net-hero.mobile-recharge-hero .mobile-hero-actions{grid-template-columns:1fr!important;gap:7px!important;margin-top:14px!important}html body .net-page .net-hero.mobile-recharge-hero .mobile-hero-features{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:4px!important}}

/* Dark neon feature rail replaces the old white utility boxes. */
html body .mobile-recharge-hero .mobile-hero-features,
html body .net-page .net-hero.mobile-recharge-hero .mobile-hero-features{box-sizing:border-box!important;display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:7px!important;width:min(670px,100%)!important;margin:18px 0 0!important;padding:7px!important;border:1px solid rgba(172,239,43,.34)!important;border-radius:16px!important;background:linear-gradient(135deg,rgba(4,10,5,.88),rgba(15,31,9,.72))!important;box-shadow:inset 0 1px rgba(255,255,255,.07),0 9px 24px rgba(0,0,0,.26),0 0 18px rgba(128,224,25,.08)!important;backdrop-filter:blur(10px)!important}
html body .mobile-recharge-hero .mobile-hero-features>span,
html body .net-page .net-hero.mobile-recharge-hero .mobile-hero-features>span{box-sizing:border-box!important;display:flex!important;align-items:center!important;justify-content:center!important;gap:7px!important;min-height:39px!important;margin:0!important;padding:5px 8px!important;border:1px solid rgba(255,255,255,.07)!important;border-radius:10px!important;background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.025))!important;color:#dce8d6!important;font-size:9px!important;font-weight:750!important;line-height:1.2!important;white-space:nowrap!important;box-shadow:none!important}
html body .mobile-recharge-hero .mobile-hero-features>span:hover,
html body .net-page .net-hero.mobile-recharge-hero .mobile-hero-features>span:hover{border-color:rgba(173,241,44,.38)!important;background:rgba(127,207,26,.11)!important}
html body .mobile-recharge-hero .mobile-hero-features b,
html body .net-page .net-hero.mobile-recharge-hero .mobile-hero-features b{display:grid!important;place-items:center!important;min-width:25px!important;height:25px!important;margin:0!important;padding:0!important;border:1px solid rgba(176,242,47,.34)!important;border-radius:8px!important;background:rgba(140,224,29,.12)!important;color:#b9f43d!important;font-size:10px!important;font-weight:900!important;box-shadow:inset 0 0 8px rgba(164,238,43,.08)!important}
@media(max-width:700px){html body .mobile-recharge-hero .mobile-hero-features,html body .net-page .net-hero.mobile-recharge-hero .mobile-hero-features{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:4px!important;margin-top:10px!important;padding:5px!important;border-radius:12px!important}html body .mobile-recharge-hero .mobile-hero-features>span,html body .net-page .net-hero.mobile-recharge-hero .mobile-hero-features>span{justify-content:flex-start!important;min-height:31px!important;padding:3px 5px!important;border-radius:8px!important;font-size:7px!important}html body .mobile-recharge-hero .mobile-hero-features b,html body .net-page .net-hero.mobile-recharge-hero .mobile-hero-features b{min-width:20px!important;height:20px!important;border-radius:6px!important;font-size:8px!important}}

/* Balanced phone hero: compact copy, consistent controls, and protected mascot space. */
@media(max-width:700px){
  html body .mobile-recharge-hero,
  html body .net-page .net-hero.mobile-recharge-hero{box-sizing:border-box!important;align-items:center!important;min-height:388px!important;padding:20px 15px!important;background-position:64% center!important}
  html body .mobile-recharge-hero::before,
  html body .net-page .net-hero.mobile-recharge-hero::before{background:linear-gradient(90deg,rgba(0,0,0,.97) 0%,rgba(0,0,0,.86) 43%,rgba(0,0,0,.38) 67%,rgba(0,0,0,.03) 100%)!important}
  html body .mobile-recharge-hero>.mobile-recharge-hero-content,
  html body .net-page .net-hero.mobile-recharge-hero>.mobile-recharge-hero-content{box-sizing:border-box!important;width:72%!important;max-width:340px!important}
  html body .mobile-recharge-hero-content>small,
  html body .net-page .net-hero.mobile-recharge-hero .mobile-recharge-hero-content>small{padding:4px 8px!important;font-size:7px!important;letter-spacing:.12em!important}
  html body .mobile-recharge-hero-content h1,
  html body .net-page .net-hero.mobile-recharge-hero .mobile-recharge-hero-content h1{max-width:100%!important;margin:9px 0 6px!important;font-size:clamp(23px,6.8vw,29px)!important;line-height:1.03!important;letter-spacing:-.045em!important}
  html body .mobile-recharge-hero-content>p,
  html body .net-page .net-hero.mobile-recharge-hero .mobile-recharge-hero-content>p{display:-webkit-box!important;max-width:270px!important;margin:0!important;overflow:hidden!important;color:#cbd7c5!important;font-size:8.5px!important;line-height:1.45!important;-webkit-box-orient:vertical!important;-webkit-line-clamp:2!important}
  html body .mobile-recharge-hero .mobile-hero-actions,
  html body .net-page .net-hero.mobile-recharge-hero .mobile-hero-actions{box-sizing:border-box!important;grid-template-columns:1fr!important;gap:6px!important;width:100%!important;margin:12px 0 0!important}
  html body .mobile-recharge-hero .mobile-hero-actions>a,
  html body .net-page .net-hero.mobile-recharge-hero .mobile-hero-actions>a{box-sizing:border-box!important;grid-template-columns:27px minmax(0,1fr)!important;gap:8px!important;width:100%!important;min-height:50px!important;padding:7px 10px!important;border-radius:12px!important}
  html body .mobile-recharge-hero .mobile-hero-actions svg,
  html body .net-page .net-hero.mobile-recharge-hero .mobile-hero-actions svg{width:24px!important;height:24px!important}
  html body .mobile-recharge-hero .mobile-hero-actions span,
  html body .net-page .net-hero.mobile-recharge-hero .mobile-hero-actions span{gap:2px!important;font-size:10px!important}
  html body .mobile-recharge-hero .mobile-hero-actions span small,
  html body .net-page .net-hero.mobile-recharge-hero .mobile-hero-actions span small{font-size:6.5px!important;letter-spacing:.03em!important}
  html body .mobile-recharge-hero .mobile-hero-features,
  html body .net-page .net-hero.mobile-recharge-hero .mobile-hero-features{box-sizing:border-box!important;width:100%!important;margin-top:8px!important;padding:4px!important}
  html body .mobile-recharge-hero .mobile-hero-features>span,
  html body .net-page .net-hero.mobile-recharge-hero .mobile-hero-features>span{min-width:0!important;min-height:28px!important;gap:4px!important;padding:2px 4px!important;overflow:hidden!important;font-size:6px!important;text-overflow:ellipsis!important}
  html body .mobile-recharge-hero .mobile-hero-features b,
  html body .net-page .net-hero.mobile-recharge-hero .mobile-hero-features b{flex:0 0 18px!important;min-width:18px!important;width:18px!important;height:18px!important;font-size:7px!important}
}
@media(max-width:390px){
  html body .mobile-recharge-hero,
  html body .net-page .net-hero.mobile-recharge-hero{min-height:374px!important;padding:17px 12px!important;background-position:67% center!important}
  html body .mobile-recharge-hero>.mobile-recharge-hero-content,
  html body .net-page .net-hero.mobile-recharge-hero>.mobile-recharge-hero-content{width:76%!important}
  html body .mobile-recharge-hero-content h1,
  html body .net-page .net-hero.mobile-recharge-hero .mobile-recharge-hero-content h1{font-size:22px!important}
}

/* Final priority: keep the premium category picker compact after legacy gallery rules. */
html body #premiumAppsView #premiumCategoryChips.premium-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important;align-items:start!important;gap:14px!important;margin:14px 0 26px!important}
html body #premiumAppsView #premiumCategoryChips .peam-cat-card{display:grid!important;grid-template-rows:auto auto!important;align-self:start!important;height:auto!important;border:1px solid #dfe8e2!important;border-radius:16px!important;background:#fff!important;box-shadow:0 6px 18px rgba(26,65,39,.07)!important}
html body #premiumAppsView #premiumCategoryChips .peam-cat-card-img{height:auto!important;min-height:0!important;aspect-ratio:16/7!important;border-radius:0!important}
html body #premiumAppsView #premiumCategoryChips .peam-cat-card-body{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;min-height:66px!important;padding:11px 12px!important}
@media(max-width:1180px){html body #premiumAppsView #premiumCategoryChips.premium-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}}
@media(max-width:780px){html body #premiumAppsView #premiumCategoryChips.premium-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important;margin:10px 0 18px!important}html body #premiumAppsView #premiumCategoryChips .peam-cat-card{border-radius:13px!important}html body #premiumAppsView #premiumCategoryChips .peam-cat-card-img{aspect-ratio:16/8!important}html body #premiumAppsView #premiumCategoryChips .peam-cat-card-body{display:block!important;min-height:58px!important;padding:9px 10px!important}html body #premiumAppsView #premiumCategoryChips .peam-cat-card-count{display:none!important}}

/* Advertisement frames use straight square corners. */
html body .ad-popup-card,
html body .ad-popup-image-button,
html body .ad-popup-image-button img,
html body .game-feed-ad,
html body .game-feed-ad img{border-radius:0!important}

/* Steam Offline storefront */
.steam-offline-page{display:grid;gap:24px;padding-top:24px;padding-bottom:70px}.steam-offline-hero{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:34px;border-radius:22px;background:linear-gradient(120deg,#07130c,#123b22 60%,#1b6735);color:#fff;box-shadow:0 18px 45px rgba(9,70,31,.2)}.steam-offline-hero small{color:#78e39a;font-weight:900;letter-spacing:2px}.steam-offline-hero h1{margin:6px 0;font-size:34px}.steam-offline-hero p{max-width:720px;margin:0;color:#c8ddcf}.steam-offline-hero>span{padding:16px 20px;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.08);font-weight:900;letter-spacing:2px}.steam-offline-head{display:flex;align-items:center;justify-content:space-between;gap:16px}.steam-offline-head h2{margin:0}.steam-offline-head p{margin:4px 0 0}.steam-offline-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:15px}.steam-game-card{overflow:hidden;border:1px solid #dae6dd;border-radius:16px;background:#fff;box-shadow:0 8px 24px rgba(25,68,39,.07)}.steam-game-image{display:grid;place-items:center;aspect-ratio:16/9;background:#10251a;color:#75dc92}.steam-game-image img{width:100%;height:100%;object-fit:cover}.steam-game-card>div{padding:14px}.steam-game-card small{color:#1ea24d;font-size:9px;font-weight:900}.steam-game-card h3{min-height:40px;margin:5px 0;font-size:14px}.steam-game-card p{margin:0;color:#7a867e;font-size:10px}.steam-game-card footer{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:13px}.steam-game-card footer strong{color:#159849;font-size:17px}.steam-game-card button,.steam-code-button{padding:9px 11px;border:0;border-radius:9px;background:#20b756;color:#fff;font:inherit;font-size:10px;font-weight:800;cursor:pointer}.steam-game-card button:disabled{background:#cbd5ce}.steam-offline-orders{display:grid;gap:14px;margin-top:18px}.steam-order-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}.steam-order-card{padding:17px;border:1px solid #dce8df;border-radius:15px;background:#fff;box-shadow:0 7px 20px rgba(24,70,38,.06)}.steam-order-card header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.steam-order-card header h3{margin:3px 0}.steam-order-card header small{color:#7c8880;font-size:8px}.steam-order-card header>span{padding:5px 8px;border-radius:999px;background:#eaf8ee;color:#178944;font-size:8px}.steam-credentials{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:13px 0}.steam-credentials label{display:grid;grid-template-columns:1fr auto;gap:4px;padding:10px;border:1px solid #e1e9e3;border-radius:10px}.steam-credentials label>strong{overflow:hidden;text-overflow:ellipsis}.steam-credentials label>button{grid-column:2;grid-row:1/3;border:0;background:transparent;color:#19984a;font-size:9px}.steam-code-result{display:grid;gap:3px;margin-top:10px;padding:12px;border-radius:10px;background:#effaf2;text-align:center}.steam-code-result strong{color:#118b3e;font-size:25px;letter-spacing:4px}.steam-code-result span,.steam-code-result small{color:#718078;font-size:9px}
@media(max-width:1000px){.steam-offline-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:700px){.steam-offline-page{padding:12px 12px 90px}.steam-offline-hero{padding:22px 18px;border-radius:16px}.steam-offline-hero h1{font-size:24px}.steam-offline-hero>span{display:none}.steam-offline-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.steam-game-card h3{font-size:12px}.steam-game-card footer{align-items:stretch;flex-direction:column}.steam-order-list{grid-template-columns:1fr}.steam-credentials{grid-template-columns:1fr}}

/* Hard reset for the cart checkout button; prevents the payment artwork expanding on mobile. */
html body #cartDrawer #checkoutButton.pay-transaction-btn{
  box-sizing:border-box!important;position:sticky!important;inset:auto!important;bottom:8px!important;display:flex!important;align-items:center!important;justify-content:center!important;width:100%!important;height:50px!important;min-height:50px!important;max-height:50px!important;margin:12px 0 0!important;padding:0 16px!important;border:1px solid #159647!important;border-radius:10px!important;background:#20b956!important;background-image:none!important;color:#fff!important;box-shadow:0 7px 18px rgba(25,153,72,.2)!important;overflow:hidden!important;transform:none!important;filter:none!important
}
html body #cartDrawer #checkoutButton.pay-transaction-btn:before,html body #cartDrawer #checkoutButton.pay-transaction-btn:after,html body #cartDrawer #checkoutButton .pay-visual,html body #cartDrawer #checkoutButton .pay-copy>svg{display:none!important;content:none!important}
html body #cartDrawer #checkoutButton .pay-copy,html body #cartDrawer #checkoutButton .pay-copy>span{position:static!important;inset:auto!important;display:block!important;width:auto!important;height:auto!important;margin:0!important;padding:0!important;color:#fff!important;font-size:14px!important;line-height:1.2!important;font-weight:800!important;text-align:center!important;text-shadow:none!important;transform:none!important;opacity:1!important}
@media(max-width:760px){html body #cartDrawer{box-sizing:border-box!important;bottom:0!important;max-height:calc(100dvh - 14px)!important;padding-bottom:88px!important;overflow-x:hidden!important;overflow-y:auto!important}html body #cartDrawer #checkoutButton.pay-transaction-btn{position:relative!important;bottom:auto!important;flex:0 0 50px!important}}
.premium-group-tabs{
  display:grid!important;
  grid-template-columns:repeat(6,minmax(0,1fr))!important;
  gap:10px!important;
  margin:14px 0 24px!important;
}
.premium-group-tab{position:relative;display:grid;grid-template-columns:36px minmax(0,1fr) auto;align-items:center;gap:9px;min-height:64px;padding:10px 11px;border:1px solid #dce8df;border-radius:14px;background:#fff;color:#26332a;text-align:left;font:inherit;cursor:pointer;transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease}
.premium-group-tab:hover{border-color:#87d99f;box-shadow:0 8px 20px rgba(28,117,57,.09);transform:translateY(-1px)}
.premium-group-tab.active{border-color:#22b958;background:linear-gradient(135deg,#effcf3,#fff);box-shadow:0 8px 22px rgba(34,185,88,.14)}
.premium-group-icon{display:grid;place-items:center;width:36px;height:36px;border-radius:11px;background:#eef8f1;color:#169346;font-size:17px;font-weight:800}
.premium-group-tab.active .premium-group-icon{background:#22b958;color:#fff}
.premium-group-tab>span:nth-child(2){display:grid;gap:2px;min-width:0}
.premium-group-tab strong{font-size:12px;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.premium-group-tab small{color:#7a877e;font-size:9px;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.premium-group-tab>b{display:grid;place-items:center;min-width:24px;height:24px;padding:0 6px;border-radius:999px;background:#edf6ef;color:#248349;font-size:9px}
.premium-group-tab.active>b{background:#d9f6e1;color:#117338}
.premium-service-page .premium-group-tabs{display:none!important}
@media(max-width:1180px){.premium-group-tabs{grid-template-columns:repeat(3,minmax(0,1fr))!important}}
@media(max-width:680px){.premium-group-tabs{display:flex!important;overflow-x:auto;gap:8px!important;margin:10px -2px 18px!important;padding:2px 2px 7px;scrollbar-width:none}.premium-group-tabs::-webkit-scrollbar{display:none}.premium-group-tab{flex:0 0 158px;min-height:58px;padding:9px;grid-template-columns:32px minmax(0,1fr) auto;border-radius:12px}.premium-group-icon{width:32px;height:32px;border-radius:9px;font-size:15px}.premium-group-tab small{display:none}}

/* Homepage summary and recommendations from the supplied storefront reference. */
html body #shopView .review-slider-section {
  display: block !important;
  margin-top: 26px !important;
  margin-bottom: 32px !important;
}

@media (min-width: 601px) {
  html body #shopView .stats-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 0 !important;
    margin: 18px 0 30px !important;
    padding: 8px !important;
    border: 2px solid #b9df8b !important;
    border-radius: 20px !important;
    background: #fff !important;
    box-shadow: 0 10px 28px rgba(60, 127, 36, .09) !important;
    overflow: hidden !important;
  }
  html body #shopView .stat-card {
    min-height: 76px !important;
    padding: 14px 18px !important;
    border: 0 !important;
    border-right: 1px solid #e0ebda !important;
    border-radius: 0 !important;
    background: #fff !important;
    box-shadow: none !important;
  }
  html body #shopView .stat-card:last-child { border-right: 0 !important; }
  html body #shopView .stat-card strong { color: #20b957 !important; font-size: 27px !important; }
  html body #shopView .stat-card .stat-icon { color: #20b957 !important; }

  html body #shopView .recommendations-head {
    align-items: center !important;
    margin: 0 0 10px !important;
    padding: 0 8px !important;
  }
  html body #shopView .recommendations-head h2 { margin: 0 !important; font-size: 20px !important; }
  html body #shopView .recommendations-head p { display: none !important; }
  html body #shopView .recommendations-head .text-link { color: #20a852 !important; font-size: 11px !important; }

  html body #shopView #recommendedProducts.recommend-box {
    min-height: 0 !important;
    margin-bottom: 30px !important;
    padding: 14px !important;
    border: 2px solid #b9df8b !important;
    border-radius: 20px !important;
    background: #fff !important;
    box-shadow: 0 10px 28px rgba(60, 127, 36, .09) !important;
    overflow: hidden !important;
  }
  html body #shopView #recommendedProducts .recommend-track {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    grid-auto-flow: row !important;
    gap: 14px !important;
    width: 100% !important;
    animation: none !important;
    transform: none !important;
  }
  html body #shopView #recommendedProducts .recommend-card {
    display: grid !important;
    grid-template-columns: 112px minmax(0, 1fr) !important;
    gap: 11px !important;
    min-width: 0 !important;
    min-height: 112px !important;
    padding: 9px !important;
    border: 1px solid #e2ece0 !important;
    border-radius: 14px !important;
    background: #fff !important;
    box-shadow: none !important;
  }
  html body #shopView #recommendedProducts .recommend-card:nth-child(n + 5) { display: none !important; }
  html body #shopView #recommendedProducts .recommend-media {
    width: 112px !important;
    height: 112px !important;
    min-height: 112px !important;
    aspect-ratio: 1 / 1 !important;
    border-radius: 11px !important;
    background: #f3f7f2 !important;
  }
  html body #shopView #recommendedProducts .recommend-media > span { display: none !important; }
  html body #shopView #recommendedProducts .recommend-body {
    justify-content: center !important;
    gap: 5px !important;
    min-width: 0 !important;
    padding: 2px 0 !important;
  }
  html body #shopView #recommendedProducts .recommend-body > strong {
    display: -webkit-box !important;
    min-height: 31px !important;
    max-height: 31px !important;
    overflow: hidden !important;
    font-size: 11px !important;
    line-height: 1.35 !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
  }
  html body #shopView #recommendedProducts .recommend-body > p,
  html body #shopView #recommendedProducts .recommend-body > small { display: none !important; }
  html body #shopView #recommendedProducts .recommend-body > b { color: #159b42 !important; font-size: 12px !important; }
  html body #shopView #recommendedProducts .recommend-body > button {
    width: max-content !important;
    min-width: 74px !important;
    min-height: 25px !important;
    padding: 5px 10px !important;
    border-radius: 999px !important;
    font-size: 8px !important;
  }
  html body #shopView #recommendedProducts .recommend-body > button svg { display: none !important; }
}

@media (max-width: 600px) {
  html body #shopView .stat-card .stat-icon {
    position: static !important;
    display: grid !important;
    place-items: center !important;
    width: 18px !important;
    height: 18px !important;
    margin: 0 auto 2px !important;
    color: #20b957 !important;
    background: #edfbf1 !important;
    border-radius: 6px !important;
  }
  html body #shopView .stat-card .stat-icon .icon {
    width: 11px !important;
    height: 11px !important;
    stroke-width: 2 !important;
  }
  html body #shopView .stat-card {
    min-height: 72px !important;
    padding-top: 6px !important;
  }
  html body #shopView .stat-card strong { margin-top: 3px !important; }
}

/* Flat premium catalog: apps are listed directly, three items per mobile row. */
html body #premiumAppsView.premium-flat-catalog #premiumCategoryChips,
html body #premiumAppsView.premium-flat-catalog #premiumBackBtn { display:none!important; }
@media(max-width:760px){
  html body #premiumAppsView.premium-service-page.premium-flat-catalog #premiumProducts:has(>.premium-card){display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:7px!important}
  html body #premiumAppsView.premium-flat-catalog .premium-card{height:210px!important;min-height:210px!important;border-radius:10px!important}
  html body #premiumAppsView.premium-flat-catalog .premium-card>.premium-card-img{height:88px!important;min-height:88px!important;max-height:88px!important}
  html body #premiumAppsView.premium-flat-catalog .premium-card>.premium-card-body{top:88px!important;bottom:28px!important;padding:7px!important}
  html body #premiumAppsView.premium-flat-catalog .premium-card-name{font-size:8px!important;line-height:1.3!important}
  html body #premiumAppsView.premium-flat-catalog .premium-card-price{left:7px!important;right:7px!important;bottom:22px!important;padding:0!important;font-size:10px!important}
  html body #premiumAppsView.premium-flat-catalog .premium-detail-line,
  html body #premiumAppsView.premium-flat-catalog .premium-card-bottom{display:none!important}
}

/* Final mobile homepage precedence. */
@media (max-width: 600px) {
  html body #shopView .home-promo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  html body #shopView .home-promo-card { min-height: 112px !important; }
  html body #shopView .home-promo-copy { min-height: 112px !important; }
}

/* Keep the nested sale-price wrapper from drawing a second pill/tab. */
html body #premiumAppsView .premium-card .premium-card-price {
  isolation: isolate !important;
  overflow: hidden !important;
}
html body #premiumAppsView .premium-card .premium-card-price > .premium-sale-price {
  box-sizing: border-box !important;
  display: flex !important;
  align-items: baseline !important;
  justify-content: center !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: hidden !important;
}
html body #premiumAppsView .premium-card .premium-card-price > .premium-sale-price::before,
html body #premiumAppsView .premium-card .premium-card-price > .premium-sale-price::after {
  content: none !important;
  display: none !important;
}

/* Premium cards on mobile: compact version of the supplied product-card UI. */
@media (max-width: 760px) {
  html body #premiumAppsView.premium-flat-catalog .premium-card {
    height: 225px !important;
    min-height: 225px !important;
    border: 1px solid #dbe7df !important;
    border-radius: 11px !important;
    background: #fff !important;
    box-shadow: 0 3px 10px rgba(31, 74, 45, .07) !important;
  }
  html body #premiumAppsView.premium-flat-catalog .premium-card > .premium-card-img {
    height: 92px !important;
    min-height: 92px !important;
    max-height: 92px !important;
    background: #f4f7f5 !important;
  }
  html body #premiumAppsView.premium-flat-catalog .premium-card > .premium-card-body {
    top: 92px !important;
    bottom: 37px !important;
    padding: 7px !important;
    background: #fff !important;
  }
  html body #premiumAppsView.premium-flat-catalog .premium-card-name {
    min-height: 21px !important;
    max-height: 21px !important;
    font-size: 7.5px !important;
    font-weight: 800 !important;
    line-height: 1.35 !important;
  }
  html body #premiumAppsView.premium-flat-catalog .premium-card-price {
    left: 7px !important;
    right: 7px !important;
    bottom: 25px !important;
    display: flex !important;
    justify-content: center !important;
    height: 27px !important;
    min-height: 27px !important;
    padding: 0 3px !important;
    border: 1px solid #bfe5ce !important;
    border-radius: 999px !important;
    background: #effaf3 !important;
    color: #09a944 !important;
    font-size: 10px !important;
    font-weight: 900 !important;
  }
  html body #premiumAppsView.premium-flat-catalog .premium-detail-line {
    left: 7px !important;
    right: 7px !important;
    bottom: 5px !important;
    display: flex !important;
    align-items: center !important;
    height: 13px !important;
    overflow: hidden !important;
    color: #34433a !important;
    font-size: 5.8px !important;
    white-space: nowrap !important;
  }
  html body #premiumAppsView.premium-flat-catalog .premium-detail-line .icon {
    width: 8px !important;
    height: 8px !important;
    margin-right: 2px !important;
  }
  html body #premiumAppsView.premium-flat-catalog .premium-card > .premium-card-bottom {
    position: absolute !important;
    left: 7px !important;
    right: 7px !important;
    bottom: 6px !important;
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    width: auto !important;
    height: 25px !important;
    padding: 0 !important;
    background: #fff !important;
  }
  html body #premiumAppsView.premium-flat-catalog .premium-stock-line {
    display: flex !important;
    align-items: center !important;
    flex: 1 1 auto !important;
    justify-content: flex-start !important;
    min-width: 0 !important;
    height: 23px !important;
    min-height: 23px !important;
    padding: 0 6px !important;
    border-radius: 999px !important;
    background: #eaf8ef !important;
    color: #16994a !important;
    font-size: 6px !important;
    white-space: nowrap !important;
  }
  html body #premiumAppsView.premium-flat-catalog .premium-card-action {
    display: grid !important;
    place-items: center !important;
    flex: 0 0 29px !important;
    width: 29px !important;
    min-width: 29px !important;
    height: 23px !important;
    min-height: 23px !important;
    margin: 0 !important;
    border: 1px solid #39bd69 !important;
    border-radius: 999px !important;
    background: #fff !important;
    color: #22a955 !important;
  }
  html body #premiumAppsView.premium-flat-catalog .premium-card-action .icon {
    width: 11px !important;
    height: 11px !important;
  }
}

/* Checkout must follow viewport width, not mouse/pointer capability. */
@media (max-width: 900px) {
  html body.premium-fullscreen.premium-detail-open {
    overflow: auto !important;
    background: linear-gradient(180deg, #f8fff9, #effbf3) !important;
  }
  html body.premium-fullscreen.premium-detail-open .site-header,
  html body.premium-fullscreen.premium-detail-open .main-nav,
  html body.premium-fullscreen.premium-detail-open .floating-cart,
  html body.premium-fullscreen.premium-detail-open .footer,
  html body.premium-fullscreen.premium-detail-open .premium-banner,
  html body.premium-fullscreen.premium-detail-open .premium-shop-head,
  html body.premium-fullscreen.premium-detail-open .premium-products-panel,
  html body.premium-fullscreen.premium-detail-open .premium-orders-panel,
  html body.premium-fullscreen.premium-detail-open .premium-selected-bar {
    display: none !important;
  }
  html body.premium-fullscreen.premium-detail-open main,
  html body.premium-fullscreen.premium-detail-open #premiumAppsView,
  html body.premium-fullscreen.premium-detail-open .premium-page,
  html body.premium-fullscreen.premium-detail-open .premium-shell,
  html body.premium-fullscreen.premium-detail-open .premium-layout {
    box-sizing: border-box !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 100svh !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    visibility: visible !important;
  }
  html body.premium-fullscreen.premium-detail-open .premium-checkout-panel {
    box-sizing: border-box !important;
    position: relative !important;
    inset: auto !important;
    z-index: 100 !important;
    display: block !important;
    visibility: visible !important;
    pointer-events: auto !important;
    width: min(100%, 520px) !important;
    max-width: 520px !important;
    min-height: 100svh !important;
    height: auto !important;
    margin: 0 auto !important;
    padding: calc(10px + env(safe-area-inset-top)) 10px calc(18px + env(safe-area-inset-bottom)) !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: linear-gradient(180deg, #fbfffc, #f2fff6) !important;
    box-shadow: none !important;
  }
  html body.premium-fullscreen.premium-detail-open .premium-selected,
  html body.premium-fullscreen.premium-detail-open .premium-buy-form {
    display: grid !important;
    visibility: visible !important;
    pointer-events: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    opacity: 1 !important;
  }
  html body.premium-fullscreen.premium-detail-open .premium-detail-close {
    display: grid !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }
}

/* Floating LINE contact: transparent icon, always available at the right edge. */
.floating-line-contact {
  position: fixed;
  z-index: 950;
  right: max(14px, env(safe-area-inset-right));
  bottom: 22px;
  width: 74px;
  height: 88px;
  pointer-events: none;
  filter: drop-shadow(0 8px 15px rgba(0, 92, 39, .2));
}
.floating-line-dismiss { position: absolute !important; width: 1px !important; height: 1px !important; opacity: 0 !important; pointer-events: none !important; }
.floating-line-contact.is-dismissed,
.floating-line-contact:has(.floating-line-dismiss:checked) { display: none !important; }
.floating-line-contact > a {
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 1px;
  width: 74px;
  color: #078b3e;
  font-size: 9px;
  font-weight: 800;
  line-height: 1;
  text-decoration: none;
  pointer-events: auto;
  transition: transform .18s ease, filter .18s ease;
}
.floating-line-contact > a:hover { transform: translateY(-3px) scale(1.03); filter: brightness(1.02); }
.floating-line-contact svg { display: block; width: 68px; height: 68px; overflow: visible; }
.floating-line-contact > a > span {
  padding: 4px 8px;
  border: 1px solid rgba(6, 199, 85, .25);
  border-radius: 999px;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 4px 10px rgba(0, 80, 35, .08);
  white-space: nowrap;
}
.floating-line-close {
  position: absolute;
  z-index: 2;
  top: -2px;
  right: 0;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 1px solid #d9e4dc;
  border-radius: 50%;
  background: #fff;
  color: #526058;
  box-shadow: 0 4px 10px rgba(22, 62, 36, .16);
  font: 700 16px/1 Arial, sans-serif;
  cursor: pointer;
  pointer-events: auto;
}
.floating-line-close:hover { color: #d63333; transform: scale(1.05); }
@media (max-width: 900px) {
  .floating-line-contact {
    right: max(8px, env(safe-area-inset-right));
    bottom: calc(82px + env(safe-area-inset-bottom));
    width: 62px;
    height: 75px;
  }
  .floating-line-contact > a { width: 62px; font-size: 8px; }
  .floating-line-contact svg { width: 58px; height: 58px; }
  .floating-line-close { top: -3px; right: -1px; width: 20px; height: 20px; font-size: 14px; }
}

/* Compact customer reviews on mobile. */
@media (max-width: 600px) {
  html body #shopView .review-slider-section {
    margin: 10px 0 16px !important;
    padding: 9px !important;
    border-radius: 14px !important;
    box-shadow: 0 8px 20px rgba(22, 163, 74, .07) !important;
  }
  html body #shopView .review-slider-head {
    align-items: center !important;
    gap: 6px !important;
    margin-bottom: 7px !important;
  }
  html body #shopView .review-slider-head span { font-size: 8px !important; }
  html body #shopView .review-slider-head strong { font-size: 12px !important; }
  html body #shopView .review-slider-track { gap: 7px !important; }
  html body #shopView .review-slide-card {
    box-sizing: border-box !important;
    width: min(238px, 66vw) !important;
    min-height: 82px !important;
    gap: 3px !important;
    padding: 8px 10px !important;
    border-radius: 11px !important;
    box-shadow: 0 5px 12px rgba(15, 118, 110, .05) !important;
  }
  html body #shopView .review-stars { font-size: 11px !important; }
  html body #shopView .review-slide-card p {
    display: -webkit-box !important;
    max-height: 29px !important;
    overflow: hidden !important;
    font-size: 9px !important;
    line-height: 1.45 !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
  }
  html body #shopView .review-slide-card small {
    display: block !important;
    overflow: hidden !important;
    font-size: 7px !important;
    line-height: 1.3 !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
  }
  html body #shopView .review-slide-card strong { font-size: 8px !important; }
}

/* Steam Offline temporarily closed for maintenance. */
body:has(#steamOfflineView.active) main {
  min-height: calc(100svh - 70px) !important;
  padding: 0 !important;
  background: #d4d6d5 !important;
}
body:has(#steamOfflineView.active) .footer,
body:has(#steamOfflineView.active) .floating-cart { display: none !important; }
#steamOfflineView.active {
  width: 100% !important;
  min-height: calc(100svh - 70px) !important;
  margin: 0 !important;
  padding: 0 !important;
}
.steam-maintenance-page {
  box-sizing: border-box;
  display: grid;
  place-items: center;
  width: 100%;
  min-height: calc(100svh - 70px);
  padding: 40px 20px;
  color: #2d3230;
  background: linear-gradient(145deg, #dedfdf 0%, #c8cbca 100%);
  text-align: center;
}
.steam-maintenance-message { max-width: 760px; }
.steam-maintenance-message > span {
  display: inline-block;
  margin-bottom: 18px;
  padding: 7px 15px;
  border: 1px solid #8d9390;
  border-radius: 999px;
  color: #555c58;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .18em;
}
.steam-maintenance-message h1 {
  margin: 0;
  color: #262b29;
  font-size: clamp(48px, 8vw, 92px);
  font-weight: 950;
  line-height: 1.05;
  letter-spacing: -.04em;
}
.steam-maintenance-message p {
  margin: 22px 0 0;
  color: #555b58;
  font-size: clamp(14px, 1.7vw, 20px);
  font-weight: 650;
  line-height: 1.7;
}
@media (max-width: 900px) {
  body:has(#steamOfflineView.active) main,
  #steamOfflineView.active,
  .steam-maintenance-page { min-height: calc(100svh - 64px) !important; }
  .steam-maintenance-page { padding: 30px 18px 96px; }
  .steam-maintenance-message > span { margin-bottom: 14px; font-size: 9px; }
  .steam-maintenance-message h1 { font-size: clamp(38px, 13vw, 58px); }
  .steam-maintenance-message p { margin-top: 16px; font-size: 12px; }
}

/* Configurable announcement ticker. */
.announcement-ticker {
  position: relative;
  z-index: 180;
  box-sizing: border-box;
  display: block;
  width: 100%;
  height: 34px;
  overflow: hidden;
  color: var(--announcement-color, #147a3d);
  background: var(--announcement-bg, #eaf8ef);
  border-top: 1px solid rgba(45, 172, 91, .16);
  border-bottom: 1px solid rgba(45, 172, 91, .22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .72);
}
.announcement-ticker-track {
  display: flex;
  align-items: center;
  width: max-content;
  height: 100%;
  animation: announcementTicker var(--announcement-speed, 40s) linear infinite;
  will-change: transform;
}
.announcement-ticker:hover .announcement-ticker-track { animation-play-state: paused; }
.announcement-ticker-track > span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 25px;
  font-size: 12px;
  font-weight: 800;
  line-height: 34px;
  white-space: nowrap;
}
.announcement-ticker-track b,
.announcement-ticker-track i { font-style: normal; font-size: 14px; }
@keyframes announcementTicker {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.announcement-settings-block { border-color: #e4e87b !important; background: linear-gradient(180deg, #fffff4, #fff) !important; }
@media (max-width: 600px) {
  .announcement-ticker { height: 29px; }
  .announcement-ticker-track > span { gap: 5px; padding: 0 17px; font-size: 9px; line-height: 29px; }
  .announcement-ticker-track b,
  .announcement-ticker-track i { font-size: 11px; }
}

/* Homepage recommendations: show real premium products, not service tiles. */
html body #shopView #recommendedProducts.recommend-box {
  box-sizing: border-box !important;
  width: 100% !important;
  padding: 18px !important;
  border: 1px solid #dbe9df !important;
  border-radius: 22px !important;
  background: #fff !important;
  box-shadow: 0 12px 34px rgba(20, 78, 38, .08) !important;
  overflow: hidden !important;
}
html body #shopView #recommendedProducts .recommend-track {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  grid-auto-flow: row !important;
  gap: 16px !important;
  width: 100% !important;
  animation: none !important;
  transform: none !important;
}
html body #shopView #recommendedProducts .recommend-product-card {
  box-sizing: border-box !important;
  display: flex !important;
  align-items: stretch !important;
  flex-direction: column !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid #e3ebe5 !important;
  border-radius: 16px !important;
  background: #fff !important;
  box-shadow: 0 6px 18px rgba(24, 76, 38, .07) !important;
  overflow: hidden !important;
}
html body #shopView #recommendedProducts .recommend-product-card:hover {
  border-color: #38c768 !important;
  box-shadow: 0 13px 27px rgba(22, 163, 74, .15) !important;
  transform: translateY(-3px) !important;
}
html body #shopView #recommendedProducts .recommend-product-card .recommend-media {
  width: 100% !important;
  min-height: 0 !important;
  aspect-ratio: 16 / 9 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #f3f6f4 !important;
  overflow: hidden !important;
}
html body #shopView #recommendedProducts .recommend-product-card .recommend-media img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  opacity: 1 !important;
  transform: none !important;
}
html body #shopView #recommendedProducts .recommend-product-card .recommend-media > span,
html body #shopView #recommendedProducts .recommend-product-card .recommend-body > p,
html body #shopView #recommendedProducts .recommend-product-card .recommend-body > small {
  display: none !important;
}
html body #shopView #recommendedProducts .recommend-product-card .recommend-body {
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  flex: 1 !important;
  flex-direction: column !important;
  gap: 10px !important;
  width: 100% !important;
  padding: 13px 12px 14px !important;
  text-align: center !important;
}
html body #shopView #recommendedProducts .recommend-product-card .recommend-body > strong {
  display: -webkit-box !important;
  min-height: 42px !important;
  max-height: 42px !important;
  margin: 0 !important;
  color: #172019 !important;
  font-size: 13px !important;
  font-weight: 850 !important;
  line-height: 1.55 !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  overflow: hidden !important;
}
html body #shopView #recommendedProducts .recommend-product-card .recommend-body > b {
  min-height: auto !important;
  color: #16a34a !important;
  font-size: 17px !important;
  line-height: 1 !important;
}
html body #shopView #recommendedProducts .recommend-product-card .recommend-body > button {
  width: auto !important;
  min-width: 96px !important;
  min-height: 34px !important;
  margin-top: auto !important;
  padding: 7px 18px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background:#35d462 !important;
  color: #fff !important;
  font-size: 12px !important;
  font-weight: 850 !important;
}
@media (max-width: 760px) {
  html body #shopView #recommendedProducts.recommend-box { padding: 9px !important; border-radius: 15px !important; }
  html body #shopView #recommendedProducts .recommend-track { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 9px !important; }
  html body #shopView #recommendedProducts .recommend-product-card:nth-child(n) { display: flex !important; }
  html body #shopView #recommendedProducts .recommend-product-card .recommend-body { gap: 7px !important; padding: 9px 7px 10px !important; }
  html body #shopView #recommendedProducts .recommend-product-card .recommend-body > strong { min-height: 34px !important; max-height: 34px !important; font-size: 10px !important; line-height: 1.6 !important; }
  html body #shopView #recommendedProducts .recommend-product-card .recommend-body > b { font-size: 13px !important; }
  html body #shopView #recommendedProducts .recommend-product-card .recommend-body > button { min-width: 78px !important; min-height: 29px !important; padding: 5px 13px !important; font-size: 9px !important; }
}

/* Prevent the out-of-stock badge from sitting behind the price pill on mobile. */
@media (max-width: 760px) {
  html body #premiumAppsView.premium-flat-catalog .premium-card .premium-soldout-badge {
    display: none !important;
    visibility: hidden !important;
  }
  html body #premiumAppsView.premium-flat-catalog .premium-card .premium-card-price {
    z-index: 3 !important;
    overflow: hidden !important;
    background-clip: padding-box !important;
  }
}

/* Clear bank/Wallet transfer flow */
html body #walletView .wallet-page-content {
  width: min(760px, calc(100% - 28px)) !important;
  margin-right: auto !important;
  margin-left: auto !important;
}

/* Compact, grouped desktop navigation */
html body header .main-nav [data-route-link="premiumApps"] {
  display: inline-flex !important;
}

.main-nav-more {
  position: relative;
  flex: 0 0 auto;
}

.main-nav-more summary {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 38px;
  padding: 8px 11px;
  border: 1px solid transparent;
  border-radius: 11px;
  color: color-mix(in srgb, var(--ink) 72%, var(--muted));
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  list-style: none;
  white-space: nowrap;
}

.main-nav-more summary::-webkit-details-marker {
  display: none;
}

.main-nav-more summary svg,
.main-nav-more-menu a svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.main-nav-more summary > span {
  margin-left: 1px;
  transition: transform .18s ease;
}

.main-nav-more[open] summary,
.main-nav-more summary:hover {
  border-color: #bbf7d0;
  background: #f0fdf4;
  color: #15803d;
}

.main-nav-more[open] summary > span {
  transform: rotate(180deg);
}

.main-nav-more-menu {
  position: absolute;
  z-index: 1200;
  top: calc(100% + 9px);
  right: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(155px, 1fr));
  gap: 6px;
  width: 340px;
  padding: 10px;
  border: 1px solid #dce9e0;
  border-radius: 14px;
  background: rgba(255, 255, 255, .98);
  box-shadow: 0 18px 45px rgba(22, 80, 42, .14);
}

.main-nav-more-menu a {
  justify-content: flex-start !important;
  min-height: 42px !important;
  padding: 9px 11px !important;
  border-radius: 10px !important;
}

.main-nav-more-menu a:last-child {
  grid-column: 1 / -1;
}

@media (max-width: 760px) {
  .main-nav-more {
    display: none;
  }
}

/* Keep the global header identical on the premium catalog route. */
@media (min-width: 901px) {
  html body.premium-fullscreen .site-header {
    height: 68px !important;
    border-bottom: 1px solid #edf1ee !important;
    background: #fff !important;
    box-shadow: 0 2px 10px rgba(30, 55, 40, .04) !important;
  }

  html body.premium-fullscreen .site-header .shell.header-inner {
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    gap: 28px !important;
    width: 100% !important;
    max-width: 1480px !important;
    height: 68px !important;
    padding: 0 20px !important;
  }

  html body.premium-fullscreen .site-header .logo {
    flex: none !important;
    min-width: 205px !important;
  }

  html body.premium-fullscreen .site-header #siteLogoText {
    color: #179447 !important;
    font-size: 18px !important;
    font-weight: 800 !important;
  }

  html body.premium-fullscreen .site-header .site-logo-image {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    max-width: 28px !important;
    max-height: 28px !important;
    margin-right: 10px !important;
    object-fit: contain !important;
    transform: none !important;
  }

  html body.premium-fullscreen .site-header .main-nav {
    display: flex !important;
    align-items: center !important;
    flex: none !important;
    gap: 25px !important;
    min-width: 0 !important;
  }

  html body.premium-fullscreen .site-header .main-nav > a {
    display: flex !important;
    align-items: center !important;
    height: auto !important;
    padding: 25px 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #4d5751 !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    white-space: nowrap !important;
    transform: none !important;
  }

  html body.premium-fullscreen .site-header .main-nav > a svg {
    display: none !important;
  }

  html body.premium-fullscreen .site-header .main-nav > a.active {
    position: relative !important;
    color: #19a653 !important;
    font-weight: 700 !important;
  }

  html body.premium-fullscreen .site-header .main-nav > a.active::after {
    content: "" !important;
    position: absolute !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    display: block !important;
    height: 3px !important;
    border-radius: 3px 3px 0 0 !important;
    background: #20b963 !important;
  }

  html body.premium-fullscreen .site-header .header-actions {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    min-width: 0 !important;
    margin-left: auto !important;
  }
}
html body #walletView .wallet-main-card {
  box-sizing: border-box !important;
  padding: 28px !important;
  border: 1px solid #dce8e0 !important;
  border-radius: 22px !important;
  box-shadow: 0 18px 46px rgba(27, 83, 43, .11) !important;
}
html body #walletView .wallet-title-copy {
  display: grid !important;
  gap: 4px !important;
}
html body #walletView .wallet-title-copy > span {
  color: #14281b !important;
  font-size: 24px !important;
  font-weight: 900 !important;
}
html body #walletView .wallet-title-copy > small {
  color: #6d7d72 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}
html body #walletView .wallet-transfer-warning {
  box-sizing: border-box !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  margin: 0 0 22px !important;
  padding: 13px 15px !important;
  border: 1px solid #c9dcff !important;
  border-radius: 13px !important;
  background: #f2f7ff !important;
  color: #27528c !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1.55 !important;
}
html body #walletView .wallet-transfer-warning svg {
  flex: 0 0 19px !important;
  width: 19px !important;
  height: 19px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.8 !important;
}
html body #walletView .wallet-method-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
}
html body #walletView .wallet-method-card {
  box-sizing: border-box !important;
  min-height: 82px !important;
  padding: 14px !important;
  border: 1px solid #dce5df !important;
  border-radius: 14px !important;
}
html body #walletView .wallet-method-card.active {
  border-color: #22b957 !important;
  background: #f1fbf4 !important;
  box-shadow: 0 0 0 2px rgba(34, 185, 87, .1) !important;
}
html body #walletView .wallet-method-card img {
  flex: 0 0 44px !important;
  width: 44px !important;
  height: 34px !important;
  object-fit: contain !important;
}
html body #walletView .wallet-method-copy {
  display: grid !important;
  min-width: 0 !important;
  gap: 3px !important;
}
html body #walletView .wallet-method-copy strong {
  color: #1a2b20 !important;
  font-size: 13px !important;
  font-weight: 850 !important;
}
html body #walletView .wallet-method-copy small {
  color: #738078 !important;
  font-size: 9px !important;
  line-height: 1.35 !important;
}
html body #walletView .wallet-receiver-preview {
  box-sizing: border-box !important;
  display: grid !important;
  justify-items: center !important;
  gap: 5px !important;
  margin: 16px 0 12px !important;
  padding: 20px 16px !important;
  border: 1px solid #cfe0d4 !important;
  border-radius: 16px !important;
  background: linear-gradient(180deg, #fbfffc, #f2faf4) !important;
  text-align: center !important;
}
html body #walletView .wallet-receiver-preview > small {
  color: #199b49 !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  letter-spacing: .08em !important;
}
html body #walletView .wallet-receiver-preview > span {
  color: #718077 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
}
html body #walletView .wallet-receiver-preview > strong {
  color: #142c1d !important;
  font-size: clamp(22px, 5vw, 31px) !important;
  font-weight: 950 !important;
  letter-spacing: .045em !important;
  line-height: 1.25 !important;
  overflow-wrap: anywhere !important;
}

html body #walletView .wallet-copy-account {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  min-height: 36px !important;
  margin: 1px 0 8px !important;
  padding: 8px 14px !important;
  border: 1px solid #b9cce5 !important;
  border-radius: 9px !important;
  background: #f4f8fe !important;
  color: #315f99 !important;
  box-shadow: none !important;
  font-size: 11px !important;
  font-weight: 800 !important;
}

html body #walletView .wallet-copy-account svg {
  width: 16px !important;
  height: 16px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.8 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

html body #walletView .wallet-copy-account:hover {
  border-color: #5279b8 !important;
  background: #eaf2fd !important;
  transform: translateY(-1px) !important;
}
html body #walletView .wallet-receiver-preview > b {
  color: #22372a !important;
  font-size: 18px !important;
  font-weight: 900 !important;
}
html body #walletView .wallet-receiver-preview > p {
  max-width: 480px !important;
  margin: 6px 0 0 !important;
  color: #65736a !important;
  font-size: 10px !important;
  line-height: 1.55 !important;
}
html body #walletView .wallet-create-transfer {
  box-sizing: border-box !important;
  width: 100% !important;
  min-height: 52px !important;
  margin-top: 14px !important;
  padding: 13px 18px !important;
  border: 0 !important;
  border-radius: 14px !important;
  background: linear-gradient(135deg, #43d75f, #20b94f) !important;
  color: #fff !important;
  box-shadow: 0 12px 26px rgba(32, 185, 79, .21) !important;
  font-size: 15px !important;
  font-weight: 900 !important;
}
html body #walletView .wallet-upload-guide {
  border-color: #d8e6dc !important;
  border-radius: 14px !important;
  background: #fbfdfb !important;
}
@media (max-width: 600px) {
  html body #walletView .wallet-page-content {
    width: calc(100% - 16px) !important;
    margin-top: -8px !important;
  }
  html body #walletView .wallet-main-card {
    padding: 17px 13px !important;
    border-radius: 17px !important;
  }
  html body #walletView .wallet-title-copy > span { font-size: 20px !important; }
  html body #walletView .wallet-method-grid {
    grid-template-columns: 1fr !important;
    gap: 9px !important;
  }
  html body #walletView .wallet-method-card {
    min-height: 67px !important;
    padding: 11px 12px !important;
  }
  html body #walletView .wallet-receiver-preview {
    margin-top: 12px !important;
    padding: 17px 10px !important;
  }
  html body #walletView .wallet-receiver-preview > strong {
    font-size: 22px !important;
    letter-spacing: .02em !important;
  }
  html body #walletView .wallet-receiver-preview > b { font-size: 16px !important; }
}

/* Wallet transfer page � simple bank-slip layout */
html body #walletView {
  background: #f4f7fb !important;
}

html body #walletView .wallet-page-header {
  display: block !important;
  padding: 0 !important;
  background: transparent !important;
}

html body #walletView .wallet-header-banner-pic {
  display: block !important;
  width: 100% !important;
}

html body #walletView .wallet-header-banner-pic img {
  width: 100% !important;
  height: auto !important;
  display: block !important;
}

html body #walletView .wallet-page-content {
  box-sizing: border-box !important;
  width: min(100% - 28px, 720px) !important;
  max-width: 720px !important;
  margin: -20px auto 60px !important;
  position: relative !important;
  z-index: 10 !important;
}

html body #walletView .wallet-main-card {
  padding: 22px 30px 34px !important;
  border: 1px solid #dbe3ec !important;
  border-radius: 18px !important;
  background: #fff !important;
  box-shadow: 0 10px 32px rgba(28, 52, 84, .08) !important;
}

html body #walletView .wallet-section-title {
  justify-content: center !important;
  margin-bottom: 18px !important;
  text-align: center !important;
}

html body #walletView .wallet-title-copy > span {
  color: #14294b !important;
  font-size: 22px !important;
  font-weight: 850 !important;
}

html body #walletView .wallet-title-copy > small {
  color: #6a7890 !important;
  font-size: 11px !important;
}

html body #walletView .wallet-transfer-warning {
  align-items: center !important;
  margin: 0 0 18px !important;
  padding: 14px 15px !important;
  border: 1px solid #d9e4f5 !important;
  border-radius: 12px !important;
  background: #f6f9fe !important;
  color: #405a83 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}

html body #walletView .wallet-input-wrapper {
  margin-bottom: 18px !important;
  padding: 15px !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 13px !important;
  background: #fafbfd !important;
}

html body #walletView .wallet-input-label,
html body #walletView .wallet-method-wrapper > span {
  color: #455872 !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}

html body #walletView .wallet-input-inner {
  min-height: 48px !important;
  border-color: #d7e0ea !important;
  border-radius: 11px !important;
  background: #fff !important;
}

html body #walletView .wallet-quick-amounts {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 7px !important;
  margin-top: 10px !important;
}

html body #walletView .wallet-amount-btn {
  min-height: 36px !important;
  border: 1px solid #dce4ed !important;
  border-radius: 9px !important;
  background: #fff !important;
  color: #40516b !important;
  font-size: 11px !important;
}

html body #walletView .wallet-amount-btn.active {
  border-color: #4f73af !important;
  background: #edf3ff !important;
  color: #234b88 !important;
  box-shadow: none !important;
}

html body #walletView .wallet-method-wrapper {
  margin-bottom: 8px !important;
}

html body #walletView .wallet-method-grid {
  gap: 9px !important;
}

html body #walletView .wallet-method-card {
  min-height: 65px !important;
  padding: 10px 12px !important;
  border-color: #dce4ed !important;
  border-radius: 11px !important;
  background: #fff !important;
  box-shadow: none !important;
}

html body #walletView .wallet-method-card.active {
  border-color: #5279b8 !important;
  background: #f3f7fd !important;
  box-shadow: 0 0 0 1px rgba(82, 121, 184, .12) !important;
}

html body #walletView .wallet-method-card > svg {
  color: #426fae !important;
}

html body #walletView .wallet-receiver-preview {
  margin: 15px 0 10px !important;
  padding: 28px 20px 24px !important;
  border: 1px solid #dce4ed !important;
  border-radius: 13px !important;
  background: #fff !important;
  box-shadow: none !important;
}

html body #walletView .wallet-receiver-preview > small {
  color: #405d89 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

html body #walletView .wallet-selected-amount {
  display: grid !important;
  justify-items: center !important;
  gap: 3px !important;
  min-width: 190px !important;
  margin: 7px 0 12px !important;
  padding: 10px 22px !important;
  border: 1px solid #cad9ed !important;
  border-radius: 12px !important;
  background: #f2f6fc !important;
}

html body #walletView .wallet-selected-amount > span {
  color: #60728e !important;
  font-size: 10px !important;
  font-weight: 750 !important;
}

html body #walletView .wallet-selected-amount > strong {
  color: #244f87 !important;
  font-size: 27px !important;
  font-weight: 900 !important;
  line-height: 1.15 !important;
}

html body #walletView .wallet-receiver-preview > span {
  margin-top: 2px !important;
  color: #60718b !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}

html body #walletView .wallet-receiver-preview > strong {
  margin: 1px 0 8px !important;
  color: #14264c !important;
  font-size: clamp(30px, 7vw, 40px) !important;
  font-weight: 600 !important;
  letter-spacing: .035em !important;
}

html body #walletView .wallet-receiver-preview > b {
  color: #14264c !important;
  font-size: 25px !important;
  font-weight: 800 !important;
}

html body #walletView .wallet-receiver-preview > p {
  max-width: 430px !important;
  margin-top: 12px !important;
  color: #64748b !important;
  font-size: 12px !important;
  line-height: 1.65 !important;
}

html body #walletView .wallet-maintenance-notice {
  margin: 0 !important;
  padding: 11px 13px !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: #f8fafc !important;
  color: #66758b !important;
  box-shadow: none !important;
  font-size: 10px !important;
  text-align: center !important;
}

html body #walletView .wallet-maintenance-notice svg {
  display: none !important;
}

html body #walletView .wallet-slip-illustration {
  display: grid !important;
  place-items: center !important;
  width: 72px !important;
  height: 72px !important;
  margin: 18px auto 4px !important;
  color: #38689e !important;
  border-radius: 14px !important;
  background: #fff !important;
}

html body #walletView .wallet-slip-illustration svg {
  width: 64px !important;
  height: 64px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.8 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

html body #walletView .wallet-slip-illustration .slip-paper {
  fill: url(#walletSlipPaper) !important;
  stroke: #9eb8dc !important;
  stroke-width: 1 !important;
}

html body #walletView .wallet-slip-illustration .slip-shadow {
  fill: #cbd8ea !important;
  opacity: .55 !important;
}

html body #walletView .wallet-slip-illustration .slip-bank-mark {
  fill: #a59add !important;
}

html body #walletView .wallet-slip-illustration .slip-bank-mark-two {
  fill: #c6a5df !important;
}

html body #walletView .wallet-slip-illustration .slip-bank-mark-three {
  fill: #9cb7e8 !important;
}

html body #walletView .wallet-slip-illustration .slip-check {
  fill: none !important;
  stroke: #fff !important;
  stroke-width: 2.1 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

html body #walletView .wallet-slip-illustration .slip-check-badge {
  fill: #315dba !important;
}

html body #walletView .wallet-slip-illustration .slip-qr {
  fill: #243c75 !important;
  stroke-width: 1.35 !important;
}

html body #walletView .wallet-slip-copy {
  display: grid !important;
  gap: 5px !important;
  justify-items: center !important;
  margin: 2px 0 14px !important;
  padding: 0 18px !important;
  text-align: center !important;
}

html body #walletView .wallet-slip-copy strong {
  color: #243d67 !important;
  font-size: 18px !important;
  font-weight: 850 !important;
}

html body #walletView .wallet-slip-copy span {
  color: #526885 !important;
  font-size: 12px !important;
  font-weight: 650 !important;
}

html body #walletView .wallet-slip-copy small {
  color: #8190a5 !important;
  font-size: 10px !important;
}

html body #walletView .wallet-create-transfer {
  position: relative !important;
  display: grid !important;
  place-items: center !important;
  gap: 4px !important;
  width: 100% !important;
  min-height: 52px !important;
  margin-top: 0 !important;
  padding: 13px 16px !important;
  border: 1.5px dashed #9db1cc !important;
  border-radius: 13px !important;
  background: #f8fafd !important;
  color: transparent !important;
  box-shadow: none !important;
  font-size: 0 !important;
}

html body #walletView .wallet-create-transfer::before {
  content: "อัปโหลดสลิป" !important;
  color: #243d67 !important;
  font-size: 18px !important;
  font-weight: 850 !important;
}

html body #walletView .wallet-create-transfer::after {
  display: none !important;
}

html body #walletView .wallet-create-transfer:hover {
  border-color: #5279b8 !important;
  background: #f0f5fc !important;
  transform: none !important;
}

html body #walletView #walletQr {
  display: none !important;
}

html body #walletView #walletQr > .wallet-upload-guide {
  display: none !important;
}

html body #walletView .wallet-pay-card {
  border: 1px solid #dce4ed !important;
  border-radius: 13px !important;
  background: #fff !important;
  box-shadow: none !important;
}

html body #walletView .wallet-pay-card > img,
html body #walletView .wallet-qr-expiry {
  display: none !important;
}

html body #walletView .wallet-pay-card {
  grid-template-columns: 1fr !important;
  justify-items: center !important;
  text-align: center !important;
}

/* The recipient and amount are already shown above; avoid repeating them after creating a deposit. */
html body #walletView #walletQr > .wallet-pay-card,
html body #walletView #walletQr > .verify-note {
  display: none !important;
}

html body #walletView #walletQr:has(.wallet-proof-form) {
  margin-top: 0 !important;
}

html body #walletView .wallet-proof-form {
  margin-top: 14px !important;
  padding: 15px !important;
  border: 1.5px dashed #9db1cc !important;
  border-radius: 13px !important;
  background: #f8fafd !important;
}

html body #walletView .wallet-proof-form .file-field {
  min-height: 76px !important;
  border: 0 !important;
  background: transparent !important;
  color: #243d67 !important;
  font-size: 16px !important;
  font-weight: 850 !important;
  text-align: center !important;
}

html body #walletView .wallet-proof-form .gold-btn {
  border-radius: 10px !important;
  background: #274e87 !important;
  box-shadow: none !important;
}

@media (max-width: 600px) {
  html body #walletView .wallet-page-content {
    width: calc(100% - 18px) !important;
    margin: 12px auto 40px !important;
  }

  html body #walletView .wallet-main-card {
    padding: 14px 12px 24px !important;
    border-radius: 14px !important;
  }

  html body #walletView .wallet-section-title {
    margin-bottom: 12px !important;
  }

  html body #walletView .wallet-title-copy > span {
    font-size: 19px !important;
  }

  html body #walletView .wallet-transfer-warning {
    padding: 11px !important;
    font-size: 11px !important;
  }

  html body #walletView .wallet-input-wrapper {
    padding: 11px !important;
  }

  html body #walletView .wallet-quick-amounts {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  html body #walletView .wallet-method-grid {
    grid-template-columns: 1fr 1fr !important;
  }

  html body #walletView .wallet-method-card {
    min-height: 76px !important;
    padding: 9px !important;
  }

  html body #walletView .wallet-method-card img {
    width: 32px !important;
    height: 27px !important;
  }

  html body #walletView .wallet-method-copy strong {
    font-size: 10px !important;
  }

  html body #walletView .wallet-method-copy small {
    display: none !important;
  }

  html body #walletView .wallet-receiver-preview {
    padding: 23px 10px 20px !important;
  }

  html body #walletView .wallet-receiver-preview > strong {
    font-size: 29px !important;
  }

  html body #walletView .wallet-receiver-preview > b {
    font-size: 21px !important;
  }

  html body #walletView .wallet-receiver-preview > p {
    font-size: 10px !important;
  }
}

/* Final loading override: prevent inherited upload text from rotating. */
html body #walletView .wallet-create-transfer.is-loading,
html body #walletView .wallet-create-transfer.is-loading:hover {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 11px !important;
  min-height: 112px !important;
  padding: 18px !important;
  border: 1.5px solid #a9c5e8 !important;
  background: linear-gradient(180deg, #f8fbff, #edf5ff) !important;
  color: transparent !important;
  opacity: 1 !important;
  cursor: wait !important;
  overflow: hidden !important;
}

html body #walletView .wallet-create-transfer.is-loading::before {
  content: "" !important;
  position: static !important;
  box-sizing: border-box !important;
  display: block !important;
  width: 34px !important;
  height: 34px !important;
  margin: 0 !important;
  border: 3px solid #c9dcf4 !important;
  border-top-color: #2e66aa !important;
  border-radius: 50% !important;
  background: transparent !important;
  animation: wallet-slip-spin .75s linear infinite !important;
}

html body #walletView .wallet-create-transfer.is-loading::after {
  content: "กำลังตรวจสอบสลิป กรุณารอสักครู่..." !important;
  position: static !important;
  display: block !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  border: 0 !important;
  color: #244c80 !important;
  font-size: 13px !important;
  font-weight: 850 !important;
  line-height: 1.5 !important;
  text-align: center !important;
  white-space: normal !important;
  animation: none !important;
}

/* Final bank wallet layout override. */
html body #walletView #walletForm.wallet-channel-flow {
  scroll-margin-top: 88px !important;
}

html body #walletView #walletForm.wallet-slip-auto-amount {
  display: block;
  width: 100% !important;
  max-width: 720px !important;
  margin: 0 auto !important;
  padding: 22px 30px 34px !important;
  border: 1px solid #d9e4ee !important;
  border-radius: 18px !important;
  background: #fff !important;
}

html body #walletView #walletForm.wallet-slip-auto-amount .wallet-channel-back {
  margin: 0 0 14px !important;
}

html body #walletView #walletForm.wallet-slip-auto-amount .wallet-section-title {
  justify-content: center !important;
  margin: 0 0 16px !important;
  text-align: center !important;
}

html body #walletView #walletForm.wallet-slip-auto-amount .wallet-title-copy {
  justify-items: center !important;
  width: 100% !important;
}

html body #walletView #walletForm.wallet-slip-auto-amount .wallet-transfer-warning {
  margin-bottom: 18px !important;
}

html body #walletView #walletForm.wallet-slip-auto-amount .wallet-method-wrapper {
  margin: 0 !important;
}

html body #walletView #walletForm.wallet-slip-auto-amount .wallet-receiver-preview {
  margin: 0 !important;
}

@media (max-width: 640px) {
  html body #walletView #walletForm.wallet-channel-flow {
    scroll-margin-top: 76px !important;
  }

  html body #walletView #walletForm.wallet-slip-auto-amount {
    padding: 16px 12px 24px !important;
    border-radius: 15px !important;
  }
}


/* --- RECOMMEND CARD OVERRIDES --- */
html body #shopView #recommendedProducts .recommend-track {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 16px !important;
  overflow: visible !important;
  padding: 0 !important;
}

@media (max-width: 900px) {
  html body #shopView #recommendedProducts .recommend-track {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

html body #shopView #recommendedProducts .recommend-card {
  display: flex !important;
  flex-direction: column !important;
  background: #ffffff !important;
  border-radius: 12px !important;
  border: 1px solid #e0e6e0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.03) !important;
  cursor: pointer !important;
  transition: transform 0.2s, box-shadow 0.2s !important;
  gap: 0 !important;
  min-height: auto !important;
}

html body #shopView #recommendedProducts .recommend-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.08) !important;
}

html body #shopView #recommendedProducts .recommend-media {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 2 / 1 !important; /* Roughly matching the banner aspect ratio */
  border-radius: 0 !important;
  background: #f0f0f0 !important;
  min-height: auto !important;
}

html body #shopView #recommendedProducts .recommend-media img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

html body #shopView #recommendedProducts .recommend-body {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  padding: 16px 12px !important;
  gap: 8px !important;
  text-align: center !important;
}

html body #shopView #recommendedProducts .recommend-body > strong {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #333333 !important;
  line-height: 1.4 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  min-height: 36px !important; /* reserve space for 2 lines */
  margin: 0 !important;
}

html body #shopView #recommendedProducts .recommend-body > b {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: #10b981 !important; /* Tailwind emerald-500 */
  margin: 4px 0 !important;
}

html body #shopView #recommendedProducts .recommend-body > button {
  background: #22c55e !important; /* Tailwind green-500 */
  color: #ffffff !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  border-radius: 20px !important;
  padding: 8px 24px !important;
  border: none !important;
  cursor: pointer !important;
  width: max-content !important;
  margin-top: 4px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
}

html body #shopView #recommendedProducts .recommend-body > button svg {
  display: none !important; /* Hide any icons in the button if there are any */
}

/* Ensure only 4 items are shown on desktop if needed, though app.js slices to 4 */
html body #shopView #recommendedProducts .recommend-card:nth-child(n+5) {
  display: none !important;
}


/* --- RECOMMEND CARD OVERRIDES V2 --- */
html body #shopView #recommendedProducts .recommend-track {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 20px !important;
}

@media (max-width: 900px) {
  html body #shopView #recommendedProducts .recommend-track {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

html body #shopView #recommendedProducts .recommend-card {
  display: flex !important;
  flex-direction: column !important;
  background: #ffffff !important;
  border-radius: 12px !important;
  border: 2px solid #22c55e !important;
  padding: 0 !important;
  overflow: hidden !important;
  box-shadow: 0 4px 12px rgba(34, 197, 94, 0.08) !important;
  cursor: pointer !important;
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s, filter 0.2s !important;
  gap: 0 !important;
}

html body #shopView #recommendedProducts .recommend-card.out-of-stock {
  border: 1px solid #e2e8f0 !important;
  box-shadow: none !important;
}

html body #shopView #recommendedProducts .recommend-media {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1 / 1 !important;
  border-radius: 0 !important;
  background: #f8fafc !important;
  min-height: auto !important;
  padding: 16px !important; /* give some space so the image doesn't touch the edges if we want, or just let object-fit do it */
}

html body #shopView #recommendedProducts .recommend-card.out-of-stock .recommend-media {
  filter: grayscale(100%) opacity(50%) !important;
}

html body #shopView #recommendedProducts .recommend-media img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important; /* based on the reference where the icon is centered */
}

html body #shopView #recommendedProducts .recommend-body {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  padding: 16px !important;
  gap: 12px !important;
  text-align: left !important;
}

html body #shopView #recommendedProducts .recommend-body > strong {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #1f2937 !important;
  line-height: 1.4 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  margin: 0 !important;
  min-height: auto !important;
}

html body #shopView #recommendedProducts .recommend-card.out-of-stock .recommend-body > strong {
  color: #9ca3af !important;
}

html body #shopView #recommendedProducts .recommend-price-pill {
  width: 100% !important;
  background: #f0fdf4 !important;
  border-radius: 20px !important;
  text-align: center !important;
  padding: 8px !important;
}

html body #shopView #recommendedProducts .recommend-card.out-of-stock .recommend-price-pill {
  background: #f8fafc !important;
}

html body #shopView #recommendedProducts .recommend-price-pill > b {
  font-size: 20px !important;
  font-weight: 700 !important;
  color: #22c55e !important; 
  margin: 0 !important;
}

html body #shopView #recommendedProducts .recommend-card.out-of-stock .recommend-price-pill > b {
  color: #9ca3af !important;
}

html body #shopView #recommendedProducts .recommend-details-link {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  font-size: 11px !important;
  color: #6b7280 !important;
}

html body #shopView #recommendedProducts .recommend-footer {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  margin-top: 4px !important;
}

html body #shopView #recommendedProducts .recommend-stock {
  background: #f0fdf4 !important;
  color: #16a34a !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  padding: 4px 12px !important;
  border-radius: 12px !important;
}

html body #shopView #recommendedProducts .recommend-card.out-of-stock .recommend-stock {
  background: #f8fafc !important;
  color: #9ca3af !important;
}

html body #shopView #recommendedProducts .recommend-view-btn {
  background: transparent !important;
  color: #22c55e !important;
  border: 1px solid #22c55e !important;
  border-radius: 20px !important;
  padding: 4px 16px !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

html body #shopView #recommendedProducts .recommend-card.out-of-stock .recommend-view-btn {
  color: #9ca3af !important;
  border-color: #e2e8f0 !important;
}

html body #shopView #recommendedProducts .recommend-card:nth-child(n+4) {
  display: none !important;
}

/* ================================================================
   PROFIT DASHBOARD � pd-* components
   ================================================================ */

.pd-page {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 0 0 40px;
  font-family: 'Noto Sans Thai', 'IBM Plex Sans Thai', sans-serif;
}

/* Loading / Error */
.pd-loading {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 12px; padding: 80px 20px;
  color: rgba(255,255,255,.5);
}
.pd-spinner {
  width: 40px; height: 40px;
  border: 3px solid rgba(129,140,248,.3);
  border-top-color: #818cf8;
  border-radius: 50%;
  animation: pd-spin .8s linear infinite;
}
@keyframes pd-spin { to { transform: rotate(360deg); } }
.pd-error { padding: 40px; text-align: center; color: #f87171; }

/* Header */
.pd-header {
  display: flex; align-items: center;
  justify-content: space-between;
  padding-bottom: 4px;
}
.pd-title {
  font-size: 1.5rem; font-weight: 700;
  background: linear-gradient(135deg, #a5b4fc, #34d399);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  margin: 0;
}
.pd-subtitle { margin: 2px 0 0; font-size: .8rem; color: rgba(255,255,255,.4); }
.pd-refresh-btn {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 16px;
  background: rgba(129,140,248,.15);
  border: 1px solid rgba(129,140,248,.3);
  border-radius: 10px;
  color: #a5b4fc;
  font-size: .85rem; cursor: pointer;
  transition: all .2s;
}
.pd-refresh-btn svg { stroke: currentColor; fill: none; stroke-width: 2; }
.pd-refresh-btn:hover { background: rgba(129,140,248,.25); border-color: #818cf8; }

/* KPI Cards */
.pd-kpi-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
}
@media (max-width: 900px) { .pd-kpi-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 500px) { .pd-kpi-grid { grid-template-columns: 1fr; } }

.pd-kpi-card {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 18px 20px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.04);
  backdrop-filter: blur(12px);
  transition: transform .2s, box-shadow .2s;
  position: relative; overflow: hidden;
}
.pd-kpi-card::before {
  content: ''; position: absolute; inset: 0;
  opacity: 0; transition: opacity .2s;
}
.pd-kpi-card:hover { transform: translateY(-2px); }
.pd-kpi-card:hover::before { opacity: 1; }

.pd-kpi-revenue { border-color: rgba(99,102,241,.3); }
.pd-kpi-revenue::before { background: linear-gradient(135deg, rgba(99,102,241,.08), transparent); }
.pd-kpi-revenue:hover { box-shadow: 0 8px 30px rgba(99,102,241,.25); }

.pd-kpi-profit { border-color: rgba(52,211,153,.3); }
.pd-kpi-profit::before { background: linear-gradient(135deg, rgba(52,211,153,.08), transparent); }
.pd-kpi-profit:hover { box-shadow: 0 8px 30px rgba(52,211,153,.25); }

.pd-kpi-orders { border-color: rgba(251,191,36,.3); }
.pd-kpi-orders::before { background: linear-gradient(135deg, rgba(251,191,36,.08), transparent); }
.pd-kpi-orders:hover { box-shadow: 0 8px 30px rgba(251,191,36,.2); }

.pd-kpi-margin { border-color: rgba(244,114,182,.3); }
.pd-kpi-margin::before { background: linear-gradient(135deg, rgba(244,114,182,.08), transparent); }
.pd-kpi-margin:hover { box-shadow: 0 8px 30px rgba(244,114,182,.2); }

.pd-kpi-icon { font-size: 2rem; line-height: 1; flex-shrink: 0; }
.pd-kpi-body { flex: 1; min-width: 0; }
.pd-kpi-label { display: block; font-size: .75rem; color: rgba(255,255,255,.5); margin-bottom: 4px; }
.pd-kpi-value {
  display: block; font-size: 1.5rem; font-weight: 700;
  color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pd-kpi-compare { font-size: .72rem; color: rgba(255,255,255,.4); margin-top: 4px; }
.pd-up { color: #34d399; font-weight: 600; }
.pd-down { color: #f87171; font-weight: 600; }

/* Generic Card */
.pd-card {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  padding: 20px;
  backdrop-filter: blur(12px);
}
.pd-card-head {
  display: flex; align-items: center;
  justify-content: space-between; margin-bottom: 14px;
}
.pd-card-head h3 { font-size: 1rem; font-weight: 700; color: #e5e7eb; margin: 0; }

/* Charts Row */
.pd-charts-row {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 14px;
}
@media (max-width: 800px) { .pd-charts-row { grid-template-columns: 1fr; } }

/* Hourly Chart */
.pd-h-stats {
  display: flex; gap: 16px; flex-wrap: wrap;
  font-size: .8rem; color: rgba(255,255,255,.6);
  margin-bottom: 10px;
}
.pd-h-chart {
  display: flex; align-items: flex-end;
  gap: 2px; height: 100px;
  padding: 0 4px;
}
.pd-h-bar-wrap {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; height: 100%; justify-content: flex-end;
  cursor: default;
}
.pd-h-bar {
  width: 100%; border-radius: 4px 4px 0 0;
  background: rgba(129,140,248,.2);
  transition: height .4s ease;
}
.pd-h-bar.pd-h-active {
  background: linear-gradient(to top, #818cf8, #a5b4fc);
  box-shadow: 0 0 8px rgba(129,140,248,.5);
}
.pd-h-bar.pd-h-now {
  background: linear-gradient(to top, #34d399, #6ee7b7) !important;
  box-shadow: 0 0 12px rgba(52,211,153,.6) !important;
}
.pd-h-label { font-size: 8px; color: rgba(255,255,255,.3); margin-top: 2px; }

/* Line Chart */
.pd-line-stats {
  display: flex; gap: 20px; font-size: .82rem; color: rgba(255,255,255,.6); margin-bottom: 6px;
}
.pd-line-stats em { font-style: normal; color: rgba(255,255,255,.4); }
.pd-line-legend { display: flex; gap: 16px; font-size: .75rem; margin-bottom: 8px; }
.pd-legend-rev { color: #818cf8; }
.pd-legend-profit { color: #34d399; }
.pd-svg-wrap { width: 100%; overflow: hidden; border-radius: 8px; }
.pd-line-chart { width: 100%; height: auto; display: block; }

/* Products table */
.pd-products-card { padding: 20px 20px 8px; }
.pd-products-head {
  flex-wrap: wrap; gap: 10px; align-items: flex-start;
}
.pd-table-controls {
  display: flex; flex-wrap: wrap; gap: 10px;
  align-items: center; flex: 1; justify-content: flex-end;
}
.pd-type-filters { display: flex; flex-wrap: wrap; gap: 6px; }
.pd-type-btn {
  padding: 5px 12px; border-radius: 20px;
  border: 1px solid rgba(255,255,255,.15);
  background: rgba(255,255,255,.05);
  color: rgba(255,255,255,.6);
  font-size: .78rem; cursor: pointer; transition: all .2s;
}
.pd-type-btn.active, .pd-type-btn:hover {
  background: rgba(129,140,248,.2);
  border-color: rgba(129,140,248,.5);
  color: #a5b4fc;
}
.pd-search-wrap {
  display: flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 10px; padding: 6px 12px;
}
.pd-search-wrap svg { stroke: rgba(255,255,255,.4); fill: none; stroke-width: 2; flex-shrink: 0; }
.pd-search {
  background: none; border: none; outline: none;
  color: #e5e7eb; font-size: .85rem; width: 180px;
}
.pd-sort-row {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  margin-bottom: 14px;
}
.pd-sort-label { font-size: .78rem; color: rgba(255,255,255,.4); }
.pd-sort-btn {
  padding: 4px 10px; border-radius: 8px;
  border: 1px solid rgba(255,255,255,.12);
  background: none; color: rgba(255,255,255,.5);
  font-size: .76rem; cursor: pointer; transition: all .2s;
}
.pd-sort-btn.active, .pd-sort-btn:hover {
  background: rgba(52,211,153,.15); border-color: rgba(52,211,153,.4);
  color: #34d399;
}
.pd-table-wrap { overflow-x: auto; }
.pd-table {
  width: 100%; border-collapse: collapse;
  font-size: .82rem;
}
.pd-table thead tr {
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.pd-table th {
  padding: 8px 12px; text-align: right;
  color: rgba(255,255,255,.4); font-weight: 600; font-size: .75rem;
  white-space: nowrap;
}
.pd-th-name { text-align: left; min-width: 220px; }
.pd-th-today, .pd-th-30d {
  background: rgba(52,211,153,.05);
  border-radius: 6px;
}
.pd-tr {
  border-bottom: 1px solid rgba(255,255,255,.05);
  cursor: pointer; transition: background .15s;
}
.pd-tr:hover { background: rgba(129,140,248,.06); }
.pd-td-name { padding: 10px 12px; text-align: left; }
.pd-td-num { padding: 10px 12px; text-align: right; white-space: nowrap; color: rgba(255,255,255,.7); }
.pd-td-today, .pd-td-30d {
  padding: 10px 12px; text-align: right;
  background: rgba(52,211,153,.03);
}
.pd-td-today strong, .pd-td-30d strong { display: block; color: #34d399; font-size: .9rem; }
.pd-td-today small, .pd-td-30d small { color: rgba(255,255,255,.35); font-size: .72rem; }
.pd-today-profit { color: #34d399 !important; }
.pd-val { color: rgba(255,255,255,.8); }
.pd-total { color: rgba(255,255,255,.5); font-size: .8rem; }
.pd-green { color: #34d399 !important; }
.pd-muted { color: rgba(255,255,255,.25) !important; }

/* Name cell */
.pd-name-wrap { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; margin-bottom: 4px; }
.pd-name-text { color: #e5e7eb; font-weight: 500; }
.pd-category { color: rgba(255,255,255,.4); font-size: .72rem; }
.pd-badge {
  font-size: .65rem; padding: 2px 7px; border-radius: 20px;
  font-weight: 600; white-space: nowrap;
}
.pd-badge-digital { background: rgba(99,102,241,.2); color: #a5b4fc; }
.pd-badge-game { background: rgba(251,191,36,.15); color: #fbbf24; }
.pd-badge-premium { background: rgba(244,114,182,.15); color: #f472b6; }
.pd-badge-steam { background: rgba(14,165,233,.15); color: #38bdf8; }

/* Margin bar */
.pd-margin-bar {
  height: 2px; background: rgba(255,255,255,.06);
  border-radius: 2px; margin-bottom: 3px;
}
.pd-margin-fill {
  height: 100%; background: linear-gradient(to right, #818cf8, #34d399);
  border-radius: 2px; transition: width .4s ease;
}
.pd-margin-txt { font-size: .67rem; color: rgba(255,255,255,.3); }

/* Empty */
.pd-empty { padding: 30px; text-align: center; color: rgba(255,255,255,.35); }

/* Modal */
.pd-modal-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(0,0,0,.7); backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  padding: 20px; animation: pd-fade-in .2s ease;
}
@keyframes pd-fade-in { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: scale(1); } }
.pd-modal {
  background: #0f172a;
  border: 1px solid rgba(129,140,248,.3);
  border-radius: 20px;
  padding: 28px;
  width: 100%; max-width: 480px;
  position: relative;
  box-shadow: 0 25px 60px rgba(0,0,0,.7), 0 0 0 1px rgba(129,140,248,.1);
  animation: pd-modal-in .25s cubic-bezier(.34,1.56,.64,1);
}
@keyframes pd-modal-in { from { opacity: 0; transform: translateY(20px) scale(.96); } to { opacity: 1; transform: none; } }
.pd-modal-close {
  position: absolute; top: 14px; right: 16px;
  background: rgba(255,255,255,.08); border: none;
  color: rgba(255,255,255,.6); border-radius: 8px;
  width: 32px; height: 32px; cursor: pointer; font-size: 1rem;
  transition: all .2s;
}
.pd-modal-close:hover { background: rgba(248,113,113,.2); color: #f87171; }
.pd-modal-header { margin-bottom: 20px; }
.pd-modal-header h3 { margin: 0 0 6px; font-size: 1.1rem; color: #f1f5f9; }
.pd-modal-type { font-size: .78rem; color: rgba(255,255,255,.4); }
.pd-modal-kpi {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 12px; margin-bottom: 20px;
}
.pd-mkpi {
  background: rgba(255,255,255,.05);
  border-radius: 12px; padding: 12px 14px;
}
.pd-mkpi span { display: block; font-size: .72rem; color: rgba(255,255,255,.4); margin-bottom: 4px; }
.pd-mkpi strong { font-size: 1.1rem; color: #e5e7eb; }
.pd-mkpi-profit { border: 1px solid rgba(52,211,153,.3); }
.pd-mkpi-profit strong { color: #34d399; }
.pd-modal-periods {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.pd-mperiod {
  padding: 14px; border-radius: 12px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.06);
  text-align: center;
}
.pd-mp-today { border-color: rgba(52,211,153,.3); background: rgba(52,211,153,.06); }
.pd-mp-7d { border-color: rgba(129,140,248,.3); background: rgba(129,140,248,.06); }
.pd-mp-30d { border-color: rgba(251,191,36,.3); background: rgba(251,191,36,.06); }
.pd-mp-total { border-color: rgba(244,114,182,.3); background: rgba(244,114,182,.06); }
.pd-mp-label { font-size: .72rem; color: rgba(255,255,255,.45); margin-bottom: 6px; }
.pd-mp-profit { font-size: 1.2rem; font-weight: 700; color: #f1f5f9; margin-bottom: 2px; }
.pd-mp-qty { font-size: .72rem; color: rgba(255,255,255,.4); }

.pd-kpi-wallet { border-color: rgba(14,165,233,.3); }
.pd-kpi-wallet::before { background: linear-gradient(135deg, rgba(14,165,233,.08), transparent); }
.pd-kpi-wallet:hover { box-shadow: 0 8px 30px rgba(14,165,233,.2); }

.pd-badge-otp { background: rgba(107,114,128,.2); color: #d1d5db; }
.pd-yellow { color: #fbbf24 !important; }
.pd-red { color: #f87171 !important; }
.pd-orders-card { margin-top: 14px; }

.pd-chart-filters { display: flex; gap: 6px; }
.pd-chart-btn {
  padding: 4px 10px; border-radius: 6px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1);
  color: rgba(255,255,255,.5); font-size: .75rem; cursor: pointer; transition: all .2s;
}
.pd-chart-btn.active, .pd-chart-btn:hover {
  background: rgba(129,140,248,.15); color: #a5b4fc; border-color: rgba(129,140,248,.4);
}

/* Admin Panel Light Theme Fixes */
.pd-page { color: #1f2937; }
.pd-header h2 { color: #111827; background: none; -webkit-text-fill-color: initial; font-weight: 800; display: flex; align-items: center; gap: 8px; }
.pd-subtitle { color: #6b7280; font-weight: 500; }
.pd-refresh-btn { background: #fff; color: #374151; border: 1px solid #d1d5db; box-shadow: 0 1px 2px rgba(0,0,0,0.05); font-weight: 600; }
.pd-refresh-btn:hover { background: #f3f4f6; color: #111827; border-color: #9ca3af; }

.pd-card, .pd-kpi-card { background: #fff; border: 1px solid #e5e7eb; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03); border-radius: 12px; }
.pd-kpi-card::before { display: none; }
.pd-kpi-card:hover { transform: translateY(-4px); box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); border-color: #d1d5db; }
.pd-kpi-value { color: #111827; font-size: 1.8rem; font-weight: 800; margin-top: 4px; }
.pd-kpi-label { color: #4b5563; font-weight: 600; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.5px; }
.pd-kpi-compare { color: #6b7280; font-weight: 500; font-size: 0.85rem; margin-top: 4px; }
.pd-kpi-icon { background: rgba(0,0,0,0.03); border-radius: 12px; padding: 12px; }

.pd-kpi-revenue .pd-kpi-icon { color: #4f46e5; background: #e0e7ff; }
.pd-kpi-profit .pd-kpi-icon { color: #059669; background: #d1fae5; }
.pd-kpi-orders .pd-kpi-icon { color: #d97706; background: #fef3c7; }
.pd-kpi-wallet .pd-kpi-icon { color: #0284c7; background: #e0f2fe; }
.pd-kpi-margin .pd-kpi-icon { color: #db2777; background: #fce7f3; }

.pd-card-head h3 { color: #1f2937; font-weight: 700; display: flex; align-items: center; gap: 8px; border-bottom: 2px solid #f3f4f6; padding-bottom: 12px; margin-bottom: 16px; }
.pd-chart-btn, .pd-type-btn { background: #fff; color: #4b5563; border: 1px solid #d1d5db; font-weight: 600; padding: 6px 12px; border-radius: 8px; box-shadow: 0 1px 2px rgba(0,0,0,0.02); }
.pd-chart-btn:hover, .pd-type-btn:hover { background: #f9fafb; color: #111827; border-color: #9ca3af; }
.pd-chart-btn.active, .pd-type-btn.active { background: #4f46e5; color: #fff; border-color: #4f46e5; box-shadow: 0 2px 4px rgba(79, 70, 229, 0.3); }
.pd-type-filters { gap: 8px; }

.pd-search-input { background: #f9fafb; border: 1px solid #d1d5db; color: #111827; border-radius: 8px; padding: 8px 12px 8px 36px; font-weight: 500; }
.pd-search-input:focus { background: #fff; border-color: #4f46e5; box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1); outline: none; }
.pd-search-wrap svg { color: #6b7280; }

.pd-table { width: 100%; border-collapse: separate; border-spacing: 0; }
.pd-table th { background: #f9fafb; color: #374151; font-weight: 700; border-bottom: 2px solid #e5e7eb; padding: 12px 16px; text-transform: uppercase; font-size: 0.8rem; letter-spacing: 0.5px; }
.pd-table td { padding: 12px 16px; border-bottom: 1px solid #f3f4f6; }
.pd-tr:hover td { background: #f8fafc; }
.pd-name-text { color: #111827; font-weight: 600; font-size: 0.95rem; }
.pd-category { color: #6b7280; font-size: 0.85rem; font-weight: 500; margin-top: 4px; }
.pd-td-num { color: #1f2937; font-weight: 600; }

.pd-badge-digital { background: #dbeafe; color: #1d4ed8; font-weight: 600; }
.pd-badge-game { background: #fef3c7; color: #b45309; font-weight: 600; }
.pd-badge-premium { background: #fce7f3; color: #be185d; font-weight: 600; }
.pd-badge-steam { background: #d1fae5; color: #047857; font-weight: 600; }
.pd-badge-otp { background: #f3f4f6; color: #374151; font-weight: 600; }
.pd-tr .pd-badge { padding: 4px 10px; border-radius: 6px; }

.pd-line-stats { border-bottom: 1px solid #f3f4f6; padding-bottom: 12px; }
.pd-line-stats span { color: #1f2937; font-weight: 700; }
.pd-line-stats em { color: #6b7280; }
.pd-legend-rev { color: #4f46e5; }
.pd-legend-profit { color: #059669; }
.pd-legend-ord { color: #d97706; }

.pd-green { color: #059669 !important; font-weight: 600; }
.pd-yellow { color: #d97706 !important; font-weight: 600; }
.pd-red { color: #dc2626 !important; font-weight: 600; }
.pd-muted { color: #9ca3af; }
.pd-empty { color: #6b7280; font-weight: 500; padding: 40px; background: #f9fafb; border-radius: 8px; border: 1px dashed #d1d5db; }

/* SVG Chart lines overrides */
.pd-line-rev { stroke: #4f46e5; }
.pd-line-prof { stroke: #10b981; }
.pd-area-rev { fill: rgba(79, 70, 229, 0.1); }
.pd-area-prof { fill: rgba(16, 185, 129, 0.1); }
.pd-dot-rev { fill: #4f46e5; stroke: #fff; }
.pd-dot-prof { fill: #10b981; stroke: #fff; }

.pd-bar-rev { background: #4f46e5; border-radius: 4px 4px 0 0; }
.pd-bar-prof { background: #10b981; border-radius: 4px 4px 0 0; }
.pd-bar-ord { background: #f59e0b; border-radius: 4px 4px 0 0; }
.pd-h-label { color: #6b7280; font-weight: 600; font-size: 0.75rem; }

/* Modal */
.pd-modal-content { background: #fff; border-radius: 16px; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); }
.pd-modal-head h3 { color: #111827; font-weight: 800; border-bottom: 1px solid #f3f4f6; }
.pd-modal-close:hover { background: #f3f4f6; color: #1f2937; }
.pd-det-card { background: #f9fafb; border: 1px solid #e5e7eb; box-shadow: none; border-radius: 12px; }
.pd-det-card strong { color: #111827; font-weight: 700; }
.pd-det-card span { color: #6b7280; }

@media (max-width: 900px) {
  .review-slider-track {
    grid-auto-columns: minmax(300px, 1fr) !important;
  }
  .review-card {
    padding: 20px !important;
  }
  .review-card p {
    font-size: 16px !important;
  }
}

/* --- Admin Fullscreen Overrides --- */
body.admin-fullscreen {
  padding: 0 !important;
  margin: 0 !important;
  background: #f9fafb !important;
  height: 100vh;
  overflow: hidden !important; /* Stop body scrolling entirely */
}
body.admin-fullscreen > main {
  padding: 0 !important;
  margin: 0 !important;
  height: 100vh;
  overflow: hidden !important;
}
body.admin-fullscreen > .main-header,
body.admin-fullscreen > .navbar,
body.admin-fullscreen > header,
body.admin-fullscreen > footer,
body.admin-fullscreen > .bottom-nav,
body.admin-fullscreen > .mobile-bottom-nav {
  display: none !important;
}
body.admin-fullscreen #adminView {
  padding: 0 !important;
  margin: 0 !important;
  height: 100vh;
  overflow: hidden !important;
}

/* --- Light Theme Admin Sidebar UI --- */
@media (min-width: 761px) {
  body.admin-fullscreen .admin-shell {
    display: flex !important;
    gap: 0; 
    align-items: flex-start;
    max-width: 100%;
    width: 100%;
    height: 100vh;
    margin: 0;
    padding: 0;
  }
  body.admin-fullscreen .page-title {
    display: none !important; 
  }
  body.admin-fullscreen #adminContent {
    flex: 1;
    min-width: 0;
    padding: 24px;
    max-width: 100%; /* removed 1200px limit so it spans nicely, or we can keep it but scroll inner */
    height: 100vh;
    overflow-y: auto; /* Main content scrolls independently here */
  }
}

.admin-sidebar {
  display: flex;
  flex-direction: column;
  width: 260px;
  flex-shrink: 0;
  background: #ffffff;
  border-right: 1px solid #e5e7eb;
  border-radius: 0;
  padding: 0 16px 30px 16px; /* Added bottom padding to prevent button cutoff */
  color: #111827;
  gap: 16px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  box-sizing: border-box; /* Fix height overflow */
}

/* Custom scrollbar for sidebar to match light theme */
.admin-sidebar::-webkit-scrollbar {
  width: 6px;
}
.admin-sidebar::-webkit-scrollbar-track {
  background: transparent;
}
.admin-sidebar::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.1);
  border-radius: 3px;
}
.admin-sidebar::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.2); 
}

.admin-sidebar-header {
  margin-bottom: 0;
  padding: 24px 8px 8px 8px; /* Top padding 24px moved here */
  position: sticky;
  top: 0;
  background: #ffffff;
  z-index: 10;
}
.admin-sidebar-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: #111827;
}
.admin-sidebar-header p {
  margin: 4px 0 0;
  font-size: 12px;
  color: #10b981; /* Green */
  font-weight: 600;
  text-transform: uppercase;
}
.admin-sidebar-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-top: 1px solid #f3f4f6;
  padding-top: 16px;
}
.admin-sidebar-title {
  font-size: 11px;
  font-weight: 600;
  color: #9ca3af;
  padding: 0 8px;
  margin-bottom: 4px;
}
.admin-sidebar button {
  display: flex;
  align-items: center;
  gap: 12px;
  background: transparent !important;
  border: none !important;
  color: #4b5563 !important;
  font-size: 14px;
  font-weight: 500;
  padding: 12px 16px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  width: 100%;
  text-align: left;
  border-left: 3px solid transparent !important;
}
.admin-sidebar button .icon {
  width: 18px !important;
  height: 18px !important;
  color: #9ca3af !important;
  transition: all 0.2s ease;
}
.admin-sidebar button:hover {
  background: #f9fafb !important;
  color: #111827 !important;
}
.admin-sidebar button:hover .icon {
  color: #6b7280 !important;
}
.admin-sidebar button.active {
  background: rgba(16, 185, 129, 0.08) !important; /* Light Green tint */
  color: #10b981 !important;
  border-left-color: #10b981 !important;
  border-radius: 0 8px 8px 0 !important;
}
.admin-sidebar button.active .icon {
  color: #10b981 !important;
}

.admin-sidebar-logout {
  margin-top: auto;
  background: #fff !important;
  color: #ef4444 !important; /* Red for logout */
  border: 1px solid #fee2e2 !important;
  border-left: none !important;
  border-radius: 8px !important;
  justify-content: center;
  
  /* Sticky to bottom */
  position: sticky;
  bottom: 0;
  z-index: 10;
  margin-bottom: 24px;
}
/* A pseudo element to create a solid white background covering the 24px bottom space */
.admin-sidebar-logout::after {
  content: "";
  position: absolute;
  top: 100%;
  left: -16px;
  right: -16px;
  height: 24px;
  background: #ffffff;
  pointer-events: none;
}
.admin-sidebar-logout:hover {
  background: #fef2f2 !important;
  color: #dc2626 !important;
}
.admin-sidebar-logout .icon {
  color: currentColor !important;
}

@media (max-width: 760px) {
  .admin-sidebar {
    display: flex !important;
    position: fixed !important;
    top: 0;
    left: -280px;
    height: 100vh;
    background: #fff;
    z-index: 2000;
    transition: left 0.3s ease;
    box-shadow: 4px 0 24px rgba(0,0,0,0.15);
  }
  .admin-sidebar.open {
    left: 0;
  }
}

/* Custom Topup UI Overrides */

.custom-kbank-box {
  padding: 16px 0;
  margin-top: 16px;
  text-align: center;
}

.ckb-bank-name {
  font-size: 14px;
  color: #64748b;
  margin-bottom: 8px;
}

.ckb-account-number {
  font-size: 28px;
  font-weight: 700;
  color: #0f172a;
  letter-spacing: 2px;
  margin-bottom: 8px;
}

.ckb-account-name {
  font-size: 16px;
  font-weight: 600;
  color: #1e293b;
  margin-bottom: 12px;
}

.ckb-instruction {
  font-size: 13px;
  color: #94a3b8;
}

.custom-promptpay-box {
  background: #eef2ff;
  border-radius: 12px;
  padding: 24px 16px 16px;
  margin-top: 16px;
  text-align: center;
  border: 1px solid #c7d2fe;
}

.cpp-header {
  font-size: 14px;
  font-weight: 700;
  color: #3730a3;
  margin-bottom: 16px;
}

.cpp-amount-box {
  background: #e0e7ff;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 20px;
}

.cpp-amount-label {
  display: block;
  font-size: 12px;
  color: #4f46e5;
  margin-bottom: 4px;
}

.cpp-amount-value {
  display: block;
  font-size: 24px;
  font-weight: 700;
  color: #312e81;
}

.cpp-account-box {
  margin-bottom: 16px;
}

.cpp-acc-label {
  display: block;
  font-size: 12px;
  color: #4f46e5;
  margin-bottom: 8px;
}

.cpp-acc-number {
  display: block;
  font-size: 26px;
  font-weight: 700;
  color: #1e1b4b;
  letter-spacing: 1px;
  margin-bottom: 12px;
}

.cpp-copy-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: transparent;
  border: 1px solid #818cf8;
  border-radius: 20px;
  color: #4338ca;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  margin-bottom: 20px;
  transition: all 0.2s;
}

.cpp-copy-btn:hover {
  background: #e0e7ff;
}

.cpp-acc-name-label {
  display: block;
  font-size: 12px;
  color: #4f46e5;
  margin-bottom: 4px;
}

.cpp-acc-name-value {
  display: block;
  font-size: 18px;
  font-weight: 700;
  color: #1e1b4b;
  margin-bottom: 16px;
}

.cpp-instruction {
  font-size: 12px;
  color: #6366f1;
  line-height: 1.5;
  max-width: 280px;
  margin: 0 auto;
}

.cpp-truemoney-note {
  background: #e0e7ff;
  border-radius: 8px;
  padding: 12px;
  font-size: 11px;
  color: #4338ca;
  line-height: 1.5;
}


/* === TrueMoney Angpao UI Premium Redesign === */
.angpao-premium-card {
  background: linear-gradient(145deg, #ffffff, #fdf6ec);
  border: 1px solid rgba(245, 158, 11, 0.4);
  border-radius: 20px;
  padding: 24px;
  margin-top: 12px;
  box-shadow: 0 10px 25px -5px rgba(245, 158, 11, 0.1), 0 8px 10px -6px rgba(245, 158, 11, 0.05);
  position: relative;
  overflow: hidden;
}

.angpao-premium-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; width: 100%; height: 6px;
  background: linear-gradient(90deg, #f59e0b, #f97316, #ef4444);
}

.angpao-premium-header {
  text-align: center;
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px dashed rgba(245, 158, 11, 0.3);
}

.angpao-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 12px;
  background: rgba(245, 158, 11, 0.1);
  padding: 6px 14px;
  border-radius: 30px;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}

.angpao-brand img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.angpao-brand span {
  font-size: 12px;
  font-weight: 800;
  color: #b45309;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.angpao-amount-display {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 4px;
  color: #92400e;
}

.angpao-amount-display .currency {
  font-size: 20px;
  font-weight: 700;
  color: #f59e0b;
}

.angpao-amount-display h3 {
  margin: 0;
  font-size: 42px;
  font-weight: 900;
  letter-spacing: -0.02em;
}

.ref-text {
  font-size: 12px;
  color: #a16207;
  margin: 8px 0 0 0;
  opacity: 0.8;
}

.angpao-premium-steps {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 24px;
}

.step-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.8);
  transition: all 0.2s ease;
}

.step-item:hover {
  transform: translateY(-2px);
  background: #fff;
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.08);
}

.step-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: linear-gradient(135deg, #fde68a, #fcd34d);
  color: #92400e;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: inset 0 -2px 0 rgba(0,0,0,0.05);
}

.step-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.step-content strong {
  font-size: 14px;
  color: #78350f;
}

.step-content span {
  font-size: 13px;
  color: #57534e;
  line-height: 1.4;
}

.highlight-amt {
  color: #d97706;
  background: #fef3c7;
  padding: 2px 6px;
  border-radius: 4px;
}

.input-glow-wrapper {
  position: relative;
  margin-bottom: 12px;
}

.link-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: #b45309;
}

.input-glow-wrapper input {
  width: 100%;
  padding: 16px 16px 16px 44px;
  border: 2px solid rgba(245, 158, 11, 0.3);
  border-radius: 14px;
  font-size: 15px;
  background: #fff;
  color: #1c1917;
  transition: all 0.3s ease;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.02);
}

.input-glow-wrapper input:focus {
  outline: none;
  border-color: #f59e0b;
  box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.15);
}

.premium-submit-btn {
  width: 100%;
  padding: 16px;
  border-radius: 14px;
  border: none;
  background:#f59e0b;
  color: white;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.2s ease;
  box-shadow: 0 4px 14px rgba(234, 88, 12, 0.3);
}

.premium-submit-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(234, 88, 12, 0.4);
}

.premium-submit-btn:active {
  transform: translateY(0);
}

.angpao-premium-warning {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
  padding: 12px;
  border-radius: 10px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #b91c1c;
  font-size: 12px;
}

.angpao-premium-warning svg {
  flex-shrink: 0;
  stroke: #dc2626;
}

/* ============================================
   ANGPAO FULLCARD UI - New Premium Redesign
   ============================================ */
.angpao-fullcard {
  background: linear-gradient(145deg, #1a1a2e, #16213e, #0f3460);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.35), 0 0 0 1px rgba(255,121,0,0.2);
  margin: 0 auto;
  max-width: 480px;
  position: relative;
}

.angpao-fullcard::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, #ff7900, #ffb300, #ff7900);
  background-size: 200%;
  animation: shimmer-bar 3s linear infinite;
}

@keyframes shimmer-bar {
  0% { background-position: 0% }
  100% { background-position: 200% }
}

.angpao-fullcard-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 24px 20px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.angpao-fullcard-brand {
  display: flex;
  align-items: center;
  gap: 14px;
}

.angpao-brand-img {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  object-fit: contain;
  background: rgba(255,255,255,0.1);
  padding: 6px;
}

.angpao-fullcard-brand h3 {
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 2px;
}

.angpao-fullcard-brand span {
  font-size: 12px;
  color: rgba(255,255,255,0.55);
  letter-spacing: 0.5px;
}

.angpao-fullcard-badge {
  background: linear-gradient(135deg, #17984b, #22c55e);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 30px;
  letter-spacing: 0.5px;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(34,197,94,0.35);
}

/* Steps */
.angpao-steps {
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.angpao-step {
  display: flex;
  align-items: center;
  gap: 14px;
}

.angpao-step-num {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff7900, #ffb300);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(255,121,0,0.35);
}

.angpao-step-text {
  font-size: 14px;
  color: rgba(255,255,255,0.75);
  line-height: 1.4;
}

.angpao-step-text strong {
  color: #fff;
  font-weight: 600;
}

/* Link Input Section */
.angpao-link-section {
  padding: 20px 24px 0;
}

.angpao-link-label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: #ffb300;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.angpao-link-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.angpao-link-icon {
  position: absolute;
  left: 14px;
  width: 18px;
  height: 18px;
  color: rgba(255,255,255,0.4);
  flex-shrink: 0;
  pointer-events: none;
}

.angpao-link-input {
  width: 100%;
  background: rgba(255,255,255,0.07);
  border: 1.5px solid rgba(255,255,255,0.12);
  border-radius: 14px;
  padding: 14px 14px 14px 42px;
  font-size: 14px;
  color: #fff;
  outline: none;
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
  box-sizing: border-box;
}

.angpao-link-input::placeholder {
  color: rgba(255,255,255,0.3);
  font-size: 13px;
}

.angpao-link-input:focus {
  border-color: #ff7900;
  background: rgba(255,121,0,0.08);
  box-shadow: 0 0 0 3px rgba(255,121,0,0.15);
}

.angpao-link-hint {
  margin: 10px 0 0;
  font-size: 12px;
  color: rgba(255,255,255,0.45);
  line-height: 1.5;
}

/* Submit Button */
.angpao-submit-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: calc(100% - 48px);
  margin: 20px 24px;
  padding: 16px;
  background:#ff7900;
  color: #fff;
  border: none;
  border-radius: 14px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: 0.5px;
  box-shadow: 0 6px 20px rgba(255,121,0,0.4);
  transition: all 0.25s ease;
  position: relative;
  overflow: hidden;
}

.angpao-submit-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.15), transparent);
  pointer-events: none;
}

.angpao-submit-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(255,121,0,0.5);
}

.angpao-submit-btn:active {
  transform: translateY(0);
  box-shadow: 0 4px 12px rgba(255,121,0,0.4);
}

/* Warning */
.angpao-warn {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 24px 24px;
  padding: 12px 16px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  font-size: 12px;
  color: rgba(255,255,255,0.5);
  line-height: 1.4;
}

.angpao-warn svg {
  flex-shrink: 0;
  color: rgba(255,255,255,0.4);
}

/* Mobile */
@media (max-width: 480px) {
  .angpao-fullcard {
    border-radius: 18px;
  }
  .angpao-fullcard-header { padding: 18px 18px 16px; }
  .angpao-steps { padding: 16px 18px; }
  .angpao-link-section { padding: 16px 18px 0; }
  .angpao-submit-btn { width: calc(100% - 36px); margin: 16px 18px; }
  .angpao-warn { margin: 0 18px 18px; }
}

/* Angpao Success Card */
.angpao-success-card {
  background: linear-gradient(145deg, #0f2027, #203a43, #2c5364);
  border-radius: 20px;
  padding: 40px 24px;
  text-align: center;
  border: 1px solid rgba(34,197,94,0.3);
  box-shadow: 0 0 30px rgba(34,197,94,0.1);
  max-width: 480px;
  margin: 16px auto 0;
}
.angpao-success-icon {
  margin-bottom: 16px;
}
.angpao-success-card h3 {
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 8px;
}
.angpao-success-card p {
  color: rgba(255,255,255,0.7);
  font-size: 14px;
  margin: 4px 0;
}
.angpao-success-note {
  color: #22c55e !important;
  font-weight: 600 !important;
  margin-top: 12px !important;
}
.angpao-ref {
  font-size: 11px !important;
  color: rgba(255,255,255,0.4) !important;
  margin-top: 12px !important;
  font-family: monospace;
}

/* Angpao Premium UI Enhancements */
.angpao-premium-card {
  background: linear-gradient(135deg, #ffffff 0%, #fff9f0 100%);
  border: 1px solid #ffcc80;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(255, 121, 0, 0.15);
  margin-top: 16px;
  position: relative;
}
.angpao-premium-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 6px;
  background: linear-gradient(90deg, #ff7900, #ff5100);
}
.angpao-header {
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  border-bottom: 1px dashed #ffdcb3;
}
.angpao-icon-wrapper {
  background: linear-gradient(135deg, #ff7900, #ff5100);
  border-radius: 12px;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(255, 121, 0, 0.3);
}
.angpao-title h4 {
  margin: 0;
  font-size: 1.1rem;
  color: #1f2937;
  font-weight: 700;
}
.angpao-title p {
  margin: 4px 0 0;
  font-size: 0.85rem;
  color: #666;
}
.angpao-body {
  padding: 20px;
}
.angpao-input-group {
  position: relative;
}
.angpao-input {
  width: 100%;
  padding: 14px 16px;
  border: 2px solid #ffcc80;
  border-radius: 12px;
  font-size: 1rem;
  color: #333;
  transition: all 0.3s ease;
  background: #fff;
  box-sizing: border-box;
}
.angpao-input:focus {
  outline: none;
  border-color: #ff7900;
  box-shadow: 0 0 0 4px rgba(255, 121, 0, 0.1);
}
.angpao-alert-message {
  margin-top: 16px;
  padding: 12px 16px;
  background: #fff4e6;
  border-radius: 8px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 0.85rem;
  color: #c25900;
  line-height: 1.4;
}
.angpao-alert-message svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}
.angpao-footer {
  padding: 12px 20px;
  background: #fafafa;
  text-align: right;
  border-top: 1px solid #eee;
}
.fee-badge {
  display: inline-block;
  padding: 4px 10px;
  background: #ecfdf5;
  color: #059669;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: 20px;
}

/* --- Live Recent Purchases Marquee --- */
.recent-purchases-container {
  margin-top: 24px;
  background: linear-gradient(135deg, #f0fdf4 0%, #ffffff 100%);
  padding: 20px 0;
  border-radius: 16px;
  margin-bottom: 24px;
  overflow: hidden;
  border: 1px solid #dcfce7;
  box-shadow: 0 4px 12px rgba(20, 147, 64, 0.05);
}
.recent-purchases-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 24px;
  margin-bottom: 16px;
}
.recent-purchases-title {
  color: #166534;
  font-size: 1.25rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 10px;
}
.recent-purchases-subtitle {
  color: #15803d;
  font-size: 0.85rem;
}
.live-badge {
  background: #dcfce7;
  color: #16a34a;
  border: 1px solid #86efac;
  padding: 2px 10px;
  border-radius: 16px;
  font-size: 0.75rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.live-badge::before {
  content: '';
  width: 6px;
  height: 6px;
  background: #16a34a;
  border-radius: 50%;
  animation: pulse-live 1.5s infinite;
}
@keyframes pulse-live {
  0% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.2); }
  100% { opacity: 1; transform: scale(1); }
}
.recent-purchases-marquee {
  width: 100%;
  overflow: hidden;
  position: relative;
  white-space: nowrap;
}
.recent-purchases-track {
  display: inline-flex;
  gap: 16px;
  padding: 0 24px;
  animation: marquee-scroll 80s linear infinite;
}
.recent-purchases-track:hover {
  animation-play-state: paused;
}
@keyframes marquee-scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.recent-order-card {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  background-color: #fff;
  border: 1px solid #e5e7eb;
  box-shadow: 0 2px 4px rgba(0,0,0,0.02);
  padding: 12px 20px;
  border-radius: 12px;
  min-width: 280px;
}
.recent-order-icon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  object-fit: cover;
  background: #f3f4f6;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #111827;
  font-weight: bold;
}
.recent-order-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.recent-order-product {
  font-weight: 600;
  color: #111827;
  font-size: 0.95rem;
}
.recent-order-user {
  font-size: 0.85rem;
  color: #6b7280;
  display: flex;
  align-items: center;
  gap: 6px;
}
.recent-order-user svg {
  width: 12px;
  height: 12px;
  fill: currentColor;
}
.recent-order-time {
  font-size: 0.75rem;
  color: #9ca3af;
  margin-left: auto;
}


/* Mobile admin fix */
@media(max-width:760px) {
  body.admin-fullscreen #adminView {
    overflow-y: auto !important;
  }
}

@media (max-width: 760px) {
  .admin-sidebar {
    height: 100dvh !important;
    padding-bottom: 100px !important;
  }
}

/* Desktop sidebar menu overrides */
.desktop-menu-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 8px;
  color: #1a1a1a;
  margin-right: 4px;
}
.desktop-menu-btn:hover {
  background: rgba(0,0,0,0.05);
  border-radius: 8px;
}
.main-nav {
  display: none !important;
}
@media (max-width: 950px) {
  .desktop-menu-btn {
    display: none;
  }
}


/* Global Mobile Sidebar Override (for Desktop use) */
#mobileSidebar {
  position: fixed !important;
  z-index: 3000 !important;
  inset: 0 !important;
  display: block !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
#mobileSidebar.open {
  visibility: visible !important;
  pointer-events: auto !important;
}
body.mobile-sidebar-open {
  overflow: hidden !important;
}
#mobileSidebar .mobile-sidebar-backdrop {
  position: absolute !important;
  inset: 0 !important;
  background: rgba(8,15,11,0.58) !important;
  opacity: 0 !important;
  transition: opacity 0.25s ease !important;
}
#mobileSidebar.open .mobile-sidebar-backdrop {
  opacity: 1 !important;
}
#mobileSidebar .mobile-sidebar-content {
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  width: min(84vw, 330px) !important;
  padding: 0 12px 24px !important;
  background: #fff !important;
  color: #111813 !important;
  box-shadow: 12px 0 35px rgba(0,0,0,0.28) !important;
  overflow-y: auto !important;
  transform: translateX(-105%) !important;
  transition: transform 0.28s cubic-bezier(0.22,0.8,0.24,1) !important;
}
#mobileSidebar.open .mobile-sidebar-content {
  transform: translateX(0) !important;
}
#mobileSidebar .mobile-sidebar-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 2 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  height: 68px !important;
  margin: 0 -12px 12px !important;
  padding: 0 16px !important;
  border-bottom: 1px solid #e3ebe5 !important;
  background: #fff !important;
}
#mobileSidebar .mobile-sidebar-header > div {
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
}
#mobileSidebar .sidebar-brand-mark {
  display: grid !important;
  place-items: center !important;
  width: 24px !important;
  height: 24px !important;
  border-radius: 7px !important;
  background: #16a34a !important;
  color: #fff !important;
  font-size: 13px !important;
}
#mobileSidebar .mobile-sidebar-header strong {
  font-size: 16px !important;
  color: #111813 !important;
}
#mobileSidebar .mobile-sidebar-nav {
  display: grid !important;
  gap: 5px !important;
}
#mobileSidebar .mobile-sidebar-divider {
  height: 1px !important;
  margin: 10px 5px !important;
  background: #e3ebe5 !important;
}
#mobileSidebar .mobile-nav-link {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 12px 16px !important;
  border-radius: 12px !important;
  color: #3f4e44 !important;
  text-decoration: none !important;
  font-size: 14px !important;
  transition: background 0.2s !important;
}
#mobileSidebar .mobile-nav-link:hover {
  background: rgba(22,163,74,0.08) !important;
  color: #16a34a !important;
}
#mobileSidebar .mobile-nav-link svg {
  width: 20px !important;
  height: 20px !important;
  opacity: 0.7 !important;
}


/* Hide horizontal nav globally with high specificity */
html body .main-nav, html body header .main-nav {
  display: none !important;
}

/* Global CSS for the sidebar close button */
#mobileSidebarClose {
  display: grid !important;
  place-items: center !important;
  width: 36px !important;
  height: 36px !important;
  padding: 0 !important;
  border: 1px solid rgba(255,255,255,0.25) !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: #fff !important;
  cursor: pointer !important;
}
#mobileSidebarClose svg {
  width: 18px !important;
  height: 18px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2 !important;
  stroke-linecap: round !important;
}

/* Light theme close button overrides */
html[data-theme="light"] #mobileSidebarClose,
#mobileSidebarClose {
  border-color: #d7e3da !important;
  background: #f8faf8 !important;
  color: #111813 !important;
}
html[data-theme="light"] #mobileSidebarClose svg,
#mobileSidebarClose svg {
  stroke: #111813 !important;
}
html[data-theme="light"] #mobileSidebarClose:hover,
#mobileSidebarClose:hover {
  border-color: #16a34a !important;
  background: #f0faf3 !important;
  color: #16a34a !important;
}
html[data-theme="light"] #mobileSidebarClose:hover svg,
#mobileSidebarClose:hover svg {
  stroke: #16a34a !important;
}

body:has(#rewardItemsModal:not(.hidden)) .mobile-bottom-nav { display: none !important; }

/* New Dark Sidebar Theme */
#mobileSidebar .mobile-sidebar-content, #mobileSidebar .mobile-sidebar-header {
  background: #1f1f1f !important;
  color: #fff !important;
  border-bottom: 1px solid #333 !important;
}
#mobileSidebar .mobile-sidebar-nav.new-dark-theme {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  padding: 16px !important;
}
#mobileSidebar .mobile-sidebar-nav.new-dark-theme .mobile-nav-link {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  padding: 14px 20px !important;
  border-radius: 8px !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  border: none !important;
  background: transparent !important;
}
#mobileSidebar .mobile-sidebar-nav.new-dark-theme .mobile-nav-link svg {
  fill: #a0a0a0 !important;
  stroke: none !important;
}
#mobileSidebar .mobile-sidebar-nav.new-dark-theme .mobile-nav-link:hover, 
#mobileSidebar .mobile-sidebar-nav.new-dark-theme .mobile-nav-link.active {
  background: #16a34a !important;
  color: #ffffff !important;
}
#mobileSidebar .mobile-sidebar-nav.new-dark-theme .mobile-nav-link:hover svg, 
#mobileSidebar .mobile-sidebar-nav.new-dark-theme .mobile-nav-link.active svg {
  fill: #ffffff !important;
}
#mobileSidebar .mobile-sidebar-nav.new-dark-theme .mobile-sidebar-divider {
  background: #333 !important;
  height: 1px !important;
  margin: 8px 0 !important;
}

/* Mobile Sidebar Profile Widget */
#mobileSidebarProfileWidget {
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-bottom: 1px solid #333;
}
.msp-user-card {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}
.msp-user-avatar svg {
  width: 44px;
  height: 44px;
  fill: #a0a0a0;
  border-radius: 50%;
  background: #333;
}
.msp-user-name {
  flex: 1;
  font-weight: 700;
  font-size: 16px;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.msp-caret {
  width: 24px;
  height: 24px;
  fill: #fff;
}
.msp-country-card {
  background: #1a1a1a;
  border: 1px solid #2a2a2a;
  border-radius: 6px;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.msp-flag {
  font-size: 18px;
}
.msp-country-text {
  font-weight: 700;
  color: #fff;
}
.msp-coin-card {
  background: #1a1a1a;
  border: 1px solid #2a2a2a;
  border-radius: 6px;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}
.msp-coin-icon svg {
  width: 36px;
  height: 36px;
}
.msp-coin-details {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.msp-coin-val {
  font-weight: 800;
  color: #4ade80;
  font-size: 18px;
  line-height: 1.1;
}
.msp-coin-lbl {
  font-size: 12px;
  color: #fff;
  font-weight: 700;
}
.msp-arrow {
  width: 24px;
  height: 24px;
  fill: #777;
  background: #2a2a2a;
  border-radius: 50%;
  padding: 4px;
}

/* ===== Premium Category Grid (App Style) ===== */
#premiumAppsView #premiumProducts:has(> .peam-cat-card) {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 14px !important;
  padding: 4px 0 !important;
}
#premiumAppsView .peam-cat-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  background: #1a1a1a !important;
  border: 1px solid #2a2a2a !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  cursor: pointer !important;
  transition: transform .18s, box-shadow .18s !important;
  text-align: left !important;
  padding: 0 !important;
  height: auto !important;
  box-shadow: 0 4px 16px rgba(0,0,0,.3) !important;
}
#premiumAppsView .peam-cat-card:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 8px 28px rgba(0,0,0,.45) !important;
}
#premiumAppsView .peam-cat-card .peam-cat-card-img {
  width: 100% !important;
  aspect-ratio: 1/1 !important;
  background: #111 !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 0 !important;
  height: auto !important;
  min-height: 0 !important;
}
#premiumAppsView .peam-cat-card .peam-cat-card-img img {
  width: 80% !important;
  height: 80% !important;
  object-fit: contain !important;
  display: block !important;
}
#premiumAppsView .peam-cat-card .peam-cat-placeholder {
  font-size: 22px !important;
  font-weight: 900 !important;
  color: #fff !important;
  text-align: center !important;
  opacity: .7 !important;
}
#premiumAppsView .peam-cat-card .peam-cat-card-body {
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
  padding: 12px 12px 14px !important;
  min-height: 0 !important;
  background: transparent !important;
}
#premiumAppsView .peam-cat-card .peam-cat-name {
  display: block !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  color: #fff !important;
  text-transform: uppercase !important;
  letter-spacing: .3px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
#premiumAppsView .peam-cat-card .peam-cat-price {
  display: block !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #4ade80 !important;
}
#premiumAppsView .peam-cat-card .peam-cat-count {
  display: inline-block !important;
  margin-top: 5px !important;
  background: #16a34a !important;
  color: #fff !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  padding: 3px 10px !important;
  border-radius: 20px !important;
  width: fit-content !important;
}

@media (max-width: 600px) {
  #premiumAppsView #premiumProducts:has(> .peam-cat-card) {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 10px !important;
  }
  #premiumAppsView .peam-cat-card .peam-cat-name {
    font-size: 11px !important;
  }
  #premiumAppsView .peam-cat-card .peam-cat-price {
    font-size: 10px !important;
  }
  #premiumAppsView .peam-cat-card .peam-cat-count {
    font-size: 10px !important;
    padding: 2px 7px !important;
  }
  #premiumAppsView .peam-cat-card .peam-cat-card-body {
    padding: 8px !important;
  }
}

/* ===== Premium Category Grid v2 - App Icon Style ===== */
#premiumAppsView #premiumProducts:has(> .peam-cat-card) {
  display: grid !important;
  grid-template-columns: repeat(6, 1fr) !important;
  gap: 12px !important;
  padding: 8px 0 16px !important;
  align-items: start !important;
}

#premiumAppsView .peam-cat-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  background: #111418 !important;
  border: 1px solid #1f2428 !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  cursor: pointer !important;
  transition: transform .15s ease, box-shadow .15s ease !important;
  text-align: left !important;
  padding: 0 !important;
  height: auto !important;
  box-shadow: 0 4px 20px rgba(0,0,0,.5) !important;
  -webkit-tap-highlight-color: transparent !important;
}
#premiumAppsView .peam-cat-card:hover {
  transform: translateY(-4px) scale(1.02) !important;
  box-shadow: 0 12px 32px rgba(0,0,0,.7) !important;
  border-color: #2a3a2e !important;
}
#premiumAppsView .peam-cat-card:active {
  transform: scale(.97) !important;
}

/* Image area — square, icon centered */
#premiumAppsView .peam-cat-card .peam-cat-card-img {
  position: relative !important;
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  background: #1a1e22 !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
}
#premiumAppsView .peam-cat-card .peam-cat-card-img img {
  width: 72% !important;
  height: 72% !important;
  object-fit: contain !important;
  display: block !important;
  border-radius: 14px !important;
}
#premiumAppsView .peam-cat-card .peam-cat-placeholder {
  font-size: 18px !important;
  font-weight: 900 !important;
  color: #4ade80 !important;
  text-align: center !important;
  letter-spacing: 1px !important;
}

/* Body below image */
#premiumAppsView .peam-cat-card .peam-cat-card-body {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  padding: 10px 10px 12px !important;
  background: transparent !important;
  min-height: 0 !important;
  flex: 1 !important;
}

/* App name */
#premiumAppsView .peam-cat-card .peam-cat-name {
  display: block !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  text-transform: uppercase !important;
  letter-spacing: .5px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  line-height: 1.3 !important;
}

/* Starting price */
#premiumAppsView .peam-cat-card .peam-cat-price {
  display: block !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #4ade80 !important;
  line-height: 1.2 !important;
}

/* Package count button */
#premiumAppsView .peam-cat-card .peam-cat-count {
  display: inline-block !important;
  margin-top: 6px !important;
  background: #14532d !important;
  color: #4ade80 !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  padding: 3px 10px !important;
  border-radius: 20px !important;
  width: fit-content !important;
  letter-spacing: .2px !important;
}

/* Responsive */
@media (max-width: 900px) {
  #premiumAppsView #premiumProducts:has(> .peam-cat-card) {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 10px !important;
  }
}
@media (max-width: 600px) {
  #premiumAppsView #premiumProducts:has(> .peam-cat-card) {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
    padding: 4px 0 12px !important;
  }
  #premiumAppsView .peam-cat-card {
    border-radius: 14px !important;
  }
  #premiumAppsView .peam-cat-card .peam-cat-card-img img {
    width: 68% !important;
    height: 68% !important;
    border-radius: 10px !important;
  }
  #premiumAppsView .peam-cat-card .peam-cat-name {
    font-size: 9px !important;
  }
  #premiumAppsView .peam-cat-card .peam-cat-price {
    font-size: 10px !important;
  }
  #premiumAppsView .peam-cat-card .peam-cat-count {
    font-size: 9px !important;
    padding: 2px 7px !important;
  }
  #premiumAppsView .peam-cat-card .peam-cat-card-body {
    padding: 7px 8px 9px !important;
  }
}

/* ===== FORCE OVERRIDE: Premium Category App Icon Grid ===== */
html body #premiumAppsView #premiumProducts:has(> .peam-cat-card) {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 12px !important;
  padding: 8px 0 20px !important;
  align-items: stretch !important;
}
html body #premiumAppsView #premiumProducts > .peam-cat-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  width: 140px !important;
  background: #111418 !important;
  border: 1px solid #1f2428 !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  cursor: pointer !important;
  transition: transform .15s, box-shadow .15s !important;
  text-align: left !important;
  padding: 0 !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  box-shadow: 0 4px 16px rgba(0,0,0,.5) !important;
}
html body #premiumAppsView #premiumProducts > .peam-cat-card:hover {
  transform: translateY(-3px) scale(1.03) !important;
  box-shadow: 0 10px 28px rgba(0,0,0,.7) !important;
}
html body #premiumAppsView #premiumProducts > .peam-cat-card .peam-cat-card-img {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  background: #1a1e24 !important;
  overflow: hidden !important;
  border-radius: 0 !important;
  padding: 0 !important;
}
html body #premiumAppsView #premiumProducts > .peam-cat-card .peam-cat-card-img img {
  display: block !important;
  width: 70% !important;
  height: 70% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important;
  object-position: center !important;
  border-radius: 12px !important;
}
html body #premiumAppsView #premiumProducts > .peam-cat-card .peam-cat-placeholder {
  font-size: 16px !important;
  font-weight: 900 !important;
  color: #4ade80 !important;
}
html body #premiumAppsView #premiumProducts > .peam-cat-card .peam-cat-card-body {
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
  padding: 8px 10px 10px !important;
  min-height: 0 !important;
  background: transparent !important;
}
html body #premiumAppsView #premiumProducts > .peam-cat-card .peam-cat-name {
  display: block !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  color: #fff !important;
  text-transform: uppercase !important;
  letter-spacing: .4px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  line-height: 1.3 !important;
}
html body #premiumAppsView #premiumProducts > .peam-cat-card .peam-cat-price {
  display: block !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  color: #4ade80 !important;
  line-height: 1.2 !important;
}
html body #premiumAppsView #premiumProducts > .peam-cat-card .peam-cat-count {
  display: inline-block !important;
  margin-top: 5px !important;
  background: #14532d !important;
  color: #4ade80 !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  padding: 2px 9px !important;
  border-radius: 20px !important;
  width: fit-content !important;
}

@media (max-width: 1024px) {
html body #premiumAppsView #premiumProducts:has(> .peam-cat-card) {
    gap: 9px !important;
  }
}
@media (max-width: 480px) {
  html body #premiumAppsView #premiumProducts:has(> .peam-cat-card) {
    gap: 8px !important;
  }
  html body #premiumAppsView #premiumProducts > .peam-cat-card {
    width: 105px !important;
  }
  html body #premiumAppsView #premiumProducts > .peam-cat-card .peam-cat-name {
    font-size: 9px !important;
  }
  html body #premiumAppsView #premiumProducts > .peam-cat-card .peam-cat-price {
    font-size: 9px !important;
  }
}

/* ===== LIGHT THEME OVERRIDE: Premium Category App Icon Grid ===== */
html body #premiumAppsView #premiumProducts > .peam-cat-card {
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.04), 0 4px 16px rgba(0,0,0,.02) !important;
}
html body #premiumAppsView #premiumProducts > .peam-cat-card:hover {
  transform: translateY(-3px) scale(1.02) !important;
  box-shadow: 0 10px 24px rgba(34, 197, 94, 0.12), 0 4px 10px rgba(0,0,0,.04) !important;
  border-color: #86efac !important;
}
html body #premiumAppsView #premiumProducts > .peam-cat-card .peam-cat-card-img {
  background: #f8fafc !important;
  border-bottom: 1px solid #f1f5f9 !important;
}
html body #premiumAppsView #premiumProducts > .peam-cat-card .peam-cat-card-img img {
  border-radius: 12px !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.06) !important;
}
html body #premiumAppsView #premiumProducts > .peam-cat-card .peam-cat-placeholder {
  color: #22c55e !important;
}
html body #premiumAppsView #premiumProducts > .peam-cat-card .peam-cat-name {
  color: #1e293b !important;
}
html body #premiumAppsView #premiumProducts > .peam-cat-card .peam-cat-price {
  color: #16a34a !important;
}
html body #premiumAppsView #premiumProducts > .peam-cat-card .peam-cat-count {
  background: #dcfce7 !important;
  color: #15803d !important;
}

/* ===== FIX BACK BUTTON VISIBILITY ===== */
html body #premiumAppsView.premium-flat-catalog #premiumBackBtn:not(.hidden) {
  display: flex !important;
}
html body #premiumAppsView #premiumProducts { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important; gap: 12px !important; align-items: start !important; justify-content: center !important; }

/* ==== GRID FALLBACK ==== */
html body #premiumAppsView .premium-cat-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 14px !important;
    width: 100% !important;
    align-items: start !important;
}
@media (max-width: 1000px) {
    html body #premiumAppsView .premium-cat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
@media (max-width: 700px) {
    html body #premiumAppsView .premium-cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

html body #premiumAppsView .premium-item-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 14px !important;
    width: 100% !important;
    align-items: start !important;
}
@media (max-width: 1000px) {
    html body #premiumAppsView .premium-item-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 600px) {
    html body #premiumAppsView .premium-item-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; }
}

/* ==== GRID FIX OVERRIDE (FLEXBOX) ==== */
html body #premiumAppsView .premium-cat-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 14px !important;
    padding: 8px 0 20px !important;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: background 0.2s;
}
.premium-notification-ack:hover {
    background: #d32f2f;
}
.premium-notification-close-btn {
    width: 100%;
    background: transparent;
    color: #777;
    border: none;
    padding: 10px;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
}
.premium-notification-close-btn:hover {
    color: #333;
}

/* Admin Styles */
.admin-pn-layout {
    display: flex;
    gap: 20px;
    background: #1a1a1a;
    border-radius: 12px;
    overflow: hidden;
    min-height: 500px;
}
.admin-pn-sidebar {
    width: 250px;
    background: #222;
    padding: 20px;
    border-right: 1px solid #333;
}
.admin-pn-sidebar h3 {
    margin: 0 0 16px 0;
    font-size: 16px;
    color: #ddd;
}
.admin-pn-cat-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.admin-pn-cat-btn {
    background: #333;
    color: #eee;
    border: 1px solid #444;
    padding: 10px 12px;
    border-radius: 8px;
    text-align: left;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
}
.admin-pn-cat-btn:hover {
    background: #444;
}
.admin-pn-cat-btn.selected {
    background: #d4af37;
    color: #000;
    border-color: #d4af37;
    font-weight: bold;
}
.admin-pn-cat-btn span {
    font-size: 12px;
    color: #4caf50;
}
.admin-pn-cat-btn.selected span {
    color: #004d00;
}
.admin-pn-editor {
    flex: 1;
    padding: 20px;
    background: #1a1a1a;
}
.admin-empty-state {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    color: #777;
    font-size: 16px;
}
.admin-pn-editor form label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-weight: 500;
    color: #ccc;
    font-size: 14px;
    margin-bottom: 12px;
}
.admin-pn-editor form input, .admin-pn-editor form textarea {
    background: #2a2a2a;
    border: 1px solid #444;
    color: #fff;
    padding: 10px;
    border-radius: 8px;
}
.admin-pn-editor .form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.admin-pn-editor .toggle-row {
    flex-direction: row;
    align-items: center;
    gap: 12px;
    background: #222;
    padding: 12px;
    border-radius: 8px;
}
.pn-prods-section {
    background: #222;
    padding: 16px;
    border-radius: 12px;
    margin-bottom: 20px;
    border: 1px solid #333;
}
.pn-prods-section h4 {
    margin: 0;
    color: #eee;
}
.pn-prod-row {
    display: grid;
    grid-template-columns: 2fr 2fr 1.5fr auto;
    gap: 10px;
    background: #2a2a2a;
    padding: 12px;
    border-radius: 8px;
    align-items: center;
}
.pn-prod-row input {
    margin: 0;
}

/* Custom Desktop Navigation (Light/Brown Theme) */
.site-header { background: #ffffff !important; border-top: 4px solid #5d4037 !important; border-bottom: 1px solid #e0e0e0 !important; }
.site-header .logo strong { color: #16a34a !important; display: block !important; }
.site-header .logo .site-logo-image { height: 48px !important; }
.site-header .main-nav a { display: inline-flex !important; align-items: center !important; gap: 6px !important; color: #333333 !important; font-weight: 500 !important; background: transparent !important; padding: 8px 12px !important; }
.site-header .main-nav a svg { stroke: #666666 !important; fill: none !important; }
.site-header .main-nav a:hover, .site-header .main-nav a.active { color: #16a34a !important; }
.site-header .main-nav a:hover svg, .site-header .main-nav a.active svg { stroke: #16a34a !important; }

@media (max-width: 760px) { .site-header .main-nav { display: none !important; } .site-header .mobile-menu-btn { display: flex !important; align-items: center; justify-content: center; color: #333333 !important; stroke: #333333 !important; } .site-header .logo strong { color: #16a34a !important; display: block !important; } }
@media (min-width: 761px) { .site-header .mobile-menu-btn { display: none !important; } }

/* V3 FIXED CATEGORY GRID OVERRIDE */
html body #premiumAppsView #premiumProducts:has(> .peam-cat-card) {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)) !important;
    gap: 12px !important;
    padding: 10px 0 !important;
    align-items: stretch !important;
}
html body #premiumAppsView #premiumProducts > .peam-cat-card {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 140px !important;
    border-radius: 12px !important;
    border: 1px solid #dce6df !important;
    padding: 12px !important;
    gap: 8px !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: center !important;
    background: #fff !important;
    box-sizing: border-box !important;
}
html body #premiumAppsView #premiumProducts > .peam-cat-card .peam-cat-card-img {
    width: 64px !important;
    height: 64px !important;
    min-width: 64px !important;
    border-radius: 14px !important;
    background: #f4fbf6 !important;
    display: grid !important;
    place-items: center !important;
    margin: 0 auto !important;
    overflow: hidden !important;
}
html body #premiumAppsView #premiumProducts > .peam-cat-card .peam-cat-card-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}
html body #premiumAppsView #premiumProducts > .peam-cat-card .peam-cat-card-body {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 0 !important;
    min-height: 0 !important;
    flex: 1 !important;
    width: 100% !important;
}
html body #premiumAppsView #premiumProducts > .peam-cat-card .peam-cat-card-text {
    text-align: center !important;
    width: 100% !important;
}
html body #premiumAppsView #premiumProducts > .peam-cat-card .peam-cat-card-text strong {
    font-size: 13px !important;
    margin: 0 0 2px 0 !important;
    display: block !important;
}
html body #premiumAppsView #premiumProducts > .peam-cat-card .peam-cat-card-text small {
    font-size: 10px !important;
    color: #6d786f !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}
html body #premiumAppsView #premiumProducts > .peam-cat-card .peam-cat-card-count {
    margin-top: auto !important;
    font-size: 9px !important;
    padding: 4px 8px !important;
    border-radius: 8px !important;
    background: #eaf7ee !important;
    color: #128640 !important;
}

@media(max-width: 700px) {
    html body #premiumAppsView #premiumProducts:has(> .peam-cat-card) {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 8px !important;
    }
}
@media(max-width: 500px) {
    html body #premiumAppsView #premiumProducts:has(> .peam-cat-card) {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    html body #premiumAppsView #premiumProducts > .peam-cat-card {
        padding: 10px !important;
    }
    html body #premiumAppsView #premiumProducts > .peam-cat-card .peam-cat-card-img {
        width: 54px !important;
        height: 54px !important;
        min-width: 54px !important;
    }
}


/* --- Premium Notification Modal (Redesigned) --- */
.premium-notification-modal {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.75); z-index: 10000;
    display: flex; justify-content: center; align-items: center;
    backdrop-filter: blur(5px); padding: 16px; box-sizing: border-box;
}
.premium-notification-modal.hidden { display: none; }
.premium-notification-content {
    background: #fff; width: 100%; max-width: 440px; max-height: 92vh;
    border-radius: 20px; padding: 0; position: relative;
    box-shadow: 0 20px 60px rgba(0,0,0,0.4);
    animation: pnPopIn 0.3s cubic-bezier(0.34,1.56,0.64,1);
    color: #333; display: flex; flex-direction: column; overflow: hidden;
}
@keyframes pnPopIn {
    from { opacity: 0; transform: scale(0.92) translateY(16px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}
.pn-scrollable-body {
    overflow-y: auto; padding: 20px 22px 0 22px; flex: 1;
    scrollbar-width: thin; scrollbar-color: #ddd transparent;
}
.pn-scrollable-body::-webkit-scrollbar { width: 4px; }
.pn-scrollable-body::-webkit-scrollbar-thumb { background: #ddd; border-radius: 4px; }
.pn-footer-fixed { padding: 14px 22px 20px 22px; background: #fff; border-top: 1px solid #f0f0f0; }
.premium-notification-close {
    position: absolute; top: 14px; right: 14px; background: rgba(0,0,0,0.07);
    border: none; width: 30px; height: 30px; border-radius: 50%;
    display: flex; justify-content: center; align-items: center;
    cursor: pointer; color: #555; transition: all 0.2s; z-index: 2;
}
.premium-notification-close svg { width: 16px; height: 16px; }
.premium-notification-close:hover { background: rgba(0,0,0,0.13); color: #111; }
.premium-notification-header {
    display: flex; justify-content: space-between; align-items: flex-start;
    margin-bottom: 18px; padding-right: 24px; margin-top: 4px;
}
.premium-notification-title-wrap { flex: 1; min-width: 0; }
.pn-alert-badge {
    display: inline-flex; align-items: center; gap: 5px;
    background: #fff0f0; color: #d32f2f; padding: 4px 10px 4px 8px;
    border-radius: 20px; font-size: 12.5px; font-weight: 600; margin-bottom: 10px;
    max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pn-alert-badge svg { width: 14px; height: 14px; flex-shrink: 0; }
.premium-notification-title-wrap h2 { font-size: 22px; font-weight: 800; margin: 0 0 5px 0; color: #111; line-height: 1.25; }
.premium-notification-title-wrap p { font-size: 14px; color: #777; margin: 0; }
.pn-icon-wrapper { position: relative; width: 60px; height: 60px; flex-shrink: 0; margin-left: 12px; }
.premium-notification-icon { width: 60px; height: 60px; border-radius: 14px; object-fit: cover; box-shadow: 0 4px 14px rgba(0,0,0,0.15); display: block; }
.pn-icon-alert {
    position: absolute; bottom: -5px; right: -5px; background: #e53935; color: #fff;
    width: 20px; height: 20px; border-radius: 50%; display: flex;
    justify-content: center; align-items: center; font-weight: bold; font-size: 13px; border: 2px solid #fff; line-height: 1;
}
.premium-notification-warning {
    background: #fff5f5; border: 1.5px solid #ffe0e0; border-radius: 12px;
    padding: 14px 16px; display: flex; gap: 12px; align-items: flex-start; margin-bottom: 16px;
}
.premium-notification-warning svg { flex-shrink: 0; margin-top: 1px; width: 20px; height: 20px; }
.premium-notification-warning p { margin: 0; font-size: 13.5px; color: #333; line-height: 1.65; word-break: break-word; }
.premium-notification-products { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.pn-product-item {
    border: 1.5px solid #efefef; border-radius: 12px; padding: 11px 14px;
    display: flex; align-items: center; gap: 14px; background: #fafafa; transition: border-color 0.2s;
}
.pn-product-item:hover { border-color: #e0e0e0; }
.pn-product-icon { position: relative; width: 44px; height: 44px; border-radius: 50%; display: flex; justify-content: center; align-items: center; flex-shrink: 0; background: #fff0f0; overflow: hidden; }
.pn-calendar-badge { position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); font-size: 10px; font-weight: 800; color: #d32f2f; line-height: 1; }
.pn-product-info { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.pn-product-info strong { font-size: 15px; font-weight: 700; color: #111; margin-bottom: 2px; }
.pn-product-info span { font-size: 12.5px; color: #888; }
.pn-product-right { display: flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 600; color: #e53935; flex-shrink: 0; white-space: nowrap; }
.premium-notification-contact { display: flex; align-items: center; background: #f8f9fa; border-radius: 12px; padding: 12px 14px; margin-bottom: 18px; gap: 10px; }
.pn-contact-left { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.pn-contact-texts { display: flex; flex-direction: column; }
.pn-contact-texts > span { font-size: 13px; color: #555; line-height: 1.4; }
.premium-notification-line { display: inline-flex; align-items: center; gap: 5px; color: #06C755; text-decoration: none; font-weight: 700; font-size: 14px; margin-top: 3px; }
.premium-notification-line:hover { text-decoration: underline; }
.pn-qr-img { width: 64px; height: 64px; border-radius: 8px; border: 1px solid #e0e0e0; object-fit: contain; flex-shrink: 0; display: block; background: #fff; }
.pn-actions { display: flex; flex-direction: column; gap: 8px; }
.premium-notification-ack {
    width: 100%; background: #e53935; color: #fff; border: none; padding: 14px;
    border-radius: 12px; font-size: 16px; font-weight: 700;
    display: flex; justify-content: center; align-items: center; gap: 8px;
    cursor: pointer; transition: background 0.18s, transform 0.1s; letter-spacing: 0.3px;
}
.premium-notification-ack:hover { background: #c62828; }
.premium-notification-ack:active { transform: scale(0.98); }
.premium-notification-close-btn { width: 100%; background: transparent; color: #888; border: none; padding: 9px; font-size: 14.5px; font-weight: 500; cursor: pointer; transition: color 0.15s; }
.premium-notification-close-btn:hover { color: #333; }