:root {
  --lion-font-size-page: 30px;
  --lion-font-size-section: 18px;
  --lion-font-size-body: 14px;
  --lion-font-size-caption: 12px;
  --lion-font-size-note: 13px;
  --lion-line-height-page: 1.15;
  --lion-line-height-body: 1.6;

  --lion-space-2: 8px;
  --lion-space-3: 12px;
  --lion-space-4: 16px;
  --lion-space-5: 20px;
  --lion-space-6: 24px;
  --lion-space-7: 28px;

  --lion-control-height-md: 40px;
  --lion-control-height-lg: 52px;

  --lion-status-success-bg: #f0fdf4;
  --lion-status-success-border: #bbf7d0;
  --lion-status-success-text: #16a34a;
  --lion-status-info-bg: #eff6ff;
  --lion-status-info-border: #bfdbfe;
  --lion-status-info-text: #2563eb;
  --lion-status-warning-bg: #fffbeb;
  --lion-status-warning-border: #fde68a;
  --lion-status-warning-text: #d97706;
  --lion-status-danger-bg: #fef2f2;
  --lion-status-danger-border: #fecaca;
  --lion-status-danger-text: #dc2626;
}

.dark {
  --lion-status-success-bg: rgba(20, 83, 45, 0.24);
  --lion-status-success-border: rgba(22, 163, 74, 0.36);
  --lion-status-success-text: #86efac;
  --lion-status-info-bg: rgba(30, 64, 175, 0.2);
  --lion-status-info-border: rgba(37, 99, 235, 0.38);
  --lion-status-info-text: #93c5fd;
  --lion-status-warning-bg: rgba(120, 53, 15, 0.22);
  --lion-status-warning-border: rgba(217, 119, 6, 0.38);
  --lion-status-warning-text: #fcd34d;
  --lion-status-danger-bg: rgba(127, 29, 29, 0.22);
  --lion-status-danger-border: rgba(220, 38, 38, 0.34);
  --lion-status-danger-text: #fca5a5;
}

body {
  font-family: var(--lion-font-sans) !important;
  font-size: var(--lion-font-size-body);
  line-height: var(--lion-line-height-body);
  color: var(--lion-text-body);
}

.page-loading-card {
  border-radius: var(--lion-radius-xl) !important;
  border-color: var(--lion-border-soft) !important;
  box-shadow: var(--lion-shadow-card) !important;
}

.page-loading-title {
  font-family: var(--lion-font-sans) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em !important;
}

.page-loading-text {
  font-size: var(--lion-font-size-note) !important;
  line-height: 1.5 !important;
  color: var(--lion-text-muted) !important;
}

.pro-card,
.tickets-shell,
.ticket-hero-card,
.ticket-section-card,
.ticket-overview-card,
.security-banner,
.tickets-summary,
.register-shell,
.forgot-shell,
.auth-shell,
.invite-panel,
.invite-note {
  border-radius: var(--lion-radius-xl) !important;
}

.pro-card,
.tickets-shell,
.ticket-hero-card,
.ticket-section-card,
.ticket-overview-card,
.security-banner,
.tickets-summary,
.register-shell,
.forgot-shell,
.auth-shell {
  border-color: var(--lion-border-soft) !important;
  box-shadow: var(--lion-shadow-card) !important;
}

.pro-card:hover,
.tickets-shell:hover,
.ticket-section-card:hover,
.ticket-overview-card:hover {
  transform: none !important;
  box-shadow: 0 22px 44px -34px rgba(15, 23, 42, 0.28) !important;
}

.dark .pro-card:hover,
.dark .tickets-shell:hover,
.dark .ticket-section-card:hover,
.dark .ticket-overview-card:hover {
  box-shadow: none !important;
}

.header-btn {
  width: var(--lion-control-height-md) !important;
  height: var(--lion-control-height-md) !important;
  border-radius: 999px !important;
  border-color: var(--lion-border-soft) !important;
}

.listing-page-head,
.profile-section-header,
.security-section-header,
.ticket-section-head {
  margin-bottom: 18px !important;
}

