/* Original portal structure, scoped to its renderer. Existing form handlers and
   transaction confirmations remain owned by the application. The source-ratio
   section below follows the current /trade/index and /trade/rechargeIndex CSS. */
.classic-base { color: #305f55; background: #579d8c; font: 14px/1.4 Arial, sans-serif; max-width: 480px; min-height: 80dvh; margin: auto; padding-bottom: env(safe-area-inset-bottom); }
.classic-base *, .classic-base *::before, .classic-base *::after { box-sizing: border-box; }
.classic-base button, .classic-base input, .classic-base select { font: inherit; }
.classic-base button { touch-action: manipulation; }
.classic-base-header { position: relative; text-align: center; min-height: 155px; padding: 22px 70px 12px; background: #68ad92 url('/images/classic/bg-top.jpg') center top/cover; }
.classic-base-header h1 { margin: 0 0 5px; font-size: 24px; font-weight: 600; line-height: 1.25; letter-spacing: 0; color: #fff4aa; }
.classic-base-account { margin: 0 0 11px; color: #366e5b; font-size: 14px; }
.classic-base-account strong { color: #fff9b4; font-weight: 700; overflow-wrap: anywhere; }
.classic-base-header-actions { position: absolute; top: 10px; inset-inline: 10px; display: flex; justify-content: space-between; pointer-events: none; }
.classic-base-header-actions > * { pointer-events: auto; }
.classic-base-settings, .classic-base-mail { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid #caefd4; border-radius: 50%; background: #def4d526; color: #d6f8dc; font-size: 23px !important; padding: 0; }
.classic-base-header-actions button:disabled { opacity: .65; }
.classic-base-shortcuts { display: flex; justify-content: center; align-items: center; gap: 12px; }
.classic-base-vip { border: 1px solid #fff0a0; border-radius: 18px; min-width: 79px; min-height: 33px; background: linear-gradient(#f6e988, #e9c85a); color: #c77c26; font-size: 19px !important; font-weight: 700 !important; }
.classic-base-history-button { border: 1px solid #d4efe0; border-radius: 16px; background: #71b997; color: #f1fff4; padding: 6px 15px; min-height: 33px; }
.classic-base-history-button[aria-pressed="true"] { background: #e5f6e9; color: #3d8766; }
.classic-base-announcement { display: flex; align-items: center; height: 27px; background: #fff; padding-inline: 9px; }
.classic-base-announcement img { display: block; object-fit: contain; }
.classic-base-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; background: #dcece4; }
.classic-base-tabs button { border: 0; border-inline-end: 1px solid #d2e1da; border-bottom: 3px solid transparent; background: #e6eee9; color: #839a8e; min-width: 0; min-height: 43px; padding: 8px 3px; font-size: 13px; font-weight: 700; }
.classic-base-tabs button:last-child { border-inline-end: 0; }
.classic-base-tabs button[aria-pressed="true"] { background: #fff; color: #388966; border-bottom-color: #388966; }
.classic-base-page-title { display: grid; grid-template-columns: 48px 1fr 48px; align-items: center; min-height: 43px; background: #70b39b; }
.classic-base-page-title h2 { color: #fff; font-size: 19px; font-weight: 700; text-align: center; margin: 0; }
.classic-base-back { background: transparent; border: 0; color: #d9ffe5; font-size: 34px !important; min-height: 40px; line-height: 1 !important; }
.classic-base-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; padding: 9px 10px 3px; }
.classic-base-recharge, .classic-base-actions .button { border: 1px solid #fbefa2; border-radius: 18px; background: linear-gradient(#fff2a2, #eac757); color: #bb7827; padding: 6px 20px; min-height: 34px; font-weight: 700; }
.classic-base-products { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; padding: 10px; align-items: start; }
.classic-base-product { position: relative; min-width: 0; overflow: hidden; border: 2px solid #dcefe0; border-radius: 8px; background: #edf6e8; box-shadow: 0 1px 1px #2c63461a; text-align: center; }
.classic-base-product > label, .classic-base-product.is-stock { display: flex; flex-direction: column; align-items: stretch; }
.classic-base-product > label { cursor: pointer; min-height: 185px; padding: 0 0 8px; }
.classic-base-product-choice { position: absolute; opacity: 0; width: 1px; height: 1px; inset: 5px auto auto 5px; }
.classic-base-product:has(.classic-base-product-choice:focus-visible) { outline: 3px solid #f7d94c; outline-offset: 2px; }
.classic-base-product.is-selected, .classic-base-product:has(.classic-base-product-choice:checked) { border-color: #ffe576; box-shadow: 0 0 0 1px #b58d38; }
.classic-base-product:has(.classic-base-product-choice:disabled) { opacity: .65; }
.classic-base-product:has(.classic-base-product-choice:disabled) > label { cursor: not-allowed; }
.classic-base-product-name { display: block; min-height: 29px; padding: 5px 4px; background: #dbeecb; color: #65955b; font-size: 13px; font-weight: 700; overflow-wrap: anywhere; }
.classic-base-artwork { display: grid; place-items: center; min-width: 0; min-height: 81px; padding: 8px 6px 3px; }
.classic-base-artwork img { display: block; width: auto; height: auto; max-width: 100%; max-height: 123px; object-fit: contain; margin: 0 auto; }
.classic-base-artwork .product-artwork, .classic-base-artwork .product-image { width: auto; height: auto; max-width: 100%; }
.classic-base-artwork .product-image-unavailable { font-size: 11px; }
.classic-base-artwork-missing { display: grid; place-items: center; width: 100%; min-height: 80px; color: #8ba591; font-size: 25px; }
.classic-base-nominal { display: block; padding: 4px 6px; color: #bc891e; font-weight: 700; overflow-wrap: anywhere; }
.classic-base-stock { display: block; padding: 4px 6px 7px; color: #65995c; font-size: 13px; }
.classic-base-stock strong { color: #d78c3d; }
.classic-base-price { display: block; padding: 4px 5px 0; color: #cf862d; font-weight: 700; font-size: 19px; overflow-wrap: anywhere; }
.classic-base-original-price { color: #96a38f; font-size: 12px; padding: 0 6px; }
.classic-base-send { border: 0; margin: 0 8px 8px; border-radius: 13px; background: #cee2c9; color: #758f69; min-height: 28px; padding: 2px 5px; }
.classic-base-products.is-gift .classic-base-product { background: #f5f0df; border-color: #ede4c7; }
.classic-base-products.is-gift .classic-base-product-name { background: #e5d9a6; color: #967328; }
.classic-base-products.is-gift .classic-base-artwork img { max-height: 140px; }
.classic-base-products.is-coin .classic-base-product { background: #edf5cc; }
.classic-base-products.is-coin .classic-base-artwork { padding: 0; }
.classic-base-products.is-coin .classic-base-artwork img { max-height: 150px; width: 100%; }
.classic-base-game, .classic-base-bet { display: block; color: #587a51; padding: 2px 5px; font-size: 12px; }
.classic-base-reward { display: grid; gap: 1px; background: #e0edd6; padding: 4px; color: #68914e; }
.classic-base-reward small { font-size: 10px; }
.classic-base-reward strong { font-size: 12px; overflow-wrap: anywhere; }
.classic-base-products.is-slot .classic-base-product-name { color: #997939; background: #e8ddba; }
.classic-base-products.is-slot .classic-base-artwork { min-height: 95px; }
.classic-base-products.is-slot .classic-base-artwork img { max-height: 100px; }
.classic-base-notice, .classic-base-unavailable, .classic-base-empty { padding: 10px 12px; margin: 0; font-size: 12px; color: #eaffeb; }
.classic-base-notice .notice { margin: 0; }
.classic-base-unavailable { color: #f5f3cf; }
.classic-base-empty h2 { font-size: 17px; color: #fff; }
.classic-base-empty p { margin: 0; }
.classic-base-filters { padding: 9px 10px 0; }
.classic-base-history { padding: 13px 10px; }
.classic-base-history > h2 { text-align: center; color: #e6ffd9; font-size: 18px; }
.classic-base-history .table-wrap { border-radius: 8px; overflow: auto; background: #fff; }
.classic-base-history table { width: 100%; color: #507261; }
.classic-base-history th, .classic-base-history td { padding: 10px 7px; }
.classic-base-history tbody tr:nth-child(even) { background: #f3f6f1; }
.classic-base-history input, .classic-base-history select { min-width: 0; max-width: 100%; border-radius: 20px; }
.classic-base-form { margin: 14px 10px; padding: 0; border: 3px solid #cfdfb8; border-radius: 15px; background: #5d9472; overflow: hidden; }
.classic-base-form .base-order-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
.classic-base-form .panel { border: 0; border-radius: 0; background: #eaf1de; }
.classic-base-form .panel-header { padding: 13px 15px; color: #456b3e; background: #dce8cb; }
.classic-base-form .panel-header h2 { font-size: 17px; }
.classic-base-form .panel-header p { font-size: 11px; }
.classic-base-form .panel-pad { padding: 15px; }
.classic-base-form .summary-panel { position: static; margin: 0; border-top: 1px solid #b9d0a4; }
.classic-base-form h2, .classic-base-form h3 { color: #456f3b; }
.classic-base-form input, .classic-base-form select { min-height: 40px; border: 1px solid #b8cf9e; border-radius: 20px; max-width: 100%; background: #fffef3; color: #426439; }
.classic-base-form .form-field { min-width: 0; }
.classic-base-form .form-field label { color: #547649; }
.classic-base-form .button.primary { border: 1px solid #f3e58e; border-radius: 22px; background: linear-gradient(#fff1a0, #e7c34f); color: #975e22; }
.classic-base-form .summary-line strong { overflow-wrap: anywhere; }
.classic-base-form .summary-line.summary-total strong { font-size: 20px; color: #b37920; }
.classic-base-form .summary-caption, .classic-base-form .form-hint { color: #66805a; font-size: 11px; }
.classic-base-form .base-product-art img { max-height: 140px; max-width: 100%; }
.classic-base-footer { padding: 10px; background: #dcecd9; }
.classic-base-sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
@media (max-width: 390px) {
  .classic-base-header { padding-inline: 50px; min-height: 145px; }
  .classic-base-header h1 { font-size: 22px; }
  .classic-base-products { gap: 7px; padding: 8px; }
  .classic-base-tabs button { font-size: 12px; min-height: 42px; }
  .classic-base-product-name { font-size: 12px; min-height: 28px; }
  .classic-base-price { font-size: 17px; }
  .classic-base-stock { font-size: 12px; }
  .classic-base-form { margin-inline: 8px; }
  .classic-base-form .panel-pad { padding: 12px; }
  .classic-base-history th, .classic-base-history td { padding-inline: 5px; font-size: 12px; }
}

/* Source ratios use the renderer width rather than changing the host rem scale. */
@font-face { font-family: MitraBaseFira; src: url('/images/classic-base/FIRASANS-BOLD.TTF') format('truetype'); font-weight: 700; font-display: swap; }
.classic-base { container-type: inline-size; width: 100%; color: #186654; background: #ecf0f1; }
.classic-base-header { min-height: 0; padding: 0; color: #fff; background: #47a779 url('/images/classic/bg-top.jpg') center top/100% 100%; }
.classic-base-header h1 { display: grid; place-items: center; min-height: 48px; height: 11.39cqw; padding: 0 50px; margin: 0; font-size: clamp(18px, 4.45cqw, 22px); font-weight: 400; line-height: 1.2; color: #fff; }
.classic-base-account-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; min-height: 36px; padding: 2px 2.78%; background: #47a779; }
.classic-base-account { margin: 0; color: #186654; font-size: clamp(12px, 3.34cqw, 16px); min-width: 0; }
.classic-base-account strong { color: #fffb89; }
.classic-base-header-actions { top: 0; }
.classic-base-shortcuts { gap: 6px; flex-shrink: 0; }
.classic-base-vip { width: 15cqw; min-width: 54px; min-height: 32px; height: 32px; border: 0; padding: 0; background: url('/images/classic-base/btn_vip.png') center/100% auto no-repeat; }
.classic-base-history-button { border: 0; border-radius: 0; background: transparent; color: #186654; padding: 4px 2px; min-height: 32px; text-decoration: underline; font-size: clamp(12px, 3.34cqw, 16px) !important; }
.classic-base-history-button[aria-pressed="true"] { background: transparent; color: #a0ffcd; }
.classic-base-announcement { height: max(26px, 7.22cqw); border: 1px solid #d9dbdf; padding-inline: 2.36%; }
.classic-base-announcement img { width: 5%; min-width: 19px; height: auto; }
.classic-base-tabs { background: #ecf0f1; border-bottom: 1px solid #97a1a3; }
.classic-base-tabs button { border-inline-end: 0; background: transparent; color: #97a1a3; min-height: 44px; padding: 8px 2px; font-size: clamp(12px, 3.7cqw, 18px); font-weight: 400; }
.classic-base-tabs button[aria-pressed="true"] { color: #178e6a; border-bottom-color: #178e6a; }
.classic-base-page-title { min-height: 48px; background: #fff; }
.classic-base-page-title h2 { color: #178e6a; font-size: clamp(20px, 5.83cqw, 28px); }
.classic-base-back { color: #178e6a; min-height: 44px; padding: 0; }
.classic-base-actions { justify-content: center; padding: 11px 10px 2px; }
.classic-base-recharge { position: relative; width: 34.44%; min-width: 130px; min-height: 34px; border: 0; padding: 0; background: url('/images/classic-base/btn_recharge.png') center/100% auto no-repeat; color: transparent; }
.classic-base-recharge::before, .classic-base-recharge::after { position: absolute; content: ''; top: 50%; width: 62%; height: 26.39%; background: url('/images/classic-base/title_before.png') center/100% 100% no-repeat; transform: translateY(-50%); }
.classic-base-recharge::before { right: 108%; }
.classic-base-recharge::after { left: 108%; transform: translateY(-50%) rotate(180deg); }
.classic-base-products { gap: 7px 2.08%; padding: 10px 2.36%; }
.classic-base-product { aspect-ratio: 335/344; border: 0; border-radius: 6px; background: url('/images/classic-base/bg_list_01.png') center/100% 100% no-repeat; box-shadow: none; overflow: visible; }
.classic-base-product > label { display: block; position: absolute; inset: 0; min-height: 0; padding: 0; border-radius: inherit; }
.classic-base-product:has(.classic-base-product-choice:focus-visible) { outline: 3px solid #178e6a; outline-offset: 3px; }
.classic-base-product.is-selected, .classic-base-product:has(.classic-base-product-choice:checked) { box-shadow: inset 0 0 0 3px #f85959; }
.classic-base-product.is-selected::after { position: absolute; content: ''; inset: 0; border: 3px solid #f85959; border-radius: inherit; pointer-events: none; }
.classic-base-product-name { position: absolute; top: 6.1%; inset-inline: 3%; min-height: 0; padding: 0; background: transparent; color: #fff; font-size: clamp(10px, 3.33cqw, 16px); font-weight: 400; line-height: 1.25; }
.classic-base-artwork { position: absolute; display: block; top: 18%; left: 6%; width: 88%; height: 44%; min-height: 0; padding: 0; }
.classic-base-artwork img { position: absolute; inset: 0; width: 100%; height: 100%; max-height: 100%; object-fit: contain; }
.classic-base-artwork > img.product-image { width: 100%; height: 100%; min-height: 0; }
.classic-base-tabs button:focus-visible { outline: 2px solid #178e6a; outline-offset: -4px; }
.classic-base-artwork .product-artwork, .classic-base-artwork .product-image { width: auto; height: 100%; max-width: 100%; max-height: 100%; padding: 0; border: 0; box-shadow: none; background: transparent; }
.classic-base-artwork-missing { min-height: 0; height: 100%; }
.classic-base-nominal { position: absolute; top: 63.95%; right: 0; width: 68.66%; height: 13.95%; padding: 0 3% 0 0; background: url('/images/classic-base/item_num.png') right center/100% 100% no-repeat; color: #ffec47; font-size: clamp(12px, 4.16cqw, 20px); text-align: right; line-height: 1.6; white-space: nowrap; }
.classic-base-stock, .classic-base-price { position: absolute; top: 80%; inset-inline: 2%; padding: 0; color: #186654; font-size: clamp(12px, 4.16cqw, 20px); font-weight: 700; line-height: 1.1; }
.classic-base-stock strong { color: inherit; }
.classic-base-stock-select { position: absolute; inset: 0; width: 100%; border: 0; padding: 0; background: transparent; border-radius: inherit; cursor: pointer; }
.classic-base-stock-select:disabled { cursor: default; }
.classic-base-stock-select:focus-visible { outline: 3px solid #178e6a; outline-offset: -3px; }
.base-stock-dialog { width: min(92vw, 460px); max-height: 85dvh; padding: 20px; margin: auto; border: 2px solid #affedf; border-radius: 12px; background: #ecf0f1; color: #186654; overflow: auto; }
.base-stock-dialog::backdrop { background: #081b18a6; }
.base-stock-dialog input { width: 100%; min-height: 44px; margin: 8px 0; }
.base-stock-dialog .button { min-height: 44px; margin-top: 8px; }
/* Portal queryBuyer/sellCard: original Indonesian artwork, scaled to the page. */
dialog.classic-stock-dialog { container-type: inline-size; width: min(88.47vw, 425px); max-width: calc(100vw - 24px); max-height: calc(100dvh - 24px); margin: auto; padding: 0 0 min(4.167vw, 20px); border: 0; border-radius: 5px; background: #2f9d86; color: #6febd0; box-shadow: 0 0 4px #0004; overflow: auto; overscroll-behavior: contain; font-family: Arial, sans-serif; }
dialog.classic-stock-dialog::backdrop { background: #0008; backdrop-filter: none; }
.classic-stock-dialog .classic-stock-title { margin: 0; padding: 10px 8px; min-height: 48px; display: grid; place-content: center; grid-template-columns: auto auto; border-radius: 5px; background: #32a78e; color: #7dfce0; font-size: clamp(16px, 5.02cqw, 22px); line-height: 1.35; font-weight: 700; text-align: center; }
.classic-stock-title span { min-width: 0; overflow-wrap: anywhere; }
.classic-stock-recipient { display: grid; grid-template-columns: 20% minmax(0, 1fr); gap: 3%; align-items: center; margin: 10.67% 10% 0 4%; }
.classic-stock-recipient label { padding: 0; margin: 0; text-align: right; color: #5ce6c9; font-size: clamp(16px, 5.65cqw, 24px); }
.classic-stock-dialog .classic-stock-recipient input { width: 100%; min-width: 0; min-height: 44px; margin: 0; padding: 6px 12px; border: 0; border-radius: 5px; background: #26907a; color: #fff285; font: inherit; font-size: clamp(16px, 4.71cqw, 20px); }
.classic-stock-recipient input::placeholder { color: #a4ecdb; opacity: 1; }
.classic-stock-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; gap: 3.14%; margin: 7.85% 6.2% 0; }
.classic-stock-button { display: grid; place-items: center; min-width: 0; min-height: 44px; width: 100%; margin: 0; padding: 0; border: 0; border-radius: 999px; background: transparent; cursor: pointer; }
.classic-stock-button img { display: block; width: 100%; height: auto; }
.classic-stock-button:disabled { opacity: .5; cursor: default; }
.classic-stock-button:focus-visible, .classic-stock-recipient input:focus-visible { outline: 2px solid #fff285; outline-offset: 3px; }
.classic-stock-review { margin: 5.5% 3% 0; padding: 8px 4%; border-radius: 5px; background: #26907a; }
.classic-stock-review > div { display: grid; grid-template-columns: 24% minmax(0, 1fr); column-gap: 6px; align-items: baseline; }
.classic-stock-review dt { margin: 0; color: #6febd0; font-size: clamp(16px, 5.02cqw, 22px); line-height: 1.5; text-align: right; }
.classic-stock-review dd { margin: 0; color: #fbf5ab; font-size: clamp(14px, 4.08cqw, 18px); line-height: 1.5; overflow-wrap: anywhere; }
.classic-stock-dialog .classic-stock-explain { margin: 8px 8.16% 0; padding: 0; color: #b4ffe9; font-size: clamp(13px, 3.77cqw, 16px); line-height: 1.5; text-align: center; }
.classic-stock-dialog .classic-stock-message { margin: 12px 6%; padding: 8px 10px; border-radius: 5px; color: #fcffdd; background: #206f5f; font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
.classic-stock-resume { display: block; max-width: 88%; min-height: 44px; margin: 12px auto 0; padding: 8px 12px; border: 1px solid #b4ffe9; border-radius: 5px; color: #fcffdd; background: #206f5f; }
@media (max-height: 480px) { .classic-stock-recipient { margin-top: 16px; } .classic-stock-actions { margin-top: 16px; } }
.base-history-source-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 10px 7px; border-bottom: 1px solid #e1e5e6; background: white; }
.base-history-source-row > span { min-width: 0; white-space: pre-line; overflow-wrap: anywhere; }
.base-history-source-row img { display: block; max-width: 100%; max-height: 90px; object-fit: contain; }
.classic-base-original-price { position: absolute; top: 90%; inset-inline: 2%; padding: 0; color: #178e6a; font-size: clamp(10px, 2.77cqw, 13px); line-height: 1; }
.classic-base-send { position: absolute; bottom: 3%; right: 3%; min-height: 0; margin: 0; border-radius: 8px; background: #f5fff4b8; color: #607c69; padding: 1px 5px; font-size: 10px !important; }
.classic-base-products.is-voucher .classic-base-stock { font-size: clamp(11px, 3.6cqw, 17px); }
.classic-base-products.is-coin .classic-base-product { aspect-ratio: 322/412; background: transparent; font-family: MitraBaseFira, Arial, sans-serif; }
.classic-base-products.is-coin .classic-base-product-name { width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.classic-base-products.is-coin .classic-base-artwork { inset: 0; width: 100%; height: 100%; }
.classic-base-products.is-coin .classic-base-artwork img { width: 100%; height: 100%; max-height: none; object-fit: fill; }
.classic-base-products.is-coin .classic-base-nominal { top: 2.43%; left: 4.65%; right: auto; width: 76%; height: 10.92%; padding: 0 0 0 8%; background-image: url('/images/classic-base/bg_gold_num_01.png'); text-align: center; color: #007a64; font-size: clamp(12px, 3.89cqw, 18px); line-height: 1.5; }
.classic-base-products.is-coin .classic-base-product:has(img[src$="base-coin-2.png"]) .classic-base-nominal { background-image: url('/images/classic-base/bg_gold_num_02.png'); color: #334ed3; }
.classic-base-products.is-coin .classic-base-product:has(img[src$="base-coin-3.png"]) .classic-base-nominal { background-image: url('/images/classic-base/bg_gold_num_03.png'); color: #ff7600; }
.classic-base-products.is-coin .classic-base-price { top: 75%; left: 45%; right: 2%; font-size: clamp(12px, 3.89cqw, 18px); color: #fff; text-shadow: 1px 1px 1px #005434; }
.classic-base-products.is-coin .classic-base-original-price { top: 82%; left: 45%; right: 2%; color: #fff; text-shadow: 1px 1px 1px #005434; }
.classic-base-original-price { text-decoration: none; }
.classic-base-original-price > span { display: inline-block; position: relative; }
.classic-base-original-price > span::after { position: absolute; content: ''; top: 50%; left: 50%; width: 120%; height: 1px; background: #f00; transform: translate(-50%, -50%) rotate(6deg); }
.classic-base-sale { position: absolute; z-index: 2; top: 20.35%; left: 5.97%; width: 32.54%; height: 13.95%; object-fit: contain; pointer-events: none; }
.classic-base-products.is-coin .classic-base-sale { top: 16.99%; left: 6.21%; width: 33.85%; height: 11.65%; }
.classic-base-products.is-gift .classic-base-product { aspect-ratio: 326/414; background: url('/images/classic-base/bg_list_01_v2.png') center/100% 100% no-repeat; font-family: MitraBaseFira, Arial, sans-serif; font-weight: 700; }
.classic-base-products.is-gift .classic-base-product-name { top: 2%; font-size: clamp(11px, 3.5cqw, 16px); color: #fff; background: transparent; }
.classic-base-products.is-gift .classic-base-artwork { top: 14%; height: 55.8%; }
.classic-base-products.is-gift .classic-base-artwork img { max-height: 100%; }
.classic-base-products.is-gift .classic-base-nominal { top: 73%; left: 3%; width: 94%; height: 9%; background: transparent; text-align: center; color: #ff6c0a; font-size: clamp(12px, 3.89cqw, 18px); padding: 0; }
.classic-base-products.is-gift .classic-base-nominal::before { content: ''; display: inline-block; width: 13px; height: 14px; margin-right: 6px; vertical-align: -1px; background: url('/images/classic-base/ico_gold.png') center/contain no-repeat; }
.classic-base-products.is-gift .classic-base-stock { top: 88%; color: #fff; font-size: clamp(12px, 3.89cqw, 18px); }
.classic-base-products.is-gift .classic-base-send { bottom: 1%; font-size: 9px !important; }
.classic-base.is-purchase .classic-base-products.is-gift .classic-base-product { background-image: url('/images/classic-base/bg_list_02.png'); aspect-ratio: 326/434; }
.classic-base.is-purchase .classic-base-products.is-gift .classic-base-price { top: 84%; color: #fff; }
.classic-base-products.is-slot .classic-base-product { aspect-ratio: 326/414; font-family: MitraBaseFira, Arial, sans-serif; background-image: url('/images/classic-base/bg_list_v2_01.png'); }
.classic-base-products.is-slot .skin-gold { background-image: url('/images/classic-base/bg_list_v2_02.png'); }
.classic-base-products.is-slot .skin-platinum { background-image: url('/images/classic-base/bg_list_v2_03.png'); }
.classic-base-products.is-slot .classic-base-product-name { top: 2.5%; font-size: clamp(11px, 3.33cqw, 16px); color: #f4f7ff; background: transparent; }
.classic-base-products.is-slot .classic-base-artwork { top: 12%; left: 23.7%; width: 52.45%; height: 44%; min-height: 0; }
.classic-base-products.is-slot .classic-base-artwork img { max-height: 100%; }
.classic-base-game { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.classic-base-bet { position: absolute; top: 59%; inset-inline: 1%; padding: 0; color: #2869cc; font-size: clamp(12px, 4.44cqw, 21px); font-weight: 700; white-space: nowrap; }
.classic-base-reward { position: absolute; inset-inline: 2%; top: 70%; gap: 1px; padding: 0; background: transparent; }
.classic-base-reward small { font-size: clamp(9px, 1.95cqw, 10px); color: #96b9f4; background: url('/images/classic-base/bg_title_01.png') center/100% auto no-repeat; }
.classic-base-reward strong { font-size: clamp(11px, 3.33cqw, 16px); color: #ff6c0a; white-space: nowrap; }
.classic-base-reward strong::before { display: inline-block; content: ''; width: 12px; height: 13px; vertical-align: -2px; background: url('/images/classic-base/slot-ico-gold.png') center/contain no-repeat; }
.classic-base-products.is-slot .skin-gold .classic-base-bet { color: #ba5119; }
.classic-base-products.is-slot .skin-gold .classic-base-reward small { color: #f7b07c; background-image: url('/images/classic-base/bg_title_02.png'); }
.classic-base-products.is-slot .skin-platinum .classic-base-bet { color: #7141b2; }
.classic-base-products.is-slot .skin-platinum .classic-base-reward small { color: #d5a7ff; background-image: url('/images/classic-base/bg_title_03.png'); }
.classic-base-products.is-slot .classic-base-price { top: 88%; color: #fff; font-size: clamp(14px, 4.44cqw, 21px); }
.classic-base-notice, .classic-base-unavailable, .classic-base-empty { color: #426957; }
.classic-base-empty h2, .classic-base-history > h2 { color: #186654; }
.classic-base-form { border-color: #affedf; background: #47a98d; }
.classic-base-form input, .classic-base-form select { background: #fcffdd; color: #186654; }
.classic-base-form .button.primary { border-color: #19725f; background: linear-gradient(#fff58f, #fbbf49); color: #d9701a; }
dialog.classic-base-form { position: fixed; inset: 0; margin: auto; padding: 0; width: min(92vw, 460px); max-width: calc(100vw - 24px); max-height: 85dvh; overflow: auto; overscroll-behavior: contain; box-shadow: 0 15px 50px #123a3370; color: #186654; }
dialog.classic-base-form::backdrop { background: #081b18a6; }
/* /trade/rechargeIndex buyItem: Item/Harga, declared package +/- and BUY. */
dialog.classic-base-form:has(.classic-base-checkout) { border: 0; border-radius: 7px; background: #2f9d86; }
dialog.classic-base-form > [data-action="base-close-selection"] { display: block; margin: 3px 8px 3px auto; min-height: 36px; color: #e5fff4; border: 0; background: transparent; padding: 3px 8px; }
.classic-base-checkout { color: #d1ffef; background: #2f9d86; }
.classic-base-checkout-title { padding: 10px 8%; background: #2f9d86; }
.classic-base-checkout-title p { display: flex; align-items: baseline; gap: 8px; margin: 3px 0; font-size: 18px; }
.classic-base-checkout-title strong { color: #fff285; font-weight: 400; overflow-wrap: anywhere; }
.classic-base-checkout-title p:last-child strong { font-style: italic; }
.classic-base-checkout .classic-base-quantity-title { display: grid; place-items: center; margin: 0; padding: 10px; min-height: 48px; background: #32a78e; color: #d0fff0; font-size: 18px; }
.classic-base-package-stepper { display: grid; grid-template-columns: minmax(44px, 1fr) minmax(0, 2.4fr) minmax(44px, 1fr); align-items: center; gap: 7px; margin: 18px 6% 0; }
.classic-base-package-stepper button { min-width: 0; min-height: 44px; border: 0; padding: 0; background: url('/images/classic-base/subtract_btn.png') center/100% 100% no-repeat; color: #d9701a; font-weight: 700; font-size: 24px; }
.classic-base-package-stepper button:disabled { opacity: .55; cursor: default; }
.classic-base-package-stepper output, .classic-base-fixed-quantity { display: grid; place-items: center; min-height: 44px; margin: 0; padding: 5px; background: #26907a; color: #fff285; font-size: 22px; font-weight: 700; overflow-wrap: anywhere; }
.classic-base-fixed-quantity { margin: 18px auto 0; width: 46%; }
.classic-base-checkout .classic-base-checkout-total { margin: 14px 8px; text-align: center; color: #d0fff0; font-size: 20px; }
.classic-base-checkout-total strong { color: #fff285; font-weight: 400; }
.classic-base-checkout-recipient { margin: 15px 6% 0; }
.classic-base-checkout-recipient label { display: block; margin-bottom: 5px; color: #e0fff4; }
.classic-base-checkout-recipient input { width: 100%; border-radius: 4px; }
.classic-base-checkout .classic-base-methods { margin: 0 4%; padding: 0; border: 0; }
.classic-base-checkout .classic-base-methods legend { padding: 0 0 8px; color: #d0fff0; }
.classic-base-checkout .classic-base-methods label { border: 3px solid transparent; border-radius: 7px; min-height: 48px; background: #fcffdd; box-shadow: 0 3px 0 #2b917b; }
.classic-base-checkout .classic-base-methods label:has(input:checked) { border-color: #f85959; background: #fcffdd; }
.classic-base-checkout .classic-base-methods p { grid-column: 1 / -1; margin: 0; font-size: 12px; color: #e0fff4; }
.classic-base-checkout-review { padding: 8px 5% 14px; }
.classic-base-checkout .summary-caption, .classic-base-checkout .form-hint { color: #e0fff4; font-size: 11px; line-height: 1.5; }
.classic-base-checkout .form-error { padding: 8px; border-radius: 4px; background: #fff1e9; color: #8d2923; }
.classic-base-checkout .classic-base-check { margin: 5px 0; min-height: 40px; border: 1px solid #b2eed2; border-radius: 5px; background: #287c6b; color: #f0fff7; }
.classic-base-checkout .classic-base-check:disabled { opacity: .6; }
.classic-base-checkout .base-preview-result { margin: 12px 0; border: 1px solid #6dcbb2; padding: 10px; border-radius: 5px; background: #287c6b; }
.classic-base-checkout .base-preview-result h3 { margin: 0 0 8px; color: #fff285; font-size: 15px; }
.classic-base-checkout .base-preview-result dl { margin: 0; }
.classic-base-checkout .base-preview-result dl > div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 3px 8px; margin: 5px 0; color: #e0fff4; font-size: 12px; }
.classic-base-checkout .base-preview-result dd { margin: 0; color: #fff285; overflow-wrap: anywhere; }
.classic-base-checkout .classic-base-buy { display: block; width: min(58%, 226px); margin: 10px auto 4px; border: 0; padding: 0; min-height: 44px; background: transparent; }
.classic-base-buy img { display: block; width: 100%; height: auto; }
.classic-base-buy:disabled { opacity: .5; cursor: default; }
.classic-base-checkout button:focus-visible, .classic-base-package-stepper output:focus-visible { outline: 3px solid #fff285; outline-offset: 3px; }
@media (max-width: 390px) {
  .classic-base-shortcuts { gap: 3px; }
  .classic-base-account-row { gap: 4px; }
}