/*
 * ELITE RMB — Unified Design System
 * A refined, elegant financial services aesthetic
 * Ghana → China currency exchange platform
 * Version: 5.0
 */

/* ═══════════════════════════════════════════════
   1. DESIGN TOKENS
   ═══════════════════════════════════════════════ */

:root {
  /* Shared neutrals */
  --swift-white: #FFFFFF;
  --swift-gray-50: #FAFBFC;
  --swift-gray-100: #F3F4F6;
  --swift-gray-200: #E5E7EB;
  --swift-gray-300: #D1D5DB;
  --swift-gray-400: #9CA3AF;
  --swift-gray-500: #6B7280;
  --swift-gray-600: #4B5563;
  --swift-gray-700: #374151;
  --swift-gray-800: #1F2937;
  --swift-gray-900: #111827;

  /* Typography */
  --swift-font-body: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --swift-font-heading: 'Plus Jakarta Sans', 'Inter', 'Segoe UI', system-ui, sans-serif;

  /* Font sizes */
  --swift-text-xs: 0.75rem;
  --swift-text-sm: 0.875rem;
  --swift-text-base: 1rem;
  --swift-text-lg: 1.125rem;
  --swift-text-xl: 1.25rem;
  --swift-text-2xl: 1.5rem;
  --swift-text-3xl: 1.875rem;
  --swift-text-4xl: 2.25rem;

  /* Spacing */
  --swift-space-1: 0.25rem;
  --swift-space-2: 0.5rem;
  --swift-space-3: 0.75rem;
  --swift-space-4: 1rem;
  --swift-space-5: 1.25rem;
  --swift-space-6: 1.5rem;
  --swift-space-8: 2rem;
  --swift-space-10: 2.5rem;
  --swift-space-12: 3rem;
  --swift-space-16: 4rem;

  /* Border radius */
  --swift-radius-sm: 4px;
  --swift-radius-md: 6px;
  --swift-radius-lg: 8px;
  --swift-radius-xl: 12px;
  --swift-radius-2xl: 16px;

  /* Shadows */
  --swift-shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.04);
  --swift-shadow-md: 0 2px 4px rgba(16, 24, 40, 0.06);
  --swift-shadow-lg: 0 4px 12px rgba(16, 24, 40, 0.08);
  --swift-shadow-xl: 0 8px 24px rgba(16, 24, 40, 0.1);

  /* Container */
  --swift-container: 1200px;
}

/* ═══════════════════════════════════════════════
   LANDING PAGE THEME — Blue / White / Green
   ═══════════════════════════════════════════════ */

.page-landing {
  --swift-primary: #1A2A5E;
  --swift-primary-hover: #2D3F7A;
  --swift-primary-light: #3D5599;
  --swift-primary-soft: #F1F4FA;
  --swift-accent: #20B96B;
  --swift-accent-hover: #179352;
  --swift-accent-soft: #EAF9F0;
  --swift-green: #20B96B;
  --swift-green-dark: #179352;
  --swift-green-soft: #EAF9F0;
  --swift-success: #20B96B;
  --swift-success-soft: #EAF9F0;
  --swift-warning: #F59E0B;
  --swift-warning-soft: #FEF6E7;
  --swift-error: #D92D20;
  --swift-error-soft: #FEF3F2;
  --swift-info: #1A2A5E;
  --swift-info-soft: #F1F4FA;
}

/* ═══════════════════════════════════════════════
   CLIENT PAGES THEME — Blue / White / Green
   ═══════════════════════════════════════════════ */

.page-client {
  --swift-primary: #1A2A5E;
  --swift-primary-hover: #2D3F7A;
  --swift-primary-light: #3D5599;
  --swift-primary-soft: #F1F4FA;
  --swift-accent: #20B96B;
  --swift-accent-hover: #179352;
  --swift-accent-soft: #EAF9F0;
  --swift-green: #20B96B;
  --swift-green-dark: #179352;
  --swift-green-soft: #EAF9F0;
  --swift-success: #20B96B;
  --swift-success-soft: #EAF9F0;
  --swift-warning: #F59E0B;
  --swift-warning-soft: #FEF6E7;
  --swift-error: #D92D20;
  --swift-error-soft: #FEF3F2;
  --swift-info: #1A2A5E;
  --swift-info-soft: #F1F4FA;
}

/* ═══════════════════════════════════════════════
   ADMIN PAGES THEME — Blue / White / Green
   ═══════════════════════════════════════════════ */

.page-admin {
  --swift-primary: #1A2A5E;
  --swift-primary-hover: #2D3F7A;
  --swift-primary-light: #3D5599;
  --swift-primary-soft: #F1F4FA;
  --swift-accent: #20B96B;
  --swift-accent-hover: #179352;
  --swift-accent-soft: #EAF9F0;
  --swift-green: #20B96B;
  --swift-green-dark: #179352;
  --swift-green-soft: #EAF9F0;
  --swift-success: #20B96B;
  --swift-success-soft: #EAF9F0;
  --swift-warning: #F59E0B;
  --swift-warning-soft: #FEF6E7;
  --swift-error: #D92D20;
  --swift-error-soft: #FEF3F2;
  --swift-info: #1A2A5E;
  --swift-info-soft: #F1F4FA;
}

/* ═══════════════════════════════════════════════
   2. BASE STYLES
   ═══════════════════════════════════════════════ */

* {
  box-sizing: border-box;
}

body {
  font-family: var(--swift-font-body);
  font-size: var(--swift-text-base);
  line-height: 1.6;
  color: var(--swift-gray-800);
  background-color: var(--swift-gray-50);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--swift-font-heading);
  font-weight: 700;
  line-height: 1.2;
  color: var(--swift-gray-900);
  margin-top: 0;
  margin-bottom: var(--swift-space-4);
}

h1 { font-size: var(--swift-text-3xl); }
h2 { font-size: var(--swift-text-2xl); }
h3 { font-size: var(--swift-text-xl); }
h4 { font-size: var(--swift-text-lg); }

p {
  margin-top: 0;
  margin-bottom: var(--swift-space-4);
  color: var(--swift-gray-600);
}

a {
  color: var(--swift-accent);
  text-decoration: none;
  transition: color 0.15s ease;
}

a:hover {
  color: var(--swift-accent-hover);
}

/* ═══════════════════════════════════════════════
   3. LAYOUT UTILITIES
   ═══════════════════════════════════════════════ */

.swift-container {
  max-width: var(--swift-container);
  margin: 0 auto;
  padding: 0 var(--swift-space-4);
}

@media (min-width: 768px) {
  .swift-container {
    padding: 0 var(--swift-space-6);
  }
}

/* ═══════════════════════════════════════════════
   4. NAVIGATION
   ═══════════════════════════════════════════════ */

.swift-nav {
  background: var(--swift-white);
  border-bottom: 1px solid var(--swift-gray-200);
  position: sticky;
  top: 0;
  z-index: 100;
  backdrop-filter: blur(8px);
  background-color: rgba(255, 255, 255, 0.95);
}

.swift-nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--swift-space-3) 0;
  max-width: var(--swift-container);
  margin: 0 auto;
  padding-left: var(--swift-space-4);
  padding-right: var(--swift-space-4);
}

@media (min-width: 768px) {
  .swift-nav-inner {
    padding-left: var(--swift-space-6);
    padding-right: var(--swift-space-6);
  }
}

.swift-nav-brand {
  display: flex;
  align-items: center;
  gap: var(--swift-space-2);
  font-family: var(--swift-font-heading);
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: -0.02em;
  color: var(--swift-gray-900);
  text-decoration: none;
  transition: color 0.15s ease;
}

.swift-nav-brand:hover {
  color: var(--swift-gray-900);
}

.swift-nav-brand-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--swift-radius-md);
  background: var(--swift-white);
  color: var(--swift-gray-700);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  flex-shrink: 0;
  border: 1px solid var(--swift-gray-200);
  padding: 2px;
  overflow: hidden;
}

.page-landing .swift-nav-brand-icon,
.page-client .swift-nav-brand-icon,
.page-admin .swift-nav-brand-icon {
  background: #ffffff !important;
  border: 1px solid #E5E7EB !important;
  box-shadow: 0 1px 2px rgba(17, 24, 39, 0.06);
  padding: 3px;
}

/* New logo sits on a white background everywhere (light + dark theme) */
.swift-nav-brand-icon img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  display: block !important;
}

.swift-nav-links {
  display: none;
  align-items: center;
  gap: var(--swift-space-6);
}

.swift-nav-link {
  color: var(--swift-gray-600);
  font-size: var(--swift-text-sm);
  font-weight: 500;
  text-decoration: none;
  padding: var(--swift-space-2) 0;
  transition: color 0.15s ease;
  position: relative;
}

.swift-nav-link:hover {
  color: var(--swift-primary);
}

.swift-nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--swift-primary);
  transition: width 0.2s ease;
}

.swift-nav-link:hover::after {
  width: 100%;
}

.swift-nav-actions {
  display: none;
  align-items: center;
  gap: var(--swift-space-3);
}

.swift-nav-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--swift-radius-md);
  border: 1px solid var(--swift-gray-200);
  background: var(--swift-white);
  color: var(--swift-gray-600);
  cursor: pointer;
  font-size: 1rem;
  transition: all 0.15s ease;
}

.swift-nav-toggle:hover {
  background: var(--swift-gray-50);
  border-color: var(--swift-gray-300);
  color: var(--swift-gray-900);
}

.swift-mobile-menu {
  display: none;
  flex-direction: column;
  padding: var(--swift-space-3) var(--swift-space-4);
  border-top: 1px solid var(--swift-gray-200);
  background: var(--swift-white);
}

.swift-mobile-menu.open {
  display: flex;
}

.swift-mobile-menu a {
  display: block;
  padding: var(--swift-space-3);
  color: var(--swift-gray-600);
  font-size: var(--swift-text-sm);
  font-weight: 500;
  text-decoration: none;
  border-radius: var(--swift-radius-md);
  transition: all 0.15s ease;
}

.swift-mobile-menu a:hover {
  background: var(--swift-gray-50);
  color: var(--swift-primary);
}

@media (min-width: 768px) {
  .swift-nav-links,
  .swift-nav-actions {
    display: flex;
  }
  .swift-nav-toggle {
    display: none;
  }
}

/* ═══════════════════════════════════════════════
   5. BUTTONS
   ═══════════════════════════════════════════════ */

.swift-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--swift-space-2);
  font-family: var(--swift-font-body);
  font-size: var(--swift-text-sm);
  font-weight: 600;
  line-height: 1;
  padding: var(--swift-space-2) var(--swift-space-4);
  border-radius: var(--swift-radius-lg);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
  min-height: 40px;
  white-space: nowrap;
}

.swift-btn-primary {
  background: var(--swift-primary);
  border-color: var(--swift-primary);
  color: var(--swift-white);
}

.swift-btn-primary:hover {
  background: var(--swift-primary-hover);
  border-color: var(--swift-primary-hover);
  color: var(--swift-white);
  transform: translateY(-1px);
  box-shadow: var(--swift-shadow-md);
}

.swift-btn-secondary {
  background: var(--swift-white);
  border-color: var(--swift-gray-300);
  color: var(--swift-gray-700);
}

.swift-btn-secondary:hover {
  background: var(--swift-gray-50);
  border-color: var(--swift-gray-400);
  color: var(--swift-gray-900);
}

.swift-btn-danger {
  background: var(--swift-error);
  border-color: var(--swift-error);
  color: var(--swift-white);
}

.swift-btn-danger:hover {
  background: #B91C1C;
  border-color: #B91C1C;
  color: var(--swift-white);
}

.swift-btn-ghost {
  background: transparent;
  border-color: transparent;
  color: var(--swift-gray-600);
}

.swift-btn-ghost:hover {
  background: var(--swift-gray-100);
  color: var(--swift-gray-900);
}

.swift-btn-lg {
  padding: var(--swift-space-3) var(--swift-space-6);
  min-height: 48px;
  font-size: var(--swift-text-base);
}

.swift-btn-sm {
  padding: var(--swift-space-1) var(--swift-space-3);
  min-height: 32px;
  font-size: var(--swift-text-xs);
}

/* Orange CTA for key actions */
.swift-btn-cta {
  background: var(--swift-orange);
  border-color: var(--swift-orange);
  color: var(--swift-gray-900);
  font-weight: 700;
}

.swift-btn-cta:hover {
  background: var(--swift-orange-dark);
  border-color: var(--swift-orange-dark);
  color: var(--swift-gray-900);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(249, 115, 22, 0.3);
}

/* ═══════════════════════════════════════════════
   6. CARDS & PANELS
   ═══════════════════════════════════════════════ */

.swift-card {
  background: var(--swift-white);
  border: 1px solid var(--swift-gray-200);
  border-radius: var(--swift-radius-xl);
  padding: var(--swift-space-6);
  box-shadow: var(--swift-shadow-sm);
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.swift-card:hover {
  box-shadow: var(--swift-shadow-md);
  border-color: var(--swift-gray-300);
}

.swift-card-header {
  margin-bottom: var(--swift-space-6);
  padding-bottom: var(--swift-space-4);
  border-bottom: 1px solid var(--swift-gray-200);
}

.swift-card-title {
  font-size: var(--swift-text-lg);
  font-weight: 700;
  color: var(--swift-gray-900);
  margin: 0;
}

.swift-card-body {
  color: var(--swift-gray-600);
}

/* ═══════════════════════════════════════════════
   7. FORMS
   ═══════════════════════════════════════════════ */

.swift-form-group {
  margin-bottom: var(--swift-space-5);
}

.swift-label {
  display: block;
  font-size: var(--swift-text-sm);
  font-weight: 600;
  color: var(--swift-gray-700);
  margin-bottom: var(--swift-space-2);
}

.swift-input,
.swift-select,
.swift-textarea {
  display: block;
  width: 100%;
  padding: var(--swift-space-3) var(--swift-space-4);
  font-family: var(--swift-font-body);
  font-size: var(--swift-text-base);
  color: var(--swift-gray-900);
  background: var(--swift-white);
  border: 1px solid var(--swift-gray-300);
  border-radius: var(--swift-radius-lg);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  min-height: 44px;
}

.swift-input:focus,
.swift-select:focus,
.swift-textarea:focus {
  outline: none;
  border-color: var(--swift-primary);
  box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.1);
}

.swift-input::placeholder,
.swift-textarea::placeholder {
  color: var(--swift-gray-400);
}

.swift-input:disabled,
.swift-select:disabled,
.swift-textarea:disabled {
  background: var(--swift-gray-100);
  color: var(--swift-gray-500);
  cursor: not-allowed;
}

.swift-textarea {
  min-height: 120px;
  resize: vertical;
}

/* ═══════════════════════════════════════════════
   8. TABLES
   ═══════════════════════════════════════════════ */

.swift-table-wrapper {
  overflow-x: auto;
  border: 1px solid var(--swift-gray-200);
  border-radius: var(--swift-radius-xl);
  box-shadow: var(--swift-shadow-sm);
}

.swift-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--swift-text-sm);
}

.swift-table thead {
  background: var(--swift-gray-50);
}

.swift-table thead th {
  padding: var(--swift-space-3) var(--swift-space-4);
  text-align: left;
  font-weight: 600;
  color: var(--swift-gray-600);
  font-size: var(--swift-text-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid var(--swift-gray-200);
}

.swift-table tbody td {
  padding: var(--swift-space-3) var(--swift-space-4);
  border-bottom: 1px solid var(--swift-gray-200);
  color: var(--swift-gray-700);
}

.swift-table tbody tr:last-child td {
  border-bottom: none;
}

.swift-table tbody tr:hover {
  background: var(--swift-gray-50);
}

/* Table status badges */
.swift-badge {
  display: inline-flex;
  align-items: center;
  padding: var(--swift-space-1) var(--swift-space-3);
  font-size: var(--swift-text-xs);
  font-weight: 600;
  border-radius: 9999px;
  line-height: 1.5;
}

.swift-badge-success {
  background: var(--swift-success-soft);
  color: var(--swift-success);
}

.swift-badge-warning {
  background: var(--swift-warning-soft);
  color: var(--swift-warning);
}

.swift-badge-error {
  background: var(--swift-error-soft);
  color: var(--swift-error);
}

.swift-badge-info {
  background: var(--swift-info-soft);
  color: var(--swift-info);
}

/* ═══════════════════════════════════════════════
   9. ALERTS
   ═══════════════════════════════════════════════ */

.swift-alert {
  padding: var(--swift-space-4);
  border-radius: var(--swift-radius-lg);
  border: 1px solid;
  margin-bottom: var(--swift-space-4);
  font-size: var(--swift-text-sm);
  font-weight: 500;
}

.swift-alert-success {
  background: var(--swift-success-soft);
  border-color: #A7F3D0;
  color: var(--swift-success);
}

.swift-alert-error {
  background: var(--swift-error-soft);
  border-color: #FECACA;
  color: var(--swift-error);
}

.swift-alert-warning {
  background: var(--swift-warning-soft);
  border-color: #FDE68A;
  color: var(--swift-warning);
}

.swift-alert-info {
  background: var(--swift-info-soft);
  border-color: #BAE6FD;
  color: var(--swift-info);
}

/* ═══════════════════════════════════════════════
   10. DARK MODE
   ═══════════════════════════════════════════════ */

html[data-theme="dark"] {
  --swift-white: #172335;
  --swift-gray-50: #0d1624;
  --swift-gray-100: #142033;
  --swift-gray-200: #26364a;
  --swift-gray-300: #3a4d63;
  --swift-gray-400: #9eafc2;
  --swift-gray-500: #b2c0cf;
  --swift-gray-600: #c3cfdb;
  --swift-gray-700: #d4dee8;
  --swift-gray-800: #e7edf3;
  --swift-gray-900: #f8fafc;
}

html[data-theme="dark"] body {
  background: var(--swift-gray-50);
  color: var(--swift-gray-800);
}

html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5,
html[data-theme="dark"] h6 {
  color: var(--swift-gray-900);
}

html[data-theme="dark"] .swift-nav {
  background: rgba(23, 35, 53, 0.95);
  border-color: var(--swift-gray-200);
  backdrop-filter: blur(8px);
}

html[data-theme="dark"] .swift-nav-brand {
  color: var(--swift-gray-900);
}

html[data-theme="dark"] .swift-nav-link {
  color: var(--swift-gray-400);
}

html[data-theme="dark"] .swift-nav-link:hover {
  color: var(--swift-gray-200);
}

html[data-theme="dark"] .swift-mobile-menu {
  background: var(--swift-gray-100);
  border-color: var(--swift-gray-200);
}

html[data-theme="dark"] .swift-mobile-menu a {
  color: var(--swift-gray-400);
}

html[data-theme="dark"] .swift-mobile-menu a:hover {
  background: var(--swift-gray-200);
  color: var(--swift-gray-100);
}

html[data-theme="dark"] .swift-card {
  background: var(--swift-white);
  border-color: var(--swift-gray-200);
}

html[data-theme="dark"] .swift-table-wrapper {
  background: var(--swift-white);
  border-color: var(--swift-gray-200);
}

html[data-theme="dark"] .swift-table thead {
  background: var(--swift-gray-100);
}

html[data-theme="dark"] .swift-table thead th {
  color: var(--swift-gray-500);
  border-color: var(--swift-gray-200);
}

html[data-theme="dark"] .swift-table tbody td {
  color: var(--swift-gray-700);
  border-color: var(--swift-gray-200);
}

html[data-theme="dark"] .swift-table tbody tr:hover {
  background: var(--swift-gray-100);
}

html[data-theme="dark"] .swift-input,
html[data-theme="dark"] .swift-select,
html[data-theme="dark"] .swift-textarea {
  background: var(--swift-gray-100);
  border-color: var(--swift-gray-300);
  color: var(--swift-gray-900);
}

html[data-theme="dark"] .swift-input:focus,
html[data-theme="dark"] .swift-select:focus,
html[data-theme="dark"] .swift-textarea:focus {
  border-color: var(--swift-primary);
  box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.2);
}

html[data-theme="dark"] .swift-nav-toggle {
  background: var(--swift-gray-100);
  border-color: var(--swift-gray-300);
  color: var(--swift-gray-700);
}

/* ═══════════════════════════════════════════════
   11. THEME TOGGLE
   ═══════════════════════════════════════════════ */

.swift-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--swift-space-2);
  min-height: 40px;
  padding: var(--swift-space-2) var(--swift-space-3);
  border: 1px solid var(--swift-gray-300);
  border-radius: var(--swift-radius-lg);
  background: var(--swift-white);
  color: var(--swift-gray-700);
  font-family: var(--swift-font-body);
  font-size: var(--swift-text-sm);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.swift-theme-toggle:hover {
  background: var(--swift-gray-50);
  border-color: var(--swift-gray-400);
  color: var(--swift-gray-900);
  transform: translateY(-1px);
}

.swift-theme-toggle i {
  color: var(--swift-orange);
  font-size: 0.875rem;
}

/* ═══════════════════════════════════════════════
   12. FOOTER
   ═══════════════════════════════════════════════ */

.swift-footer {
  background: var(--elite-navy);
  color: var(--swift-gray-400);
  padding: var(--swift-space-12) 0 var(--swift-space-6);
  margin-top: var(--swift-space-16);
}

.swift-footer-inner {
  max-width: var(--swift-container);
  margin: 0 auto;
  padding: 0 var(--swift-space-4);
}

@media (min-width: 768px) {
  .swift-footer-inner {
    padding: 0 var(--swift-space-6);
  }
}

.swift-footer-brand {
  font-family: var(--swift-font-heading);
  font-size: var(--swift-text-xl);
  font-weight: 700;
  color: var(--swift-white);
  margin-bottom: var(--swift-space-3);
}

.swift-footer p,
.swift-footer a {
  color: var(--swift-gray-400);
  font-size: var(--swift-text-sm);
}

.swift-footer a:hover {
  color: var(--swift-white);
}

.page-client > footer {
  background: var(--elite-navy) !important;
  color: var(--swift-gray-400) !important;
  margin-top: var(--swift-space-16);
}

.page-client > footer .swift-container {
  max-width: var(--swift-container);
  margin: 0 auto;
  padding: 0 var(--swift-space-4);
}

.page-client > footer a {
  color: var(--swift-gray-400) !important;
  transition: color 0.15s ease;
}

.page-client > footer a:hover {
  color: var(--swift-white) !important;
}

