/**
 * embed-v2.css — Complete redesign of all Jaagili embed pages.
 * Replaces the white-card-on-grey look with a full-width, premium layout.
 * Design language: clean fintech / marketplace — confident space, strong
 * colour identity per page, world-class typographic hierarchy.
 */

/* ══════════════════════════════════════════════════════════
   TOKENS
══════════════════════════════════════════════════════════ */
:root {
  --e-bg:      #f4f6fb;
  --e-surface: #ffffff;
  --e-border:  rgba(15,23,42,.07);
  --e-ink:     #0f172a;
  --e-mid:     #334155;
  --e-muted:   #64748b;
  --e-faint:   #94a3b8;

  --e-blue:   #3b82f6;
  --e-blue-d: #1d4ed8;
  --e-ember:  #f97316;
  --e-ember-d:#c2410c;
  --e-teal:   #06b6d4;
  --e-teal-d: #0e7490;
  --e-violet: #7c3aed;
  --e-violet-d:#5b21b6;
  --e-green:  #10b981;
  --e-slate:  #475569;

  --e-r-sm:  10px;
  --e-r-md:  16px;
  --e-r-lg:  22px;
  --e-ease:  cubic-bezier(.22,1,.36,1);

  /* per-page accent — overridden per page */
  --e-accent:   var(--e-blue);
  --e-accent-d: var(--e-blue-d);
  --e-accent-bg:rgba(59,130,246,.08);
}

/* ══════════════════════════════════════════════════════════
   CANVAS
══════════════════════════════════════════════════════════ */
body.ja-body:has(.jx-page) {
  background: var(--e-bg) !important;
  font-family: 'DM Sans', system-ui, sans-serif !important;
  color: var(--e-ink) !important;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: rgba(59,130,246,.25) transparent;
}

/* ══════════════════════════════════════════════════════════
   PAGE WRAPPER — strip the old floating-card look
══════════════════════════════════════════════════════════ */
.jx-page {
  max-width: 1040px !important;
  margin: 0 auto !important;
  padding: 0 0 80px !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  animation: ev-rise .38s var(--e-ease) both !important;
}
body.ja-embed .jx-page {
  max-width: 100% !important;
  padding: 0 0 64px !important;
}
@keyframes ev-rise {
  from { opacity:0; transform:translateY(12px); }
  to   { opacity:1; transform:translateY(0); }
}

