/* ==========================================================================
   CryptoAI Signal — Universal Site Shell
   assets/universal-shell.css

   Single source of truth for the public Header + Footer + Mobile Top Header +
   Mobile Bottom Navigation. Every rule below is the EXACT design lifted from
   index.html's inline <style>; nothing is redesigned.

   Why everything is scoped under #uni-header / #uni-footer:
   index.html styles its header/footer with BARE element selectors — nav{},
   footer{}, and a global body{} offset. On a content page that already has
   <nav class="pub-adjacent"> and <nav class="pub-contents"> (article.php),
   a bare nav{} rule would hit those too. Scoping under the two injection
   containers keeps the shell's look identical while making it impossible for
   these rules to touch any page-specific navigation. The class names inside
   (.nav-links, .footer-col, .mbn-item, .mh-*, .mobile-bottom-nav, ...) are
   kept verbatim from index.html.

   Design tokens are redeclared on the shell containers (not on :root) using
   index.html's OWN values, so the shell looks the same regardless of what a
   host page's stylesheet (e.g. public.css) defines for the same variable
   names. The page's own content theming is left completely untouched.
   ========================================================================== */

/* ── Shell design tokens (copied verbatim from index.html [data-theme] blocks),
      scoped to the shell only. Dark is the default; light overrides follow. ── */
#uni-header,
#uni-footer {
  --bg-nav: rgba(5,8,22,0.88);
  --bg-glass: rgba(11,16,32,0.75);
  --bg-input: rgba(255,255,255,0.04);
  --border: rgba(0,200,255,0.12);
  --blue: #00C8FF;
  --green: #00FF66;
  --text: #FFFFFF;
  --text-muted: #B8C1D1;
  --danger: #FF4D4D;
  --glow-blue: 0 0 32px rgba(0,200,255,0.14);
  --toggle-bg: rgba(0,200,255,0.12);
  --toggle-ico: #00C8FF;
  --content-max: 1550px;
  font-family: 'Space Grotesk', sans-serif;
}
[data-theme="light"] #uni-header,
[data-theme="light"] #uni-footer {
  --bg-nav: rgba(255,255,255,0.94);
  --bg-glass: #FFFFFF;
  --bg-input: #F1F2F5;
  --border: #DFE2E8;
  --blue: #0B72E7;
  --text: #0B0E14;
  --text-muted: #6B7280;
  --glow-blue: 0 2px 10px rgba(11,114,231,0.16);
  --toggle-bg: #FBEEDD;
  --toggle-ico: #D97A16;
}

/* ══════════════════════════════════════════════════════════════════════════
   DESKTOP HEADER  (index.html lines 95–223)
   ══════════════════════════════════════════════════════════════════════════ */
#uni-header nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 11px 60px;
  background: rgba(5,8,22,0.85);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
}

#uni-header .nav-logo { display: flex; align-items: center; gap: 14px; text-decoration: none; flex: 1 1 0; }

#uni-header .logo-icon {
  width: 44px; height: 44px; border-radius: 50%;
  background: linear-gradient(135deg, #009DFF, #00C8FF);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 20px rgba(0,200,255,0.4);
  position: relative; overflow: hidden;
}
#uni-header .logo-icon svg { width: 24px; height: 24px; }

#uni-header .logo-text { display: flex; flex-direction: column; line-height: 1.1; }
#uni-header .logo-crypto { font-size: 20px; font-weight: 700; color: #fff; letter-spacing: -0.3px; }
#uni-header .logo-ai { font-size: 20px; font-weight: 700; color: var(--green); letter-spacing: -0.3px; display: inline; }
#uni-header .logo-signal { font-size: 10px; font-weight: 500; color: var(--blue); letter-spacing: 3px; text-transform: uppercase; }

#uni-header .nav-links {
  display: flex;
  gap: 25px;
  list-style: none;
  margin: 0; padding: 0;
}
#uni-header .nav-links a {
  color: var(--text-muted); text-decoration: none;
  font-size: 14px; font-weight: 500; letter-spacing: 0.3px;
  transition: color 0.2s;
}
#uni-header .nav-links a:hover { color: var(--blue); }
/* Active nav item — current page/section. Uses the existing accent so it
   stays visually consistent with the hover state and the rest of the design. */
#uni-header .nav-links a.is-active { color: var(--blue); font-weight: 700; }

