/* FNA Eco v6.0.20c — shared header + sign-in gate, measured against the official site
   (fna.pro SiteHeader inline styles + dashboard-module gate CSS, getComputedStyle at 1280/1024/390).
   Loaded last on index/dashboard/referrals/invite/rules/crypto-card. */

/* ---------- header ---------- */
html body #app .header{position:sticky!important;top:0!important;z-index:40!important;height:auto!important;min-height:0!important;
  background:rgba(248,250,252,.85)!important;-webkit-backdrop-filter:blur(10px)!important;backdrop-filter:blur(10px)!important;
  border-bottom:1px solid #dfe6e1!important;box-shadow:none!important;padding:0!important}
html body #app .header .header-inner{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:16px!important;
  box-sizing:border-box!important;width:auto!important;max-width:1080px!important;height:auto!important;min-height:0!important;margin:0 auto!important;
  padding:12px clamp(16px,4vw,32px)!important}
html body #app .header .brand{display:inline-flex!important;align-items:center!important;gap:10px!important;flex:0 0 auto!important;margin:0!important;padding:0!important;text-decoration:none!important}
html body #app .header .brand-image{display:block!important;height:42px!important;width:auto!important;max-width:none!important;margin:0!important}
html body #app .header .site-nav{flex:1!important;display:flex!important;align-items:center!important;gap:26px!important;min-width:0!important;margin:0 8px!important;padding:0!important;justify-content:flex-start!important}
html body #app .header .site-nav a{font-family:inherit;font-size:12.5px!important;font-weight:600!important;letter-spacing:.1em!important;line-height:normal!important;
  text-transform:uppercase!important;color:#454e49!important;text-decoration:none!important;padding:0!important;margin:0!important;border:0!important;background:none!important;transition:color .15s}
html body #app .header .site-nav a.active{color:#454e49!important}           /* official: no active highlight */
html body #app .header .site-nav a:hover{color:#0bab66!important}
html body #app .header .header-actions{display:flex!important;align-items:center!important;gap:10px!important;flex:0 0 auto!important;margin:0!important}
html body #app .header .lang-shell{position:relative!important;margin:0!important}
html body #app .header .lang-trigger{display:inline-flex!important;align-items:center!important;gap:7px!important;box-sizing:border-box!important;width:auto!important;min-width:0!important;height:40px!important;
  padding:0 10px!important;border-radius:10px!important;border:1px solid #dfe6e1!important;background:#fff!important;color:#000!important;box-shadow:none!important;cursor:pointer}
html body #app .header .lang-trigger .lang-name{display:none!important}
html body #app .header .lang-trigger .lang-flag{display:block!important;width:21px!important;height:16px!important;border-radius:3px!important;border:0!important;box-shadow:0 0 0 1px rgba(15,23,42,.08)!important;object-fit:cover!important;margin:0!important}
html body #app .header .lang-trigger .lang-chevron{display:block!important;width:14px!important;height:14px!important;color:#94a3b8!important;flex:none!important;margin:0!important}
html body #app .header .site-burger{display:none!important;box-sizing:border-box!important;width:38px!important;height:38px!important;padding:0!important;align-items:center!important;justify-content:center!important;
  border-radius:10px!important;border:1px solid #dfe6e1!important;background:#fff!important;color:#454e49!important;cursor:pointer;box-shadow:none!important;margin:0!important}
html body #app .header .site-burger svg{width:20px!important;height:20px!important}

/* Connect Wallet (official .wallet-cta) */
html body #app .header #connect.wallet-cta:not(.fnae-acct-btn){display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:8px!important;box-sizing:border-box!important;
  width:auto!important;min-width:0!important;height:40px!important;min-height:40px!important;padding:0 18px!important;border-radius:10px!important;border:none!important;
  background:#0bab66!important;color:#fff!important;font-family:inherit!important;font-size:14px!important;font-weight:600!important;line-height:normal!important;letter-spacing:normal!important;
  box-shadow:0 1px 2px rgba(16,185,129,.3)!important;white-space:nowrap!important;cursor:pointer;opacity:1}
