/* EffectHub shared header. Every rule uses !important so a tool page's own CSS cannot override it.
   Colors follow <html data-theme="daylight|grape|ocean|sunset"> on each page (default: daylight). */
.fh-header,.global-header-ad{--fh-bg:#f6f3ff !important;--fh-surface:#ffffff !important;--fh-line:#d9cffa !important;--fh-text:#1b0b3a !important;--fh-muted:#5f5780 !important;--fh-accent:#6c3cff !important;--fh-accent2:#ff2e88 !important;--fh-on:#ffffff !important;--fh-shadow:rgba(27,11,58,.3) !important}
html[data-theme="grape"] .fh-header,html[data-theme="grape"] .global-header-ad{--fh-bg:#120726 !important;--fh-surface:#1b0b3a !important;--fh-line:#3a2468 !important;--fh-text:#ffffff !important;--fh-muted:#b3a9c9 !important;--fh-accent:#ff2e88 !important;--fh-accent2:#7c4dff !important;--fh-on:#ffffff !important;--fh-shadow:rgba(0,0,0,.6) !important}
html[data-theme="ocean"] .fh-header,html[data-theme="ocean"] .global-header-ad{--fh-bg:#06141f !important;--fh-surface:#0c2233 !important;--fh-line:#1d4a66 !important;--fh-text:#eafaf8 !important;--fh-muted:#8fb5bf !important;--fh-accent:#2de2c4 !important;--fh-accent2:#3b82f6 !important;--fh-on:#04251f !important;--fh-shadow:rgba(0,0,0,.6) !important}
html[data-theme="sunset"] .fh-header,html[data-theme="sunset"] .global-header-ad{--fh-bg:#1a0a0c !important;--fh-surface:#2a1313 !important;--fh-line:#5c2d25 !important;--fh-text:#fff4ec !important;--fh-muted:#cfa99a !important;--fh-accent:#ff8a3d !important;--fh-accent2:#ff3d6e !important;--fh-on:#2a1000 !important;--fh-shadow:rgba(0,0,0,.6) !important}
.fh-header,.fh-header *{box-sizing:border-box !important;margin:0 !important;line-height:1.5 !important;letter-spacing:normal !important;text-transform:none !important;text-shadow:none !important}
.fh-header{position:sticky !important;top:0 !important;z-index:9999 !important;display:block !important;width:100% !important;padding:12px 12px 4px !important;background:transparent !important;border:0 !important;pointer-events:none !important;font-family:"DM Sans","Avenir Next",Arial,sans-serif !important;font-size:16px !important}
.fh-bar{max-width:820px !important;margin:0 auto !important;padding:.5rem .6rem .5rem 1.1rem !important;display:flex !important;align-items:center !important;justify-content:space-between !important;gap:1rem !important;pointer-events:auto !important;background:color-mix(in srgb,var(--fh-surface) 70%,transparent) !important;-webkit-backdrop-filter:blur(14px) saturate(160%) !important;backdrop-filter:blur(14px) saturate(160%) !important;border:1.5px solid color-mix(in srgb,var(--fh-line) 80%,transparent) !important;border-radius:999px !important;box-shadow:0 14px 34px -16px var(--fh-shadow) !important}
.fh-logo{display:flex !important;align-items:center !important;gap:.6rem !important;color:var(--fh-text) !important;text-decoration:none !important;font-family:"Bricolage Grotesque","Arial Black",sans-serif !important;font-weight:800 !important;font-size:1.25rem !important}
.fh-logo i{width:34px !important;height:34px !important;border-radius:10px !important;display:grid !important;place-items:center !important;font-style:normal !important;background:linear-gradient(135deg,var(--fh-accent),var(--fh-accent2)) !important;color:var(--fh-on) !important;transition:transform .35s cubic-bezier(.3,1.6,.5,1) !important}
.fh-logo:hover i{transform:rotate(-12deg) scale(1.1) !important}
.fh-nav{display:flex !important;align-items:center !important;gap:.4rem !important}
.fh-nav>a,.fh-drop>button{color:var(--fh-muted) !important;background:none !important;border:0 !important;font:inherit !important;font-weight:500 !important;padding:.5rem .9rem !important;border-radius:999px !important;cursor:pointer !important;text-decoration:none !important;transition:color .2s,background-color .2s !important}
.fh-nav>a:hover,.fh-drop>button:hover,.fh-drop:focus-within>button{color:var(--fh-text) !important;background:var(--fh-surface) !important}
.fh-drop{position:relative !important}
.fh-menu{position:absolute !important;right:0 !important;top:calc(100% + 8px) !important;width:320px !important;padding:.6rem !important;border-radius:18px !important;background:var(--fh-surface) !important;border:1.5px solid var(--fh-line) !important;box-shadow:0 24px 50px -20px var(--fh-shadow) !important;opacity:0 !important;visibility:hidden !important;transform:translateY(8px) scale(.98) !important;transform-origin:top right !important;transition:opacity .2s,transform .2s,visibility .2s !important}
.fh-drop:hover .fh-menu,.fh-drop:focus-within .fh-menu{opacity:1 !important;visibility:visible !important;transform:none !important}
.fh-item{display:flex !important;gap:.8rem !important;align-items:center !important;padding:.7rem !important;border-radius:12px !important;color:var(--fh-text) !important;text-decoration:none !important;transition:background-color .2s !important}
.fh-item:hover{background:color-mix(in srgb,var(--fh-accent) 16%,transparent) !important}
.fh-item i{width:40px !important;height:40px !important;border-radius:12px !important;flex:none !important;display:grid !important;place-items:center !important;font-style:normal !important;background:linear-gradient(135deg,var(--fh-accent),var(--fh-accent2)) !important;color:var(--fh-on) !important}
.fh-item b{display:block !important;font-size:.95rem !important;font-weight:700 !important;color:var(--fh-text) !important}
.fh-item small{display:block !important;color:var(--fh-muted) !important;font-size:.8rem !important}
.fh-i{display:inline-block !important;width:20px !important;height:20px !important;fill:none !important;stroke:currentColor !important;stroke-width:1.8 !important;stroke-linecap:round !important;stroke-linejoin:round !important}
@media(max-width:640px){.fh-nav>a{display:none !important}.fh-menu{width:min(320px,calc(100vw - 2rem)) !important}}

/* ---------- Ad slot under the header ---------- */
#shared-header{display:contents !important}
.global-header-ad,.global-header-ad *{box-sizing:border-box !important}
.global-header-ad{display:block !important;text-align:center !important;padding:10px 12px !important;background:transparent !important;border-bottom:1.5px solid var(--fh-line) !important;font-family:"DM Sans","Avenir Next",Arial,sans-serif !important}
.global-header-ad[hidden]{display:none !important}
.global-header-ad .ad-label{display:block !important;margin:0 0 4px !important;font-size:10px !important;letter-spacing:.1em !important;text-transform:uppercase !important;color:var(--fh-muted) !important}
.global-header-ad .ad-slot{max-width:728px !important;min-height:90px !important;margin:0 auto !important}
.global-header-ad .ad-slot.is-placeholder{display:flex !important;align-items:center !important;justify-content:center !important;border:1.5px dashed var(--fh-line) !important;border-radius:10px !important;color:var(--fh-muted) !important;font-size:13px !important}
@media(max-width:640px){.global-header-ad .ad-slot{min-height:50px !important}}

/* Guard: stop a tool page's own header/div rules from adding scroll bars or fixed heights */
.fh-header,.fh-bar,.fh-nav,.fh-drop,.fh-menu,.global-header-ad{overflow:visible !important;height:auto !important;max-height:none !important}
.fh-header{float:none !important;transform:none !important;filter:none !important}
.fh-header,.fh-header *{scrollbar-width:none !important}
.fh-header *::-webkit-scrollbar{display:none !important}