/* ═══════════════════════════════════════════════════════════════════════════
   FX ARENA — "Hot-Crash" theme layer  (loaded LAST on every page, see php/queue-runner.php)
   Mint green + charcoal + soft green glow, rounded 16px cards, grey rounded inputs,
   yellow CTA, footer with Policies / License / Note. Dodger blue stays as the info accent.
   Works in dark AND light mode. Nothing here changes behaviour — it only restyles.
   ═══════════════════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800&display=swap');

:root, [data-theme="dark"], body.dark {
  --hc-green:#27ee8a; --hc-green-2:#16c46c; --hc-green-soft:rgba(39,238,138,.14); --hc-glow:rgba(39,238,138,.30);
  --hc-yellow:#ffb800; --hc-blue:#1E90FF;
  --hc-bg:#23282a; --hc-bg-top:#0a3a1b; --hc-bar:#2c3133; --hc-card:#2f3537; --hc-card-2:#383e40; --hc-input:#454b4d;
  --hc-line:rgba(255,255,255,.09); --hc-text:#ffffff; --hc-dim:#b7bfc2; --hc-faint:#7e8789; --hc-on-green:#04160b;
  --hc-hero: linear-gradient(160deg,#0e4a22 0%,#2f3739 58%);

  --fx-primary:#27ee8a; --fx-primary-hover:#16c46c; --fx-primary-glow:rgba(39,238,138,.35); --fx-primary-rgba:rgba(39,238,138,.13);
  --fx-secondary:#0e4a22; --fx-secondary-glow:rgba(14,74,34,.4); --fx-accent-yellowgreen:#b4d65a;
  --fx-dark:#23282a; --fx-card:#2f3537; --fx-card-hover:#363d3f; --fx-inner:#383e40; --fx-border:rgba(255,255,255,.09);
  --fx-border-highlight:rgba(39,238,138,.35);
  --fx-text:#fff; --fx-text-dim:#b7bfc2; --fx-text-faint:#7e8789;
  --fx-up-green:#27ee8a; --fx-down-red:#ff6b6b; --fx-warn-orange:#ffb800; --fx-info-blue:#1E90FF;
  --fx-font-sans:'Nunito',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --fx-glass-bg:rgba(44,49,51,.86); --fx-glass-border:rgba(255,255,255,.09);
  --fx-glow-primary:0 0 22px rgba(39,238,138,.22);

  --main-bg-color:var(--hc-bg); --bg-overlay:var(--hc-bg); --bg-light:var(--hc-card-2); --bg-card:var(--hc-card); --bg-card-hover:#363d3f;
  --header-bg:var(--hc-bar); --highlight-color:#27ee8a; --highlight-dark:#16c46c; --highlight-rgba:rgba(39,238,138,.14);
  --border-color:rgba(255,255,255,.09); --border-highlight:rgba(39,238,138,.35);
  --text-color:#fff; --text-dim:#b7bfc2; --text-faint:#7e8789; --up-color:#27ee8a; --down-color:#ff6b6b;
  --font-body:'Nunito',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --primary-blue:#16c46c; --primary-blue-dark:#0f9c54; --grad-green-start:#27ee8a; --grad-green-end:#0e6b34;
  --grad-deposit-start:#27ee8a; --grad-deposit-end:#0e6b34;

  --admin-bg:#23282a; --admin-card:#2f3537; --admin-header:#2c3133; --admin-border:rgba(255,255,255,.09);
  --admin-highlight:#27ee8a; --admin-text:#fff; --admin-text-dim:#b7bfc2; --admin-green:#27ee8a; --admin-blue:#1E90FF; --admin-orange:#ffb800;
}
[data-theme="light"], body.light, body.light-mode {
  --hc-green:#12b866; --hc-green-2:#0e9a55; --hc-green-soft:rgba(18,184,102,.13); --hc-glow:rgba(18,184,102,.25);
  --hc-bg:#eef3f0; --hc-bg-top:#d3f1df; --hc-bar:#ffffff; --hc-card:#ffffff; --hc-card-2:#f3f6f4; --hc-input:#e9eeeb;
  --hc-line:rgba(15,40,25,.10); --hc-text:#12211a; --hc-dim:#4d5f56; --hc-faint:#7d8e85; --hc-on-green:#ffffff;
  --hc-hero: linear-gradient(160deg,#d9f5e5 0%,#ffffff 60%);

  --fx-primary:#12b866; --fx-primary-hover:#0e9a55; --fx-primary-glow:rgba(18,184,102,.3); --fx-primary-rgba:rgba(18,184,102,.12);
  --fx-dark:#eef3f0; --fx-card:#ffffff; --fx-card-hover:#f6f9f7; --fx-inner:#f1f5f2; --fx-border:rgba(15,40,25,.10);
  --fx-text:#12211a; --fx-text-dim:#4d5f56; --fx-text-faint:#7d8e85;
  --fx-up-green:#0e9a55; --fx-down-red:#e5484d; --fx-warn-orange:#d98a00;
  --fx-glass-bg:rgba(255,255,255,.9); --fx-glass-border:rgba(15,40,25,.10);

  --main-bg-color:#eef3f0; --bg-overlay:#fff; --bg-light:#f1f5f2; --bg-card:#fff; --bg-card-hover:#f6f9f7; --header-bg:#fff;
  --highlight-color:#12b866; --highlight-dark:#0e9a55; --highlight-rgba:rgba(18,184,102,.13);
  --border-color:rgba(15,40,25,.10); --text-color:#12211a; --text-dim:#4d5f56; --text-faint:#7d8e85;
  --admin-bg:#eef3f0; --admin-card:#fff; --admin-header:#fff; --admin-border:rgba(15,40,25,.10); --admin-highlight:#12b866;
  --admin-text:#12211a; --admin-text-dim:#4d5f56; --admin-green:#0e9a55;
}

/* ───────── base ───────── */
html body, body.app-body, body.admin-body, body.auth-body {
  font-family:'Nunito',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif !important;
  background:var(--hc-bg) !important;
  background-image:radial-gradient(ellipse 120% 55% at 50% -8%, var(--hc-bg-top) 0%, transparent 70%) !important;
  background-attachment:fixed !important;
  color:var(--hc-text);
  -webkit-font-smoothing:antialiased;
}
/* NEVER crop content under the fixed bottom nav — scroll all the way to the copyright line */
html body { padding-bottom:calc(104px + env(safe-area-inset-bottom)) !important; min-height:100dvh; overflow-x:hidden; }
body:not(:has(.fx-bottom-nav)):not(.admin-body):not(:has(nav.bottom-nav)) { padding-bottom:calc(24px + env(safe-area-inset-bottom)) !important; }
.dash-content, .admin-content, .page-container { padding-bottom:28px !important; }
.footer { margin-bottom:8px; }
h1,h2,h3,h4 { letter-spacing:-.2px; }
::selection { background:var(--hc-green); color:var(--hc-on-green); }
::-webkit-scrollbar { width:8px; height:8px; } ::-webkit-scrollbar-thumb { background:rgba(127,140,135,.35); border-radius:8px; }