#uni-header .nav-cta { display: flex; gap: 10px; align-items: center; flex: 1 1 0; justify-content: flex-end; }
#uni-header .nav-cta .btn { padding: 8px 18px; }

#uni-header .btn {
  padding: 10px 22px; border-radius: 8px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 14px; font-weight: 600; cursor: pointer;
  text-decoration: none; transition: all 0.2s; border: none;
  display: inline-flex; align-items: center; gap: 8px;
}
#uni-header .btn-outline {
  background: transparent; color: var(--blue);
  border: 1px solid rgba(0,200,255,0.35);
}
#uni-header .btn-outline:hover { background: rgba(0,200,255,0.08); border-color: var(--blue); }

#uni-header .theme-toggle {
  height: 34px; padding: 0 11px; border-radius: 9px;
  background: var(--toggle-bg); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  font-size: 16px; font-family: "Space Grotesk", sans-serif;
  transition: all .3s; color: var(--toggle-ico);
  margin-right: 2px; gap: 4px; white-space: nowrap;
}
#uni-header .theme-toggle:hover { transform: scale(1.08); }

/* View Plans + Theme toggle: identical box size, 3px corner radius.
   Scoped to .nav-cta so no other .btn-outline/.theme-toggle instance on
   the site is affected — only these two header buttons. Overrides the
   base .btn-outline/.theme-toggle rules above via higher specificity. */
#uni-header .nav-cta .btn-outline,
#uni-header .nav-cta .theme-toggle {
  width: 80px; height: 36px; padding: 0;
  border-radius: 3px; box-sizing: border-box;
  display: inline-flex; align-items: center; justify-content: center;
}

#uni-header .nav-profile-btn {
  width: 34px; height: 34px; border-radius: 50%; flex: 0 0 auto;
  background: var(--bg-glass); border: 1px solid var(--border); color: var(--text-muted);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: all 0.2s;
}
#uni-header .nav-profile-btn:hover { border-color: var(--blue); color: var(--blue); box-shadow: var(--glow-blue); }
#uni-header .nav-profile-btn svg { width: 17px; height: 17px; }
#uni-header .nav-bell-btn { position: relative; }
#uni-header .nav-bell-badge {
  position: absolute; top: -4px; right: -4px; min-width: 15px; height: 15px; padding: 0 3px;
  border-radius: 8px; background: var(--danger); color: #fff;
  font-size: 10px; font-weight: 800; display: flex; align-items: center; justify-content: center;
}

/* ══════════════════════════════════════════════════════════════════════════
   MOBILE TOP HEADER  (index.html lines 2081–2117) — hidden until ≤767px
   ══════════════════════════════════════════════════════════════════════════ */
#uni-header .mobile-header {
  display: none;
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  align-items: center; gap: 12px;
  padding: 10px 16px;
  background: var(--bg-nav);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
}
#uni-header .mh-avatar {
  position: relative; flex: 0 0 auto; width: 42px; height: 42px; border-radius: 50%;
  background: linear-gradient(135deg, #009DFF, #00C8FF);
  box-shadow: 0 0 14px rgba(0,200,255,0.35);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
#uni-header .mh-avatar svg { width: 24px; height: 24px; }
#uni-header .mh-brand { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
#uni-header .mh-logo { font-family: "Space Grotesk", sans-serif; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
#uni-header .mh-logo .logo-crypto, #uni-header .mh-logo .logo-ai { font-size: 16px; }
#uni-header .mh-logo .logo-crypto { font-weight: 700; color: #fff; letter-spacing: -0.3px; }
#uni-header .mh-logo .logo-ai { font-weight: 700; color: var(--green); letter-spacing: -0.3px; }
#uni-header .mh-tagline { font-size: 9.5px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
#uni-header .mh-actions { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
#uni-header .mh-icon-btn {
  position: relative; width: 36px; height: 36px; border-radius: 9px; flex: 0 0 auto;
  background: var(--bg-input); border: 1px solid var(--border); color: var(--text-muted);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  padding: 6px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
  transition: border-color 0.2s, color 0.2s, transform 0.15s, box-shadow 0.2s;
}
#uni-header .mh-icon-btn:hover { border-color: var(--blue); color: var(--blue); box-shadow: 0 1px 3px rgba(0,200,255,0.08); }
#uni-header .mh-icon-btn:active { transform: scale(0.94); }
#uni-header .mh-icon-btn svg { width: 18px; height: 18px; }
/* Hamburger only — bare teal icon, no card/background/border/shadow.
   Keeps the 36px touch target for accessibility, but the target is visually
   invisible. Theme + Profile buttons keep their card style (unaffected). */
