/* ══════════════════════════════════════════════════════════════════
   ETRUBA HUB — design system ("Gold Desk")
   public/assets/css/etruba-theme.css
   Dark is the default theme; light is chosen with the theme button
   (stored in localStorage "theme", applied as data-bs-theme on <html>).
   Bootstrap 5.3 reads the same attribute, so its components follow.
   ══════════════════════════════════════════════════════════════════ */

/* ── 1. Tokens ───────────────────────────────────────────────────── */
:root,
[data-bs-theme="dark"] {
  color-scheme: dark;
  --eh-bg: #0b0d12;
  --eh-bg2: #090b0f;          /* sidebar */
  --eh-sf: #12151c;           /* cards */
  --eh-sf2: #191d26;          /* inputs, tiles */
  --eh-sf3: #0d0f14;          /* sunken */
  --eh-ln: #262b36;
  --eh-ln2: #343a47;
  --eh-tx: #eef0f4;
  --eh-tx2: #c6cad4;
  --eh-mu: #8b92a3;
  --eh-mu2: #5d6475;
  --eh-gd: #f2b634;           /* brand gold */
  --eh-gd-tx: #f2b634;        /* gold used as text */
  --eh-gd-soft: rgba(242, 182, 52, .12);
  --eh-bl: #3d8bff;
  --eh-bl-tx: #8cb8ff;
  --eh-bl-soft: rgba(61, 139, 255, .14);
  --eh-ok: #2fc28a;
  --eh-ok-soft: rgba(47, 194, 138, .13);
  --eh-wr: #f5a524;
  --eh-wr-soft: rgba(245, 165, 36, .13);
  --eh-er: #ff5d6c;
  --eh-er-soft: rgba(255, 93, 108, .12);
  --eh-shadow: 0 18px 40px -24px rgba(0, 0, 0, .8);
  --eh-glow: radial-gradient(120% 140% at 100% 0%, rgba(242, 182, 52, .18), transparent 55%);
  --eh-radius: 16px;
  --eh-radius-sm: 11px;
  --eh-font: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --eh-display: "Sora", "Manrope", system-ui, sans-serif;
  --eh-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --eh-sidebar-w: 256px;

  /* bridge to Bootstrap */
  --bs-body-bg: var(--eh-bg);
  --bs-body-color: var(--eh-tx);
  --bs-secondary-color: var(--eh-mu);
  --bs-tertiary-bg: var(--eh-sf2);
  --bs-secondary-bg: var(--eh-sf2);
  --bs-border-color: var(--eh-ln);
  --bs-emphasis-color: #fff;
  --bs-link-color: var(--eh-bl-tx);
  --bs-link-hover-color: #b4d0ff;
  --bs-body-font-family: var(--eh-font);
}

[data-bs-theme="light"] {
  color-scheme: light;
  --eh-bg: #f4f6fa;
  --eh-bg2: #ffffff;
  --eh-sf: #ffffff;
  --eh-sf2: #f1f4f9;
  --eh-sf3: #f7f9fc;
  --eh-ln: #e2e7ef;
  --eh-ln2: #cfd7e3;
  --eh-tx: #0f1b2d;
  --eh-tx2: #33415a;
  --eh-mu: #64718a;
  --eh-mu2: #8d98ad;
  --eh-gd: #f0ae20;
  --eh-gd-tx: #9a6500;
  --eh-gd-soft: rgba(240, 174, 32, .14);
  --eh-bl: #1a5fd6;
  --eh-bl-tx: #1a5fd6;
  --eh-bl-soft: #e9f1ff;
  --eh-ok: #12805c;
  --eh-ok-soft: #e3f5ee;
  --eh-wr: #a86400;
  --eh-wr-soft: #fff2dc;
  --eh-er: #c4323f;
  --eh-er-soft: #fde8ea;
  --eh-shadow: 0 16px 36px -24px rgba(15, 27, 45, .35);
  --eh-glow: radial-gradient(120% 140% at 100% 0%, rgba(240, 174, 32, .16), transparent 55%);

  --bs-body-bg: var(--eh-bg);
  --bs-body-color: var(--eh-tx);
  --bs-secondary-color: var(--eh-mu);
  --bs-tertiary-bg: var(--eh-sf2);
  --bs-secondary-bg: var(--eh-sf2);
  --bs-border-color: var(--eh-ln);
  --bs-emphasis-color: #000;
  --bs-link-color: var(--eh-bl);
  --bs-link-hover-color: #154fb4;
}

/* ── 2. Base ─────────────────────────────────────────────────────── */
.eh-mono, .eh-num { font-family: var(--eh-mono); font-variant-numeric: tabular-nums; }
.eh-display { font-family: var(--eh-display); letter-spacing: -.01em; }
.eh-muted { color: var(--eh-mu) !important; }
.eh-label {
  font-size: .7rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--eh-mu); font-weight: 700;
}

/* ── 3. Buttons ──────────────────────────────────────────────────── */
.eh-btn {
  --h: 44px;
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  height: var(--h); padding: 0 1.1rem; border-radius: 12px;
  border: 1px solid transparent; font: 700 .875rem/1 var(--eh-font);
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: transform .12s ease, filter .15s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease;
  -webkit-tap-highlight-color: transparent;
}
.eh-btn i { font-size: 1.05em; line-height: 1; }
.eh-btn:active { transform: translateY(1px) scale(.99); }
.eh-btn:focus-visible { outline: 2px solid var(--eh-bl); outline-offset: 2px; }
.eh-btn[disabled], .eh-btn.disabled { opacity: .45; cursor: not-allowed; filter: grayscale(.4); transform: none; }
.eh-btn-sm { --h: 34px; padding: 0 .8rem; font-size: .8rem; border-radius: 10px; }
.eh-btn-lg { --h: 50px; padding: 0 1.4rem; font-size: .95rem; }
.eh-btn-block { width: 100%; }