html body #app .header #connect.wallet-cta:not(.fnae-acct-btn) .wallet-icon{display:block!important;width:17px!important;height:17px!important;flex:none!important;margin:0!important}
html body #app .header #connect.wallet-cta:not(.fnae-acct-btn) .wallet-cta-label{display:inline!important;font:inherit!important;line-height:normal!important;color:inherit!important}
/* Connected in the wallet but no site session: official "Sign in" CTA (ShieldCheck 16, gap 7, padding 0 16) */
html body #app .header #connect.wallet-cta.is-signin:not(.fnae-acct-btn){gap:7px!important;padding:0 16px!important}
html body #app .header #connect.wallet-cta.is-signin .shield-icon{display:block;width:16px;height:16px;flex:none}
html body #app .header #connect.wallet-cta.is-signin[disabled]{opacity:.7!important;cursor:default!important}

/* mobile nav dropdown (official: absolute card under the header) */
html body #app .header{position:sticky}
html body #app .header .mobile-menu{position:absolute!important;top:calc(100% + 6px)!important;right:24px!important;left:auto!important;z-index:50!important;min-width:190px!important;width:auto!important;
  background:#fff!important;border:1px solid #dfe6e1!important;border-radius:12px!important;box-shadow:0 12px 28px rgba(15,23,42,.12)!important;padding:6px!important;flex-direction:column!important;margin:0!important}
html body #app .header .mobile-menu:not([hidden]){display:flex!important}
html body #app .header .mobile-menu a{display:block!important;padding:9px 12px!important;border-radius:8px!important;color:#334155!important;text-decoration:none!important;font-weight:600!important;font-size:14px!important;
  text-transform:none!important;letter-spacing:normal!important;background:none!important;border:0!important;line-height:normal!important}

@media (max-width:720px){
  html body #app .header .site-nav{display:none!important}
  html body #app .header .site-burger{display:inline-flex!important}
  html body #app .header .brand-image{height:34px!important}
  html body #app .header #connect.wallet-cta:not(.fnae-acct-btn){padding:0 12px!important;max-width:none!important;width:auto!important;min-width:0!important}
  html body #app .header #connect.wallet-cta:not(.fnae-acct-btn) .wallet-cta-label{display:none!important}
  html body #app .header #connect.wallet-cta.is-signin:not(.fnae-acct-btn){padding:0 12px!important}
  html body #app .header .header-actions #connect.wallet-cta.fnae-acct-btn{width:auto!important;max-width:none!important;min-width:0!important;flex:0 0 auto!important}
}

/* ---------- sign-in gate (dashboard / referrals): official .gate card ---------- */
html body #app main.dashboard-page:has(.fnae-gate),html body #app main.referrals-page:has(.fnae-gate){background:#f8fbf9!important;min-height:calc(100vh - 64px)!important;padding:0!important;margin:0!important;display:block!important}
html body #app main .dashboard-module__wrap:has(> .fnae-gate),html body #app main .referrals-page-wrap:has(> .fnae-gate){box-sizing:border-box!important;max-width:1120px!important;width:auto!important;margin:0 auto!important;padding:48px 28px 90px!important;display:block!important;min-height:0!important}
html body #app .fnae-gate{display:grid!important;justify-items:center!important;align-content:start!important;gap:14px!important;box-sizing:border-box!important;width:auto!important;max-width:520px!important;min-height:0!important;
  margin:80px auto!important;padding:44px 34px!important;text-align:center!important;background:#fff!important;border:1px solid #c9d4cd!important;border-radius:16px!important;box-shadow:none!important}
html body #app .fnae-gate h1{justify-self:center!important;width:auto!important;margin:0!important;padding:0!important;height:auto!important;min-height:0!important;max-height:none!important;font-family:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Noto Sans JP","Noto Sans JP Fallback",serif!important;font-size:28px!important;font-weight:700!important;line-height:40px!important;letter-spacing:normal!important;color:#0e1210!important;max-width:none!important}
html body #app .fnae-gate p{margin:0!important;padding:0!important;height:auto!important;min-height:0!important;max-height:none!important;font-size:16px!important;font-weight:400!important;line-height:normal!important;color:#444e49!important;max-width:none!important}
html body #app .fnae-gate-cta{display:grid!important;gap:12px!important;justify-items:center!important;margin:0!important}
/* RainbowKit ConnectButton (theme radius 4, accent #10b981, SFRounded stack) */
html body #app .fnae-gate-cta #connect2,html body #app .fnae-gate-cta .rk-account-btn{font-family:SFRounded,ui-rounded,"SF Pro Rounded",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"!important;
  font-size:16px!important;font-weight:700!important;line-height:normal!important;letter-spacing:normal!important;border:0!important;border-radius:4px!important;box-shadow:0 4px 12px rgba(0,0,0,.1)!important;cursor:pointer;
  transition:transform .125ms ease;margin:0!important;width:auto!important;min-width:0!important;text-transform:none!important}