#uni-header .mh-menu-btn {
  background: none; border: none; box-shadow: none; padding: 2px;
  color: #17C3A2;
}
#uni-header .mh-menu-btn:hover { border-color: transparent; color: #17C3A2; box-shadow: none; }
#uni-header .mh-menu-btn svg { width: 36px; height: 36px; }
#uni-header .mh-menu-btn svg path { stroke: #17C3A2; stroke-width: 2.2; }
#uni-header .mh-bell-badge {
  position: absolute; top: -4px; right: -4px; min-width: 15px; height: 15px; padding: 0 3px;
  border-radius: 8px; background: var(--danger); color: #fff;
  font-size: 9px; font-weight: 800; display: flex; align-items: center; justify-content: center;
}

/* ══════════════════════════════════════════════════════════════════════════
   DESKTOP FOOTER  (index.html lines 829–845)
   ══════════════════════════════════════════════════════════════════════════ */
#uni-footer footer {
  padding: 36px 60px 24px;
  border-top: 1px solid var(--border);
}
#uni-footer .container-max { max-width: var(--content-max); margin: 0 auto; width: 100%; }
#uni-footer .footer-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 28px; }
#uni-footer .nav-logo { display: flex; align-items: center; gap: 14px; text-decoration: none; }
#uni-footer .logo-icon {
  width: 44px; height: 44px; border-radius: 50%;
  background: linear-gradient(135deg, #009DFF, #00C8FF);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 20px rgba(0,200,255,0.4);
  position: relative; overflow: hidden;
}
#uni-footer .logo-icon svg { width: 24px; height: 24px; }
#uni-footer .logo-text { display: flex; flex-direction: column; line-height: 1.1; }
#uni-footer .logo-crypto { font-size: 18px; font-weight: 700; color: #fff; letter-spacing: -0.3px; }
#uni-footer .logo-ai { font-size: 18px; font-weight: 700; color: var(--green); letter-spacing: -0.3px; display: inline; }
#uni-footer .logo-signal { font-size: 10px; font-weight: 500; color: var(--blue); letter-spacing: 3px; text-transform: uppercase; }
#uni-footer .footer-links { display: flex; gap: 60px; }
#uni-footer .footer-col h4 { font-size: 12px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 2px; margin-bottom: 16px; }
#uni-footer .footer-col a { display: block; font-size: 13px; color: rgba(184,193,209,0.7); text-decoration: none; margin-bottom: 10px; transition: color 0.2s; }
#uni-footer .footer-col a:hover { color: var(--blue); }
#uni-footer .footer-bottom {
  display: flex; justify-content: center; align-items: center;
  padding-top: 18px; border-top: 1px solid var(--border);
  font-size: 12px; color: rgba(184,193,209,0.4);
}

/* Footer stacks on smaller screens — mirrors index.html's own footer rule
   (.footer-top -> column, .footer-links -> wrap) at the same 1024px breakpoint,
   so the injected footer reads identically on every page instead of cramming
   the logo and link columns side-by-side on narrow screens. Scoped to
   #uni-footer only; nothing else is affected. */
@media (max-width: 1024px) {
  #uni-footer .footer-top { flex-direction: column; gap: 32px; }
  #uni-footer .footer-links { flex-wrap: wrap; gap: 32px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   MOBILE BOTTOM NAVIGATION  (index.html lines 2044–2068) — hidden until ≤767px.
   Lives inside #uni-footer in the DOM (so it inherits the shell tokens) but is
   position:fixed to the viewport bottom, exactly like index.html. It is NOT
   nested inside <footer> — it is a sibling of it.
   ══════════════════════════════════════════════════════════════════════════ */
#uni-footer .mobile-bottom-nav {
  display: none;
  position: fixed; top: auto; left: 0; right: 0; bottom: 0; z-index: 200;
  height: auto; align-items: stretch; justify-content: center;
  background: var(--bg-nav);
  backdrop-filter: blur(20px);
  border-top: 1px solid var(--border); border-bottom: none;
  border-radius: 14px 14px 0 0;
  box-shadow: 0 -3px 12px rgba(0,0,0,0.14);
  padding: 5px 4px calc(5px + env(safe-area-inset-bottom, 0px));
  transform: translateY(0);
  transition: transform 0.25s cubic-bezier(0.4,0,0.2,1);
  will-change: transform;
}
#uni-footer .mobile-bottom-nav.mbn-hidden { transform: translateY(100%); }
#uni-footer .mbn-item {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; padding: 3px 2px;
  color: var(--text-muted); text-decoration: none;
  font-size: 14px; font-weight: 600; letter-spacing: 0.1px;
  transition: color 0.2s;
}
#uni-footer .mbn-item svg { width: 22px; height: 22px; }
#uni-footer .mbn-item.active { color: var(--blue); }
#uni-footer .mbn-item.active svg { filter: drop-shadow(0 0 6px rgba(0,200,255,0.55)); }