/* ───────── top bar + menu ───────── */
.fx-top-nav { background:var(--hc-bar) !important; border-bottom:1px solid var(--hc-line) !important; backdrop-filter:blur(14px); box-shadow:none !important; }
.fx-circled-plus-btn { border:1.5px solid var(--hc-green) !important; color:var(--hc-green) !important; background:var(--hc-green-soft) !important; }
.fx-circled-plus-btn:hover { background:var(--hc-green) !important; color:var(--hc-on-green) !important; box-shadow:0 0 0 4px var(--hc-glow) !important; }

.fx-slide-menu-panel {
  height:100dvh !important; max-height:100dvh; width:min(340px,88vw) !important;
  border-radius:22px 0 0 22px !important; border-left:1px solid var(--hc-line) !important;
  background:linear-gradient(180deg,#123a1f 0%, #23282a 42%) !important; box-shadow:-20px 0 50px rgba(0,0,0,.55) !important;
  padding:22px 16px calc(120px + env(safe-area-inset-bottom)) !important;
  overflow-y:auto !important; overflow-x:hidden !important; -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
}
[data-theme="light"] .fx-slide-menu-panel, body.light-mode .fx-slide-menu-panel { background:linear-gradient(180deg,#d9f5e5 0%,#fff 40%) !important; }
.fx-menu-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.fx-menu-list li a {
  display:flex !important; align-items:center; gap:12px; padding:13px 14px !important; border-radius:14px !important;
  background:rgba(39,238,138,.08) !important; border:1px solid rgba(39,238,138,.14) !important; color:var(--hc-text) !important;
  font-weight:700; font-size:14px; text-decoration:none; transition:.16s; white-space:normal; line-height:1.25;
}
.fx-menu-list li a i { width:22px; text-align:center; color:var(--hc-green); flex-shrink:0; }
.fx-menu-list li a:hover, .fx-menu-list li a.active { background:var(--hc-green) !important; color:var(--hc-on-green) !important; }
.fx-menu-list li a:hover i, .fx-menu-list li a.active i { color:var(--hc-on-green); }

.fx-bottom-nav, nav.bottom-nav { background:var(--hc-bar) !important; border-top:1px solid var(--hc-line) !important; padding:8px 10px calc(10px + env(safe-area-inset-bottom)) !important; }
.fx-bottom-nav a { color:var(--hc-dim) !important; font-weight:700; }
.fx-bottom-nav a.active, .fx-bottom-nav a:hover { color:var(--hc-green) !important; }
.fx-bottom-nav .nav-circle-icon { border-color:var(--hc-line) !important; background:var(--hc-card) !important; color:var(--hc-green) !important; }
.fx-bottom-nav a.active .nav-circle-icon { background:var(--hc-green) !important; color:var(--hc-on-green) !important; border-color:var(--hc-green) !important; box-shadow:0 0 0 4px var(--hc-glow); }

/* ───────── cards / boxes / modals / package cards ───────── */
.box, .fx-card, .dash-card, .wallet-card, .stat-box, .txn-stat-tile, .txn-item, .market-pair-card, .feature-card,
.package-card, .pkg-card, .pkg, .plan-card, .invest-card, .inv-card, .trade-card, .ref-card, .admin-card, .stat-tile, .admin-stat {
  background:var(--hc-hero), var(--hc-card) !important; background-blend-mode:normal;
  border:1px solid var(--hc-line) !important; border-radius:18px !important; box-shadow:0 10px 30px rgba(0,0,0,.18) !important;
}
[data-theme="light"] .box, body.light-mode .box, [data-theme="light"] .package-card, body.light-mode .package-card { box-shadow:0 8px 24px rgba(20,60,40,.08) !important; }
.package-grid { display:grid !important; grid-template-columns:repeat(auto-fill,minmax(min(100%,270px),1fr)) !important; gap:16px !important; }
.package-card, .pkg-card, .plan-card { padding:20px !important; position:relative; overflow:hidden; transition:transform .18s, box-shadow .18s, border-color .18s; }
.package-card:hover, .pkg-card:hover, .plan-card:hover { transform:translateY(-3px); border-color:var(--hc-green) !important; box-shadow:0 0 0 3px var(--hc-glow), 0 14px 34px rgba(0,0,0,.28) !important; }
.package-card input, .package-card select { background:var(--hc-input) !important; }
.modal-overlay, .fx-modal-overlay { background:rgba(8,12,10,.72) !important; backdrop-filter:blur(6px); }
.modal, .modal-box, .modal-content, .fx-modal-content, .modal-overlay > div {
  background:var(--hc-hero), var(--hc-card) !important; border:1px solid var(--hc-line) !important; border-radius:20px !important;
  box-shadow:0 30px 70px rgba(0,0,0,.5) !important; color:var(--hc-text);
}
.stat-tile, .admin-stat { padding:14px !important; }
.stat-tile .value.green, .value.green, .green { color:var(--hc-green) !important; }

/* ───────── buttons ───────── */
.btn, button.btn, .fx-btn-primary, .btn-gradient, .btn-primary, .tf-btn.primary, .admin-btn-primary, a.btn {
  background:var(--hc-green) !important; color:var(--hc-on-green) !important; border:none !important; border-radius:12px !important;
  font-weight:800 !important; letter-spacing:.2px; box-shadow:none !important; transition:transform .12s, box-shadow .15s, filter .15s;
}
.btn:hover, .fx-btn-primary:hover, .btn-gradient:hover, .btn-primary:hover { filter:brightness(1.06); box-shadow:0 0 0 4px var(--hc-glow) !important; opacity:1 !important; }
.btn:active, .btn-gradient:active { transform:scale(.985); }
.btn:disabled, .btn-gradient:disabled { opacity:.5 !important; box-shadow:none !important; }
.btn-outline, .fx-btn-outline, .btn-secondary { background:transparent !important; color:var(--hc-green) !important; border:1.5px solid var(--hc-green) !important; border-radius:12px !important; }
.btn-warning, .btn-yellow, .cta-yellow, .hc-yellow { background:var(--hc-yellow) !important; color:#251a00 !important; border-radius:12px !important; font-weight:800; }
.btn-danger, .fx-btn-danger, .admin-btn-danger { border-radius:12px !important; }
.admin-btn { border-radius:12px !important; }

/* ───────── inputs (grey, rounded, no border — like Hot-Crash) ───────── */
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]), select, textarea, .fx-input {
  background:var(--hc-input) !important; border:1.5px solid transparent !important; border-radius:12px !important;
  color:var(--hc-text) !important; font-family:inherit; padding:14px 16px; min-height:48px;
}
input::placeholder, textarea::placeholder { color:var(--hc-faint) !important; }
input:focus, select:focus, textarea:focus { outline:none !important; border-color:var(--hc-green) !important; box-shadow:0 0 0 4px var(--hc-glow) !important; }
label { color:var(--hc-dim); font-weight:700; }
.form-group label, .input-wrap label, .fx-label { font-size:14px; color:var(--hc-text) !important; font-weight:700 !important; margin-bottom:8px; }

/* ───────── tables ───────── */
table.admin-table, .fx-table, table { border-collapse:separate; border-spacing:0; }
.admin-table thead th, .fx-table thead th, table thead th { background:var(--hc-card-2) !important; color:var(--hc-dim) !important; font-weight:800; font-size:12px; text-transform:none; letter-spacing:.2px; }
.admin-table thead th:first-child, .fx-table thead th:first-child { border-radius:14px 0 0 14px; } .admin-table thead th:last-child, .fx-table thead th:last-child { border-radius:0 14px 14px 0; }
.admin-table td, .fx-table td { border-bottom:1px solid var(--hc-line) !important; }
.admin-table tbody tr:hover, .fx-table tbody tr:hover { background:var(--hc-green-soft); }
.admin-tabs .tab-btn, .filter-tabs button, .tabs button, .tab-btn { border-radius:999px !important; }
.tab-btn.active, .filter-tabs .active, .tabs .active { background:var(--hc-green) !important; color:var(--hc-on-green) !important; border-color:var(--hc-green) !important; }

/* ───────── badges + status ───────── */
.status-badge.completed, .status-badge.approved, .status-badge.win, .admin-badge.green, .fx-badge-success { background:var(--hc-green-soft) !important; color:var(--hc-green) !important; }
.fx-badge-demo { background:rgba(255,184,0,.16) !important; color:var(--hc-yellow) !important; border:1px solid rgba(255,184,0,.4); }
.fx-badge-danger { background:rgba(255,80,80,.16) !important; color:#ff6b6b !important; }

/* ───────── DEMO / REAL switch (dash) ───────── */
.mode-switch, .demo-real-toggle, .account-toggle, .acct-switch { display:inline-flex; gap:4px; padding:4px; border-radius:999px; background:var(--hc-card-2); border:1px solid var(--hc-line); }
.mode-switch a, .mode-switch button, .demo-real-toggle a, .demo-real-toggle button, .account-toggle a, .account-toggle button, .acct-switch a, .acct-switch button { border-radius:999px !important; padding:8px 18px !important; font-weight:800; font-size:13px; border:none !important; background:transparent; color:var(--hc-dim); text-decoration:none; }
.mode-switch .active, .demo-real-toggle .active, .account-toggle .active, .acct-switch .active { background:var(--hc-green) !important; color:var(--hc-on-green) !important; }
.mode-switch a[href*="demo"].active, .demo-real-toggle .demo.active, .acct-switch .demo.active { background:var(--hc-yellow) !important; color:#251a00 !important; }

/* ───────── toasts ───────── */
.toast { border-radius:14px !important; border:1px solid var(--hc-line) !important; background:var(--hc-card-2) !important; color:var(--hc-text) !important; box-shadow:0 12px 30px rgba(0,0,0,.35) !important; }
.toast.success { background:linear-gradient(135deg,#c4ee6e,#27ee8a) !important; color:#04160b !important; border-color:#27ee8a !important; }
.toast.error { background:#ff3b30 !important; color:#fff !important; border-color:#ff6a61 !important; }
.toast.success .toast-icon, .toast.error .toast-icon { color:inherit !important; }

/* ───────── Hot-Crash header bar + footer for auth pages (php/auth-logo.php, php/auth-footer.php) ───────── */
.hc-bar { position:sticky; top:0; z-index:60; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 14px; background:var(--hc-bar); border-bottom:1px solid var(--hc-line); }
.hc-logo { display:flex; align-items:center; gap:9px; text-decoration:none; color:var(--hc-text); font-weight:800; font-size:20px; letter-spacing:-.3px; }
.hc-logo-mark { width:42px; height:42px; border-radius:50%; background:linear-gradient(135deg,#27ee8a,#0e9a55); border:2.5px solid #fff; display:flex; align-items:center; justify-content:center; color:#04160b; font-weight:900; font-size:15px; box-shadow:0 0 0 3px var(--hc-glow); }
.hc-logo b { color:var(--hc-green); }
.hc-actions { display:flex; align-items:center; gap:8px; padding:5px; background:rgba(39,238,138,.10); border:1px solid rgba(39,238,138,.2); border-radius:14px; }
.hc-actions a { padding:9px 16px; border-radius:11px; font-weight:800; font-size:14px; text-decoration:none; color:var(--hc-text); }
.hc-actions a.reg { background:var(--hc-yellow); color:#251a00; }
.hc-actions a.on { background:var(--hc-green); color:var(--hc-on-green); }
.hc-page { min-height:calc(100dvh - 64px); display:flex; flex-direction:column; align-items:center; padding:16px 14px 0; }
.hc-page .auth-card { width:100%; max-width:520px; margin:8px auto 0; padding:26px 22px 24px !important; border-radius:20px; background:var(--hc-hero), var(--hc-card) !important; border:1px solid var(--hc-line); box-shadow:0 16px 40px rgba(0,0,0,.22); }
.hc-foot { width:100%; max-width:640px; margin:26px auto 0; padding:22px 6px calc(30px + env(safe-area-inset-bottom)); border-top:1px solid var(--hc-line); text-align:left; }
.hc-foot h4 { margin:18px 0 8px; font-size:22px; font-weight:800; color:var(--hc-text); }
.hc-foot h4:first-child { margin-top:0; }
.hc-foot a.pl { display:block; padding:5px 12px; color:var(--hc-dim); text-decoration:none; font-size:16px; }
.hc-foot a.pl:hover { color:var(--hc-green); }
.hc-foot p { margin:0 0 10px; padding-left:12px; color:var(--hc-dim); font-size:15px; line-height:1.7; }
.hc-foot p a { color:var(--hc-green); text-decoration:none; }
.hc-foot .risk { padding:16px 0 0; border-top:1px solid var(--hc-line); margin-top:16px; font-size:15px; line-height:1.75; color:var(--hc-dim); }
.hc-social { display:flex; justify-content:center; gap:18px; margin:16px 0 8px; }
.hc-social a { font-size:32px; text-decoration:none; transition:transform .15s; }
.hc-social a:hover { transform:translateY(-2px) scale(1.06); }
.hc-copy { text-align:center; font-size:16px; color:var(--hc-dim); }

/* existing auth-page markup restyled to the same look */
.auth-page { background:transparent !important; padding:0 !important; justify-content:flex-start !important; }
.auth-card h1 { font-size:30px !important; font-weight:800 !important; color:var(--hc-text) !important; margin:10px 0 22px !important; }
.auth-card .subtitle { color:var(--hc-dim) !important; }
.auth-card .input-wrap input { background:var(--hc-input) !important; border:1.5px solid transparent !important; border-radius:12px !important; padding:16px 16px 16px 44px !important; color:var(--hc-text) !important; font-size:15px; }
.auth-card .input-wrap .input-icon { color:var(--hc-faint) !important; }
.auth-card .btn-gradient { background:var(--hc-green) !important; color:var(--hc-on-green) !important; border-radius:12px !important; padding:16px !important; font-size:17px !important; font-weight:800 !important; }
.auth-card .forgot, .auth-card a { color:var(--hc-green); }
.auth-card .code-input { letter-spacing:10px; text-align:center; font-family:ui-monospace,Menlo,Consolas,monospace; font-size:24px !important; }
.auth-intro h2 { color:var(--hc-text) !important; } .auth-intro p { color:var(--hc-dim) !important; }
.auth-footer { display:none !important; }   /* replaced by .hc-foot */

/* ───────── live activity feed ("Latest activity") ───────── */
.hc-feed { margin:22px 0; }
.hc-feed h3 { display:flex; align-items:center; gap:10px; font-size:20px; font-weight:800; margin:0 0 12px; }
.hc-feed h3::before { content:''; width:26px; height:1px; background:var(--hc-line); } .hc-feed h3::after { content:''; flex:1; height:1px; background:var(--hc-line); }
.hc-feed-wrap { background:var(--hc-card-2); border-radius:18px; overflow:hidden; border:1px solid var(--hc-line); }
.hc-feed table { width:100%; border-collapse:collapse; font-size:14px; }
.hc-feed th { text-align:left; padding:12px 14px; color:var(--hc-dim); font-weight:800; background:var(--hc-card); font-size:13px; }
.hc-feed td { padding:11px 14px; border-top:1px solid var(--hc-line); color:var(--hc-dim); white-space:nowrap; }
.hc-feed .who { display:flex; align-items:center; gap:9px; color:var(--hc-text); font-weight:700; }
.hc-feed .who img, .hc-feed .who span.av { width:30px; height:30px; border-radius:50%; object-fit:cover; background:var(--hc-card); display:inline-flex; align-items:center; justify-content:center; font-weight:800; font-size:12px; }
.hc-feed .amt { color:var(--hc-green); font-weight:800; } .hc-feed .neg { color:#ff8a8a; font-weight:800; }
.hc-feed .scroll { overflow-x:auto; max-height:420px; }

@media (max-width:520px) {
  .hc-logo { font-size:17px; } .hc-logo-mark { width:36px; height:36px; font-size:13px; }
  .hc-actions a { padding:8px 12px; font-size:13px; }
  .hc-foot h4 { font-size:20px; } .hc-foot a.pl, .hc-foot p, .hc-foot .risk { font-size:14px; }
}

/* auth pages: same card look, floating theme toggle so it never overlaps the header bar */
.auth-page { display:flex; flex-direction:column; align-items:center; }
.auth-page .hc-bar { width:100%; }
.auth-page .auth-card { width:calc(100% - 28px); max-width:520px; margin:18px auto 0; padding:26px 22px 24px !important; border-radius:20px; background:var(--hc-hero), var(--hc-card) !important; border:1px solid var(--hc-line); box-shadow:0 16px 40px rgba(0,0,0,.22); }
.auth-page .auth-intro { margin-top:18px; padding:0 18px; }
.auth-page .theme-toggle-abs { position:fixed !important; top:auto !important; bottom:calc(18px + env(safe-area-inset-bottom)) !important; left:auto !important; right:16px !important; z-index:80; width:44px; height:44px; border-radius:50% !important; background:var(--hc-card) !important; border:1px solid var(--hc-line) !important; color:var(--hc-green) !important; box-shadow:0 8px 24px rgba(0,0,0,.35); display:flex; align-items:center; justify-content:center; }
.auth-page .hc-foot { width:calc(100% - 28px); }
body:has(.auth-page) { padding-bottom:0 !important; }

/* ───────── DEMO vs REAL: different colour + border lines (Hot-Crash palette) ───────── */
body.is-real .fx-top-nav { border-bottom:2px solid rgba(39,238,138,.55) !important; }
body.is-demo .fx-top-nav { border-bottom:2px solid var(--hc-yellow) !important; }
body.is-admin .fx-top-nav { border-bottom:2px solid var(--hc-blue) !important; }
body.is-demo { background-image:radial-gradient(ellipse 120% 55% at 50% -8%, rgba(255,184,0,.16) 0%, transparent 70%) !important; }
.demo-banner { background:linear-gradient(135deg,rgba(255,184,0,.16),rgba(255,184,0,.04)) !important; border:1px solid rgba(255,184,0,.55) !important; border-radius:16px !important; }
.demo-banner-title { color:var(--hc-yellow) !important; }
.fx-menu-list li a[href="/demo-dash.php"] { background:rgba(255,184,0,.12) !important; border-color:rgba(255,184,0,.45) !important; color:var(--hc-yellow) !important; }
.fx-menu-list li a[href="/demo-dash.php"] i { color:var(--hc-yellow) !important; }
.fx-menu-list li a[href="/demo-dash.php"]:hover { background:var(--hc-yellow) !important; color:#251a00 !important; }
.fx-menu-list li a[href="/demo-dash.php"]:hover i { color:#251a00 !important; }
body.is-demo .fx-menu-list li a { background:rgba(255,184,0,.07) !important; border-color:rgba(255,184,0,.18) !important; }
body.is-demo .fx-menu-list li a i { color:var(--hc-yellow); }
body.is-demo .fx-menu-list li a.active, body.is-demo .fx-menu-list li a:hover { background:var(--hc-yellow) !important; color:#251a00 !important; }
body.is-demo .fx-menu-list li a.active i, body.is-demo .fx-menu-list li a:hover i { color:#251a00; }
body.is-demo .btn, body.is-demo .btn-gradient { background:var(--hc-yellow) !important; color:#251a00 !important; }
body.is-demo .fx-bottom-nav a.active, body.is-demo .fx-bottom-nav a:hover { color:var(--hc-yellow) !important; }
body.is-demo .fx-bottom-nav a.active .nav-circle-icon { background:var(--hc-yellow) !important; color:#251a00 !important; border-color:var(--hc-yellow) !important; box-shadow:0 0 0 4px rgba(255,184,0,.3); }