.page-client > footer > .swift-container > div:first-child {
  color: var(--swift-white) !important;
}

.page-client > footer > .swift-container > div:last-child,
.page-client > footer > .swift-container > div:last-child span {
  color: var(--swift-gray-400) !important;
}

@media (min-width: 768px) {
  .page-client > footer .swift-container {
    padding: 0 var(--swift-space-6);
  }
}

.swift-footer-bottom {
  border-top: 1px solid var(--swift-gray-800);
  padding-top: var(--swift-space-6);
  margin-top: var(--swift-space-8);
  display: flex;
  flex-direction: column;
  gap: var(--swift-space-4);
  align-items: center;
  text-align: center;
}

@media (min-width: 768px) {
  .swift-footer-bottom {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }
}

/* ═══════════════════════════════════════════════
   13. ANIMATIONS
   ═══════════════════════════════════════════════ */

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.swift-animate-fade-in {
  animation: fadeIn 0.4s ease-out;
}

/* ═══════════════════════════════════════════════
   14. LEGACY COMPATIBILITY
   ═══════════════════════════════════════════════ */

/* Preserve old component classes for backward compatibility */
.swift-panel {
  background: var(--swift-white);
  border: 1px solid var(--swift-gray-200);
  border-radius: var(--swift-radius-xl);
  padding: var(--swift-space-6);
  box-shadow: var(--swift-shadow-sm);
}

.swift-section {
  padding: var(--swift-space-12) 0;
}

.swift-section-gray {
  background: var(--swift-gray-50);
}

@media (max-width: 767px) {
  .swift-section {
    padding: var(--swift-space-8) 0;
  }
}

/* Ensure buttons have minimum touch target */
@media (max-width: 767px) {
  button[type="submit"],
  .swift-btn {
    min-height: 44px;
  }
}

/* Mobile navigation and layout safeguards. Keep the menu in the document flow
   so opening it never hides the page behind a full-height drawer. */
.swift-nav {
  position: sticky;
  z-index: 1000;
}

.swift-mobile-menu {
  max-height: min(70vh, 32rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.swift-mobile-menu.open {
  display: flex;
}

.swift-mobile-menu.hidden {
  display: none !important;
}

.swift-mobile-menu .swift-theme-toggle {
  min-height: 44px;
  justify-content: flex-start;
  margin: .25rem 0;
}

.swift-announcement {
  position: sticky;
  top: 0;
  z-index: 1000;
  overflow: hidden;
  background: #071d35;
  border-bottom: 2px solid #f59e0b;
  color: #ffffff;
  box-shadow: 0 3px 12px rgba(7, 29, 53, 0.24);
}

.swift-announcement-track {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) 28px;
  align-items: center;
  gap: .35rem;
  min-height: 38px;
  max-width: var(--swift-container);
  margin: 0 auto;
  padding: .35rem .75rem;
  overflow: hidden;
}

.swift-announcement-marquee {
  display: flex;
  align-items: center;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
}

.swift-announcement-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  font-size: .66rem;
  line-height: 1;
  border-radius: 50%;
  background: rgba(255,255,255,0.12);
  color: #ffffff;
}

.swift-announcement-label i {
  font-size: .66rem;
}

.swift-announcement-text {
  display: inline-block;
  flex: 0 0 auto;
  min-width: max-content;
  white-space: nowrap;
  animation: swift-announcement-scroll 240s linear infinite;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .01em;
  color: #ffffff;
  opacity: 1;
}

.swift-announcement-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid rgba(255, 255, 255, .45);
  border-radius: 999px;
  background: transparent;
  color: #ffffff;
  cursor: pointer;
}

.swift-announcement-close:hover {
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.7);
}

@keyframes swift-announcement-scroll {
  0% {
    opacity: 1;
    transform: translateX(100%);
  }
  100% {
    opacity: 1;
    transform: translateX(-120%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .swift-announcement-text {
    animation: none;
    min-width: 0;
    overflow: visible;
    text-overflow: clip;
  }
}

@media (max-width: 640px) {
  .swift-announcement-label {
    font-size: .62rem;
  }

  .swift-announcement-text {
    font-size: .76rem;
  }
}

html[data-theme="dark"] .swift-announcement {
  background: #071d35;
  border-color: #f59e0b;
  color: #ffffff;
}

@media (max-width: 767px) {
  .page-client main,
  .page-client .container,
  .page-client .swift-container {
    width: 100%;
    max-width: 100%;
  }

  .page-client .swift-nav-inner {
    min-height: 56px;
  }

  .page-client .swift-mobile-menu {
    border-top-color: rgba(148, 163, 184, .28);
    box-shadow: 0 12px 24px rgba(15, 23, 42, .18);
  }

  .page-client .swift-mobile-menu a,
  .page-client .swift-mobile-menu button {
    width: 100%;
    min-height: 46px;
  }

  .page-client .grid,
  .page-client .flex {
    min-width: 0;
  }

  .page-client h1 {
    font-size: clamp(1.45rem, 7vw, 2rem);
    overflow-wrap: anywhere;
  }

  .page-client h2 {
    font-size: clamp(1.2rem, 5.5vw, 1.5rem);
    overflow-wrap: anywhere;
  }

  .page-client .swift-btn,
  .page-client button,
  .page-client input,
  .page-client select,
  .page-client textarea {
    max-width: 100%;
  }

  .page-client .swift-btn {
    white-space: normal;
    text-align: center;
  }

  .page-client .swift-table-wrapper {
    border-radius: 10px;
  }
}

/* Responsive foundations shared by client and admin pages. */
html, body {
  max-width: 100%;
  overflow-x: hidden;
  overflow-x: clip;
}

img, svg, video, canvas {
  max-width: 100%;
}

.swift-table-wrapper,
.page-client .overflow-x-auto,
.page-admin .overflow-x-auto {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.swift-table-wrapper table,
.page-client .overflow-x-auto table,
.page-admin .overflow-x-auto table {
  min-width: 640px;
}

.page-client .swift-nav-inner {
  gap: .75rem;
}

.page-client .min-h-screen {
  width: 100%;
  max-width: 100%;
  margin-inline: auto;
}

.page-client .min-h-screen > .swift-card {
  width: 100%;
  max-width: 28rem;
  margin-inline: auto;
}

.page-client .swift-nav-brand {
  min-width: 0;
  white-space: nowrap;
}

.page-client .swift-nav-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
}

.page-client .swift-nav-actions .swift-theme-toggle span {
  white-space: nowrap;
}

.page-client .dashboard-calculator,
.page-client .swift-card,
.page-client .dashboard-modern-card,
.page-admin .admin-content > * {
  min-width: 0;
}

.page-client input,
.page-client select,
.page-client textarea,
.page-admin input,
.page-admin select,
.page-admin textarea {
  max-width: 100%;
  font-size: 16px;
}

@media (max-width: 767px) {
  .page-client .swift-nav-inner {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .page-client .swift-nav-brand {
    font-size: 1.05rem;
  }

  .page-client .swift-nav-brand-icon {
    width: 32px;
    height: 32px;
    background: var(--swift-white);
    border-color: var(--swift-gray-200);
  }

  .page-client .swift-nav-actions {
    display: none;
  }

  .page-client .swift-hero {
    padding: 2.75rem 0;
  }

  .page-client .swift-hero h1 {
    font-size: clamp(1.7rem, 8vw, 2.25rem);
  }

  .page-client .swift-hero-trust {
    align-items: flex-start;
    font-size: .8rem;
  }

  .page-client .swift-converter,
  .page-client .hero-rate-card {
    padding: 1rem;
  }

  .page-client .swift-converter-rate,
  .page-client .rate-pair {
    gap: .75rem;
    flex-wrap: wrap;
  }

  .page-client .converter-actions,
  .page-client .converter-actions .swift-btn,
  .page-client #create-transaction-form,
  .page-client #create-transaction-form button {
    width: 100%;
  }

  .page-client .converter-actions {
    flex-direction: column;
  }

  .page-client .transaction-visual-summary {
    grid-template-columns: 1fr !important;
  }

  .page-client .flex.justify-between.items-center {
    gap: .75rem;
    flex-wrap: wrap;
  }

  .page-client .flex.justify-between.relative {
    flex-direction: column;
    align-items: stretch;
  }

  .page-client .flex.justify-between.relative > *,
  .page-client .flex.justify-between.relative button,
  .page-client .flex.justify-between.relative a {
    width: 100%;
    margin-left: 0 !important;
  }

  .page-admin .admin-topbar {
    padding: .75rem 1rem;
    gap: .75rem;
  }

  .page-admin .admin-topbar h2 {
    font-size: 1rem;
    margin-bottom: 0;
  }

  .page-admin .admin-topbar h2 span {
    display: none;
  }

  .page-admin .admin-topbar > .flex:last-child {
    gap: .35rem;
  }

  .page-admin .admin-topbar .swift-theme-toggle {
    width: 40px !important;
    height: 40px;
    padding: .5rem !important;
    justify-content: center;
  }

  .page-admin .admin-topbar .swift-theme-toggle span {
    display: none;
  }

  .page-admin .admin-content {
    padding: 1rem;
  }

  .page-admin .admin-content .grid {
    gap: 1rem;
  }
}

@media (max-width: 480px) {
  .page-client .swift-container {
    padding-left: .75rem;
    padding-right: .75rem;
  }

  .page-client .swift-mobile-menu a {
    min-height: 44px;
  }

  .page-client .swift-card,
  .page-client .dashboard-modern-card {
    padding: .875rem;
  }

  .page-client .swift-converter-tabs {
    gap: .35rem;
  }

  .page-client .swift-converter-tab {
    padding: .65rem .4rem;
    font-size: .8rem;
  }

  .page-client .swift-converter-input {
    font-size: 1.1rem;
  }

  .page-client .swift-table-wrapper table,
  .page-client .overflow-x-auto table {
    min-width: 560px;
  }

  .page-admin .admin-topbar {
    padding-left: .75rem;
    padding-right: .75rem;
  }
}

/* ═══════════════════════════════════════════════
   15. PAGE-SPECIFIC OVERRIDES
   ═══════════════════════════════════════════════ */

/* Landing page specific */
.page-landing .swift-hero {
  background: linear-gradient(135deg, var(--swift-primary) 0%, var(--swift-primary-hover) 55%, var(--swift-accent) 100%);
  color: #fff;
}

.page-landing .swift-hero h1 {
  color: #fff;
}

.page-landing .swift-hero p {
  color: rgba(255, 255, 255, 0.85);
}

.page-landing .swift-converter {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
}

/* Client pages specific */
.page-client .swift-nav-brand-icon {
  background: var(--swift-white);
  border-color: var(--swift-gray-200);
}

.page-client .swift-btn-primary {
  background: var(--swift-primary);
  border-color: var(--swift-primary);
}

/* ═══════════════════════════════════════════════
   16. CLIENT WORKSPACE REFINEMENT
   Keeps the legacy utility markup functional while
   giving every authenticated page one visual language.
   ═══════════════════════════════════════════════ */
.page-client {
  min-height: 100vh;
  background: #f4f7fb;
}

.page-client .swift-nav {
  box-shadow: 0 1px 0 rgba(15, 23, 42, .04);
}

.page-client .swift-nav-link[aria-current="page"],
.page-client .swift-nav-link.active {
  color: var(--swift-primary);
  font-weight: 700;
}

.page-client > .container,
.page-client > main {
  max-width: var(--swift-container);
  margin-left: auto;
  margin-right: auto;
}

.page-client .swift-card,
.page-client .dashboard-modern-card {
  border-radius: var(--swift-radius-lg);
  box-shadow: 0 2px 8px rgba(15, 23, 42, .045);
}

.page-client .swift-card:hover,
.page-client .dashboard-modern-card:hover {
  box-shadow: 0 8px 20px rgba(15, 23, 42, .07);
}

.page-client .dash-welcome {
  background: linear-gradient(115deg, #1d4ed8 0%, #2563eb 68%, #f97316 145%) !important;
  border-radius: var(--swift-radius-lg) !important;
  box-shadow: 0 12px 26px rgba(37, 99, 235, .18) !important;
}

.page-client .dashboard-modern-card {
  border-radius: var(--swift-radius-lg);
  padding: 1.35rem;
}

.page-client .dashboard-chip,
.page-client .rate-display {
  border-radius: var(--swift-radius-md);
}

.page-client .btn-orange,
.page-client .swift-btn-cta {
  background: var(--swift-orange) !important;
  border-color: var(--swift-orange) !important;
  border-radius: var(--swift-radius-md);
  box-shadow: 0 4px 10px rgba(249, 115, 22, .18);
}

.page-client .btn-orange:hover,
.page-client .swift-btn-cta:hover {
  background: var(--swift-orange-dark) !important;
}

/* Translate old utility accents to the current blue / orange system. */
.page-client .bg-indigo-50,
.page-client .bg-indigo-100,
.page-client .bg-indigo-200,
.page-client .bg-blue-100 {
  background-color: var(--swift-primary-soft) !important;
}
.page-client .text-indigo-500,
.page-client .text-indigo-600,
.page-client .text-indigo-700,
.page-client .text-blue-600 {
  color: var(--swift-primary) !important;
}
.page-client .border-indigo-500,
.page-client .border-indigo-100 {
  border-color: var(--swift-primary-light) !important;
}
.page-client .bg-green-100,
.page-client .bg-green-50 {
  background-color: #fff7ed !important;
}
.page-client .text-green-600,
.page-client .text-green-700 {
  color: #047857 !important;
}
.page-client .bg-yellow-50,
.page-client .bg-yellow-100 {
  background-color: #fff7ed !important;
}
.page-client .text-yellow-800 {
  color: #c2410c !important;
}

.page-client table {
  border-collapse: separate;
  border-spacing: 0;
}
.page-client th {
  letter-spacing: .06em;
}
.page-client td,
.page-client th {
  vertical-align: middle;
}

.page-client .currency-input-shell {
  border-radius: var(--swift-radius-md);
  background: #f8fbff;
}

.page-client .swift-alert {
  border-radius: var(--swift-radius-md);
}

@media (max-width: 767px) {
  .page-client .swift-nav-inner {
    padding-top: .65rem;
    padding-bottom: .65rem;
  }
  .page-client > .container,
  .page-client > main {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .page-client .dash-welcome {
    padding: 1.25rem !important;
  }
  .page-client .dash-welcome h1 {
    font-size: 1.45rem;
  }
  .page-client .swift-card,
  .page-client .dashboard-modern-card {
    padding: 1rem;
  }
  .page-client .overflow-x-auto {
    -webkit-overflow-scrolling: touch;
  }

  .page-client .mobile-stack-table {
    min-width: 0 !important;
    width: 100%;
    display: block;
  }

  .page-client .mobile-stack-table thead {
    display: none;
  }

  .page-client .mobile-stack-table tbody,
  .page-client .mobile-stack-table tr {
    display: block;
    width: 100%;
  }

  .page-client .mobile-stack-table tr {
    margin-bottom: .75rem;
    padding: .5rem;
    border: 1px solid var(--swift-gray-200);
    border-radius: var(--swift-radius-lg);
    background: var(--swift-white);
  }

  .page-client .mobile-stack-table td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    min-height: 2.75rem;
    padding: .55rem .5rem !important;
    white-space: normal !important;
    text-align: right;
    border-bottom: 1px solid var(--swift-gray-100);
  }

  .page-client .mobile-stack-table td::before {
    flex: 0 0 auto;
    color: var(--swift-gray-500);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    text-align: left;
  }

  .page-client .mobile-stack-table td:nth-child(1)::before { content: "Date"; }
  .page-client .mobile-stack-table td:nth-child(2)::before { content: "Transaction ID"; }
  .page-client .mobile-stack-table td:nth-child(3)::before { content: "Amount"; }
  .page-client .mobile-stack-table td:nth-child(4)::before { content: "Recipient"; }
  .page-client .mobile-stack-table td:nth-child(5)::before { content: "Status"; }
  .page-client .mobile-stack-table td:nth-child(6)::before { content: "Actions"; }
  .page-client .mobile-stack-table td:last-child { border-bottom: 0; }
  .page-client .mobile-stack-table td > * { max-width: 65%; }
  .page-client .mobile-stack-table td:last-child a { min-height: 40px; }
}

html[data-theme="dark"] .page-client {
  background: var(--swift-gray-50);
}
html[data-theme="dark"] .page-client .currency-input-shell {
  background: var(--swift-gray-100);
}
html[data-theme="dark"] .page-client .bg-green-100,
html[data-theme="dark"] .page-client .bg-green-50 {
  background-color: #12352b !important;
}
html[data-theme="dark"] .page-client .bg-yellow-50,
html[data-theme="dark"] .page-client .bg-yellow-100 {
  background-color: #3a2a17 !important;
}

.page-client .swift-btn-primary:hover {
  background: var(--swift-primary-hover);
  border-color: var(--swift-primary-hover);
}

.transactions-support {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 20;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 44px;
  padding: .7rem 1rem;
  border-radius: 999px;
  background: #f97316;
  color: #fff !important;
  box-shadow: 0 8px 20px rgba(22, 163, 74, .25);
  font-weight: 700;
}

@media (max-width: 480px) {
  .transactions-support {
    right: .75rem;
    bottom: .75rem;
    width: 44px;
    padding: 0;
    justify-content: center;
  }

  .transactions-support span {
    display: none;
  }
}

/* Admin pages specific */
.page-admin .swift-sidebar {
  background: linear-gradient(180deg, #1e3a8a 0%, #2563EB 100%);
  color: #fff;
}

.page-admin .swift-sidebar-nav a {
  color: rgba(255, 255, 255, 0.85);
  transition: all 0.2s ease;
}

.page-admin .swift-sidebar-nav a:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.page-admin .swift-sidebar-nav a.active {
  background: rgba(249, 115, 22, 0.2);
  color: #fff;
  border-left: 3px solid var(--swift-orange);
}

.page-admin .swift-sidebar-brand {
  color: #fff;
}

.page-admin .swift-sidebar-brand i {
  color: var(--swift-orange);
}

/* ═══════════════════════════════════════════════
   16. ADMIN SIDEBAR COMPONENT
   ═══════════════════════════════════════════════ */

.swift-sidebar {
  width: 260px;
  flex-shrink: 0;
  min-height: 100vh;
  box-shadow: 4px 0 24px rgba(0, 0, 0, 0.12);
  position: relative;
  z-index: 50;
}

.swift-sidebar-brand {
  display: flex;
  align-items: center;
  gap: var(--swift-space-3);
  font-family: var(--swift-font-heading);
  font-size: var(--swift-text-xl);
  font-weight: 700;
  color: var(--swift-white);
  text-decoration: none;
  padding: var(--swift-space-5) var(--swift-space-4);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.swift-sidebar-brand i {
  font-size: 1.25rem;
  color: var(--swift-orange);
  opacity: 0.9;
}

.swift-sidebar-subtitle {
  font-size: var(--swift-text-xs);
  color: rgba(255, 255, 255, 0.5);
  margin-top: var(--swift-space-1);
  padding-left: calc(var(--swift-space-4) + 1.25rem + var(--swift-space-3));
}

.swift-sidebar-nav {
  padding: var(--swift-space-4) var(--swift-space-3);
  display: flex;
  flex-direction: column;
  gap: var(--swift-space-1);
}

.swift-sidebar-nav a {
  display: flex;
  align-items: center;
  gap: var(--swift-space-3);
  padding: var(--swift-space-3) var(--swift-space-3);
  border-radius: var(--swift-radius-lg);
  font-size: var(--swift-text-sm);
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
  text-decoration: none;
  transition: all 0.2s ease;
  position: relative;
  background: rgba(249, 115, 22, 0.12);
  border-left: 3px solid rgba(249, 115, 22, 0.6);
}

.swift-sidebar-nav a:hover {
  background: rgba(249, 115, 22, 0.22);
  color: #fff;
  border-left-color: #f97316;
}

.swift-sidebar-nav a.active {
  background: rgba(249, 115, 22, 0.25);
  color: #fff;
  font-weight: 600;
  border-left-color: #f97316;
}

.swift-sidebar-nav a.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 60%;
  background: #f97316;
  border-radius: 0 2px 2px 0;
}

.swift-sidebar-nav a i {
  width: 20px;
  text-align: center;
  font-size: 0.875rem;
  opacity: 0.9;
  color: #f97316;
}

.swift-sidebar-nav a.active i {
  opacity: 1;
  color: #f97316;
}

.swift-sidebar-section-title {
  font-size: var(--swift-text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.4);
  padding: var(--swift-space-4) var(--swift-space-3) var(--swift-space-2);
  margin-top: var(--swift-space-2);
}

.swift-sidebar-footer {
  padding: var(--swift-space-4);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  margin-top: auto;
}

.swift-sidebar-footer a {
  display: flex;
  align-items: center;
  gap: var(--swift-space-2);
  padding: var(--swift-space-3) var(--swift-space-4);
  background: rgba(127, 29, 29, 0.25);
  color: #F87171;
  font-size: var(--swift-text-sm);
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--swift-radius-lg);
  border: 1px solid rgba(239, 68, 68, 0.4);
  transition: all 0.2s ease;
}

.swift-sidebar-footer a:hover {
  background: rgba(185, 28, 28, 0.35);
  color: #FCA5A5;
  border-color: #EF4444;
}

/* Admin layout */
.page-admin .admin-layout {
  display: flex;
  min-height: 100vh;
}

.page-admin .admin-main {
  flex: 1;
  overflow-x: auto;
  background: var(--swift-gray-50);
}

.page-admin .admin-topbar {
  background: var(--swift-white);
  border-bottom: 1px solid var(--swift-gray-200);
  padding: var(--swift-space-4) var(--swift-space-6);
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 40;
}

.page-admin .admin-content {
  padding: var(--swift-space-6);
  max-width: 1400px;
}

/* Legacy admin pages use the same sidebar with utility wrappers. */
.page-admin .sidebar-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .5);
  z-index: 90;
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease, visibility .3s ease;
}

.page-admin .sidebar-overlay.active,
.page-admin .sidebar-overlay.open {
  opacity: 1;
  visibility: visible;
}

/* Mobile sidebar toggle */
.page-admin .swift-sidebar-toggle {
  display: none;
}

@media (max-width: 1023px) {
  .page-admin .swift-sidebar {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    z-index: 100;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
  }

  .page-admin .swift-sidebar.open {
    transform: translateX(0);
  }

  .page-admin .swift-sidebar-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    /* 44px keeps the control at the minimum comfortable touch size. */
    width: 44px;
    height: 44px;
    border-radius: var(--swift-radius-md);
    border: 1px solid var(--swift-gray-300);
    background: var(--swift-white);
    color: var(--swift-gray-600);
    cursor: pointer;
  }

  .page-admin .swift-sidebar-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 90;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
  }

  .page-admin .swift-sidebar-overlay.open {
    opacity: 1;
    visibility: visible;
  }

  .page-admin .sidebar-overlay {
    display: block;
  }
}