.listing-page-head h2,
.profile-section-header h3,
.security-section-title,
.ticket-section-title,
.minixpay-section-title,
.minixpay-section-title-sm {
  font-family: var(--lion-font-sans) !important;
  font-size: var(--lion-font-size-section) !important;
  line-height: 1.25 !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  color: var(--lion-text-strong) !important;
}

.tickets-summary-title,
.ticket-hero-title {
  font-family: var(--lion-font-sans) !important;
  font-size: 24px !important;
  line-height: 1.15 !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
  color: var(--lion-text-strong) !important;
}

.page-loading-title,
.profile-hero-card h2,
.kyc-verification-page h2,
.security-banner .text-3xl,
.invite-center-page h1 {
  color: var(--lion-text-strong) !important;
}

.profile-section-note,
.security-section-note,
.ticket-section-desc,
.tickets-summary-desc,
.ticket-hero-desc,
.register-note,
.forgot-note,
.invite-note,
.minixpay-section-note {
  font-size: var(--lion-font-size-note) !important;
  line-height: 1.6 !important;
  color: var(--lion-text-muted) !important;
}

.atm-input .el-input__wrapper,
.atm-input .el-select__wrapper,
.ticket-input,
.ticket-textarea {
  border-radius: 12px !important;
  border-color: var(--lion-border-soft) !important;
}

.atm-input .el-input__wrapper,
.atm-input .el-select__wrapper,
.ticket-input {
  min-height: var(--lion-control-height-lg) !important;
}

.atm-input .el-input__wrapper.is-focus,
.atm-input .el-select__wrapper.is-focused,
.atm-input .el-select__wrapper.is-focus,
.ticket-input:focus,
.ticket-textarea:focus {
  border-color: var(--lion-brand-500) !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1) !important;
}

.listing-toolbar,
.tickets-summary,
.ticket-overview-card,
.ticket-section-card,
.invite-panel,
.invite-note {
  padding: 16px !important;
}

.listing-empty-state {
  min-height: 220px !important;
  padding: 28px 20px !important;
  border-radius: var(--lion-radius-lg) !important;
  border: none !important;
  background: transparent !important;
}

.dark .listing-empty-state {
  background: transparent !important;
}

.atm-table thead th {
  font-size: var(--lion-font-size-caption) !important;
  line-height: 1.4 !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  color: var(--lion-text-muted) !important;
}

.atm-table td.el-table__cell {
  padding-top: 14px !important;
  padding-bottom: 14px !important;
}

.minixpay-mono,
.mono-tight,
.tickets-summary-pill-value,
.kyc-status-pill-value {
  font-family: var(--lion-font-mono) !important;
  font-variant-numeric: tabular-nums !important;
}

.minixpay-secondary-action,
.security-inline-action.el-button,
.profile-action-secondary,
.kyc-link-btn.el-button,
.btn-code,
.btn-code.el-button {
  min-height: var(--lion-control-height-md) !important;
  border-radius: 12px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
}

.profile-action-primary,
.minixpay-primary-action,
.btn-register,
.btn-action,
.btn-claim {
  min-height: var(--lion-control-height-lg) !important;
  border-radius: 14px !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  box-shadow: var(--lion-shadow-brand) !important;
}

.ticket-entry-btn.el-button {
  min-height: var(--lion-control-height-md) !important;
  padding: 0 18px !important;
  border: 1px solid transparent !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, var(--lion-brand-500) 0%, var(--lion-brand-600) 100%) !important;
  color: #ffffff !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  box-shadow: var(--lion-shadow-brand) !important;
  transition: transform 160ms ease, filter 160ms ease, box-shadow 160ms ease !important;
}

.ticket-entry-btn.el-button:hover,
.ticket-entry-btn.el-button:focus-visible {
  background: linear-gradient(135deg, var(--lion-brand-500) 0%, var(--lion-brand-700) 100%) !important;
  color: #ffffff !important;
  filter: saturate(1.04);
  transform: translateY(-1px);
}