.eh-btn-primary {
  background: linear-gradient(180deg, #f7c24a, #e3a015); color: #1b1305;
  box-shadow: 0 1px 0 rgba(255,255,255,.35) inset, 0 8px 20px -10px rgba(242,182,52,.7);
}
.eh-btn-primary:hover { filter: brightness(1.06); color: #1b1305; }
.eh-btn-secondary { background: var(--eh-sf2); border-color: var(--eh-ln2); color: var(--eh-tx); }
.eh-btn-secondary:hover { border-color: var(--eh-mu2); color: var(--eh-tx); }
.eh-btn-blue { background: var(--eh-bl); color: #fff; }
.eh-btn-blue:hover { filter: brightness(1.08); color: #fff; }
.eh-btn-ghost { background: transparent; color: var(--eh-gd-tx); padding: 0 .7rem; }
.eh-btn-ghost:hover { background: var(--eh-gd-soft); color: var(--eh-gd-tx); }
.eh-btn-danger { background: var(--eh-er-soft); border-color: color-mix(in srgb, var(--eh-er) 40%, transparent); color: var(--eh-er); }
.eh-btn-danger:hover { background: var(--eh-er); color: #fff; }

.eh-icon-btn {
  width: 40px; height: 40px; border-radius: 12px; display: inline-grid; place-items: center;
  background: var(--eh-sf2); border: 1px solid var(--eh-ln); color: var(--eh-tx);
  cursor: pointer; transition: border-color .15s, background .15s; position: relative;
}
.eh-icon-btn:hover { border-color: var(--eh-ln2); color: var(--eh-tx); }

/* theme toggle (sun/moon) */
.eh-theme-btn .eh-ico-sun { display: none; }
[data-bs-theme="light"] .eh-theme-btn .eh-ico-sun { display: inline; }
[data-bs-theme="light"] .eh-theme-btn .eh-ico-moon { display: none; }

/* ── 4. Pills ────────────────────────────────────────────────────── */
.eh-pill { display: inline-flex; align-items: center; gap: .3rem; padding: .2rem .6rem; border-radius: 99px; font-size: .72rem; font-weight: 700; }
.eh-pill-ok { background: var(--eh-ok-soft); color: var(--eh-ok); }
.eh-pill-wr { background: var(--eh-wr-soft); color: var(--eh-wr); }
.eh-pill-er { background: var(--eh-er-soft); color: var(--eh-er); }
.eh-pill-bl { background: var(--eh-bl-soft); color: var(--eh-bl-tx); }
.eh-pill-gd { background: var(--eh-gd-soft); color: var(--eh-gd-tx); }

/* ── 5. Cards ────────────────────────────────────────────────────── */
.eh-card {
  background: var(--eh-sf); border: 1px solid var(--eh-ln);
  border-radius: var(--eh-radius); padding: 1.15rem 1.25rem; color: var(--eh-tx);
}
.eh-card-head { display: flex; align-items: center; gap: .75rem; margin-bottom: .9rem; flex-wrap: wrap; }
.eh-card-title { font: 700 1rem/1.2 var(--eh-display); margin: 0; }
.eh-card-sub { font-size: .8rem; color: var(--eh-mu); margin: 0; }

/* ══════════════════════════════════════════════════════════════════
   6. APP SHELL  (layouts/client.php → <body class="eh-app">)
   ══════════════════════════════════════════════════════════════════ */
body.eh-app {
  font-family: var(--eh-font); background: var(--eh-bg); color: var(--eh-tx);
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
/* pages not yet redesigned keep their light look inside the new shell */
body.eh-app.eh-legacy { background: #f4f6fa; }

body.eh-app .sidebar {
  position: fixed; inset: 0 auto 0 0; width: var(--eh-sidebar-w);
  background: var(--eh-bg2); border-right: 1px solid var(--eh-ln);
  z-index: 1040; overflow-y: auto; transition: transform .28s ease;
  display: flex; flex-direction: column; scrollbar-width: thin;
}
body.eh-app .sidebar-header {
  display: flex; align-items: center; gap: .7rem; padding: 1.1rem 1.1rem .9rem;
  border-bottom: 1px solid var(--eh-ln); text-align: left;
}
body.eh-app .sidebar-header img { max-height: 38px; max-width: 70px; object-fit: contain; margin: 0; border-radius: 8px; }
body.eh-app .sidebar-header h6 { color: var(--eh-tx); font: 700 .95rem/1.2 var(--eh-display); letter-spacing: .03em; margin: 0; }
body.eh-app .sidebar-header small { display: block; color: var(--eh-mu); font-size: .72rem; }
body.eh-app .sidebar-header .eh-sb-text { min-width: 0; }
body.eh-app .sidebar-nav { padding: .75rem .6rem 1.2rem; }
body.eh-app .sidebar .nav-link {
  display: flex; align-items: center; gap: .7rem;
  color: var(--eh-mu); padding: .62rem .75rem; margin: 1px 0; border-radius: 10px;
  font-size: .875rem; font-weight: 600; text-decoration: none; position: relative;
  transition: background .15s, color .15s;
}
body.eh-app .sidebar .nav-link i { width: 1.25rem; text-align: center; font-size: 1.05rem; margin: 0; }
body.eh-app .sidebar .nav-link:hover { background: var(--eh-sf); color: var(--eh-tx); transform: none; }
body.eh-app .sidebar .nav-link.active {
  background: linear-gradient(90deg, var(--eh-gd-soft), transparent); color: var(--eh-gd-tx);
  box-shadow: inset 2px 0 0 var(--eh-gd);
}
body.eh-app .sidebar .nav-link .bi-chevron-down { margin-left: auto; font-size: .75rem; width: auto; transition: transform .25s ease; }
body.eh-app .sidebar .nav-link:not(.collapsed) .bi-chevron-down { transform: rotate(180deg); }
body.eh-app .sidebar .nav-link:not(.collapsed)[data-bs-toggle] { color: var(--eh-tx); }
body.eh-app .sidebar .nav-link.sub-link { padding: .5rem .75rem .5rem 2.4rem; font-size: .83rem; font-weight: 500; color: var(--eh-mu); }
body.eh-app .sidebar .nav-link.sub-link i { font-size: .9rem; }
body.eh-app .sidebar .nav-link.sub-link:hover { color: var(--eh-tx); }
body.eh-app .sidebar .collapse .nav, body.eh-app .sidebar .collapsing .nav { position: relative; }
body.eh-app .sidebar .collapse .nav::before, body.eh-app .sidebar .collapsing .nav::before {
  content: ""; position: absolute; left: 1.35rem; top: .3rem; bottom: .3rem; width: 1px; background: var(--eh-ln);
}
body.eh-app .nav-badge {
  margin-left: auto; background: var(--eh-bl); color: #fff; font-size: .6rem; padding: .12rem .5rem;
  border-radius: 99px; font-weight: 800; letter-spacing: .04em;
}
body.eh-app .eh-sb-sec {
  font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; color: var(--eh-mu2);
  font-weight: 800; padding: 1rem .75rem .35rem; list-style: none;
}

body.eh-app .sidebar-overlay {
  display: none; position: fixed; inset: 0; background: rgba(0,0,0,.55);
  z-index: 1035; opacity: 0; transition: opacity .25s ease; backdrop-filter: blur(2px);
}
body.eh-app .sidebar-overlay.show { display: block; opacity: 1; }

body.eh-app .main-content { margin-left: var(--eh-sidebar-w); min-height: 100vh; padding: 0; }

body.eh-app .top-header {
  position: sticky; top: 0; z-index: 1030;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .8rem 1.5rem; background: color-mix(in srgb, var(--eh-bg) 88%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--eh-ln);
}
body.eh-app.eh-legacy .top-header { background: var(--eh-sf); }
body.eh-app .header-left { display: flex; align-items: center; gap: .9rem; flex: 1; min-width: 0; }
body.eh-app .page-title { font: 700 1.2rem/1.2 var(--eh-display); color: var(--eh-tx); margin: 0; white-space: nowrap; letter-spacing: -.01em; }
body.eh-app .header-actions { display: flex; align-items: center; gap: .55rem; }
body.eh-app .mobile-menu-btn {
  display: none; width: 40px; height: 40px; border-radius: 12px; background: var(--eh-sf2);
  border: 1px solid var(--eh-ln); color: var(--eh-tx); align-items: center; justify-content: center; cursor: pointer;
}
body.eh-app .mobile-menu-btn i { font-size: 1.3rem; }

body.eh-app .balance-badge {
  align-items: center; gap: .5rem; height: 40px; padding: 0 .9rem; border-radius: 12px;
  background: var(--eh-gd-soft); border: 1px solid color-mix(in srgb, var(--eh-gd) 35%, transparent);
  color: var(--eh-gd-tx); font: 600 .85rem var(--eh-mono); white-space: nowrap;
}
body.eh-app .icon-btn {
  width: 40px; height: 40px; border-radius: 12px; background: var(--eh-sf2); border: 1px solid var(--eh-ln);
  color: var(--eh-tx); display: inline-flex; align-items: center; justify-content: center; position: relative;
  text-decoration: none; cursor: pointer; transition: border-color .15s; font-size: 1.05rem;
}
body.eh-app .icon-btn:hover { border-color: var(--eh-ln2); color: var(--eh-tx); }
body.eh-app .icon-btn.has-notifications::after {
  content: ""; position: absolute; top: 8px; right: 9px; width: 8px; height: 8px; border-radius: 50%;
  background: var(--eh-er); box-shadow: 0 0 0 2px var(--eh-sf2);
}
body.eh-app .icon-btn .bi-whatsapp { color: #25d366; }
body.eh-app .user-menu-btn {
  display: inline-flex; align-items: center; gap: .45rem; height: 40px; padding: 0 .7rem 0 .45rem;
  border-radius: 12px; background: var(--eh-sf2); border: 1px solid var(--eh-ln); color: var(--eh-tx);
  font-weight: 700; font-size: .85rem; cursor: pointer;
}
body.eh-app .user-menu-btn .bi-person-circle { font-size: 1.45rem; color: var(--eh-bl-tx); }
body.eh-app .user-menu-btn .bi-chevron-down { font-size: .7rem; color: var(--eh-mu); }

/* dropdowns */
body.eh-app .dropdown-menu {
  --bs-dropdown-bg: var(--eh-sf); --bs-dropdown-border-color: var(--eh-ln); --bs-dropdown-color: var(--eh-tx);
  --bs-dropdown-link-color: var(--eh-tx); --bs-dropdown-link-hover-bg: var(--eh-sf2); --bs-dropdown-link-hover-color: var(--eh-tx);
  --bs-dropdown-header-color: var(--eh-mu); --bs-dropdown-divider-bg: var(--eh-ln);
  border-radius: 14px; box-shadow: var(--eh-shadow); padding: .4rem;
}
body.eh-app .dropdown-item { border-radius: 9px; padding: .55rem .75rem; font-weight: 600; font-size: .875rem; }
body.eh-app .dropdown-item.text-danger { color: var(--eh-er) !important; }
body.eh-app .notification-dropdown { width: 340px; max-width: calc(100vw - 2rem); padding: 0; overflow: hidden; }
body.eh-app .notification-dropdown-header { display: flex; align-items: center; justify-content: space-between; padding: .85rem 1rem; border-bottom: 1px solid var(--eh-ln); }
body.eh-app .notification-dropdown-header h6 { margin: 0; font: 700 .95rem var(--eh-display); color: var(--eh-tx); }
body.eh-app .notification-badge { background: var(--eh-er); color: #fff; font-size: .7rem; font-weight: 800; border-radius: 99px; padding: .1rem .5rem; }
body.eh-app .notification-dropdown-body { max-height: 360px; overflow-y: auto; padding: .35rem; }
body.eh-app .notification-item { padding: .7rem; border-radius: 10px; }
body.eh-app .notification-item:hover { background: var(--eh-sf2); }
body.eh-app .notification-item-header { display: flex; gap: .7rem; align-items: flex-start; }
body.eh-app .notification-icon { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex: none; background: var(--eh-bl-soft); color: var(--eh-bl-tx); }
body.eh-app .notification-icon.success { background: var(--eh-ok-soft); color: var(--eh-ok); }
body.eh-app .notification-icon.warning { background: var(--eh-wr-soft); color: var(--eh-wr); }
body.eh-app .notification-icon.danger  { background: var(--eh-er-soft); color: var(--eh-er); }
body.eh-app .notification-title { font-weight: 700; font-size: .85rem; color: var(--eh-tx); }
body.eh-app .notification-message { margin: .15rem 0 0; font-size: .8rem; color: var(--eh-mu); line-height: 1.45; }
body.eh-app .notification-empty { text-align: center; padding: 1.6rem 1rem; color: var(--eh-mu); }
body.eh-app .notification-empty i { font-size: 1.8rem; display: block; margin-bottom: .4rem; }

/* notification ticker */
body.eh-app .notification-ticker {
  flex: 1; min-width: 0; max-width: 620px; height: 38px; display: none; align-items: center;
  padding: 0 .75rem; border-radius: 12px; background: var(--eh-bl-soft); color: var(--eh-bl-tx);
  border: 1px solid color-mix(in srgb, var(--eh-bl) 30%, transparent); overflow: hidden;
}
body.eh-app .notification-ticker.show { display: flex; }
body.eh-app .notification-ticker.success { background: var(--eh-ok-soft); color: var(--eh-ok); border-color: color-mix(in srgb, var(--eh-ok) 30%, transparent); }
body.eh-app .notification-ticker.warning { background: var(--eh-wr-soft); color: var(--eh-wr); border-color: color-mix(in srgb, var(--eh-wr) 30%, transparent); }
body.eh-app .notification-ticker.danger,
body.eh-app .notification-ticker.error { background: var(--eh-er-soft); color: var(--eh-er); border-color: color-mix(in srgb, var(--eh-er) 30%, transparent); }
body.eh-app .ticker-content { display: flex; align-items: center; gap: .6rem; width: 100%; min-width: 0; }
body.eh-app .ticker-icon { flex: none; font-size: .95rem; }
body.eh-app .ticker-text { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; font-size: .82rem; font-weight: 600;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
body.eh-app .ticker-scroll-container { display: inline-flex; animation: eh-ticker 32s linear infinite; }
body.eh-app .ticker-text:hover .ticker-scroll-container, body.eh-app .ticker-text:active .ticker-scroll-container { animation-play-state: paused; }
body.eh-app .ticker-message { padding-right: 3rem; }
body.eh-app .ticker-message::after { content: "•"; margin-left: 3rem; opacity: .5; }
@keyframes eh-ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
body.eh-app .ticker-controls { display: flex; flex: none; }
body.eh-app .ticker-close { background: none; border: none; color: inherit; opacity: .7; width: 22px; height: 22px; display: grid; place-items: center; cursor: pointer; border-radius: 6px; }
body.eh-app .ticker-close:hover { opacity: 1; background: rgba(127,127,127,.15); }

body.eh-app .content-area { padding: 1.5rem; }

/* WhatsApp widget */
body.eh-app .whatsapp-widget { position: fixed; right: 20px; bottom: 20px; z-index: 1050; }
body.eh-app .whatsapp-widget-btn {
  width: 54px; height: 54px; border-radius: 50%; border: none; background: #25d366; color: #fff;
  font-size: 1.6rem; display: grid; place-items: center; cursor: pointer;
  box-shadow: 0 10px 24px -8px rgba(37, 211, 102, .7); transition: transform .15s;
}
body.eh-app .whatsapp-widget-btn:hover, body.eh-app .whatsapp-widget-btn.active { transform: scale(1.06); }
body.eh-app .whatsapp-widget-menu {
  position: absolute; right: 0; bottom: 66px; min-width: 270px; background: var(--eh-sf); border: 1px solid var(--eh-ln);
  border-radius: 16px; box-shadow: var(--eh-shadow); padding: .4rem; opacity: 0; visibility: hidden;
  transform: translateY(8px); transition: opacity .18s, transform .18s, visibility .18s;
}
body.eh-app .whatsapp-widget-menu.show { opacity: 1; visibility: visible; transform: none; }
body.eh-app .whatsapp-widget-menu-header { padding: .6rem .7rem .5rem; }
body.eh-app .whatsapp-widget-menu-header h6 { margin: 0; font: 700 .9rem var(--eh-display); color: var(--eh-tx); }
body.eh-app .whatsapp-widget-menu-header small { color: var(--eh-mu); font-size: .75rem; }
body.eh-app .whatsapp-menu-item { display: flex; gap: .7rem; align-items: center; padding: .6rem .7rem; border-radius: 11px; text-decoration: none; color: var(--eh-tx); }
body.eh-app .whatsapp-menu-item:hover { background: var(--eh-sf2); color: var(--eh-tx); }
body.eh-app .whatsapp-menu-item > i { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: rgba(37,211,102,.14); color: #25d366; font-size: 1.1rem; flex: none; }
body.eh-app .whatsapp-menu-item-title { font-weight: 700; font-size: .85rem; }
body.eh-app .whatsapp-menu-item-desc { margin: 0; font-size: .75rem; color: var(--eh-mu); }
body.eh-app .whatsapp-menu-divider { height: 1px; background: var(--eh-ln); margin: .2rem .5rem; }

/* footer */
body.eh-app .app-footer { margin-left: var(--eh-sidebar-w); margin-top: 2rem; border-top: 1px solid var(--eh-ln); background: var(--eh-bg2); }
body.eh-app .footer-content { max-width: 960px; margin: 0 auto; padding: 1.4rem 1.5rem 1.6rem; text-align: center; }
body.eh-app .footer-brand { font: 700 .9rem var(--eh-display); letter-spacing: .04em; color: var(--eh-tx); margin: 0 0 .2rem; }
body.eh-app .footer-text { color: var(--eh-mu); font-size: .8rem; margin: 0; }
body.eh-app .footer-divider { width: 48px; height: 2px; background: var(--eh-gd); border-radius: 2px; margin: .8rem auto; opacity: .8; }
body.eh-app .footer-copyright, body.eh-app .footer-developer { color: var(--eh-mu); font-size: .75rem; margin: .15rem 0; }
body.eh-app .footer-developer .heart { color: var(--eh-er); }
body.eh-app .developer-link { color: var(--eh-gd-tx); text-decoration: none; font-weight: 700; }

/* activation modal */
body.eh-app .modal-content { background: var(--eh-sf); color: var(--eh-tx); border: 1px solid var(--eh-ln) !important; }

/* shell — tablets & phones */
@media (max-width: 991.98px) {
  body.eh-app .sidebar { transform: translateX(-100%); box-shadow: none; }
  body.eh-app .sidebar.show { transform: none; box-shadow: 20px 0 60px rgba(0,0,0,.45); }
  body.eh-app .main-content, body.eh-app .app-footer { margin-left: 0; }
  body.eh-app .mobile-menu-btn { display: inline-flex; }
  body.eh-app .content-area { padding: 1rem; }
  body.eh-app .notification-ticker { max-width: 100%; height: 34px; }
}
@media (max-width: 575.98px) {
  body.eh-app .top-header { padding: .6rem .8rem; gap: .5rem; }
  body.eh-app .header-actions { gap: .4rem; }
  body.eh-app .icon-btn, body.eh-app .mobile-menu-btn, body.eh-app .user-menu-btn { width: 38px; height: 38px; }
  body.eh-app .user-menu-btn { padding: 0; justify-content: center; }
  body.eh-app .notification-ticker { display: none !important; }
  body.eh-app .content-area { padding: .85rem; }
  body.eh-app .whatsapp-widget { bottom: 16px; right: 14px; }
  body.eh-app .whatsapp-widget-btn { width: 50px; height: 50px; font-size: 1.45rem; }
  body.eh-app input, body.eh-app select, body.eh-app textarea { font-size: 16px; } /* no zoom on iOS */
}

/* ══════════════════════════════════════════════════════════════════
   7. DASHBOARD  (client/dashboard.php)
   ══════════════════════════════════════════════════════════════════ */
.eh-dash { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.1rem; max-width: 1280px; margin: 0 auto; }
.eh-dash > * { min-width: 0; }
.eh-hello { display: flex; align-items: flex-end; gap: 1rem; flex-wrap: wrap; }
.eh-hello h2 { font: 700 1.45rem/1.15 var(--eh-display); margin: 0; letter-spacing: -.015em; color: var(--eh-tx); }
.eh-hello p { margin: .2rem 0 0; color: var(--eh-mu); font-size: .85rem; }
.eh-hello .eh-sp { flex: 1; }

.eh-top { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 1.1rem; }
.eh-balance { background: var(--eh-glow), var(--eh-sf); border-color: color-mix(in srgb, var(--eh-gd) 22%, var(--eh-ln)); position: relative; overflow: hidden; }
.eh-balance .eh-amt { font: 700 clamp(1.9rem, 4vw, 2.4rem)/1.1 var(--eh-mono); letter-spacing: -.02em; margin: .4rem 0 1rem; color: var(--eh-tx); }
.eh-balance .eh-amt small { font-size: .5em; color: var(--eh-mu); margin-right: .25rem; font-weight: 600; }
.eh-balance .eh-actions { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; }

.eh-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.eh-stat { background: var(--eh-sf); border: 1px solid var(--eh-ln); border-radius: 14px; padding: .95rem 1rem; display: flex; gap: .8rem; align-items: center; min-width: 0; }
.eh-stat .eh-si { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; flex: none; font-size: 1.15rem; }
.eh-stat .eh-si.gd { background: var(--eh-gd-soft); color: var(--eh-gd-tx); }
.eh-stat .eh-si.bl { background: var(--eh-bl-soft); color: var(--eh-bl-tx); }
.eh-stat .eh-si.ok { background: var(--eh-ok-soft); color: var(--eh-ok); }
.eh-stat .eh-si.wr { background: var(--eh-wr-soft); color: var(--eh-wr); }
.eh-stat span { display: block; font-size: .75rem; color: var(--eh-mu); font-weight: 600; }
.eh-stat b { display: block; font: 600 1.05rem/1.25 var(--eh-mono); color: var(--eh-tx); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eh-stat small { font-size: .68rem; color: var(--eh-mu2); }

/* round quick actions — phone-first */
.eh-qa { display: none; justify-content: space-between; gap: .4rem; padding: .2rem .1rem; }
.eh-qa a { display: flex; flex-direction: column; align-items: center; gap: .4rem; text-decoration: none; color: var(--eh-tx); font-size: .72rem; font-weight: 700; flex: 1; min-width: 0; }
.eh-qa a span { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; font-size: 1.3rem; background: var(--eh-sf2); border: 1px solid var(--eh-ln); color: var(--eh-tx); transition: transform .15s; }
.eh-qa a:active span { transform: scale(.94); }
.eh-qa a.pri span { background: linear-gradient(180deg, #f7c24a, #e3a015); color: #1b1305; border: none; box-shadow: 0 10px 22px -10px rgba(242,182,52,.8); }

/* network tiles */
.eh-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; }
.eh-tile {
  --c: #333; --fg: #fff;
  display: flex; flex-direction: column; justify-content: space-between; gap: .9rem; min-height: 108px;
  padding: .95rem 1rem; border-radius: 16px; text-decoration: none; background: var(--c); color: var(--fg);
  position: relative; overflow: hidden; transition: transform .15s, box-shadow .15s;
  box-shadow: 0 10px 24px -18px rgba(0,0,0,.8);
}
.eh-tile::after { content: ""; position: absolute; right: -28px; top: -28px; width: 110px; height: 110px; border-radius: 50%; background: rgba(255,255,255,.12); pointer-events: none; }
.eh-tile:hover { transform: translateY(-2px); color: var(--fg); box-shadow: 0 16px 30px -18px rgba(0,0,0,.85); }
.eh-tile:active { transform: translateY(0) scale(.99); }
.eh-tile:focus-visible { outline: 2px solid var(--eh-gd); outline-offset: 3px; }
.eh-tile .eh-tn { font: 700 1rem/1.2 var(--eh-display); }
.eh-tile > div:first-child { position: relative; z-index: 1; min-width: 0; }
.eh-tile small { display: block; font-size: .72rem; font-weight: 700; opacity: .85; margin-top: .15rem; }
.eh-tile .eh-tr { display: flex; align-items: center; justify-content: space-between; }
.eh-tile .eh-tr i.bi-arrow-right { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: rgba(0,0,0,.16); font-size: .9rem; }
.eh-tile .eh-tr i:first-child { font-size: 1.35rem; opacity: .9; }
.eh-t-mtn { --c: #ffcb05; --fg: #1a1400; }
.eh-t-exp { --c: linear-gradient(135deg, #ffcb05, #ff9f00); --fg: #1a1400; }
.eh-t-tel { --c: #e30613; }
.eh-t-ish { --c: #0a4fb4; }
.eh-t-big { --c: #1b2a6b; }
.eh-t-afa { --c: #138a4b; }
.eh-t-rc  { --c: #6a3bd1; }
.eh-t-shop { --c: linear-gradient(135deg, #2a2f3b, #13161d); }
[data-bs-theme="light"] .eh-t-shop { --c: linear-gradient(135deg, #1e2a44, #0f1b2d); }

/* chart */
.eh-chart .eh-date { display: flex; gap: .5rem; margin-left: auto; }
.eh-chart .eh-date input {
  height: 38px; border-radius: 10px; background: var(--eh-sf2); border: 1px solid var(--eh-ln); color: var(--eh-tx);
  padding: 0 .7rem; font: 500 .85rem var(--eh-font); color-scheme: inherit;
}
.eh-chart .eh-date input:focus { outline: none; border-color: var(--eh-gd); }
.eh-chart-body { position: relative; height: 290px; }
.eh-daycheck { display: none; margin-top: .9rem; padding: .85rem 1rem; border-radius: 12px; background: var(--eh-sf2); border: 1px solid var(--eh-ln); }
.eh-daycheck.show { display: block; }
.eh-daycheck .eh-dc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: .6rem; margin-top: .6rem; }
.eh-daycheck .eh-dc-grid div span { display: block; font-size: .72rem; color: var(--eh-mu); }
.eh-daycheck .eh-dc-grid div b { font: 600 1rem var(--eh-mono); }

@media (max-width: 1199.98px) { .eh-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 991.98px) { .eh-top { grid-template-columns: 1fr; } }
@media (max-width: 575.98px) {
  .eh-dash { gap: .9rem; }
  .eh-hello h2 { font-size: 1.2rem; }
  .eh-hello .eh-hide-sm { display: none; }
  .eh-balance .eh-actions { display: none; }
  .eh-qa { display: flex; }
  .eh-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
  .eh-tile { min-height: 92px; padding: .8rem; border-radius: 14px; }
  .eh-tile .eh-tn { font-size: .9rem; }
  .eh-tile small { font-size: .68rem; }
  .eh-stat { padding: .75rem; gap: .6rem; }
  .eh-stat .eh-si { width: 36px; height: 36px; font-size: 1rem; }
  .eh-stat b { font-size: .92rem; }
  .eh-chart .eh-date { margin-left: 0; width: 100%; }
  .eh-chart .eh-date input { flex: 1; min-width: 0; font-size: 16px; }
  .eh-chart-body { height: 230px; }
}

/* ══════════════════════════════════════════════════════════════════
   8. AUTH  (layouts/auth.php → <body class="eh-auth">)
   ══════════════════════════════════════════════════════════════════ */
body.eh-auth {
  margin: 0; min-height: 100vh; font-family: var(--eh-font); color: var(--eh-tx);
  background: var(--eh-bg); -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
.eh-auth-wrap { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
.eh-auth-art {
  position: relative; overflow: hidden; padding: 3rem clamp(2rem, 5vw, 4.5rem); display: flex; flex-direction: column; justify-content: space-between;
  background:
    radial-gradient(700px 480px at 85% 5%, rgba(61,139,255,.28), transparent 60%),
    radial-gradient(560px 420px at 0% 100%, rgba(242,182,52,.22), transparent 60%),
    repeating-radial-gradient(circle at 88% 8%, transparent 0 62px, rgba(255,255,255,.04) 63px 64px),
    #07090d;
  color: #eef0f4; border-right: 1px solid #1d212a;
}
.eh-auth-art .eh-a-brand { display: flex; align-items: center; gap: .8rem; }
.eh-auth-art .eh-a-brand img { max-height: 46px; max-width: 90px; object-fit: contain; }
.eh-auth-art .eh-a-brand b { font: 700 1.05rem var(--eh-display); letter-spacing: .06em; }
.eh-auth-art h2 { font: 800 clamp(2rem, 3.6vw, 3rem)/1.06 var(--eh-display); letter-spacing: -.025em; margin: 0 0 1rem; max-width: 14ch; text-wrap: balance; }
.eh-auth-art h2 span { color: #f2b634; }
.eh-auth-art p { color: #aab1c0; max-width: 42ch; margin: 0; font-size: 1rem; line-height: 1.6; }
.eh-a-points { display: grid; gap: .8rem; margin-top: 2rem; }
.eh-a-points div { display: flex; gap: .8rem; align-items: center; color: #d5d9e2; font-weight: 600; font-size: .92rem; }
.eh-a-points i { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08); color: #f2b634; font-size: 1.05rem; flex: none; }
.eh-a-nets { display: flex; gap: .5rem; flex-wrap: wrap; }
.eh-a-nets span { padding: .35rem .8rem; border-radius: 99px; font-size: .75rem; font-weight: 800; }
.eh-auth-art small.eh-a-foot { color: #6f7788; font-size: .75rem; }

.eh-auth-main { display: flex; flex-direction: column; padding: 1.5rem clamp(1rem, 4vw, 3rem); min-width: 0; }
.eh-auth-top { display: flex; justify-content: flex-end; }
.eh-auth-center { flex: 1; display: flex; align-items: center; justify-content: center; padding: 1.5rem 0; }

body.eh-auth .auth-card { width: 100%; max-width: 440px; background: transparent; border: none; padding: 0; box-shadow: none; }
body.eh-auth .auth-card::before { display: none; }
body.eh-auth .card-content { position: relative; }
body.eh-auth .brand { display: none; text-align: center; margin-bottom: 1.6rem; }
body.eh-auth .brand img { max-height: 44px; margin-bottom: .6rem; }
body.eh-auth .brand-logo { width: 48px; height: 48px; border-radius: 14px; margin: 0 auto .6rem; display: grid; place-items: center; background: linear-gradient(145deg,#f7c64a,#c9870c); color: #1a1204; font: 800 1rem var(--eh-display); }
body.eh-auth .brand h1 { font: 700 1.35rem var(--eh-display); letter-spacing: .03em; margin: 0 0 .2rem; color: var(--eh-tx); -webkit-text-fill-color: currentColor; background: none; }
body.eh-auth .brand p { color: var(--eh-mu); font-size: .85rem; margin: 0; }

body.eh-auth .form-header { text-align: left; margin-bottom: 1.6rem; }
body.eh-auth .form-header h2 { font: 700 1.75rem/1.15 var(--eh-display); letter-spacing: -.02em; color: var(--eh-tx); margin: 0 0 .35rem; }
body.eh-auth .form-header p { color: var(--eh-mu); font-size: .92rem; margin: 0; }
body.eh-auth .form-header > div:first-child[style] { margin: 0 0 1rem !important; }

body.eh-auth .form-group { margin-bottom: 1.05rem; }
body.eh-auth .form-label { display: block; font-size: .78rem; font-weight: 700; color: var(--eh-tx2); margin-bottom: .45rem; letter-spacing: .01em; text-transform: none; }
body.eh-auth .form-control {
  width: 100%; height: 50px; border-radius: 12px; padding: 0 1rem; font: 500 16px var(--eh-font);
  background: var(--eh-sf2) !important; border: 1px solid var(--eh-ln); color: var(--eh-tx) !important;
  transition: border-color .15s, box-shadow .15s;
}
body.eh-auth .form-control::placeholder { color: var(--eh-mu2) !important; }
body.eh-auth .form-control:focus { outline: none; border-color: var(--eh-gd); box-shadow: 0 0 0 4px var(--eh-gd-soft); background: var(--eh-sf2) !important; }
body.eh-auth .form-control:-webkit-autofill,
body.eh-auth .form-control:-webkit-autofill:hover,
body.eh-auth .form-control:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--eh-tx) !important;
  -webkit-box-shadow: 0 0 0 1000px var(--eh-sf2) inset !important;
  transition: background-color 5000s ease-in-out 0s;
}
body.eh-auth .form-control.is-invalid { border-color: var(--eh-er); }
body.eh-auth .invalid-feedback { display: block; color: var(--eh-er); font-size: .78rem; margin-top: .35rem; }
body.eh-auth .password-wrapper { position: relative; }
body.eh-auth .password-wrapper .form-control { padding-right: 3rem; }
body.eh-auth .password-toggle {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 38px; height: 38px;
  border: none; background: none; color: var(--eh-mu); border-radius: 9px; cursor: pointer; font-size: 1.1rem;
}
body.eh-auth .password-toggle:hover { color: var(--eh-tx); background: var(--eh-sf); }
body.eh-auth .form-row { display: flex; justify-content: space-between; align-items: center; gap: .75rem; margin-bottom: 1.3rem; flex-wrap: wrap; }
body.eh-auth .checkbox-group { display: flex; align-items: flex-start; gap: .55rem; }
body.eh-auth .checkbox { width: 18px; height: 18px; accent-color: var(--eh-gd); margin-top: 2px; flex: none; cursor: pointer; }
body.eh-auth .checkbox-label { font-size: .88rem; color: var(--eh-tx2); cursor: pointer; line-height: 1.45; }
body.eh-auth .link { color: var(--eh-gd-tx); text-decoration: none; font-weight: 700; font-size: .88rem; }
body.eh-auth .link:hover { text-decoration: underline; }

body.eh-auth .btn-primary {
  width: 100%; height: 52px; border: none; border-radius: 13px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  background: linear-gradient(180deg, #f7c24a, #e3a015); color: #1b1305;
  font: 800 .98rem var(--eh-font); text-transform: none; letter-spacing: .01em;
  box-shadow: 0 1px 0 rgba(255,255,255,.35) inset, 0 12px 26px -14px rgba(242,182,52,.9);
  transition: filter .15s, transform .12s;
}
body.eh-auth .btn-primary:hover { filter: brightness(1.06); transform: none; box-shadow: 0 1px 0 rgba(255,255,255,.35) inset, 0 12px 26px -14px rgba(242,182,52,.9); }
body.eh-auth .btn-primary:active { transform: translateY(1px); }
body.eh-auth .btn-primary:disabled { opacity: .6; cursor: not-allowed; }
body.eh-auth .btn-primary:focus-visible, body.eh-auth .btn-outline:focus-visible { outline: 2px solid var(--eh-bl); outline-offset: 2px; }
body.eh-auth .btn-outline {
  width: 100%; height: 48px; border-radius: 13px; display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  background: var(--eh-sf2); border: 1px solid var(--eh-ln2); color: var(--eh-tx); font-weight: 700; font-size: .92rem; text-decoration: none; cursor: pointer;
}
body.eh-auth .btn-outline:hover { border-color: var(--eh-mu2); color: var(--eh-tx); background: var(--eh-sf2); }
body.eh-auth .btn-outline i { margin: 0; }
body.eh-auth .form-footer { margin-top: 1.6rem; padding-top: 1.3rem; border-top: 1px solid var(--eh-ln); text-align: center; }
body.eh-auth .form-footer p { color: var(--eh-mu); font-size: .88rem; margin: 0 0 .75rem; }

body.eh-auth .biometric-section { background: var(--eh-bl-soft); border: 1px solid color-mix(in srgb, var(--eh-bl) 30%, transparent); border-radius: 14px; padding: 1rem; margin-bottom: 1.1rem; text-align: center; }
body.eh-auth .biometric-section p { color: var(--eh-bl-tx); font-size: .85rem; font-weight: 600; margin: 0 0 .7rem; }
body.eh-auth .btn-biometric { width: 100%; height: 48px; border: none; border-radius: 12px; background: var(--eh-bl); color: #fff; font-weight: 800; cursor: pointer; }
body.eh-auth .btn-biometric i { margin-right: .5rem; }
body.eh-auth .divider { display: flex; align-items: center; margin: 1.1rem 0; }
body.eh-auth .divider::before, body.eh-auth .divider::after { content: ""; flex: 1; height: 1px; background: var(--eh-ln); }
body.eh-auth .divider span { padding: 0 .9rem; font-size: .8rem; color: var(--eh-mu); }

body.eh-auth .alert { padding: .85rem 1rem; border-radius: 12px; margin-bottom: 1.1rem; font-size: .88rem; display: flex; gap: .7rem; align-items: flex-start; border: 1px solid transparent; transition: opacity .3s, transform .3s; }
body.eh-auth .alert i { font-size: 1.15rem; margin-top: 1px; }
body.eh-auth .alert-content { flex: 1; }
body.eh-auth .alert-content strong { display: block; font-weight: 800; margin-bottom: .1rem; }
body.eh-auth .alert-success { background: var(--eh-ok-soft); color: var(--eh-ok); border-color: color-mix(in srgb, var(--eh-ok) 30%, transparent); }
body.eh-auth .alert-danger  { background: var(--eh-er-soft); color: var(--eh-er); border-color: color-mix(in srgb, var(--eh-er) 30%, transparent); }
body.eh-auth .alert-warning { background: var(--eh-wr-soft); color: var(--eh-wr); border-color: color-mix(in srgb, var(--eh-wr) 30%, transparent); }
body.eh-auth .alert-info    { background: var(--eh-bl-soft); color: var(--eh-bl-tx); border-color: color-mix(in srgb, var(--eh-bl) 30%, transparent); }
body.eh-auth .alert .close { background: none; border: none; color: inherit; opacity: .6; cursor: pointer; font-size: 1.2rem; padding: 0; line-height: 1; }
body.eh-auth .alert .close:hover { opacity: 1; }
body.eh-auth .spinner { width: 16px; height: 16px; border: 2px solid rgba(0,0,0,.2); border-top-color: currentColor; border-radius: 50%; animation: eh-spin .8s linear infinite; display: inline-block; margin-right: .5rem; vertical-align: -3px; }
@keyframes eh-spin { to { transform: rotate(360deg); } }
body.eh-auth .copyright { text-align: center; margin-top: 1.6rem; font-size: .75rem; color: var(--eh-mu); line-height: 1.6; }
body.eh-auth .copyright a { color: var(--eh-tx2); text-decoration: none; font-weight: 700; }

@media (max-width: 991.98px) {
  .eh-auth-wrap { grid-template-columns: 1fr; }
  .eh-auth-art { display: none; }
  body.eh-auth .brand { display: block; }
  body.eh-auth .form-header { text-align: center; }
  body.eh-auth .form-header > div:first-child[style] { margin: 0 auto 1rem !important; }
}
@media (max-width: 575.98px) {
  .eh-auth-main { padding: 1rem; }
  .eh-auth-center { align-items: flex-start; padding-top: .5rem; }
  body.eh-auth .form-header h2 { font-size: 1.45rem; }
}

@media (prefers-reduced-motion: reduce) {
  body.eh-app .ticker-scroll-container { animation-duration: 80s; }
  .eh-btn, .eh-tile, .eh-qa a span, body.eh-app .sidebar { transition: none !important; }
}

/* ══════════════════════════════════════════════════════════════════
   9. THEMED PAGES — Bootstrap bridge (stage 2+)
   Applies only to pages that opted in ($etrubaThemed = true).
   ══════════════════════════════════════════════════════════════════ */
body.eh-app:not(.eh-legacy) { background: var(--eh-bg); }
body.eh-app:not(.eh-legacy) .content-area .bg-white,
body.eh-app:not(.eh-legacy) .modal .bg-white { background: var(--eh-sf) !important; }
body.eh-app:not(.eh-legacy) .content-area .bg-light,
body.eh-app:not(.eh-legacy) .modal .bg-light { background: var(--eh-sf2) !important; color: var(--eh-tx) !important; }
body.eh-app:not(.eh-legacy) .text-dark { color: var(--eh-tx) !important; }
body.eh-app:not(.eh-legacy) .text-muted { color: var(--eh-mu) !important; }
body.eh-app:not(.eh-legacy) .text-primary { color: var(--eh-bl-tx) !important; }
body.eh-app:not(.eh-legacy) .text-success { color: var(--eh-ok) !important; }
body.eh-app:not(.eh-legacy) .text-danger { color: var(--eh-er) !important; }
body.eh-app:not(.eh-legacy) .text-warning { color: var(--eh-wr) !important; }
body.eh-app:not(.eh-legacy) .text-info { color: var(--eh-bl-tx) !important; }
body.eh-app:not(.eh-legacy) code { color: var(--eh-gd-tx); font-family: var(--eh-mono); }
body.eh-app:not(.eh-legacy) .border, body.eh-app:not(.eh-legacy) .border-top, body.eh-app:not(.eh-legacy) .border-bottom { border-color: var(--eh-ln) !important; }

body.eh-app:not(.eh-legacy) .card {
  --bs-card-bg: var(--eh-sf); --bs-card-border-color: var(--eh-ln); --bs-card-cap-bg: var(--eh-sf);
  background: var(--eh-sf); border: 1px solid var(--eh-ln) !important; border-radius: var(--eh-radius); box-shadow: none !important; color: var(--eh-tx);
}
body.eh-app:not(.eh-legacy) .card-header { background: transparent !important; border-bottom: 1px solid var(--eh-ln) !important; color: var(--eh-tx); }
body.eh-app:not(.eh-legacy) .card-header h5, body.eh-app:not(.eh-legacy) .card-header h6 { font-family: var(--eh-display); }

body.eh-app:not(.eh-legacy) .table {
  --bs-table-bg: transparent; --bs-table-color: var(--eh-tx); --bs-table-border-color: var(--eh-ln);
  --bs-table-hover-bg: var(--eh-sf2); --bs-table-hover-color: var(--eh-tx); --bs-table-striped-bg: var(--eh-sf2);
  color: var(--eh-tx); margin-bottom: 0;
}
body.eh-app:not(.eh-legacy) .table > thead, body.eh-app:not(.eh-legacy) .table-light {
  --bs-table-bg: var(--eh-sf2); --bs-table-color: var(--eh-mu); --bs-table-border-color: var(--eh-ln);
}
body.eh-app:not(.eh-legacy) .table thead th {
  font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; color: var(--eh-mu);
  background: var(--eh-sf2); border-bottom: 1px solid var(--eh-ln); padding: .75rem .85rem; white-space: nowrap;
}
body.eh-app:not(.eh-legacy) .table tbody td { padding: .8rem .85rem; border-color: var(--eh-ln); vertical-align: middle; font-size: .88rem; }

/* badges → soft pills */
body.eh-app:not(.eh-legacy) .badge { font-weight: 700; font-size: .72rem; padding: .35em .7em; border-radius: 99px; }
body.eh-app:not(.eh-legacy) .badge.bg-success { background: var(--eh-ok-soft) !important; color: var(--eh-ok) !important; }
body.eh-app:not(.eh-legacy) .badge.bg-danger  { background: var(--eh-er-soft) !important; color: var(--eh-er) !important; }
body.eh-app:not(.eh-legacy) .badge.bg-warning { background: var(--eh-wr-soft) !important; color: var(--eh-wr) !important; }
body.eh-app:not(.eh-legacy) .badge.bg-info,
body.eh-app:not(.eh-legacy) .badge.bg-primary { background: var(--eh-bl-soft) !important; color: var(--eh-bl-tx) !important; }
body.eh-app:not(.eh-legacy) .badge.bg-secondary,
body.eh-app:not(.eh-legacy) .badge.bg-light { background: var(--eh-sf2) !important; color: var(--eh-tx2) !important; border: 1px solid var(--eh-ln) !important; }

/* forms */
body.eh-app:not(.eh-legacy) .form-control,
body.eh-app:not(.eh-legacy) .form-select {
  background-color: var(--eh-sf2); border: 1px solid var(--eh-ln); color: var(--eh-tx);
  border-radius: 12px; min-height: 46px; font-size: .95rem; box-shadow: none;
}
body.eh-app:not(.eh-legacy) .form-select-sm { min-height: 36px; border-radius: 10px; font-size: .85rem; }
body.eh-app:not(.eh-legacy) textarea.form-control { min-height: auto; }
body.eh-app:not(.eh-legacy) .form-control::placeholder { color: var(--eh-mu2); }
body.eh-app:not(.eh-legacy) .form-control:focus,
body.eh-app:not(.eh-legacy) .form-select:focus { border-color: var(--eh-gd); box-shadow: 0 0 0 4px var(--eh-gd-soft); background-color: var(--eh-sf2); color: var(--eh-tx); }
body.eh-app:not(.eh-legacy) .form-control:disabled, body.eh-app:not(.eh-legacy) .form-select:disabled,
body.eh-app:not(.eh-legacy) .form-control[readonly] { background-color: var(--eh-sf3); opacity: .75; }
body.eh-app:not(.eh-legacy) .form-label { color: var(--eh-tx2); font-weight: 700; font-size: .78rem; letter-spacing: .04em; }

/* bootstrap buttons */
body.eh-app:not(.eh-legacy) .btn { border-radius: 12px; font-weight: 700; }
body.eh-app:not(.eh-legacy) .btn-primary, body.eh-app:not(.eh-legacy) .btn-info,
body.eh-app:not(.eh-legacy) .btn-success, body.eh-app:not(.eh-legacy) .btn-warning {
  background: linear-gradient(180deg, #f7c24a, #e3a015) !important; border: none !important; color: #1b1305 !important;
  box-shadow: 0 8px 20px -12px rgba(242,182,52,.8);
}
body.eh-app:not(.eh-legacy) .btn-primary:hover, body.eh-app:not(.eh-legacy) .btn-info:hover,
body.eh-app:not(.eh-legacy) .btn-success:hover, body.eh-app:not(.eh-legacy) .btn-warning:hover { filter: brightness(1.06); }
body.eh-app:not(.eh-legacy) .btn-secondary, body.eh-app:not(.eh-legacy) .btn-outline-secondary,
body.eh-app:not(.eh-legacy) .btn-outline-primary, body.eh-app:not(.eh-legacy) .btn-outline-warning {
  background: var(--eh-sf2) !important; border: 1px solid var(--eh-ln2) !important; color: var(--eh-tx) !important;
}
body.eh-app:not(.eh-legacy) .btn-secondary:hover, body.eh-app:not(.eh-legacy) .btn-outline-secondary:hover,
body.eh-app:not(.eh-legacy) .btn-outline-primary:hover:not(:disabled), body.eh-app:not(.eh-legacy) .btn-outline-warning:hover { border-color: var(--eh-mu2) !important; }
body.eh-app:not(.eh-legacy) .btn-outline-danger, body.eh-app:not(.eh-legacy) .btn-danger {
  background: var(--eh-er-soft) !important; border: 1px solid color-mix(in srgb, var(--eh-er) 40%, transparent) !important; color: var(--eh-er) !important;
}
body.eh-app:not(.eh-legacy) .btn:disabled { opacity: .5; }
body.eh-app:not(.eh-legacy) .spinner-border.text-primary,
body.eh-app:not(.eh-legacy) .spinner-border.text-info { color: var(--eh-gd) !important; }

/* alerts */
body.eh-app:not(.eh-legacy) .alert { border-radius: 12px; border: 1px solid transparent; }
body.eh-app:not(.eh-legacy) .alert-info { background: var(--eh-bl-soft); color: var(--eh-bl-tx); border-color: color-mix(in srgb, var(--eh-bl) 25%, transparent); }
body.eh-app:not(.eh-legacy) .alert-warning { background: var(--eh-wr-soft); color: var(--eh-wr); border-color: color-mix(in srgb, var(--eh-wr) 25%, transparent); }
body.eh-app:not(.eh-legacy) .alert-success { background: var(--eh-ok-soft); color: var(--eh-ok); border-color: color-mix(in srgb, var(--eh-ok) 25%, transparent); }
body.eh-app:not(.eh-legacy) .alert-danger { background: var(--eh-er-soft); color: var(--eh-er); border-color: color-mix(in srgb, var(--eh-er) 25%, transparent); }

/* modals */
body.eh-app:not(.eh-legacy) .modal-content { background: var(--eh-sf); color: var(--eh-tx); border: 1px solid var(--eh-ln) !important; border-radius: 18px !important; box-shadow: var(--eh-shadow) !important; }
body.eh-app:not(.eh-legacy) .modal-title { font: 700 1.05rem var(--eh-display); }
body.eh-app:not(.eh-legacy) .modal-footer .btn { height: 44px; padding: 0 1.1rem; display: inline-flex; align-items: center; }
body.eh-app:not(.eh-legacy) .modal-backdrop.show { opacity: .6; }

/* tabs */
body.eh-app:not(.eh-legacy) .nav-tabs { border-bottom: 1px solid var(--eh-ln); gap: .25rem; padding: .5rem .5rem 0; }
body.eh-app:not(.eh-legacy) .nav-tabs .nav-link {
  border: none; border-bottom: 2px solid transparent; color: var(--eh-mu); font-weight: 700; font-size: .88rem;
  background: transparent; border-radius: 10px 10px 0 0; padding: .7rem 1rem;
}
body.eh-app:not(.eh-legacy) .nav-tabs .nav-link:hover { color: var(--eh-tx); }
body.eh-app:not(.eh-legacy) .nav-tabs .nav-link.active { color: var(--eh-gd-tx); border-bottom-color: var(--eh-gd); background: transparent; }

/* DataTables */
body.eh-app:not(.eh-legacy) .dataTables_wrapper { color: var(--eh-tx); padding: .9rem; font-size: .85rem; }
body.eh-app:not(.eh-legacy) .dataTables_wrapper .dataTables_filter input,
body.eh-app:not(.eh-legacy) .dataTables_wrapper .dataTables_length select {
  background: var(--eh-sf2); border: 1px solid var(--eh-ln); color: var(--eh-tx); border-radius: 10px; min-height: 36px; padding: 0 .6rem;
}
body.eh-app:not(.eh-legacy) .dataTables_wrapper .dataTables_filter input:focus { outline: none; border-color: var(--eh-gd); }
body.eh-app:not(.eh-legacy) .dataTables_wrapper .dataTables_info { color: var(--eh-mu); }
body.eh-app:not(.eh-legacy) .page-link { background: var(--eh-sf2); border-color: var(--eh-ln); color: var(--eh-tx); border-radius: 9px !important; margin: 0 2px; }
body.eh-app:not(.eh-legacy) .page-item.active .page-link { background: var(--eh-gd); border-color: var(--eh-gd); color: #1b1305; }
body.eh-app:not(.eh-legacy) .page-item.disabled .page-link { background: transparent; color: var(--eh-mu2); }
body.eh-app:not(.eh-legacy) div.dataTables_processing { background: var(--eh-sf); color: var(--eh-tx); border: 1px solid var(--eh-ln); border-radius: 12px; box-shadow: var(--eh-shadow); }

/* ══════════════════════════════════════════════════════════════════
   10. SHARED PAGE PARTS — buy data, bulk, wallet, history, transactions
   Root element of each page carries class "eh-page" (+ "eh-net-*").
   ══════════════════════════════════════════════════════════════════ */
.eh-page { --nc: var(--eh-gd); --nfg: #1b1305; max-width: 1180px; margin: 0 auto; }
.eh-net-mtn { --nc: #ffcb05; --nfg: #1a1400; }
.eh-net-exp { --nc: #ff9f00; --nfg: #1a1400; }
.eh-net-tel { --nc: #e30613; --nfg: #fff; }
.eh-net-ish { --nc: #1f6fe0; --nfg: #fff; }
.eh-net-big { --nc: #3548b8; --nfg: #fff; }
.eh-page .container { max-width: 100%; padding: 0; }

/* page head (was the big coloured hero) */
.eh-page .hero-header {
  position: relative; overflow: hidden; margin: 0 0 1.1rem; border-radius: var(--eh-radius);
  background: radial-gradient(110% 160% at 100% 0%, color-mix(in srgb, var(--nc) 30%, transparent), transparent 60%), var(--eh-sf);
  border: 1px solid var(--eh-ln); box-shadow: none;
}
.eh-page .hero-header::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--nc); }
.eh-page .hero-header .text-center { text-align: left !important; padding: 1.15rem 1.35rem !important; }
.eh-page .hero-header .text-white { color: var(--eh-tx) !important; }
.eh-page .hero-header h4 { font: 700 1.3rem/1.2 var(--eh-display); letter-spacing: -.01em; margin: 0 0 .25rem !important; text-transform: none; color: var(--eh-tx); }
.eh-page .hero-header h4 i { color: var(--nc); }
.eh-page .hero-header p { color: var(--eh-mu); opacity: 1 !important; font-size: .88rem; margin: 0; }
.eh-page .eh-net-chip { display: inline-flex; align-items: center; gap: .35rem; padding: .25rem .65rem; border-radius: 99px; background: var(--nc); color: var(--nfg); font-size: .7rem; font-weight: 800; letter-spacing: .06em; margin-bottom: .5rem; }

/* main card */
.eh-page .row.justify-content-center > [class*="col-"]:only-child { width: 100%; max-width: 640px; flex: 0 0 auto; }
.eh-page .purchase-card, .eh-page .filters-card {
  background: var(--eh-sf); border: 1px solid var(--eh-ln); border-radius: var(--eh-radius);
  padding: 1.35rem; box-shadow: none; color: var(--eh-tx);
}
.eh-page .form-group { margin-bottom: 1.15rem; }
.eh-page .form-label { display: block; font-size: .74rem; font-weight: 800; letter-spacing: .08em; color: var(--eh-tx2); margin-bottom: .5rem; }
.eh-page .form-control, .eh-page .form-select { min-height: 50px; font-size: 1rem; }
.eh-page #recipientPhone, .eh-page #topUpAmount { font: 600 1.1rem var(--eh-mono); letter-spacing: .04em; }

.eh-page .balance-display {
  display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; padding: .7rem .9rem; border-radius: 12px; margin: .2rem 0 1rem;
  background: var(--eh-gd-soft); color: var(--eh-tx2); font-size: .86rem; border: 1px solid color-mix(in srgb, var(--eh-gd) 25%, transparent);
}
.eh-page .balance-display strong { color: var(--eh-gd-tx) !important; font-family: var(--eh-mono); }
.eh-page .balance-display.insufficient { background: var(--eh-er-soft); border-color: color-mix(in srgb, var(--eh-er) 30%, transparent); }
.eh-page .balance-display.insufficient strong, .eh-page .balance-display.insufficient #balanceIcon { color: var(--eh-er) !important; }
.eh-page .insufficient-balance-warning { margin: -.5rem 0 1rem; padding: .6rem .85rem; border-radius: 10px; background: var(--eh-er-soft); color: var(--eh-er); font-size: .82rem; }
.eh-page .insufficient-balance-warning a { color: var(--eh-er); font-weight: 800; }

/* main action button */
.eh-page .btn-continue {
  width: 100%; height: 54px; border: none; border-radius: 14px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  background: linear-gradient(180deg, #f7c24a, #e3a015); color: #1b1305; font: 800 1rem var(--eh-font);
  box-shadow: 0 1px 0 rgba(255,255,255,.35) inset, 0 14px 28px -16px rgba(242,182,52,.9);
  transition: filter .15s, transform .12s, opacity .15s;
}
.eh-page .btn-continue:hover:not(:disabled) { filter: brightness(1.06); }
.eh-page .btn-continue:active:not(:disabled) { transform: translateY(1px); }
.eh-page .btn-continue:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }
.eh-page .btn-continue:focus-visible { outline: 2px solid var(--eh-bl); outline-offset: 3px; }
.eh-page .btn-continue.processing { background: var(--eh-sf2); color: var(--eh-tx); border: 1px solid var(--eh-ln); opacity: 1; }
.eh-page .btn-continue.success { background: var(--eh-ok); color: #fff; opacity: 1; }
.eh-page .btn-continue.error { background: var(--eh-er); color: #fff; opacity: 1; }
.eh-page .btn-continue .me-2 { margin-right: 0 !important; }
.eh-page .bulk-link {
  display: inline-flex; align-items: center; gap: .4rem; padding: .55rem .9rem; border-radius: 11px;
  color: var(--eh-gd-tx); font-weight: 800; font-size: .88rem; text-decoration: none;
}
.eh-page .bulk-link:hover { background: var(--eh-gd-soft); color: var(--eh-gd-tx); }
.eh-page .bulk-link .me-2 { margin-right: 0 !important; }

/* bundle cards (built from the bundle <select> by etruba-ui.js) */
.eh-bundles { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: .55rem; }
.eh-bundle {
  display: flex; flex-direction: column; align-items: flex-start; gap: .15rem; text-align: left;
  padding: .75rem .8rem; border-radius: 13px; background: var(--eh-sf2); border: 1.5px solid var(--eh-ln);
  color: var(--eh-tx); cursor: pointer; transition: border-color .15s, background .15s, transform .1s; min-width: 0;
}
.eh-bundle:hover { border-color: var(--eh-ln2); }
.eh-bundle:active { transform: scale(.98); }
.eh-bundle:focus-visible { outline: 2px solid var(--eh-bl); outline-offset: 2px; }
.eh-bundle b { font: 700 1.15rem/1.1 var(--eh-display); letter-spacing: -.01em; }
.eh-bundle span { font: 600 .9rem var(--eh-mono); color: var(--eh-gd-tx); }
.eh-bundle small { font-size: .68rem; color: var(--eh-mu); font-weight: 700; }
.eh-bundle.on { border-color: var(--eh-gd); background: var(--eh-gd-soft); box-shadow: 0 0 0 1px var(--eh-gd) inset; }
.eh-bundle.low { opacity: .55; }
.eh-bundles.is-disabled { pointer-events: none; opacity: .6; }
.eh-bundle-tools { display: flex; gap: .5rem; align-items: center; margin-bottom: .6rem; }
.eh-bundle-tools input { flex: 1; min-width: 0; height: 40px; border-radius: 10px; background: var(--eh-sf2); border: 1px solid var(--eh-ln); color: var(--eh-tx); padding: 0 .75rem; font-size: 16px; }
.eh-bundle-tools input:focus { outline: none; border-color: var(--eh-gd); }
.eh-sr { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; }
.eh-numhint { font-size: .78rem; font-weight: 700; margin-top: .4rem; display: flex; gap: .35rem; align-items: center; min-height: 1.1em; }
.eh-numhint.ok { color: var(--eh-ok); }
.eh-numhint.warn { color: var(--eh-wr); }

/* confirmation modal rows */
.order-details { background: var(--eh-sf2); border: 1px solid var(--eh-ln); border-radius: 14px; padding: .35rem .95rem; }
.detail-row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .65rem 0; font-size: .9rem; border-bottom: 1px solid var(--eh-ln); }
.detail-row:last-child { border-bottom: none; }
.detail-row.border-top { border-top: 1px dashed var(--eh-ln2) !important; }
.detail-label { color: var(--eh-mu); }
.detail-value { color: var(--eh-tx); text-align: right; }
#modalAmount, #modalTotal, #modalBalanceAfter { font-family: var(--eh-mono); }

/* wallet */
.eh-amounts { display: flex; gap: .45rem; flex-wrap: wrap; margin-top: .6rem; }
.eh-amounts button { height: 36px; padding: 0 .85rem; border-radius: 99px; border: 1px solid var(--eh-ln2); background: var(--eh-sf2); color: var(--eh-tx); font: 600 .85rem var(--eh-mono); cursor: pointer; }
.eh-amounts button:hover, .eh-amounts button.on { border-color: var(--eh-gd); color: var(--eh-gd-tx); background: var(--eh-gd-soft); }
.payment-method-card {
  display: block; width: 100%; text-align: left; padding: .85rem 1rem; margin-bottom: .6rem; cursor: pointer;
  background: var(--eh-sf2); border: 1px solid var(--eh-ln); border-radius: 14px; color: var(--eh-tx); transition: border-color .15s, transform .1s;
}
.payment-method-card:hover { border-color: var(--eh-gd); }
.payment-method-card:active { transform: scale(.99); }
.payment-method-card:last-child { margin-bottom: 0; }
.payment-method-card h6 { color: var(--eh-tx); font-family: var(--eh-display); }
.payment-icon { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; font-size: 1.25rem; flex: none; }

/* bulk */
.eh-page .bulk-tabs { border-bottom: 1px solid var(--eh-ln); }
.eh-page .upload-zone {
  border: 2px dashed var(--eh-ln2); border-radius: 16px; padding: 1.8rem 1rem; text-align: center; cursor: pointer;
  background: var(--eh-sf2); transition: border-color .15s, background .15s; color: var(--eh-tx);
}
.eh-page .upload-zone:hover, .eh-page .upload-zone.dragover { border-color: var(--eh-gd); background: var(--eh-gd-soft); }
.eh-page .upload-zone .fs-1 { color: var(--eh-gd) !important; }
.eh-page .upload-footer { display: flex; flex-direction: column; gap: .6rem; margin-top: .8rem; }
.eh-page .balance-info { display: flex; align-items: center; gap: .45rem; padding: .6rem .85rem; border-radius: 11px; background: var(--eh-gd-soft); color: var(--eh-tx2); font-size: .86rem; }
.eh-page .balance-info i { color: var(--eh-gd-tx); }
.eh-page .balance-info strong { color: var(--eh-gd-tx); font-family: var(--eh-mono); }
.eh-page .btn-template { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; height: 42px; padding: 0 1rem; border-radius: 11px; border: 1px solid var(--eh-ln2); background: var(--eh-sf2); color: var(--eh-tx); font-weight: 700; font-size: .86rem; text-decoration: none; }
.eh-page .btn-template:hover { border-color: var(--eh-mu2); color: var(--eh-tx); }
.eh-page .btn-template .me-2 { margin-right: 0 !important; }
.eh-page .btn-group-actions { display: grid; gap: .6rem; margin-top: 1rem; }
.eh-page .btn-group-actions .btn { height: 50px; display: inline-flex; align-items: center; justify-content: center; }
.eh-page .direct-input-area { font: 500 .95rem/1.6 var(--eh-mono); }
@media (min-width: 576px) {
  .eh-page .upload-footer { flex-direction: row; align-items: center; justify-content: space-between; }
  .eh-page .btn-group-actions { grid-template-columns: 1fr 1.4fr; }
}
.eh-page .row.justify-content-center > .col-lg-10 { max-width: 980px; }

/* stat cards (bulk + transactions) */
.eh-page .stats-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }
@media (min-width: 768px) { .eh-page .stats-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.eh-page .stat-card {
  display: flex; align-items: center; gap: .8rem; padding: .9rem 1rem; border-radius: 14px; height: 100%;
  background: var(--eh-sf); border: 1px solid var(--eh-ln); color: var(--eh-tx); box-shadow: none; transform: none !important;
}
.eh-page .stat-icon, .eh-page .stat-icon-wrapper { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; font-size: 1.15rem; flex: none; background: var(--eh-bl-soft); color: var(--eh-bl-tx); }
.eh-page .stat-success .stat-icon, .eh-page .stat-green .stat-icon-wrapper { background: var(--eh-ok-soft); color: var(--eh-ok); }
.eh-page .stat-warning .stat-icon, .eh-page .stat-yellow .stat-icon-wrapper { background: var(--eh-wr-soft); color: var(--eh-wr); }
.eh-page .stat-red .stat-icon-wrapper { background: var(--eh-er-soft); color: var(--eh-er); }
.eh-page .stat-primary .stat-icon { background: var(--eh-gd-soft); color: var(--eh-gd-tx); }
.eh-page .stat-content small, .eh-page .stat-label { display: block; font-size: .74rem; color: var(--eh-mu); font-weight: 600; margin: 0; }
.eh-page .stat-content strong, .eh-page .stat-value { display: block; font: 600 1.05rem/1.25 var(--eh-mono); color: var(--eh-tx); margin: 0; }
.eh-page .stat-info { background: var(--eh-sf); }

/* bulk preview */
.eh-page .preview-header { padding: .9rem 1.1rem; border-bottom: 1px solid var(--eh-ln); color: var(--eh-tx); font-family: var(--eh-display); }
.eh-page .preview-cards { display: grid; gap: .6rem; }
.eh-page .preview-card { background: var(--eh-sf); border: 1px solid var(--eh-ln); border-left: 3px solid var(--eh-ok); border-radius: 12px; padding: .8rem .9rem; color: var(--eh-tx); }
.eh-page .preview-card.invalid { border-left-color: var(--eh-er); }
.eh-page .preview-card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: .45rem; font-family: var(--eh-mono); }
.eh-page .preview-card-body { display: flex; gap: 1.2rem; }
.eh-page .table tbody tr.invalid td { background: var(--eh-er-soft); }

/* transactions */
.eh-page .filters-card { padding: 1.1rem 1.2rem; }
.eh-page .empty-state { text-align: center; padding: 3rem 1rem; color: var(--eh-mu); }
.eh-page .empty-state i { font-size: 2.6rem; color: var(--eh-mu2); }
.eh-page .row.g-3.mb-4 > .col-md-3 { display: flex; }
.eh-page .row.g-3.mb-4 > .col-md-3 > .stat-card { flex: 1; }

/* toast (replaces blocking alert boxes on themed pages) */
.eh-toasts { position: fixed; z-index: 3000; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); display: grid; gap: .5rem; width: min(440px, calc(100vw - 24px)); pointer-events: none; }
.eh-toast {
  pointer-events: auto; display: flex; gap: .7rem; align-items: flex-start; padding: .85rem 1rem; border-radius: 14px;
  background: var(--eh-sf); color: var(--eh-tx); border: 1px solid var(--eh-ln); box-shadow: 0 18px 40px -16px rgba(0,0,0,.6);
  font-size: .9rem; line-height: 1.45; white-space: pre-line; animation: ehToastIn .22s ease; cursor: pointer;
}
.eh-toast i { font-size: 1.15rem; margin-top: .05rem; }
.eh-toast.ok { border-left: 4px solid var(--eh-ok); } .eh-toast.ok i { color: var(--eh-ok); }
.eh-toast.er { border-left: 4px solid var(--eh-er); } .eh-toast.er i { color: var(--eh-er); }
.eh-toast.wr { border-left: 4px solid var(--eh-wr); } .eh-toast.wr i { color: var(--eh-wr); }
.eh-toast.in { border-left: 4px solid var(--eh-bl); } .eh-toast.in i { color: var(--eh-bl-tx); }
@keyframes ehToastIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

@media (max-width: 575.98px) {
  .eh-page .hero-header .text-center { padding: .95rem 1rem !important; }
  .eh-page .hero-header h4 { font-size: 1.1rem; }
  .eh-page .purchase-card, .eh-page .filters-card { padding: 1rem; border-radius: 14px; }
  .eh-bundles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.eh-app:not(.eh-legacy) .modal-dialog { margin: .6rem; }
  .eh-page .stat-card { padding: .75rem; gap: .6rem; }
  .eh-page .stat-icon, .eh-page .stat-icon-wrapper { width: 36px; height: 36px; font-size: 1rem; }
  .eh-page .stat-content strong, .eh-page .stat-value { font-size: .92rem; }
  .eh-page .row.g-3.mb-4 > .col-md-3 { width: 50%; }
}
@media (prefers-reduced-motion: reduce) { .eh-toast, .eh-bundle, .payment-method-card { animation: none; transition: none; } }

/* ══════════════════════════════════════════════════════════════════
   11. ADMIN SHELL  (layouts/admin.php → <body class="eh-admin">)
   The admin layout's own CSS is driven by --bg-base, --bg-surface,
   --text-*, --border-color, --sidebar-*, --admin-primary. Pointing those
   at the design-system tokens restyles every admin page in both themes.
   ══════════════════════════════════════════════════════════════════ */
body.eh-admin {
  --bg-base: var(--eh-bg); --bg-surface: var(--eh-sf); --text-primary: var(--eh-tx);
  --text-secondary: var(--eh-mu); --text-tertiary: var(--eh-mu2); --border-color: var(--eh-ln);
  --sidebar-bg: var(--eh-bg2); --sidebar-hover: var(--eh-sf); --sidebar-width: var(--eh-sidebar-w);
  --admin-primary: var(--eh-gd-tx); --admin-secondary: var(--eh-gd);
  --shadow-sm: none; --shadow-md: var(--eh-shadow);
  font-family: var(--eh-font); background: var(--eh-bg); color: var(--eh-tx); -webkit-font-smoothing: antialiased;
}
body.eh-admin .sidebar { background: var(--eh-bg2) !important; border-right: 1px solid var(--eh-ln); width: var(--eh-sidebar-w); }
body.eh-admin .sidebar-header { padding: 1.1rem 1rem 1rem; border-bottom: 1px solid var(--eh-ln); text-align: center; }
body.eh-admin .sidebar-logo { max-height: 40px; max-width: 150px; object-fit: contain; filter: none; margin-bottom: .5rem; }
body.eh-admin .sidebar-title { color: var(--eh-tx); font: 700 .98rem/1.2 var(--eh-display); letter-spacing: .02em; margin: 0 0 .15rem; }
body.eh-admin .sidebar-subtitle { color: var(--eh-mu); font-size: .72rem; margin-bottom: .55rem; }
body.eh-admin .admin-badge { display: inline-flex; align-items: center; gap: .35rem; padding: .2rem .65rem; border-radius: 99px; background: var(--eh-gd-soft); color: var(--eh-gd-tx); font-size: .64rem; font-weight: 800; letter-spacing: .1em; border: none; }
body.eh-admin .sidebar::-webkit-scrollbar-thumb { background: var(--eh-ln2); }
body.eh-admin .sidebar-nav { padding: .7rem .6rem 1.2rem; }
body.eh-admin .sidebar .nav-link { display: flex; align-items: center; gap: .7rem; color: var(--eh-mu); padding: .6rem .75rem; margin: 1px 0; border-radius: 10px; font-size: .86rem; font-weight: 600; transform: none !important; }
body.eh-admin .sidebar .nav-link i { width: 1.2rem; text-align: center; font-size: 1.02rem; margin: 0; }
body.eh-admin .sidebar .nav-link:hover { background: var(--eh-sf); color: var(--eh-tx); }
body.eh-admin .sidebar .nav-link.active { background: linear-gradient(90deg, var(--eh-gd-soft), transparent); color: var(--eh-gd-tx); box-shadow: inset 2px 0 0 var(--eh-gd); }
body.eh-admin .nav-badge { margin-left: auto; font-size: .62rem; font-weight: 800; padding: .12rem .5rem; border-radius: 99px; background: var(--eh-bl); color: #fff; }
body.eh-admin .nav-badge.warning { background: var(--eh-wr); color: #1b1305; }
body.eh-admin .nav-badge.danger { background: var(--eh-er); color: #fff; }
body.eh-admin .main-content { margin-left: var(--eh-sidebar-w); }
body.eh-admin .top-header {
  height: auto; min-height: 60px; padding: .7rem 1.5rem;
  background: color-mix(in srgb, var(--eh-bg) 88%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--eh-ln); box-shadow: none;
}
body.eh-admin .page-title { font: 700 1.2rem/1.2 var(--eh-display); color: var(--eh-tx); letter-spacing: -.01em; }
body.eh-admin .admin-badge-header { align-items: center; gap: .35rem; height: 38px; padding: 0 .8rem; border-radius: 11px; background: var(--eh-gd-soft); color: var(--eh-gd-tx); font-size: .72rem; font-weight: 800; letter-spacing: .08em; border: 1px solid color-mix(in srgb, var(--eh-gd) 30%, transparent); }
body.eh-admin .icon-btn, body.eh-admin .mobile-menu-btn { width: 40px; height: 40px; border-radius: 12px; background: var(--eh-sf2); border: 1px solid var(--eh-ln); color: var(--eh-tx); }
body.eh-admin .icon-btn:hover, body.eh-admin .mobile-menu-btn:hover { border-color: var(--eh-ln2); background: var(--eh-sf2); color: var(--eh-tx); }
body.eh-admin .user-menu-btn { height: 40px; border-radius: 12px; background: var(--eh-sf2); border: 1px solid var(--eh-ln); color: var(--eh-tx); padding: 0 .7rem 0 .35rem; font-weight: 700; }
body.eh-admin .user-avatar { width: 30px; height: 30px; border-radius: 9px; background: linear-gradient(145deg, #f7c64a, #c9870c); color: #1a1204; font-weight: 800; }
body.eh-admin .content-area { padding: 1.5rem; }
body.eh-admin .dropdown-menu { background: var(--eh-sf); border: 1px solid var(--eh-ln); border-radius: 14px; box-shadow: var(--eh-shadow); padding: .4rem; }
body.eh-admin .dropdown-item { border-radius: 9px; color: var(--eh-tx); font-weight: 600; }
body.eh-admin .dropdown-item:hover { background: var(--eh-sf2); color: var(--eh-tx); }

/* shared admin components (used by every admin page) */
body.eh-admin .card { background: var(--eh-sf); border: 1px solid var(--eh-ln); border-radius: var(--eh-radius); box-shadow: none; color: var(--eh-tx); }
body.eh-admin .card-header { background: transparent; border-bottom: 1px solid var(--eh-ln); }
body.eh-admin .card-title, body.eh-admin .card-header h5, body.eh-admin .card-header h6 { font-family: var(--eh-display); }
body.eh-admin .btn { border-radius: 11px; font-weight: 700; }
body.eh-admin .btn-primary { background: linear-gradient(180deg, #f7c24a, #e3a015) !important; border: none !important; color: #1b1305 !important; }
body.eh-admin .btn-primary:hover { filter: brightness(1.06); }
body.eh-admin .btn-outline-primary { border-color: color-mix(in srgb, var(--eh-gd) 55%, transparent); color: var(--eh-gd-tx); background: transparent; }
body.eh-admin .btn-outline-primary:hover { background: var(--eh-gd-soft); color: var(--eh-gd-tx); border-color: var(--eh-gd); }
body.eh-admin .form-control, body.eh-admin .form-select { background-color: var(--eh-sf2); border: 1px solid var(--eh-ln); color: var(--eh-tx); border-radius: 11px; }
body.eh-admin .form-control:focus, body.eh-admin .form-select:focus { border-color: var(--eh-gd); box-shadow: 0 0 0 4px var(--eh-gd-soft); background-color: var(--eh-sf2); color: var(--eh-tx); }
body.eh-admin .input-group-text { background: var(--eh-sf3); border-color: var(--eh-ln); color: var(--eh-mu); }
body.eh-admin .table { --bs-table-bg: transparent; --bs-table-color: var(--eh-tx); --bs-table-border-color: var(--eh-ln); --bs-table-hover-bg: var(--eh-sf2); --bs-table-hover-color: var(--eh-tx); color: var(--eh-tx); }
body.eh-admin .table thead th, body.eh-admin .table-light th { background: var(--eh-sf2) !important; color: var(--eh-mu) !important; font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; border-color: var(--eh-ln); }
body.eh-admin .modal-content { background: var(--eh-sf); color: var(--eh-tx); border: 1px solid var(--eh-ln); border-radius: 18px; }
body.eh-admin code { color: var(--eh-gd-tx); font-family: var(--eh-mono); }
body.eh-admin .page-link { background: var(--eh-sf2); border-color: var(--eh-ln); color: var(--eh-tx); }
body.eh-admin .page-item.active .page-link { background: var(--eh-gd); border-color: var(--eh-gd); color: #1b1305; }
[data-bs-theme="dark"] body.eh-admin .bg-white { background: var(--eh-sf) !important; }
[data-bs-theme="dark"] body.eh-admin .bg-light { background: var(--eh-sf2) !important; }
[data-bs-theme="dark"] body.eh-admin .text-dark { color: var(--eh-tx) !important; }
[data-bs-theme="dark"] body.eh-admin .table-light { --bs-table-bg: var(--eh-sf2); --bs-table-color: var(--eh-mu); }
body.eh-admin .toast-container .toast { border-radius: 12px; }
body.eh-admin .stat-card { background: var(--eh-sf); border: 1px solid var(--eh-ln); border-radius: var(--eh-radius); padding: 1.1rem; }
body.eh-admin .stat-card::before { height: 2px; background: linear-gradient(90deg, var(--eh-gd), transparent 70%); }
body.eh-admin .stat-card:hover { transform: none; border-color: var(--eh-ln2); box-shadow: none; }
body.eh-admin .stat-label { color: var(--eh-mu); font-size: .68rem; letter-spacing: .1em; font-weight: 700; }
body.eh-admin .stat-value { font-family: var(--eh-mono); font-weight: 600; letter-spacing: -.02em; color: var(--eh-tx); }
body.eh-admin .stat-icon { border-radius: 12px; }
body.eh-admin .stat-icon.primary { background: color-mix(in srgb, var(--eh-bl) 16%, transparent); color: var(--eh-bl); }
body.eh-admin .stat-icon.success { background: color-mix(in srgb, var(--eh-ok) 16%, transparent); color: var(--eh-ok); }
body.eh-admin .stat-icon.warning { background: var(--eh-gd-soft); color: var(--eh-gd-tx); }
body.eh-admin .stat-icon.danger { background: color-mix(in srgb, var(--eh-er) 16%, transparent); color: var(--eh-er); }
body.eh-admin .alert { border-radius: 12px; color: var(--eh-tx); }
body.eh-admin .alert-success { background: color-mix(in srgb, var(--eh-ok) 12%, transparent); border-left-color: var(--eh-ok); }
body.eh-admin .alert-danger { background: color-mix(in srgb, var(--eh-er) 12%, transparent); border-left-color: var(--eh-er); }
body.eh-admin .alert-warning { background: var(--eh-gd-soft); border-left-color: var(--eh-gd); }
body.eh-admin .alert-info { background: color-mix(in srgb, var(--eh-bl) 12%, transparent); border-left-color: var(--eh-bl); }
body.eh-admin .dataTables_wrapper .dataTables_filter input, body.eh-admin .dataTables_wrapper .dataTables_length select { background: var(--eh-sf2); border: 1px solid var(--eh-ln); color: var(--eh-tx); border-radius: 10px; }
body.eh-admin .dataTables_wrapper .dataTables_info, body.eh-admin .dataTables_wrapper .dataTables_length, body.eh-admin .dataTables_wrapper .dataTables_filter { color: var(--eh-mu); }

@media (max-width: 991.98px) {
  body.eh-admin .main-content { margin-left: 0; }
  body.eh-admin .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }
  body.eh-admin .content-area { padding: 1rem; }
}
@media (max-width: 575.98px) {
  body.eh-admin .top-header { padding: .6rem .8rem; }
  body.eh-admin .content-area { padding: .8rem; }
  body.eh-admin input, body.eh-admin select, body.eh-admin textarea { font-size: 16px; }
}

/* ══════════════════════════════════════════════════════════════════
   12. MEMBER PAGES (stage 4) — AFA, result checker, referrals, profile,
   report issue, send & claim, iShare balance, AFA bulk + histories, API.
   Each page root: class "eh-page eh-acc-*" (sets the accent colour).
   ══════════════════════════════════════════════════════════════════ */
.eh-acc-afa { --nc: #7c6cf6; --nfg: #fff; }
.eh-acc-rc  { --nc: #3b82f6; --nfg: #fff; }
.eh-acc-ref { --nc: #a36cf5; --nfg: #fff; }
.eh-acc-pro { --nc: var(--eh-gd); --nfg: #1b1305; }
.eh-acc-rep { --nc: #f59e0b; --nfg: #1b1305; }
.eh-acc-sc  { --nc: #10b981; --nfg: #04140d; }
.eh-acc-ish { --nc: #f59e0b; --nfg: #1b1305; }

/* page-local "primary" colours now follow the page accent */
.eh-page { --primary-color: var(--nc); --primary-blue: var(--nc); }

/* history pages use the full width for their tables */
.eh-page.eh-page-wide .row.justify-content-center > [class*="col-"] { max-width: none; }

/* balance amounts always read in gold */
body.eh-app .eh-page .balance-display strong { color: var(--eh-gd-tx) !important; }

/* stat tiles (result checker, referrals, AFA bulk) */
.eh-page .stat-card {
  display: flex; align-items: center; gap: .85rem; text-align: left; height: 100%;
  background: var(--eh-sf); border: 1px solid var(--eh-ln); border-radius: var(--eh-radius);
  padding: 1rem 1.1rem; box-shadow: none; color: var(--eh-tx);
}
.eh-page .stat-card:hover { transform: none; box-shadow: none; border-color: var(--eh-ln2); }
.eh-page .stat-card p, .eh-page .stat-card h4 { margin: 0; }
.eh-page .stat-card .stat-icon, .eh-page .stat-card .stat-icon-wrapper {
  width: 46px; height: 46px; border-radius: 14px; flex-shrink: 0; display: grid; place-items: center; font-size: 1.25rem; margin: 0;
}
.eh-page .stat-card .stat-label { color: var(--eh-mu); font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; margin: 0 0 .15rem; }
.eh-page .stat-card .stat-value { font: 700 1.35rem/1.15 var(--eh-mono); color: var(--eh-tx); letter-spacing: -.02em; }

/* table rows that Bootstrap tints */
body.eh-app:not(.eh-legacy) .table > tbody > tr.table-secondary,
body.eh-app:not(.eh-legacy) .table > tbody > tr.table-light { --bs-table-bg: var(--eh-sf2); --bs-table-color: var(--eh-mu); --bs-table-hover-bg: var(--eh-sf3); --bs-table-hover-color: var(--eh-tx); }
body.eh-app:not(.eh-legacy) .table > tbody > tr.table-success { --bs-table-bg: var(--eh-ok-soft); --bs-table-color: var(--eh-tx); }
body.eh-app:not(.eh-legacy) .table > tbody > tr.table-danger  { --bs-table-bg: var(--eh-er-soft); --bs-table-color: var(--eh-tx); }
body.eh-app:not(.eh-legacy) .table > tbody > tr.table-warning { --bs-table-bg: var(--eh-wr-soft); --bs-table-color: var(--eh-tx); }
body.eh-app:not(.eh-legacy) .table > tbody > tr.table-info    { --bs-table-bg: var(--eh-bl-soft); --bs-table-color: var(--eh-tx); }
body.eh-app:not(.eh-legacy) .badge.bg-dark { background: var(--eh-sf3) !important; color: var(--eh-tx) !important; border: 1px solid var(--eh-ln2); }

/* profile */
.eh-page .profile-card { background: var(--eh-sf); border: 1px solid var(--eh-ln); border-radius: var(--eh-radius); box-shadow: none; overflow: hidden; }
.eh-page .profile-card-header { background: transparent; border-bottom: 1px solid var(--eh-ln); }
.eh-page .profile-card-header h5 { font: 700 1rem/1.2 var(--eh-display); color: var(--eh-tx); }
.eh-page .profile-card-header h5 i { color: var(--nc); }
.eh-page .profile-avatar-large { display: inline-block; font-size: 3.6rem; line-height: 1; color: var(--eh-gd-tx); margin-bottom: .6rem !important; }
.eh-page .profile-avatar-large i { color: var(--eh-gd-tx); }
.eh-page .btn-profile-save:not(.btn-danger) {
  background: linear-gradient(180deg, #f7c24a, #e3a015) !important; color: #1b1305 !important; border: none !important;
  box-shadow: 0 14px 28px -16px rgba(242,182,52,.9);
}
.eh-page .btn-profile-save.btn-danger { background: var(--eh-er-soft) !important; color: var(--eh-er) !important; border: 1px solid color-mix(in srgb, var(--eh-er) 35%, transparent) !important; box-shadow: none; }
.eh-page .stat-box { background: var(--eh-sf2); border: 1px solid var(--eh-ln); box-shadow: none; }
.eh-page .stat-box .stat-value { font-family: var(--eh-mono); color: var(--eh-tx); }

/* iShare balance card */
.eh-acc-ish .balance-card { background: var(--eh-sf); border: 1px solid var(--eh-ln); border-radius: var(--eh-radius); box-shadow: none; }
.eh-acc-ish .balance-card .balance-display { justify-content: center; background: transparent; border: none; margin: 0; }
.eh-acc-ish .balance-card .balance-display i { font-size: 1.6rem; color: var(--nc); }
.eh-acc-ish .balance-amount { font-family: var(--eh-mono); color: var(--eh-tx) !important; }
.eh-acc-ish .balance-unit { color: var(--eh-mu) !important; }
.eh-page .quick-volume { background: var(--eh-sf2); border: 1px solid var(--eh-ln2); color: var(--eh-tx); border-radius: 12px; font-family: var(--eh-mono); }
.eh-page .quick-volume:hover { border-color: var(--nc); }
.eh-page .quick-volume.selected { background: color-mix(in srgb, var(--nc) 18%, transparent); border-color: var(--nc); color: var(--eh-tx); }

/* result checker history heading */
.eh-page-wide > .row:first-child h2 { font: 700 1.4rem/1.2 var(--eh-display); color: var(--eh-tx); letter-spacing: -.01em; }

/* history filter tabs scroll sideways instead of spilling out */
.eh-page .filter-tabs-wrapper { overflow-x: auto; scrollbar-width: none; }
.eh-page .filter-tab.active { background: color-mix(in srgb, var(--nc) 20%, transparent); border-color: var(--nc); color: var(--eh-tx); }

/* API page: same page head as the rest of the app */
.eh-acc-api { --nc: #3b82f6; --nfg: #fff; }
.eh-page.api-page { background: transparent; min-height: 0; }
.eh-page .api-hero {
  border-radius: var(--eh-radius); margin: 0 0 1.1rem; padding: 1.3rem 1.4rem; border: 1px solid var(--eh-ln);
  background: radial-gradient(110% 160% at 100% 0%, color-mix(in srgb, var(--nc) 30%, transparent), transparent 60%), var(--eh-sf);
}
.eh-page .api-hero::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--nc); z-index: 1; }
.eh-page .api-hero-grid { opacity: .5; background-image: linear-gradient(var(--eh-ln) 1px, transparent 1px), linear-gradient(90deg, var(--eh-ln) 1px, transparent 1px); }
.eh-page .api-hero-body { text-align: left; }
.eh-page .api-hero-badge { background: var(--eh-bl-soft); border-color: color-mix(in srgb, var(--nc) 35%, transparent); color: var(--eh-bl-tx); }
.eh-page .api-hero-title { color: var(--eh-tx); font-family: var(--eh-display); font-size: 1.35rem; }
.eh-page .api-hero-sub { color: var(--eh-mu); }
.eh-page .api-card { border-color: var(--eh-ln); box-shadow: none; border-radius: var(--eh-radius); }
.eh-page .api-stat { background: var(--eh-sf2); border-color: var(--eh-ln); }
.eh-page .api-stat-num { font-family: var(--eh-mono); color: var(--eh-tx); }
.eh-page .api-primary-btn:not(:disabled):not(.loading):not(.done) {
  background: linear-gradient(180deg, #f7c24a, #e3a015); color: #1b1305; font-weight: 800;
}
.eh-page .api-key-input { background: var(--eh-sf2); color: var(--eh-tx); border-color: var(--eh-ln2); font-family: var(--eh-mono); }
.eh-page .api-input-group, .eh-page .api-input-prefix { border-color: var(--eh-ln2); }
.eh-page .api-input-prefix { background: var(--eh-sf3); }
.eh-page .api-input-group input { background: var(--eh-sf2); color: var(--eh-tx); }

/* ══════════════════════════════════════════════════════════════════
   13. SHOP OWNER PAGES + REMAINING ADMIN PAGES (stage 5)
   ══════════════════════════════════════════════════════════════════ */
/* solid Bootstrap colour cards / card headers become soft tinted panels */
:is(body.eh-admin, body.eh-app:not(.eh-legacy)) :is(.card, .card-header).bg-primary,
:is(body.eh-admin, body.eh-app:not(.eh-legacy)) :is(.card, .card-header).bg-info { background: var(--eh-bl-soft) !important; }
:is(body.eh-admin, body.eh-app:not(.eh-legacy)) :is(.card, .card-header).bg-success { background: var(--eh-ok-soft) !important; }
:is(body.eh-admin, body.eh-app:not(.eh-legacy)) :is(.card, .card-header).bg-danger { background: var(--eh-er-soft) !important; }
:is(body.eh-admin, body.eh-app:not(.eh-legacy)) :is(.card, .card-header).bg-warning { background: var(--eh-wr-soft) !important; }
:is(body.eh-admin, body.eh-app:not(.eh-legacy)) :is(.card, .card-header).bg-dark,
:is(body.eh-admin, body.eh-app:not(.eh-legacy)) :is(.card, .card-header).bg-secondary { background: var(--eh-sf3) !important; }
:is(body.eh-admin, body.eh-app:not(.eh-legacy)) :is(.card, .card-header):is(.bg-primary, .bg-info, .bg-success, .bg-danger, .bg-warning, .bg-dark, .bg-secondary),
:is(body.eh-admin, body.eh-app:not(.eh-legacy)) :is(.card, .card-header):is(.bg-primary, .bg-info, .bg-success, .bg-danger, .bg-warning, .bg-dark, .bg-secondary) :is(.text-white, h1, h2, h3, h4, h5, h6, small, p) {
  color: var(--eh-tx) !important;
}
:is(body.eh-admin, body.eh-app:not(.eh-legacy)) .card.bg-primary, :is(body.eh-admin, body.eh-app:not(.eh-legacy)) .card.bg-info { border-color: color-mix(in srgb, var(--eh-bl) 35%, transparent) !important; }
:is(body.eh-admin, body.eh-app:not(.eh-legacy)) .card.bg-success { border-color: color-mix(in srgb, var(--eh-ok) 35%, transparent) !important; }
:is(body.eh-admin, body.eh-app:not(.eh-legacy)) .card.bg-danger { border-color: color-mix(in srgb, var(--eh-er) 35%, transparent) !important; }
:is(body.eh-admin, body.eh-app:not(.eh-legacy)) .card.bg-warning { border-color: color-mix(in srgb, var(--eh-wr) 35%, transparent) !important; }

/* shop owner: Manage Prices */
body.eh-app .price-manager .page-header {
  position: relative; overflow: hidden; margin: 0 0 1.1rem; border-radius: var(--eh-radius); color: var(--eh-tx);
  background: radial-gradient(110% 160% at 100% 0%, color-mix(in srgb, var(--eh-gd) 26%, transparent), transparent 60%), var(--eh-sf);
  border: 1px solid var(--eh-ln); padding: 1.15rem 1.35rem;
}
body.eh-app .price-manager .page-header::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--eh-gd); }
body.eh-app .price-manager .page-header :is(h1, h2, h3, h4, h5, p, small, span, i) { color: inherit; }
body.eh-app .price-manager .page-header p { color: var(--eh-mu); }
body.eh-app .price-manager .page-header :is(a, button) { background: var(--eh-sf2) !important; color: var(--eh-tx) !important; border: 1px solid var(--eh-ln2) !important; }
body.eh-app .price-manager .btn-save {
  background: linear-gradient(180deg, #f7c24a, #e3a015) !important; color: #1b1305 !important; font-weight: 800;
  box-shadow: 0 14px 28px -16px rgba(242,182,52,.9);
}
body.eh-app .price-manager { --primary: var(--eh-gd); --primary-dark: #b77f06; }

/* shop owner + admin page titles written as plain h2/h3 at the top */
body.eh-app:not(.eh-legacy) .content-area > .row:first-child :is(h1, h2, h3):first-child,
body.eh-admin .content-area > .row:first-child :is(h1, h2, h3):first-child { font-family: var(--eh-display); letter-spacing: -.01em; }
body.eh-admin .transfer-type-card .btn-check:checked + .btn-outline-primary,
body.eh-admin .transfer-type-card .btn-check:checked + .btn-outline-primary :is(small, span, i, strong) { color: #1b1305 !important; }
:is(body.eh-admin, body.eh-app:not(.eh-legacy)) .card:is(.bg-primary, .bg-info, .bg-success, .bg-danger, .bg-warning, .bg-dark, .bg-secondary) .text-white-50 { color: var(--eh-mu) !important; }
:is(body.eh-admin, body.eh-app:not(.eh-legacy)) .card:is(.bg-primary, .bg-info, .bg-success, .bg-danger, .bg-warning, .bg-dark, .bg-secondary) .bg-white.bg-opacity-25 { background: var(--eh-sf) !important; }
:is(body.eh-admin, body.eh-app:not(.eh-legacy)) .card:is(.bg-primary, .bg-info, .bg-success, .bg-danger, .bg-warning, .bg-dark, .bg-secondary) i.text-white { color: var(--eh-tx) !important; }