/* ══════════════════════════════════════════════════════════════════════════
   MOBILE RIGHT-SIDE NAVIGATION DRAWER  (mobile only — desktop never renders it)
   The drawer + overlay live inside #uni-header. They are display:none by
   default and only enabled inside the ≤767px media query, so desktop is
   completely unaffected.
   ══════════════════════════════════════════════════════════════════════════ */
#uni-header .uni-drawer,
#uni-header .uni-drawer-overlay { display: none; }

#uni-header .uni-drawer-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(4, 10, 22, 0.55);
  opacity: 0; transition: opacity 0.25s ease;
  pointer-events: none;           /* closed: never intercept taps */
}
#uni-header .uni-drawer-overlay.is-open { opacity: 1; pointer-events: auto; }

#uni-header .uni-drawer {
  position: fixed; top: 0; left: 0; right: auto; bottom: 0; z-index: 201;
  width: clamp(230px, 60vw, 250px);
  background: var(--bg-nav);
  backdrop-filter: blur(20px);
  border-right: 1px solid var(--border);
  box-shadow: 12px 0 40px rgba(0,0,0,0.35);
  transform: translateX(-100%);
  transition: transform 0.28s cubic-bezier(0.4,0,0.2,1), visibility 0s linear 0.28s;
  display: flex; flex-direction: column;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 14px 8px calc(14px + env(safe-area-inset-bottom)) 2px;
  visibility: hidden;             /* closed: off-screen AND non-interactive */
  pointer-events: none;
}
#uni-header .uni-drawer.is-open {
  transform: translateX(0);
  visibility: visible;
  pointer-events: auto;
  transition: transform 0.28s cubic-bezier(0.4,0,0.2,1);
}

#uni-header .uni-drawer-head { display: flex; align-items: center; gap: 9px; }
#uni-header .uni-drawer-brand { display: flex; align-items: center; gap: 9px; flex: 1; min-width: 0; }
#uni-header .uni-drawer-avatar {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%;
  background: linear-gradient(135deg, #009DFF, #00C8FF);
  box-shadow: 0 0 14px rgba(0,200,255,0.35);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
#uni-header .uni-drawer-avatar svg { width: 24px; height: 24px; }
#uni-header .uni-drawer-brandtext { min-width: 0; }
#uni-header .uni-drawer-logo { font-family: "Space Grotesk", sans-serif; display: flex; flex-direction: column; line-height: 1.1; }
#uni-header .uni-drawer-logo .logo-crypto { font-size: 18px; font-weight: 700; color: #fff; letter-spacing: -0.3px; }
#uni-header .uni-drawer-logo .logo-ai { font-size: 18px; font-weight: 700; color: var(--green); letter-spacing: -0.3px; }
#uni-header .uni-drawer-logo .logo-signal { font-size: 9px; font-weight: 500; color: var(--blue); letter-spacing: 3px; text-transform: uppercase; }
#uni-header .uni-drawer-tagline { font-size: 10px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
#uni-header .uni-drawer-close {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 9px;
  background: var(--bg-input); border: 1px solid var(--border); color: var(--text-muted);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: border-color 0.2s, color 0.2s, transform 0.15s;
}
#uni-header .uni-drawer-close:active { transform: scale(0.94); }
#uni-header .uni-drawer-close svg { width: 18px; height: 18px; }

#uni-header .uni-drawer-divider { height: 1px; background: var(--border); margin: 12px 6px; }

