.deposit-bonus-choices { container-type: inline-size; color: var(--text); font: inherit; min-width: 0; }
.deposit-panel .wallet-deposit-grid[hidden], .deposit-panel .deposit-status[hidden] { display: none !important; }
.nav-notification-msg.nav-notification-welcome { white-space: pre-line; }
.bonus-choice-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; margin-bottom: 12px; }
.bonus-choice-header h3 { margin: 0; color: var(--soft); font-size: 15px; font-weight: 600; }
.bonus-choice-all { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font-size: 12px; cursor: pointer; }
.bonus-choice-grid { --columns: 3; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.bonus-choice-grid[data-count="1"] { --columns: 1; justify-content: flex-start; }
.bonus-choice-grid[data-count="2"] { --columns: 2; justify-content: flex-start; }
.bonus-choice-grid[data-count="4"] { --columns: 4; }
.bonus-choice { box-sizing: border-box; display: flex; flex-direction: column; justify-content: space-between; gap: 10px; flex: 0 0 calc((100% - (var(--columns) - 1)*10px)/var(--columns)); min-width: 0; min-height: 78px; padding: 12px; border: 1px solid rgba(148,163,184,.14); border-radius: 10px; background: var(--bg); cursor: pointer; }
.bonus-choice-grid[data-count="1"] .bonus-choice { max-width: 260px; }
.bonus-choice-grid[data-count="2"] .bonus-choice { max-width: 320px; }
.bonus-choice.is-selected { border-color: rgba(129,180,232,.3); background: color-mix(in srgb, var(--bg) 94%, #81b4e8); }
.bonus-choice:has(input:disabled), .bonus-choice-all:has(input:disabled) { cursor: default; }
.bonus-choice:has(input:not(:disabled)):hover { border-color: #81a9d6; }
.bonus-choice-top, .bonus-choice-bottom { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-width: 0; }
.bonus-choice-name { color: var(--soft); font-size: 12px; font-weight: 500; line-height: 1.35; }
.bonus-choice-range { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.bonus-choice-percent { flex-shrink: 0; color: #a2c7ef; font-size: 22px; font-weight: 650; line-height: 1.1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bonus-choice-percent small { margin-left: 1px; font-size: 13px; font-weight: 500; }
.bonus-choice-referral { cursor: default; }
.bonus-choice-referral .bonus-choice-percent { align-self: flex-end; }
.deposit-bonus-choices input[type=checkbox] { appearance: none; box-sizing: border-box; display: inline-grid; place-content: center; flex: 0 0 17px; width: 17px; height: 17px; margin: 0; border: 1px solid #52627a; border-radius: 5px; background: transparent; color: #101827; cursor: inherit; }
.deposit-bonus-choices input[type=checkbox]:checked, .deposit-bonus-choices input[type=checkbox]:indeterminate { background: #a2c7ef; border-color: #a2c7ef; }
.deposit-bonus-choices input[type=checkbox]:checked::after { content: ''; width: 7px; height: 4px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-1px) rotate(-45deg); }
.deposit-bonus-choices input[type=checkbox]:indeterminate::after { content: ''; width: 8px; border-top: 2px solid currentColor; }
.deposit-bonus-choices input:disabled { opacity: .55; }
.deposit-bonus-choices :is(input,button):focus-visible { outline: 2px solid #a2c7ef; outline-offset: 3px; }
.bonus-choice-help, .bonus-choice-status { margin: 10px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.deposit-bonus-choices [data-bonus-status] { display: block; box-sizing: border-box; height: 36px; margin: 8px 0 0; }
.bonus-choice-terms { margin-left: 8px; color: var(--muted); font-size: 11px; font-weight: 400; text-decoration: underline; text-underline-offset: 3px; }
.bonus-choice-terms:hover { color: #a2c7ef; }
.bonus-choice-status.is-error { color: #e6b0a4; }
@container (max-width: 300px) { .deposit-bonus-choices [data-bonus-status] { height: 54px; } }
@container (max-width: 640px) {
  .bonus-choice-grid[data-count="4"], .bonus-choice-grid[data-count="6"] { --columns: 2; }
  .bonus-choice { gap: 8px; padding: 10px; }
  .bonus-choice-bottom { align-items: flex-start; flex-direction: column-reverse; }
  .bonus-choice-range { font-size: 11px; }
  .bonus-choice-grid[data-count="2"] .bonus-choice { max-width: none; }
  .bonus-choice-referral .bonus-choice-percent { align-self: flex-start; }
}

/* Keep both deposit dialogs compact without changing their outer dimensions. */
:is(.wallet-modal, .wallet-modal-box) .deposit-panel { gap: 8px; }
#depBox.deposit-panel { gap: 8px; }
.deposit-panel > .wallet-field { flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; }
.deposit-panel > .wallet-field > .deposit-asset-toggle { flex: 1; max-width: 340px; }
.deposit-panel .deposit-asset-toggle { padding: 3px; }
.deposit-panel .deposit-asset-button { min-height: 36px; padding-block: 6px; }
.deposit-panel .bonus-choice-header { margin-bottom: 6px; gap: 4px 12px; }
.deposit-panel .bonus-choice { display: grid; grid-template-columns: minmax(0, 1fr) 17px; align-items: center; min-height: 58px; padding: 8px; gap: 4px; }
.deposit-panel .bonus-choice-top { grid-column: 2; grid-row: 1; }
.deposit-panel .bonus-choice-name { display: none; }
.deposit-panel .bonus-choice-bottom { display: contents; }
.deposit-panel .bonus-choice-percent { grid-column: 1; grid-row: 1; font-size: 20px; }
.deposit-panel .bonus-choice-range { grid-column: 1 / -1; grid-row: 2; font-size: 11px; line-height: 1.35; }
.deposit-panel .deposit-bonus-choices [data-bonus-status] { height: 18px; margin: 4px 0 0; }
.deposit-panel .wallet-address-row { flex-wrap: nowrap; align-items: center; gap: 8px; padding: 6px 8px; }
.deposit-panel .wallet-address { flex: 1 1 0; }
.deposit-panel .wallet-address-row button { min-width: 62px; padding-inline: 10px; }
.deposit-panel .wallet-deposit-info { gap: 6px; }
.deposit-panel .deposit-detail { min-height: 0; font-size: 13px; line-height: 1.5; }
.deposit-panel[data-deposit-state="ready"] { position: relative; }
.deposit-panel[data-deposit-state="ready"] .wallet-deposit-info { padding-bottom: 52px; }
.deposit-panel[data-deposit-state="ready"] .deposit-request { position: absolute; right: 0; bottom: 0; width: calc(100% - 192px); }
#depBox[data-deposit-state="ready"] .wallet-deposit-info { padding-bottom: 0; }
#depBox[data-deposit-state="ready"] .deposit-request { position: static; width: 100%; }
.wallet-modal:has(.wallet-tab-panel[data-tab-panel="deposit"]:not([hidden])) .wallet-modal-header { padding-bottom: 8px; }
.wallet-modal:has(.wallet-tab-panel[data-tab-panel="deposit"]:not([hidden])) .wallet-tab-nav { margin-top: 8px; }
.wallet-modal:has(.wallet-tab-panel[data-tab-panel="deposit"]:not([hidden])) .wallet-modal-title-row > div { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; }
.wallet-modal:has(.wallet-tab-panel[data-tab-panel="deposit"]:not([hidden])) .wallet-modal-subtitle { margin-top: 0; }
.wallet-tab-panel[data-tab-panel="deposit"] > .wallet-footer-row { padding-top: 4px; }
@media (max-width: 640px) {
  .deposit-panel .wallet-deposit-grid { grid-template-columns: 128px minmax(0, 1fr); gap: 12px; }
  .deposit-panel :is(.wallet-qr-box, .wallet-qr-placeholder, .wallet-qr-img) { width: 128px; height: 128px; }
  #depBox #qrImg { width: 128px; height: 128px; }
  .deposit-panel .wallet-qr-meta { font-size: 12px; }
  .deposit-panel .wallet-label { font-size: 13px; }
  .deposit-panel .deposit-bonus-choices [data-bonus-status] { height: 36px; }
  .deposit-panel .wallet-address-row { gap: 4px; padding-inline: 4px; }
  .deposit-panel .wallet-address-row button { min-width: 44px; padding-inline: 5px; }
  .deposit-panel .deposit-detail { font-size: 12px; }
  .deposit-panel[data-deposit-state="ready"] .deposit-request { width: calc(100% - 140px); }
}
@media (max-width: 640px) and (max-height: 740px) {
  :is(.wallet-modal, .wallet-modal-box) .deposit-panel, #depBox.deposit-panel { gap: 6px; }
  .deposit-panel .bonus-choice { min-height: 52px; padding: 6px; gap: 2px; }
  .deposit-panel .bonus-choice-header { margin-bottom: 4px; }
  .deposit-panel .wallet-address-row { padding-block: 4px; }
  .wallet-modal:has(.wallet-tab-panel[data-tab-panel="deposit"]:not([hidden])) .wallet-tab-btn { min-height: 36px; padding-block: 6px; }
  .wallet-tab-panel[data-tab-panel="deposit"] > .wallet-footer-row .btn { min-height: 34px; padding-block: 6px; }
}