/* Deposit-only native proportions from deposit-original-metrics-oct22.json.
   New shell/markup classes are intentionally required. No payment state,
   limits, address/QR generation, account configuration or controls are hidden. */
.c168-deposit-native-shell {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
  background: rgba(0, 0, 0, .5);
  -webkit-backdrop-filter: blur(.1rem);
  backdrop-filter: blur(.1rem);
}
.c168-pay-page.c168-pay-deposit.c168-deposit-native-oct22 {
  position: relative;
  display: flex !important;
  flex-direction: column;
  width: 100% !important;
  max-width: var(--lobby__max-width, 100%) !important;
  height: calc(100dvh - .9rem) !important;
  min-height: 0 !important;
  max-height: calc(100dvh - .9rem) !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: .2rem .2rem 0 0 !important;
  overflow: hidden !important;
  background: var(--skin__bg_2, #fff) !important;
  color: var(--skin__lead, #333);
  font-family: var(--c168-source-font-oct22, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, "Segoe UI", Arial, sans-serif);
  font-size: .24rem;
  box-sizing: border-box;
}
.c168-deposit-native-oct22 .c168-pay-header,
.c168-deposit-native-oct22 .c168-pay-balance,
.c168-deposit-native-oct22 .c168-pay-tabs { flex-shrink: 0 !important; }
.c168-pay-page.c168-pay-deposit.c168-deposit-native-oct22 .c168-pay-header {
  position: relative;
  height: 1rem !important;
  min-height: 1rem !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--skin__bg_2, #fff) !important;
}
.c168-deposit-native-oct22 .c168-pay-header > span {
  position: absolute;
  inset-inline-start: 50%;
  top: 0;
  transform: translateX(-50%);
  max-width: calc(100% - 2.8rem);
  height: 1rem;
  line-height: 1rem;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: .34rem !important;
  font-weight: 400;
  color: var(--skin__lead, #333) !important;
}
.c168-deposit-native-oct22 .c168-pay-header > button:first-child {
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  width: .8rem !important;
  height: 1rem !important;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
  border: 0;
  background: transparent;
  color: var(--skin__neutral_1, #007bff) !important;
}
.c168-deposit-native-oct22 .c168-pay-header > button:first-child svg {
  width: .3rem !important;
  height: .3rem !important;
  margin-inline-start: -.15rem;
}
.c168-deposit-native-oct22 .c168-pay-header > div {
  position: absolute;
  inset-inline-end: .2rem;
  top: 0;
  height: 1rem;
  display: flex;
  align-items: center;
  gap: 0 !important;
}
.c168-deposit-native-oct22 .c168-pay-header > div button {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  padding: .15rem;
  color: var(--skin__primary, #0053df) !important;
  background: transparent;
}
.c168-deposit-native-oct22 .c168-pay-header > div .c168-deposit-native-icon {
  width: .36rem;
  height: .36rem;
}
.c168-pay-page.c168-pay-deposit.c168-deposit-native-oct22 .c168-pay-balance {
  display: flex;
  align-items: center;
  gap: .1rem;
  min-height: 0 !important;
  margin: 0 !important;
  padding: .2rem .2rem .05rem !important;
  border: 0 !important;
  font-size: .26rem !important;
  color: var(--skin__lead, #333) !important;
}
.c168-deposit-native-oct22 .c168-deposit-balance-pill {
  display: inline-flex;
  align-items: center;
  height: .4rem;
  padding: 0 .08rem 0 .04rem;
  border: thin solid var(--skin__border, #bbd1f6);
  border-radius: .2rem;
  background: transparent;
  box-sizing: border-box;
}
.c168-deposit-native-oct22 .c168-deposit-balance-pill > img {
  width: .3rem;
  height: .3rem;
  object-fit: contain;
  flex-shrink: 0;
}
.c168-deposit-native-oct22 .c168-deposit-balance-pill > strong {
  margin-inline-start: .08rem;
  max-width: 1.64rem;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--skin__accent_3, #ffaa09) !important;
  border-bottom: .02rem solid var(--skin__accent_3, #ffaa09);
  font-size: .22rem !important;
  font-weight: 700 !important;
  line-height: 1.2;
}
.c168-deposit-native-oct22 .c168-deposit-balance-pill > button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: .22rem;
  height: .3rem;
  margin: 0 .08rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--skin__primary, #0053df);
}
.c168-deposit-native-oct22 .c168-deposit-balance-pill > button svg {
  width: .3rem !important;
  height: .3rem !important;
  flex-shrink: 0;
}
.c168-pay-page.c168-pay-deposit.c168-deposit-native-oct22 .c168-pay-tabs {
  display: flex !important;
  align-items: flex-start;
  justify-content: flex-start;
  gap: .65rem !important;
  height: 1rem !important;
  min-height: 1rem !important;
  margin: 0 .2rem !important;
  padding: 0 !important;
  border-bottom: thin solid var(--skin__border, #bbd1f6) !important;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}
.c168-deposit-native-oct22 .c168-pay-tabs::-webkit-scrollbar { display: none; }
.c168-pay-page.c168-pay-deposit.c168-deposit-native-oct22 .c168-pay-tabs > button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto !important;
  width: auto !important;
  height: .9rem !important;
  min-height: .9rem !important;
  padding: .3rem 0 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--skin__lead, #333) !important;
  font-family: inherit !important;
  font-size: .28rem !important;
  font-weight: 400 !important;
  line-height: .2rem !important;
  white-space: nowrap;
  box-sizing: border-box;
}
.c168-deposit-native-oct22 .c168-pay-tabs > button .c168-deposit-native-icon {
  width: .38rem;
  height: .38rem;
  margin-inline-end: .1rem;
  flex-shrink: 0;
}
.c168-deposit-native-oct22 .c168-pay-tabs > button:first-child .c168-deposit-native-icon {
  color: var(--skin__primary, #0053df);
}
.c168-deposit-native-oct22 .c168-pay-tabs > button:last-child .c168-deposit-native-icon {
  color: var(--skin__accent_3, #ffaa09);
}
.c168-pay-page.c168-pay-deposit.c168-deposit-native-oct22 .c168-pay-tabs > button.active {
  color: var(--skin__primary, #0053df) !important;
  font-size: .3rem !important;
}
.c168-deposit-native-oct22 .c168-pay-tabs > button.active > span { font-weight: 700; }
.c168-deposit-native-oct22 .c168-pay-tabs > button.active::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: -.1rem;
  height: .04rem;
  border-radius: .04rem;
  background: var(--skin__primary, #0053df);
}
.c168-pay-page.c168-pay-deposit.c168-deposit-native-oct22 .c168-pay-body {
  flex: 1 1 auto;
  min-height: 0 !important;
  min-width: 0;
  margin: 0 !important;
  padding: .2rem .2rem .3rem !important;
  overflow-x: hidden;
  overflow-y: auto !important;
  overscroll-behavior-y: contain;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
  background: var(--skin__bg_2, #fff);
  box-sizing: border-box;
}
.c168-deposit-native-oct22 .c168-pay-body > h3 {
  margin: 0 0 .3rem !important;
  font-size: .26rem !important;
  font-weight: 700 !important;
  color: var(--skin__lead, #333);
}
.c168-pay-page.c168-pay-deposit.c168-deposit-native-oct22 .c168-pay-methods,
.c168-pay-page.c168-pay-deposit.c168-deposit-native-oct22 .c168-pay-channels {
  display: grid;
  gap: .2rem !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}
.c168-deposit-native-oct22 .c168-pay-methods { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.c168-deposit-native-oct22 .c168-pay-channels { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.c168-pay-page.c168-pay-deposit.c168-deposit-native-oct22 .c168-pay-methods > button,
.c168-pay-page.c168-pay-deposit.c168-deposit-native-oct22 .c168-pay-channels > button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0 !important;
  height: .74rem !important;
  min-height: .74rem !important;
  min-width: 0;
  padding: 0 !important;
  border: thin solid var(--skin__border, #bbd1f6) !important;
  border-radius: .1rem !important;
  background: var(--skin__recharge-card-bg, #fff) !important;
  color: var(--skin__lead, #333) !important;
  font-family: inherit !important;
  font-size: .26rem !important;
  font-weight: 400;
  box-shadow: none !important;
  box-sizing: border-box;
}
.c168-pay-page.c168-pay-deposit.c168-deposit-native-oct22 .c168-pay-methods > button.active,
.c168-pay-page.c168-pay-deposit.c168-deposit-native-oct22 .c168-pay-channels > button.active {
  border-color: var(--skin__filter_active, #0053df) !important;
  color: var(--skin__primary, #0053df) !important;
}
.c168-pay-page.c168-pay-deposit.c168-deposit-native-oct22 .c168-pay-method-image,
.c168-deposit-native-oct22 .c168-pay-method-icon {
  position: static !important;
  width: .54rem !important;
  height: .54rem !important;
  margin: 0 .1rem !important;
  object-fit: contain;
  flex-shrink: 0;
}
.c168-deposit-native-oct22 .c168-deposit-method-label {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  margin-inline-end: .1rem;
  color: inherit;
}
.c168-deposit-native-oct22 .c168-deposit-method-label > span {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  word-break: break-all;
  text-align: center;
  font-size: .26rem;
}
.c168-pay-page.c168-pay-deposit.c168-deposit-native-oct22 .c168-pay-methods small {
  position: static !important;
  margin: 0;
  font-size: .2rem !important;
  line-height: 1.2;
  color: var(--skin__neutral_2, #7fa9ef) !important;
}
.c168-deposit-native-oct22 .c168-deposit-fold {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin: .05rem 0 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: var(--skin__primary, #0053df);
  font: inherit;
  font-size: .24rem;
  cursor: pointer;
}
.c168-deposit-native-oct22 .c168-deposit-fold .c168-deposit-native-icon {
  width: .25rem;
  height: .25rem;
  margin-inline-start: .1rem;
}
.c168-deposit-native-oct22 .c168-deposit-channels-section {
  margin: .2rem 0;
  padding: .2rem 0;
  border-top: thin solid var(--skin__border, #bbd1f6);
  border-bottom: thin solid var(--skin__border, #bbd1f6);
}
.c168-pay-page.c168-pay-deposit.c168-deposit-native-oct22 .c168-pay-label {
  display: block;
  margin: 0 0 .2rem !important;
  font-size: .26rem !important;
  font-weight: 700;
  color: var(--skin__lead, #333);
}
.c168-deposit-native-oct22 .c168-deposit-amount {
  display: flex;
  align-items: center;
  gap: .2rem;
  width: 100%;
  height: .8rem;
  margin-bottom: .1rem;
  padding: 0 .2rem;
  border: thin solid var(--skin__accent_2, #ea1700);
  border-radius: .1rem;
  background: rgba(234, 23, 0, .06);
  box-sizing: border-box;
}
.c168-deposit-native-oct22 .c168-deposit-amount.is-valid {
  border-color: var(--skin__accent_1, #04be02);
  background: rgba(4, 190, 2, .06);
}
.c168-deposit-native-oct22 .c168-deposit-amount > .c168-deposit-native-icon {
  width: .22rem;
  height: .22rem;
  flex-shrink: 0;
  color: var(--skin__neutral_2, #7fa9ef);
}
.c168-pay-page.c168-pay-deposit.c168-deposit-native-oct22 .c168-deposit-amount > input#c168-deposit-amount {
  flex: 1;
  min-width: 0;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: 0 !important;
  color: var(--skin__lead, #333) !important;
  caret-color: var(--skin__primary, #0053df);
  font-family: inherit !important;
  font-size: .24rem !important;
}
.c168-deposit-native-oct22 .c168-deposit-amount:focus-within {
  outline: thin solid var(--skin__primary, #0053df);
  outline-offset: .02rem;
}
.c168-deposit-native-oct22 .c168-deposit-amount > input::placeholder {
  font-size: .24rem !important;
  font-weight: 400 !important;
  color: var(--skin__neutral_2, #7fa9ef) !important;
}
.c168-deposit-native-oct22 .c168-pay-unit {
  display: block;
  margin: 0;
  padding: .02rem 0 .05rem;
  font-size: .22rem;
  color: var(--skin__lead, #333);
}
.c168-pay-page.c168-pay-deposit.c168-deposit-native-oct22 .c168-pay-rate {
  margin: .1rem 0 0;
  font-size: .24rem !important;
  line-height: 1.3;
  color: var(--skin__neutral_2, #7fa9ef) !important;
}
.c168-pay-page.c168-pay-deposit.c168-deposit-native-oct22 .c168-pay-quick {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .2rem !important;
  margin: .2rem 0 !important;
}
.c168-pay-page.c168-pay-deposit.c168-deposit-native-oct22 .c168-pay-quick > button {
  height: .79rem !important;
  min-height: .79rem !important;
  min-width: 0;
  padding: 0 !important;
  border: .01rem solid var(--skin__recharge-card-bg, var(--skin__bg_1, #eaf0ff)) !important;
  border-radius: .1rem !important;
  background: var(--skin__recharge-card-bg, var(--skin__bg_1, #eaf0ff)) !important;
  color: var(--skin__lead, #333) !important;
  font-family: inherit !important;
  font-size: .26rem !important;
  font-weight: 700 !important;
  line-height: .47rem !important;
  box-shadow: none !important;
  box-sizing: border-box;
}
.c168-pay-page.c168-pay-deposit.c168-deposit-native-oct22 .c168-pay-quick > button.active { border-color: var(--skin__filter_active, #0053df) !important; }
.c168-deposit-native-oct22 .c168-pay-quick > button:disabled {
  cursor: not-allowed;
  opacity: 1 !important;
  color: var(--skin__neutral_2, #7fa9ef) !important;
}
/* These live promotional/navigation controls were absent from the four saved
   deposit popups. Keep them functional and compact; do not invent reward rows. */
.c168-deposit-native-oct22 .c168-pay-offer {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .1rem;
  margin: .2rem 0;
  padding: .12rem .16rem;
  border: thin solid var(--skin__border, #bbd1f6);
  border-radius: .1rem;
  background: var(--skin__bg_2, #fff);
  color: var(--skin__lead, #333);
  font-size: .24rem;
}
.c168-deposit-native-oct22 .c168-deposit-offer-title {
  display: inline-flex;
  align-items: center;
  gap: .1rem;
  font: inherit;
}
.c168-deposit-native-oct22 .c168-deposit-offer-title > img {
  width: .32rem;
  height: .32rem;
  object-fit: contain;
}
.c168-deposit-native-oct22 .c168-pay-offer > button {
  margin-inline-start: auto;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--skin__primary, #0053df);
  font: inherit;
  font-size: .22rem;
}
.c168-pay-page.c168-pay-deposit.c168-deposit-native-oct22 .c168-pay-warning {
  margin: .2rem 0;
  padding: 0;
  font-size: .24rem !important;
  font-weight: 400;
  line-height: 1.3;
  color: var(--skin__lead, #333);
  word-break: break-word;
}
.c168-deposit-native-oct22 .c168-pay-error {
  color: var(--skin__accent_2, #ea1700);
  font-size: .22rem;
  line-height: 1.3;
  margin: .1rem 0;
  word-break: break-word;
}
.c168-pay-page.c168-pay-deposit.c168-deposit-native-oct22 .c168-pay-body > .c168-pay-primary {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100% !important;
  height: .7rem !important;
  min-height: .7rem !important;
  margin: .2rem 0 0 !important;
  padding: 0 .15rem !important;
  border: thin solid var(--skin__primary, #0053df) !important;
  border-radius: .14rem !important;
  background: var(--skin__primary, #0053df) !important;
  color: var(--skin__text_primary, #fff) !important;
  font-family: inherit !important;
  font-size: .24rem !important;
  font-weight: 400;
  line-height: 1.2;
  box-shadow: none !important;
  cursor: pointer;
  transition: opacity .2s;
  box-sizing: border-box;
}
.c168-deposit-native-oct22 .c168-pay-body > .c168-pay-primary::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: #000;
  opacity: 0;
  pointer-events: none;
}
.c168-deposit-native-oct22 .c168-pay-body > .c168-pay-primary:active::before { opacity: .1; }
.c168-pay-page.c168-pay-deposit.c168-deposit-native-oct22 .c168-pay-primary.c168-deposit-unready,
.c168-pay-page.c168-pay-deposit.c168-deposit-native-oct22 .c168-pay-body > .c168-pay-primary:disabled {
  border-color: var(--skin__neutral_2, #7fa9ef) !important;
  background: var(--skin__neutral_2, #7fa9ef) !important;
}
.c168-deposit-native-oct22 .c168-pay-body > .c168-pay-primary:disabled { cursor: not-allowed; opacity: 1 !important; }
.c168-deposit-native-oct22 .c168-pay-body > .c168-pay-primary:disabled::before { display: none; }
.c168-pay-page.c168-pay-deposit.c168-deposit-native-oct22 .c168-pay-code {
  display: block;
  width: 100%;
  min-height: .5rem;
  margin: .12rem 0 0;
  padding: .08rem .1rem;
  border: 0;
  background: transparent;
  color: var(--skin__primary, #0053df);
  font-family: inherit;
  font-size: .22rem;
  font-weight: 400;
  line-height: 1.2;
  box-shadow: none;
}
.c168-deposit-native-oct22 .c168-deposit-go-bottom {
  position: absolute;
  bottom: .5rem;
  inset-inline-end: .2rem;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .1rem;
  height: .56rem;
  padding: .1rem .16rem;
  border: .01rem solid rgba(255, 255, 255, .4);
  border-radius: .14rem;
  background: rgba(0, 0, 0, .6);
  color: #fff;
  font-family: inherit;
  font-size: .18rem;
  font-weight: 400;
  line-height: 1;
  box-sizing: border-box;
}
.c168-deposit-native-oct22 .c168-deposit-go-bottom > img {
  width: .36rem;
  height: .36rem;
  padding: .08rem;
  border-radius: 50%;
  background: var(--skin__primary, #0053df);
  object-fit: contain;
  box-sizing: border-box;
}
@media (prefers-reduced-motion: reduce) {
  .c168-deposit-native-shell > .c168-deposit-native-oct22 { animation: none !important; transition: none !important; }
  .c168-deposit-native-oct22 .c168-pay-body > .c168-pay-primary { transition: none !important; }
}