/* ── Per-page accent tokens ── */
.jx-page.jx-travel  { --e-accent:var(--e-blue);   --e-accent-d:var(--e-blue-d);   --e-accent-bg:rgba(59,130,246,.08); }
.jx-page.jx-package { --e-accent:var(--e-ember);  --e-accent-d:var(--e-ember-d);  --e-accent-bg:rgba(249,115,22,.08); }
.jx-page.jx-wallet  { --e-accent:var(--e-teal);   --e-accent-d:var(--e-teal-d);   --e-accent-bg:rgba(6,182,212,.08); }
.jx-page.jx-needs   { --e-accent:var(--e-blue);   --e-accent-d:var(--e-blue-d);   --e-accent-bg:rgba(59,130,246,.08); }
.jx-page.jx-profile { --e-accent:var(--e-violet); --e-accent-d:var(--e-violet-d); --e-accent-bg:rgba(124,58,237,.08); }
.jx-page.jx-help    { --e-accent:var(--e-teal);   --e-accent-d:var(--e-teal-d);   --e-accent-bg:rgba(6,182,212,.08); }
.jx-page.jx-admin   { --e-accent:var(--e-slate);  --e-accent-d:#1e293b;            --e-accent-bg:rgba(71,85,105,.08); }

/* ══════════════════════════════════════════════════════════
   HERO BANNER — full-width coloured slab
══════════════════════════════════════════════════════════ */
.jx-hero,
.jx-hero.jx-hero-compact {
  position: relative;
  overflow: hidden;
  padding: 48px 44px 44px !important;
  margin-bottom: 0 !important;
  border-bottom: none !important;
  color: #fff !important;
  border-radius: 0 !important;
}

/* Gradient per page */
.jx-travel  .jx-hero { background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 55%, #3b82f6 100%); }
.jx-package .jx-hero { background: linear-gradient(135deg, #7c2d12 0%, #ea580c 55%, #f97316 100%); }
.jx-wallet  .jx-hero { background: linear-gradient(135deg, #134e4a 0%, #0d9488 55%, #06b6d4 100%); }
.jx-needs   .jx-hero { background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 55%, #3b82f6 100%); }
.jx-profile .jx-hero { background: linear-gradient(135deg, #3b0764 0%, #6d28d9 55%, #7c3aed 100%); }
.jx-help    .jx-hero { background: linear-gradient(135deg, #0c4a6e 0%, #0284c7 55%, #06b6d4 100%); }
.jx-admin   .jx-hero { background: linear-gradient(135deg, #0f172a 0%, #1e293b 55%, #334155 100%); }

/* Decorative mesh overlay */
.jx-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 80% at 85% 50%, rgba(255,255,255,.06) 0%, transparent 70%),
    radial-gradient(ellipse 40% 60% at 10% 80%, rgba(255,255,255,.04) 0%, transparent 70%);
  pointer-events: none;
}

/* Large ghost icon */
.jx-hero-icon {
  position: absolute !important;
  right: 36px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  font-size: 7rem !important;
  opacity: 0.1 !important;
  color: #fff !important;
  display: block !important;
  pointer-events: none;
}

.jx-hero-inner {
  position: relative;
  z-index: 1;
  max-width: 68ch;
}

.jx-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 5px 13px !important;
  border-radius: 999px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,.9) !important;
  background: rgba(255,255,255,.15) !important;
  border: 1px solid rgba(255,255,255,.2) !important;
  margin-bottom: 16px !important;
  backdrop-filter: blur(4px);
}

.jx-hero h1 {
  font-family: 'Fraunces', Georgia, serif !important;
  font-weight: 300 !important;
  font-size: clamp(1.9rem, 3.5vw, 2.8rem) !important;
  letter-spacing: -0.03em !important;
  line-height: 1.1 !important;
  margin: 0 0 14px !important;
  color: #fff !important;
}

.jx-hero p {
  font-size: 1.0625rem !important;
  color: rgba(255,255,255,.8) !important;
  line-height: 1.65 !important;
  margin: 0 !important;
  max-width: 56ch;
}

/* Hero row layout (stats + actions) */
.jx-hero-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.jx-hero-actions { flex-shrink: 0; }
.jx-hero-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 12px 20px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(255,255,255,.3) !important;
  background: rgba(255,255,255,.15) !important;
  color: #fff !important;
  font-size: 0.9rem !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  cursor: pointer !important;
  backdrop-filter: blur(4px);
  transition: background .18s, transform .18s !important;
}
.jx-hero-btn:hover { background: rgba(255,255,255,.25) !important; transform: translateY(-2px) !important; }

.jx-hero-stats { display: flex; gap: 10px; }
.jx-stat-pill {
  text-align: center;
  background: rgba(255,255,255,.15) !important;
  border: 1px solid rgba(255,255,255,.2) !important;
  border-radius: 14px !important;
  padding: 14px 20px !important;
  min-width: 88px;
  backdrop-filter: blur(4px);
}
.jx-stat-pill strong {
  display: block !important;
  font-size: 1.9rem !important;
  font-weight: 800 !important;
  color: #fff !important;
  line-height: 1 !important;
}
.jx-stat-pill span {
  display: block !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  color: rgba(255,255,255,.7) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  margin-top: 5px !important;
}

/* Hero search (FAQ) */
.jx-hero .vf-search { margin-top: 20px; max-width: 440px; }
.jx-hero .vf-search input {
  padding: 13px 44px 13px 16px !important;
  font-size: 0.9375rem !important;
  background: rgba(255,255,255,.12) !important;
  border: 1px solid rgba(255,255,255,.2) !important;
  color: #fff !important;
  border-radius: 12px !important;
  backdrop-filter: blur(4px);
}
.jx-hero .vf-search input::placeholder { color: rgba(255,255,255,.55) !important; }
.jx-hero .vf-search i { color: rgba(255,255,255,.6) !important; }

/* ══════════════════════════════════════════════════════════
   CONTENT AREA — sits below hero, on white card
══════════════════════════════════════════════════════════ */
.jx-features,
.jx-paths,
.jx-steps-wrap,
.vf-wrap,
.payments-body,
.pf-sheet,
.un-tabs,
.un-view,
.un-type-picker,
.un-prereq-card,
.un-form-card {
  background: transparent;
}

/* Content wrapper inside the page */
.jx-page > *:not(.jx-hero) {
  padding-left: 36px;
  padding-right: 36px;
}
body.ja-embed .jx-page > *:not(.jx-hero) {
  padding-left: 24px;
  padding-right: 24px;
}

/* ══════════════════════════════════════════════════════════
   FEATURE CHIPS (trust signals strip)
══════════════════════════════════════════════════════════ */
.jx-features {
  display: flex !important;
  flex-wrap: wrap;
  gap: 0;
  margin: 0 !important;
  padding: 0 !important;
  background: var(--e-surface) !important;
  border-bottom: 1px solid var(--e-border) !important;
  padding-left: 36px !important;
  padding-right: 36px !important;
}

.jx-feat {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 18px 0 !important;
  margin-right: 32px !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  flex: 0 0 auto;
}
.jx-feat:last-child { margin-right: 0; }

.jx-feat-icon {
  width: 34px !important;
  height: 34px !important;
  border-radius: 9px !important;
  background: var(--e-accent-bg) !important;
  color: var(--e-accent) !important;
  font-size: 0.875rem !important;
}

.jx-feat-text strong {
  font-size: 0.875rem !important;
  font-weight: 700 !important;
  color: var(--e-ink) !important;
}
.jx-feat-text span {
  font-size: 0.78rem !important;
  color: var(--e-muted) !important;
  margin-top: 1px !important;
}

/* ══════════════════════════════════════════════════════════
   CHOICE CARDS (seeker / companion, buyer / carrier)
══════════════════════════════════════════════════════════ */
.jx-paths {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 16px !important;
  padding-top: 32px !important;
  padding-bottom: 8px !important;
  background: transparent !important;
}

.jx-path {
  background: var(--e-surface) !important;
  border: 1.5px solid var(--e-border) !important;
  border-radius: var(--e-r-lg) !important;
  box-shadow: 0 2px 8px rgba(15,23,42,.04), 0 8px 24px rgba(15,23,42,.05) !important;
  transition: transform .22s var(--e-ease), box-shadow .22s, border-color .22s !important;
  overflow: hidden !important;
}
.jx-path:hover {
  transform: translateY(-5px) !important;
  border-color: var(--e-accent) !important;
  box-shadow: 0 12px 40px rgba(15,23,42,.1), 0 0 0 3px var(--e-accent-bg) !important;
}
.jx-path:focus-visible { outline: 3px solid var(--e-accent); outline-offset: 3px; }

/* Accent top bar */
.jx-path-bar { height: 5px !important; width: 100% !important; }
.jx-travel .jx-path-a .jx-path-bar  { background: linear-gradient(90deg,var(--e-blue-d),var(--e-blue)) !important; }
.jx-travel .jx-path-b .jx-path-bar  { background: linear-gradient(90deg,#5b21b6,#7c3aed) !important; }
.jx-package .jx-path-a .jx-path-bar { background: linear-gradient(90deg,#0e7490,var(--e-teal)) !important; }
.jx-package .jx-path-b .jx-path-bar { background: linear-gradient(90deg,var(--e-ember-d),var(--e-ember)) !important; }

.jx-path-body { padding: 28px 28px 26px !important; }

.jx-path-top {
  display: flex !important;
  align-items: flex-start !important;
  gap: 16px !important;
  margin-bottom: 18px !important;
}

.jx-path-icon {
  width: 54px !important;
  height: 54px !important;
  border-radius: 16px !important;
  font-size: 1.35rem !important;
  background: var(--e-accent-bg) !important;
  color: var(--e-accent) !important;
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.jx-travel .jx-path-a .jx-path-icon  { background: rgba(59,130,246,.1) !important; color:var(--e-blue) !important; }
.jx-travel .jx-path-b .jx-path-icon  { background: rgba(124,58,237,.1) !important; color:#7c3aed !important; }
.jx-package .jx-path-a .jx-path-icon { background: rgba(6,182,212,.1) !important;  color:var(--e-teal) !important; }
.jx-package .jx-path-b .jx-path-icon { background: rgba(249,115,22,.1) !important; color:var(--e-ember) !important; }

.jx-path-role {
  font-size: 10px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  color: var(--e-accent) !important;
  display: block;
  margin-bottom: 5px !important;
}
.jx-travel .jx-path-a .jx-path-role  { color:var(--e-blue) !important; }
.jx-travel .jx-path-b .jx-path-role  { color:#7c3aed !important; }
.jx-package .jx-path-a .jx-path-role { color:var(--e-teal) !important; }
.jx-package .jx-path-b .jx-path-role { color:var(--e-ember) !important; }

.jx-path-meta h2 {
  font-size: 1.3rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.025em !important;
  color: var(--e-ink) !important;
  margin: 0 !important;
  line-height: 1.2 !important;
}

.jx-path-desc {
  font-size: 0.9375rem !important;
  color: var(--e-muted) !important;
  line-height: 1.65 !important;
  margin: 0 0 18px !important;
}

.jx-path-feats {
  list-style: none !important;
  margin: 0 0 22px !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 9px !important;
  flex: 1 !important;
}
.jx-path-feats li {
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  font-size: 0.9rem !important;
  color: var(--e-mid) !important;
  line-height: 1.5 !important;
}
.jx-path-feats li i {
  font-size: 10px !important;
  margin-top: 5px !important;
  flex-shrink: 0 !important;
  color: var(--e-accent) !important;
}
.jx-travel .jx-path-a .jx-path-feats li i  { color:var(--e-blue) !important; }
.jx-travel .jx-path-b .jx-path-feats li i  { color:#7c3aed !important; }
.jx-package .jx-path-a .jx-path-feats li i { color:var(--e-teal) !important; }
.jx-package .jx-path-b .jx-path-feats li i { color:var(--e-ember) !important; }

.jx-path-cta {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: 100% !important;
  padding: 14px 20px !important;
  border-radius: 12px !important;
  font-size: 0.9375rem !important;
  font-weight: 700 !important;
  color: #fff !important;
  pointer-events: none !important;
  letter-spacing: -0.01em !important;
}
.jx-travel .jx-path-a .jx-path-cta  { background: linear-gradient(135deg,var(--e-blue-d),var(--e-blue)) !important; }
.jx-travel .jx-path-b .jx-path-cta  { background: linear-gradient(135deg,#5b21b6,#7c3aed) !important; }
.jx-package .jx-path-a .jx-path-cta { background: linear-gradient(135deg,var(--e-teal-d),var(--e-teal)) !important; }
.jx-package .jx-path-b .jx-path-cta { background: linear-gradient(135deg,var(--e-ember-d),var(--e-ember)) !important; }

/* ══════════════════════════════════════════════════════════
   JOURNEY STEPS
══════════════════════════════════════════════════════════ */
.jx-steps-wrap {
  padding-top: 32px !important;
  padding-bottom: 8px !important;
}

.jx-steps-title {
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--e-muted) !important;
  margin: 0 0 20px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}
.jx-steps-title::before {
  content: '' !important;
  width: 20px !important; height: 2px !important;
  border-radius: 1px !important;
  background: var(--e-accent) !important;
  opacity: .5 !important;
}

.jx-flow {
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0,1fr)) !important;
  gap: 0 !important;
  background: var(--e-surface) !important;
  border: 1.5px solid var(--e-border) !important;
  border-radius: var(--e-r-lg) !important;
  padding: 28px 20px !important;
  position: relative;
  box-shadow: 0 1px 4px rgba(15,23,42,.04) !important;
}

.jx-flow-step {
  text-align: center !important;
  padding: 0 8px !important;
  position: relative;
}
.jx-flow-step:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 18px;
  right: -1px;
  width: 2px;
  height: 2px;
  background: var(--e-border);
}

.jx-flow-num {
  width: 38px !important;
  height: 38px !important;
  margin: 0 auto 12px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  background: var(--e-accent-bg) !important;
  color: var(--e-accent) !important;
  border: 2px solid var(--e-accent-bg) !important;
}

.jx-flow-step strong {
  display: block !important;
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  color: var(--e-ink) !important;
  line-height: 1.35 !important;
  margin-bottom: 5px !important;
}
.jx-flow-step span {
  display: block !important;
  font-size: 0.7rem !important;
  color: var(--e-muted) !important;
  line-height: 1.4 !important;
}

/* ══════════════════════════════════════════════════════════
   USER NEEDS PAGE
══════════════════════════════════════════════════════════ */

/* Tab bar */
.un-tabs {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  background: var(--e-surface) !important;
  border-bottom: 1px solid var(--e-border) !important;
  padding: 12px 36px !important;
  margin-bottom: 0 !important;
  border-radius: 0 !important;
  position: relative !important;
  z-index: 2 !important;
}

.un-tab {
  flex: 0 0 auto !important;
  padding: 9px 18px !important;
  border-radius: 10px !important;
  border: none !important;
  background: transparent !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 0.9rem !important;
  font-weight: 600 !important;
  color: var(--e-muted) !important;
  cursor: pointer !important;
  transition: all .18s !important;
  white-space: nowrap !important;
}
.un-tab.active {
  background: var(--e-accent-bg) !important;
  color: var(--e-accent) !important;
}
.un-tab:not(.active):hover { color: var(--e-ink) !important; background: rgba(15,23,42,.04) !important; }

.un-tab-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 18px !important;
  height: 18px !important;
  border-radius: 9px !important;
  padding: 0 5px !important;
  font-size: .65rem !important;
  font-weight: 800 !important;
  margin-left: 6px !important;
  background: var(--e-accent-bg) !important;
  color: var(--e-accent) !important;
}
.un-tab.active .un-tab-badge { background: var(--e-accent) !important; color: #fff !important; }

.un-add-btn {
  margin-left: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 9px 18px !important;
  border-radius: 10px !important;
  border: none !important;
  background: var(--e-accent) !important;
  color: #fff !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 0.875rem !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: transform .18s, box-shadow .18s !important;
}
.un-add-btn:hover { transform: translateY(-2px) !important; box-shadow: 0 6px 20px rgba(59,130,246,.3) !important; }

/* Views */
.un-view { display:none; animation: ev-rise .3s var(--e-ease) both; padding-top: 24px; }
.un-view.active { display: block; }

/* Activity card */
.un-card {
  background: var(--e-surface) !important;
  border: 1.5px solid var(--e-border) !important;
  border-radius: var(--e-r-md) !important;
  overflow: hidden !important;
  margin-bottom: 10px !important;
  box-shadow: 0 1px 3px rgba(15,23,42,.04) !important;
  transition: transform .2s var(--e-ease), box-shadow .2s !important;
  animation: ev-rise .32s var(--e-ease) both !important;
}
.un-card:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 8px 28px rgba(15,23,42,.09) !important;
}
.un-card.travel  { border-left: 3px solid var(--e-blue) !important; }
.un-card.package { border-left: 3px solid var(--e-ember) !important; }
.un-card.past    { opacity: .72 !important; }

.un-card-summary { padding: 20px 22px !important; display: flex !important; align-items: center !important; gap: 16px !important; }
.un-card-icon {
  width: 44px !important; height: 44px !important;
  border-radius: 12px !important; flex-shrink: 0 !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  font-size: 1.1rem !important;
}
.un-card.travel  .un-card-icon { background: rgba(59,130,246,.1) !important; color: var(--e-blue) !important; }
.un-card.package .un-card-icon { background: rgba(249,115,22,.1) !important; color: var(--e-ember) !important; }

.un-card-main { flex: 1 !important; min-width: 0 !important; }
.un-route { display: flex !important; align-items: center !important; gap: 6px !important; margin-bottom: 6px !important; flex-wrap: wrap !important; }
.un-hub-name { font-weight: 700 !important; font-size: 1rem !important; color: var(--e-ink) !important; }
.un-hub-country {
  font-size: 0.7rem !important; font-weight: 600 !important; color: var(--e-muted) !important;
  background: var(--e-bg) !important; border: 1px solid var(--e-border) !important;
  padding: 2px 7px !important; border-radius: 20px !important;
}
.un-route-arrow { color: var(--e-faint) !important; font-size: 0.75rem !important; }

.un-badge { display: inline-flex !important; align-items: center !important; gap: 4px !important; font-size: .68rem !important; font-weight: 700 !important; padding: 3px 9px !important; border-radius: 20px !important; text-transform: uppercase !important; letter-spacing: .06em !important; }
.un-badge.travel  { background: rgba(59,130,246,.1)  !important; color: var(--e-blue) !important; }
.un-badge.companion { background: rgba(16,185,129,.1)  !important; color: var(--e-green) !important; }
.un-badge.package { background: rgba(249,115,22,.1)  !important; color: var(--e-ember) !important; }
.un-badge.carrier { background: rgba(124,58,237,.1)  !important; color: var(--e-violet) !important; }
.un-badge.paid    { background: rgba(16,185,129,.1)  !important; color: var(--e-green) !important; }
.un-badge.pending { background: rgba(245,158,11,.1)  !important; color: #d97706 !important; }
.un-badge.completed { background: rgba(16,185,129,.1) !important; color: var(--e-green) !important; }
.un-badge.date { background: var(--e-bg) !important; color: var(--e-muted) !important; border: 1px solid var(--e-border) !important; }
.un-badge.carrier.active-job { background: rgba(245,158,11,.1) !important; color: #b45309 !important; border: 1px solid rgba(245,158,11,.2) !important; }

/* Milestone bar */
.un-milestones { display: flex !important; align-items: center !important; gap: 0 !important; margin-top: 10px !important; }
.un-ms { display: flex !important; flex-direction: column !important; align-items: center !important; gap: 4px !important; flex-shrink: 0 !important; }
.un-ms-dot {
  width: 20px !important; height: 20px !important;
  border-radius: 50% !important; border: 2px solid var(--e-border) !important;
  background: var(--e-surface) !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  font-size: .55rem !important; color: var(--e-faint) !important; transition: all .2s !important;
}
.un-ms.done .un-ms-dot  { background: var(--e-accent) !important; border-color: var(--e-accent) !important; color: #fff !important; }
.un-ms.active .un-ms-dot { background: #fff !important; border-color: var(--e-accent) !important; color: var(--e-accent) !important; box-shadow: 0 0 0 3px var(--e-accent-bg) !important; }
.un-ms-label { font-size: .58rem !important; font-weight: 600 !important; color: var(--e-faint) !important; white-space: nowrap !important; }
.un-ms.done   .un-ms-label { color: var(--e-accent) !important; }
.un-ms.active .un-ms-label { color: var(--e-accent) !important; font-weight: 700 !important; }
.un-ms-line { height: 2px !important; flex: 1 !important; background: var(--e-border) !important; min-width: 16px !important; margin-bottom: 14px !important; }
.un-ms-line.done { background: var(--e-accent) !important; }

/* Card actions */
.un-card-actions { display: flex !important; flex-direction: column !important; align-items: flex-end !important; gap: 8px !important; flex-shrink: 0 !important; }
.un-btn-edit {
  padding: 7px 14px !important; border-radius: 9px !important;
  border: 1.5px solid var(--e-border) !important;
  background: var(--e-bg) !important; color: var(--e-mid) !important;
  font-size: .8rem !important; font-weight: 700 !important;
  cursor: pointer !important; transition: all .15s !important; font-family: inherit !important;
  display: inline-flex !important; align-items: center !important; gap: 5px !important;
}
.un-btn-edit:hover { background: var(--e-surface) !important; border-color: var(--e-accent) !important; color: var(--e-accent) !important; }
.un-btn-edit.open { background: var(--e-accent-bg) !important; border-color: var(--e-accent) !important; color: var(--e-accent) !important; }

.un-btn-del {
  padding: 7px 10px !important; border-radius: 9px !important;
  border: 1.5px solid rgba(239,68,68,.15) !important;
  background: rgba(239,68,68,.06) !important; color: #ef4444 !important;
  font-size: .8rem !important; font-weight: 700 !important;
  cursor: pointer !important; transition: all .15s !important; font-family: inherit !important;
  display: inline-flex !important; align-items: center !important; gap: 4px !important;
}
.un-btn-del:hover { background: #ef4444 !important; color: #fff !important; border-color: #ef4444 !important; }

.un-btn-pay {
  padding: 8px 16px !important; border-radius: 10px !important; border: none !important;
  background: linear-gradient(135deg, var(--e-ember-d), var(--e-ember)) !important;
  color: #fff !important; font-size: .82rem !important; font-weight: 700 !important;
  cursor: pointer !important; box-shadow: 0 3px 10px rgba(249,115,22,.28) !important;
  transition: filter .18s, transform .18s !important; font-family: inherit !important;
  display: inline-flex !important; align-items: center !important;
}
.un-btn-pay:hover { filter: brightness(1.08) !important; transform: translateY(-1px) !important; }

/* Carrier banners */
.un-carrier-banner {
  display: flex !important; flex-wrap: wrap !important; align-items: center !important;
  justify-content: space-between !important; gap: 14px !important; margin-bottom: 18px !important;
  padding: 18px 22px !important; border-radius: var(--e-r-md) !important;
  background: linear-gradient(135deg, #ecfdf5, #d1fae5) !important;
  border: 1.5px solid #6ee7b7 !important; box-shadow: 0 4px 16px rgba(16,185,129,.12) !important;
}
.un-carrier-banner-text { display:flex; flex-direction:column; gap:4px; color:#065f46 !important; font-size:.9rem !important; }
.un-carrier-banner-text strong { font-size:1.0rem !important; font-weight:800 !important; }
.un-carrier-banner-btn {
  flex-shrink: 0 !important; border: none !important; border-radius: 12px !important;
  padding: .75rem 1.25rem !important; font-size: .9rem !important; font-weight: 800 !important;
  font-family: inherit !important; cursor: pointer !important; color: #fff !important;
  background: linear-gradient(135deg, #059669, #047857) !important;
  box-shadow: 0 4px 16px rgba(5,150,105,.35) !important;
  display: inline-flex !important; align-items: center !important; gap: .45rem !important;
  transition: filter .18s, transform .18s !important;
}
.un-carrier-banner-btn:hover { filter: brightness(1.06) !important; transform: translateY(-1px) !important; }

/* Type picker */
.un-type-picker { padding-top: 8px; }
.un-picker-prompt { font-size: 1.0rem; font-weight: 700; color: var(--e-ink); margin: 0 0 18px; }
.un-type-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }

.un-type-card {
  position: relative; display: flex; flex-direction: column; gap: 6px;
  padding: 20px; background: var(--e-surface);
  border: 1.5px solid var(--e-border); border-radius: var(--e-r-md);
  cursor: pointer; transition: transform .2s, box-shadow .2s, border-color .2s;
  box-shadow: 0 1px 4px rgba(15,23,42,.04); text-align: left;
}
.un-type-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(15,23,42,.09); border-color: var(--e-accent); }
.un-type-card.active { border-color: var(--e-accent); background: var(--e-accent-bg); box-shadow: 0 0 0 3px var(--e-accent-bg); }

.un-tc-icon {
  width: 42px; height: 42px; border-radius: 12px;
  background: var(--e-accent-bg); color: var(--e-accent);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem; margin-bottom: 6px;
}
.un-type-card.travel-companion .un-tc-icon { background:rgba(59,130,246,.1); color:var(--e-blue); }
.un-type-card.be-companion .un-tc-icon { background:rgba(124,58,237,.1); color:var(--e-violet); }
.un-type-card.need-parcel .un-tc-icon { background:rgba(249,115,22,.1); color:var(--e-ember); }
.un-type-card.carry-parcel .un-tc-icon { background:rgba(6,182,212,.1); color:var(--e-teal); }
.un-type-card strong { font-size:.95rem; font-weight:700; color:var(--e-ink); }
.un-type-card span { font-size:.82rem; color:var(--e-muted); line-height:1.45; }
.un-tc-check { position:absolute; top:12px; right:12px; width:22px; height:22px; border-radius:50%; background:var(--e-accent); color:#fff; display:none; align-items:center; justify-content:center; font-size:11px; }
.un-type-card.active .un-tc-check { display:flex; }

/* Prereq panel */
.un-prereq-card { background:var(--e-surface); border:1.5px solid var(--e-border); border-radius:var(--e-r-md); padding:24px; box-shadow:0 2px 8px rgba(15,23,42,.05); }
.un-prereq-hdr { display:flex; align-items:center; gap:14px; margin-bottom:20px; }
.un-prereq-hdr-icon { width:48px; height:48px; border-radius:14px; background:var(--e-accent-bg); color:var(--e-accent); display:flex; align-items:center; justify-content:center; font-size:1.4rem; flex-shrink:0; }
.un-prereq-title { font-size:1.05rem; font-weight:700; color:var(--e-ink); }
.un-prereq-sub { font-size:.85rem; color:var(--e-muted); margin-top:3px; }
.un-prereq-steps { display:flex; flex-direction:column; gap:10px; margin-bottom:20px; }
.un-prereq-step { display:flex; align-items:center; gap:14px; padding:14px 16px; border-radius:12px; border:1.5px solid var(--e-border); background:var(--e-bg); }
.un-prereq-step.ok { background:#f0fdf4; border-color:rgba(16,185,129,.2); }
.un-prereq-step.pending { background:#fffbeb; border-color:rgba(245,158,11,.2); }
.un-prereq-step-icon { width:34px; height:34px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:.9rem; flex-shrink:0; }
.un-prereq-step.ok .un-prereq-step-icon { background:#dcfce7; color:#16a34a; }
.un-prereq-step.pending .un-prereq-step-icon { background:#fef3c7; color:#d97706; }
.un-prereq-step-body { flex:1; min-width:0; }
.un-prereq-step-title { font-size:.9rem; font-weight:700; color:var(--e-ink); }
.un-prereq-step-desc { font-size:.8rem; color:var(--e-muted); margin-top:3px; line-height:1.45; }
.un-prereq-cta { display:inline-flex; align-items:center; gap:6px; font-size:.82rem; font-weight:700; color:var(--e-accent); text-decoration:none; white-space:nowrap; padding:6px 12px; border-radius:8px; background:var(--e-accent-bg); transition:background .15s; }
.un-prereq-cta:hover { background:color-mix(in srgb,var(--e-accent) 15%,transparent); }
.un-prereq-footer { display:flex; justify-content:space-between; align-items:center; gap:10px; padding-top:4px; }

.un-change-btn { display:inline-flex; align-items:center; gap:6px; padding:9px 14px; border-radius:10px; border:1.5px solid var(--e-border); background:var(--e-bg); color:var(--e-muted); font-family:inherit; font-size:.85rem; font-weight:600; cursor:pointer; transition:background .15s; }
.un-change-btn:hover { background:var(--e-surface); color:var(--e-ink); }
.un-btn-proceed { display:inline-flex; align-items:center; gap:7px; padding:10px 20px; border-radius:10px; border:none; background:var(--e-accent); color:#fff; font-family:inherit; font-size:.9rem; font-weight:700; cursor:pointer; transition:transform .18s, box-shadow .18s; }
.un-btn-proceed:hover { transform:translateY(-2px); box-shadow:0 6px 20px color-mix(in srgb,var(--e-accent) 40%,transparent); }

/* Form card */
.un-form-card { background:var(--e-surface); border:1.5px solid var(--e-border); border-radius:var(--e-r-md); overflow:hidden; box-shadow:0 2px 8px rgba(15,23,42,.05); }
.un-form-card-hdr { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:18px 22px; border-bottom:1px solid var(--e-border); }
.un-form-card-hdr.blue-grad   { background:rgba(59,130,246,.06); }
.un-form-card-hdr.indigo-grad { background:rgba(99,102,241,.06); }
.un-form-card-hdr.purple-grad { background:rgba(124,58,237,.06); }
.un-form-card-hdr.violet-grad { background:rgba(139,92,246,.06); }
.un-fch-left { display:flex; align-items:center; gap:14px; }
.un-fch-icon { width:40px; height:40px; border-radius:11px; background:var(--e-accent-bg); color:var(--e-accent); display:flex; align-items:center; justify-content:center; font-size:1.1rem; flex-shrink:0; }
.un-fch-title { font-size:1rem; font-weight:700; color:var(--e-ink); }
.un-fch-sub { font-size:.8rem; color:var(--e-muted); margin-top:2px; }
.un-form-card-body { padding:22px; }

/* Form inputs */
.un-form-section { margin-bottom:22px; }
.un-fg-label { display:flex; align-items:center; gap:7px; font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.09em; color:var(--e-muted); margin-bottom:12px; }
.un-form-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
.un-field label { display:block; font-size:11px; font-weight:700; color:var(--e-muted); text-transform:uppercase; letter-spacing:.06em; margin-bottom:6px; }
.un-field input, .un-field select, .un-field textarea { width:100%; padding:10px 12px; border:1.5px solid var(--e-border); border-radius:10px; font-family:'DM Sans',sans-serif; font-size:.9rem; background:var(--e-bg); color:var(--e-ink); transition:border-color .18s, box-shadow .18s; box-sizing:border-box; }
.un-field input:focus, .un-field select:focus, .un-field textarea:focus { outline:none; border-color:var(--e-accent); box-shadow:0 0 0 3px var(--e-accent-bg); background:#fff; }
.un-field.full { grid-column:1/-1; }

/* Route widget */
.un-route-widget { background:var(--e-bg); border:1.5px solid var(--e-border); border-radius:14px; overflow:hidden; }
.un-rw-row { display:flex; align-items:center; gap:12px; padding:14px 16px; border-bottom:1px solid var(--e-border); }
.un-rw-row:last-child { border-bottom:none; }
.un-rw-bullet { width:10px; height:10px; border-radius:50%; flex-shrink:0; }
.from-dot { background:var(--e-blue); }
.to-dot { background:var(--e-teal); }
.from-pkg { background:var(--e-ember); }
.from-carry { background:var(--e-violet); }
.un-rw-body { flex:1; }
.un-rw-body label { display:block; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:var(--e-faint); margin-bottom:4px; }
.un-rw-body input { width:100%; background:transparent; border:none; outline:none; font-family:'DM Sans',sans-serif; font-size:.9375rem; font-weight:600; color:var(--e-ink); padding:0; }
.un-rw-icon { font-size:14px; color:var(--e-faint); flex-shrink:0; }

.un-flight-row { display:flex; gap:8px; }
.un-flight-row input { flex:1; min-width:0; }
.un-lookup-btn { flex-shrink:0; display:inline-flex; align-items:center; gap:6px; padding:9px 14px; border-radius:10px; border:none; background:var(--e-accent-bg); color:var(--e-accent); font-family:inherit; font-size:.82rem; font-weight:700; cursor:pointer; transition:transform .18s, box-shadow .18s; white-space:nowrap; }
.un-lookup-btn:hover { transform:translateY(-1px); box-shadow:0 4px 14px var(--e-accent-bg); }
.un-pnr-hint { font-size:10px; font-weight:500; color:var(--e-faint); }

.un-item-box { background:var(--e-bg); border:1.5px solid var(--e-border); border-radius:12px; padding:16px; margin-bottom:10px; position:relative; }
.un-item-box .remove-item { position:absolute; top:10px; right:10px; width:26px; height:26px; border-radius:50%; border:none; background:rgba(239,68,68,.1); color:#ef4444; display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:11px; transition:background .15s; }
.un-item-box .remove-item:hover { background:#ef4444; color:#fff; }

.un-add-item-btn { display:inline-flex; align-items:center; gap:6px; padding:8px 14px; border-radius:9px; border:1.5px dashed color-mix(in srgb,var(--e-accent) 30%,transparent); background:transparent; color:var(--e-accent); font-family:inherit; font-size:.82rem; font-weight:700; cursor:pointer; transition:border-color .18s, background .18s; margin-top:8px; }
.un-add-item-btn:hover { background:var(--e-accent-bg); border-color:var(--e-accent); }

.un-consent { display:flex; gap:12px; padding:14px 16px; border-radius:12px; background:rgba(249,115,22,.05); border:1.5px solid rgba(249,115,22,.15); font-size:.875rem; color:var(--e-muted); line-height:1.55; margin-top:16px; }
.un-consent input[type="checkbox"] { flex-shrink:0; margin-top:3px; accent-color:var(--e-accent); }

.un-drawer-submit { width:100%; padding:14px; border-radius:12px; border:none; background:linear-gradient(135deg,var(--e-accent-d),var(--e-accent)); color:#fff; font-family:'DM Sans',sans-serif; font-size:1rem; font-weight:700; cursor:pointer; transition:transform .2s, box-shadow .2s; margin-top:4px; box-shadow:0 4px 16px var(--e-accent-bg); }
.un-drawer-submit:hover:not(:disabled) { transform:translateY(-2px); box-shadow:0 8px 24px color-mix(in srgb,var(--e-accent) 35%,transparent); }
.un-drawer-submit:disabled { opacity:.45; cursor:not-allowed; }

.un-needs-list { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; }
.un-needs-list label { display:flex; align-items:flex-start; gap:8px; padding:10px 12px; border-radius:10px; background:var(--e-bg); border:1.5px solid var(--e-border); font-size:.85rem; color:var(--e-ink); cursor:pointer; transition:background .15s; text-transform:none !important; letter-spacing:0 !important; font-weight:400 !important; }
.un-needs-list label:hover { background:var(--e-accent-bg); border-color:var(--e-accent); }
.un-needs-list label input { flex-shrink:0; margin-top:2px; accent-color:var(--e-accent); }

.un-form-actions { display:flex; gap:10px; padding-top:16px; margin-top:16px; border-top:1px solid var(--e-border); flex-wrap:wrap; }
.un-save-btn { display:inline-flex; align-items:center; gap:7px; padding:10px 20px; border-radius:10px; border:none; background:var(--e-accent); color:#fff; font-family:inherit; font-size:.9rem; font-weight:700; cursor:pointer; transition:transform .18s, box-shadow .18s; }
.un-save-btn:hover { transform:translateY(-1px); box-shadow:0 6px 18px color-mix(in srgb,var(--e-accent) 35%,transparent); }

/* Pagination */
.un-pagination { display:flex; align-items:center; justify-content:center; gap:6px; margin-top:24px; flex-wrap:wrap; }
.un-pagination a, .un-pagination span { min-width:34px; height:34px; display:inline-flex; align-items:center; justify-content:center; border-radius:9px; border:1.5px solid var(--e-border); font-size:.82rem; font-weight:700; text-decoration:none; color:var(--e-ink); background:var(--e-surface); transition:background .15s; }
.un-pagination a:hover { background:var(--e-accent-bg); border-color:var(--e-accent); color:var(--e-accent); }
.un-pagination a.current { background:var(--e-accent); color:#fff; border-color:var(--e-accent); }
.un-pagination span.disabled { color:var(--e-faint); background:var(--e-bg); pointer-events:none; }

.un-edit-panel.open { display:block; padding:20px 22px; border-top:1px solid var(--e-border); background:var(--e-bg); }
.un-empty { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; padding:56px 24px; text-align:center; border:1.5px dashed var(--e-border); border-radius:var(--e-r-md); background:var(--e-bg); color:var(--e-muted); }
.un-empty i { font-size:2.4rem; opacity:.3; }
.un-empty h3 { margin:0; font-size:1.05rem; font-weight:700; color:var(--e-ink); }
.un-empty p { margin:0; font-size:.88rem; max-width:38ch; line-height:1.6; }
.un-success { display:flex; align-items:center; gap:10px; padding:12px 16px; border-radius:12px; margin:0 0 16px; background:#ecfdf5; color:#047857; border:1.5px solid #a7f3d0; font-size:.9rem; font-weight:600; }
.un-error { display:flex; align-items:center; gap:10px; padding:12px 16px; border-radius:12px; margin:0 0 16px; background:#fef2f2; color:#b91c1c; border:1.5px solid #fecaca; font-size:.9rem; font-weight:600; }
.un-toast { position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(20px); background:var(--e-ink); color:#fff; padding:12px 22px; border-radius:12px; font-size:.88rem; font-weight:600; box-shadow:0 8px 28px rgba(15,23,42,.25); opacity:0; transition:opacity .25s, transform .25s; pointer-events:none; z-index:9999; white-space:nowrap; }
.un-toast.show { opacity:1; transform:translateX(-50%) translateY(0); }

/* Status line */
.un-status-line { margin:8px 0 0; display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.un-status-chip { display:inline-block; padding:4px 10px; border-radius:999px; font-size:.72rem; font-weight:700; background:var(--e-accent-bg); color:var(--e-accent); border:1px solid color-mix(in srgb,var(--e-accent) 20%,transparent); }
.un-status-chip.listed { background:rgba(16,185,129,.1); color:#047857; border-color:rgba(16,185,129,.2); }
.un-status-hint { font-size:.75rem; color:var(--e-muted); }
.un-card-ongoing-actions { padding:10px 16px 12px; border-top:1px solid var(--e-border); background:rgba(245,158,11,.04); }
.un-btn-ongoing { width:100%; padding:.65rem 1rem; border-radius:12px; border:none; background:linear-gradient(135deg,#d97706,#f59e0b); color:#fff; font-weight:800; font-family:inherit; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:.4rem; box-shadow:0 3px 10px rgba(245,158,11,.3); }
.un-btn-ongoing:hover { filter:brightness(1.06); transform:translateY(-1px); }
.un-card-carrier-cta { padding:12px 16px 14px; border-top:1px dashed rgba(16,185,129,.3); background:linear-gradient(180deg,#f0fdf4,#fff); }
.un-card-carrier-cta-label { margin:0 0 8px; font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:#047857; }
.un-btn-match { background:linear-gradient(135deg,#059669,#047857); color:#fff; border:none; border-radius:10px; padding:.55rem 1rem; font-size:.82rem; font-weight:700; cursor:pointer; white-space:nowrap; display:inline-flex; align-items:center; gap:.4rem; box-shadow:0 4px 14px rgba(5,150,105,.3); }
.un-btn-match:hover { filter:brightness(1.08); transform:translateY(-1px); }
.un-btn-match-prominent { width:100%; justify-content:center; padding:.75rem 1.25rem; font-size:.92rem; border-radius:12px; }

/* ══════════════════════════════════════════════════════════
   PAYMENTS / WALLET
══════════════════════════════════════════════════════════ */

.jx-wallet .payments-body { padding-top: 28px; }

.payments-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 16px !important;
}

.wallet-card, .history-card {
  background: var(--e-surface) !important;
  border: 1.5px solid var(--e-border) !important;
  border-radius: var(--e-r-lg) !important;
  padding: 28px !important;
  box-shadow: 0 1px 4px rgba(15,23,42,.04) !important;
}

.wallet-stats {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 12px !important;
  margin-bottom: 20px !important;
}
.wallet-stat {
  padding: 20px 20px !important;
  border-radius: var(--e-r-md) !important;
  border: 1.5px solid var(--e-border) !important;
  background: var(--e-bg) !important;
  position: relative; overflow:hidden;
}
.wallet-stat:first-child { border-color: rgba(6,182,212,.2) !important; background: linear-gradient(145deg, rgba(6,182,212,.06), var(--e-bg)) !important; }
.wallet-stat-label { font-size: 11px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: .07em !important; color: var(--e-muted) !important; margin-bottom: 8px !important; }
.wallet-stat-value { font-size: 2rem !important; font-weight: 800 !important; color: var(--e-ink) !important; letter-spacing: -.04em !important; line-height: 1 !important; margin-bottom: 6px !important; }
.wallet-stat:first-child .wallet-stat-value { color: var(--e-teal) !important; }
.wallet-stat-hint { font-size: .76rem !important; color: var(--e-faint) !important; line-height: 1.45 !important; }

.wallet-method {
  display: flex !important; gap: 28px !important; align-items: flex-start !important;
  padding-top: 20px !important; border-top: 1.5px solid var(--e-border) !important; flex-wrap: wrap !important;
}
.wallet-method-left { flex: 1; min-width: 160px; }
.wallet-method-right { flex-shrink: 0; max-width: 280px; width: 100%; }
.wallet-method-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--e-muted); margin-bottom: 6px; }
.wallet-method-value { font-size: 1.05rem; font-weight: 700; color: var(--e-ink); margin-bottom: 4px; }
.wallet-method-extra { font-size: .8rem; color: var(--e-muted); line-height: 1.5; }
.wallet-withdraw-label { display:block; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:var(--e-muted); margin-bottom:8px; }
.wallet-withdraw-row { display:flex; align-items:center; border:1.5px solid var(--e-border); border-radius:12px; overflow:hidden; background:var(--e-bg); margin-bottom:8px; }
.wallet-withdraw-currency { padding:0 12px; font-weight:700; font-size:.9rem; color:var(--e-muted); border-right:1px solid var(--e-border); }
.wallet-withdraw-input { flex:1; border:none; background:transparent; padding:11px 12px; font-family:'DM Sans',sans-serif; font-size:.9375rem; font-weight:700; color:var(--e-ink); outline:none; }
.wallet-withdraw-hint { font-size:.78rem; color:var(--e-muted); line-height:1.5; margin-bottom:10px; }
.withdraw-button { width:100%; padding:13px; border-radius:12px; border:none; background:linear-gradient(135deg,var(--e-teal-d),var(--e-teal)); color:#fff; font-family:inherit; font-size:.9375rem; font-weight:700; cursor:pointer; transition:transform .2s, box-shadow .2s; box-shadow:0 4px 16px rgba(6,182,212,.25); }
.withdraw-button:hover { transform:translateY(-2px); box-shadow:0 8px 24px rgba(6,182,212,.35); }
.wallet-config-btn, .btn-primary { display:inline-flex !important; align-items:center !important; justify-content:center !important; min-height:40px !important; padding:0 18px !important; border-radius:10px !important; border:none !important; background:var(--e-accent-bg) !important; color:var(--e-accent) !important; text-decoration:none !important; font-size:.88rem !important; font-weight:700 !important; transition:transform .18s, box-shadow .18s !important; }
.wallet-config-btn:hover, .btn-primary:hover { transform:translateY(-1px) !important; box-shadow:0 4px 14px var(--e-accent-bg) !important; }

/* Payments history */
.history-title { font-size:1.15rem; font-weight:700; color:var(--e-ink); margin:0 0 4px; }
.history-subtitle { font-size:.875rem; color:var(--e-muted); margin:0 0 18px; }
.tabs { display:flex; gap:4px; background:var(--e-bg); border:1.5px solid var(--e-border); border-radius:12px; padding:4px; margin-bottom:16px; }
.tab-button { flex:1; padding:10px 14px; border:none; border-radius:10px; background:transparent; font-family:inherit; font-size:.875rem; font-weight:600; color:var(--e-muted); cursor:pointer; transition:all .18s; }
.tab-button.active { background:var(--e-surface); color:var(--e-ink); box-shadow:0 1px 6px rgba(15,23,42,.08); }
.tab-button:not(.active):hover { color:var(--e-ink); background:rgba(15,23,42,.03); }
.tab-content { display:none; }
.tab-content.active { display:block; }

.payments-table { width:100%; border-collapse:collapse; font-size:.875rem; }
.payments-table th { background:var(--e-bg); padding:10px 13px; text-align:left; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--e-muted); border-bottom:1.5px solid var(--e-border); }
.payments-table td { padding:13px; border-bottom:1px solid var(--e-border); color:var(--e-mid); vertical-align:middle; }
.payments-table tr:last-child td { border-bottom:none; }
.payments-table tr:hover td { background:var(--e-bg); }
.status-pill { display:inline-flex; align-items:center; padding:4px 10px; border-radius:999px; font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; }
.status-initiated { background:rgba(59,130,246,.1); color:var(--e-blue); }
.status-hold      { background:rgba(245,158,11,.1); color:#b45309; }
.status-released  { background:rgba(16,185,129,.1); color:#047857; }
.status-refunded  { background:rgba(239,68,68,.1); color:#b91c1c; }
.status-paid      { background:rgba(16,185,129,.1); color:#047857; }
.status-unknown   { background:var(--e-bg); color:var(--e-muted); }
.empty-state { padding:40px 20px; text-align:center; color:var(--e-muted); font-size:.88rem; border:1.5px dashed var(--e-border); border-radius:14px; background:var(--e-bg); }
.history-pagination { display:flex; align-items:center; justify-content:center; gap:8px; padding:16px 0 0; flex-wrap:wrap; }
.page-link { min-height:34px; padding:0 12px; border-radius:9px; border:1.5px solid var(--e-border); background:var(--e-surface); color:var(--e-ink); text-decoration:none; font-size:.82rem; font-weight:700; display:inline-flex; align-items:center; transition:background .15s; }
.page-link:hover { background:var(--e-accent-bg); border-color:var(--e-accent); color:var(--e-accent); }
.page-link.disabled { color:var(--e-faint); background:var(--e-bg); border-color:var(--e-border); pointer-events:none; }
.page-info { font-size:.82rem; color:var(--e-muted); font-weight:600; }
.success-box { padding:12px 16px; border-radius:12px; background:#ecfdf5; color:#047857; border:1.5px solid #a7f3d0; font-size:.9rem; font-weight:600; margin-bottom:14px; }
.error-box { padding:12px 16px; border-radius:12px; background:#fef2f2; color:#b91c1c; border:1.5px solid #fecaca; font-size:.9rem; font-weight:600; margin-bottom:14px; }

/* ══════════════════════════════════════════════════════════
   FAQ / HELP
══════════════════════════════════════════════════════════ */
.vf-wrap { padding-top: 28px; }
.vf-quick-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:28px; }
.vf-quick-card { display:block; padding:18px 14px; border-radius:var(--e-r-md); border:1.5px solid var(--e-border); background:var(--e-surface); text-align:center; text-decoration:none; color:inherit; transition:transform .18s, box-shadow .18s; box-shadow:0 1px 4px rgba(15,23,42,.04); }
.vf-quick-card:hover { transform:translateY(-3px); box-shadow:0 8px 24px rgba(15,23,42,.09); border-color:var(--e-teal); }
.vf-quick-icon { width:42px; height:42px; margin:0 auto 10px; border-radius:12px; background:rgba(6,182,212,.1); color:var(--e-teal); display:flex; align-items:center; justify-content:center; font-size:1rem; }
.vf-quick-card h3 { margin:0 0 4px; font-size:.875rem; font-weight:700; color:var(--e-ink); }
.vf-quick-card p { margin:0; font-size:.75rem; color:var(--e-muted); }

.vf-faq-section { margin-bottom:28px; }
.vf-faq-section h2 { display:flex; align-items:center; gap:8px; font-size:10px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--e-muted); margin:0 0 14px; }
.vf-faq-section h2::before { content:''; width:16px; height:2px; border-radius:1px; background:var(--e-teal); opacity:.5; }
.vf-faq-item { border:1.5px solid var(--e-border); border-radius:var(--e-r-md); margin-bottom:8px; background:var(--e-surface); overflow:hidden; transition:border-color .15s; }
.vf-faq-item:hover { border-color:var(--e-teal); }
.vf-faq-item.is-open { border-color:var(--e-teal); }
.vf-faq-q { width:100%; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:18px 20px; border:none; background:transparent; font-family:inherit; font-size:.9375rem; font-weight:600; color:var(--e-ink); cursor:pointer; text-align:left; }
.vf-faq-q i { color:var(--e-muted); font-size:11px; transition:transform .2s; flex-shrink:0; }
.vf-faq-item.is-open .vf-faq-q i { transform:rotate(180deg); color:var(--e-teal); }
.vf-faq-a { display:none; padding:0 20px 18px; font-size:.9375rem; color:var(--e-muted); line-height:1.65; }
.vf-faq-item.is-open .vf-faq-a { display:block; }
.vf-contact-strip { display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; padding:20px 22px; border-radius:var(--e-r-md); border:1.5px solid var(--e-border); background:var(--e-bg); margin-top:8px; }
.vf-contact-strip h2 { margin:0 0 4px; font-size:.95rem; font-weight:700; color:var(--e-ink); font-family:inherit; letter-spacing:normal; text-transform:none; }
.vf-contact-strip h2::before { display:none; }
.vf-contact-strip p { margin:0; font-size:.82rem; color:var(--e-muted); }
.vf-contact-btns { display:flex; gap:8px; flex-wrap:wrap; }
.vf-btn { display:inline-flex; align-items:center; gap:8px; padding:9px 16px; border:none; border-radius:10px; background:var(--e-accent-bg); color:var(--e-accent); font-family:inherit; font-size:.875rem; font-weight:700; cursor:pointer; text-decoration:none; transition:transform .15s, box-shadow .15s; }
.vf-btn:hover { transform:translateY(-1px); box-shadow:0 4px 14px var(--e-accent-bg); }
.vf-btn-outline { background:var(--e-surface); color:var(--e-ink); border:1.5px solid var(--e-border); }
.vf-btn-outline:hover { background:var(--e-bg); box-shadow:none; }

/* ══════════════════════════════════════════════════════════
   ADMIN TOOLS (logviewer, dbquery, incidents, payment_configs)
══════════════════════════════════════════════════════════ */

.jx-admin.logviewer-container,
.jx-admin.dbquery-container { max-width: 1100px !important; }

.vf-wrap { animation: ev-rise .35s var(--e-ease) both; }

/* vf-table */
.vf-table-wrap { border:1.5px solid var(--e-border) !important; border-radius:var(--e-r-md) !important; background:var(--e-surface) !important; box-shadow:0 1px 4px rgba(15,23,42,.04) !important; overflow:hidden; }
.vf-table { width:100%; border-collapse:collapse; font-size:.875rem; }
.vf-table th { background:var(--e-bg) !important; padding:10px 14px !important; text-align:left !important; font-size:10px !important; font-weight:700 !important; text-transform:uppercase !important; letter-spacing:.06em !important; color:var(--e-muted) !important; border-bottom:1.5px solid var(--e-border) !important; }
.vf-table td { padding:12px 14px !important; border-bottom:1px solid var(--e-border) !important; color:var(--e-mid) !important; vertical-align:top !important; }
.vf-table tr:last-child td { border-bottom:none !important; }
.vf-table tr:hover td { background:var(--e-bg) !important; }
.vf-sev-critical { color:#dc2626 !important; font-weight:700 !important; }
.vf-sev-high { color:var(--e-ember) !important; font-weight:700 !important; }
.vf-sev-medium { color:#b45309 !important; }
.vf-sev-low { color:var(--e-muted) !important; }

/* vf-filters / chips */
.vf-filters { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:18px; }
.vf-chip { font-size:12px; font-weight:600; padding:7px 14px; border-radius:999px; text-decoration:none; color:var(--e-muted); background:var(--e-surface); border:1.5px solid var(--e-border); transition:all .15s; }
.vf-chip:hover { color:var(--e-ink); background:var(--e-bg); }
.vf-chip.is-active { background:var(--e-accent-bg); color:var(--e-accent); border-color:color-mix(in srgb,var(--e-accent) 25%,transparent); }

.vf-empty { padding:40px 20px; text-align:center; color:var(--e-muted); font-size:.88rem; border:1.5px dashed var(--e-border); border-radius:var(--e-r-md); background:var(--e-bg); }

/* Log controls */
.log-controls { display:flex; flex-wrap:wrap; gap:8px; align-items:center; padding:16px 18px; background:var(--e-surface); border:1.5px solid var(--e-border); border-radius:var(--e-r-md); margin-bottom:12px; }
.log-controls label { font-size:.82rem; font-weight:600; color:var(--e-muted); display:flex; align-items:center; gap:6px; white-space:nowrap; }
.log-controls select, .log-controls input[type="text"] { padding:8px 12px; border:1.5px solid var(--e-border); border-radius:10px; background:var(--e-bg); font-family:'DM Sans',inherit; font-size:.875rem; color:var(--e-ink); height:38px; transition:border-color .18s; }
.log-controls input[type="text"] { min-width:180px; }
.log-controls select:focus, .log-controls input[type="text"]:focus { outline:none; border-color:var(--e-accent); box-shadow:0 0 0 3px var(--e-accent-bg); }
.log-controls button { display:inline-flex; align-items:center; gap:6px; height:38px; padding:0 16px; border-radius:10px; border:none; background:var(--e-violet) !important; color:#fff !important; font-family:inherit; font-size:.875rem; font-weight:700; cursor:pointer; transition:transform .18s, box-shadow .18s; }
.log-controls button:hover { transform:translateY(-1px); box-shadow:0 4px 14px rgba(124,58,237,.2); }

.log-filters { display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-bottom:12px; padding:12px 14px; background:var(--e-surface); border:1.5px solid var(--e-border); border-radius:12px; }
.log-filters strong { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--e-muted); }
.log-filters label { display:inline-flex; align-items:center; gap:5px; padding:5px 10px; border-radius:8px; background:var(--e-bg); border:1.5px solid var(--e-border); font-size:.78rem; font-weight:600; color:var(--e-muted); cursor:pointer; transition:all .15s; white-space:nowrap; }
.log-filters label:hover { background:var(--e-accent-bg); color:var(--e-accent); border-color:color-mix(in srgb,var(--e-accent) 25%,transparent); }
.log-filters label input[type="checkbox"] { width:12px; height:12px; accent-color:var(--e-accent); }
.log-line::before { content:''; }

#logContent { background:#080e1f !important; border:1.5px solid rgba(59,130,246,.12) !important; border-radius:var(--e-r-md) !important; padding:16px !important; max-height:66vh; overflow:auto; }
.log-line { border-radius:8px !important; padding:8px 12px !important; margin-bottom:4px !important; font-family:ui-monospace,'Cascadia Code','SF Mono',monospace !important; font-size:11.5px !important; line-height:1.6 !important; transition:none !important; }
.log-line:hover { transform:none !important; box-shadow:none !important; }
.log-info    { background:rgba(59,130,246,.08) !important; border-left:3px solid rgba(59,130,246,.4) !important; color:#a5b4fc !important; }
.log-success { background:rgba(16,185,129,.08) !important; border-left:3px solid rgba(16,185,129,.45) !important; color:#6ee7b7 !important; }
.log-error   { background:rgba(239,68,68,.09) !important; border-left:3px solid rgba(239,68,68,.5) !important; color:#fca5a5 !important; }
.log-warning { background:rgba(245,158,11,.09) !important; border-left:3px solid rgba(245,158,11,.45) !important; color:#fcd34d !important; }

/* DB Query */
.table-list { display:flex; flex-wrap:wrap; gap:6px; margin:0 0 20px; padding:0; list-style:none; }
.table-item { padding:6px 12px; border-radius:9px; cursor:pointer; font-size:12px; font-weight:600; border:1.5px solid var(--e-border); background:var(--e-bg); color:var(--e-muted); transition:all .15s; }
.table-item:hover { background:var(--e-accent-bg); color:var(--e-accent); border-color:color-mix(in srgb,var(--e-accent) 25%,transparent); transform:translateY(-1px); }
.color-0 { background:rgba(59,130,246,.07); color:var(--e-blue); border-color:rgba(59,130,246,.15); }
.color-1 { background:rgba(6,182,212,.07); color:var(--e-teal); border-color:rgba(6,182,212,.15); }
.color-2 { background:rgba(249,115,22,.07); color:var(--e-ember); border-color:rgba(249,115,22,.15); }
.color-3 { background:rgba(124,58,237,.07); color:var(--e-violet); border-color:rgba(124,58,237,.15); }
.color-4, .color-5 { background:var(--e-bg); color:var(--e-muted); border-color:var(--e-border); }

#queryForm { display:flex; flex-direction:column; gap:12px; margin-bottom:16px; }
#queryForm textarea { min-height:140px; padding:14px; border:1.5px solid var(--e-border); border-radius:12px; font-family:ui-monospace,'Cascadia Code','SF Mono',monospace; font-size:.875rem; resize:vertical; background:var(--e-bg); color:var(--e-ink); transition:border-color .18s; }
#queryForm textarea:focus { outline:none; border-color:var(--e-violet); box-shadow:0 0 0 3px rgba(124,58,237,.08); background:#fff; }
#queryForm button { align-self:flex-start; display:inline-flex; align-items:center; gap:8px; padding:10px 20px; border:none; border-radius:10px; background:rgba(124,58,237,.1); color:var(--e-violet); font-weight:700; font-size:.9rem; cursor:pointer; transition:transform .18s, box-shadow .18s; font-family:inherit; }
#queryForm button:hover { transform:translateY(-1px); box-shadow:0 4px 14px rgba(124,58,237,.2); }
.query-output { border:1.5px solid var(--e-border) !important; border-radius:var(--e-r-md) !important; background:var(--e-surface) !important; overflow:hidden; }
.query-scroll { max-height:60vh; overflow:auto; }
.result-table { width:100%; border-collapse:collapse; font-size:.82rem; }
.result-table th { background:var(--e-bg) !important; padding:10px 13px !important; font-size:10px !important; font-weight:700 !important; text-transform:uppercase !important; letter-spacing:.06em !important; color:var(--e-muted) !important; border-bottom:1.5px solid var(--e-border) !important; text-align:left; position:sticky; top:0; z-index:1; }
.result-table td { padding:10px 13px !important; border-bottom:1px solid var(--e-border) !important; color:var(--e-mid) !important; text-align:left; }
.result-table tr:last-child td { border-bottom:none !important; }
.result-table tr:hover td { background:var(--e-bg) !important; }
.query-status { display:inline-flex; align-items:center; gap:7px; padding:10px 14px; color:#047857 !important; font-weight:700 !important; font-size:.875rem; background:#ecfdf5; border-radius:10px; margin:14px; }
.query-error { display:inline-flex; align-items:center; gap:7px; padding:10px 14px; color:#b91c1c !important; font-weight:700 !important; font-size:.875rem; background:#fef2f2; border-radius:10px; margin:14px; }

/* Autocomplete */
.autocomplete-dropdown { background:var(--e-surface); border:1.5px solid var(--e-border); border-radius:12px; box-shadow:0 12px 40px rgba(15,23,42,.14); overflow:hidden; z-index:10000; }
.autocomplete-item { padding:10px 14px; font-size:.875rem; color:var(--e-ink); cursor:pointer; border-bottom:1px solid var(--e-border); transition:background .12s; }
.autocomplete-item:last-child { border-bottom:none; }
.autocomplete-item:hover { background:var(--e-accent-bg); color:var(--e-accent); }

/* Modal */
.modal-overlay { position:fixed; inset:0; z-index:9000; background:rgba(15,23,42,.6); backdrop-filter:blur(6px); display:flex; align-items:center; justify-content:center; padding:24px; }
.modal-content { background:var(--e-surface); border-radius:20px; padding:36px 30px; max-width:440px; width:100%; box-shadow:0 24px 64px rgba(15,23,42,.22); text-align:center; }
.modal-icon { font-size:2.5rem; margin-bottom:12px; }
.modal-header h3 { margin:0 0 12px; font-size:1.2rem; font-weight:800; color:var(--e-ink); }
.modal-body p { color:var(--e-muted); font-size:.9rem; line-height:1.6; margin:0 0 14px; }
.route-display { display:flex; align-items:center; justify-content:center; gap:10px; margin-top:8px; }
.route-tag { padding:5px 12px; border-radius:999px; background:var(--e-bg); border:1.5px solid var(--e-border); font-size:.8rem; font-weight:700; color:var(--e-ink); }
.route-arrow { color:var(--e-faint); font-size:1rem; }

/* ══════════════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════════════ */

/* All pages — content padding */
@media (max-width: 767px) {
  .jx-page > *:not(.jx-hero) { padding-left: 18px !important; padding-right: 18px !important; }
  .jx-hero, .jx-hero.jx-hero-compact { padding: 32px 20px 30px !important; }
  .jx-hero h1 { font-size: 1.7rem !important; }
  .jx-hero-icon { font-size: 5rem !important; }
  .jx-features { flex-wrap: wrap !important; padding-left: 18px !important; padding-right: 18px !important; }
  .jx-feat { margin-right: 16px !important; }
  .jx-paths { grid-template-columns: 1fr !important; padding-top: 20px !important; }
  .jx-flow { grid-template-columns: repeat(3, 1fr) !important; }
  .wallet-stats { grid-template-columns: 1fr !important; }
  .wallet-method { flex-direction: column; }
  .wallet-method-right { max-width: none; }
  .un-tabs { padding: 10px 18px !important; }
  .vf-quick-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .un-card-summary { flex-wrap: wrap !important; }
  .jx-hero-row { flex-direction: column !important; align-items: flex-start !important; }
  .un-form-grid { grid-template-columns: 1fr !important; }
  .un-needs-list { grid-template-columns: 1fr !important; }
  .un-type-grid { grid-template-columns: 1fr !important; }
}

@media (max-width: 479px) {
  .jx-page > *:not(.jx-hero) { padding-left: 14px !important; padding-right: 14px !important; }
  .jx-hero, .jx-hero.jx-hero-compact { padding: 26px 16px 24px !important; }
  .jx-hero h1 { font-size: 1.45rem !important; }
  .jx-hero-icon { display: none !important; }
  .jx-flow { grid-template-columns: repeat(2, 1fr) !important; }
  .jx-flow-step span { display: none !important; }
  .vf-quick-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .wallet-stat-value { font-size: 1.65rem !important; }
  .tabs { grid-template-columns: 1fr 1fr !important; display: grid !important; }
  .un-tabs { flex-wrap: wrap !important; }
  .un-add-btn { margin-left: 0 !important; width: 100% !important; justify-content: center !important; }
  .un-ms-label { display: none !important; }
  .log-controls { flex-direction: column; align-items: stretch; }
  .log-controls select, .log-controls input[type="text"], .log-controls button { width: 100%; }
  .un-prereq-footer { flex-direction: column; align-items: stretch; }
  .un-change-btn, .un-btn-proceed { width: 100%; justify-content: center; }
  .un-form-card-hdr { flex-direction: column; align-items: flex-start; gap: 10px; }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .jx-features { flex-wrap: wrap !important; }
  .jx-flow { grid-template-columns: repeat(3, 1fr) !important; }
}

@media (min-width: 1024px) {
  .un-type-grid { grid-template-columns: repeat(4, 1fr); }
  .jx-flow { grid-template-columns: repeat(6, 1fr) !important; }
  .jx-features { flex-wrap: nowrap !important; }
}

@media (prefers-reduced-motion: reduce) {
  .jx-page, .jx-path, .un-card, .un-type-card,
  .vf-quick-card, .jx-hero-btn, .withdraw-button,
  .un-save-btn, .un-btn-pay { animation: none !important; transition: none !important; }
}

/* ══════════════════════════════════════════════════════════
   UN CARD — supplementary (overrides user_needs.css)
══════════════════════════════════════════════════════════ */
.un-card-meta {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex-wrap: wrap !important;
  margin-top: 7px !important;
}
.un-card-amount {
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 800 !important;
  font-size: 1.05rem !important;
  color: var(--e-ink) !important;
  text-align: right !important;
  white-space: nowrap !important;
}
.un-card-amount small {
  display: block !important;
  font-size: .65rem !important;
  font-weight: 600 !important;
  color: var(--e-faint) !important;
  text-transform: uppercase !important;
  letter-spacing: .05em !important;
}
.un-card-btns {
  display: flex !important;
  gap: 6px !important;
  flex-wrap: wrap !important;
  justify-content: flex-end !important;
}

/* embed-mode inner padding */
body.ja-embed .jx-page > *:not(.jx-hero) {
  padding-left: 20px !important;
  padding-right: 20px !important;
}
body.ja-embed .jx-features {
  padding-left: 20px !important;
  padding-right: 20px !important;
}
body.ja-embed .un-tabs {
  padding: 10px 20px !important;
}

/* ══════════════════════════════════════════════════════════
   PAYMENT CONFIGS PAGE
══════════════════════════════════════════════════════════ */
.pc-body { padding-top: 20px; text-align: left !important; }
.controls-row {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 20px;
  padding: 16px 18px;
  background: var(--e-surface);
  border: 1.5px solid var(--e-border);
  border-radius: var(--e-r-md);
}
.controls-row .control { display: flex; flex-direction: column; gap: 5px; }
.controls-row label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--e-muted); }
.controls-row input, .controls-row select {
  padding: 9px 12px;
  border: 1.5px solid var(--e-border);
  border-radius: 10px;
  background: var(--e-bg);
  font-family: 'DM Sans', sans-serif;
  font-size: .875rem;
  color: var(--e-ink);
  min-width: 140px;
  transition: border-color .18s;
}
.controls-row input:focus, .controls-row select:focus {
  outline: none;
  border-color: var(--e-accent);
  box-shadow: 0 0 0 3px var(--e-accent-bg);
}

.carousel-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}
.carousel-track {
  flex: 1;
  display: flex;
  gap: 12px;
  overflow: hidden;
  scroll-snap-type: x mandatory;
}
.nav-arrow {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1.5px solid var(--e-border);
  background: var(--e-surface);
  color: var(--e-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .18s;
}
.nav-arrow:hover { background: var(--e-accent-bg); border-color: var(--e-accent); color: var(--e-accent); }
.nav-arrow svg { width: 16px; height: 16px; }

.flow-tracker {
  padding: 18px 20px;
  background: var(--e-surface);
  border: 1.5px solid var(--e-border);
  border-radius: var(--e-r-md);
}
.flow-tracker h2 { font-size: .875rem; font-weight: 700; color: var(--e-ink); margin: 0 0 12px; }
.flow-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }

/* ══════════════════════════════════════════════════════════
   PROFILE PAGE — compatibility layer
══════════════════════════════════════════════════════════ */
/* Profile has its own .pf-sheet card — just ensure the outer frame is clean */
.jx-page.jx-profile { padding-top: 0 !important; }
.jx-page.jx-profile > .pf-flash,
.jx-page.jx-profile > form {
  padding-left: 36px;
  padding-right: 36px;
}
@media (max-width: 767px) {
  .jx-page.jx-profile > .pf-flash,
  .jx-page.jx-profile > form { padding-left: 18px; padding-right: 18px; }
}
@media (max-width: 479px) {
  .jx-page.jx-profile > .pf-flash,
  .jx-page.jx-profile > form { padding-left: 14px; padding-right: 14px; }
}

/* ══════════════════════════════════════════════════════════
   SECTION TITLES (shared helper)
══════════════════════════════════════════════════════════ */
.ev-section-title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--e-muted);
  margin: 0 0 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.ev-section-title::before {
  content: '';
  width: 20px; height: 2px;
  border-radius: 1px;
  background: var(--e-accent);
  opacity: .4;
}

/* ══════════════════════════════════════════════════════════
   vf-input / vf-select (view-flow forms used in help / admin)
══════════════════════════════════════════════════════════ */
.vf-input, .vf-select, .vf-textarea {
  padding: 10px 12px !important;
  border: 1.5px solid var(--e-border) !important;
  border-radius: 10px !important;
  background: var(--e-bg) !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: .9rem !important;
  color: var(--e-ink) !important;
  transition: border-color .18s, box-shadow .18s !important;
  width: 100% !important;
  box-sizing: border-box;
}
.vf-input:focus, .vf-select:focus, .vf-textarea:focus {
  outline: none !important;
  border-color: var(--e-accent) !important;
  box-shadow: 0 0 0 3px var(--e-accent-bg) !important;
  background: #fff !important;
}

/* Scrollbar tinting inside log/query containers */
#logContent::-webkit-scrollbar,
.query-scroll::-webkit-scrollbar { width: 5px; height: 5px; }
#logContent::-webkit-scrollbar-track,
.query-scroll::-webkit-scrollbar-track { background: transparent; }
#logContent::-webkit-scrollbar-thumb { background: rgba(99,102,241,.3); border-radius: 3px; }
.query-scroll::-webkit-scrollbar-thumb { background: rgba(99,102,241,.2); border-radius: 3px; }

/* ══════════════════════════════════════════════════════════
   INCIDENTS — status badges + action buttons
══════════════════════════════════════════════════════════ */
.inc-status-badge { display:inline-block; padding:3px 10px; border-radius:999px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; }
.inc-status-open        { background:rgba(239,68,68,.1);   color:#b91c1c; border:1px solid rgba(239,68,68,.25); }
.inc-status-acknowledged{ background:rgba(245,158,11,.1);  color:#92400e; border:1px solid rgba(245,158,11,.25); }
.inc-status-resolved    { background:rgba(16,185,129,.1);  color:#065f46; border:1px solid rgba(16,185,129,.25); }

.inc-actions { display:flex; gap:4px; align-items:center; }
.inc-btn { display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:8px; border:1.5px solid var(--e-border); background:var(--e-surface); color:var(--e-muted); cursor:pointer; font-size:12px; transition:all .15s; }
.inc-btn:hover { transform:translateY(-1px); }
.inc-btn-ack:hover  { background:rgba(245,158,11,.1);  border-color:rgba(245,158,11,.3);  color:#92400e; }
.inc-btn-res:hover  { background:rgba(16,185,129,.1);  border-color:rgba(16,185,129,.3);  color:#065f46; }
.inc-btn-open:hover { background:rgba(239,68,68,.1);   border-color:rgba(239,68,68,.3);   color:#b91c1c; }
.inc-btn:disabled   { opacity:.4; cursor:not-allowed; transform:none; }

/* ══════════════════════════════════════════════════════════
   PAYMENT CONFIGS — redesigned two-panel layout
══════════════════════════════════════════════════════════ */
.pc-toolbar {
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:16px 20px; margin-bottom:20px;
  background:var(--e-surface); border:1.5px solid var(--e-border); border-radius:var(--e-r-md);
}
.pc-toolbar-label { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:var(--e-muted); white-space:nowrap; }
.pc-toolbar input[type="number"], .pc-toolbar select {
  padding:9px 12px; border:1.5px solid var(--e-border); border-radius:10px;
  background:var(--e-bg); font-family:'DM Sans',sans-serif; font-size:.875rem; color:var(--e-ink);
  transition:border-color .18s; min-width:130px;
}
.pc-toolbar input[type="number"]:focus, .pc-toolbar select:focus {
  outline:none; border-color:var(--e-accent); box-shadow:0 0 0 3px var(--e-accent-bg);
}
.pc-nav-pill { display:flex; align-items:center; gap:6px; margin-left:auto; }
.pc-nav-btn {
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:50%; border:1.5px solid var(--e-border);
  background:var(--e-surface); color:var(--e-muted); cursor:pointer; transition:all .18s;
}
.pc-nav-btn:hover { background:var(--e-accent-bg); border-color:var(--e-accent); color:var(--e-accent); }
.pc-nav-btn:disabled { opacity:.35; cursor:not-allowed; }
.pc-nav-btn svg { width:15px; height:15px; }
.pc-pager { font-size:.8rem; font-weight:700; color:var(--e-muted); white-space:nowrap; min-width:60px; text-align:center; }

.pc-layout { display:grid; grid-template-columns:1fr 340px; gap:20px; align-items:start; }
@media (max-width:900px) { .pc-layout { grid-template-columns:1fr; } }

.pc-card {
  background:var(--e-surface); border:1.5px solid var(--e-border); border-radius:var(--e-r-lg);
  overflow:hidden;
}
.pc-card-head {
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 20px; border-bottom:1px solid var(--e-border);
  background:linear-gradient(90deg, var(--e-bg), var(--e-surface));
}
.pc-card-title { font-size:.9rem; font-weight:800; color:var(--e-ink); }
.pc-card-sub { font-size:.78rem; color:var(--e-muted); font-weight:600; }
.pc-status-pill {
  padding:3px 10px; border-radius:999px; font-size:10px; font-weight:700;
  text-transform:uppercase; letter-spacing:.06em;
  background:rgba(16,185,129,.1); color:#065f46; border:1px solid rgba(16,185,129,.2);
}
.pc-card-body { padding:20px; }
.pc-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width:640px) { .pc-grid { grid-template-columns:1fr; } }

.pc-field { display:flex; flex-direction:column; gap:5px; }
.pc-field label { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--e-muted); }
.pc-field input, .pc-field select {
  padding:9px 12px; border:1.5px solid var(--e-border); border-radius:10px;
  background:var(--e-bg); font-family:'DM Sans',sans-serif; font-size:.875rem; color:var(--e-ink);
  transition:border-color .18s;
}
.pc-field input:focus, .pc-field select:focus {
  outline:none; border-color:var(--e-accent); box-shadow:0 0 0 3px var(--e-accent-bg);
}
.pc-field-row { display:flex; gap:6px; }
.pc-field-row input { flex:1; min-width:0; }
.pc-field-row select { flex-shrink:0; width:90px; }
.pc-full { grid-column:1/-1; }
.pc-card-foot {
  display:flex; gap:8px; align-items:center; padding:16px 20px;
  border-top:1px solid var(--e-border); background:var(--e-bg);
}
.pc-save-btn {
  display:inline-flex; align-items:center; gap:7px; padding:10px 20px;
  border:none; border-radius:10px; background:var(--e-accent); color:#fff;
  font-family:inherit; font-size:.875rem; font-weight:700; cursor:pointer;
  transition:transform .18s, box-shadow .18s;
}
.pc-save-btn:hover { transform:translateY(-1px); box-shadow:0 4px 14px rgba(0,0,0,.15); }
.pc-save-btn:disabled { opacity:.6; cursor:not-allowed; transform:none; }
.pc-reset-btn {
  display:inline-flex; align-items:center; gap:7px; padding:10px 18px;
  border:1.5px solid var(--e-border); border-radius:10px; background:transparent; color:var(--e-muted);
  font-family:inherit; font-size:.875rem; font-weight:600; cursor:pointer;
  transition:all .18s;
}
.pc-reset-btn:hover { border-color:var(--e-accent); color:var(--e-accent); background:var(--e-accent-bg); }

.pc-calc {
  background:var(--e-surface); border:1.5px solid var(--e-border); border-radius:var(--e-r-lg);
  overflow:hidden; position:sticky; top:20px;
}
.pc-calc-head {
  padding:16px 20px; border-bottom:1px solid var(--e-border);
  background:linear-gradient(135deg, var(--e-accent-bg), var(--e-surface));
}
.pc-calc-head h3 { margin:0; font-size:.9rem; font-weight:800; color:var(--e-ink); display:flex; align-items:center; gap:8px; }
.pc-calc-head h3 i { color:var(--e-accent); }
.pc-calc-body { padding:20px; display:flex; flex-direction:column; gap:0; }
.pc-calc-row {
  display:flex; align-items:center; justify-content:space-between;
  padding:11px 0; border-bottom:1px solid var(--e-border); gap:12px;
}
.pc-calc-row:last-child { border-bottom:none; padding-bottom:0; }
.pc-calc-label { font-size:.8rem; color:var(--e-muted); font-weight:600; display:flex; align-items:center; gap:7px; }
.pc-calc-label i { width:18px; text-align:center; }
.pc-calc-val { font-size:.9rem; font-weight:800; color:var(--e-ink); font-variant-numeric:tabular-nums; }
.pc-calc-val.is-total {
  font-size:1.15rem; color:var(--e-accent);
  background:var(--e-accent-bg); padding:5px 10px; border-radius:8px;
}
.pc-calc-val.is-negative { color:#b91c1c; }
.pc-calc-divider { height:1px; background:var(--e-border); margin:4px 0; }
.pc-calc-base { font-size:.75rem; color:var(--e-muted); text-align:center; padding:12px 0 0; }