:root {
  --ui-bg: #1b1c20;
  --ui-surface: #26272c;
  --ui-surface-raised: #303137;
  --ui-border: #707582;
  --ui-option-border: #959ba8;
  --ui-gold: #e4c365;
  --ui-gold-bright: #f4dda1;
  --ui-muted: #c7cad3;
  --ui-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
  --gold: var(--ui-gold);
  --gold-bright: var(--ui-gold-bright);
  --wallet-gold: var(--ui-gold);
}

body {
  background: radial-gradient(ellipse at top, #292a30, #111215 75%);
}

:where(button, a, input, select, textarea):focus-visible {
  outline: 2px solid var(--ui-gold-bright);
  outline-offset: 3px;
}

:where(button, a, input, select, textarea) {
  -webkit-tap-highlight-color: rgba(228, 195, 101, 0.15);
}

:where(button:disabled, input:disabled, select:disabled) {
  cursor: not-allowed;
}

.app-frame:not(.akai-frame):not(.gm-frame),
.wallet-app {
  background: var(--ui-bg);
  box-shadow: 0 0 60px rgba(0, 0, 0, 0.35);
}

.site-header,
.wallet-header {
  border-bottom: 1px solid rgba(228, 195, 101, 0.12);
  background: #25262b;
}

.deposit-title,
.wallet-header h1 {
  font-size: 21px;
  font-weight: 600;
  letter-spacing: 0.4px;
}

.bottom-nav,
.wallet-footer {
  border-top: 1px solid #36373e;
  background: #202126;
}

.bottom-nav :is(a, button),
.wallet-footer :is(a, button) {
  color: #a4a5ae;
  font-weight: 500;
}

.bottom-nav .is-active,
.wallet-footer .is-active {
  color: var(--ui-gold-bright);
}

.deposit-close {
  background: var(--ui-surface-raised);
  color: #e4e4ea;
}

.balance-card,
.withdrawal-form,
.history-filter,
.wallet-balance-card {
  border-color: rgba(228, 195, 101, 0.38);
  border-radius: 10px;
  background: var(--ui-surface);
  box-shadow: var(--ui-shadow);
}

.field-label,
.history-label {
  color: #ededf2;
  font-weight: 500;
}

.select-wrap,
.withdrawal-select-wrap,
.withdrawal-input,
.withdrawal-amount-row,
.history-select-wrap,
.amount-input {
  border-radius: 7px;
  background-color: #f2f3f5;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.amount-input::placeholder,
.withdrawal-input::placeholder,
#withdrawal-amount::placeholder {
  color: #737781;
  font-weight: 400;
}

.method-tab {
  border-radius: 9px;
  color: var(--ui-muted);
}

.method-tab.is-active,
.quick-type.is-active {
  background: var(--ui-surface-raised);
  box-shadow: inset 0 0 0 1px rgba(228, 195, 101, 0.35);
}

.method-tab.is-active {
  color: var(--ui-gold-bright);
  font-weight: 600;
}

.quick-type {
  border-radius: 10px;
}

.deposit-next-wrap,
.withdrawal-actions {
  background: var(--ui-bg);
}

.deposit-next,
.deposit-skip,
.withdrawal-submit,
.history-search,
.submit-button,
.dialog-done,
.wallet-deposit,
.bank-confirm,
.ewallet-confirm,
.network-confirm {
  border-radius: 7px;
  background: linear-gradient(180deg, #f4dfa5, #e4c365 72%, #d8b455);
  color: #252116;
  box-shadow: 0 3px 9px rgba(0, 0, 0, 0.16);
  font-weight: 600;
}

.deposit-next,
.withdrawal-submit {
  font-size: 17px;
}

.quick-form .amount-presets button,
.bank-form .amount-presets button {
  border: 1px solid rgba(228, 195, 101, 0.5);
  border-radius: 6px;
  background: #34312a;
  color: var(--ui-gold-bright);
}

.amount-presets button.is-selected {
  border-color: var(--ui-gold-bright);
  background: #4b4027;
  box-shadow: inset 0 0 0 1px var(--ui-gold);
}

.bank-picker,
.ewallet-picker,
.network-picker,
.promotion-dialog,
.result-dialog,
.withdrawal-favourite-dialog {
  border-color: rgba(228, 195, 101, 0.35);
  background: var(--ui-surface);
}

.bank-option,
.ewallet-option,
.network-option {
  border-radius: 9px;
}

.important-notice {
  border-color: rgba(228, 195, 101, 0.25);
  background: #202125;
}

.withdrawal-available {
  border-color: rgba(228, 195, 101, 0.2);
  background: #202125;
}

.withdrawal-type-switch {
  border-radius: 7px;
}

.withdrawal-type-switch label:has(input:checked) {
  background: linear-gradient(180deg, #f4dfa5, #e4c365);
}

.withdrawal-demo-note,
.history-demo-note {
  color: var(--ui-muted);
}

.history-table {
  border: 1px solid var(--ui-border);
  border-radius: 9px;
  background: #393325;
}

.history-table th {
  color: var(--ui-gold-bright);
  font-weight: 600;
}

.history-table th + th {
  border-left-color: rgba(228, 195, 101, 0.15);
}

.history-table td {
  border-top-color: var(--ui-border);
  background: var(--ui-surface);
}

.history-table td small {
  color: var(--ui-muted);
}

.history-status {
  border-radius: 5px;
}

.wallet-amount > span:first-child {
  color: var(--ui-muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1px;
}

.wallet-amount strong {
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.8px;
}

.wallet-more {
  background: #d9bb68;
  font-weight: 600;
  letter-spacing: 0.3px;
}

.wallet-quick-actions :is(a, button) {
  border-color: var(--ui-border);
  border-radius: 8px;
  background: #35363d;
}

.wallet-promotions h2 {
  color: #dedee5;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1px;
}

.wallet-promo {
  border-radius: 10px;
  box-shadow: var(--ui-shadow);
}

.akai-bank-card,
.gm-bank-option,
.bank-payment,
.bank-sign-in {
  box-shadow: 0 3px 12px rgba(23, 32, 51, 0.06);
}

.akai-bank-card,
.gm-bank-option,
.bank-continue {
  transition: box-shadow 150ms ease, border-color 150ms ease;
}

.bank-login-page {
  box-shadow: 0 0 50px rgba(0, 0, 0, 0.14);
}

.bank-error,
.akai-error,
.gm-error {
  border-radius: 9px;
}

@media (hover: hover) {
  :is(.deposit-next, .withdrawal-submit, .history-search, .wallet-deposit, .bank-confirm):not(:disabled):hover {
    filter: brightness(1.05);
  }

  :is(.bottom-nav, .wallet-footer) :is(a, button):hover {
    color: var(--ui-gold-bright);
  }
}

@media (max-width: 360px) {
  .deposit-title,
  .wallet-header h1 {
    font-size: 19px;
  }
}

.home-app,
.register-app,
.burger-screen,
.history-content {
  background: var(--ui-bg);
}

.home-header,
.register-header,
.drawer-header {
  border-bottom: 1px solid rgba(228, 195, 101, 0.12);
  background: #25262b;
}

.side-drawer,
.more-sheet,
.notice-dialog,
.guest-menu {
  background: var(--ui-surface);
}

.drawer-wallet {
  border-color: rgba(228, 195, 101, 0.35);
  border-radius: 10px;
  background: var(--ui-surface-raised);
}

.drawer-account-name {
  color: #f4f4f6;
  font-size: 18px;
  font-weight: 700;
}

.drawer-category {
  color: #c6c7d0;
  font-weight: 500;
}

.drawer-category svg {
  stroke: #b6b7c0;
}

.drawer-category .drawer-symbol {
  color: #b6b7c0;
}

.drawer-footer {
  border-top-color: var(--ui-border);
  background: #202126;
}

.drawer-footer :is(a, button) {
  color: var(--ui-muted);
}

.more-option {
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
}

.game-categories button {
  border-color: rgba(228, 195, 101, 0.45);
  background: var(--ui-surface-raised);
  color: #eeeef3;
  font-weight: 500;
}

.game-categories button.is-active {
  background: linear-gradient(180deg, #f4dfa5, #e4c365);
  color: #252116;
  font-weight: 600;
}

.provider-card {
  border-color: rgba(228, 195, 101, 0.45);
  border-radius: 8px;
}

.register-submit,
.notice-ok,
.landing-actions a,
.guest-menu-actions a {
  border-radius: 7px;
  background: linear-gradient(180deg, #f4dfa5, #e4c365 72%, #d8b455);
  color: #252116;
  font-size: 16px;
  font-weight: 700;
}

.landing-actions {
  border-top-color: var(--ui-border);
  background: #202126;
}

.register-content h1 {
  margin-bottom: 8px;
  color: var(--ui-gold-bright);
  font-size: 26px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.3px;
}

.page-guidance {
  margin: 0 0 16px;
  color: var(--ui-muted);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.6;
  text-align: left;
}

.page-guidance strong {
  color: #e9e9ee;
  font-weight: 600;
}

.register-content > .page-guidance {
  text-align: center;
}

.page-intro {
  margin: 16px 12px 0;
}

.page-intro .page-guidance {
  margin-bottom: 0;
}

.task-title {
  margin: 0 0 6px;
  color: #f5f5f7;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.2px;
}

.deposit-panel > .page-guidance {
  margin: 0 22px 4px;
}

.app-frame.is-promotion-step .deposit-panel > .page-guidance,
.app-frame.is-slip-step .deposit-panel > .page-guidance {
  display: none;
}

.field-label,
.quick-form .field-label,
.withdrawal-form .field-label,
.history-label {
  color: #f0f0f4;
  font-size: 13px;
  font-weight: 600;
  line-height: 18px;
}

.quick-type span,
.method-tab span {
  font-weight: 600;
}

:where(.quick-form, .bank-form) :is(.amount-input, .select-wrap select),
.withdrawal-input,
#withdrawal-amount {
  font-size: 14px;
  font-weight: 500;
}

.history-select-wrap select {
  font-size: 13px;
}

.register-form {
  gap: 14px;
}

.input-row {
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--ui-border);
  border-radius: 9px;
  background: var(--ui-surface);
}

.input-row > svg {
  width: 26px;
  height: 30px;
  flex-basis: 26px;
  stroke: var(--ui-muted);
}

.input-content {
  gap: 6px;
  border-bottom: 0;
}

.input-content strong {
  color: var(--ui-gold-bright);
  font-size: 13px;
  font-weight: 600;
}

.input-content input {
  height: 26px;
  color: #fff;
  font-size: 14px;
}

.input-content input::placeholder {
  color: #afb0b9;
  font-size: 13px;
}

.input-row:focus-within {
  border-color: var(--ui-gold);
  box-shadow: 0 0 0 2px rgba(228, 195, 101, 0.12);
}

.input-row .password-toggle {
  width: 28px;
  min-width: 28px;
  height: 34px;
  margin-left: 0;
  color: var(--ui-gold-bright);
}

.login-link {
  color: var(--ui-gold-bright);
  font-size: 13px;
  font-weight: 500;
  text-underline-offset: 3px;
}

.register-with,
.benefit > span {
  color: var(--ui-muted);
  line-height: 1.5;
}

.benefit > strong {
  color: #ededf2;
}

:is(.bottom-nav, .wallet-footer, .drawer-footer) :is(a, button) {
  font-size: 10px;
  font-weight: 500;
}

.form-message:not(:empty),
.withdrawal-error {
  font-size: 13px;
  line-height: 1.5;
}

.bank-picker h2,
.ewallet-picker h2,
.network-picker h2,
.promotion-dialog h2,
.notice-dialog h2 {
  color: var(--ui-gold-bright);
  font-size: 19px;
  font-weight: 700;
}

.menu-intro {
  margin: 18px 10px 0;
}

.menu-intro .task-title {
  font-size: 18px;
}

.menu-intro .page-guidance {
  margin-bottom: 0;
  font-size: 12px;
}

.provider-section-title {
  margin: 0 0 12px;
  color: #18253b;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.35;
}

.provider-guidance {
  margin: 8px 0 12px;
  color: #5c677a;
  font-size: 13px;
  line-height: 1.5;
  text-align: center;
}

.bank-sign-in h2,
.bank-payment h2,
.gm-bank-selection > h2 {
  font-size: 18px;
  font-weight: 700;
}

.akai-instructions {
  padding: 10px;
  font-size: 12px;
  line-height: 18px;
}

.akai-bank-card {
  font-size: 11px;
  font-weight: 600;
  line-height: 16px;
}

.gm-summary dt,
.gm-countdown-label {
  font-size: 11px;
  line-height: 17px;
}

.gm-summary dd,
.gm-bank-option {
  font-size: 12px;
}

.bank-demo-badge {
  font-weight: 700;
}

.bank-sign-in label {
  font-size: 14px;
  font-weight: 600;
}

@media (max-width: 360px) {
  .register-content {
    padding-right: 22px;
    padding-left: 22px;
  }

  .task-title {
    font-size: 18px;
  }

  .akai-bank-card {
    font-size: 10px;
  }

  .gm-bank-option {
    font-size: 11px;
  }
}

.bank-option,
.ewallet-option,
.network-option,
.saved-bank-option {
  border-color: var(--ui-option-border);
  color: #eef0f6;
}

.bank-option,
.ewallet-option,
.network-option {
  background: var(--ui-surface-raised);
}

.bank-option.is-selected,
.ewallet-option.is-selected,
.network-option.is-selected,
.saved-bank-option[aria-checked="true"] {
  border-color: var(--ui-gold-bright);
  background: #3d3729;
  color: #fff;
}

.saved-bank-option-details {
  color: #d0d4de;
}

.saved-bank-option-details strong {
  color: #fff;
}

.saved-bank-option-check {
  border-color: var(--ui-option-border);
}

.bank-picker-footer {
  background: var(--ui-surface);
}

.bank-picker-handle,
.ewallet-picker-handle,
.network-picker-handle,
.more-handle {
  background: #a6a8af;
}

.method-tab,
.quick-type,
.game-categories button,
.quick-form .amount-presets button,
.bank-form .amount-presets button,
.wallet-quick-actions :is(a, button) {
  border-color: var(--ui-option-border);
  color: #eef0f6;
}

.method-tab.is-active,
.quick-type.is-active,
.game-categories button.is-active,
.quick-form .amount-presets button.is-selected,
.bank-form .amount-presets button.is-selected {
  border-color: var(--ui-gold-bright);
}

.method-tab.is-active,
.quick-type.is-active,
.quick-form .amount-presets button.is-selected,
.bank-form .amount-presets button.is-selected {
  color: var(--ui-gold-bright);
}

.game-categories button.is-active {
  color: #252116;
}

.akai-bank-card,
.gm-bank-option {
  border-color: #b7c1d0;
  color: #35445d;
}

@media (prefers-reduced-motion: reduce) {
  .akai-bank-card,
  .gm-bank-option,
  .bank-continue {
    transition: none;
  }
}