: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,
.lionx-section-title,
.lionx-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,
.lionx-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;
}

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

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

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