/* CL_PUBLIC_TOPBAR_POLISH_V2
   Shared topbar polish for public-shell pages.
   Replaces CL_PUBLIC_TOPBAR_POLISH_V1.
   Pages: /, /app/, /live-signals/, /radar/.
*/

:root{
  --cl-topbar-shell:1180px;
  --cl-topbar-bg:rgba(255,255,255,.98);
  --cl-topbar-border:rgba(219,226,238,.98);
  --cl-topbar-text:#0f172a;
  --cl-topbar-muted:#64748b;
  --cl-topbar-primary:#4f86f7;
  --cl-topbar-primary-2:#3477f6;
  --cl-topbar-primary-border:#3b73e8;
  --cl-topbar-active-bg:#eef5ff;
  --cl-topbar-active-text:#1d4ed8;
  --cl-topbar-pill-bg:#ffffff;
  --cl-topbar-pill-hover:#f8fafc;
  --cl-topbar-shadow:0 18px 44px rgba(15,23,42,.11);
  --cl-topbar-glow:0 10px 26px rgba(79,134,247,.24);
}

html[data-theme="dark"]{
  --cl-topbar-bg:rgba(13,24,42,.96);
  --cl-topbar-border:rgba(51,65,85,.94);
  --cl-topbar-text:#e5e7eb;
  --cl-topbar-muted:#a8b4c7;
  --cl-topbar-primary:#5b8dff;
  --cl-topbar-primary-2:#3f7cff;
  --cl-topbar-primary-border:#5b8dff;
  --cl-topbar-active-bg:rgba(91,141,255,.16);
  --cl-topbar-active-text:#dbeafe;
  --cl-topbar-pill-bg:rgba(15,27,45,.72);
  --cl-topbar-pill-hover:rgba(30,44,70,.78);
  --cl-topbar-shadow:0 18px 44px rgba(0,0,0,.34);
  --cl-topbar-glow:0 10px 28px rgba(91,141,255,.24);
}

.cl-public-header-wrap,
.cl-public-header-wrap--landing,
.cl-rq-shared-header-host{
  width:min(var(--cl-topbar-shell), calc(100% - 48px)) !important;
  max-width:min(var(--cl-topbar-shell), calc(100% - 48px)) !important;
  margin:16px auto 22px !important;
  padding:0 !important;
}

.cl-public-header,
.cl-public-header--landing{
  min-height:70px !important;
  padding:14px 18px !important;
  border-radius:22px !important;
  background:var(--cl-topbar-bg) !important;
  border:1px solid var(--cl-topbar-border) !important;
  box-shadow:var(--cl-topbar-shadow) !important;
  backdrop-filter:blur(16px) saturate(1.12) !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:22px !important;
}

.cl-public-brand{
  display:flex !important;
  align-items:center !important;
  gap:14px !important;
  min-width:0 !important;
  color:var(--cl-topbar-text) !important;
  text-decoration:none !important;
}

.cl-public-logo{
  height:46px !important;
  width:auto !important;
  display:block !important;
  flex:0 0 auto !important;
}

.cl-public-brand-copy{
  min-width:0 !important;
  display:flex !important;
  flex-direction:column !important;
  line-height:1.15 !important;
}

#cl-public-brand-sub{
  color:var(--cl-topbar-muted) !important;
  font-size:13px !important;
  font-weight:650 !important;
  line-height:1.25 !important;
  letter-spacing:-.01em !important;
  white-space:normal !important;
  max-width:380px !important;
}

.cl-public-nav{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap:10px !important;
  flex-wrap:nowrap !important;
  min-width:0 !important;
}

.cl-public-nav a,
.cl-public-nav button,
.cl-public-nav .btn{
  min-height:40px !important;
  height:40px !important;
  padding:0 15px !important;
  border-radius:999px !important;
  border:1px solid var(--cl-topbar-border) !important;
  background:var(--cl-topbar-pill-bg) !important;
  color:var(--cl-topbar-text) !important;
  font-size:13px !important;
  font-weight:800 !important;
  letter-spacing:-.01em !important;
  line-height:1 !important;
  text-decoration:none !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  white-space:nowrap !important;
  box-shadow:none !important;
  transform:none !important;
}

.cl-public-nav a:hover,
.cl-public-nav button:hover,
.cl-public-nav .btn:hover{
  background:var(--cl-topbar-pill-hover) !important;
  border-color:var(--cl-topbar-primary-border) !important;
  color:var(--cl-topbar-primary) !important;
  transform:none !important;
}

.cl-public-nav a.is-active,
.cl-public-nav button.is-active,
.cl-public-nav .btn.is-active{
  background:var(--cl-topbar-active-bg) !important;
  border-color:rgba(79,134,247,.38) !important;
  color:var(--cl-topbar-active-text) !important;
  box-shadow:0 8px 20px rgba(79,134,247,.12) !important;
}

.cl-public-nav a.primary,
.cl-public-nav .btn.primary,
.cl-public-nav button.primary{
  background:linear-gradient(180deg,var(--cl-topbar-primary),var(--cl-topbar-primary-2)) !important;
  border-color:var(--cl-topbar-primary-border) !important;
  color:#fff !important;
  box-shadow:var(--cl-topbar-glow) !important;
}

.cl-public-nav a.primary:hover,
.cl-public-nav .btn.primary:hover,
.cl-public-nav button.primary:hover{
  color:#fff !important;
  filter:saturate(1.05) brightness(1.02) !important;
}

#cl-public-lang-fr,
#cl-public-lang-en,
#cl-public-theme-toggle{
  min-width:40px !important;
  width:40px !important;
  padding:0 !important;
  font-weight:850 !important;
}

#cl-public-theme-toggle{
  font-size:15px !important;
}

@media (max-width: 980px){
  .cl-public-header,
  .cl-public-header--landing{
    align-items:flex-start !important;
    flex-direction:column !important;
    gap:14px !important;
  }

  .cl-public-nav{
    width:100% !important;
    justify-content:flex-start !important;
    flex-wrap:wrap !important;
  }

  #cl-public-brand-sub{
    max-width:none !important;
  }
}

@media (max-width: 560px){
  .cl-public-header-wrap,
  .cl-public-header-wrap--landing,
  .cl-rq-shared-header-host{
    width:calc(100% - 20px) !important;
    margin:10px auto 14px !important;
  }

  .cl-public-header,
  .cl-public-header--landing{
    border-radius:18px !important;
    padding:12px !important;
  }

  .cl-public-logo{
    height:38px !important;
  }

  .cl-public-nav{
    gap:8px !important;
  }

  .cl-public-nav a,
  .cl-public-nav button,
  .cl-public-nav .btn{
    font-size:12px !important;
    min-height:34px !important;
    height:34px !important;
    padding:0 10px !important;
  }

  #cl-public-lang-fr,
  #cl-public-lang-en,
  #cl-public-theme-toggle{
    min-width:34px !important;
    width:34px !important;
  }
}