#uni-header .uni-drawer-nav { display: flex; flex-direction: column; gap: 2px; }
#uni-header .uni-drawer-item {
  position: relative; display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  align-items: center; column-gap: 10px;
  width: 100%; box-sizing: border-box;
  padding: 11px 8px; border-radius: 10px;
  color: var(--text-muted); text-decoration: none;
  font-size: 13.5px; font-weight: 600; letter-spacing: 0.1px;
  transition: background 0.18s, color 0.18s;
  white-space: nowrap; text-align: left;
}
#uni-header .uni-drawer-item:hover { background: var(--bg-input); }
#uni-header .uni-drawer-ico { width: 24px; height: 24px; display: flex; align-items: center; justify-content: flex-start; color: var(--blue); }
#uni-header .uni-drawer-ico svg { width: 21px; height: 21px; }
#uni-header .uni-drawer-label { min-width: 0; overflow: hidden; }
#uni-header .uni-drawer-badge {
  flex: 0 0 auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px;
  background: var(--danger); color: #fff;
  font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center;
}

/* Active item — pill highlight consistent with the app's blue accent. */
#uni-header .uni-drawer-item.is-active {
  background: rgba(0,157,255,0.12);
  color: var(--blue); font-weight: 700;
}
#uni-header .uni-drawer-item.is-active .uni-drawer-ico { color: var(--blue); }

/* View Plans — prominent premium CTA, not a normal row. */
#uni-header .uni-drawer-cta {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  align-items: center; column-gap: 10px;
  width: 100%; box-sizing: border-box;
  margin: 10px 0 4px; padding: 12px 8px; border-radius: 10px;
  background: linear-gradient(135deg, #0A6BFF, #009DFF);
  color: #fff; text-decoration: none;
  font-size: 14px; font-weight: 700; letter-spacing: 0.2px;
  box-shadow: 0 8px 20px rgba(10,107,255,0.35);
}
#uni-header .uni-drawer-cta:active { transform: scale(0.99); }
#uni-header .uni-drawer-cta-ico { width: 24px; height: 24px; display: flex; align-items: center; justify-content: flex-start; }
#uni-header .uni-drawer-cta-ico svg { width: 22px; height: 22px; }
#uni-header .uni-drawer-cta-label { min-width: 0; }
#uni-header .uni-drawer-cta-arrow { opacity: 0.9; display: flex; align-items: center; }
#uni-header .uni-drawer-cta-arrow svg { width: 18px; height: 18px; }

#uni-header .uni-drawer-support { margin-top: 6px; }

/* Prevent background scroll while the drawer is open. */
body.uni-drawer-open { overflow: hidden; }

/* ══════════════════════════════════════════════════════════════════════════
   RESPONSIVE  (index.html @media max-width:1024px lines 849–850, and
   @media max-width:767px lines 2070–2074 / 2164–2165)
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  #uni-header nav { padding: 16px 24px; }
  #uni-header .nav-links { display: none; }
}
@media (max-width: 767px) {
  #uni-header nav { display: none; }
  #uni-header .mobile-header { display: flex; }
  #uni-footer .mobile-bottom-nav { display: flex; }
  /* Drawer is mobile-only: enabled here, never on desktop. */
  #uni-header .uni-drawer { display: flex; }
  #uni-header .uni-drawer-overlay { display: block; }
}

/* ══════════════════════════════════════════════════════════════════════════
   LIGHT THEME OVERRIDES  (index.html lines 894–903, 1048–1052, 2123–2137)
   ══════════════════════════════════════════════════════════════════════════ */
[data-theme="light"] #uni-header nav {
  background: #FFFFFF; border-bottom: 1px solid #DFE2E8;
  box-shadow: 0 1px 3px rgba(16,20,28,0.05), 0 4px 12px rgba(16,20,28,0.04);
}
[data-theme="light"] #uni-header .logo-crypto { color: #0F172A; }
[data-theme="light"] #uni-header .logo-ai { color: #09944F; }
[data-theme="light"] #uni-header .logo-signal { color: #0B72E7; }
[data-theme="light"] #uni-header .nav-links a { color: #1E293B; }
[data-theme="light"] #uni-header .nav-links a:hover { color: #0B72E7; }
[data-theme="light"] #uni-header .theme-toggle { background: #F4F6F9; border: 1px solid #E7F1FD; color: #0B72E7; }
[data-theme="light"] #uni-header .btn-outline { color: #0B72E7; border-color: #E7F1FD; background: transparent; }
[data-theme="light"] #uni-header .btn-outline:hover { background: #F4F6F9; }

