:root {
  color-scheme: dark;
  --red: #d71922;
  --gold: #ffd36a;
  --green: #17a844;
  --blue: #38a6ff;
  --panel: rgba(9, 10, 18, .86);
  --layer-background: 100;
  --layer-center: 200;
  --layer-numbers: 300;
  --layer-frame: 400;
  --layer-icons: 500;
  --layer-buttons: 600;
  --layer-popups: 2147483500;
  --layer-tips: 2147483646;
}

dialog.mine-modal,
dialog.message-modal {
  width: min(100vw, 430px);
  max-width: 100vw;
  border-radius: 20px 20px 0 0;
  border-color: rgba(255, 211, 106, .45);
  background:
    radial-gradient(circle at 50% 0, rgba(58, 118, 232, .22), transparent 42%),
    linear-gradient(180deg, rgba(17, 31, 68, .98), rgba(5, 7, 15, .99));
}

dialog.mine-modal {
  height: min(88vh, 760px);
}

dialog.message-modal {
  height: min(86vh, 720px);
}

dialog.mine-modal form,
dialog.message-modal form {
  height: 100%;
}

dialog.mine-modal .modal-body,
dialog.message-modal .modal-body {
  height: 100%;
  max-height: none;
  padding: 8px 10px 14px;
  overflow: hidden;
}