@media (max-width: 1023px) {
  .page-admin {
    overflow-x: hidden;
  }

  .page-admin .admin-layout,
  .page-admin > .flex.h-screen {
    display: block;
    min-height: 100vh;
  }

  .page-admin .swift-sidebar {
    width: min(82vw, 300px);
    max-width: 300px;
    height: 100dvh;
    overflow-y: auto;
    box-shadow: 12px 0 30px rgba(15, 23, 42, .25);
  }

  .page-admin .admin-main,
  .page-admin > .flex.h-screen > .flex-1 {
    width: 100%;
    min-width: 0;
    min-height: 100vh;
    overflow-x: hidden;
  }

  .page-admin .admin-topbar {
    min-height: 64px;
    padding: .75rem 1rem;
    gap: .75rem;
  }

  .page-admin .admin-topbar > * {
    min-width: 0;
  }

  .page-admin .admin-topbar h2 {
    font-size: 1rem;
    overflow-wrap: anywhere;
  }

  .page-admin .admin-topbar > .flex:last-child {
    gap: .4rem;
    margin-left: auto;
  }

  .page-admin .admin-topbar > .flex:last-child > div:not(.w-8):not(.w-10):not(.w-12) {
    display: none;
  }

  .page-admin .admin-topbar .swift-theme-toggle {
    width: 42px;
    height: 42px;
    padding: .5rem;
    justify-content: center;
  }

  .page-admin .admin-topbar .swift-theme-toggle span {
    display: none;
  }

  .page-admin .admin-content,
  .page-admin > .flex.h-screen > .flex-1 > .p-6 {
    padding: 1rem;
    max-width: 100%;
  }

  .page-admin .grid {
    min-width: 0;
  }

  .page-admin .swift-table-wrapper,
  .page-admin .overflow-x-auto {
    max-width: 100%;
  }

  .page-admin .swift-sidebar-overlay {
    display: block;
    z-index: 90;
  }

  .page-admin .swift-sidebar-toggle {
    flex: 0 0 auto;
  }

  .page-admin.sidebar-open,
  body.sidebar-open {
    overflow: hidden;
  }
}

@media (max-width: 480px) {
  .page-admin .admin-topbar {
    padding-left: .75rem;
    padding-right: .75rem;
  }

  .page-admin .admin-topbar h2 span {
    display: none;
  }

  .page-admin .admin-topbar .admin-logout-btn {
    width: 42px;
    height: 42px;
    padding: .5rem;
    margin-right: 0;
  }

  .page-admin .admin-topbar .admin-logout-btn > div {
    margin-right: 0;
  }
}

/* ═══════════════════════════════════════════════
   17. LANDING PAGE ENHANCEMENTS
   ═══════════════════════════════════════════════ */

.page-landing .swift-hero {
  background: linear-gradient(135deg, var(--swift-primary) 0%, var(--swift-primary-hover) 55%, var(--swift-accent) 100%);
  color: #fff;
  position: relative;
  overflow: hidden;
}

.page-landing .swift-hero h1 {
  color: #fff;
  position: relative;
}

.page-landing .swift-hero p {
  color: rgba(255, 255, 255, 0.85);
  position: relative;
}

.page-landing .swift-converter {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

/* ═══════════════════════════════════════════════
   18. CLIENT PAGE ENHANCEMENTS
   ═══════════════════════════════════════════════ */

.page-client .swift-nav-brand-icon {
  background: var(--swift-white);
  border-color: var(--swift-gray-200);
}

.page-client .swift-btn-primary {
  background: var(--swift-orange);
  border-color: var(--swift-orange);
  color: var(--swift-gray-900);
}

.page-client .swift-btn-primary:hover {
  background: var(--swift-orange-dark);
  border-color: var(--swift-orange-dark);
  color: var(--swift-gray-900);
  box-shadow: 0 4px 12px rgba(249, 115, 22, 0.3);
}

.page-client .swift-card {
  border-left: 3px solid var(--swift-primary);
}

.page-client .swift-card:hover {
  border-left-color: var(--swift-primary-hover);
}

/* ═══════════════════════════════════════════════
   19. IMPROVED ADMIN SIDEBAR COLORS
   ═══════════════════════════════════════════════ */

.page-admin .swift-sidebar {
  background: linear-gradient(180deg, #1e3a8a 0%, #2563EB 100%);
}

.page-admin .swift-sidebar-nav a.active {
  background: rgba(249, 115, 22, 0.2);
  border-left: 3px solid #f97316;
}

.page-admin .swift-sidebar-brand i {
  color: #f97316;
}

.page-admin .swift-sidebar-nav a.active i {
  color: #f97316;
}

.page-admin .swift-btn-primary {
  background: var(--swift-orange);
  border-color: var(--swift-orange);
  color: var(--swift-gray-900);
}

.page-admin .swift-btn-primary:hover {
  background: var(--swift-orange-dark);
  border-color: var(--swift-orange-dark);
  color: var(--swift-gray-900);
  box-shadow: 0 4px 12px rgba(249, 115, 22, 0.3);
}

/* ═══════════════════════════════════════════════
   20. LEGACY COMPATIBILITY
   ═══════════════════════════════════════════════ */

/* Preserve old component classes for backward compatibility */
.swift-panel {
  background: var(--swift-white);
  border: 1px solid var(--swift-gray-200);
  border-radius: var(--swift-radius-xl);
  padding: var(--swift-space-6);
  box-shadow: var(--swift-shadow-sm);
}

.swift-section {
  padding: var(--swift-space-12) 0;
}

.swift-section-gray {
  background: var(--swift-gray-50);
}

@media (max-width: 767px) {
  .swift-section {
    padding: var(--swift-space-8) 0;
  }
}

/* Ensure buttons have minimum touch target */
@media (max-width: 767px) {
  button[type="submit"],
  .swift-btn {
    min-height: 44px;
  }
}
/* ============================================================================
   ELITE RMB — OFFICIAL BRAND OVERRIDES
   ----------------------------------------------------------------------------
    Brand palette:  Deep Blue (primary) + White (secondary) + Green (accent)
   Logo 1 (horizontal) -> header, footer, email, docs (wide/short areas)
   Logo 2 (stacked)    -> loading screen, square/social areas
   The logo images keep their original proportions; sizing is done by HEIGHT
   (auto WIDTH) or by WIDTH (auto HEIGHT) so aspect ratio is never changed.
   ============================================================================ */

:root {
  --elite-deep-blue-900: #0E1B40;
  --elite-deep-blue-800: #1A2A5E;
  --elite-deep-blue-700: #2D3F7A;
  --elite-deep-blue-600: #3D5599;
  --elite-green-600: #20B96B;
  --elite-green-700: #179352;
  --elite-green-soft: #EAF9F0;
}

/* ---------------------------------------------------------------------------
   HEADER BRAND — Logo 1 (horizontal). One clean image, no conflicting box.
   Structure: .swift-nav-brand > .swift-nav-brand-icon > img
   --------------------------------------------------------------------------- */
.swift-nav-brand-icon {
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
  color: inherit !important;
}
.swift-nav-brand-icon img {
  width: auto !important;
  height: 44px !important;      /* desktop — wide/short horizontal logo */
  max-width: min(250px, 60vw) !important;
  object-fit: contain !important;
  object-position: left center !important;
  display: block !important;
  margin: 0 !important;
}
@media (max-width: 900px) {
  .swift-nav-brand-icon img {
    height: 40px !important;    /* tablet */
  }
}
@media (max-width: 640px) {
  .swift-nav-brand-icon img {
    width: 140px !important;    /* mobile — matches the 120–160px target */
    height: auto !important;
    max-width: 42vw !important;
  }
}

/* Header brand link keeps the logo with comfortable spacing and compact navbar */
.swift-nav-brand {
  gap: .6rem !important;
}

/* ---------------------------------------------------------------------------
   FOOTER BRAND — Logo 1 (horizontal) by default for consistency.
   --------------------------------------------------------------------------- */
.swift-footer-brand,
.swift-footer .swift-footer-brand {
  display: inline-flex;
  align-items: center;
  font-family: var(--swift-font-heading);
  font-size: var(--swift-text-xl);
  font-weight: 700;
  color: var(--swift-white);
}
.swift-footer .elite-footer-logo img,
.swift-footer-brand img {
  height: 34px !important;
  width: auto !important;
  object-fit: contain !important;
  display: block !important;
}
.swift-footer-tagline {
  color: var(--elite-green-600);
  font-size: var(--swift-text-sm);
  margin-top: .35rem;
}

/* ---------------------------------------------------------------------------
   LOADING SCREEN — Logo 2 (stacked). Centered, breathing room, subtle spinner.
   --------------------------------------------------------------------------- */
.elite-loading-screen {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  background:
    radial-gradient(circle at 50% 30%, rgba(46, 80, 150, 0.28), transparent 55%),
    linear-gradient(160deg, var(--elite-deep-blue-900) 0%, var(--elite-deep-blue-800) 55%, var(--elite-deep-blue-700) 100%);
  color: #fff;
  text-align: center;
  font-family: var(--swift-font-body), -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  opacity: 1;
  transition: opacity .4s ease;
}
.elite-loading-screen.is-hidden {
  opacity: 0;
  pointer-events: none;
}
.elite-loading-screen .elite-loading-logo img {
  width: 220px !important;
  max-width: 60vw !important;
  max-height: 40vh !important;
  height: auto !important;
  object-fit: contain !important;
  display: block !important;
}
.elite-loading-screen .elite-loading-tagline {
  font-size: clamp(.85rem, 2.4vw, 1.05rem);
  font-weight: 500;
  letter-spacing: .02em;
  color: rgba(255,255,255,.85);
  margin: 0;
}
.elite-loading-spinner {
  width: 34px;
  height: 34px;
  margin-top: .25rem;
  border: 3px solid rgba(255,255,255,.25);
  border-top-color: var(--elite-green-600);
  border-radius: 50%;
  animation: elite-spin 0.9s linear infinite;
}
@keyframes elite-spin {
  to { transform: rotate(360deg); }
}

/* ---------------------------------------------------------------------------
   ADMIN SIDEBAR BRAND — compact horizontal logo (no distortion).
   --------------------------------------------------------------------------- */
.swift-sidebar-brand {
  display: flex;
  align-items: center;
  gap: .6rem;
}
.swift-sidebar-brand img {
  height: 34px !important;
  width: auto !important;
  object-fit: contain !important;
  display: block !important;
}
.swift-sidebar-brand .elite-sidebar-icon img {
  height: 30px !important;
  width: auto !important;
}

/* ---------------------------------------------------------------------------
   GREEN ACCENT — used strategically on rates, success states, CTAs.
   --------------------------------------------------------------------------- */
.elite-accent-green {
  color: var(--elite-green-600) !important;
}
.elite-btn-green {
  background: var(--elite-green-600) !important;
  border-color: var(--elite-green-600) !important;
  color: #fff !important;
}
.elite-btn-green:hover {
  background: var(--elite-green-700) !important;
  border-color: var(--elite-green-700) !important;
  color: #fff !important;
}

/* ============================================================================
   ELITE RMB - OFFICIAL BRAND OVERRIDES
   ----------------------------------------------------------------------------
    Brand palette:  Deep Blue (primary) + White (secondary) + Green (accent)
   Logo 1 (horizontal) -> header, footer, email, docs (wide/short areas)
   Logo 2 (stacked)    -> loading screen, square/social areas
   The logo images keep their original proportions; sizing is done by HEIGHT
   (auto WIDTH) or by WIDTH (auto HEIGHT) so aspect ratio is never changed.
   ============================================================================ */

:root {
  --elite-deep-blue-900: #0E1B40;
  --elite-deep-blue-800: #1A2A5E;
  --elite-deep-blue-700: #2D3F7A;
  --elite-deep-blue-600: #3D5599;
  --elite-green-600: #20B96B;
  --elite-green-700: #179352;
  --elite-green-soft: #EAF9F0;
}

/* ---------------------------------------------------------------------------
   HEADER BRAND - Logo 1 (horizontal). One clean image, no conflicting box.
   Structure: .swift-nav-brand > .swift-nav-brand-icon > img
   --------------------------------------------------------------------------- */
.swift-nav-brand-icon {
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
  color: inherit !important;
}
.swift-nav-brand-icon img {
  width: auto !important;
  height: 44px !important;      /* desktop - wide/short horizontal logo */
  max-width: min(250px, 60vw) !important;
  object-fit: contain !important;
  object-position: left center !important;
  display: block !important;
  margin: 0 !important;
}
@media (max-width: 900px) {
  .swift-nav-brand-icon img {
    height: 40px !important;    /* tablet */
  }
}
@media (max-width: 640px) {
  .swift-nav-brand-icon img {
    width: 140px !important;    /* mobile - matches the 120-160px target */
    height: auto !important;
    max-width: 42vw !important;
  }
}

/* Header brand link keeps the logo with comfortable spacing and compact navbar */
.swift-nav-brand {
  gap: .6rem !important;
}

/* ---------------------------------------------------------------------------
   FOOTER BRAND - Logo 1 (horizontal) by default for consistency.
   --------------------------------------------------------------------------- */
.swift-footer-brand,
.swift-footer .swift-footer-brand {
  display: inline-flex;
  align-items: center;
  font-family: var(--swift-font-heading);
  font-size: var(--swift-text-xl);
  font-weight: 700;
  color: var(--swift-white);
}
.swift-footer .elite-footer-logo img,
.swift-footer-brand img {
  height: 34px !important;
  width: auto !important;
  object-fit: contain !important;
  display: block !important;
}
.swift-footer-tagline {
  color: var(--elite-green-600);
  font-size: var(--swift-text-sm);
  margin-top: .35rem;
}

/* ---------------------------------------------------------------------------
   LOADING SCREEN - Logo 2 (stacked). Centered, breathing room, subtle spinner.
   --------------------------------------------------------------------------- */
.elite-loading-screen {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .9rem;
  background:
    radial-gradient(circle at 50% 30%, rgba(64, 108, 190, 0.28), transparent 55%),
    linear-gradient(160deg, var(--elite-deep-blue-900) 0%, var(--elite-deep-blue-800) 55%, var(--elite-deep-blue-700) 100%);
  color: #fff;
  text-align: center;
  font-family: var(--swift-font-body), -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  opacity: 1;
  transition: opacity .4s ease;
}
.elite-loading-screen.is-hidden {
  opacity: 0;
  pointer-events: none;
}
.elite-loading-screen .elite-loading-logo img {
  width: 220px !important;
  max-width: 62vw !important;
  max-height: 34vh !important;
  height: auto !important;
  object-fit: contain !important;
  display: block !important;
}
.elite-loading-screen .elite-loading-tagline {
  font-size: clamp(.85rem, 2.4vw, 1.05rem);
  font-weight: 500;
  letter-spacing: .02em;
  color: rgba(255,255,255,.85);
  margin: 0;
}
.elite-loading-spinner {
  width: 34px;
  height: 34px;
  margin-top: .25rem;
  border: 3px solid rgba(255,255,255,.25);
  border-top-color: var(--elite-green-600);
  border-radius: 50%;
  animation: elite-spin 0.9s linear infinite;
}
@keyframes elite-spin {
  to { transform: rotate(360deg); }
}

/* ---------------------------------------------------------------------------
   ADMIN SIDEBAR BRAND - compact horizontal logo (no distortion).
   --------------------------------------------------------------------------- */
.swift-sidebar-brand {
  display: flex;
  align-items: center;
  gap: .6rem;
}
.swift-sidebar-brand img {
  height: 34px !important;
  width: auto !important;
  object-fit: contain !important;
  display: block !important;
}

/* ---------------------------------------------------------------------------
   GREEN ACCENT - used strategically on rates, success states, CTAs.
   --------------------------------------------------------------------------- */
.elite-accent-green {
  color: var(--elite-green-600) !important;
}
.elite-btn-green {
  background: var(--elite-green-600) !important;
  border-color: var(--elite-green-600) !important;
  color: #fff !important;
}
.elite-btn-green:hover {
  background: var(--elite-green-700) !important;
  border-color: var(--elite-green-700) !important;
  color: #fff !important;
}




/* ============================================================================
   ELITE RMB BRAND LAYER (appended — single source of truth, loaded last)
   ============================================================================ */
/* ============================================================================
   ELITE RMB — OFFICIAL BRAND LAYER (loaded LAST on every page)
   ----------------------------------------------------------------------------
   Source of truth: Elite RMB Color Style Guide
     Navy  #1A2A5E  -> trust / structure / headings / sidebar / footer
     Green #20B96B  -> action / primary CTAs / success (never decoration)
     Amber #F59E0B  -> attention only: pending / warnings
     White + #F8F9FA-> >=60% breathing room
   Overrides the legacy orange (#f97316) and cobalt-blue palettes without
   touching any HTML, PHP logic or JavaScript.
   Logo 1 (horizontal) -> header, footer, email, docs (wide/short areas)
   Logo 2 (stacked)    -> loading screen, square/social areas
   Logos are sized by HEIGHT (auto WIDTH) or WIDTH (auto HEIGHT) so aspect
   ratio is never changed.
   ============================================================================ */

:root {
  /* Elite RMB brand tokens */
  --elite-navy: #1A2A5E;
  --elite-navy-hover: #2D3F7A;
  --elite-navy-muted: #3D5599;
  --elite-green: #20B96B;
  --elite-green-hover: #179352;
  --elite-green-dark: #1F9D50;
  --elite-green-soft: #EAF9F0;
  --elite-white: #FFFFFF;
  --elite-amber: #F59E0B;
  --elite-amber-hover: #D97706;
  --elite-amber-soft: #FEF6E7;
  --elite-bg: #F8F9FA;
  --elite-text: #333333;
  --elite-text-soft: #5A6577;
  --elite-muted: #8A94A6;
  --elite-border: #E2E5EB;
  --elite-border-strong: #CBD2DE;
  --elite-error: #D92D20;
  --elite-error-soft: #FEF3F2;
  --elite-success-text: #15803D;
  --elite-radius-sm: 6px;
  --elite-radius: 10px;
  --elite-radius-md: 12px;
  --elite-radius-lg: 16px;
  --elite-shadow-sm: 0 1px 2px rgba(26,42,94,.05);
  --elite-shadow: 0 2px 6px rgba(26,42,94,.06), 0 10px 24px rgba(26,42,94,.06);
  --elite-shadow-lg: 0 6px 16px rgba(26,42,94,.08), 0 20px 48px rgba(26,42,94,.10);

  /* Geometric reuse: keep any legacy deep-blue hooks mapping to brand navy */
  --elite-deep-blue-900: #0E1B40;
  --elite-deep-blue-800: #1A2A5E;
  --elite-deep-blue-700: #2D3F7A;
  --elite-deep-blue-600: #3D5599;
  --elite-green-600: #20B96B;
  --elite-green-700: #179352;
  --elite-green-soft: #EAF9F0;
}

/* ---------------------------------------------------------------------------
   HEADER BRAND - Logo 1 (horizontal). One clean image, no conflicting box.
   Structure: .swift-nav-brand > .swift-nav-brand-icon > img
   --------------------------------------------------------------------------- */
.swift-nav-brand-icon {
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
  color: inherit !important;
}
.swift-nav-brand-icon img {
  width: auto !important;
  height: 44px !important;      /* desktop - wide/short horizontal logo */
  max-width: min(250px, 60vw) !important;
  object-fit: contain !important;
  object-position: left center !important;
  display: block !important;
  margin: 0 !important;
}
@media (max-width: 900px) {
  .swift-nav-brand-icon img {
    height: 40px !important;    /* tablet */
  }
}
@media (max-width: 640px) {
  .swift-nav-brand-icon img {
    width: 140px !important;    /* mobile - matches the 120-160px target */
    height: auto !important;
    max-width: 42vw !important;
  }
}

/* Header brand link keeps the logo with comfortable spacing and compact navbar */
.swift-nav-brand {
  gap: .6rem !important;
}

/* ---------------------------------------------------------------------------
   FOOTER BRAND - Logo 1 (horizontal) by default for consistency.
   --------------------------------------------------------------------------- */
.swift-footer-brand,
.swift-footer .swift-footer-brand {
  display: inline-flex;
  align-items: center;
  font-family: var(--swift-font-heading);
  font-size: var(--swift-text-xl);
  font-weight: 700;
  color: var(--swift-white);
}
.swift-footer .elite-footer-logo img,
.swift-footer-brand img {
  height: 34px !important;
  width: auto !important;
  object-fit: contain !important;
  display: block !important;
}
.swift-footer-tagline {
  color: var(--elite-green-600);
  font-size: var(--swift-text-sm);
  margin-top: .35rem;
}

/* ---------------------------------------------------------------------------
   LOADING SCREEN - Logo 2 (stacked). Centered, breathing room, subtle spinner.
   --------------------------------------------------------------------------- */
.elite-loading-screen {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .9rem;
  background:
    radial-gradient(circle at 50% 30%, rgba(64, 108, 190, 0.28), transparent 55%),
    linear-gradient(160deg, var(--elite-deep-blue-900) 0%, var(--elite-deep-blue-800) 55%, var(--elite-deep-blue-700) 100%);
  color: #fff;
  text-align: center;
  font-family: var(--swift-font-body), -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  opacity: 1;
  transition: opacity .4s ease;
}
.elite-loading-screen.is-hidden {
  opacity: 0;
  pointer-events: none;
}
.elite-loading-screen .elite-loading-logo img {
  width: 220px !important;
  max-width: 62vw !important;
  max-height: 34vh !important;
  height: auto !important;
  object-fit: contain !important;
  display: block !important;
}
.elite-loading-screen .elite-loading-tagline {
  font-size: clamp(.85rem, 2.4vw, 1.05rem);
  font-weight: 500;
  letter-spacing: .02em;
  color: rgba(255,255,255,.85);
  margin: 0;
}
.elite-loading-spinner {
  width: 34px;
  height: 34px;
  margin-top: .25rem;
  border: 3px solid rgba(255,255,255,.25);
  border-top-color: var(--elite-green-600);
  border-radius: 50%;
  animation: elite-spin 0.9s linear infinite;
}
@keyframes elite-spin {
  to { transform: rotate(360deg); }
}

/* ---------------------------------------------------------------------------
   ADMIN SIDEBAR BRAND - compact horizontal logo (no distortion).
   --------------------------------------------------------------------------- */
.swift-sidebar-brand {
  display: flex;
  align-items: center;
  gap: .6rem;
}
.swift-sidebar-brand img {
  height: 34px !important;
  width: auto !important;
  object-fit: contain !important;
  display: block !important;
}

/* ---------------------------------------------------------------------------
   GREEN ACCENT - used strategically on rates, success states, CTAs.
   --------------------------------------------------------------------------- */
.elite-accent-green {
  color: var(--elite-green-600) !important;
}
.elite-btn-green {
  background: var(--elite-green-600) !important;
  border-color: var(--elite-green-600) !important;
  color: #fff !important;
}
.elite-btn-green:hover {
  background: var(--elite-green-700) !important;
  border-color: var(--elite-green-700) !important;
  color: #fff !important;
}
/* ── Redirect every legacy token to the official brand palette ─────────────
   Repoints orange #f97316 and cobalt-blue tokens to Navy/Green so the whole
   interface inherits the brand without any HTML changes. */
:root {
  --swift-primary: #20B96B;
  --swift-primary-hover: #179352;
  --swift-primary-light: #EAF9F0;
  --swift-primary-soft: #EAF9F0;
  --swift-accent: #20B96B;
  --swift-accent-hover: #179352;
  --swift-accent-soft: #EAF9F0;
  --swift-green: #20B96B;
  --swift-green-dark: #179352;
  --swift-green-soft: #EAF9F0;
  --swift-navy-900: #1A2A5E;
  --swift-navy-800: #2D3F7A;
  --swift-navy-700: #3D5599;
  --swift-navy-600: #4A63AE;
  --swift-navy-100: #E4E9F6;
  --swift-navy-50: #F1F4FA;
  --swift-success: #20B96B;
  --swift-success-soft: #EAF9F0;
  --swift-warning: #F59E0B;
  --swift-warning-soft: #FEF6E7;
  --swift-error: #D92D20;
  --swift-error-soft: #FEF3F2;
  --swift-info: #1A2A5E;
  --swift-info-soft: #F1F4FA;
  --swift-orange: #20B96B;
  --swift-orange-dark: #179352;
  --swift-orange-soft: #EAF9F0;
  --swift-amber: #F59E0B;
  --swift-amber-light: #FEF6E7;
  --swift-red: #D92D20;
  --swift-red-light: #FEF3F2;
}

/* ---------------------------------------------------------------------------
   FOUNDATIONS — premium fintech feel, 60%+ white/light-gray breathing room.
   --------------------------------------------------------------------------- */
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--elite-bg);
  color: var(--elite-text);
  font-family: var(--swift-font-body, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif);
  letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5, h6,
.hero-title, .page-title, .swap-header h1,
.swift-nav-links a, .swift-footer h4 {
  font-family: var(--swift-font-heading, 'Inter', 'Segoe UI', Arial, sans-serif);
  color: var(--elite-navy);
  letter-spacing: -0.02em;
}
h1, .hero-title { font-size: clamp(1.9rem, 4vw, 2.9rem); font-weight: 800; line-height: 1.14; }
h2 { font-size: clamp(1.45rem, 2.6vw, 1.9rem); font-weight: 700; }
h3 { font-size: 1.1rem; font-weight: 700; }
p, li, td, th, label, .form-hint { color: var(--elite-text); }
.text-muted, .text-secondary, .muted, small, .form-hint,
.help-text, .muted-text, .text-gray { color: var(--elite-text-soft) !important; }
a { color: var(--elite-green); transition: color .16s ease; }
a:hover { color: var(--elite-green-hover); }

/* ---------------------------------------------------------------------------
   NAVIGATION — white bar, navy text, green hover underline, green CTA.
   --------------------------------------------------------------------------- */
.swift-nav, nav.swift-nav, .navbar, .topbar {
  background: var(--elite-white) !important;
  border-bottom: 1px solid var(--elite-border);
  box-shadow: 0 1px 0 rgba(26,42,94,.04);
}
.swift-nav { position: sticky; top: 0; z-index: 1000; }
.swift-nav-inner, .swift-nav-container { padding: .75rem 1.5rem; }
.swift-nav-links {
  gap: clamp(1rem, 2.4vw, 2.2rem);
  font-weight: 600;
}
.swift-nav-links a,
.swift-nav-links .nav-link {
  color: var(--elite-navy);
  font-weight: 600;
  position: relative;
  padding-bottom: .3rem;
  text-decoration: none;
}
.swift-nav-links a::after,
.swift-nav-links .nav-link::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 2px;
  background: var(--elite-green);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .18s ease;
}
.swift-nav-links a:hover::after,
.swift-nav-links .nav-link:hover::after,
.swift-nav-links a.active::after { transform: scaleX(1); }
.swift-nav-links a:hover,
.swift-nav-links .nav-link:hover { color: var(--elite-green-hover); }
.swift-nav-links a.active,
.swift-nav-links .nav-link.active { color: var(--elite-navy); }