.ticket-entry-btn.el-button:active {
  transform: translateY(0);
}

.ticket-entry-btn.el-button .el-icon {
  font-size: 16px !important;
}

.dark .el-button.is-text.is-has-bg,
.dark .el-button.el-button--default.is-text.is-has-bg,
.dark .el-button.el-button--warning.is-text.is-has-bg,
.dark .el-button.el-button--primary.is-text.is-has-bg {
  background: rgba(30, 41, 59, 0.82) !important;
  border-color: rgba(71, 85, 105, 0.72) !important;
  color: #cbd5e1 !important;
  box-shadow: none !important;
}

.dark .el-button.is-text.is-has-bg:hover,
.dark .el-button.el-button--default.is-text.is-has-bg:hover,
.dark .el-button.el-button--warning.is-text.is-has-bg:hover,
.dark .el-button.el-button--primary.is-text.is-has-bg:hover,
.dark .el-button.is-text.is-has-bg:focus-visible,
.dark .el-button.el-button--default.is-text.is-has-bg:focus-visible,
.dark .el-button.el-button--warning.is-text.is-has-bg:focus-visible,
.dark .el-button.el-button--primary.is-text.is-has-bg:focus-visible {
  background: rgba(37, 99, 235, 0.2) !important;
  border-color: rgba(96, 165, 250, 0.34) !important;
  color: #bfdbfe !important;
}

.ticket-console-shell {
  width: min(100%, 1320px);
  margin-inline: auto;
}

.ticket-module-switcher {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  width: min(100%, 420px);
  padding: 8px;
  border: 1px solid var(--lion-border-soft);
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(248, 250, 252, 0.92) 100%);
  box-shadow: var(--lion-shadow-card);
}

.dark .ticket-module-switcher {
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.96) 0%, rgba(15, 23, 42, 0.88) 100%);
}

.ticket-module-switcher__item {
  appearance: none;
  width: 100%;
  min-height: 60px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  border: 0;
  border-radius: 16px;
  background: transparent;
  color: var(--lion-text-muted);
  cursor: pointer;
  transition: transform 160ms ease, background 160ms ease, color 160ms ease, box-shadow 160ms ease;
}

.ticket-module-switcher__item:hover {
  background: var(--lion-bg-card-soft);
  color: var(--lion-text-strong);
  transform: translateY(-1px);
}

.dark .ticket-module-switcher__item:hover {
  background: rgba(30, 41, 59, 0.72);
}

.ticket-module-switcher__item:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18);
}

.ticket-module-switcher__item.is-active {
  background: linear-gradient(135deg, var(--lion-brand-500) 0%, var(--lion-brand-600) 100%);
  color: #ffffff;
  box-shadow: var(--lion-shadow-brand);
}

.ticket-module-switcher__item.is-active:hover {
  background: linear-gradient(135deg, var(--lion-brand-500) 0%, var(--lion-brand-700) 100%);
}

.ticket-module-switcher__icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: var(--lion-bg-brand-soft);
  color: var(--lion-brand-600);
}

.dark .ticket-module-switcher__icon {
  background: rgba(30, 64, 175, 0.24);
  color: #93c5fd;
}

.ticket-module-switcher__item.is-active .ticket-module-switcher__icon {
  background: rgba(255, 255, 255, 0.16);
  color: #ffffff;
}

