/* Shared top navigation bar — injected by /nav.js on every searchsmart.hk
   page so the logo and menu sit in exactly the same place site-wide. */
.zodi-nav { position: sticky; top: 0; z-index: 1100; background: #fff; box-shadow: 0 1px 6px rgba(0, 0, 0, .08); font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.zodi-nav-inner { max-width: 1200px; margin: 0 auto; display: flex; align-items: center; gap: 16px; padding: 8px 16px; }
.zodi-nav-brand { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 2px; text-decoration: none; flex-shrink: 0; }
.zodi-nav-brand img { height: 34px; width: auto; display: block; }
.zodi-nav-brand small { font-size: 8px; color: #9397ad; letter-spacing: .02em; }
.zodi-nav-links { display: flex; align-items: center; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.zodi-nav-links::-webkit-scrollbar { display: none; }
.zodi-nav-links a { text-decoration: none; color: #454b63; font-size: 13px; padding: 6px 10px; border-radius: 8px; white-space: nowrap; }
.zodi-nav-links a:hover { background: #f1effe; color: #766df4; text-decoration: none; }
/* The hub's theme has a global a:hover underline — never inside the nav. */
.zodi-nav a:hover { text-decoration: none; }
.zodi-nav-links a.active { color: #766df4; font-weight: 600; background: #f1effe; }
.zodi-nav-spacer { flex: 1; }
.zodi-nav-donate { text-decoration: none; background: #A880D9; color: #fff; font-size: 12px; padding: 6px 12px; border-radius: 20px; white-space: nowrap; flex-shrink: 0; }
.zodi-nav-donate:hover { background: #8f63c9; color: #fff; }
.zodi-nav-settings-wrap { position: relative; }
.zodi-nav-icon { border: 1px solid #dee2e6; background: #fff; border-radius: 8px; padding: 4px 8px; cursor: pointer; font-size: 14px; line-height: 1; }
.zodi-nav-icon:hover { border-color: #766df4; }
.zodi-settings-panel { position: absolute; top: calc(100% + 8px); right: 0; z-index: 1200; background: #fff; border: 1px solid #dee2e6; border-radius: 12px; box-shadow: 0 .5rem 1.5rem rgba(0,0,0,.14); padding: 10px 12px; min-width: 190px; }
.zodi-settings-panel.d-none { display: none; }
.zodi-set-title { font-size: 11px; font-weight: 700; color: #9397ad; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 8px; }
.zodi-set-row { display: flex; align-items: center; gap: 8px; padding: 5px 2px; font-size: 13px; color: #454b63; cursor: pointer; }
.zodi-set-row input { accent-color: #766df4; cursor: pointer; }
.zodi-nav-lang { border: 1px solid #dee2e6; background: #fff; border-radius: 8px; padding: 4px 8px; cursor: pointer; font-size: 14px; line-height: 1; }
.zodi-nav-lang:hover { border-color: #766df4; }
#zodi-nav-extra { font-size: 11px; color: #9397ad; white-space: nowrap; }
#zodi-nav-extra:empty { display: none; }
.zodi-nav.lang-en .zh { display: none; }
.zodi-nav.lang-zh .en { display: none; }
/* Desktop-only rows inside the menu */
.zodi-only-mobile { display: none !important; }

/* Hamburger is phone-only */
.zodi-nav-burger { display: none; border: 1px solid #dee2e6; background: #fff; border-radius: 8px;
  padding: 4px 10px; font-size: 17px; line-height: 1.2; cursor: pointer; color: #454b63; }
.zodi-nav-burger:hover { border-color: #766df4; }

@media (max-width: 820px) {
  .zodi-nav-inner { gap: 8px; padding: 8px 12px; flex-wrap: nowrap; }
  .zodi-nav-brand img { height: 30px; }
  #zodi-nav-extra { display: none; }
  .zodi-nav-burger { display: inline-block; }
  /* top bar keeps only: logo · ⚙ · 🌐 · ☰ — everything else moves into the menu */
  .zodi-nav-donate, .zodi-nav-install { display: none; }
  .zodi-only-mobile { display: block !important; }

  /* links become a full-width dropdown, one big row each — no side-scrolling */
  .zodi-nav-links { position: absolute; top: 100%; left: 0; right: 0; display: none;
    flex-direction: column; align-items: stretch; gap: 2px; overflow: visible;
    background: #fff; padding: 8px; border-top: 1px solid #eceef3;
    box-shadow: 0 .75rem 1.5rem rgba(0,0,0,.12); max-height: calc(100vh - 60px); overflow-y: auto; }
  .zodi-nav-links.open { display: flex; }
  .zodi-nav-links a { font-size: 15px; padding: 13px 14px; border-radius: 10px; white-space: normal; }
  .zodi-nav-links a.active { background: #f1effe; }
}
.zodi-nav-install { border: 1px solid #A880D9; background: #fff; color: #7d4fbf; border-radius: 20px; padding: 5px 12px; font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap; flex-shrink: 0; }
.zodi-nav-install:hover { background: #A880D9; color: #fff; }
@media (max-width: 640px) { .zodi-nav-install { padding: 4px 9px; font-size: 11px; } }