[data-theme="light"] #uni-header .mobile-header { box-shadow: 0 1px 3px rgba(16,20,28,0.05), 0 4px 12px rgba(16,20,28,0.04); }
[data-theme="light"] #uni-header .mh-logo .logo-crypto { color: #111827; }
[data-theme="light"] #uni-header .mh-tagline { color: #4B5563; }
[data-theme="light"] #uni-header .mh-icon-btn { background: #F3F4F6; border-color: #D1D5DB; color: #111827; }
[data-theme="light"] #uni-header .mh-menu-btn { background: none; border-color: transparent; color: #17C3A2; box-shadow: none; }
[data-theme="light"] #uni-header .mh-bell-badge { background: #EF4444; }

/* Drawer — light theme */
[data-theme="light"] #uni-header .uni-drawer { background: #FFFFFF; border-right-color: #E5E7EB; box-shadow: 12px 0 40px rgba(16,20,28,0.12); }
[data-theme="light"] #uni-header .uni-drawer-logo .logo-crypto { color: #111827; }
[data-theme="light"] #uni-header .uni-drawer-tagline { color: #4B5563; }
[data-theme="light"] #uni-header .uni-drawer-close { background: #F3F4F6; border-color: #D1D5DB; color: #111827; }
[data-theme="light"] #uni-header .uni-drawer-item { color: #1E293B; }
[data-theme="light"] #uni-header .uni-drawer-item:hover { background: #F4F6F9; }
[data-theme="light"] #uni-header .uni-drawer-item.is-active { background: rgba(11,114,231,0.10); color: #0B72E7; }
[data-theme="light"] #uni-header .uni-drawer-item.is-active .uni-drawer-ico { color: #0B72E7; }
[data-theme="light"] #uni-header .uni-drawer-divider { background: #E5E7EB; }
[data-theme="light"] #uni-header .theme-toggle,
[data-theme="light"] #uni-header .nav-profile-btn { background: #F3F4F6; border-color: #D1D5DB; color: #111827; }

[data-theme="light"] #uni-footer footer { background: #FFFFFF; border-top: 1px solid #DFE2E8; }
[data-theme="light"] #uni-footer .logo-crypto { color: #0F172A; }
[data-theme="light"] #uni-footer .logo-ai { color: #09944F; }
[data-theme="light"] #uni-footer .logo-signal { color: #0B72E7; }
[data-theme="light"] #uni-footer .footer-col h4 { color: #374151; }
[data-theme="light"] #uni-footer .footer-col a { color: #4B5563; }
[data-theme="light"] #uni-footer .footer-col a:hover { color: #0B72E7; }
[data-theme="light"] #uni-footer .footer-bottom { color: #4B5563; border-top: 1px solid #E2E8F0; }
[data-theme="light"] #uni-footer .mobile-bottom-nav {
  background: #FFFFFF; border-top-color: #E5E7EB;
  box-shadow: 0 -3px 10px rgba(0,0,0,0.05);
}
[data-theme="light"] #uni-footer .mbn-item { color: #4B5563; font-weight: 500; }
[data-theme="light"] #uni-footer .mbn-item.active { color: #6D28FF; font-weight: 700; }
[data-theme="light"] #uni-footer .mbn-item.active svg { filter: none; }

/* ══════════════════════════════════════════════════════════════════════════
   HOST-PAGE OFFSETS (content pages only — never the homepage)
   universal-shell.js adds `has-uni-shell` to <body> ONLY on pages that are not
   the homepage (detected by the absence of #home). The homepage keeps its own
   #home top padding and its own inline mobile padding-bottom, so it is not
   affected by anything here.

   The fixed header would otherwise sit on top of the page's first content, so
   we reserve its height at the top. --nav-h is written by universal-shell.js
   from the real visible header height (article-toc.js already reads --nav-h
   for its scroll offset, so its TOC positioning stays correct without any
   change to that file).
   ══════════════════════════════════════════════════════════════════════════ */
body.has-uni-shell { padding-top: var(--nav-h, 66px); }

@media (max-width: 767px) {
  /* Reserve space for the fixed bottom nav; collapse it while the nav is
     auto-hidden on scroll. Mirrors index.html's own mobile body padding. */
  body.has-uni-shell {
    padding-bottom: 62px;
    transition: padding-bottom 0.25s cubic-bezier(0.4,0,0.2,1);
  }
  body.has-uni-shell.mbn-nav-hidden { padding-bottom: 0; }
}