.mine-panel-v2 {
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 9px;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

.mine-hero-card {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 12px;
  border: 1px solid rgba(255, 211, 106, .34);
  border-radius: 14px;
  background:
    radial-gradient(circle at 12% 20%, rgba(255, 212, 82, .18), transparent 40%),
    linear-gradient(180deg, rgba(25, 48, 103, .96), rgba(8, 12, 28, .96));
  box-shadow: inset 0 0 22px rgba(75, 151, 255, .12), 0 8px 18px rgba(0,0,0,.18);
}

.mine-panel-v2 .mine-avatar {
  width: 78px;
  height: 78px;
  min-height: 78px;
  border-width: 2px;
}

.mine-panel-v2 .mine-profile-main {
  display: grid;
  gap: 6px;
}

.mine-panel-v2 .mine-nickname-text {
  color: #ffe16b;
  font-size: 22px;
  line-height: 1.08;
}

.mine-panel-v2 .mine-profile-main em {
  color: #dfe9ff;
  font-size: 15px;
  font-weight: 900;
}

.mine-hero-actions {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
}

.mine-hero-actions .copy-id-btn {
  min-height: 30px;
  padding: 0 11px;
  border-radius: 999px;
  background: linear-gradient(180deg, #ffdf7a, #b8730c);
  font-size: 12px;
}

.mine-panel-v2 .mine-stats {
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.mine-panel-v2 .mine-card {
  padding: 10px;
  border-radius: 12px;
}

.mine-panel-v2 .mine-card strong {
  font-size: 22px;
  line-height: 1.1;
}

.mine-commission-card {
  display: grid;
  gap: 4px;
}

.mine-commission-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.mine-commission-line strong {
  min-width: 0;
}

.mine-claim-btn {
  flex: 0 0 auto;
  min-height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  background: linear-gradient(180deg, #ffdf7a, #b8730c);
  color: #2b1600;
  font-size: 12px;
  font-weight: 900;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 5px 12px rgba(0, 0, 0, .18);
}

.mine-claim-btn:disabled {
  opacity: .58;
  filter: grayscale(.15);
}

.mine-commission-card em {
  color: #ffe7a5;
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
  line-height: 1.25;
}

.mine-actions-v2 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.mine-actions-v2 button {
  min-height: 58px;
  padding: 6px 4px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  gap: 3px;
  background: linear-gradient(180deg, #ffde7d, #b66e0b);
  box-shadow: inset 0 2px 4px rgba(255,255,255,.32), 0 6px 14px rgba(0,0,0,.18);
}

.mine-actions-v2 button i {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(64, 24, 0, .26);
  color: #fff3bf;
  font-style: normal;
  font-size: 13px;
}

.mine-actions-v2 button span {
  color: #fff;
  font-size: 12px;
  line-height: 1.1;
}

.mine-panel-v2 .profile-edit-card,
.mine-panel-v2 .password-card,
.mine-panel-v2 .gift-card,
.mine-panel-v2 .mine-note {
  min-height: 0;
  flex: 0 0 auto;
}

.mine-panel-v2 .mine-note {
  min-height: 118px;
  overflow: hidden;
  flex: 1 1 auto;
}

.mine-panel-v2 .mine-records {
  max-height: 100%;
}

.mine-panel-v2 .profile-edit-card {
  overflow: visible;
}

.mine-panel-v2 .profile-edit-card:not(.collapsed) {
  display: grid;
  gap: 8px;
  min-height: 218px;
  padding-bottom: 12px;
}

.mine-panel-v2 .profile-edit-fields {
  display: grid;
  gap: 8px;
  justify-items: stretch;
}

.mine-panel-v2 .avatar-preview {
  position: relative;
  flex: 0 0 auto;
  margin: 2px auto 0;
}

.mine-logout {
  min-height: 42px;
  border-radius: 999px;
  background: linear-gradient(180deg, #ff5a6b, #b20d1e);
}

.message-panel-v2 {
  height: 100%;
  display: grid;
  grid-template-rows: 92px 48px minmax(0, 1fr) auto 48px;
  gap: 8px;
}

.message-panel-v2 .message-contacts {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 104px;
  gap: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-bottom: 2px;
}

.message-panel-v2 .message-contacts::-webkit-scrollbar {
  display: none;
}

.message-panel-v2 .message-contacts button {
  min-height: 88px;
  padding: 7px 5px;
  border: 1px solid rgba(96, 160, 255, .25);
  border-radius: 12px;
  display: grid;
  place-items: center;
  gap: 2px;
  background: linear-gradient(180deg, rgba(26, 45, 94, .96), rgba(7, 10, 22, .96));
}

.message-panel-v2 .message-contacts button.active {
  border-color: rgba(255, 211, 106, .9);
  box-shadow: inset 0 0 15px rgba(255, 211, 106, .12), 0 0 14px rgba(255, 211, 106, .18);
}

.contact-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(255, 211, 106, .65);
  background: radial-gradient(circle at 35% 25%, #375aa7, #07101f 72%);
}

.contact-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.contact-avatar i {
  color: #ffd36a;
  font-style: normal;
  font-weight: 900;
}

.message-panel-v2 .message-contacts b,
.message-panel-v2 .message-contacts small,
.message-panel-v2 .message-contacts em {
  max-width: 94px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.message-panel-v2 .message-contacts b {
  color: #fff;
  font-size: 12px;
}

.message-panel-v2 .message-contacts small,
.message-panel-v2 .message-contacts em {
  color: #ffd36a;
  font-size: 10px;
  font-style: normal;
}

.message-chat-head {
  min-height: 46px;
  padding: 8px 10px;
  border: 1px solid rgba(255, 211, 106, .28);
  border-radius: 12px;
  display: grid;
  align-content: center;
  background: rgba(0,0,0,.2);
}

.message-chat-head b {
  color: #ffe16b;
  font-size: 15px;
}

.message-chat-head span {
  color: #dbe5ff;
  font-size: 11px;
}

.message-panel-v2 .message-list {
  min-height: 0;
  padding: 10px;
  border: 1px solid rgba(96, 160, 255, .22);
  border-radius: 14px;
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  background: rgba(0,0,0,.18);
}

.message-panel-v2 .message-list::-webkit-scrollbar {
  display: none;
}

.message-bubble {
  max-width: 82%;
  margin: 0 0 8px;
  display: grid;
  gap: 3px;
}

.message-bubble.mine {
  margin-left: auto;
  justify-items: end;
}

.message-bubble.other {
  margin-right: auto;
}

.message-bubble span,
.message-bubble img {
  display: block;
  padding: 9px 11px;
  border-radius: 12px;
  color: #fff;
  font-size: 13px;
  line-height: 1.35;
  background: linear-gradient(180deg, rgba(33, 54, 106, .96), rgba(12, 18, 38, .96));
}

.message-bubble.mine span,
.message-bubble.mine img {
  background: linear-gradient(180deg, #ffda76, #b56d0c);
}

.message-bubble img {
  max-width: 160px;
  max-height: 160px;
  padding: 3px;
  object-fit: contain;
}

.message-bubble small {
  color: rgba(221, 231, 255, .72);
  font-size: 10px;
}

.emoji-row {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
}

.emoji-row.hidden {
  display: none;
}

.emoji-row button {
  min-height: 34px;
  border-radius: 999px;
  background: rgba(255, 211, 106, .14);
}

.message-compose {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 40px 58px;
  gap: 6px;
  align-items: center;
}

.message-compose input {
  height: 40px;
  margin: 0;
  border-radius: 999px;
}

.message-compose .message-tool-btn,
.message-compose .image-message-btn,
.message-compose #sendMessageBtn {
  min-height: 40px;
  border-radius: 999px;
}

.message-compose .image-message-btn {
  font-size: 22px;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
  background: #05050a;
  color: #fff;
  font-family: "Microsoft YaHei", Arial, sans-serif;
  overflow-x: hidden;
}

html.android-app,
html.android-app body {
  width: 100%;
  min-width: 0;
  height: 100%;
  min-height: 100%;
  overflow: hidden;
  background: #05050a;
}

button {
  border: 0;
  color: #fff;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
}

button:disabled {
  filter: grayscale(1) brightness(.6);
  cursor: not-allowed;
}

button[data-skin] {
  color: transparent !important;
  text-shadow: none !important;
  border: 0;
  aspect-ratio: var(--btn-ratio);
  min-height: 0 !important;
  height: auto !important;
  padding: 0 !important;
  align-self: center;
  justify-self: stretch;
  background-color: transparent !important;
  background-image: var(--btn-normal) !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 100% 100% !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  filter: none;
}

button.custom-ui-button {
  width: var(--custom-btn-w) !important;
  height: var(--custom-btn-h) !important;
  max-width: none !important;
  max-height: none !important;
  justify-self: start !important;
  align-self: start !important;
  background-size: 100% 100% !important;
}

button[data-skin] span {
  color: transparent !important;
  text-shadow: none !important;
}

button[data-skin] > * {
  opacity: 0;
}

button[data-skin]:active,
button[data-skin].pressed,
button[data-skin]:disabled {
  background-image: var(--btn-down) !important;
  filter: none;
}

.play-controls button[data-skin]:active,
.play-controls button[data-skin].pressed,
.play-controls button[data-skin]:disabled,
.top-controls button[data-skin]:active,
.top-controls button[data-skin].pressed,
.top-controls button[data-skin]:disabled {
  background-image: var(--btn-normal) !important;
  background-position: center !important;
  filter: brightness(.72) saturate(.95);
}

.game-shell {
  width: min(100vw, 560px);
  margin: 0 auto;
}

html.android-app .game-shell {
  width: 560px;
  margin: 0;
  transform: translate(var(--android-left, 0px), var(--android-top, 0px)) scale(var(--android-scale, 1));
  transform-origin: top left;
}

@media (max-width: 560px) {
  html.android-app,
  html.android-app body {
    overflow-x: hidden;
  }

}

html.admin-preview-app,
html.admin-preview-app body {
  overflow: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

html.admin-preview-app::-webkit-scrollbar,
html.admin-preview-app body::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

html.admin-preview-app .game-shell {
  width: 100%;
  max-width: none;
  margin: 0;
}

.machine {
  position: relative;
  width: 100%;
  aspect-ratio: var(--machine-aspect, 1406 / 3046);
  min-height: 100vh;
  background: transparent;
  overflow: hidden;
}

html.android-app .machine {
  min-height: 0;
}

.machine-underlay,
.machine-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
}

.button-editing .machine-underlay,
.button-editing .machine-bg {
  pointer-events: auto;
}

.machine-underlay {
  z-index: var(--layer-background);
  object-fit: cover;
  transform: none !important;
  transform-origin: center;
}

.machine-bg {
  z-index: var(--layer-frame);
}

html.admin-preview-app .machine,
html.admin-preview-app .poster-figure-frame,
html.admin-preview-app .bet-panel,
html.admin-preview-app .bet-buttons,
html.admin-preview-app .bet {
  overflow: visible !important;
}

/* Keep the editor preview on the full device canvas instead of the source
   artwork's shorter aspect ratio, which exposed an empty strip at the bottom. */
html.admin-preview-app,
html.admin-preview-app body,
html.admin-preview-app .game-shell {
  width: 100%;
  min-height: 100%;
  height: 100%;
}

html.admin-preview-app .machine {
  width: 100%;
  min-height: 100%;
  height: 100%;
  aspect-ratio: auto;
}

html.admin-preview-app .board-wrap,
html.admin-preview-app .board,
html.admin-preview-app .tile {
  overflow: visible !important;
}

.marquee {
  position: absolute;
  left: 12.8%;
  top: 1.65%;
  width: 74.5%;
  height: 3%;
  display: grid;
  place-items: center;
  color: #ff3141;
  font-size: clamp(16px, 5vw, 28px);
  font-weight: 900;
  overflow: hidden;
  z-index: var(--layer-center);
  transform-origin: center;
}

.marquee-text {
  white-space: nowrap;
  animation: marquee 10s linear infinite;
  transform-origin: center;
}

@keyframes marquee {
  from { transform: translateX(62%); }
  to { transform: translateX(-72%); }
}

.score-row {
  position: absolute;
  left: 4.5%;
  right: 4.5%;
  top: 7.4%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6%;
  color: #f21c2f;
  text-shadow: 0 2px 0 #3b0508;
  z-index: var(--layer-numbers);
}

.score-block {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: 0;
  font-size: clamp(20px, 6vw, 34px);
  font-weight: 900;
}

.score-block span {
  display: none;
}

.score-block strong .digit-sprite-wrap {
  display: flex;
}

.score-block strong .digit-sprite {
  display: block;
}

.score-block strong {
  position: relative;
  min-width: 0;
  height: clamp(28px, 8vw, 48px);
  display: block;
  padding: 0 8%;
  color: #ff1828;
  background: #030306;
  border-radius: 999px;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.24);
  font-family: "Arial Narrow", "Roboto Condensed", "DIN Condensed", Arial, sans-serif;
  font-size: clamp(17px, 4.5vw, 27px);
  font-stretch: condensed;
  letter-spacing: 0;
  text-shadow: 0 0 12px #ff2a38;
}

.digit-sprite-wrap {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  transform-origin: center;
  white-space: nowrap;
}

.board-wrap {
  position: absolute;
  left: 0;
  right: 0;
  top: 14%;
  height: 49%;
  z-index: var(--layer-icons);
}

.poster-figure-frame img {
  position: absolute;
  width: 66%;
  height: auto;
  object-fit: contain;
}

.poster-figure-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 0;
  overflow: visible;
  z-index: var(--layer-center);
  pointer-events: none;
}

.poster-figure {
  left: 17%;
  top: 22.8%;
  z-index: var(--layer-center);
  transform-origin: center;
  pointer-events: auto;
}

.special-number-display {
  position: absolute;
  left: 39%;
  top: 55.2%;
  width: 22%;
  height: 3.2%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 2%;
  border-radius: 999px;
  background: #030306;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18), 0 0 10px rgba(255,0,24,.16);
  z-index: var(--layer-numbers);
  transform-origin: center;
}

.special-number-display .digit-sprite-wrap {
  position: static;
  inset: auto;
}

.special-number-display .digit-sprite {
  transform: scale(.58);
  margin: 0 -5px;
}

.board {
  position: absolute;
  inset: 3.5% 1.2% 4% 1.2%;
  pointer-events: none;
  z-index: var(--layer-icons);
}

.tile {
  position: absolute;
  z-index: var(--layer-icons);
  width: 13%;
  aspect-ratio: 1;
  border-radius: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  overflow: visible;
  transform: translate(var(--tile-x, 0), var(--tile-y, 0)) scale(var(--tile-scale, 1));
  transform-origin: center;
  will-change: transform;
  pointer-events: auto;
}

.tile::before {
  content: "";
  position: absolute;
  inset: 8%;
  border-radius: 12%;
  background: #050505;
  z-index: 0;
}

.tile.active {
  filter: drop-shadow(0 0 8px rgba(255, 230, 96, .82)) drop-shadow(0 0 13px rgba(0, 231, 255, .52));
}

@media (pointer: coarse) {
  .tile.active {
    filter: none;
  }
}

.tile.win {
  animation: winBlink .55s steps(2, end) infinite;
}

@keyframes winBlink {
  50% { filter: brightness(.72); }
}

.tile-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  z-index: 2;
}

.tile-on {
  opacity: 0;
}

.tile.active .tile-off,
.tile.win .tile-off {
  opacity: 0;
}

.tile.active .tile-on,
.tile.win .tile-on {
  opacity: 1;
}

.board.icon-editing .tile {
  cursor: crosshair;
}

.button-editing button {
  cursor: crosshair;
}

.button-editing [data-adjust-target] {
  cursor: crosshair;
}

.tile.editor-selected,
button.editor-selected,
[data-adjust-target].editor-selected {
  outline: 3px solid #38a6ff;
  outline-offset: 3px;
  z-index: 3;
}

.admin-preview-app .tile.editor-selected,
.admin-preview-app button.editor-selected,
.admin-preview-app [data-adjust-target].editor-selected {
  outline: 0 !important;
  outline-offset: 0 !important;
}

[data-adjust-target] {
  transform-origin: center;
}

.icon-editor-toggle,
.icon-editor {
  position: fixed;
  right: max(10px, calc((100vw - 560px) / 2 + 10px));
  z-index: 30;
}

.icon-editor-toggle {
  top: 10px;
  width: 70px;
  height: 34px;
  border-radius: 7px;
  background: linear-gradient(#6be6ff, #126fd1);
  box-shadow: inset 0 2px 4px rgba(255,255,255,.5), 0 2px 10px rgba(0,0,0,.38);
  font-size: 14px;
}

.icon-editor {
  top: 50px;
  width: 164px;
  padding: 8px;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 8px;
  background: rgba(7, 9, 16, .92);
  box-shadow: 0 10px 28px rgba(0,0,0,.48);
}

.icon-editor-head {
  display: grid;
  grid-template-columns: 1fr 44px;
  gap: 6px;
  align-items: center;
  margin-bottom: 7px;
}

.icon-editor-head strong {
  min-width: 0;
  color: #ffd36a;
  font-size: 12px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.icon-editor button {
  min-width: 0;
  height: 34px;
  border-radius: 6px;
  background: linear-gradient(#ff7a79, #bd0812);
  box-shadow: inset 0 2px 3px rgba(255,255,255,.42), 0 1px 0 rgba(0,0,0,.5);
  font-size: 16px;
}

.icon-editor-head button {
  height: 28px;
  font-size: 12px;
}

.icon-editor-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.top-controls {
  position: absolute;
  left: 6%;
  right: 6%;
  top: 66.5%;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 2.2%;
  z-index: var(--layer-buttons);
  pointer-events: auto;
}

.top-controls button,
.play-controls button {
  position: relative;
  z-index: var(--layer-buttons);
  pointer-events: auto;
  min-height: 30px;
  border-radius: 999px;
  background: linear-gradient(#ff7a79, #bd0812 48%, #ff3438);
  box-shadow: inset 0 4px 4px rgba(255,255,255,.52), inset 0 -4px 7px rgba(68,0,0,.55), 0 2px 0 #6b0206;
  font-size: clamp(11px, 3vw, 17px);
  text-shadow: 0 2px 0 #5d0004;
}

.play-controls {
  position: absolute;
  left: 5%;
  right: 5%;
  top: 67.6%;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(2, auto);
  gap: 3.6% 4%;
  align-items: stretch;
  z-index: var(--layer-buttons);
  pointer-events: auto;
}

.play-controls button {
  position: relative;
  z-index: var(--layer-buttons);
  pointer-events: auto;
  height: clamp(42px, 10vw, 58px);
  border-radius: 16px;
}

.play-controls .green {
  background: linear-gradient(#baffb8, #10b739 45%, #007421);
  box-shadow: inset 0 4px 5px rgba(255,255,255,.6), inset 0 -4px 9px rgba(0,60,10,.58), 0 2px 0 #034d19;
}

.play-controls .start,
#cancelAutoBtn {
  grid-column: 5 / span 2;
  grid-row: 2;
  font-size: clamp(17px, 5vw, 28px);
}

#leftBtn { grid-column: 1; grid-row: 2; }
#rightBtn { grid-column: 2; grid-row: 2; }
#smallBtn { grid-column: 3; grid-row: 2; }
#bigBtn { grid-column: 4; grid-row: 2; }

.play-controls .start span {
  display: block;
  margin-top: 1px;
  font-size: .45em;
  font-weight: 700;
}

.hidden {
  display: none !important;
}

.bet-panel {
  position: absolute;
  left: 0;
  right: 0;
  top: 80.2%;
  height: 16.5%;
  overflow: visible;
  z-index: var(--layer-buttons);
  pointer-events: none;
}

.bet-buttons {
  display: grid;
  grid-template-columns: repeat(8, 11.8%);
  grid-auto-flow: column;
  gap: .8%;
  height: 100%;
  padding-left: 0;
  overflow: visible;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-snap-type: none;
  pointer-events: none;
}

.bet-buttons::-webkit-scrollbar {
  display: none;
}

.bet {
  position: relative;
  z-index: var(--layer-buttons);
  scroll-snap-align: none;
  min-width: 0;
  width: 100%;
  aspect-ratio: 820 / 1060;
  height: auto;
  align-self: start;
  margin-top: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  display: block;
  background: transparent;
  box-shadow: none;
  overflow: visible;
  transform-origin: center;
  pointer-events: auto;
}

.bet-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  z-index: 1;
}

.bet-img-down {
  display: none;
  opacity: 0;
}

.bet:active .bet-img-normal,
.bet.pressed .bet-img-normal,
.bet:disabled .bet-img-normal {
  opacity: 1;
  filter: brightness(.78);
}

.bet:active .bet-img-down,
.bet.pressed .bet-img-down,
.bet:disabled .bet-img-down {
  opacity: 0;
}

.bet:disabled {
  filter: none;
}

.bet .count {
  position: absolute;
  left: 20%;
  right: 20%;
  bottom: 6.5%;
  height: 14%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1px;
  background: #040306;
  border-radius: 5px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
  z-index: 520;
  pointer-events: auto;
}

.digit-sprite {
  display: block;
  width: 27px;
  height: 38px;
  background-image: url("./assets/digits/red-digits.png?v=1");
  background-repeat: no-repeat;
  background-size: 270px 38px;
  transform: scale(.34);
  transform-origin: center;
  margin: 0 -8px;
  filter: drop-shadow(0 0 3px rgba(255, 0, 0, .75));
}

.digit-sprite.dim {
  opacity: .34;
  filter: brightness(.55) saturate(.9) drop-shadow(0 0 1px rgba(255, 0, 0, .35));
}

.digit-sprite.d0 { background-position: 0 0; }
.digit-sprite.d1 { background-position: -27px 0; }
.digit-sprite.d2 { background-position: -54px 0; }
.digit-sprite.d3 { background-position: -81px 0; }
.digit-sprite.d4 { background-position: -108px 0; }
.digit-sprite.d5 { background-position: -135px 0; }
.digit-sprite.d6 { background-position: -162px 0; }
.digit-sprite.d7 { background-position: -189px 0; }
.digit-sprite.d8 { background-position: -216px 0; }
.digit-sprite.d9 { background-position: -243px 0; }

.score-block strong .digit-sprite {
  flex: 0 0 auto;
  width: 20px;
  height: 28px;
  margin: 0;
  display: block;
  background-image: url("./assets/digits/red-digits.png?v=2");
  background-repeat: no-repeat;
  background-size: 200px 28px;
  transform: none;
  filter: drop-shadow(0 0 4px rgba(255, 0, 16, .82));
}

.score-block strong .digit-sprite.dim {
  opacity: .22;
  filter: brightness(.58) saturate(.9) drop-shadow(0 0 2px rgba(255, 0, 16, .42));
}

.score-block strong .digit-sprite.d0 { background-position: 0 0; }
.score-block strong .digit-sprite.d1 { background-position: -20px 0; }
.score-block strong .digit-sprite.d2 { background-position: -40px 0; }
.score-block strong .digit-sprite.d3 { background-position: -60px 0; }
.score-block strong .digit-sprite.d4 { background-position: -80px 0; }
.score-block strong .digit-sprite.d5 { background-position: -100px 0; }
.score-block strong .digit-sprite.d6 { background-position: -120px 0; }
.score-block strong .digit-sprite.d7 { background-position: -140px 0; }
.score-block strong .digit-sprite.d8 { background-position: -160px 0; }
.score-block strong .digit-sprite.d9 { background-position: -180px 0; }

.score-block strong .digit-sprite::before { content: none; }

/* UI editor: number displays should expose only the digits, not the black base plate. */
.score-block strong {
  background: transparent !important;
  box-shadow: none !important;
}

.score-block strong .digit-sprite-wrap {
  background: transparent !important;
}

.button-editing .bet .count {
  cursor: crosshair;
}

.toast {
  position: fixed;
  left: 50%;
  bottom: 8%;
  transform: translateX(-50%);
  max-width: min(88vw, 430px);
  padding: 12px 18px;
  border-radius: 999px;
  background: rgba(0,0,0,.82);
  color: #fff;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
  z-index: var(--layer-tips) !important;
}

.toast.show {
  opacity: 1;
}

dialog {
  width: min(100vw, 560px);
  z-index: var(--layer-popups) !important;
  max-width: none;
  height: min(94vh, 1080px);
  max-height: calc(100vh - 8px);
  margin: auto;
  border: 0;
  border-radius: 18px;
  padding: 0;
  background:
    radial-gradient(circle at 20% 0%, rgba(74, 132, 255, .28), transparent 42%),
    linear-gradient(180deg, rgba(17, 22, 42, .98), rgba(5, 7, 15, .98));
  color: #fff;
  box-shadow: 0 22px 90px rgba(0,0,0,.68), inset 0 0 0 1px rgba(255,255,255,.1), inset 0 0 34px rgba(55, 118, 255, .12);
  overflow: hidden;
}

dialog::backdrop {
  background: rgba(0,0,0,.58);
}

dialog form {
  position: relative;
  height: 100%;
  padding: 24px 8px 10px;
  display: flex;
  flex-direction: column;
}

dialog[data-panel="charge"] {
  height: min(78vh, 620px) !important;
  min-height: 0 !important;
  max-height: 78vh !important;
}

dialog[data-panel="charge"] form {
  height: 100% !important;
  min-height: 0 !important;
}

dialog[data-panel="rule"] {
  height: fit-content !important;
  min-height: 0;
  max-height: none;
}

dialog[data-panel="rule"] form {
  height: fit-content !important;
  min-height: 0;
}

dialog[data-panel="rule"] .modal-body {
  flex: 0 0 auto;
  overflow: visible;
}

dialog[data-panel="auth"] {
  width: min(92vw, 430px);
  height: fit-content !important;
  min-height: 0 !important;
  max-height: calc(100vh - 18px);
  border-radius: 14px;
}

dialog[data-panel="auth"] form {
  height: fit-content !important;
  min-height: 0 !important;
  padding: 18px 10px 10px;
}

dialog[data-panel="auth"] h2 {
  margin: 0 0 8px;
  font-size: 18px;
}

dialog[data-panel="auth"] .modal-body {
  flex: 0 0 auto;
  overflow: visible;
}

dialog.compact-modal .modal-body {
  flex: 0 0 auto;
  min-height: 0;
  max-height: none;
  overflow: visible;
}

dialog h2 {
  margin: 0 0 14px;
  color: #ff3146;
  font-size: 22px;
  text-shadow: 0 0 12px rgba(255, 49, 70, .55);
}

.modal-body {
  flex: 1;
  max-height: none;
  min-height: 0;
  overflow: auto;
  line-height: 1.7;
  color: #f4f4f4;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.modal-body::-webkit-scrollbar {
  display: none;
}

.modal-inline-hint {
  position: sticky;
  bottom: 0;
  z-index: var(--layer-tips) !important;
  margin-top: 8px;
  min-height: 28px;
  padding: 5px 10px;
  border-radius: 8px;
  display: none;
  place-items: center;
  background: rgba(5, 7, 15, .86);
  border: 1px solid rgba(255, 211, 106, .32);
  color: #ffd36a;
  font-size: 13px;
  font-weight: 900;
  text-align: center;
}

.modal-inline-hint.show {
  display: grid;
}

.modal-inline-hint.ok {
  color: #38ff8b;
  border-color: rgba(56, 255, 139, .38);
}

.modal-body input {
  width: 100%;
  margin: 8px 0;
  padding: 10px;
  border: 1px solid #333b55;
  border-radius: 6px;
  background: #05070e;
  color: #fff;
}

.withdraw-reject-notice {
  display: grid;
  gap: 10px;
  padding: 16px;
  border-radius: 12px;
  border: 1px solid rgba(255, 211, 106, .38);
  background: linear-gradient(180deg, rgba(42, 11, 20, .94), rgba(7, 8, 16, .94));
  box-shadow: inset 0 0 18px rgba(255, 49, 70, .18), 0 0 18px rgba(0, 0, 0, .35);
  color: #ffe9a8;
  text-align: center;
  font-weight: 900;
}

.withdraw-reject-notice b {
  color: #ff4157;
  font-size: 18px;
  text-shadow: 0 0 10px rgba(255, 49, 70, .45);
}

.withdraw-reject-notice p {
  margin: 0;
  color: #f6f1df;
}

.auth-panel {
  display: grid;
  gap: 7px;
  padding: 0 4px 6px;
}

.auth-switch {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
}

.auth-switch button {
  min-height: 32px;
  border: 1px solid rgba(255, 211, 106, .28);
  border-radius: 7px;
  background: linear-gradient(180deg, rgba(24, 38, 75, .92), rgba(5, 8, 18, .96));
  color: #f6f1df;
  font-size: 12px;
  font-weight: 900;
}

.auth-switch button.active {
  background: linear-gradient(180deg, #ffda76, #b56d0c);
  color: #1b1200;
  box-shadow: inset 0 2px 4px rgba(255,255,255,.38), 0 0 12px rgba(255, 211, 106, .22);
}

.auth-submit,
#authGetCodeBtn,
.auth-captcha {
  min-height: 32px;
  border: 1px solid rgba(255, 211, 106, .28);
  border-radius: 7px;
  background: linear-gradient(180deg, rgba(24, 38, 75, .92), rgba(5, 8, 18, .96));
  color: #f6f1df;
  font-size: 11px;
  font-weight: 900;
}

.auth-title {
  color: #ffd36a;
  font-size: 18px;
  font-weight: 900;
  text-align: center;
  line-height: 1.2;
  text-shadow: 0 0 10px rgba(255, 211, 106, .24);
}

.auth-panel input {
  min-height: 38px;
  margin: 0;
  padding: 8px 10px;
  border-radius: 7px;
  font-size: 14px;
}

.auth-captcha-row,
.auth-code-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 118px;
  gap: 6px;
  align-items: center;
}

.auth-captcha {
  height: 42px;
  padding: 0;
  overflow: hidden;
}

.auth-captcha canvas {
  display: block;
  width: 118px;
  height: 42px;
}

#authGetCodeBtn {
  background: linear-gradient(180deg, #5dff96, #14ae51);
  color: #06150c;
}

.auth-submit {
  min-height: 38px;
  background: linear-gradient(180deg, #ff5267, #a90413);
  color: #fff;
  font-size: 14px;
}

.auth-status {
  min-height: 20px;
  color: #ffd36a;
  text-align: center;
  font-size: 12px;
  font-weight: 900;
}

.auth-status.ok {
  color: #38ff8b;
}

.auth-links {
  display: flex;
  justify-content: center;
  gap: 16px;
  min-height: 20px;
}

.auth-links button {
  min-height: 20px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #ffd36a;
  font-size: 12px;
  font-weight: 900;
  text-decoration: underline;
}

.modal-close {
  position: absolute;
  right: 12px;
  top: 12px;
  z-index: 3;
  width: 34px;
  height: 34px;
  min-height: 34px;
  margin: 0;
  padding: 0;
  border-radius: 50%;
  background: linear-gradient(180deg, #ff4058, #a90413);
  box-shadow: inset 0 2px 3px rgba(255,255,255,.35), 0 0 16px rgba(255, 30, 54, .28);
  font-size: 22px;
  line-height: 1;
}

.mine-panel {
  display: grid;
  gap: 12px;
  min-height: 100%;
  align-content: start;
}

.mine-card {
  border: 1px solid rgba(96, 160, 255, .3);
  border-radius: 10px;
  padding: 14px;
  background:
    linear-gradient(180deg, rgba(23, 42, 86, .94), rgba(8, 10, 22, .94));
  box-shadow: inset 0 0 18px rgba(53, 132, 255, .14), 0 6px 18px rgba(0,0,0,.16);
}

.mine-card span {
  display: block;
  color: #ffd36a;
  font-size: 12px;
  font-weight: 900;
}

.mine-card strong {
  display: block;
  margin-top: 3px;
  color: #ff3048;
  font-size: 24px;
  font-family: "Arial Narrow", Arial, sans-serif;
  letter-spacing: 0;
  text-shadow: 0 0 12px rgba(255, 48, 72, .6);
}

.mine-hero {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  min-height: 116px;
  padding: 18px 12px;
  border-radius: 12px;
  background:
    radial-gradient(circle at 12% 45%, rgba(64, 118, 218, .36), transparent 34%),
    linear-gradient(180deg, rgba(24, 49, 101, .97), rgba(8, 12, 30, .97));
}

.mine-avatar {
  flex: 0 0 84px;
  width: 84px;
  height: 84px;
  margin: 0;
  border: 2px solid rgba(255, 211, 106, .85);
  border-radius: 50%;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: radial-gradient(circle at 35% 30%, #263d7a, #070913 72%);
  box-shadow: 0 0 18px rgba(255, 211, 106, .22), inset 0 0 16px rgba(56, 166, 255, .22);
  color: #ffd36a;
  cursor: pointer;
}

.mine-avatar-button {
  min-height: 84px;
  padding: 0;
  background: radial-gradient(circle at 35% 30%, #263d7a, #070913 72%);
}

.mine-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mine-avatar span {
  color: #ffd36a;
  font-size: 13px;
}

.mine-profile-main {
  min-width: 0;
  flex: 1;
}

.mine-profile-main .mine-nickname-text {
  margin: 0 0 6px;
  color: #ffd84a;
  font-size: 26px;
  line-height: 1.05;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 0 12px rgba(255, 216, 74, .26);
}

.mine-profile-main em {
  display: block;
  color: #ffe991;
  font-size: 27px;
  font-style: normal;
  font-weight: 900;
  line-height: 1.05;
}

.mine-hero .copy-id-btn,
.mine-actions button,
.password-card button,
.gift-card button,
.profile-edit-card button,
.avatar-picker {
  min-height: 38px;
  border-radius: 7px;
  background: linear-gradient(180deg, #ffda76, #b56d0c);
}

.mine-hero .copy-id-btn {
  min-height: 32px;
  padding: 0 10px;
  border-radius: 8px;
  font-size: 13px;
}

.mine-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.mine-card strong.good {
  color: #28ff83;
  text-shadow: 0 0 12px rgba(40, 255, 131, .45);
}

.mine-card strong.bad {
  color: #ff4058;
}

.mine-actions {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.mine-actions button,
.password-card > button,
.gift-card > button {
  width: 100%;
}

.password-card,
.gift-card,
.profile-edit-card {
  display: grid;
  gap: 8px;
}

.password-fields,
.gift-fields,
.profile-edit-fields {
  display: grid;
  gap: 8px;
}

.profile-edit-card.collapsed {
  display: none;
}

.avatar-preview {
  width: 84px;
  height: 84px;
  margin: 0 auto;
  border: 2px solid rgba(255, 211, 106, .75);
  border-radius: 50%;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: radial-gradient(circle at 35% 30%, #263d7a, #070913 72%);
  color: #ffd36a;
  font-weight: 900;
}

.avatar-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.avatar-picker {
  display: grid;
  place-items: center;
  color: #fff;
  font-weight: 900;
  text-align: center;
}

.avatar-picker input {
  display: none;
}

.code-row {
  display: grid;
  grid-template-columns: 1fr 112px;
  gap: 8px;
}

.code-row button {
  min-height: 40px;
  padding: 0 8px;
  font-size: 13px;
}

.password-card.collapsed .password-fields,
.gift-card.collapsed .gift-fields {
  display: none;
}

.password-card input,
.gift-card input,
.profile-edit-card input {
  margin: 0;
}

.nickname-row {
  display: grid;
  grid-template-columns: 1fr 72px;
  gap: 8px;
  align-items: center;
}

.nickname-row button {
  min-height: 40px;
  border-radius: 8px;
  background: linear-gradient(180deg, #ffda76, #b56d0c);
}

.mine-records {
  max-height: 138px;
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.mine-records::-webkit-scrollbar {
  display: none;
}

.mine-records p {
  margin: 6px 0 0;
  color: #dce5ff;
  font-size: 13px;
  line-height: 1.35;
  white-space: nowrap;
}

.charge-panel {
  display: grid;
  gap: 9px;
}

.charge-panel button {
  min-height: 36px;
  border-radius: 8px;
  background: linear-gradient(180deg, #ffda76, #b56d0c);
}

.charge-input-row {
  display: grid;
  grid-template-columns: 1fr 76px;
  gap: 8px;
  align-items: center;
}

.charge-input-row input {
  margin: 0;
  position: relative;
  z-index: 2;
  pointer-events: auto;
  user-select: text;
  -webkit-user-select: text;
  touch-action: auto;
}

.charge-panel,
.charge-input-row,
.charge-actions,
.withdraw-panel-front,
.withdraw-panel-front input,
.qr-upload,
.message-panel,
.message-panel input,
.image-message-btn {
  position: relative;
  z-index: 2;
  pointer-events: auto;
  touch-action: auto;
}

.withdraw-panel-front input,
.message-panel input {
  user-select: text;
  -webkit-user-select: text;
}

.charge-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.charge-status {
  min-height: 18px;
  color: #ffda76;
  font-size: 13px;
  font-weight: 900;
  text-align: center;
  line-height: 18px;
}

.charge-status.ok {
  color: #38ff8b;
}

.withdraw-panel-front,
.message-panel {
  display: grid;
  gap: 10px;
}

.withdraw-account-head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: center;
}

.withdraw-account-head span {
  color: #ffd36a;
  font-size: 13px;
  font-weight: 900;
}

#toggleWithdrawAccountForm.add {
  background: linear-gradient(180deg, #5dff96, #14ae51);
  color: #06150c;
  box-shadow: inset 0 2px 4px rgba(255,255,255,.38), 0 0 12px rgba(44, 255, 132, .18);
}

#toggleWithdrawAccountForm.cancel {
  background: linear-gradient(180deg, #ffda76, #b56d0c);
  color: #fff;
}

.withdraw-head-actions {
  display: grid;
  grid-template-columns: 86px 86px;
  gap: 7px;
}

.withdraw-head-actions button {
  min-height: 34px !important;
  padding: 0 8px !important;
  border-radius: 9px !important;
  font-size: 14px !important;
  white-space: nowrap;
}

#openWithdrawGiftBtn.gift {
  background: linear-gradient(180deg, #ffe37a, #d78a18);
  color: #251100;
  box-shadow: inset 0 2px 4px rgba(255,255,255,.38), 0 0 12px rgba(255, 211, 76, .18);
}

.withdraw-gift-panel {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 9px;
  border: 1px solid rgba(255, 211, 106, .35);
  border-radius: 10px;
  background: rgba(0, 0, 0, .28);
}

.withdraw-gift-panel.hidden {
  display: none !important;
}

.withdraw-gift-panel input,
.withdraw-gift-panel .charge-status {
  grid-column: span 2;
}

.withdraw-gift-actions {
  grid-column: span 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.withdraw-gift-actions .ghost {
  background: rgba(255,255,255,.1) !important;
  color: #fff !important;
}

.withdraw-account-list {
  display: grid;
  gap: 8px;
}

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

.withdraw-method {
  min-height: 62px !important;
  padding: 6px 4px !important;
  border-radius: 8px !important;
  display: grid !important;
  place-items: center;
  gap: 2px;
  background: linear-gradient(180deg, rgba(20, 35, 72, .92), rgba(5, 8, 18, .94)) !important;
  border: 1px solid rgba(96, 160, 255, .28);
}

.withdraw-method.active {
  border-color: rgba(255, 211, 106, .9);
  box-shadow: inset 0 0 14px rgba(255, 211, 106, .12), 0 0 12px rgba(255, 211, 106, .18);
}

.withdraw-method span {
  color: #fff;
  font-size: 11px;
  font-weight: 900;
}

.withdraw-method em {
  color: #c6cad8;
  font-size: 10px;
  font-style: normal;
}

.withdraw-logo {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  color: #fff;
  font-size: 18px;
  font-weight: 900;
  box-shadow: inset 0 2px 5px rgba(255,255,255,.35), 0 0 12px rgba(0,0,0,.2);
}

.withdraw-logo.alipay { background: linear-gradient(180deg, #39a8ff, #0868d9); }
.withdraw-logo.wechat { background: linear-gradient(180deg, #43e67a, #11a944); }
.withdraw-logo.bank { background: linear-gradient(180deg, #ffcf58, #b77806); color: #1b1200; }
.withdraw-logo.okx { background: linear-gradient(180deg, #252b3b, #03050c); }

.withdraw-account-empty {
  padding: 10px;
  border: 1px dashed rgba(255, 211, 106, .42);
  border-radius: 8px;
  color: #ffd36a;
  font-size: 13px;
  font-weight: 900;
  text-align: center;
  background: rgba(0,0,0,.18);
}

.withdraw-account {
  min-height: 58px !important;
  padding: 8px 78px 8px 54px;
  border: 1px solid rgba(96, 160, 255, .26);
  border-radius: 8px !important;
  display: block !important;
  position: relative;
  background: linear-gradient(180deg, rgba(20, 35, 72, .92), rgba(5, 8, 18, .94)) !important;
  color: #fff;
  text-align: left !important;
}

.withdraw-account .withdraw-logo {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
}

.withdraw-account.disabled-method,
.withdraw-method.disabled-method {
  opacity: .46;
  filter: grayscale(1);
}

.withdraw-account.active {
  border-color: rgba(255, 211, 106, .9);
  box-shadow: 0 0 14px rgba(255, 211, 106, .18), inset 0 0 14px rgba(255, 211, 106, .08);
}

.withdraw-account b,
.withdraw-account span {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.withdraw-account b {
  color: #ffd36a;
  font-size: 14px;
}

.withdraw-account span {
  color: #dce5ff;
  font-size: 12px;
}

.withdraw-account em {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  min-width: 44px;
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(236, 48, 71, .9);
  color: #fff;
  font-size: 12px;
  font-style: normal;
  text-align: center;
}

.withdraw-account-form {
  display: grid;
  gap: 8px;
}

.withdraw-panel-front button,
.message-panel button,
.image-message-btn,
.qr-upload {
  min-height: 38px;
  border-radius: 8px;
  background: linear-gradient(180deg, #ffda76, #b56d0c);
  color: #fff;
  font-weight: 900;
  display: grid;
  place-items: center;
  text-align: center;
}

.qr-upload input,
.image-message-btn input {
  display: none;
}

.withdraw-qr-preview {
  min-height: 92px;
  border: 1px dashed rgba(255, 211, 106, .55);
  border-radius: 10px;
  display: grid;
  place-items: center;
  color: #ffd36a;
  font-weight: 900;
  background: rgba(0,0,0,.2);
  overflow: hidden;
  cursor: pointer;
}

.withdraw-qr-preview img {
  max-width: 100%;
  max-height: 150px;
  object-fit: contain;
}

.withdraw-qr-preview input {
  display: none;
}

.withdraw-fee-note {
  margin-top: -2px;
  color: #ffd36a;
  font-size: 13px;
  font-weight: 900;
  text-align: center;
  line-height: 1.35;
}

.withdraw-turnover-note {
  padding: 7px 9px;
  border: 1px solid rgba(255, 211, 106, .35);
  border-radius: 7px;
  background: rgba(26, 20, 8, .55);
  color: #ffe6a3;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
  text-align: center;
}

.withdraw-records {
  display: grid;
  gap: 8px;
  max-height: 180px;
  overflow: auto;
  scrollbar-width: none;
}

.withdraw-records::-webkit-scrollbar {
  display: none;
}

.withdraw-record {
  display: grid;
  grid-template-columns: 1fr 64px;
  gap: 4px 8px;
  align-items: center;
  padding: 10px;
  border: 1px solid rgba(96, 160, 255, .28);
  border-radius: 8px;
  background: rgba(5, 7, 15, .55);
}

.withdraw-record b,
.withdraw-record span {
  display: block;
  grid-column: 1;
}

.withdraw-record b {
  color: #ffd36a;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  line-height: 1.25;
}

.withdraw-record b strong,
.withdraw-record b em,
.withdraw-record b i {
  font-style: normal;
  font-weight: 900;
}

.withdraw-record b strong {
  color: #ffd36a;
  font-size: 20px;
}

.withdraw-record b em {
  color: #dce5ff;
  font-size: 14px;
}

.withdraw-record b i {
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 13px;
}

.withdraw-record b i.submitted {
  background: rgba(255, 211, 106, .18);
  color: #ffd36a;
}

.withdraw-record b i.approved {
  background: rgba(56, 255, 139, .18);
  color: #38ff8b;
}

.withdraw-record b i.rejected {
  background: rgba(255, 49, 70, .18);
  color: #ff5267;
}

.withdraw-record span {
  color: #dce5ff;
  font-size: 12px;
}

.withdraw-record button {
  grid-column: 2;
  grid-row: 1 / span 2;
  min-height: 34px;
  background: linear-gradient(180deg, #ff5267, #a90413);
}

.message-contacts,
.emoji-row,
.message-compose {
  display: grid;
  gap: 8px;
}

.message-contacts {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 2px 2px 8px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.message-contacts::-webkit-scrollbar {
  display: none;
}

.message-contacts button {
  flex: 0 0 92px;
  min-height: 112px;
  padding: 8px 6px 7px;
  border: 1px solid rgba(255, 211, 106, .28);
  border-radius: 12px;
  display: block;
  background: linear-gradient(180deg, rgba(26, 50, 103, .96), rgba(8, 13, 33, .96));
  color: #fff;
  box-shadow: inset 0 0 14px rgba(74, 145, 255, .16), 0 5px 15px rgba(0,0,0,.2);
}

.message-contacts button.active {
  border-color: rgba(255, 221, 107, .95);
  background: linear-gradient(180deg, #ffdf77, #c4750f);
  box-shadow: 0 0 16px rgba(255, 198, 50, .36), inset 0 2px 8px rgba(255,255,255,.2);
}

.contact-avatar {
  width: 48px;
  height: 48px;
  margin: 0 auto 6px;
  border: 2px solid rgba(255, 235, 143, .88);
  border-radius: 50%;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: radial-gradient(circle at 35% 28%, #315aa8, #070a17 72%);
  box-shadow: 0 0 13px rgba(255, 211, 106, .24);
}

.contact-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.contact-avatar i {
  color: #ffd96f;
  font-style: normal;
  font-size: 19px;
  font-weight: 900;
}

.message-contacts b,
.message-contacts small,
.message-contacts em {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.message-contacts b {
  color: #fff;
  font-size: 13px;
  line-height: 1.2;
}

.message-contacts small {
  color: rgba(255,255,255,.78);
  font-size: 10px;
  line-height: 1.3;
}

.message-contacts em {
  color: #fff1a6;
  font-size: 11px;
  font-style: normal;
  line-height: 1.2;
}

.message-list {
  min-height: 220px;
  max-height: 260px;
  overflow: auto;
  padding: 10px;
  border-radius: 10px;
  background: rgba(0,0,0,.26);
  scrollbar-width: none;
}

.message-list::-webkit-scrollbar {
  display: none;
}

.message-bubble {
  width: fit-content;
  max-width: 82%;
  margin: 0 0 8px auto;
  padding: 8px 10px;
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(42, 101, 205, .9), rgba(16, 26, 60, .92));
}

.message-bubble.other {
  margin-right: auto;
  margin-left: 0;
  background: linear-gradient(180deg, rgba(35, 55, 102, .94), rgba(13, 18, 42, .95));
}

.message-bubble.mine {
  margin-left: auto;
  margin-right: 0;
}

.message-bubble img {
  max-width: 150px;
  max-height: 150px;
  border-radius: 8px;
  display: block;
}

.message-image-wrap {
  position: relative;
  display: inline-block;
}

.message-send-progress {
  --progress: 0;
  position: absolute;
  right: 6px;
  bottom: 6px;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: conic-gradient(#ffd45d calc(var(--progress) * 1%), rgba(255,255,255,.22) 0);
  box-shadow: 0 2px 8px rgba(0,0,0,.35);
}

.message-send-progress::after {
  content: "";
  width: 16px;
  height: 16px;
  border-radius: inherit;
  background: rgba(9, 14, 31, .92);
}

.message-send-progress b {
  position: absolute;
  z-index: 1;
  color: #55ff97;
  font-size: 13px;
  line-height: 1;
}

.message-send-progress.error b {
  color: #ff5b65;
}

.image-message-btn {
  position: relative;
}

.image-message-btn.sending::after,
.image-message-btn.done::after {
  content: "";
  position: absolute;
  right: 3px;
  top: 3px;
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: conic-gradient(#fff calc(var(--progress) * 1%), rgba(255,255,255,.28) 0);
  box-shadow: 0 1px 5px rgba(0,0,0,.28);
}

.message-bubble small {
  display: block;
  margin-top: 3px;
  color: rgba(255,255,255,.62);
  font-size: 10px;
}

.message-bubble.system {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: start;
  gap: 7px;
  width: auto;
  max-width: 94%;
  margin-right: auto;
  margin-left: auto;
  padding: 0;
  background: transparent;
}

.message-bubble.system .system-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #2a1700;
  background: linear-gradient(180deg, #ffe68a, #e5a41f);
  font-size: 13px;
  font-style: normal;
  font-weight: 900;
}

.message-bubble.system span {
  display: block;
  padding: 9px 11px;
  border-radius: 12px;
  color: #ffe59a;
  background: rgba(255,216,96,.12);
  border: 1px solid rgba(255,216,96,.22);
}

.message-bubble.system small {
  grid-column: 2;
}

.emoji-row {
  grid-template-columns: repeat(6, 1fr);
}

.emoji-row.hidden {
  display: none;
}

.emoji-row button {
  min-height: 34px;
  font-size: 18px;
}

.message-compose {
  grid-template-columns: 44px 1fr 52px 68px;
  align-items: center;
}

.message-compose input {
  margin: 0;
}

.message-tool-btn,
.image-message-btn {
  min-height: 38px;
  border-radius: 8px;
  font-size: 22px;
  line-height: 1;
}

.image-message-btn {
  font-size: 30px;
  padding-bottom: 4px;
}

@media (max-width: 420px) {
  dialog {
    width: min(100vw, 560px);
    max-width: none;
    height: calc(100vh - 8px);
    margin: auto;
  }

  dialog form {
    padding: 24px 6px 8px;
  }

  dialog[data-panel="charge"] {
    height: min(82vh, 620px) !important;
    max-height: 82vh !important;
  }

  dialog[data-panel="charge"] form {
    height: 100% !important;
  }

  dialog[data-panel="rule"] {
    height: fit-content !important;
    max-height: none !important;
  }

  dialog[data-panel="rule"] form {
    height: fit-content !important;
  }

  dialog[data-panel="rule"] .modal-body {
    max-height: none;
  }

  .message-list {
    min-height: 180px;
    max-height: 220px;
  }

  .modal-body {
    max-height: 80vh;
  }

  .top-controls {
    gap: 1.5%;
  }

  .top-controls button {
    font-size: 10px;
  }
}

/* Final modal overrides for mobile profile/message panels. */
dialog.mine-modal,
dialog.message-modal {
  width: min(100vw, 430px) !important;
  max-width: 100vw !important;
  border-radius: 20px 20px 0 0 !important;
}

dialog.mine-modal {
  height: min(88vh, 760px) !important;
  max-height: min(88vh, 760px) !important;
}

dialog.message-modal,
dialog[data-panel="rule"].message-modal {
  height: min(86vh, 720px) !important;
  max-height: min(86vh, 720px) !important;
}

dialog.mine-modal form,
dialog.message-modal form,
dialog[data-panel="rule"].message-modal form {
  height: 100% !important;
}

dialog.mine-modal .modal-body,
dialog.message-modal .modal-body,
dialog[data-panel="rule"].message-modal .modal-body {
  height: 100% !important;
  max-height: none !important;
  overflow: hidden !important;
}

dialog.mine-modal .mine-panel-v2 {
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

dialog.mine-modal .mine-panel-v2::-webkit-scrollbar {
  display: none;
}

dialog.mine-modal .password-card.collapsed,
dialog.mine-modal .gift-card.collapsed {
  display: none;
}

dialog.message-modal .message-panel-v2 {
  height: 100%;
  grid-template-rows: 92px 48px minmax(0, 1fr) auto 48px;
}

dialog.message-modal .message-list {
  min-height: 0 !important;
  max-height: none !important;
}

/* Final profile edit fix: expanded profile editor must take its own space. */
dialog.mine-modal .mine-panel-v2 {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
}

dialog.mine-modal .mine-panel-v2 .profile-edit-card:not(.collapsed) {
  display: grid !important;
  grid-template-rows: auto auto !important;
  gap: 8px !important;
  min-height: 224px !important;
  overflow: visible !important;
  flex: 0 0 auto !important;
}

dialog.mine-modal .mine-panel-v2 .profile-edit-fields {
  display: grid !important;
  gap: 8px !important;
  min-height: 178px !important;
  align-content: start !important;
}

dialog.mine-modal .mine-panel-v2 .avatar-preview {
  position: relative !important;
  width: 72px !important;
  height: 72px !important;
  min-height: 72px !important;
  margin: 0 auto !important;
  transform: none !important;
}

dialog.mine-modal .mine-panel-v2 .mine-note {
  flex: 1 1 auto !important;
  min-height: 112px !important;
}

/* Final message window fix: phone modal uses full game width and non-overlapping contact cards. */
dialog.message-modal,
dialog[data-panel="rule"].message-modal {
  position: fixed !important;
  inset: auto 0 calc(118px + env(safe-area-inset-bottom) + var(--message-keyboard-offset, 0px)) 0 !important;
  width: min(100vw, 560px) !important;
  max-width: 100vw !important;
  height: calc(100dvh - 118px - env(safe-area-inset-bottom) - var(--message-keyboard-offset, 0px)) !important;
  max-height: calc(100dvh - 118px - env(safe-area-inset-bottom) - var(--message-keyboard-offset, 0px)) !important;
  margin: 0 auto !important;
  border-radius: 18px 18px 0 0 !important;
}

dialog.message-modal .modal-body,
dialog[data-panel="rule"].message-modal .modal-body {
  padding: 6px 6px 10px !important;
}

dialog.message-modal .message-panel-v2 {
  height: 100% !important;
  overflow: hidden !important;
  grid-template-rows: 64px minmax(0, 1fr) 46px auto !important;
  gap: 6px !important;
}

dialog.message-modal .message-contacts {
  grid-auto-columns: 76px !important;
  gap: 6px !important;
  align-items: stretch !important;
}

dialog.message-modal .message-contacts button {
  min-height: 62px !important;
  padding: 4px 3px !important;
  grid-template-rows: 28px 13px 11px !important;
  align-content: center !important;
  gap: 1px !important;
}

dialog.message-modal .contact-avatar {
  width: 28px !important;
  height: 28px !important;
}

dialog.message-modal .message-contacts b,
dialog.message-modal .message-contacts small,
dialog.message-modal .message-contacts em {
  display: block !important;
  width: 100% !important;
  max-width: 68px !important;
  line-height: 1.05 !important;
  text-align: center !important;
}

dialog.message-modal .message-contacts b {
  font-size: 11px !important;
}

dialog.message-modal .message-contacts small,
dialog.message-modal .message-contacts em {
  font-size: 8px !important;
}

dialog.message-modal .message-chat-head {
  display: none !important;
}

dialog.message-modal .message-list {
  min-height: 0 !important;
  max-height: none !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch;
}

dialog.message-modal .message-compose {
  grid-template-columns: 38px minmax(0, 1fr) 42px 56px !important;
  gap: 6px !important;
  align-items: center !important;
}

dialog.message-modal .message-compose input {
  height: 40px !important;
  min-height: 40px !important;
  border-radius: 8px !important;
}

dialog.message-modal .message-compose .message-tool-btn,
dialog.message-modal .message-compose .image-message-btn,
dialog.message-modal .message-compose #sendMessageBtn {
  min-height: 40px !important;
  border-radius: 999px !important;
}

dialog.message-modal .emoji-row {
  align-self: end !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  padding: 4px 0 0 !important;
}

dialog.message-modal .emoji-row button {
  min-height: 34px !important;
}

dialog.message-modal .message-compose,
dialog.message-modal .emoji-row,
dialog.message-modal .message-chat-head,
dialog.message-modal .message-contacts {
  flex: 0 0 auto !important;
}

dialog.message-modal .message-chat-head b,
dialog.message-modal .message-chat-head span {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Message unread badge on the bottom message button. */
[data-panel="rule"] {
  position: relative !important;
}

[data-panel="rule"].has-unread::after {
  content: attr(data-unread);
  position: absolute;
  top: -7px;
  right: -6px;
  z-index: 20;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border: 2px solid #fff8d9;
  border-radius: 999px;
  display: grid;
  place-items: center;
  color: #fff;
  background: linear-gradient(180deg, #ff4b61, #c50019);
  box-shadow: 0 0 10px rgba(255, 45, 70, .65), 0 2px 5px rgba(0,0,0,.35);
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  pointer-events: none;
}

/* Recharge popup */
dialog[data-panel="charge"] {
  width: min(92vw, 500px) !important;
  height: min(78vh, 620px) !important;
  min-height: 0 !important;
  max-height: 78vh !important;
  border-radius: 14px !important;
  background:
    linear-gradient(135deg, rgba(35, 65, 125, .98), rgba(9, 12, 28, .99) 52%, rgba(8, 9, 18, .99)) !important;
  box-shadow: 0 16px 54px rgba(0,0,0,.72), inset 0 0 0 1px rgba(255,255,255,.12), inset 0 -22px 46px rgba(0,0,0,.24) !important;
}

dialog[data-panel="charge"] form {
  height: 100% !important;
  padding: 14px 10px 10px !important;
}

dialog[data-panel="charge"] h2 {
  margin: 0 0 10px !important;
  color: #ff4057 !important;
  font-size: 21px !important;
  line-height: 1 !important;
}

dialog[data-panel="charge"] .modal-close {
  top: 10px !important;
  right: 10px !important;
  width: 30px !important;
  height: 30px !important;
  border-radius: 50% !important;
  background: linear-gradient(180deg, #ff5a6a, #c9142b) !important;
}

dialog[data-panel="charge"] .modal-body {
  height: 100% !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  padding: 0 !important;
}

dialog[data-panel="charge"] .charge-panel {
  gap: 10px !important;
}

dialog[data-panel="charge"] .charge-input-row {
  grid-template-columns: minmax(0, 1fr) 70px !important;
}

dialog[data-panel="charge"] .charge-input-row input {
  height: 34px !important;
  padding: 7px 9px !important;
  border-radius: 7px !important;
  border-color: rgba(255,255,255,.75) !important;
  background: rgba(2, 5, 12, .92) !important;
}

dialog[data-panel="charge"] .charge-panel button {
  min-height: 32px !important;
  border-radius: 7px !important;
  background: linear-gradient(180deg, #ffd76a, #c98513) !important;
  box-shadow: inset 0 2px 4px rgba(255,255,255,.32), 0 4px 10px rgba(0,0,0,.18) !important;
}

.charge-panel-v2 {
  min-height: 100%;
  padding: 30px 22px 18px;
  background: linear-gradient(180deg, rgba(15, 35, 75, .96), rgba(6, 12, 28, .98));
}

.charge-title-row {
  display: flex;
  align-items: center;
  min-height: 42px;
}

.charge-title-row strong {
  color: #ff3146;
  font-size: 34px;
  line-height: 1;
  text-shadow: 0 0 12px rgba(255, 49, 70, .48);
}

.charge-panel-v2 .charge-input-row {
  grid-template-columns: minmax(0, 1fr) 72px !important;
  gap: 10px;
}

.charge-panel-v2 .charge-input-row input {
  height: 46px !important;
  border: 3px solid rgba(255, 255, 255, .88) !important;
  border-radius: 0 !important;
  background: #02040a !important;
  color: #fff;
  font-size: 20px;
}

.charge-panel-v2 .charge-input-row button,
.charge-panel-v2 .charge-actions button,
.charge-merchant-contact button {
  color: #fff8dc;
  font-weight: 900;
}

.charge-panel-v2 .charge-input-row button {
  min-height: 46px !important;
  font-size: 21px;
}

.charge-panel-v2 .charge-actions {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  padding: 10px 14px 8px;
}

.charge-panel-v2 .charge-actions button {
  min-height: 48px !important;
  border-radius: 11px !important;
  font-size: 20px;
}

.charge-merchant-box {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 3px solid rgba(255, 255, 255, .92);
  background: rgba(2, 6, 18, .34);
}

.charge-merchant-title {
  justify-self: center;
  max-width: 100%;
  padding: 6px 18px;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(180deg, #2fd85c, #0aa739);
  font-size: 20px;
  font-weight: 900;
  line-height: 1.1;
  text-align: center;
}

.charge-merchant-card {
  display: grid;
  justify-items: center;
  gap: 10px;
}

.charge-merchant-card img,
.charge-merchant-qr-empty {
  width: min(58vw, 250px);
  aspect-ratio: 1;
  border-radius: 14px;
  border: 8px solid rgba(0, 0, 0, .55);
  background: #fff;
  object-fit: contain;
}

.charge-merchant-qr-empty {
  display: grid;
  place-items: center;
  color: #111827;
  font-weight: 900;
}

.charge-merchant-contact {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 96px;
  align-items: center;
  gap: 8px;
  width: 100%;
  color: #fff;
  font-size: 22px;
}

.charge-merchant-contact span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.charge-merchant-contact button {
  min-height: 34px !important;
  border-radius: 8px !important;
}

.charge-merchant-empty {
  min-height: 88px;
  display: grid;
  place-items: center;
  color: #d6e2ff;
  text-align: center;
}

@media (max-width: 420px) {
  .charge-panel-v2 {
    padding: 28px 12px 14px;
  }

  .charge-title-row strong {
    font-size: 30px;
  }

  .charge-panel-v2 .charge-input-row {
    grid-template-columns: minmax(0, 1fr) 66px !important;
    gap: 8px;
  }

  .charge-panel-v2 .charge-input-row input {
    font-size: 18px;
  }

  .charge-panel-v2 .charge-input-row button {
    font-size: 19px;
  }

  .charge-panel-v2 .charge-actions {
    gap: 8px;
    padding: 8px 8px;
  }

  .charge-panel-v2 .charge-actions button {
    font-size: 17px;
  }

  .charge-merchant-title {
    font-size: 18px;
    padding: 6px 12px;
  }

  .charge-merchant-contact {
    grid-template-columns: minmax(0, 1fr) 88px;
    font-size: 18px;
  }
}

dialog[data-panel="charge"].compact-modal {
  height: min(88dvh, 760px) !important;
  max-height: 88dvh !important;
}

dialog[data-panel="charge"] form {
  border-radius: 18px !important;
  background: transparent !important;
}

dialog[data-panel="charge"] .modal-body {
  overflow-y: auto !important;
  scrollbar-width: none;
}

dialog[data-panel="charge"] .modal-body::-webkit-scrollbar {
  width: 0;
  height: 0;
}

dialog[data-panel="charge"] .charge-panel-v2 {
  min-height: 100%;
  gap: 14px !important;
  padding: 24px 18px 18px !important;
  border: 1px solid rgba(130, 244, 255, .42);
  border-radius: 18px;
  background:
    radial-gradient(circle at 10% 8%, rgba(92, 237, 255, .18), transparent 26%),
    radial-gradient(circle at 92% 0, rgba(23, 221, 201, .22), transparent 28%),
    linear-gradient(160deg, rgba(6, 28, 57, .98), rgba(7, 68, 83, .96) 54%, rgba(5, 18, 42, .98));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 18px 60px rgba(0,0,0,.42);
}

.charge-hero {
  display: grid;
  gap: 8px;
  text-align: center;
}

.charge-hero strong {
  color: #ff6b63;
  font-size: 38px;
  line-height: 1;
  font-weight: 900;
  text-shadow: 0 0 18px rgba(255, 80, 80, .45);
}

.charge-hero span {
  color: #f5fbff;
  font-size: 16px;
  font-weight: 900;
  line-height: 1.35;
}

.charge-card-box,
.charge-merchant-box {
  display: grid;
  gap: 12px;
  padding: 16px 14px;
  border: 2px solid rgba(255, 255, 255, .88);
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.2), rgba(255,255,255,.04) 38%, rgba(72, 242, 255, .14)),
    rgba(6, 35, 57, .62);
  box-shadow: inset 0 0 24px rgba(122, 243, 255, .12);
}

.charge-card-box h3,
.charge-merchant-title {
  margin: 0;
  color: #fff;
  font-size: 25px;
  line-height: 1.1;
  font-weight: 900;
  text-shadow: 0 0 10px rgba(255,255,255,.18);
}

dialog[data-panel="charge"] .charge-panel-v2 .charge-input-row {
  grid-template-columns: minmax(0, 1fr) 112px !important;
  gap: 12px;
}

dialog[data-panel="charge"] .charge-panel-v2 .charge-input-row input {
  height: 52px !important;
  padding: 0 16px !important;
  border: 1px solid rgba(98, 239, 255, .34) !important;
  border-radius: 12px !important;
  background: rgba(2, 15, 38, .96) !important;
  color: #fff;
  font-size: 18px;
  box-shadow: inset 0 0 14px rgba(0,0,0,.45);
}

dialog[data-panel="charge"] .charge-panel-v2 .charge-input-row button {
  min-height: 52px !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, #fffbd8, #ffd979 58%, #f3a23d) !important;
  color: #1a0700 !important;
  font-size: 16px;
  font-weight: 900;
}

.charge-panel-v2 .charge-actions,
.charge-bottom-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px;
}

.charge-panel-v2 .charge-actions > div,
.charge-bottom-actions > div {
  display: grid;
  gap: 7px;
  text-align: center;
}

dialog[data-panel="charge"] .charge-panel-v2 .charge-actions button,
dialog[data-panel="charge"] .charge-bottom-actions button {
  min-height: 54px !important;
  border-radius: 999px !important;
  font-size: 20px;
  font-weight: 900;
}

dialog[data-panel="charge"] .charge-bottom-actions {
  width: min(66%, 292px);
  margin: 0 auto;
  gap: 10px;
}

dialog[data-panel="charge"] .charge-bottom-actions button {
  width: 100%;
  min-height: 32px !important;
  padding: 0 9px !important;
  font-size: 13px !important;
  box-shadow: 0 5px 12px rgba(0,0,0,.18) !important;
}

dialog[data-panel="charge"] .charge-panel-v2 .charge-actions div:first-child button,
dialog[data-panel="charge"] .charge-bottom-actions div:first-child button {
  background: linear-gradient(180deg, #55fff0, #18d3b4 54%, #0aa67f) !important;
  color: #052825 !important;
}

dialog[data-panel="charge"] .charge-panel-v2 .charge-actions div:last-child button {
  background: linear-gradient(180deg, #fffbd5, #ffdc82 55%, #f3a03b) !important;
  color: #1a0700 !important;
}

dialog[data-panel="charge"] .charge-bottom-actions div:last-child button {
  background: linear-gradient(180deg, #ff536b, #c71936 58%, #8d0b22) !important;
  color: #fff !important;
}

.charge-panel-v2 .charge-actions span,
.charge-bottom-actions span {
  color: #f6fbff;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.25;
}

dialog[data-panel="charge"] .charge-bottom-actions span {
  font-size: 9px;
  line-height: 1.1;
}

.charge-merchant-box.hidden {
  display: none !important;
}

.charge-merchant-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 122px;
  gap: 12px;
  align-items: center;
}

.charge-merchant-contact {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 100px;
  gap: 10px;
  align-items: center;
  color: #fff;
}

.charge-merchant-contact strong,
.charge-merchant-contact span {
  grid-column: 1 / -1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.charge-merchant-contact strong {
  color: #fff;
  font-size: 16px;
}

.charge-merchant-contact span {
  font-size: 18px;
  font-weight: 900;
}

dialog[data-panel="charge"] .charge-merchant-contact button {
  grid-column: 1 / 2;
  width: fit-content;
  min-height: 34px !important;
  padding: 0 14px !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, #72fff1, #29d6b9) !important;
  color: #052825 !important;
}

.charge-merchant-qr {
  display: grid;
  gap: 6px;
  justify-items: center;
  padding: 8px;
  border-radius: 12px;
  background: #fff;
  color: #0c1320;
}

.charge-merchant-qr img,
.charge-merchant-qr-empty {
  width: 96px;
  aspect-ratio: 1;
  object-fit: contain;
}

.charge-merchant-qr-empty {
  display: grid;
  place-items: center;
  color: #111827;
  font-weight: 900;
}

.charge-merchant-qr small {
  color: #1d2633;
  font-size: 10px;
  line-height: 1.25;
  text-align: center;
  font-weight: 800;
}

.charge-merchant-empty {
  min-height: 70px;
  display: grid;
  place-items: center;
  color: #d6e2ff;
  text-align: center;
  font-weight: 900;
}

@media (max-width: 420px) {
  dialog[data-panel="charge"] .charge-panel-v2 {
    padding: 20px 10px 12px !important;
  }

  .charge-hero strong {
    font-size: 31px;
  }

  .charge-hero span {
    font-size: 13px;
  }

  dialog[data-panel="charge"] .charge-panel-v2 .charge-input-row {
    grid-template-columns: minmax(0, 1fr) 92px !important;
  }

  dialog[data-panel="charge"] .charge-panel-v2 .charge-input-row input {
    height: 46px !important;
    font-size: 15px;
  }

  dialog[data-panel="charge"] .charge-panel-v2 .charge-input-row button {
    min-height: 46px !important;
    font-size: 14px;
  }

  dialog[data-panel="charge"] .charge-panel-v2 .charge-actions button,
  dialog[data-panel="charge"] .charge-bottom-actions button {
    min-height: 48px !important;
    font-size: 17px;
  }

  dialog[data-panel="charge"] .charge-bottom-actions {
    width: min(74%, 260px);
    gap: 8px;
  }

  dialog[data-panel="charge"] .charge-bottom-actions button {
    min-height: 30px !important;
    font-size: 12px !important;
  }

  .charge-card-box,
  .charge-merchant-box {
    padding: 12px 10px;
    border-radius: 15px;
  }

  .charge-card-box h3,
  .charge-merchant-title {
    font-size: 21px;
  }

  .charge-merchant-card {
    grid-template-columns: minmax(0, 1fr) 104px;
    gap: 8px;
  }

  .charge-merchant-contact {
    font-size: 15px;
  }

  .charge-merchant-qr img,
  .charge-merchant-qr-empty {
    width: 82px;
  }
}

.merchant-apply-modal {
  position: fixed;
  inset: 0;
  z-index: 2147483610 !important;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(0, 0, 0, .72);
}

.merchant-apply-sheet {
  position: relative;
  width: min(100%, 520px);
  max-height: min(92dvh, 760px);
  overflow-y: auto;
  display: grid;
  gap: 14px;
  padding: 24px 18px 18px;
  border: 2px solid rgba(55, 241, 255, .72);
  border-radius: 20px;
  background:
    radial-gradient(circle at 86% 4%, rgba(61, 235, 255, .34), transparent 22%),
    linear-gradient(160deg, #06142a, #082949 58%, #061322);
  box-shadow: 0 24px 70px rgba(0,0,0,.62), inset 0 0 0 1px rgba(255,255,255,.08);
  color: #f4fcff;
}

.merchant-apply-close {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 34px;
  min-height: 34px !important;
  padding: 0;
  border-radius: 50%;
  background: rgba(30, 230, 255, .16);
  color: #69f8ff;
  font-size: 28px;
  line-height: 1;
}

.merchant-apply-sheet h2 {
  margin: 0;
  color: #eaffff;
  font-size: 25px;
  text-align: center;
  text-shadow: 0 0 16px rgba(65, 238, 255, .55);
}

.merchant-apply-rule {
  display: grid;
  gap: 8px;
  padding: 14px;
  border: 1px solid rgba(67, 239, 255, .5);
  border-radius: 14px;
  background: rgba(2, 14, 31, .64);
}

.merchant-apply-rule h3,
.merchant-apply-rule p {
  margin: 0;
}

.merchant-apply-rule h3 {
  color: #fff2bd;
  font-size: 20px;
}

.merchant-apply-rule p {
  color: #fffbe6;
  font-size: 14px;
  line-height: 1.55;
  font-weight: 800;
}

.merchant-proof-picker {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 2px dashed rgba(67, 239, 255, .58);
  border-radius: 16px;
  text-align: center;
  color: #72fbff;
  background: rgba(3, 23, 42, .54);
}

.merchant-proof-picker input {
  display: none;
}

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

.merchant-proof-grid img,
.merchant-proof-grid span {
  width: 100%;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 1px dashed rgba(92, 250, 255, .58);
  border-radius: 12px;
  background: rgba(255,255,255,.04);
  color: #53f7ff;
  object-fit: cover;
  font-size: 38px;
}

.merchant-apply-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.merchant-apply-actions button {
  min-height: 48px;
  border-radius: 999px;
  color: #052026;
  background: #36f4ff;
  font-size: 18px;
  font-weight: 900;
}

.merchant-apply-actions button:first-child {
  color: #e8feff;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(74, 244, 255, .58);
}

/* Front message window: keep the whole chat visible above the game buttons. */
dialog[data-panel="rule"].message-modal {
  position: fixed !important;
  top: max(6px, env(safe-area-inset-top)) !important;
  right: 0 !important;
  bottom: calc(env(safe-area-inset-bottom) + var(--message-keyboard-offset, 0px)) !important;
  left: 0 !important;
  width: min(100vw, 560px) !important;
  height: auto !important;
  max-height: none !important;
  margin: 0 auto !important;
  border-radius: 16px 16px 0 0 !important;
}

dialog[data-panel="rule"].message-modal form {
  height: 100% !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-rows: 44px minmax(0, 1fr) !important;
  padding: 8px 10px 8px !important;
  overflow: hidden !important;
}

dialog[data-panel="rule"].message-modal h2 {
  height: 36px !important;
  margin: 0 !important;
  line-height: 36px !important;
  font-size: 20px !important;
}

dialog[data-panel="rule"].message-modal .modal-close {
  top: 10px !important;
  right: 10px !important;
}

dialog[data-panel="rule"].message-modal .modal-body {
  height: 100% !important;
  min-height: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

dialog[data-panel="rule"].message-modal .message-panel-v2 {
  height: 100% !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-rows: 58px minmax(0, 1fr) 44px auto !important;
  gap: 6px !important;
  overflow: hidden !important;
}

dialog[data-panel="rule"].message-modal .message-chat-head {
  display: none !important;
}

dialog[data-panel="rule"].message-modal .message-contacts {
  min-height: 0 !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
}

dialog[data-panel="rule"].message-modal .message-contacts button {
  min-height: 56px !important;
  height: 56px !important;
}

dialog[data-panel="rule"].message-modal .message-list {
  min-height: 0 !important;
  max-height: none !important;
  overflow-y: auto !important;
  padding: 8px !important;
}

dialog[data-panel="rule"].message-modal .message-compose {
  min-height: 44px !important;
  height: 44px !important;
  grid-template-columns: 36px minmax(0, 1fr) 40px 52px !important;
  gap: 5px !important;
  align-items: center !important;
  padding: 0 !important;
}

dialog[data-panel="rule"].message-modal .message-compose input,
dialog[data-panel="rule"].message-modal .message-compose .message-tool-btn,
dialog[data-panel="rule"].message-modal .message-compose .image-message-btn,
dialog[data-panel="rule"].message-modal .message-compose #sendMessageBtn {
  height: 38px !important;
  min-height: 38px !important;
}

dialog[data-panel="rule"].message-modal .emoji-row {
  max-height: 132px !important;
  overflow-y: auto !important;
  padding: 4px 0 0 !important;
}

/* Withdraw panel: show more records on mobile. */
dialog[data-panel="withdraw"] {
  position: fixed !important;
  top: max(8px, env(safe-area-inset-top)) !important;
  right: 0 !important;
  bottom: calc(92px + env(safe-area-inset-bottom)) !important;
  left: 0 !important;
  width: min(100vw, 560px) !important;
  height: auto !important;
  max-height: none !important;
  margin: 0 auto !important;
  border-radius: 16px 16px 0 0 !important;
}

dialog[data-panel="withdraw"] form {
  height: 100% !important;
  min-height: 0 !important;
  padding: 18px 8px 8px !important;
  overflow: hidden !important;
}

dialog[data-panel="withdraw"] .modal-body {
  height: 100% !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  padding: 0 0 4px !important;
}

dialog[data-panel="promo"] {
  position: fixed !important;
  top: max(6px, env(safe-area-inset-top)) !important;
  right: 0 !important;
  bottom: calc(8px + env(safe-area-inset-bottom)) !important;
  left: 0 !important;
  width: min(100vw, 560px) !important;
  height: auto !important;
  max-height: none !important;
  margin: 0 auto !important;
  border-radius: 16px 16px 0 0 !important;
}

dialog[data-panel="promo"] form {
  height: 100% !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-rows: 42px minmax(0, 1fr) !important;
  padding: 10px 8px 8px !important;
  overflow: hidden !important;
}

dialog[data-panel="promo"] h2 {
  height: 36px !important;
  margin: 0 !important;
  line-height: 36px !important;
}

dialog[data-panel="promo"] .modal-close {
  top: 12px !important;
  right: 12px !important;
}

dialog[data-panel="promo"] .modal-body {
  height: 100% !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  padding: 0 0 8px !important;
}

dialog[data-panel="promo"] .promo-poster {
  min-height: 980px;
}

/* Final chat fix: message list scrolls above the composer, never under it. */
dialog[data-panel="rule"].message-modal {
  top: max(6px, env(safe-area-inset-top)) !important;
  right: 0 !important;
  bottom: calc(78px + env(safe-area-inset-bottom) + var(--message-keyboard-offset, 0px)) !important;
  left: 0 !important;
  width: min(100vw, 560px) !important;
  height: auto !important;
  margin: 0 auto !important;
  overflow: hidden !important;
}

dialog[data-panel="rule"].message-modal form {
  height: 100% !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-rows: 38px minmax(0, 1fr) !important;
  padding: 8px 8px 6px !important;
  overflow: hidden !important;
}

dialog[data-panel="rule"].message-modal .message-panel-v2 {
  height: 100% !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-rows: 58px minmax(0, 1fr) 44px auto !important;
  gap: 6px !important;
  overflow: hidden !important;
}

dialog[data-panel="rule"].message-modal .message-list {
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 8px !important;
  border: 0 !important;
  background: transparent !important;
  scrollbar-width: none !important;
}

dialog[data-panel="rule"].message-modal .message-compose {
  position: relative !important;
  z-index: 3 !important;
  min-height: 44px !important;
  display: grid !important;
  grid-template-columns: 36px minmax(0, 1fr) 40px 54px !important;
  gap: 5px !important;
  align-items: center !important;
  padding: 0 !important;
}

dialog[data-panel="rule"].message-modal .emoji-row {
  width: 210px !important;
  max-height: 84px !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  justify-self: start !important;
  overflow: hidden !important;
  padding: 2px 0 0 !important;
}

dialog[data-panel="withdraw"] .withdraw-panel-front {
  gap: 7px !important;
}

dialog[data-panel="withdraw"] .withdraw-records {
  max-height: min(42vh, 360px) !important;
  gap: 6px !important;
}

dialog[data-panel="withdraw"] .withdraw-record {
  min-height: 50px !important;
  padding: 7px 8px !important;
  grid-template-columns: minmax(0, 1fr) 54px !important;
}

dialog[data-panel="withdraw"] .withdraw-record b {
  gap: 5px !important;
}

dialog[data-panel="withdraw"] .withdraw-record b strong {
  font-size: 18px !important;
}

dialog[data-panel="withdraw"] .withdraw-record b em {
  font-size: 12px !important;
}

dialog[data-panel="withdraw"] .withdraw-record b i {
  padding: 2px 6px !important;
  font-size: 11px !important;
}

dialog[data-panel="withdraw"] .withdraw-record span {
  font-size: 11px !important;
}

dialog[data-panel="withdraw"] .withdraw-record button {
  min-height: 30px !important;
  padding: 4px 6px !important;
  font-size: 12px !important;
}

.withdraw-confirm {
  position: absolute;
  inset: 0;
  z-index: 30;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(0,0,0,.48);
}

.withdraw-confirm.hidden {
  display: none !important;
}

.withdraw-confirm-card {
  width: min(300px, 86vw);
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid rgba(255,211,106,.42);
  border-radius: 14px;
  background: linear-gradient(180deg, #172b5d, #070b17);
  box-shadow: 0 16px 42px rgba(0,0,0,.48);
  text-align: center;
}

.withdraw-confirm-card b {
  color: #ffd36a;
  font-size: 17px;
}

.withdraw-confirm-card span {
  color: #dfe8ff;
  font-size: 13px;
}

.withdraw-confirm-card div {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

dialog:not([data-panel="auth"]):not(.compact-modal) {
  position: fixed !important;
  top: auto !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  width: min(100vw, 560px) !important;
  max-width: 100vw !important;
  margin: 0 auto !important;
  border-radius: 18px 18px 0 0 !important;
}

dialog.mine-modal {
  height: min(88dvh, 760px) !important;
  max-height: min(88dvh, 760px) !important;
}

dialog.message-modal,
dialog[data-panel="rule"].message-modal {
  bottom: var(--message-keyboard-offset, 0px) !important;
  height: calc(100dvh - var(--message-keyboard-offset, 0px)) !important;
  max-height: calc(100dvh - var(--message-keyboard-offset, 0px)) !important;
}

dialog[data-panel="withdraw"] {
  bottom: 0 !important;
  height: min(88dvh, 760px) !important;
  max-height: min(88dvh, 760px) !important;
}

.home-popup-mask {
  position: fixed;
  inset: 0;
  z-index: 2147483600;
  display: grid;
  place-items: end center;
  padding: 16px 12px calc(18px + env(safe-area-inset-bottom));
  background: rgba(0,0,0,.58);
}

.home-popup-card {
  width: min(96vw, 390px);
  max-height: 86dvh;
  overflow: auto;
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(255, 213, 94, .44);
  border-radius: 16px 16px 10px 10px;
  background: linear-gradient(180deg, rgba(24, 35, 61, .98), rgba(7, 10, 22, .98));
  box-shadow: 0 -12px 42px rgba(0,0,0,.55);
}

.home-popup-card img {
  width: 100%;
  max-height: 58dvh;
  object-fit: contain;
  border-radius: 12px;
  background: #05070e;
}

.home-popup-card p {
  margin: 0;
  color: #fff6ce;
  font-weight: 900;
  line-height: 1.5;
  white-space: pre-wrap;
}

.home-popup-card em {
  color: #54ff94;
  font-style: normal;
  font-weight: 900;
  text-align: center;
}

.home-popup-card button,
.download-panel button {
  min-height: 42px;
  border-radius: 12px;
  background: linear-gradient(180deg, #ffdf72, #b56b0b);
  color: #271500;
  font-weight: 900;
}

.download-panel {
  display: grid;
  gap: 10px;
  padding: 6px;
}

.promo-panel-v2 {
  display: grid;
  gap: 10px;
  padding: 0 0 8px;
  color: #fff8d6;
}

.promo-poster {
  position: relative;
  display: grid;
  gap: 12px;
  justify-items: center;
  min-height: min(760px, calc(100dvh - 92px));
  padding: 14px 12px 18px;
  overflow: hidden;
  border-radius: 12px;
  background:
    radial-gradient(circle at 12% 6%, rgba(255, 231, 138, .86), transparent 18%),
    radial-gradient(circle at 78% 30%, rgba(255, 57, 48, .28), transparent 26%),
    linear-gradient(145deg, #4c0205 0%, #7d0508 42%, #280003 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 218, 111, .28), 0 12px 28px rgba(0,0,0,.35);
}

.promo-poster::before {
  content: "";
  position: absolute;
  inset: auto -20% -10% -20%;
  height: 54%;
  background:
    radial-gradient(ellipse at center, rgba(190, 0, 8, .78), transparent 68%),
    repeating-linear-gradient(138deg, rgba(255,255,255,.08) 0 7px, transparent 7px 42px);
  opacity: .78;
  transform: rotate(-5deg);
}

.promo-poster-close {
  position: fixed;
  top: max(12px, env(safe-area-inset-top));
  right: max(12px, calc((100vw - min(100vw, 560px)) / 2 + 12px));
  z-index: 2147483601;
  width: 42px;
  height: 42px;
  min-height: 0 !important;
  padding: 0;
  border: 2px solid rgba(255, 235, 160, .92);
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, #fff5b8 0%, #efb94b 58%, #b56b0a 100%);
  color: #3b1200;
  font-size: 28px;
  font-weight: 900;
  line-height: 1;
  box-shadow: 0 6px 14px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.48);
}

.promo-shine {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(112deg, rgba(255,255,255,.22), transparent 24%, transparent 70%, rgba(255, 199, 93, .18));
  mix-blend-mode: screen;
}

.promo-poster h2 {
  position: relative;
  z-index: 1;
  margin: 0;
  color: #fff8c8;
  font-size: clamp(30px, 8vw, 48px);
  line-height: 1.05;
  text-align: center;
  text-shadow: 0 3px 0 #5b0703, 0 8px 18px rgba(0,0,0,.45);
}

.promo-subtitle {
  position: relative;
  z-index: 1;
  margin: 0;
  color: #fff7df;
  font-size: 17px;
  font-weight: 900;
  text-align: center;
}

.promo-qr-card {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: 8px;
  width: min(86%, 360px);
  padding: 18px 16px 16px;
  border: 3px solid #edc66d;
  border-radius: 28px;
  background: linear-gradient(180deg, #fffdf7, #fff7df);
  box-shadow: 0 12px 0 rgba(101, 0, 0, .16), 0 22px 40px rgba(0,0,0,.28);
}

.promo-qr-card::before,
.promo-qr-card::after {
  content: "";
  position: absolute;
  top: 30%;
  width: 40px;
  height: 58%;
  border: 2px solid rgba(237, 198, 109, .75);
  background: linear-gradient(180deg, #fff3c8, #e5ad42);
  z-index: -1;
}

.promo-qr-card::before { left: -34px; border-radius: 22px 0 0 22px; }
.promo-qr-card::after { right: -34px; border-radius: 0 22px 22px 0; }

.promo-stamp {
  position: absolute;
  top: 18px;
  right: 8px;
  padding: 5px 8px;
  border: 2px solid #b40009;
  color: #a30008;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 900;
  transform: rotate(-15deg);
  opacity: .86;
}

.promo-qr-wrap {
  width: min(78vw, 238px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  padding: 7px;
  border: 2px solid #d8a038;
  border-radius: 18px;
  background: #fff;
}

.promo-qr-wrap img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.promo-qr-wrap img.is-error {
  opacity: 0;
}

.promo-qr-wrap:has(img.is-error) {
  background:
    linear-gradient(90deg, #000 10px, transparent 10px 20px, #000 20px 30px, transparent 30px),
    linear-gradient(#fff, #fff);
}

.promo-code {
  color: #2e1004;
  font-size: 16px;
  font-weight: 800;
  text-align: center;
}

.promo-code b {
  margin-left: 6px;
  font-size: 18px;
}

.promo-gold-mini,
.promo-center-entry {
  border-radius: 999px;
  background: linear-gradient(180deg, #ffe992, #e0a33e 56%, #b76b11);
  color: #3a1300;
  border: 1px solid rgba(255, 255, 255, .55);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 8px 16px rgba(72, 0, 0, .22);
  font-weight: 900;
}

.promo-gold-mini {
  min-width: 126px;
  min-height: 38px;
  font-size: 18px;
}

.promo-agent-box {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: 7px;
  width: min(90%, 390px);
  margin-top: -6px;
  padding: 20px 14px;
  border: 2px solid #e9c56e;
  border-radius: 0 0 22px 22px;
  background: linear-gradient(180deg, #c80f12, #820006);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2);
}

.promo-agent-box h3,
.promo-agent-box p,
.promo-agent-box strong,
.promo-bottom-text {
  margin: 0;
  text-align: center;
}

.promo-agent-box h3 {
  color: #fff8d0;
  font-size: 24px;
  text-shadow: 0 2px 5px rgba(0,0,0,.45);
}

.promo-agent-box p,
.promo-agent-box strong {
  color: #fff2be;
  font-size: 18px;
  font-weight: 900;
}

.promo-main-actions {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
}

.promo-main-actions button {
  min-height: 44px;
  border: 2px solid #f8dc91;
  border-radius: 999px;
  background: linear-gradient(180deg, #bf1012, #880006);
  color: #fff7d0;
  font-size: 15px;
  font-weight: 900;
}

.promo-center-entry {
  position: relative;
  z-index: 1;
  width: min(78%, 330px);
  min-height: 52px;
  margin-top: 4px;
  font-size: 22px;
}

.promo-entry-row {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr);
  gap: 8px;
  width: min(92%, 390px);
}

.promo-entry-row .promo-center-entry {
  width: 100%;
  min-height: 48px;
  margin-top: 0;
  font-size: 17px;
}

.promo-secondary-entry {
  background: linear-gradient(180deg, #fff9d3, #f0bf55 58%, #bf7816);
}

.promo-bottom-text {
  position: relative;
  z-index: 1;
  color: #fff8dc;
  font-size: 15px;
  font-weight: 800;
}

.promo-center {
  display: grid;
  gap: 9px;
  width: min(100%, 480px);
  max-height: min(78dvh, 680px);
  overflow-y: auto;
  scrollbar-width: none;
  padding: 10px;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(80, 2, 6, .94), rgba(18, 3, 8, .96));
  border: 1px solid rgba(255, 213, 117, .28);
}

.promo-center.promo-center-floating {
  position: fixed;
  top: max(12px, env(safe-area-inset-top));
  left: 50%;
  z-index: 2147483602;
  width: min(calc(100vw - 20px), 560px);
  max-height: calc(100dvh - max(24px, env(safe-area-inset-top)) - max(14px, env(safe-area-inset-bottom)));
  transform: translateX(-50%);
  padding: 12px;
  border: 1px solid rgba(255, 220, 126, .55);
  border-radius: 12px;
  background:
    radial-gradient(circle at 50% 0, rgba(255, 226, 130, .14), transparent 32%),
    linear-gradient(180deg, rgba(84, 2, 8, .98), rgba(38, 2, 8, .98));
  box-shadow: 0 22px 70px rgba(0, 0, 0, .72), 0 0 0 9999px rgba(0, 0, 0, .46);
}

.promo-center::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.promo-center.hidden,
.promo-tab-panel.hidden {
  display: none !important;
}

.promo-center-head {
  display: grid;
  grid-template-columns: 72px 1fr 72px;
  align-items: center;
  color: #ffe79a;
}

.promo-center-head button {
  min-height: 32px;
  border-radius: 999px;
  background: rgba(255,255,255,.1);
  color: #fff6d6;
}

#closePromoPanelBtn {
  justify-self: end;
  width: 34px;
  min-width: 34px;
  min-height: 34px;
  padding: 0;
  border-radius: 50%;
  background: linear-gradient(180deg, #ff5d67, #c80022);
  color: #fff;
  font-size: 22px;
  line-height: 1;
}

.promo-center-head strong {
  text-align: center;
  font-size: 18px;
}

.promo-center-tabs {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 5px;
}

.promo-center-tabs button {
  min-height: 34px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  color: #ffdca0;
  font-weight: 900;
  font-size: 12px;
}

.promo-center-tabs button.active {
  background: linear-gradient(180deg, #ffe994, #d69125);
  color: #3a1200;
}

.promo-center-body {
  display: grid;
  gap: 8px;
}

.promo-tab-panel {
  display: grid;
  gap: 8px;
}

.promo-card {
  border: 1px solid rgba(255, 219, 126, .22);
  border-radius: 10px;
  background: rgba(8, 12, 28, .82);
  padding: 9px;
}

.promo-card h3 {
  margin: 0 0 8px;
  color: #ffe78d;
  font-size: 15px;
}

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

.merchant-commission-grid div {
  display: grid;
  gap: 4px;
  min-height: 58px;
  padding: 8px;
  border-radius: 8px;
  background: rgba(255,255,255,.055);
}

.merchant-commission-grid span {
  color: #dce6ff;
  font-size: 12px;
}

.merchant-commission-grid strong {
  color: #fff39d;
  font-size: 18px;
  line-height: 1.1;
}

.commission-info-modal {
  position: fixed;
  inset: 0;
  z-index: 2147483647 !important;
  display: grid;
  place-items: center;
  padding: max(10px, env(safe-area-inset-top)) 10px max(10px, env(safe-area-inset-bottom));
  background: rgba(1, 8, 24, .86);
  isolation: isolate;
}

.commission-info-sheet {
  position: relative;
  width: min(100%, 420px);
  max-height: min(92dvh, 760px);
  overflow-y: auto;
  padding: 14px 14px 18px;
  border: 1px solid rgba(255, 224, 126, .72);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 232, 155, .08), transparent 16%),
    radial-gradient(circle at 50% 8%, rgba(24, 78, 138, .35), transparent 34%),
    linear-gradient(180deg, #071a3b 0%, #06142e 52%, #031026 100%);
  color: #fff8d6;
  box-shadow: 0 22px 64px rgba(0,0,0,.7), inset 0 0 0 1px rgba(255,255,255,.06), inset 0 0 34px rgba(28, 83, 152, .38);
  scrollbar-width: none;
}

.commission-info-sheet::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.commission-info-top {
  position: sticky;
  top: -14px;
  z-index: 2;
  min-height: 48px;
  display: grid;
  grid-template-columns: 42px 1fr 42px;
  align-items: center;
  margin: -14px -14px 10px;
  padding: 11px 8px 8px;
  border-bottom: 1px solid rgba(255, 232, 158, .16);
  background: linear-gradient(180deg, #071a3b, rgba(7, 26, 59, .96));
}

.commission-info-back {
  width: 38px;
  height: 38px;
  min-height: 0 !important;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: #ffe98e;
  font-size: 36px;
  font-weight: 900;
  line-height: 1;
  text-shadow: 0 2px 0 rgba(0,0,0,.55);
}

.commission-info-sheet h2 {
  margin: 0;
  color: #fff2a8;
  text-align: center;
  font-size: 25px;
  line-height: 1.1;
  text-shadow: 0 2px 0 rgba(62, 38, 0, .85), 0 8px 18px rgba(0,0,0,.4);
}

.commission-info-subtitle {
  margin: 6px auto 14px;
  max-width: 360px;
  color: #fff4c8;
  text-align: center;
  font-size: 15px;
  font-weight: 900;
  line-height: 1.45;
}

.commission-info-table {
  display: grid;
  overflow: hidden;
  border: 1.5px solid rgba(255, 224, 126, .9);
  border-radius: 8px;
  background: rgba(3, 15, 36, .76);
  box-shadow: inset 0 0 20px rgba(32, 87, 154, .24);
}

.commission-info-head,
.commission-info-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: center;
}

.commission-info-head {
  min-height: 44px;
  background: rgba(5, 22, 51, .96);
  color: #fff2a5;
  font-size: 15px;
  font-weight: 900;
}

.commission-info-head span,
.commission-info-row span,
.commission-info-row strong {
  min-width: 0;
  padding: 9px 6px;
  border-left: 1px solid rgba(183, 211, 255, .2);
  text-align: center;
  word-break: keep-all;
}

.commission-info-head span:first-child,
.commission-info-row span:first-child {
  border-left: 0;
}

.commission-info-row {
  min-height: 39px;
  border-top: 1px solid rgba(183, 211, 255, .16);
  color: #fff6c5;
  font-size: 18px;
  font-weight: 900;
}

.commission-info-row strong {
  color: #fff2a5;
  font-size: 18px;
  text-shadow: 0 2px 0 rgba(0,0,0,.5);
}

.commission-info-note {
  display: grid;
  gap: 7px;
  margin-top: 13px;
  padding: 14px 16px;
  border: 1.5px solid rgba(255, 224, 126, .84);
  border-radius: 8px;
  background: rgba(3, 15, 36, .72);
  box-shadow: inset 0 0 18px rgba(32, 87, 154, .22);
}

.commission-info-note b {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #fff2a5;
  font-size: 19px;
  text-align: center;
  text-shadow: 0 2px 0 rgba(0,0,0,.55);
}

.commission-info-note b::before,
.commission-info-note b::after {
  content: "";
  width: 46px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 232, 158, .9), transparent);
}

.commission-info-note span {
  color: #fff6cf;
  font-size: 15px;
  font-weight: 900;
  line-height: 1.55;
}

.commission-info-diff span::before {
  content: "\2022";
  margin-right: 8px;
  color: #ffe88b;
}

.commission-info-ok {
  width: min(72%, 240px);
  min-height: 48px;
  margin: 18px auto 2px;
  border-radius: 999px;
  display: block;
  background: linear-gradient(180deg, #fff4b2 0%, #ffd96c 48%, #d58a24 100%);
  color: #3a1300;
  font-size: 20px;
  font-weight: 900;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 8px 18px rgba(0,0,0,.34);
}

.promo-task-modal {
  position: fixed;
  inset: 0;
  z-index: 2147483610 !important;
  display: grid;
  place-items: center;
  padding: max(8px, env(safe-area-inset-top)) 10px max(8px, env(safe-area-inset-bottom));
  background: rgba(0,0,0,.62);
}

.promo-task-sheet {
  position: relative;
  width: min(100%, 540px);
  max-height: calc(100dvh - 18px);
  overflow-y: auto;
  padding: 22px 14px 16px;
  border: 2px solid rgba(255, 229, 150, .82);
  border-radius: 20px;
  background:
    radial-gradient(circle at 88% 4%, rgba(255, 190, 85, .65), transparent 18%),
    linear-gradient(145deg, #cb080b 0%, #900006 52%, #3e0003 100%);
  box-shadow: 0 20px 60px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.12);
  color: #fff7d4;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.promo-task-sheet::-webkit-scrollbar,
.promo-task-detail-sheet::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.promo-task-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 36px;
  height: 36px;
  min-height: 0 !important;
  border-radius: 50%;
  background: linear-gradient(180deg, #ff5b6b, #c7001e);
  color: #fff;
  font-size: 26px;
  line-height: 1;
}

.promo-task-sheet h2 {
  margin: 8px 0 4px;
  color: #fff8c8;
  font-size: 36px;
  line-height: 1.1;
  text-align: center;
  text-shadow: 0 3px 0 #5b0703, 0 8px 16px rgba(0,0,0,.35);
}

.promo-task-subtitle,
.promo-task-tip {
  margin: 0;
  text-align: center;
  color: #fff6dd;
  font-weight: 900;
}

.promo-task-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 14px auto;
  overflow: hidden;
  border: 2px solid rgba(255,255,255,.82);
  border-radius: 18px;
  background: linear-gradient(90deg, #e90b12 0 66%, #fff0a6 66% 100%);
}

.promo-task-stats div {
  display: grid;
  place-items: center;
  min-height: 78px;
  border-right: 1px solid rgba(255,255,255,.52);
}

.promo-task-stats div:last-child {
  border-right: 0;
}

.promo-task-stats span {
  color: #fff8d3;
  font-size: 15px;
  font-weight: 900;
}

.promo-task-stats div:last-child span,
.promo-task-stats div:last-child strong {
  color: #5b0505;
}

.promo-task-stats strong {
  color: #fff8c8;
  font-size: 30px;
  line-height: 1;
  text-shadow: 0 2px 4px rgba(0,0,0,.2);
}

.promo-task-list-wrap {
  display: grid;
  gap: 10px;
  padding: 14px 9px;
  border: 2px solid rgba(255, 229, 150, .82);
  border-radius: 18px;
  background: linear-gradient(180deg, #db0a0d, #950006);
}

.promo-task-list-wrap h3 {
  margin: 0;
  color: #fff8c8;
  font-size: 24px;
  text-align: center;
}

.promo-task-list {
  display: grid;
  gap: 10px;
}

.promo-task-item {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 82px;
  gap: 8px;
  align-items: center;
  min-height: 72px;
  padding: 9px;
  border-radius: 12px;
  background: #fff;
  color: #2d0905;
  box-shadow: 0 4px 12px rgba(0,0,0,.22);
}

.promo-task-item i {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 2px solid #bb8b38;
  border-radius: 50%;
  color: #3b1600;
  font-style: normal;
  font-weight: 900;
}

.promo-task-item b,
.promo-task-item span {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.promo-task-item b {
  font-size: 16px;
}

.promo-task-item span {
  margin-top: 3px;
  color: #4c3128;
  font-size: 12px;
}

.promo-task-item button,
.promo-task-bottom button {
  min-height: 44px;
  border-radius: 999px;
  background: linear-gradient(180deg, #fff59e, #f0a83d);
  color: #3b1300;
  font-weight: 900;
}

.promo-task-bottom {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin: 14px auto 0;
  overflow: hidden;
  width: min(88%, 380px);
  border-radius: 999px;
}

.promo-task-bottom button {
  border-radius: 0;
  font-size: 18px;
}

.promo-task-detail-modal {
  position: fixed;
  inset: 0;
  z-index: 2147483611 !important;
  display: grid;
  place-items: stretch center;
  padding: max(8px, env(safe-area-inset-top)) 8px max(8px, env(safe-area-inset-bottom));
  background: rgba(0,0,0,.72);
}

.promo-task-detail-sheet {
  position: relative;
  width: min(100%, 560px);
  height: 100%;
  overflow-y: auto;
  padding: 58px 12px 18px;
  border-radius: 18px;
  background: radial-gradient(circle at 86% 4%, rgba(255,181,69,.62), transparent 22%), linear-gradient(160deg, #a00006 0%, #c9070d 42%, #4c0004 100%);
  border: 2px solid rgba(255,229,150,.65);
  color: #fff8d7;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.promo-task-back {
  position: absolute;
  top: 14px;
  left: 12px;
  width: 42px;
  height: 42px;
  min-height: 0 !important;
  border-radius: 50%;
  padding: 0;
  color: #fff8ce;
  background: rgba(80,0,0,.2);
  font-size: 44px;
  line-height: .75;
}

.promo-task-detail-sheet h2 {
  margin: 0 0 18px;
  text-align: center;
  color: #fff8ce;
  font-size: 38px;
  text-shadow: 0 3px 0 #4f0002, 0 8px 16px rgba(0,0,0,.3);
}

.promo-task-detail-hero,
.promo-task-detail-card,
.promo-task-submit-wrap {
  border: 2px solid rgba(255,229,150,.7);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,54,44,.5), rgba(147,0,6,.72));
  box-shadow: 0 8px 18px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.15);
}

.promo-task-detail-hero {
  display: grid;
  gap: 7px;
  margin-bottom: 12px;
  padding: 16px;
  text-align: center;
}

.promo-task-detail-hero strong {
  color: #fff8ce;
  font-size: 24px;
}

.promo-task-detail-hero em {
  color: #fff2a0;
  font-size: 30px;
  font-style: normal;
  font-weight: 900;
}

.promo-task-detail-hero span,
.promo-task-detail-card p,
.promo-task-submit-wrap span {
  color: #fff4dc;
  font-size: 14px;
  line-height: 1.55;
}

.promo-task-link-input {
  min-height: 52px;
  border: 2px solid rgba(255,229,150,.72);
  border-radius: 18px;
  background: rgba(255,255,255,.08);
  color: #fff;
  padding: 0 14px;
}

.promo-task-link-input::placeholder {
  color: rgba(255,255,255,.75);
}

.promo-task-readonly {
  min-height: 48px;
  display: flex;
  align-items: center;
  padding: 0 14px;
  border: 1px solid rgba(255,229,150,.5);
  border-radius: 8px;
  color: #fff4bd;
  background: rgba(0,0,0,.16);
  font-weight: 800;
}

.promo-task-detail-card {
  display: grid;
  gap: 10px;
  margin-top: 12px;
  padding: 14px;
}

.promo-task-detail-card h3 {
  margin: 0;
  text-align: center;
  color: #fff8ce;
  font-size: 24px;
}

.promo-task-material-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.promo-task-material-actions button,
.promo-task-proof-picker,
.promo-task-submit-wrap button {
  min-height: 42px;
  border-radius: 999px;
  background: linear-gradient(180deg, #fff7b6, #eaa036);
  color: #4e0800;
  font-weight: 900;
}

.promo-task-material-actions button:disabled {
  color: rgba(78,8,0,.55);
  background: linear-gradient(180deg, #e9e9e9, #bfc0c3);
}

.promo-task-progress {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  height: 20px;
  align-items: center;
}

.promo-task-progress::before {
  content: "";
  position: absolute;
  left: 4px;
  right: 4px;
  height: 7px;
  border-radius: 999px;
  background: linear-gradient(90deg, #ffd875, #f7f2b7, rgba(255,255,255,.25));
}

.promo-task-progress i {
  position: relative;
  z-index: 1;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: linear-gradient(180deg, #fff6ba, #e99c2b);
  border: 2px solid #fff4c4;
}

.promo-task-progress i:last-child {
  justify-self: center;
}

.promo-task-progress.is-followup::before {
  background: #ffd875;
}

.promo-task-progress.is-followup i {
  box-shadow: 0 0 12px rgba(255,216,117,.75);
}

.promo-task-wait {
  margin: 2px 0 0 !important;
  padding: 9px 10px;
  border-radius: 8px;
  color: #ffe3a0 !important;
  background: rgba(65,0,0,.4);
  text-align: center;
  font-weight: 900;
}

.promo-task-wait.is-ready {
  color: #164e22 !important;
  background: #dff4c8;
}

.promo-task-proof-picker {
  display: grid;
  place-items: center;
  text-align: center;
}

.promo-task-proof-picker input {
  display: none;
}

.promo-task-proof-picker.is-disabled,
.promo-task-submit-wrap button:disabled {
  opacity: .58;
  filter: grayscale(.65);
  cursor: not-allowed;
}

.promo-task-video-steps {
  display: grid;
  gap: 10px;
}

.promo-task-video-step {
  display: grid;
  gap: 6px;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,229,150,.55);
  background: rgba(255,255,255,.06);
}

.promo-task-video-step b {
  color: #fff8ce;
  font-size: 18px;
}

.promo-task-video-step span {
  color: #fff4dc;
  font-size: 13px;
}

.promo-task-video-step button {
  justify-self: end;
  min-height: 38px;
  padding: 0 14px;
  border-radius: 999px;
  background: linear-gradient(180deg, #fff7b6, #eaa036);
  color: #4e0800;
  font-weight: 900;
}

.promo-task-proof-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.promo-task-proof-preview span {
  max-width: 100%;
  padding: 6px 9px;
  border-radius: 999px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #5a0800;
  background: #fff4d2;
  font-size: 12px;
}

.promo-task-submit-wrap {
  display: grid;
  gap: 10px;
  margin-top: 14px;
  padding: 14px;
  text-align: center;
  background: linear-gradient(180deg, #fff7bc, #f7ca63);
}

.promo-task-submit-wrap span {
  color: #5a0800;
  font-weight: 900;
}

.promo-task-submit-wrap button {
  min-height: 56px;
  color: #fff7d7;
  background: linear-gradient(180deg, #ff3333, #c40007);
  font-size: 24px;
  box-shadow: inset 0 0 0 2px rgba(255,239,172,.75);
}

.top-controls button[data-panel="promo"]::after {
  content: "";
  position: absolute;
  inset: -10px -6px;
}

.promo-card {
  display: grid;
  gap: 7px;
  padding: 9px;
  border: 1px solid rgba(255, 214, 92, .26);
  border-radius: 8px;
  background: rgba(8, 13, 29, .82);
}

.promo-card h3,
.promo-card span,
.promo-card p {
  margin: 0;
}

.promo-card h3 {
  color: #ffe071;
  font-size: 14px;
  line-height: 1.1;
}

.promo-link-card > span,
.merchant-overview span {
  color: #b8c8ef;
  font-size: 12px;
}

.promo-copy-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 72px;
  gap: 7px;
}

.promo-copy-row input,
.merchant-gift-grid input,
.merchant-contact-box input {
  min-width: 0;
  height: 38px;
  padding: 0 10px;
  border-radius: 8px;
  color: #fff;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
}

.merchant-qr-preview {
  display: grid;
  place-items: center;
  min-height: 156px;
  padding: 10px;
  border: 1px dashed rgba(255, 255, 255, .32);
  border-radius: 10px;
  background: rgba(255, 255, 255, .06);
  color: #dce6ff;
  font-size: 14px;
  text-align: center;
  cursor: pointer;
}

.merchant-qr-preview img {
  width: min(100%, 180px);
  aspect-ratio: 1;
  object-fit: contain;
  border-radius: 10px;
  background: #fff;
}

.merchant-qr-preview input {
  display: none;
}

.merchant-review-hint {
  margin: 0;
  padding: 8px 10px;
  border-radius: 8px;
  color: #ffe8a6;
  background: rgba(255, 214, 108, .1);
  border: 1px solid rgba(255, 214, 108, .2);
  font-size: 12px;
  line-height: 1.35;
}

.promo-copy-row button,
.merchant-gift-grid button,
.merchant-contact-box button,
.merchant-card-box > button {
  min-height: 38px;
  border-radius: 8px;
  background: linear-gradient(180deg, #ffdc70, #b36b0b);
  color: #251400;
  font-weight: 900;
}

.merchant-join-panel {
  display: grid;
  min-height: 100%;
  align-items: center;
  padding: 8px;
}

.merchant-join-card {
  display: grid;
  gap: 14px;
  padding: 18px 14px;
  border: 1px solid rgba(255, 211, 106, .42);
  border-radius: 12px;
  background: rgba(7, 12, 24, .82);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
}

.merchant-join-card h3 {
  margin: 0;
  color: #ffd64f;
  font-size: 20px;
  text-align: center;
}

.merchant-join-card p {
  margin: 0;
  color: #e9f0ff;
  font-size: 14px;
  line-height: 1.65;
}

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

.merchant-join-actions button {
  min-height: 44px;
}

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

.merchant-overview div {
  display: grid;
  gap: 3px;
  min-height: 46px;
  padding: 7px;
  border-radius: 7px;
  background: rgba(255,255,255,.06);
}

.merchant-overview strong {
  color: #fff39d;
  font-size: 16px;
}

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

.merchant-gift-grid input:nth-child(3),
.merchant-gift-grid button {
  grid-column: span 2;
}

.merchant-check {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #dce8ff;
  font-size: 13px;
}

.merchant-setting-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.merchant-setting-meta span {
  min-width: 0;
  padding: 6px 7px;
  border-radius: 7px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #dce8ff;
  background: rgba(255,255,255,.06);
  font-size: 12px;
}

.merchant-list {
  display: grid;
  gap: 6px;
  max-height: 168px;
  overflow-y: auto;
}

.merchant-list p {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  min-height: 30px;
  padding: 6px 7px;
  border-radius: 7px;
  color: #dce8ff;
  background: rgba(255,255,255,.05);
}

.merchant-list p em {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #9fb2da;
  font-style: normal;
}

.merchant-user-row {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  padding: 7px;
  border-radius: 8px;
  background: rgba(255,255,255,.06);
}

.merchant-user-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: radial-gradient(circle at 35% 30%, #334b8f, #0b1024 72%);
  color: #ffe071;
  font-weight: 900;
}

.merchant-user-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.merchant-user-row strong,
.merchant-user-row span {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.merchant-user-row strong {
  color: #fff;
  font-size: 14px;
}

.merchant-user-row span {
  color: #aebce0;
  font-size: 12px;
}
.promo-invite-code-card {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px 12px;
  align-items: center;
  margin: 12px 14px;
  padding: 12px 14px;
  border: 1px solid rgba(255, 215, 106, .55);
  border-radius: 7px;
  background: rgba(58, 9, 17, .92);
}
.promo-invite-code-card span { color: #e5ca98; font-size: 13px; }
.promo-invite-code-card strong { grid-row: 2; color: #ffd76a; font-size: 28px; letter-spacing: 0; }
.promo-invite-code-card button { grid-column: 2; grid-row: 1 / span 2; min-height: 42px; padding: 0 14px; border: 0; border-radius: 6px; color: #49101a; background: #ffd76a; font-weight: 800; }
.promo-live-poster { position: relative; width: min(76%, 300px); margin: 10px auto 14px; aspect-ratio: 9 / 16; border: 1px solid rgba(255, 215, 106, .65); border-radius: 7px; overflow: hidden; background: #5a101b; }
.promo-live-poster canvas { display: block; width: 100%; height: 100%; object-fit: contain; }
#promoPosterLoading { position: absolute; inset: 0; display: grid; place-items: center; padding: 20px; color: #ffe8ae; background: rgba(42, 5, 11, .82); text-align: center; }
#promoPosterLoading.hidden { display: none; }
.promo-task-item.is-disabled { opacity: .55; }
.promo-task-item.is-disabled button { color: #887d6c; background: #34272a; }

/* Global overlay safety net: gameplay layers and editor controls must never cover dialogs. */
dialog[open],
.merchant-apply-modal,
.promo-task-modal,
.promo-task-detail-modal,
.promo-center.promo-center-floating,
.commission-info-modal {
  isolation: isolate;
}

dialog[open] {
  z-index: var(--layer-popups) !important;
}

.merchant-apply-modal,
.promo-task-modal {
  z-index: 2147483610 !important;
}

.promo-task-detail-modal {
  z-index: 2147483611 !important;
}

.promo-center.promo-center-floating {
  z-index: 2147483602 !important;
}

.toast,
.modal-inline-hint {
  z-index: var(--layer-tips) !important;
}