/* ---------------------------------------------------------------------------
   BUTTON SYSTEM — Green primary / Navy secondary / White tertiary.
   --------------------------------------------------------------------------- */
.swift-btn,
button.swift-btn,
a.swift-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  height: 44px;
  padding: 0 1.4rem;
  border-radius: var(--elite-radius);
  font-weight: 600;
  font-size: .95rem;
  line-height: 1;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .16s ease, border-color .16s ease,
              color .16s ease, transform .12s ease, box-shadow .16s ease;
}
.swift-btn:active { transform: translateY(1px); }
.swift-btn:focus-visible,
a.swift-btn:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
a:focus-visible {
  outline: 3px solid rgba(46,204,113,.35);
  outline-offset: 2px;
}
.swift-btn:disabled { opacity: .5; cursor: not-allowed; }

/* Primary — green action */
.swift-btn-primary,
.btn-primary,
.swift-btn.swift-btn-primary,
a.swift-btn-primary,
button.swift-btn-primary {
  background: var(--elite-green) !important;
  border-color: var(--elite-green) !important;
  color: var(--elite-white) !important;
  box-shadow: 0 2px 8px rgba(46,204,113,.28);
}
.swift-btn-primary:hover,
.btn-primary:hover {
  background: var(--elite-green-hover) !important;
  border-color: var(--elite-green-hover) !important;
  box-shadow: 0 4px 14px rgba(46,204,113,.34);
  color: var(--elite-white) !important;
}

/* Secondary — navy structure */
.swift-btn-secondary,
.btn-secondary,
a.swift-btn-secondary,
button.swift-btn-secondary {
  background: var(--elite-navy) !important;
  border-color: var(--elite-navy) !important;
  color: var(--elite-white) !important;
}
.swift-btn-secondary:hover,
.btn-secondary:hover {
  background: var(--elite-navy-hover) !important;
  border-color: var(--elite-navy-hover) !important;
  color: var(--elite-white) !important;
}

/* Tertiary — outline */
.swift-btn-outline,
.btn-outline,
.swift-btn-tertiary,
a.swift-btn-tertiary {
  background: var(--elite-white);
  border-color: var(--elite-border-strong);
  color: var(--elite-navy);
}
.swift-btn-outline:hover,
.swift-btn-tertiary:hover {
  border-color: var(--elite-navy);
  background: var(--elite-bg);
  color: var(--elite-navy);
}

