: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;
}

.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;
}