.ticket-module-switcher__label {
  min-width: 0;
  text-align: left;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.ticket-module-switcher__item::after {
  content: '';
  width: 8px;
  height: 8px;
  margin-left: auto;
  border-radius: 999px;
  background: currentColor;
  opacity: 0.18;
}

.ticket-module-switcher__item.is-active::after {
  opacity: 0.88;
}

@media (max-width: 767px) {
  .ticket-module-switcher {
    width: 100%;
  }

  .ticket-module-switcher__item {
    min-height: 54px;
    padding: 10px 12px;
    gap: 10px;
  }

  .ticket-module-switcher__icon {
    width: 36px;
    height: 36px;
    border-radius: 12px;
  }

  .ticket-module-switcher__label {
    font-size: 13px;
  }
}

.status-badge,
.lx-upload-status {
  min-height: 28px;
  padding: 0 12px !important;
  border-radius: 999px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
}

.status-badge.active {
  background: var(--lion-status-success-bg) !important;
  border-color: var(--lion-status-success-border) !important;
  color: var(--lion-status-success-text) !important;
}

.status-badge.inactive {
  background: var(--lion-bg-card-soft) !important;
  border-color: var(--lion-border-soft) !important;
  color: var(--lion-text-muted) !important;
}

.el-tag--success,
.el-tag.el-tag--success {
  background: var(--lion-status-success-bg) !important;
  border-color: var(--lion-status-success-border) !important;
  color: var(--lion-status-success-text) !important;
}

.el-tag--warning,
.el-tag.el-tag--warning {
  background: var(--lion-status-warning-bg) !important;
  border-color: var(--lion-status-warning-border) !important;
  color: var(--lion-status-warning-text) !important;
}

.el-tag--danger,
.el-tag.el-tag--danger {
  background: var(--lion-status-danger-bg) !important;
  border-color: var(--lion-status-danger-border) !important;
  color: var(--lion-status-danger-text) !important;
}

.el-tag--info,
.el-tag.el-tag--info {
  background: var(--lion-status-info-bg) !important;
  border-color: var(--lion-status-info-border) !important;
  color: var(--lion-status-info-text) !important;
}

.security-challenge-card {
  padding: 16px;
  border-radius: 20px;
  border: 1px solid rgba(191, 219, 254, 0.96);
  background: linear-gradient(180deg, rgba(248, 251, 255, 0.98) 0%, rgba(255, 255, 255, 1) 100%);
  box-shadow: 0 14px 30px -28px rgba(37, 99, 235, 0.26);
}

.security-challenge-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 12px;
}

.security-challenge-heading {
  min-width: 0;
}

.security-challenge-refresh {
  width: auto;
  min-width: 112px;
  min-height: 40px !important;
  padding: 0 16px !important;
  border-radius: 999px !important;
  align-self: start;
}

.security-challenge-row {
  margin-top: 12px;
}

.security-challenge-media {
  min-height: 0;
  padding: 5px;
  border-radius: 18px;
  border: 1px solid rgba(191, 219, 254, 0.96);
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95);
  display: flex;
  align-items: center;
  justify-content: center;
}

.security-challenge-image {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
  margin: 0 auto;
}

.security-challenge-divider {
  margin: 12px 0 10px;
}

.security-challenge-field-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.security-challenge-field-meta {
  font-size: 12px;
  font-weight: 700;
  color: var(--lion-brand-600);
}

.security-challenge-card .el-input__wrapper {
  background: #fff !important;
}

@media (max-width: 639px) {
  .security-challenge-field-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .security-challenge-refresh {
    min-width: 96px;
    padding: 0 14px !important;
  }
}