/* Legacy orange button classes → green (Exchange/action CTAs) */
.btn-orange, .swift-btn.btn-orange, a.btn-orange, button.btn-orange {
  background: var(--elite-green) !important;
  border-color: var(--elite-green) !important;
  color: #fff !important;
}
.btn-orange:hover, .swift-btn.btn-orange:hover {
  background: var(--elite-green-hover) !important;
  border-color: var(--elite-green-hover) !important;
  color: #fff !important;
}
.btn-dark, .btn-navy { background: var(--elite-navy) !important; color: #fff !important; }/* ---------------------------------------------------------------------------
   CARDS — financial product components, subtle shadows, navy headings.
   --------------------------------------------------------------------------- */
.swift-card,
.card,
.card-body,
.swap-card,
.dashboard-card,
.panel,
.panel-default > .panel-body,
.swift-swap-card {
  background: var(--elite-white);
  border: 1px solid var(--elite-border);
  border-radius: var(--elite-radius-md);
  box-shadow: var(--elite-shadow-sm);
}
.swift-card { padding: 1.75rem; }
.card, .dashboard-card { border-radius: var(--elite-radius-md); }
.card-title, .card h3, .panel-title, .dashboard-card h3 {
  color: var(--elite-navy);
  font-weight: 700;
}
.card:hover, .swift-card:hover, .dashboard-card:hover {
  box-shadow: var(--elite-shadow);
}
/* Important cards: subtle navy/green top indicator instead of giant color blocks */
.swift-card-accent { border-top: 3px solid var(--elite-navy); }
.swift-card-accent--green { border-top: 3px solid var(--elite-green); }
.swift-card-accent--amber { border-top: 3px solid var(--elite-amber); }

/* ---------------------------------------------------------------------------
   FORMS — premium inputs: light background, gray border, navy text.
   --------------------------------------------------------------------------- */
.swift-input, .form-control, input[type="text"], input[type="email"],
input[type="password"], input[type="number"], input[type="tel"],
input[type="date"], select.form-control, select, textarea.form-control {
  background: var(--elite-white);
  border: 1px solid var(--elite-border-strong);
  border-radius: var(--elite-radius);
  color: var(--elite-navy);
  padding: .65rem .9rem;
  /* 16px keeps iOS/Android from zooming the viewport on focus. */
  font-size: 16px;
  min-height: 46px;
  width: 100%;
  transition: border-color .16s ease, box-shadow .16s ease;
}

/* Textareas size themselves; they must not inherit a fixed control height. */
textarea.form-control, .swift-textarea {
  height: auto;
  min-height: 96px;
  padding: .7rem .9rem;
  line-height: 1.55;
}
.form-control:focus, select:focus, textarea.form-control:focus,
.swift-input:focus, input:focus, select:focus {
  border-color: var(--elite-green);
  box-shadow: 0 0 0 3px rgba(46,204,113,.16);
  outline: none;
}
.form-control::placeholder, input::placeholder { color: var(--elite-muted); }
.form-control:disabled, input:disabled, select:disabled { background: var(--elite-bg); color: var(--elite-muted); cursor: not-allowed; }
.form-label, label { font-weight: 600; color: var(--elite-navy); font-size: .9rem; }
.amount-lg, .currency-input, .swap-amount-input {
  font-size: clamp(1.35rem, 3vw, 1.8rem);
  font-weight: 800;
  color: var(--elite-navy);
  height: auto !important;
  padding: .9rem 1rem;
}
.input-group-text, .input-group .input-group-text {
  background: var(--elite-bg);
  border: 1px solid var(--elite-border-strong);
  color: var(--elite-navy);
  font-weight: 700;
}

/* ---------------------------------------------------------------------------
   EXCHANGE CALCULATOR / RATE — the hero financial component.
   --------------------------------------------------------------------------- */
.swap-card, .converter-card, .exchange-rate-card {
  border-radius: var(--elite-radius-lg);
  box-shadow: var(--elite-shadow-lg);
  overflow: hidden;
}
.swap-header { border-bottom: 1px solid var(--elite-border); padding-bottom: 1.1rem; }
.rate-display, .current-rate, .live-rate, .rate-chip {
  background: var(--elite-green-soft);
  color: var(--elite-green-dark);
  border-radius: 999px;
  font-weight: 800;
  padding: .4rem 1rem;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  border: 1px solid rgba(46,204,113,.25);
}
.big-rate, .rate-number, .swap-rate-value {
  color: var(--elite-navy);
  font-weight: 800;
  font-size: clamp(1.4rem, 3.4vw, 2rem);
  letter-spacing: -0.02em;
}
.text-green, .text-success { color: var(--elite-success-text) !important; }
.text-red, .text-danger { color: var(--elite-error) !important; }
.positive, .up, .trend-up { color: var(--elite-success-text); font-weight: 700; }
.negative, .down, .trend-down { color: var(--elite-error); font-weight: 700; }

/* ---------------------------------------------------------------------------
   STATUS SYSTEM — Green success / Amber pending / Red failed only.
   --------------------------------------------------------------------------- */
.badge, .pill { font-weight: 600; border-radius: 999px; padding: .3rem .7rem; font-size: .78rem; }
.badge-success,
.pill-success,
.status-success,
.tag-success,
.swift-status-success {
  background: var(--elite-green-soft) !important;
  color: var(--elite-success-text) !important;
}
.badge-pending,
.pill-pending,
.status-pending,
.tag-pending,
.warning-badge,
.swift-status-pending {
  background: var(--elite-amber-soft) !important;
  color: var(--elite-amber-hover) !important;
}
.badge-danger,
.pill-danger,
.status-failed,
.tag-failed,
.swift-status-failed {
  background: var(--elite-error-soft) !important;
  color: var(--elite-error) !important;
}
.alert-success { background: var(--elite-green-soft); color: var(--elite-success-text); border-color: rgba(46,204,113,.35); }
.alert-warning { background: var(--elite-amber-soft); color: var(--elite-amber-hover); border-color: rgba(245,158,11,.45); }
.alert-danger, .alert-error { background: var(--elite-error-soft); color: var(--elite-error); border-color: rgba(217,45,32,.4); }
.alert-info { background: var(--elite-navy-50, #F1F4FA); color: var(--elite-navy); border-color: rgba(26,42,94,.2); }

/* ---------------------------------------------------------------------------
   TABLES — clean financial rows, mobile friendly.
   --------------------------------------------------------------------------- */
.table, .swift-table, table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  background: var(--elite-white);
  border: 1px solid var(--elite-border);
  border-radius: var(--elite-radius-md);
}
.table thead th {
  background: var(--elite-bg);
  color: var(--elite-navy);
  font-weight: 700;
  text-transform: uppercase;
  font-size: .76rem;
  letter-spacing: .05em;
  border-bottom: 1px solid var(--elite-border);
  padding: .85rem 1rem;
}
.table tbody td, .table td {
  padding: .9rem 1rem;
  border-bottom: 1px solid var(--elite-border);
  color: var(--elite-text);
}
.table tbody tr:last-child td { border-bottom: none; }
.table tbody tr:hover { background: #FAFBFD; }
.table-striped tbody tr:nth-of-type(odd) { background: #FAFBFD; }

/* ---------------------------------------------------------------------------
   HERO — calm white/light-gray stage, navy headline, green action.
   --------------------------------------------------------------------------- */
.hero-section, .hero, .swap-hero {
  background: linear-gradient(180deg, var(--elite-white) 0%, var(--elite-bg) 100%);
  border-bottom: 1px solid var(--elite-border);
}
.hero-label, .eyebrow {
  color: var(--elite-green-dark);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: .8rem;
}
.hero-subtitle, .hero p, .lead { color: var(--elite-text-soft); font-size: 1.05rem; }/* ---------------------------------------------------------------------------
   FOOTER — navy anchor with green hover links.
   --------------------------------------------------------------------------- */
.swift-footer, footer.swift-footer, .site-footer {
  background: var(--elite-navy) !important;
  color: rgba(255,255,255,.82);
  border-top: none;
}
.swift-footer h4, .swift-footer-heading {
  color: var(--elite-white);
  font-weight: 700;
  letter-spacing: .04em;
}
.swift-footer a, .site-footer a {
  color: rgba(255,255,255,.78);
  transition: color .16s ease;
}
.swift-footer a:hover, .site-footer a:hover { color: var(--elite-green); }

/* ---------------------------------------------------------------------------
   SIDEBAR (user dashboard + admin) — navy, green active indicator.
   --------------------------------------------------------------------------- */
.swift-sidebar, .sidebar, .admin-sidebar, .dashboard-sidebar,
[class*="sidebar"] {
  background: var(--elite-navy);
  color: #fff;
}
.swift-sidebar a, .sidebar a, .admin-sidebar a, .nav-sidebar a,
.sidebar .nav-link, [class*="sidebar"] a {
  color: rgba(255,255,255,.82);
  border-radius: var(--elite-radius);
  transition: background-color .16s ease, color .16s ease;
}
.swift-sidebar a:hover, .sidebar a:hover, .nav-sidebar a:hover,
[class*="sidebar"] a:hover { background: rgba(255,255,255,.08); color: #fff; }
.swift-sidebar a.active, .sidebar a.active, .nav-sidebar a.active,
.sidebar .nav-link.active, [class*="sidebar"] a.active {
  background: var(--elite-green);
  color: var(--elite-navy);
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(46,204,113,.35);
}

/* Stat chips / KPI numbers stay navy with green delta */
.stat-value, .kpi-value, .stat-number {
  color: var(--elite-navy);
  font-weight: 800;
  font-size: 1.6rem;
  letter-spacing: -0.02em;
}

/* ---------------------------------------------------------------------------
   AUTH SCREENS — white/light backdrop, navy headings, green action.
   --------------------------------------------------------------------------- */
.auth-page, .login-page, .auth-wrapper {
  background: var(--elite-bg);
}
.auth-card, .login-card {
  background: var(--elite-white);
  border: 1px solid var(--elite-border);
  border-radius: var(--elite-radius-lg);
  box-shadow: var(--elite-shadow);
  padding: 2.25rem;
}

/* ---------------------------------------------------------------------------
   Modal / dropdown transitions + loading buttons.
   --------------------------------------------------------------------------- */
.modal-content, .swift-modal, [class*="modal"] .modal-content {
  border-radius: var(--elite-radius-lg);
  border: 1px solid var(--elite-border);
}
.modal-backdrop.show { background-color: rgba(14,27,64,.55); }
.dropdown-menu {
  border: 1px solid var(--elite-border);
  border-radius: var(--elite-radius);
  box-shadow: var(--elite-shadow);
  padding: .4rem;
}
.dropdown-menu a { border-radius: var(--elite-radius-sm); }
.spinner-border, .swift-spinner { border-color: rgba(46,204,113,.25); border-right-color: var(--elite-green); }
.btn.loading, .swift-btn.loading, .swift-btn[disabled] { opacity: .65; cursor: wait; }

/* Small button variants inherit the button system */
.btn-sm, .swift-btn-sm { height: 34px; padding: 0 .9rem; font-size: .85rem; }
.btn-lg, .swift-btn-lg { height: 50px; padding: 0 1.8rem; font-size: 1rem; }

/* ---------------------------------------------------------------------------
   Responsive refinements — never shrink: reorganize.
   --------------------------------------------------------------------------- */
@media (max-width: 992px) {
  .swift-nav-inner { padding: .7rem 1rem; }
  .swift-nav-links { gap: 1rem; }
}
@media (max-width: 768px) {
  .auth-card, .login-card { padding: 1.6rem; }
  .table-responsive { -webkit-overflow-scrolling: touch; }
  /* cards not overflowing */
  .swift-card, .swap-card { padding: 1.25rem; }
  .hero-title { font-size: 1.75rem; }
}
@media (max-width: 576px) {
  .swift-btn { width: 100%; }
}

/* Hide any accidental horizontal overflow from full-bleed rows */
body, .container, .container-fluid { overflow-x: clip; }

/* ===========================================================================
   ELITE RMB — FINAL BRAND CONSISTENCY LAYER  (authoritative)
   ---------------------------------------------------------------------------
   Deep Navy #1A2A5E · Blue #1758D1 · Green #20B96B · White · Light #F5F8FC
   This block is intentionally LAST so it wins the cascade and resolves the
   accumulated orange/purple/cobalt contradictions above. No HTML/PHP/JS is
   changed by these rules — only colour, radius and shadow tokens.
   ======================================================================== */

:root {
  /* Core brand tokens (single source of truth) */
  --elite-navy: #1A2A5E;
  --elite-navy-hover: #16224A;
  --elite-navy-muted: #2D3F7A;
  --elite-blue: #1758D1;
  --elite-blue-hover: #0F47B0;
  --elite-blue-soft: #EAF1FD;
  --elite-green: #20B96B;
  --elite-green-hover: #1AA25C;
  --elite-green-dark: #178A4E;
  --elite-green-soft: #E8F8F0;
  --elite-bg: #F5F8FC;
  --elite-white: #FFFFFF;
  --elite-text: #14213D;
  --elite-text-soft: #64748B;
  --elite-muted: #8A94A6;
  --elite-border: #E2E8F0;
  --elite-border-strong: #CBD5E1;
  --elite-amber: #D97706;
  --elite-amber-soft: #FEF6E7;
  --elite-error: #DC2626;
  --elite-error-soft: #FEF2F2;
  --elite-success-text: #178A4E;

  /* Keep the legacy --swift-* tokens pointed at NAVY for "primary" and GREEN
     for "accent/cta". This fixes the earlier bug where --swift-primary had
     been repointed to green. */
  --swift-primary: #1A2A5E;
  --swift-primary-hover: #16224A;
  --swift-primary-light: #2D3F7A;
  --swift-primary-soft: #F1F4FA;
  --swift-accent: #20B96B;
  --swift-accent-hover: #1AA25C;
  --swift-accent-soft: #E8F8F0;
  --swift-green: #20B96B;
  --swift-green-dark: #178A4E;
  --swift-green-soft: #E8F8F0;
  /* Legacy "orange" tokens now mean ELITE green (CTA/action) */
  --swift-orange: #20B96B;
  --swift-orange-dark: #1AA25C;
  --swift-orange-soft: #E8F8F0;
  --swift-amber: #D97706;
  --swift-amber-light: #FEF6E7;
  --swift-red: #DC2626;
  --swift-red-light: #FEF2F2;
}

/* --- Admin / dashboard sidebar: deep navy, quiet items, green active ------- */
.page-admin .swift-sidebar,
.page-admin .sidebar,
.page-client .swift-sidebar,
.swift-sidebar,
[class*="sidebar"] {
  background: var(--elite-navy) !important;
  background-image: none !important;
  color: #E6EAF2;
}

.swift-sidebar-nav a,
.page-admin .swift-sidebar-nav a,
.swift-sidebar a,
[class*="sidebar"] nav a {
  background: transparent !important;
  border-left: 3px solid transparent !important;
  color: rgba(230, 234, 242, 0.82) !important;
  border-radius: 8px;
}

.swift-sidebar-nav a i,
.page-admin .swift-sidebar-nav a i,
[class*="sidebar"] nav a i {
  color: rgba(230, 234, 242, 0.62) !important;
}

.swift-sidebar-nav a:hover,
.page-admin .swift-sidebar-nav a:hover,
[class*="sidebar"] nav a:hover {
  background: rgba(255, 255, 255, 0.06) !important;
  color: #FFFFFF !important;
  border-left-color: transparent !important;
}

.swift-sidebar-nav a:hover i,
[class*="sidebar"] nav a:hover i { color: #FFFFFF !important; }

/* Active item: subtle green indicator + soft highlight, readable text */
.swift-sidebar-nav a.active,
.page-admin .swift-sidebar-nav a.active,
[class*="sidebar"] nav a.active {
  background: rgba(32, 185, 107, 0.16) !important;
  border-left: 3px solid var(--elite-green) !important;
  color: #FFFFFF !important;
  font-weight: 600;
  box-shadow: none !important;
}
.swift-sidebar-nav a.active i,
[class*="sidebar"] nav a.active i { color: var(--elite-green) !important; }
.swift-sidebar-nav a.active::before { display: none !important; }

.swift-sidebar-brand i,
.page-admin .swift-sidebar-brand i { color: var(--elite-green) !important; }
.swift-sidebar-section-title { color: rgba(230, 234, 242, 0.45) !important; }
.swift-sidebar-subtitle { color: rgba(230, 234, 242, 0.55) !important; }

/* Sidebar logout: quiet, not a red block */
.swift-sidebar-footer a,
[class*="sidebar"] .swift-sidebar-footer a {
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  color: rgba(230, 234, 242, 0.85) !important;
}
.swift-sidebar-footer a:hover {
  background: rgba(220, 38, 38, 0.14) !important;
  border-color: rgba(220, 38, 38, 0.4) !important;
  color: #FCA5A5 !important;
}

/* --- Remove orange residual shadows on CTA buttons -------------------------- */
.swift-btn-cta,
.page-client .swift-btn-cta,
.btn-orange {
  box-shadow: 0 2px 8px rgba(32, 185, 107, 0.24) !important;
}
.swift-btn-cta:hover,
.page-client .swift-btn-cta:hover,
.btn-orange:hover {
  box-shadow: 0 4px 14px rgba(32, 185, 107, 0.30) !important;
}

/* --- Focus ring: brand blue (accessible) ----------------------------------- */
.swift-btn:focus-visible,
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid rgba(23, 88, 209, 0.35) !important;
  outline-offset: 2px;
}

/* --- Links: blue by default in content, green reserved for actions --------- */
a { color: var(--elite-blue); }
a:hover { color: var(--elite-blue-hover); }

/* ===========================================================================
   END — ELITE RMB FINAL BRAND LAYER
   ======================================================================== */
/* ===========================================================================
   ELITE RMB — ADMIN DASHBOARD COMPONENTS
   ======================================================================== */

.elite-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}
@media (max-width: 1023px) { .elite-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .elite-stat-grid { grid-template-columns: 1fr; } }

.elite-stat,
.admin-stat-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--elite-white, #fff) !important;
  border: 1px solid var(--elite-border, #E2E8F0) !important;
  border-radius: 12px !important;
  box-shadow: 0 1px 2px rgba(20, 33, 61, 0.04) !important;
  padding: 18px 20px !important;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.elite-stat:hover,
.admin-stat-card:hover {
  border-color: var(--elite-border-strong, #CBD5E1) !important;
  box-shadow: 0 2px 8px rgba(20, 33, 61, 0.06) !important;
  transform: none !important;
}
.elite-stat-icon {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  background: var(--elite-bg, #F5F8FC);
  color: var(--elite-navy, #1A2A5E);
}
.elite-stat-icon--navy { background: #EEF1F8; color: #1A2A5E; }
.elite-stat-icon--blue { background: #EAF1FD; color: #1758D1; }
.elite-stat-icon--green { background: #E8F8F0; color: #178A4E; }
.elite-stat-icon--amber { background: #FEF6E7; color: #B45309; }
.elite-stat-label {
  margin: 0 0 2px;
  font-size: .78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--elite-text-soft, #64748B) !important;
}
.elite-stat-value {
  margin: 0;
  font-size: 1.55rem;
  font-weight: 800;
  line-height: 1.1;
  color: var(--elite-navy, #1A2A5E) !important;
  font-variant-numeric: tabular-nums;
}
.elite-stat-unit {
  font-size: .78rem;
  font-weight: 700;
  color: var(--elite-text-soft, #64748B);
  margin-left: 5px;
}

/* Current Rates card (admin) */
.elite-rates-card {
  background: var(--elite-white, #fff);
  border: 1px solid var(--elite-border, #E2E8F0);
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(20, 33, 61, 0.04);
  padding: 22px;
  margin-bottom: 24px;
}
.elite-rates-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.elite-rates-card__title {
  margin: 0;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--elite-navy, #1A2A5E);
}
.elite-rate-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--elite-border, #E2E8F0);
}
.elite-rate-row:last-of-type { border-bottom: none; }
.elite-rate-row__label {
  font-size: .95rem;
  font-weight: 600;
  color: var(--elite-text, #14213D);
}
.elite-rate-row__value {
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--elite-navy, #1A2A5E);
  font-variant-numeric: tabular-nums;
}
.elite-rate-row__cur {
  font-size: .8rem;
  font-weight: 700;
  color: var(--elite-text-soft, #64748B);
  margin-left: 3px;
}
.elite-rates-card__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--elite-border, #E2E8F0);
  font-size: .8rem;
  color: var(--elite-text-soft, #64748B);
}
.elite-rates-card__foot i { color: var(--elite-green, #20B96B); margin-right: 4px; }

/* Quick actions */
.elite-quick-actions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}
@media (max-width: 900px) { .elite-quick-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .elite-quick-actions { grid-template-columns: 1fr; } }
.elite-quick-action {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  background: var(--elite-white, #fff);
  border: 1px solid var(--elite-border, #E2E8F0);
  border-radius: 10px;
  font-size: .9rem;
  font-weight: 600;
  color: var(--elite-navy, #1A2A5E) !important;
  text-decoration: none;
  transition: border-color .15s ease, background-color .15s ease;
}
.elite-quick-action i { color: var(--elite-blue, #1758D1); font-size: .95rem; }
.elite-quick-action:hover {
  border-color: var(--elite-blue, #1758D1);
  background: var(--elite-blue-soft, #EAF1FD);
}
/* ===========================================================================
   ELITE RMB — UTILITY NORMALISATION LAYER
   ---------------------------------------------------------------------------
   The admin/customer templates were built on Tailwind utility classes that use
   indigo (purple-leaning) and orange accents. This block maps every one of
   those utilities onto the ELITE RMB palette (navy / blue / green / white) for
   BOTH `.page-admin` and `.page-client`, so the admin panel stops looking like
   a separate purchased template. Pure CSS — no PHP/JS behaviour is touched.
   ======================================================================== */

/* --- Indigo / violet / purple → ELITE navy + blue -------------------------- */
.page-admin .bg-indigo-50, .page-admin .bg-indigo-100, .page-admin .bg-indigo-200,
.page-admin .bg-purple-50, .page-admin .bg-purple-100, .page-admin .bg-violet-50,
.page-admin .bg-violet-100, .page-admin .bg-blue-50, .page-admin .bg-blue-100,
.page-client .bg-purple-50, .page-client .bg-purple-100, .page-client .bg-violet-50,
.page-client .bg-violet-100 {
  background-color: var(--elite-blue-soft, #EAF1FD) !important;
}
.page-admin .bg-indigo-500, .page-admin .bg-indigo-600, .page-admin .bg-indigo-700,
.page-admin .bg-purple-500, .page-admin .bg-purple-600, .page-admin .bg-violet-500,
.page-admin .bg-violet-600, .page-admin .bg-blue-600, .page-admin .bg-blue-700 {
  background-color: var(--elite-navy, #1A2A5E) !important;
  color: #fff !important;
}
.page-admin .hover\:bg-indigo-700:hover, .page-admin .hover\:bg-indigo-600:hover,
.page-admin .hover\:bg-purple-600:hover, .page-admin .hover\:bg-blue-700:hover {
  background-color: var(--elite-navy-hover, #16224A) !important;
}
.page-admin .text-indigo-500, .page-admin .text-indigo-600, .page-admin .text-indigo-700,
.page-admin .text-indigo-800, .page-admin .text-purple-500, .page-admin .text-purple-600,
.page-admin .text-purple-700, .page-admin .text-violet-500, .page-admin .text-violet-600,
.page-admin .text-blue-500, .page-admin .text-blue-600, .page-admin .text-blue-700 {
  color: var(--elite-blue, #1758D1) !important;
}
.page-admin .border-indigo-100, .page-admin .border-indigo-200, .page-admin .border-indigo-500,
.page-admin .border-purple-100, .page-admin .border-purple-200, .page-admin .border-violet-200,
.page-admin .border-blue-100, .page-admin .border-blue-200 {
  border-color: var(--elite-border, #E2E8F0) !important;
}
.page-admin .ring-indigo-500, .page-admin .focus\:ring-indigo-500:focus,
.page-admin .focus\:ring-indigo-200:focus, .page-admin .focus\:border-indigo-300:focus {
  --tw-ring-color: rgba(23, 88, 209, .35) !important;
  border-color: var(--elite-blue, #1758D1) !important;
}
.page-admin input[type="checkbox"].text-indigo-600,
.page-admin input[type="radio"].text-indigo-600 {
  color: var(--elite-blue, #1758D1) !important;
}

/* --- Orange (legacy CTA + icon accent) → ELITE green or neutral ------------ */
.page-admin .bg-orange-50, .page-admin .bg-orange-100,
.page-client .bg-orange-50, .page-client .bg-orange-100 {
  background-color: var(--elite-green-soft, #E8F8F0) !important;
}
.page-admin .bg-orange-400, .page-admin .bg-orange-500, .page-admin .bg-orange-600,
.page-client .bg-orange-500, .page-client .bg-orange-600 {
  background-color: var(--elite-green, #20B96B) !important;
  color: #fff !important;
}
.page-admin .hover\:bg-orange-500:hover, .page-admin .hover\:bg-orange-600:hover,
.page-client .hover\:bg-orange-600:hover {
  background-color: var(--elite-green-hover, #1AA25C) !important;
}
.page-admin .text-orange-400, .page-admin .text-orange-500, .page-admin .text-orange-600,
.page-admin .text-orange-700 {
  color: var(--elite-green-dark, #178A4E) !important;
}
.page-client .text-orange-500, .page-client .text-orange-600 {
  color: var(--elite-green-dark, #178A4E) !important;
}
.page-admin .border-orange-400, .page-admin .border-orange-500,
.page-client .border-orange-200, .page-client .border-orange-300 {
  border-color: rgba(32, 185, 107, .4) !important;
}

/* --- Restrained status colours inside admin (green/blue/amber/red only) ---- */
.page-admin .bg-green-50, .page-admin .bg-green-100 { background-color: var(--elite-green-soft, #E8F8F0) !important; }
.page-admin .bg-green-500, .page-admin .bg-green-600 { background-color: var(--elite-green, #20B96B) !important; color: #fff !important; }
.page-admin .text-green-600, .page-admin .text-green-700, .page-admin .text-green-800 { color: var(--elite-success-text, #178A4E) !important; }
.page-admin .bg-yellow-50, .page-admin .bg-yellow-100, .page-admin .bg-amber-50, .page-admin .bg-amber-100 { background-color: var(--elite-amber-soft, #FEF6E7) !important; }
.page-admin .text-yellow-600, .page-admin .text-yellow-700, .page-admin .text-yellow-800,
.page-admin .text-amber-600, .page-admin .text-amber-700 { color: #B45309 !important; }
.page-admin .bg-red-50, .page-admin .bg-red-100 { background-color: var(--elite-error-soft, #FEF2F2) !important; }
.page-admin .text-red-600, .page-admin .text-red-700, .page-admin .text-red-800 { color: var(--elite-error, #DC2626) !important; }
.page-admin .bg-blue-50, .page-admin .bg-blue-100 { background-color: var(--elite-blue-soft, #EAF1FD) !important; }

/* --- Gradients: kill decorative multi-stop gradients in admin content ------ */
.page-admin .bg-gradient-to-r,
.page-admin .bg-gradient-to-br,
.page-admin .bg-gradient-to-b,
.page-admin .bg-gradient-to-l,
.page-admin .bg-gradient {
  background-image: none !important;
  background-color: var(--elite-navy, #1A2A5E) !important;
}
.page-admin .admin-content .bg-gradient-to-r,
.page-admin .admin-content .bg-gradient-to-br {
  background-color: var(--elite-bg, #F5F8FC) !important;
  color: inherit !important;
}

/* --- Admin surfaces: consistent cards, borders, radius, shadow ------------- */
.page-admin {
  background: var(--elite-bg, #F5F8FC) !important;
  color: var(--elite-text, #14213D);
}
.page-admin .admin-content { padding: clamp(1rem, 2.2vw, 1.75rem); }
.page-admin .shadow-lg, .page-admin .shadow-xl, .page-admin .shadow-md {
  box-shadow: 0 1px 2px rgba(20, 33, 61, .05) !important;
}
.page-admin .rounded-xl, .page-admin .rounded-2xl { border-radius: 12px !important; }
.page-admin .hover\:shadow-xl:hover, .page-admin .hover\:shadow-lg:hover {
  box-shadow: 0 2px 10px rgba(20, 33, 61, .07) !important;
}
/* Tables in admin: fiscal, quiet header, tabular numbers */
.page-admin .admin-content table { width: 100%; border-collapse: collapse; }
.page-admin .admin-content table thead { background: var(--elite-bg, #F5F8FC); }
.page-admin .admin-content table thead th {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  font-weight: 700;
  color: var(--elite-text-soft, #64748B) !important;
  border-bottom: 1px solid var(--elite-border, #E2E8F0);
}
.page-admin .admin-content table tbody td {
  border-bottom: 1px solid var(--elite-border, #E2E8F0);
  color: var(--elite-text, #14213D);
  font-variant-numeric: tabular-nums;
}
.page-admin .admin-content table tbody tr:hover { background: #F8FAFC; }
.page-admin .admin-content h1, .page-admin .admin-content h2,
.page-admin .admin-content h3 { color: var(--elite-navy, #1A2A5E) !important; }

@media (max-width: 767px) {
  /* Stack admin tables into labelled cards instead of horizontally scrolling */
  .page-admin .mobile-stack-table { min-width: 0 !important; width: 100%; display: block; }
  .page-admin .mobile-stack-table thead { display: none; }
  .page-admin .mobile-stack-table, .page-admin .mobile-stack-table tbody,
  .page-admin .mobile-stack-table tr, .page-admin .mobile-stack-table td { display: block; width: 100%; }
  .page-admin .mobile-stack-table tr {
    padding: 14px 16px; margin-bottom: 10px;
    border: 1px solid var(--elite-border, #E2E8F0);
    border-radius: 10px; background: #fff;
  }
  .page-admin .mobile-stack-table td { padding: 5px 0 !important; white-space: normal; }
  .page-admin .mobile-stack-table td:before {
    content: attr(data-label);
    display: inline-block; min-width: 110px;
    color: var(--elite-text-soft, #64748B);
    font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
  }
}

/* ===========================================================================
   ELITE RMB — CUSTOMER TRANSACTION WORKFLOW COMPONENTS
   Used by the redesigned transaction form on the customer dashboard.
   =========================================================================== */

.tx-workspace {
  background: var(--elite-white, #fff);
  border: 1px solid var(--elite-border, #E2E8F0);
  border-radius: 14px;
  overflow: hidden;
}
.tx-workspace__head {
  padding: 22px 24px 18px;
  border-bottom: 1px solid var(--elite-border, #E2E8F0);
}
.tx-workspace__eyebrow {
  margin: 0 0 4px;
  font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--elite-green-dark, #178A4E);
}
.tx-workspace__title {
  margin: 0; font-size: 1.35rem; font-weight: 800; color: var(--elite-navy, #1A2A5E);
}
.tx-workspace__sub { margin: 6px 0 0; font-size: .9rem; color: var(--elite-text-soft, #64748B); }

.tx-section { padding: 22px 24px; border-bottom: 1px solid var(--elite-border, #E2E8F0); }
.tx-section:last-of-type { border-bottom: none; }
.tx-section__title {
  margin: 0 0 16px; font-size: .76rem; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--elite-navy, #1A2A5E);
}
.tx-section__hint { margin: 6px 0 0; font-size: .8rem; color: var(--elite-text-soft, #64748B); }

/* Direction selector: two quiet options, clear selected state */
.tx-direction {
  display: inline-flex; padding: 3px; gap: 3px;
  background: var(--elite-bg, #F5F8FC);
  border: 1px solid var(--elite-border, #E2E8F0);
  border-radius: 10px;
}
.tx-direction button {
  appearance: none; border: none; background: transparent; cursor: pointer;
  padding: 9px 16px; border-radius: 8px;
  font-size: .85rem; font-weight: 600; color: var(--elite-text-soft, #64748B);
  transition: background-color .15s ease, color .15s ease;
}
.tx-direction button:hover { color: var(--elite-navy, #1A2A5E); }
.tx-direction button.is-active {
  background: var(--elite-navy, #1A2A5E); color: #fff;
}

/* Amount fields with a small, professional swap control between them */
.tx-amounts { display: grid; gap: 12px; }
.tx-amount {
  border: 1px solid var(--elite-border, #E2E8F0);
  border-radius: 10px; background: #fff; padding: 12px 14px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.tx-amount:focus-within {
  border-color: var(--elite-blue, #1758D1);
  box-shadow: 0 0 0 3px rgba(23, 88, 209, .12);
}
.tx-amount__label {
  display: block; font-size: .74rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--elite-text-soft, #64748B); margin-bottom: 6px;
}
.tx-amount__row { display: flex; align-items: center; gap: 10px; }
.tx-amount__symbol { font-size: 1.1rem; font-weight: 700; color: var(--elite-navy, #1A2A5E); }
.tx-amount__input {
  flex: 1; min-width: 0; border: none; outline: none; background: transparent;
  font-size: 1.5rem; font-weight: 700; color: var(--elite-navy, #1A2A5E);
  font-variant-numeric: tabular-nums;
}
.tx-amount__input[readonly] { color: var(--elite-text, #14213D); }

.tx-swap {
  display: flex; align-items: center; justify-content: center;
  margin: -4px 0;
}
.tx-swap button {
  display: inline-flex; align-items: center; gap: 7px;
  height: 36px; padding: 0 14px;
  border: 1px solid var(--elite-border-strong, #CBD5E1);
  border-radius: 999px; background: #fff; cursor: pointer;
  font-size: .78rem; font-weight: 700; color: var(--elite-navy, #1A2A5E);
  box-shadow: 0 1px 2px rgba(20, 33, 61, .05);
  transition: border-color .15s ease, color .15s ease, background-color .15s ease;
}
.tx-swap button:hover {
  border-color: var(--elite-blue, #1758D1);
  color: var(--elite-blue, #1758D1);
  background: var(--elite-blue-soft, #EAF1FD);
}
.tx-swap button i { font-size: .8rem; }

/* Applicable-rate strip */
.tx-rate {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 14px; padding: 12px 14px;
  background: var(--elite-green-soft, #E8F8F0);
  border: 1px solid rgba(32, 185, 107, .28);
  border-radius: 10px;
  font-size: .85rem; color: var(--elite-navy, #1A2A5E);
}
.tx-rate__label { font-weight: 600; color: var(--elite-text-soft, #64748B); }
.tx-rate__value { font-weight: 800; font-variant-numeric: tabular-nums; }

/* Form grid */
.tx-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 900px) { .tx-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .tx-grid { grid-template-columns: 1fr; } }
.tx-field { display: flex; flex-direction: column; }
.tx-field label {
  font-size: .8rem; font-weight: 600; color: var(--elite-text, #14213D); margin-bottom: 7px;
}
.tx-field .req { color: var(--elite-error, #DC2626); }
.tx-field input, .tx-field select, .tx-field textarea {
  width: 100%; min-height: 44px; padding: 10px 12px;
  font-size: .92rem; color: var(--elite-text, #14213D);
  background: #fff;
  border: 1px solid var(--elite-border-strong, #CBD5E1);
  border-radius: 9px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.tx-field textarea { min-height: 84px; resize: vertical; }
.tx-field input:focus, .tx-field select:focus, .tx-field textarea:focus {
  outline: none; border-color: var(--elite-blue, #1758D1);
  box-shadow: 0 0 0 3px rgba(23, 88, 209, .12);
}

/* QR upload — a clean control, not a decorative dropzone */
.tx-upload {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 14px 16px;
  border: 1px dashed var(--elite-border-strong, #CBD5E1);
  border-radius: 10px; background: #FAFCFE;
}
.tx-upload__icon {
  width: 40px; height: 40px; flex-shrink: 0; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  background: var(--elite-blue-soft, #EAF1FD); color: var(--elite-blue, #1758D1);
}
.tx-upload__text { flex: 1; min-width: 160px; }
.tx-upload__text strong { display: block; font-size: .9rem; color: var(--elite-navy, #1A2A5E); }
.tx-upload__text span { font-size: .78rem; color: var(--elite-text-soft, #64748B); }
.tx-upload__preview { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.tx-upload__preview img {
  width: 84px; height: 84px; object-fit: contain;
  border: 1px solid var(--elite-border, #E2E8F0); border-radius: 9px; background: #fff;
}

/* Transaction summary — a receipt, not a card-in-a-card */
.tx-summary {
  background: var(--elite-bg, #F5F8FC);
  border: 1px solid var(--elite-border, #E2E8F0);
  border-radius: 10px; padding: 16px;
}
.tx-summary__row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 8px 0; font-size: .9rem;
}
.tx-summary__row + .tx-summary__row { border-top: 1px solid var(--elite-border, #E2E8F0); }
.tx-summary__label { color: var(--elite-text-soft, #64748B); }
.tx-summary__value { font-weight: 700; color: var(--elite-navy, #1A2A5E); font-variant-numeric: tabular-nums; }
.tx-summary__row--total .tx-summary__value { font-size: 1.15rem; font-weight: 800; }

@media (max-width: 560px) {
  .tx-workspace__head, .tx-section { padding: 18px 16px; }
  .tx-amount__input { font-size: 1.3rem; }
  .tx-swap { margin: -2px 0; }
}
/* ===========================================================================
   ELITE RMB — INTERFACE REFINEMENT PASS  (authoritative, loaded last)
   ---------------------------------------------------------------------------
   Small, deliberate corrections on top of the design system above. No layout
   is restructured and no behaviour is touched — only the remaining visual
   inconsistencies that made the surface feel un-finished:

     1. Header logout reads as navigation, not an alarm (quiet outline).
     2. The amount fields no longer draw a doubled focus ring.
     3. Legacy Tailwind focus rings (orange / indigo) resolve to brand blue.
     4. Status badges use one restrained, colour-blind-safe treatment.
     5. Customer tables become clean stacked cards on small screens.
     6. Reduced-motion: the marquee/live pulse stop animating.

   Palette: Navy #1A2A5E · Blue #1758D1 · Green #20B96B · White · #F5F8FC
   ======================================================================== */

/* --- 1. Header logout: quiet, separated, on-brand -------------------------- */
/* The client navbar sits on a navy bar, so the logout label must be light ink
   — navy-on-navy (the old value) made "Logout" invisible until hover. */
.page-client .swift-nav .swift-btn-danger,
.page-client .swift-nav .swift-btn.swift-btn-danger {
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.4) !important;
  color: #E7ECF6 !important;
  box-shadow: none !important;
  font-weight: 600;
}
.page-client .swift-nav .swift-btn-danger:hover,
.page-client .swift-nav .swift-btn.swift-btn-danger:hover {
  background: #fff !important;
  border-color: #fff !important;
  color: var(--elite-navy, #1A2A5E) !important;
}

/* --- 2. Amount fields: single, consistent focus treatment ------------------ */
.tx-amount__input:focus,
.tx-amount__input:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}
/* Never let the browser paint its own ring inside the styled shell */
.tx-amount input[type="number"],
.tx-amount input[type="text"] {
  appearance: textfield;
  -moz-appearance: textfield;
}
.tx-amount input[type="number"]::-webkit-outer-spin-button,
.tx-amount input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* --- 3. Legacy Tailwind focus rings → brand blue --------------------------- */
.page-client .focus\:ring-orange-500:focus,
.page-client .focus\:ring-indigo-500:focus,
.page-client .focus\:ring-blue-500:focus,
.page-client .focus\:ring-indigo-200:focus {
  --tw-ring-color: rgba(23, 88, 209, .35) !important;
  --tw-ring-opacity: 1 !important;
  border-color: var(--elite-blue, #1758D1) !important;
}
.page-client .focus\:ring-offset-2:focus { --tw-ring-offset-width: 2px !important; }

/* --- 4. One restrained status-badge treatment ------------------------------ */
.elite-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .02em;
  border: 1px solid transparent;
  white-space: nowrap;
}
/* A leading dot gives every status a non-colour cue (accessibility) */
.elite-status::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}
.elite-status--completed,
.elite-status--successful { background: var(--elite-green-soft, #E8F8F0); color: var(--elite-success-text, #178A4E); border-color: rgba(32,185,107,.3); }
.elite-status--processing  { background: var(--elite-blue-soft, #EAF1FD); color: var(--elite-blue, #1758D1); border-color: rgba(23,88,209,.25); }
.elite-status--pending,
.elite-status--awaiting    { background: var(--elite-amber-soft, #FEF6E7); color: #B45309; border-color: rgba(217,119,6,.28); }
.elite-status--cancelled,
.elite-status--rejected,
.elite-status--failed      { background: var(--elite-error-soft, #FEF2F2); color: var(--elite-error, #DC2626); border-color: rgba(220,38,38,.25); }
.elite-status--verified    { background: var(--elite-green-soft, #E8F8F0); color: var(--elite-success-text, #178A4E); border-color: rgba(32,185,107,.3); }

/* --- 5. Customer tables → stacked cards on small screens ------------------- */
@media (max-width: 767px) {
  .page-client .tx-history-table { display: block; width: 100%; }
  .page-client .tx-history-table thead { display: none; }
  .page-client .tx-history-table tbody,
  .page-client .tx-history-table tr,
  .page-client .tx-history-table td { display: block; width: 100%; }
  .page-client .tx-history-table tr {
    border: 1px solid var(--elite-border, #E2E8F0);
    border-radius: 10px;
    background: #fff;
    padding: 12px 14px;
    margin-bottom: 10px;
  }
  .page-client .tx-history-table td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 0 !important;
    border: none !important;
    white-space: normal !important;
    text-align: right;
  }
  .page-client .tx-history-table td::before {
    content: attr(data-label);
    flex: 0 0 auto;
    color: var(--elite-text-soft, #64748B);
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
    text-align: left;
  }
}

/* --- 6. Respect reduced-motion preferences --------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .swift-announcement-text { animation: none !important; }
  .hero-rate-card .swift-live-indicator::before,
  [class*="live-dot"] { animation: none !important; }
  * { scroll-behavior: auto !important; }
}
/* ===========================================================================
   ELITE RMB — STANDARD RATE DISPLAY  (§6 / §23)
   ---------------------------------------------------------------------------
   One presentation for the two-tier RMB rate, reused on the homepage, the
   customer dashboard, the admin dashboard and the admin rate manager, so the
   rate always looks identical wherever a customer or admin meets it. Values
   are always supplied by the existing two-tier rate service — nothing here
   hardcodes a number.
   ======================================================================== */

.elite-rate-display {
  background: var(--elite-white, #fff);
  border: 1px solid var(--elite-border, #E2E8F0);
  border-radius: 12px;
  overflow: hidden;
}

.elite-rate-display__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--elite-border, #E2E8F0);
}
.elite-rate-display__title {
  margin: 0;
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--elite-navy, #1A2A5E);
}

.elite-rate-display__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--elite-border, #E2E8F0);
}
.elite-rate-display__row:last-of-type { border-bottom: none; }

.elite-rate-display__tier {
  font-size: .9rem;
  font-weight: 600;
  color: var(--elite-text, #14213D);
  letter-spacing: .01em;
}
.elite-rate-display__value {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--elite-navy, #1A2A5E);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.elite-rate-display__value small {
  font-size: .74rem;
  font-weight: 700;
  color: var(--elite-text-soft, #64748B);
  margin-left: 4px;
}

.elite-rate-display__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 18px;
  padding: 12px 18px;
  background: var(--elite-bg, #F5F8FC);
  border-top: 1px solid var(--elite-border, #E2E8F0);
  font-size: .78rem;
  color: var(--elite-text-soft, #64748B);
}
.elite-rate-display__foot i { color: var(--elite-green, #20B96B); margin-right: 5px; }
/* ═══════
   ELITE RMB — BRAND ALIGNMENT LAYER (v6)
   ---------------------------------------------------------------------------
   The design system is shared by every page (public, auth, customer, admin).
   This layer exists so the whole product uses ONE brand palette:

       Deep Navy      #1A2A5E   (structure / sidebar / footer)
       Professional   #1758D1   (primary actions, links, brand accents)
       ELITE Green    #20B96B   (primary CTA, success)
       Page bg        #F5F8FC
       Text           #14213D / #64748B
       Border         #E2E8F0

   It deliberately REPLACES the earlier orange/purple accents (admin sidebar
   gradient + orange iconography) without touching markup or behaviour.
   ═══════ */

:root {
  --elite-navy: #1A2A5E;
  --elite-navy-700: #14213D;
  --elite-navy-600: #253A7A;
  --elite-blue: #1758D1;
  --elite-blue-dark: #0F47B0;
  --elite-blue-soft: #EAF1FF;
  --elite-green: #20B96B;
  --elite-green-dark: #179352;
  --elite-green-soft: #EAF9F0;
  --elite-page: #F5F8FC;
  --elite-text: #14213D;
  --elite-text-muted: #64748B;
  --elite-border: #E2E8F0;

  /* Legacy aliases still referenced across older pages — re-point them at the
     brand palette so nothing silently falls back to orange/purple. */
  --swift-orange: var(--elite-blue);
  --swift-navy-900: var(--elite-navy);
  --swift-navy-700: var(--elite-navy-600);
  --swift-navy-100: var(--elite-blue-soft);
}

/* ── 1. Buttons ──────────────────────────── */
.swift-btn-primary,
.btn-primary {
  background: var(--elite-blue);
  border-color: var(--elite-blue);
  color: #fff;
}
.swift-btn-primary:hover,
.btn-primary:hover {
  background: var(--elite-blue-dark);
  border-color: var(--elite-blue-dark);
}
.swift-btn-cta,
.swift-btn-success {
  background: var(--elite-green);
  border-color: var(--elite-green);
  color: #fff;
}
.swift-btn-cta:hover,
.swift-btn-success:hover {
  background: var(--elite-green-dark);
  border-color: var(--elite-green-dark);
}

/* ── 2. Admin sidebar: deep navy, blue/green accents (no gradient, no orange) ─ */
.page-admin .swift-sidebar,
.swift-sidebar {
  background: var(--elite-navy);
  color: #fff;
  box-shadow: 2px 0 18px rgba(20, 33, 61, .14);
}

.page-admin .swift-sidebar-nav a,
.swift-sidebar-nav a {
  background: transparent;
  border-left: 3px solid transparent;
  color: rgba(255, 255, 255, .74);
}
.page-admin .swift-sidebar-nav a:hover,
.swift-sidebar-nav a:hover {
  background: rgba(255, 255, 255, .07);
  color: #fff;
  border-left-color: transparent;
}
.page-admin .swift-sidebar-nav a.active,
.swift-sidebar-nav a.active {
  background: rgba(255, 255, 255, .10);
  color: #fff;
  border-left-color: var(--elite-green);
}
.page-admin .swift-sidebar-nav a.active::before,
.swift-sidebar-nav a.active::before {
  background: var(--elite-green);
}
.swift-sidebar-nav a i { color: inherit; opacity: .9; }
.page-admin .swift-sidebar-nav a.active i { color: var(--elite-green); }

.page-admin .swift-sidebar-brand i,
.swift-sidebar-brand i { color: var(--elite-green); }

.swift-sidebar-section-title {
  color: rgba(255, 255, 255, .42);
  text-transform: uppercase;
  letter-spacing: .09em;
  font-weight: 700;
}

.swift-sidebar-footer a:hover { background: rgba(255, 255, 255, .08); }

/* ── 3. Admin header: no clipping, no stray white blocks ─────────────────── */
.page-admin .admin-topbar {
  background: #fff;
  border-bottom: 1px solid var(--elite-border);
  min-height: 64px;
  gap: 1rem;
  overflow: visible;
}
.page-admin .admin-topbar h2 {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  margin: 0;
}
.page-admin .admin-main { min-width: 0; max-width: 100%; }

/* ── 4. Status badges — one vocabulary across customer + admin ───────────── */
.swift-badge {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .25rem .6rem;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .01em;
  white-space: nowrap;
}
.swift-badge-success { background: var(--elite-green-soft); color: #0F7A3D; }
.swift-badge-warning { background: #FFF7E6; color: #8A5A00; }
.swift-badge-error   { background: #FEF3F2; color: #B42318; }
.swift-badge-info    { background: var(--elite-blue-soft); color: var(--elite-blue-dark); }
.swift-badge-muted   { background: #EEF2F7; color: var(--elite-text-muted); }

/* ── 5. Icons / accents that were orange ─────────────────── */
.page-admin .text-orange-500,
.page-admin .text-orange-600,
.page-admin .fa-star.text-orange,
.page-admin [class*="orange"] i { color: var(--elite-blue); }

/* ── 6. Dark theme for the shared surfaces ───────────────── */
html[data-theme="dark"] {
  --elite-page: #0d1624;
  --elite-border: #26364a;
  --elite-text: #eef4fb;
  --elite-text-muted: #9eafc2;
  --elite-blue-soft: #14263f;
  --elite-green-soft: #12291f;
}
html[data-theme="dark"] body,
html[data-theme="dark"] .page-client { background: var(--elite-page); }
html[data-theme="dark"] .page-admin .admin-topbar {
  background: #172335;
  border-bottom-color: #26364a;
  color: #eef4fb;
}
html[data-theme="dark"] .swift-sidebar { background: #0f1d33; }
html[data-theme="dark"] .swift-badge-warning { background: #3a2f14; color: #f2c94c; }
html[data-theme="dark"] .swift-badge-error   { background: #3a1f1f; color: #ff9b93; }
html[data-theme="dark"] .swift-badge-muted   { background: #1e2c42; color: #9eafc2; }

/* ── 7. Overlap safety for the floating support affordances ──────────────── */
@media (max-width: 767px) {
  .page-client footer,
  .page-landing footer {
    /* Clears the WhatsApp/Assistant launchers and the device safe area. */
    padding-bottom: calc(5.5rem + env(safe-area-inset-bottom));
  }
}
/* ── 8. Admin top bar layout (replaces Tailwind utility soup) ────────────── */
.page-admin .admin-layout {
  display: flex;
  min-height: 100vh;
  height: auto;
  background: var(--elite-page);
}
.page-admin .admin-main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}
.page-admin .admin-topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0 1.25rem;
  flex-wrap: nowrap;
}
.page-admin .admin-topbar__left {
  display: flex;
  align-items: center;
  gap: .75rem;
  min-width: 0;
}
.page-admin .admin-topbar__title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--elite-navy);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.page-admin .admin-topbar__right {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-shrink: 0;
}
.page-admin .admin-topbar__welcome {
  font-size: .875rem;
  font-weight: 500;
  color: var(--elite-text-muted);
  white-space: nowrap;
}
.page-admin .admin-topbar__logout {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .45rem .8rem;
  border: 1px solid var(--elite-border);
  border-radius: 8px;
  font-size: .875rem;
  font-weight: 600;
  color: var(--elite-navy);
  background: #fff;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.page-admin .admin-topbar__logout:hover {
  background: #FEF3F2;
  border-color: #FECDCA;
  color: #B42318;
}
.page-admin .admin-topbar .swift-theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .45rem .7rem;
  border: 1px solid var(--elite-border);
  border-radius: 8px;
  background: #fff;
  color: var(--elite-navy);
  font-size: .82rem;
  font-weight: 600;
  cursor: pointer;
}

html[data-theme="dark"] .page-admin .admin-topbar__title { color: #f3f7fc; }
html[data-theme="dark"] .page-admin .admin-topbar__logout,
html[data-theme="dark"] .page-admin .admin-topbar .swift-theme-toggle {
  background: #122033;
  border-color: #3a4d63;
  color: #eef4fb;
}

@media (max-width: 1023px) {
  .page-admin .admin-topbar { min-height: 56px; padding: 0 .9rem; }
  .page-admin .admin-topbar__welcome { display: none; }
  .page-admin .admin-topbar__logout span,
  .page-admin .admin-topbar .swift-theme-toggle span { display: none; }
  .page-admin .admin-topbar__logout,
  .page-admin .admin-topbar .swift-theme-toggle { padding: .45rem .6rem; }
}

/* Admin content should never overflow the viewport */
.page-admin .admin-main > * { max-width: 100%; }
.page-admin table { width: 100%; }
/* ═══════
   9. TAILWIND UTILITY BRIDGE — brand remap
   ---------------------------------------------------------------------------
   The admin pages (and some older customer pages) use Tailwind utility classes
   such as bg-indigo-600 / text-purple-800 / bg-orange-500. Those were never
   part of the ELITE RMB palette and produced the orange/purple/violet look.

   This layer remaps them onto the brand system *by class name only* — no
   markup change, no behaviour change. It is intentionally scoped to the
   shared page roots so landing-page marketing styles are untouched.
   ═══════ */

/* — Indigo (the old "primary") → Professional Blue — */
.page-admin .bg-indigo-600, .page-client .bg-indigo-600 { background-color: var(--elite-blue) !important; }
.page-admin .hover\:bg-indigo-700:hover, .page-client .hover\:bg-indigo-700:hover { background-color: var(--elite-blue-dark) !important; }
.page-admin .bg-indigo-100, .page-client .bg-indigo-100 { background-color: var(--elite-blue-soft) !important; }
.page-admin .bg-indigo-50, .page-client .bg-indigo-50 { background-color: #F5F8FC !important; }
.page-admin .text-indigo-600, .page-admin .text-indigo-500, .page-admin .text-indigo-700,
.page-client .text-indigo-600, .page-client .text-indigo-500 { color: var(--elite-blue) !important; }
.page-admin .hover\:text-indigo-600:hover { color: var(--elite-blue) !important; }
.page-admin .hover\:text-indigo-900:hover { color: var(--elite-blue-dark) !important; }
.page-admin .border-indigo-500, .page-client .border-indigo-500 { border-color: var(--elite-blue) !important; }
.page-admin .focus\:border-indigo-500:focus, .page-client .focus\:border-indigo-500:focus { border-color: var(--elite-blue) !important; }
.page-admin .focus\:ring-indigo-200:focus, .page-admin .focus\:ring-indigo-500:focus { --tw-ring-color: rgba(23, 88, 209, .28) !important; }

/* — Purple / violet → Deep Navy (admin/owner distinction) — */
.page-admin .bg-purple-100, .page-client .bg-purple-100,
.page-admin .bg-purple-600, .page-client .bg-purple-600 { background-color: #E7ECF7 !important; }
.page-admin .text-purple-800, .page-admin .text-purple-700,
.page-admin .text-purple-600, .page-client .text-purple-800 { color: var(--elite-navy) !important; }
.page-admin .hover\:bg-purple-700:hover { background-color: var(--elite-navy-600) !important; }

/* — Orange → Professional Blue / ELITE Green — */
.page-admin .bg-orange-500, .page-admin .bg-orange-600 { background-color: var(--elite-blue) !important; }
.page-admin .hover\:bg-orange-600:hover, .page-admin .hover\:bg-orange-700:hover { background-color: var(--elite-blue-dark) !important; }
.page-admin .text-orange-600, .page-admin .text-orange-500 { color: var(--elite-blue) !important; }

/* — Amber / yellow alerts (maintenance, warnings) → brand warning — */
.page-admin .bg-yellow-100, .page-client .bg-yellow-100 { background-color: #FFF7E6 !important; }

/* — Success greens all collapse onto ELITE Green — */
.page-admin .bg-green-600, .page-client .bg-green-600 { background-color: var(--elite-green) !important; }
.page-admin .hover\:bg-green-700:hover, .page-client .hover\:bg-green-700:hover { background-color: var(--elite-green-dark) !important; }
.page-admin .text-green-600, .page-admin .text-green-800 { color: #0F7A3D !important; }

/* — Inputs: one look everywhere — */
.page-admin input[type="text"],
.page-admin input[type="email"],
.page-admin input[type="number"],
.page-admin input[type="tel"],
.page-admin input[type="password"],
.page-admin input[type="search"],
.page-admin select,
.page-admin textarea {
  border-color: #CBD5E1;
  border-radius: 8px;
}
.page-admin input:focus,
.page-admin select:focus,
.page-admin textarea:focus {
  outline: 0;
  border-color: var(--elite-blue);
  box-shadow: 0 0 0 3px rgba(23, 88, 209, .14);
}

html[data-theme="dark"] .page-admin input:not([type="checkbox"]):not([type="radio"]),
html[data-theme="dark"] .page-admin select,
html[data-theme="dark"] .page-admin textarea {
  background: #122033;
  border-color: #3a4d63;
  color: #f8fafc;
}
html[data-theme="dark"] .page-admin .bg-white { background-color: #172335 !important; }
html[data-theme="dark"] .page-admin .text-gray-900,
html[data-theme="dark"] .page-admin .text-gray-800 { color: #f3f7fc !important; }
html[data-theme="dark"] .page-admin .text-gray-700,
html[data-theme="dark"] .page-admin .text-gray-600,
html[data-theme="dark"] .page-admin .text-gray-500 { color: #9eafc2 !important; }
html[data-theme="dark"] .page-admin .border-gray-300,
html[data-theme="dark"] .page-admin .border-gray-200 { border-color: #26364a !important; }
html[data-theme="dark"] .page-admin .divide-gray-200 > * + * { border-color: #26364a !important; }
html[data-theme="dark"] .page-admin thead.bg-gray-50 { background-color: #122033 !important; }
html[data-theme="dark"] .page-admin tr:hover { background-color: #1c2b40; }
html[data-theme="dark"] .page-admin .bg-purple-100 { background-color: #1e2c42 !important; }
html[data-theme="dark"] .page-admin .text-purple-800 { color: #a9c2e8 !important; }
html[data-theme="dark"] .page-admin .text-blue-800 { color: #8fbfe8 !important; }
html[data-theme="dark"] .page-admin .bg-blue-100 { background-color: #14263f !important; }
/* ═══════
   10. HOMEPAGE COMPONENTS — numbered steps + support row + rate panel
   ═══════ */

/* Numbered process steps — deliberately NOT cards. */
.elite-steps {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 980px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}
.elite-step {
  position: relative;
  padding: 0 1.25rem;
  border-left: 1px solid var(--elite-border);
}
.elite-step:first-child { border-left: 0; padding-left: 0; }
.elite-step__num {
  display: block;
  font-family: var(--swift-font-heading);
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--elite-blue);
  letter-spacing: .02em;
  margin-bottom: .6rem;
  font-variant-numeric: tabular-nums;
}
.elite-step__title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--elite-navy);
  margin: 0 0 .35rem;
}
.elite-step__text {
  font-size: .9rem;
  line-height: 1.6;
  color: var(--elite-text-muted);
  margin: 0;
}

@media (max-width: 860px) {
  .elite-steps { grid-template-columns: repeat(2, 1fr); gap: 1.75rem 0; }
  .elite-step:nth-child(odd) { border-left: 0; padding-left: 0; }
}
@media (max-width: 520px) {
  .elite-steps { grid-template-columns: 1fr; gap: 1.5rem; }
  .elite-step { border-left: 0; padding-left: 0; border-top: 1px solid var(--elite-border); padding-top: 1.25rem; }
  .elite-step:first-child { border-top: 0; padding-top: 0; }
}

/* Support row — three equal, low-decoration options */
.elite-support-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  max-width: 900px;
  margin: 0 auto;
}
.elite-support-item {
  display: flex;
  align-items: flex-start;
  gap: .85rem;
  padding: 1.25rem;
  background: #fff;
  border: 1px solid var(--elite-border);
  border-radius: 10px;
}
.elite-support-item i {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: var(--elite-blue-soft);
  color: var(--elite-blue);
  font-size: 1rem;
}
.elite-support-item--wa i { background: var(--elite-green-soft); color: #0F7A3D; }
.elite-support-item h3 { font-size: .95rem; font-weight: 600; color: var(--elite-navy); margin: 0 0 .2rem; }
.elite-support-item p { font-size: .85rem; color: var(--elite-text-muted); margin: 0; }
.elite-support-item a { color: var(--elite-blue); font-weight: 600; }

@media (max-width: 860px) { .elite-support-row { grid-template-columns: 1fr; } }

html[data-theme="dark"] .elite-support-item {
  background: #172335;
  border-color: #26364a;
}
html[data-theme="dark"] .elite-support-item h3 { color: #f3f7fc; }
html[data-theme="dark"] .elite-support-item i { background: #14263f; color: #8fbfe8; }
html[data-theme="dark"] .elite-support-item--wa i { background: #12291f; color: #6ee7a8; }
html[data-theme="dark"] .elite-step__title { color: #f3f7fc; }
html[data-theme="dark"] .elite-step { border-color: #26364a; }

/* Hero rate panel — reads like a real quote board, not a marketing card. */
.elite-rate-display {
  background: #fff;
  border: 1px solid #D6E3F8;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 18px 40px -22px rgba(15, 71, 176, .35);
}
.elite-rate-display__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid #EAF1FF;
}
.elite-rate-display__title {
  font-size: .95rem;
  font-weight: 700;
  color: var(--elite-navy);
  margin: 0;
}
.elite-rate-display__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: .95rem 1.25rem;
  border-bottom: 1px solid #EEF4FF;
}
.elite-rate-display__row:last-of-type { border-bottom: 0; }
.elite-rate-display__tier {
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--elite-text-muted);
}
.elite-rate-display__value {
  font-family: var(--swift-font-heading);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--elite-blue);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.elite-rate-display__value small {
  font-size: .7rem;
  font-weight: 700;
  color: var(--elite-text-muted);
  margin-left: .25rem;
  letter-spacing: .04em;
}
.elite-rate-display__foot {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  padding: .85rem 1.25rem 1rem;
  background: #F5F9FF;
  border-top: 1px solid #EAF1FF;
  font-size: .75rem;
  color: var(--elite-text-muted);
  line-height: 1.5;
}
html[data-theme="dark"] .elite-rate-display { background: #172335; border-color: #26364a; box-shadow: none; }
html[data-theme="dark"] .elite-rate-display__head { border-bottom-color: #26364a; }
html[data-theme="dark"] .elite-rate-display__title { color: #f3f7fc; }
html[data-theme="dark"] .elite-rate-display__row { border-bottom-color: #223047; }
html[data-theme="dark"] .elite-rate-display__foot { background: #122033; border-top-color: #26364a; }
/* ═══════
   11. ADMIN DARK MODE — component-correct overrides
   ---------------------------------------------------------------------------
   The earlier blanket `html[data-theme="dark"] .page-admin .bg-white` rule was
   too broad: it repainted the stat cards dark while their navy text stayed
   navy, and it left the section headings and table text on dark-on-dark.

   These rules target the actual admin component classes instead, so surfaces,
   text and borders all move together.
   ═══════ */

/* Surfaces stay elevated-dark, not navy-black. */
html[data-theme="dark"] .page-admin { background: #0d1624; }
html[data-theme="dark"] .page-admin .elite-stat,
html[data-theme="dark"] .page-admin .admin-stat-card,
html[data-theme="dark"] .page-admin .elite-rates-card,
html[data-theme="dark"] .page-admin .elite-rate-display {
  background: #172335 !important;
  border-color: #26364a !important;
  box-shadow: none !important;
}
html[data-theme="dark"] .page-admin .elite-stat-value,
html[data-theme="dark"] .page-admin .elite-rate-row__value,
html[data-theme="dark"] .page-admin .elite-rate-display__value { color: #f3f7fc !important; }
html[data-theme="dark"] .page-admin .elite-stat-label,
html[data-theme="dark"] .page-admin .elite-rate-row__cur,
html[data-theme="dark"] .page-admin .elite-rate-display__value small { color: #9eafc2 !important; }

/* Stat icons: keep the brand tints, lifted for a dark surface. */
html[data-theme="dark"] .page-admin .elite-stat-icon--navy { background: #1e2c42; color: #cfe0f7; }
html[data-theme="dark"] .page-admin .elite-stat-icon--blue { background: #14263f; color: #8fbfe8; }
html[data-theme="dark"] .page-admin .elite-stat-icon--green { background: #12291f; color: #6ee7a8; }
html[data-theme="dark"] .page-admin .elite-stat-icon--amber { background: #3a2f14; color: #f2c94c; }

/* The rate rows inside the white/dark card must not read as a dark slab. */
html[data-theme="dark"] .page-admin .elite-rate-display__head,
html[data-theme="dark"] .page-admin .elite-rate-display__row,
html[data-theme="dark"] .page-admin .elite-rate-row {
  border-color: #26364a !important;
}
html[data-theme="dark"] .page-admin .elite-rate-display__title,
html[data-theme="dark"] .page-admin .elite-rate-row__label,
html[data-theme="dark"] .page-admin .elite-rate-display__tier { color: #dfe8f4 !important; }
html[data-theme="dark"] .page-admin .elite-rate-display__foot,
html[data-theme="dark"] .page-admin .elite-rates-card__foot {
  background: #122033 !important;
  border-color: #26364a !important;
  color: #9eafc2 !important;
}

/* Section headings inside admin content — the "Recent Pending Transactions"
   title was navy-on-dark and effectively invisible. */
html[data-theme="dark"] .page-admin .admin-content h1,
html[data-theme="dark"] .page-admin .admin-content h2,
html[data-theme="dark"] .page-admin .admin-content h3,
html[data-theme="dark"] .page-admin .admin-content h4,
html[data-theme="dark"] .page-admin .admin-content .text-gray-800,
html[data-theme="dark"] .page-admin .admin-content .text-gray-900 { color: #f3f7fc !important; }
html[data-theme="dark"] .page-admin .admin-content p,
html[data-theme="dark"] .page-admin .admin-content .text-gray-600,
html[data-theme="dark"] .page-admin .admin-content .text-gray-500 { color: #9eafc2 !important; }

/* Tables — one readable dark treatment. */
html[data-theme="dark"] .page-admin .admin-content table {
  background: transparent;
  color: #dfe8f4;
}
html[data-theme="dark"] .page-admin .admin-content thead th {
  background: #122033 !important;
  color: #9eafc2 !important;
  border-color: #26364a !important;
}
html[data-theme="dark"] .page-admin .admin-content tbody td {
  color: #dfe8f4 !important;
  border-color: #223047 !important;
}
html[data-theme="dark"] .page-admin .admin-content tbody tr:hover { background: #1c2b40 !important; }
html[data-theme="dark"] .page-admin .admin-content tbody tr { border-color: #223047 !important; }

/* Quick-action buttons */
html[data-theme="dark"] .page-admin .elite-quick-actions a,
html[data-theme="dark"] .page-admin .elite-quick-actions button {
  background: #172335 !important;
  border-color: #26364a !important;
  color: #dfe8f4 !important;
}

/* Sidebar section labels and logout row */
html[data-theme="dark"] .page-admin .swift-sidebar { background: #0f1d33 !important; }

/* If/A white utility cards in admin lists */
html[data-theme="dark"] .page-admin .admin-content .bg-gray-50 { background: #122033 !important; }
html[data-theme="dark"] .page-admin .admin-content .border-gray-100,
html[data-theme="dark"] .page-admin .admin-content .border-gray-200,
html[data-theme="dark"] .page-admin .admin-content .border-gray-300 { border-color: #26364a !important; }
/* ═══════
   12. CUSTOMER DASHBOARD — brand-native sidebar, tabs, summary
   ---------------------------------------------------------------------------
   These components were previously defined only in elite-utilities.css, which
   carried gradient (blue→violet→orange) treatments and was not even linked by
   dashboard.php — so the customer sidebar/tabs rendered unstyled and leaned on
   Tailwind utilities for layout.

   They are redefined here in the ELITE RMB system: flat surfaces, one border,
   navy structure, blue/green accents, no gradients.
   ═══════ */

/* ── Account sidebar card ───────────────── */
.dash-account {
  background: #fff;
  border: 1px solid var(--elite-border);
  border-radius: 12px;
  padding: 1.25rem;
  margin-bottom: 1rem;
}
.dash-account__head {
  display: flex;
  align-items: center;
  gap: .85rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--elite-border);
}
.dash-account__avatar {
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--elite-navy);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.15rem;
  font-family: var(--swift-font-heading);
}
.dash-account__id { min-width: 0; }
.dash-account__name {
  margin: 0;
  font-size: .98rem;
  font-weight: 700;
  color: var(--elite-navy);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dash-account__email {
  margin: .15rem 0 0;
  font-size: .8rem;
  color: var(--elite-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dash-account__meta {
  margin: 1rem 0 0;
  display: grid;
  gap: .65rem;
}
.dash-account__meta dt {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--elite-text-muted);
  margin-bottom: .15rem;
}
.dash-account__meta dd {
  margin: 0;
  font-size: .875rem;
  font-weight: 600;
  color: var(--elite-text);
}
.dash-status-active {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  color: #0F7A3D;
  font-weight: 600;
}
.dash-live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--elite-green);
  flex-shrink: 0;
}
.dash-account__rest { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--elite-border); }

/* ── Quick links nav ────────────────────── */
.dash-quicklinks {
  display: flex;
  flex-direction: column;
  gap: .2rem;
  background: #fff;
  border: 1px solid var(--elite-border);
  border-radius: 12px;
  padding: .75rem;
}
.dash-quicklinks__title {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--elite-text-muted);
  margin: .25rem .5rem .5rem;
}
.dash-quicklink {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .6rem .7rem;
  border-radius: 8px;
  font-size: .875rem;
  font-weight: 500;
  color: var(--elite-text);
  transition: background .15s ease, color .15s ease;
}
.dash-quicklink i { width: 18px; text-align: center; color: var(--elite-text-muted); font-size: .875rem; }
.dash-quicklink:hover { background: var(--elite-blue-soft); color: var(--elite-blue-dark); }
.dash-quicklink:hover i { color: var(--elite-blue); }

/* ── Section tabs (Buy RMB / Referrals / Transactions) ──────────────────── */
.dash-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--elite-border);
  margin-bottom: 1.25rem;
  overflow-x: auto;
  scrollbar-width: none;
}
.dash-tabs::-webkit-scrollbar { display: none; }
.nav-tab-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .75rem 1rem;
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  font-family: inherit;
  font-size: .9rem;
  font-weight: 600;
  color: var(--elite-text-muted);
  cursor: pointer;
  white-space: nowrap;
  transition: color .15s ease, border-color .15s ease;
}
.nav-tab-btn:hover { color: var(--elite-navy); }
.nav-tab-btn.active {
  color: var(--elite-blue);
  border-bottom-color: var(--elite-blue);
}
.nav-tab-btn.active i { color: var(--elite-blue); }

/* ── Account overview summary ───────────────────────────── */
.dash-summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  background: #fff;
  border: 1px solid var(--elite-border);
  border-radius: 12px;
  padding: 1.5rem;
  margin-bottom: 1.25rem;
}
.dash-summary__intro { min-width: 0; flex: 1 1 320px; }
.dash-summary__eyebrow {
  margin: 0 0 .3rem;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--elite-blue);
}
.dash-summary__title {
  margin: 0;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--elite-navy);
  line-height: 1.25;
}
.dash-summary__sub { margin: .5rem 0 0; font-size: .9rem; color: var(--elite-text-muted); }

.dash-summary__rates { flex: 0 1 auto; min-width: 240px; }
.dash-summary__rates-label {
  display: block;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--elite-text-muted);
  margin-bottom: .6rem;
}
.dash-summary__rates-list { display: flex; gap: .6rem; flex-wrap: wrap; }
.dash-rate-pill {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: .2rem;
  padding: .65rem .85rem;
  background: var(--elite-blue-soft);
  border: 1px solid #CBDDF7;
  border-radius: 8px;
}
.dash-rate-pill__tier {
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--elite-text-muted);
}
.dash-rate-pill__val {
  font-family: var(--swift-font-heading);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--elite-blue);
  font-variant-numeric: tabular-nums;
}
.dash-rate-pill__val small { font-size: .68rem; font-weight: 700; color: var(--elite-text-muted); margin-left: .2rem; }
.dash-summary__rates-note {
  display: block;
  margin-top: .6rem;
  font-size: .78rem;
  color: var(--elite-text-muted);
}

/* ── Shared dashboard panel headings ────────────────────── */
.dash-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.dash-panel-title { margin: 0; font-size: 1.05rem; font-weight: 700; color: var(--elite-navy); }
.dash-panel-sub { margin: .25rem 0 0; font-size: .875rem; color: var(--elite-text-muted); }

/* ── Textarea inside the transaction workspace ──────────────────────────── */
.tx-field textarea,
.tx-workspace textarea {
  width: 100%;
  min-height: 84px;
  padding: .65rem .8rem;
  border: 1px solid #CBD5E1;
  border-radius: 8px;
  font-family: inherit;
  font-size: .92rem;
  color: var(--elite-text);
  background: #fff;
  resize: vertical;
}
.tx-field textarea:focus,
.tx-workspace textarea:focus { outline: 0; border-color: var(--elite-blue); box-shadow: 0 0 0 3px rgba(23,88,209,.14); }

/* ── Dark theme ─────────────────────────── */
html[data-theme="dark"] .dash-account,
html[data-theme="dark"] .dash-quicklinks,
html[data-theme="dark"] .dash-summary {
  background: #172335;
  border-color: #26364a;
}
html[data-theme="dark"] .dash-account__head,
html[data-theme="dark"] .dash-account__rest { border-color: #26364a; }
html[data-theme="dark"] .dash-account__name,
html[data-theme="dark"] .dash-summary__title,
html[data-theme="dark"] .dash-panel-title,
html[data-theme="dark"] .nav-tab-btn:hover { color: #f3f7fc; }
html[data-theme="dark"] .dash-account__meta dd,
html[data-theme="dark"] .dash-quicklink { color: #dfe8f4; }
html[data-theme="dark"] .dash-tabs { border-color: #26364a; }
html[data-theme="dark"] .dash-rate-pill { background: #14263f; border-color: #26364a; }
html[data-theme="dark"] .dash-quicklink:hover { background: #14263f; color: #8fbfe8; }
html[data-theme="dark"] .tx-field textarea,
html[data-theme="dark"] .tx-workspace textarea { background: #122033; border-color: #3a4d63; color: #f3f7fc; }

@media (max-width: 860px) {
  .dash-summary { flex-direction: column; }
  .dash-summary__rates { width: 100%; }
}
/* ═══════
   13. HEADER BRAND — single authoritative logo rule
   ---------------------------------------------------------------------------
   elite-unified.css had FOUR competing .swift-nav-brand-icon blocks (a boxed
   36px icon, a white-panel variant, and three near-identical "logo" blocks).
   The boxed variants constrained the wide horizontal logo and cropped it.

   This final block wins by source order and pins the one intended treatment:
   the horizontal ELITE RMB logo, natural width, on a transparent container.
   ═══════ */

.swift-nav-brand-icon {
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
  display: inline-flex !important;
  align-items: center !important;
}

/* The ELITE RMB logo asset is 1168x784 (near-square, not wide). Constraining
   it by height alone crushes the wordmark, so it is sized by WIDTH and the
   height follows from the aspect ratio. */
.swift-nav-brand-icon img {
  width: 120px !important;
  height: auto !important;
  max-width: min(200px, 52vw) !important;
  object-fit: contain !important;
  object-position: left center !important;
  display: block !important;
  margin: 0 !important;
}

/* The customer/admin headers sit on a dark navy bar. The ELITE RMB logo asset
   is navy artwork on a white plate, so on navy it needs that plate back —
   otherwise the wordmark is navy-on-navy and effectively invisible.
   (`page-client` inline CSS had stripped the plate to `transparent`.) */
.page-client .swift-nav-brand-icon,
.page-admin .swift-nav-brand-icon {
  background: #FFFFFF !important;
  border: 0 !important;
  border-radius: 6px !important;
  padding: 4px 8px !important;
  height: auto !important;
  overflow: visible !important;
  box-shadow: none !important;
}

.swift-nav-brand {
  display: inline-flex !important;
  align-items: center !important;
  text-decoration: none !important;
  min-width: 0;
}

/* The dead "SIGN IN / Login / Register" links on the dashboard header
   were rendered by leftover markup that no longer has a destination. */
.swift-nav-links .swift-nav-link.is-dead,
.dash-dead-nav { display: none !important; }

@media (max-width: 900px) {
  .swift-nav-brand-icon img { width: 104px !important; }
}
@media (max-width: 640px) {
  .swift-nav-brand-icon img { width: 92px !important; }
}
/* ═══════
   14. MOBILE NAVIGATION — consolidated behaviour
   ---------------------------------------------------------------------------
   The stylesheet accumulated several overlapping `.swift-nav-inner` and
   `.swift-mobile-menu` blocks. Rather than editing each, this single block at
   the end defines the intended mobile behaviour and wins by source order.

   Requirements covered: comfortable touch targets (>=44px), no horizontal
   overflow, safe-area padding, outside-click overlay, and a scroll-locked
   page while the menu is open.
   ═══════ */

/* Backdrop shown behind the open mobile menu. */
.swift-nav-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s ease, visibility .2s ease;
  z-index: 998;
}
.swift-nav-backdrop.is-open { opacity: 1; visibility: visible; }

/* Prevent the page behind the menu from scrolling. */
body.swift-nav-locked { overflow: hidden; }

@media (max-width: 767px) {
  .swift-nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .6rem 1rem;
    padding-left: max(1rem, env(safe-area-inset-left));
    padding-right: max(1rem, env(safe-area-inset-right));
    min-height: 56px;
    box-sizing: border-box;
  }

  .swift-nav-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: 8px;
    font-size: 1.05rem;
    cursor: pointer;
  }

  .swift-mobile-menu {
    display: none;
    flex-direction: column;
    width: 100%;
    max-height: min(75vh, 34rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: .5rem var(--swift-space-3) calc(var(--swift-space-4) + env(safe-area-inset-bottom));
    box-sizing: border-box;
  }

  .swift-mobile-menu.open { display: flex; }

  /* Every row is a comfortable, full-width tap target. */
  .swift-mobile-menu a,
  .swift-mobile-menu button {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 48px;
    padding: .8rem .9rem;
    box-sizing: border-box;
    border-radius: 8px;
    font-size: .95rem;
    font-weight: 500;
    text-align: left;
    text-decoration: none;
  }

  /* A visual separator before the auth actions (Login / Register). */
  .swift-mobile-menu .swift-mobile-menu__divider {
    height: 1px;
    margin: .4rem .25rem;
    background: var(--elite-border);
  }
}

html[data-theme="dark"] .swift-mobile-menu { background: #172335; }
html[data-theme="dark"] .swift-mobile-menu a,
html[data-theme="dark"] .swift-mobile-menu button { color: #dfe8f4; }
html[data-theme="dark"] .swift-mobile-menu a:hover,
html[data-theme="dark"] .swift-mobile-menu button:hover { background: #1e2c42; color: #fff; }
html[data-theme="dark"] .swift-mobile-menu .swift-mobile-menu__divider { background: #26364a; }
html[data-theme="dark"] .swift-nav-toggle { background: transparent; border-color: #3a4d63; color: #eef4fb; }

/* The same behaviour the public header uses, applied to the authenticated
   customer header when it collapses below the desktop breakpoint. */
@media (max-width: 1023px) {
  .page-client .swift-nav-inner { min-height: 56px; }
}

@media (prefers-reduced-motion: reduce) {
  .swift-nav-backdrop,
  .swift-mobile-menu { transition: none !important; }
}
/* The "Create Account" row in the mobile menu is the primary action. */
.swift-mobile-menu a.swift-mobile-menu__cta {
  background: var(--elite-green);
  color: #fff;
  font-weight: 600;
  justify-content: center;
  margin-top: .3rem;
}
.swift-mobile-menu a.swift-mobile-menu__cta:hover {
  background: var(--elite-green-dark);
  color: #fff;
}
html[data-theme="dark"] .swift-mobile-menu a.swift-mobile-menu__cta {
  background: var(--elite-green);
  color: #06210f;
}
html[data-theme="dark"] .swift-mobile-menu a.swift-mobile-menu__cta:hover { background: #2fd07d; }
/* ═══════
   15. HOMEPAGE — mobile polish
   ---------------------------------------------------------------------------
   Measured on a 390px viewport before these rules:
     - hero 823px tall on an 844px screen (rate card pushed below the fold)
     - the swap control was a 44px icon-only button with no visible label
     - FAQ accordion rows were 24px tall (far below the 44px touch minimum)
     - calculator action buttons were 42px tall

   These rules fix the sizing and let the hero breathe on small screens.
   ═══════ */

/* Swap control: icon + visible "Swap" label, sized for touch. */
.swift-converter-swap-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  min-height: 40px;
  padding: 0 .9rem;
  border-radius: 8px;
  border: 1px solid #CBDDF7;
  background: var(--elite-blue-soft);
  color: var(--elite-blue);
  font-family: inherit;
  font-size: .82rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.swift-converter-swap-btn:hover {
  background: #DCE7FB;
  border-color: var(--elite-blue);
  color: var(--elite-blue-dark);
}
.swift-converter-swap-btn:focus-visible {
  outline: 2px solid var(--elite-blue);
  outline-offset: 2px;
}
html[data-theme="dark"] .swift-converter-swap-btn {
  background: #14263f;
  border-color: #2c4666;
  color: #8fbfe8;
}
html[data-theme="dark"] .swift-converter-swap-btn:hover { background: #1b3351; }

/* Calculator action buttons: comfortable tap height on touch devices. */
@media (max-width: 767px) {
  .converter-actions {
    flex-direction: column;
    align-items: stretch;
    gap: .6rem;
  }
  .converter-actions .swift-btn,
  .converter-actions a.swift-btn {
    width: 100%;
    min-height: 46px;
    justify-content: center;
  }

  /* Hero: tighten vertical rhythm so the rate card appears sooner. */
  .swift-hero { padding-top: 1.75rem !important; padding-bottom: 1.75rem !important; }
  .swift-hero-inner { gap: 1.5rem !important; }
  .swift-hero h1,
  .swift-hero h1.swift-hero-title-orange { font-size: 1.75rem !important; line-height: 1.2 !important; }
  .swift-hero p { font-size: .95rem !important; }
  .swift-hero-actions { flex-direction: column; align-items: stretch; gap: .6rem; }
  .swift-hero-actions .swift-btn { width: 100%; min-height: 46px; justify-content: center; }
  /* Readable body text on small screens (never below ~13px for real copy). */
  .swift-hero-trust { font-size: .875rem !important; line-height: 1.5; }
  .elite-rate-display__value { font-size: 1.3rem; }
  .elite-rate-display__tier { font-size: .78rem; }
  .elite-rate-display__foot { font-size: .8125rem; }
  .converter-note { font-size: .875rem !important; line-height: 1.5; }
  .converter-note span { font-size: inherit; }

  /* Section rhythm: reduce the generous desktop spacing on small screens. */
  .swift-section { padding-top: 2.25rem !important; padding-bottom: 2.25rem !important; }
  .swift-section-header { margin-bottom: 1.5rem !important; }
  .swift-section-header h2 { font-size: 1.4rem !important; }

  /* FAQ accordion: whole row tappable at a comfortable height. */
  .faq-item > button {
    min-height: 52px !important;
    padding: .9rem 0 !important;
    font-size: .95rem !important;
    align-items: center;
  }
  .faq-item > div { font-size: .9rem !important; padding-bottom: .5rem !important; }
}

/* Tablet: keep two-up feats readable without squeezing. */
@media (max-width: 900px) {
  .elite-steps { gap: 1.5rem 0; }
}

@media (prefers-reduced-motion: reduce) {
  .swift-converter-swap-btn { transition: none !important; }
}
/* ═══════
   16. FAQ ACCORDION — accessible, class-based
   ══════ */

.faq-item {
  border-bottom: 1px solid var(--elite-border);
}
.faq-item:first-child { border-top: 1px solid var(--elite-border); }

.faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  min-height: 48px;
  padding: 1rem 0;
  background: none;
  border: 0;
  font-family: inherit;
  font-size: .98rem;
  font-weight: 600;
  line-height: 1.4;
  text-align: left;
  color: var(--elite-navy);
  cursor: pointer;
  transition: color .15s ease;
}
.faq-question:hover { color: var(--elite-blue); }
.faq-question:focus-visible {
  outline: 2px solid var(--elite-blue);
  outline-offset: -2px;
  border-radius: 4px;
}

.faq-question__label { flex: 1 1 auto; min-width: 0; }

.faq-question__icon {
  flex-shrink: 0;
  color: var(--elite-text-muted);
  font-size: .8rem;
  transition: transform .2s ease;
}
.faq-question[aria-expanded="true"] .faq-question__icon { transform: rotate(180deg); }
.faq-question[aria-expanded="true"] { color: var(--elite-blue); }

.faq-answer {
  padding: 0 0 1rem;
  color: var(--elite-text-muted);
  font-size: .92rem;
  line-height: 1.65;
}
.faq-answer p { margin: 0; }

html[data-theme="dark"] .faq-item { border-color: #26364a; }
html[data-theme="dark"] .faq-question { color: #f3f7fc; }
html[data-theme="dark"] .faq-question:hover,
html[data-theme="dark"] .faq-question[aria-expanded="true"] { color: #8fbfe8; }
html[data-theme="dark"] .faq-answer { color: #9eafc2; }

@media (prefers-reduced-motion: reduce) {
  .faq-question__icon { transition: none !important; }
}/* ═══════
   17. CREATE TRANSACTION — mobile stacking
   ---------------------------------------------------------------------------
   Measured on a 390px viewport before these rules:
     - the 3-column recipient grid stayed at 3 columns, giving each field ~99px
     - swap control was 36px tall (below the 44px touch minimum)
     - recipient inputs were 14.7px, which makes mobile browsers zoom on focus

   Desktop keeps the horizontal workflow; mobile stacks by priority:
     Amount -> Swap -> Amount  and  Recipient -> Payment -> Account type
   ═══════ */

/* Recipient row: three columns on desktop, self-sizing so it drops to one
   column naturally when there is not enough room. */
.tx-grid--3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 1rem;
}

/* The recipient row must never be three cramped columns. */
@media (max-width: 767px) {
  .tx-grid,
  .tx-grid--3 {
    grid-template-columns: 1fr !important;
    gap: .9rem !important;
  }

  /* Amount fields stack vertically with the swap control between them. */
  .tx-amounts {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: .75rem !important;
  }

  .tx-amount { width: 100%; }
  .tx-amount__input { font-size: 16px !important; }
  .tx-amount__row { min-height: 48px; }

  /* Swap: full-width, comfortable height, clear label. */
  .tx-swap {
    display: flex;
    justify-content: center;
    width: 100%;
  }
  .tx-swap button,
  .tx-swap #swap-currency {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    min-height: 46px;
    padding: 0 1.1rem;
    width: auto;
  }

  /* Every field in the workspace gets a comfortable tap height and 16px text. */
  .tx-workspace .tx-field input,
  .tx-workspace .tx-field select,
  .tx-workspace .tx-field textarea {
    font-size: 16px !important;
    min-height: 48px;
    width: 100%;
  }
  .tx-workspace .tx-field textarea { min-height: 104px; }

  .tx-workspace .tx-field label { font-size: .8rem; }

  /* Primary action full width. */
  .tx-workspace button[type="submit"],
  .tx-workspace .tx-submit {
    width: 100%;
    min-height: 48px;
    justify-content: center;
  }

  /* Transaction summary rows wrap instead of squeezing. */
  .tx-summary__row, .tx-summary-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: .35rem;
  }
}

/* Tablet: two columns for the recipient row reads better than three. */
@media (min-width: 768px) and (max-width: 1023px) {
  .tx-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  .tx-swap button { transition: none !important; }
}
/* ═══════
   18. NOTIFICATION CENTER — responsive panel & toast
   ---------------------------------------------------------------------------
   The bell dropdown used a fixed 320px (`w-80`) panel. On the smallest phones
   that reaches the viewport edge and the toast had no width limit either.
   Both are clamped here so they can never overflow, and the toast wraps.
   ═══════ */

.notification-dropdown {
  width: min(320px, calc(100vw - 24px));
  max-height: min(70vh, 32rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  border-radius: 10px;
}

/* Keep the panel on-screen when the bell sits near the right edge. */
@media (max-width: 480px) {
  .notification-dropdown {
    position: fixed;
    top: 64px;
    left: 12px;
    right: 12px;
    width: auto;
    max-width: none;
    margin: 0;
  }
}

/* Notification list rows must wrap, not clip. */
.notification-item {
  display: flex;
  gap: .65rem;
  padding: .75rem .85rem;
  border-bottom: 1px solid var(--elite-border);
  overflow-wrap: anywhere;
  word-break: break-word;
}
.notification-item:last-child { border-bottom: 0; }
.notification-item__body { min-width: 0; flex: 1 1 auto; }
.notification-item__title {
  font-size: .875rem;
  font-weight: 600;
  color: var(--elite-navy);
  margin: 0 0 .15rem;
}
.notification-item__text {
  font-size: .8125rem;
  color: var(--elite-text-muted);
  margin: 0;
  line-height: 1.5;
}
.notification-item__time {
  font-size: .72rem;
  color: var(--elite-text-muted);
  margin-top: .25rem;
  display: block;
}
.notification-item.is-unread { background: var(--elite-blue-soft); }
.notification-item.is-unread .notification-item__title::after {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: .4rem;
  border-radius: 50%;
  background: var(--elite-blue);
  vertical-align: middle;
}

/* Toasts: wrap, never wider than the screen, clear of the safe area. */
.elite-toast,
.notification-toast,
#install-prompt-toast,
.swift-toast {
  max-width: calc(100vw - 24px);
  overflow-wrap: anywhere;
  word-break: break-word;
  box-sizing: border-box;
}
.elite-toast__close,
.notification-toast__close,
.close-toast,
.swift-toast__close {
  flex-shrink: 0;
  min-width: 32px;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  cursor: pointer;
}

@media (max-width: 480px) {
  .elite-toast,
  .notification-toast,
  #install-prompt-toast,
  .swift-toast {
    left: 12px !important;
    right: 12px !important;
    bottom: calc(12px + env(safe-area-inset-bottom)) !important;
    width: auto !important;
  }
}

html[data-theme="dark"] .notification-dropdown {
  background: #172335 !important;
  border-color: #26364a !important;
}
html[data-theme="dark"] .notification-item { border-color: #26364a; }
html[data-theme="dark"] .notification-item.is-unread { background: #14263f; }
html[data-theme="dark"] .notification-item__title { color: #f3f7fc; }
html[data-theme="dark"] .notification-item__text,
html[data-theme="dark"] .notification-item__time { color: #9eafc2; }
/* ═══════
   19. RESPONSIVE TABLES — one consolidated pattern
   ---------------------------------------------------------------------------
   Customer pages used a per-page copy of the same `mobile-stack-table` media
   query, and two tables (transactions, referrals) were missing the required
   `data-label` attributes, so their mobile cards rendered unlabelled values.

   This is now defined once, here. Desktop shows a normal table; below 768px a
   row becomes a card and each cell is prefixed with its column name from
   `data-label`. The table never widens the page.
   ═══════ */

.swift-table-wrapper,
.table-scroll {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

table.mobile-stack-table { width: 100%; }

@media (max-width: 767px) {
  /* A stacked table must not keep a desktop min-width. */
  table.mobile-stack-table { min-width: 0 !important; }

  table.mobile-stack-table thead { display: none; }

  table.mobile-stack-table,
  table.mobile-stack-table tbody,
  table.mobile-stack-table tr,
  table.mobile-stack-table td {
    display: block;
    width: 100%;
  }

  table.mobile-stack-table tr {
    padding: .9rem 1rem;
    border: 1px solid var(--elite-border);
    border-radius: 10px;
    background: #fff;
    margin-bottom: .65rem;
  }
  table.mobile-stack-table tbody { background: transparent !important; }

  table.mobile-stack-table td {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: .35rem 0 !important;
    white-space: normal !important;
    border: 0 !important;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  /* Column name shown only in the stacked mobile view. */
  table.mobile-stack-table td::before {
    content: attr(data-label);
    flex: 0 0 96px;
    max-width: 96px;
    color: var(--elite-text-muted);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding-top: .15rem;
  }

  /* Cells with no label (e.g. a trailing action row) stay full width. */
  table.mobile-stack-table td:not([data-label])::before { display: none; }
  table.mobile-stack-table td:not([data-label]) { justify-content: flex-end; }

  /* Any other wide table is contained rather than pushing the page. */
  .page-client table:not(.mobile-stack-table) { min-width: 0; }
}

html[data-theme="dark"] table.mobile-stack-table tr {
  background: #172335 !important;
  border-color: #26364a !important;
}
html[data-theme="dark"] table.mobile-stack-table td::before { color: #9eafc2; }
/* ═══════
   20. ADMIN — responsive content, tables and forms
   ---------------------------------------------------------------------------
   Every admin table is wrapped in `overflow-x-auto`, which is the intended
   "scroll inside the container" pattern, but the wrapper only works if its
   ancestors are width-constrained. These rules make that guarantee explicit,
   tighten content padding on small screens, and keep admin forms usable on
   a phone.
   ═══════ */

/* The main column must never be wider than the viewport. */
.page-admin .admin-main,
.page-admin .admin-content {
  min-width: 0;
  max-width: 100%;
}

.page-admin .admin-content { padding: 1.5rem; }

/* Contained horizontal scroll for wide data tables. */
.page-admin .admin-content .overflow-x-auto,
.page-admin .swift-table-wrapper {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.page-admin .admin-content table { min-width: 640px; }

@media (max-width: 767px) {
  .page-admin .admin-content { padding: 1rem; }

  /* Stat cards stack; they already use a grid, so just force one column. */
  .page-admin .elite-stat-grid { grid-template-columns: 1fr !important; gap: .75rem; }

  /* Rate-manager and settings forms stack their rows. */
  .page-admin .admin-content form .grid,
  .page-admin .admin-content .form-row {
    grid-template-columns: 1fr !important;
  }

  /* Admin form controls get comfortable touch sizes and 16px text. */
  .page-admin .admin-content input:not([type="checkbox"]):not([type="radio"]),
  .page-admin .admin-content select,
  .page-admin .admin-content textarea {
    font-size: 16px;
    min-height: 46px;
  }
  .page-admin .admin-content textarea { min-height: 96px; }

  /* Primary actions full width and tall enough to tap. */
  .page-admin .admin-content button[type="submit"],
  .page-admin .admin-content .swift-btn {
    min-height: 46px;
  }

  /* Section headings scale down rather than wrapping awkwardly. */
  .page-admin .admin-content h1 { font-size: 1.25rem !important; }
  .page-admin .admin-content h2 { font-size: 1.1rem !important; }
  .page-admin .admin-content h3 { font-size: 1rem !important; }

  /* Header: keep the title on one line next to the menu button. */
  .page-admin .admin-topbar { padding: 0 .85rem; }
  .page-admin .admin-topbar__title { font-size: .98rem; }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .page-admin .admin-content { padding: 1.25rem; }
  .page-admin .elite-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

html[data-theme="dark"] .page-admin .admin-content .overflow-x-auto { border-color: #26364a; }

@media (prefers-reduced-motion: reduce) {
  .page-admin .swift-sidebar { transition: none !important; }
}
/* ═══════
   21. MOBILE MENU — final row treatment
   ---------------------------------------------------------------------------
   Measured on the live page after opening the menu at 390px:
     - the Dark mode row was a full-width solid green block (46,204,113)
     - the "Create Account" CTA rendered green text on a green background
     - nav links inherited green from a global `a` colour rule

   These rules pin the intended look: neutral rows for navigation, a single
   green primary action with white text, and a neutral icon-only toggle.
   ═══════ */

@media (max-width: 767px) {
  /* Navigation rows: neutral, dark text. */
  .swift-mobile-menu a,
  .swift-mobile-menu > a,
  .swift-mobile-menu .swift-nav-link {
    color: var(--elite-text) !important;
    background: transparent !important;
    font-weight: 500;
  }
  .swift-mobile-menu a:hover,
  .swift-mobile-menu .swift-nav-link:hover {
    background: var(--elite-blue-soft) !important;
    color: var(--elite-blue-dark) !important;
  }

  /* Dark mode row: a neutral row, not a solid green block. */
  .swift-mobile-menu .swift-theme-toggle,
  .swift-mobile-menu .swift-theme-toggle-mobile {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: .6rem;
    width: 100%;
    min-height: 48px;
    padding: .8rem .9rem;
    background: transparent !important;
    border: 0 !important;
    border-radius: 8px;
    color: var(--elite-text) !important;
    font-size: .95rem;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
  }
  .swift-mobile-menu .swift-theme-toggle:hover {
    background: var(--elite-blue-soft) !important;
  }
  .swift-mobile-menu .swift-theme-toggle i {
    color: var(--elite-blue) !important;
    width: 18px;
    text-align: center;
  }

  /* The single primary action: ELITE Green with white text. */
  .swift-mobile-menu a.swift-mobile-menu__cta,
  .swift-mobile-menu .swift-mobile-menu__cta {
    background: var(--elite-green) !important;
    color: #fff !important;
    font-weight: 700;
    justify-content: center;
    border-radius: 8px;
  }
  .swift-mobile-menu a.swift-mobile-menu__cta:hover {
    background: var(--elite-green-dark) !important;
    color: #fff !important;
  }
  .swift-mobile-menu a.swift-mobile-menu__cta i { color: #fff !important; }

  /* Hamburger: neutral surface, brand icon colour — not a green square. */
  .swift-nav-toggle {
    background: transparent !important;
    border: 1px solid var(--elite-border) !important;
    color: var(--elite-navy) !important;
  }
  .page-landing .swift-nav-toggle {
    background: rgba(255, 255, 255, .12) !important;
    border-color: rgba(255, 255, 255, .25) !important;
    color: #fff !important;
  }
}

html[data-theme="dark"] .swift-mobile-menu a { color: #dfe8f4 !important; }
html[data-theme="dark"] .swift-mobile-menu a:hover { background: #1e2c42 !important; color: #fff !important; }
html[data-theme="dark"] .swift-mobile-menu .swift-theme-toggle {
  color: #dfe8f4 !important;
  background: transparent !important;
}
html[data-theme="dark"] .swift-mobile-menu a.swift-mobile-menu__cta {
  background: var(--elite-green) !important;
  color: #06210f !important;
}
/* ═══════
   22. MOBILE MENU & HAMBURGER — specificity lock
   ---------------------------------------------------------------------------
   The measured values after the first pass still showed:
     - the Dark mode row as a solid green block (bg rgb(32,185,107))
     - the hamburger as a solid green square (bg rgb(23,147,82))

   Both came from earlier `.swift-theme-toggle` / `.swift-nav-toggle` rules in
   this same file that are more specific than the mobile block. These selectors
   are scoped to the menu / landing header and win on order + specificity,
   without resorting to blanket !important on unrelated elements.
   ═══════ */

/* Dark mode row inside the mobile menu: neutral row, blue icon. */
.swift-mobile-menu .swift-theme-toggle.swift-theme-toggle-mobile,
.swift-mobile-menu button.swift-theme-toggle,
.swift-nav .swift-mobile-menu .swift-theme-toggle {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  color: var(--elite-text) !important;
}

/* Hamburger button: neutral on light headers, translucent on the blue hero. */
.swift-nav .swift-nav-toggle {
  background: transparent !important;
  background-image: none !important;
  border: 1px solid var(--elite-border) !important;
  color: var(--elite-navy) !important;
  box-shadow: none !important;
}
.page-landing .swift-nav .swift-nav-toggle,
.swift-hero ~ * .swift-nav .swift-nav-toggle {
  background: rgba(255, 255, 255, .12) !important;
  border-color: rgba(255, 255, 255, .28) !important;
  color: #fff !important;
}

html[data-theme="dark"] .swift-mobile-menu .swift-theme-toggle {
  background: transparent !important;
  color: #dfe8f4 !important;
}
html[data-theme="dark"] .swift-nav .swift-nav-toggle {
  background: transparent !important;
  border-color: #3a4d63 !important;
  color: #eef4fb !important;
}
/* ═══════
   23. LINK COLOUR RESOLUTION — final cascade lock
   ---------------------------------------------------------------------------
   This stylesheet ended up with THREE competing global anchor rules
   (`a { color: var(--swift-accent) }` at ~182, `a { color: var(--elite-green) }`
   at ~2836, and `a { color: var(--elite-blue) }` at ~3425). A bare `a` selector
   has low specificity but sat late in the file, so it beat the scoped
   `.swift-mobile-menu a` rules and made every mobile-menu row green.

   Rather than delete the earlier rules (other pages may still depend on their
   order), the intended colours are pinned here, at the end of the cascade,
   scoped to the contexts that actually matter.
   ═══════ */

/* Content links: Professional Blue (green stays reserved for actions). */
.swift-section a:not([class*="btn"]):not(.swift-btn),
.faq-answer a,
.admin-content a:not([class*="btn"]):not([class*="badge"]) {
  color: var(--elite-blue);
}
.swift-section a:not([class*="btn"]):not(.swift-btn):hover,
.faq-answer a:hover,
.admin-content a:not([class*="btn"]):not([class*="badge"]):hover {
  color: var(--elite-blue-dark);
}

/* Mobile menu: neutral text for navigation rows, one green primary action. */
.swift-mobile-menu > a,
.swift-mobile-menu a,
.swift-mobile-menu .swift-nav-link {
  color: var(--elite-text) !important;
  background-color: transparent;
}
.swift-mobile-menu a:hover,
.swift-mobile-menu .swift-nav-link:hover {
  color: var(--elite-blue-dark) !important;
  background-color: var(--elite-blue-soft);
}

.swift-mobile-menu a.swift-mobile-menu__cta {
  color: #fff !important;
  background-color: var(--elite-green) !important;
}
.swift-mobile-menu a.swift-mobile-menu__cta:hover {
  color: #fff !important;
  background-color: var(--elite-green-dark) !important;
}

/* Footer links keep their own light-on-navy treatment. */
.swift-footer a,
footer.swift-footer a { color: #dbeafe; }
.swift-footer a:hover,
footer.swift-footer a:hover { color: #fff; }

html[data-theme="dark"] .swift-mobile-menu > a,
html[data-theme="dark"] .swift-mobile-menu a { color: #dfe8f4 !important; }
html[data-theme="dark"] .swift-mobile-menu a.swift-mobile-menu__cta { color: #06210f !important; }
/* ═══════
   24. ICON FALLBACK — menu stays usable if the icon font fails
   ---------------------------------------------------------------------------
   The hamburger and the mobile theme toggle rely on Font Awesome glyphs
   (`<i class="fas fa-bars">`). If that CDN is blocked, slow, or offline the
   glyph renders as an empty box and the control becomes unlabelled — which
   breaks the rule that an icon must never be the only way to understand an
   action.

   The toggle already carries an accessible name, and these rules draw a plain
   CSS hamburger behind the glyph so the control is always legible.
   ═══════ */

.swift-nav-toggle {
  position: relative;
}

/* Two-rule hamburger drawn in CSS, revealed only when the glyph is absent. */
.swift-nav-toggle::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 18px;
  height: 2px;
  transform: translate(-50%, -50%);
  background: currentColor;
  border-radius: 1px;
  box-shadow: 0 -6px 0 currentColor, 0 6px 0 currentColor;
  opacity: 0; /* shown by the rule below when Font Awesome is missing */
}

/* `.no-fa` is added by the inline guard at the end of this file's consumers. */
html.no-fa .swift-nav-toggle::before { opacity: 1; }
html.no-fa .swift-nav-toggle i { visibility: hidden; }