@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@400;500;600;700;800;900&family=Roboto:wght@400;500;600;700;800;900&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ===== V66.17.14 credit and bonus ledger ===== */
.credit-management-panel .member-panel-heading p {
  margin: 5px 0 0;
  color: #64748b;
  font-size: 13px;
}

.credit-adjust-ledger-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid #bfdbfe;
  border-radius: 10px;
  background: #eff6ff;
  color: #1e40af;
  font-size: 13px;
  line-height: 1.45;
}

.credit-adjust-ledger-note i {
  margin-top: 2px;
}

.member-360-table-v661712 td:last-child {
  max-width: 240px;
  white-space: normal;
  line-height: 1.35;
}

.member-360-table-v661712.is-credit-ledger-v661714 {
  min-width: 1260px;
}

/* ===== V66.17.5 wallet-envelope restriction controls ===== */
.v66175-restriction-panel {
  margin: 0;
  padding: 0 0 8px;
  overflow: hidden;
  border: 1px solid #c9cfd7;
  border-radius: 8px;
  background: #fff;
  box-shadow: none;
}

.v66175-restriction-panel .member-panel-heading p {
  margin: 4px 0 0;
  color: #697386;
  font-size: 11px;
  font-weight: 600;
}

.v66175-restriction-panel .member-toolbar {
  margin-top: 0;
}

.v66175-restriction-table {
  min-width: 900px;
}

.v66175-restriction-table th:nth-child(1) { width: 58px; }
.v66175-restriction-table th:nth-child(5) { width: 76px; }
.v66175-restriction-table th:nth-child(8) { width: 94px; }

.v66175-restriction-reason {
  color: #a94416;
  font-weight: 800;
}

.v66175-restriction-count {
  display: inline-flex;
  min-width: 26px;
  height: 24px;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  color: #b42318;
  background: #fee4e2;
  font-weight: 900;
}

.v66175-restriction-time {
  color: #b42318;
  font-weight: 900;
}

.v66175-unlock-button {
  min-height: 28px;
  padding: 0 10px;
  border: 0;
  border-radius: 4px;
  color: #fff;
  background: #16804e;
  font-size: 10px;
  font-weight: 800;
  cursor: pointer;
}

.v66175-unlock-button:hover { background: #0e6a3e; }
.v66175-unlock-button:disabled { opacity: .48; cursor: not-allowed; }

.v66175-restriction-footer {
  min-height: 42px;
  padding: 7px 12px;
}

.v66175-restriction-footer > div span {
  color: #697386;
  font-size: 10px;
}

.v66175-unlock-dialog {
  z-index: 2147483200;
  width: min(470px, calc(100vw - 24px));
}

.v66175-unlock-dialog::backdrop {
  background: rgba(10, 17, 30, .58);
}

@media (max-width: 700px) {
  .v66175-restriction-panel .member-panel-heading {
    align-items: flex-start;
  }

  .v66175-restriction-footer {
    align-items: flex-start;
    gap: 6px;
  }
}

/* V66.9 — focused deposit review workflow */
/* V66.9.1 — pending deposits: transfer and submitted timestamps use equal columns */
.deposit-data-table-v63.is-pending-v691 th:nth-child(5),
.deposit-data-table-v63.is-pending-v691 th:nth-child(6) {
  width: 120px;
}

.deposit-data-table-v63.is-pending-v691 .deposit-transfer-time-v63,
.deposit-data-table-v63.is-pending-v691 .deposit-created-time-v63 {
  white-space: nowrap;
}

/* V66.10.3 — deposit identity columns.
   Pending keeps the compact V66.10.2 widths. History gets dedicated readable
   widths for split-screen Chrome; horizontal scrolling handles extra width. */
table.deposit-data-table-v63.is-pending-v691 > thead > tr > th:nth-child(2),
table.deposit-data-table-v63.is-pending-v691 > tbody > tr > td:nth-child(2) {
  width: 112px !important;
  min-width: 112px !important;
  max-width: 112px !important;
}

table.deposit-data-table-v63.is-pending-v691 > thead > tr > th:nth-child(3),
table.deposit-data-table-v63.is-pending-v691 > tbody > tr > td:nth-child(3) {
  width: 184px !important;
  min-width: 184px !important;
  max-width: 184px !important;
}

table.deposit-data-table-v63.is-history-v63 {
  min-width: 1305px !important;
}

table.deposit-data-table-v63.is-history-v63 > thead > tr > th:nth-child(2),
table.deposit-data-table-v63.is-history-v63 > tbody > tr > td:nth-child(2) {
  width: 160px !important;
  min-width: 160px !important;
  max-width: 160px !important;
}

table.deposit-data-table-v63.is-history-v63 > thead > tr > th:nth-child(3),
table.deposit-data-table-v63.is-history-v63 > tbody > tr > td:nth-child(3) {
  width: 255px !important;
  min-width: 255px !important;
  max-width: 255px !important;
}

.deposit-confirmed-time-v69 {
  margin: 16px 0;
  padding: 14px;
  border: 1px solid #d8e2ef;
  border-radius: 12px;
  background: #f8fbff;
}

.deposit-confirmed-time-v69 legend {
  padding: 0 6px;
  color: #233653;
  font-size: 14px;
  font-weight: 800;
}

.deposit-confirmed-time-v69 legend span { color: #dc3545; font-size: 12px; }

.deposit-confirmed-time-grid-v69 {
  display: grid;
  grid-template-columns: minmax(130px, 1fr) minmax(105px, .75fr) auto;
  gap: 10px;
  align-items: end;
}

.deposit-confirmed-time-grid-v69 label {
  display: grid;
  gap: 5px;
  color: #53657d;
  font-size: 12px;
  font-weight: 700;
}

.deposit-confirmed-time-grid-v69 input {
  min-height: 42px;
  padding: 8px 10px;
  border: 1px solid #cdd9e7;
  border-radius: 9px;
  background: #fff;
  color: #17263b;
  font-size: 15px;
}

.deposit-confirmed-time-grid-v69 button {
  min-height: 42px;
  padding: 0 13px;
  border: 1px solid #a9c7eb;
  border-radius: 9px;
  background: #eaf4ff;
  color: #1763a9;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}

.deposit-confirmed-time-v69 > small {
  display: block;
  margin-top: 9px;
  color: #718096;
  font-size: 12px;
}

.deposit-data-table-v63 .deposit-status-badge,
.deposit-data-table-v63 .status-text {
  min-width: 74px;
  padding: 7px 10px;
  font-size: 13px !important;
  line-height: 1.25;
}

.deposit-result-dialog-v69 {
  width: min(410px, calc(100vw - 28px));
  padding: 0;
  border: 0;
  border-radius: 15px;
  background: transparent;
  box-shadow: 0 22px 70px rgba(13, 31, 55, .28);
}

.deposit-result-dialog-v69::backdrop { background: rgba(16, 27, 43, .48); }

.deposit-result-card-v69 {
  position: relative;
  padding: 30px 26px 24px;
  border-radius: 15px;
  background: #fff;
  text-align: center;
  animation: depositResultEnterV69 .24s ease-out both;
}

.deposit-result-close-v69 {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 34px;
  height: 34px;
  border: 0;
  background: transparent;
  color: #a8b0ba;
  font-size: 20px;
  cursor: pointer;
}

.deposit-result-icon-v69 {
  display: grid;
  place-items: center;
  width: 74px;
  height: 74px;
  margin: 0 auto 16px;
  border: 3px solid #ccebcf;
  border-radius: 50%;
  color: #65bf6a;
  font-size: 34px;
  animation: depositResultIconV69 .36s .08s ease-out both;
}

.deposit-result-dialog-v69[data-type="error"] .deposit-result-icon-v69,
.deposit-result-dialog-v69[data-type="rejected"] .deposit-result-icon-v69 {
  border-color: #ffd3d7;
  color: #e45561;
}

.deposit-result-card-v69 h3 { margin: 0 0 9px; color: #17263b; font-size: 21px; }
.deposit-result-card-v69 p { margin: 0 auto 22px; color: #53657d; font-size: 15px; line-height: 1.6; }
.deposit-result-confirm-v69 {
  min-width: 104px;
  min-height: 42px;
  padding: 0 22px;
  border: 0;
  border-radius: 9px;
  background: #263c68;
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
}

@keyframes depositResultEnterV69 {
  from { opacity: 0; transform: translateY(10px) scale(.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes depositResultIconV69 {
  from { opacity: 0; transform: scale(.55) rotate(-12deg); }
  to { opacity: 1; transform: scale(1) rotate(0); }
}

@media (max-width: 560px) {
  .deposit-confirmed-time-grid-v69 { grid-template-columns: 1fr 1fr; }
  .deposit-confirmed-time-grid-v69 button { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
  .deposit-result-card-v69,
  .deposit-result-icon-v69 { animation: none; }
}

/* =========================================================
   V66.15 — Customer popup policy and compact professional UI
   Scope: customer dialogs/toasts only; no finance logic.
========================================================= */
body:not(.admin-body) .deposit-realtime-toast,
body:not(.admin-body) .lobby-realtime-toast,
body:not(.admin-body) .casino-toast-container {
  top: auto;
  bottom: calc(86px + env(safe-area-inset-bottom));
  width: min(360px, calc(100vw - 28px));
}

body:not(.admin-body) .deposit-realtime-toast,
body:not(.admin-body) .lobby-realtime-toast,
body:not(.admin-body) .casino-toast {
  min-height: 54px;
  box-sizing: border-box;
  padding: 10px 12px;
  border: 1px solid rgba(134, 166, 190, .28);
  border-left-width: 4px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .97);
  box-shadow: 0 12px 30px rgba(21, 52, 77, .18);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

body:not(.admin-body) .deposit-realtime-toast,
body:not(.admin-body) .lobby-realtime-toast {
  transform: translate(-50%, 14px);
}

body:not(.admin-body) .deposit-realtime-toast.show,
body:not(.admin-body) .lobby-realtime-toast.show {
  transform: translate(-50%, 0);
}

body:not(.admin-body) .deposit-realtime-toast > i,
body:not(.admin-body) .lobby-realtime-toast > i {
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: #edf7fd;
  font-size: 17px;
}

body:not(.admin-body) .deposit-realtime-toast strong,
body:not(.admin-body) .lobby-realtime-toast strong { font-size: 12.5px; font-weight: 850; }
body:not(.admin-body) .deposit-realtime-toast small,
body:not(.admin-body) .lobby-realtime-toast small { font-size: 10.5px; font-weight: 650; }

body:not(.admin-body) .casino-modal-root { padding: 18px; }
body:not(.admin-body) .casino-modal-dialog {
  width: min(390px, calc(100vw - 30px));
  border-radius: 20px;
  padding: 20px;
  box-shadow: 0 24px 64px rgba(8, 38, 59, .30);
}
body:not(.admin-body) .casino-modal-head { gap: 11px; }
body:not(.admin-body) .casino-modal-icon {
  flex-basis: 42px;
  width: 42px;
  height: 42px;
  border-radius: 13px;
  font-size: 20px;
}
body:not(.admin-body) .casino-modal-title { font-size: 18px; }
body:not(.admin-body) .casino-modal-message { margin-top: 13px; font-size: 13.5px; line-height: 1.6; }
body:not(.admin-body) .casino-modal-fields { margin-top: 15px; }
body:not(.admin-body) .casino-modal-button { min-height: 44px; border-radius: 12px; }

@media (max-width: 480px) {
  body:not(.admin-body) .deposit-realtime-toast,
  body:not(.admin-body) .lobby-realtime-toast,
  body:not(.admin-body) .casino-toast-container {
    bottom: calc(82px + env(safe-area-inset-bottom));
  }
}

body {
  font-family: var(--app-font-family);
}

/* =========================
   LOGIN PAGE
========================= */

.login-body {
  min-height: 100vh;
  background: radial-gradient(
    circle at top,
    #2b1c68 0%,
    #3a2857 45%,
    #6a3b62 100%
  );
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 16px;
  color: white;
}

.login-logo-wrap {
  margin-top: 10px;
  margin-bottom: 20px;
}

.login-main-logo {
  width: 280px;
  max-width: 80vw;
  object-fit: contain;
}

.login-card {
  width: 100%;
  max-width: 560px;
  background: #121018;
  border-radius: 28px;
  padding: 40px 30px 50px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
}

.login-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 22px;
  font-size: 14px;
}

.login-head span {
  color: #b8b1c5;
}

.register-btn {
  border: 0;
  background: #311613;
  color: #ff6a22;
  padding: 13px 18px;
  border-radius: 24px;
  font-weight: bold;
  cursor: pointer;
}

.input-row {
  height: 48px;
  background: #edf4ff;
  border-radius: 14px;
  display: flex;
  align-items: center;
  overflow: hidden;
  margin-bottom: 20px;
}

.input-icon {
  width: 55px;
  height: 100%;
  background: #17171a;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}

.input-row input {
  flex: 1;
  height: 100%;
  border: 0;
  background: transparent;
  padding: 0 15px;
  outline: none;
  color: #111;
  font-size: 15px;
}

.input-row input::placeholder {
  color: #697386;
}

.login-btn {
  width: 100%;
  height: 52px;
  border: 0;
  border-radius: 22px;
  margin-top: 25px;
  background: linear-gradient(90deg, #ff4b00, #28110e);
  color: white;
  font-size: 18px;
  font-weight: bold;
  cursor: pointer;
}

.forgot {
  color: #b8b1c5;
  text-align: right;
  margin-top: 10px;
  font-size: 13px;
  font-weight: bold;
}

.or {
  text-align: center;
  color: #b8b1c5;
  margin: 35px 0 20px;
}

.social-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.social-item {
  text-align: center;
  color: white;
  font-size: 14px;
  font-weight: 500;
}

.social-item span {
  color: white;
  font-size: 13px;
}

.social-circle {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 8px;
  font-size: 22px;
  color: white;
}

.google {
  background: #ea4335;
}

.line {
  background: #06c755;
}

.facebook {
  background: #1877f2;
}

.telegram {
  background: #229ed9;
}

/* =========================
   HOME BASE
========================= */

.home-body {
  background: #0d0f14;
  color: white;
}

.app-wrap {
  width: 100%;
  max-width: var(--member-page-width);
  min-height: 100vh;
  margin: auto;
  background:
    radial-gradient(circle at top, rgba(255, 90, 0, 0.12), transparent 35%),
    #111318;
  padding: 0 12px 90px;
}

.app-header {
  height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.app-logo {
  width: 135px;
  max-height: 60px;
  object-fit: contain;
}

.logout-btn,
.refresh-btn,
.header-menu {
  border: 0;
  cursor: pointer;
}

.logout-btn,
.header-menu {
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 16px;
  background: linear-gradient(180deg, #ff7b1d, #ff4d00);
  color: white;
  font-size: 20px;
  box-shadow: 0 6px 18px rgba(255, 98, 0, 0.35);
}

.notice-bar {
  height: 38px;
  background: #1b1e27;
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  color: #c8c8c8;
  font-size: 12px;
  overflow: hidden;
}

.notice-bar i {
  color: #ff6a00;
}

/* =========================
   WALLET
========================= */

.wallet-panel {
  margin-top: 14px;
  background: linear-gradient(135deg, #20242e, #151820);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 22px;
  padding: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.25);
}

.wallet-label {
  color: #8f96a3;
  font-size: 13px;
}

.wallet-money {
  margin-top: 6px;
  font-size: 26px;
  font-weight: 900;
}

.wallet-user {
  margin-top: 6px;
  color: #ff884d;
  font-size: 13px;
}

.refresh-btn {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: #2a2f3b;
  color: #ff6a00;
  font-size: 18px;
}

.spinning i {
  animation: spin 0.8s linear infinite;
}

/* =========================
   QUICK MENU
========================= */

.quick-menu {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-top: 16px;
}

.quick-item {
  background: #1b1e27;
  border-radius: 16px;
  height: 90px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-size: 12px;
  cursor: pointer;
  transition: 0.15s;
}

.quick-item:active {
  transform: scale(0.95);
}

.quick-item i {
  font-size: 32px;
  color: white;
}

.quick-item span {
  font-size: 12px;
  font-weight: 700;
  color: white;
}

.eight-menu {
  grid-template-columns: repeat(4, 1fr);
}

/* =========================
   BANNER IMAGE SLIDER
========================= */

.banner-slider {
  margin-top: 18px;
  overflow: hidden;
  border-radius: 24px;
}

.banner-track {
  display: flex;
  width: 300%;
  animation: slideBanner 12s infinite;
}

.banner-slide {
  width: 100%;
  min-width: 100%;
  height: 130px;
}

.banner-slide img {
  width: 100%;
  height: 130px;
  object-fit: cover;
  border-radius: 24px;
  display: block;
}

@keyframes slideBanner {
  0% {
    transform: translateX(0%);
  }

  30% {
    transform: translateX(0%);
  }

  35% {
    transform: translateX(-100%);
  }

  65% {
    transform: translateX(-100%);
  }

  70% {
    transform: translateX(-200%);
  }

  95% {
    transform: translateX(-200%);
  }

  100% {
    transform: translateX(0%);
  }
}

/* =========================
   CATEGORY
========================= */

.category-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-top: 18px;
}

.category-card {
  height: 105px;
  border-radius: 20px;
  text-decoration: none;
  color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-weight: bold;
  font-size: 13px;
  cursor: pointer;
  transition: 0.15s;
}

.category-card:active {
  transform: scale(0.95);
}

.category-card i {
  font-size: 28px;
}

.category-card .category-custom-image {
  width: 44px;
  height: 44px;
  object-fit: contain;
}

.category-grid {
  grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
}

.category-card.casino {
  background: linear-gradient(135deg, #7a2cff, #271048);
}

/* =========================
   ADMIN GAME MENU
========================= */

.game-menu-panel {
  background: #f7f8fb;
  border: 1px solid #d9dee8;
  border-radius: 14px;
  padding: 14px;
}

.game-menu-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 12px;
}

.game-menu-toolbar h2 {
  margin: 0 0 4px;
  font-size: 20px;
}

.game-menu-toolbar p {
  margin: 0;
  color: #68738a;
  font-size: 13px;
}

.game-menu-toolbar-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.game-menu-toolbar-actions button,
.game-menu-toolbar-actions a {
  min-height: 38px;
  border: 1px solid #c9d1df;
  border-radius: 8px;
  background: #fff;
  color: #1f2a44;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font: inherit;
  font-size: 13px;
  text-decoration: none;
  cursor: pointer;
}

.game-menu-toolbar-actions button:first-child {
  background: #172033;
  border-color: #172033;
  color: #fff;
}

.game-menu-toolbar-actions button:disabled {
  opacity: .45;
  cursor: not-allowed;
}

.game-menu-notice {
  margin: 0 0 12px;
  padding: 10px 12px;
  border: 1px solid #cfe1ff;
  border-radius: 8px;
  background: #eef5ff;
  color: #34517a;
  font-size: 13px;
}

.game-menu-notice.error {
  border-color: #ffc3c3;
  background: #fff0f0;
  color: #a12222;
}

.game-menu-columns {
  display: grid;
  grid-template-columns: minmax(230px, .8fr) minmax(300px, 1fr) minmax(360px, 1.35fr);
  gap: 12px;
  min-height: 580px;
}

.game-menu-column {
  min-width: 0;
  background: #fff;
  border: 1px solid #d9dee8;
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.game-menu-column > header {
  min-height: 48px;
  padding: 0 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #e2e6ed;
  background: #f9fafc;
}

.game-menu-column > header h3 {
  margin: 0;
  font-size: 16px;
}

.game-menu-column > header span {
  min-width: 28px;
  height: 24px;
  padding: 0 7px;
  border-radius: 12px;
  background: #e9edf5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #536078;
  font-size: 12px;
}

.game-menu-search {
  margin: 9px;
  min-height: 38px;
  padding: 0 10px;
  border: 1px solid #cdd4e0;
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #7a8497;
}

.game-menu-search input {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  font: inherit;
}

.game-menu-list {
  overflow: auto;
  flex: 1;
  min-height: 0;
  padding: 6px;
}

.game-menu-row {
  min-height: 62px;
  margin-bottom: 5px;
  padding: 6px;
  display: grid;
  grid-template-columns: 48px minmax(75px, 1fr) auto;
  align-items: center;
  gap: 8px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: #fff;
  transition: background .15s, border-color .15s;
  content-visibility: auto;
  contain-intrinsic-size: 62px;
}

.game-menu-row:hover {
  background: #f5f7fb;
}

.game-menu-row.selected {
  border-color: #9fb6e8;
  background: #eaf1ff;
}

.game-menu-row.disabled {
  opacity: .58;
  background: #f3f3f3;
}

.game-menu-thumbnail {
  width: 46px;
  height: 46px;
  padding: 0;
  border: 1px dashed #aeb8c8;
  border-radius: 8px;
  background: #f7f9fc;
  color: #8390a7;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  cursor: pointer;
}

.game-menu-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.game-menu-thumbnail i {
  font-size: 20px;
}

.game-menu-row-text {
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #172033;
  text-align: left;
  font: inherit;
  cursor: pointer;
}

div.game-menu-row-text {
  cursor: default;
}

.game-menu-row-text strong,
.game-menu-row-text small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.game-menu-row-text strong {
  font-size: 13px;
}

.game-menu-row-text small {
  margin-top: 4px;
  color: #7c8799;
  font-size: 10px;
}

.game-menu-row-tools {
  display: flex;
  align-items: center;
  gap: 5px;
}

.game-menu-order {
  display: flex;
  gap: 2px;
}

.game-menu-row-tools .member-icon-action {
  width: 26px;
  height: 26px;
  min-width: 26px;
  border-radius: 6px;
  font-size: 11px;
}

.game-menu-row-tools .member-icon-action:disabled {
  opacity: .25;
  cursor: not-allowed;
}

.game-menu-reset-image {
  color: #cc6b00 !important;
}

.game-menu-toggle {
  width: 38px;
  height: 22px;
  padding: 2px;
  border: 0;
  border-radius: 12px;
  background: #a8afbb;
  cursor: pointer;
  transition: background .15s;
}

.game-menu-toggle span {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  display: block;
  box-shadow: 0 1px 3px #0004;
  transition: transform .15s;
}

.game-menu-toggle.is-on {
  background: #244f9d;
}

.game-menu-toggle.is-on span {
  transform: translateX(16px);
}

.game-menu-empty {
  margin: 24px 12px;
  color: #788398;
  text-align: center;
  font-size: 13px;
  line-height: 1.6;
}

.game-menu-load-more {
  width: calc(100% - 12px);
  min-height: 40px;
  margin: 10px 6px 14px;
  border: 1px solid #b8c7e3;
  border-radius: 8px;
  background: #edf3ff;
  color: #244f9d;
  font-weight: 700;
  cursor: pointer;
}

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

  .game-menu-column:last-child {
    grid-column: 1 / -1;
    min-height: 420px;
  }
}

@media (max-width: 760px) {
  .game-menu-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .game-menu-toolbar-actions {
    justify-content: flex-start;
  }

  .game-menu-columns {
    display: block;
  }

  .game-menu-column {
    min-height: 420px;
    margin-bottom: 12px;
  }
}

.category-grid:has(.category-card.recent[hidden]) {
  grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
}

.category-card.recent {
  background: linear-gradient(135deg, #3f73e8, #17306e);
}

.category-card.slot {
  background: linear-gradient(135deg, #ff6a00, #3b1600);
}

.category-card.sport {
  background: linear-gradient(135deg, #21b954, #062711);
}

/* =========================
   PROVIDERS
========================= */

.hot-section {
  margin-top: 22px;
}

.section-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.section-title span {
  font-size: 18px;
  font-weight: 900;
}

.section-title small {
  color: #ff6a00;
}

.provider-preview {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  align-items: stretch;
}

.mini-provider {
  height: 105px;
  min-height: 105px;
  background: #1b1e27;
  border-radius: 14px;
  padding: 8px 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  text-align: center;
  overflow: hidden;
  cursor: pointer;
  transition: 0.15s;
}

.mini-provider:active {
  transform: scale(0.95);
}

.mini-provider img {
  width: 58px;
  height: 58px;
  object-fit: contain;
  flex-shrink: 0;
}

.mini-provider span {
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: bold;
  line-height: 1.1;
  text-align: center;
  overflow: hidden;
}

/* =========================
   GAMES PAGE
========================= */

.provider-header {
  height: 68px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.provider-header h3 {
  font-size: 18px;
  font-weight: 900;
}

.back-btn {
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 14px;
  background: #1b1e27;
  color: #ff6a00;
  font-size: 18px;
  cursor: pointer;
}

.game-search {
  margin-bottom: 16px;
}

.provider-lobby-button {
  width: 100%;
  min-height: 52px;
  margin-bottom: 14px;
  border: 1px solid rgba(255, 122, 0, 0.55);
  border-radius: 14px;
  background: linear-gradient(90deg, #ff4b00, #9d250f);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-weight: 900;
  cursor: pointer;
}

.provider-lobby-button[hidden] {
  display: none;
}

.game-search input {
  width: 100%;
  height: 48px;
  border: none;
  outline: none;
  border-radius: 14px;
  background: #1b1e27;
  padding: 0 16px;
  color: white;
}

.game-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.game-card {
  background: #1b1e27;
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  transition: 0.15s;
  content-visibility: auto;
  contain-intrinsic-size: 160px;
}

.game-card:active {
  transform: scale(0.95);
}

.game-card img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.game-card span {
  display: block;
  padding: 8px 6px;
  font-size: 11px;
  text-align: center;
  font-weight: bold;
}

.empty-text {
  grid-column: 1 / -1;
  text-align: center;
  color: #aaa;
  padding: 30px 0;
}

/* =========================
   BOTTOM NAV
========================= */

.bottom-nav {
  position: fixed;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 100%;
  max-width: 430px;
  height: 68px;
  background: #181b23;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.bottom-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  color: #8f96a3;
  font-size: 11px;
}

.bottom-item i {
  font-size: 19px;
}

.bottom-item.active {
  color: #ff6a00;
}

/* =========================
   LOADING
========================= */

.page-loading {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 99999;
}

.page-loading.show {
  display: flex;
}

.loading-box {
  background: #1b1e27;
  border-radius: 18px;
  padding: 22px 26px;
  color: white;
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: bold;
}

.loading-box i {
  color: #ff6a00;
  font-size: 24px;
}

/* =========================
   ANIMATION
========================= */

@keyframes spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

/* =========================
   RESPONSIVE
========================= */

@media (max-width: 600px) {
  .login-body {
    padding: 10px 12px;
  }

  .login-logo-wrap {
    margin-top: 0;
    margin-bottom: 10px;
  }

  .login-main-logo {
    width: 210px;
  }

  .login-card {
    padding: 30px 18px 40px;
    border-radius: 24px;
  }
}

/* =========================
   USER MENU POPUP
========================= */

.menu-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 99998;
  padding: 16px;
}

.menu-overlay.show {
  display: flex;
}

.menu-overlay.show .user-menu-box {
  animation: menuPop 0.22s ease-out;
}

.user-menu-box {
  width: 100%;
  max-width: 390px;
  background: linear-gradient(180deg, #211060, #161038);
  border: 1px solid rgba(255, 120, 0, 0.35);
  border-radius: 24px;
  padding: 24px 20px 20px;
  color: white;
  position: relative;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55);
}

.menu-close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: 50%;
  background: white;
  color: #211060;
  font-size: 18px;
  font-weight: 900;
  cursor: pointer;
}

.user-menu-box h3 {
  font-size: 20px;
  font-weight: 900;
  margin-bottom: 18px;
}

.menu-welcome {
  font-size: 13px;
  color: #d8d2ff;
  margin-bottom: 20px;
}

.menu-welcome span {
  color: #ffffff;
  font-weight: 900;
}

.menu-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px 10px;
  padding: 10px 0 24px;
  border-bottom: 1px solid rgba(255, 100, 0, 0.45);
}

.menu-item {
  min-height: 70px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 9px;
  cursor: pointer;
  transition: 0.15s;
}

.menu-item:active {
  transform: scale(0.94);
}

.menu-item i {
  font-size: 26px;
  color: #ffffff;
  text-shadow: 0 0 14px rgba(128, 128, 128, 0.45);
}

.menu-item span {
  font-size: 12px;
  color: white;
  font-weight: 700;
}

.menu-logout {
  width: 100%;
  height: 48px;
  border: 0;
  border-radius: 24px;
  margin-top: 16px;
  background: #e93449;
  color: white;
  font-size: 15px;
  font-weight: 900;
  cursor: pointer;
}

.menu-logout i {
  margin-right: 8px;
}

@keyframes menuPop {
  from {
    opacity: 0;
    transform: scale(0.88) translateY(20px);
  }

  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* =========================
   PROMOTION PAGE
========================= */

.promo-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 10px;
}

.promo-card {
  background: #1b1e27;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

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

.promo-content {
  padding: 14px;
}

.promo-content h3 {
  font-size: 17px;
  margin-bottom: 6px;
}

.promo-content p {
  font-size: 13px;
  color: #b8b8b8;
  margin-bottom: 12px;
}

.promo-content button {
  width: 100%;
  height: 42px;
  border: 0;
  border-radius: 14px;
  background: linear-gradient(180deg, #ff7b1d, #ff4d00);
  color: white;
  font-weight: 900;
  cursor: pointer;
}

/* =========================
   DEPOSIT PAGE
========================= */

.deposit-card {
  margin-top: 10px;
  background: #1b1e27;
  border-radius: 22px;
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.deposit-title {
  font-size: 18px;
  font-weight: 900;
  margin-bottom: 16px;
}

.deposit-bank-box {
  background: #111318;
  border-radius: 18px;
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}

.bank-logo {
  width: 54px;
  height: 54px;
  border-radius: 14px;
  object-fit: contain;
  background: white;
  padding: 6px;
}

.bank-name {
  font-size: 15px;
  font-weight: 900;
}

.bank-number {
  margin-top: 5px;
  font-size: 20px;
  font-weight: 900;
  color: #ff884d;
}

.bank-user {
  margin-top: 5px;
  font-size: 12px;
  color: #b8b8b8;
}

.copy-bank-btn,
.submit-deposit-btn {
  width: 100%;
  height: 46px;
  border: 0;
  border-radius: 16px;
  font-weight: 900;
  cursor: pointer;
}

.copy-bank-btn {
  background: #2a2f3b;
  color: white;
  margin-bottom: 16px;
}

.deposit-input-wrap {
  margin-bottom: 16px;
}

.deposit-input-wrap label {
  display: block;
  font-size: 13px;
  color: #b8b8b8;
  margin-bottom: 8px;
}

.deposit-input-wrap input {
  width: 100%;
  height: 48px;
  border: 0;
  outline: none;
  border-radius: 14px;
  background: #111318;
  color: white;
  padding: 0 14px;
  font-size: 16px;
}

.submit-deposit-btn {
  background: linear-gradient(180deg, #ff7b1d, #ff4d00);
  color: white;
}

.game-load-more {
  grid-column: 1 / -1;
  min-height: 46px;
  border: 1px solid #394254;
  border-radius: 12px;
  background: #222735;
  color: #fff;
  font-weight: 800;
  cursor: pointer;
}

/* ===== Safe V1 additions ===== */

[hidden] {
  display: none !important;
}

button,
input,
select,
textarea {
  font: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

.auth-page {
  width: min(100%, 680px);
  margin: 0 auto;
  padding: 24px 16px 48px;
}

.login-card {
  width: 100%;
}

.login-head .register-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.login-card .input-row {
  display: flex;
}

.form-message {
  min-height: 24px;
  margin: 10px 0;
  color: #d54444;
  font-size: 14px;
  line-height: 1.5;
}

.register-card {
  max-width: 680px;
}

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

.form-grid label,
.stack-label {
  display: grid;
  gap: 7px;
  color: #313849;
  font-weight: 700;
}

.form-grid input,
.stack-label input,
.stack-form input,
.stack-form select,
.stack-form textarea {
  width: 100%;
  min-height: 46px;
  padding: 10px 12px;
  border: 1px solid #d8deea;
  border-radius: 10px;
  color: #1e2636;
  background: #fff;
  outline: none;
}

.form-grid input:focus,
.stack-label input:focus,
.stack-form input:focus {
  border-color: #4d70df;
  box-shadow: 0 0 0 3px rgba(77, 112, 223, 0.14);
}

.form-grid small {
  color: #737e91;
  font-weight: 400;
  line-height: 1.4;
}

.form-grid .full-row {
  grid-column: 1 / -1;
}

.quick-item,
.category-card,
.mini-provider,
.game-card,
.bottom-item {
  border: 0;
  cursor: pointer;
  text-decoration: none;
}

.quick-item {
  background: transparent;
}

.category-card {
  width: 100%;
}

.mini-provider {
  color: inherit;
}

.image-missing {
  opacity: 0;
}

.asset-placeholder {
  width: 58px;
  height: 58px;
  flex-shrink: 0;
  border-radius: 15px;
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, #ff7a00, #ff3d6e);
  color: #fff;
  font-size: 16px;
  font-weight: 900;
  letter-spacing: 0.04em;
}

.asset-placeholder[hidden] {
  display: none;
}

.game-asset-placeholder {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  border-radius: 0;
  font-size: 24px;
}

.banner-placeholder {
  min-height: 150px;
  margin: 18px 16px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 20px;
  color: #fff;
  background:
    radial-gradient(circle at 15% 25%, rgba(255,255,255,.2), transparent 24%),
    linear-gradient(135deg, #2e52bf, #7555d9 55%, #d44f8c);
  box-shadow: 0 16px 35px rgba(43, 66, 145, .25);
}

.banner-placeholder strong {
  font-size: clamp(28px, 8vw, 46px);
  letter-spacing: 3px;
}

.quick-menu-custom-icon {
  width: 40px;
  height: 40px;
  object-fit: contain;
}

.banner-placeholder {
  position: relative;
  min-height: 210px;
  margin-left: 0;
  margin-right: 0;
  padding: 0;
  overflow: hidden;
}

.banner-fallback {
  min-height: 210px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.banner-fallback[hidden] {
  display: none;
}

.lobby-banner-slides,
.lobby-banner-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.lobby-banner-slide {
  object-fit: cover;
  opacity: 0;
  transition: opacity .45s ease;
}

.lobby-banner-slide.active {
  opacity: 1;
}

.lobby-banner-dots {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  bottom: 10px;
  display: flex;
  justify-content: center;
  gap: 6px;
}

.lobby-banner-dots button {
  width: 7px;
  height: 7px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.48);
  box-shadow: 0 1px 4px #0008;
  cursor: pointer;
}

.lobby-banner-dots button.active {
  width: 20px;
  border-radius: 6px;
  background: #fff;
}

.menu-overlay[hidden] {
  display: none;
}

.menu-grid a.menu-item {
  color: inherit;
  text-decoration: none;
}

.bottom-nav a,
.bottom-nav button {
  color: inherit;
  background: transparent;
}

.wallet-app {
  padding-bottom: 48px;
}

.wallet-summary-card {
  margin: 18px 16px 12px;
  padding: 22px;
  display: grid;
  gap: 7px;
  border-radius: 18px;
  color: #fff;
  background: linear-gradient(135deg, #315bcb, #7855dc);
  box-shadow: 0 12px 30px rgba(48, 83, 181, .25);
}

.wallet-summary-card span {
  opacity: .82;
}

.wallet-summary-card strong {
  font-size: 30px;
}

.wallet-summary-card button {
  justify-self: start;
  margin-top: 4px;
  padding: 7px 13px;
  border: 1px solid rgba(255,255,255,.45);
  border-radius: 99px;
  color: #fff;
  background: rgba(255,255,255,.12);
  cursor: pointer;
}

.wallet-tabs {
  margin: 0 16px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-radius: 14px;
  background: #e9edf6;
  overflow: hidden;
}

.recent-game-card small {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #aeb7ca;
  font-size: 9px;
  line-height: 1;
}

.recent-game-card img,
.recent-game-card .asset-placeholder {
  width: 50px;
  height: 50px;
}

@media (max-width: 420px) {
  .category-grid {
    gap: 7px;
  }

  .category-card {
    height: 88px;
    border-radius: 16px;
    gap: 7px;
    font-size: 11px;
  }

  .category-card i {
    font-size: 23px;
  }
}

/* Games catalog: compact, readable cards independent from the main lobby. */
.games-page-body {
  background: #080b11;
}

.games-page-body .app-wrap {
  background:
    radial-gradient(circle at 50% -15%, rgba(255, 102, 0, 0.13), transparent 34%),
    #0e1118;
  padding-right: 14px;
  padding-left: 14px;
}

.games-page-body .provider-header {
  position: sticky;
  z-index: 5;
  top: 0;
  height: 72px;
  background: rgba(14, 17, 24, 0.94);
  backdrop-filter: blur(10px);
}

.games-page-body .provider-header h3 {
  color: #f7f8fc;
  letter-spacing: 0.02em;
}

.games-page-body .back-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: #191e29;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

.games-page-body .game-search {
  margin: 2px 0 18px;
}

.games-page-body .game-search input {
  height: 52px;
  border: 1px solid #252c3a;
  border-radius: 16px;
  background: #171c27;
  color: #f5f7fb;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
  transition: border-color 0.18s, box-shadow 0.18s;
}

.games-page-body .game-search input::placeholder {
  color: #7f899b;
}

.games-page-body .game-search input:focus {
  border-color: rgba(255, 106, 0, 0.72);
  box-shadow: 0 0 0 3px rgba(255, 106, 0, 0.11);
}

.games-page-body .game-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px 10px !important;
  align-items: stretch;
}

.games-page-body .game-card {
  min-width: 0;
  border: 1px solid #222937;
  border-radius: 16px;
  background: #171c26;
  color: #f5f7fb;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
  transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}

.games-page-body .game-card:hover {
  border-color: #343e50;
  box-shadow: 0 11px 26px rgba(0, 0, 0, 0.26);
  transform: translateY(-2px);
}

.games-page-body .game-card:active {
  transform: scale(0.97);
}

.games-page-body .game-card img,
.games-page-body .game-card .game-asset-placeholder {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 15px 15px 0 0;
}

.games-page-body .game-card img {
  object-fit: cover;
  background: #202632;
}

.games-page-body .game-card span {
  min-height: 46px;
  padding: 8px 7px 9px;
  display: -webkit-box;
  overflow: hidden;
  color: #f3f5fa;
  font-size: 11px;
  font-weight: 750;
  line-height: 1.3;
  text-align: center;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.games-page-body .empty-text {
  color: #929bad;
}

@media (max-width: 360px) {
  .games-page-body .game-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* V66.10: blocking admin session-expired notice */
.admin-session-expired-overlay {
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(8, 12, 18, .76);
  backdrop-filter: blur(7px);
}

.admin-session-expired-card {
  width: min(100%, 430px);
  padding: 30px 26px 26px;
  border: 1px solid rgba(255, 255, 255, .11);
  border-radius: 20px;
  color: #eff6ff;
  text-align: center;
  background: linear-gradient(155deg, #182332, #101720);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .42);
}

.admin-session-expired-icon {
  display: grid;
  width: 58px;
  height: 58px;
  margin: 0 auto 16px;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  font-size: 32px;
  font-weight: 800;
  background: #ef4444;
  box-shadow: 0 0 0 8px rgba(239, 68, 68, .13);
}

.admin-session-expired-card h2 {
  margin: 0 0 10px;
  font-size: 25px;
  line-height: 1.3;
}

.admin-session-expired-card p {
  margin: 0 auto 22px;
  max-width: 340px;
  color: #b9c6d6;
  font-size: 16px;
  line-height: 1.65;
}

.admin-session-expired-card button {
  width: 100%;
  min-height: 48px;
  border: 0;
  border-radius: 12px;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
}

.admin-session-expired-card button:focus-visible {
  outline: 3px solid rgba(96, 165, 250, .48);
  outline-offset: 3px;
}

.admin-session-expired-card button:disabled {
  cursor: wait;
  opacity: .72;
}

/* Larger provider logos in the member lobby. Keep recent-game cards compact. */
@media (max-width: 600px) {
  .provider-preview {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px;
  }

  .mini-provider:not(.recent-game-card) {
    height: 146px;
    min-height: 146px;
    padding: 8px 5px 7px;
  }

  .mini-provider:not(.recent-game-card) img,
  .mini-provider:not(.recent-game-card) .asset-placeholder {
    width: 95px;
    height: 95px;
    max-width: 95%;
    border-radius: 12px;
    object-fit: contain;
  }

  .mini-provider:not(.recent-game-card) span {
    width: 100%;
    height: 34px;
    font-size: 10.5px;
    line-height: 1.15;
    white-space: normal;
  }

  .mini-provider.recent-game-card {
    height: 160px;
    min-height: 160px;
    padding: 8px 5px 7px;
  }

  .mini-provider.recent-game-card img,
  .mini-provider.recent-game-card .asset-placeholder {
    width: 95px;
    height: 95px;
    max-width: 95%;
    border-radius: 12px;
    object-fit: contain;
  }

  .mini-provider.recent-game-card span {
    width: 100%;
    height: 28px;
    font-size: 10.5px;
    line-height: 1.15;
    white-space: normal;
  }

  .mini-provider.recent-game-card small {
    height: 12px;
    font-size: 9px;
  }
}

.wallet-tabs button {
  padding: 12px 8px;
  border: 0;
  color: #596378;
  background: transparent;
  font-weight: 700;
  cursor: pointer;
}

.wallet-tabs button.active {
  color: #fff;
  background: #4266d4;
}

.wallet-section {
  margin: 14px 16px;
  padding: 20px;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 8px 25px rgba(33, 47, 84, .08);
}

.wallet-section h2 {
  margin: 0 0 18px;
  font-size: 20px;
}

.deposit-account-box {
  margin-bottom: 18px;
  padding: 18px;
  display: grid;
  gap: 7px;
  border: 1px solid #dce4f4;
  border-radius: 14px;
  background: #f7f9fe;
}

.deposit-account-box strong {
  color: #2e57c2;
  font-size: 24px;
}

.deposit-account-box button {
  justify-self: start;
  padding: 8px 12px;
  border: 0;
  border-radius: 8px;
  color: #fff;
  background: #2ea765;
  cursor: pointer;
}

.stack-form {
  display: grid;
  gap: 14px;
}

.stack-form label {
  display: grid;
  gap: 7px;
  color: #3a4356;
  font-weight: 700;
}

.primary-action {
  display: inline-flex;
  min-height: 46px;
  padding: 10px 18px;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 11px;
  color: #fff;
  background: linear-gradient(135deg, #345ecb, #7253d7);
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
}

.primary-action:disabled,
.login-btn:disabled {
  opacity: .55;
  cursor: wait;
}

.safe-note,
.bank-preview {
  padding: 12px 14px;
  border-radius: 10px;
  color: #566073;
  background: #f2f5fa;
  line-height: 1.6;
}

/* Legacy wallet history — scoped to wallet.html only. */
.wallet-app .history-list {
  display: grid;
  gap: 10px;
}

.wallet-app .history-item {
  padding: 14px;
  border: 1px solid #e3e8f1;
  border-radius: 12px;
}

.wallet-app .history-item > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.wallet-app .history-item span {
  padding: 4px 8px;
  border-radius: 99px;
  color: #42506b;
  background: #eef2f8;
  font-size: 12px;
}

.wallet-app .history-item small {
  display: block;
  margin-top: 7px;
  color: #7a8497;
}

.wallet-app .history-item p {
  margin: 8px 0 0;
  color: #b34848;
}

.redirect-card,
.mock-game-card {
  width: min(92%, 520px);
  margin: 15vh auto 0;
  padding: 28px;
  border-radius: 20px;
  text-align: center;
  background: #fff;
  box-shadow: 0 18px 55px rgba(28, 42, 86, .15);
}

.mock-game-body {
  min-height: 100vh;
  margin: 0;
  padding: 1px;
  font-family: var(--app-font-family);
  color: #27324a;
  background: linear-gradient(135deg, #eaf0ff, #f8ecff);
}

.promo-placeholder {
  min-height: 190px;
  display: flex;
  align-items: end;
  background: linear-gradient(135deg, #345ecb, #934fba);
}

.promo-placeholder .promo-content {
  width: 100%;
  color: #fff;
  background: rgba(20, 28, 62, .38);
}

.back-home-link {
  display: block;
  margin-top: 14px;
  color: #5570c7;
  text-align: center;
  text-decoration: none;
}

.admin-body {
  min-height: 100vh;
  margin: 0;
  font-family: var(--app-font-family);
  color: #273047;
  background: #f1f4f9;
}

.admin-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 245px minmax(0, 1fr);
}

.admin-sidebar {
  padding: 18px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: #dbe4f7;
  background: #202b40;
}

.admin-brand {
  margin-bottom: 16px;
  padding: 8px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.admin-brand img {
  width: 42px;
  height: 42px;
  object-fit: contain;
}

.admin-sidebar button {
  width: 100%;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 0;
  border-radius: 9px;
  color: inherit;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.admin-sidebar button.active,
.admin-sidebar button:hover {
  color: #fff;
  background: #33445f;
}

.admin-sidebar .admin-menu-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#adminLogout {
  margin-top: auto;
  color: #ffb7ba;
}

.admin-main {
  min-width: 0;
  padding: 24px;
}

.admin-topbar {
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.admin-topbar h1,
.admin-topbar p {
  margin: 0;
}

.admin-topbar p {
  margin-top: 5px;
  color: #778298;
}

.admin-topbar button,
.table-toolbar button {
  padding: 9px 13px;
  border: 0;
  border-radius: 8px;
  color: #fff;
  background: #4668ce;
  cursor: pointer;
}

.admin-message {
  min-height: 22px;
  color: #268b58;
}

.admin-message.error {
  color: #c13c45;
}

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

.dashboard-cards article,
.admin-info-box,
[data-admin-panel]:not([data-admin-panel="dashboard"]) {
  padding: 18px;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 6px 20px rgba(38, 52, 89, .06);
}

.dashboard-cards article {
  display: grid;
  gap: 8px;
}

.dashboard-cards span,
.dashboard-cards small {
  color: #748096;
}

.dashboard-cards strong {
  font-size: 27px;
}

.admin-info-box {
  margin-top: 16px;
}

.admin-info-box h2 {
  margin-top: 0;
}

.admin-info-box li {
  margin: 8px 0;
}

.table-toolbar {
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.table-toolbar h2 {
  margin: 0 auto 0 0;
}

.table-toolbar input,
.table-toolbar select {
  min-height: 40px;
  padding: 8px 10px;
  border: 1px solid #d6ddeb;
  border-radius: 8px;
}

.table-scroll {
  overflow-x: auto;
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  white-space: pre-line;
}

.admin-table th,
.admin-table td {
  padding: 11px 10px;
  border-bottom: 1px solid #e5e9f1;
  vertical-align: top;
  text-align: left;
  font-size: 13px;
}

.admin-table th {
  color: #667288;
  background: #f7f9fc;
}

.empty-cell {
  padding: 28px !important;
  color: #7c879a;
  text-align: center !important;
}

.table-actions {
  min-width: 180px;
}

.table-actions button,
.table-actions a {
  margin: 2px;
  padding: 7px 9px;
  display: inline-flex;
  border: 0;
  border-radius: 7px;
  color: #fff;
  font-size: 12px;
  text-decoration: none;
  cursor: pointer;
}

.action-approve { background: #279b61; }
.action-reject { background: #d84d57; }
.action-deduct { background: #df8a25; }
.action-refund { background: #7b55c7; }
.action-view { background: #367ac5; }

.status-text {
  font-weight: 700;
}

.status-completed,
.status-paid { color: #228652; }
.status-pending { color: #c67919; }
.status-rejected,
.status-provider_failed { color: #c33e48; }
.status-provider_unknown { color: #8b4cb2; }
.status-deducted { color: #306cc2; }

/* =========================
   ADMIN LOBBY SETTINGS
========================= */

.lobby-settings-panel {
  background: #f7f8fb !important;
  border: 1px solid #d9dee8;
}

.lobby-settings-tabs {
  margin-bottom: 14px;
  display: flex;
  gap: 8px;
  border-bottom: 1px solid #d9dee8;
}

.lobby-settings-tabs button {
  min-height: 42px;
  margin-bottom: -1px;
  padding: 0 16px;
  border: 1px solid transparent;
  border-radius: 9px 9px 0 0;
  background: transparent;
  color: #536078;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.lobby-settings-tabs button.active {
  border-color: #d9dee8 #d9dee8 #fff;
  background: #fff;
  color: #244f9d;
}

.lobby-menu-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(250px, 1fr));
  gap: 12px;
}

.lobby-menu-card {
  padding: 14px;
  border: 1px solid #d7deea;
  border-radius: 10px;
  background: #fff;
  display: grid;
  gap: 11px;
}

.lobby-menu-card.disabled {
  background: #f2f3f6;
  opacity: .72;
}

.lobby-menu-card-heading {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}

.lobby-menu-card-heading strong,
.lobby-menu-card-heading small {
  display: block;
}

.lobby-menu-card-heading small {
  margin-top: 3px;
  color: #8490a4;
  font-size: 10px;
}

.lobby-menu-icon-upload {
  width: 52px;
  height: 52px;
  padding: 4px;
  border: 1px dashed #9ba8bd;
  border-radius: 10px;
  background: #f6f8fc;
  color: #244f9d;
  cursor: pointer;
  overflow: hidden;
}

.lobby-menu-icon-upload i { font-size: 22px; }
.lobby-menu-icon-upload img { width: 100%; height: 100%; object-fit: contain; }

.lobby-menu-order {
  display: grid;
  gap: 4px;
}

.lobby-menu-order .member-icon-action {
  width: 26px;
  height: 24px;
  min-width: 26px;
  border-radius: 6px;
  font-size: 10px;
}

.lobby-menu-card > label,
.lobby-design-fields label {
  display: grid;
  gap: 5px;
  color: #536078;
  font-size: 12px;
  font-weight: 700;
}

.lobby-menu-card input[type="text"],
.lobby-design-fields input,
.lobby-design-fields textarea {
  width: 100%;
  min-height: 39px;
  padding: 8px 10px;
  border: 1px solid #cbd3e0;
  border-radius: 7px;
  background: #fff;
  color: #172033;
  font: inherit;
  box-sizing: border-box;
}

.lobby-design-fields textarea { resize: vertical; }

.lobby-menu-card-footer {
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 7px;
}

.lobby-enabled-label {
  margin-right: auto;
  color: #34425d;
  font-size: 12px;
  font-weight: 700;
}

.primary-action,
.lobby-reset-button {
  min-height: 34px;
  padding: 0 11px;
  border: 1px solid #c7d0df;
  border-radius: 7px;
  background: #fff;
  color: #44526c;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.primary-action {
  border-color: #244f9d;
  background: #244f9d;
  color: #fff;
}

.primary-action:disabled,
.lobby-reset-button:disabled { opacity: .45; cursor: not-allowed; }

.lobby-design-grid {
  display: grid;
  grid-template-columns: minmax(230px, .7fr) minmax(320px, 1.3fr);
  gap: 14px;
}

.lobby-design-card {
  padding: 16px;
  border: 1px solid #d7deea;
  border-radius: 10px;
  background: #fff;
  display: grid;
  align-content: start;
  gap: 12px;
}

.lobby-design-card h3 { margin: 0; }
.lobby-design-card small { color: #7a8598; line-height: 1.5; }

.lobby-logo-upload {
  width: 100%;
  height: 150px;
  padding: 12px;
  border: 1px dashed #9ca9bd;
  border-radius: 10px;
  background: #f4f6fa;
  cursor: pointer;
}

.lobby-logo-upload img { width: 100%; height: 100%; object-fit: contain; }

.lobby-banner-heading {
  margin: 20px 0 10px;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
}

.lobby-banner-heading h3,
.lobby-banner-heading p { margin: 0; }
.lobby-banner-heading p,
.lobby-banner-heading small { color: #748096; font-size: 12px; }

.lobby-banner-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(260px, 1fr));
  gap: 12px;
}

.lobby-banner-card {
  padding: 12px;
  border: 1px solid #d7deea;
  border-radius: 10px;
  background: #fff;
  display: grid;
  gap: 9px;
}

.lobby-banner-upload {
  width: 100%;
  aspect-ratio: 16 / 7;
  padding: 0;
  border: 1px dashed #9ca9bd;
  border-radius: 9px;
  background: #f4f6fa;
  color: #79869b;
  display: grid;
  place-items: center;
  overflow: hidden;
  cursor: pointer;
}

.lobby-banner-upload i { font-size: 30px; }
.lobby-banner-upload span { font-size: 12px; }
.lobby-banner-upload img { width: 100%; height: 100%; object-fit: cover; }

.lobby-help-box {
  margin-top: 14px;
  padding: 13px 16px;
  border: 1px solid #cfe1ff;
  border-radius: 9px;
  background: #eef5ff;
  color: #34517a;
  font-size: 13px;
}

.lobby-help-box ol { margin: 8px 0 0; padding-left: 22px; }
.lobby-help-box li { margin: 4px 0; }

@media (max-width: 1080px) {
  .lobby-menu-grid { grid-template-columns: repeat(2, minmax(250px, 1fr)); }
}

@media (max-width: 700px) {
  .lobby-menu-grid,
  .lobby-design-grid,
  .lobby-banner-grid { grid-template-columns: 1fr; }
  .lobby-settings-tabs { overflow-x: auto; }
  .lobby-settings-tabs button { white-space: nowrap; }
  .lobby-banner-heading { align-items: flex-start; flex-direction: column; }
}

/* =========================
   ADMIN MEMBER MANAGEMENT
========================= */

.admin-body {
  font-family: var(--app-font-family);
}

.member-management-panel {
  padding: 0 !important;
  overflow: hidden;
  border-radius: 4px !important;
  background: #ececec !important;
  box-shadow: none !important;
}

.member-panel-heading {
  padding: 14px 10px 8px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.member-panel-heading h2 {
  margin: 0;
  color: #172238;
  font-size: 19px;
}

.member-panel-heading small {
  display: block;
  margin-top: 3px;
  color: #8b95a8;
  font-size: 11px;
}

.member-toolbar {
  padding: 7px 10px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.member-search-box {
  width: min(100%, 305px);
  height: 36px;
  padding: 0 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #aeb6c3;
  border-radius: 4px;
  background: #fff;
}

.member-search-box i {
  color: #8b95a3;
  font-size: 12px;
}

.member-search-box input {
  min-width: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  outline: 0;
  color: #263348;
  background: transparent;
  font-size: 12px;
}

.member-toolbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.member-toolbar-actions label {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #626c7a;
  font-size: 10px;
}

.member-toolbar-actions select {
  min-width: 58px;
  height: 36px;
  padding: 0 8px;
  border: 1px solid #b6bdc7;
  border-radius: 4px;
  color: #263348;
  background: #fff;
}

.member-tool-button {
  min-height: 36px;
  padding: 0 13px;
  border: 1px solid #aeb5be;
  border-radius: 4px;
  color: #202837;
  background: #fff;
  font-size: 11px;
  cursor: pointer;
}

.member-tool-button i {
  margin-right: 6px;
}

.member-refresh-all {
  border-color: #17191c;
  color: #fff;
  background: #17191c;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .2);
}

.member-tool-button:disabled {
  opacity: .55;
  cursor: wait;
}

.member-table-scroll {
  margin: 0 8px;
  overflow-x: auto;
  border: 1px solid #c9cfd7;
  background: #fff;
}

.member-data-table {
  width: 100%;
  min-width: 1160px;
  border-spacing: 0;
  border-collapse: collapse;
  table-layout: auto;
}

.member-data-table th {
  height: 38px;
  padding: 7px 7px;
  border-right: 1px solid #9ca4ad;
  color: #fff;
  background: #171818;
  font-size: 10px;
  font-weight: 800;
  text-align: center;
  white-space: nowrap;
}

.member-data-table th:last-child {
  border-right: 0;
}

.member-data-table td {
  height: 41px;
  padding: 5px 7px;
  border-right: 1px solid #cbd1d9;
  border-bottom: 1px solid #cbd1d9;
  color: #172238;
  background: #fff;
  font-size: 10px;
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
}

.member-data-table tbody tr:nth-child(odd) td {
  background: #f5f5f5;
}

.member-data-table tbody tr:hover td {
  background: #eef6ff;
}

.member-data-table td:last-child {
  border-right: 0;
}

.member-copy-value {
  max-width: 135px;
  padding: 3px 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 0;
  color: #ff8200;
  background: transparent;
  font: inherit;
  cursor: pointer;
}

.member-copy-value span {
  overflow: hidden;
  text-overflow: ellipsis;
}

.member-copy-value i {
  color: #b5bdc8;
  font-size: 12px;
}

.member-copy-value:hover,
.member-copy-value:focus-visible {
  color: #d66400;
  text-decoration: underline;
}

.member-bank-cell {
  display: flex;
  align-items: center;
  justify-content: center;
}

.member-bank-cell img {
  width: 29px;
  height: 29px;
  border-radius: 7px;
  object-fit: contain;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .15);
}

.member-line-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #00b958;
  text-decoration: none;
}

.member-line-link i {
  font-size: 14px;
}

.member-line-link:hover {
  color: #008f43;
  text-decoration: underline;
}

.member-line-cell {
  width: 88px;
  min-width: 88px;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.member-line-empty {
  display: inline;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: #97a0ae;
  background: transparent;
}

.member-credit-cell strong {
  color: #182132;
  font-size: 10px;
}

.member-muted {
  color: #97a0ae;
}

.member-status-pill {
  min-width: 31px;
  padding: 4px 7px;
  border: 0;
  border-radius: 4px;
  font-size: 9px;
  font-weight: 800;
  cursor: pointer;
}

.member-status-pill.is-active {
  color: #00874a;
  background: #c9f8e4;
}

.member-status-pill.is-disabled {
  color: #aa2532;
  background: #ffd9dc;
}

.member-icon-action {
  width: 28px;
  height: 28px;
  padding: 0;
  display: inline-grid;
  place-items: center;
  border: 1px solid #aeb6c0;
  border-radius: 5px;
  background: #fff;
  font-size: 13px;
  cursor: pointer;
}

.member-icon-action:disabled {
  opacity: .58;
  cursor: wait;
}

.member-check-action {
  border-color: #17191c;
  color: #fff;
  background: #17191c;
}

.member-edit-action {
  color: #e68100;
}

.member-info-action {
  color: #008b4c;
}

.member-person-search-icon {
  position: relative;
  display: inline-block;
  width: 18px;
  height: 18px;
  color: #008b4c;
}

.member-person-icon {
  position: absolute;
  top: 1px;
  left: 1px;
  font-size: 13px;
}

.member-search-icon {
  position: absolute;
  right: -1px;
  bottom: -1px;
  padding: 1px;
  border-radius: 50%;
  color: #008b4c;
  background: #fff;
  font-size: 8px;
}

.credit-data-table {
  min-width: 1120px;
}

.credit-deposit-action {
  color: #079447;
}

.credit-withdraw-action {
  color: #cf2438;
}

.credit-game-action {
  color: #e57d00;
}

.member-icon-action:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 3px 7px rgba(18, 28, 45, .18);
}

.is-spinning {
  animation: member-spin .72s linear infinite;
}

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

.member-pagination {
  padding: 11px 10px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: #677285;
  font-size: 11px;
}

.member-pagination > div {
  display: flex;
  align-items: center;
  gap: 8px;
}

.member-pagination button {
  min-height: 32px;
  padding: 5px 10px;
  border: 1px solid #c2c8d1;
  border-radius: 4px;
  color: #263348;
  background: #fff;
  cursor: pointer;
}

.member-pagination button:disabled {
  opacity: .45;
  cursor: default;
}

.admin-member-dialog {
  width: min(92vw, 720px);
  max-height: 90vh;
  margin: auto;
  padding: 0;
  overflow: auto;
  border: 0;
  border-radius: 14px;
  color: #263348;
  background: #fff;
  box-shadow: 0 24px 75px rgba(13, 25, 48, .35);
}

.admin-member-dialog::backdrop {
  background: rgba(11, 18, 31, .62);
  backdrop-filter: blur(2px);
}

.admin-member-dialog > form,
.admin-member-dialog > div {
  min-width: 0;
}

.admin-member-dialog header {
  padding: 18px 20px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  color: #fff;
  background: #202b40;
}

.admin-member-dialog header h2,
.admin-member-dialog header p {
  margin: 0;
}

.admin-member-dialog header h2 {
  font-size: 20px;
}

.admin-member-dialog header p {
  margin-top: 4px;
  color: #c2cce0;
  font-size: 12px;
}

.dialog-close {
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  color: #fff;
  background: rgba(255, 255, 255, .1);
  cursor: pointer;
}

.member-edit-grid {
  padding: 20px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.member-edit-grid label {
  display: grid;
  gap: 6px;
  color: #4d596d;
  font-size: 12px;
  font-weight: 700;
}

.member-edit-grid input,
.member-edit-grid select,
.member-edit-grid textarea {
  width: 100%;
  min-height: 42px;
  padding: 9px 11px;
  border: 1px solid #d0d7e3;
  border-radius: 8px;
  outline: 0;
  color: #263348;
  background: #fff;
}

.member-edit-grid input:focus,
.member-edit-grid select:focus,
.member-edit-grid textarea:focus {
  border-color: #416bda;
  box-shadow: 0 0 0 3px rgba(65, 107, 218, .13);
}

.member-edit-grid textarea {
  min-height: 78px;
  resize: vertical;
}

.member-edit-full {
  grid-column: 1 / -1;
}

.member-password-note {
  margin: 0 20px;
  padding: 10px 12px;
  border-radius: 8px;
  color: #805d14;
  background: #fff7dc;
  font-size: 12px;
}

.dialog-message {
  min-height: 22px;
  margin: 10px 20px 0;
  color: #268b58;
  font-size: 12px;
}

.dialog-message.error {
  color: #c13c45;
}

.admin-member-dialog footer {
  padding: 15px 20px 20px;
  display: flex;
  justify-content: flex-end;
  gap: 9px;
}

.admin-member-dialog footer button {
  min-height: 39px;
  padding: 8px 15px;
  border-radius: 7px;
  font-weight: 700;
  cursor: pointer;
}

.dialog-secondary {
  border: 1px solid #c6ceda;
  color: #4d596d;
  background: #fff;
}

.dialog-primary {
  border: 1px solid #4167cc;
  color: #fff;
  background: #4167cc;
}

.dialog-primary:disabled {
  opacity: .55;
  cursor: wait;
}

.credit-adjust-dialog {
  width: min(94vw, 500px);
  border-radius: 3px;
}

.credit-adjust-dialog header,
.credit-game-dialog header {
  margin: 0 17px;
  padding: 18px 0 10px;
  align-items: center;
  color: #172238;
  background: #fff;
}

.credit-adjust-dialog header::after,
.credit-game-dialog header::after {
  position: absolute;
  right: 58px;
  left: 90px;
  height: 1px;
  content: "";
  background: #b9bec5;
}

.credit-adjust-dialog header h2,
.credit-game-dialog header h2 {
  position: relative;
  z-index: 1;
  padding-right: 12px;
  background: #fff;
  font-size: 18px;
}

.credit-adjust-dialog .dialog-close,
.credit-game-dialog .dialog-close {
  position: relative;
  z-index: 1;
  color: #596778;
  background: #fff;
}

.credit-member-summary {
  margin: 12px 20px 7px;
  color: #677284;
  font-size: 11px;
}

.credit-member-summary strong {
  margin-left: 6px;
  color: #263348;
}

.credit-adjust-fields {
  padding: 0 20px;
  display: grid;
  gap: 10px;
}

.credit-adjust-fields > label:not(.credit-dashboard-toggle) {
  display: grid;
  gap: 5px;
  color: #697486;
  font-size: 10px;
}

.credit-adjust-fields em {
  color: #d4313f;
  font-style: normal;
}

.credit-adjust-fields input,
.credit-adjust-fields select,
.credit-adjust-fields textarea {
  width: 100%;
  min-height: 38px;
  padding: 8px 10px;
  border: 1px solid #b9c0ca;
  border-radius: 4px;
  outline: none;
  color: #263348;
  background: #fff;
  font: inherit;
  font-size: 12px;
}

.credit-adjust-fields textarea {
  min-height: 56px;
  resize: vertical;
}

.credit-adjust-fields input:focus,
.credit-adjust-fields select:focus,
.credit-adjust-fields textarea:focus {
  border-color: #416bda;
  box-shadow: 0 0 0 2px rgba(65, 107, 218, .12);
}

.credit-dashboard-toggle {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  cursor: pointer;
}

.credit-dashboard-toggle input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.credit-dashboard-toggle > span {
  position: relative;
  flex: 0 0 34px;
  width: 34px;
  height: 20px;
  border-radius: 20px;
  background: #263b73;
}

.credit-dashboard-toggle > span::after {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  content: "";
  background: #fff;
  transition: transform .18s ease;
}

.credit-dashboard-toggle input:checked + span {
  background: #16985a;
}

.credit-dashboard-toggle input:checked + span::after {
  transform: translateX(14px);
}

.credit-dashboard-toggle b {
  display: grid;
  color: #344056;
  font-size: 11px;
  font-weight: 500;
}

.credit-dashboard-toggle small {
  color: #8b95a6;
  font-size: 9px;
  font-weight: 400;
}

.credit-adjust-dialog footer {
  margin-top: 8px;
  padding: 14px 20px;
  border-top: 1px solid #e1e5eb;
}

.credit-adjust-dialog .dialog-primary {
  min-width: 145px;
  border-color: #c7ccd3;
  color: #fff;
  background: #c7ccd3;
  opacity: 1;
  cursor: not-allowed;
}

.credit-adjust-dialog .dialog-primary.is-ready {
  border-color: #26a866;
  background: #26a866;
  box-shadow: 0 3px 9px rgba(38, 168, 102, .24);
  cursor: pointer;
}

.credit-adjust-dialog .dialog-primary.is-withdraw.is-ready {
  border-color: #df5961;
  background: #df5961;
  box-shadow: 0 3px 9px rgba(223, 89, 97, .24);
}

.credit-game-dialog {
  width: min(92vw, 500px);
}

.credit-game-placeholder {
  padding: 35px 25px 25px;
  color: #677285;
  text-align: center;
}

.credit-game-placeholder > i {
  color: #e57d00;
  font-size: 42px;
}

.credit-game-placeholder h3 {
  margin: 12px 0 5px;
  color: #263348;
}

.credit-game-placeholder p {
  margin: 0;
  font-size: 12px;
}

.member-info-dialog {
  width: min(94vw, 850px);
}

#memberInfoContent {
  padding: 20px;
}

.member-dialog-loading {
  padding: 28px;
  color: #68758a;
  text-align: center;
}

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

.member-info-field {
  min-width: 0;
  padding: 11px 12px;
  display: grid;
  gap: 5px;
  border: 1px solid #e0e5ed;
  border-radius: 8px;
  background: #f8fafc;
}

.member-info-field span {
  color: #7a8598;
  font-size: 10px;
}

.member-info-field strong {
  overflow-wrap: anywhere;
  color: #263348;
  font-size: 12px;
}

.member-info-wide {
  grid-column: 1 / -1;
}

.member-info-history-grid {
  margin-top: 16px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.member-info-history {
  padding: 13px;
  border: 1px solid #e0e5ed;
  border-radius: 9px;
}

.member-info-history h3 {
  margin: 0 0 9px;
  font-size: 14px;
}

.member-info-history-row {
  padding: 8px 0;
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 6px 10px;
  border-bottom: 1px solid #edf0f5;
  font-size: 10px;
}

.member-info-history-row:last-child {
  border-bottom: 0;
}

.member-info-history-row small {
  grid-column: 1 / -1;
  color: #8994a5;
}

/* V66.17.12 — Member 360 profile */
.member-360-dialog-v661712 {
  width: min(96vw, 1180px);
  max-width: 1180px;
  max-height: 94vh;
  padding: 0;
  border: 0;
  border-radius: 18px;
  overflow: hidden;
  background: #f4f7fb;
  box-shadow: 0 26px 80px rgba(17, 31, 56, .28);
}

.member-360-shell-v661712 {
  max-height: 94vh;
  overflow-y: auto;
}

.member-360-header-v661712 {
  position: sticky;
  top: 0;
  z-index: 6;
  min-height: 70px;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #fff;
  background: linear-gradient(135deg, #123c72 0%, #1769aa 60%, #188cc0 100%);
}

.member-360-header-v661712 span {
  display: block;
  margin-bottom: 2px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.7px;
  color: #9edcff;
}

.member-360-header-v661712 h2 {
  margin: 0;
  font-size: 20px;
}

.member-360-header-username-v661713 {
  display: block;
  margin-top: 3px;
  color: #d9efff;
  font-size: 12px;
  font-weight: 700;
}

.member-360-header-v661712 .dialog-close {
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 50%;
  color: #fff;
  background: rgba(255, 255, 255, .12);
  cursor: pointer;
}

.member-360-content-v661712 {
  padding: 18px;
}

.member-360-profile-v661712 {
  padding: 16px;
  display: grid;
  grid-template-columns: auto minmax(180px, 1fr) auto auto;
  gap: 14px;
  align-items: center;
  border: 1px solid #dce5f0;
  border-radius: 14px;
  background: #fff;
}

.member-360-avatar-v661712 {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  color: #fff;
  background: linear-gradient(145deg, #1769aa, #19a1ce);
  box-shadow: 0 8px 20px rgba(23, 105, 170, .22);
  font-size: 25px;
  font-weight: 800;
}

.member-360-identity-v661712 h3 {
  margin: 0 0 3px;
  color: #17263b;
  font-size: 18px;
}

.member-360-identity-v661712 p,
.member-360-identity-v661712 small {
  margin: 0;
  color: #6c7a8e;
  font-size: 12px;
}

.member-360-account-state-v661712 {
  padding: 7px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}

.member-360-account-state-v661712.is-active {
  color: #087a4a;
  background: #dff8ed;
}

.member-360-account-state-v661712.is-disabled {
  color: #a13c3c;
  background: #ffe5e5;
}

.member-360-actions-v661712 {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 7px;
}

.member-360-actions-v661712 button {
  min-height: 34px;
  padding: 0 11px;
  border: 1px solid #d8e2ed;
  border-radius: 8px;
  color: #2d4969;
  background: #fff;
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

.member-360-actions-v661712 button:hover {
  border-color: #4b91c8;
  color: #1769aa;
  background: #f1f8fd;
}

.member-360-actions-v661712 button.is-danger {
  color: #ad3f3f;
  border-color: #f0c8c8;
}

.member-360-summary-grid-v661712 {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.member-360-summary-card-v661712 {
  min-width: 0;
  min-height: 91px;
  padding: 13px;
  display: flex;
  align-items: center;
  gap: 11px;
  border: 1px solid #dfe7f0;
  border-radius: 12px;
  background: #fff;
}

.member-360-summary-icon-v661712 {
  flex: 0 0 39px;
  width: 39px;
  height: 39px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  color: #1769aa;
  background: #eaf5fc;
}

.member-360-summary-card-v661712 > div {
  min-width: 0;
}

.member-360-summary-card-v661712 > div > span,
.member-360-summary-card-v661712 small {
  display: block;
  color: #758398;
  font-size: 10px;
}

.member-360-summary-card-v661712 strong {
  display: block;
  margin: 3px 0;
  overflow-wrap: anywhere;
  color: #21344e;
  font-size: 16px;
}

.member-360-summary-card-v661712.is-deposit .member-360-summary-icon-v661712 { color: #087a4a; background: #e3f8ef; }
.member-360-summary-card-v661712.is-withdrawal .member-360-summary-icon-v661712 { color: #c34d43; background: #ffebe8; }
.member-360-summary-card-v661712.is-profit .member-360-summary-icon-v661712 { color: #7454c2; background: #f0ebff; }
.member-360-summary-card-v661712.is-bonus .member-360-summary-icon-v661712 { color: #b46b09; background: #fff3d8; }
.member-360-summary-card-v661712.is-future { background: #f8fafc; }
.member-360-summary-card-v661712.is-future strong { color: #8793a3; font-size: 13px; }

.member-360-tabs-v661712 {
  position: sticky;
  top: 70px;
  z-index: 5;
  margin-top: 14px;
  padding: 7px;
  display: flex;
  gap: 5px;
  overflow-x: auto;
  border: 1px solid #dfe7f0;
  border-radius: 12px;
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(8px);
}

.member-360-tabs-v661712 button {
  min-width: max-content;
  padding: 9px 13px;
  display: inline-flex;
  gap: 7px;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 8px;
  color: #647389;
  background: transparent;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.member-360-tabs-v661712 button.active {
  color: #fff;
  background: linear-gradient(135deg, #1769aa, #188cc0);
  box-shadow: 0 5px 13px rgba(23, 105, 170, .2);
}

.member-360-tab-content-v661712 {
  min-height: 230px;
  margin-top: 10px;
  padding: 14px;
  border: 1px solid #dfe7f0;
  border-radius: 12px;
  background: #fff;
}

.member-360-info-grid-v661712 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.member-360-table-wrap-v661712 {
  overflow-x: auto;
}

.member-360-table-v661712 {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
}

.member-360-table-v661712 th,
.member-360-table-v661712 td {
  padding: 11px 10px;
  border-bottom: 1px solid #e8edf3;
  text-align: left;
  font-size: 11px;
  white-space: nowrap;
}

.member-360-table-v661712 th {
  color: #718096;
  background: #f6f8fb;
  font-weight: 800;
}

.member-360-amount-v661712 { font-weight: 800; }
.member-360-amount-v661712.is-deposit { color: #087a4a; }
.member-360-amount-v661712.is-withdrawal { color: #c34d43; }

.member-360-status-v661712 {
  padding: 5px 8px;
  border-radius: 999px;
  color: #68758a;
  background: #eef2f6;
  font-size: 10px;
  font-weight: 800;
}

.member-360-status-v661712.is-completed,
.member-360-status-v661712.is-paid { color: #087a4a; background: #dff8ed; }
.member-360-status-v661712.is-pending,
.member-360-status-v661712.is-processing,
.member-360-status-v661712.is-reviewing,
.member-360-status-v661712.is-deducted { color: #9a650e; background: #fff1cc; }
.member-360-status-v661712.is-rejected,
.member-360-status-v661712.is-provider_failed,
.member-360-status-v661712.is-credit_failed { color: #a43b3b; background: #ffe3e3; }

.member-360-pagination-v661712 {
  padding-top: 12px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  color: #6d7a8c;
  font-size: 11px;
}

.member-360-pagination-v661712 button {
  padding: 7px 11px;
  border: 1px solid #d8e2ed;
  border-radius: 7px;
  color: #2d4969;
  background: #fff;
  cursor: pointer;
}

.member-360-pagination-v661712 button:disabled {
  opacity: .45;
  cursor: not-allowed;
}

.member-360-feature-empty-v661712 {
  min-height: 200px;
  display: grid;
  place-items: center;
  align-content: center;
  text-align: center;
  color: #7a8799;
}

.member-360-feature-empty-v661712 > span {
  width: 55px;
  height: 55px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  color: #5e7795;
  background: #edf2f7;
  font-size: 23px;
}

.member-360-feature-empty-v661712 h3 { margin: 10px 0 4px; color: #394d67; font-size: 15px; }
.member-360-feature-empty-v661712 p { max-width: 520px; margin: 0; font-size: 11px; }

@media (max-width: 980px) {
  .member-360-profile-v661712 { grid-template-columns: auto 1fr auto; }
  .member-360-actions-v661712 { grid-column: 1 / -1; justify-content: flex-start; }
  .member-360-summary-grid-v661712 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .member-360-info-grid-v661712 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
  .member-360-dialog-v661712 { width: 100vw; max-height: 100dvh; border-radius: 0; }
  .member-360-shell-v661712 { max-height: 100dvh; }
  .member-360-content-v661712 { padding: 10px; }
  .member-360-profile-v661712 { grid-template-columns: auto 1fr; padding: 12px; }
  .member-360-account-state-v661712 { grid-column: 1 / -1; width: max-content; }
  .member-360-actions-v661712 button { flex: 1 1 calc(50% - 7px); }
  .member-360-summary-grid-v661712 { grid-template-columns: 1fr 1fr; gap: 7px; }
  .member-360-summary-card-v661712 { min-height: 100px; padding: 10px; align-items: flex-start; flex-direction: column; }
  .member-360-summary-card-v661712 strong { font-size: 14px; }
  .member-360-tabs-v661712 { top: 70px; }
  .member-360-tab-content-v661712 { padding: 9px; }
  .member-360-info-grid-v661712 { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  .admin-shell {
    grid-template-columns: 1fr;
  }

  .admin-sidebar {
    position: static;
    flex-direction: row;
    overflow-x: auto;
  }

  .admin-brand {
    display: none;
  }

  .admin-sidebar button {
    width: auto;
    min-width: max-content;
  }

  #adminLogout {
    margin-top: 0;
  }

  .dashboard-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .member-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .member-search-box {
    width: 100%;
  }

  .member-toolbar-actions {
    flex-wrap: wrap;
  }

  .member-info-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .form-grid,
  .dashboard-cards {
    grid-template-columns: 1fr;
  }

  .wallet-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .wallet-section {
    padding: 16px;
  }

  .admin-main {
    padding: 14px;
  }

  .admin-topbar,
  .table-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .table-toolbar h2 {
    margin-right: 0;
  }

  .member-toolbar-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .member-toolbar-actions label,
  .member-tool-button {
    justify-content: center;
  }

  .member-pagination {
    align-items: stretch;
    flex-direction: column;
  }

  .member-pagination > div {
    justify-content: space-between;
  }

  .member-edit-grid,
  .member-info-grid,
  .member-info-history-grid {
    grid-template-columns: 1fr;
  }

  .member-edit-full,
  .member-info-wide {
    grid-column: auto;
  }
}

/* =========================
   PHONE AUTH + 3-STEP SIGNUP (V1.4)
========================= */

.registration-body,
.auth-login-body {
  min-height: 100vh;
  background-color: #050706;
  background-image:
    linear-gradient(rgba(36, 75, 61, .13) 1px, transparent 1px),
    linear-gradient(90deg, rgba(36, 75, 61, .13) 1px, transparent 1px),
    radial-gradient(circle at 50% 20%, rgba(35, 48, 42, .23), transparent 42%);
  background-size: 10px 10px, 10px 10px, auto;
  color: #fff;
  font-family: var(--app-font-family);
}

.registration-body .onboarding-page,
.auth-login-body .auth-page {
  width: min(100%, 520px);
  padding-top: 18px;
}

.auth-brand,
.auth-login-body .login-logo-wrap {
  display: flex;
  justify-content: center;
  margin: 0 auto 24px;
}

.registration-body .login-main-logo,
.auth-login-body .login-main-logo {
  width: 260px;
  max-height: 190px;
  filter: drop-shadow(0 16px 24px rgba(0, 0, 0, .55));
}

.wizard-card,
.auth-login-card {
  width: 100%;
  max-width: 402px;
  min-height: 358px;
  margin: 0 auto;
  padding: 38px 32px 40px;
  border: 1px solid rgba(255, 255, 255, .025);
  border-radius: 28px;
  background: linear-gradient(145deg, rgba(12, 13, 12, .98), rgba(2, 3, 3, .98));
  box-shadow: 0 26px 80px rgba(0, 0, 0, .68);
}

.wizard-heading {
  margin-bottom: 24px;
}

.wizard-heading h1 {
  margin: 0 0 6px;
  color: #fff;
  font-size: 29px;
  font-weight: 800;
  line-height: 1.2;
}

.wizard-heading p {
  margin: 0;
  color: #777d7a;
  font-size: 13px;
}

.wizard-step {
  min-height: 0;
}

.field-caption {
  display: block;
  margin-bottom: 6px;
  color: #8d9390;
  font-size: 12px;
}

.field-hint {
  margin: -6px 2px 0;
  color: #6f7572;
  font-size: 11px;
}

.wizard-input,
.auth-login-card .wizard-input {
  width: 100%;
  height: 42px;
  margin-bottom: 10px;
  border: 1px solid rgba(255, 255, 255, .04);
  border-radius: 11px;
  background: #30312f;
}

.wizard-input .input-icon {
  width: 46px;
  background: #171918;
  color: #fff;
  font-size: 16px;
}

.wizard-input input,
.auth-login-card .wizard-input input {
  min-width: 0;
  height: 100%;
  padding: 0 12px;
  color: #fff;
  background: transparent;
  font-size: 13px;
}

.wizard-input input::placeholder,
.auth-login-card .wizard-input input::placeholder {
  color: #a4aaa7;
}

.registration-body input:-webkit-autofill,
.registration-body input:-webkit-autofill:hover,
.registration-body input:-webkit-autofill:focus,
.auth-login-body input:-webkit-autofill,
.auth-login-body input:-webkit-autofill:hover,
.auth-login-body input:-webkit-autofill:focus {
  -webkit-text-fill-color: #fff !important;
  -webkit-box-shadow: 0 0 0 1000px #30312f inset !important;
  box-shadow: 0 0 0 1000px #30312f inset !important;
  caret-color: #fff;
  transition: background-color 9999s ease-out 0s;
}

.wizard-input:focus-within,
.wizard-select-wrap:focus-within {
  border-color: #16569a;
  box-shadow: 0 0 0 2px rgba(22, 86, 154, .22);
}

.wizard-select-wrap {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 42px;
  margin-bottom: 10px;
  overflow: hidden;
  border: 1px solid #174f87;
  border-radius: 13px;
  background: #242624;
}

.wizard-select-wrap > i {
  width: 46px;
  color: #fff;
  text-align: center;
}

.wizard-select-wrap select {
  flex: 1;
  min-width: 0;
  height: 42px;
  padding: 0 38px 0 4px;
  border: 0;
  outline: 0;
  color: #fff;
  background: #242624;
  cursor: pointer;
}

.wizard-select-wrap option {
  color: #fff;
  background: #252625;
}

.bank-picker {
  position: relative;
  z-index: 20;
  width: 100%;
  margin-bottom: 10px;
}

.bank-picker.is-open {
  z-index: 60;
}

.bank-picker-trigger {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 42px;
  padding: 0 42px 0 14px;
  border: 2px solid #14548d;
  border-radius: 13px;
  outline: 0;
  color: #fff;
  background: #202221;
  font-size: 12px;
  cursor: pointer;
}

.bank-picker-trigger:hover,
.bank-picker-trigger:focus-visible,
.bank-picker.is-open .bank-picker-trigger {
  border-color: #1670ba;
  box-shadow: 0 0 0 2px rgba(22, 112, 186, .2);
}

.bank-picker-trigger > i {
  position: absolute;
  right: 15px;
  font-size: 10px;
  transition: transform .16s ease;
}

.bank-picker.is-open .bank-picker-trigger > i {
  transform: rotate(180deg);
}

.bank-picker-current {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: center;
  gap: 9px;
}

.bank-picker.has-selection .bank-picker-current {
  width: 100%;
  justify-content: flex-start;
}

.bank-picker-current img {
  width: 27px;
  height: 27px;
  flex: 0 0 27px;
  border-radius: 7px;
  object-fit: contain;
}

.bank-picker-current span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bank-picker-menu {
  position: absolute;
  top: calc(100% + 2px);
  right: 0;
  left: 0;
  max-height: min(430px, 62vh);
  padding: 5px 8px;
  overflow-x: hidden;
  overflow-y: auto;
  border: 1px solid rgba(255, 255, 255, .06);
  border-radius: 4px 4px 10px 10px;
  background: #242524;
  box-shadow: 0 20px 45px rgba(0, 0, 0, .78);
  scrollbar-color: #555 #242524;
  scrollbar-width: thin;
}

.bank-picker-menu::-webkit-scrollbar {
  width: 6px;
}

.bank-picker-menu::-webkit-scrollbar-thumb {
  border-radius: 6px;
  background: #555;
}

.bank-picker-option {
  display: flex;
  width: 100%;
  min-height: 39px;
  padding: 3px 7px;
  align-items: center;
  gap: 10px;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, .055);
  outline: 0;
  color: #f5f6f5;
  background: transparent;
  font-size: 12px;
  text-align: left;
  cursor: pointer;
}

.bank-picker-option:last-child {
  border-bottom: 0;
}

.bank-picker-option:hover,
.bank-picker-option:focus-visible,
.bank-picker-option.is-selected {
  background: #303230;
}

.bank-picker-option img {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  border-radius: 8px;
  object-fit: contain;
}

.bank-picker-option span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bank-native-select {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(50%) !important;
  border: 0 !important;
  white-space: nowrap !important;
}

.referral-select {
  border-color: rgba(201, 193, 103, .58);
  box-shadow: 0 0 10px rgba(201, 193, 103, .18);
}

.wizard-message {
  min-height: 24px;
  margin: 8px 0 4px;
  color: #ff7a62;
  text-align: center;
  font-size: 12px;
}

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

.wizard-actions .login-btn {
  flex: 1;
  height: 40px;
  margin-top: 0;
  border-radius: 20px;
  background: linear-gradient(90deg, #ff4b08 0%, #ff3100 44%, #32120a 100%);
  font-size: 14px;
}

.wizard-back {
  min-width: 96px;
  height: 40px;
  border: 1px solid #3b3e3c;
  border-radius: 22px;
  color: #d6d9d7;
  background: #1c1e1d;
  font-weight: 700;
  cursor: pointer;
}

.wizard-back:disabled {
  opacity: .5;
}

.auth-switch {
  margin-top: 9px;
  color: #858b88;
  text-align: center;
  font-size: 13px;
}

.auth-switch a {
  color: #ff531d;
  font-weight: 800;
  text-decoration: none;
}

.auth-footer {
  margin-top: 24px;
  color: #d4d7d5;
  text-align: center;
  font-size: 10px;
}

  .auth-login-card .forgot {
  margin-top: 18px;
  color: #666d69;
  text-align: center;
  font-weight: 400;
}

@media (max-width: 600px) {
  .registration-body,
  .auth-login-body {
    padding: 6px 10px 24px;
  }

  .registration-body .onboarding-page,
  .auth-login-body .auth-page {
    padding: 8px 2px 30px;
  }

  .registration-body .login-main-logo,
  .auth-login-body .login-main-logo {
    width: 260px;
    max-height: 190px;
  }

  .wizard-card,
  .auth-login-card {
    padding: 38px 32px 40px;
    border-radius: 28px;
  }
}

/* Member lobby image-size lock: keep provider logos readable and let recent
   game artwork fill its thumbnail even when the source image is portrait. */
@media (max-width: 600px) {
  .home-body .provider-preview {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .home-body .provider-preview .mini-provider:not(.recent-game-card) {
    height: 152px !important;
    min-height: 152px !important;
  }

  .home-body .provider-preview .mini-provider:not(.recent-game-card) img,
  .home-body .provider-preview .mini-provider:not(.recent-game-card) .asset-placeholder {
    width: 100px !important;
    height: 100px !important;
    max-width: 100% !important;
    object-fit: contain !important;
  }

  .home-body .provider-preview .mini-provider.recent-game-card {
    height: 168px !important;
    min-height: 168px !important;
  }

  .home-body .provider-preview .mini-provider.recent-game-card img,
  .home-body .provider-preview .mini-provider.recent-game-card .asset-placeholder {
    width: 100px !important;
    height: 100px !important;
    max-width: 100% !important;
  }

  .home-body .provider-preview .mini-provider.recent-game-card img {
    object-fit: cover !important;
  }

  .home-body .provider-preview .asset-placeholder {
    font-size: 20px !important;
  }

  .home-body .game-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }

  .home-body .game-card span {
    min-height: 42px;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

@media (max-width: 420px) {
  .registration-body,
  .auth-login-body {
    padding-right: 10px;
    padding-left: 10px;
  }

  .registration-body .login-main-logo,
  .auth-login-body .login-main-logo {
    width: 235px;
    max-height: 175px;
  }

  .wizard-card,
  .auth-login-card {
    min-height: 0;
    padding: 32px 22px 34px;
    border-radius: 24px;
  }

  .wizard-heading h1 {
    font-size: 27px;
  }
}

/* =========================================================
   LOBBY V2 — BLUE / WHITE MOBILE CASINO LAYOUT
   This block intentionally overrides only the member lobby.
========================================================= */
:root {
  --lobby-blue: #25a7f7;
  --lobby-blue-dark: #0b7fdd;
  --lobby-blue-soft: #edf8ff;
  --lobby-sky: #dff2ff;
  --lobby-sky-2: #c9ebff;
  --lobby-card: #ffffff;
  --lobby-ink: #17324d;
  --lobby-muted: #6f879d;
  --lobby-border: #cae6f8;
  --lobby-shadow: 0 12px 30px rgba(20, 107, 170, .14);
  --lobby-shadow-soft: 0 8px 20px rgba(32, 122, 184, .10);
}

.home-body.lobby-v2-body {
  min-height: 100vh;
  background: linear-gradient(180deg, #d8f0ff 0%, #eef8ff 52%, #e1f1ff 100%);
  color: var(--lobby-ink);
  font-family: var(--app-font-family);
}

body.modal-open {
  overflow: hidden;
  touch-action: none;
}

.lobby-v2.app-wrap {
  position: relative;
  width: 100%;
  max-width: var(--member-page-width);
  min-height: 100vh;
  margin: 0 auto;
  padding: 0 9px calc(88px + env(safe-area-inset-bottom));
  overflow-x: hidden;
  background:
    radial-gradient(circle at 16% 8%, rgba(255,255,255,.95), transparent 18%),
    radial-gradient(circle at 88% 14%, rgba(165, 224, 255, .65), transparent 22%),
    radial-gradient(circle at 50% 78%, rgba(255,255,255,.72), transparent 20%),
    linear-gradient(180deg, #d7efff 0%, #eef8ff 36%, #e7f4ff 100%);
  box-shadow: 0 0 34px rgba(5, 79, 132, .18);
}

.lobby-topbar.app-header {
  position: sticky;
  top: 0;
  z-index: 40;
  height: 68px;
  margin: 0 -9px;
  padding: 7px 10px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 82px minmax(0, 1fr);
  align-items: center;
  gap: 5px;
  background: linear-gradient(180deg, #35b9ff 0%, #1496ee 54%, #0b7fdd 100%);
  box-shadow: 0 7px 20px rgba(8, 104, 174, .24);
  border-bottom: 1px solid rgba(255,255,255,.25);
}

.topbar-side {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

.topbar-right { justify-content: flex-end; }

.lobby-topbar .app-logo {
  width: 78px;
  height: 48px;
  max-height: 48px;
  margin: auto;
  object-fit: contain;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,.12));
}

.lobby-topbar .header-menu,
.account-round-button {
  width: 34px;
  height: 34px;
  min-width: 34px;
  padding: 0;
  border: 0;
  border-radius: 11px;
  display: grid;
  place-items: center;
  color: #fff;
  background: rgba(255,255,255,.22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22);
  font-size: 17px;
  cursor: pointer;
}

.diamond-pill,
.credit-pill {
  height: 36px;
  min-width: 0;
  border: 0;
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--lobby-ink);
  background: #fff;
  box-shadow: 0 3px 10px rgba(0, 74, 128, .15);
}

.diamond-pill {
  max-width: 76px;
  padding: 0 10px;
  cursor: pointer;
}

.diamond-pill i {
  color: #57c7ff;
  font-size: 15px;
}

.diamond-pill strong,
.credit-pill strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 900;
}

.credit-pill {
  max-width: 116px;
  padding-left: 9px;
}

.credit-pill > i {
  color: #f4b400;
  font-size: 13px;
}

.credit-pill .refresh-btn {
  width: 32px;
  height: 32px;
  min-width: 32px;
  border-radius: 10px;
  color: #fff;
  background: var(--lobby-blue-dark);
  font-size: 13px;
}

.lobby-notice.notice-bar {
  height: 35px;
  margin-top: 10px;
  border-radius: 15px;
  padding: 0 11px;
  gap: 8px;
  color: #57748d;
  background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(240,248,255,.95));
  border: 1px solid rgba(196, 225, 245, .95);
  box-shadow: 0 6px 14px rgba(42, 120, 173, .08);
}

.lobby-notice.notice-bar i {
  flex: 0 0 auto;
  color: var(--lobby-blue);
}

.notice-marquee {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
}

.notice-marquee span {
  display: inline-block;
  min-width: 100%;
  font-size: 11px;
  font-weight: 700;
  animation: lobbyNotice 18s linear infinite;
}

@keyframes lobbyNotice {
  0%, 15% { transform: translateX(0); }
  85%, 100% { transform: translateX(min(-40%, -130px)); }
}

.lobby-hero.banner-placeholder {
  min-height: 150px;
  height: 150px;
  margin: 9px 0 8px;
  border: 3px solid rgba(255,255,255,.92);
  border-radius: 18px;
  background: linear-gradient(135deg, #7dd6ff, #2ca8f2 52%, #0b7cda);
  box-shadow: 0 12px 28px rgba(28, 118, 177, .20);
}

.lobby-hero .banner-fallback {
  min-height: 144px;
  color: #fff;
}

.lobby-hero .banner-fallback strong {
  font-size: 28px;
  letter-spacing: 2px;
}

.lobby-hero .lobby-banner-slide {
  object-fit: cover;
}

.lobby-hero .lobby-banner-dots {
  bottom: 7px;
}

.lobby-shortcut-wrap {
  margin: 0 0 10px;
  padding: 6px 5px 5px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(232,245,255,.88));
  border: 1px solid var(--lobby-border);
  box-shadow: var(--lobby-shadow-soft);
}

.lobby-shortcuts.quick-menu {
  display: flex;
  gap: 6px;
  margin: 0;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  overscroll-behavior-inline: contain;
}

.lobby-shortcuts.quick-menu::-webkit-scrollbar { display: none; }

.lobby-shortcuts .quick-item {
  flex: 0 0 72px;
  height: 58px;
  min-width: 72px;
  padding: 5px 4px;
  gap: 4px;
  scroll-snap-align: start;
  border: 1px solid #d7ebf8;
  border-radius: 12px;
  color: var(--lobby-ink);
  background: linear-gradient(180deg, #ffffff 0%, #f2f9ff 100%);
  box-shadow: 0 4px 10px rgba(22, 103, 160, .08);
}

.lobby-shortcuts .quick-item i {
  color: var(--lobby-blue);
  font-size: 20px;
}

.lobby-shortcuts .quick-item span {
  width: 100%;
  color: #415c73;
  font-size: 9px;
  line-height: 1.15;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.lobby-shortcuts .quick-menu-custom-icon {
  width: 27px;
  height: 27px;
  object-fit: contain;
}

.lobby-content {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  align-items: start;
  gap: 7px;
}

.category-rail.category-grid {
  position: sticky;
  top: 75px;
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin: 0;
}

.category-rail .category-card {
  width: 72px;
  min-height: 66px;
  height: 66px;
  padding: 5px 3px;
  border: 1px solid #d5eafb;
  border-radius: 14px;
  gap: 5px;
  color: #547087;
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(237,247,255,.96));
  box-shadow: 0 5px 12px rgba(21, 104, 161, .07);
  transition: transform .15s ease, color .15s ease, background .15s ease;
}

.category-rail .category-card.active {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(160deg, #47c2ff 0%, #1495ec 60%, #0b7cda 100%);
  box-shadow: 0 9px 18px rgba(9, 124, 210, .28);
}

.category-rail .category-card i {
  font-size: 20px;
}

.category-rail .category-card span {
  max-width: 64px;
  font-size: 9px;
  font-weight: 900;
  line-height: 1.1;
  text-align: center;
  overflow-wrap: anywhere;
}

.category-rail .category-card .category-custom-image {
  width: 30px;
  height: 30px;
  object-fit: contain;
}

.provider-zone.hot-section {
  min-width: 0;
  margin: 0;
}

.provider-zone-title.section-title {
  min-height: 37px;
  margin: 0 0 7px;
  padding: 0 4px 0 8px;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(235,246,255,.92));
  border: 1px solid var(--lobby-border);
  box-shadow: 0 4px 10px rgba(20, 98, 155, .05);
}

.provider-zone-title.section-title span {
  color: var(--lobby-ink);
  font-size: 13px;
  font-weight: 900;
}

.provider-search-toggle {
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: var(--lobby-blue);
  background: #fff;
  box-shadow: 0 3px 10px rgba(17, 104, 164, .12);
  cursor: pointer;
}

.provider-search-box {
  height: 38px;
  margin-bottom: 7px;
  padding: 0 8px;
  display: flex;
  align-items: center;
  gap: 7px;
  border: 1px solid #cce5f7;
  border-radius: 11px;
  background: #fff;
  box-shadow: 0 4px 12px rgba(20, 98, 155, .08);
}

.provider-search-box[hidden] { display: none; }
.provider-search-box i { color: var(--lobby-blue); font-size: 13px; }
.provider-search-box input {
  min-width: 0;
  flex: 1;
  border: 0;
  outline: 0;
  color: var(--lobby-ink);
  background: transparent;
  font-size: 12px;
}
.provider-search-box button {
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: #7990a4;
  background: #eef6fb;
  cursor: pointer;
}

.provider-zone .provider-preview {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 7px;
  align-items: start;
}

.provider-zone .mini-provider.provider-tile {
  width: 100%;
  height: auto !important;
  min-height: 126px !important;
  padding: 0 0 7px;
  justify-content: flex-start;
  gap: 4px;
  overflow: hidden;
  color: var(--lobby-ink);
  border: 1px solid #d9ebf7;
  border-radius: 14px;
  background: linear-gradient(180deg, #ffffff 0%, #f9fcff 100%);
  box-shadow: 0 6px 14px rgba(21, 102, 158, .10);
}

.provider-tile-media {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 13px 13px 9px 9px;
  background: linear-gradient(145deg, #f2faff, #dcefff);
}

.provider-zone .mini-provider.provider-tile img,
.provider-zone .mini-provider.provider-tile .asset-placeholder {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  border-radius: 0;
  object-fit: cover !important;
}

.provider-zone .mini-provider.provider-tile .asset-placeholder {
  font-size: 18px;
  background: linear-gradient(145deg, #54c3ff, #0877d3);
}

.provider-zone .mini-provider.provider-tile > span {
  width: 100%;
  height: auto;
  min-height: 23px;
  padding: 2px 4px 0;
  color: #29475f;
  font-size: 9px;
  font-weight: 900;
  line-height: 1.15;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.provider-zone .recent-game-card small {
  max-width: 100%;
  padding: 0 4px;
  color: var(--lobby-muted);
  font-size: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.provider-empty-state {
  min-height: 180px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 1px dashed #bdddf1;
  border-radius: 14px;
  color: #7790a4;
  background: rgba(255,255,255,.65);
}

.provider-empty-state i { color: #82caf5; font-size: 30px; }









.center-home.bottom-item {
  padding-top: 0;
  overflow: visible;
}





.bottom-badge {
  position: absolute;
  top: 4px;
  right: calc(50% - 24px);
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  color: #fff;
  background: #f04444;
  font-size: 8px;
  box-shadow: 0 2px 5px rgba(200, 21, 21, .25);
}

.bottom-badge[hidden] { display: none; }



.provider-zone-title.section-title::before {
  content: "";
  width: 4px;
  height: 18px;
  border-radius: 999px;
  margin-right: 7px;
  background: linear-gradient(180deg, #47c3ff, #0f88e6);
  display: inline-block;
}

.provider-zone-title.section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.provider-zone .mini-provider.provider-tile > span {
  text-shadow: 0 1px 0 rgba(255,255,255,.65);
}



/* Wallet modal */
.wallet-overlay {
  position: fixed;
  inset: 0;
  z-index: 99998;
  padding: 18px 12px max(16px, env(safe-area-inset-bottom));
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(3, 39, 64, .65);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity .18s ease;
}

.wallet-overlay[hidden] { display: none; }
.wallet-overlay.show { opacity: 1; }

.wallet-modal {
  width: 100%;
  max-width: 420px;
  max-height: min(82vh, 690px);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.92);
  border-radius: 24px;
  background: linear-gradient(180deg, #edf8ff 0%, #d8efff 100%);
  box-shadow: 0 24px 70px rgba(0, 44, 76, .38);
  transform: translateY(28px) scale(.98);
  transition: transform .2s ease;
}

.wallet-overlay.show .wallet-modal { transform: translateY(0) scale(1); }

.wallet-modal-header {
  height: 64px;
  padding: 0 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: linear-gradient(180deg, #39baff 0%, #1494eb 60%, #0b7eda 100%);
  position: relative;
}

.wallet-modal-header h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 900;
}

.wallet-modal-header button {
  position: absolute;
  right: 15px;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  background: rgba(255,255,255,.16);
  font-size: 21px;
  cursor: pointer;
}

.wallet-modal-body {
  max-height: calc(min(82vh, 690px) - 64px);
  overflow-y: auto;
  padding: 10px;
}

.wallet-overview-grid {
  display: grid;
  gap: 8px;
  margin-bottom: 10px;
}

.wallet-credit-card {
  min-height: 82px;
  padding: 12px;
  display: grid;
  grid-template-columns: 45px 1fr 34px;
  align-items: center;
  gap: 10px;
  border: 1px solid #c9e7f8;
  border-radius: 15px;
  background: #fff;
  box-shadow: 0 6px 16px rgba(18, 105, 163, .10);
}

.wallet-card-icon {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  background: linear-gradient(145deg, #ffc83d, #f2a600);
  font-size: 21px;
}

.wallet-credit-card span,
.wallet-credit-card small { display: block; color: var(--lobby-muted); }
.wallet-credit-card span { font-size: 11px; font-weight: 800; }
.wallet-credit-card strong { display: block; margin: 2px 0; color: #076fbd; font-size: 20px; }
.wallet-credit-card small { font-size: 9px; }
.wallet-credit-card > button {
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 10px;
  color: #fff;
  background: var(--lobby-blue);
  cursor: pointer;
}

.wallet-status-card {
  padding: 4px 11px;
  border: 1px solid #c9e7f8;
  border-radius: 14px;
  background: rgba(255,255,255,.92);
}

.wallet-status-row {
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: #526d83;
  font-size: 11px;
  font-weight: 800;
}

.wallet-status-row + .wallet-status-row { border-top: 1px solid #e5f2fa; }
.wallet-status-row i { width: 18px; color: var(--lobby-blue); text-align: center; }
.wallet-status-row strong { color: #086fbf; font-size: 14px; }

.wallet-menu-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  padding: 9px;
  border: 1px solid #c4e4f7;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(223,241,252,.92), rgba(204,232,248,.86));
}

.wallet-menu-item {
  min-width: 0;
  min-height: 76px;
  padding: 6px 3px;
  border: 1px solid #dceefa;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  color: #405c73;
  background: linear-gradient(180deg, #ffffff 0%, #f5fbff 100%);
  box-shadow: 0 4px 10px rgba(27, 106, 162, .08);
  cursor: pointer;
}

.wallet-menu-item:active { transform: scale(.96); }
.wallet-menu-icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: #fff;
  background: linear-gradient(145deg, #48bdff, #1185df);
  font-size: 20px;
}
.wallet-menu-item:nth-child(4n/**/+2) .wallet-menu-icon { background: linear-gradient(145deg, #67d5c8, #1da998); }
.wallet-menu-item:nth-child(4n/**/+3) .wallet-menu-icon { background: linear-gradient(145deg, #8fc8ff, #4e8fe8); }
.wallet-menu-item:nth-child(4n) .wallet-menu-icon { background: linear-gradient(145deg, #ffc967, #f2a51f); }
.wallet-menu-custom-icon { width: 34px; height: 34px; object-fit: contain; }
.wallet-menu-item > span:last-child {
  width: 100%;
  color: #425e75;
  font-size: 9px;
  font-weight: 900;
  line-height: 1.15;
  text-align: center;
  overflow-wrap: anywhere;
}

/* Account popup recolor */
.lobby-v2-body .menu-overlay {
  background: rgba(3, 39, 64, .65);
}

.lobby-v2-body .user-menu-box {
  color: var(--lobby-ink);
  border-color: #bfe2f7;
  background: linear-gradient(180deg, #eff9ff, #d8efff);
  box-shadow: 0 20px 60px rgba(0, 52, 88, .36);
}

.lobby-v2-body .menu-close {
  color: #fff;
  background: var(--lobby-blue);
}

.lobby-v2-body .menu-welcome { color: #6b8398; }
.lobby-v2-body .menu-welcome span { color: #126da9; }
.lobby-v2-body .menu-grid { border-bottom-color: #b9ddf3; }
.lobby-v2-body .menu-item { color: #31536d; }
.lobby-v2-body .menu-item i { color: var(--lobby-blue); }
.lobby-v2-body .loading-box { color: var(--lobby-ink); background: #fff; }
.lobby-v2-body .loading-box i { color: var(--lobby-blue); }

@media (min-width: 700px) {
  .wallet-overlay { align-items: center; }
  .wallet-modal { border-radius: 24px; }
}

@media (max-width: 370px) {
  .lobby-topbar.app-header { grid-template-columns: minmax(0, 1fr) 66px minmax(0, 1fr); }
  .lobby-topbar .app-logo { width: 64px; }
  .account-round-button { display: none; }
  .credit-pill { max-width: 104px; }
  .lobby-content { grid-template-columns: 65px minmax(0, 1fr); gap: 5px; }
  .category-rail .category-card { width: 65px; }
  .provider-zone .provider-preview { gap: 5px; }
  .wallet-menu-grid { gap: 6px; padding: 7px; }
}

@media (prefers-reduced-motion: reduce) {
  .notice-marquee span { animation: none; }
  .wallet-modal,
  .wallet-overlay,
  .lobby-banner-slide { transition: none; }
}


/* =========================================================
   LOBBY V4 — FINAL BLUE CASINO OVERRIDES
   Keep this block at the very end of the file. It intentionally
   wins over older generic white-card rules used by other pages.
========================================================= */
.home-body.lobby-v2-body {
  background:
    radial-gradient(circle at 12% 9%, rgba(255,255,255,.88) 0 3%, transparent 15%),
    radial-gradient(circle at 88% 19%, rgba(93,196,255,.30) 0 4%, transparent 17%),
    linear-gradient(180deg, #bfe7ff 0%, #d8efff 28%, #cceaff 100%) !important;
}

.home-body.lobby-v2-body .lobby-v2.app-wrap {
  background:
    radial-gradient(circle at 9% 19%, rgba(255,255,255,.50) 0 2px, transparent 3px),
    radial-gradient(circle at 83% 32%, rgba(62,169,235,.13) 0 3px, transparent 4px),
    radial-gradient(circle at 48% 72%, rgba(255,255,255,.42) 0 2px, transparent 3px),
    linear-gradient(180deg, #ccecff 0%, #e5f5ff 31%, #cfeaff 100%) !important;
  background-size: 31px 31px, 39px 39px, 47px 47px, auto !important;
}

/* Header: richer blue and less flat. */
.home-body.lobby-v2-body .lobby-topbar.app-header {
  background: linear-gradient(180deg, #39bbff 0%, #1699ed 48%, #087ad2 100%) !important;
  border-bottom: 1px solid rgba(255,255,255,.34) !important;
  box-shadow: 0 7px 20px rgba(5,91,155,.30) !important;
}

.home-body.lobby-v2-body .diamond-pill,
.home-body.lobby-v2-body .credit-pill {
  background: linear-gradient(180deg, #ffffff 0%, #eaf7ff 100%) !important;
  border: 1px solid rgba(255,255,255,.92) !important;
  box-shadow: 0 4px 11px rgba(0,78,136,.18) !important;
}

/* Announcement and banner should sit on blue surfaces, not a white page. */
.home-body.lobby-v2-body .lobby-notice.notice-bar {
  color: #315f80 !important;
  background: linear-gradient(180deg, rgba(231,247,255,.96), rgba(207,235,252,.95)) !important;
  border-color: #b8def5 !important;
}

.home-body.lobby-v2-body .lobby-hero.banner-placeholder {
  border: 2px solid rgba(123,205,251,.92) !important;
  box-shadow: 0 11px 25px rgba(18,110,174,.22) !important;
}

/* Shortcut strip: blue glass instead of a white tray. */
.home-body.lobby-v2-body .lobby-shortcut-wrap {
  background: linear-gradient(180deg, rgba(166,220,251,.88), rgba(139,207,246,.78)) !important;
  border-color: rgba(123,196,238,.92) !important;
  box-shadow: 0 7px 18px rgba(18,105,166,.13) !important;
}

.home-body.lobby-v2-body .lobby-shortcuts .quick-item {
  color: #18597e !important;
  background: linear-gradient(180deg, #e9f8ff 0%, #cfeeff 100%) !important;
  border-color: #a9d9f5 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.86), 0 4px 9px rgba(23,104,158,.10) !important;
}

.home-body.lobby-v2-body .lobby-shortcuts .quick-item i {
  color: #087dd4 !important;
}

.home-body.lobby-v2-body .lobby-shortcuts .quick-item span {
  color: #285e7d !important;
}

/* Left categories: pastel blue blocks; active category becomes saturated. */
.home-body.lobby-v2-body .category-rail .category-card {
  color: #275f82 !important;
  background: linear-gradient(165deg, #dff4ff 0%, #bfe6fb 100%) !important;
  border-color: #a8d7f2 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.82), 0 5px 12px rgba(15,101,159,.11) !important;
}

.home-body.lobby-v2-body .category-rail .category-card.active {
  color: #fff !important;
  background: linear-gradient(160deg, #40c2ff 0%, #138fe7 58%, #0877ce 100%) !important;
  border-color: rgba(255,255,255,.48) !important;
  box-shadow: 0 9px 19px rgba(7,112,190,.32) !important;
}

/* Main provider area: remove the large white title/search blocks. */
.home-body.lobby-v2-body .provider-zone-title.section-title {
  color: #fff !important;
  background: linear-gradient(180deg, #65c9f8 0%, #38abe9 100%) !important;
  border-color: #50b6ec !important;
  box-shadow: 0 6px 14px rgba(16,104,163,.16) !important;
}

.home-body.lobby-v2-body .provider-zone-title.section-title span {
  color: #fff !important;
  text-shadow: 0 1px 1px rgba(0,77,132,.25) !important;
}

.home-body.lobby-v2-body .provider-zone-title.section-title::before {
  background: #fff !important;
  box-shadow: 0 0 8px rgba(255,255,255,.55) !important;
}

.home-body.lobby-v2-body .provider-search-toggle {
  color: #087acb !important;
  background: rgba(255,255,255,.93) !important;
}

.home-body.lobby-v2-body .provider-search-box {
  background: linear-gradient(180deg, #e7f7ff 0%, #cbeaff 100%) !important;
  border-color: #9fd3f0 !important;
  box-shadow: 0 5px 12px rgba(18,99,155,.11) !important;
}

/* Provider cards become image-first tiles with a dark-blue name overlay.
   This removes the white lower half and makes the lobby closer to the reference. */
.home-body.lobby-v2-body .provider-zone .provider-preview {
  gap: 8px !important;
}

.home-body.lobby-v2-body .provider-zone .mini-provider.provider-tile {
  position: relative !important;
  min-height: 0 !important;
  aspect-ratio: 0.78 / 1 !important;
  padding: 0 !important;
  gap: 0 !important;
  overflow: hidden !important;
  color: #fff !important;
  border: 2px solid rgba(255,255,255,.74) !important;
  border-radius: 15px !important;
  background: linear-gradient(165deg, #35b5f7 0%, #0a6fbf 100%) !important;
  box-shadow: 0 8px 16px rgba(8,83,139,.19) !important;
}

.home-body.lobby-v2-body .provider-tile-media {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: auto !important;
  border-radius: 13px !important;
  background: linear-gradient(165deg, #5bc8ff, #0873c8) !important;
}

.home-body.lobby-v2-body .provider-zone .mini-provider.provider-tile img,
.home-body.lobby-v2-body .provider-zone .mini-provider.provider-tile .asset-placeholder {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.home-body.lobby-v2-body .provider-zone .mini-provider.provider-tile > span {
  position: absolute !important;
  z-index: 3 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  min-height: 38px !important;
  padding: 15px 6px 6px !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  color: #fff !important;
  font-size: 9px !important;
  font-weight: 900 !important;
  line-height: 1.15 !important;
  text-align: center !important;
  text-shadow: 0 1px 3px rgba(0,0,0,.82) !important;
  background: linear-gradient(180deg, transparent 0%, rgba(3,30,54,.40) 27%, rgba(3,25,49,.92) 100%) !important;
}

.home-body.lobby-v2-body .provider-zone .recent-game-card small {
  position: absolute !important;
  z-index: 4 !important;
  left: 5px !important;
  right: 5px !important;
  bottom: 3px !important;
  color: rgba(220,244,255,.82) !important;
  font-size: 7px !important;
  text-align: center !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.75) !important;
}

.home-body.lobby-v2-body .provider-zone .recent-game-card > span {
  padding-bottom: 15px !important;
}

.home-body.lobby-v2-body .provider-empty-state {
  color: #2e6b91 !important;
  background: linear-gradient(180deg, rgba(211,239,255,.88), rgba(180,222,248,.82)) !important;
  border-color: #8ec9eb !important;
}

/* Bottom navigation: intentionally blue, not white. */












/* Wallet also gets the same stronger blue language. */
.home-body.lobby-v2-body .wallet-modal {
  background: linear-gradient(180deg, #dff3ff 0%, #bfe5fb 100%) !important;
  border-color: rgba(255,255,255,.86) !important;
}

.home-body.lobby-v2-body .wallet-modal-header {
  background: linear-gradient(180deg, #43c0ff 0%, #1696e9 52%, #0879d0 100%) !important;
}

.home-body.lobby-v2-body .wallet-credit-card,
.home-body.lobby-v2-body .wallet-status-card,
.home-body.lobby-v2-body .wallet-menu-item {
  background: linear-gradient(180deg, #f4fbff 0%, #dff2ff 100%) !important;
  border-color: #a9d8f2 !important;
}

.home-body.lobby-v2-body .wallet-menu-grid {
  background: linear-gradient(180deg, #9ed7f7 0%, #76c3ef 100%) !important;
  border-color: #75bee8 !important;
}

@media (max-width: 370px) {
  .home-body.lobby-v2-body .provider-zone .mini-provider.provider-tile {
    border-radius: 13px !important;
  }
}

/* =========================================================
   V65.3.5 — WALLET REFRESH FEEDBACK
   Keep lightweight balance refresh visible without showing
   the full-page loader.
========================================================= */
.home-body.lobby-v2-body #walletModalRefresh.spinning i {
  display: inline-block;
  transform-origin: 50% 50%;
  animation: walletRefreshSpinV6535 .55s linear infinite !important;
}

.home-body.lobby-v2-body #walletModalRefresh:disabled {
  cursor: wait;
  opacity: .88;
  box-shadow: 0 0 0 3px rgba(21, 149, 232, .14);
}

@keyframes walletRefreshSpinV6535 {
  to { transform: rotate(360deg); }
}


/* === V5 clean provider cards: image only, no duplicated names === */
.home-body.lobby-v2-body .provider-zone .mini-provider.provider-tile {
  aspect-ratio: 0.78 / 1 !important;
  min-height: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border-radius: 15px !important;
}

.home-body.lobby-v2-body .provider-zone .mini-provider.provider-tile > span,
.home-body.lobby-v2-body .provider-zone .mini-provider.provider-tile > small,
.home-body.lobby-v2-body .provider-zone .recent-game-card > span,
.home-body.lobby-v2-body .provider-zone .recent-game-card > small {
  display: none !important;
}

.home-body.lobby-v2-body .provider-zone .mini-provider.provider-tile .provider-tile-media {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: 13px !important;
}

.home-body.lobby-v2-body .provider-zone .mini-provider.provider-tile img,
.home-body.lobby-v2-body .provider-zone .mini-provider.provider-tile .asset-placeholder {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}


/* === V6 bottom nav redesign: closer to the reference, cleaner and more premium === */






















.home-body.lobby-v2-body .center-home.bottom-item > span {
  margin-top: 0 !important;
}







@media (max-width: 380px) {
  

  

  

  

  
}


/* === V7 clean rebuild bottom nav: closer to the pink reference structure === */
































@media (max-width: 400px) {
  

  
}

@media (max-width: 370px) {
  

  

  

  
}



/* =========================================================
   V60.4 SLOT GAME CARDS — SHARP, RESPONSIVE, SOURCE-AWARE
   Replaces the old V8/V13 duplicate inline-game-card rules.
   Scope: slot games opened inside the member Lobby only.
========================================================= */
.home-body.lobby-v2-body .provider-zone-title .provider-title-main,
.home-body.lobby-v2-body .provider-zone-title .provider-title-actions {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

.home-body.lobby-v2-body .provider-zone-title .provider-title-main {
  flex: 1;
  overflow: hidden;
}

.home-body.lobby-v2-body .provider-zone-title .provider-title-main > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-body.lobby-v2-body .provider-inline-back,
.home-body.lobby-v2-body .provider-inline-lobby {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  min-width: 28px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
}

.home-body.lobby-v2-body .provider-inline-back {
  background: var(--mt-gradient, linear-gradient(160deg, #42bfff, #087cd8));
  box-shadow: 0 4px 10px rgba(8, 107, 178, .20);
}

.home-body.lobby-v2-body .provider-inline-lobby {
  background: linear-gradient(160deg, #34d4a7, #15956f);
  box-shadow: 0 4px 10px rgba(18, 135, 99, .20);
}

.home-body.lobby-v2-body .provider-inline-back[hidden],
.home-body.lobby-v2-body .provider-inline-lobby[hidden] {
  display: none !important;
}

.home-body.lobby-v2-body .provider-zone.provider-inline-active .provider-zone-title {
  position: sticky;
  top: 75px;
  z-index: 12;
  background: color-mix(in srgb, var(--mt-surface, #fff) 94%, var(--mt-primary, #168fd8)) !important;
  box-shadow: 0 7px 16px color-mix(in srgb, var(--mt-primary, #168fd8) 14%, transparent) !important;
}

/* Three fluid columns. No fixed 82/88/92px cap, so larger phones use their space. */
.home-body.lobby-v2-body .provider-preview.inline-games-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  align-items: start !important;
  justify-items: stretch !important;
  gap: 10px 7px !important;
}

.home-body.lobby-v2-body .provider-preview.inline-games-grid .inline-game-card {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100% !important;
  max-width: none !important;
  min-width: 0;
  aspect-ratio: auto !important;
  padding: 0;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--mt-border, #c8e4f3) 78%, #fff) !important;
  border-radius: 12px !important;
  color: var(--mt-heading, #123459);
  background: var(--mt-surface, #fff) !important;
  box-shadow: 0 5px 13px color-mix(in srgb, var(--mt-primary, #168fd8) 14%, transparent) !important;
  cursor: pointer;
  isolation: isolate;
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}

@media (hover: hover) and (pointer: fine) {
  .home-body.lobby-v2-body .provider-preview.inline-games-grid .inline-game-card:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--mt-primary, #168fd8) 35%, var(--mt-border, #c8e4f3)) !important;
    box-shadow: 0 8px 18px color-mix(in srgb, var(--mt-primary, #168fd8) 19%, transparent) !important;
  }
}


.home-body.lobby-v2-body .provider-preview.inline-games-grid .inline-game-card:active {
  transform: scale(.975);
  box-shadow: 0 3px 8px color-mix(in srgb, var(--mt-primary, #168fd8) 13%, transparent) !important;
}

/* Media area: exact 4:5 ratio; no GPU transform that can soften Chrome thumbnails. */
.home-body.lobby-v2-body .provider-preview.inline-games-grid .inline-game-card > img,
.home-body.lobby-v2-body .provider-preview.inline-games-grid .inline-game-card > .inline-game-placeholder {
  position: relative !important;
  inset: auto !important;
  display: block;
  flex: 0 0 auto;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 4 / 5 !important;
  box-sizing: border-box;
  border-radius: 11px 11px 0 0 !important;
  object-position: center center !important;
  image-rendering: auto !important;
  backface-visibility: visible !important;
  transform: none !important;
}

.home-body.lobby-v2-body .provider-preview.inline-games-grid .inline-game-card > img.slot-image-fit-cover {
  padding: 0;
  object-fit: cover !important;
  background: var(--mt-surface-alt, #edf9ff);
}

/* Square, landscape and small source files are contained instead of being enlarged/cropped. */
.home-body.lobby-v2-body .provider-preview.inline-games-grid .inline-game-card > img.slot-image-fit-contain {
  padding: 5px;
  object-fit: contain !important;
  background:
    radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--mt-accent, #7adfff) 20%, #fff), transparent 55%),
    linear-gradient(155deg, var(--mt-surface-alt, #edf9ff), var(--mt-surface, #fff));
}

.home-body.lobby-v2-body .provider-preview.inline-games-grid .inline-game-card.is-low-resolution > img {
  padding: 7px;
}

.home-body.lobby-v2-body .provider-preview.inline-games-grid .inline-game-card.is-low-resolution::after {
  content: "ภาพต้นฉบับขนาดเล็ก";
  position: absolute;
  z-index: 3;
  top: 5px;
  right: 5px;
  max-width: calc(100% - 10px);
  padding: 3px 5px;
  overflow: hidden;
  border-radius: 999px;
  color: #7d5900;
  background: rgba(255, 241, 190, .92);
  font-size: 6px;
  font-weight: 900;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
  pointer-events: none;
}

/* Keep quality metadata internal by default; reveal only when debugging is enabled. */
.home-body.lobby-v2-body:not([data-debug-game-images="1"]) .inline-game-card.is-low-resolution::after {
  display: none;
}

.home-body.lobby-v2-body .provider-preview.inline-games-grid .inline-game-card > .inline-game-placeholder {
  display: grid;
  place-items: center;
  padding: 8px;
  color: var(--mt-text-on-primary, #fff);
  background: var(--mt-gradient, linear-gradient(155deg, #4cc5ff, #0877d3));
  font-size: 17px;
  font-weight: 900;
  text-align: center;
}

/* Game name is outside the artwork, up to two lines, so it never hides the image. */
.home-body.lobby-v2-body .provider-preview.inline-games-grid .inline-game-card > span {
  position: static !important;
  z-index: auto;
  display: -webkit-box !important;
  min-width: 0;
  min-height: 34px;
  margin: 0;
  padding: 6px 5px !important;
  overflow: hidden;
  border-radius: 0 !important;
  color: var(--mt-heading, #123459) !important;
  background: var(--mt-surface, #fff) !important;
  box-shadow: none !important;
  font-size: 8.5px !important;
  font-weight: 800;
  line-height: 1.25 !important;
  text-align: center;
  text-overflow: ellipsis;
  white-space: normal !important;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.home-body.lobby-v2-body .provider-preview.inline-games-grid .inline-game-card.is-image-error > span {
  color: var(--mt-muted, #6f8799) !important;
}

.home-body.lobby-v2-body .provider-preview.inline-games-grid .inline-game-skeleton {
  position: relative;
  width: 100% !important;
  max-width: none !important;
  min-height: 158px;
  aspect-ratio: auto !important;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--mt-border, #c8e4f3) 80%, #fff) !important;
  border-radius: 12px !important;
  background:
    linear-gradient(var(--mt-surface, #fff), var(--mt-surface, #fff)) bottom / 100% 34px no-repeat,
    linear-gradient(100deg,
      color-mix(in srgb, var(--mt-primary, #168fd8) 9%, var(--mt-surface-alt, #edf9ff)) 25%,
      color-mix(in srgb, #fff 82%, var(--mt-surface-alt, #edf9ff)) 42%,
      color-mix(in srgb, var(--mt-primary, #168fd8) 9%, var(--mt-surface-alt, #edf9ff)) 60%) top / 260% calc(100% - 34px) no-repeat;
  box-shadow: 0 5px 13px color-mix(in srgb, var(--mt-primary, #168fd8) 10%, transparent) !important;
  animation: inlineGameSkeletonV604 1.2s linear infinite;
}

@keyframes inlineGameSkeletonV604 {
  from { background-position: bottom, 100% 0; }
  to { background-position: bottom, -100% 0; }
}

.home-body.lobby-v2-body .provider-preview.inline-games-grid .inline-game-load-more {
  grid-column: 1 / -1;
  min-height: 42px;
  margin: 4px 0 6px;
  border: 1px solid color-mix(in srgb, var(--mt-primary, #168fd8) 28%, var(--mt-border, #c8e4f3));
  border-radius: var(--mt-button-radius, 12px);
  color: var(--mt-text-on-primary, #fff);
  background: var(--mt-gradient, linear-gradient(180deg, #45bdf8, #1387db));
  box-shadow: 0 5px 12px color-mix(in srgb, var(--mt-primary, #168fd8) 17%, transparent);
  font-size: 11px;
  font-weight: 900;
  cursor: pointer;
}

.home-body.lobby-v2-body .provider-preview.inline-games-grid .provider-empty-state {
  grid-column: 1 / -1;
}

@media (max-width: 390px) {
  .home-body.lobby-v2-body .provider-preview.inline-games-grid {
    gap: 8px 6px !important;
  }

  .home-body.lobby-v2-body .provider-preview.inline-games-grid .inline-game-card > span {
    min-height: 32px;
    padding: 5px 4px !important;
    font-size: 8px !important;
  }
}

/* V66.17.9 — Professional Audit Log */
.audit-page-v66179 { display: grid; gap: 16px; }
.audit-header-v66179 { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.audit-heading-v66179 { display: flex; align-items: center; gap: 13px; }
.audit-heading-icon-v66179 { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; color: #fff; background: linear-gradient(145deg,#3167d9,#244bb1); box-shadow: 0 8px 20px rgba(49,103,217,.22); }
.audit-heading-v66179 h2 { margin: 0; color: #182a44; font-size: 21px; font-weight: 900; }
.audit-heading-v66179 p { margin: 4px 0 0; color: #7a899c; font-size: 11px; }
.audit-timezone-v66179 { display: inline-flex; align-items: center; gap: 7px; padding: 9px 12px; border: 1px solid #dce6f2; border-radius: 10px; color: #4b6583; background: #fff; font-size: 10px; font-weight: 800; }

.audit-stats-v66179 { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; }
.audit-stats-v66179 article { display: flex; align-items: center; gap: 11px; min-width: 0; padding: 15px; border: 1px solid #e3eaf2; border-radius: 14px; background: #fff; box-shadow: 0 5px 18px rgba(22,45,76,.045); }
.audit-stats-v66179 article > span { display: grid; place-items: center; flex: 0 0 40px; width: 40px; height: 40px; border-radius: 12px; font-size: 15px; }
.audit-stats-v66179 article > span.is-blue { color:#2d63d5; background:#edf3ff; }
.audit-stats-v66179 article > span.is-green { color:#0b9260; background:#eaf9f3; }
.audit-stats-v66179 article > span.is-purple { color:#7550c7; background:#f2edff; }
.audit-stats-v66179 article > span.is-orange { color:#d47714; background:#fff3e5; }
.audit-stats-v66179 small { display:block; overflow:hidden; color:#7c8a9c; font-size:9px; font-weight:800; text-overflow:ellipsis; white-space:nowrap; }
.audit-stats-v66179 strong { display:block; margin-top:3px; color:#203551; font-size:20px; font-weight:900; line-height:1; }

.audit-card-v66179 { overflow: hidden; border: 1px solid #e0e8f1; border-radius: 16px; background: #fff; box-shadow: 0 8px 26px rgba(22,45,76,.055); }
.audit-toolbar-v66179 { display: grid; grid-template-columns: minmax(240px,1fr) 155px 145px auto; gap: 9px; padding: 14px; border-bottom: 1px solid #e7edf4; background:#fbfcfe; }
.audit-search-v66179 { display:flex; align-items:center; gap:9px; min-width:0; height:40px; padding:0 12px; border:1px solid #d7e1ec; border-radius:10px; color:#8b9aab; background:#fff; }
.audit-search-v66179:focus-within { border-color:#6498e9; box-shadow:0 0 0 3px rgba(75,132,220,.11); }
.audit-search-v66179 input { min-width:0; width:100%; border:0; outline:0; color:#233952; background:transparent; font:inherit; font-size:10px; }
.audit-toolbar-v66179 select { height:40px; padding:0 31px 0 10px; border:1px solid #d7e1ec; border-radius:10px; outline:0; color:#425873; background:#fff; font:inherit; font-size:10px; font-weight:700; cursor:pointer; }
.audit-refresh-v66179 { display:inline-flex; align-items:center; justify-content:center; gap:7px; min-width:92px; height:40px; padding:0 13px; border:0; border-radius:10px; color:#fff; background:#3167d9; font-size:10px; font-weight:900; cursor:pointer; }
.audit-refresh-v66179:hover { background:#2858c0; }
.audit-refresh-v66179.is-loading i { animation:auditSpinV66179 .7s linear infinite; }
@keyframes auditSpinV66179 { to { transform:rotate(360deg); } }

.audit-table-wrap-v66179 { overflow:auto; }
.audit-table-v66179 { width:100%; min-width:1040px; border-collapse:collapse; }
.audit-table-v66179 th { padding:11px 13px; border-bottom:1px solid #dee7f0; color:#718196; background:#f5f8fc; font-size:9px; font-weight:900; text-align:left; white-space:nowrap; }
.audit-table-v66179 td { padding:12px 13px; border-bottom:1px solid #edf1f5; color:#354b65; font-size:10px; vertical-align:middle; }
.audit-table-v66179 tbody tr:last-child td { border-bottom:0; }
.audit-table-v66179 tbody tr:hover { background:#fafcff; }
.audit-time-cell-v66179 { width:132px; white-space:nowrap; }
.audit-time-cell-v66179 strong,.audit-actor-name-v66179 strong,.audit-entity-cell-v66179 strong { display:block; color:#233a57; font-size:10px; }
.audit-time-cell-v66179 small,.audit-actor-name-v66179 small,.audit-entity-cell-v66179 small,.audit-action-cell-v66179 > small { display:block; margin-top:3px; color:#8a98a9; font-size:8px; }
.audit-actor-cell-v66179 { display:flex; align-items:center; gap:8px; min-width:128px; }
.audit-avatar-v66179 { display:grid; place-items:center; flex:0 0 30px; width:30px; height:30px; border-radius:9px; }
.audit-avatar-v66179.is-admin { color:#315fc7; background:#edf3ff; }
.audit-avatar-v66179.is-member { color:#13845b; background:#e9f8f1; }
.audit-avatar-v66179.is-system { color:#69798d; background:#eff2f6; }
.audit-action-cell-v66179 { min-width:185px; }
.audit-action-badge-v66179 { display:inline-flex; align-items:center; gap:7px; padding:6px 8px; border-radius:8px; }
.audit-action-badge-v66179 strong { font-size:9px; font-weight:900; }
.audit-action-badge-v66179.is-finance { color:#087a52; background:#eaf8f2; }
.audit-action-badge-v66179.is-member { color:#285fc9; background:#edf3ff; }
.audit-action-badge-v66179.is-security { color:#bd5e0b; background:#fff2e3; }
.audit-action-badge-v66179.is-settings { color:#6950aa; background:#f2edfc; }
.audit-action-badge-v66179.is-games { color:#176f91; background:#eaf7fc; }
.audit-entity-cell-v66179 { min-width:125px; }
.audit-detail-cell-v66179 { min-width:170px; max-width:260px; color:#607086 !important; line-height:1.45; overflow-wrap:anywhere; }
.audit-ip-cell-v66179 { color:#6c7b8f !important; font-family:ui-monospace,SFMono-Regular,Consolas,monospace; white-space:nowrap; }
.audit-empty-v66179 { height:140px; color:#8b98a8 !important; text-align:center; }
.audit-footer-v66179 { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:11px 14px; border-top:1px solid #e7edf4; color:#607189; background:#fafbfd; font-size:9px; font-weight:800; }
.audit-footer-v66179 small { color:#93a0af; font-size:8px; }

@media (max-width: 900px) {
  .audit-stats-v66179 { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .audit-toolbar-v66179 { grid-template-columns:1fr 1fr 1fr; }
  .audit-search-v66179 { grid-column:1/-1; }
}
@media (max-width: 560px) {
  .audit-header-v66179 { align-items:flex-start; }
  .audit-heading-icon-v66179 { width:40px; height:40px; flex-basis:40px; }
  .audit-heading-v66179 h2 { font-size:17px; }
  .audit-heading-v66179 p { font-size:9px; line-height:1.45; }
  .audit-timezone-v66179 { flex:0 0 auto; padding:7px 8px; font-size:8px; }
  .audit-stats-v66179 { gap:8px; }
  .audit-stats-v66179 article { padding:11px; }
  .audit-stats-v66179 article > span { flex-basis:34px; width:34px; height:34px; }
  .audit-stats-v66179 strong { font-size:17px; }
  .audit-toolbar-v66179 { grid-template-columns:1fr 1fr; }
  .audit-refresh-v66179 { grid-column:1/-1; }
  .audit-footer-v66179 { align-items:flex-start; flex-direction:column; }
}

@media (max-width: 350px) {
  .home-body.lobby-v2-body .provider-preview.inline-games-grid {
    gap: 7px 4px !important;
  }

  .home-body.lobby-v2-body .provider-preview.inline-games-grid .inline-game-card > img,
  .home-body.lobby-v2-body .provider-preview.inline-games-grid .inline-game-card > .inline-game-placeholder {
    aspect-ratio: 4 / 5 !important;
  }

  .home-body.lobby-v2-body .provider-preview.inline-games-grid .inline-game-card > span {
    min-height: 30px;
    font-size: 7.5px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-body.lobby-v2-body .provider-preview.inline-games-grid .inline-game-card,
  .home-body.lobby-v2-body .provider-preview.inline-games-grid .inline-game-skeleton {
    animation: none;
    transition: none;
  }
}


/* === V9 taller provider cards: show more of each provider artwork/logo === */
.home-body.lobby-v2-body .provider-zone:not(.provider-inline-active) .mini-provider.provider-tile {
  aspect-ratio: 0.68 / 1 !important;
  min-height: 0 !important;
}

.home-body.lobby-v2-body .provider-zone:not(.provider-inline-active) .mini-provider.provider-tile .provider-tile-media {
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

.home-body.lobby-v2-body .provider-zone:not(.provider-inline-active) .mini-provider.provider-tile img,
.home-body.lobby-v2-body .provider-zone:not(.provider-inline-active) .mini-provider.provider-tile .asset-placeholder {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
}

@media (max-width: 370px) {
  .home-body.lobby-v2-body .provider-zone:not(.provider-inline-active) .mini-provider.provider-tile {
    aspect-ratio: 0.70 / 1 !important;
  }
}


/* === V10 bottom nav redesign: clean, simple, easy to read === */




























@media (max-width: 390px) {
  

  

  

  

  
}


/* === V11 bottom nav center button: remove circle, use clean capsule style === */










@media (max-width: 390px) {
  

  
}


/* === V12 fine-tune center logo alignment === */





/* =========================================================
   DEPOSIT V1 — BANK + WALLET ENVELOPE
========================================================= */
.deposit-page-body {
  min-height: 100vh;
  margin: 0;
  color: #17324d;
  background:
    radial-gradient(circle at 12% 10%, rgba(255,255,255,.95), transparent 20%),
    radial-gradient(circle at 88% 18%, rgba(132,216,255,.55), transparent 24%),
    linear-gradient(180deg, #d8f1ff 0%, #eff9ff 52%, #e2f2ff 100%);
  font-family: var(--app-font-family);
}

.deposit-app {
  width: 100%;
  max-width: var(--member-page-width);
  min-height: 100vh;
  margin: 0 auto;
  padding: 74px 11px calc(86px + env(safe-area-inset-bottom));
  position: relative;
  background:
    radial-gradient(circle at 20px 20px, rgba(255,255,255,.68) 0 2px, transparent 2.5px) 0 0/22px 22px,
    linear-gradient(180deg, rgba(226,245,255,.92), rgba(245,251,255,.96));
  box-shadow: 0 0 32px rgba(13,91,145,.15);
}

.deposit-header {
  position: fixed;
  z-index: 60;
  top: 0;
  left: 50%;
  width: min(100%, var(--member-page-width));
  height: 64px;
  padding: 8px 10px;
  transform: translateX(-50%);
  display: grid;
  grid-template-columns: 42px minmax(0,1fr) auto;
  align-items: center;
  gap: 8px;
  color: #fff;
  background: linear-gradient(180deg, #35b9ff 0%, #1596eb 58%, #087bd4 100%);
  border-bottom: 1px solid rgba(255,255,255,.35);
  box-shadow: 0 6px 18px rgba(8,99,166,.24);
}

.deposit-back {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  color: #fff;
  border-radius: 12px;
  background: rgba(255,255,255,.18);
  text-decoration: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25);
}

.deposit-header-title {
  min-width: 0;
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.deposit-header-title strong { font-size: 18px; font-weight: 900; }
.deposit-header-title span { margin-top: 4px; font-size: 10px; opacity: .86; }

.deposit-balance {
  height: 38px;
  padding: 0 9px;
  border: 0;
  border-radius: 13px;
  display: flex;
  align-items: center;
  gap: 6px;
  color: #176799;
  background: #fff;
  box-shadow: 0 4px 12px rgba(0,74,128,.17);
  cursor: pointer;
}

.deposit-balance > i:first-child { color: #f2b300; }
.deposit-balance > i:last-child { color: #0b82d9; }
.deposit-balance strong { font-size: 12px; font-weight: 900; }
.deposit-balance.spinning > i:last-child { animation: spin .8s linear infinite; }

.deposit-channel-tabs {
  margin-bottom: 11px;
  padding: 5px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
  border: 1px solid #c2e2f5;
  border-radius: 17px;
  background: rgba(255,255,255,.82);
  box-shadow: 0 8px 20px rgba(25,109,165,.10);
}

.deposit-channel-tabs button {
  min-height: 52px;
  border: 0;
  border-radius: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #5a768c;
  background: transparent;
  font: inherit;
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
}

.deposit-channel-tabs button i { font-size: 19px; }
.deposit-channel-tabs button.active {
  color: #fff;
  background: linear-gradient(145deg, #45c0ff, #0b82dc);
  box-shadow: 0 7px 16px rgba(12,126,211,.24);
}
.deposit-channel-tabs button:disabled { opacity: .42; cursor: not-allowed; }

.deposit-mode-notice,
.deposit-alert-card {
  margin: 0 0 10px;
  border: 1px solid #bfdef1;
  border-radius: 13px;
  color: #486a82;
  background: linear-gradient(180deg, #f7fcff, #eaf7ff);
  box-shadow: 0 5px 13px rgba(25,106,160,.06);
}

.deposit-mode-notice { padding: 10px 12px; font-size: 11px; font-weight: 700; }

.deposit-panel[hidden] { display: none; }

.deposit-account-card {
  min-height: 98px;
  padding: 13px;
  display: grid;
  grid-template-columns: 54px minmax(0,1fr) auto;
  align-items: center;
  gap: 11px;
  border: 1px solid rgba(255,255,255,.9);
  border-radius: 19px;
  color: #fff;
  background:
    radial-gradient(circle at 88% 20%, rgba(255,255,255,.18), transparent 25%),
    linear-gradient(145deg, #3db8fb 0%, #178fdf 56%, #0875c8 100%);
  box-shadow: 0 12px 25px rgba(10,112,187,.23);
}

.deposit-account-icon {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 17px;
  color: #0878c7;
  background: linear-gradient(180deg, #fff, #e8f7ff);
  font-size: 23px;
  box-shadow: 0 5px 13px rgba(0,70,115,.14);
}

.deposit-account-detail { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.deposit-account-detail span { font-size: 11px; opacity: .88; }
.deposit-account-detail strong { font-size: 19px; letter-spacing: .04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.deposit-account-detail small { font-size: 10px; opacity: .92; }

.deposit-account-card > button {
  min-width: 62px;
  height: 35px;
  padding: 0 9px;
  border: 1px solid rgba(255,255,255,.48);
  border-radius: 11px;
  color: #fff;
  background: rgba(255,255,255,.14);
  font: inherit;
  font-size: 10px;
  font-weight: 800;
  cursor: pointer;
}

.deposit-alert-card {
  margin-top: 9px;
  padding: 9px 11px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.deposit-alert-card i { margin-top: 1px; color: #178fdd; }
.deposit-alert-card p { margin: 0; font-size: 10px; line-height: 1.45; font-weight: 700; }

.deposit-form {
  margin-top: 10px;
  padding: 13px;
  border: 1px solid #c8e4f5;
  border-radius: 19px;
  background: rgba(255,255,255,.90);
  box-shadow: 0 9px 22px rgba(23,104,158,.10);
}

.deposit-field { display: block; }
.deposit-field > span,
.deposit-time-card legend {
  display: block;
  margin-bottom: 7px;
  color: #355a73;
  font-size: 12px;
  font-weight: 900;
}

.deposit-money-input,
.wallet-link-input {
  height: 52px;
  display: flex;
  align-items: center;
  gap: 9px;
  border: 1px solid #b9dff5;
  border-radius: 14px;
  background: linear-gradient(180deg, #fff, #f4faff);
  box-shadow: inset 0 1px 2px rgba(14,83,126,.04);
  overflow: hidden;
}

.deposit-money-input b { padding-left: 14px; color: #0b84d9; font-size: 21px; }
.deposit-money-input input,
.wallet-link-input input {
  min-width: 0;
  flex: 1;
  height: 100%;
  border: 0;
  outline: 0;
  color: #163b55;
  background: transparent;
  font: inherit;
  font-size: 20px;
  font-weight: 900;
}
.deposit-money-input input::placeholder { color: #a5bdcc; }

.deposit-quick-amounts {
  margin-top: 8px;
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 6px;
}
.deposit-quick-amounts button {
  height: 34px;
  border: 1px solid #cbe5f5;
  border-radius: 10px;
  color: #327397;
  background: #edf8ff;
  font: inherit;
  font-size: 11px;
  font-weight: 900;
  cursor: pointer;
}
.deposit-quick-amounts button:active { color: #fff; background: #168fdf; }

.deposit-time-card {
  margin: 13px 0 0;
  padding: 12px;
  border: 1px solid #c7e4f5;
  border-radius: 15px;
  background: linear-gradient(180deg, #f5fbff, #eaf7ff);
}
.deposit-time-card legend { padding: 0 5px; }
.deposit-time-live {
  margin-bottom: 9px;
  padding: 8px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 11px;
  color: #31789f;
  background: rgba(255,255,255,.8);
  font-size: 10px;
  font-weight: 800;
}
.deposit-time-live strong { color: #087bc9; font-size: 15px; }
.deposit-time-grid { display: grid; grid-template-columns: 1.25fr .75fr; gap: 7px; }
.deposit-time-grid label span { display: block; margin-bottom: 4px; color: #638198; font-size: 9px; font-weight: 800; }
.deposit-time-grid input {
  width: 100%;
  height: 42px;
  padding: 0 9px;
  border: 1px solid #c5dfef;
  border-radius: 11px;
  outline: 0;
  color: #214b66;
  background: #fff;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
}
.deposit-use-now {
  height: 32px;
  margin-top: 8px;
  padding: 0 10px;
  border: 0;
  border-radius: 10px;
  color: #fff;
  background: #168fdf;
  font: inherit;
  font-size: 10px;
  font-weight: 800;
  cursor: pointer;
}
.deposit-time-card > small { display: block; margin-top: 7px; color: #6f899d; font-size: 9px; line-height: 1.35; }
.deposit-time-card > small.manual { color: #d27a22; }

.deposit-slip-box {
  min-height: 145px;
  margin-top: 12px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 2px dashed #90cbea;
  border-radius: 16px;
  color: #47728d;
  background: linear-gradient(180deg, #eef9ff, #e1f2ff);
  cursor: pointer;
}
.deposit-slip-box input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.deposit-slip-empty { padding: 17px; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.deposit-slip-empty i { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 15px; color: #fff; background: linear-gradient(145deg,#46bdff,#1184d9); font-size: 21px; }
.deposit-slip-empty strong { color: #2d617f; font-size: 13px; }
.deposit-slip-empty small { max-width: 250px; font-size: 9px; line-height: 1.4; }
.deposit-slip-preview { position: relative; width: 100%; min-height: 180px; display: block; }
.deposit-slip-preview img { width: 100%; height: 220px; display: block; object-fit: contain; background: #dceefa; }
.deposit-slip-preview b { position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); padding: 6px 10px; border-radius: 99px; color: #fff; background: rgba(10,73,111,.75); font-size: 9px; }

.deposit-form-message { min-height: 18px; margin: 9px 0 0; color: #16834d; font-size: 10px; font-weight: 800; line-height: 1.4; }
.deposit-form-message.error { color: #d43d4f; }
.deposit-submit {
  width: 100%;
  height: 48px;
  margin-top: 7px;
  border: 0;
  border-radius: 14px;
  color: #fff;
  background: linear-gradient(180deg,#38b7fb,#0c82da);
  box-shadow: 0 8px 17px rgba(9,125,210,.23);
  font: inherit;
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
}
.deposit-submit:disabled { opacity: .55; cursor: wait; }

.wallet-envelope-hero {
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 13px;
  border: 1px solid rgba(255,255,255,.92);
  border-radius: 19px;
  color: #fff;
  background:
    radial-gradient(circle at 85% 15%, rgba(255,255,255,.18), transparent 25%),
    linear-gradient(145deg,#6d77f5,#4d55cf 58%,#3937a9);
  box-shadow: 0 12px 24px rgba(59,65,167,.22);
}
.wallet-envelope-icon { width: 55px; height: 55px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 18px; color: #5b55cf; background: #fff; font-size: 25px; }
.wallet-envelope-hero strong { font-size: 16px; font-weight: 900; }
.wallet-envelope-hero p { margin: 5px 0 0; font-size: 10px; line-height: 1.45; opacity: .92; }

.wallet-envelope-steps { margin: 10px 0 0; padding: 11px; list-style: none; border: 1px solid #c8e4f5; border-radius: 16px; background: rgba(255,255,255,.88); }
.wallet-envelope-steps li { min-height: 39px; display: flex; align-items: center; gap: 9px; color: #44667e; font-size: 10px; font-weight: 700; }
.wallet-envelope-steps li + li { border-top: 1px solid #e3f0f8; }
.wallet-envelope-steps b { width: 24px; height: 24px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; color: #fff; background: linear-gradient(145deg,#6f7cf7,#4f56cf); }
.wallet-envelope-form { margin-top: 10px; }
.wallet-link-input { padding-left: 12px; }
.wallet-link-input > i { color: #5863da; }
.wallet-link-input input { font-size: 12px; font-weight: 700; }
.wallet-link-input button { align-self: stretch; min-width: 55px; border: 0; color: #fff; background: #5964d9; font: inherit; font-size: 10px; font-weight: 900; cursor: pointer; }
.wallet-alert-card i { color: #5964d9; }
.wallet-submit { background: linear-gradient(180deg,#727df4,#5058cd); box-shadow: 0 8px 17px rgba(68,75,181,.23); }

.deposit-recent-section {
  margin-top: 12px;
  padding: 12px;
  border: 1px solid #c8e4f5;
  border-radius: 18px;
  background: rgba(255,255,255,.88);
  box-shadow: 0 8px 18px rgba(26,103,154,.08);
}
.deposit-recent-section > header { display: flex; justify-content: space-between; align-items: center; }
.deposit-recent-section > header strong { color: #315c77; font-size: 12px; }
.deposit-recent-section > header a { color: #0d83d5; font-size: 9px; font-weight: 800; text-decoration: none; }
.deposit-recent-list { margin-top: 7px; }
.deposit-recent-list > p { padding: 12px 0; color: #7690a3; text-align: center; font-size: 10px; }
.deposit-recent-item { min-height: 54px; display: grid; grid-template-columns: 36px minmax(0,1fr) auto; align-items: center; gap: 9px; }
.deposit-recent-item + .deposit-recent-item { border-top: 1px solid #e2f0f8; }
.deposit-recent-icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 11px; color: #fff; background: linear-gradient(145deg,#43bcff,#1286db); }
.deposit-recent-item > div { min-width: 0; }
.deposit-recent-item > div strong { display: block; color: #315970; font-size: 10px; }
.deposit-recent-item > div small { display: block; margin-top: 3px; overflow: hidden; color: #7891a4; font-size: 8px; white-space: nowrap; text-overflow: ellipsis; }
.deposit-recent-item > b { max-width: 84px; padding: 4px 7px; border-radius: 99px; color: #b27115; background: #fff2ce; font-size: 8px; text-align: center; }
.deposit-recent-item.status-completed > b { color: #258054; background: #dcf7e9; }
.deposit-recent-item.status-rejected > b,
.deposit-recent-item.status-provider_failed > b { color: #c13d4d; background: #ffe4e8; }

.deposit-bottom-nav {
  position: fixed;
  z-index: 70;
  left: 50%;
  bottom: 0;
  width: min(100%, var(--member-page-width));
  height: calc(66px + env(safe-area-inset-bottom));
  padding: 4px 6px env(safe-area-inset-bottom);
  transform: translateX(-50%);
  display: grid;
  grid-template-columns: repeat(5,1fr);
  gap: 2px;
  border-radius: 18px 18px 0 0;
  background: linear-gradient(180deg,#67d1ff,#2da4ec 52%,#1488d9);
  box-shadow: 0 -9px 23px rgba(7,78,130,.23);
}
.deposit-bottom-nav a { min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; border-radius: 13px; color: rgba(255,255,255,.86); text-decoration: none; font-size: 8px; font-weight: 800; }
.deposit-bottom-nav a i { font-size: 16px; }
.deposit-bottom-nav a.active { color: #0b79c6; background: rgba(255,255,255,.92); box-shadow: 0 5px 12px rgba(0,75,124,.14); }

/* Admin deposit enhancements */
.deposit-admin-filters { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.deposit-admin-filters select { min-height: 38px; border: 1px solid #c9d4e4; border-radius: 9px; padding: 0 10px; background: #fff; color: #24374e; }
.deposit-channel-label { display: inline-flex; align-items: center; gap: 5px; padding: 5px 8px; border-radius: 99px; font-size: 11px; font-weight: 800; }
.deposit-channel-label.bank { color: #176b9e; background: #e4f4ff; }
.deposit-channel-label.wallet { color: #584fc2; background: #eceaff; }
.admin-proof-link { display: inline-flex; align-items: center; gap: 5px; min-height: 30px; padding: 0 9px; border-radius: 8px; color: #fff; background: #247fc1; text-decoration: none; font-size: 11px; font-weight: 800; }
.admin-proof-link.wallet { background: #6257cf; }
.admin-deposit-meta { color: #65778d; font-size: 11px; line-height: 1.45; white-space: normal; }

@media (max-width: 370px) {
  .deposit-app { padding-left: 8px; padding-right: 8px; }
  .deposit-header { grid-template-columns: 38px minmax(0,1fr) auto; padding-left: 8px; padding-right: 8px; }
  .deposit-header-title strong { font-size: 16px; }
  .deposit-account-card { grid-template-columns: 48px minmax(0,1fr); }
  .deposit-account-card > button { grid-column: 1 / -1; width: 100%; }
  .deposit-time-grid { grid-template-columns: 1fr; }
  .deposit-bottom-nav a { font-size: 7px; }
}

.wallet-deposit-entry {
  min-height: 240px;
  padding: 28px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 1px solid #c9e5f6;
  border-radius: 20px;
  color: #3a607a;
  background: linear-gradient(180deg,#f7fcff,#e8f6ff);
  text-align: center;
}
.wallet-deposit-entry > i { width: 68px; height: 68px; display: grid; place-items: center; border-radius: 22px; color: #fff; background: linear-gradient(145deg,#45bfff,#0c82d9); font-size: 29px; box-shadow: 0 10px 20px rgba(11,126,210,.20); }
.wallet-deposit-entry strong { font-size: 18px; }
.wallet-deposit-entry p { margin: 0 0 8px; max-width: 260px; color: #6b8598; font-size: 12px; line-height: 1.5; }
.wallet-deposit-entry .primary-action { width: 100%; text-decoration: none; }

/* =========================================================
   FINANCE ADMIN V2
========================================================= */
.finance-list-panel,
.finance-settings-panel {
  display: grid;
  gap: 18px;
}

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

.finance-summary-card {
  min-height: 118px;
  padding: 20px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  gap: 16px;
  color: #17324d;
  background: #fff;
  border: 1px solid #e2e9f4;
  box-shadow: 0 10px 28px rgba(43, 67, 101, .08);
}

.finance-summary-card > i {
  width: 50px;
  height: 50px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 21px;
}

.finance-summary-card span {
  display: block;
  color: #7b8ca6;
  font-size: 13px;
  font-weight: 700;
}

.finance-summary-card strong {
  display: block;
  margin-top: 5px;
  color: #1c2f4d;
  font-size: 27px;
  line-height: 1;
}

.finance-summary-card.is-warning > i { background: linear-gradient(145deg, #ffba4a, #f28b19); }
.finance-summary-card.is-purple > i { background: linear-gradient(145deg, #8d7cf7, #6252d8); }
.finance-summary-card.is-success > i { background: linear-gradient(145deg, #43cf9a, #20a873); }
.finance-summary-card.is-danger > i { background: linear-gradient(145deg, #ff6b79, #e83c52); }

.finance-workspace-card,
.finance-editor-card,
.finance-list-card,
.finance-rules-card {
  border: 1px solid #e0e7f1;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 12px 32px rgba(38, 60, 91, .08);
}

.finance-workspace-card { overflow: hidden; }

.finance-panel-header,
.finance-editor-card > header,
.finance-list-card > header,
.finance-rules-card > header {
  min-height: 82px;
  padding: 18px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid #edf1f6;
}

.finance-panel-header h2,
.finance-editor-card h3,
.finance-list-card h3,
.finance-rules-card h3 {
  margin: 0;
  color: #1c2f4d;
}

.finance-panel-header p,
.finance-editor-card p,
.finance-list-card p,
.finance-rules-card p {
  margin: 5px 0 0;
  color: #8491a7;
  font-size: 13px;
}

.finance-primary-button,
.finance-secondary-button {
  min-height: 40px;
  padding: 0 15px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.finance-primary-button {
  border: 0;
  color: #fff;
  background: linear-gradient(135deg, #4b72df, #3158c9);
  box-shadow: 0 7px 16px rgba(55, 91, 195, .22);
}

.finance-secondary-button {
  border: 1px solid #ced8e7;
  color: #405575;
  background: #fff;
}

.finance-status-tabs,
.finance-settings-tabs {
  display: flex;
  gap: 7px;
  padding: 14px 18px 0;
  overflow-x: auto;
}

.finance-status-tabs button,
.finance-settings-tabs button {
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid #dbe3ee;
  border-radius: 10px;
  color: #65758d;
  background: #f8fafc;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}

.finance-status-tabs button.active,
.finance-settings-tabs button.active {
  color: #fff;
  border-color: #4268d5;
  background: linear-gradient(135deg, #5579df, #365bc9);
  box-shadow: 0 6px 14px rgba(53, 89, 199, .18);
}

.finance-filter-bar {
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.finance-search-box {
  min-height: 42px;
  min-width: min(420px, 100%);
  flex: 1;
  padding: 0 13px;
  display: flex;
  align-items: center;
  gap: 9px;
  border: 1px solid #d8e0eb;
  border-radius: 11px;
  color: #7c8da5;
  background: #fbfcfe;
}

.finance-search-box input {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  font: inherit;
}

.finance-filter-bar select {
  min-height: 42px;
  padding: 0 11px;
  border: 1px solid #d8e0eb;
  border-radius: 11px;
  color: #425672;
  background: #fff;
}

.finance-table-scroll { border-top: 1px solid #edf1f6; }
.finance-table th { background: #f7f9fc; color: #66758d; }
.finance-table td { vertical-align: middle; }
.finance-table tr:hover td { background: #fbfdff; }

.finance-row-member strong,
.finance-row-member small { display: block; }
.finance-row-member small { margin-top: 3px; color: #8a97a9; }
.finance-row-amount { color: #1f4fbf; font-weight: 900; font-size: 15px; }
.finance-reference { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: #344964; font-size: 12px; }

.finance-detail-button {
  min-height: 34px;
  padding: 0 11px;
  border: 1px solid #cfd9e8;
  border-radius: 9px;
  color: #3f5575;
  background: #fff;
  cursor: pointer;
}

.finance-settings-hero {
  min-height: 150px;
  padding: 25px 28px;
  border-radius: 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  color: #fff;
  background:
    radial-gradient(circle at 90% 15%, rgba(255,255,255,.18), transparent 24%),
    linear-gradient(135deg, #253b69, #345aa7 58%, #4775d7);
  box-shadow: 0 18px 40px rgba(40, 65, 117, .22);
}

.finance-settings-hero h2 { margin: 4px 0 7px; font-size: 30px; }
.finance-settings-hero p { margin: 0; color: rgba(255,255,255,.78); }
.finance-eyebrow { color: #aebfff; font-size: 11px; font-weight: 900; letter-spacing: .16em; }

.finance-security-note {
  max-width: 300px;
  padding: 14px 16px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(255,255,255,.9);
  background: rgba(255,255,255,.10);
  backdrop-filter: blur(8px);
}

.finance-settings-tabs {
  padding: 0;
  gap: 8px;
}

.finance-settings-grid {
  display: grid;
  grid-template-columns: minmax(340px, .85fr) minmax(420px, 1.15fr);
  gap: 18px;
}

.finance-form-grid,
.finance-rules-grid {
  padding: 18px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 13px;
}

.finance-form-grid label,
.finance-rules-grid label {
  display: grid;
  gap: 6px;
  color: #53657f;
  font-size: 12px;
  font-weight: 800;
}

.finance-form-grid input,
.finance-form-grid select,
.finance-form-grid textarea,
.finance-rules-grid input {
  width: 100%;
  min-height: 42px;
  padding: 8px 11px;
  border: 1px solid #d4ddea;
  border-radius: 10px;
  outline: 0;
  color: #233a59;
  background: #fbfcfe;
  font: inherit;
}

.finance-form-grid textarea { resize: vertical; }
.finance-form-full { grid-column: 1 / -1; }
.finance-switch-row { display: flex !important; align-items: center; gap: 8px !important; }
.finance-switch-row input { width: 18px; min-height: 18px; }

.finance-account-list {
  padding: 14px;
  display: grid;
  gap: 10px;
  max-height: 660px;
  overflow: auto;
}

.finance-account-item {
  padding: 15px;
  border: 1px solid #dfe6ef;
  border-radius: 15px;
  display: grid;
  grid-template-columns: 46px 1fr auto;
  gap: 13px;
  align-items: center;
  background: #fbfcfe;
}

.finance-account-icon {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  color: #fff;
  background: linear-gradient(145deg, #5b7ee0, #355bc9);
}

.finance-account-item.wallet .finance-account-icon { background: linear-gradient(145deg, #8c71ef, #6548ca); }
.finance-account-main strong,
.finance-account-main span,
.finance-account-main small { display: block; }
.finance-account-main span { margin-top: 3px; color: #435774; font-weight: 700; }
.finance-account-main small { margin-top: 4px; color: #8896a9; }
.finance-account-badges { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 7px; }
.finance-mini-badge { padding: 4px 7px; border-radius: 999px; color: #46607f; background: #eaf0f8; font-size: 10px; font-weight: 800; }
.finance-mini-badge.primary { color: #9d6200; background: #fff1c9; }
.finance-mini-badge.active { color: #13744d; background: #dff7ec; }
.finance-mini-badge.maintenance { color: #9a5a00; background: #fff0ce; }
.finance-mini-badge.inactive { color: #8d3d49; background: #ffe5e9; }

.finance-account-actions { display: grid; gap: 6px; }
.finance-account-actions button {
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid #ced8e6;
  border-radius: 8px;
  color: #445a78;
  background: #fff;
  cursor: pointer;
}

.finance-rules-card { padding-bottom: 18px; }
.finance-rules-card > .finance-primary-button { margin-left: 18px; }
.finance-toggle {
  min-height: 52px;
  padding: 0 13px;
  display: flex !important;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 10px !important;
  border: 1px solid #dbe3ed;
  border-radius: 11px;
  background: #f8fafc;
}
.finance-toggle input { width: 18px; min-height: 18px; }

.finance-detail-dialog { width: min(760px, 94vw); }
.finance-detail-body { padding: 18px; display: grid; gap: 15px; }
.finance-detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
.finance-detail-field { padding: 12px; border: 1px solid #e0e7f0; border-radius: 11px; background: #fafbfd; }
.finance-detail-field span { display: block; color: #8996a8; font-size: 11px; font-weight: 800; }
.finance-detail-field strong { display: block; margin-top: 5px; color: #263c59; overflow-wrap: anywhere; }
.finance-detail-proof { padding: 14px; border-radius: 13px; background: #eef4fb; }
.finance-detail-proof img { width: 100%; max-height: 420px; object-fit: contain; border-radius: 10px; background: #fff; }
.finance-detail-actions { display: flex; gap: 8px; flex-wrap: wrap; }

@media (max-width: 1100px) {
  .finance-summary-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .finance-settings-grid { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .finance-summary-grid { grid-template-columns: 1fr; }
  .finance-settings-hero { align-items: flex-start; flex-direction: column; }
  .finance-form-grid,
  .finance-rules-grid,
  .finance-detail-grid { grid-template-columns: 1fr; }
  .finance-form-full { grid-column: auto; }
  .finance-filter-bar { align-items: stretch; }
  .finance-filter-bar > * { width: 100%; }
  .finance-search-box { min-width: 0; }
}

.deposit-bank-choices {
  margin-bottom: 10px;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
}
.deposit-bank-choices::-webkit-scrollbar { display: none; }
.deposit-bank-choice {
  flex: 0 0 170px;
  min-height: 58px;
  padding: 8px 10px;
  border: 1px solid #cfe4f4;
  border-radius: 13px;
  display: flex;
  align-items: center;
  gap: 9px;
  text-align: left;
  color: #42617a;
  background: rgba(255,255,255,.9);
  cursor: pointer;
}
.deposit-bank-choice i { color: #1997e6; }
.deposit-bank-choice strong,
.deposit-bank-choice small { display: block; }
.deposit-bank-choice small { margin-top: 3px; color: #7f93a7; }
.deposit-bank-choice.active {
  color: #fff;
  border-color: #168ddd;
  background: linear-gradient(135deg, #46bdf8, #168ddd);
  box-shadow: 0 7px 16px rgba(20, 129, 205, .22);
}
.deposit-bank-choice.active i,
.deposit-bank-choice.active small { color: #fff; }


/* ===== Finance table redesign (match credit management style) ===== */
.finance-table-scroll-v2 {
  margin: 0 18px 18px;
  border: 1px solid #cfd8e4;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.65);
}

.finance-table-v2 {
  min-width: 1180px;
}

.finance-table-v2 th {
  background: linear-gradient(180deg, #1f2d45 0%, #162235 100%);
  border-right-color: rgba(255,255,255,.1);
  font-size: 11px;
  letter-spacing: .01em;
}

.finance-table-v2 td {
  padding: 8px 10px;
  font-size: 11px;
  white-space: normal;
  line-height: 1.4;
}

.finance-table-v2 tbody tr:nth-child(odd) td {
  background: #fbfdff;
}

.finance-table-v2 tbody tr:hover td {
  background: #eef6ff;
}

.finance-index-badge {
  display: inline-flex;
  min-width: 28px;
  height: 28px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  color: #1b4f95;
  background: #eaf3ff;
  font-weight: 900;
}

.deposit-channel-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
}

.deposit-channel-label.bank {
  color: #0f5f9c;
  background: #e6f4ff;
}

.deposit-channel-label.wallet {
  color: #6843ce;
  background: #efe9ff;
}

.finance-row-member strong,
.finance-row-member small {
  display: block;
  text-align: left;
}

.finance-row-member strong {
  color: #1c2c45;
  font-size: 13px;
  font-weight: 900;
}

.finance-row-member small {
  margin-top: 2px;
  color: #8090a3;
  font-size: 11px;
}

.finance-phone-stack strong,
.finance-phone-stack small,
.finance-proof-stack strong,
.finance-proof-stack small,
.finance-bank-stack strong,
.finance-bank-stack small {
  display: block;
}

.finance-phone-stack strong,
.finance-proof-stack strong,
.finance-bank-stack strong {
  color: #253750;
  font-size: 12px;
  font-weight: 800;
}

.finance-phone-stack small,
.finance-proof-stack small,
.finance-bank-stack small {
  margin-top: 3px;
  color: #7e8ca0;
  font-size: 10px;
}

.finance-proof-stack a {
  color: #1d63b8;
  font-weight: 800;
  text-decoration: none;
}

.finance-proof-stack a:hover { text-decoration: underline; }

.finance-row-amount {
  color: #1f4fbf;
  font-size: 14px;
  font-weight: 900;
}

.finance-reference {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: #2f4967;
  font-size: 12px;
  font-weight: 700;
}

.finance-detail-button {
  min-width: 88px;
  min-height: 32px;
  border: 1px solid #0f1726;
  border-radius: 8px;
  color: #fff;
  background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}

.finance-detail-button:hover {
  filter: brightness(1.06);
}

.table-actions {
  display: flex;
  justify-content: center;
}

@media (max-width: 900px) {
  .finance-table-scroll-v2 {
    margin: 0 12px 16px;
    border-radius: 12px;
  }
}


/* ===== Finance table + modal polish V4 ===== */
.finance-table-scroll-v2 {
  margin: 0 18px 18px;
  overflow-x: auto;
  overflow-y: hidden;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  background: #fff;
  box-shadow: none;
  scrollbar-color: #9aa7b8 #eef2f7;
  scrollbar-width: thin;
}

.finance-table-scroll-v2::-webkit-scrollbar { height: 10px; }
.finance-table-scroll-v2::-webkit-scrollbar-track { background: #eef2f7; }
.finance-table-scroll-v2::-webkit-scrollbar-thumb { background: #9aa7b8; border-radius: 999px; border: 2px solid #eef2f7; }

.finance-table-v2 {
  width: 100%;
  min-width: 980px;
  table-layout: fixed;
  border-collapse: collapse;
}

.finance-deposit-table .col-index { width: 48px; }
.finance-deposit-table .col-channel { width: 95px; }
.finance-deposit-table .col-reference { width: 154px; }
.finance-deposit-table .col-member { width: 154px; }
.finance-deposit-table .col-phone { width: 120px; }
.finance-deposit-table .col-amount { width: 80px; }
.finance-deposit-table .col-proof { width: 190px; }
.finance-deposit-table .col-status { width: 105px; }
.finance-deposit-table .col-action { width: 112px; }

.finance-withdraw-table .col-index { width: 48px; }
.finance-withdraw-table .col-reference { width: 160px; }
.finance-withdraw-table .col-member { width: 170px; }
.finance-withdraw-table .col-bank { width: 230px; }
.finance-withdraw-table .col-amount { width: 100px; }
.finance-withdraw-table .col-status { width: 120px; }
.finance-withdraw-table .col-date { width: 145px; }
.finance-withdraw-table .col-action { width: 112px; }

.finance-table-v2 th {
  height: 42px;
  padding: 8px 7px;
  color: #fff;
  background: #17243a;
  border-right: 1px solid rgba(255,255,255,.12);
  font-size: 10px;
  font-weight: 900;
  text-align: center;
  white-space: nowrap;
}

.finance-table-v2 td {
  height: 54px;
  padding: 7px 8px;
  color: #1b2a41;
  background: #fff;
  border-right: 1px solid #d4dbe5;
  border-bottom: 1px solid #d4dbe5;
  font-size: 10px;
  line-height: 1.35;
  text-align: center;
  vertical-align: middle;
  overflow: hidden;
}

.finance-table-v2 tbody tr:nth-child(odd) td { background: #f7f9fc; }
.finance-table-v2 tbody tr:hover td { background: #edf6ff; }
.finance-table-v2 th:last-child,
.finance-table-v2 td:last-child { border-right: 0; }

.finance-table-v2 th:last-child,
.finance-table-v2 td:last-child {
  position: sticky;
  right: 0;
  z-index: 2;
  box-shadow: -5px 0 10px rgba(25, 45, 72, .07);
}
.finance-table-v2 th:last-child { z-index: 4; background: #17243a; }
.finance-table-v2 tbody tr:nth-child(odd) td:last-child { background: #f7f9fc; }
.finance-table-v2 tbody tr:nth-child(even) td:last-child { background: #fff; }
.finance-table-v2 tbody tr:hover td:last-child { background: #edf6ff; }

.finance-reference {
  overflow-wrap: anywhere;
  word-break: break-word;
  font-size: 10px;
  line-height: 1.25;
}

.finance-row-member strong { font-size: 12px; }
.finance-row-member small { font-size: 9px; }
.finance-phone-stack strong { font-size: 11px; }
.finance-phone-stack small { font-size: 9px; }
.finance-proof-stack strong { color: #263a56; font-size: 10px; }
.finance-proof-stack small { color: #8a96a8; font-size: 9px; }
.finance-row-amount { font-size: 12px; }

.finance-detail-button {
  min-width: 88px;
  min-height: 31px;
  border: 0;
  border-radius: 6px;
  color: #fff;
  background: #182338;
  box-shadow: 0 2px 6px rgba(12, 24, 43, .18);
}

.finance-detail-dialog {
  width: min(840px, calc(100vw - 32px));
  max-height: min(90vh, 900px);
  overflow: hidden;
  border-radius: 16px;
  background: #f5f8fc;
}

.finance-detail-dialog .finance-detail-header {
  position: sticky;
  top: 0;
  z-index: 10;
  min-height: 76px;
  padding: 17px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  color: #fff;
  background: linear-gradient(135deg, #1e2d47 0%, #263b61 100%);
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.finance-detail-dialog .finance-detail-header h2 {
  margin: 3px 0 0;
  color: #fff;
  font-size: 21px;
  line-height: 1.2;
}

.finance-detail-dialog .finance-eyebrow {
  color: #9db7ff;
  font-size: 10px;
  letter-spacing: .14em;
}

.finance-dialog-close {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 10px;
  color: #fff;
  background: rgba(255,255,255,.09);
  font-size: 17px;
}

.finance-dialog-close:hover { background: rgba(255,255,255,.17); }

.finance-detail-body {
  max-height: calc(min(90vh, 900px) - 76px);
  padding: 18px;
  display: grid;
  gap: 16px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.finance-detail-summary,
.finance-detail-proof-section {
  padding: 16px;
  border: 1px solid #dce4ee;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 5px 15px rgba(36, 56, 85, .06);
}

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

.finance-detail-field {
  min-height: 68px;
  padding: 11px 13px;
  border: 1px solid #dde5ef;
  border-radius: 10px;
  background: #f8fafc;
}

.finance-detail-field span {
  color: #8492a7;
  font-size: 10px;
  font-weight: 800;
}

.finance-detail-field strong {
  margin-top: 5px;
  color: #1a2b45;
  font-size: 13px;
  line-height: 1.35;
}

.finance-detail-section-title {
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.finance-detail-section-heading {
  color: #1d2f4a;
  font-size: 15px;
  font-weight: 900;
}

.finance-detail-section-meta {
  color: #7f8da1;
  font-size: 10px;
  font-weight: 700;
}

.finance-detail-proof {
  min-height: 220px;
  padding: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: #edf2f8;
}

.finance-detail-proof img {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: min(52vh, 500px);
  object-fit: contain;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 5px 20px rgba(20, 36, 58, .12);
}

.finance-proof-empty {
  color: #8290a3;
  font-size: 13px;
  font-weight: 800;
}

.finance-wallet-open-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  text-decoration: none;
}

.finance-detail-actions {
  position: sticky;
  bottom: -18px;
  z-index: 5;
  margin: 0 -18px -18px;
  padding: 14px 18px;
  display: flex;
  justify-content: flex-end;
  gap: 9px;
  border-top: 1px solid #dce4ee;
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(8px);
}

.finance-detail-actions button {
  min-height: 38px;
  padding: 0 16px;
  border-radius: 8px;
  font-weight: 800;
}

@media (max-width: 760px) {
  .finance-detail-dialog { width: calc(100vw - 16px); max-height: 94vh; border-radius: 12px; }
  .finance-detail-dialog .finance-detail-header { padding: 14px 15px; }
  .finance-detail-dialog .finance-detail-header h2 { font-size: 17px; }
  .finance-detail-body { max-height: calc(94vh - 70px); padding: 12px; }
  .finance-detail-grid { grid-template-columns: 1fr; }
  .finance-detail-summary, .finance-detail-proof-section { padding: 12px; }
  .finance-detail-actions { margin: 0 -12px -12px; padding: 12px; }
}

/* ===== Finance action column/table fit fix V5 ===== */
.finance-table-v2 {
  table-layout: auto;
}

.finance-table-v2 th:last-child,
.finance-table-v2 td:last-child {
  position: static;
  right: auto;
  z-index: auto;
  box-shadow: none;
}

.finance-table-v2 th:last-child {
  background: #17243a;
}

.finance-table-v2 tbody tr:nth-child(odd) td:last-child {
  background: #f7f9fc;
}

.finance-table-v2 tbody tr:nth-child(even) td:last-child {
  background: #fff;
}

.finance-table-v2 tbody tr:hover td:last-child {
  background: #edf6ff;
}

.finance-deposit-table .col-action,
.finance-withdraw-table .col-action {
  width: 108px;
}

.table-actions {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.finance-detail-button {
  min-width: 78px;
  min-height: 32px;
  padding: 0 10px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(12, 24, 43, .12);
}

@media (max-width: 1280px) {
  .finance-table-v2 {
    min-width: 1000px;
  }
}


/* Finance V6: compact sequential reference numbers */
.finance-deposit-table .col-reference { width: 132px; }
.finance-withdraw-table .col-reference { width: 138px; }
.finance-reference {
  white-space: nowrap;
  overflow: visible;
  word-break: normal;
  overflow-wrap: normal;
  font-size: 11px;
}

/* ===== Deposit list redesign V7 (match reference style) ===== */
.finance-list-panel-deposit .finance-workspace-card--deposit-match {
  padding: 0;
  overflow: hidden;
}

.finance-panel-header--deposit-match {
  padding: 22px 26px 16px;
  border-bottom: 1px solid #e5e9f1;
  background: #fff;
}

.finance-panel-header--deposit-match h2 {
  margin-bottom: 4px;
  color: #193053;
  font-size: 21px;
}

.finance-panel-header--deposit-match p {
  margin: 0;
  color: #8592a6;
  font-size: 13px;
}

.deposit-filter-shell {
  padding: 16px 18px;
  border-bottom: 1px solid #e8edf4;
  background: #f7f9fc;
}

.finance-search-box--deposit-match {
  min-height: 44px;
  margin-bottom: 12px;
  border: 1px solid #cfd6e2;
  border-radius: 9px;
  background: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
}

.finance-search-box--deposit-match input {
  font-size: 13px;
}

.deposit-quick-range {
  margin-bottom: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.deposit-quick-range button {
  min-height: 31px;
  padding: 0 12px;
  border: 1px solid #cfd6e2;
  border-radius: 999px;
  color: #4f6078;
  background: #fff;
  font-size: 12px;
  font-weight: 800;
}

.deposit-quick-range button.active {
  color: #fff;
  background: #3d68e0;
  border-color: #3d68e0;
  box-shadow: 0 5px 14px rgba(61,104,224,.16);
}

.deposit-advanced-filters {
  display: grid;
  grid-template-columns: 1.2fr .9fr 1.2fr .9fr 1fr 1fr auto;
  gap: 10px;
  align-items: end;
}

.deposit-advanced-filters label {
  display: grid;
  gap: 6px;
  color: #7b899d;
  font-size: 11px;
  font-weight: 800;
}

.deposit-advanced-filters input,
.deposit-advanced-filters select {
  min-height: 42px;
  padding: 0 12px;
  border: 1px solid #cfd6e2;
  border-radius: 7px;
  color: #233653;
  background: #fff;
  font-size: 13px;
}

.deposit-time-field span {
  color: #7b899d;
  font-size: 11px;
  font-weight: 800;
}

.deposit-search-button {
  min-width: 116px;
  min-height: 42px;
  padding: 0 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  border-radius: 8px;
  color: #fff;
  background: #111821;
  box-shadow: 0 6px 16px rgba(17,24,33,.18);
  font-size: 14px;
  font-weight: 800;
}

.deposit-live-bar {
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  background: #fff;
}

.deposit-live-left,
.deposit-live-right {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.deposit-list-count {
  color: #8392a8;
  font-size: 13px;
}

.deposit-auto-refresh {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #223652;
  font-size: 13px;
  font-weight: 700;
}

.deposit-auto-refresh select {
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid #cfd6e2;
  border-radius: 7px;
  background: #fff;
  font-size: 12px;
}

.deposit-live-clock {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #8f9db1;
  font-size: 13px;
}

.deposit-live-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #47c86b;
  box-shadow: 0 0 0 4px rgba(71,200,107,.15);
}

.deposit-table-wrap {
  padding: 0 18px 18px;
  background: #fff;
}

.finance-deposit-match-table {
  min-width: 1180px;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid #d8dee9;
  border-radius: 10px;
  overflow: hidden;
}

.finance-deposit-match-table .col-index { width: 70px; }
.finance-deposit-match-table .col-username { width: 170px; }
.finance-deposit-match-table .col-channel { width: 190px; }
.finance-deposit-match-table .col-status { width: 120px; }
.finance-deposit-match-table .col-reference { width: 170px; }
.finance-deposit-match-table .col-amount { width: 110px; }
.finance-deposit-match-table .col-proof { width: 170px; }
.finance-deposit-match-table .col-admin { width: 130px; }
.finance-deposit-match-table .col-action { width: 110px; }

.finance-deposit-match-table th {
  height: 40px;
  padding: 10px 8px;
  color: #fff;
  background: #141a22;
  border-right: 1px solid rgba(255,255,255,.12);
  font-size: 12px;
  font-weight: 800;
}

.finance-deposit-match-table td {
  height: 58px;
  padding: 10px 8px;
  border-right: 1px solid #d9dfeb;
  border-bottom: 1px solid #d9dfeb;
  color: #1d304d;
  font-size: 12px;
  vertical-align: middle;
  background: #fff;
}

.finance-deposit-match-table tbody tr:nth-child(odd) td {
  background: #fcfdff;
}

.finance-deposit-match-table tbody tr:hover td {
  background: #f4f9ff;
}

.finance-deposit-match-table th:last-child,
.finance-deposit-match-table td:last-child {
  border-right: 0;
}

.finance-index-badge {
  min-width: 30px;
  min-height: 30px;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  background: #eaf1fb;
  color: #27548b;
  font-weight: 800;
}

.finance-username-copy {
  width: 100%;
  padding: 0;
  display: grid;
  justify-items: start;
  gap: 2px;
  border: 0;
  background: transparent;
  text-align: left;
  position: relative;
}

.finance-username-copy strong {
  color: #1b2f4e;
  font-size: 13px;
  font-weight: 900;
}

.finance-username-copy small {
  color: #93a0b2;
  font-size: 11px;
}

.finance-username-copy i {
  position: absolute;
  top: 2px;
  right: 0;
  color: #b0bac8;
  font-size: 12px;
}

.finance-channel-cell {
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
}

.finance-channel-icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  color: #263b5c;
  background: #eef2f8;
  flex: 0 0 34px;
  overflow: hidden;
}

.finance-channel-icon img {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

.finance-channel-text {
  display: grid;
  gap: 2px;
}

.finance-channel-text strong {
  color: #1d3150;
  font-size: 12px;
  font-weight: 900;
}

.finance-channel-text small,
.finance-admin-stack small,
.finance-proof-stack--compact small {
  color: #8b98ab;
  font-size: 11px;
}

.finance-proof-stack--compact strong,
.finance-admin-stack strong {
  color: #1e3150;
  font-size: 12px;
  font-weight: 800;
}

.deposit-status-badge,
.status-text {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 26px;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
}

.status-pending,
.status-verifying,
.status-processing,
.status-provider_unknown {
  color: #287653;
  background: #dff6e9;
}

.status-completed {
  color: #287653;
  background: #dff6e9;
}

.status-manual {
  color: #9a5d00;
  background: #fff0c8;
}

.status-rejected,
.status-provider_failed {
  color: #c63f53;
  background: #ffe3e8;
}

.finance-reference {
  color: #183155;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
}

.finance-row-amount {
  color: #172d4e;
  font-size: 13px;
  font-weight: 900;
}

.table-actions {
  justify-content: center;
}

.finance-detail-button {
  min-width: 70px;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 8px;
  color: #fff;
  background: #1a2438;
  font-size: 12px;
  font-weight: 800;
}

.finance-detail-button:hover {
  background: #10192a;
}

@media (max-width: 1320px) {
  .deposit-advanced-filters {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .deposit-search-button {
    width: 100%;
  }
}

@media (max-width: 900px) {
  .finance-panel-header--deposit-match,
  .deposit-filter-shell,
  .deposit-live-bar,
  .deposit-table-wrap {
    padding-left: 14px;
    padding-right: 14px;
  }

  .deposit-live-bar {
    align-items: flex-start;
    flex-direction: column;
  }

  .deposit-live-left,
  .deposit-live-right {
    width: 100%;
  }

  .deposit-advanced-filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .deposit-advanced-filters {
    grid-template-columns: 1fr;
  }
}

/* ===== Deposit table V8: use the exact Credit Management table system ===== */
.deposit-credit-table-scroll {
  margin: 0 8px 14px;
  padding: 0;
  overflow-x: auto;
  overflow-y: hidden;
  border: 1px solid #c9cfd7;
  border-radius: 0;
  background: #fff;
  box-shadow: none;
}

.deposit-credit-data-table {
  width: 100%;
  min-width: 1120px;
  border-spacing: 0;
  border-collapse: collapse;
  table-layout: auto;
}

.deposit-credit-data-table .col-index { width: 58px; }
.deposit-credit-data-table .col-username { width: 145px; }
.deposit-credit-data-table .col-channel { width: 190px; }
.deposit-credit-data-table .col-status { width: 110px; }
.deposit-credit-data-table .col-reference { width: 145px; }
.deposit-credit-data-table .col-amount { width: 90px; }
.deposit-credit-data-table .col-proof { width: 175px; }
.deposit-credit-data-table .col-admin { width: 115px; }
.deposit-credit-data-table .col-action { width: 72px; }

.deposit-credit-data-table th {
  height: 38px;
  padding: 7px 7px;
  border-right: 1px solid #9ca4ad;
  color: #fff;
  background: #171818;
  font-size: 10px;
  font-weight: 800;
  text-align: center;
  white-space: nowrap;
}

.deposit-credit-data-table td {
  height: 41px;
  padding: 5px 7px;
  border-right: 1px solid #cbd1d9;
  border-bottom: 1px solid #cbd1d9;
  color: #172238;
  background: #fff;
  font-size: 10px;
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
  overflow: visible;
}

.deposit-credit-data-table tbody tr:nth-child(odd) td {
  background: #f5f5f5;
}

.deposit-credit-data-table tbody tr:hover td {
  background: #eef6ff;
}

.deposit-credit-data-table th:last-child,
.deposit-credit-data-table td:last-child {
  border-right: 0;
}

.deposit-credit-data-table .finance-index-badge {
  min-width: auto;
  min-height: auto;
  display: inline;
  border-radius: 0;
  color: #172238;
  background: transparent;
  font-size: 10px;
  font-weight: 400;
}

.deposit-credit-data-table .finance-username-copy {
  max-width: 132px;
  padding: 3px 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: 0;
  color: #ff8200;
  background: transparent;
  font: inherit;
  cursor: pointer;
  position: static;
}

.deposit-credit-data-table .finance-username-copy strong {
  color: #ff8200;
  font-size: 10px;
  font-weight: 500;
}

.deposit-credit-data-table .finance-username-copy small {
  display: none;
}

.deposit-credit-data-table .finance-username-copy i {
  position: static;
  color: #b5bdc8;
  font-size: 11px;
}

.deposit-credit-data-table .finance-username-copy:hover,
.deposit-credit-data-table .finance-username-copy:focus-visible {
  color: #d66400;
  text-decoration: underline;
}

.deposit-credit-data-table .finance-channel-cell {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 7px;
  text-align: left;
}

.deposit-credit-data-table .finance-channel-icon,
.deposit-credit-data-table .finance-channel-icon.member-bank-cell {
  width: 29px;
  height: 29px;
  flex: 0 0 29px;
  padding: 0;
  display: grid;
  place-items: center;
  border-radius: 7px;
  color: #293b59;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,.15);
}

.deposit-credit-data-table .finance-channel-icon img,
.deposit-credit-data-table .finance-channel-icon.member-bank-cell img {
  width: 29px;
  height: 29px;
  border-radius: 7px;
  object-fit: contain;
  box-shadow: none;
}

.deposit-credit-data-table .finance-channel-icon i {
  font-size: 14px;
}

.deposit-credit-data-table .finance-channel-text {
  display: grid;
  gap: 1px;
}

.deposit-credit-data-table .finance-channel-text strong {
  color: #172238;
  font-size: 10px;
  font-weight: 800;
}

.deposit-credit-data-table .finance-channel-text small {
  max-width: 125px;
  overflow: hidden;
  color: #697589;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.deposit-credit-data-table .status-text,
.deposit-credit-data-table .deposit-status-badge {
  min-width: 31px;
  min-height: 0;
  padding: 4px 7px;
  border: 0;
  border-radius: 4px;
  font-size: 9px;
  font-weight: 800;
}

.deposit-credit-data-table .status-pending,
.deposit-credit-data-table .status-verifying,
.deposit-credit-data-table .status-processing,
.deposit-credit-data-table .status-provider_unknown,
.deposit-credit-data-table .status-completed {
  color: #00874a;
  background: #c9f8e4;
}

.deposit-credit-data-table .status-manual {
  color: #b46800;
  background: #ffe7b3;
}

.deposit-credit-data-table .status-rejected,
.deposit-credit-data-table .status-provider_failed {
  color: #aa2532;
  background: #ffd9dc;
}

.deposit-credit-data-table .finance-reference {
  color: #172238;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}

.deposit-credit-data-table .finance-row-amount {
  color: #182132;
  font-size: 10px;
  font-weight: 800;
}

.deposit-credit-data-table .finance-proof-stack--compact,
.deposit-credit-data-table .finance-admin-stack {
  display: grid;
  gap: 1px;
}

.deposit-credit-data-table .finance-proof-stack--compact strong,
.deposit-credit-data-table .finance-admin-stack strong {
  color: #172238;
  font-size: 10px;
  font-weight: 700;
}

.deposit-credit-data-table .finance-proof-stack--compact small,
.deposit-credit-data-table .finance-admin-stack small {
  color: #7f8998;
  font-size: 9px;
}

.deposit-credit-data-table .table-actions {
  width: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.deposit-credit-data-table .finance-detail-button {
  width: 44px;
  min-width: 44px;
  height: 28px;
  min-height: 28px;
  padding: 0;
  border: 1px solid #17191c;
  border-radius: 5px;
  color: #fff;
  background: #17191c;
  box-shadow: 0 2px 6px rgba(0,0,0,.2);
  font-size: 10px;
  font-weight: 800;
}

.deposit-credit-data-table .finance-detail-button:hover {
  transform: translateY(-1px);
  background: #17191c;
  box-shadow: 0 3px 7px rgba(18,28,45,.18);
}


/* ===== Finance table action polish V9 ===== */
.deposit-credit-table-scroll {
  padding: 0 !important;
  border: 1px solid #c9cfd7 !important;
  border-radius: 8px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  background: #ffffff !important;
}

.deposit-credit-data-table {
  width: 100% !important;
  min-width: 1120px !important;
  table-layout: fixed !important;
  border-collapse: collapse !important;
  border-spacing: 0 !important;
}

.deposit-credit-data-table .col-action {
  width: 92px !important;
}

.deposit-credit-data-table th,
.deposit-credit-data-table td {
  box-sizing: border-box !important;
}

.deposit-credit-data-table th:last-child,
.deposit-credit-data-table td:last-child {
  width: 92px !important;
  min-width: 92px !important;
  max-width: 92px !important;
  padding-left: 8px !important;
  padding-right: 8px !important;
  border-right: 0 !important;
}

.deposit-credit-data-table tbody tr:last-child td {
  border-bottom: 0 !important;
}

.deposit-credit-data-table .table-actions {
  width: 100% !important;
  min-width: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: visible !important;
}

.deposit-credit-data-table .finance-detail-button {
  width: 66px !important;
  min-width: 66px !important;
  height: 30px !important;
  min-height: 30px !important;
  padding: 0 11px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  border: 1px solid #244d94 !important;
  border-radius: 7px !important;
  color: #ffffff !important;
  background: linear-gradient(180deg, #4677df 0%, #2f5fca 100%) !important;
  box-shadow: 0 2px 5px rgba(42, 82, 160, .22) !important;
  font-family: inherit !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  transform: none !important;
}

.deposit-credit-data-table .finance-detail-button i {
  display: inline-block !important;
  color: #ffffff !important;
  font-size: 11px !important;
  line-height: 1 !important;
}

.deposit-credit-data-table .finance-detail-button span {
  display: inline-block !important;
  color: #ffffff !important;
  font-size: 11px !important;
  line-height: 1.2 !important;
}

.deposit-credit-data-table .finance-detail-button:hover {
  background: linear-gradient(180deg, #3c6fd9 0%, #2957bc 100%) !important;
  box-shadow: 0 3px 7px rgba(42, 82, 160, .26) !important;
  transform: translateY(-1px) !important;
}

.deposit-credit-data-table .finance-detail-button:active {
  transform: translateY(0) !important;
  box-shadow: 0 1px 3px rgba(42, 82, 160, .22) !important;
}

.deposit-credit-data-table thead th:last-child {
  background: #171818 !important;
}

.deposit-credit-data-table tbody tr:nth-child(odd) td:last-child {
  background: #f5f5f5 !important;
}

.deposit-credit-data-table tbody tr:nth-child(even) td:last-child {
  background: #ffffff !important;
}

.deposit-credit-data-table tbody tr:hover td:last-child {
  background: #eef6ff !important;
}

/* ===== V10: deposit action column uses exact member-info button style ===== */
.deposit-credit-table-scroll {
  margin: 0 8px !important;
  padding: 0 !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  border: 1px solid #c9cfd7 !important;
  border-radius: 0 !important;
  background: #fff !important;
  box-shadow: none !important;
}

.deposit-credit-data-table {
  width: 100% !important;
  min-width: 1160px !important;
  border-spacing: 0 !important;
  border-collapse: collapse !important;
  table-layout: auto !important;
}

.deposit-credit-data-table .col-action {
  width: 54px !important;
}

.deposit-credit-data-table th,
.deposit-credit-data-table td {
  box-sizing: border-box !important;
}

.deposit-credit-data-table th:last-child,
.deposit-credit-data-table td:last-child {
  position: static !important;
  width: 54px !important;
  min-width: 54px !important;
  max-width: 54px !important;
  padding: 5px 7px !important;
  border-right: 0 !important;
  box-shadow: none !important;
}

.deposit-credit-data-table th:last-child {
  background: #171818 !important;
}

.deposit-credit-data-table tbody tr:nth-child(odd) td:last-child {
  background: #f5f5f5 !important;
}

.deposit-credit-data-table tbody tr:nth-child(even) td:last-child {
  background: #fff !important;
}

.deposit-credit-data-table tbody tr:hover td:last-child {
  background: #eef6ff !important;
}

.deposit-credit-data-table .deposit-action-cell {
  height: 41px !important;
  padding: 5px 7px !important;
  text-align: center !important;
  vertical-align: middle !important;
  overflow: visible !important;
}

.deposit-credit-data-table .deposit-view-action {
  width: 28px !important;
  min-width: 28px !important;
  height: 28px !important;
  min-height: 28px !important;
  padding: 0 !important;
  display: inline-grid !important;
  place-items: center !important;
  border: 1px solid #aeb6c0 !important;
  border-radius: 5px !important;
  color: #008b4c !important;
  background: #fff !important;
  box-shadow: none !important;
  transform: none !important;
  transition: none !important;
  animation: none !important;
  cursor: pointer !important;
}

.deposit-credit-data-table .deposit-view-action:hover,
.deposit-credit-data-table .deposit-view-action:active,
.deposit-credit-data-table .deposit-view-action:focus {
  color: #008b4c !important;
  background: #fff !important;
  border-color: #8f9aa7 !important;
  box-shadow: none !important;
  transform: none !important;
  outline: none !important;
}

.deposit-credit-data-table .deposit-view-action .member-person-search-icon {
  width: 18px !important;
  height: 18px !important;
  display: inline-block !important;
}

.deposit-credit-data-table tbody tr:last-child td {
  border-bottom: 0 !important;
}


/* ===== V13 finance notification badge - sample style ===== */
.admin-sidebar #depositMenuButton,
.admin-sidebar #withdrawMenuButton {
  position: relative;
}

.admin-sidebar .admin-menu-badge {
  margin-left: 8px;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  display: inline-grid;
  place-items: center;
  border: 0;
  border-radius: 999px;
  color: #fff;
  background: #16b364;
  box-shadow: 0 5px 12px rgba(22, 179, 100, .26);
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0;
  flex: 0 0 auto;
  transform-origin: center;
}

.admin-sidebar .admin-menu-badge[hidden] {
  display: none !important;
}

.admin-sidebar .admin-menu-badge--withdraw {
  background: #ef4444;
  box-shadow: 0 5px 12px rgba(239, 68, 68, .24);
}

.admin-sidebar button.has-pending:not(.active) {
  color: #fff;
  background: rgba(78, 100, 136, .28);
  box-shadow: inset 3px 0 0 #ff5966;
}

.admin-sidebar button.has-pending.active {
  box-shadow: inset 3px 0 0 #ff6571;
}

.admin-sidebar button.has-pending .admin-menu-badge {
  animation: adminBadgeBounce 2.4s ease-in-out infinite;
}

.admin-sidebar .admin-menu-badge.is-new {
  animation: adminBadgeArrive .42s cubic-bezier(.2,.8,.2,1), adminBadgeBounce 2.4s ease-in-out .42s infinite;
}

@keyframes adminBadgeArrive {
  0% { transform: scale(.55); opacity: .25; }
  55% { transform: scale(1.2); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes adminBadgeBounce {
  0%, 72%, 100% { transform: translateY(0) scale(1); }
  78% { transform: translateY(-1px) scale(1.015); }
  84% { transform: translateY(-3px) scale(1.035); }
  90% { transform: translateY(0) scale(1); }
  95% { transform: translateY(-1px) scale(1.012); }
}

@media (prefers-reduced-motion: reduce) {
  .admin-sidebar button.has-pending .admin-menu-badge,
  .admin-sidebar .admin-menu-badge.is-new {
    animation: none;
  }
}

/* ===== V15 Deposit Review Pro - isolated to deposit popup ===== */
#financeDetailDialog.finance-detail-dialog:has(.deposit-review-body) {
  width: min(980px, calc(100vw - 28px));
  max-height: 94vh;
  border: 0;
  border-radius: 18px;
  background: #f3f6fa;
  box-shadow: 0 26px 70px rgba(14, 27, 48, .32);
}

#financeDetailDialog .deposit-review-body {
  max-height: calc(94vh - 78px);
  padding: 16px;
  display: grid;
  gap: 14px;
  overflow-y: auto;
  background: #f3f6fa;
}

.deposit-detail-loading,
.deposit-detail-error {
  min-height: 220px;
  display: grid;
  place-items: center;
  color: #6f7f95;
  font-size: 14px;
  font-weight: 800;
}

.deposit-detail-error {
  color: #c73e51;
}

.deposit-detail-overview {
  padding: 14px 16px;
  border: 1px solid #d8e0eb;
  border-radius: 14px;
  background: linear-gradient(180deg, #ffffff 0%, #f9fbfd 100%);
  box-shadow: 0 5px 16px rgba(38, 58, 87, .06);
}

.deposit-detail-overview-title,
.deposit-detail-overview-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.deposit-detail-overview-title > div {
  color: #172b49;
  font-size: 18px;
  font-weight: 900;
}

.deposit-detail-overview-meta {
  margin-top: 8px;
  justify-content: flex-start;
  color: #8190a4;
  font-size: 11px;
}

.deposit-detail-status {
  min-height: 28px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
}

.deposit-compare-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  align-items: start;
}

.deposit-detail-card {
  padding: 14px;
  border: 1px solid #d9e1ec;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 6px 18px rgba(32, 53, 82, .06);
}

.deposit-detail-card-header {
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 9px;
  color: #19304f;
}

.deposit-detail-card-header i {
  width: 31px;
  height: 31px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  color: #2e65cd;
  background: #eaf1ff;
  font-size: 13px;
}

.deposit-detail-card-header h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 900;
}

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

.deposit-detail-field {
  min-height: 66px;
  padding: 10px 12px;
  border: 1px solid #dce4ef;
  border-radius: 10px;
  background: #f8fafc;
}

.deposit-detail-field.emphasis {
  border-color: #bdd4f7;
  background: #f1f7ff;
}

.deposit-detail-field > span {
  display: block;
  color: #8492a6;
  font-size: 10px;
  font-weight: 800;
}

.deposit-detail-field > strong {
  display: block;
  margin-top: 5px;
  color: #172b48;
  font-size: 12px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.deposit-detail-field > strong.copyable {
  cursor: pointer;
  text-decoration: underline dotted #9eb2cc;
  text-underline-offset: 3px;
}

.deposit-detail-field > small {
  display: block;
  margin-top: 4px;
  color: #95a1b2;
  font-size: 9px;
}

.deposit-member-stats {
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
}

.deposit-member-stats span {
  min-height: 31px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  color: #49617e;
  background: #edf2f8;
  font-size: 10px;
  font-weight: 800;
}

.deposit-checklist {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.deposit-checklist span {
  padding: 6px 9px;
  border-radius: 999px;
  color: #2a7656;
  background: #e7f7ef;
  font-size: 9px;
  font-weight: 800;
}

.deposit-risk-panel {
  padding: 12px 14px;
  border: 1px solid #d7e2ed;
  border-radius: 12px;
  background: #f8fbfe;
}

.deposit-risk-panel.low {
  border-color: #cfe6dc;
  background: #f2fbf7;
}

.deposit-risk-panel.medium {
  border-color: #edd89b;
  background: #fffaf0;
}

.deposit-risk-panel.high {
  border-color: #efb6be;
  background: #fff4f6;
}

.deposit-risk-head {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #263c59;
}

.deposit-risk-head strong {
  font-size: 12px;
}

.deposit-risk-head span {
  margin-left: auto;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.8);
  font-size: 9px;
  font-weight: 900;
}

.deposit-risk-panel ul {
  margin: 8px 0 0 18px;
  padding: 0;
  color: #6d788a;
  font-size: 10px;
  line-height: 1.55;
}

.deposit-proof-toolbar {
  margin: -4px 0 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: #8492a6;
  font-size: 10px;
}

.deposit-proof-open {
  min-height: 30px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid #c8d6e7;
  border-radius: 8px;
  color: #285da9;
  background: #fff;
  text-decoration: none;
  font-size: 10px;
  font-weight: 800;
}

.deposit-detail-proof--review {
  min-height: 280px;
  padding: 14px;
  border-radius: 12px;
  background: #edf2f7;
}

.deposit-detail-proof--review > a {
  width: 100%;
  min-height: 260px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.deposit-detail-proof--review img {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: min(58vh, 620px);
  object-fit: contain;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(18, 34, 56, .14);
}

.deposit-history-list {
  display: grid;
  gap: 7px;
}

.deposit-history-item {
  min-height: 50px;
  padding: 8px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid #e0e6ef;
  border-radius: 9px;
  background: #fafbfd;
}

.deposit-history-item > div:first-child {
  min-width: 0;
}

.deposit-history-item strong,
.deposit-history-item small {
  display: block;
}

.deposit-history-item > div:first-child strong {
  color: #223754;
  font-size: 11px;
}

.deposit-history-item > div:first-child small {
  margin-top: 3px;
  color: #929fb0;
  font-size: 9px;
}

.deposit-history-amount {
  text-align: right;
}

.deposit-history-amount > strong {
  color: #193253;
  font-size: 12px;
}

.deposit-history-amount > span {
  display: inline-block;
  margin-top: 3px;
  padding: 3px 7px;
  border-radius: 999px;
  font-size: 8px;
  font-weight: 900;
}

.deposit-history-empty,
.deposit-detail-note {
  margin: 0;
  color: #77879c;
  font-size: 11px;
  line-height: 1.55;
}

.deposit-review-actions {
  position: sticky;
  bottom: -16px;
  z-index: 8;
  margin: 0 -16px -16px;
  padding: 13px 16px calc(13px + env(safe-area-inset-bottom));
  display: flex;
  justify-content: center;
  gap: 10px;
  border-top: 1px solid #dce3ec;
  background: rgba(255,255,255,.97);
  backdrop-filter: blur(10px);
}

.deposit-review-button {
  min-width: 128px;
  min-height: 42px;
  padding: 0 17px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 0;
  border-radius: 9px;
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  box-shadow: 0 5px 14px rgba(25, 40, 62, .14);
}

.deposit-review-button.approve {
  background: #25a66f;
}

.deposit-review-button.manual {
  color: #6d4800;
  background: #f5c34b;
}

.deposit-review-button.reject {
  background: #d94f5f;
}

.deposit-review-button:disabled {
  opacity: .55;
  cursor: wait;
}

/* Deposit sub-dialogs */
.deposit-action-dialog {
  width: min(480px, calc(100vw - 24px));
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 24px 64px rgba(15, 29, 50, .32);
}

.deposit-action-dialog::backdrop {
  background: rgba(21, 32, 49, .55);
  backdrop-filter: blur(3px);
}

.deposit-action-dialog > form {
  margin: 0;
}

.deposit-action-dialog-header {
  min-height: 72px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: #fff;
  background: linear-gradient(135deg, #1f8f64 0%, #27aa76 100%);
}

.deposit-action-dialog-header.manual {
  color: #4f3900;
  background: linear-gradient(135deg, #f4c65a 0%, #ffd97e 100%);
}

.deposit-action-dialog-header.reject {
  background: linear-gradient(135deg, #c94356 0%, #df5b69 100%);
}

.deposit-action-dialog-header span {
  display: block;
  opacity: .8;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .12em;
}

.deposit-action-dialog-header h3 {
  margin: 3px 0 0;
  font-size: 18px;
}

.deposit-action-close {
  width: 35px;
  height: 35px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 9px;
  color: inherit;
  background: rgba(255,255,255,.14);
}

.deposit-action-dialog-body {
  padding: 16px;
  display: grid;
  gap: 13px;
}

.deposit-confirm-amount {
  padding: 14px;
  border: 1px solid #cfe4dc;
  border-radius: 12px;
  text-align: center;
  background: #f2faf7;
}

.deposit-confirm-amount span,
.deposit-confirm-amount strong {
  display: block;
}

.deposit-confirm-amount span {
  color: #6f827b;
  font-size: 10px;
  font-weight: 800;
}

.deposit-confirm-amount strong {
  margin-top: 5px;
  color: #17764e;
  font-size: 28px;
}

.deposit-confirm-list {
  margin: 0;
  display: grid;
  gap: 7px;
}

.deposit-confirm-list > div {
  padding: 9px 11px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  border-radius: 9px;
  background: #f7f9fc;
}

.deposit-confirm-list dt {
  color: #8491a4;
  font-size: 10px;
  font-weight: 800;
}

.deposit-confirm-list dd {
  margin: 0;
  color: #243954;
  font-size: 11px;
  font-weight: 900;
  text-align: right;
}

.deposit-action-field {
  display: grid;
  gap: 6px;
  color: #556780;
  font-size: 11px;
  font-weight: 800;
}

.deposit-action-field input,
.deposit-action-field select,
.deposit-action-field textarea {
  width: 100%;
  min-height: 42px;
  padding: 9px 11px;
  border: 1px solid #cfd8e5;
  border-radius: 9px;
  color: #1d304c;
  background: #fff;
  font: inherit;
  font-weight: 600;
  resize: vertical;
}

.deposit-action-field textarea {
  min-height: 78px;
}

.deposit-action-warning {
  margin: 0;
  padding: 10px 11px;
  display: flex;
  gap: 8px;
  border-radius: 9px;
  color: #5f756b;
  background: #edf7f2;
  font-size: 10px;
  line-height: 1.45;
}

.deposit-action-warning.reject {
  color: #91505a;
  background: #fff0f2;
}

.deposit-manual-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
}

.deposit-manual-summary > div {
  padding: 10px 7px;
  border: 1px solid #eadcae;
  border-radius: 9px;
  text-align: center;
  background: #fffaf0;
}

.deposit-manual-summary span,
.deposit-manual-summary strong {
  display: block;
}

.deposit-manual-summary span {
  color: #8b7a48;
  font-size: 8px;
  font-weight: 800;
}

.deposit-manual-summary strong {
  margin-top: 4px;
  color: #644700;
  font-size: 13px;
}

#depositManualDifference.positive {
  color: #16865a;
}

#depositManualDifference.negative {
  color: #cc4054;
}

.deposit-action-dialog-footer {
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  display: flex;
  justify-content: flex-end;
  gap: 9px;
  border-top: 1px solid #e1e6ee;
  background: #fafbfd;
}

.deposit-action-dialog-footer button {
  min-height: 40px;
  padding: 0 15px;
  border: 0;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 900;
}

.deposit-cancel-button {
  color: #4f6078;
  background: #e9edf3;
}

.deposit-approve-confirm {
  color: #fff;
  background: #239d6b;
}

.deposit-manual-confirm {
  color: #5a3e00;
  background: #f4c34f;
}

.deposit-reject-confirm {
  color: #fff;
  background: #d94d5f;
}

.deposit-action-dialog-footer button:disabled {
  opacity: .55;
  cursor: wait;
}

@media (max-width: 760px) {
  #financeDetailDialog.finance-detail-dialog:has(.deposit-review-body) {
    width: calc(100vw - 10px);
    max-height: 98vh;
    border-radius: 13px;
  }

  #financeDetailDialog .deposit-review-body {
    max-height: calc(98vh - 70px);
    padding: 10px;
    gap: 10px;
  }

  .deposit-compare-grid,
  .deposit-detail-grid {
    grid-template-columns: 1fr;
  }

  .deposit-detail-card,
  .deposit-detail-overview {
    padding: 11px;
    border-radius: 11px;
  }

  .deposit-detail-field {
    min-height: 58px;
  }

  .deposit-detail-proof--review {
    min-height: 210px;
    padding: 9px;
  }

  .deposit-detail-proof--review > a {
    min-height: 200px;
  }

  .deposit-detail-proof--review img {
    max-height: 55vh;
  }

  .deposit-review-actions {
    bottom: -10px;
    margin: 0 -10px -10px;
    padding: 10px 8px calc(10px + env(safe-area-inset-bottom));
    gap: 6px;
  }

  .deposit-review-button {
    flex: 1 1 0;
    min-width: 0;
    min-height: 42px;
    padding: 0 6px;
    font-size: 10px;
  }

  .deposit-member-stats {
    grid-template-columns: 1fr 1fr 1fr;
  }

  .deposit-action-dialog {
    width: calc(100vw - 12px);
    max-height: 96vh;
    border-radius: 13px;
  }

  .deposit-action-dialog-body {
    max-height: calc(96vh - 140px);
    padding: 13px;
    overflow-y: auto;
  }

  .deposit-action-dialog-footer {
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  }

  .deposit-action-dialog-footer button {
    flex: 1;
    padding: 0 8px;
  }
}

.finance-deposit-amount-stack strong,
.finance-deposit-amount-stack small {
  display: block;
}

.finance-deposit-amount-stack strong {
  color: #172d4e;
  font-size: 12px;
  font-weight: 900;
}

.finance-deposit-amount-stack small {
  margin-top: 3px;
  color: #a06b18;
  font-size: 9px;
  font-weight: 800;
}

/* ===== V16 Deposit Review usability polish (deposit page only) ===== */

/* Keep all deposit action dialogs exactly in the viewport center, even above another dialog. */
.deposit-action-dialog[open] {
  position: fixed !important;
  inset: 50% auto auto 50% !important;
  margin: 0 !important;
  transform: translate(-50%, -50%) !important;
  max-height: min(92vh, 720px) !important;
  overscroll-behavior: contain;
}

.deposit-action-dialog[open] > form {
  max-height: min(92vh, 720px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
}

.deposit-action-dialog[open] .deposit-action-dialog-body {
  overflow-y: auto;
}

/* Softer color coding for member comparison fields. */
.deposit-member-compare-card {
  border-color: #cfddf0;
  background: linear-gradient(180deg, #f9fcff 0%, #ffffff 100%);
}

.deposit-member-compare-card .deposit-detail-card-header {
  margin: -14px -14px 12px;
  padding: 13px 14px;
  border-radius: 13px 13px 0 0;
  background: linear-gradient(135deg, #edf5ff 0%, #f7f3ff 100%);
}

.deposit-member-compare-card .deposit-detail-card-header i {
  color: #356bc7;
  background: #ffffff;
  box-shadow: 0 3px 10px rgba(54, 102, 183, .10);
}

.deposit-detail-field.tone-blue {
  border-color: #c8dcfa;
  background: #f2f7ff;
}

.deposit-detail-field.tone-violet {
  border-color: #d9d0f5;
  background: #f8f5ff;
}

.deposit-detail-field.tone-green {
  border-color: #c7e7d9;
  background: #f1faf6;
}

.deposit-detail-field.tone-amber {
  border-color: #eadbae;
  background: #fffaf0;
}

.deposit-detail-field.tone-rose {
  border-color: #edd1da;
  background: #fff6f8;
}

.deposit-detail-field.tone-cyan {
  border-color: #bfe1e8;
  background: #f0fbfd;
}

.deposit-detail-field.tone-blue > span { color: #4774b6; }
.deposit-detail-field.tone-violet > span { color: #7865af; }
.deposit-detail-field.tone-green > span { color: #438467; }
.deposit-detail-field.tone-amber > span { color: #947126; }
.deposit-detail-field.tone-rose > span { color: #9b5d70; }
.deposit-detail-field.tone-cyan > span { color: #367c8b; }

.deposit-member-compare-card .deposit-member-stats span:nth-child(1) {
  color: #217453;
  background: #e7f7ef;
}

.deposit-member-compare-card .deposit-member-stats span:nth-child(2) {
  color: #ad4051;
  background: #ffecef;
}

.deposit-member-compare-card .deposit-member-stats span:nth-child(3) {
  color: #8b650e;
  background: #fff4d8;
}

/* Full-screen slip viewer centered in the viewport. */
.deposit-slip-viewer {
  width: min(1120px, calc(100vw - 28px));
  height: min(94vh, 920px);
  margin: auto;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 16px;
  color: #ffffff;
  background: #101827;
  box-shadow: 0 30px 90px rgba(4, 10, 20, .55);
}

.deposit-slip-viewer::backdrop {
  background: rgba(5, 10, 19, .82);
  backdrop-filter: blur(5px);
}

.deposit-slip-viewer-shell {
  height: 100%;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
}

.deposit-slip-viewer-header {
  min-height: 64px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border-bottom: 1px solid rgba(255,255,255,.10);
  background: #18243a;
}

.deposit-slip-viewer-header span,
.deposit-slip-viewer-header strong {
  display: block;
}

.deposit-slip-viewer-header span {
  color: #91a4c3;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .12em;
}

.deposit-slip-viewer-header strong {
  margin-top: 4px;
  color: #ffffff;
  font-size: 15px;
}

.deposit-slip-viewer-header button {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 10px;
  color: #ffffff;
  background: rgba(255,255,255,.08);
  font-size: 16px;
}

.deposit-slip-viewer-stage {
  min-height: 0;
  padding: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: auto;
  background:
    radial-gradient(circle at center, rgba(61, 85, 124, .28), transparent 56%),
    #0b111d;
}

.deposit-slip-viewer-stage img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  margin: auto;
  object-fit: contain;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 18px 50px rgba(0,0,0,.40);
}

.deposit-slip-viewer-footer {
  min-height: 48px;
  padding: 9px 16px calc(9px + env(safe-area-inset-bottom));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid rgba(255,255,255,.10);
  color: #9baac0;
  background: #18243a;
  font-size: 10px;
}

.deposit-slip-viewer-footer a {
  min-height: 30px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 8px;
  color: #ffffff;
  text-decoration: none;
  background: rgba(255,255,255,.07);
  font-weight: 800;
}

.deposit-proof-image-button {
  width: 100%;
  min-height: 260px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  cursor: zoom-in;
}

.deposit-proof-open {
  cursor: pointer;
}

/* New reason/note column in the deposit list. */
.deposit-credit-data-table {
  min-width: 1320px !important;
}

.deposit-credit-data-table .col-reason {
  width: 190px !important;
}

.deposit-credit-data-table th:nth-last-child(2),
.deposit-credit-data-table td:nth-last-child(2) {
  width: 190px;
  min-width: 190px;
  max-width: 190px;
}

.deposit-credit-data-table td:nth-last-child(2) {
  padding: 5px 9px !important;
  white-space: normal !important;
  text-align: left !important;
}

.finance-reason-stack {
  min-width: 0;
  display: grid;
  gap: 2px;
  line-height: 1.25;
}

.finance-reason-stack strong {
  overflow: hidden;
  color: #3d4d63;
  font-size: 10px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.finance-reason-stack small {
  display: -webkit-box;
  overflow: hidden;
  color: #8a96a8;
  font-size: 9px;
  line-height: 1.25;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.finance-reason-stack.is-manual strong { color: #a66a00; }
.finance-reason-stack.is-rejected strong { color: #bb3b4e; }
.finance-reason-stack.is-approved strong { color: #22805a; }
.finance-reason-stack.is-note strong { color: #466caa; }

@media (max-width: 760px) {
  .deposit-action-dialog[open] {
    width: calc(100vw - 16px) !important;
    max-height: 94vh !important;
  }

  .deposit-action-dialog[open] > form {
    max-height: 94vh;
  }

  .deposit-member-compare-card .deposit-detail-card-header {
    margin: -11px -11px 10px;
    padding: 11px;
  }

  .deposit-slip-viewer {
    width: calc(100vw - 8px);
    height: 98vh;
    border-radius: 12px;
  }

  .deposit-slip-viewer-stage {
    padding: 8px;
  }

  .deposit-slip-viewer-footer {
    align-items: flex-start;
    flex-direction: column;
  }

  .deposit-slip-viewer-footer a {
    width: 100%;
    justify-content: center;
  }
}

/* ===== V17 Deposit compare panels - equal, clean and professional ===== */
.deposit-compare-grid-v17 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch !important;
  grid-auto-rows: 1fr;
  gap: 14px;
}

.deposit-compare-panel {
  min-width: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid #d5deeb;
  border-radius: 15px;
  background: #fff;
  box-shadow: 0 7px 20px rgba(28, 48, 77, .065);
}

.deposit-compare-panel-header {
  min-height: 66px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 11px;
  color: #fff;
  background: linear-gradient(135deg, #1d2d48 0%, #243a5d 100%);
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.deposit-compare-panel--member .deposit-compare-panel-header {
  background: linear-gradient(135deg, #243a5d 0%, #31537e 100%);
}

.deposit-compare-panel-icon {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: #285fb9;
  background: #f3f7ff;
  box-shadow: 0 4px 12px rgba(10, 24, 46, .16);
}

.deposit-compare-panel--member .deposit-compare-panel-icon {
  color: #654eb3;
  background: #f5f2ff;
}

.deposit-compare-panel-title {
  min-width: 0;
}

.deposit-compare-panel-title h3 {
  margin: 0;
  color: #fff;
  font-size: 14px;
  font-weight: 900;
  line-height: 1.25;
}

.deposit-compare-panel-title p {
  margin: 4px 0 0;
  color: rgba(255,255,255,.68);
  font-size: 9px;
  font-weight: 600;
  line-height: 1.35;
}

.deposit-compare-panel-body {
  min-height: 0;
  padding: 13px;
  display: flex;
  flex: 1;
  flex-direction: column;
  background: linear-gradient(180deg, #fbfdff 0%, #fff 100%);
}

.deposit-compare-panel--member .deposit-compare-panel-body {
  background: linear-gradient(180deg, #f8fbff 0%, #fff 100%);
}

.deposit-compare-info-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: minmax(74px, auto);
  gap: 9px;
}

.deposit-compare-info-grid .deposit-detail-field {
  min-height: 74px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;
  border-radius: 10px;
}

.deposit-compare-info-grid .deposit-detail-field > span {
  margin-bottom: 0;
  line-height: 1.25;
}

.deposit-compare-info-grid .deposit-detail-field > strong {
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.35;
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.deposit-compare-info-grid .deposit-detail-field > strong.copyable {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.deposit-transaction-checks {
  margin-top: auto;
  padding-top: 12px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.deposit-transaction-checks span {
  min-height: 32px;
  padding: 6px 8px;
  display: grid;
  place-items: center;
  border: 1px solid #dce5ef;
  border-radius: 9px;
  color: #46617f;
  background: #f4f7fb;
  font-size: 9px;
  font-weight: 800;
  text-align: center;
}

.deposit-member-panel-footer {
  margin-top: auto;
  padding-top: 12px;
  display: grid;
  gap: 9px;
}

.deposit-member-stats-v17 {
  margin-top: 0;
  gap: 7px;
}

.deposit-member-stats-v17 .deposit-member-stat {
  min-height: 44px;
  padding: 7px 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  border: 1px solid transparent;
  border-radius: 10px;
}

.deposit-member-stats-v17 .deposit-member-stat small,
.deposit-member-stats-v17 .deposit-member-stat strong {
  display: block;
}

.deposit-member-stats-v17 .deposit-member-stat small {
  font-size: 9px;
  font-weight: 800;
}

.deposit-member-stats-v17 .deposit-member-stat strong {
  font-size: 15px;
  font-weight: 900;
}

.deposit-member-stats-v17 .deposit-member-stat.success {
  color: #227657;
  border-color: #cfe9dc;
  background: #edf9f3;
}

.deposit-member-stats-v17 .deposit-member-stat.rejected {
  color: #b54154;
  border-color: #f0d4da;
  background: #fff1f4;
}

.deposit-member-stats-v17 .deposit-member-stat.pending {
  color: #8b650d;
  border-color: #eddfb8;
  background: #fff8e6;
}

.deposit-checklist-v17 {
  margin-top: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.deposit-checklist-v17 span {
  min-height: 31px;
  padding: 6px 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #d3eadf;
  border-radius: 9px;
  color: #2a7656;
  background: #edf9f3;
  font-size: 9px;
  font-weight: 800;
  text-align: center;
}

/* Normalize member tones so all six cards stay the same size. */
.deposit-compare-panel--member .deposit-detail-field.tone-blue,
.deposit-compare-panel--member .deposit-detail-field.tone-violet,
.deposit-compare-panel--member .deposit-detail-field.tone-green,
.deposit-compare-panel--member .deposit-detail-field.tone-amber,
.deposit-compare-panel--member .deposit-detail-field.tone-rose,
.deposit-compare-panel--member .deposit-detail-field.tone-cyan {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.68);
}

@media (max-width: 940px) {
  .deposit-compare-grid-v17 {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
  }

  .deposit-compare-panel {
    height: auto;
  }
}

@media (max-width: 560px) {
  .deposit-compare-panel-header {
    min-height: 60px;
    padding: 10px 11px;
  }

  .deposit-compare-panel-title h3 {
    font-size: 12px;
  }

  .deposit-compare-panel-title p {
    font-size: 8px;
  }

  .deposit-compare-panel-body {
    padding: 10px;
  }

  .deposit-compare-info-grid {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
  }

  .deposit-compare-info-grid .deposit-detail-field {
    min-height: 64px;
  }

  .deposit-transaction-checks,
  .deposit-checklist-v17 {
    grid-template-columns: 1fr;
  }

  .deposit-member-stats-v17 {
    grid-template-columns: 1fr 1fr 1fr;
  }

  .deposit-member-stats-v17 .deposit-member-stat {
    min-height: 54px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }
}

/* ===== V18 Deposit compare redesign - clear hierarchy and bank colors ===== */
.deposit-compare-grid-v17 {
  gap: 16px !important;
}

.deposit-compare-panel {
  border-color: #d8e1ee !important;
  border-radius: 16px !important;
  box-shadow: 0 10px 26px rgba(24, 44, 73, .075) !important;
}

.deposit-compare-panel-header {
  min-height: 70px !important;
  padding: 14px 16px !important;
}

.deposit-compare-panel-body {
  padding: 15px !important;
  gap: 12px;
}

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

.deposit-amount-card {
  min-height: 92px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border: 1px solid #d8e3f1;
  border-radius: 13px;
  background: #f8fbff;
}

.deposit-amount-card.reported {
  border-color: #bfd6fb;
  background: linear-gradient(180deg, #f2f7ff 0%, #edf4ff 100%);
}

.deposit-amount-card.approved {
  border-color: #dde3eb;
  background: #f7f9fc;
}

.deposit-amount-card.approved.has-value {
  border-color: #bce4cf;
  background: linear-gradient(180deg, #f1fbf6 0%, #eaf8f1 100%);
}

.deposit-amount-card > span {
  color: #71829a;
  font-size: 10px;
  font-weight: 800;
}

.deposit-amount-card > strong {
  margin-top: 6px;
  color: #17345d;
  font-size: 21px;
  font-weight: 950;
  line-height: 1.15;
}

.deposit-amount-card.approved.has-value > strong {
  color: #237653;
}

.deposit-amount-card > small {
  margin-top: 7px;
  color: #8b98a9;
  font-size: 8.5px;
  font-weight: 700;
  line-height: 1.35;
}

.deposit-bank-identity {
  --bank-color: #385a82;
  --bank-strong: #263f61;
  --bank-soft: #f2f6fb;
  --bank-border: #d4dfeb;
  padding: 13px;
  display: grid;
  gap: 12px;
  border: 1px solid var(--bank-border);
  border-left: 4px solid var(--bank-color);
  border-radius: 14px;
  background: linear-gradient(135deg, var(--bank-soft) 0%, #fff 76%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
}

.deposit-bank-identity.compact {
  padding: 12px;
}

.deposit-bank-identity-top {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
}

.deposit-bank-identity-icon {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--bank-color) 22%, white);
  border-radius: 12px;
  color: var(--bank-color);
  background: #fff;
  box-shadow: 0 5px 13px color-mix(in srgb, var(--bank-color) 16%, transparent);
}

.deposit-bank-identity-icon img {
  width: 29px;
  height: 29px;
  object-fit: contain;
}

.deposit-bank-identity-icon i {
  font-size: 18px;
}

.deposit-bank-identity-heading {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.deposit-bank-identity-heading small,
.deposit-bank-identity-number span,
.deposit-bank-identity-owner span {
  color: color-mix(in srgb, var(--bank-strong) 68%, #8290a4);
  font-size: 9px;
  font-weight: 800;
}

.deposit-bank-identity-heading strong {
  overflow: hidden;
  color: var(--bank-strong);
  font-size: 13px;
  font-weight: 950;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.deposit-bank-identity-account {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 9px;
}

.deposit-bank-identity-number,
.deposit-bank-identity-owner {
  min-width: 0;
  min-height: 58px;
  padding: 10px 11px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border: 1px solid color-mix(in srgb, var(--bank-color) 16%, white);
  border-radius: 10px;
  background: rgba(255,255,255,.78);
}

.deposit-bank-identity-number strong,
.deposit-bank-identity-owner strong {
  margin-top: 5px;
  overflow: hidden;
  color: var(--bank-strong);
  font-size: 12px;
  font-weight: 950;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.deposit-bank-identity-number strong.copyable {
  cursor: pointer;
  text-decoration: underline dotted color-mix(in srgb, var(--bank-color) 46%, transparent);
  text-underline-offset: 3px;
}

.bank-theme-scb {
  --bank-color: #58348b;
  --bank-strong: #47256f;
  --bank-soft: #f5f0fb;
  --bank-border: #dfd0f1;
}

.bank-theme-kbank {
  --bank-color: #16884e;
  --bank-strong: #0e6639;
  --bank-soft: #edf8f2;
  --bank-border: #cbe8d8;
}

.bank-theme-ktb {
  --bank-color: #1597d4;
  --bank-strong: #0f6fa4;
  --bank-soft: #edf8fd;
  --bank-border: #c9e8f6;
}

.bank-theme-bbl {
  --bank-color: #245293;
  --bank-strong: #183b72;
  --bank-soft: #edf3fb;
  --bank-border: #cbd9ed;
}

.bank-theme-bay {
  --bank-color: #c99916;
  --bank-strong: #856409;
  --bank-soft: #fff9e9;
  --bank-border: #eedda5;
}

.bank-theme-ttb {
  --bank-color: #1766b1;
  --bank-strong: #124c86;
  --bank-soft: #eef5fc;
  --bank-border: #cbdff2;
}

.bank-theme-truemoney {
  --bank-color: #e4492f;
  --bank-strong: #b83222;
  --bank-soft: #fff2ee;
  --bank-border: #f1cfc6;
}

.bank-theme-aba {
  --bank-color: #087f9e;
  --bank-strong: #075f78;
  --bank-soft: #edf9fb;
  --bank-border: #c5e7ed;
}

.bank-theme-wing {
  --bank-color: #75a826;
  --bank-strong: #527a18;
  --bank-soft: #f4faeb;
  --bank-border: #d8e8bb;
}

.bank-theme-cimb {
  --bank-color: #bd2a33;
  --bank-strong: #8b1c23;
  --bank-soft: #fff1f2;
  --bank-border: #efcbd0;
}

.bank-theme-gsb {
  --bank-color: #e52f83;
  --bank-strong: #ac1e61;
  --bank-soft: #fff0f7;
  --bank-border: #f1cade;
}

.bank-theme-kkp {
  --bank-color: #7059a9;
  --bank-strong: #503e82;
  --bank-soft: #f4f1fa;
  --bank-border: #ddd4ed;
}

.bank-theme-baac {
  --bank-color: #26955d;
  --bank-strong: #1c6f45;
  --bank-soft: #eff9f4;
  --bank-border: #cde8da;
}

.bank-theme-lhbank {
  --bank-color: #8b54a1;
  --bank-strong: #663b78;
  --bank-soft: #f7f1f9;
  --bank-border: #e4d2e9;
}

.bank-theme-uob {
  --bank-color: #1e4e94;
  --bank-strong: #173a6e;
  --bank-soft: #eef3fa;
  --bank-border: #ccd9eb;
}

.deposit-transaction-meta-v18 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.deposit-transaction-meta-v18 .deposit-detail-field {
  min-height: 64px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border: 1px solid #dde5ef;
  border-radius: 10px;
  background: #f8fafc;
}

.deposit-transaction-meta-v18 .deposit-detail-field.wide {
  grid-column: 1 / -1;
}

.deposit-transaction-meta-v18 .deposit-detail-field > span {
  color: #7b8aa0;
  font-size: 9px;
  font-weight: 800;
}

.deposit-transaction-meta-v18 .deposit-detail-field > strong {
  margin-top: 5px;
  color: #203652;
  font-size: 11px;
  font-weight: 900;
  line-height: 1.35;
}

.deposit-transaction-hint-v18 {
  margin-top: auto;
  min-height: 42px;
  padding: 9px 11px;
  display: flex;
  align-items: center;
  gap: 9px;
  border: 1px solid #d8e5f2;
  border-radius: 10px;
  color: #47627f;
  background: #f3f8fd;
  font-size: 9px;
  font-weight: 750;
  line-height: 1.45;
}

.deposit-transaction-hint-v18 i {
  color: #397bc0;
  font-size: 14px;
}

.deposit-member-profile {
  min-height: 78px;
  padding: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid #d8e2ef;
  border-radius: 13px;
  background: linear-gradient(135deg, #f8fbff 0%, #fff 100%);
}

.deposit-member-avatar {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  color: #fff;
  background: linear-gradient(145deg, #315f9c, #243f6b);
  box-shadow: 0 7px 15px rgba(35, 64, 105, .18);
  font-size: 18px;
  font-weight: 950;
}

.deposit-member-profile-content {
  min-width: 0;
  flex: 1;
  display: grid;
  gap: 7px;
}

.deposit-member-profile-title {
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}

.deposit-member-profile-title strong {
  color: #19355e;
  font-size: 13px;
  font-weight: 950;
  cursor: pointer;
  text-decoration: underline dotted #9fb1ca;
  text-underline-offset: 3px;
}

.deposit-member-profile-title > span {
  color: #5f7088;
  font-size: 11px;
  font-weight: 800;
}

.deposit-member-profile-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.deposit-member-meta-chip {
  min-height: 28px;
  padding: 0 9px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid #d8e2ee;
  border-radius: 999px;
  color: #45627f;
  background: #fff;
  font-size: 9px;
  font-weight: 800;
}

.deposit-member-meta-chip i {
  color: #397bbd;
}

.deposit-member-panel-footer-v18 {
  margin-top: auto !important;
  padding-top: 0 !important;
  gap: 10px !important;
}

.deposit-member-stats-v18 {
  margin-top: 0 !important;
}

.deposit-review-checklist-v18 {
  padding: 10px;
  display: grid;
  gap: 8px;
  border: 1px solid #dae4ee;
  border-radius: 11px;
  background: #f8fafc;
}

.deposit-review-checklist-head {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #3a5575;
  font-size: 9px;
  font-weight: 900;
}

.deposit-review-checklist-head i {
  color: #3979b8;
}

.deposit-review-checklist-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.deposit-review-check-item {
  min-height: 31px;
  padding: 6px 8px;
  display: flex;
  align-items: center;
  gap: 7px;
  border: 1px solid #dce5ef;
  border-radius: 8px;
  color: #536a85;
  background: #fff;
  font-size: 8.5px;
  font-weight: 800;
}

.deposit-review-check-item i {
  width: 16px;
  color: #3979b8;
  text-align: center;
}

@media (max-width: 940px) {
  .deposit-amount-compare-v18,
  .deposit-transaction-meta-v18 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .deposit-amount-compare-v18,
  .deposit-transaction-meta-v18,
  .deposit-bank-identity-account,
  .deposit-review-checklist-grid {
    grid-template-columns: 1fr;
  }

  .deposit-amount-card {
    min-height: 80px;
  }

  .deposit-bank-identity-heading strong {
    white-space: normal;
  }

  .deposit-bank-identity-number strong,
  .deposit-bank-identity-owner strong {
    white-space: normal;
    word-break: break-word;
  }

  .deposit-member-profile {
    align-items: flex-start;
  }

  .deposit-member-profile-title {
    align-items: flex-start;
    flex-direction: column;
    gap: 3px;
  }
}


/* ===== V19 deposit compare cleanup - balanced cards ===== */
.deposit-compare-panel-body {
  gap: 12px;
}

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

.deposit-compare-simple-grid-v19 .deposit-detail-field,
.deposit-transaction-meta-v18 .deposit-detail-field {
  min-height: 76px;
  padding: 12px 13px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-radius: 12px;
}

.deposit-compare-simple-grid-v19 .deposit-detail-field > span,
.deposit-transaction-meta-v18 .deposit-detail-field > span {
  font-size: 9px;
  font-weight: 800;
}

.deposit-compare-simple-grid-v19 .deposit-detail-field > strong,
.deposit-transaction-meta-v18 .deposit-detail-field > strong {
  margin-top: 5px;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.35;
}

.deposit-member-info-grid-v19 .deposit-detail-field {
  background: #fbfdff;
}

.deposit-member-panel-footer-v19 {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.deposit-member-panel-footer-v19 .deposit-member-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.deposit-member-panel-footer-v19 .deposit-member-stat {
  min-height: 52px;
}

.deposit-member-panel-footer-v19 .deposit-member-stat strong {
  font-size: 16px;
}

/* remove old v18 hint/profile visual noise in compare section */
.deposit-transaction-hint-v18,
.deposit-member-profile {
  display: none !important;
}

@media (max-width: 560px) {
  .deposit-compare-simple-grid-v19,
  .deposit-member-panel-footer-v19 .deposit-member-stats {
    grid-template-columns: 1fr;
  }
}


/* ===== V20 deposit compare alignment ===== */
.deposit-amount-compare-v18 {
  align-items: stretch;
}

.deposit-amount-card {
  min-height: 86px;
  padding: 13px 14px;
  border-radius: 12px;
}

.deposit-amount-card > span,
.deposit-member-info-grid-v19 .deposit-detail-field > span {
  font-size: 10px;
  font-weight: 800;
}

.deposit-amount-card > strong,
.deposit-member-info-grid-v19 .deposit-detail-field > strong {
  margin-top: 5px;
  font-size: 14px;
  font-weight: 900;
  line-height: 1.32;
}

.deposit-amount-card > small {
  margin-top: 6px;
  font-size: 9px;
  line-height: 1.3;
}

.deposit-member-info-grid-v19 .deposit-detail-field {
  min-height: 86px;
  padding: 13px 14px;
  border-radius: 12px;
}

.deposit-member-info-grid-top,
.deposit-member-info-grid-bottom {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.deposit-bank-identity.compact {
  border-radius: 14px;
}

.deposit-bank-identity.compact .deposit-bank-identity-top {
  min-height: 44px;
}

.deposit-bank-identity.compact .deposit-bank-identity-account {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.deposit-bank-identity.compact .deposit-bank-identity-number,
.deposit-bank-identity.compact .deposit-bank-identity-owner {
  min-height: 60px;
}

/* keep comparable vertical rhythm in both columns */
.deposit-compare-panel--transaction .deposit-compare-panel-body,
.deposit-compare-panel--member .deposit-compare-panel-body {
  gap: 12px;
}

@media (max-width: 560px) {
  .deposit-member-info-grid-top,
  .deposit-member-info-grid-bottom,
  .deposit-bank-identity.compact .deposit-bank-identity-account,
  .deposit-amount-compare-v18 {
    grid-template-columns: 1fr;
  }
}


/* ===== V21 near real-time deposit table sync ===== */
.finance-deposit-match-table tbody tr.deposit-row-new td {
  animation: depositRowArrive 2.4s ease-out;
}

@keyframes depositRowArrive {
  0% {
    background: #dff8ea;
    box-shadow: inset 0 0 0 1px #73c996;
  }
  35% {
    background: #ecfbf3;
    box-shadow: inset 0 0 0 1px #a7ddbc;
  }
  100% {
    background: inherit;
    box-shadow: inset 0 0 0 1px transparent;
  }
}

@media (prefers-reduced-motion: reduce) {
  .finance-deposit-match-table tbody tr.deposit-row-new td {
    animation: none;
    background: #ecfbf3;
  }
}


/* ===== V22 Socket.IO finance realtime status ===== */
.deposit-live-dot.socket-online {
  background: #28c76f;
  box-shadow: 0 0 0 4px rgba(40, 199, 111, .14), 0 0 12px rgba(40, 199, 111, .24);
}

.deposit-live-dot.socket-offline {
  background: #f5a623;
  box-shadow: 0 0 0 4px rgba(245, 166, 35, .14);
}

.finance-deposit-match-table tbody tr.deposit-row-new td {
  animation: depositSocketRowArrive 2.6s ease-out;
}

@keyframes depositSocketRowArrive {
  0% {
    background: #d8f7e7;
    box-shadow: inset 0 0 0 1px #5bc28b;
  }
  28% {
    background: #e9fbf2;
    box-shadow: inset 0 0 0 1px #9bdab8;
  }
  100% {
    background: inherit;
    box-shadow: inset 0 0 0 1px transparent;
  }
}

@media (prefers-reduced-motion: reduce) {
  .finance-deposit-match-table tbody tr.deposit-row-new td {
    animation: none;
    background: #e9fbf2;
  }
}


/* ===== V24 professional deposit operations ===== */
.deposit-realtime-state {
  min-height: 32px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #d9e1ec;
  border-radius: 999px;
  color: #6d7c91;
  background: #f7f9fc;
  font-size: 11px;
}
.deposit-realtime-state .deposit-live-dot { width: 8px; height: 8px; margin: 0; }
.deposit-realtime-state.is-online { color: #24724f; border-color: #c9ead9; background: #effaf5; }
.deposit-realtime-state.is-online .deposit-live-dot { background: #35bb72; box-shadow: 0 0 0 4px rgba(53,187,114,.13); }
.deposit-realtime-state.is-offline { color: #9a6419; border-color: #efdfbb; background: #fff8e9; }
.deposit-realtime-state.is-offline .deposit-live-dot { background: #e9a83a; box-shadow: 0 0 0 4px rgba(233,168,58,.14); }
.deposit-sound-toggle.is-enabled { color: #1b6e4b; border-color: #bfe2d0; background: #edf9f3; }
.deposit-live-clock { padding: 0 4px; }

.deposit-status-stack { display: grid; justify-items: center; gap: 4px; }
.deposit-wait-time { color: #7e8a9b; font-size: 9px; font-weight: 800; white-space: nowrap; }
.deposit-wait-time.is-warning { color: #a66f13; }
.deposit-wait-time.is-danger { color: #c74351; }
.deposit-risk-mini { padding: 2px 6px; border-radius: 999px; color: #a54750; background: #fff0f2; font-size: 8px; font-weight: 900; }
.deposit-reviewing-label { color: #4d6f9a !important; }

.deposit-review-lock-banner {
  min-height: 54px;
  padding: 11px 14px;
  display: grid;
  grid-template-columns: 28px minmax(0,1fr);
  align-items: center;
  column-gap: 10px;
  border: 1px solid;
  border-radius: 12px;
}
.deposit-review-lock-banner i { grid-row: 1 / 3; font-size: 18px; text-align: center; }
.deposit-review-lock-banner strong { font-size: 12px; }
.deposit-review-lock-banner small { margin-top: 2px; font-size: 9px; opacity: .78; }
.deposit-review-lock-banner.is-owned { color: #266c4d; border-color: #c6e7d7; background: #effaf5; }
.deposit-review-lock-banner.is-other { color: #98631c; border-color: #ebd9b4; background: #fff8e9; }

.deposit-credit-failed-panel {
  padding: 14px;
  display: grid;
  gap: 8px;
  border: 1px solid #f0cdd2;
  border-radius: 14px;
  background: #fff5f6;
}
.deposit-credit-failed-title { color: #b93247; font-size: 14px; font-weight: 950; }
.deposit-credit-failed-panel p { margin: 0; color: #80535b; font-size: 10px; line-height: 1.55; }
.deposit-credit-failed-actions { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 9px; margin-top: 4px; }
.deposit-review-button.retry { color: #fff; background: #376bb3; }
.deposit-review-button:disabled { opacity: .45; cursor: not-allowed; filter: grayscale(.25); }

@media (max-width: 700px) {
  .deposit-credit-failed-actions { grid-template-columns: 1fr; }
  .deposit-live-left { align-items: flex-start; }
}


/* ===== V25 Link existing Agent member ===== */
.member-link-existing-button {
  border-color: #b9d2f4 !important;
  color: #1f5f9f !important;
  background: linear-gradient(180deg, #f4f8ff 0%, #eaf3ff 100%) !important;
  box-shadow: 0 5px 14px rgba(49, 103, 167, .10);
}

.member-link-existing-button:hover {
  border-color: #8cb7eb !important;
  background: #e4f0ff !important;
}

.member-link-dialog {
  width: min(820px, calc(100vw - 28px));
}

.member-link-dialog > form {
  max-height: min(900px, calc(100vh - 32px));
  overflow: auto;
}

.member-link-dialog header p {
  margin: 4px 0 0;
  color: #718199;
  font-size: 12px;
  font-weight: 650;
}

.member-link-safety-note {
  margin: 0 20px 16px;
  padding: 13px 15px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  border: 1px solid #cfe1f5;
  border-radius: 13px;
  color: #234e7e;
  background: linear-gradient(135deg, #eef6ff 0%, #f8fbff 100%);
}

.member-link-safety-note > i {
  margin-top: 2px;
  font-size: 20px;
  color: #2d77bd;
}

.member-link-safety-note div {
  display: grid;
  gap: 4px;
}

.member-link-safety-note strong {
  font-size: 12px;
  font-weight: 900;
}

.member-link-safety-note span {
  color: #627b97;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.5;
}

.member-link-step {
  margin: 0 20px 15px;
  padding: 16px;
  border: 1px solid #dbe4ef;
  border-radius: 15px;
  background: #fff;
  box-shadow: 0 8px 22px rgba(35, 56, 84, .055);
}

.member-link-step-heading {
  margin-bottom: 13px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.member-link-step-heading > span {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: #fff;
  background: linear-gradient(145deg, #347cc5, #235d9b);
  font-size: 12px;
  font-weight: 950;
  box-shadow: 0 5px 12px rgba(41, 102, 164, .20);
}

.member-link-step-heading div {
  display: grid;
  gap: 2px;
}

.member-link-step-heading strong {
  color: #223b59;
  font-size: 13px;
  font-weight: 950;
}

.member-link-step-heading small {
  color: #7c899b;
  font-size: 10px;
  font-weight: 650;
}

.member-link-verify-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 10px;
}

.member-link-dialog label {
  display: grid;
  gap: 6px;
  color: #50647d;
  font-size: 10px;
  font-weight: 850;
}

.member-link-dialog input,
.member-link-dialog select,
.member-link-dialog textarea {
  width: 100%;
  min-height: 42px;
  padding: 9px 11px;
  border: 1px solid #d4dfeb;
  border-radius: 10px;
  color: #263c56;
  background: #fbfdff;
  font: inherit;
  font-size: 12px;
  font-weight: 750;
  outline: none;
}

.member-link-dialog textarea {
  min-height: 64px;
  resize: vertical;
}

.member-link-dialog input:focus,
.member-link-dialog select:focus,
.member-link-dialog textarea:focus {
  border-color: #6ca6df;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(74, 139, 205, .12);
}

.member-link-verify-button {
  min-height: 42px;
  padding: 0 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid #3478bc;
  border-radius: 10px;
  color: #fff;
  background: linear-gradient(145deg, #4088cf, #2868aa);
  font-size: 11px;
  font-weight: 900;
  cursor: pointer;
  white-space: nowrap;
}

.member-link-verify-button:disabled {
  opacity: .65;
  cursor: wait;
}

.member-link-verify-result {
  margin-top: 11px;
  padding: 12px 13px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 11px;
  border: 1px solid #bfe4cf;
  border-radius: 12px;
  color: #246747;
  background: #eefaf3;
}

.member-link-verify-result.already-linked {
  border-color: #d4deec;
  color: #4d617a;
  background: #f5f8fc;
}

.member-link-result-icon {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  color: #21865a;
  background: #fff;
  font-size: 17px;
  box-shadow: 0 4px 10px rgba(31, 122, 82, .12);
}

.member-link-verify-result.already-linked .member-link-result-icon {
  color: #52708f;
}

.member-link-result-content {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.member-link-result-content > strong {
  font-size: 11px;
  font-weight: 950;
}

.member-link-result-content > span {
  overflow-wrap: anywhere;
  font-size: 14px;
  font-weight: 950;
}

.member-link-result-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 7px 12px;
}

.member-link-result-facts small {
  font-size: 9.5px;
  font-weight: 750;
}

.member-link-verify-result > p {
  grid-column: 1 / -1;
  margin: 0;
  padding-top: 7px;
  border-top: 1px solid rgba(87, 111, 141, .14);
  font-size: 10px;
  font-weight: 750;
}

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

.member-link-full {
  grid-column: 1 / -1;
}

.member-link-confirm {
  margin-top: 13px;
  padding: 11px 12px;
  display: flex !important;
  grid-template-columns: none !important;
  align-items: flex-start;
  gap: 10px !important;
  border: 1px solid #ead9ad;
  border-radius: 11px;
  background: #fffaf0;
  cursor: pointer;
}

.member-link-confirm input {
  width: 18px;
  height: 18px;
  min-height: 18px;
  flex: 0 0 18px;
  margin-top: 1px;
  accent-color: #2f75b8;
}

.member-link-confirm span {
  display: grid;
  gap: 3px;
}

.member-link-confirm strong {
  color: #725916;
  font-size: 10.5px;
  font-weight: 900;
}

.member-link-confirm small {
  color: #8d7a46;
  font-size: 9px;
  font-weight: 700;
  line-height: 1.45;
}

.member-link-submit:disabled {
  opacity: .52;
  cursor: not-allowed;
  filter: grayscale(.15);
}

@media (max-width: 680px) {
  .member-link-safety-note,
  .member-link-step {
    margin-left: 12px;
    margin-right: 12px;
  }

  .member-link-verify-row,
  .member-link-grid {
    grid-template-columns: 1fr;
  }

  .member-link-full {
    grid-column: auto;
  }

  .member-link-verify-button {
    width: 100%;
  }
}


/* ===== V29 Game menu: sync all + fast reorder ===== */
.game-menu-sync-all-button {
  border-color: #255fc3 !important;
  color: #fff !important;
  background: linear-gradient(135deg, #2c6ed5, #1f4d9f) !important;
  box-shadow: 0 7px 16px rgba(33, 84, 170, .16);
}

.game-menu-sync-progress {
  margin: 0 0 12px;
  padding: 13px 14px;
  border: 1px solid #c9d8ef;
  border-radius: 11px;
  background: #f8fbff;
}

.game-menu-sync-progress.has-errors {
  border-color: #ebc9cc;
  background: #fffafb;
}

.game-menu-sync-progress-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.game-menu-sync-progress-head > div {
  display: grid;
  gap: 3px;
}

.game-menu-sync-progress-head strong {
  color: #1a365e;
  font-size: 13px;
}

.game-menu-sync-progress-head span {
  color: #718198;
  font-size: 11px;
  font-weight: 700;
}

.game-menu-sync-progress-head button {
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid #e1b3b7;
  border-radius: 7px;
  color: #a3323d;
  background: #fff;
  font: inherit;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}

.game-menu-sync-progress-track {
  height: 9px;
  margin-top: 11px;
  overflow: hidden;
  border-radius: 999px;
  background: #e4ebf5;
}

.game-menu-sync-progress-track span {
  width: 0;
  height: 100%;
  display: block;
  border-radius: inherit;
  background: linear-gradient(90deg, #2457a7, #3f87e4);
  transition: width .35s ease;
}

.game-menu-sync-progress.is-running .game-menu-sync-progress-track span {
  background-image: linear-gradient(90deg, #2457a7, #62a0ef, #2457a7);
  background-size: 200% 100%;
  animation: gameMenuSyncFlow 1.4s linear infinite;
}

@keyframes gameMenuSyncFlow {
  to { background-position: -200% 0; }
}

.game-menu-sync-progress-stats {
  margin-top: 10px;
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  gap: 8px;
}

.game-menu-sync-progress-stats span {
  min-height: 32px;
  padding: 6px 9px;
  display: flex;
  align-items: center;
  gap: 6px;
  overflow: hidden;
  border: 1px solid #dce5f0;
  border-radius: 8px;
  color: #4c627d;
  background: #fff;
  font-size: 10px;
  font-weight: 800;
}

.game-menu-sync-progress-stats span:last-child b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.game-menu-sync-progress-stats .success { color: #237354; border-color: #cce8da; }
.game-menu-sync-progress-stats .failed { color: #ad3e4b; border-color: #efd0d4; }

.game-menu-sync-failures {
  margin: 9px 0 0;
  padding: 8px 10px;
  border-radius: 7px;
  color: #9c3843;
  background: #fff0f2;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.5;
}

.game-menu-sort-help {
  margin: -2px 9px 5px;
  padding: 6px 8px;
  border-radius: 7px;
  color: #64748a;
  background: #f4f7fb;
  font-size: 9px;
  font-weight: 750;
}

.game-menu-sort-help i { margin-right: 5px; color: #3e6eae; }

.game-menu-order {
  align-items: center;
}

.game-menu-order-position {
  min-width: 30px;
  height: 26px;
  padding: 0 5px;
  border: 1px solid #bdc9da;
  border-radius: 6px;
  color: #365577;
  background: #f7faff;
  font: inherit;
  font-size: 9px;
  font-weight: 900;
  cursor: pointer;
}

.game-menu-order-position:hover {
  border-color: #7196c8;
  color: #194f91;
  background: #edf5ff;
}

.game-menu-drag-handle {
  cursor: grab !important;
  color: #55718f !important;
}

.game-menu-drag-handle:active { cursor: grabbing !important; }
.game-menu-row.is-dragging { opacity: .38; }
.game-menu-row.drag-before { box-shadow: inset 0 3px 0 #2f72ca; }
.game-menu-row.drag-after { box-shadow: inset 0 -3px 0 #2f72ca; }

@media (max-width: 760px) {
  .game-menu-sync-progress-head { align-items: stretch; flex-direction: column; }
  .game-menu-sync-progress-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .game-menu-sync-progress-stats span:last-child { grid-column: 1 / -1; }
}


/* ===== V30 Game menu balanced columns ===== */
@media (min-width: 981px) {
  .game-menu-columns {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    align-items: stretch;
    gap: 14px;
  }

  .game-menu-column,
  .game-menu-column:last-child {
    grid-column: auto !important;
    width: 100%;
    min-width: 0;
    min-height: 620px;
    height: 100%;
  }

  .game-menu-column > header {
    min-height: 52px;
    padding: 0 15px;
  }

  .game-menu-column > header h3 {
    font-size: 15px;
    line-height: 1.2;
  }

  .game-menu-list {
    min-height: 0;
  }
}

@media (min-width: 761px) and (max-width: 980px) {
  .game-menu-columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
  }

  .game-menu-column {
    min-height: 500px;
  }

  .game-menu-column:last-child {
    grid-column: 1 / -1;
    min-height: 520px;
  }
}


/* ===== V33 Deposit reconciliation and duplicate-credit protection ===== */
.deposit-reconcile-panel {
  padding: 15px;
  display: grid;
  gap: 12px;
  border: 1px solid #d8e2ee;
  border-radius: 15px;
  background: #fbfdff;
  box-shadow: 0 8px 22px rgba(29, 52, 82, .06);
}

.deposit-reconcile-panel.tone-success {
  border-color: #bfe3d1;
  background: linear-gradient(180deg, #f2fbf6 0%, #fbfefd 100%);
}

.deposit-reconcile-panel.tone-warning {
  border-color: #ecd39f;
  background: linear-gradient(180deg, #fff9eb 0%, #fffdf8 100%);
}

.deposit-reconcile-panel.tone-safe-retry {
  border-color: #bfd6f3;
  background: linear-gradient(180deg, #f1f7ff 0%, #fbfdff 100%);
}

.deposit-reconcile-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.deposit-reconcile-title {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 9px;
  color: #203b5f;
}

.deposit-reconcile-title i {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: #fff;
  background: #315f96;
}

.deposit-reconcile-title-text {
  font-size: 14px;
  font-weight: 950;
}

.deposit-reconcile-status {
  max-width: 52%;
  padding: 7px 10px;
  border: 1px solid #d6e0eb;
  border-radius: 999px;
  color: #405a78;
  background: rgba(255,255,255,.82);
  font-size: 10px;
  font-weight: 900;
  line-height: 1.3;
  text-align: center;
}

.deposit-reconcile-balance-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
}

.deposit-reconcile-balance-card {
  min-height: 78px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border: 1px solid #dce5ef;
  border-radius: 12px;
  background: #fff;
}

.deposit-reconcile-balance-card span {
  color: #718199;
  font-size: 10px;
  font-weight: 800;
}

.deposit-reconcile-balance-card strong {
  margin-top: 7px;
  color: #203c60;
  font-size: 16px;
  font-weight: 950;
  line-height: 1.25;
}

.deposit-reconcile-balance-card.amount {
  border-color: #c5d8f1;
  background: #f2f7fd;
}

.deposit-reconcile-balance-card.expected {
  border-color: #cfe4d9;
  background: #f2faf6;
}

.deposit-reconcile-balance-card.after {
  border-color: #dacff0;
  background: #f8f4fd;
}

.deposit-reconcile-meta-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
}

.deposit-reconcile-meta-grid .deposit-detail-field {
  min-height: 66px;
  padding: 10px 11px;
  border: 1px solid #dce5ef;
  border-radius: 10px;
  background: rgba(255,255,255,.82);
}

.deposit-reconcile-meta-grid .deposit-detail-field > span {
  font-size: 9px;
}

.deposit-reconcile-meta-grid .deposit-detail-field > strong {
  margin-top: 5px;
  overflow-wrap: anywhere;
  font-size: 10px;
}

.deposit-reconcile-note {
  min-height: 42px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 9px;
  border: 1px solid rgba(105, 128, 154, .18);
  border-radius: 10px;
  color: #4c627c;
  background: rgba(255,255,255,.72);
  font-size: 10px;
  font-weight: 750;
  line-height: 1.5;
}

.deposit-credit-unknown-panel {
  padding: 14px;
  display: grid;
  gap: 8px;
  border: 1px solid #e8cf9d;
  border-radius: 14px;
  background: #fff9eb;
}

.deposit-credit-unknown-title {
  color: #95620e;
  font-size: 14px;
  font-weight: 950;
}

.deposit-credit-unknown-panel p {
  margin: 0;
  color: #775f35;
  font-size: 10px;
  line-height: 1.55;
}

.deposit-credit-failed-panel.is-safe-retry {
  border-color: #bfd6f3;
  background: #f2f7fd;
}

.deposit-credit-failed-panel.is-safe-retry .deposit-credit-failed-title {
  color: #275f9a;
}

.deposit-review-button.verify {
  color: #fff;
  background: #9a6817;
}

@media (max-width: 850px) {
  .deposit-reconcile-balance-grid,
  .deposit-reconcile-meta-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .deposit-reconcile-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .deposit-reconcile-status {
    max-width: none;
  }

  .deposit-reconcile-balance-grid,
  .deposit-reconcile-meta-grid {
    grid-template-columns: 1fr;
  }
}

/* ===== V34 end-to-end realtime deposit + emergency contact ===== */
.deposit-realtime-toolbar {
  margin: 10px 14px 0;
  padding: 9px 11px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid #dce7f2;
  border-radius: 12px;
  background: rgba(255,255,255,.96);
  box-shadow: 0 6px 18px rgba(31,70,113,.06);
}

.deposit-realtime-state {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #60758e;
  font-size: 11px;
  font-weight: 800;
}

.deposit-realtime-state i {
  font-size: 8px;
  color: #e2a832;
  filter: drop-shadow(0 0 4px rgba(226,168,50,.32));
}

.deposit-realtime-state[data-state="online"] { color: #247457; }
.deposit-realtime-state[data-state="online"] i { color: #31a574; }
.deposit-realtime-state[data-state="fallback"],
.deposit-realtime-state[data-state="connecting"] { color: #856418; }
.deposit-realtime-state[data-state="offline"] { color: #b84355; }
.deposit-realtime-state[data-state="offline"] i { color: #d34a5e; }

.deposit-notify-toggle {
  min-height: 32px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid #d8e3ef;
  border-radius: 999px;
  color: #526b86;
  background: #f8fbfe;
  font-size: 9px;
  font-weight: 850;
  white-space: nowrap;
}

.deposit-notify-toggle.active {
  color: #176b50;
  border-color: #bfe4d4;
  background: #eefaf5;
}

.deposit-emergency-contact {
  margin: 10px 14px 0;
  min-height: 68px;
  padding: 11px 13px;
  display: grid;
  grid-template-columns: 44px minmax(0,1fr) 20px;
  align-items: center;
  gap: 11px;
  border: 1px solid #bfe6d2;
  border-left: 4px solid #20a968;
  border-radius: 14px;
  color: #1d5742;
  background: linear-gradient(135deg,#effbf5 0%,#fff 84%);
  box-shadow: 0 8px 20px rgba(30,130,85,.08);
  text-decoration: none;
}

.deposit-emergency-contact-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  color: #fff;
  background: linear-gradient(145deg,#26b879,#11965f);
  box-shadow: 0 7px 15px rgba(22,151,95,.22);
  font-size: 17px;
}

.deposit-emergency-contact > span:nth-child(2) {
  min-width: 0;
  display: grid;
  gap: 4px;
}
.deposit-emergency-contact strong { font-size: 12px; font-weight: 950; }
.deposit-emergency-contact small { color: #5a7e6d; font-size: 9px; font-weight: 700; line-height: 1.45; }
.deposit-emergency-contact > i { color: #44a279; }

.deposit-recent-item .deposit-recent-progress {
  margin-top: 3px;
  display: block;
  color: #74869a;
  font-size: 8.5px;
  font-weight: 750;
}

.deposit-recent-item.status-reviewing { border-color: #c7dcf5; background: #f4f8fe; }
.deposit-recent-item.status-reviewing .deposit-recent-icon,
.deposit-recent-item.status-reviewing > b { color: #276db3; }
.deposit-recent-item.status-processing,
.deposit-recent-item.status-verifying { border-color: #c8dcf6; background: #f3f8ff; }
.deposit-recent-item.status-provider_unknown { border-color: #ecdba8; background: #fff9e9; }
.deposit-recent-item.status-provider_failed,
.deposit-recent-item.status-rejected { border-color: #efd0d6; background: #fff4f6; }
.deposit-recent-item.status-completed { border-color: #c9e8d8; background: #f2fbf6; }

.deposit-recent-item.is-realtime-updated {
  animation: depositMemberRealtimeUpdate 2.1s ease-out;
}

@keyframes depositMemberRealtimeUpdate {
  0% { transform: translateY(-2px); box-shadow: 0 0 0 2px rgba(47,171,112,.28), 0 10px 24px rgba(47,171,112,.14); }
  100% { transform: translateY(0); box-shadow: none; }
}

.deposit-submit.is-submitting {
  cursor: wait;
  opacity: .75;
}

.deposit-realtime-toast,
.lobby-realtime-toast {
  position: fixed;
  z-index: 2500;
  left: 50%;
  top: calc(12px + env(safe-area-inset-top));
  bottom: auto;
  width: min(430px, calc(100vw - 28px));
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 11px;
  border: 1px solid #cfe2f3;
  border-left: 5px solid #397ab8;
  border-radius: 15px;
  color: #2a425f;
  background: rgba(255,255,255,.98);
  box-shadow: 0 16px 38px rgba(18,42,70,.2);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -18px);
  transition: opacity .18s ease, transform .18s ease;
}

.deposit-realtime-toast.show,
.lobby-realtime-toast.show { opacity: 1; transform: translate(-50%, 0); }
.deposit-realtime-toast > i,
.lobby-realtime-toast > i { color: #397ab8; font-size: 19px; }
.deposit-realtime-toast.success > i,
.lobby-realtime-toast.success > i { color: #24986a; }
.deposit-realtime-toast.success { border-left-color: #24986a; background: #f4fff9; }
.deposit-realtime-toast.error > i { color: #c84b5c; }
.deposit-realtime-toast.error { border-left-color: #c84b5c; background: #fff7f8; }
.deposit-realtime-toast.warning { border-left-color: #d49418; background: #fffbef; }
.deposit-realtime-toast > div,
.lobby-realtime-toast > div { min-width: 0; display: grid; gap: 3px; }
.deposit-realtime-toast strong,
.lobby-realtime-toast strong { font-size: 14px; font-weight: 950; line-height: 1.35; }
.deposit-realtime-toast small,
.lobby-realtime-toast small { color: #60748b; font-size: 12px; font-weight: 750; line-height: 1.45; }

.deposit-form-message.deposit-duplicate-slip-message-v667 {
  color: var(--duplicate-slip-text-color, #dc2626) !important;
  font-size: var(--duplicate-slip-font-size, 14px) !important;
  font-weight: 850;
  line-height: 1.45;
}

/* Keep Lobby notifications unchanged; V66.7 moves only deposit notifications. */
.lobby-realtime-toast {
  top: auto;
  bottom: calc(84px + env(safe-area-inset-bottom));
  padding: 12px 14px;
  border: 1px solid #d9e5f1;
  border-radius: 14px;
  background: rgba(255,255,255,.98);
  transform: translate(-50%, 18px);
}
.lobby-realtime-toast.show { transform: translate(-50%, 0); }
.lobby-realtime-toast strong { font-size: 11px; }
.lobby-realtime-toast small { font-size: 9px; }

/* Lobby settings: deposit contact tab */
.lobby-contact-settings-grid {
  display: grid;
  grid-template-columns: minmax(0,1.1fr) minmax(320px,.9fr);
  gap: 16px;
}

.lobby-contact-settings-card,
.lobby-contact-preview-card {
  padding: 18px;
  border: 1px solid #dae4ef;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(26,50,78,.07);
}

.lobby-contact-settings-card > header {
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.lobby-contact-settings-card header h3 { margin: 0 0 4px; color: #1d3759; font-size: 15px; }
.lobby-contact-settings-card header p { margin: 0; color: #718198; font-size: 10px; line-height: 1.45; }
.lobby-contact-icon {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  color: #fff;
  background: linear-gradient(145deg,#26bd75,#10a45d);
  font-size: 22px;
  box-shadow: 0 8px 18px rgba(20,165,94,.2);
}

.lobby-contact-settings-card > label:not(.lobby-contact-enabled) {
  margin-top: 11px;
  display: grid;
  gap: 6px;
  color: #51677f;
  font-size: 10px;
  font-weight: 850;
}

.lobby-contact-settings-card input[type="text"],
.lobby-contact-settings-card input[type="url"],
.lobby-contact-settings-card textarea {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid #d8e2ed;
  border-radius: 10px;
  color: #253d59;
  background: #fbfdff;
  font: inherit;
  font-size: 11px;
  outline: none;
}

.lobby-contact-settings-card input:focus,
.lobby-contact-settings-card textarea:focus {
  border-color: #70b89a;
  box-shadow: 0 0 0 3px rgba(44,166,113,.1);
}

.lobby-contact-enabled {
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #cfe8dc;
  border-radius: 10px;
  color: #287455;
  background: #f1faf6;
  font-size: 10px;
  font-weight: 900;
}

.lobby-contact-actions {
  margin-top: 15px;
  display: flex;
  justify-content: flex-end;
  gap: 9px;
}

.lobby-contact-preview-card > span {
  display: block;
  margin-bottom: 12px;
  color: #6f8095;
  font-size: 10px;
  font-weight: 850;
}

.lobby-contact-preview-box {
  padding: 14px;
  min-height: 82px;
  display: grid;
  grid-template-columns: 46px minmax(0,1fr) 22px;
  align-items: center;
  gap: 11px;
  border: 1px solid #bee5d2;
  border-left: 4px solid #20a968;
  border-radius: 14px;
  background: linear-gradient(135deg,#effbf5,#fff 84%);
}
.lobby-contact-preview-box > i {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  color: #fff;
  background: #20a968;
  font-size: 18px;
}
.lobby-contact-preview-box > div { min-width: 0; display: grid; gap: 4px; }
.lobby-contact-preview-box strong { color: #1f5a43; font-size: 12px; }
.lobby-contact-preview-box small { color: #668173; font-size: 9px; line-height: 1.4; }
.lobby-contact-preview-box b { color: #4ca57e; text-align: right; }
.lobby-contact-security-note { margin-top: 12px; display: block; color: #76869a; font-size: 9px; line-height: 1.5; }

@media (max-width: 900px) {
  .lobby-contact-settings-grid { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .deposit-realtime-toolbar { margin-inline: 10px; }
  .deposit-emergency-contact { margin-inline: 10px; }
  .deposit-notify-toggle span { display: none; }
  .deposit-notify-toggle { width: 34px; padding: 0; justify-content: center; }
  .lobby-contact-actions { align-items: stretch; flex-direction: column; }
  .lobby-contact-actions button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .deposit-recent-item.is-realtime-updated { animation: none; }
  .deposit-realtime-toast,
  .lobby-realtime-toast { transition: none; }
}


/* ===== V35 deposit contact visibility fix ===== */
.deposit-emergency-contact[aria-busy="true"] {
  opacity: .65;
  pointer-events: none;
}

.deposit-emergency-contact.is-unconfigured {
  cursor: not-allowed;
  color: #6e5c31;
  border-color: #ead69d;
  border-left-color: #d3a631;
  background: linear-gradient(135deg, #fff9e9 0%, #fff 84%);
  box-shadow: 0 8px 20px rgba(161, 119, 25, .08);
}

.deposit-emergency-contact.is-unconfigured .deposit-emergency-contact-icon {
  background: linear-gradient(145deg, #e2b947, #bd8d17);
  box-shadow: 0 7px 15px rgba(178, 132, 26, .2);
}

.deposit-emergency-contact.is-unconfigured small,
.deposit-emergency-contact.is-unconfigured > i {
  color: #8b7340;
}


/* ===== V36 contact button after deposit submit ===== */
.deposit-form .deposit-emergency-contact--after-submit {
  margin: 12px 0 0;
  min-height: 66px;
}

@media (max-width: 560px) {
  .deposit-form .deposit-emergency-contact--after-submit {
    margin-inline: 0;
  }
}


/* ===== V37 customer-first deposit page ===== */
.deposit-page-body .deposit-channel-tabs {
  margin-top: 14px;
}


/* ===== V38 Finance settings consolidation ===== */
.finance-settings-tabs-v38 {
  margin: 0 18px 18px;
  padding: 0;
  display: flex;
  gap: 8px;
  border-bottom: 1px solid #d9dee8;
  overflow-x: auto;
}

.finance-settings-tabs-v38 button {
  min-height: 44px;
  margin-bottom: -1px;
  padding: 0 16px;
  border: 1px solid transparent;
  border-radius: 9px 9px 0 0;
  color: #536078;
  background: transparent;
  box-shadow: none;
  font-size: 13px;
  font-weight: 750;
  white-space: nowrap;
}

.finance-settings-tabs-v38 button:hover {
  color: #244f9d;
  background: #f7f9fd;
}

.finance-settings-tabs-v38 button.active {
  color: #244f9d;
  border-color: #d9dee8 #d9dee8 #fff;
  background: #fff;
  box-shadow: none;
}

.finance-contact-pane-v38 {
  padding: 0 18px 18px;
}

.finance-contact-pane-v38 .lobby-contact-settings-grid {
  margin-top: 0;
}

.finance-contact-pane-v38 .lobby-contact-settings-card,
.finance-contact-pane-v38 .lobby-contact-preview-card {
  min-height: 100%;
}

@media (max-width: 760px) {
  .finance-settings-tabs-v38 {
    margin-inline: 12px;
  }

  .finance-contact-pane-v38 {
    padding-inline: 12px;
  }
}

/* ===== V39 Deposit page settings center ===== */
.deposit-page-settings-pane-v39 {
  padding-top: 4px;
}

.finance-settings-tabs-v39 {
  margin: 14px 0 16px;
  padding: 5px !important;
  border: 1px solid #d7e0ec;
  border-radius: 14px;
  background: #fff;
}

.finance-settings-tabs-v39 button {
  flex: 1 0 auto;
  justify-content: center;
}

.deposit-page-settings-shell-v39 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 18px;
  align-items: start;
}

.deposit-page-settings-editor-v39,
.deposit-page-preview-card-v39 {
  border: 1px solid #d9e2ee;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 12px 30px rgba(31, 51, 83, .07);
}

.deposit-page-settings-heading-v39 {
  min-height: 78px;
  padding: 16px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border-bottom: 1px solid #e8edf4;
}

.deposit-page-settings-heading-v39 h3,
.deposit-page-form-card-v39 h4 {
  margin: 0;
  color: #203653;
}

.deposit-page-settings-heading-v39 p,
.deposit-page-form-card-v39 header p {
  margin: 5px 0 0;
  color: #7d8ca1;
  font-size: 11px;
  line-height: 1.45;
}

.deposit-page-subtabs-v39 {
  padding: 10px 12px;
  display: flex;
  gap: 6px;
  overflow-x: auto;
  border-bottom: 1px solid #e8edf4;
  background: #f8fafc;
}

.deposit-page-subtabs-v39 button {
  min-height: 36px;
  padding: 0 11px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid #d9e2ed;
  border-radius: 9px;
  color: #667991;
  background: #fff;
  font: inherit;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
}

.deposit-page-subtabs-v39 button.active {
  color: #fff;
  border-color: #365fc8;
  background: linear-gradient(135deg, #4e75dc, #3157bd);
  box-shadow: 0 6px 14px rgba(48, 84, 182, .18);
}

.deposit-page-form-card-v39 {
  padding: 18px;
}

.deposit-page-form-card-v39[hidden] { display: none; }

.deposit-page-form-card-v39 > header {
  margin-bottom: 14px;
  padding-bottom: 13px;
  border-bottom: 1px solid #e8edf4;
}

.deposit-page-form-grid-v39 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.deposit-page-form-grid-v39 label,
.deposit-contact-settings-inline-v39 label {
  display: grid;
  gap: 6px;
  color: #53657e;
  font-size: 11px;
  font-weight: 800;
}

.deposit-page-form-grid-v39 input,
.deposit-page-form-grid-v39 select,
.deposit-page-form-grid-v39 textarea,
.deposit-contact-settings-inline-v39 input,
.deposit-contact-settings-inline-v39 textarea {
  width: 100%;
  min-height: 42px;
  padding: 9px 11px;
  border: 1px solid #d3deeb;
  border-radius: 10px;
  outline: 0;
  color: #213957;
  background: #fbfcfe;
  font: inherit;
}

.deposit-page-form-grid-v39 textarea,
.deposit-contact-settings-inline-v39 textarea { resize: vertical; }
.deposit-page-form-grid-v39 small,
.deposit-contact-settings-inline-v39 small { color: #8998aa; font-size: 9px; font-weight: 600; line-height: 1.4; }

.deposit-page-form-card-v39 > .finance-primary-button {
  margin-top: 16px;
}

.deposit-contact-settings-inline-v39 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 12px;
}

.deposit-contact-settings-inline-v39 .lobby-contact-enabled,
.deposit-contact-settings-inline-v39 .lobby-contact-actions,
.deposit-contact-settings-inline-v39 label:nth-of-type(3),
.deposit-contact-settings-inline-v39 label:nth-of-type(4) {
  grid-column: 1 / -1;
}

.deposit-page-preview-card-v39 {
  position: sticky;
  top: 18px;
  padding: 14px;
}

.deposit-page-preview-card-v39 > header {
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #2a405e;
}

.deposit-page-preview-card-v39 > header strong,
.deposit-page-preview-card-v39 > header span { display: block; }
.deposit-page-preview-card-v39 > header span { margin-top: 3px; color: #8a98aa; font-size: 9px; }
.deposit-page-preview-card-v39 > header i { color: #416ad1; font-size: 20px; }

.deposit-page-phone-v39 {
  --preview-bank: #176fbd;
  --preview-bank-strong: #0e4f91;
  --preview-bank-soft: #eaf5ff;
  overflow: hidden;
  border: 1px solid #cfdbea;
  border-radius: 22px;
  background: linear-gradient(180deg, #dff4ff, #f7fbff);
  box-shadow: 0 12px 28px rgba(31, 72, 112, .15);
  font-family: var(--app-font-family);
}

.deposit-page-phone-v39.no-shadow { box-shadow: none; }
.deposit-page-phone-v39.card-flat,
.deposit-page-phone-v39.card-flat > * { border-radius: 6px !important; }
.deposit-page-phone-v39.font-normal { font-size: 10px; }
.deposit-page-phone-v39.font-large { font-size: 11px; }
.deposit-page-phone-v39.theme-high-contrast { background: #fff; border-color: #17263a; }

.deposit-preview-header-v39 {
  min-height: 58px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #fff;
  background: linear-gradient(145deg, #36b9fb, #0b83d9);
}

.deposit-page-phone-v39.theme-high-contrast .deposit-preview-header-v39 { background: #17263a; }
.deposit-preview-header-v39 strong,
.deposit-preview-header-v39 small { display: block; }
.deposit-preview-header-v39 strong { font-size: 15px; }
.deposit-preview-header-v39 small { margin-top: 3px; opacity: .85; font-size: 8px; }
.deposit-preview-header-v39 b { padding: 7px 9px; border-radius: 10px; color: #12669e; background: #fff; font-size: 10px; }

.deposit-preview-tabs-v39 {
  margin: 9px;
  padding: 4px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  border: 1px solid #c7e2f3;
  border-radius: 12px;
  background: #fff;
}
.deposit-preview-tabs-v39 span { min-height: 34px; display: grid; place-items: center; border-radius: 9px; color: #6c8196; font-weight: 900; }
.deposit-preview-tabs-v39 span.active { color: #fff; background: linear-gradient(145deg, #43befb, #1388dd); }

.deposit-preview-bank-v39 {
  margin: 0 9px;
  padding: 11px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: 14px;
  color: #fff;
  background: linear-gradient(145deg, var(--preview-bank), var(--preview-bank-strong));
}
.deposit-preview-bank-v39 > i { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 11px; color: var(--preview-bank); background: #fff; }
.deposit-preview-bank-v39 small,
.deposit-preview-bank-v39 strong,
.deposit-preview-bank-v39 span { display: block; }
.deposit-preview-bank-v39 small { opacity: .82; font-size: 8px; }
.deposit-preview-bank-v39 strong { margin-top: 2px; font-size: 14px; }
.deposit-preview-bank-v39 span { margin-top: 2px; opacity: .9; font-size: 8px; }

.deposit-preview-bank-v39.bank-theme-scb { --preview-bank:#6f45a7; --preview-bank-strong:#4d2d7b; }
.deposit-preview-bank-v39.bank-theme-kbank { --preview-bank:#23a05d; --preview-bank-strong:#14703f; }
.deposit-preview-bank-v39.bank-theme-ktb { --preview-bank:#27a9df; --preview-bank-strong:#137eb5; }
.deposit-preview-bank-v39.bank-theme-bbl { --preview-bank:#315f9e; --preview-bank-strong:#1d4378; }
.deposit-preview-bank-v39.bank-theme-bay { --preview-bank:#d2aa2b; --preview-bank-strong:#9a7611; }
.deposit-preview-bank-v39.bank-theme-ttb { --preview-bank:#2976c7; --preview-bank-strong:#18528f; }
.deposit-preview-bank-v39.bank-theme-gsb { --preview-bank:#e54a96; --preview-bank-strong:#b52e73; }
.deposit-preview-bank-v39.bank-theme-aba { --preview-bank:#0b8ba9; --preview-bank-strong:#07657e; }
.deposit-preview-bank-v39.bank-theme-wing { --preview-bank:#82b830; --preview-bank-strong:#5f881c; }

.deposit-preview-notice-v39 {
  margin: 8px 9px;
  padding: 8px;
  display: flex;
  gap: 7px;
  border: 1px solid #cbe2f1;
  border-radius: 10px;
  color: #4c6b81;
  background: #f2faff;
  font-size: 8px;
  line-height: 1.35;
}
.deposit-preview-notice-v39[data-tone="warning"] { color:#855e0a; border-color:#ecdca7; background:#fff8df; }
.deposit-preview-notice-v39[data-tone="danger"] { color:#9b3340; border-color:#efc7ce; background:#fff0f2; }

.deposit-preview-form-v39 { margin: 0 9px 10px; padding: 10px; border: 1px solid #cde3f2; border-radius: 14px; background: rgba(255,255,255,.92); }
.deposit-preview-form-v39 > label { display:block; margin-bottom:5px; color:#385a75; font-weight:900; }
.deposit-preview-input-v39 { min-height:36px; padding:0 10px; display:flex; align-items:center; border:1px solid #bcdcf0; border-radius:10px; color:#94abc0; font-size:15px; font-weight:900; }
.deposit-preview-quick-v39 { margin-top:6px; display:grid; grid-template-columns:repeat(4,1fr); gap:4px; }
.deposit-preview-quick-v39 span { min-height:24px; display:grid; place-items:center; border:1px solid #c8e2f2; border-radius:7px; color:#276890; background:#edf8ff; font-size:8px; font-weight:900; }
.deposit-preview-slip-v39 { margin-top:8px; min-height:90px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; border:1.5px dashed #7fc3e7; border-radius:11px; color:#3c6a87; background:#edf9ff; text-align:center; }
.deposit-preview-slip-v39 i { font-size:18px; color:#1694df; }
.deposit-preview-slip-v39 small { max-width:190px; color:#7c98aa; font-size:7px; line-height:1.3; }
.deposit-preview-form-v39 > button { width:100%; min-height:36px; margin-top:8px; border:0; border-radius:10px; color:#fff; background:linear-gradient(145deg,#35b7f6,#0c83d8); font:inherit; font-weight:900; }
.deposit-page-phone-v39.theme-high-contrast .deposit-preview-form-v39 > button { background:#17263a; }
.deposit-preview-contact-v39 { margin-top:7px; padding:8px; display:flex; align-items:center; gap:7px; border:1px solid #bee7cf; border-radius:10px; color:#187348; background:#f0fbf5; }
.deposit-preview-contact-v39 > i { color:#15a75b; font-size:18px; }
.deposit-preview-contact-v39 strong,
.deposit-preview-contact-v39 small { display:block; }
.deposit-preview-contact-v39 small { margin-top:2px; color:#729181; font-size:7px; }
.deposit-page-preview-note-v39 { margin:10px 2px 0; color:#77899f; font-size:9px; line-height:1.45; }

/* Customer deposit: configurable UI and automatic bank colors */
.deposit-service-hint {
  margin: 0 0 9px;
  padding: 8px 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid #c9e5d8;
  border-radius: 11px;
  color: #277354;
  background: #effbf5;
  font-size: 10px;
  font-weight: 800;
}

.deposit-maintenance-card {
  margin: 10px 0;
  padding: 18px;
  display: flex;
  align-items: flex-start;
  gap: 13px;
  border: 1px solid #ead69b;
  border-radius: 17px;
  color: #755711;
  background: linear-gradient(180deg,#fff9e8,#fff2c9);
  box-shadow: 0 9px 20px rgba(144,103,12,.10);
}
.deposit-maintenance-card > i { font-size:24px; }
.deposit-maintenance-card strong { display:block; font-size:14px; }
.deposit-maintenance-card p { margin:5px 0 0; font-size:10px; line-height:1.45; }

.deposit-account-card,
.deposit-bank-choice {
  --bank-color: #168ddd;
  --bank-strong: #0875c8;
  --bank-soft: #eaf6ff;
}

.deposit-theme-bank .deposit-account-card {
  background: radial-gradient(circle at 88% 20%, rgba(255,255,255,.18), transparent 25%), linear-gradient(145deg, var(--bank-color), var(--bank-strong));
  box-shadow: 0 12px 25px color-mix(in srgb, var(--bank-color) 28%, transparent);
}
.deposit-theme-bank .deposit-account-icon { color: var(--bank-color); }
.deposit-theme-bank .deposit-account-card > button { border-color: rgba(255,255,255,.48); }
.deposit-theme-blue .deposit-account-card { --bank-color:#3db8fb; --bank-strong:#0875c8; }
.deposit-theme-high-contrast .deposit-account-card { --bank-color:#24344b; --bank-strong:#111d2d; border-color:#111d2d; }

.deposit-account-card.bank-theme-scb,.deposit-bank-choice.bank-theme-scb { --bank-color:#7046a8; --bank-strong:#4d2d7b; --bank-soft:#f4effa; }
.deposit-account-card.bank-theme-kbank,.deposit-bank-choice.bank-theme-kbank { --bank-color:#24a15e; --bank-strong:#14703f; --bank-soft:#edf9f2; }
.deposit-account-card.bank-theme-ktb,.deposit-bank-choice.bank-theme-ktb { --bank-color:#28a9df; --bank-strong:#137eb5; --bank-soft:#edf9fd; }
.deposit-account-card.bank-theme-bbl,.deposit-bank-choice.bank-theme-bbl { --bank-color:#315f9e; --bank-strong:#1d4378; --bank-soft:#eef4fb; }
.deposit-account-card.bank-theme-bay,.deposit-bank-choice.bank-theme-bay { --bank-color:#d2aa2b; --bank-strong:#9a7611; --bank-soft:#fff9e8; }
.deposit-account-card.bank-theme-ttb,.deposit-bank-choice.bank-theme-ttb { --bank-color:#2876c7; --bank-strong:#18528f; --bank-soft:#eef5fc; }
.deposit-account-card.bank-theme-gsb,.deposit-bank-choice.bank-theme-gsb { --bank-color:#e54a96; --bank-strong:#b52e73; --bank-soft:#fff0f7; }
.deposit-account-card.bank-theme-truemoney,.deposit-bank-choice.bank-theme-truemoney { --bank-color:#eb5a36; --bank-strong:#bd3821; --bank-soft:#fff2ee; }
.deposit-account-card.bank-theme-aba,.deposit-bank-choice.bank-theme-aba { --bank-color:#0b8ba9; --bank-strong:#07657e; --bank-soft:#edf9fb; }
.deposit-account-card.bank-theme-wing,.deposit-bank-choice.bank-theme-wing { --bank-color:#82b830; --bank-strong:#5f881c; --bank-soft:#f5faeb; }
.deposit-account-card.bank-theme-cimb,.deposit-bank-choice.bank-theme-cimb { --bank-color:#c42f39; --bank-strong:#8e2028; --bank-soft:#fff1f2; }
.deposit-account-card.bank-theme-kkp,.deposit-bank-choice.bank-theme-kkp { --bank-color:#735ca9; --bank-strong:#503e82; --bank-soft:#f4f1fa; }
.deposit-account-card.bank-theme-baac,.deposit-bank-choice.bank-theme-baac { --bank-color:#28975f; --bank-strong:#1c6f45; --bank-soft:#eff9f4; }
.deposit-account-card.bank-theme-uob,.deposit-bank-choice.bank-theme-uob { --bank-color:#24549a; --bank-strong:#173a6e; --bank-soft:#eef3fa; }

.deposit-account-icon img { width:34px; height:34px; object-fit:contain; }
.deposit-bank-choice img { width:28px; height:28px; flex:0 0 28px; object-fit:contain; padding:3px; border-radius:8px; background:#fff; }
.deposit-theme-bank .deposit-bank-choice { border-color: color-mix(in srgb, var(--bank-color) 25%, #dce6ef); background: linear-gradient(135deg,var(--bank-soft),#fff); }
.deposit-theme-bank .deposit-bank-choice i { color:var(--bank-color); }
.deposit-theme-bank .deposit-bank-choice.active { color:#fff; border-color:var(--bank-color); background:linear-gradient(135deg,var(--bank-color),var(--bank-strong)); box-shadow:0 7px 16px color-mix(in srgb,var(--bank-color) 24%,transparent); }
.deposit-theme-bank .deposit-bank-choice.active small { color:rgba(255,255,255,.84); }

.deposit-alert-card[data-tone="warning"] { color:#835f12; border-color:#ecd99d; background:linear-gradient(180deg,#fffaf0,#fff4d8); }
.deposit-alert-card[data-tone="warning"] i { color:#c98a13; }
.deposit-alert-card[data-tone="danger"] { color:#963745; border-color:#edc4cb; background:linear-gradient(180deg,#fff6f7,#ffecef); }
.deposit-alert-card[data-tone="danger"] i { color:#cf4254; }
.deposit-time-card.is-locked input { pointer-events:none; color:#63788c; background:#edf3f7; }

.deposit-font-large .deposit-field > span,
.deposit-font-large .deposit-time-card legend { font-size:12px; }
.deposit-font-large .deposit-account-detail span { font-size:12px; }
.deposit-font-large .deposit-account-detail strong { font-size:20px; }
.deposit-font-large .deposit-account-detail small { font-size:11px; }
.deposit-font-large .deposit-alert-card p { font-size:11px; }
.deposit-font-large .deposit-submit { font-size:13px; }
.deposit-card-flat .deposit-channel-tabs,
.deposit-card-flat .deposit-account-card,
.deposit-card-flat .deposit-alert-card,
.deposit-card-flat .deposit-form,
.deposit-card-flat .deposit-slip-box,
.deposit-card-flat .deposit-emergency-contact { border-radius:8px !important; }
.deposit-no-shadow .deposit-header,
.deposit-no-shadow .deposit-channel-tabs,
.deposit-no-shadow .deposit-account-card,
.deposit-no-shadow .deposit-form,
.deposit-no-shadow .deposit-submit { box-shadow:none !important; }
.deposit-theme-high-contrast { background:#fff; }
.deposit-theme-high-contrast .deposit-app { background:#fff; box-shadow:none; }
.deposit-theme-high-contrast .deposit-header { background:#17263a; }
.deposit-theme-high-contrast .deposit-channel-tabs button.active,
.deposit-theme-high-contrast .deposit-submit { background:#17263a; }

@media (max-width: 1180px) {
  .deposit-page-settings-shell-v39 { grid-template-columns: 1fr; }
  .deposit-page-preview-card-v39 { position: static; max-width: 380px; width:100%; margin:0 auto; }
}

@media (max-width: 760px) {
  .deposit-page-settings-heading-v39 { align-items:flex-start; flex-direction:column; }
  .deposit-page-form-grid-v39,
  .deposit-contact-settings-inline-v39 { grid-template-columns:1fr; }
  .deposit-contact-settings-inline-v39 .lobby-contact-enabled,
  .deposit-contact-settings-inline-v39 .lobby-contact-actions,
  .deposit-contact-settings-inline-v39 label:nth-of-type(3),
  .deposit-contact-settings-inline-v39 label:nth-of-type(4) { grid-column:auto; }
  .finance-settings-tabs-v39 button { flex:0 0 auto; }
}

.finance-account-bank-themed {
  border-left: 4px solid var(--bank-color, #4268d5);
  background: linear-gradient(135deg, var(--bank-soft, #f3f7fd), #fff 72%);
}
.finance-account-bank-themed .finance-account-icon {
  color: var(--bank-color, #4268d5);
  background: #fff;
  border: 1px solid color-mix(in srgb, var(--bank-color, #4268d5) 22%, white);
  box-shadow: 0 6px 14px color-mix(in srgb, var(--bank-color, #4268d5) 16%, transparent);
}
.finance-account-bank-themed .finance-account-icon img { width:30px; height:30px; object-fit:contain; }
.finance-account-bank-themed .finance-account-main > strong,
.finance-account-bank-themed .finance-account-main > span { color: var(--bank-strong, #2f4c73); }
.deposit-account-card.bank-theme-lhbank,.deposit-bank-choice.bank-theme-lhbank { --bank-color:#8b54a1; --bank-strong:#663b78; --bank-soft:#f7f1f9; }


/* ===== V40 customer floating utility buttons ===== */
/* Hide any older inline realtime toolbar left from previous versions. */
.deposit-page-body .deposit-realtime-toolbar,
.deposit-page-body .deposit-form .deposit-emergency-contact--after-submit {
  display: none !important;
}

.deposit-floating-tools {
  position: fixed;
  z-index: 76;
  right: max(14px, calc((100vw - 430px) / 2 + 14px));
  bottom: calc(78px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  pointer-events: none;
}

.deposit-floating-action {
  position: relative;
  width: 46px;
  height: 46px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.9);
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(145deg, #46baff, #1187dc);
  box-shadow: 0 9px 22px rgba(13,92,148,.28), inset 0 1px 0 rgba(255,255,255,.45);
  text-decoration: none;
  cursor: pointer;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
  transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}

.deposit-review-timer {
  position: relative;
  width: 46px;
  height: 46px;
  box-sizing: border-box;
  display: grid;
  grid-template-rows: auto auto;
  place-content: center;
  gap: 1px;
  overflow: visible;
  border: 1px solid rgba(255,255,255,.92);
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(145deg, #6d91ff, #365bd7);
  box-shadow: 0 9px 22px rgba(48,77,185,.3), inset 0 1px 0 rgba(255,255,255,.45);
  text-align: center;
  pointer-events: auto;
}

.deposit-review-timer[hidden] { display: none !important; }
.deposit-review-timer strong {
  position: relative;
  z-index: 1;
  font-size: 6.5px;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}
.deposit-review-timer time {
  position: relative;
  z-index: 1;
  font-size: 9px;
  font-weight: 950;
  line-height: 1;
  letter-spacing: -.2px;
}
.deposit-review-timer-ring {
  position: absolute;
  inset: 3px;
  border: 2px solid rgba(255,255,255,.28);
  border-top-color: #fff;
  border-radius: 50%;
  animation: depositReviewTimerSpin 1.15s linear infinite;
}
.deposit-review-timer::after {
  content: "";
  position: absolute;
  inset: -4px;
  border: 2px solid rgba(86,121,237,.28);
  border-radius: 50%;
  animation: depositReviewTimerPulse 1.8s ease-out infinite;
}
.deposit-review-timer.is-entering { animation: depositReviewTimerEnter .38s cubic-bezier(.2,.9,.25,1.35); }
.deposit-review-timer.is-leaving { opacity: 0; transform: translateX(8px) scale(.82); transition: opacity .18s ease, transform .18s ease; }
.deposit-review-timer:hover .deposit-floating-label,
.deposit-review-timer:focus-within .deposit-floating-label {
  transform: translate(0,-50%);
  opacity: 1;
  visibility: visible;
}

@keyframes depositReviewTimerSpin { to { transform: rotate(360deg); } }
@keyframes depositReviewTimerPulse {
  0% { opacity: .65; transform: scale(.86); }
  75%, 100% { opacity: 0; transform: scale(1.18); }
}
@keyframes depositReviewTimerEnter {
  from { opacity: 0; transform: translateX(12px) scale(.72); }
  to { opacity: 1; transform: translateX(0) scale(1); }
}

.deposit-floating-action:hover,
.deposit-floating-action:focus-visible {
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 12px 25px rgba(13,92,148,.34), inset 0 1px 0 rgba(255,255,255,.5);
  outline: none;
}

.deposit-floating-action:active { transform: scale(.95); }
.deposit-floating-action > i { font-size: 18px; }

.deposit-floating-label {
  position: absolute;
  right: 54px;
  top: 50%;
  min-width: max-content;
  max-width: 220px;
  padding: 7px 10px;
  transform: translate(8px,-50%);
  opacity: 0;
  visibility: hidden;
  display: block;
  border: 1px solid rgba(25,67,105,.12);
  border-radius: 9px;
  color: #24445f;
  background: rgba(255,255,255,.97);
  box-shadow: 0 7px 18px rgba(22,71,111,.16);
  font-size: 9px;
  font-weight: 850;
  line-height: 1.25;
  text-align: right;
  pointer-events: none;
  transition: opacity .15s ease, transform .15s ease, visibility .15s ease;
}

.deposit-floating-label strong,
.deposit-floating-label small { display: block; }
.deposit-floating-label small { margin-top: 2px; color: #71869a; font-size: 8px; font-weight: 650; }

.deposit-floating-action:hover .deposit-floating-label,
.deposit-floating-action:focus-visible .deposit-floating-label {
  transform: translate(0,-50%);
  opacity: 1;
  visibility: visible;
}

.deposit-floating-live[data-state="online"] {
  background: linear-gradient(145deg, #34c684, #159c65);
  box-shadow: 0 9px 22px rgba(19,147,94,.26), inset 0 1px 0 rgba(255,255,255,.45);
}
.deposit-floating-live[data-state="connecting"],
.deposit-floating-live[data-state="fallback"] {
  background: linear-gradient(145deg, #f4bf4d, #d9971c);
  box-shadow: 0 9px 22px rgba(191,129,20,.24), inset 0 1px 0 rgba(255,255,255,.45);
}
.deposit-floating-live[data-state="offline"] {
  background: linear-gradient(145deg, #ed6674, #c93d51);
  box-shadow: 0 9px 22px rgba(184,48,68,.25), inset 0 1px 0 rgba(255,255,255,.42);
}
.deposit-floating-live.is-checking > i { animation: depositFloatingSpin .75s linear infinite; }

.deposit-floating-notify.active {
  background: linear-gradient(145deg, #6e8dff, #3e62d7);
  box-shadow: 0 9px 22px rgba(57,86,193,.27), inset 0 1px 0 rgba(255,255,255,.45);
}
.deposit-floating-notify:not(.active) { color: #587084; background: linear-gradient(145deg,#fff,#eaf3fa); border-color:#d6e5f1; }

.deposit-floating-line {
  background: linear-gradient(145deg, #35d873, #08af4c);
  box-shadow: 0 9px 22px rgba(7,166,73,.28), inset 0 1px 0 rgba(255,255,255,.45);
}
.deposit-floating-line > i { font-size: 23px; }
.deposit-floating-line.is-unconfigured { color:#718396; background:linear-gradient(145deg,#f7fafc,#e7eef4); box-shadow:0 8px 18px rgba(66,87,104,.16); }
.deposit-floating-line[hidden] { display:none !important; }

@keyframes depositFloatingSpin { to { transform: rotate(360deg); } }

@media (max-width: 480px) {
  .deposit-floating-tools {
    right: 12px;
    bottom: calc(76px + env(safe-area-inset-bottom));
    gap: 9px;
  }
  .deposit-floating-action { width: 44px; height: 44px; }
  .deposit-review-timer { width: 44px; height: 44px; }
  .deposit-floating-action > i { font-size: 17px; }
  .deposit-floating-line > i { font-size: 22px; }
}

@media (max-width: 370px) {
  .deposit-floating-tools { right: 9px; }
  .deposit-floating-action { width: 41px; height: 41px; }
  .deposit-review-timer { width: 41px; height: 41px; }
}

@media (prefers-reduced-motion: reduce) {
  .deposit-floating-action,
  .deposit-floating-label,
  .deposit-review-timer { transition: none; }
  .deposit-floating-live.is-checking > i { animation: none; }
  .deposit-review-timer,
  .deposit-review-timer-ring,
  .deposit-review-timer::after { animation: none; }
}


/* ===== V42 customer-first slip preview and recent deposits ===== */
.deposit-slip-preview {
  min-height: 440px;
  padding: 10px;
  box-sizing: border-box;
  background: linear-gradient(180deg, #e8f6ff, #dceffa);
}

.deposit-slip-preview img {
  width: 100%;
  height: clamp(430px, 120vw, 560px);
  padding: 8px;
  box-sizing: border-box;
  border-radius: 12px;
  object-fit: contain;
  background: #fff;
  box-shadow: 0 7px 20px rgba(36, 96, 135, .12);
}

.deposit-slip-preview b {
  bottom: 18px;
  padding: 7px 13px;
  font-size: 10px;
}

.deposit-time-card > small {
  margin-top: 9px;
  color: #647f94;
}

.deposit-recent-item-v42 {
  min-height: 72px;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  gap: 10px;
  padding: 7px 0;
}

.deposit-recent-item-v42 .deposit-recent-icon {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  font-size: 15px;
}

.deposit-recent-detail-v42 {
  display: grid;
  gap: 2px;
}

.deposit-recent-channel-v42 {
  color: #668298;
  font-size: 9px;
  font-weight: 800;
}

.deposit-recent-detail-v42 .deposit-recent-amount-v42 {
  color: #174f73;
  font-size: 15px;
  font-weight: 950;
  line-height: 1.2;
}

.deposit-recent-datetime-v42 {
  margin-top: 3px !important;
  display: flex !important;
  align-items: center;
  gap: 10px;
  overflow: visible !important;
  color: #6e879b !important;
  font-size: 9px !important;
  white-space: normal !important;
}

.deposit-recent-datetime-v42 span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.deposit-recent-datetime-v42 i {
  color: #238ed1;
}

.deposit-recent-detail-v42 .deposit-recent-progress {
  display: none;
}

.deposit-recent-item-v42 > b {
  max-width: 92px;
  padding: 5px 8px;
  font-size: 8.5px;
}

@media (max-width: 380px) {
  .deposit-slip-preview {
    min-height: 400px;
    padding: 8px;
  }

  .deposit-slip-preview img {
    height: clamp(390px, 122vw, 500px);
  }

  .deposit-recent-item-v42 {
    grid-template-columns: 36px minmax(0, 1fr) auto;
  }

  .deposit-recent-item-v42 .deposit-recent-icon {
    width: 34px;
    height: 34px;
  }

  .deposit-recent-detail-v42 .deposit-recent-amount-v42 {
    font-size: 14px;
  }
}


/* ===== V43 slip remove button and clearer transfer hint ===== */
.deposit-slip-wrap {
  position: relative;
  margin-top: 12px;
}

.deposit-slip-wrap .deposit-slip-box {
  margin-top: 0;
}

.deposit-slip-remove {
  position: absolute;
  z-index: 5;
  top: 16px;
  right: 16px;
  width: 38px;
  height: 38px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 3px solid #fff;
  border-radius: 50%;
  color: #fff;
  background: #e53935;
  box-shadow: 0 7px 18px rgba(190, 35, 35, .32);
  font-size: 18px;
  cursor: pointer;
  transition: transform .15s ease, background .15s ease;
}

.deposit-slip-remove:hover {
  background: #c62828;
  transform: scale(1.05);
}

.deposit-slip-remove:active {
  transform: scale(.94);
}

.deposit-slip-remove[hidden] {
  display: none !important;
}

.deposit-time-card > small,
.deposit-time-card > small.manual {
  min-height: 32px;
  margin-top: 9px;
  padding: 8px 10px;
  display: flex;
  align-items: center;
  gap: 7px;
  border: 1px solid #f1c985;
  border-radius: 9px;
  color: #95480c;
  background: #fff7e8;
  font-size: 10.5px;
  font-weight: 900;
  line-height: 1.35;
}

.deposit-time-card > small::before {
  content: "!";
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: #e58a1f;
  font-size: 11px;
  font-weight: 950;
}

@media (max-width: 380px) {
  .deposit-slip-remove {
    top: 13px;
    right: 13px;
    width: 36px;
    height: 36px;
  }
}


/* ===== V44 clean customer deposit notices ===== */
.deposit-alert-card.deposit-info-bar-v44 {
  min-height: 44px;
  margin: 9px 0 12px;
  padding: 9px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 0;
  border-radius: 12px;
  color: #2c5876;
  background: linear-gradient(180deg, #f8fcff 0%, #edf7fd 100%);
  box-shadow:
    inset 0 0 0 1px #d3e8f6,
    0 3px 10px rgba(42, 119, 168, .05);
}

.deposit-alert-card.deposit-info-bar-v44 #depositNoticeIcon {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(145deg, #34a7ee, #1688d4);
  box-shadow: 0 4px 10px rgba(26, 139, 214, .18);
  font-size: 11px;
}

.deposit-alert-card.deposit-info-bar-v44 #depositNoticeText {
  margin: 0;
  color: #315b77;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.4;
}

.deposit-time-card > small#transferTimeHint,
.deposit-time-card > small#transferTimeHint.manual,
.deposit-time-card > small#walletTransferTimeHint,
.deposit-time-card > small#walletTransferTimeHint.manual {
  min-height: 0;
  margin-top: 9px;
  padding: 2px 2px 0;
  display: flex;
  align-items: center;
  gap: 7px;
  border: 0;
  border-radius: 0;
  color: #a56820;
  background: transparent;
  font-size: 11.5px;
  font-weight: 800;
  line-height: 1.4;
}

.deposit-time-card > small#transferTimeHint::before,
.deposit-time-card > small#walletTransferTimeHint::before {
  content: "!";
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: #e7a13e;
  box-shadow: 0 2px 6px rgba(190, 116, 23, .16);
  font-size: 10px;
  font-weight: 950;
}

@media (max-width: 380px) {
  .deposit-alert-card.deposit-info-bar-v44 {
    padding: 9px 11px;
  }

  .deposit-alert-card.deposit-info-bar-v44 #depositNoticeText {
    font-size: 11.5px;
  }

  .deposit-time-card > small#transferTimeHint,
  .deposit-time-card > small#transferTimeHint.manual,
  .deposit-time-card > small#walletTransferTimeHint,
  .deposit-time-card > small#walletTransferTimeHint.manual {
    font-size: 11px;
  }
}


/* ===== V45 submit button icon spacing ===== */
.deposit-submit-v45 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  letter-spacing: .01em;
}

.deposit-submit-v45 > i {
  flex: 0 0 auto;
  margin: 0;
  font-size: 15px;
  line-height: 1;
}

.deposit-submit-v45 > span {
  display: inline-block;
  line-height: 1;
}

@media (max-width: 380px) {
  .deposit-submit-v45 {
    gap: 8px;
  }
}


/* ===== V46 realtime receiving bank update ===== */
.deposit-account-card.is-bank-realtime-updated {
  animation: depositBankRealtimeUpdated 2.3s ease-out;
}

@keyframes depositBankRealtimeUpdated {
  0% {
    transform: translateY(-2px);
    box-shadow:
      0 0 0 3px rgba(49, 196, 118, .28),
      0 14px 30px rgba(49, 196, 118, .20);
  }
  35% {
    transform: translateY(0);
    box-shadow:
      0 0 0 2px rgba(49, 196, 118, .16),
      0 10px 22px rgba(31, 116, 175, .12);
  }
  100% {
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .deposit-account-card.is-bank-realtime-updated {
    animation: none;
    outline: 3px solid rgba(49, 196, 118, .22);
    outline-offset: 2px;
  }
}


/* ===== V47 wallet auto queue settings ===== */
.wallet-auto-health-v47 {
  margin-bottom: 14px;
  padding: 14px 16px;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  border: 1px solid #cfe0f1;
  border-radius: 14px;
  background: linear-gradient(180deg, #fbfdff, #f2f7fc);
}
.wallet-auto-health-icon-v47 {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  color: #fff;
  background: linear-gradient(145deg, #ffb52e, #f08013);
  font-size: 18px;
}
.wallet-auto-health-v47 strong { color: #203c59; font-size: 13px; }
.wallet-auto-health-v47 p { margin: 3px 0 0; color: #6f8398; font-size: 10px; line-height: 1.5; }
.wallet-auto-health-v47 > span {
  padding: 6px 9px;
  border-radius: 99px;
  color: #95620a;
  background: #fff1c9;
  font-size: 9px;
  font-weight: 900;
}
.wallet-auto-health-v47 > span.is-ready { color: #14744a; background: #ddf7e9; }
.finance-wallet-error-v47 {
  margin: 10px 0;
  padding: 10px 12px;
  border: 1px solid #efc4cb;
  border-radius: 10px;
  color: #a43c4d;
  background: #fff3f5;
  font-size: 11px;
  font-weight: 800;
}
.action-retry { background: #f2a21c !important; color: #fff !important; }
@media (max-width: 720px) {
  .wallet-auto-health-v47 { grid-template-columns: 40px minmax(0, 1fr); }
  .wallet-auto-health-v47 > span { grid-column: 2; justify-self: start; }
}


/* V47 wallet workflow status colors */
.status-queued, .status-claiming, .status-crediting { color:#1769aa !important; background:#e4f2ff !important; }
.status-claimed { color:#6f5510 !important; background:#fff3c9 !important; }
.status-claim_failed, .status-credit_failed { color:#b73749 !important; background:#ffe6ea !important; }
.status-claim_unknown { color:#9a5d0b !important; background:#fff0d6 !important; }


/* ===== V48 secure manual wallet review ===== */
.wallet-manual-dialog-v48 .deposit-action-dialog-body {
  gap: 12px;
}

.wallet-manual-summary-v48 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.wallet-manual-summary-v48 > div {
  min-height: 62px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border: 1px solid #d9e6f3;
  border-radius: 12px;
  background: #f8fbff;
}

.wallet-manual-summary-v48 span {
  color: #74889b;
  font-size: 9px;
  font-weight: 800;
}

.wallet-manual-summary-v48 strong {
  margin-top: 4px;
  overflow-wrap: anywhere;
  color: #213b58;
  font-size: 12px;
}

.wallet-manual-open-link-v48 {
  width: 100%;
  min-height: 46px;
  border: 1px solid #b9dcf4;
  border-radius: 12px;
  color: #0878bc;
  background: #eef8ff;
  font: inherit;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.wallet-manual-open-link-v48 i {
  margin-right: 8px;
}

.wallet-manual-confirm-row-v48 {
  padding: 11px 12px;
  display: flex;
  align-items: flex-start;
  gap: 9px;
  border: 1px solid #bfe5cf;
  border-radius: 12px;
  color: #206b45;
  background: #effbf4;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.45;
}

.wallet-manual-confirm-row-v48 input {
  margin-top: 2px;
  flex: 0 0 auto;
}

.wallet-masked-url-v48 {
  display: block;
  margin-bottom: 8px;
  color: #71869a;
  font-size: 10px;
  overflow-wrap: anywhere;
}

.finance-wallet-open-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

@media (max-width: 620px) {
  .wallet-manual-summary-v48 {
    grid-template-columns: 1fr;
  }
}

/* V66.17.10 — OWNER admin menu ordering */
#adminMenuOrderStartV661710 {
  margin-top: auto;
  color: #bcd1ff;
  border: 1px solid rgba(140, 174, 235, .22);
  background: rgba(47, 70, 108, .48);
}
#adminMenuOrderStartV661710:hover { color: #fff; background: #334f7a; }
#adminMenuOrderStartV661710[hidden] + #adminLogout { margin-top: auto; }
#adminLogout { margin-top: 0; }
.admin-sidebar.is-menu-ordering-v661710 { overflow: hidden; }
.admin-sidebar.is-menu-ordering-v661710 > [data-admin-tab],
.admin-sidebar.is-menu-ordering-v661710 > #adminMenuOrderStartV661710,
.admin-sidebar.is-menu-ordering-v661710 > #adminLogout { display: none !important; }
.admin-menu-order-panel-v661710 {
  min-height: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 11px;
  overflow: hidden;
}
.admin-menu-order-panel-v661710[hidden] { display: none !important; }
.admin-menu-order-panel-v661710 > header { display: flex; align-items: center; gap: 10px; padding: 11px 9px; border-radius: 11px; background: rgba(255,255,255,.055); }
.admin-menu-order-panel-v661710 > header > span { display: grid; place-items: center; flex: 0 0 34px; width: 34px; height: 34px; border-radius: 9px; color: #fff; background: #3974dd; }
.admin-menu-order-panel-v661710 > header strong,.admin-menu-order-panel-v661710 > header small { display: block; }
.admin-menu-order-panel-v661710 > header strong { color: #fff; font-size: 13px; }
.admin-menu-order-panel-v661710 > header small { margin-top: 3px; color: #aebbd0; font-size: 8px; line-height: 1.35; }
.admin-menu-order-list-v661710 { min-height: 0; flex: 1 1 auto; display: grid; align-content: start; gap: 6px; overflow-y: auto; padding-right: 3px; scrollbar-width: thin; }
.admin-menu-order-row-v661710 { display: grid; grid-template-columns: 22px 29px minmax(0,1fr) auto; align-items: center; gap: 7px; min-height: 48px; padding: 5px 6px; border: 1px solid rgba(157,180,219,.13); border-radius: 10px; color: #dbe4f7; background: rgba(255,255,255,.04); cursor: grab; transition: border-color .15s, background .15s, opacity .15s; }
.admin-menu-order-row-v661710:hover { border-color: rgba(117,162,238,.5); background: rgba(71,105,160,.25); }
.admin-menu-order-row-v661710.is-dragging { opacity: .45; }
.admin-menu-order-row-v661710.is-locked { cursor: default; background: rgba(49,105,203,.13); }
.admin-menu-order-handle-v661710 { display: grid; place-items: center; color: #8295b2; font-size: 11px; }
.admin-menu-order-row-v661710.is-locked .admin-menu-order-handle-v661710 { color: #5f8dde; }
.admin-menu-order-icon-v661710 { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; color: #abc5f3; background: rgba(85,124,188,.23); font-size: 10px; }
.admin-menu-order-name-v661710 { min-width: 0; }
.admin-menu-order-name-v661710 strong,.admin-menu-order-name-v661710 small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-menu-order-name-v661710 strong { color: #eef4ff; font-size: 9px; }
.admin-menu-order-name-v661710 small { margin-top: 2px; color: #8798b1; font-size: 7px; }
.admin-menu-order-move-v661710 { display: flex; gap: 3px; }
.admin-sidebar .admin-menu-order-move-v661710 button { display: grid; place-items: center; width: 25px; height: 25px; padding: 0; border: 1px solid rgba(144,170,212,.17); border-radius: 7px; color: #b9c8de; background: rgba(255,255,255,.045); }
.admin-sidebar .admin-menu-order-move-v661710 button:hover:not(:disabled) { color: #fff; background: #3b6096; }
.admin-sidebar .admin-menu-order-move-v661710 button:disabled { opacity: .25; cursor: not-allowed; }
.admin-menu-order-actions-v661710 { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding-top: 9px; border-top: 1px solid rgba(158,177,209,.14); }
.admin-sidebar .admin-menu-order-actions-v661710 button { justify-content: center; min-height: 36px; padding: 8px 7px; border-radius: 8px; font-size: 8px; font-weight: 800; }
.admin-sidebar .admin-menu-order-actions-v661710 .is-reset { grid-column: 1 / -1; color: #b9c8dd; background: rgba(255,255,255,.055); }
.admin-sidebar .admin-menu-order-actions-v661710 .is-cancel { color: #d5deec; background: #34435c; }
.admin-sidebar .admin-menu-order-actions-v661710 .is-save { color: #fff; background: #2472df; }
.admin-sidebar .admin-menu-order-actions-v661710 .is-save:hover { background: #185fc2; }
.admin-sidebar .admin-menu-order-actions-v661710 button:disabled { opacity: .6; cursor: wait; }

@media (max-width: 900px) {
  .admin-menu-order-panel-v661710 { max-height: calc(100vh - 115px); }
}

/* ===== V66.12.2 compact deposit-history wallet envelope ===== */
#financeDetailDialog.finance-detail-dialog[open]:has(.wallet-history-detail-v66122) {
  position: fixed !important;
  inset: 50% auto auto 50% !important;
  width: min(620px, calc(100vw - 28px));
  margin: 0 !important;
  transform: translate(-50%, -50%) !important;
}

#financeDetailDialog:has(.wallet-history-detail-v66122) .finance-detail-header {
  min-height: 70px;
  padding: 14px 18px;
}

#financeDetailDialog:has(.wallet-history-detail-v66122) .finance-dialog-close {
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  color: #fff;
  background: #e54855;
  box-shadow: 0 5px 13px rgba(207, 47, 62, .24);
  cursor: pointer;
}

#financeDetailDialog:has(.wallet-history-detail-v66122) .finance-dialog-close:hover {
  background: #ce3442;
}

.wallet-history-detail-v66122 {
  max-height: calc(90vh - 70px);
  padding: 14px !important;
  gap: 12px !important;
  background: #f4f7fb;
}

.wallet-history-overview-v66122 {
  min-height: 82px;
  padding: 14px 16px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 13px;
  border: 1px solid #dce5ef;
  border-radius: 13px;
  background: #fff;
}

.wallet-history-icon-v66122 {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  color: #946700;
  background: #fff1c7;
  font-size: 21px;
}

.wallet-history-overview-text-v66122 {
  min-width: 0;
}

.wallet-history-overview-text-v66122 > span,
.wallet-history-link-text-v66122 > span,
.wallet-history-receiver-text-v66122 > span {
  display: block;
  color: #7c8b9f;
  font-size: 10px;
  font-weight: 800;
}

.wallet-history-overview-text-v66122 > strong {
  display: block;
  margin-top: 3px;
  color: #172a45;
  font-size: 24px;
  line-height: 1.1;
}

.wallet-history-card-v66122 {
  padding: 12px;
  border: 1px solid #dce5ef;
  border-radius: 13px;
  background: #fff;
}

.wallet-history-grid-v66122 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.wallet-history-grid-v66122 .finance-detail-field {
  min-height: 62px;
  padding: 10px 12px;
  box-shadow: none;
}

.wallet-history-receiver-v66122 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.wallet-history-receiver-text-v66122 {
  min-width: 0;
}

.wallet-history-receiver-text-v66122 > strong,
.wallet-history-link-text-v66122 > strong {
  display: block;
  margin-top: 4px;
  overflow: hidden;
  color: #1a2b45;
  font-size: 13px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wallet-history-link-v66122 {
  min-height: 68px;
  padding: 11px 12px 11px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border: 1px solid #dce5ef;
  border-radius: 13px;
  background: #fff;
}

.wallet-history-link-text-v66122 {
  min-width: 0;
  flex: 1;
}

.wallet-history-open-v66122 {
  min-width: 116px;
  min-height: 42px;
  padding: 0 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  border-radius: 9px;
  color: #fff;
  background: #2f65da;
  box-shadow: 0 7px 16px rgba(47, 101, 218, .2);
  font: inherit;
  font-size: 12px;
  font-weight: 850;
  cursor: pointer;
}

.wallet-history-open-v66122:hover {
  background: #2556c2;
}

@media (max-width: 620px) {
  .wallet-history-grid-v66122 {
    grid-template-columns: 1fr;
  }

  .wallet-history-overview-v66122 {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .wallet-history-overview-v66122 .finance-status {
    grid-column: 1 / -1;
    justify-self: start;
  }

  .wallet-history-link-v66122 {
    align-items: stretch;
    flex-direction: column;
  }

  .wallet-history-open-v66122 {
    width: 100%;
  }
}


/* ===== V49 customer wallet page — same visual system as bank deposit ===== */
.wallet-customer-panel-v49 {
  --wallet-orange: #ff7900;
  --wallet-orange-deep: #eb5f00;
  --wallet-orange-soft: #fff5eb;
  --wallet-blue-border: #c8e4f5;
}

.wallet-account-card-v49 {
  min-height: 98px;
  padding: 13px;
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  border: 1px solid rgba(255,255,255,.94);
  border-radius: 19px;
  color: #fff;
  background:
    radial-gradient(circle at 88% 18%, rgba(255,255,255,.24), transparent 27%),
    linear-gradient(145deg, #ffad2f 0%, #ff7900 54%, #eb5f00 100%);
  box-shadow: 0 12px 25px rgba(226, 96, 0, .24);
}

.wallet-account-logo-v49 {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.9);
  border-radius: 17px;
  color: var(--wallet-orange);
  background: #fff;
  box-shadow: 0 7px 16px rgba(141, 55, 0, .18);
}

.wallet-account-logo-v49 img {
  width: 40px;
  height: 40px;
  object-fit: contain;
}

.wallet-account-logo-v49 i {
  font-size: 23px;
}

.wallet-account-main-v49 {
  min-width: 0;
}

.wallet-account-main-v49 small,
.wallet-account-main-v49 strong,
.wallet-account-main-v49 span {
  display: block;
}

.wallet-account-main-v49 small {
  font-size: 9px;
  font-weight: 800;
  opacity: .9;
}

.wallet-account-main-v49 strong {
  margin-top: 3px;
  overflow: hidden;
  font-size: 17px;
  font-weight: 950;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wallet-account-main-v49 span {
  margin-top: 5px;
  font-size: 9.5px;
  font-weight: 750;
  opacity: .92;
}

.wallet-mode-badge-v49 {
  min-width: 76px;
  padding: 7px 9px;
  border: 1px solid rgba(255,255,255,.65);
  border-radius: 11px;
  color: #fff;
  background: rgba(120, 44, 0, .16);
  font-size: 8.5px;
  font-weight: 900;
  text-align: center;
  white-space: nowrap;
  backdrop-filter: blur(5px);
}

.wallet-mode-badge-v49[data-mode="automatic"] {
  color: #17663f;
  background: rgba(255,255,255,.92);
}

.wallet-guide-bar-v49 {
  min-height: 44px;
  margin: 9px 0 0;
  padding: 9px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 0;
  border-radius: 12px;
  color: #315b77;
  background: linear-gradient(180deg, #f8fcff 0%, #edf7fd 100%);
  box-shadow:
    inset 0 0 0 1px #d3e8f6,
    0 3px 10px rgba(42, 119, 168, .05);
  font-size: 11.5px;
  font-weight: 800;
  line-height: 1.4;
}

.wallet-guide-bar-v49 i {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(145deg, #34a7ee, #1688d4);
  box-shadow: 0 4px 10px rgba(26,139,214,.18);
  font-size: 11px;
}

.wallet-envelope-form-v49 {
  margin-top: 10px;
  padding: 13px;
}

.wallet-steps-v49 {
  margin-bottom: 13px;
  padding: 10px 9px;
  display: grid;
  grid-template-columns: minmax(0,1fr) 14px minmax(0,1fr) 14px minmax(0,1fr);
  align-items: center;
  gap: 4px;
  border: 1px solid #d7e9f5;
  border-radius: 14px;
  background: linear-gradient(180deg, #fbfdff, #f4f9fd);
}

.wallet-steps-v49 > div {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.wallet-steps-v49 b {
  width: 23px;
  height: 23px;
  flex: 0 0 23px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(145deg, #ff9a20, #f06b00);
  box-shadow: 0 4px 9px rgba(229,102,0,.18);
  font-size: 9px;
}

.wallet-steps-v49 span {
  overflow: hidden;
  color: #46667d;
  font-size: 9px;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wallet-steps-v49 > i {
  color: #a9bfce;
  font-size: 8px;
  text-align: center;
}

.wallet-link-field-v49 > small {
  display: block;
  margin-top: 7px;
  color: #7890a2;
  font-size: 9px;
  font-weight: 700;
}

.wallet-link-input-v49 {
  height: 58px;
  padding-left: 13px;
  border-color: #b9dff5;
  background: linear-gradient(180deg, #fff, #f6fbff);
}

.wallet-link-input-v49 > i {
  color: var(--wallet-orange);
  font-size: 16px;
}

.wallet-link-input-v49 input {
  min-width: 0;
  font-size: 11px;
  font-weight: 750;
}

.wallet-link-input-v49 input::placeholder {
  color: #9eb2c1;
  font-size: 10px;
}

.wallet-link-input-v49 button {
  min-width: 68px;
  padding: 0 11px;
  align-self: stretch;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 0;
  color: #fff;
  background: linear-gradient(180deg, #ff9921, #f17100);
  font: inherit;
  font-size: 10px;
  font-weight: 900;
  cursor: pointer;
}

.wallet-security-note-v49 {
  margin-top: 12px;
  padding: 10px 11px;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid #cde7d9;
  border-radius: 12px;
  color: #286247;
  background: #f1fbf5;
}

.wallet-security-note-v49 > i {
  width: 27px;
  height: 27px;
  flex: 0 0 27px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  color: #fff;
  background: linear-gradient(145deg, #36bd7a, #15985d);
  font-size: 12px;
}

.wallet-security-note-v49 strong,
.wallet-security-note-v49 span {
  display: block;
}

.wallet-security-note-v49 strong {
  font-size: 10px;
  font-weight: 900;
}

.wallet-security-note-v49 span {
  margin-top: 2px;
  color: #5c7c69;
  font-size: 9px;
  font-weight: 700;
  line-height: 1.4;
}

.wallet-message-v49 {
  min-height: 19px;
  margin: 9px 2px 0;
}

.wallet-submit-v49 {
  height: 48px;
  margin-top: 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  background: linear-gradient(180deg, #ff9b22, #f17100);
  box-shadow: 0 8px 17px rgba(224, 98, 0, .25);
}

.wallet-submit-v49 > i {
  flex: 0 0 auto;
  margin: 0;
  font-size: 14px;
}

.wallet-submit-v49 > span {
  line-height: 1;
}

.wallet-submit-v49.is-submitting > i {
  animation: walletSubmitPulseV49 .8s ease-in-out infinite alternate;
}

@keyframes walletSubmitPulseV49 {
  from { transform: translateX(-2px); opacity: .65; }
  to { transform: translateX(2px); opacity: 1; }
}

@media (max-width: 380px) {
  .wallet-account-card-v49 {
    grid-template-columns: 50px minmax(0,1fr) auto;
    gap: 9px;
    padding: 11px;
  }

  .wallet-account-logo-v49 {
    width: 50px;
    height: 50px;
  }

  .wallet-account-logo-v49 img {
    width: 37px;
    height: 37px;
  }

  .wallet-account-main-v49 strong {
    font-size: 15px;
  }

  .wallet-mode-badge-v49 {
    min-width: 68px;
    padding: 6px 7px;
    font-size: 7.8px;
  }

  .wallet-guide-bar-v49 {
    font-size: 10.8px;
  }

  .wallet-steps-v49 {
    padding: 9px 6px;
  }

  .wallet-steps-v49 > div {
    gap: 4px;
  }

  .wallet-steps-v49 span {
    font-size: 8px;
  }

  .wallet-link-input-v49 button {
    min-width: 60px;
    padding: 0 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wallet-submit-v49.is-submitting > i {
    animation: none;
  }
}


/* ===== V50 finance security hardening ===== */
.finance-security-health-v50 {
  margin: 12px 0 14px;
  padding: 13px 15px;
  display: grid;
  grid-template-columns: 42px minmax(0,1fr) auto;
  align-items: center;
  gap: 11px;
  border: 1px solid #cfe7da;
  border-radius: 14px;
  background: linear-gradient(180deg,#fbfffd,#f0faf5);
}
.finance-security-health-icon-v50 {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  color: #fff;
  background: linear-gradient(145deg,#31bc79,#148d57);
  box-shadow: 0 7px 16px rgba(17,132,80,.2);
  font-size: 17px;
}
.finance-security-health-v50 strong { color:#1d5038; font-size:12.5px; }
.finance-security-health-v50 p { margin:3px 0 0; color:#64806f; font-size:9.5px; line-height:1.5; }
.finance-security-health-v50 > span {
  padding:6px 9px;
  border-radius:99px;
  color:#176a43;
  background:#dcf6e8;
  font-size:8.5px;
  font-weight:950;
}
.finance-security-health-v50 > span.is-warning { color:#99560d; background:#fff0d2; }
.finance-security-health-v50.is-critical {
  border-color:#f1bcc5;
  background:linear-gradient(180deg,#fffafa,#fff0f2);
}
.finance-security-health-v50.is-critical .finance-security-health-icon-v50 {
  background:linear-gradient(145deg,#ef6677,#c93c50);
}
.finance-security-health-v50.is-critical strong { color:#963448; }

.finance-security-dialog-v50 .deposit-action-dialog-header.security-v50 {
  background: linear-gradient(145deg,#1d4566,#102c45);
}
.finance-security-description-v50 {
  margin:0;
  padding:10px 11px;
  border:1px solid #d5e5f1;
  border-radius:11px;
  color:#3d6079;
  background:#f5faff;
  font-size:10.5px;
  font-weight:750;
  line-height:1.5;
}
.finance-security-dialog-v50 input[type="password"] {
  letter-spacing:.08em;
}

@media (max-width: 620px) {
  .finance-security-health-v50 { grid-template-columns:38px minmax(0,1fr); }
  .finance-security-health-v50 > span { grid-column:2; justify-self:start; }
}

.finance-security-health-actions-v50 {
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:6px;
}
.finance-security-health-actions-v50 > span {
  padding:6px 9px;
  border-radius:99px;
  color:#176a43;
  background:#dcf6e8;
  font-size:8.5px;
  font-weight:950;
}
.finance-security-health-actions-v50 > span.is-warning { color:#99560d; background:#fff0d2; }
.finance-security-health-actions-v50 button {
  min-height:30px;
  padding:0 9px;
  border:1px solid #efc582;
  border-radius:8px;
  color:#95520d;
  background:#fff8eb;
  font:inherit;
  font-size:8.5px;
  font-weight:900;
  cursor:pointer;
}
.finance-security-health-actions-v50 button i { margin-right:5px; }
@media(max-width:620px){
  .finance-security-health-actions-v50 { grid-column:2; align-items:flex-start; }
}


/* ===== V51 risk-based finance security ===== */
.finance-security-health-v50::after {
  content: "งานประจำใช้สิทธิ์ตามตำแหน่ง • PIN ใช้เฉพาะงานเสี่ยงสูง";
  grid-column: 2 / -1;
  margin-top: -5px;
  color: #5f7d92;
  font-size: 9px;
  font-weight: 800;
}

.finance-security-dialog-v50 .finance-security-description-v50 {
  border-left: 3px solid #e68b1e;
  padding-left: 10px;
}

@media (max-width: 720px) {
  .finance-security-health-v50::after {
    grid-column: 1 / -1;
    margin-top: 2px;
  }
}


/* ===== V52 direct wallet transfer + slip ===== */
.deposit-channel-tabs-v52 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.deposit-channel-tabs-v52 button {
  min-width: 0;
  padding-left: 6px;
  padding-right: 6px;
}

.deposit-channel-tabs-v52 button span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wallet-transfer-account-card-v52 {
  min-height: 98px;
  padding: 13px;
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  border: 1px solid rgba(255,255,255,.94);
  border-radius: 19px;
  color: #fff;
  background:
    radial-gradient(circle at 88% 18%, rgba(255,255,255,.24), transparent 27%),
    linear-gradient(145deg, #ffad2f 0%, #ff7900 54%, #eb5f00 100%);
  box-shadow: 0 12px 25px rgba(226,96,0,.24);
}

.wallet-transfer-account-icon-v52 {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 17px;
  background: #fff;
  box-shadow: 0 7px 16px rgba(141,55,0,.18);
}

.wallet-transfer-account-icon-v52 img {
  width: 40px;
  height: 40px;
  object-fit: contain;
}

.wallet-transfer-account-detail-v52 {
  min-width: 0;
}

.wallet-transfer-account-detail-v52 span,
.wallet-transfer-account-detail-v52 strong,
.wallet-transfer-account-detail-v52 small {
  display: block;
}

.wallet-transfer-account-detail-v52 span {
  font-size: 10px;
  font-weight: 800;
  opacity: .92;
}

.wallet-transfer-account-detail-v52 strong {
  margin-top: 3px;
  font-size: 20px;
  font-weight: 950;
  letter-spacing: .4px;
}

.wallet-transfer-account-detail-v52 small {
  margin-top: 4px;
  overflow: hidden;
  font-size: 9px;
  font-weight: 750;
  opacity: .92;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wallet-transfer-account-card-v52 > button {
  min-width: 70px;
  min-height: 37px;
  border: 1px solid rgba(255,255,255,.65);
  border-radius: 11px;
  color: #fff;
  background: rgba(120,44,0,.17);
  font: inherit;
  font-size: 9px;
  font-weight: 900;
  cursor: pointer;
}

.wallet-transfer-choices-v52 {
  margin-bottom: 9px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 7px;
}

.wallet-transfer-choice-v52 {
  min-height: 54px;
  padding: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #d9e7f0;
  border-radius: 13px;
  color: #486479;
  background: #fff;
  text-align: left;
  cursor: pointer;
}

.wallet-transfer-choice-v52.active {
  border-color: #ff9822;
  box-shadow: 0 0 0 3px rgba(255,121,0,.10);
}

.wallet-transfer-choice-v52 img {
  width: 34px;
  height: 34px;
  object-fit: contain;
}

.wallet-transfer-choice-v52 span,
.wallet-transfer-choice-v52 strong,
.wallet-transfer-choice-v52 small {
  min-width: 0;
  display: block;
}

.wallet-transfer-choice-v52 strong {
  overflow: hidden;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wallet-transfer-choice-v52 small {
  margin-top: 3px;
  color: #7c91a1;
  font-size: 9px;
}

.wallet-transfer-notice-v52 {
  margin-top: 9px;
  border-color: #ffd8b4;
  color: #84501f;
  background: #fff8f0;
}

.wallet-transfer-notice-v52 i {
  color: #f47b0b;
}

.wallet-transfer-money-v52 b {
  color: #f47b0b;
}

.wallet-transfer-submit-v52 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  background: linear-gradient(180deg, #ff9b22, #f17100);
  box-shadow: 0 8px 17px rgba(224,98,0,.25);
}

.wallet-transfer-submit-v52.is-submitting {
  opacity: .72;
}

.wallet-transfer-account-v52 .finance-account-icon {
  background: #fff5e9;
}

.wallet-transfer-account-v52 .finance-account-icon img {
  width: 34px;
  height: 34px;
  object-fit: contain;
}

@media (max-width: 420px) {
  .deposit-channel-tabs-v52 button {
    gap: 4px;
    font-size: 8px;
  }

  .deposit-channel-tabs-v52 button i {
    font-size: 13px;
  }

  .wallet-transfer-account-card-v52 {
    grid-template-columns: 48px minmax(0,1fr) auto;
    gap: 8px;
    padding: 11px;
  }

  .wallet-transfer-account-icon-v52 {
    width: 48px;
    height: 48px;
  }

  .wallet-transfer-account-icon-v52 img {
    width: 36px;
    height: 36px;
  }

  .wallet-transfer-account-detail-v52 strong {
    font-size: 17px;
  }

  .wallet-transfer-account-card-v52 > button {
    min-width: 58px;
    padding: 0 7px;
  }
}


/* ===== V53 muted dark TrueMoney orange ===== */
.wallet-customer-panel-v49,
.wallet-transfer-panel-v52 {
  --wallet-orange: #b85a1b;
  --wallet-orange-deep: #74300d;
  --wallet-orange-soft: #f8eee8;
  --wallet-orange-border: #d9a17d;
  --wallet-orange-ink: #683716;
}

/* ซองวอเลท */
.wallet-account-card-v49 {
  border-color: rgba(255, 238, 225, .76);
  background:
    radial-gradient(circle at 87% 15%, rgba(255, 230, 207, .13), transparent 30%),
    linear-gradient(145deg, #ad5d28 0%, #873b13 55%, #622508 100%);
  box-shadow:
    0 12px 24px rgba(78, 30, 7, .22),
    inset 0 1px 0 rgba(255,255,255,.12);
}

.wallet-account-logo-v49 {
  border-color: rgba(255, 232, 214, .78);
  background: #fff9f4;
  box-shadow: 0 7px 15px rgba(65, 24, 5, .20);
}

.wallet-mode-badge-v49 {
  border-color: rgba(255, 232, 214, .38);
  background: rgba(54, 19, 4, .28);
}

.wallet-mode-badge-v49[data-mode="automatic"] {
  color: #476446;
  background: rgba(255, 250, 245, .90);
}

.wallet-steps-v49 {
  border-color: #ddc7b8;
  background: linear-gradient(180deg, #fcfaf8, #f6f0eb);
}

.wallet-steps-v49 b {
  background: linear-gradient(145deg, #b65b1b, #7e310c);
  box-shadow: 0 4px 9px rgba(92, 35, 8, .19);
}

.wallet-link-input-v49 {
  border-color: #d8b9a5;
  background: linear-gradient(180deg, #fffdfb, #f8f2ed);
}

.wallet-link-input-v49 > i {
  color: #9c4714;
}

.wallet-link-input-v49 button {
  background: linear-gradient(180deg, #a85319, #73300d);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10);
}

.wallet-submit-v49 {
  background: linear-gradient(180deg, #a9561d, #71300d);
  box-shadow: 0 8px 17px rgba(77, 28, 6, .24);
}

.wallet-submit-v49:hover,
.wallet-link-input-v49 button:hover {
  filter: brightness(.96);
}

.wallet-guide-bar-v49 {
  color: #4e6170;
  background: linear-gradient(180deg, #fafcfd, #f0f5f7);
  box-shadow:
    inset 0 0 0 1px #d7e2e8,
    0 3px 10px rgba(42, 76, 96, .05);
}

.wallet-guide-bar-v49 i {
  background: linear-gradient(145deg, #4d8fae, #2e6681);
  box-shadow: 0 4px 10px rgba(30, 78, 103, .17);
}

/* ฝากวอเลทแบบโอนเข้าเบอร์ */
.wallet-transfer-account-card-v52 {
  border-color: rgba(255, 238, 225, .76);
  background:
    radial-gradient(circle at 87% 15%, rgba(255, 230, 207, .13), transparent 30%),
    linear-gradient(145deg, #ad5d28 0%, #873b13 55%, #622508 100%);
  box-shadow:
    0 12px 24px rgba(78, 30, 7, .22),
    inset 0 1px 0 rgba(255,255,255,.12);
}

.wallet-transfer-account-icon-v52 {
  background: #fff9f4;
  box-shadow: 0 7px 15px rgba(65, 24, 5, .20);
}

.wallet-transfer-account-card-v52 > button {
  border-color: rgba(255, 232, 214, .38);
  background: rgba(54, 19, 4, .28);
}

.wallet-transfer-choice-v52 {
  border-color: #ded1c9;
  color: #5d514a;
  background: #fffdfb;
}

.wallet-transfer-choice-v52.active {
  border-color: #a85a28;
  box-shadow: 0 0 0 3px rgba(128, 58, 17, .10);
}

.wallet-transfer-notice-v52 {
  border-color: #dcc4b2;
  color: #6c4b35;
  background: #faf5f1;
}

.wallet-transfer-notice-v52 i,
.wallet-transfer-money-v52 b {
  color: #98501c;
}

.wallet-transfer-submit-v52 {
  background: linear-gradient(180deg, #a9561d, #71300d);
  box-shadow: 0 8px 17px rgba(77, 28, 6, .24);
}

.wallet-transfer-submit-v52:hover {
  filter: brightness(.96);
}

/* ลดความสว่างของพื้นการ์ดโดยยังคงเอกลักษณ์ TrueMoney */
.wallet-envelope-form-v49,
.wallet-transfer-panel-v52 .deposit-form {
  background: linear-gradient(180deg, #fffdfb, #faf6f2);
}

@media (prefers-contrast: more) {
  .wallet-account-card-v49,
  .wallet-transfer-account-card-v52 {
    background: linear-gradient(145deg, #9a4c1c, #6e2b0b);
  }
}


/* ===== V54 lobby-game and lottery categories ===== */
.home-body.lobby-v2-body .category-rail.category-grid {
  max-height: calc(100vh - 150px);
  padding-right: 1px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
}

.home-body.lobby-v2-body .category-rail.category-grid::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.home-body.lobby-v2-body .category-rail .category-card.lobby-games i {
  color: #1978b9;
}

.home-body.lobby-v2-body .category-rail .category-card.lottery i {
  color: #b76c13;
}

.home-body.lobby-v2-body .category-rail .category-card.active i {
  color: #fff;
}

.home-body.lobby-v2-body .provider-zone:not(.provider-inline-active) .custom-link-card.provider-tile {
  height: 148px;
  display: grid;
  grid-template-rows: minmax(0, 1fr) 29px;
  overflow: hidden;
  border: 1px solid #cde5f5;
  border-radius: 13px;
  background: #fff;
  box-shadow: 0 7px 15px rgba(14, 99, 158, .10);
}

.home-body.lobby-v2-body .custom-link-card .provider-tile-media {
  min-height: 0;
  height: 100%;
}

.home-body.lobby-v2-body .custom-link-card .provider-tile-media img,
.home-body.lobby-v2-body .custom-link-card .custom-link-placeholder {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.home-body.lobby-v2-body .custom-link-card .custom-link-placeholder {
  display: grid;
  place-items: center;
  color: #fff;
  background:
    radial-gradient(circle at 78% 18%, rgba(255,255,255,.20), transparent 28%),
    linear-gradient(145deg, #238dcc, #075e9c);
  font-size: 20px;
  font-weight: 950;
}

.home-body.lobby-v2-body .custom-link-card .custom-link-label {
  display: flex !important;
  align-items: center;
  justify-content: center;
  padding: 3px 6px;
  overflow: hidden;
  color: #28516e;
  background: linear-gradient(180deg, #fff, #edf7fd);
  font-size: 9px;
  font-weight: 900;
  line-height: 1.15;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ===== V54 admin custom lottery links ===== */
.game-menu-custom-link-form-v54 {
  margin-bottom: 9px;
  padding: 10px;
  display: grid;
  gap: 8px;
  border: 1px solid #c8e0f1;
  border-radius: 10px;
  background: linear-gradient(180deg, #f8fcff, #eef7fd);
}

.game-menu-custom-link-form-v54[hidden] {
  display: none;
}

.game-menu-custom-link-form-v54 > div strong,
.game-menu-custom-link-form-v54 > div small {
  display: block;
}

.game-menu-custom-link-form-v54 > div strong {
  color: #174f77;
  font-size: 12px;
}

.game-menu-custom-link-form-v54 > div small {
  margin-top: 2px;
  color: #71899b;
  font-size: 9px;
}

.game-menu-custom-link-form-v54 label {
  display: grid;
  gap: 4px;
  color: #526a7d;
  font-size: 10px;
  font-weight: 800;
}

.game-menu-custom-link-form-v54 input {
  width: 100%;
  min-height: 36px;
  padding: 7px 9px;
  border: 1px solid #c4d6e2;
  border-radius: 8px;
  color: #17384f;
  background: #fff;
  font: inherit;
  box-sizing: border-box;
}

.game-menu-custom-link-form-v54 button {
  min-height: 36px;
  border: 0;
  border-radius: 8px;
  color: #fff;
  background: linear-gradient(180deg, #258fd1, #0870b3);
  font: inherit;
  font-size: 10px;
  font-weight: 900;
  cursor: pointer;
}

.game-menu-custom-link-form-v54 button:disabled {
  opacity: .55;
  cursor: wait;
}

.game-menu-custom-info-v54 {
  margin: 8px;
  padding: 14px 10px;
  border: 1px dashed #bad6e8;
  border-radius: 9px;
  color: #597489;
  background: #f6fbfe;
  font-size: 10px;
  font-weight: 750;
  line-height: 1.55;
  text-align: center;
}

.game-menu-custom-row-v54 .game-menu-row-text small {
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.game-menu-edit-custom-v54 {
  color: #176b9f;
}

.game-menu-delete-custom-v54 {
  color: #b84646;
}

@media (max-width: 370px) {
  .home-body.lobby-v2-body .category-rail .category-card {
    min-height: 62px;
    height: 62px;
  }

  .home-body.lobby-v2-body .provider-zone:not(.provider-inline-active) .custom-link-card.provider-tile {
    height: 138px;
  }
}


/* ===== V55 fishing category ===== */
.home-body.lobby-v2-body .category-rail .category-card.fishing i {
  color: #127f9f;
}

.home-body.lobby-v2-body .category-rail .category-card.fishing.active i {
  color: #fff;
}

.home-body.lobby-v2-body .fishing-games-grid-v55 {
  align-items: start;
}

.home-body.lobby-v2-body .fishing-game-card-v55 {
  position: relative;
  grid-template-rows: minmax(0, 1fr) 25px 19px;
  min-height: 152px;
  overflow: hidden;
  border: 1px solid #bcdfea;
  background: #fff;
  box-shadow: 0 8px 17px rgba(6, 105, 137, .12);
}

.home-body.lobby-v2-body .fishing-game-card-v55 > span {
  color: #174e66;
  background: linear-gradient(180deg, #fff, #edf8fb);
}

.home-body.lobby-v2-body .fishing-game-card-v55 > small {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
  overflow: hidden;
  color: #567b8c;
  background: #e5f3f7;
  font-size: 7.5px;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-body.lobby-v2-body .fishing-game-placeholder-v55 {
  color: #fff;
  background:
    radial-gradient(circle at 80% 20%, rgba(255,255,255,.22), transparent 26%),
    linear-gradient(145deg, #29a9c8, #08718f);
}

.game-menu-fishing-help-v55 {
  margin-bottom: 9px;
  padding: 11px;
  border: 1px solid #b9dce8;
  border-radius: 10px;
  color: #315e70;
  background: linear-gradient(180deg, #f5fcfe, #eaf6fa);
}

.game-menu-fishing-help-v55[hidden] {
  display: none;
}

.game-menu-fishing-help-v55 strong,
.game-menu-fishing-help-v55 p {
  display: block;
}

.game-menu-fishing-help-v55 strong {
  color: #126d89;
  font-size: 12px;
}

.game-menu-fishing-help-v55 p {
  margin: 5px 0 8px;
  font-size: 9px;
  font-weight: 700;
  line-height: 1.5;
}

.game-menu-fishing-help-v55 > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.game-menu-fishing-help-v55 span {
  font-size: 9px;
  font-weight: 850;
}

.game-menu-fishing-help-v55 button {
  min-height: 30px;
  padding: 5px 9px;
  border: 1px solid #9bc9d8;
  border-radius: 7px;
  color: #176985;
  background: #fff;
  font: inherit;
  font-size: 8.5px;
  font-weight: 900;
  cursor: pointer;
}

.game-menu-fishing-row-v55 .game-menu-row-text small {
  color: #6a8390;
}

.game-menu-fishing-badges-v55 {
  margin-top: 4px;
  display: flex;
  gap: 4px;
}

.game-menu-fishing-badges-v55 span {
  padding: 2px 5px;
  border-radius: 999px;
  font-size: 7px;
  font-weight: 950;
}

.game-menu-fishing-badges-v55 .auto {
  color: #126883;
  background: #dff3f8;
}

.game-menu-fishing-badges-v55 .manual {
  color: #6b4e12;
  background: #fff2cb;
}

.game-menu-fishing-reset-v55 {
  color: #7b681a;
}

@media (max-width: 370px) {
  .home-body.lobby-v2-body .fishing-game-card-v55 {
    min-height: 142px;
  }
}


/* ===== V55.1 lottery LINE single-tab fix ===== */
.home-body.lobby-v2-body a.custom-link-card {
  color: inherit;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

.home-body.lobby-v2-body a.custom-link-card:focus-visible {
  outline: 3px solid rgba(20, 132, 199, .32);
  outline-offset: 2px;
}


/* ===== V55.2 Noto Sans Thai — global typography ===== */
:root {
  --member-page-width: 430px;
  --app-font-family:
    "Noto Sans Thai",
    "Roboto",
    "Leelawadee UI",
    Tahoma,
    Arial,
    sans-serif;
}

html {
  font-family: var(--app-font-family);
  font-size: 16px;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--app-font-family) !important;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.55;
  letter-spacing: 0;
  font-synthesis: none;
}

/* ฟอร์ม ปุ่ม ตาราง และกล่องข้อความทุกหน้า */
button,
input,
select,
textarea,
option,
optgroup,
table,
thead,
tbody,
tfoot,
tr,
th,
td,
dialog,
summary,
[role="button"],
[role="dialog"],
[contenteditable="true"] {
  font-family: var(--app-font-family) !important;
}

/* หัวข้อให้อ่านชัด แต่ยังรักษาขนาดเดิมของแต่ละหน้า */
h1,
h2,
h3,
h4,
h5,
h6,
strong,
b {
  font-family: var(--app-font-family);
  font-weight: 800;
}

p,
label,
span,
small,
a,
li,
dt,
dd,
caption {
  font-family: inherit;
}

input,
select,
textarea {
  font-weight: 550;
  line-height: 1.45;
}

button,
[role="button"] {
  font-weight: 750;
  line-height: 1.35;
}

/* เพิ่มความชัดเจนให้ข้อความงานหลังบ้านและฟอร์ม โดยไม่ขยายจนเลย์เอาต์พัง */
.admin-body,
.login-body,
.deposit-body,
.withdraw-body,
.member-body {
  font-size: 14px;
}

.admin-body input,
.admin-body select,
.admin-body textarea,
.deposit-body input,
.deposit-body select,
.deposit-body textarea,
.withdraw-body input,
.withdraw-body select,
.withdraw-body textarea,
.member-body input,
.member-body select,
.member-body textarea {
  font-size: 13px;
}

/* หน้าล็อบบี้ต้องกระชับกว่า แต่ยังอ่านง่าย */
.home-body {
  font-family: var(--app-font-family) !important;
  font-size: 13px;
}

.home-body .category-card span,
.home-body .quick-menu-item span,
.home-body .bottom-nav span {
  font-weight: 700;
}

.home-body .provider-title,
.home-body .provider-search input,
.home-body .custom-link-label,
.home-body .inline-game-card > span {
  font-family: var(--app-font-family) !important;
}

/* เก็บตัวเลขอ้างอิงและรหัสระบบให้อ่านแยกง่าย */
.finance-reference,
code,
pre,
kbd,
samp {
  font-variant-numeric: tabular-nums;
}

/* ภาษาไทยไม่ควรถูกตัดช่วงสระ/วรรณยุกต์ */
body,
button,
input,
select,
textarea,
th,
td {
  word-break: normal;
  overflow-wrap: anywhere;
}


/* ===== V55.3 Lobby font readability ===== */

/* แถบประกาศ: จากเดิมประมาณ 11px เป็น 14px */
.home-body.lobby-v2-body .lobby-notice.notice-bar {
  min-height: 40px !important;
  height: 40px !important;
  padding: 0 12px !important;
  gap: 9px !important;
}

.home-body.lobby-v2-body .lobby-notice.notice-bar > i {
  font-size: 14px !important;
}

.home-body.lobby-v2-body .notice-marquee span {
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
}

/* เมนูลัดด้านบน */
.home-body.lobby-v2-body .lobby-shortcuts .quick-item span {
  font-size: 10.5px !important;
  font-weight: 750 !important;
  line-height: 1.18 !important;
}

/* แถบหมวดหมู่ด้านซ้าย */
.home-body.lobby-v2-body .category-rail .category-card span {
  max-width: 66px !important;
  font-size: 10.5px !important;
  font-weight: 800 !important;
  line-height: 1.12 !important;
}

/* หัวข้อหมวดเกมและช่องค้นหา */
.home-body.lobby-v2-body .provider-zone-title.section-title span,
.home-body.lobby-v2-body .provider-zone-title .provider-title-main > span {
  font-size: 14px !important;
  font-weight: 800 !important;
}

.home-body.lobby-v2-body .provider-search-box input,
.home-body.lobby-v2-body .provider-search input {
  font-size: 12px !important;
  font-weight: 600 !important;
}

/* ชื่อเกมและรายการที่สร้างเอง */
.home-body.lobby-v2-body .custom-link-label,
.home-body.lobby-v2-body .inline-game-card > span,
.home-body.lobby-v2-body .fishing-game-card-v55 > span {
  font-size: 10.5px !important;
  font-weight: 750 !important;
}

/* เมนูล่าง */


/* หน้าจอเล็กยังอ่านชัด แต่ไม่ให้ข้อความเบียด */
@media (max-width: 370px) {
  .home-body.lobby-v2-body .notice-marquee span {
    font-size: 13px !important;
  }

  .home-body.lobby-v2-body .lobby-shortcuts .quick-item span,
  .home-body.lobby-v2-body .category-rail .category-card span {
    font-size: 10px !important;
  }

  
}


/* ==========================================================
   V56 — My Account read-only page
   ========================================================== */

.account-page-body {
  min-height: 100vh;
  margin: 0;
  color: #244f6b;
  background:
    radial-gradient(circle at 18% 15%, rgba(255,255,255,.68) 0 2px, transparent 3px),
    radial-gradient(circle at 78% 42%, rgba(255,255,255,.55) 0 2px, transparent 3px),
    linear-gradient(180deg, #d9f3ff 0%, #c9edff 52%, #e7f8ff 100%);
  background-size: 31px 31px, 42px 42px, auto;
  font-family: var(--app-font-family);
}

.account-page-app {
  width: 100%;
  max-width: var(--member-page-width);
  min-height: 100vh;
  margin: 0 auto;
  padding-bottom: 98px;
  overflow: hidden;
  background: rgba(221, 246, 255, .70);
  box-shadow: 0 0 40px rgba(5, 105, 168, .18);
}

.account-page-header {
  min-height: 72px;
  padding: max(12px, env(safe-area-inset-top)) 14px 12px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 42px;
  align-items: center;
  gap: 10px;
  color: #fff;
  background:
    radial-gradient(circle at 72% 8%, rgba(255,255,255,.18), transparent 30%),
    linear-gradient(135deg, #27b0ef, #0878cf);
  box-shadow: 0 8px 20px rgba(7, 112, 182, .22);
}

.account-page-back,
.account-page-lock {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 13px;
  color: #fff;
  background: rgba(255,255,255,.15);
  text-decoration: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.20);
}

.account-page-heading {
  min-width: 0;
  text-align: center;
}

.account-page-heading strong,
.account-page-heading span {
  display: block;
}

.account-page-heading strong {
  font-size: 19px;
  font-weight: 900;
  line-height: 1.2;
}

.account-page-heading span {
  margin-top: 3px;
  font-size: 10px;
  font-weight: 650;
  opacity: .92;
}

.account-page-main {
  padding: 14px 12px 24px;
}

.account-profile-hero {
  padding: 16px;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  border: 1px solid rgba(255,255,255,.92);
  border-radius: 22px;
  color: #fff;
  background:
    radial-gradient(circle at 88% 12%, rgba(255,255,255,.22), transparent 30%),
    linear-gradient(145deg, #39baf0, #0b83d5);
  box-shadow: 0 13px 28px rgba(3, 113, 184, .21);
}

.account-profile-avatar {
  position: relative;
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border: 2px solid rgba(255,255,255,.85);
  border-radius: 19px;
  color: #1686ce;
  background: #fff;
  box-shadow: 0 7px 16px rgba(4, 91, 151, .22);
  font-size: 25px;
}

.account-status-dot {
  position: absolute;
  right: -3px;
  bottom: -3px;
  width: 17px;
  height: 17px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: #26be75;
}

.account-profile-main {
  min-width: 0;
}

.account-profile-main > span {
  font-size: 10px;
  font-weight: 700;
  opacity: .90;
}

.account-profile-main h1 {
  margin: 3px 0 5px;
  overflow: hidden;
  font-size: 18px;
  font-weight: 900;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-profile-main p {
  margin: 0;
  font-size: 9px;
  font-weight: 700;
}

.account-profile-main p i {
  margin-right: 4px;
  color: #d9ffec;
}

.account-profile-credit {
  min-width: 77px;
  padding: 8px 9px;
  border: 1px solid rgba(255,255,255,.42);
  border-radius: 13px;
  text-align: right;
  background: rgba(4, 83, 142, .16);
}

.account-profile-credit span,
.account-profile-credit strong,
.account-profile-credit small {
  display: block;
}

.account-profile-credit span,
.account-profile-credit small {
  font-size: 8px;
  font-weight: 700;
  opacity: .90;
}

.account-profile-credit strong {
  margin: 2px 0;
  font-size: 15px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

.account-readonly-notice {
  margin-top: 11px;
  padding: 11px 12px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  border: 1px solid #b9dcec;
  border-radius: 15px;
  color: #35657f;
  background: rgba(247, 253, 255, .92);
  box-shadow: 0 5px 13px rgba(29, 104, 145, .07);
}

.account-readonly-notice > i {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: #fff;
  background: linear-gradient(145deg, #3a9dcc, #176f9f);
}

.account-readonly-notice strong,
.account-readonly-notice span {
  display: block;
}

.account-readonly-notice strong {
  font-size: 11px;
  font-weight: 850;
  line-height: 1.35;
}

.account-readonly-notice span {
  margin-top: 3px;
  color: #628299;
  font-size: 9px;
  font-weight: 650;
  line-height: 1.55;
}

.account-detail-section {
  margin-top: 12px;
  padding: 13px;
  border: 1px solid rgba(177, 217, 238, .92);
  border-radius: 19px;
  background: rgba(255,255,255,.88);
  box-shadow: 0 7px 18px rgba(34, 105, 145, .09);
}

.account-detail-section > header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid #e0edf4;
}

.account-section-icon {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: #fff;
  font-size: 16px;
}

.account-section-icon.login {
  background: linear-gradient(145deg, #369ddb, #1675b6);
}

.account-section-icon.personal {
  background: linear-gradient(145deg, #35b9ae, #18877f);
}

.account-section-icon.bank {
  background: linear-gradient(145deg, #5f8fe5, #3462b9);
}

.account-detail-section h2,
.account-detail-section p {
  margin: 0;
}

.account-detail-section h2 {
  color: #24516d;
  font-size: 14px;
  font-weight: 900;
}

.account-detail-section p {
  margin-top: 2px;
  color: #7790a0;
  font-size: 9px;
  font-weight: 650;
}

.account-detail-list {
  margin-top: 4px;
}

.account-detail-row {
  min-height: 51px;
  padding: 8px 3px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(100px, 48%);
  align-items: center;
  gap: 9px;
  border-bottom: 1px solid #e7f0f5;
}

.account-detail-row:last-child {
  border-bottom: 0;
}

.account-detail-label {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 9px;
  color: #668398;
}

.account-detail-label i {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  color: #2b88bd;
  background: #eaf7fd;
  font-size: 12px;
}

.account-detail-label span {
  font-size: 10px;
  font-weight: 700;
}

.account-detail-row > strong,
.account-password-display {
  min-width: 0;
  overflow: hidden;
  color: #244a62;
  font-size: 11px;
  font-weight: 850;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-password-display strong,
.account-password-display small {
  display: block;
}

.account-password-display strong {
  letter-spacing: 2px;
}

.account-password-display small {
  margin-top: 2px;
  color: #8da0ad;
  font-size: 8px;
  font-weight: 650;
  letter-spacing: 0;
}

.account-bank-card {
  margin-top: 11px;
  padding: 13px;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 25px;
  align-items: center;
  gap: 10px;
  border: 1px solid #c9ddf3;
  border-radius: 15px;
  color: #315472;
  background:
    radial-gradient(circle at 90% 15%, rgba(255,255,255,.72), transparent 28%),
    linear-gradient(145deg, #f5faff, #e6f1fc);
}

.account-bank-logo {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  color: #fff;
  background: linear-gradient(145deg, #6199e8, #3f70c6);
  box-shadow: 0 6px 13px rgba(55, 101, 174, .20);
  font-size: 19px;
}

.account-bank-main {
  min-width: 0;
}

.account-bank-main span,
.account-bank-main strong,
.account-bank-main small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-bank-main span {
  color: #58748a;
  font-size: 9px;
  font-weight: 700;
}

.account-bank-main strong {
  margin: 3px 0;
  color: #244e70;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: .4px;
  font-variant-numeric: tabular-nums;
}

.account-bank-main small {
  color: #7690a2;
  font-size: 9px;
  font-weight: 650;
}

.account-bank-shield {
  color: #54a67a;
  font-size: 18px;
}

.account-support-card {
  margin-top: 12px;
  padding: 12px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  border: 1px solid #bce5cc;
  border-radius: 17px;
  color: #2b6143;
  background: linear-gradient(145deg, #f5fff8, #e9faef);
  box-shadow: 0 7px 16px rgba(38, 137, 76, .08);
}

.account-support-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  color: #fff;
  background: linear-gradient(145deg, #20c46a, #079449);
  font-size: 22px;
}

.account-support-card strong,
.account-support-card span {
  display: block;
}

.account-support-card strong {
  font-size: 11px;
  font-weight: 850;
}

.account-support-card span {
  margin-top: 3px;
  color: #62806c;
  font-size: 8.5px;
  font-weight: 650;
  line-height: 1.4;
}

.account-support-card > a {
  min-width: 58px;
  padding: 9px 10px;
  border-radius: 10px;
  color: #fff;
  background: linear-gradient(180deg, #22bb65, #07984b);
  font-size: 9px;
  font-weight: 850;
  text-align: center;
  text-decoration: none;
}

.account-logout-button {
  width: 100%;
  min-height: 45px;
  margin-top: 13px;
  border: 1px solid #efc9ca;
  border-radius: 14px;
  color: #b64f53;
  background: rgba(255, 247, 247, .94);
  font: inherit;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}

.account-logout-button:disabled {
  opacity: .55;
  cursor: wait;
}

.account-line-floating {
  position: fixed;
  right: max(10px, calc((100vw - var(--member-page-width)) / 2 + 8px));
  top: 46%;
  z-index: 50;
  padding: 10px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  border: 2px solid #fff;
  border-radius: 15px 0 0 15px;
  color: #fff;
  background: linear-gradient(145deg, #20c66b, #07964a);
  box-shadow: 0 8px 18px rgba(7, 130, 65, .28);
  text-decoration: none;
  transform: translateY(-50%);
}

.account-line-floating i {
  font-size: 23px;
}

.account-line-floating span {
  font-size: 7.5px;
  font-weight: 850;
  writing-mode: vertical-rl;
}

.account-bottom-nav {
  position: fixed;
  left: 50%;
  bottom: 0;
  z-index: 40;
  width: min(100%, var(--member-page-width));
  min-height: 71px;
  padding: 7px 8px max(6px, env(safe-area-inset-bottom));
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: end;
  border-radius: 22px 22px 0 0;
  color: #fff;
  background:
    radial-gradient(circle at 50% 0, rgba(255,255,255,.24), transparent 31%),
    linear-gradient(180deg, #41c5f3, #1494dc);
  box-shadow: 0 -8px 22px rgba(3, 107, 171, .20);
  transform: translateX(-50%);
}

.account-bottom-nav > a {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  color: #fff;
  font-size: 10px;
  font-weight: 750;
  text-align: center;
  text-decoration: none;
}

.account-bottom-nav > a > i {
  font-size: 17px;
}

.account-bottom-nav .home {
  transform: translateY(-4px);
}

.account-bottom-logo {
  width: 62px;
  height: 35px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.86);
  border-radius: 15px;
  background: rgba(255,255,255,.22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.20);
}

.account-bottom-logo img {
  width: 45px;
  height: 29px;
  object-fit: contain;
}

.account-page-loading {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  color: #2c6a8e;
  background: linear-gradient(180deg, #d9f3ff, #c8ebff);
}

.account-page-loading[hidden] {
  display: none;
}

.account-page-loading > div {
  padding: 15px 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(255,255,255,.92);
  border-radius: 15px;
  background: rgba(255,255,255,.83);
  box-shadow: 0 10px 25px rgba(22, 111, 160, .13);
  font-size: 11px;
  font-weight: 750;
}

.account-round-button {
  text-decoration: none;
}

@media (max-width: 370px) {
  .account-page-main {
    padding-left: 9px;
    padding-right: 9px;
  }

  .account-profile-hero {
    grid-template-columns: 53px minmax(0, 1fr) auto;
    gap: 9px;
    padding: 13px;
  }

  .account-profile-avatar {
    width: 53px;
    height: 53px;
  }

  .account-profile-main h1 {
    font-size: 16px;
  }

  .account-detail-row {
    grid-template-columns: minmax(0, 1fr) minmax(92px, 47%);
  }

  .account-line-floating {
    right: 4px;
  }
}


/* ==========================================================
   V56.2 — My Account premium minimal redesign
   ========================================================== */

.account-v562-app {
  background:
    radial-gradient(circle at 18% 12%, rgba(255,255,255,.68) 0 2px, transparent 3px),
    radial-gradient(circle at 82% 46%, rgba(255,255,255,.52) 0 2px, transparent 3px),
    linear-gradient(180deg, rgba(220,246,255,.94), rgba(236,250,255,.96));
  background-size: 30px 30px, 42px 42px, auto;
}

.account-v562-header {
  min-height: 70px;
  padding: max(12px, env(safe-area-inset-top)) 14px 12px;
  display: grid;
  grid-template-columns: 42px minmax(0,1fr) 42px;
  align-items: center;
  gap: 10px;
  color: #fff;
  background:
    radial-gradient(circle at 72% 5%, rgba(255,255,255,.20), transparent 30%),
    linear-gradient(135deg, #2db5ef, #0b82d3);
  box-shadow: 0 8px 22px rgba(7, 111, 180, .20);
}

.account-v562-back,
.account-v562-secure {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.38);
  border-radius: 13px;
  color: #fff;
  background: rgba(255,255,255,.16);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.20);
  text-decoration: none;
}

.account-v562-heading {
  text-align: center;
}

.account-v562-heading strong,
.account-v562-heading span {
  display: block;
}

.account-v562-heading strong {
  font-size: 19px;
  font-weight: 700;
  line-height: 1.2;
}

.account-v562-heading span {
  margin-top: 3px;
  font-size: 11px;
  font-weight: 500;
  opacity: .90;
}

.account-v562-main {
  padding: 14px 12px 25px;
}

.account-v562-profile {
  padding: 15px;
  border: 1px solid rgba(255,255,255,.94);
  border-radius: 22px;
  color: #fff;
  background:
    radial-gradient(circle at 87% 15%, rgba(255,255,255,.22), transparent 30%),
    linear-gradient(145deg, #42bdf0, #0a84d7);
  box-shadow:
    0 14px 29px rgba(5, 111, 181, .19),
    inset 0 1px 0 rgba(255,255,255,.15);
}

.account-v562-member {
  display: flex;
  align-items: center;
  gap: 12px;
}

.account-v562-avatar {
  position: relative;
  width: 58px;
  height: 58px;
  flex: 0 0 58px;
  display: grid;
  place-items: center;
  border: 2px solid rgba(255,255,255,.88);
  border-radius: 19px;
  color: #1686cf;
  background: #fff;
  box-shadow: 0 7px 16px rgba(4, 88, 148, .20);
  font-size: 25px;
}

.account-v562-avatar b {
  position: absolute;
  right: -3px;
  bottom: -3px;
  width: 17px;
  height: 17px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: #28bf76;
}

.account-v562-member-text {
  min-width: 0;
}

.account-v562-member-text > span {
  font-size: 11px;
  font-weight: 500;
  opacity: .88;
}

.account-v562-member-text h1 {
  margin: 3px 0 5px;
  overflow: hidden;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-v562-member-text p {
  margin: 0;
  font-size: 11px;
  font-weight: 500;
}

.account-v562-member-text p i {
  margin-right: 4px;
  color: #d8ffeb;
}

.account-v562-wallet-bar {
  margin-top: 14px;
  display: grid;
  grid-template-columns: minmax(104px,.72fr) minmax(0,1.28fr);
  gap: 9px;
}

.account-v562-wallet-pill {
  min-height: 53px;
  padding: 8px 10px;
  display: flex;
  align-items: center;
  gap: 9px;
  border: 1px solid rgba(255,255,255,.75);
  border-radius: 15px;
  color: #214d68;
  background: rgba(255,255,255,.94);
  box-shadow: 0 5px 14px rgba(0,70,119,.14);
}

.account-v562-wallet-pill > i {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  font-size: 15px;
}

.account-v562-wallet-pill.diamond > i {
  color: #1595d8;
  background: #e6f7ff;
}

.account-v562-wallet-pill.credit > i {
  color: #c78b00;
  background: #fff5d8;
}

.account-v562-wallet-pill > div {
  min-width: 0;
}

.account-v562-wallet-pill span,
.account-v562-wallet-pill strong {
  display: block;
}

.account-v562-wallet-pill span {
  color: #6f8999;
  font-size: 10px;
  font-weight: 500;
}

.account-v562-wallet-pill strong {
  margin-top: 2px;
  overflow: hidden;
  color: #234e69;
  font-size: 15px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-v562-wallet-pill > button {
  width: 31px;
  height: 31px;
  margin-left: auto;
  flex: 0 0 31px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 10px;
  color: #fff;
  background: linear-gradient(145deg, #268fda, #0872bf);
  cursor: pointer;
}

.account-v562-wallet-pill > button.loading i {
  animation: accountV562Spin .75s linear infinite;
}

@keyframes accountV562Spin {
  to { transform: rotate(360deg); }
}

.account-v562-section {
  margin-top: 12px;
  padding: 14px;
  border: 1px solid rgba(179,217,237,.92);
  border-radius: 19px;
  background: rgba(255,255,255,.91);
  box-shadow: 0 7px 18px rgba(32,101,140,.08);
}

.account-v562-section-heading {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 11px;
  border-bottom: 1px solid #e3eef4;
}

.account-v562-heading-icon {
  width: 39px;
  height: 39px;
  flex: 0 0 39px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: #fff;
  font-size: 16px;
}

.account-v562-heading-icon.login {
  background: linear-gradient(145deg, #3d9dd7, #1a76b0);
}

.account-v562-heading-icon.personal {
  background: linear-gradient(145deg, #38b7ad, #20867f);
}

.account-v562-heading-icon.bank {
  background: linear-gradient(145deg, #6594e2, #3b67b8);
}

.account-v562-section-heading h2,
.account-v562-section-heading p {
  margin: 0;
}

.account-v562-section-heading h2 {
  color: #244f69;
  font-size: 15px;
  font-weight: 700;
}

.account-v562-section-heading p {
  margin-top: 2px;
  color: #7a92a1;
  font-size: 11px;
  font-weight: 400;
}

.account-v562-login-list {
  margin-top: 5px;
}

.account-v562-login-list article {
  min-height: 58px;
  padding: 10px 3px;
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(110px,48%);
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid #e8f0f4;
}

.account-v562-login-list article:last-child {
  border-bottom: 0;
}

.account-v562-login-list article > span {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #668296;
  font-size: 12px;
  font-weight: 500;
}

.account-v562-login-list article > span i {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  color: #2787bb;
  background: #eaf7fd;
}

.account-v562-login-list article > strong,
.account-v562-password {
  min-width: 0;
  color: #244a62;
  font-size: 13px;
  font-weight: 600;
  text-align: right;
}

.account-v562-password strong,
.account-v562-password small {
  display: block;
}

.account-v562-password strong {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 2px;
}

.account-v562-password small {
  margin-top: 2px;
  color: #91a2ad;
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0;
}

.account-v562-info-grid {
  margin-top: 11px;
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 9px;
}

.account-v562-info-item {
  min-width: 0;
  min-height: 74px;
  padding: 11px;
  display: flex;
  align-items: center;
  gap: 9px;
  border: 1px solid #dfebf2;
  border-radius: 14px;
  background: linear-gradient(145deg, #fbfdff, #f3f8fb);
}

.account-v562-info-icon {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  font-size: 14px;
}

.account-v562-info-icon.name {
  color: #247aa9;
  background: #e7f5fc;
}

.account-v562-info-icon.phone {
  color: #207a6e;
  background: #e5f7f3;
}

.account-v562-info-icon.line {
  color: #0b9f4b;
  background: #e7f8ed;
}

.account-v562-info-icon.date {
  color: #7a5aaf;
  background: #f0eafa;
}

.account-v562-info-item > div {
  min-width: 0;
}

.account-v562-info-item small,
.account-v562-info-item strong {
  display: block;
}

.account-v562-info-item small {
  color: #7a92a2;
  font-size: 10px;
  font-weight: 400;
}

.account-v562-info-item strong {
  margin-top: 4px;
  overflow: hidden;
  color: #294e65;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-v562-bank-card {
  --account-bank-color: #3e88bd;
  --account-bank-strong: #2b648d;
  --account-bank-soft: #eaf5fb;
  margin-top: 12px;
  padding: 14px;
  display: grid;
  grid-template-columns: 55px minmax(0,1fr) 32px;
  align-items: center;
  gap: 12px;
  border: 1px solid color-mix(in srgb, var(--account-bank-color) 24%, white);
  border-left: 5px solid var(--account-bank-color);
  border-radius: 16px;
  color: var(--account-bank-strong);
  background:
    radial-gradient(circle at 90% 15%, rgba(255,255,255,.78), transparent 29%),
    linear-gradient(145deg, var(--account-bank-soft), #fff 74%);
  box-shadow: 0 7px 17px color-mix(in srgb, var(--account-bank-color) 12%, transparent);
}

.account-v562-bank-logo {
  width: 55px;
  height: 55px;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--account-bank-color) 20%, white);
  border-radius: 15px;
  color: var(--account-bank-color);
  background: #fff;
  box-shadow: 0 6px 14px color-mix(in srgb, var(--account-bank-color) 16%, transparent);
}

.account-v562-bank-logo img {
  width: 40px;
  height: 40px;
  object-fit: contain;
}

.account-v562-bank-logo i {
  font-size: 21px;
}

.account-v562-bank-main {
  min-width: 0;
}

.account-v562-bank-main span,
.account-v562-bank-main strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-v562-bank-main span {
  color: var(--account-bank-strong);
  font-size: 12px;
  font-weight: 500;
}

.account-v562-bank-main strong {
  margin-top: 5px;
  color: var(--account-bank-strong);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .5px;
  font-variant-numeric: tabular-nums;
}

.account-v562-bank-status {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: var(--account-bank-color);
  background: rgba(255,255,255,.76);
}

.account-v562-logout {
  width: 100%;
  min-height: 46px;
  margin-top: 13px;
  border: 1px solid #eccdce;
  border-radius: 14px;
  color: #a95155;
  background: rgba(255,248,248,.95);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.account-v562-floating-tools {
  position: fixed;
  z-index: 76;
  right: max(14px, calc((100vw - var(--member-page-width)) / 2 + 14px));
  bottom: calc(82px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  pointer-events: none;
}

.account-v562-line-button {
  position: relative !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  width: 48px !important;
  height: 48px !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 50% !important;
  transform: none !important;
  pointer-events: auto;
}

.account-v562-line-button > i {
  font-size: 24px !important;
}

.account-v562-line-button[hidden] {
  display: none !important;
}

@media (max-width: 390px) {
  .account-v562-main {
    padding-left: 9px;
    padding-right: 9px;
  }

  .account-v562-profile,
  .account-v562-section {
    padding: 12px;
  }

  .account-v562-wallet-bar {
    grid-template-columns: 106px minmax(0,1fr);
    gap: 7px;
  }

  .account-v562-wallet-pill {
    padding-left: 8px;
    padding-right: 8px;
  }

  .account-v562-wallet-pill > i {
    width: 27px;
    height: 27px;
    flex-basis: 27px;
  }

  .account-v562-wallet-pill strong {
    font-size: 13px;
  }

  .account-v562-info-grid {
    gap: 7px;
  }

  .account-v562-info-item {
    min-height: 69px;
    padding: 9px;
    gap: 7px;
  }

  .account-v562-info-icon {
    width: 31px;
    height: 31px;
    flex-basis: 31px;
  }

  .account-v562-info-item strong {
    font-size: 11px;
  }

  .account-v562-floating-tools {
    right: 11px;
  }
}


/* ==========================================================
   V56.3 — remove account hero and add user phone
   ========================================================== */

.account-v562-main {
  padding-top: 15px;
}

.account-v562-main > .account-v562-section:first-child {
  margin-top: 0;
}

.account-v562-login-list article {
  min-height: 60px;
}

.account-v562-login-list article > strong {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .1px;
  font-variant-numeric: tabular-nums;
}

.account-v562-login-list article > span {
  font-size: 13px;
}

.account-v562-login-list article > span i {
  width: 32px;
  height: 32px;
  font-size: 13px;
}

@media (max-width: 390px) {
  .account-v562-main {
    padding-top: 11px;
  }

  .account-v562-login-list article {
    grid-template-columns: minmax(0,1fr) minmax(118px,48%);
  }
}


/* ==========================================================
   V56.4 — Center wallet popup, clean menu icons,
   and desktop horizontal quick-menu scrolling
   ========================================================== */

/* 1) Popup กระเป๋าอยู่ตรงกลางหน้าจอทุกขนาด */
.home-body.lobby-v2-body .wallet-overlay {
  padding:
    max(12px, env(safe-area-inset-top))
    12px
    max(12px, env(safe-area-inset-bottom)) !important;
  align-items: center !important;
  justify-content: center !important;
}

.home-body.lobby-v2-body .wallet-modal {
  width: min(100%, 420px) !important;
  max-height: min(88dvh, 690px) !important;
  margin: auto !important;
  transform: translateY(0) scale(.96) !important;
}

.home-body.lobby-v2-body .wallet-overlay.show .wallet-modal {
  transform: translateY(0) scale(1) !important;
}

.home-body.lobby-v2-body .wallet-modal-body {
  max-height: calc(min(88dvh, 690px) - 64px) !important;
}

/* 2) เอาพื้นหลังสีเหลี่ยมของไอคอนเมนูกระเป๋าออก */
.home-body.lobby-v2-body .wallet-menu-icon,
.home-body.lobby-v2-body .wallet-menu-item:nth-child(4n/**/+2) .wallet-menu-icon,
.home-body.lobby-v2-body .wallet-menu-item:nth-child(4n/**/+3) .wallet-menu-icon,
.home-body.lobby-v2-body .wallet-menu-item:nth-child(4n) .wallet-menu-icon {
  width: 44px !important;
  height: 40px !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: #1685c7 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.home-body.lobby-v2-body .wallet-menu-icon.has-custom-image {
  width: 48px !important;
  height: 42px !important;
}

.home-body.lobby-v2-body .wallet-menu-custom-icon {
  width: 44px !important;
  height: 40px !important;
  display: block !important;
  object-fit: contain !important;
  filter: none !important;
}

.home-body.lobby-v2-body .wallet-menu-icon > i {
  font-size: 25px !important;
}

/* การ์ดเมนูยังเป็นพื้นที่กด แต่ลดสีพื้นและเงาให้รูปเด่นขึ้น */
.home-body.lobby-v2-body .wallet-menu-item {
  border-color: rgba(160, 209, 236, .72) !important;
  background: rgba(246, 252, 255, .78) !important;
  box-shadow: none !important;
}

/* 3) เมนูสไลด์ลากด้วยเมาส์และใช้ล้อเมาส์เลื่อนได้ */
.home-body.lobby-v2-body .lobby-shortcuts.quick-menu {
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-x;
  scroll-behavior: smooth;
}

.home-body.lobby-v2-body .lobby-shortcuts.quick-menu.is-mouse-dragging {
  cursor: grabbing;
  scroll-behavior: auto;
}

.home-body.lobby-v2-body .lobby-shortcuts.quick-menu.is-mouse-dragging .quick-item {
  pointer-events: none;
}

@media (max-width: 699px) {
  .home-body.lobby-v2-body .wallet-modal {
    width: min(100%, 390px) !important;
  }
}


/* ==========================================================
   V56.5 — Professional quick-menu carousel
   - Desktop arrows
   - Smooth wheel animation
   - Reliable menu clicks
   ========================================================== */

.home-body.lobby-v2-body .quick-menu-carousel-v565 {
  position: relative;
}

/* ยกเลิกการลากด้วยเมาส์จาก V56.4 เพื่อไม่ให้ชนกับการคลิก */
.home-body.lobby-v2-body .lobby-shortcuts.quick-menu,
.home-body.lobby-v2-body .lobby-shortcuts.quick-menu.is-mouse-dragging {
  cursor: default !important;
  user-select: auto !important;
  -webkit-user-select: auto !important;
  touch-action: pan-x !important;
}

.home-body.lobby-v2-body .lobby-shortcuts.quick-menu .quick-item,
.home-body.lobby-v2-body .lobby-shortcuts.quick-menu.is-mouse-dragging .quick-item {
  pointer-events: auto !important;
  cursor: pointer;
}

.quick-menu-nav-v565 {
  display: none;
}

@media (min-width: 700px) and (pointer: fine) {
  .home-body.lobby-v2-body .quick-menu-carousel-v565 {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 6px;
    padding: 6px !important;
  }

  .home-body.lobby-v2-body .quick-menu-carousel-v565 .lobby-shortcuts.quick-menu {
    min-width: 0;
    scroll-snap-type: none !important;
    scroll-behavior: auto !important;
    overscroll-behavior-inline: contain;
  }

  .home-body.lobby-v2-body .quick-menu-carousel-v565 .quick-menu-nav-v565 {
    width: 31px;
    height: 48px;
    display: grid;
    place-items: center;
    border: 1px solid #c6e1f2;
    border-radius: 10px;
    color: #147fbe;
    background:
      linear-gradient(180deg, rgba(255,255,255,.98), rgba(231,246,255,.96));
    box-shadow:
      0 4px 10px rgba(19, 103, 157, .10),
      inset 0 1px 0 rgba(255,255,255,.85);
    font: inherit;
    font-size: 13px;
    cursor: pointer;
    transition:
      opacity .18s ease,
      transform .18s ease,
      border-color .18s ease,
      box-shadow .18s ease;
  }

  .home-body.lobby-v2-body .quick-menu-carousel-v565 .quick-menu-nav-v565[hidden] {
    display: none !important;
  }

  .home-body.lobby-v2-body .quick-menu-carousel-v565 .quick-menu-nav-v565:hover:not(:disabled) {
    border-color: #89c7e9;
    box-shadow:
      0 6px 14px rgba(19, 103, 157, .16),
      inset 0 1px 0 rgba(255,255,255,.92);
    transform: translateY(-1px);
  }

  .home-body.lobby-v2-body .quick-menu-carousel-v565 .quick-menu-nav-v565:active:not(:disabled) {
    transform: translateY(0) scale(.96);
  }

  .home-body.lobby-v2-body .quick-menu-carousel-v565 .quick-menu-nav-v565:disabled {
    opacity: .28;
    cursor: default;
    box-shadow: none;
  }

  .home-body.lobby-v2-body .quick-menu-carousel-v565 .quick-item {
    transition:
      transform .16s ease,
      border-color .16s ease,
      box-shadow .16s ease;
  }

  .home-body.lobby-v2-body .quick-menu-carousel-v565 .quick-item:hover {
    border-color: #9dd1ec;
    box-shadow: 0 6px 14px rgba(16, 103, 159, .13);
    transform: translateY(-1px);
  }

  .home-body.lobby-v2-body .quick-menu-carousel-v565 .quick-item:active {
    transform: translateY(0) scale(.98);
  }
}

@media (max-width: 699px), (pointer: coarse) {
  .home-body.lobby-v2-body .quick-menu-carousel-v565 {
    display: block;
  }

  .home-body.lobby-v2-body .quick-menu-nav-v565 {
    display: none !important;
  }

  .home-body.lobby-v2-body .quick-menu-carousel-v565 .lobby-shortcuts.quick-menu {
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
  }
}


/* ==========================================================
   V57 — Member transaction history
   ========================================================== */

.history-page-body {
  min-height: 100vh;
  margin: 0;
  color: #294f67;
  background:
    radial-gradient(circle at 18% 12%, rgba(255,255,255,.68) 0 2px, transparent 3px),
    radial-gradient(circle at 82% 46%, rgba(255,255,255,.50) 0 2px, transparent 3px),
    linear-gradient(180deg, #d8f3ff 0%, #c9ecff 54%, #e8f8ff 100%);
  background-size: 31px 31px, 43px 43px, auto;
  font-family: var(--app-font-family);
}

.history-page-app {
  width: 100%;
  max-width: var(--member-page-width);
  min-height: 100vh;
  margin: 0 auto;
  padding-bottom: 98px;
  overflow: hidden;
  background: rgba(222,247,255,.72);
  box-shadow: 0 0 38px rgba(8,103,165,.17);
}

.history-page-header {
  min-height: 70px;
  padding: max(12px, env(safe-area-inset-top)) 14px 12px;
  display: grid;
  grid-template-columns: 42px minmax(0,1fr) 42px;
  align-items: center;
  gap: 10px;
  color: #fff;
  background:
    radial-gradient(circle at 72% 5%, rgba(255,255,255,.20), transparent 30%),
    linear-gradient(135deg, #2db5ef, #0b82d3);
  box-shadow: 0 8px 22px rgba(7,111,180,.20);
}

.history-page-back,
.history-page-refresh {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.38);
  border-radius: 13px;
  color: #fff;
  background: rgba(255,255,255,.16);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.20);
  font: inherit;
  text-decoration: none;
  cursor: pointer;
}

.history-page-refresh:disabled {
  opacity: .62;
  cursor: wait;
}

.history-page-refresh.loading i {
  animation: historySpin .75s linear infinite;
}

@keyframes historySpin {
  to { transform: rotate(360deg); }
}

.history-page-heading {
  text-align: center;
}

.history-page-heading strong,
.history-page-heading span {
  display: block;
}

.history-page-heading strong {
  font-size: 19px;
  font-weight: 700;
  line-height: 1.2;
}

.history-page-heading span {
  margin-top: 3px;
  font-size: 11px;
  font-weight: 500;
  opacity: .90;
}

.history-page-main {
  padding: 13px 11px 24px;
}

.history-summary-card {
  padding: 13px;
  display: flex;
  align-items: center;
  gap: 11px;
  border: 1px solid rgba(255,255,255,.92);
  border-radius: 17px;
  color: #fff;
  background:
    radial-gradient(circle at 88% 12%, rgba(255,255,255,.18), transparent 28%),
    linear-gradient(145deg, #41b8ec, #1183cc);
  box-shadow: 0 10px 22px rgba(7,105,170,.17);
}

.history-summary-icon {
  width: 43px;
  height: 43px;
  flex: 0 0 43px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.45);
  border-radius: 13px;
  background: rgba(255,255,255,.17);
  font-size: 18px;
}

.history-summary-card strong,
.history-summary-card span {
  display: block;
}

.history-summary-card strong {
  font-size: 14px;
  font-weight: 650;
}

.history-summary-card span {
  margin-top: 3px;
  font-size: 10px;
  font-weight: 450;
  opacity: .91;
}

.history-tabs {
  margin-top: 11px;
  padding: 5px;
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 5px;
  border: 1px solid #b7dced;
  border-radius: 16px;
  background: rgba(238,249,255,.92);
  box-shadow: 0 6px 15px rgba(24,105,148,.08);
}

.history-tabs button {
  min-width: 0;
  min-height: 57px;
  padding: 6px 4px;
  display: grid;
  grid-template-columns: 22px minmax(0,1fr) auto;
  align-items: center;
  gap: 4px;
  border: 0;
  border-radius: 12px;
  color: #4c7187;
  background: transparent;
  font: inherit;
  cursor: pointer;
  transition: background .16s ease, color .16s ease, box-shadow .16s ease;
}

.history-tabs button i {
  font-size: 15px;
}

.history-tabs button span {
  overflow: hidden;
  font-size: 11px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.history-tabs button b {
  min-width: 20px;
  padding: 3px 5px;
  border-radius: 999px;
  color: #4d7690;
  background: rgba(255,255,255,.80);
  font-size: 8px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}

.history-tabs button.active {
  color: #fff;
  background: linear-gradient(180deg, #2faeef, #1282cf);
  box-shadow: 0 5px 12px rgba(6,108,176,.21);
}

.history-tabs button.active b {
  color: #147bb7;
  background: #fff;
}

.history-content-card {
  margin-top: 11px;
  padding: 12px 10px 14px;
  border: 1px solid rgba(178,216,236,.94);
  border-radius: 19px;
  background: rgba(255,255,255,.91);
  box-shadow: 0 8px 20px rgba(30,99,139,.09);
}

.history-list-heading {
  min-height: 48px;
  padding-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-bottom: 1px solid #e1edf3;
}

.history-list-heading h1,
.history-list-heading p {
  margin: 0;
}

.history-list-heading h1 {
  color: #28526a;
  font-size: 15px;
  font-weight: 650;
}

.history-list-heading p {
  margin-top: 3px;
  color: #7a94a4;
  font-size: 10px;
  font-weight: 450;
}

.history-list-heading > span {
  flex: 0 0 auto;
  padding: 6px 8px;
  border-radius: 9px;
  color: #4b7188;
  background: #edf7fc;
  font-size: 9px;
  font-weight: 550;
  font-variant-numeric: tabular-nums;
}

.history-list {
  margin-top: 7px;
  display: block;
}

.history-loading-list {
  padding-top: 7px;
}

.history-loading-list article {
  height: 86px;
  margin-bottom: 7px;
  border-radius: 13px;
  background:
    linear-gradient(90deg, #edf4f7 20%, #f7fafb 38%, #edf4f7 58%);
  background-size: 220% 100%;
  animation: historySkeleton 1.2s linear infinite;
}

@keyframes historySkeleton {
  to { background-position-x: -220%; }
}

.history-empty-state,
.history-error-state {
  padding: 34px 16px 26px;
  text-align: center;
}

.history-empty-state > span,
.history-error-state > span {
  width: 58px;
  height: 58px;
  margin: 0 auto 11px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  color: #2a8fc2;
  background: #e8f6fc;
  font-size: 23px;
}

.history-error-state > span {
  color: #bf5c60;
  background: #fceced;
}

.history-empty-state strong,
.history-error-state strong,
.history-empty-state p,
.history-error-state p {
  display: block;
  margin: 0;
}

.history-empty-state strong,
.history-error-state strong {
  color: #41677c;
  font-size: 13px;
  font-weight: 600;
}

.history-empty-state p,
.history-error-state p {
  margin-top: 5px;
  color: #849aa7;
  font-size: 10px;
  font-weight: 450;
}

.history-error-state button {
  min-width: 86px;
  min-height: 35px;
  margin-top: 12px;
  border: 0;
  border-radius: 10px;
  color: #fff;
  background: linear-gradient(180deg, #2da8e3, #157dbb);
  font: inherit;
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
}

.history-pagination {
  margin-top: 12px;
  padding-top: 12px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 5px;
  border-top: 1px solid #e3edf2;
}

.history-pagination button {
  min-width: 31px;
  height: 31px;
  padding: 0 6px;
  display: grid;
  place-items: center;
  border: 1px solid #c8dde9;
  border-radius: 9px;
  color: #4e7287;
  background: #fff;
  font: inherit;
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
}

.history-pagination button.active {
  border-color: #168bd1;
  color: #fff;
  background: linear-gradient(180deg, #2daaf0, #1382cf);
  box-shadow: 0 4px 9px rgba(9,106,172,.20);
}

.history-pagination button:disabled {
  opacity: .34;
  cursor: default;
}

.history-page-arrow {
  color: #167ab3 !important;
  background: #edf8fd !important;
}

.history-bottom-nav > a.active {
  color: #fff;
}

.history-bottom-nav > a.active > i {
  width: 31px;
  height: 25px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: rgba(255,255,255,.22);
}

@media (max-width: 390px) {
  .history-page-main {
    padding-left: 8px;
    padding-right: 8px;
  }

  .history-tabs {
    gap: 3px;
  }

  .history-tabs button {
    grid-template-columns: 18px minmax(0,1fr) auto;
    padding-left: 3px;
    padding-right: 3px;
  }

  .history-tabs button span {
    font-size: 10px;
  }

 .history-content-card {
    padding-left: 10px;
    padding-right: 10px;
  }


  .history-pagination {
    gap: 4px;
  }

  .history-pagination button {
    min-width: 29px;
    height: 29px;
  }
}

/* ==========================================================
   V57.4 — Final transaction rows (cleaned; no legacy selector collision)
   ========================================================== */
.history-recent-item {
  width: 100%;
  min-height: 72px;
  padding: 7px 0;
  box-sizing: border-box;
  border: 0;
  border-radius: 0;
  overflow: visible;
}

.history-recent-item + .history-recent-item {
  border-top: 1px solid #e2f0f8;
}

.history-recent-item.status-completed {
  background: #e1f7eb;
}

.history-recent-item.status-pending {
  background: #fff7df;
}

.history-recent-item.status-reviewing {
  background: #eef7ff;
}

.history-recent-item.status-rejected,
.history-recent-item.status-provider_failed {
  background: #fff0f2;
}

.history-recent-item:first-child {
  border-radius: 12px 12px 0 0;
}

.history-recent-item:last-child {
  border-radius: 0 0 12px 12px;
}

.history-recent-item:only-child {
  border-radius: 12px;
}

.history-recent-item > .history-recent-detail {
  min-width: 0;
  display: grid;
  align-items: initial;
  justify-content: initial;
  gap: 2px;
}

.history-recent-item .history-recent-icon {
  flex: none;
}

.history-recent-item .history-recent-amount {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.history-recent-item-withdraw .history-recent-amount {
  color: #b6671d;
}

.history-recent-item-bonus .history-recent-amount {
  color: #704cad;
}

.history-recent-item > .history-recent-status {
  min-width: 0;
  max-width: 92px;
  padding: 5px 8px;
  overflow: hidden;
  border-radius: 999px;
  font-size: 8.5px;
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.history-recent-item.status-completed > .history-recent-status {
  color: #258054;
  background: #dcf7e9;
}

.history-recent-item.status-pending > .history-recent-status {
  color: #b27115;
  background: #fff2ce;
}

.history-recent-item.status-reviewing > .history-recent-status {
  color: #276db3;
  background: #e1effe;
}

.history-recent-item.status-rejected > .history-recent-status,
.history-recent-item.status-provider_failed > .history-recent-status {
  color: #c13d4d;
  background: #ffe4e8;
}

@media (max-width: 380px) {
 .history-content-card {
    padding-left: 10px;
    padding-right: 10px;
  }

  .history-recent-item {
    grid-template-columns: 36px minmax(0, 1fr) auto;
    gap: 8px;
  }

  .history-recent-item > .history-recent-status {
    max-width: 82px;
    padding-left: 6px;
    padding-right: 6px;
  }
}

/* ==========================================================
   V58 CONTACT PAGE + ADMIN CONTACT SETTINGS
   ========================================================== */
.contact-page-body {
  margin: 0;
  min-height: 100vh;
  color: #103b5d;
  background:
    radial-gradient(circle at 12px 12px, rgba(255,255,255,.52) 0 2px, transparent 2.4px) 0 0/22px 22px,
    linear-gradient(180deg, #c8edff 0%, #e9f8ff 48%, #dff4ff 100%);
  font-family: "Noto Sans Thai", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.contact-page-app {
  width: 100%;
  max-width: var(--member-page-width);
  min-height: 100vh;
  margin: 0 auto;
  padding-bottom: calc(92px + env(safe-area-inset-bottom));
  background: rgba(231,247,255,.72);
  box-shadow: 0 0 34px rgba(17,111,170,.16);
}

.contact-page-header {
  position: sticky;
  top: 0;
  z-index: 30;
  min-height: 62px;
  display: grid;
  grid-template-columns: 42px 1fr 42px;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  color: #fff;
  background: linear-gradient(180deg, #35b9f7 0%, #148fdf 100%);
  box-shadow: 0 7px 18px rgba(12,119,191,.18);
}

.contact-page-back,
.contact-page-refresh {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.58);
  border-radius: 12px;
  color: #fff;
  background: rgba(255,255,255,.12);
  text-decoration: none;
  font-size: 16px;
}

.contact-page-refresh { cursor: pointer; }
.contact-page-refresh.spinning i { animation: spin .75s linear infinite; }

.contact-page-heading { min-width: 0; text-align: center; }
.contact-page-heading strong { display: block; font-size: 18px; line-height: 1.15; }
.contact-page-heading span { display: block; margin-top: 2px; font-size: 10px; font-weight: 700; opacity: .9; }

.contact-page-main { padding: 14px 12px 22px; }

.contact-hero-card {
  display: grid;
  grid-template-columns: 58px 1fr;
  align-items: center;
  gap: 13px;
  padding: 18px;
  border: 1px solid rgba(255,255,255,.8);
  border-radius: 22px;
  color: #fff;
  background: linear-gradient(145deg, #55c9fa 0%, #1496e6 62%, #0b7bd3 100%);
  box-shadow: 0 13px 28px rgba(10,118,190,.22);
}

.contact-hero-icon {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.65);
  border-radius: 18px;
  background: rgba(255,255,255,.16);
  font-size: 25px;
}

.contact-hero-eyebrow { font-size: 9px; font-weight: 900; letter-spacing: .8px; opacity: .82; }
.contact-hero-card h1 { margin: 2px 0 2px; font-size: 21px; line-height: 1.25; }
.contact-hero-card p { margin: 0; font-size: 11px; line-height: 1.5; font-weight: 700; opacity: .92; }

.contact-support-tip,
.contact-security-card {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 11px;
  padding: 12px 13px;
  border: 1px solid #c6e5f7;
  border-radius: 16px;
  background: rgba(255,255,255,.86);
  box-shadow: 0 7px 18px rgba(18,111,164,.08);
}
.contact-support-tip > i { margin-top: 2px; color: #1697e4; font-size: 17px; }
.contact-support-tip strong { display: block; color: #0d527d; font-size: 12px; }
.contact-support-tip p { margin: 2px 0 0; color: #64869d; font-size: 10px; line-height: 1.5; font-weight: 700; }

.contact-channel-section {
  margin-top: 12px;
  padding: 13px;
  border: 1px solid #c1e2f5;
  border-radius: 21px;
  background: rgba(255,255,255,.9);
  box-shadow: 0 10px 24px rgba(21,105,156,.11);
}

.contact-section-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 1px 1px 11px;
  border-bottom: 1px solid #dcecf5;
}
.contact-section-heading h2 { margin: 0; color: #103f61; font-size: 15px; }
.contact-section-heading p { margin: 2px 0 0; color: #7590a2; font-size: 9px; line-height: 1.4; font-weight: 700; }
.contact-section-heading > span {
  flex: 0 0 auto;
  padding: 6px 9px;
  border-radius: 999px;
  color: #237eb3;
  background: #edf8ff;
  font-size: 9px;
  font-weight: 900;
}

.contact-channel-grid { display: grid; gap: 10px; padding-top: 10px; }

.contact-channel-card {
  position: relative;
  overflow: hidden;
  padding: 12px;
  border: 1px solid #d5eaf6;
  border-radius: 18px;
  background: linear-gradient(180deg, #fff 0%, #f7fcff 100%);
  box-shadow: 0 7px 16px rgba(18,103,153,.08);
}
.contact-channel-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: #1dadf2;
}
.contact-channel-card.is-line::before { background: #13b85b; }
.contact-channel-card.is-telegram::before { background: #279bd4; }
.contact-channel-card.is-facebook::before { background: #3478d4; }
.contact-channel-card.is-primary { border-color: #a9dfc1; background: linear-gradient(180deg, #f1fff6 0%, #fff 100%); }
.contact-channel-card.is-unconfigured { opacity: .78; }

.contact-channel-card-top { display: grid; grid-template-columns: 64px 1fr; align-items: center; gap: 12px; }
.contact-channel-visual {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 18px;
  color: #fff;
  background: linear-gradient(145deg, #49c4ff, #1288db);
  box-shadow: 0 8px 18px rgba(19,134,209,.2);
  font-size: 31px;
}
.contact-channel-visual.is-line { background: linear-gradient(145deg, #35d776, #08a94c); }
.contact-channel-visual.is-telegram { background: linear-gradient(145deg, #55c8f4, #218fc9); }
.contact-channel-visual.is-facebook { background: linear-gradient(145deg, #5e91e8, #2f67c0); }
.contact-channel-visual img { width: 100%; height: 100%; object-fit: cover; background: #fff; }
.contact-channel-body { min-width: 0; }
.contact-channel-label-row { display: flex; align-items: center; gap: 7px; min-width: 0; }
.contact-channel-label-row h3 { margin: 0; color: #113f60; font-size: 14px; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.contact-primary-badge { padding: 3px 7px; border-radius: 999px; color: #0a8d46; background: #dff8e9; font-size: 8px; font-weight: 900; }
.contact-channel-account { display: block; margin-top: 4px; color: #0c75b4; font-size: 12px; line-height: 1.35; overflow-wrap: anywhere; }
.contact-channel-note { margin: 3px 0 0; color: #7890a0; font-size: 9px; line-height: 1.45; font-weight: 700; }
.contact-channel-actions { display: flex; gap: 8px; margin-top: 11px; }
.contact-channel-actions button {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 0;
  border-radius: 11px;
  font: inherit;
  font-size: 10px;
  font-weight: 900;
  cursor: pointer;
}
.contact-copy-button { flex: 0 0 102px; color: #167bad; background: #e9f7ff; }
.contact-open-button { flex: 1; color: #fff; background: linear-gradient(180deg, #35b8f5, #1186d9); box-shadow: 0 6px 13px rgba(17,134,217,.2); }
.contact-channel-card.is-line .contact-open-button { background: linear-gradient(180deg, #2ed16e, #0aa44b); box-shadow: 0 6px 13px rgba(10,164,75,.18); }
.contact-open-button:disabled { color: #8aa0ae; background: #e8f0f5; box-shadow: none; cursor: not-allowed; }

.contact-empty-state,
.contact-error-state { padding: 30px 15px 24px; text-align: center; }
.contact-empty-state > span,
.contact-error-state > span { width: 52px; height: 52px; display: grid; place-items: center; margin: 0 auto 9px; border-radius: 17px; color: #fff; background: linear-gradient(145deg, #58c8f9, #188bd7); font-size: 21px; }
.contact-empty-state strong,
.contact-error-state strong { display: block; color: #174e70; font-size: 13px; }
.contact-empty-state p,
.contact-error-state p { margin: 4px auto 0; max-width: 280px; color: #7890a0; font-size: 10px; line-height: 1.5; }
.contact-error-state > span { background: linear-gradient(145deg, #ff9c7c, #ed5964); }
.contact-error-state button { margin-top: 12px; padding: 8px 18px; border: 0; border-radius: 10px; color: #fff; background: #178edb; font-size: 10px; font-weight: 900; }

.contact-security-card { align-items: center; border-color: #f5dca8; color: #8b6411; background: #fff9e9; }
.contact-security-card i { flex: 0 0 auto; font-size: 18px; }
.contact-security-card p { margin: 0; font-size: 10px; line-height: 1.5; font-weight: 800; }

.contact-copy-toast {
  position: fixed;
  z-index: 100;
  left: 50%;
  bottom: calc(92px + env(safe-area-inset-bottom));
  max-width: calc(100% - 32px);
  padding: 9px 14px;
  border-radius: 999px;
  color: #fff;
  background: rgba(16,57,82,.94);
  font-size: 10px;
  font-weight: 800;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 10px);
  transition: .18s ease;
}
.contact-copy-toast.show { opacity: 1; transform: translate(-50%, 0); }
.contact-bottom-nav { position: fixed; left: 50%; bottom: 0; width: min(100%, var(--member-page-width)); transform: translateX(-50%); }

/* Admin: contact settings */
.contact-settings-admin-panel { display: grid; gap: 18px; }
.contact-settings-admin-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 22px;
  border-radius: 18px;
  color: #fff;
  background: linear-gradient(135deg, #2d5fbc, #238fd3 58%, #25a9d9);
  box-shadow: 0 14px 30px rgba(28,91,155,.2);
}
.contact-settings-admin-hero h2 { margin: 2px 0 4px; font-size: 23px; }
.contact-settings-admin-hero p { margin: 0; max-width: 680px; font-size: 12px; line-height: 1.55; opacity: .9; }
.contact-settings-admin-eyebrow { font-size: 10px; font-weight: 900; letter-spacing: 1px; opacity: .82; }
.contact-settings-save-all { min-height: 40px; padding: 0 17px; border: 1px solid rgba(255,255,255,.55); border-radius: 11px; color: #1f63a3; background: #fff; font-weight: 900; cursor: pointer; }

.contact-settings-admin-grid { display: grid; grid-template-columns: minmax(0, 1fr) 390px; gap: 18px; align-items: start; }
.contact-settings-page-card,
.contact-settings-preview-card,
.contact-settings-channel-shell { padding: 20px; border: 1px solid #dbe5ef; border-radius: 17px; background: #fff; box-shadow: 0 9px 24px rgba(36,64,96,.08); }
.contact-settings-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 15px; }
.contact-settings-card-head h3 { margin: 0; color: #1e3450; font-size: 17px; }
.contact-settings-card-head p { margin: 3px 0 0; color: #7a899c; font-size: 11px; line-height: 1.45; }
.contact-settings-page-form { display: grid; gap: 12px; }
.contact-settings-page-form label,
.contact-channel-admin-fields label { display: grid; gap: 6px; color: #44566d; font-size: 11px; font-weight: 800; }
.contact-settings-page-form input,
.contact-settings-page-form textarea,
.contact-channel-admin-fields input,
.contact-channel-admin-fields textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #d5dfeb;
  border-radius: 10px;
  padding: 10px 11px;
  color: #243a53;
  background: #fbfdff;
  font: inherit;
  font-size: 12px;
  outline: none;
}
.contact-settings-page-form input:focus,
.contact-settings-page-form textarea:focus,
.contact-channel-admin-fields input:focus,
.contact-channel-admin-fields textarea:focus { border-color: #45a8e0; box-shadow: 0 0 0 3px rgba(69,168,224,.13); }

.contact-settings-preview-phone { width: min(100%, 330px); margin: 0 auto; padding: 10px; border: 8px solid #1e2b3f; border-radius: 28px; background: #ddf4ff; box-shadow: 0 15px 30px rgba(28,44,65,.2); }
.contact-settings-preview-phone header { padding: 11px 12px; border-radius: 15px; color: #fff; background: linear-gradient(145deg,#45bdf4,#168bd8); text-align: center; }
.contact-settings-preview-phone header strong { display: block; font-size: 14px; }
.contact-settings-preview-phone header small { display: block; margin-top: 2px; font-size: 8px; opacity: .9; }
.contact-settings-preview-list { display: grid; gap: 7px; margin-top: 9px; }
.contact-settings-preview-item { display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 8px; padding: 8px; border-radius: 12px; background: #fff; box-shadow: 0 4px 10px rgba(29,92,129,.08); }
.contact-settings-preview-item > span:first-child { width: 38px; height: 38px; display: grid; place-items: center; overflow: hidden; border-radius: 11px; color: #fff; background: #1cb05a; font-size: 18px; }
.contact-settings-preview-item.is-telegram > span:first-child { background: #2b9bd2; }
.contact-settings-preview-item.is-facebook > span:first-child { background: #3974cd; }
.contact-settings-preview-item img { width: 100%; height: 100%; object-fit: cover; }
.contact-settings-preview-item strong { display: block; color: #24425e; font-size: 9px; }
.contact-settings-preview-item small { display: block; margin-top: 1px; max-width: 125px; color: #8092a3; font-size: 7px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.contact-settings-preview-item > i { color: #2297d7; font-size: 12px; }

.contact-settings-channel-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.contact-channel-admin-card { padding: 15px; border: 1px solid #dce6ef; border-radius: 15px; background: #fbfdff; }
.contact-channel-admin-card.is-disabled { opacity: .66; }
.contact-channel-admin-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 13px; }
.contact-channel-admin-identity { display: flex; align-items: center; gap: 10px; min-width: 0; }
.contact-channel-admin-image {
  width: 54px;
  height: 54px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid #d8e5ee;
  border-radius: 14px;
  color: #fff;
  background: linear-gradient(145deg,#37ca70,#0ba44b);
  font-size: 23px;
  cursor: pointer;
}
.contact-channel-admin-card.is-telegram .contact-channel-admin-image { background: linear-gradient(145deg,#54c4ed,#278fc5); }
.contact-channel-admin-card.is-facebook .contact-channel-admin-image { background: linear-gradient(145deg,#5d91e5,#3468bc); }
.contact-channel-admin-image img { width: 100%; height: 100%; object-fit: cover; }
.contact-channel-admin-identity strong { display: block; color: #263d56; font-size: 14px; }
.contact-channel-admin-identity small { display: block; margin-top: 2px; color: #8190a1; font-size: 9px; }
.contact-channel-enabled-switch { display: inline-flex; align-items: center; gap: 6px; color: #52667c; font-size: 10px; font-weight: 800; }
.contact-channel-enabled-switch input { width: 17px; height: 17px; }
.contact-channel-admin-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.contact-channel-admin-fields .is-full { grid-column: 1 / -1; }
.contact-channel-admin-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.contact-channel-admin-actions button { min-height: 34px; padding: 0 11px; border: 0; border-radius: 9px; font-size: 10px; font-weight: 900; cursor: pointer; }
.contact-channel-upload-button { color: #176fa5; background: #e5f5ff; }
.contact-channel-reset-button { color: #a14a55; background: #ffedf0; }
.contact-channel-test-button { margin-left: auto; color: #fff; background: #268fd0; }
.contact-settings-message { min-height: 18px; margin: 0; color: #18804d; font-size: 11px; font-weight: 800; }
.contact-settings-message.error { color: #d14655; }

@media (max-width: 1050px) {
  .contact-settings-admin-grid { grid-template-columns: 1fr; }
  .contact-settings-preview-card { max-width: 430px; }
}

@media (max-width: 760px) {
  .contact-settings-admin-hero { align-items: flex-start; flex-direction: column; }
  .contact-settings-channel-list { grid-template-columns: 1fr; }
  .contact-channel-admin-fields { grid-template-columns: 1fr; }
  .contact-channel-admin-fields .is-full { grid-column: auto; }
}

@media (max-width: 380px) {
  .contact-page-main { padding-inline: 9px; }
  .contact-channel-card-top { grid-template-columns: 56px 1fr; gap: 9px; }
  .contact-channel-visual { width: 56px; height: 56px; border-radius: 16px; font-size: 27px; }
  .contact-copy-button { flex-basis: 92px; }
}

/* =========================================================
   V58.2 PROFESSIONAL GLOBAL UI
   Lightweight custom dialog + page/API loading system
   ========================================================= */
.casino-page-loader {
  position: fixed;
  inset: 0;
  z-index: 120000;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(237, 249, 255, 0.92);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 180ms ease, visibility 180ms ease;
}

.casino-page-loader.is-visible {
  opacity: 1;
  visibility: visible;
}

.casino-loader-card {
  width: min(290px, calc(100vw - 40px));
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 24px 22px 21px;
  border: 1px solid rgba(60, 169, 227, 0.24);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 22px 55px rgba(15, 112, 172, 0.18);
  text-align: center;
}

.casino-loader-mark {
  position: relative;
  width: 64px;
  height: 64px;
  margin-bottom: 3px;
}

.casino-loader-ring,
.casino-loader-ring::before {
  position: absolute;
  inset: 0;
  border-radius: 50%;
}

.casino-loader-ring {
  border: 4px solid rgba(28, 160, 226, 0.14);
  border-top-color: #179fe4;
  animation: casino-loader-spin 0.82s linear infinite;
}

.casino-loader-ring::before {
  content: "";
  inset: 8px;
  border: 3px solid rgba(28, 160, 226, 0.1);
  border-bottom-color: #58c7f4;
  animation: casino-loader-spin-reverse 1.12s linear infinite;
}

.casino-loader-core {
  position: absolute;
  inset: 17px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(145deg, #38baf2, #138ed9);
  color: #fff;
  box-shadow: 0 7px 18px rgba(16, 143, 215, 0.28);
  font-size: 15px;
  font-weight: 900;
  letter-spacing: -0.03em;
}

.casino-loader-card strong {
  color: #075d91;
  font-size: 17px;
  line-height: 1.35;
}

.casino-loader-card small {
  color: #6f8b9d;
  font-size: 12px;
  line-height: 1.5;
}

@keyframes casino-loader-spin { to { transform: rotate(360deg); } }

/* =========================================================
   V65.3 GUEST LOBBY + AUTH POPUP
   ========================================================= */
.guest-auth-button {
  min-width: 88px;
  height: 38px;
  padding: 0 13px;
  border: 1px solid rgba(255, 255, 255, .72);
  border-radius: 12px;
  color: #fff;
  background: rgba(255, 255, 255, .16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 4px 12px rgba(0, 69, 122, .15);
  font-family: inherit;
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
  transition: transform .16s ease, background-color .16s ease, box-shadow .16s ease;
}

.guest-register-button {
  border-color: #fff;
  color: #0873bc;
  background: #fff;
  box-shadow: 0 5px 14px rgba(0, 75, 132, .2);
}

.guest-auth-button:hover,
.guest-auth-button:focus-visible {
  transform: translateY(-1px);
  outline: none;
  box-shadow: 0 7px 17px rgba(0, 70, 125, .24);
}

.guest-mode .lobby-topbar.app-header {
  grid-template-columns: minmax(98px, 1fr) 82px minmax(98px, 1fr);
}

.guest-mode .topbar-left {
  justify-content: flex-start;
}

.guest-mode .topbar-right {
  justify-content: flex-end;
}

.guest-mode .bottom-item:not(.center-home),
.guest-mode .quick-item[data-route="deposit.html"],
.guest-mode .quick-item[data-route="withdraw.html"],
.guest-mode .quick-item[data-route="history.html"] {
  cursor: pointer;
}

.auth-popup-overlay {
  position: fixed;
  inset: 0;
  z-index: 110000;
  display: grid;
  place-items: center;
  padding: 18px;
  overflow: auto;
  background: rgba(2, 20, 34, .72);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity .18s ease;
}

.auth-popup-overlay.show {
  opacity: 1;
}

.auth-popup-dialog {
  position: relative;
  width: min(430px, 100%);
  max-height: calc(100vh - 36px);
  max-height: calc(100dvh - 36px);
  padding: 20px 24px 24px;
  overflow-x: hidden;
  overflow-y: auto;
  border: 1px solid rgba(255, 255, 255, .76);
  border-radius: 26px;
  background:
    radial-gradient(circle at 50% -12%, rgba(113, 215, 255, .36), transparent 34%),
    linear-gradient(180deg, #fafdff 0%, #edf8ff 100%);
  box-shadow: 0 30px 90px rgba(0, 34, 60, .38);
  transform: translateY(14px) scale(.97);
  transition: transform .2s cubic-bezier(.2, .75, .2, 1);
  scrollbar-width: thin;
}

.auth-popup-overlay.show .auth-popup-dialog {
  transform: translateY(0) scale(1);
}

.auth-popup-close {
  position: absolute;
  top: 11px;
  right: 12px;
  z-index: 2;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: #44697f;
  background: rgba(255, 255, 255, .84);
  box-shadow: 0 3px 12px rgba(17, 87, 126, .13);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}

.auth-popup-brand {
  height: 66px;
  display: grid;
  place-items: center;
  margin-bottom: 10px;
}

.auth-popup-brand img {
  width: min(170px, 52vw);
  max-height: 66px;
  object-fit: contain;
  filter: drop-shadow(0 5px 8px rgba(8, 95, 147, .15));
}

.auth-popup-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
  margin-bottom: 20px;
  padding: 4px;
  border: 1px solid #cae8f8;
  border-radius: 15px;
  background: #e4f4fd;
}

.auth-popup-tabs button {
  min-height: 40px;
  border: 0;
  border-radius: 11px;
  color: #547488;
  background: transparent;
  font-family: inherit;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
}

.auth-popup-tabs button.active {
  color: #fff;
  background: linear-gradient(135deg, #16a8ed, #0778cf);
  box-shadow: 0 5px 14px rgba(5, 118, 197, .22);
}

.auth-popup-form {
  animation: auth-popup-panel-in .22s ease both;
}

.auth-popup-heading {
  margin-bottom: 17px;
  text-align: center;
}

.auth-popup-heading h2 {
  margin: 0 0 5px;
  color: #0a5f94;
  font-size: 25px;
  line-height: 1.25;
}

.auth-popup-heading p {
  margin: 0;
  color: #718b9c;
  font-size: 12px;
}

.auth-popup-caption {
  display: block;
  margin: 0 3px 6px;
  color: #537286;
  font-size: 12px;
  font-weight: 700;
}

.auth-popup-field {
  width: 100%;
  min-height: 46px;
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  overflow: hidden;
  border: 1px solid #c5e2f1;
  border-radius: 13px;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 4px 11px rgba(38, 126, 176, .07);
}

.auth-popup-field:focus-within {
  border-color: #28a9e9;
  box-shadow: 0 0 0 3px rgba(40, 169, 233, .13);
}

.auth-popup-field > i {
  width: 48px;
  flex: 0 0 48px;
  color: #168fd4;
  text-align: center;
  font-size: 16px;
}

.auth-popup-field input,
.auth-popup-field select {
  min-width: 0;
  width: 100%;
  height: 44px;
  padding: 0 13px 0 0;
  border: 0;
  outline: 0;
  color: #173f57;
  background: transparent;
  font-family: inherit;
  font-size: 13px;
}

.auth-popup-field input::placeholder {
  color: #91a9b7;
}

.auth-popup-select select {
  cursor: pointer;
}

.auth-popup-hint {
  display: block;
  margin: -2px 3px 12px;
  color: #7a95a5;
  font-size: 11px;
}

.auth-popup-message {
  min-height: 22px;
  margin: 5px 2px 8px;
  color: #db4a34;
  text-align: center;
  font-size: 12px;
  line-height: 1.45;
}

.auth-popup-actions {
  display: flex;
  align-items: center;
  gap: 9px;
}

.auth-popup-submit,
.auth-popup-back {
  min-height: 43px;
  border-radius: 13px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
}

.auth-popup-submit {
  width: 100%;
  border: 0;
  color: #fff;
  background: linear-gradient(135deg, #19abea 0%, #0777ce 100%);
  box-shadow: 0 8px 19px rgba(6, 120, 201, .24);
}

.auth-popup-actions .auth-popup-submit {
  flex: 1;
}

.auth-popup-back {
  min-width: 92px;
  padding: 0 16px;
  border: 1px solid #c2dfef;
  color: #4e7186;
  background: #fff;
}

.auth-popup-submit:disabled,
.auth-popup-back:disabled {
  opacity: .58;
  cursor: wait;
}

.auth-popup-switch {
  width: 100%;
  margin-top: 13px;
  padding: 4px;
  border: 0;
  color: #718b9c;
  background: transparent;
  font-family: inherit;
  font-size: 12px;
  cursor: pointer;
}

.auth-popup-switch strong {
  color: #087cca;
}

@keyframes auth-popup-panel-in {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 520px) {
  .guest-mode .lobby-topbar.app-header {
    grid-template-columns: minmax(88px, 1fr) 66px minmax(88px, 1fr);
    padding-inline: 8px;
  }

  .guest-auth-button {
    min-width: 0;
    height: 36px;
    padding-inline: 9px;
    border-radius: 11px;
    font-size: 11px;
  }

  .auth-popup-overlay {
    align-items: center;
    padding: 10px;
  }

  .auth-popup-dialog {
    max-height: calc(100vh - 20px);
    max-height: calc(100dvh - 20px);
    padding: 16px 15px 19px;
    border-radius: 21px;
  }

  .auth-popup-brand {
    height: 54px;
    margin-bottom: 7px;
  }

  .auth-popup-brand img {
    max-height: 54px;
  }

  .auth-popup-tabs {
    margin-bottom: 15px;
  }

  .auth-popup-heading {
    margin-bottom: 13px;
  }

  .auth-popup-heading h2 {
    font-size: 22px;
  }

  .auth-popup-field {
    min-height: 43px;
    margin-bottom: 8px;
  }

  .auth-popup-field input,
  .auth-popup-field select {
    height: 41px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .auth-popup-overlay,
  .auth-popup-dialog,
  .auth-popup-form,
  .guest-auth-button {
    animation: none;
    transition: none;
  }
}
@keyframes casino-loader-spin-reverse { to { transform: rotate(-360deg); } }

html.casino-ui-busy,
html.casino-modal-open {
  overflow: hidden;
}

.casino-modal-root {
  position: fixed;
  inset: 0;
  z-index: 125000;
  display: grid;
  place-items: center;
  padding: 18px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 160ms ease, visibility 160ms ease;
}

.casino-modal-root.is-open {
  opacity: 1;
  visibility: visible;
}

.casino-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(7, 30, 47, 0.58);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

.casino-modal-dialog {
  position: relative;
  width: min(430px, calc(100vw - 28px));
  max-height: min(88vh, 720px);
  overflow: auto;
  border: 1px solid rgba(119, 194, 232, 0.3);
  border-radius: 24px;
  padding: 22px;
  background: #fff;
  box-shadow: 0 28px 80px rgba(2, 38, 63, 0.34);
  transform: translateY(12px) scale(0.975);
  transition: transform 180ms cubic-bezier(.2,.8,.2,1);
  outline: none;
}

.casino-modal-root.is-open .casino-modal-dialog {
  transform: translateY(0) scale(1);
}

.casino-modal-head {
  display: flex;
  align-items: center;
  gap: 13px;
}

.casino-modal-icon {
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: #e9f7ff;
  color: #118fd7;
  box-shadow: inset 0 0 0 1px rgba(30, 155, 220, 0.12);
  font-size: 23px;
  font-weight: 900;
}

.casino-modal-dialog[data-type="success"] .casino-modal-icon {
  background: #e9f9f1;
  color: #13945d;
}

.casino-modal-dialog[data-type="warning"] .casino-modal-icon,
.casino-modal-dialog[data-type="question"] .casino-modal-icon {
  background: #fff7dd;
  color: #ca8500;
}

.casino-modal-dialog[data-type="danger"] .casino-modal-icon {
  background: #fff0f1;
  color: #d4404c;
}

.casino-modal-heading {
  min-width: 0;
}

.casino-modal-eyebrow {
  display: block;
  margin-bottom: 2px;
  color: #79a0b6;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.11em;
}

.casino-modal-title {
  margin: 0;
  color: #073f63;
  font-size: 20px;
  line-height: 1.35;
}

.casino-modal-message {
  margin: 16px 0 0;
  color: #526f80;
  font-size: 14px;
  line-height: 1.68;
  white-space: pre-line;
  overflow-wrap: anywhere;
}

.casino-modal-fields {
  display: grid;
  gap: 12px;
  margin-top: 17px;
}

.casino-modal-field {
  display: grid;
  gap: 6px;
  color: #234f69;
}

.casino-modal-field-label {
  font-size: 12px;
  font-weight: 800;
}

.casino-modal-required {
  color: #d93d49;
}

.casino-modal-input {
  width: 100%;
  min-height: 46px;
  box-sizing: border-box;
  border: 1px solid #cfe6f2;
  border-radius: 14px;
  padding: 11px 13px;
  background: #f8fcff;
  color: #123e58;
  font: inherit;
  font-size: 14px;
  outline: none;
  transition: border-color 150ms ease, box-shadow 150ms ease, background 150ms ease;
}

.casino-modal-textarea {
  min-height: 88px;
  resize: vertical;
}

.casino-modal-input:focus {
  border-color: #27a9e8;
  background: #fff;
  box-shadow: 0 0 0 4px rgba(39, 169, 232, 0.12);
}

.casino-modal-field-hint {
  color: #7c96a5;
  font-size: 10px;
  line-height: 1.5;
}

.casino-modal-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 6px;
}

.casino-modal-button {
  min-height: 46px;
  border: 0;
  border-radius: 14px;
  padding: 10px 14px;
  font: inherit;
  font-size: 14px;
  font-weight: 900;
  cursor: pointer;
  transition: transform 120ms ease, filter 120ms ease, box-shadow 120ms ease;
}

.casino-modal-button:active {
  transform: translateY(1px) scale(0.99);
}

.casino-modal-button--secondary {
  background: #eef6fa;
  color: #4d7083;
}

.casino-modal-button--primary {
  background: linear-gradient(180deg, #35b9f1, #128fda);
  color: #fff;
  box-shadow: 0 8px 18px rgba(20, 143, 216, 0.24);
}

.casino-modal-button--danger {
  background: linear-gradient(180deg, #ee6670, #d83d49);
  color: #fff;
  box-shadow: 0 8px 18px rgba(216, 61, 73, 0.22);
}

.casino-modal-button[hidden] + .casino-modal-button,
.casino-modal-actions:has(.casino-modal-button[hidden]) {
  grid-template-columns: 1fr;
}

.casino-toast-container {
  position: fixed;
  z-index: 123000;
  top: max(16px, env(safe-area-inset-top));
  left: 50%;
  width: min(390px, calc(100vw - 24px));
  transform: translateX(-50%);
  display: grid;
  gap: 8px;
  pointer-events: none;
}

.casino-toast {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid rgba(96, 181, 224, 0.25);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.97);
  color: #28566f;
  box-shadow: 0 14px 34px rgba(5, 65, 100, 0.2);
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 180ms ease, transform 180ms ease;
}

.casino-toast.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.casino-toast-icon {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: #e8f7ff;
  color: #138fd6;
  font-weight: 900;
}

.casino-toast--success .casino-toast-icon { background: #e8f8ef; color: #168b5a; }
.casino-toast--warning .casino-toast-icon { background: #fff6d9; color: #bd7b00; }
.casino-toast--danger .casino-toast-icon { background: #ffedef; color: #d33f4c; }

.casino-toast-copy {
  min-width: 0;
  display: grid;
  gap: 1px;
}

.casino-toast-copy strong {
  color: #0b4b70;
  font-size: 13px;
}

.casino-toast-copy span {
  font-size: 12px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

@media (max-width: 480px) {
  .casino-page-loader { padding: 16px; }
  .casino-loader-card { border-radius: 21px; }
  .casino-modal-root {
    place-items: center;
    padding: max(16px, env(safe-area-inset-top)) 14px max(16px, env(safe-area-inset-bottom));
  }
  .casino-modal-dialog {
    width: min(100%, 370px);
    max-height: calc(100dvh - max(32px, env(safe-area-inset-top) + env(safe-area-inset-bottom) + 20px));
    border-radius: 22px;
    padding: 20px 17px;
    transform: translateY(8px) scale(.975);
  }
  .casino-modal-root.is-open .casino-modal-dialog {
    transform: translateY(0) scale(1);
  }
  .casino-modal-title { font-size: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .casino-loader-ring,
  .casino-loader-ring::before { animation-duration: 1.8s; }
  .casino-page-loader,
  .casino-modal-root,
  .casino-modal-dialog,
  .casino-toast { transition: none; }
}


/* =========================================================
   V58.3 MEMBER LOBBY POLISH
   - Centered dialogs on mobile
   - Larger, readable header logo
   - High-contrast bottom navigation
   - Local-only balance refresh feedback
========================================================= */

.home-body.lobby-v2-body .lobby-topbar.app-header {
  height: 72px !important;
  grid-template-columns: minmax(78px, 1fr) 112px minmax(126px, 1fr) !important;
  gap: 4px !important;
  padding: 7px 9px !important;
}

.home-body.lobby-v2-body .lobby-topbar .app-logo {
  position: relative;
  z-index: 2;
  width: 112px !important;
  height: 58px !important;
  max-height: 58px !important;
  object-fit: contain !important;
  transform: scale(1.08);
  transform-origin: center;
  filter: drop-shadow(0 3px 4px rgba(0, 45, 82, .28)) !important;
}

.home-body.lobby-v2-body .refresh-btn:disabled,
.home-body.lobby-v2-body #walletModalRefresh:disabled {
  cursor: wait;
  opacity: .82;
}

.home-body.lobby-v2-body .lobby-v2.app-wrap {
  padding-bottom: calc(102px + env(safe-area-inset-bottom)) !important;
}

























@media (max-width: 370px) {
  .home-body.lobby-v2-body .lobby-topbar.app-header {
    grid-template-columns: minmax(72px, 1fr) 96px minmax(112px, 1fr) !important;
  }

  .home-body.lobby-v2-body .lobby-topbar .app-logo {
    width: 98px !important;
    height: 54px !important;
  }

  

  
}


/* ===== V58.4 stable member balance ===== */
.home-body.lobby-v2-body .credit-pill.is-stale {
  border-color: rgba(245, 158, 11, .78) !important;
  box-shadow: 0 4px 11px rgba(0,78,136,.18), inset 0 0 0 1px rgba(245,158,11,.28) !important;
}

.home-body.lobby-v2-body .credit-pill.is-stale .refresh-btn {
  color: #9a5a00 !important;
  background: linear-gradient(180deg, #fff7df 0%, #ffe6a7 100%) !important;
}

.home-body.lobby-v2-body .wallet-credit-card.is-stale {
  border-color: #efbf5f !important;
  background: linear-gradient(180deg, #fffdf6 0%, #fff4d9 100%) !important;
}

/* =========================================================
   V59.0 — WITHDRAWAL ADMIN + CUSTOMER PAGE
   Scoped classes only. No external animation library.
   ========================================================= */

.withdraw-admin-v59 {
  --wd-blue: #1595e8;
  --wd-blue-dark: #0877c8;
  --wd-ink: #17233a;
  --wd-muted: #6d7b90;
  --wd-line: #d8e0ea;
  --wd-soft: #f5f7fa;
  --wd-danger: #e62d35;
  --wd-success: #079b58;
  color: var(--wd-ink);
}

.withdraw-admin-heading-v59 {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}

.withdraw-admin-heading-v59 h2,
.withdraw-admin-heading-v59 p,
.withdraw-minimum-card-v59 h3,
.withdraw-minimum-card-v59 p,
.withdraw-bank-summary-v59 h3,
.withdraw-bank-summary-v59 p {
  margin: 0;
}

.withdraw-admin-heading-v59 h2 {
  font-size: 22px;
  line-height: 1.25;
}

.withdraw-admin-heading-v59 p {
  margin-top: 5px;
  color: var(--wd-muted);
  font-size: 13px;
}

.withdraw-admin-waiting-v59 {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 7px 13px;
  border-radius: 999px;
  color: #c3161d;
  background: #ffe7e9;
  border: 1px solid #ffcdd1;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.withdraw-admin-waiting-v59 strong {
  min-width: 18px;
  text-align: center;
}

.withdraw-admin-overview-v59 {
  display: grid;
  grid-template-columns: minmax(290px, 360px) minmax(520px, 1fr);
  align-items: stretch;
  gap: 14px;
  margin-bottom: 14px;
}

.withdraw-minimum-card-v59,
.withdraw-bank-summary-v59,
.withdraw-list-workspace-v59 {
  background: #fff;
  border: 1px solid #cbd3dc;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(23, 35, 58, 0.08);
}

.withdraw-minimum-card-v59 {
  padding: 15px;
}

.withdraw-minimum-card-v59 > header {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin-bottom: 15px;
}

.withdraw-card-icon-v59 {
  display: grid;
  place-items: center;
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  color: #fff;
  border-radius: 9px;
  background: linear-gradient(145deg, #253c73, #15254e);
}

.withdraw-minimum-card-v59 h3,
.withdraw-bank-summary-v59 h3 {
  font-size: 15px;
  line-height: 1.35;
}

.withdraw-minimum-card-v59 header p,
.withdraw-bank-summary-v59 header p {
  margin-top: 3px;
  color: var(--wd-muted);
  font-size: 11px;
}

.withdraw-minimum-field-v59 {
  display: grid;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
}

.withdraw-minimum-field-v59 > div {
  display: flex;
  align-items: center;
  height: 42px;
  overflow: hidden;
  border: 1px solid #bcc7d3;
  border-radius: 6px;
  background: #fff;
}

.withdraw-minimum-field-v59 > div > span {
  display: grid;
  place-items: center;
  align-self: stretch;
  width: 42px;
  color: var(--wd-blue-dark);
  background: #eef7ff;
  border-right: 1px solid #d4e6f5;
  font-weight: 900;
}

.withdraw-minimum-field-v59 input {
  width: 100%;
  height: 100%;
  padding: 0 12px;
  border: 0;
  outline: 0;
  color: var(--wd-ink);
  font-size: 14px;
  font-weight: 800;
}

.withdraw-minimum-note-v59 {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 9px !important;
  color: #758399;
  font-size: 10px;
}

.withdraw-save-setting-v59 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 40px;
  margin-top: 13px;
  border: 0;
  border-radius: 6px;
  color: #fff;
  background: #1d1d1f;
  font-weight: 800;
  cursor: pointer;
}

.withdraw-save-setting-v59:hover { background: #050505; }
.withdraw-save-setting-v59:disabled { opacity: 0.55; cursor: not-allowed; }

.withdraw-bank-summary-v59 {
  overflow: hidden;
}

.withdraw-bank-summary-v59 > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 58px;
  padding: 10px 13px;
}

.withdraw-bank-summary-v59 > header > span {
  color: var(--wd-blue-dark);
  font-size: 16px;
  font-weight: 900;
  white-space: nowrap;
}

.withdraw-bank-summary-scroll-v59 {
  overflow: auto;
}

.withdraw-bank-summary-v59 table {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 12px;
}

.withdraw-bank-summary-v59 th {
  height: 36px;
  padding: 7px 10px;
  color: #fff;
  background: #1d1d1f;
  border-right: 1px solid #f4f4f4;
  text-align: left;
}

.withdraw-bank-summary-v59 th:first-child,
.withdraw-bank-summary-v59 td:first-child { width: 42px; text-align: center; }
.withdraw-bank-summary-v59 th:nth-child(3),
.withdraw-bank-summary-v59 td:nth-child(3) { width: 110px; text-align: right; }
.withdraw-bank-summary-v59 th:nth-child(4),
.withdraw-bank-summary-v59 td:nth-child(4) { width: 160px; text-align: right; }

.withdraw-bank-summary-v59 td {
  height: 38px;
  padding: 6px 10px;
  border-right: 1px solid #cfd6de;
  border-bottom: 1px solid #cfd6de;
  background: #fff;
}

.withdraw-bank-summary-v59 tbody tr:nth-child(even) td { background: #f4f5f7; }
.withdraw-summary-bank-v59 { display: flex; align-items: center; gap: 8px; }
.withdraw-summary-bank-v59 img { width: 25px; height: 25px; object-fit: contain; border-radius: 5px; }
.withdraw-summary-total-v59 { font-weight: 900; }
.withdraw-summary-empty-v59 { height: 88px !important; color: var(--wd-muted); text-align: center !important; }

.withdraw-admin-tabs-v59 {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  min-height: 42px;
  border-bottom: 1px solid #aeb8c4;
}

.withdraw-admin-tabs-v59 button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 8px 15px;
  border: 1px solid #b7c0ca;
  border-bottom: 0;
  border-radius: 5px 5px 0 0;
  color: #4d596b;
  background: #f2f3f5;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.withdraw-admin-tabs-v59 button.active {
  color: #fff;
  background: #1d1d1f;
  border-color: #1d1d1f;
}

.withdraw-admin-tabs-v59 button span {
  display: grid;
  place-items: center;
  min-width: 21px;
  height: 21px;
  padding: 0 5px;
  border-radius: 999px;
  color: #fff;
  background: #e82c37;
  font-size: 10px;
}

.withdraw-list-workspace-v59 {
  border-top-left-radius: 0;
  padding: 12px 0 0;
  overflow: visible;
}

.withdraw-pending-toolbar-v59,
.withdraw-history-toolbar-v59 {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 12px 10px;
  flex-wrap: wrap;
}

.withdraw-pending-toolbar-v59 select,
.withdraw-history-toolbar-v59 select,
.withdraw-page-size-v59 select {
  min-height: 34px;
  padding: 0 9px;
  border: 1px solid #bcc6d1;
  border-radius: 5px;
  color: #26354c;
  background: #fff;
  font-size: 11px;
}

.withdraw-live-switch-v59 {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}

.withdraw-live-switch-v59 input { position: absolute; opacity: 0; pointer-events: none; }
.withdraw-live-switch-v59 > span {
  position: relative;
  width: 33px;
  height: 19px;
  border-radius: 999px;
  background: #a8b5c8;
  transition: background 0.18s ease;
}
.withdraw-live-switch-v59 > span::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
  transition: transform 0.18s ease;
}
.withdraw-live-switch-v59 input:checked + span { background: #263f79; }
.withdraw-live-switch-v59 input:checked + span::after { transform: translateX(14px); }

.withdraw-live-status-v59 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #778397;
  font-size: 10px;
}
.withdraw-live-status-v59 > i { width: 7px; height: 7px; border-radius: 50%; background: #0dbf69; box-shadow: 0 0 0 3px #dcf8e9; }
.withdraw-live-status-v59 strong { color: #778397; }
.withdraw-toolbar-spacer-v59 { flex: 1; }
.withdraw-page-size-v59 { display: inline-flex; align-items: center; gap: 6px; color: #5d6878; font-size: 10px; }

.withdraw-toolbar-button-v59 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 34px;
  padding: 0 14px;
  border: 1px solid #202226;
  border-radius: 5px;
  color: #fff;
  background: #1f2125;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}
.withdraw-toolbar-button-v59:hover { background: #070708; }
.withdraw-toolbar-button-v59.is-icon { width: 36px; padding: 0; color: #68758a; border-color: #c5ced8; background: #fff; }
.withdraw-toolbar-button-v59.is-icon.is-on { color: #0877c8; border-color: #8acaf2; background: #eff9ff; }

.withdraw-history-search-v59 {
  display: flex;
  align-items: center;
  gap: 8px;
  width: min(360px, 100%);
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid #bcc6d1;
  border-radius: 5px;
  background: #fff;
}
.withdraw-history-search-v59 i { color: #8b97aa; }
.withdraw-history-search-v59 input { width: 100%; border: 0; outline: 0; font-size: 11px; }

.withdraw-table-scroll-v59 {
  overflow: auto;
  border-top: 1px solid #c3cad3;
}

.withdraw-data-table-v59 {
  width: 100%;
  min-width: 1540px;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  color: #24334a;
  font-size: 10px;
}

.withdraw-data-table-v59 th {
  position: sticky;
  top: 0;
  z-index: 3;
  height: 38px;
  padding: 6px 8px;
  color: #fff;
  background: #1d1d1f;
  border-right: 1px solid #f4f4f4;
  text-align: center;
  white-space: nowrap;
}

.withdraw-data-table-v59 th:nth-child(1) { width: 42px; }
.withdraw-data-table-v59 th:nth-child(2) { width: 128px; }
.withdraw-data-table-v59 th:nth-child(3) { width: 215px; }
.withdraw-data-table-v59 th:nth-child(4),
.withdraw-data-table-v59 th:nth-child(5),
.withdraw-data-table-v59 th:nth-child(6),
.withdraw-data-table-v59 th:nth-child(7),
.withdraw-data-table-v59 th:nth-child(8) { width: 90px; }
.withdraw-data-table-v59 th:nth-child(9) { width: 70px; }
.withdraw-data-table-v59 th:nth-child(10) { width: 126px; }
.withdraw-data-table-v59 th:nth-child(11) { width: 130px; }
.withdraw-data-table-v59 th:nth-child(12) { width: 110px; }
.withdraw-data-table-v59 th:nth-child(13) { width: 128px; }

.withdraw-data-table-v59 td {
  height: 58px;
  padding: 6px 7px;
  border-right: 1px solid #ccd4de;
  border-bottom: 1px solid #ccd4de;
  background: #fff;
  vertical-align: middle;
  text-align: center;
}
.withdraw-data-table-v59 tbody tr:nth-child(even) td { background: #f3f4f6; }
.withdraw-data-table-v59 tbody tr:hover td { background: #eef8ff; }
.withdraw-row-v59.status-provider_unknown td { background: #fff8e6; }
.withdraw-row-v59.status-provider_failed td { background: #fff0f1; }
.withdraw-index-v59 { color: #40516c; }

.withdraw-user-v59 { display: grid; gap: 4px; text-align: left; }
.withdraw-user-line-v59,
.withdraw-account-line-v59 { display: flex; align-items: center; gap: 4px; min-width: 0; }
.withdraw-copy-value-v59,
.withdraw-account-number-v59,
.withdraw-copy-icon-v59 {
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.withdraw-copy-value-v59 { color: #f49a1a; font-size: 10px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; }
.withdraw-copy-icon-v59 { color: #a9b3c1; font-size: 13px; }
.withdraw-user-v59 small { color: #8a96a8; font-size: 8px; overflow: hidden; text-overflow: ellipsis; }

.withdraw-bank-account-v59 { display: flex; align-items: center; gap: 8px; text-align: left; }
.withdraw-bank-icon-v59 { display: grid; place-items: center; flex: 0 0 30px; width: 30px; height: 30px; border-radius: 6px; color: #fff; background: #1595e8; }
.withdraw-bank-icon-v59 img { width: 100%; height: 100%; object-fit: contain; border-radius: 6px; }
.withdraw-bank-account-v59 > div { min-width: 0; display: grid; gap: 2px; }
.withdraw-account-number-v59 { color: #182943; font-size: 13px; font-weight: 900; letter-spacing: .2px; }
.withdraw-bank-account-v59 small { color: #68758a; font-size: 9px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.withdraw-bank-account-v59 em { color: #9ba5b3; font-size: 8px; font-style: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.withdraw-money-v59 {
  color: #1d2f49;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .1px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* V59.3.4 — ปรับสีและน้ำหนักตัวเลขหน้ารายการถอน */
.withdraw-money-v59.is-reported,
.withdraw-money-v59.is-before {
  color: #26354c;
  font-size: 13px;
  font-weight: 500;
}

.withdraw-money-v59.is-paid {
  color: #d92d20;
  font-size: 14px;
  font-weight: 400;
}

.withdraw-money-v59.is-after {
  color: #159447;
  font-size: 14px;
  font-weight: 400;
}

.withdraw-money-v59.is-latest-deposit {
  color: #31506c;
  font-size: 13px;
  font-weight: 700;
}

.withdraw-money-v59.is-muted,
.withdraw-money-v59.is-paid.is-muted,
.withdraw-money-v59.is-after.is-muted {
  color: #9ba6b5;
  font-weight: 500;
}
.withdraw-date-v59 { color: #4d5d73; white-space: nowrap; }
.withdraw-turnover-v59 { color: #5a697c; }
.withdraw-note-v59 { max-width: 110px; color: #7e8a9c; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.withdraw-status-v59 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  max-width: 120px;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 8px;
  font-weight: 900;
  line-height: 1.2;
}
.withdraw-status-v59.status-pending { color: #2456bd; background: #e7eeff; }
.withdraw-status-v59.status-processing { color: #8b5e00; background: #fff0c4; }
.withdraw-status-v59.status-deducted { color: #6a3db0; background: #f0e7ff; }
.withdraw-status-v59.status-paid { color: #087f4a; background: #ddf8ea; }
.withdraw-status-v59.status-rejected { color: #c02730; background: #ffe3e6; }
.withdraw-status-v59.status-refunded { color: #077b72; background: #dff8f5; }
.withdraw-status-v59.status-provider_unknown { color: #9a6100; background: #fff0c6; }
.withdraw-status-v59.status-provider_failed { color: #c02730; background: #ffe3e6; }

.withdraw-actions-cell-v59 { overflow: visible; }
.withdraw-actions-v59 { display: flex; align-items: center; justify-content: center; gap: 5px; position: relative; }
.withdraw-info-button-v59,
.withdraw-action-trigger-v59 {
  display: grid;
  place-items: center;
  width: 27px;
  height: 27px;
  padding: 0;
  border: 1px solid #b8c1cd;
  border-radius: 5px;
  background: #fff;
  cursor: pointer;
}
.withdraw-info-button-v59 { color: #168bd5; }
.withdraw-action-menu-v59 { position: relative; }
.withdraw-action-menu-v59 summary { list-style: none; }
.withdraw-action-menu-v59 summary::-webkit-details-marker { display: none; }
.withdraw-action-menu-v59.is-approve .withdraw-action-trigger-v59 { color: #fff; border-color: #079b58; background: #079b58; }
.withdraw-action-menu-v59.is-reject .withdraw-action-trigger-v59 { color: #fff; border-color: #df2e37; background: #df2e37; }
.withdraw-action-popover-v59 {
  position: absolute;
  z-index: 20;
  top: calc(100% + 5px);
  right: 0;
  width: 180px;
  padding: 5px;
  border: 1px solid #ccd4de;
  border-radius: 7px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(24, 39, 62, 0.22);
}
.withdraw-action-popover-v59 button {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  min-height: 34px;
  padding: 7px 8px;
  border: 0;
  border-radius: 5px;
  color: #26364d;
  background: #fff;
  font-size: 10px;
  text-align: left;
  cursor: pointer;
}
.withdraw-action-popover-v59 button:hover { background: #eef7ff; }
.withdraw-action-popover-v59 button i { width: 16px; color: #168bd5; text-align: center; }
.withdraw-action-popover-v59 button.is-danger { color: #c3242d; }
.withdraw-action-popover-v59 button.is-danger i { color: #df2e37; }

.withdraw-table-footer-v59 {
  min-height: 34px;
  padding: 8px 12px;
  color: #8b96a6;
  font-size: 9px;
}

/* Customer withdrawal page */
.withdraw-page-body-v59 {
  min-height: 100dvh;
  background: #dff5ff;
}

.withdraw-app-v59 {
  position: relative;
  width: 100%;
  max-width: var(--member-page-width);
  min-height: 100dvh;
  margin: 0 auto;
  padding-bottom: calc(86px + env(safe-area-inset-bottom));
  color: #123459;
  background:
    radial-gradient(circle at 8px 8px, rgba(255,255,255,.65) 0 2px, transparent 2.5px) 0 0/24px 24px,
    linear-gradient(180deg, #d9f3ff 0%, #effaff 58%, #dff5ff 100%);
  box-shadow: 0 0 28px rgba(15, 108, 169, 0.16);
}

.withdraw-header-v59 {
  position: sticky;
  top: 0;
  z-index: 30;
  display: grid;
  grid-template-columns: 45px 1fr auto;
  align-items: center;
  gap: 8px;
  min-height: 64px;
  padding: max(8px, env(safe-area-inset-top)) 10px 8px;
  color: #fff;
  background: linear-gradient(135deg, #31b9f0, #0785da);
  box-shadow: 0 4px 14px rgba(4, 110, 183, 0.2);
}

.withdraw-back-v59 {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(255,255,255,.55);
  border-radius: 11px;
  color: #fff;
  background: rgba(255,255,255,.12);
  text-decoration: none;
}

.withdraw-header-title-v59 { min-width: 0; text-align: left; }
.withdraw-header-title-v59 h1 { margin: 0; font-size: 18px; line-height: 1.15; }
.withdraw-header-title-v59 p { margin: 3px 0 0; color: rgba(255,255,255,.88); font-size: 9px; }

.withdraw-balance-pill-v59 {
  display: flex;
  align-items: center;
  gap: 5px;
  min-height: 34px;
  padding: 5px 9px;
  border: 1px solid rgba(255,255,255,.75);
  border-radius: 10px;
  color: #156198;
  background: #fff;
  box-shadow: 0 3px 8px rgba(0,70,120,.13);
  cursor: pointer;
}
.withdraw-balance-pill-v59 > i:first-child { color: #f4b400; }
.withdraw-balance-pill-v59 strong { min-width: 40px; font-size: 12px; text-align: right; }
.withdraw-balance-refresh-icon-v59 { color: #0b8edc; font-size: 11px; }
.withdraw-balance-pill-v59.is-refreshing .withdraw-balance-refresh-icon-v59 { animation: withdraw-spin-v59 .7s linear infinite; }
.withdraw-balance-pill-v59.is-stale { background: #fff8df; border-color: #ffe090; }
@keyframes withdraw-spin-v59 { to { transform: rotate(360deg); } }

.withdraw-content-v59 { display: grid; gap: 11px; padding: 12px 11px 18px; }

.withdraw-time-note-v59 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 34px;
  padding: 7px 10px;
  border: 1px solid #bde3cb;
  border-radius: 11px;
  color: #28824f;
  background: #effdf4;
  font-size: 10px;
  font-weight: 800;
}

.withdraw-account-card-v59 {
  display: grid;
  grid-template-columns: 54px 1fr auto;
  align-items: center;
  gap: 11px;
  min-height: 91px;
  padding: 14px;
  border-radius: 18px;
  color: #fff;
  background: linear-gradient(135deg, #4169b2, #263f79 62%, #1d315f);
  box-shadow: 0 8px 18px rgba(40, 66, 125, 0.22);
}
.withdraw-account-card-v59.is-missing { background: linear-gradient(135deg, #6a7890, #46546b); }
.withdraw-account-icon-v59 { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; color: #2d4d8b; background: #fff; font-size: 22px; }
.withdraw-account-detail-v59 { display: grid; gap: 3px; min-width: 0; }
.withdraw-account-detail-v59 small { color: rgba(255,255,255,.78); font-size: 9px; }
.withdraw-account-detail-v59 strong { font-size: 18px; letter-spacing: .5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.withdraw-account-detail-v59 span { color: rgba(255,255,255,.88); font-size: 9px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.withdraw-account-edit-v59 { display: inline-flex; align-items: center; gap: 5px; min-height: 33px; padding: 0 10px; border: 1px solid rgba(255,255,255,.55); border-radius: 9px; color: #fff; background: rgba(255,255,255,.1); font-size: 9px; font-weight: 800; text-decoration: none; }

.withdraw-active-card-v59 {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  border: 1px solid #f2d68b;
  border-radius: 14px;
  background: #fff8df;
}
.withdraw-active-icon-v59 { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; color: #9a6800; background: #ffe9ad; }
.withdraw-active-card-v59 > div:nth-child(2) { min-width: 0; }
.withdraw-active-card-v59 small { color: #8c7b50; font-size: 8px; }
.withdraw-active-card-v59 strong { display: block; margin-top: 2px; font-size: 12px; }
.withdraw-active-card-v59 p { margin: 3px 0 0; color: #887b61; font-size: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.withdraw-active-card-v59 > span { max-width: 84px; padding: 5px 7px; border-radius: 999px; color: #906000; background: #ffe8a7; font-size: 8px; font-weight: 900; text-align: center; }

.withdraw-form-card-v59,
.withdraw-recent-v59 {
  padding: 13px;
  border: 1px solid #c9e2f2;
  border-radius: 17px;
  background: rgba(255,255,255,.96);
  box-shadow: 0 5px 14px rgba(44, 121, 170, 0.1);
}

.withdraw-form-card-v59 > header,
.withdraw-recent-v59 > header { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.withdraw-form-card-v59 h2,
.withdraw-recent-v59 h2 { margin: 0; color: #123459; font-size: 13px; }
.withdraw-form-card-v59 header p,
.withdraw-recent-v59 header p { margin: 3px 0 0; color: #7c91a5; font-size: 8px; }
.withdraw-all-button-v59 { min-height: 30px; padding: 0 10px; border: 1px solid #90cdf0; border-radius: 9px; color: #087ec5; background: #eef9ff; font-size: 9px; font-weight: 900; cursor: pointer; }

#withdrawFormV59 { display: grid; gap: 10px; margin-top: 12px; }
.withdraw-amount-field-v59 { display: flex; align-items: center; height: 55px; overflow: hidden; border: 1.5px solid #8ecff1; border-radius: 13px; background: #fafdff; }
.withdraw-amount-field-v59 > span { display: grid; place-items: center; width: 48px; height: 100%; color: #108dd8; background: #eff9ff; font-size: 20px; font-weight: 900; }
.withdraw-amount-field-v59 input { width: 100%; height: 100%; padding: 0 13px; border: 0; outline: 0; color: #0c609b; background: transparent; font-size: 23px; font-weight: 900; }
.withdraw-amount-field-v59 input::placeholder { color: #aabfcf; }

.withdraw-quick-amounts-v59 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.withdraw-quick-amounts-v59 button { min-height: 34px; border: 1px solid #a9d7ef; border-radius: 9px; color: #176798; background: #eff9ff; font-size: 10px; font-weight: 900; cursor: pointer; }
.withdraw-quick-amounts-v59 button:active { transform: translateY(1px); background: #dff4ff; }

.withdraw-summary-v59 { overflow: hidden; border: 1px solid #d7e8f3; border-radius: 12px; background: #f8fcff; }
.withdraw-summary-v59 > div { display: flex; align-items: center; justify-content: space-between; min-height: 35px; padding: 7px 11px; border-bottom: 1px solid #e4eff6; font-size: 9px; }
.withdraw-summary-v59 > div:last-child { border-bottom: 0; }
.withdraw-summary-v59 span { color: #70869a; }
.withdraw-summary-v59 strong { color: #31506c; font-size: 11px; }
.withdraw-summary-v59 .is-total { background: #edf8ff; }
.withdraw-summary-v59 .is-total span,
.withdraw-summary-v59 .is-total strong { color: #087ec5; font-weight: 900; }

.withdraw-security-note-v59 { display: flex; align-items: flex-start; gap: 9px; padding: 10px; border-radius: 11px; color: #176e9e; background: #eaf8ff; }
.withdraw-security-note-v59 i { margin-top: 1px; }
.withdraw-security-note-v59 p { margin: 0; font-size: 9px; line-height: 1.5; }
.withdraw-form-message-v59 { min-height: 14px; margin: 0; color: #d1333c; font-size: 9px; text-align: center; }
.withdraw-submit-v59 { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; border: 0; border-radius: 13px; color: #fff; background: linear-gradient(180deg, #2ab7f0, #0789df); box-shadow: 0 7px 13px rgba(5, 137, 222, .22); font-size: 13px; font-weight: 900; cursor: pointer; }
.withdraw-submit-v59:disabled,
.withdraw-all-button-v59:disabled,
.withdraw-quick-amounts-v59 button:disabled { opacity: .5; cursor: not-allowed; }

.withdraw-recent-v59 > header a { color: #0a83ca; font-size: 9px; font-weight: 800; text-decoration: none; }
.withdraw-recent-list-v59 { display: grid; margin-top: 9px; overflow: hidden; border: 1px solid #dbe9f2; border-radius: 12px; }
.withdraw-recent-item-v59 { display: grid; grid-template-columns: 39px 1fr auto; align-items: center; gap: 8px; min-height: 61px; padding: 7px 9px; border-bottom: 1px solid #e3edf4; background: #fff; }
.withdraw-recent-item-v59:last-child { border-bottom: 0; }
.withdraw-recent-icon-v59 { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; color: #fff; background: linear-gradient(145deg, #31baf0, #0788dc); }
.withdraw-recent-item-v59 > div { display: grid; gap: 1px; min-width: 0; }
.withdraw-recent-item-v59 small { color: #7e91a3; font-size: 7px; }
.withdraw-recent-item-v59 strong { color: #075c97; font-size: 12px; }
.withdraw-recent-item-v59 div span { color: #8394a4; font-size: 7px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.withdraw-recent-item-v59 em { max-width: 74px; padding: 5px 7px; border-radius: 999px; color: #9b6900; background: #fff0be; font-size: 7px; font-style: normal; font-weight: 900; text-align: center; }
.withdraw-recent-item-v59.status-paid em { color: #087d4a; background: #ddf8e9; }
.withdraw-recent-item-v59.status-rejected em { color: #c22b34; background: #ffe4e7; }
.withdraw-recent-item-v59.status-refunded em { color: #08796f; background: #ddf7f3; }
.withdraw-recent-empty-v59 { display: grid; place-items: center; gap: 7px; min-height: 90px; color: #91a2b2; font-size: 9px; }
.withdraw-recent-empty-v59 i { font-size: 22px; }

.withdraw-bottom-nav-v59 a.active { color: #0788d9; background: #eaf8ff; border-radius: 15px 15px 0 0; }

@media (max-width: 1100px) {
  .withdraw-admin-overview-v59 { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .withdraw-admin-heading-v59 { align-items: stretch; flex-direction: column; }
  .withdraw-admin-waiting-v59 { align-self: flex-start; }
  .withdraw-toolbar-spacer-v59 { display: none; }
  .withdraw-pending-toolbar-v59,
  .withdraw-history-toolbar-v59 { align-items: stretch; }
  .withdraw-history-search-v59 { width: 100%; }
}

@media (max-width: 370px) {
  .withdraw-header-v59 { grid-template-columns: 41px 1fr auto; padding-inline: 7px; }
  .withdraw-balance-pill-v59 { padding-inline: 7px; }
  .withdraw-header-title-v59 h1 { font-size: 16px; }
  .withdraw-account-card-v59 { grid-template-columns: 48px 1fr; }
  .withdraw-account-edit-v59 { grid-column: 1 / -1; justify-self: end; }
  .withdraw-quick-amounts-v59 { grid-template-columns: repeat(2, 1fr); }
}


/* V59.1 — professional withdrawal notifications */
.withdraw-sound-toggle-v591 {
  min-width: 102px;
  border-color: #c5ced8;
  color: #5f6d82;
  background: #fff;
}
.withdraw-sound-toggle-v591:hover { color: #223553; background: #f6f9fc; }
.withdraw-sound-toggle-v591.is-on {
  color: #0877c8;
  border-color: #8acaf2;
  background: #eff9ff;
  box-shadow: 0 0 0 2px rgba(8,119,200,.07);
}
.withdraw-sound-toggle-v591 i { width: 15px; text-align: center; }

.withdraw-notification-stack-v591 {
  position: fixed;
  z-index: 9000;
  top: 18px;
  right: 18px;
  display: grid;
  gap: 10px;
  width: min(390px, calc(100vw - 32px));
  pointer-events: none;
}
.withdraw-notification-v591 {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  min-height: 82px;
  padding: 12px;
  overflow: hidden;
  border: 1px solid #b9daf0;
  border-left: 5px solid #118ed8;
  border-radius: 13px;
  color: #18324f;
  background: rgba(255,255,255,.98);
  box-shadow: 0 16px 42px rgba(24, 50, 79, .22);
  pointer-events: auto;
  animation: withdraw-notification-in-v591 .24s ease-out both;
}
.withdraw-notification-v591.is-leaving { animation: withdraw-notification-out-v591 .2s ease-in both; }
.withdraw-notification-icon-v591 {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  color: #fff;
  background: linear-gradient(145deg, #2bb8ee, #087fd2);
  box-shadow: 0 7px 15px rgba(8,127,210,.22);
}
.withdraw-notification-content-v591 { min-width: 0; }
.withdraw-notification-content-v591 strong { display: block; color: #0c6fae; font-size: 13px; }
.withdraw-notification-content-v591 p {
  margin: 4px 0 2px;
  overflow: hidden;
  color: #243a55;
  font-size: 12px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.withdraw-notification-content-v591 small {
  display: block;
  overflow: hidden;
  color: #8290a3;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.withdraw-notification-actions-v591 { display: grid; grid-template-columns: auto 28px; align-items: center; gap: 6px; }
.withdraw-notification-open-v591 {
  min-height: 31px;
  padding: 0 10px;
  border: 0;
  border-radius: 8px;
  color: #fff;
  background: #118ed8;
  font-size: 10px;
  font-weight: 900;
  cursor: pointer;
}
.withdraw-notification-open-v591:hover { background: #0879bf; }
.withdraw-notification-close-v591 {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid #d6e0e9;
  border-radius: 8px;
  color: #7d8a9b;
  background: #fff;
  cursor: pointer;
}
.withdraw-notification-close-v591:hover { color: #c92d36; border-color: #f2b9bd; background: #fff4f5; }
@keyframes withdraw-notification-in-v591 {
  from { opacity: 0; transform: translate3d(18px, -8px, 0) scale(.98); }
  to { opacity: 1; transform: translate3d(0,0,0) scale(1); }
}
@keyframes withdraw-notification-out-v591 {
  to { opacity: 0; transform: translate3d(18px, 0, 0) scale(.98); }
}
@media (max-width: 760px) {
  .withdraw-notification-stack-v591 { top: 10px; right: 10px; width: calc(100vw - 20px); }
  .withdraw-notification-v591 { grid-template-columns: 40px minmax(0, 1fr); }
  .withdraw-notification-actions-v591 { grid-column: 2; justify-content: end; }
  .withdraw-sound-toggle-v591 { min-width: 92px; }
}
@media (prefers-reduced-motion: reduce) {
  .withdraw-notification-v591,
  .withdraw-notification-v591.is-leaving { animation: none; }
}


/* =========================================================
   V59.2 — Unified logged-in member page width
========================================================= */
.app-wrap,
.lobby-v2.app-wrap,
.deposit-app,
.withdraw-app-v59,
.account-page-app,
.history-page-app,
.contact-page-app {
  width: 100%;
  max-width: var(--member-page-width);
  margin-left: auto;
  margin-right: auto;
}

.bottom-nav,
.deposit-header,
.deposit-bottom-nav,
.account-bottom-nav,
.contact-bottom-nav {
  width: min(100%, var(--member-page-width));
  max-width: var(--member-page-width);
}

/* =========================================================
   V59.3 — instant withdrawal review flow
========================================================= */
.withdraw-bank-account-v59 { gap: 10px; }
.withdraw-bank-icon-v59 {
  flex-basis: 36px;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: #f4f7fb;
}
.withdraw-bank-icon-v59 img { border-radius: 8px; }
.withdraw-account-number-v59 {
  color: #10243f;
  font-size: 16px;
  line-height: 1.05;
  letter-spacing: .35px;
}
.withdraw-bank-account-v59 small {
  color: #627187;
  font-size: 10px;
  font-weight: 600;
}
.withdraw-bank-account-v59 em { display: none !important; }
.withdraw-status-v59.status-deducted { color: #2456bd; background: #e7eeff; }

.withdraw-action-button-v593 {
  display: inline-grid;
  place-items: center;
  flex: 0 0 31px;
  width: 31px;
  min-width: 31px;
  max-width: 31px;
  height: 31px;
  min-height: 31px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  box-shadow: 0 3px 8px rgba(26,42,66,.14);
}
.withdraw-action-button-v593.is-approve { background: #079b58; }
.withdraw-action-button-v593.is-reject { background: #df2e37; }
.withdraw-action-button-v593:hover { filter: brightness(.94); transform: translateY(-1px); }

html.withdraw-decision-open-v593,
html.withdraw-decision-open-v593 body { overflow: hidden; }
.withdraw-decision-root-v593 {
  position: fixed;
  z-index: 9800;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 18px;
  opacity: 0;
  transition: opacity .15s ease;
}
.withdraw-decision-root-v593.is-open { opacity: 1; }
.withdraw-decision-root-v593[hidden] { display: none !important; }
.withdraw-decision-backdrop-v593 {
  position: absolute;
  inset: 0;
  background: rgba(11,24,43,.58);
  backdrop-filter: blur(4px);
}
.withdraw-decision-dialog-v593 {
  position: relative;
  width: min(470px, calc(100vw - 28px));
  max-height: calc(100dvh - 36px);
  padding: 22px;
  overflow: auto;
  border: 1px solid #d7e4ee;
  border-radius: 20px;
  color: #20324b;
  background: #fff;
  box-shadow: 0 28px 70px rgba(8,24,46,.34);
  transform: translateY(10px) scale(.985);
  transition: transform .15s ease;
}
.withdraw-decision-root-v593.is-open .withdraw-decision-dialog-v593 { transform: translateY(0) scale(1); }
.withdraw-decision-close-v593 {
  position: absolute;
  top: 13px;
  right: 13px;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid #d9e2eb;
  border-radius: 10px;
  color: #758398;
  background: #fff;
  cursor: pointer;
}
.withdraw-decision-icon-v593 {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-bottom: 12px;
  border-radius: 16px;
  color: #fff;
  background: linear-gradient(145deg,#20ad68,#087f4a);
  font-size: 24px;
  box-shadow: 0 10px 22px rgba(8,127,74,.2);
}
.withdraw-decision-dialog-v593[data-mode="reject"] .withdraw-decision-icon-v593 {
  background: linear-gradient(145deg,#ef5360,#c62331);
  box-shadow: 0 10px 22px rgba(198,35,49,.2);
}
.withdraw-decision-eyebrow-v593 {
  margin: 0 0 3px;
  color: #6f85a0;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 1.2px;
}
.withdraw-decision-dialog-v593 h2 { margin: 0; color: #172942; font-size: 20px; }
.withdraw-decision-subtitle-v593 { margin: 6px 0 16px; color: #728197; font-size: 11px; line-height: 1.55; }
.withdraw-decision-details-v593 {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 8px;
  padding: 11px;
  border: 1px solid #dce7f0;
  border-radius: 14px;
  background: #f7fbfe;
}
.withdraw-decision-detail-v593 {
  min-width: 0;
  padding: 8px 9px;
  border-radius: 10px;
  background: #fff;
}
.withdraw-decision-detail-v593 span { display: block; color: #8190a3; font-size: 9px; }
.withdraw-decision-detail-v593 strong {
  display: block;
  margin-top: 3px;
  overflow: hidden;
  color: #1c314e;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.withdraw-decision-detail-v593.is-amount strong { color: #087f4a; font-size: 17px; }
.withdraw-decision-detail-v593.is-account strong { font-size: 15px; letter-spacing: .35px; }
.withdraw-decision-note-v593 { display: grid; gap: 6px; margin-top: 13px; }
.withdraw-decision-note-v593 > span { color: #52647a; font-size: 10px; font-weight: 800; }
.withdraw-decision-note-v593 textarea {
  width: 100%;
  min-height: 78px;
  padding: 10px 11px;
  resize: vertical;
  border: 1px solid #cfdbe6;
  border-radius: 11px;
  outline: 0;
  color: #263952;
  background: #fff;
  font: inherit;
  font-size: 11px;
}
.withdraw-decision-note-v593 textarea:focus { border-color: #65b9ea; box-shadow: 0 0 0 3px rgba(41,154,219,.11); }
.withdraw-decision-actions-v593 { display: grid; gap: 8px; margin-top: 13px; }
.withdraw-decision-action-v593 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  border: 0;
  border-radius: 12px;
  color: #fff;
  background: linear-gradient(180deg,#18ad67,#07854c);
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}
.withdraw-decision-choice-v593 {
  display: grid;
  grid-template-columns: 42px minmax(0,1fr);
  align-items: center;
  gap: 10px;
  min-height: 62px;
  padding: 9px 11px;
  border: 1px solid #d8e2eb;
  border-radius: 13px;
  text-align: left;
  background: #fff;
  cursor: pointer;
}
.withdraw-decision-choice-v593 > i {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  font-size: 18px;
}
.withdraw-decision-choice-v593 span { display: grid; gap: 3px; }
.withdraw-decision-choice-v593 strong { color: #20334d; font-size: 12px; }
.withdraw-decision-choice-v593 small { color: #7d8b9d; font-size: 9px; line-height: 1.4; }
.withdraw-decision-choice-v593.is-refund:hover { border-color: #8ed5b3; background: #f1fcf6; }
.withdraw-decision-choice-v593.is-refund > i { color: #087f4a; background: #ddf8ea; }
.withdraw-decision-choice-v593.is-no-refund:hover { border-color: #f1aeb4; background: #fff5f6; }
.withdraw-decision-choice-v593.is-no-refund > i { color: #c62331; background: #ffe5e8; }
.withdraw-decision-cancel-v593 {
  width: 100%;
  min-height: 39px;
  margin-top: 9px;
  border: 0;
  border-radius: 10px;
  color: #69798d;
  background: #eef3f7;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}

.withdraw-account-icon-v59 img {
  width: 100%;
  height: 100%;
  padding: 5px;
  object-fit: contain;
  border-radius: 14px;
  background: #fff;
}
.withdraw-account-card-v59.bank-theme-default { background: linear-gradient(135deg,#4169b2,#263f79 62%,#1d315f); }
.withdraw-account-card-v59.bank-theme-kbank { background: linear-gradient(135deg,#21a867,#087b47 68%,#05623a); }
.withdraw-account-card-v59.bank-theme-ktb { background: linear-gradient(135deg,#27bde9,#008fca 68%,#0873aa); }
.withdraw-account-card-v59.bank-theme-scb { background: linear-gradient(135deg,#7650a5,#553083 68%,#3e2166); }
.withdraw-account-card-v59.bank-theme-bbl { background: linear-gradient(135deg,#285a9d,#143d78 68%,#0b2c5f); }
.withdraw-account-card-v59.bank-theme-bay { color:#242424; background: linear-gradient(135deg,#ffe04e,#f4c400 68%,#dcae00); }
.withdraw-account-card-v59.bank-theme-bay .withdraw-account-detail-v59 small,
.withdraw-account-card-v59.bank-theme-bay .withdraw-account-detail-v59 span { color: rgba(36,36,36,.78); }
.withdraw-account-card-v59.bank-theme-bay .withdraw-account-edit-v59 { color:#2c2c2c; border-color:rgba(30,30,30,.35); background:rgba(255,255,255,.34); }
.withdraw-account-card-v59.bank-theme-gsb { background: linear-gradient(135deg,#f06aa5,#d93f87 68%,#b92c6e); }
.withdraw-account-card-v59.bank-theme-cimb { background: linear-gradient(135deg,#d33a4c,#a9162c 68%,#7f1022); }
.withdraw-account-card-v59.bank-theme-kkp { background: linear-gradient(135deg,#33a7e2,#147fc1 68%,#08629d); }
.withdraw-account-card-v59.bank-theme-ttb { background: linear-gradient(135deg,#f56671,#d94b93 48%,#684bb4); }
.withdraw-account-card-v59.bank-theme-baac { background: linear-gradient(135deg,#36a56d,#198454 68%,#0d6740); }
.withdraw-account-card-v59.bank-theme-lhbank { background: linear-gradient(135deg,#8d72b8,#674b93 68%,#4c3377); }
.withdraw-account-card-v59.bank-theme-uob { background: linear-gradient(135deg,#176aa1,#064b7b 68%,#05375c); }
.withdraw-account-card-v59.bank-theme-truemoney { background: linear-gradient(135deg,#ff7047,#ed4a24 68%,#c83317); }

@media (max-width: 520px) {
  .withdraw-decision-root-v593 { padding: 10px; }
  .withdraw-decision-dialog-v593 { width: 100%; padding: 18px 15px; border-radius: 17px; }
  .withdraw-decision-details-v593 { grid-template-columns: 1fr 1fr; padding: 8px; }
}
@media (max-width: 370px) {
  .withdraw-account-detail-v59 strong { font-size: 16px; }
  .withdraw-decision-details-v593 { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .withdraw-decision-root-v593,
  .withdraw-decision-dialog-v593,
  .withdraw-action-button-v593 { transition: none; transform: none; }
}

/* =========================================================
   V59.3.1 — CUSTOMER WITHDRAWAL READABILITY
   Larger, clearer typography without changing page width.
========================================================= */
.withdraw-page-body-v59 .withdraw-header-title-v59 p {
  font-size: 11px;
  line-height: 1.35;
}
.withdraw-page-body-v59 .withdraw-balance-pill-v59 strong {
  min-width: 44px;
  font-size: 13px;
}
.withdraw-page-body-v59 .withdraw-time-note-v59 {
  min-height: 38px;
  padding: 8px 11px;
  font-size: 11px;
  line-height: 1.4;
}
.withdraw-page-body-v59 .withdraw-account-detail-v59 {
  gap: 4px;
}
.withdraw-page-body-v59 .withdraw-account-detail-v59 small {
  font-size: 11px;
  line-height: 1.25;
}
.withdraw-page-body-v59 .withdraw-account-detail-v59 strong {
  font-size: 20px;
  line-height: 1.2;
}
.withdraw-page-body-v59 .withdraw-account-detail-v59 span {
  font-size: 11px;
  line-height: 1.35;
}
.withdraw-page-body-v59 .withdraw-account-edit-v59 {
  min-height: 35px;
  padding-inline: 11px;
  font-size: 11px;
}
.withdraw-page-body-v59 .withdraw-active-card-v59 small {
  font-size: 10px;
}
.withdraw-page-body-v59 .withdraw-active-card-v59 strong {
  font-size: 14px;
  line-height: 1.3;
}
.withdraw-page-body-v59 .withdraw-active-card-v59 p {
  font-size: 10px;
  line-height: 1.4;
}
.withdraw-page-body-v59 .withdraw-active-card-v59 > span {
  font-size: 9px;
  line-height: 1.25;
}
.withdraw-page-body-v59 .withdraw-form-card-v59 h2,
.withdraw-page-body-v59 .withdraw-recent-v59 h2 {
  font-size: 15px;
  line-height: 1.25;
}
.withdraw-page-body-v59 .withdraw-form-card-v59 header p,
.withdraw-page-body-v59 .withdraw-recent-v59 header p {
  margin-top: 4px;
  font-size: 10px;
  line-height: 1.4;
}
.withdraw-page-body-v59 .withdraw-all-button-v59 {
  min-height: 33px;
  font-size: 10px;
}
.withdraw-page-body-v59 .withdraw-quick-amounts-v59 button {
  min-height: 36px;
  font-size: 11px;
}
.withdraw-page-body-v59 .withdraw-summary-v59 > div {
  min-height: 38px;
  font-size: 11px;
}
.withdraw-page-body-v59 .withdraw-summary-v59 strong {
  font-size: 13px;
}
.withdraw-page-body-v59 .withdraw-security-note-v59 p {
  font-size: 10.5px;
  line-height: 1.55;
}
.withdraw-page-body-v59 .withdraw-form-message-v59 {
  min-height: 16px;
  font-size: 10.5px;
  line-height: 1.4;
}
.withdraw-page-body-v59 .withdraw-submit-v59 {
  min-height: 50px;
  font-size: 14px;
}
.withdraw-page-body-v59 .withdraw-recent-v59 > header a {
  font-size: 10px;
}
.withdraw-page-body-v59 .withdraw-recent-item-v59 {
  min-height: 67px;
  padding-block: 9px;
}
.withdraw-page-body-v59 .withdraw-recent-item-v59 small {
  font-size: 9px;
  line-height: 1.3;
}
.withdraw-page-body-v59 .withdraw-recent-item-v59 strong {
  font-size: 13px;
  line-height: 1.3;
}
.withdraw-page-body-v59 .withdraw-recent-item-v59 div span {
  font-size: 9px;
  line-height: 1.35;
}
.withdraw-page-body-v59 .withdraw-recent-item-v59 em {
  font-size: 9px;
  line-height: 1.25;
}
.withdraw-page-body-v59 .withdraw-recent-empty-v59 {
  font-size: 10px;
}
.withdraw-page-body-v59 .withdraw-bottom-nav-v59 a {
  font-size: 9px;
}
.withdraw-page-body-v59 .withdraw-bottom-nav-v59 a i {
  font-size: 17px;
}

@media (max-width: 370px) {
  .withdraw-page-body-v59 .withdraw-account-detail-v59 strong {
    font-size: 18px;
  }
  .withdraw-page-body-v59 .withdraw-account-detail-v59 small,
  .withdraw-page-body-v59 .withdraw-account-detail-v59 span {
    font-size: 10px;
  }
  .withdraw-page-body-v59 .withdraw-form-card-v59 h2,
  .withdraw-page-body-v59 .withdraw-recent-v59 h2 {
    font-size: 14px;
  }
}


/* V59.3.2 — withdrawal admin action repair */
.admin-body .withdraw-actions-cell-v59 {
  min-width: 124px;
  overflow: visible !important;
}
.admin-body .withdraw-actions-v59 {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  white-space: nowrap;
}
.admin-body .withdraw-info-button-v59 {
  flex: 0 0 31px;
  width: 31px;
  min-width: 31px;
  max-width: 31px;
  height: 31px;
  min-height: 31px;
  padding: 0 !important;
  border-radius: 7px;
}
.admin-body .withdraw-action-button-v593 {
  padding: 0 !important;
  border-radius: 7px;
  line-height: 1;
}
.admin-body .withdraw-action-button-v593 i,
.admin-body .withdraw-info-button-v59 i {
  margin: 0 !important;
  font-size: 15px;
  line-height: 1;
}


/* =========================================================
   V59.3.5 — Withdrawal history matching legacy workflow
   ========================================================= */
.withdraw-data-table-v59.is-history-v5935 {
  min-width: 1260px;
}

.withdraw-data-table-v59.is-history-v5935 th:nth-child(1) { width: 42px; }
.withdraw-data-table-v59.is-history-v5935 th:nth-child(2) { width: 145px; }
.withdraw-data-table-v59.is-history-v5935 th:nth-child(3) { width: 260px; }
.withdraw-data-table-v59.is-history-v5935 th:nth-child(4),
.withdraw-data-table-v59.is-history-v5935 th:nth-child(5) { width: 105px; }
.withdraw-data-table-v59.is-history-v5935 th:nth-child(6) { width: 145px; }
.withdraw-data-table-v59.is-history-v5935 th:nth-child(7) { width: 115px; }
.withdraw-data-table-v59.is-history-v5935 th:nth-child(8) { width: 125px; }
.withdraw-data-table-v59.is-history-v5935 th:nth-child(9) { width: 155px; }
.withdraw-data-table-v59.is-history-v5935 th:nth-child(10) { width: 170px; }

.withdraw-history-row-v5935 td {
  min-height: 60px;
}

.withdraw-history-admin-v5935 {
  color: #334863;
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
}

.withdraw-history-approved-at-v5935 {
  color: #455870;
  font-size: 10px;
}

.withdraw-history-decision-v5935 {
  color: #718096;
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
}

.withdraw-history-decision-v5935.is-paid {
  color: #14804a;
}

.withdraw-history-decision-v5935.is-refunded,
.withdraw-history-decision-v5935.is-rejected {
  color: #c42d35;
}

.withdraw-data-table-v59.is-history-v5935 .withdraw-money-v59.is-reported,
.withdraw-data-table-v59.is-history-v5935 .withdraw-money-v59.is-paid {
  font-size: 12px;
  font-weight: 600;
}

.withdraw-data-table-v59.is-history-v5935 .withdraw-money-v59.is-paid {
  color: #1d2f49;
}

/* V59.3.9 — withdrawal history column cleanup */
.withdraw-data-table-v59.is-history-v5935 td:nth-child(3) {
  padding-inline: 12px;
}

.withdraw-data-table-v59.is-history-v5935 td:nth-child(3) .withdraw-bank-v59 {
  width: 100%;
}

.withdraw-data-table-v59.is-history-v5935 td:nth-child(3) .withdraw-bank-detail-v59 {
  min-width: 0;
}

.withdraw-data-table-v59.is-history-v5935 td:nth-child(3) .withdraw-account-number-v59 {
  font-size: 17px;
  letter-spacing: .2px;
}


/* V60.1 CLEANUP: legacy Lobby bottom-nav rules were removed.
   Current member navigation is generated by js/ui.js and uses
   .member-unified-bottom-nav only. */
/* =========================================================
   V59.4.1 — One unified member bottom navigation on every page
========================================================= */
body.has-member-unified-nav .member-unified-bottom-nav {
  position: fixed !important;
  z-index: 70000 !important;
  left: 50% !important;
  bottom: max(8px, env(safe-area-inset-bottom)) !important;
  transform: translateX(-50%) !important;
  width: min(calc(100% - 16px), 414px) !important;
  height: 76px !important;
  padding: 8px 7px !important;
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  align-items: stretch !important;
  gap: 4px !important;
  overflow: visible !important;
  border: 1px solid rgba(124, 191, 227, .55) !important;
  border-radius: 22px !important;
  background: rgba(255, 255, 255, .96) !important;
  box-shadow: 0 12px 34px rgba(4, 66, 105, .24), inset 0 1px 0 rgba(255,255,255,.95) !important;
  backdrop-filter: blur(14px) saturate(1.12) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.12) !important;
}

body.has-member-unified-nav .member-unified-bottom-nav::before,
body.has-member-unified-nav .member-unified-bottom-nav::after,
body.has-member-unified-nav .member-unified-bottom-nav .bottom-item::before,
body.has-member-unified-nav .member-unified-bottom-nav .bottom-item::after {
  content: none !important;
}

body.has-member-unified-nav .member-unified-bottom-nav .bottom-item {
  position: relative !important;
  min-width: 0 !important;
  height: 60px !important;
  padding: 6px 2px 5px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  border: 0 !important;
  border-radius: 16px !important;
  color: #527388 !important;
  background: transparent !important;
  text-decoration: none !important;
  text-shadow: none !important;
  box-shadow: none !important;
  cursor: pointer !important;
  overflow: visible !important;
  transition: transform 140ms ease, background 140ms ease, color 140ms ease, box-shadow 140ms ease !important;
}

body.has-member-unified-nav .member-unified-bottom-nav .bottom-item:hover,
body.has-member-unified-nav .member-unified-bottom-nav .bottom-item:active {
  background: #edf8fe !important;
  transform: translateY(-1px) !important;
}

body.has-member-unified-nav .member-unified-bottom-nav .bottom-item i {
  width: 31px !important;
  height: 31px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 11px !important;
  color: #148fd6 !important;
  background: #eaf7fe !important;
  box-shadow: inset 0 0 0 1px rgba(34, 158, 220, .10) !important;
  font-size: 16px !important;
  line-height: 1 !important;
  filter: none !important;
}





body.has-member-unified-nav .member-unified-bottom-nav .bottom-item > span:not(.bottom-badge) {
  display: block !important;
  color: inherit !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  line-height: 1.05 !important;
  white-space: nowrap !important;
}

body.has-member-unified-nav .member-unified-bottom-nav .center-home.bottom-item {
  height: 64px !important;
  margin-top: -6px !important;
  padding: 7px 2px 6px !important;
  gap: 4px !important;
  justify-content: center !important;
  border: 1px solid rgba(255,255,255,.68) !important;
  border-radius: 18px !important;
  color: #fff !important;
  background: linear-gradient(180deg, #35baf2 0%, #118ed9 100%) !important;
  box-shadow: 0 9px 18px rgba(17, 142, 217, .30), inset 0 1px 0 rgba(255,255,255,.35) !important;
}

body.has-member-unified-nav .member-unified-bottom-nav .center-home.bottom-item:hover,
body.has-member-unified-nav .member-unified-bottom-nav .center-home.bottom-item:active {
  background: linear-gradient(180deg, #2fb3eb 0%, #0c83cc 100%) !important;
}

body.has-member-unified-nav .member-unified-bottom-nav .center-home.bottom-item i {
  width: 34px !important;
  height: 34px !important;
  border-radius: 12px !important;
  color: #fff !important;
  background: rgba(255,255,255,.18) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28) !important;
  font-size: 17px !important;
}

body.has-member-unified-nav .member-unified-bottom-nav .bottom-item.active:not(.center-home) {
  color: #087fc7 !important;
  background: #eaf8ff !important;
  box-shadow: inset 0 0 0 1px rgba(26, 151, 216, .10) !important;
}

body.has-member-unified-nav .member-unified-bottom-nav .bottom-badge {
  position: absolute !important;
  top: 1px !important;
  right: calc(50% - 23px) !important;
  min-width: 18px !important;
  height: 18px !important;
  padding: 0 4px !important;
  display: grid !important;
  place-items: center !important;
  border: 2px solid #fff !important;
  border-radius: 999px !important;
  color: #fff !important;
  background: #f05267 !important;
  font-size: 9px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  box-shadow: 0 3px 8px rgba(174, 28, 63, .28) !important;
}

body.has-member-unified-nav .member-unified-bottom-nav .bottom-badge[hidden] {
  display: none !important;
}

body.has-member-unified-nav .app-wrap,
body.has-member-unified-nav .deposit-app,
body.has-member-unified-nav .withdraw-app-v59,
body.has-member-unified-nav .account-page-app,
body.has-member-unified-nav .history-page-app,
body.has-member-unified-nav .contact-page-app {
  padding-bottom: calc(106px + env(safe-area-inset-bottom)) !important;
}

@media (max-width: 370px) {
  body.has-member-unified-nav .member-unified-bottom-nav {
    width: min(calc(100% - 10px), 414px) !important;
    padding-inline: 5px !important;
    gap: 2px !important;
  }

  body.has-member-unified-nav .member-unified-bottom-nav .bottom-item > span:not(.bottom-badge) {
    font-size: 9px !important;
  }
}

/* =========================================================
   V60 MEMBER THEME STUDIO — ADMIN ONLY
========================================================= */
.member-theme-studio { display: grid; gap: 16px; }
.member-theme-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 22px;
  border: 1px solid #cbd8e8;
  border-radius: 16px;
  color: #fff;
  background: linear-gradient(135deg, #122b57 0%, #1e5ea1 52%, #2aa9df 100%);
  box-shadow: 0 12px 28px rgba(24, 72, 119, .18);
}
.member-theme-eyebrow { display: block; margin-bottom: 5px; color: rgba(255,255,255,.72); font-size: 9px; font-weight: 900; letter-spacing: .14em; }
.member-theme-hero h3 { margin: 0; font-size: 22px; }
.member-theme-hero p { max-width: 760px; margin: 7px 0 0; color: rgba(255,255,255,.84); font-size: 12px; line-height: 1.6; }
.member-theme-current { flex: 0 0 230px; display: grid; gap: 4px; padding: 14px 16px; border: 1px solid rgba(255,255,255,.28); border-radius: 13px; background: rgba(255,255,255,.12); backdrop-filter: blur(7px); }
.member-theme-current span { color: rgba(255,255,255,.72); font-size: 9px; }
.member-theme-current strong { font-size: 16px; }
.member-theme-current small { color: rgba(255,255,255,.82); font-size: 9px; line-height: 1.45; }
.member-theme-message { min-height: 18px; margin: -6px 0 0; color: #14814f; font-size: 11px; font-weight: 800; }
.member-theme-message.is-error { color: #d33845; }
.member-theme-layout { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(340px, .75fr); gap: 16px; align-items: start; }
.member-theme-editor { display: grid; gap: 14px; }
.member-theme-card { padding: 17px; border: 1px solid #ccd8e6; border-radius: 15px; background: #fff; box-shadow: 0 5px 15px rgba(32, 54, 82, .07); }
.member-theme-card > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.member-theme-card h4 { margin: 0; color: #1a2b45; font-size: 15px; }
.member-theme-card h4 i { width: 19px; color: #247cc2; }
.member-theme-card header p { margin: 4px 0 0; color: #7a889c; font-size: 10px; line-height: 1.45; }
.member-theme-preset-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 9px; }
.member-theme-preset-card { position: relative; display: grid; grid-template-rows: 45px 1fr; gap: 8px; min-height: 118px; padding: 8px; overflow: hidden; border: 1px solid #d5dee9; border-radius: 12px; color: #253750; background: #fff; text-align: left; cursor: pointer; transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease; }
.member-theme-preset-card:hover { transform: translateY(-2px); border-color: #78bce9; box-shadow: 0 8px 17px rgba(31, 105, 158, .13); }
.member-theme-preset-card.active { border-color: #0e92dc; box-shadow: 0 0 0 3px rgba(14,146,220,.12); }
.member-theme-preset-strip { display: block; border-radius: 8px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.28); }
.member-theme-preset-copy { display: grid; gap: 2px; min-width: 0; }
.member-theme-preset-copy strong { font-size: 11px; }
.member-theme-preset-copy small { color: #7d8c9e; font-size: 8px; line-height: 1.35; }
.member-theme-preset-card > i { position: absolute; top: 6px; right: 6px; color: #fff; opacity: 0; filter: drop-shadow(0 1px 2px rgba(0,0,0,.25)); }
.member-theme-preset-card.active > i { opacity: 1; }
.member-theme-card-heading { align-items: center !important; }
.member-theme-switch { display: inline-flex; align-items: center; gap: 7px; color: #425774; font-size: 10px; font-weight: 800; cursor: pointer; }
.member-theme-switch input { position: absolute; opacity: 0; pointer-events: none; }
.member-theme-switch span { position: relative; width: 36px; height: 20px; border-radius: 999px; background: #cdd7e2; transition: background .15s ease; }
.member-theme-switch span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 2px 5px rgba(0,0,0,.16); transition: transform .15s ease; }
.member-theme-switch input:checked + span { background: #1b91d5; }
.member-theme-switch input:checked + span::after { transform: translateX(16px); }
.member-theme-name-field { display: grid; gap: 6px; margin-bottom: 12px; color: #42536a; font-size: 10px; font-weight: 800; }
.member-theme-name-field input,
.member-theme-option-grid select { min-height: 40px; border: 1px solid #ccd7e5; border-radius: 9px; padding: 0 11px; color: #273850; background: #fff; font-size: 11px; outline: none; }
.member-theme-name-field input:focus,
.member-theme-option-grid select:focus { border-color: #269cdc; box-shadow: 0 0 0 3px rgba(38,156,220,.1); }
.member-theme-color-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; }
.member-theme-color-grid.is-advanced { grid-template-columns: repeat(3, minmax(0,1fr)); }
.member-theme-color-field { display: grid; gap: 6px; color: #455870; font-size: 10px; font-weight: 800; }
.member-theme-color-field > div { display: grid; grid-template-columns: 44px 1fr; min-height: 40px; overflow: hidden; border: 1px solid #ccd7e4; border-radius: 9px; background: #fff; }
.member-theme-color-field input[type="color"] { width: 44px; height: 40px; padding: 0; border: 0; background: transparent; cursor: pointer; }
.member-theme-color-field input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.member-theme-color-field input[type="color"]::-webkit-color-swatch { border: 0; }
.member-theme-color-field input[type="text"] { min-width: 0; border: 0; padding: 0 9px; color: #273850; background: transparent; font: 800 10px/1 monospace; text-transform: uppercase; outline: none; }
.member-theme-color-field input:disabled { opacity: .58; cursor: not-allowed; }
.member-theme-range-row, .member-theme-range-grid { margin-top: 14px; }
.member-theme-range-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.member-theme-range-row label, .member-theme-range-grid label { display: grid; gap: 7px; color: #455870; font-size: 10px; font-weight: 800; }
.member-theme-range-row label span, .member-theme-range-grid label span { display: flex; justify-content: space-between; gap: 8px; }
.member-theme-range-row b, .member-theme-range-grid b { color: #0d83c8; }
.member-theme-range-row input, .member-theme-range-grid input { accent-color: #168fd7; }
.member-theme-auto-button { min-height: 34px; padding: 0 10px; border: 1px solid #8cc8ec; border-radius: 8px; color: #087bc2; background: #eef9ff; font-size: 10px; font-weight: 900; cursor: pointer; }
.member-theme-auto-button:hover { background: #dff4ff; }
.member-theme-option-grid { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 10px; }
.member-theme-option-grid label { display: grid; gap: 6px; color: #455870; font-size: 10px; font-weight: 800; }
.member-theme-contrast-card > header > span { padding: 5px 9px; border-radius: 999px; font-size: 9px; font-weight: 900; }
.member-theme-contrast-card > header > span.is-pass { color: #087849; background: #dff7e9; }
.member-theme-contrast-card > header > span.is-fail { color: #bd303b; background: #ffe4e7; }
.member-theme-contrast-list { display: grid; gap: 7px; }
.member-theme-contrast-list > div { display: grid; grid-template-columns: 42px 1fr auto; align-items: center; gap: 9px; padding: 9px 10px; border: 1px solid #d8e0e9; border-radius: 10px; background: #f9fbfd; }
.member-theme-contrast-list > div.is-pass { border-color: #c9e8d8; background: #f4fcf7; }
.member-theme-contrast-list > div.is-fail { border-color: #f0c8ce; background: #fff6f7; }
.member-theme-contrast-swatches { display: flex; }
.member-theme-contrast-swatches i { width: 23px; height: 23px; border: 2px solid #fff; border-radius: 7px; box-shadow: 0 2px 5px rgba(0,0,0,.12); }
.member-theme-contrast-swatches i + i { margin-left: -7px; }
.member-theme-contrast-list strong { display: block; color: #2c3d55; font-size: 10px; }
.member-theme-contrast-list small { color: #7b899a; font-size: 8px; }
.member-theme-contrast-list b { color: #148253; font-size: 9px; }
.member-theme-contrast-list .is-fail b { color: #cf3542; }
.member-theme-history { display: grid; gap: 7px; }
.member-theme-history-row { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 10px; padding: 9px 10px; border: 1px solid #d8e0e9; border-radius: 10px; }
.member-theme-history-row strong { display: block; color: #263850; font-size: 10px; }
.member-theme-history-row small { color: #7e8b9d; font-size: 8px; }
.member-theme-history-row > span { padding: 4px 7px; border-radius: 999px; color: #6b7889; background: #edf1f5; font-size: 8px; font-weight: 900; }
.member-theme-history-row > span.is-current { color: #087a4a; background: #ddf7e8; }
.member-theme-history-row button { min-height: 30px; padding: 0 9px; border: 1px solid #c7d2df; border-radius: 7px; color: #42536b; background: #fff; font-size: 9px; font-weight: 800; cursor: pointer; }
.member-theme-history-row button:disabled { opacity: .45; cursor: not-allowed; }
.member-theme-history-empty { margin: 0; color: #8290a0; font-size: 10px; }
.member-theme-preview-column { min-width: 0; }
.member-theme-preview-sticky { position: sticky; top: 18px; display: grid; gap: 11px; padding: 14px; border: 1px solid #cbd7e5; border-radius: 16px; background: #f6f9fc; box-shadow: 0 8px 24px rgba(32,54,82,.09); }
.member-theme-preview-sticky > header { display: flex; justify-content: space-between; gap: 10px; align-items: center; }
.member-theme-preview-sticky h4 { margin: 0; color: #1c2e47; font-size: 14px; }
.member-theme-preview-sticky header p { margin: 3px 0 0; color: #7b899a; font-size: 9px; }
.member-theme-preview-sticky header > span { max-width: 130px; overflow: hidden; padding: 5px 8px; border-radius: 999px; color: #0b79bd; background: #e3f4ff; font-size: 8px; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; }
.member-theme-preview-tabs { display: grid; grid-template-columns: repeat(5,1fr); gap: 4px; padding: 4px; border-radius: 10px; background: #e7edf4; }
.member-theme-preview-tabs button { min-height: 30px; border: 0; border-radius: 7px; color: #637185; background: transparent; font-size: 8px; font-weight: 800; cursor: pointer; }
.member-theme-preview-tabs button.active { color: #0d6da8; background: #fff; box-shadow: 0 3px 8px rgba(42,65,91,.1); }
.member-theme-phone { --mt-primary:#0569C8; --mt-secondary:#1EA7F2; --mt-accent:#7ADFFF; --mt-text-on-primary:#fff; --mt-heading:#123459; --mt-body:#35536B; --mt-muted:#6F8799; --mt-page-bg:#DFF5FF; --mt-surface:#fff; --mt-surface-alt:#EDF9FF; --mt-border:#C8E4F3; --mt-input-bg:#F9FDFF; --mt-gradient-angle:135deg; --mt-card-radius:17px; --mt-button-radius:13px; width: min(100%, 350px); aspect-ratio: 9 / 16; margin: 0 auto; overflow: hidden; border: 8px solid #1e2b3f; border-radius: 28px; background: var(--mt-page-bg); box-shadow: 0 18px 34px rgba(28,44,65,.2); }
.mtp-screen { position: relative; width: 100%; height: 100%; overflow: hidden; color: var(--mt-body); background: var(--mt-page-bg); }
.mtp-screen::before { content:""; position:absolute; inset:0; pointer-events:none; opacity:.48; }
.member-theme-phone[data-pattern="dots"] .mtp-screen::before { background: radial-gradient(circle at 6px 6px, rgba(255,255,255,.9) 0 1.4px, transparent 1.7px) 0 0/17px 17px; }
.member-theme-phone[data-pattern="grid"] .mtp-screen::before { background: linear-gradient(rgba(255,255,255,.35) 1px, transparent 1px), linear-gradient(90deg,rgba(255,255,255,.35) 1px, transparent 1px); background-size:20px 20px; }
.member-theme-phone[data-pattern="soft-gradient"] .mtp-screen::before { background: radial-gradient(circle at 20% 10%, rgba(255,255,255,.9), transparent 34%), radial-gradient(circle at 90% 20%, var(--mt-accent), transparent 38%); opacity:.3; }
.mtp-header { position: relative; z-index:2; display:grid; grid-template-columns:32px 1fr auto; align-items:center; gap:7px; min-height:50px; padding:7px 9px; color:var(--mt-text-on-primary); background:linear-gradient(var(--mt-gradient-angle),var(--mt-primary),var(--mt-secondary),var(--mt-accent)); }
.mtp-header b { text-align:center; font-size:11px; }
.mtp-header span { padding:5px 7px; border-radius:8px; color:var(--mt-primary); background:var(--mt-surface); font-size:8px; font-weight:900; }
.mtp-page { position:relative; z-index:1; display:grid; gap:8px; padding:9px 9px 62px; }
.mtp-page.is-blurred { filter: blur(2px); opacity:.55; }
.mtp-notice,.mtp-note { padding:7px 8px; border:1px solid var(--mt-border); border-radius:10px; color:var(--mt-body); background:var(--mt-surface-alt); font-size:7px; }
.mtp-hero { display:grid; place-items:center; min-height:86px; border-radius:var(--mt-card-radius); color:var(--mt-text-on-primary); background:linear-gradient(var(--mt-gradient-angle),var(--mt-primary),var(--mt-secondary),var(--mt-accent)); font-size:18px; font-weight:900; }
.mtp-hero small { display:block; font-size:7px; opacity:.85; }
.mtp-shortcuts,.mtp-tabs,.mtp-quick { display:grid; grid-template-columns:repeat(4,1fr); gap:5px; }
.mtp-shortcuts span,.mtp-tabs span,.mtp-tabs b,.mtp-quick span { display:grid; place-items:center; min-height:31px; border:1px solid var(--mt-border); border-radius:9px; color:var(--mt-body); background:var(--mt-surface); font-size:7px; font-weight:800; }
.mtp-tabs { grid-template-columns:repeat(3,1fr); }
.mtp-tabs b { color:var(--mt-text-on-primary); background:linear-gradient(var(--mt-gradient-angle),var(--mt-primary),var(--mt-secondary)); }
.mtp-section-title { display:flex; align-items:center; justify-content:space-between; padding:7px 9px; border-radius:10px; color:var(--mt-text-on-primary); background:linear-gradient(var(--mt-gradient-angle),var(--mt-primary),var(--mt-secondary)); font-size:9px; font-weight:900; }
.mtp-games { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
.mtp-games i { aspect-ratio:1/1.2; border-radius:11px; background:linear-gradient(145deg,var(--mt-surface-alt),var(--mt-accent)); box-shadow:inset 0 0 0 1px var(--mt-border); }
.mtp-nav { position:absolute; z-index:4; left:7px; right:7px; bottom:0; display:grid; grid-template-columns:repeat(5,1fr); align-items:end; min-height:52px; padding:4px; border:1px solid color-mix(in srgb,var(--mt-border) 76%,transparent); border-radius:16px 16px 0 0; background:color-mix(in srgb,var(--mt-surface) 88%,transparent); backdrop-filter:blur(7px); }
.member-theme-phone[data-nav-style="solid"] .mtp-nav { color:var(--mt-text-on-primary); background:var(--mt-primary); }
.member-theme-phone[data-nav-style="gradient"] .mtp-nav { color:var(--mt-text-on-primary); background:linear-gradient(var(--mt-gradient-angle),var(--mt-primary),var(--mt-secondary)); }
.mtp-nav span { display:grid; justify-items:center; gap:2px; color:var(--mt-muted); font-size:6px; font-weight:800; }
.mtp-nav span.active { padding:5px 2px; border-radius:10px; color:var(--mt-text-on-primary); background:linear-gradient(var(--mt-gradient-angle),var(--mt-primary),var(--mt-secondary)); }
.mtp-bank { display:grid; grid-template-columns:42px 1fr; gap:9px; align-items:center; min-height:70px; padding:10px; border-radius:var(--mt-card-radius); color:var(--mt-text-on-primary); background:linear-gradient(var(--mt-gradient-angle),var(--mt-primary),var(--mt-secondary)); }
.mtp-bank > i { display:grid; place-items:center; width:40px; height:40px; border-radius:12px; color:var(--mt-primary); background:var(--mt-surface); }
.mtp-bank div { display:grid; gap:1px; }
.mtp-bank small,.mtp-bank em { font-size:6px; font-style:normal; opacity:.84; }
.mtp-bank strong { font-size:13px; }
.mtp-card { display:grid; gap:8px; padding:11px; border:1px solid var(--mt-border); border-radius:var(--mt-card-radius); background:var(--mt-surface); }
.mtp-card h5 { margin:0; color:var(--mt-heading); font-size:10px; }
.mtp-input { padding:11px; border:1px solid var(--mt-border); border-radius:var(--mt-button-radius); color:var(--mt-primary); background:var(--mt-input-bg); font-size:16px; font-weight:900; }
.mtp-card button,.mtp-modal button { min-height:37px; border:0; border-radius:var(--mt-button-radius); color:var(--mt-text-on-primary); background:linear-gradient(var(--mt-gradient-angle),var(--mt-primary),var(--mt-secondary)); font-size:8px; font-weight:900; }
.member-theme-phone[data-button-style="solid"] .mtp-card button,.member-theme-phone[data-button-style="solid"] .mtp-modal button { background:var(--mt-primary); }
.member-theme-phone[data-button-style="outline"] .mtp-card button,.member-theme-phone[data-button-style="outline"] .mtp-modal button { color:var(--mt-primary); border:1px solid var(--mt-primary); background:transparent; }
.mtp-history { display:grid; gap:6px; }
.mtp-history article { display:grid; grid-template-columns:34px 1fr auto; gap:7px; align-items:center; padding:7px; border:1px solid var(--mt-border); border-radius:10px; background:var(--mt-surface-alt); }
.mtp-history article > i { display:grid; place-items:center; width:32px; height:32px; border-radius:10px; color:var(--mt-text-on-primary); background:linear-gradient(var(--mt-gradient-angle),var(--mt-primary),var(--mt-secondary)); }
.mtp-history article div { display:grid; }
.mtp-history small,.mtp-history em { color:var(--mt-muted); font-size:6px; font-style:normal; }
.mtp-history strong { color:var(--mt-heading); font-size:9px; }
.mtp-history article > b { padding:4px 5px; border-radius:999px; color:#9b6900; background:#fff0be; font-size:6px; }
.mtp-modal { position:absolute; z-index:5; top:50%; left:50%; width:78%; padding:15px; border:1px solid var(--mt-border); border-radius:20px; background:var(--mt-surface); box-shadow:0 17px 40px rgba(0,0,0,.24); transform:translate(-50%,-50%); text-align:center; }
.mtp-modal-icon { display:grid; place-items:center; width:39px; height:39px; margin:0 auto 7px; border-radius:12px; color:var(--mt-primary); background:var(--mt-surface-alt); font-weight:900; }
.mtp-modal h5 { margin:0; color:var(--mt-heading); font-size:12px; }
.mtp-modal p { color:var(--mt-muted); font-size:7px; }
.mtp-modal > div:last-child { display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.mtp-modal button.secondary { color:var(--mt-body); background:var(--mt-surface-alt); }
.member-theme-phone[data-shadow="none"] :is(.mtp-card,.mtp-bank,.mtp-hero,.mtp-nav,.mtp-modal) { box-shadow:none; }
.member-theme-phone[data-shadow="medium"] :is(.mtp-card,.mtp-bank,.mtp-hero,.mtp-nav,.mtp-modal) { box-shadow:0 7px 16px rgba(24,67,99,.18); }
.member-theme-phone[data-shadow="strong"] :is(.mtp-card,.mtp-bank,.mtp-hero,.mtp-nav,.mtp-modal) { box-shadow:0 11px 24px rgba(24,67,99,.25); }
.member-theme-phone[data-text-size="large"] :is(.mtp-page,.mtp-header,.mtp-nav) { font-size:110%; }
.member-theme-action-bar { display:grid; grid-template-columns:1fr 1fr; gap:7px; }
.member-theme-action-bar button { min-height:38px; padding:0 8px; border:1px solid #cbd5e1; border-radius:9px; color:#43536a; background:#fff; font-size:9px; font-weight:900; cursor:pointer; }
.member-theme-action-bar button:hover { background:#f1f6fa; }
.member-theme-action-bar button.is-publish { grid-column:1/-1; color:#fff; border-color:#0b8fd7; background:linear-gradient(180deg,#2db8ef,#0788d7); box-shadow:0 7px 14px rgba(7,136,215,.2); }
.member-theme-action-bar button:disabled { opacity:.45; cursor:not-allowed; box-shadow:none; }

@media (max-width: 1350px) {
  .member-theme-layout { grid-template-columns: 1fr; }
  .member-theme-preview-sticky { position: static; }
  .member-theme-preview-column { order: -1; }
  .member-theme-preview-sticky { grid-template-columns: 1fr minmax(300px, 390px); align-items:start; }
  .member-theme-preview-sticky > header,
  .member-theme-preview-tabs,
  .member-theme-action-bar { grid-column:1; }
  .member-theme-phone { grid-column:2; grid-row:1/5; }
}
@media (max-width: 980px) {
  .member-theme-preset-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .member-theme-color-grid,
  .member-theme-color-grid.is-advanced { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .member-theme-option-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .member-theme-preview-sticky { display:grid; grid-template-columns:1fr; }
  .member-theme-phone { grid-column:1; grid-row:auto; }
}
@media (max-width: 680px) {
  .member-theme-hero { align-items:stretch; flex-direction:column; }
  .member-theme-current { flex-basis:auto; }
  .member-theme-color-grid,
  .member-theme-color-grid.is-advanced,
  .member-theme-range-grid,
  .member-theme-option-grid { grid-template-columns:1fr; }
  .member-theme-card > header { flex-direction:column; }
}


/* =========================================================
   V60.2 THEME SCOPE CONTROLS — ADMIN ONLY
========================================================= */
.member-theme-scope-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.member-theme-scope-option,
.member-theme-scope-toggle {
  min-height: 86px;
  border: 1px solid #d3deea;
  border-radius: 12px;
  background: #f9fbfd;
}
.member-theme-scope-option {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 180px;
  align-items: center;
  gap: 12px;
  padding: 12px;
}
.member-theme-scope-option > span,
.member-theme-scope-toggle > span:last-child {
  display: grid;
  grid-template-columns: 22px 1fr;
  align-items: start;
  column-gap: 7px;
}
.member-theme-scope-option > span > i { grid-row: 1 / 3; color: #2183c4; font-size: 15px; }
.member-theme-scope-option b,
.member-theme-scope-toggle b { color: #273b55; font-size: 11px; }
.member-theme-scope-option small,
.member-theme-scope-toggle small { color: #78899c; font-size: 9px; line-height: 1.45; }
.member-theme-scope-option select {
  min-height: 39px;
  border: 1px solid #cbd7e4;
  border-radius: 9px;
  padding: 0 10px;
  color: #263a54;
  background: #fff;
  font-size: 10px;
  font-weight: 800;
}
.member-theme-scope-toggle {
  position: relative;
  display: grid;
  grid-template-columns: 34px 1fr;
  align-items: center;
  gap: 10px;
  padding: 12px;
  cursor: pointer;
}
.member-theme-scope-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.member-theme-scope-check {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid #c9d5e2;
  border-radius: 9px;
  color: transparent;
  background: #fff;
  transition: .15s ease;
}
.member-theme-scope-toggle input:checked + .member-theme-scope-check {
  color: #fff;
  border-color: #1591d7;
  background: #1591d7;
  box-shadow: 0 4px 10px rgba(21,145,215,.2);
}
.member-theme-scope-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 11px;
  padding: 10px 11px;
  border: 1px solid #cce7f5;
  border-radius: 10px;
  color: #3d6178;
  background: #eef9ff;
  font-size: 9px;
  line-height: 1.5;
}
.member-theme-scope-note i { margin-top: 2px; color: #1688ca; }

/* Theme preview: functional header widgets */
.mtp-header-tools { display:flex; justify-content:flex-end; gap:4px; }
.mtp-header .mtp-diamond-widget,
.mtp-header .mtp-balance-widget {
  display:inline-flex;
  align-items:center;
  gap:3px;
  padding:5px 6px;
  border-radius:8px;
  font-size:7px;
  font-weight:900;
}
.member-theme-phone[data-header-widget-style="classic"] .mtp-header :is(.mtp-diamond-widget,.mtp-balance-widget) {
  color:#17344f;
  background:#fff;
  box-shadow:0 2px 6px rgba(7,72,116,.15);
}
.member-theme-phone[data-header-widget-style="classic"] .mtp-diamond-widget i { color:#1478b8; }
.member-theme-phone[data-header-widget-style="classic"] .mtp-balance-widget i:first-child { color:#f4ae00; }
.member-theme-phone[data-header-widget-style="classic"] .mtp-balance-widget i:last-child { color:#087dcc; }
.member-theme-phone[data-header-widget-style="glass"] .mtp-header :is(.mtp-diamond-widget,.mtp-balance-widget) {
  color:#17344f;
  background:rgba(255,255,255,.82);
  backdrop-filter:blur(6px);
}
.member-theme-phone[data-header-widget-style="theme"] .mtp-header :is(.mtp-diamond-widget,.mtp-balance-widget) {
  color:var(--mt-primary);
  background:var(--mt-surface);
}

/* Theme preview: colorful / themed / monochrome nav icons */
.mtp-nav span { --mtp-nav-color:var(--mt-primary); --mtp-nav-soft:var(--mt-surface-alt); }
.mtp-nav span[data-nav-key="wallet"] { --mtp-nav-color:#1687c7; --mtp-nav-soft:#e5f5ff; }
.mtp-nav span[data-nav-key="deposit"] { --mtp-nav-color:#16a36a; --mtp-nav-soft:#e5f8ef; }
.mtp-nav span[data-nav-key="withdraw"] { --mtp-nav-color:#e45461; --mtp-nav-soft:#ffeaed; }
.mtp-nav span[data-nav-key="history"] { --mtp-nav-color:#3f78c9; --mtp-nav-soft:#eaf1ff; }
.member-theme-phone[data-nav-icon-style="colorful"] .mtp-nav span:not([data-nav-key="home"]) i {
  display:grid; place-items:center; width:18px; height:18px; border-radius:6px;
  color:var(--mtp-nav-color); background:var(--mtp-nav-soft);
}
.member-theme-phone[data-nav-icon-style="theme"] .mtp-nav span i { color:var(--mt-primary); }
.member-theme-phone[data-nav-icon-style="monochrome"] .mtp-nav span i { color:var(--mt-body); }
.member-theme-phone[data-nav-icon-style="colorful"] .mtp-nav span.active:not([data-nav-key="home"]) {
  color:var(--mtp-nav-color); background:var(--mtp-nav-soft);
}

@media (max-width: 980px) {
  .member-theme-scope-grid { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
  .member-theme-scope-option { grid-template-columns: 1fr; }
}

/* =========================================================
   V60.3 THEME STUDIO UX + CROSS-PAGE WALLET
========================================================= */
.member-theme-scope-heading { align-items: center !important; }
.member-theme-scope-reset,
.member-theme-history-heading > button {
  min-height: 34px;
  padding: 0 11px;
  border: 1px solid #9ecdea;
  border-radius: 9px;
  color: #0879bd;
  background: #eef9ff;
  font-size: 10px;
  font-weight: 900;
  cursor: pointer;
}
.member-theme-scope-reset:hover,
.member-theme-history-heading > button:hover { background: #dff4ff; }
.member-theme-scope-simple { overflow: hidden; border: 1px solid #d6e0eb; border-radius: 13px; }
.member-theme-scope-row {
  display: grid;
  grid-template-columns: minmax(210px, .8fr) minmax(340px, 1.2fr);
  align-items: center;
  gap: 18px;
  padding: 14px;
  border-bottom: 1px solid #e2e8f0;
  background: #fbfcfe;
}
.member-theme-scope-row:last-child { border-bottom: 0; }
.member-theme-scope-row.is-compact { background: #f7fafc; }
.member-theme-scope-label { display: flex; align-items: flex-start; gap: 10px; min-width: 0; }
.member-theme-scope-label > i {
  flex: 0 0 34px;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  color: #087fc6;
  background: #e8f6ff;
}
.member-theme-scope-label span { display: grid; gap: 3px; min-width: 0; }
.member-theme-scope-label b { color: #21344d; font-size: 11px; }
.member-theme-scope-label small { color: #8190a2; font-size: 9px; line-height: 1.4; }
.member-theme-choice-group { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 7px; }
.member-theme-choice-group button {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 2px;
  min-height: 54px;
  padding: 7px 8px;
  border: 1px solid #cfdae6;
  border-radius: 10px;
  color: #51647a;
  background: #fff;
  cursor: pointer;
}
.member-theme-choice-group button b { font-size: 10px; }
.member-theme-choice-group button small { color: #91a0af; font-size: 8px; }
.member-theme-choice-group button.active {
  color: #0879bd;
  border-color: #36a8e5;
  background: #edf9ff;
  box-shadow: 0 0 0 3px rgba(54,168,229,.10);
}
.member-theme-choice-group button.active::after {
  content: "✓";
  position: absolute;
  top: 5px;
  right: 6px;
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  color: #fff;
  background: #1597d9;
  font-size: 9px;
  font-weight: 900;
}
.member-theme-preserve-row { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.member-theme-preserve-row label {
  position: relative;
  display: grid;
  grid-template-columns: 30px 1fr;
  align-items: center;
  gap: 8px;
  min-height: 52px;
  padding: 8px 10px;
  border: 1px solid #d0dbe7;
  border-radius: 10px;
  color: #40546d;
  background: #fff;
  cursor: pointer;
}
.member-theme-preserve-row input { position: absolute; opacity: 0; pointer-events: none; }
.member-theme-preserve-row label > span {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 9px;
  color: transparent;
  background: #e8eef4;
}
.member-theme-preserve-row input:checked + span { color: #fff; background: #168fd7; box-shadow: 0 4px 9px rgba(22,143,215,.2); }
.member-theme-preserve-row label > b { font-size: 10px; }
.member-theme-preserve-row label > small { grid-column: 2; margin-top: -6px; color: #8291a3; font-size: 8px; }
.member-theme-scope-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding: 9px 11px;
  border: 1px solid #c9e5d7;
  border-radius: 10px;
  color: #287452;
  background: #f1fcf6;
  font-size: 9px;
  font-weight: 800;
}
.member-theme-history-heading { align-items: center !important; }
.member-theme-history-heading > button span { margin-left: 4px; padding: 2px 6px; border-radius: 999px; color: #fff; background: #168fd7; }
.member-theme-history-row { grid-template-columns: 42px minmax(0,1fr) auto auto; }
.member-theme-history-colors { display: flex !important; padding: 0 !important; background: transparent !important; }
.member-theme-history-colors i { width: 19px; height: 31px; border: 2px solid #fff; box-shadow: 0 2px 6px rgba(22,48,76,.14); }
.member-theme-history-colors i:first-child { border-radius: 8px 0 0 8px; }
.member-theme-history-colors i:last-child { border-radius: 0 8px 8px 0; }
.member-theme-history-colors i + i { margin-left: -2px; }
.member-theme-history-copy { min-width: 0; }
.member-theme-history-copy em { display: block; margin-top: 3px; color: #6f8094; font-size: 8px; font-style: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.member-theme-history-dialog {
  width: min(760px, calc(100vw - 28px));
  max-height: min(86vh, 760px);
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 18px;
  background: transparent;
  box-shadow: 0 28px 70px rgba(22,38,61,.3);
}
.member-theme-history-dialog::backdrop { background: rgba(17,30,48,.58); backdrop-filter: blur(4px); }
.member-theme-history-dialog-shell { display: grid; grid-template-rows: auto auto minmax(0,1fr) auto; max-height: min(86vh,760px); background: #fff; }
.member-theme-history-dialog-shell > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 18px 20px; color: #fff; background: linear-gradient(135deg,#17345f,#1b78b6); }
.member-theme-history-dialog-shell > header span { display: block; color: rgba(255,255,255,.7); font-size: 8px; font-weight: 900; letter-spacing: .12em; }
.member-theme-history-dialog-shell > header h3 { margin: 4px 0 0; font-size: 18px; }
.member-theme-history-dialog-shell > header p { margin: 5px 0 0; color: rgba(255,255,255,.82); font-size: 9px; }
.member-theme-history-dialog-shell > header button { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid rgba(255,255,255,.35); border-radius: 10px; color: #fff; background: rgba(255,255,255,.12); cursor: pointer; }
.member-theme-history-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1px solid #e0e6ee; background: #f8fafc; }
.member-theme-history-toolbar label { display: flex; align-items: center; gap: 8px; width: min(360px,100%); min-height: 38px; padding: 0 11px; border: 1px solid #cad6e4; border-radius: 9px; background: #fff; }
.member-theme-history-toolbar label i { color: #8a99aa; }
.member-theme-history-toolbar input { width: 100%; border: 0; outline: 0; color: #273a54; font-size: 10px; }
.member-theme-history-toolbar > span { color: #718196; font-size: 9px; font-weight: 800; }
.member-theme-history-modal-list { display: grid; align-content: start; gap: 7px; min-height: 0; padding: 12px 16px; overflow: auto; }
.member-theme-history-row.is-modal { min-height: 62px; }
.member-theme-history-dialog-shell > footer { display: grid; grid-template-columns: 110px 1fr 110px; align-items: center; gap: 10px; padding: 11px 16px; border-top: 1px solid #e0e6ee; background: #f8fafc; }
.member-theme-history-dialog-shell > footer button { min-height: 34px; border: 1px solid #c5d1de; border-radius: 8px; color: #43566e; background: #fff; font-size: 9px; font-weight: 800; cursor: pointer; }
.member-theme-history-dialog-shell > footer button:disabled { opacity: .42; cursor: not-allowed; }
.member-theme-history-dialog-shell > footer span { color: #65768a; font-size: 9px; font-weight: 800; text-align: center; }
.member-theme-preview-sticky header > span.is-dirty { color: #9b6100; background: #fff1cc; }
.member-theme-action-bar button:disabled { opacity: .42; cursor: not-allowed; filter: grayscale(.25); }

.member-unified-wallet-overlay .wallet-menu-item { text-decoration: none; }
.member-unified-wallet-overlay .wallet-modal-refresh.spinning,
.member-unified-wallet-overlay #walletModalRefresh.spinning i { animation: spin .8s linear infinite; }

@media (max-width: 900px) {
  .member-theme-scope-row { grid-template-columns: 1fr; gap: 10px; }
}
@media (max-width: 620px) {
  .member-theme-choice-group,
  .member-theme-preserve-row { grid-template-columns: 1fr; }
  .member-theme-history-row { grid-template-columns: 38px minmax(0,1fr) auto; }
  .member-theme-history-row > button { grid-column: 2 / -1; justify-self: end; }
  .member-theme-history-dialog-shell > footer { grid-template-columns: 1fr 1fr; }
  .member-theme-history-dialog-shell > footer span { grid-column: 1 / -1; grid-row: 1; }
}


/* =========================================================
   V60.5 SLOT POSTER CARDS — SAME STANDARD FOR EVERY SLOT PROVIDER
   Uses the polished fishing-card composition without altering fishing/casino.
========================================================= */
.home-body.lobby-v2-body .provider-preview.inline-games-grid.slot-provider-cards-v605 {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px 7px !important;
}

.home-body.lobby-v2-body .provider-preview.inline-games-grid.slot-provider-cards-v605 .inline-game-card.slot-standard-card-v605 {
  position: relative;
  display: flex !important;
  flex-direction: column !important;
  min-width: 0;
  width: 100% !important;
  max-width: none !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 1px solid rgba(183, 207, 221, .76) !important;
  border-radius: 11px !important;
  color: #17344d !important;
  background: #fff !important;
  box-shadow: 0 4px 11px rgba(28, 78, 110, .12) !important;
  isolation: isolate;
}

.home-body.lobby-v2-body .provider-preview.inline-games-grid.slot-provider-cards-v605 .inline-game-card.slot-standard-card-v605::before {
  content: none;
}

.home-body.lobby-v2-body .provider-preview.inline-games-grid.slot-provider-cards-v605 .inline-game-card.slot-standard-card-v605.is-contain-artwork-v605::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0 0 auto;
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background-image:
    linear-gradient(rgba(255,255,255,.24), rgba(255,255,255,.38)),
    var(--slot-artwork-v605);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  filter: blur(9px) saturate(.92);
  opacity: .46;
  transform: scale(1.08);
  pointer-events: none;
}

.home-body.lobby-v2-body .provider-preview.inline-games-grid.slot-provider-cards-v605 .inline-game-card.slot-standard-card-v605 > img,
.home-body.lobby-v2-body .provider-preview.inline-games-grid.slot-provider-cards-v605 .inline-game-card.slot-standard-card-v605 > .inline-game-placeholder {
  position: relative !important;
  z-index: 1;
  display: block;
  width: 100% !important;
  max-width: none !important;
  aspect-ratio: 4 / 5 !important;
  min-height: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background-color: #eaf5fb;
  image-rendering: auto;
}

.home-body.lobby-v2-body .provider-preview.inline-games-grid.slot-provider-cards-v605 .inline-game-card.slot-standard-card-v605 > img.slot-image-fit-cover {
  padding: 0 !important;
  object-fit: cover !important;
  object-position: center !important;
}

.home-body.lobby-v2-body .provider-preview.inline-games-grid.slot-provider-cards-v605 .inline-game-card.slot-standard-card-v605 > img.slot-image-fit-contain {
  padding: 5px !important;
  object-fit: contain !important;
  object-position: center !important;
  background: rgba(255,255,255,.56) !important;
}

.home-body.lobby-v2-body .provider-preview.inline-games-grid.slot-provider-cards-v605 .inline-game-card.slot-standard-card-v605 > .slot-game-title-v605 {
  position: relative !important;
  z-index: 2;
  display: -webkit-box !important;
  min-height: 40px !important;
  margin: 0 !important;
  padding: 7px 6px 6px !important;
  overflow: hidden !important;
  border-top: 1px solid #e5eef4 !important;
  border-radius: 0 !important;
  color: #17344d !important;
  background: #fff !important;
  box-shadow: none !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  line-height: 1.28 !important;
  text-align: center !important;
  text-overflow: ellipsis;
  white-space: normal !important;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}


.home-body.lobby-v2-body .provider-preview.inline-games-grid.slot-provider-cards-v605 .inline-game-card.slot-standard-card-v605.is-image-error > .slot-game-title-v605 {
  color: #536d7f !important;
}

@media (hover: hover) and (pointer: fine) {
  .home-body.lobby-v2-body .provider-preview.inline-games-grid.slot-provider-cards-v605 .inline-game-card.slot-standard-card-v605:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--mt-primary, #168fd8) 30%, #b7cfdd) !important;
    box-shadow: 0 8px 18px rgba(28, 78, 110, .17) !important;
  }
}

.home-body.lobby-v2-body .provider-preview.inline-games-grid.slot-provider-cards-v605 .inline-game-card.slot-standard-card-v605:active {
  transform: scale(.98);
}

@media (max-width: 390px) {
  .home-body.lobby-v2-body .provider-preview.inline-games-grid.slot-provider-cards-v605 {
    gap: 8px 6px !important;
  }
  .home-body.lobby-v2-body .provider-preview.inline-games-grid.slot-provider-cards-v605 .inline-game-card.slot-standard-card-v605 > .slot-game-title-v605 {
    min-height: 38px !important;
    font-size: 8.5px !important;
  }
}

@media (max-width: 350px) {
  .home-body.lobby-v2-body .provider-preview.inline-games-grid.slot-provider-cards-v605 {
    gap: 7px 4px !important;
  }
  .home-body.lobby-v2-body .provider-preview.inline-games-grid.slot-provider-cards-v605 .inline-game-card.slot-standard-card-v605 > .slot-game-title-v605 {
    min-height: 36px !important;
    padding-inline: 4px !important;
    font-size: 8px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-body.lobby-v2-body .provider-preview.inline-games-grid.slot-provider-cards-v605 .inline-game-card.slot-standard-card-v605 {
    transition: none;
  }
}

/* V65.3 final cascade guard: the lobby has legacy topbar rules below the base block. */
.home-body.lobby-v2-body.guest-mode .lobby-topbar.app-header {
  grid-template-columns: minmax(98px, 1fr) 82px minmax(98px, 1fr);
}

@media (max-width: 520px) {
  .home-body.lobby-v2-body.guest-mode .lobby-topbar.app-header {
    grid-template-columns: minmax(88px, 1fr) 66px minmax(88px, 1fr);
    padding-inline: 8px;
  }
}

/* =========================================================
   V65.3.3 — FULL HEADER CREDIT DISPLAY
   Keep the exact balance visible. Never abbreviate money.
========================================================= */
.home-body.lobby-v2-body:not(.guest-mode) .lobby-topbar.app-header {
  grid-template-columns: minmax(104px, 1fr) 82px minmax(148px, 1.42fr) !important;
}

.home-body.lobby-v2-body:not(.guest-mode) .lobby-topbar .app-logo {
  width: 88px !important;
  height: 54px !important;
  max-height: 54px !important;
  transform: none !important;
}

.home-body.lobby-v2-body .topbar-right {
  gap: 5px;
}

.home-body.lobby-v2-body .credit-pill {
  width: 136px;
  max-width: none !important;
  flex: 0 0 136px;
  padding-left: 8px;
  cursor: pointer;
}

.home-body.lobby-v2-body .credit-pill > i {
  flex: 0 0 auto;
}

.home-body.lobby-v2-body .credit-pill strong {
  flex: 1 1 auto;
  min-width: 0;
  overflow: visible;
  text-overflow: clip;
  white-space: nowrap;
  font-size: 12px;
  line-height: 1;
  letter-spacing: -.15px;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.home-body.lobby-v2-body .credit-pill.balance-medium strong {
  font-size: 11px;
  letter-spacing: -.25px;
}

.home-body.lobby-v2-body .credit-pill.balance-long strong {
  font-size: 9.5px;
  letter-spacing: -.35px;
}

.home-body.lobby-v2-body .credit-pill.balance-extra-long strong {
  font-size: 8px;
  letter-spacing: -.45px;
}

.home-body.lobby-v2-body .credit-pill:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

@media (max-width: 370px) {
  .home-body.lobby-v2-body:not(.guest-mode) .lobby-topbar.app-header {
    grid-template-columns: minmax(98px, 1fr) 70px minmax(132px, 1.32fr) !important;
    padding-inline: 7px !important;
  }

  .home-body.lobby-v2-body:not(.guest-mode) .lobby-topbar .app-logo {
    width: 76px !important;
    height: 50px !important;
  }

  .home-body.lobby-v2-body .credit-pill {
    width: 132px;
    flex-basis: 132px;
  }

  .home-body.lobby-v2-body .account-round-button {
    display: none;
  }
}

/* =========================================================
   V65.3.4 — AUTO WIDTH CREDIT BOX
   The credit pill follows its content while the logo stays
   geometrically centered in the member header.
========================================================= */
.home-body.lobby-v2-body:not(.guest-mode) .lobby-topbar.app-header {
  position: sticky;
  display: flex !important;
  justify-content: space-between;
  grid-template-columns: none !important;
}

.home-body.lobby-v2-body:not(.guest-mode) .lobby-topbar .app-logo {
  position: absolute !important;
  top: 50%;
  left: 50%;
  z-index: 1;
  width: 82px !important;
  height: 54px !important;
  max-height: 54px !important;
  margin: 0 !important;
  transform: translate(-50%, -50%) !important;
  pointer-events: none;
}

.home-body.lobby-v2-body:not(.guest-mode) .lobby-topbar .topbar-side {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
}

.home-body.lobby-v2-body .credit-pill {
  width: fit-content;
  min-width: 76px;
  max-width: 142px !important;
  flex: 0 0 auto;
  padding-left: 8px;
  padding-right: 1px;
}

.home-body.lobby-v2-body .credit-pill strong {
  width: auto;
  flex: 0 0 auto;
}

/* Extremely long balances get priority over the secondary account shortcut.
   Account remains available from the bottom navigation and wallet popup. */
@media (max-width: 520px) {
  .home-body.lobby-v2-body:not(.guest-mode)
    .lobby-topbar.app-header:has(.credit-pill.balance-long)
    .account-round-button {
    display: none;
  }
}

@media (max-width: 370px) {
  .home-body.lobby-v2-body:not(.guest-mode) .lobby-topbar .app-logo {
    width: 70px !important;
    height: 48px !important;
  }

  .home-body.lobby-v2-body .credit-pill {
    min-width: 72px;
    max-width: 128px !important;
  }
}

/* =========================================================
   V65.3.7 — BORDERLESS PROFESSIONAL GUEST AUTH BUTTONS
   Equal sizing with a clean, borderless login treatment.
========================================================= */
.home-body.lobby-v2-body.guest-mode .guest-auth-button {
  width: clamp(92px, 25.5vw, 104px);
  min-width: 0;
  height: 40px;
  padding: 0 9px;
  border: 0;
  border-radius: 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .28),
    0 5px 13px rgba(3, 78, 136, .18);
  -webkit-tap-highlight-color: transparent;
  transition:
    transform .16s ease,
    background-color .16s ease,
    box-shadow .16s ease;
}

.home-body.lobby-v2-body.guest-mode .guest-auth-button i {
  width: 15px;
  flex: 0 0 15px;
  font-size: 12px;
  text-align: center;
}

.home-body.lobby-v2-body.guest-mode .guest-auth-button span {
  white-space: nowrap;
}

.home-body.lobby-v2-body.guest-mode .guest-login-button {
  color: #fff;
  background: linear-gradient(180deg, #087acb 0%, #075da8 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .18),
    0 6px 15px rgba(2, 55, 105, .28);
}

.home-body.lobby-v2-body.guest-mode .guest-register-button {
  color: #0872ba;
  background: linear-gradient(180deg, #fff 0%, #f4fbff 100%);
  box-shadow:
    inset 0 1px 0 #fff,
    0 6px 15px rgba(3, 76, 132, .22);
}

.home-body.lobby-v2-body.guest-mode .guest-auth-button:hover,
.home-body.lobby-v2-body.guest-mode .guest-auth-button:focus-visible {
  transform: translateY(-1px);
  outline: none;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .24),
    0 8px 18px rgba(3, 70, 126, .25);
}

.home-body.lobby-v2-body.guest-mode .guest-auth-button:focus-visible {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .24),
    0 0 0 3px rgba(5, 88, 157, .18),
    0 8px 18px rgba(3, 70, 126, .25);
}

.home-body.lobby-v2-body.guest-mode .guest-auth-button:active {
  transform: translateY(1px) scale(.985);
  box-shadow:
    inset 0 1px 3px rgba(0, 62, 110, .16),
    0 3px 8px rgba(3, 70, 126, .16);
}

@media (max-width: 370px) {
  .home-body.lobby-v2-body.guest-mode .lobby-topbar.app-header {
    grid-template-columns: minmax(92px, 1fr) 66px minmax(92px, 1fr);
    padding-inline: 7px;
    gap: 3px;
  }

  .home-body.lobby-v2-body.guest-mode .guest-auth-button {
    width: clamp(90px, 27vw, 96px);
    height: 38px;
    padding-inline: 7px;
    gap: 5px;
    font-size: 10.5px;
  }
}

/* =========================================================
   V65.3.9 — Professional member form focus
   Keep a clear focus state without the large glowing ring.
========================================================= */

/* Lobby login/register popup */
.auth-popup-field:focus-within {
  border-color: #209bdc;
  box-shadow: none;
}

/* Standalone login and registration pages */
.registration-body .wizard-input:focus-within,
.registration-body .wizard-select-wrap:focus-within,
.auth-login-body .wizard-input:focus-within,
.auth-login-body .wizard-select-wrap:focus-within {
  border-color: #2875bd;
  box-shadow: none;
}

/* Deposit amount, Wallet link and transfer date/time */
.deposit-page-body .deposit-money-input:focus-within,
.deposit-page-body .wallet-link-input:focus-within {
  border-color: #1595d8;
  box-shadow: none;
}

.deposit-page-body .deposit-time-grid input:focus {
  border-color: #1595d8;
  outline: none;
  box-shadow: none;
}

/* Withdrawal amount */
.withdraw-page-body-v59 .withdraw-amount-field-v59:focus-within {
  border-color: #1595d8;
  box-shadow: none;
}

/* Shared member modal fields and remaining member-page controls */
.casino-modal-input:focus,
.home-body :is(input, select, textarea):focus,
.account-page-body :is(input, select, textarea):focus,
.contact-page-body :is(input, select, textarea):focus,
.history-page-body :is(input, select, textarea):focus {
  outline: none;
  box-shadow: none;
}

.casino-modal-input:focus,
.home-body :is(input:not([type="hidden"]):not([type="file"]), select, textarea):focus,
.account-page-body :is(input:not([type="hidden"]):not([type="file"]), select, textarea):focus,
.contact-page-body :is(input:not([type="hidden"]):not([type="file"]), select, textarea):focus,
.history-page-body :is(input:not([type="hidden"]):not([type="file"]), select, textarea):focus {
  border-color: #209bdc;
}

/* =========================================================
   V65.4 — Professional member drawer + natural LIVE status
========================================================= */
.home-body.lobby-v2-body .drawer-overlay-v654.menu-overlay {
  display: flex;
  align-items: stretch;
  justify-content: flex-start;
  padding: 0 !important;
  background: rgba(8, 24, 39, .48) !important;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity .22s ease;
  z-index: 2600;
}

.home-body.lobby-v2-body .drawer-overlay-v654.menu-overlay.show {
  opacity: 1;
}

.home-body.lobby-v2-body .drawer-overlay-v654 .member-drawer-v654.user-menu-box {
  position: relative;
  inset: auto;
  display: flex;
  flex-direction: column;
  width: min(88vw, 370px);
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0 24px 24px 0;
  background: #f6f9fc !important;
  color: #17324a !important;
  box-shadow: 18px 0 50px rgba(7, 31, 52, .2);
  transform: translateX(-104%);
  transition: transform .28s cubic-bezier(.22, .72, .22, 1);
}

.home-body.lobby-v2-body .drawer-overlay-v654.show .member-drawer-v654.user-menu-box {
  transform: translateX(0);
}

.drawer-profile-v654 {
  position: relative;
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 13px;
  align-items: center;
  padding: calc(28px + env(safe-area-inset-top, 0px)) 54px 22px 20px;
  background: linear-gradient(145deg, #087ec9 0%, #15a9ea 58%, #3bc3f0 100%);
  color: #fff;
}

.drawer-profile-v654::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 1px;
  background: rgba(255, 255, 255, .28);
}

.drawer-avatar-v654 {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border: 2px solid rgba(255, 255, 255, .74);
  border-radius: 18px;
  background: rgba(255, 255, 255, .18);
  color: #fff !important;
  font-size: 24px;
  box-shadow: 0 8px 18px rgba(0, 70, 125, .18);
  overflow: hidden;
}

.drawer-avatar-v654 img {
  display: block;
  width: 100%;
  height: 100%;
  padding: 5px;
  object-fit: contain;
}

.drawer-profile-copy-v654 {
  min-width: 0;
}

.drawer-profile-copy-v654 small {
  display: block;
  margin-bottom: 1px;
  color: rgba(255, 255, 255, .8) !important;
  font-size: 11px;
  font-weight: 600;
}

.home-body.lobby-v2-body .drawer-profile-copy-v654 h3 {
  overflow: hidden;
  margin: 0;
  color: #fff !important;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.drawer-profile-copy-v654 p {
  overflow: hidden;
  margin: 3px 0 0;
  color: rgba(255, 255, 255, .86) !important;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.drawer-profile-copy-v654 p span {
  color: #fff !important;
  font-weight: 400;
}

.home-body.lobby-v2-body .drawer-overlay-v654 .menu-close {
  position: absolute;
  z-index: 2;
  top: calc(17px + env(safe-area-inset-top, 0px));
  right: 14px;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: rgba(1, 78, 132, .22);
  color: #fff !important;
  font-size: 18px;
  box-shadow: none;
}

.drawer-live-v654 {
  display: flex;
  align-items: center;
  min-height: 47px;
  margin: 14px 16px 4px;
  padding: 0 14px;
  border: 1px solid #cdeedc;
  border-radius: 14px;
  background: #effbf4 !important;
  color: #28724b !important;
}

.drawer-live-dot-v654 {
  position: relative;
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  margin-right: 8px;
  border-radius: 50%;
  background: #1fbd66;
  box-shadow: 0 0 0 0 rgba(31, 189, 102, .48);
  animation: drawer-live-pulse-v654 2s ease-out infinite;
}

.drawer-live-label-v654 {
  margin-right: auto;
  color: #159a52 !important;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .08em;
}

.drawer-live-v654 > i {
  margin: 0 7px 0 10px;
  color: #1aa45a !important;
  font-size: 14px;
}

.drawer-live-v654 > strong {
  min-width: 30px;
  color: #159a52 !important;
  font-size: 17px;
  font-variant-numeric: tabular-nums;
  font-weight: 900;
  line-height: 1;
  text-align: right;
}

.drawer-live-v654 > strong.is-changing {
  animation: drawer-count-change-v654 .45s ease;
}

.drawer-live-v654 > span:last-child {
  margin-left: 5px;
  color: #4d7e62 !important;
  font-size: 10px;
  font-weight: 600;
  white-space: nowrap;
}

.drawer-live-v654.is-maintenance {
  border-color: #e7dfb8;
  background: #fffbed !important;
}

.drawer-live-v654.is-maintenance > span:last-child {
  color: #887330 !important;
}

.drawer-scroll-v654 {
  flex: 1;
  min-height: 0;
  padding: 3px 14px 16px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

.drawer-group-v654 {
  padding: 12px 0 3px;
}

.drawer-group-v654 h4 {
  margin: 0 8px 7px;
  color: #73869a !important;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .04em;
}

.drawer-menu-v654 {
  display: grid;
  gap: 5px;
}

.home-body.lobby-v2-body .drawer-item-v654 {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 18px;
  gap: 10px;
  align-items: center;
  width: 100%;
  min-height: 48px;
  padding: 5px 10px 5px 7px;
  border: 1px solid transparent;
  border-radius: 13px;
  background: transparent !important;
  color: #29465f !important;
  font-family: inherit;
  text-align: left;
  box-shadow: none;
}

.home-body.lobby-v2-body .drawer-item-v654:hover {
  border-color: #dbeaf4;
  background: #edf6fc !important;
}

.home-body.lobby-v2-body .drawer-item-v654:active {
  transform: scale(.985);
}

.home-body.lobby-v2-body .drawer-item-v654 > i:first-child,
.home-body.lobby-v2-body .drawer-item-v654 > img:first-child {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  margin: 0;
  border-radius: 11px;
  object-fit: contain;
  background: #e4f3fc !important;
  color: #148fd0 !important;
  font-size: 16px;
}

.home-body.lobby-v2-body .drawer-item-v654.drawer-item-deposit > i:first-child {
  background: #e5f8ec !important;
  color: #20a75b !important;
}

.home-body.lobby-v2-body .drawer-item-v654.drawer-item-withdraw > i:first-child {
  background: #ffebee !important;
  color: #e14b5b !important;
}

.home-body.lobby-v2-body .drawer-item-v654.drawer-item-promotion > i:first-child,
.home-body.lobby-v2-body .drawer-item-v654.drawer-item-free-credit > i:first-child {
  background: #fff2db !important;
  color: #e5941c !important;
}

.home-body.lobby-v2-body .drawer-item-v654 > span {
  overflow: hidden;
  color: #29465f !important;
  font-size: 13px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-body.lobby-v2-body .drawer-item-v654 .drawer-item-arrow-v654 {
  width: auto;
  height: auto;
  border-radius: 0;
  background: transparent !important;
  color: #a3b2bf !important;
  font-size: 10px;
}

.home-body.lobby-v2-body .drawer-logout-v654.menu-logout {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: auto;
  min-height: 46px;
  margin: 8px 16px calc(14px + env(safe-area-inset-bottom, 0px));
  padding: 0 16px;
  border: 1px solid #f0cfd4;
  border-radius: 14px;
  background: #fff1f3 !important;
  color: #c83e50 !important;
  font-size: 13px;
  font-weight: 800;
  box-shadow: none;
}

.home-body.lobby-v2-body .drawer-logout-v654.menu-logout i {
  color: #c83e50 !important;
}

@keyframes drawer-live-pulse-v654 {
  0% { box-shadow: 0 0 0 0 rgba(31, 189, 102, .48); }
  70% { box-shadow: 0 0 0 7px rgba(31, 189, 102, 0); }
  100% { box-shadow: 0 0 0 0 rgba(31, 189, 102, 0); }
}

@keyframes drawer-count-change-v654 {
  0% { opacity: .5; transform: translateY(3px); }
  100% { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .drawer-live-dot-v654,
  .drawer-live-v654 > strong.is-changing {
    animation: none;
  }

  .home-body.lobby-v2-body .drawer-overlay-v654,
  .home-body.lobby-v2-body .drawer-overlay-v654 .member-drawer-v654.user-menu-box {
    transition-duration: .01ms;
  }
}

@media (min-width: 700px) {
  .home-body.lobby-v2-body .drawer-overlay-v654 .member-drawer-v654.user-menu-box {
    width: 370px;
  }
}

/* =========================================================
   V65.4.1 — Mobile drawer clears the unified bottom navigation
========================================================= */
@media (max-width: 699px) {
  .home-body.lobby-v2-body .drawer-overlay-v654 .member-drawer-v654.user-menu-box {
    height: calc(100dvh - 94px - env(safe-area-inset-bottom, 0px));
    min-height: 0;
    border-radius: 0 24px 24px 0;
  }

  .home-body.lobby-v2-body .drawer-scroll-v654 {
    padding-bottom: 12px;
    scroll-padding-bottom: 76px;
  }

  .home-body.lobby-v2-body .drawer-logout-v654.menu-logout {
    flex: 0 0 auto;
    margin-bottom: 12px;
  }
}

@supports not (height: 100dvh) {
  @media (max-width: 699px) {
    .home-body.lobby-v2-body .drawer-overlay-v654 .member-drawer-v654.user-menu-box {
      height: calc(100vh - 94px - env(safe-area-inset-bottom, 0px));
    }
  }
}

/* =========================================================
   V65.4.2 — Full-screen mobile drawer + member phone header
========================================================= */
@media (max-width: 699px) {
  body.drawer-open-v6542 .member-unified-bottom-nav,
  body.drawer-open-v6542 .bottom-nav {
    display: none !important;
  }

  .home-body.lobby-v2-body .drawer-overlay-v654.menu-overlay {
    background: #f6f9fc !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .home-body.lobby-v2-body .drawer-overlay-v654 .member-drawer-v654.user-menu-box {
    width: 100vw;
    height: 100dvh;
    min-height: 100dvh;
    max-width: none;
    border-radius: 0;
    box-shadow: none;
  }

  .drawer-profile-v654 {
    grid-template-columns: 58px minmax(0, 1fr);
    min-height: 112px;
    padding: calc(22px + env(safe-area-inset-top, 0px)) 58px 18px 18px;
  }

  .drawer-avatar-v654 {
    width: 58px;
    height: 58px;
    border-radius: 16px;
  }

  .home-body.lobby-v2-body .drawer-profile-copy-v654 h3 {
    font-size: 16px;
    font-weight: 400;
  }

  .drawer-profile-copy-v654 p,
  .drawer-profile-copy-v654 p span {
    font-size: 11px;
    font-weight: 400;
  }

  .home-body.lobby-v2-body .drawer-scroll-v654 {
    padding-bottom: 14px;
    scroll-padding-bottom: 14px;
  }

  .home-body.lobby-v2-body .drawer-logout-v654.menu-logout {
    margin-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  }
}

@supports not (height: 100dvh) {
  @media (max-width: 699px) {
    .home-body.lobby-v2-body .drawer-overlay-v654 .member-drawer-v654.user-menu-box {
      height: 100vh;
      min-height: 100vh;
    }
  }
}

/* =========================================================
   V65.5 — Early phone availability + password visibility
========================================================= */

.phone-availability-message {
  min-height: 17px;
  margin: 5px 2px 0;
  color: #929995;
  font-size: 11px;
  line-height: 1.45;
}

.phone-availability-message.is-checking {
  color: #79b9ed;
}

.phone-availability-message.is-success {
  color: #43c47b;
}

.phone-availability-message.is-error {
  color: #ff727d;
}

.password-input-row {
  position: relative;
}

.password-input-row input {
  padding-right: 4px;
}

.password-visibility-toggle {
  flex: 0 0 44px;
  align-self: stretch;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-left: 1px solid rgba(255, 255, 255, .08);
  background: transparent;
  color: #b7bfbb;
  font-size: 15px;
  cursor: pointer;
  transition: color .16s ease, background-color .16s ease;
  -webkit-tap-highlight-color: transparent;
}

.password-visibility-toggle:hover {
  color: #fff;
  background: rgba(255, 255, 255, .045);
}

.password-visibility-toggle[aria-pressed="true"] {
  color: #7fc7ff;
}

.password-visibility-toggle:focus-visible {
  outline: 2px solid #2875bd;
  outline-offset: -3px;
  border-radius: 7px;
}

.password-visibility-toggle:active {
  background: rgba(255, 255, 255, .08);
}

.registration-body .wizard-step[data-step="1"] {
  padding-bottom: 2px;
}

/* V65.5.1 — password controls used by the live index.html auth popup */
.auth-popup-field.password-input-row {
  overflow: hidden;
}

.auth-popup-field.password-input-row input {
  padding-right: 2px;
}

.auth-popup-password-toggle {
  flex-basis: 46px;
  min-width: 46px;
  min-height: 44px;
  border-left-color: #d7e8f2;
  color: #168fd4;
  font-size: 16px;
}

.auth-popup-password-toggle:hover {
  color: #0879bd;
  background: #edf8fe;
}

.auth-popup-password-toggle[aria-pressed="true"] {
  color: #0879bd;
  background: #edf8fe;
}

.auth-popup-password-toggle:focus-visible {
  outline-color: #209bdc;
}

.auth-popup-phone-message {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  min-height: 0;
  margin: 6px 0 0;
  padding: 8px 10px;
  border: 1px solid #cfe5f3;
  border-radius: 9px;
  color: #718b9a;
  background: #f3faff;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.45;
  box-sizing: border-box;
}

.auth-popup-phone-message:empty {
  display: none;
}

.auth-popup-phone-message::before {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 0;
  border-radius: 50%;
  color: #fff;
  background: #168fd4;
  font-family: "Font Awesome 6 Free";
  font-size: 8px;
  font-weight: 900;
  line-height: 1;
  content: "\f129";
}

.auth-popup-phone-message.is-checking {
  border-color: #b9def3;
  color: #126f9f;
  background: #edf8ff;
}

.auth-popup-phone-message.is-checking::before {
  content: "\f110";
  animation: auth-phone-alert-spin .85s linear infinite;
}

.auth-popup-phone-message.is-success {
  border-color: #abe1c2;
  color: #10753b;
  background: #eaf9f0;
}

.auth-popup-phone-message.is-success::before {
  background: #18a957;
  content: "\f00c";
}

.auth-popup-phone-message.is-error {
  border-color: #f2abb2;
  color: #b42332;
  background: #fff0f2;
  box-shadow: 0 3px 10px rgba(184, 35, 49, .08);
}

.auth-popup-phone-message.is-error::before {
  background: #dc3545;
  content: "\21";
}

@keyframes auth-phone-alert-spin {
  to { transform: rotate(360deg); }
}

@media (max-width: 480px) {
  .auth-popup-phone-message {
    padding: 8px 9px;
    font-size: 10.5px;
  }
}

/* V66 registration confirmation and built-in anti-bot challenge */
.auth-phone-confirmation {
  position: relative;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 24px;
  gap: 12px;
  align-items: center;
  padding: 14px;
  overflow: hidden;
  border: 1px solid #9ecbf5;
  border-radius: 16px;
  background:
    radial-gradient(circle at 100% 0, rgba(70, 177, 255, .18), transparent 40%),
    linear-gradient(145deg, #f5fbff 0%, #e8f5ff 100%);
  color: #174d82;
  box-shadow: 0 8px 22px rgba(24, 119, 190, .10);
}

.auth-confirm-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  color: #fff;
  background: linear-gradient(145deg, #1ca8ef, #0877d0);
  box-shadow: 0 7px 16px rgba(8, 119, 208, .24);
}
.auth-confirm-icon i { font-size: 22px; }
.auth-confirm-content { display: grid; gap: 2px; min-width: 0; }
.auth-confirm-kicker {
  display: inline-flex;
  gap: 5px;
  align-items: center;
  color: #1679c7;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .35px;
  text-transform: uppercase;
}
.auth-confirm-content > strong { color: #315d82; font-size: 12px; }
.auth-phone-confirmation b {
  color: #073f75;
  font-size: 24px;
  line-height: 1.15;
  letter-spacing: .7px;
}
.auth-phone-confirmation small { color: #637d93; font-size: 10px; line-height: 1.4; }
.auth-confirm-status { color: #2bb673; font-size: 21px; filter: drop-shadow(0 2px 4px rgba(43, 182, 115, .2)); }

.auth-phone-confirmation.auth-phone-only {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3px;
  padding: 12px 14px;
  text-align: center;
}

.auth-phone-only > span {
  color: #315d82;
  font-size: 11px;
  font-weight: 800;
}

.auth-phone-only > b {
  font-size: 24px;
}

.auth-popup-confirm-check {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid #d9e4ee;
  border-radius: 12px;
  color: #25384b;
  background: #fff;
  cursor: pointer;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.auth-popup-confirm-check input {
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: #1684ee;
}
.auth-popup-confirm-check > span { display: grid; gap: 1px; }
.auth-popup-confirm-check strong { font-size: 11px; font-weight: 900; }
.auth-popup-confirm-check small { color: #738499; font-size: 9.5px; line-height: 1.35; }
.auth-popup-confirm-check:has(input:checked) {
  border-color: #67b8eb;
  background: #f2faff;
  box-shadow: 0 0 0 3px rgba(22, 132, 238, .08);
}

.auth-captcha-box {
  display: grid;
  grid-template-columns: 1fr auto 118px;
  gap: 10px;
  align-items: center;
  padding: 12px;
  border: 1px solid #a9cfee;
  border-radius: 14px;
  background: #f4faff;
  box-shadow: 0 5px 16px rgba(21, 121, 205, .08);
}

.auth-captcha-box div { display: grid; gap: 2px; }
.auth-captcha-box span { color: #65758a; font-size: 12px; }
.auth-captcha-box strong { color: #1d344b; font-size: 18px; }

.auth-captcha-box button {
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 10px;
  background: #e5f1ff;
  color: #1679d3;
}

.auth-captcha-box input {
  width: 100%;
  min-width: 0;
  height: 48px;
  border: 2px solid #178be2;
  border-radius: 10px;
  background: #fff;
  color: #0b4e86;
  text-align: center;
  font-size: 18px;
  font-weight: 800;
  box-shadow: inset 0 1px 2px rgba(13, 69, 111, .05), 0 0 0 3px rgba(23, 139, 226, .08);
}

.auth-captcha-box input::placeholder {
  color: #5f8fb6;
  opacity: 1;
}

.auth-captcha-box input:focus {
  outline: 0;
  border-color: #006fc8;
  box-shadow: 0 0 0 4px rgba(0, 111, 200, .16);
}

.auth-popup-honeypot {
  position: absolute !important;
  left: -10000px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

.auth-password-contact-row {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin-top: 16px;
  color: #526d86;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
}

.auth-password-contact-row > span {
  pointer-events: none;
}

.auth-password-recovery-link {
  display: inline;
  padding: 0;
  border: 0;
  background: transparent;
  color: #1679d3;
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.auth-password-recovery-link:hover { color: #1679d3; }

.auth-password-recovery-link:disabled {
  opacity: .55;
  cursor: wait;
}

.auth-login-card .auth-password-contact-row {
  margin-top: 16px;
}

@media (max-width: 480px) {
  .auth-phone-confirmation {
    grid-template-columns: 44px minmax(0, 1fr) 20px;
    gap: 10px;
    padding: 12px;
  }
  .auth-confirm-icon { width: 44px; height: 44px; border-radius: 12px; }
  .auth-phone-confirmation b { font-size: 22px; }
  .auth-captcha-box { grid-template-columns: 1fr auto 104px; }
}

/* =========================================================
   V66.3 — Orderly registration final step
========================================================= */
.auth-register-final:not([hidden]) {
  display: grid;
  gap: 10px;
}

.auth-final-section {
  min-width: 0;
  padding: 11px;
  border: 1px solid #d4e7f2;
  border-radius: 16px;
  background: rgba(255, 255, 255, .76);
}

.auth-final-section-title {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  margin: 0 1px 10px;
}

.auth-final-section-title > span {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: #fff;
  background: linear-gradient(145deg, #29adeb, #0c80cf);
  font-size: 13px;
}

.auth-final-section-title > div {
  min-width: 0;
  display: grid;
  gap: 1px;
}

.auth-final-section-title strong {
  color: #28536d;
  font-size: 12px;
  line-height: 1.25;
}

.auth-final-section-title small {
  color: #839aa8;
  font-size: 9.5px;
  line-height: 1.3;
}

.auth-popup-form .auth-final-account .auth-popup-field {
  min-height: 42px;
  margin-bottom: 7px;
  border-color: #d7e7ef;
  border-radius: 11px;
  box-shadow: none;
}

.auth-popup-form .auth-final-account .auth-popup-field:last-child {
  margin-bottom: 0;
}

.auth-popup-form .auth-final-account .auth-popup-field > i {
  width: 43px;
  flex-basis: 43px;
  font-size: 14px;
}

.auth-popup-form .auth-final-account .auth-popup-field input,
.auth-popup-form .auth-final-account .auth-popup-field select {
  height: 40px;
  font-size: 12px;
}

.auth-final-verification {
  background: #f7fbfe;
}

.auth-final-verification .auth-final-section-title {
  margin-bottom: 9px;
}

.auth-final-verification .auth-final-section-title > span {
  color: #1685c8;
  background: #e3f4fd;
}

.auth-final-verification .auth-phone-confirmation.auth-phone-only {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 9px 11px;
  border-color: #d5e7f0;
  border-radius: 11px;
  background: #fff;
  box-shadow: none;
  text-align: left;
}

.auth-final-verification .auth-phone-only > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #6e8797;
  font-size: 10px;
  font-weight: 700;
}

.auth-final-verification .auth-phone-only > span i {
  color: #168fd4;
  font-size: 10px;
}

.auth-final-verification .auth-phone-only > b {
  color: #0b5f95;
  font-size: 18px;
  letter-spacing: .35px;
  white-space: nowrap;
}

.auth-final-verification .auth-captcha-box {
  grid-template-columns: minmax(0, 1fr) 34px 108px;
  gap: 7px;
  margin-top: 7px;
  padding: 9px 10px;
  border-color: #d5e7f0;
  border-radius: 11px;
  background: #fff;
  box-shadow: none;
}

.auth-final-verification .auth-captcha-question {
  gap: 1px;
}

.auth-final-verification .auth-captcha-question > span {
  color: #7d919f;
  font-size: 9px;
  line-height: 1.25;
}

.auth-final-verification .auth-captcha-question > strong {
  color: #23465d;
  font-size: 17px;
}

.auth-final-verification .auth-captcha-box > button {
  width: 34px;
  height: 34px;
  border: 1px solid #d8eaf5;
  border-radius: 9px;
  background: #edf7fd;
  cursor: pointer;
}

.auth-captcha-answer {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.auth-final-verification .auth-captcha-answer > span {
  color: #6b8495;
  font-size: 9px;
  font-weight: 800;
  line-height: 1;
}

.auth-final-verification .auth-captcha-answer > input {
  height: 36px;
  border-width: 2px;
  border-radius: 9px;
  font-size: 15px;
  box-shadow: none;
}

.auth-popup-form .auth-popup-message {
  min-height: 18px;
  margin: 4px 2px 6px;
}

.auth-popup-form .auth-popup-actions {
  padding-top: 1px;
}

.auth-popup-form .auth-popup-back {
  min-width: 84px;
  padding-inline: 12px;
}

/* Popup registration uses the same bank-logo picker as register.html. */
.auth-popup-bank-picker {
  z-index: 70;
  margin-bottom: 10px;
}

.auth-popup-bank-picker .bank-picker-trigger {
  height: 46px;
  justify-content: flex-start;
  padding: 0 44px 0 13px;
  border: 1px solid #9bd2f1;
  border-radius: 13px;
  color: #274f68;
  background: #fff;
  font-size: 12px;
  font-weight: 700;
  box-shadow: 0 2px 7px rgba(17, 114, 174, .06);
}

.auth-popup-bank-picker:not(.has-selection) .bank-picker-current {
  width: 100%;
  justify-content: flex-start;
  color: #607b8d;
}

.auth-popup-bank-picker .bank-picker-current img {
  width: 30px;
  height: 30px;
  flex-basis: 30px;
  border-radius: 8px;
}

.auth-popup-bank-picker .bank-picker-menu {
  top: calc(100% + 5px);
  max-height: min(390px, 55vh);
  padding: 6px;
  border: 1px solid #c9e4f3;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 18px 38px rgba(25, 76, 109, .2);
  scrollbar-color: #b6cfdd #f4f9fc;
}

.auth-popup-bank-picker .bank-picker-option {
  min-height: 42px;
  padding: 4px 8px;
  border-bottom-color: #edf4f8;
  border-radius: 8px;
  color: #284b62;
  font-size: 12px;
}

.auth-popup-bank-picker .bank-picker-option:hover,
.auth-popup-bank-picker .bank-picker-option:focus-visible,
.auth-popup-bank-picker .bank-picker-option.is-selected {
  color: #0b6fae;
  background: #eaf7ff;
}

.auth-popup-bank-picker .bank-picker-option img {
  width: 32px;
  height: 32px;
  flex-basis: 32px;
}

/* Standalone register.html keeps its dark visual language. */
.registration-body .auth-final-section {
  border-color: rgba(255, 255, 255, .08);
  background: rgba(255, 255, 255, .025);
}

.registration-body .auth-final-section-title strong {
  color: #e8ecea;
}

.registration-body .auth-final-section-title small {
  color: #747b77;
}

.registration-body .auth-final-account .wizard-input,
.registration-body .auth-final-account .wizard-select-wrap {
  margin-bottom: 7px;
}

.registration-body .auth-final-account .wizard-select-wrap:last-child {
  margin-bottom: 0;
}

.registration-body .auth-final-verification {
  background: rgba(255, 255, 255, .018);
}

.registration-body .auth-final-verification .auth-phone-confirmation.auth-phone-only,
.registration-body .auth-final-verification .auth-captcha-box {
  border-color: rgba(255, 255, 255, .08);
  background: #202321;
}

.registration-body .auth-final-verification .auth-phone-only > span,
.registration-body .auth-final-verification .auth-captcha-question > span,
.registration-body .auth-final-verification .auth-captcha-answer > span {
  color: #89908c;
}

.registration-body .auth-final-verification .auth-phone-only > b,
.registration-body .auth-final-verification .auth-captcha-question > strong {
  color: #f0f5f2;
}

.registration-body .auth-final-verification .auth-captcha-box > button {
  border-color: rgba(86, 157, 213, .20);
  background: #263b49;
}

.registration-body .auth-final-verification .auth-captcha-answer > input {
  color: #fff;
  background: #171918;
}

@media (max-width: 480px) {
  .auth-final-section {
    padding: 10px;
    border-radius: 14px;
  }

  .auth-final-section-title {
    margin-bottom: 8px;
  }

  .auth-final-verification .auth-captcha-box {
    grid-template-columns: minmax(0, 1fr) 32px 104px;
    gap: 6px;
    padding: 8px;
  }

  .auth-final-verification .auth-captcha-box > button {
    width: 32px;
    height: 34px;
  }
}

@media (max-width: 360px) {
  .auth-final-verification .auth-phone-confirmation.auth-phone-only {
    grid-template-columns: 1fr;
    gap: 2px;
  }

  .auth-final-verification .auth-captcha-box {
    grid-template-columns: minmax(0, 1fr) 32px 94px;
  }

  .auth-final-verification .auth-phone-only > b {
    font-size: 17px;
  }
}

/* ===== V66.11 Clean professional deposit review ===== */
#financeDetailDialog.finance-detail-dialog:has(.deposit-review-body) {
  width: min(1120px, calc(100vw - 24px));
  max-height: 96vh;
  border-radius: 16px;
  background: #f4f6f9;
  box-shadow: 0 28px 80px rgba(18, 31, 49, .28);
}

#financeDetailDialog:has(.deposit-review-body) .finance-detail-header {
  min-height: 68px;
  padding: 14px 20px;
  border-bottom: 1px solid #e3e8ef;
  background: #fff;
}

#financeDetailDialog:has(.deposit-review-body) .finance-eyebrow {
  color: #758399;
  font-size: 10px;
  letter-spacing: .02em;
  text-transform: none;
}

#financeDetailDialog:has(.deposit-review-body) .finance-detail-header h2 {
  margin-top: 3px;
  color: #17253a;
  font-size: 16px;
  font-weight: 800;
}

#financeDetailDialog .deposit-review-body {
  max-height: calc(96vh - 68px);
  padding: 14px 16px 0;
  gap: 12px;
  background: #f4f6f9;
}

.deposit-clean-overview-v6611 {
  padding: 13px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border: 1px solid #e1e6ed;
  border-radius: 12px;
  background: #fff;
}

.deposit-clean-overview-main-v6611,
.deposit-clean-overview-meta-v6611 {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.deposit-clean-channel-v6611 {
  min-height: 30px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border-radius: 8px;
  color: #315d98;
  background: #edf4ff;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}

.deposit-clean-channel-v6611.is-wallet { color: #a75d00; background: #fff4e3; }
.deposit-clean-channel-v6611.is-envelope { color: #9f4b17; background: #fff0e8; }

.deposit-clean-amount-v6611 {
  color: #12233b;
  font-size: 25px;
  line-height: 1;
  font-weight: 900;
}

.deposit-clean-overview-meta-v6611 {
  justify-content: flex-end;
  color: #7b899b;
  font-size: 10px;
  font-weight: 700;
}

.deposit-clean-workspace-v6611 {
  display: grid;
  grid-template-columns: minmax(320px, 38%) minmax(0, 62%);
  gap: 12px;
  align-items: stretch;
}

.deposit-clean-left-v6611 {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 12px;
}

.deposit-clean-workspace-v6611 .deposit-detail-card {
  padding: 13px;
  border-color: #e0e5ec;
  border-radius: 12px;
  box-shadow: none;
}

.deposit-clean-workspace-v6611 .deposit-detail-card-header {
  margin-bottom: 10px;
}

.deposit-clean-workspace-v6611 .deposit-detail-card-header i {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  color: #436995;
  background: #eef3f8;
}

.deposit-clean-workspace-v6611 .deposit-detail-card-header h3 {
  font-size: 13px;
}

.deposit-clean-member-name-v6611 {
  padding: 2px 2px 12px;
  border-bottom: 1px solid #edf0f4;
}

.deposit-clean-member-name-v6611 span,
.deposit-clean-receiver-v6611 span {
  display: block;
  color: #8a96a7;
  font-size: 9px;
  font-weight: 800;
}

.deposit-clean-member-name-v6611 strong {
  display: block;
  margin-top: 4px;
  color: #17283e;
  font-size: 17px;
  font-weight: 850;
  overflow-wrap: anywhere;
}

.deposit-clean-member-name-v6611 small,
.deposit-clean-receiver-v6611 small {
  display: block;
  margin-top: 4px;
  color: #718097;
  font-size: 10px;
  overflow-wrap: anywhere;
}

.deposit-clean-member-v6611 .deposit-bank-identity {
  margin-top: 10px;
  border: 1px solid #e4e9ef;
  box-shadow: none;
}

.deposit-clean-receiver-v6611 {
  margin-top: 10px;
  padding: 9px 10px;
  border-radius: 9px;
  background: #f5f7fa;
}

.deposit-clean-receiver-v6611 strong {
  display: block;
  margin-top: 3px;
  color: #263c58;
  font-size: 11px;
}

.deposit-clean-proof-card-v6611 {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.deposit-clean-proof-card-v6611 .deposit-proof-toolbar {
  margin: -2px 0 8px;
}

.deposit-clean-proof-card-v6611 .deposit-detail-proof--review {
  min-height: 490px;
  flex: 1;
  padding: 10px;
  display: grid;
  place-items: center;
  border: 1px solid #e1e6ed;
  background: #f0f2f5;
}

.deposit-clean-proof-card-v6611 .deposit-proof-image-button {
  width: 100%;
  height: 100%;
  min-height: 468px;
  display: grid;
  place-items: center;
}

.deposit-clean-proof-card-v6611 .deposit-detail-proof--review img {
  max-height: min(65vh, 620px);
  box-shadow: 0 5px 18px rgba(18, 34, 56, .12);
}

.deposit-clean-history-v6611 .deposit-detail-card-header {
  padding-right: 2px;
}

.deposit-history-live-v6611 {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #25845e;
  font-size: 9px;
  font-weight: 800;
}

.deposit-history-live-v6611 i {
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: #29ad79 !important;
  box-shadow: 0 0 0 4px rgba(41, 173, 121, .11);
}

.deposit-history-list-v6611 { gap: 6px; }

.deposit-history-item-v6611 {
  min-height: 52px;
  padding: 7px 8px;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  gap: 8px;
  border-color: #e6eaf0;
  background: #fff;
}

.deposit-history-item-v6611.is-current {
  border-color: #9fc0eb;
  background: #f4f8ff;
  box-shadow: inset 3px 0 #4280d3;
}

.deposit-history-channel-v6611 {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: #3e6fae;
  background: #edf4fd;
  font-size: 11px;
}

.deposit-history-channel-v6611.is-wallet { color: #ae680b; background: #fff4e5; }
.deposit-history-channel-v6611.is-envelope { color: #aa5420; background: #fff0e9; }

.deposit-history-main-v6611 { min-width: 0; }

.deposit-history-title-v6611 {
  display: flex;
  align-items: center;
  gap: 5px;
}

.deposit-history-title-v6611 strong {
  color: #283d58;
  font-size: 10px;
}

.deposit-history-title-v6611 em {
  padding: 2px 5px;
  border-radius: 5px;
  color: #376daa;
  background: #e5effc;
  font-size: 7px;
  font-style: normal;
  font-weight: 900;
  white-space: nowrap;
}

.deposit-history-main-v6611 > small {
  margin-top: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.deposit-history-all-v6611 {
  width: 100%;
  min-height: 32px;
  margin-top: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid #dfe5ec;
  border-radius: 8px;
  color: #50647e;
  background: #f8fafc;
  font-size: 9px;
  font-weight: 800;
}

.deposit-history-all-v6611 i { font-size: 8px; }

.deposit-clean-risk-v6611 {
  padding: 9px 12px;
  border-radius: 10px;
}

.deposit-clean-risk-v6611 .deposit-risk-head span { display: none; }
.deposit-clean-risk-v6611 ul { margin-top: 5px; }

#financeDetailDialog:has(.deposit-review-body) .deposit-review-actions {
  bottom: 0;
  margin: 0 -16px;
  padding: 11px 16px calc(11px + env(safe-area-inset-bottom));
  border-top-color: #e1e6ec;
  box-shadow: 0 -8px 22px rgba(32, 46, 66, .06);
}

#financeDetailDialog:has(.deposit-review-body) .deposit-review-button {
  min-width: 142px;
  min-height: 42px;
  border-radius: 8px;
  box-shadow: none;
  font-size: 11px;
  cursor: pointer;
}

#financeDetailDialog:has(.deposit-review-body) .deposit-review-button:disabled {
  cursor: not-allowed;
}

/* V66.11.3 — consistent pointer feedback across approve, manual and reject dialogs. */
:is(#depositApproveDialog, #depositManualDialog, #depositRejectDialog) button:not(:disabled),
:is(#depositApproveDialog, #depositManualDialog, #depositRejectDialog) select,
:is(#depositApproveDialog, #depositManualDialog) input[type="date"],
:is(#depositApproveDialog, #depositManualDialog) input[type="time"],
:is(#depositApproveDialog, #depositManualDialog) input[type="date"]::-webkit-calendar-picker-indicator,
:is(#depositApproveDialog, #depositManualDialog) input[type="time"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
}

:is(#depositApproveDialog, #depositManualDialog, #depositRejectDialog) button:disabled {
  cursor: not-allowed;
}

@media (max-width: 820px) {
  #financeDetailDialog.finance-detail-dialog:has(.deposit-review-body) {
    width: calc(100vw - 10px);
    max-height: 98vh;
    border-radius: 12px;
  }

  #financeDetailDialog .deposit-review-body {
    max-height: calc(98vh - 64px);
    padding: 10px 10px 0;
  }

  .deposit-clean-overview-v6611 {
    padding: 11px;
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }

  .deposit-clean-overview-meta-v6611 { justify-content: flex-start; }

  .deposit-clean-workspace-v6611 {
    grid-template-columns: 1fr;
  }

  .deposit-clean-proof-card-v6611 { order: -1; }
  .deposit-clean-proof-card-v6611 .deposit-detail-proof--review { min-height: 310px; }
  .deposit-clean-proof-card-v6611 .deposit-proof-image-button { min-height: 288px; }
  .deposit-clean-proof-card-v6611 .deposit-detail-proof--review img { max-height: 55vh; }

  #financeDetailDialog:has(.deposit-review-body) .deposit-review-actions {
    margin: 0 -10px;
    padding: 9px 7px calc(9px + env(safe-area-inset-bottom));
    gap: 6px;
  }

  #financeDetailDialog:has(.deposit-review-body) .deposit-review-button {
    min-width: 0;
    padding: 0 7px;
  }
}

/* ===== V66.11.4 Deposit popup center + customer credit success ===== */
.deposit-result-dialog-v69[open] {
  position: fixed !important;
  inset: 50% auto auto 50% !important;
  margin: 0 !important;
  transform: translate(-50%, -50%) !important;
}

#financeDetailDialog.finance-detail-dialog[open]:has(.deposit-review-body) {
  position: fixed !important;
  inset: 50% auto auto 50% !important;
  margin: 0 !important;
  transform: translate(-50%, -50%) !important;
}

/* ===== V66.12.4 Compact bank / wallet deposit review popup =====
   The TrueMoney envelope action uses its own direct dialog and is intentionally
   not affected by these deposit-review-body rules. */
@media (min-width: 821px) {
  #financeDetailDialog.finance-detail-dialog:has(.deposit-review-body) {
    width: min(960px, calc(100vw - 40px));
    max-height: 92vh;
    border-radius: 14px;
  }

  #financeDetailDialog:has(.deposit-review-body) .finance-detail-header {
    min-height: 58px;
    padding: 10px 16px;
  }

  #financeDetailDialog:has(.deposit-review-body) .finance-detail-header h2 {
    margin-top: 1px;
    font-size: 15px;
  }

  #financeDetailDialog:has(.deposit-review-body) .finance-dialog-close {
    width: 34px !important;
    height: 34px !important;
  }

  #financeDetailDialog .deposit-review-body {
    max-height: calc(92vh - 58px);
    padding: 10px 12px 0;
    gap: 9px;
  }

  .deposit-clean-overview-v6611 {
    padding: 9px 12px;
    gap: 12px;
    border-radius: 10px;
  }

  .deposit-clean-channel-v6611 {
    min-height: 27px;
    padding: 0 9px;
  }

  .deposit-clean-amount-v6611 {
    font-size: 22px;
  }

  .deposit-clean-risk-v6611 {
    padding: 7px 10px;
  }

  .deposit-clean-workspace-v6611 {
    grid-template-columns: minmax(300px, 37%) minmax(0, 63%);
    gap: 10px;
  }

  .deposit-clean-left-v6611 {
    gap: 9px;
  }

  .deposit-clean-workspace-v6611 .deposit-detail-card {
    padding: 10px;
    border-radius: 10px;
  }

  .deposit-clean-workspace-v6611 .deposit-detail-card-header {
    margin-bottom: 8px;
  }

  .deposit-clean-workspace-v6611 .deposit-detail-card-header i {
    width: 25px;
    height: 25px;
    border-radius: 7px;
  }

  .deposit-clean-member-name-v6611 {
    padding: 1px 1px 9px;
  }

  .deposit-clean-member-name-v6611 strong {
    margin-top: 3px;
    font-size: 15px;
  }

  .deposit-clean-member-name-v6611 small,
  .deposit-clean-receiver-v6611 small {
    margin-top: 3px;
  }

  .deposit-clean-member-v6611 .deposit-bank-identity {
    margin-top: 8px;
  }

  .deposit-clean-receiver-v6611 {
    margin-top: 8px;
    padding: 7px 9px;
  }

  .deposit-clean-proof-card-v6611 .deposit-proof-toolbar {
    margin: -1px 0 6px;
  }

  .deposit-clean-proof-card-v6611 .deposit-detail-proof--review {
    min-height: 360px;
    padding: 8px;
  }

  .deposit-clean-proof-card-v6611 .deposit-proof-image-button {
    min-height: 342px;
  }

  .deposit-clean-proof-card-v6611 .deposit-detail-proof--review img {
    max-height: min(52vh, 470px);
  }

  .deposit-history-item-v6611 {
    min-height: 46px;
    padding: 6px 7px;
  }

  .deposit-history-all-v6611 {
    min-height: 29px;
    margin-top: 6px;
  }

  #financeDetailDialog:has(.deposit-review-body) .deposit-review-actions {
    margin: 0 -12px;
    padding: 9px 12px calc(9px + env(safe-area-inset-bottom));
    gap: 8px;
  }

  #financeDetailDialog:has(.deposit-review-body) .deposit-review-button {
    min-width: 124px;
    min-height: 38px;
    padding: 0 16px;
  }
}

/* ===== V66.13 Automatic slip storage ===== */
.v6613-slip-storage {
  display: grid;
  gap: 16px;
}

.v6613-slip-storage-hero {
  display: flex;
  align-items: center;
  gap: 14px;
  background: linear-gradient(135deg, #eef7ff, #f7fbff);
  border-color: #cfe6fb;
}

.v6613-slip-storage-hero__icon {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  color: #fff;
  background: #1677c8;
  font-size: 21px;
}

.v6613-slip-storage-hero strong {
  display: block;
  color: #17324d;
  font-size: 17px;
}

.v6613-slip-storage-hero p {
  margin: 4px 0 0;
  color: #587086;
  line-height: 1.55;
}

.v6613-slip-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.v6613-slip-stats article {
  min-width: 0;
  padding: 16px;
  border: 1px solid #e0e8f0;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(30, 73, 110, .06);
}

.v6613-slip-stats i {
  color: #1677c8;
  font-size: 18px;
}

.v6613-slip-stats span,
.v6613-slip-stats small {
  display: block;
  color: #75899b;
  font-size: 12px;
}

.v6613-slip-stats span { margin-top: 10px; }

.v6613-slip-stats strong {
  display: block;
  margin: 3px 0 2px;
  color: #17324d;
  font-size: 23px;
  overflow-wrap: anywhere;
}

.v6613-slip-retention-form {
  display: flex;
  align-items: end;
  gap: 12px;
}

.v6613-slip-retention-form label {
  display: grid;
  gap: 7px;
  min-width: 240px;
  color: #34495c;
  font-weight: 700;
}

.v6613-slip-retention-form select {
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid #ccd9e5;
  border-radius: 11px;
  background: #fff;
  color: #17324d;
  font: inherit;
}

.v6613-slip-safety {
  display: flex;
  gap: 10px;
  margin-top: 16px;
  padding: 13px 14px;
  border: 1px solid #bfe6cf;
  border-radius: 12px;
  background: #f0fbf5;
  color: #286044;
  line-height: 1.55;
}

.v6613-slip-safety i { margin-top: 3px; color: #16804e; }

.v6613-slip-cleanup-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.v6613-slip-cleanup-button {
  border: 0;
  border-radius: 11px;
  padding: 11px 16px;
  color: #fff;
  background: #cf3f4a;
  font-weight: 800;
  cursor: pointer;
}

.v6613-slip-cleanup-button:disabled { opacity: .55; cursor: wait; }

.v6613-slip-storage-status {
  min-height: 20px;
  margin: 12px 0 0;
  color: #16804e;
  font-size: 13px;
}

.v6613-slip-storage-status.is-error { color: #c3323d; }

.deposit-slip-expired-v6613 {
  width: 100%;
  min-height: 220px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 26px 20px;
  text-align: center;
  border: 1px dashed #bdcbd8;
  border-radius: 12px;
  background: #f7f9fb;
  color: #65798b;
}

.deposit-slip-expired-v6613 i { color: #8ca0b2; font-size: 30px; }
.deposit-slip-expired-v6613 strong { color: #40576b; font-size: 15px; }
.deposit-slip-expired-v6613 small { max-width: 330px; line-height: 1.5; }

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

@media (max-width: 600px) {
  .v6613-slip-stats { grid-template-columns: 1fr; }
  .v6613-slip-retention-form { align-items: stretch; flex-direction: column; }
  .v6613-slip-retention-form label { min-width: 0; }
  .v6613-slip-retention-form button { width: 100%; }
  .v6613-slip-storage-hero { align-items: flex-start; }
}

#financeDetailDialog:has(.deposit-review-body) .finance-dialog-close {
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 50%;
  color: #fff;
  background: #e54855;
  box-shadow: 0 5px 13px rgba(207, 47, 62, .24);
  cursor: pointer;
}

#financeDetailDialog:has(.deposit-review-body) .finance-dialog-close:hover {
  background: #ce3442;
}

#financeDetailDialog:has(.deposit-review-body) .finance-dialog-close:focus-visible {
  outline: 3px solid rgba(229, 72, 85, .25);
  outline-offset: 2px;
}

.deposit-credit-success-popup {
  position: fixed;
  z-index: 100000;
  left: 50%;
  top: 50%;
  width: min(250px, calc(100vw - 44px));
  min-height: 236px;
  padding: 25px 22px 23px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 9px;
  border: 1px solid rgba(255, 255, 255, .9);
  border-radius: 28px;
  color: #153b2d;
  background: rgba(255, 255, 255, .98);
  box-shadow: 0 24px 70px rgba(13, 59, 42, .28);
  opacity: 0;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(.86);
  transition: opacity .2s ease, transform .2s ease;
}

.deposit-credit-success-popup[hidden] {
  display: none !important;
}

.deposit-credit-success-popup.show {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.deposit-credit-success-icon {
  width: 78px;
  height: 78px;
  margin-bottom: 4px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: #27b36f;
  box-shadow: 0 10px 24px rgba(39, 179, 111, .28);
  font-size: 37px;
}

.deposit-credit-success-popup > strong {
  color: #152b23;
  font-size: clamp(34px, 10vw, 46px);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -.03em;
}

.deposit-credit-success-label {
  color: #269463;
  font-size: 20px;
  font-weight: 850;
  line-height: 1.25;
}

.deposit-credit-success-popup > small {
  color: #60756d;
  font-size: 13px;
  font-weight: 750;
  line-height: 1.35;
  text-align: center;
}

.deposit-credit-success-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: #fff;
  background: #e54855;
  box-shadow: 0 5px 14px rgba(207, 47, 62, .25);
  font-size: 17px;
  cursor: pointer;
}

.deposit-credit-success-close:focus-visible {
  outline: 3px solid rgba(229, 72, 85, .28);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .deposit-credit-success-popup { transition: none; }
}

/* ===== V66.12 wallet envelope review ===== */
.wallet-manual-dialog-v48 {
  width: min(650px, calc(100vw - 28px));
}

.wallet-manual-dialog-v48 .wallet-manual-summary-v48 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.wallet-manual-receiver-v6612 {
  position: relative;
  padding-right: 92px !important;
}

.wallet-manual-receiver-v6612 button,
.wallet-detail-copy-v6612 {
  min-height: 32px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid #b9d4ee;
  border-radius: 8px;
  color: #1763a9;
  background: #fff;
  font: inherit;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}

.wallet-manual-receiver-v6612 button {
  position: absolute;
  right: 9px;
  bottom: 9px;
}

.wallet-manual-link-label-v6612 {
  margin: 1px 2px -5px;
  display: block;
  overflow: hidden;
  color: #71869a;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wallet-detail-summary-v6612 .finance-detail-grid {
  align-items: stretch;
}

.wallet-detail-receiver-v6612 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 10px;
}

.wallet-detail-receiver-v6612 > span {
  grid-column: 1 / -1;
}

.wallet-detail-copy-v6612:disabled {
  cursor: not-allowed;
  opacity: .5;
}

.wallet-masked-url-button-v6612 {
  width: 100%;
  padding: 0;
  border: 0;
  text-align: left;
  background: transparent;
  cursor: pointer;
}

.wallet-masked-url-button-v6612:hover {
  color: #1763a9;
  text-decoration: underline;
}

.wallet-reject-summary-v6612 {
  margin-bottom: 4px;
}

#walletManualDialog button,
#walletManualDialog input[type="date"],
#walletManualDialog input[type="time"],
#walletManualDialog input[type="checkbox"],
#walletRejectDialog button,
#walletRejectDialog select {
  cursor: pointer;
}

@media (max-width: 620px) {
  .wallet-manual-dialog-v48 .wallet-manual-summary-v48 {
    grid-template-columns: 1fr;
  }

  .wallet-detail-receiver-v6612 {
    grid-template-columns: minmax(0, 1fr);
  }

  .wallet-detail-copy-v6612 {
    margin-top: 8px;
    justify-self: start;
  }
}

/* ===== V66.12.5 Balanced compact bank / wallet review popup =====
   Give member details more room while reducing the overall desktop dialog.
   The TrueMoney envelope dialogs and the mobile one-column layout are unchanged. */
@media (min-width: 821px) {
  #financeDetailDialog.finance-detail-dialog:has(.deposit-review-body) {
    width: min(880px, calc(100vw - 40px));
  }

  .deposit-clean-workspace-v6611 {
    grid-template-columns: minmax(340px, 42%) minmax(0, 58%);
  }
}

/* ===== V66.12.6 Compact summary + collapsible review information ===== */
#financeDetailDialog:has(.deposit-review-body) .deposit-clean-overview-v6611 {
  min-height: 52px;
}

#financeDetailDialog:has(.deposit-review-body) .deposit-clean-overview-meta-v6611 span {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}

#financeDetailDialog:has(.deposit-review-body) .deposit-clean-overview-meta-v6611 span::before {
  content: "\f017";
  margin-right: 6px;
  color: #91a0b3;
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
}

#financeDetailDialog:has(.deposit-review-body) .deposit-clean-risk-v6611 {
  position: relative;
  padding: 8px 10px;
  border-width: 1px;
  border-radius: 10px;
}

#financeDetailDialog:has(.deposit-review-body) .deposit-clean-risk-v6611 .deposit-risk-head {
  min-height: 30px;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
}

#financeDetailDialog:has(.deposit-review-body) .deposit-clean-risk-v6611 .deposit-risk-head > i {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: rgba(255, 255, 255, .62);
}

.deposit-risk-heading-v66126 {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.deposit-risk-heading-v66126 strong {
  flex: 0 0 auto;
  font-size: 10px;
  white-space: nowrap;
}

.deposit-risk-summary-v66126 {
  min-width: 0;
  overflow: hidden;
  color: inherit;
  font-size: 9px;
  font-weight: 700;
  opacity: .78;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.deposit-risk-toggle-v66126 {
  min-height: 28px;
  padding: 0 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid currentColor;
  border-radius: 7px;
  color: inherit;
  background: rgba(255, 255, 255, .72);
  font: inherit;
  font-size: 9px;
  font-weight: 850;
  white-space: nowrap;
  cursor: pointer;
}

.deposit-risk-toggle-v66126 i {
  font-size: 8px;
  transition: transform .18s ease;
}

.deposit-clean-risk-v6611.is-expanded-v66126 .deposit-risk-toggle-v66126 i {
  transform: rotate(180deg);
}

#financeDetailDialog:has(.deposit-review-body) .deposit-clean-risk-v6611 .deposit-risk-details-v66126 {
  margin: 8px 2px 1px 36px;
  padding-top: 8px;
  border-top: 1px solid rgba(83, 104, 128, .16);
}

#financeDetailDialog:has(.deposit-review-body) .deposit-clean-risk-v6611 .deposit-risk-details-v66126[hidden] {
  display: none !important;
}

@media (max-width: 820px) {
  #financeDetailDialog:has(.deposit-review-body) .deposit-clean-overview-v6611 {
    min-height: 0;
  }

  #financeDetailDialog:has(.deposit-review-body) .deposit-clean-risk-v6611 .deposit-risk-head {
    grid-template-columns: 28px minmax(0, 1fr);
  }

  .deposit-risk-heading-v66126 {
    display: block;
  }

  .deposit-risk-summary-v66126 {
    display: block;
    margin-top: 2px;
  }

  .deposit-risk-toggle-v66126 {
    grid-column: 1 / -1;
    width: 100%;
    margin-top: 2px;
  }

  #financeDetailDialog:has(.deposit-review-body) .deposit-clean-risk-v6611 .deposit-risk-details-v66126 {
    margin-left: 18px;
  }
}

/* ===== V66.12.7 Tighter desktop review columns =====
   Keep the customer column comfortable while removing unused horizontal space
   around portrait slips. TrueMoney envelope dialogs and mobile stay unchanged. */
@media (min-width: 821px) {
  #financeDetailDialog.finance-detail-dialog:has(.deposit-review-body) {
    width: min(820px, calc(100vw - 40px));
  }

  .deposit-clean-workspace-v6611 {
    grid-template-columns: minmax(340px, 44%) minmax(0, 56%);
    gap: 9px;
  }

  .deposit-clean-proof-card-v6611 .deposit-detail-proof--review {
    padding: 5px;
  }

  .deposit-clean-proof-card-v6611 .deposit-proof-image-button {
    min-width: 0;
  }
}

/* ===== V66.12.8 Equal columns + full slip review =====
   Use a true 50/50 desktop layout and size the proof area from the receipt
   itself, so portrait slips no longer sit inside a tall empty grey panel.
   TrueMoney envelope dialogs and the mobile one-column layout stay unchanged. */
@media (min-width: 821px) {
  #financeDetailDialog.finance-detail-dialog:has(.deposit-review-body) {
    width: min(760px, calc(100vw - 32px));
  }

  .deposit-clean-workspace-v6611 {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
    gap: 8px;
  }

  .deposit-clean-proof-card-v6611 {
    align-self: start;
  }

  .deposit-clean-proof-card-v6611 .deposit-detail-proof--review {
    min-height: 0;
    padding: 2px;
    flex: 0 0 auto;
  }

  .deposit-clean-proof-card-v6611 .deposit-proof-image-button {
    width: 100%;
    height: auto;
    min-height: 0;
  }

  .deposit-clean-proof-card-v6611 .deposit-detail-proof--review img {
    width: 100%;
    height: auto;
    max-width: 100%;
    max-height: none;
    object-fit: contain;
  }
}

/* ===== V66.15.1 Unified customer deposit instruction bars =====
   Keep bank, direct wallet and wallet-envelope notices visually identical.
   The three-column grid plus the empty trailing column keeps the copy truly
   centered while retaining the information icon on the left. */
.deposit-alert-card.deposit-info-bar-v44,
.deposit-alert-card.wallet-transfer-notice-v52,
.wallet-guide-bar-v49 {
  min-height: 52px;
  margin: 9px 0 12px;
  padding: 9px 12px;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) 24px;
  align-items: center;
  column-gap: 10px;
  border: 0;
  border-radius: 12px;
  color: #315b77;
  background: linear-gradient(180deg, #f8fcff 0%, #edf7fd 100%);
  box-shadow:
    inset 0 0 0 1px #d3e8f6,
    0 3px 10px rgba(42, 119, 168, .05);
}

.deposit-alert-card.deposit-info-bar-v44::after,
.deposit-alert-card.wallet-transfer-notice-v52::after,
.wallet-guide-bar-v49::after {
  content: "";
  width: 24px;
  height: 24px;
}

.deposit-alert-card.deposit-info-bar-v44 > i,
.deposit-alert-card.wallet-transfer-notice-v52 > i,
.wallet-guide-bar-v49 > i {
  width: 24px;
  height: 24px;
  margin: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(145deg, #34a7ee, #1688d4);
  box-shadow: 0 4px 10px rgba(26, 139, 214, .18);
  font-size: 11px;
}

.deposit-alert-card.deposit-info-bar-v44 > p,
.deposit-alert-card.wallet-transfer-notice-v52 > p,
.wallet-guide-bar-v49 > span {
  min-width: 0;
  margin: 0;
  color: #315b77;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.4;
  text-align: center;
}

@media (max-width: 380px) {
  .deposit-alert-card.deposit-info-bar-v44,
  .deposit-alert-card.wallet-transfer-notice-v52,
  .wallet-guide-bar-v49 {
    padding: 9px 10px;
    column-gap: 8px;
  }

  .deposit-alert-card.deposit-info-bar-v44 > p,
  .deposit-alert-card.wallet-transfer-notice-v52 > p,
  .wallet-guide-bar-v49 > span {
    font-size: 11.5px;
  }
}

/* ===== V66.15.3 automatic bank-card text contrast =====
   Keeps each bank's real color while choosing the more readable ink.
   JS calculates contrast from --bank-color and --bank-strong, including the
   default palette used by an unknown or newly added bank code. */
.deposit-theme-bank .deposit-account-card {
  color: var(--bank-card-ink, #fff);
}

.deposit-theme-bank .deposit-account-card .deposit-account-detail > span,
.deposit-theme-bank .deposit-account-card .deposit-account-detail > small {
  color: var(--bank-card-ink, #fff);
  opacity: 1;
}

.deposit-theme-bank .deposit-account-card .deposit-account-detail > strong {
  color: var(--bank-card-ink, #fff);
}

.deposit-theme-bank .deposit-account-card > button {
  border-color: var(--bank-card-button-border, rgba(255,255,255,.58));
  color: var(--bank-card-ink, #fff);
  background: var(--bank-card-button-bg, rgba(0,0,0,.12));
  text-shadow: none;
}

.deposit-theme-bank .deposit-bank-choice.active {
  color: var(--bank-card-ink, #fff);
}

.deposit-theme-bank .deposit-bank-choice.active small {
  color: var(--bank-card-ink, #fff);
  opacity: .9;
}

.deposit-theme-bank .deposit-bank-choice.active.bank-card-dark-ink {
  text-shadow: none;
}

/* ===== V66.15.4 guaranteed bank-card contrast =====
   This layer is intentionally independent from the selected deposit-page
   theme. Known bank palettes get a deterministic ink color, while V66.15.3's
   runtime calculator remains the fallback for future/unknown bank codes. */
.deposit-account-card.bank-theme-default,
.deposit-account-card.bank-theme-ktb,
.deposit-account-card.bank-theme-bay,
.deposit-account-card.bank-theme-wing,
.deposit-bank-choice.active.bank-theme-default,
.deposit-bank-choice.active.bank-theme-ktb,
.deposit-bank-choice.active.bank-theme-bay,
.deposit-bank-choice.active.bank-theme-wing {
  --bank-card-ink: #101820 !important;
  --bank-card-button-bg: rgba(255,255,255,.48) !important;
  --bank-card-button-border: rgba(16,24,32,.42) !important;
}

.deposit-account-card.bank-theme-scb,
.deposit-account-card.bank-theme-kbank,
.deposit-account-card.bank-theme-bbl,
.deposit-account-card.bank-theme-ttb,
.deposit-account-card.bank-theme-gsb,
.deposit-account-card.bank-theme-truemoney,
.deposit-account-card.bank-theme-aba,
.deposit-account-card.bank-theme-cimb,
.deposit-account-card.bank-theme-kkp,
.deposit-account-card.bank-theme-baac,
.deposit-account-card.bank-theme-lhbank,
.deposit-account-card.bank-theme-uob,
.deposit-bank-choice.active.bank-theme-scb,
.deposit-bank-choice.active.bank-theme-kbank,
.deposit-bank-choice.active.bank-theme-bbl,
.deposit-bank-choice.active.bank-theme-ttb,
.deposit-bank-choice.active.bank-theme-gsb,
.deposit-bank-choice.active.bank-theme-truemoney,
.deposit-bank-choice.active.bank-theme-aba,
.deposit-bank-choice.active.bank-theme-cimb,
.deposit-bank-choice.active.bank-theme-kkp,
.deposit-bank-choice.active.bank-theme-baac,
.deposit-bank-choice.active.bank-theme-lhbank,
.deposit-bank-choice.active.bank-theme-uob {
  --bank-card-ink: #ffffff !important;
  --bank-card-button-bg: rgba(0,0,0,.12) !important;
  --bank-card-button-border: rgba(255,255,255,.58) !important;
}

.deposit-account-card[data-account-card="bank"],
.deposit-account-card[data-account-card="bank"] .deposit-account-detail > span,
.deposit-account-card[data-account-card="bank"] .deposit-account-detail > strong,
.deposit-account-card[data-account-card="bank"] .deposit-account-detail > small,
.deposit-account-card.bank-theme-default,
.deposit-account-card.bank-theme-default .deposit-account-detail > span,
.deposit-account-card.bank-theme-default .deposit-account-detail > strong,
.deposit-account-card.bank-theme-default .deposit-account-detail > small,
.deposit-account-card[class*="bank-theme-"] .deposit-account-detail > span,
.deposit-account-card[class*="bank-theme-"] .deposit-account-detail > strong,
.deposit-account-card[class*="bank-theme-"] .deposit-account-detail > small {
  color: var(--bank-card-ink, #ffffff) !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

.deposit-account-card[data-account-card="bank"] > button,
.deposit-account-card[class*="bank-theme-"] > button {
  border-color: var(--bank-card-button-border, rgba(255,255,255,.58)) !important;
  color: var(--bank-card-ink, #ffffff) !important;
  background: var(--bank-card-button-bg, rgba(0,0,0,.12)) !important;
  text-shadow: none !important;
}

.deposit-bank-choice.active[class*="bank-theme-"],
.deposit-bank-choice.active[class*="bank-theme-"] strong,
.deposit-bank-choice.active[class*="bank-theme-"] small {
  color: var(--bank-card-ink, #ffffff) !important;
  opacity: 1 !important;
  text-shadow: none !important;
}
/* ===== V66.17.2 manual deposit PIN flow ===== */
#financeSecurityDialog[open] {
  z-index: 2147483000 !important;
}

#financeSecurityDialog .finance-security-description-v50 {
  white-space: pre-line;
}

#financeSecurityDialog [hidden] {
  display: none !important;
}

.deposit-action-dialog button:not(:disabled),
.finance-detail-dialog button:not(:disabled),
.casino-ui-dialog button:not(:disabled) {
  cursor: pointer !important;
}

.deposit-action-dialog button:disabled,
.finance-detail-dialog button:disabled,
.casino-ui-dialog button:disabled {
  cursor: wait !important;
}

/* ===== V66.17.6 professional withdrawal detail + controlled reason ===== */
#financeDetailDialog.finance-detail-dialog:has(.withdraw-detail-body-v66176) {
  width: min(820px, calc(100vw - 30px));
  max-height: min(92vh, 900px);
  overflow: hidden;
  border: 0;
  border-radius: 18px;
  background: #f3f6fa;
  box-shadow: 0 28px 80px rgba(14, 32, 58, .34);
}

#financeDetailDialog:has(.withdraw-detail-body-v66176) .finance-detail-header {
  min-height: 78px;
  padding: 17px 20px;
  color: #fff;
  background: linear-gradient(135deg, #162d4d, #244d80);
}

#financeDetailDialog:has(.withdraw-detail-body-v66176) .finance-detail-header h2 {
  margin-top: 3px;
  color: #fff;
  font-size: 20px;
}

#financeDetailDialog:has(.withdraw-detail-body-v66176) .finance-eyebrow {
  color: rgba(255,255,255,.72);
  letter-spacing: 1.2px;
}

#financeDetailDialog:has(.withdraw-detail-body-v66176) .finance-dialog-close {
  border-color: rgba(255,255,255,.25);
  color: #fff;
  background: rgba(255,255,255,.12);
}

.withdraw-detail-body-v66176 {
  max-height: calc(92vh - 78px);
  padding: 15px;
  gap: 11px;
  overflow: auto;
  background: #f3f6fa;
}

.withdraw-detail-overview-v66176 {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  align-items: center;
  gap: 13px;
  padding: 14px 16px;
  border: 1px solid #dce5ee;
  border-radius: 15px;
  background: #fff;
  box-shadow: 0 5px 18px rgba(26, 51, 80, .06);
}

.withdraw-detail-bank-icon-v66176 {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  overflow: hidden;
  border: 1px solid #dce5ee;
  border-radius: 14px;
  color: #fff;
  background: #178cd1;
  font-size: 22px;
}

.withdraw-detail-bank-icon-v66176 img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.withdraw-detail-amount-v66176 { display: grid; gap: 2px; min-width: 0; }
.withdraw-detail-amount-v66176 > span { color: #738399; font-size: 10px; font-weight: 800; }
.withdraw-detail-amount-v66176 > strong { color: #087f4a; font-size: 25px; line-height: 1.15; }
.withdraw-detail-amount-v66176 > small { color: #8491a2; font-size: 9px; }
.withdraw-detail-status-v66176 { display: grid; justify-items: end; gap: 6px; }
.withdraw-detail-status-v66176 > small { color: #8a97a8; font-size: 9px; }

.withdraw-detail-section-v66176 {
  padding: 13px;
  border: 1px solid #dce5ee;
  border-radius: 15px;
  background: #fff;
}

.withdraw-detail-section-title-v66176 {
  margin: 0 0 10px;
  color: #213a5b;
  font-size: 12px;
  font-weight: 900;
}

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

.withdraw-detail-field-v66176 {
  min-width: 0;
  padding: 10px 11px;
  border: 1px solid #e3e9f0;
  border-radius: 11px;
  background: #f8fafc;
}

.withdraw-detail-field-label-v66176 {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #8491a3;
  font-size: 9px;
  font-weight: 800;
}

.withdraw-detail-field-label-v66176 > i { width: 13px; color: #2c81bc; text-align: center; }
.withdraw-detail-field-value-v66176 { display: flex; align-items: center; gap: 6px; min-width: 0; margin-top: 5px; }
.withdraw-detail-field-value-v66176 > strong { min-width: 0; overflow: hidden; color: #1c304b; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.withdraw-detail-copy-v66176 { flex: 0 0 auto; width: 27px; height: 27px; padding: 0; border: 1px solid #d7e2ec; border-radius: 8px; color: #2e83bd; background: #fff; }
.withdraw-detail-copy-v66176:hover { border-color: #87c4e8; background: #edf8ff; }

.withdraw-detail-metrics-v66176 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.withdraw-detail-metric-v66176 { padding: 10px 11px; border-radius: 11px; background: #f3f6fa; }
.withdraw-detail-metric-v66176 span { display: block; color: #7b899a; font-size: 9px; font-weight: 800; }
.withdraw-detail-metric-v66176 strong { display: block; margin-top: 4px; color: #243a57; font-size: 14px; }
.withdraw-detail-metric-v66176.is-paid { background: #eaf8f1; }
.withdraw-detail-metric-v66176.is-paid strong { color: #087f4a; }
.withdraw-detail-metric-v66176.is-after { background: #edf8ff; }
.withdraw-detail-metric-v66176.is-after strong { color: #087bbb; }
.withdraw-detail-metric-v66176.is-fee strong { color: #bf6e06; }

.withdraw-detail-note-v66176 { margin-top: 8px; padding: 10px 11px; border-left: 3px solid #8ca8c2; border-radius: 9px; background: #f5f8fb; }
.withdraw-detail-note-v66176 span { color: #7e8b9c; font-size: 9px; font-weight: 800; }
.withdraw-detail-note-v66176 p { margin: 4px 0 0; color: #344a64; font-size: 11px; line-height: 1.45; overflow-wrap: anywhere; }

.withdraw-detail-actions-v66176 {
  position: sticky;
  bottom: -15px;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  margin: 2px -15px -15px;
  padding: 12px 15px 15px;
  border-top: 1px solid #dce5ee;
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(7px);
}

.withdraw-detail-action-v66176 { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 45px; border: 0; border-radius: 11px; color: #fff; font-size: 11px; font-weight: 900; }
.withdraw-detail-action-v66176.is-approve { background: linear-gradient(180deg, #18ad67, #087f4a); }
.withdraw-detail-action-v66176.is-reject { background: linear-gradient(180deg, #ef4f5d, #c52532); }
.withdraw-detail-action-v66176:hover { filter: brightness(.96); transform: translateY(-1px); }

.withdraw-decision-reason-v66176 { display: grid; gap: 6px; margin-top: 13px; }
.withdraw-decision-reason-v66176[hidden] { display: none !important; }
.withdraw-decision-note-v593[hidden] { display: none !important; }
.withdraw-decision-reason-v66176 > span { color: #52647a; font-size: 10px; font-weight: 800; }
.withdraw-decision-reason-v66176 select { width: 100%; min-height: 44px; padding: 0 36px 0 11px; border: 1px solid #cfdbe6; border-radius: 11px; outline: 0; color: #263952; background: #fff; font: inherit; font-size: 11px; cursor: pointer; }
.withdraw-decision-reason-v66176 select:focus { border-color: #e56b76; box-shadow: 0 0 0 3px rgba(209,51,65,.10); }
.withdraw-decision-reason-v66176 > small { color: #8a96a6; font-size: 9px; line-height: 1.45; }

@media (max-width: 640px) {
  #financeDetailDialog.finance-detail-dialog:has(.withdraw-detail-body-v66176) { width: calc(100vw - 14px); max-height: 95vh; border-radius: 14px; }
  #financeDetailDialog:has(.withdraw-detail-body-v66176) .finance-detail-header { min-height: 69px; padding: 13px 14px; }
  #financeDetailDialog:has(.withdraw-detail-body-v66176) .finance-detail-header h2 { font-size: 16px; }
  .withdraw-detail-body-v66176 { max-height: calc(95vh - 69px); padding: 10px; }
  .withdraw-detail-overview-v66176 { grid-template-columns: 47px minmax(0, 1fr); padding: 11px; }
  .withdraw-detail-bank-icon-v66176 { width: 45px; height: 45px; border-radius: 11px; }
  .withdraw-detail-amount-v66176 > strong { font-size: 21px; }
  .withdraw-detail-status-v66176 { grid-column: 1 / -1; grid-template-columns: auto 1fr; align-items: center; justify-items: start; }
  .withdraw-detail-grid-v66176, .withdraw-detail-metrics-v66176 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .withdraw-detail-actions-v66176 { bottom: -10px; margin: 2px -10px -10px; padding: 10px; }
}

@media (max-width: 390px) {
  .withdraw-detail-grid-v66176 { grid-template-columns: 1fr; }
  .withdraw-detail-metrics-v66176 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .withdraw-detail-actions-v66176 { grid-template-columns: 1fr; }
}