html body #app .fnae-gate-cta #connect2{display:inline-flex!important;align-items:center!important;justify-content:center!important;box-sizing:border-box!important;height:40px!important;min-height:0!important;padding:0 14px!important;background:#10b981!important;color:#fff!important}
html body #app .fnae-gate-cta #connect2:hover,html body #app .fnae-gate-cta .rk-account-btn:hover{transform:scale(1.025)}
html body #app .fnae-gate-cta #connect2:active,html body #app .fnae-gate-cta .rk-account-btn:active{transform:scale(.95)}
html body #app .fnae-gate-cta .rk-account-btn{display:flex!important;align-items:center!important;padding:0!important;background:#fff!important;color:#25292e!important}
html body #app .fnae-gate-cta .rk-account-inner{box-sizing:content-box;display:flex;align-items:center;gap:6px;height:24px;padding:6px 8px;border:2px solid #fff;border-radius:4px;background:#fff}
html body #app .fnae-gate-cta .rk-avatar{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;overflow:hidden;font-size:13px;line-height:1;flex:none}
html body #app .fnae-gate-cta .rk-dropdown{display:block;flex:none}
/* official in-gate "Sign in" (ShieldCheck 17, CTA gradient) */
html body #app .fnae-gate-cta .fnae-signin-btn{display:inline-flex!important;align-items:center!important;gap:8px!important;margin:0!important;padding:12px 26px!important;border:0!important;border-radius:10px!important;
  background:linear-gradient(90deg,#84f27d,#41ecbf)!important;color:#08140d!important;font-family:inherit!important;font-size:14.5px!important;font-weight:800!important;line-height:normal!important;cursor:pointer;opacity:1;box-shadow:none!important;text-transform:none!important;letter-spacing:normal!important}
html body #app .fnae-gate-cta .fnae-signin-btn.is-busy,html body #app .fnae-gate-cta .fnae-signin-btn[disabled]{cursor:wait;opacity:.6}
html body #app .fnae-gate-cta .fnae-signin-btn .shield-icon{display:block;flex:none}
/* invite page CTA in the "Sign in" state keeps the f16 button look, with the icon */
html body #app .f16-invite-card #connect2.is-signin{display:inline-flex;align-items:center;justify-content:center;gap:8px}
html body #app .f16-invite-card #connect2.is-signin[disabled]{opacity:.6;cursor:wait}

/* ---------- RainbowKit "Connect a Wallet" modal: stop site-wide `button` rules leaking in ----------
   Root cause: style.css `.connect,button{border-radius:10px;color:white;font-weight:750;…}` hits every
   RainbowKit <button>. RainbowKit's own `[data-rk] .class` rules (specificity 0,2,0) already win for
   border/padding/background and for any radius/colour it sets itself, but not for font-weight, for the
   button colour (desktop tiles, Get a Wallet), or for the radius of the 390 tiles (no RK radius class).
   font-family: Chrome's UA gives <button> Arial; fna.pro's preflight makes buttons inherit the page font.
   Official computed values (fixes-A wallet-modal-desktop.md, fixes-B wallet-modal-390-*.md):
   every modal button font-weight 400, colour black (UA buttontext) unless RK sets one, radius 0 unless
   RK sets one (tiles 4px desktop, close 9999px, Get a Wallet 4px), font-family = page Inter stack.
   Scope: only the connect dialog. Specificity is kept at (0,1,0) on purpose: it beats `button` (0,0,1)
   from style.css whatever the load order, and loses to every RainbowKit `[data-rk] .x` rule (0,2,0),
   so the RK radii (4px / 9999px), colours and hover/active states are untouched. */
:where([data-rk][role="dialog"])[aria-labelledby="rk_connect_title"]{
  font-family:Inter,"Inter Fallback","Noto Sans JP","Noto Sans JP Fallback",system-ui,-apple-system,"Segoe UI",sans-serif}
:where([data-rk][role="dialog"])[aria-labelledby="rk_connect_title"] :where(button){
  font-family:inherit;font-weight:400;color:buttontext;border-radius:0}