@media (max-width: 767px) {
  body.deposit-account-page,
  body.fiat-currency-top-up-page,
  body.digital-currency-top-up-page,
  body.dashboard-page,
  body.asset-management-page,
  body.user-info-page,
  body.security-settings-page,
  body.withdraw-remit-page,
  body.payment-account-page,
  body.common-payee-page,
  body.exchange-rate-inquiry-page,
  body.real-time-exchange-page,
  body.pending-orders-page,
  body.order-fiat-deposit-page,
  body.order-digital-deposit-page,
  body.order-exchange-page,
  body.record-remit-page,
  body.help-center-page,
  body.invite-center-page,
  body.tickets-page,
  body.new-ticket-page {
    min-height: 100dvh;
    height: auto !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  body.deposit-account-page #app,
  body.fiat-currency-top-up-page #app,
  body.digital-currency-top-up-page #app,
  body.dashboard-page #app,
  body.asset-management-page #app,
  body.user-info-page #app,
  body.security-settings-page #app,
  body.withdraw-remit-page #app,
  body.payment-account-page #app,
  body.common-payee-page #app,
  body.exchange-rate-inquiry-page #app,
  body.real-time-exchange-page #app,
  body.pending-orders-page #app,
  body.order-fiat-deposit-page #app,
  body.order-digital-deposit-page #app,
  body.order-exchange-page #app,
  body.record-remit-page #app,
  body.help-center-page #app,
  body.invite-center-page #app,
  body.tickets-page #app,
  body.new-ticket-page #app {
    min-height: 100dvh;
    height: auto !important;
  }

  body.deposit-account-page main,
  body.fiat-currency-top-up-page main,
  body.digital-currency-top-up-page main,
  body.dashboard-page main,
  body.asset-management-page main,
  body.user-info-page main,
  body.security-settings-page main,
  body.withdraw-remit-page main,
  body.payment-account-page main,
  body.common-payee-page main,
  body.exchange-rate-inquiry-page main,
  body.real-time-exchange-page main,
  body.pending-orders-page main,
  body.order-fiat-deposit-page main,
  body.order-digital-deposit-page main,
  body.order-exchange-page main,
  body.record-remit-page main,
  body.help-center-page main,
  body.invite-center-page main,
  body.tickets-page main,
  body.new-ticket-page main {
    min-height: 100dvh;
    height: auto !important;
    overflow: visible !important;
  }

  body.deposit-account-page main > .flex-1,
  body.fiat-currency-top-up-page main > .flex-1,
  body.digital-currency-top-up-page main > .flex-1,
  body.dashboard-page main > .flex-1,
  body.asset-management-page main > .flex-1,
  body.user-info-page main > .flex-1,
  body.security-settings-page main > .flex-1,
  body.withdraw-remit-page main > .flex-1,
  body.payment-account-page main > .flex-1,
  body.common-payee-page main > .flex-1,
  body.exchange-rate-inquiry-page main > .flex-1,
  body.real-time-exchange-page main > .flex-1,
  body.pending-orders-page main > .flex-1,
  body.order-fiat-deposit-page main > .flex-1,
  body.order-digital-deposit-page main > .flex-1,
  body.order-exchange-page main > .flex-1,
  body.record-remit-page main > .flex-1,
  body.help-center-page main > .flex-1,
  body.invite-center-page main > .flex-1,
  body.tickets-page main > .flex-1,
  body.new-ticket-page main > .flex-1 {
    min-height: auto !important;
    overflow: visible !important;
    -webkit-overflow-scrolling: touch;
    padding: 14px 12px calc(24px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .minixpay-mobile-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
    padding: 0 4px 1px;
  }

  .minixpay-mobile-section-head__title {
    position: relative;
    min-width: 0;
    padding-left: 11px;
    font-size: 16px;
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: -0.025em;
    color: var(--lion-text-strong);
  }

  .minixpay-mobile-section-head__title::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 4px;
    height: 13px;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(59, 130, 246, 0.92) 0%, rgba(147, 197, 253, 0.72) 100%);
    transform: translateY(-50%);
    box-shadow: 0 6px 16px -10px rgba(37, 99, 235, 0.5);
  }

  .dark .minixpay-mobile-section-head__title::before {
    background: linear-gradient(180deg, rgba(96, 165, 250, 0.92) 0%, rgba(147, 197, 253, 0.6) 100%);
    box-shadow: none;
  }

  .minixpay-mobile-section-head__action {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    min-height: 30px;
    padding: 4px 1px 4px 12px;
    font-size: 12px;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--lion-brand-600);
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
  }

  .minixpay-mobile-section-head__action::after {
    content: "";
    position: absolute;
    left: 12px;
    right: 15px;
    bottom: 3px;
    height: 1px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(37, 99, 235, 0.28) 0%, rgba(37, 99, 235, 0.04) 100%);
    transform-origin: left center;
    transition: opacity 160ms ease, transform 160ms ease;
  }

  .minixpay-mobile-section-head__action svg {
    width: 13px;
    height: 13px;
    opacity: 0.76;
    transition: transform 160ms ease, opacity 160ms ease;
  }

  .minixpay-mobile-section-head__action:hover svg,
  .minixpay-mobile-section-head__action:focus-visible svg {
    opacity: 1;
    transform: translateX(1px);
  }

  .minixpay-mobile-section-head__action:hover::after,
  .minixpay-mobile-section-head__action:focus-visible::after {
    opacity: 1;
    transform: scaleX(1.04);
  }

  .dark .minixpay-mobile-section-head__action {
    color: #93c5fd;
  }

  .dark .minixpay-mobile-section-head__action::after {
    background: linear-gradient(90deg, rgba(147, 197, 253, 0.34) 0%, rgba(147, 197, 253, 0.04) 100%);
  }

  .minixpay-mobile-card {
    padding: 15px 16px;
    border-radius: 20px;
    border: 1px solid var(--lion-border-soft);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.985) 0%, rgba(248, 250, 252, 0.96) 100%);
    box-shadow: 0 20px 34px -30px rgba(15, 23, 42, 0.18);
  }

  .dark .minixpay-mobile-card {
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.98) 0%, rgba(15, 23, 42, 0.9) 100%);
    border-color: #1e293b;
    box-shadow: none;
  }

  body.pending-orders-page .listing-toolbar-summary,
  body.order-fiat-deposit-page .listing-toolbar-summary,
  body.order-digital-deposit-page .listing-toolbar-summary,
  body.order-exchange-page .listing-toolbar-summary,
  body.record-remit-page .listing-toolbar-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
  }

  body.pending-orders-page .listing-toolbar-summary .listing-page-chip,
  body.order-fiat-deposit-page .listing-toolbar-summary .listing-page-chip,
  body.order-digital-deposit-page .listing-toolbar-summary .listing-page-chip,
  body.order-exchange-page .listing-toolbar-summary .listing-page-chip,
  body.record-remit-page .listing-toolbar-summary .listing-page-chip {
    min-height: 28px;
    padding: 0 10px;
    font-size: 11px;
    line-height: 1;
    border-radius: 999px;
  }

  .minixpay-mobile-list-card {
    padding: 14px 15px;
    border-radius: 20px;
    border: 1px solid var(--lion-border-soft);
    background: linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(248,250,252,0.96) 100%);
    box-shadow: 0 20px 34px -30px rgba(15, 23, 42, 0.18);
  }

  .dark .minixpay-mobile-list-card {
    border-color: #1E293B;
    background: linear-gradient(180deg, rgba(15,23,42,0.96) 0%, rgba(15,23,42,0.88) 100%);
    box-shadow: none;
  }

  .minixpay-mobile-list-card__title {
    font-size: 14px;
    line-height: 1.4;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--lion-text-strong);
    word-break: break-word;
  }

  .minixpay-mobile-list-card__meta,
  .minixpay-mobile-list-card__subtle {
    font-size: 12px;
    line-height: 1.45;
    color: var(--lion-text-muted);
  }

  .minixpay-mobile-list-card__amount {
    font-size: 15px;
    line-height: 1.25;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--lion-text-strong);
    font-family: var(--lion-font-mono);
    font-variant-numeric: tabular-nums;
  }

  .minixpay-mobile-list-card__split {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid #F1F5F9;
  }

  .dark .minixpay-mobile-list-card__split {
    border-top-color: #1E293B;
  }

  .minixpay-mobile-list-card__actions {
    margin-top: 10px;
    display: flex;
    justify-content: stretch;
  }

  .minixpay-mobile-list-card__actions .btn,
  .minixpay-mobile-list-card__actions .el-button {
    width: 100%;
    min-height: 40px !important;
    border-radius: 12px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
  }

  .custom-drawer.el-drawer,
  .custom-drawer .el-drawer,
  .detail-drawer.el-drawer,
  .detail-drawer .el-drawer {
    width: 100vw !important;
    max-width: 100vw !important;
  }

  .drawer-header,
  .drawer-header-custom {
    padding: 16px 16px 14px !important;
  }

  .drawer-content-shell,
  .drawer-content-inner,
  .drawer-body-shell,
  .drawer-content-scroll,
  .pending-orders-drawer-body,
  .order-exchange-drawer-body {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .drawer-footer,
  .el-dialog__footer {
    display: flex;
    flex-direction: column-reverse;
    align-items: stretch;
    gap: 10px;
    padding-left: 16px !important;
    padding-right: 16px !important;
    padding-bottom: calc(16px + env(safe-area-inset-bottom)) !important;
  }

  .drawer-footer .el-button,
  .el-dialog__footer .el-button {
    width: 100%;
    min-height: 44px !important;
    margin-left: 0 !important;
    border-radius: 14px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
  }

  .drawer-footer .el-button + .el-button,
  .el-dialog__footer .el-button + .el-button {
    margin-left: 0 !important;
  }

  .document-panel__head .el-tag,
  .drawer-title-row .el-tag {
    align-self: flex-start;
    width: auto !important;
    max-width: max-content;
  }

  .el-dialog {
    width: min(calc(100vw - 24px), 560px) !important;
    margin: 12px auto !important;
  }

  .el-dialog__body {
    padding: 16px !important;
  }

  .transaction-drawer-header {
    display: grid !important;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 12px;
    padding: calc(12px + env(safe-area-inset-top, 0px)) 16px 12px !important;
  }

  .transaction-drawer-title {
    font-size: 18px !important;
    line-height: 1.2 !important;
    text-align: center;
    min-width: 0;
  }

  .transaction-drawer-back {
    min-width: 0;
    min-height: 40px;
    padding: 0 12px;
    border-radius: 12px;
    border: 1px solid var(--lion-border-soft);
    background: rgba(255, 255, 255, 0.96);
    color: var(--lion-text-body);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
  }

  .dark .transaction-drawer-back {
    background: rgba(15, 23, 42, 0.96);
    border-color: #334155;
    color: #e2e8f0;
  }

  .transaction-drawer-close {
    width: 40px !important;
    height: 40px !important;
    border-radius: 12px !important;
  }

  .transaction-drawer-body {
    padding: 18px 16px calc(24px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .transaction-drawer-actions {
    display: flex;
    flex-direction: column-reverse;
    align-items: stretch;
    gap: 10px;
    margin-top: 16px;
  }

  .transaction-drawer-actions .btn,
  .transaction-drawer-actions .el-button {
    width: 100%;
    min-height: 44px !important;
    margin-left: 0 !important;
    border-radius: 14px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
  }

  .transaction-supplement-panel {
    margin-top: 20px;
    padding: 16px !important;
    border-radius: 18px !important;
  }

  .transaction-supplement-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px !important;
    font-size: 14px !important;
    line-height: 1.45 !important;
    font-weight: 800 !important;
  }

  .transaction-supplement-note {
    margin-bottom: 14px !important;
    padding: 12px 14px !important;
    border-radius: 14px !important;
  }

  .transaction-supplement-label {
    display: block;
    margin-bottom: 8px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
  }

  .transaction-supplement-dropzone {
    padding: 18px 14px !important;
    border-radius: 16px !important;
  }

  .transaction-supplement-dropzone-copy {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-align: center;
  }

  .transaction-supplement-dropzone-icon {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    font-size: 24px;
  }

  .transaction-supplement-dropzone-text {
    font-size: 12px;
    line-height: 1.5;
  }

  .transaction-supplement-dropzone-trigger {
    min-height: 40px;
    padding: 0 16px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 700;
  }

  .transaction-supplement-file {
    margin-top: 12px !important;
    padding: 12px 14px !important;
    border-radius: 14px !important;
  }

  .transaction-supplement-file-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
  }

  .transaction-supplement-file-meta {
    min-width: 0;
    flex: 1 1 auto;
  }

  .transaction-supplement-file-actions {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  .transaction-supplement-progress {
    margin-top: 8px;
  }
}

@media (max-width: 480px) {
  .transaction-supplement-file-head {
    flex-direction: column;
  }

  .transaction-supplement-file-actions {
    width: 100%;
    justify-content: space-between;
  }
}