/* /assets/css/csprofile-header.css */
.topbar{overflow:visible;z-index:5000}
.cs-mega-nav{gap:18px;flex-wrap:nowrap}
.cs-mega-nav .nav-dropdown{position:relative;flex:0 0 auto}
.cs-mega-nav .nav-dropbtn{display:flex;align-items:center;gap:5px;height:72px;padding:0;border:0;border-bottom:2px solid transparent;background:transparent;color:#d8def1;cursor:pointer;font:inherit;font-size:14px;white-space:nowrap}
.cs-mega-nav .nav-dropbtn span{color:#facc15;font-size:12px;line-height:1}
.cs-mega-nav .nav-dropdown.active .nav-dropbtn,.cs-mega-nav .nav-dropdown.is-active .nav-dropbtn{color:#c084fc;border-bottom-color:#8b5cf6}
.cs-mega-nav .nav-mega{position:absolute;top:72px;left:0;width:250px;max-height:calc(100vh - 86px);overflow-y:auto;overflow-x:hidden;display:none;padding:8px 0;border:1px solid rgba(255,255,255,.08);border-radius:6px;background:#252b31;box-shadow:0 20px 70px rgba(0,0,0,.45);z-index:5100}
.cs-mega-nav .nav-mega-wide{width:310px}
.cs-mega-nav .nav-dropdown:hover .nav-mega,.cs-mega-nav .nav-dropdown:focus-within .nav-mega{display:block}
.cs-mega-nav .nav-search{padding:6px 14px 12px;border-bottom:1px solid rgba(255,255,255,.08);margin-bottom:6px}
.cs-mega-nav .nav-search input{width:100%;height:36px;border:1px solid rgba(255,255,255,.14);border-radius:3px;background:#22282e;color:#e5edf9;outline:none;padding:0 10px;font:inherit;font-size:13px}
.cs-mega-nav .nav-search input::placeholder{color:#8f98a3}
.cs-mega-nav .nav-section-title{padding:10px 18px 7px;color:#9aa3ad;font-size:12px;font-weight:800;letter-spacing:.01em}
.cs-mega-nav .nav-item{display:flex;align-items:center;min-height:34px;padding:7px 18px;color:#cfd5df;font-size:14px;line-height:1.25;border-bottom:0;opacity:1;white-space:normal}
.cs-mega-nav .nav-item:hover,.cs-mega-nav .nav-item.active{background:rgba(255,255,255,.06);color:#fff}
.cs-mega-nav .nav-item.is-hidden{display:none}
.cs-mega-nav .nav-mega::-webkit-scrollbar{width:8px}
.cs-mega-nav .nav-mega::-webkit-scrollbar-track{background:rgba(0,0,0,.18)}
.cs-mega-nav .nav-mega::-webkit-scrollbar-thumb{background:rgba(139,92,246,.8);border-radius:99px}
@media(max-width:1280px){.brand{min-width:auto}.brand-text span{display:none}.cs-mega-nav{gap:12px}.cs-mega-nav .nav-dropbtn{font-size:13px}}
@media(max-width:980px){.topbar{height:auto;min-height:72px;align-items:flex-start;flex-wrap:wrap;gap:10px;padding:12px 14px}.cs-mega-nav{order:3;width:100%;overflow-x:auto;padding-bottom:4px}.cs-mega-nav .nav-dropbtn{height:40px}.cs-mega-nav .nav-mega{top:42px}.top-actions{margin-left:auto}}
@media(max-width:900px){.csprofile-header .nav,.topbar .cs-mega-nav{display:flex}}

/* =========================================================
   HEADER HARDENING FOR DB/ITEM PAGES
   Ensures mega-nav stays hidden until hover even when old
   csitems-category/item CSS also styles .nav/.topbar/.nav a.
   ========================================================= */

.topbar.csprofile-header,
.csprofile-header.topbar{
  overflow:visible !important;
  z-index:5000 !important;
}

.csprofile-header .cs-mega-nav{
  display:flex !important;
  align-items:center !important;
  gap:18px !important;
  flex-wrap:nowrap !important;
}

.csprofile-header .cs-mega-nav a{
  padding:0 !important;
  border-bottom:0 !important;
  opacity:1 !important;
}

.csprofile-header .cs-mega-nav .nav-dropdown{
  position:relative !important;
  flex:0 0 auto !important;
}

.csprofile-header .cs-mega-nav .nav-dropbtn{
  display:flex !important;
  align-items:center !important;
  gap:5px !important;
  height:72px !important;
  padding:0 !important;
  border:0 !important;
  border-bottom:2px solid transparent !important;
  background:transparent !important;
  color:#d8def1 !important;
  cursor:pointer !important;
  font:inherit !important;
  font-size:14px !important;
  white-space:nowrap !important;
}

.csprofile-header .cs-mega-nav .nav-mega{
  position:absolute !important;
  top:72px !important;
  left:0 !important;
  width:250px !important;
  max-height:calc(100vh - 86px) !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  display:none !important;
  padding:8px 0 !important;
  border:1px solid rgba(255,255,255,.08) !important;
  border-radius:6px !important;
  background:#252b31 !important;
  box-shadow:0 20px 70px rgba(0,0,0,.45) !important;
  z-index:5100 !important;
}

.csprofile-header .cs-mega-nav .nav-mega-wide{
  width:310px !important;
}

.csprofile-header .cs-mega-nav .nav-dropdown:hover .nav-mega,
.csprofile-header .cs-mega-nav .nav-dropdown:focus-within .nav-mega{
  display:block !important;
}

.csprofile-header .cs-mega-nav .nav-search{
  padding:6px 14px 12px !important;
  border-bottom:1px solid rgba(255,255,255,.08) !important;
  margin-bottom:6px !important;
}

.csprofile-header .cs-mega-nav .nav-search input{
  width:100% !important;
  height:36px !important;
  border:1px solid rgba(255,255,255,.14) !important;
  border-radius:3px !important;
  background:#22282e !important;
  color:#e5edf9 !important;
  outline:none !important;
  padding:0 10px !important;
  font:inherit !important;
  font-size:13px !important;
}

.csprofile-header .cs-mega-nav .nav-section-title{
  display:block !important;
  padding:10px 18px 7px !important;
  color:#9aa3ad !important;
  font-size:12px !important;
  font-weight:800 !important;
}

.csprofile-header .cs-mega-nav .nav-item{
  display:flex !important;
  align-items:center !important;
  min-height:34px !important;
  padding:7px 18px !important;
  color:#cfd5df !important;
  font-size:14px !important;
  line-height:1.25 !important;
  white-space:normal !important;
}

.csprofile-header .cs-mega-nav .nav-item:hover{
  background:rgba(255,255,255,.06) !important;
  color:#fff !important;
}

.csprofile-header .cs-mega-nav .nav-item.is-hidden{
  display:none !important;
}

/* =========================================================
   HEADER ALIGNMENT V3
   Makes database pages and tool pages use the exact same
   header spacing/height/brand/nav behaviour.
   ========================================================= */

.topbar.csprofile-header,
.csprofile-header.topbar{
  height:72px !important;
  min-height:72px !important;
  padding:0 22px !important;
  display:flex !important;
  align-items:center !important;
  gap:0 !important;
}

.csprofile-header .brand{
  min-width:250px !important;
  width:250px !important;
  flex:0 0 250px !important;
  display:flex !important;
  align-items:center !important;
  gap:12px !important;
}

.csprofile-header .brand-mark{
  width:34px !important;
  height:34px !important;
  min-width:34px !important;
}

.csprofile-header .brand-text strong{
  font-size:18px !important;
  line-height:1 !important;
  letter-spacing:.08em !important;
}

.csprofile-header .brand-text span{
  display:block !important;
  font-size:10px !important;
  line-height:1 !important;
  letter-spacing:.16em !important;
  margin-top:4px !important;
}

.csprofile-header .cs-mega-nav{
  margin:0 !important;
  height:72px !important;
  display:flex !important;
  align-items:center !important;
  gap:18px !important;
}

.csprofile-header .cs-mega-nav .nav-dropbtn{
  height:72px !important;
  line-height:72px !important;
}

.csprofile-header .top-actions{
  margin-left:auto !important;
}

/* Keep the compact behaviour only on genuinely narrower screens */
@media(max-width:1280px){
  .csprofile-header .brand{
    min-width:200px !important;
    width:200px !important;
    flex-basis:200px !important;
  }

  .csprofile-header .brand-text span{
    display:none !important;
  }

  .csprofile-header .cs-mega-nav{
    gap:12px !important;
  }
}

@media(max-width:980px){
  .topbar.csprofile-header,
  .csprofile-header.topbar{
    height:auto !important;
    min-height:72px !important;
    align-items:flex-start !important;
    flex-wrap:wrap !important;
    gap:10px !important;
    padding:12px 14px !important;
  }

  .csprofile-header .brand{
    width:auto !important;
    min-width:0 !important;
    flex:0 0 auto !important;
  }

  .csprofile-header .cs-mega-nav{
    order:3 !important;
    width:100% !important;
    height:auto !important;
    overflow-x:auto !important;
    padding-bottom:4px !important;
  }

  .csprofile-header .cs-mega-nav .nav-dropbtn{
    height:40px !important;
    line-height:40px !important;
  }
}

/* =========================================================
   UNIVERSAL SHARED HEADER FIX
   Some tool pages still hardcode <header class="topbar"> while
   DB pages use <header class="topbar csprofile-header">.
   This makes any topbar containing .cs-mega-nav render identically.
   ========================================================= */

.topbar:has(.cs-mega-nav),
.topbar.csprofile-header{
  height:72px !important;
  min-height:72px !important;
  padding:0 22px !important;
  display:flex !important;
  align-items:center !important;
  gap:0 !important;
  border-bottom:1px solid var(--line, rgba(255,255,255,.08)) !important;
  background:rgba(6,11,20,.86) !important;
  backdrop-filter:blur(16px) !important;
  position:sticky !important;
  top:0 !important;
  z-index:5000 !important;
  overflow:visible !important;
}

.topbar:has(.cs-mega-nav) .brand,
.topbar.csprofile-header .brand{
  display:flex !important;
  align-items:center !important;
  gap:12px !important;
  min-width:250px !important;
  width:250px !important;
  flex:0 0 250px !important;
  color:inherit !important;
  text-decoration:none !important;
}

.topbar:has(.cs-mega-nav) .brand-mark,
.topbar.csprofile-header .brand-mark{
  width:34px !important;
  height:34px !important;
  min-width:34px !important;
  border-radius:10px !important;
  background:linear-gradient(135deg,#facc15,#8b5cf6) !important;
  display:grid !important;
  place-items:center !important;
  font-weight:900 !important;
  color:#080b12 !important;
  font-size:13px !important;
  line-height:1 !important;
}

.topbar:has(.cs-mega-nav) .brand-text,
.topbar.csprofile-header .brand-text{
  line-height:1 !important;
}

.topbar:has(.cs-mega-nav) .brand-text strong,
.topbar.csprofile-header .brand-text strong{
  display:block !important;
  font-size:18px !important;
  line-height:1 !important;
  letter-spacing:.08em !important;
  color:#f4f7ff !important;
}

.topbar:has(.cs-mega-nav) .brand-text span,
.topbar.csprofile-header .brand-text span{
  display:block !important;
  font-size:10px !important;
  line-height:1 !important;
  letter-spacing:.16em !important;
  color:var(--muted2,#b8c0d9) !important;
  margin-top:4px !important;
}

.topbar:has(.cs-mega-nav) .cs-mega-nav,
.topbar.csprofile-header .cs-mega-nav{
  display:flex !important;
  align-items:center !important;
  gap:18px !important;
  flex-wrap:nowrap !important;
  height:72px !important;
  margin:0 !important;
  font-size:14px !important;
  color:#d8def1 !important;
}

.topbar:has(.cs-mega-nav) .cs-mega-nav .nav-dropdown,
.topbar.csprofile-header .cs-mega-nav .nav-dropdown{
  position:relative !important;
  flex:0 0 auto !important;
}

.topbar:has(.cs-mega-nav) .cs-mega-nav .nav-dropbtn,
.topbar.csprofile-header .cs-mega-nav .nav-dropbtn{
  display:flex !important;
  align-items:center !important;
  gap:5px !important;
  height:72px !important;
  line-height:72px !important;
  padding:0 !important;
  border:0 !important;
  border-bottom:2px solid transparent !important;
  background:transparent !important;
  color:#d8def1 !important;
  cursor:pointer !important;
  font:inherit !important;
  font-size:14px !important;
  white-space:nowrap !important;
}

.topbar:has(.cs-mega-nav) .cs-mega-nav .nav-dropbtn span,
.topbar.csprofile-header .cs-mega-nav .nav-dropbtn span{
  color:#facc15 !important;
  font-size:12px !important;
  line-height:1 !important;
}

.topbar:has(.cs-mega-nav) .cs-mega-nav .nav-dropdown.active .nav-dropbtn,
.topbar:has(.cs-mega-nav) .cs-mega-nav .nav-dropdown.is-active .nav-dropbtn,
.topbar.csprofile-header .cs-mega-nav .nav-dropdown.active .nav-dropbtn,
.topbar.csprofile-header .cs-mega-nav .nav-dropdown.is-active .nav-dropbtn{
  color:#c084fc !important;
  border-bottom-color:#8b5cf6 !important;
}

.topbar:has(.cs-mega-nav) .top-actions,
.topbar.csprofile-header .top-actions{
  margin-left:auto !important;
  display:flex !important;
  align-items:center !important;
  gap:16px !important;
  color:#dbe3f7 !important;
  font-size:14px !important;
}

/* Dropdowns stay identical too */
.topbar:has(.cs-mega-nav) .nav-mega,
.topbar.csprofile-header .nav-mega{
  top:72px !important;
}

/* Desktop fallback for older pages where the page CSS says .nav a padding */
.topbar:has(.cs-mega-nav) .cs-mega-nav a,
.topbar.csprofile-header .cs-mega-nav a{
  padding:0 !important;
  border-bottom:0 !important;
  opacity:1 !important;
}

/* Medium */
@media(max-width:1280px){
  .topbar:has(.cs-mega-nav) .brand,
  .topbar.csprofile-header .brand{
    min-width:200px !important;
    width:200px !important;
    flex-basis:200px !important;
  }

  .topbar:has(.cs-mega-nav) .brand-text span,
  .topbar.csprofile-header .brand-text span{
    display:none !important;
  }

  .topbar:has(.cs-mega-nav) .cs-mega-nav,
  .topbar.csprofile-header .cs-mega-nav{
    gap:12px !important;
  }

  .topbar:has(.cs-mega-nav) .cs-mega-nav .nav-dropbtn,
  .topbar.csprofile-header .cs-mega-nav .nav-dropbtn{
    font-size:13px !important;
  }
}

/* Mobile */
@media(max-width:980px){
  .topbar:has(.cs-mega-nav),
  .topbar.csprofile-header{
    height:auto !important;
    min-height:72px !important;
    align-items:flex-start !important;
    flex-wrap:wrap !important;
    gap:10px !important;
    padding:12px 14px !important;
  }

  .topbar:has(.cs-mega-nav) .brand,
  .topbar.csprofile-header .brand{
    width:auto !important;
    min-width:0 !important;
    flex:0 0 auto !important;
  }

  .topbar:has(.cs-mega-nav) .cs-mega-nav,
  .topbar.csprofile-header .cs-mega-nav{
    order:3 !important;
    width:100% !important;
    height:auto !important;
    overflow-x:auto !important;
    padding-bottom:4px !important;
  }

  .topbar:has(.cs-mega-nav) .cs-mega-nav .nav-dropbtn,
  .topbar.csprofile-header .cs-mega-nav .nav-dropbtn{
    height:40px !important;
    line-height:40px !important;
  }

  .topbar:has(.cs-mega-nav) .nav-mega,
  .topbar.csprofile-header .nav-mega{
    top:42px !important;
  }
}



/* =========================================================
   FINAL SHARED HEADER LOCK
   Keeps tools + DB pages visually identical even when page CSS
   also defines .topbar, .brand, .nav, .nav a, etc.
   ========================================================= */
.topbar.csprofile-header{
  height:72px !important;
  min-height:72px !important;
  border-bottom:1px solid rgba(255,255,255,.08) !important;
  background:rgba(6,11,20,.86) !important;
  backdrop-filter:blur(16px) !important;
  display:flex !important;
  align-items:center !important;
  flex-wrap:nowrap !important;
  gap:0 !important;
  padding:0 22px !important;
  position:sticky !important;
  top:0 !important;
  overflow:visible !important;
  z-index:5000 !important;
}

.topbar.csprofile-header .brand{
  display:flex !important;
  align-items:center !important;
  gap:12px !important;
  min-width:250px !important;
  width:250px !important;
  flex:0 0 250px !important;
  padding:0 !important;
  border:0 !important;
  opacity:1 !important;
}

.topbar.csprofile-header .brand-mark{
  width:34px !important;
  height:34px !important;
  border-radius:10px !important;
  display:grid !important;
  place-items:center !important;
  flex:0 0 34px !important;
}

.topbar.csprofile-header .brand-text{
  line-height:1 !important;
}

.topbar.csprofile-header .brand-text strong{
  display:block !important;
  font-size:18px !important;
  letter-spacing:.08em !important;
  line-height:1.05 !important;
  margin:0 !important;
}

.topbar.csprofile-header .brand-text span{
  display:block !important;
  font-size:10px !important;
  letter-spacing:.16em !important;
  margin-top:3px !important;
  line-height:1.1 !important;
}

.topbar.csprofile-header .cs-mega-nav{
  display:flex !important;
  align-items:center !important;
  gap:18px !important;
  flex-wrap:nowrap !important;
  height:72px !important;
  margin:0 !important;
  padding:0 !important;
  font-size:14px !important;
}

.topbar.csprofile-header .cs-mega-nav .nav-dropdown{
  position:relative !important;
  flex:0 0 auto !important;
  height:72px !important;
}

.topbar.csprofile-header .cs-mega-nav .nav-dropbtn{
  height:72px !important;
  display:flex !important;
  align-items:center !important;
  gap:5px !important;
  padding:0 !important;
  margin:0 !important;
  border:0 !important;
  border-bottom:2px solid transparent !important;
  background:transparent !important;
  color:#d8def1 !important;
  font:inherit !important;
  font-size:14px !important;
  line-height:72px !important;
  white-space:nowrap !important;
}

.topbar.csprofile-header .cs-mega-nav a,
.topbar.csprofile-header .cs-mega-nav .nav-item{
  padding:7px 18px !important;
  border-bottom:0 !important;
  opacity:1 !important;
}

.topbar.csprofile-header .cs-mega-nav > .nav-dropdown > a{
  padding:0 !important;
}

.topbar.csprofile-header .top-actions{
  margin-left:auto !important;
  display:flex !important;
  align-items:center !important;
  gap:16px !important;
  font-size:14px !important;
}

@media(max-width:1280px){
  .topbar.csprofile-header .brand{
    min-width:200px !important;
    width:200px !important;
    flex-basis:200px !important;
  }
  .topbar.csprofile-header .brand-text span{
    display:none !important;
  }
  .topbar.csprofile-header .cs-mega-nav{
    gap:12px !important;
  }
  .topbar.csprofile-header .cs-mega-nav .nav-dropbtn{
    font-size:13px !important;
  }
}

@media(max-width:980px){
  .topbar.csprofile-header{
    height:auto !important;
    min-height:72px !important;
    align-items:flex-start !important;
    flex-wrap:wrap !important;
    gap:10px !important;
    padding:12px 14px !important;
  }
  .topbar.csprofile-header .brand{
    width:auto !important;
    min-width:0 !important;
    flex:0 0 auto !important;
  }
  .topbar.csprofile-header .cs-mega-nav{
    order:3 !important;
    width:100% !important;
    height:auto !important;
    overflow-x:auto !important;
    padding-bottom:4px !important;
  }
  .topbar.csprofile-header .cs-mega-nav .nav-dropdown,
  .topbar.csprofile-header .cs-mega-nav .nav-dropbtn{
    height:40px !important;
    line-height:40px !important;
  }
  .topbar.csprofile-header .nav-mega{
    top:42px !important;
  }
}

/* =========================================================
   UNIVERSAL HEADER LOCK - tools + database
   Keeps the top bar identical on every page so it no longer
   jumps left/right when moving between DB and tools.
   ========================================================= */

.topbar.csprofile-header,
.csprofile-header.topbar{
  height:72px !important;
  min-height:72px !important;
  padding:0 22px !important;
  display:flex !important;
  align-items:center !important;
  gap:0 !important;
  overflow:visible !important;
  position:sticky !important;
  top:0 !important;
  z-index:5000 !important;
}

.topbar.csprofile-header .brand,
.csprofile-header.topbar .brand{
  flex:0 0 250px !important;
  width:250px !important;
  min-width:250px !important;
  max-width:250px !important;
  display:flex !important;
  align-items:center !important;
  gap:12px !important;
  margin:0 !important;
  padding:0 !important;
}

.topbar.csprofile-header .brand-mark,
.csprofile-header.topbar .brand-mark{
  width:34px !important;
  height:34px !important;
  min-width:34px !important;
  flex:0 0 34px !important;
}

.topbar.csprofile-header .brand-text,
.csprofile-header.topbar .brand-text{
  line-height:1 !important;
  margin:0 !important;
  padding:0 !important;
}

.topbar.csprofile-header .brand-text strong,
.csprofile-header.topbar .brand-text strong{
  display:block !important;
  font-size:18px !important;
  line-height:1.05 !important;
  letter-spacing:.08em !important;
  margin:0 !important;
}

.topbar.csprofile-header .brand-text span,
.csprofile-header.topbar .brand-text span{
  display:block !important;
  font-size:10px !important;
  line-height:1.1 !important;
  letter-spacing:.16em !important;
  margin-top:3px !important;
}

.topbar.csprofile-header .cs-mega-nav,
.csprofile-header.topbar .cs-mega-nav{
  flex:0 1 auto !important;
  display:flex !important;
  align-items:center !important;
  gap:18px !important;
  height:72px !important;
  margin:0 !important;
  padding:0 !important;
  font-size:14px !important;
  line-height:1 !important;
  flex-wrap:nowrap !important;
}

.topbar.csprofile-header .cs-mega-nav .nav-dropdown,
.csprofile-header.topbar .cs-mega-nav .nav-dropdown{
  position:relative !important;
  flex:0 0 auto !important;
  height:72px !important;
  margin:0 !important;
  padding:0 !important;
}

.topbar.csprofile-header .cs-mega-nav .nav-dropbtn,
.csprofile-header.topbar .cs-mega-nav .nav-dropbtn{
  height:72px !important;
  display:flex !important;
  align-items:center !important;
  gap:5px !important;
  padding:0 !important;
  margin:0 !important;
  border:0 !important;
  border-bottom:2px solid transparent !important;
  background:transparent !important;
  color:#d8def1 !important;
  font:inherit !important;
  font-size:14px !important;
  line-height:72px !important;
  white-space:nowrap !important;
}

.topbar.csprofile-header .cs-mega-nav .nav-dropdown.active .nav-dropbtn,
.topbar.csprofile-header .cs-mega-nav .nav-dropdown.is-active .nav-dropbtn,
.csprofile-header.topbar .cs-mega-nav .nav-dropdown.active .nav-dropbtn,
.csprofile-header.topbar .cs-mega-nav .nav-dropdown.is-active .nav-dropbtn{
  color:#c084fc !important;
  border-bottom-color:#8b5cf6 !important;
}

.topbar.csprofile-header .top-actions,
.csprofile-header.topbar .top-actions{
  margin-left:auto !important;
  display:flex !important;
  align-items:center !important;
  gap:16px !important;
  font-size:14px !important;
}

@media(max-width:1280px){
  .topbar.csprofile-header .brand,
  .csprofile-header.topbar .brand{
    flex:0 0 200px !important;
    width:200px !important;
    min-width:200px !important;
    max-width:200px !important;
  }

  .topbar.csprofile-header .brand-text span,
  .csprofile-header.topbar .brand-text span{
    display:none !important;
  }

  .topbar.csprofile-header .cs-mega-nav,
  .csprofile-header.topbar .cs-mega-nav{
    gap:12px !important;
  }

  .topbar.csprofile-header .cs-mega-nav .nav-dropbtn,
  .csprofile-header.topbar .cs-mega-nav .nav-dropbtn{
    font-size:13px !important;
  }
}

@media(max-width:980px){
  .topbar.csprofile-header,
  .csprofile-header.topbar{
    height:auto !important;
    min-height:72px !important;
    align-items:flex-start !important;
    flex-wrap:wrap !important;
    gap:10px !important;
    padding:12px 14px !important;
  }

  .topbar.csprofile-header .brand,
  .csprofile-header.topbar .brand{
    flex:0 0 auto !important;
    width:auto !important;
    min-width:0 !important;
    max-width:none !important;
  }

  .topbar.csprofile-header .cs-mega-nav,
  .csprofile-header.topbar .cs-mega-nav{
    order:3 !important;
    width:100% !important;
    height:auto !important;
    overflow-x:auto !important;
    padding-bottom:4px !important;
  }

  .topbar.csprofile-header .cs-mega-nav .nav-dropdown,
  .topbar.csprofile-header .cs-mega-nav .nav-dropbtn,
  .csprofile-header.topbar .cs-mega-nav .nav-dropdown,
  .csprofile-header.topbar .cs-mega-nav .nav-dropbtn{
    height:40px !important;
    line-height:40px !important;
  }

  .topbar.csprofile-header .nav-mega,
  .csprofile-header.topbar .nav-mega{
    top:42px !important;
  }
}

/* =========================================================
   FINAL NAV ARROW / GAP PATCH
   This must stay at the VERY bottom of csprofile-header.css.
   It stops old tool CSS like:
   .nav-dropbtn span { margin-left:5px; }
   from widening the nav and making the header jump.
   ========================================================= */

.topbar.csprofile-header .cs-mega-nav .nav-dropbtn,
.csprofile-header.topbar .cs-mega-nav .nav-dropbtn,
.topbar:has(.cs-mega-nav) .cs-mega-nav .nav-dropbtn{
  gap:5px !important;
}

.topbar.csprofile-header .cs-mega-nav .nav-dropbtn span,
.csprofile-header.topbar .cs-mega-nav .nav-dropbtn span,
.topbar:has(.cs-mega-nav) .cs-mega-nav .nav-dropbtn span{
  margin-left:0 !important;
  padding-left:0 !important;
  color:#facc15 !important;
  font-size:12px !important;
  line-height:1 !important;
  opacity:.75 !important;
}

/* Keep logo-to-nav spacing identical everywhere */
.topbar.csprofile-header .brand,
.csprofile-header.topbar .brand,
.topbar:has(.cs-mega-nav) .brand{
  flex:0 0 250px !important;
  width:250px !important;
  min-width:250px !important;
  max-width:250px !important;
}

/* Keep nav spacing identical everywhere */
.topbar.csprofile-header .cs-mega-nav,
.csprofile-header.topbar .cs-mega-nav,
.topbar:has(.cs-mega-nav) .cs-mega-nav{
  gap:18px !important;
  margin-left:0 !important;
  padding-left:0 !important;
}

@media(max-width:1280px){
  .topbar.csprofile-header .brand,
  .csprofile-header.topbar .brand,
  .topbar:has(.cs-mega-nav) .brand{
    flex:0 0 200px !important;
    width:200px !important;
    min-width:200px !important;
    max-width:200px !important;
  }

  .topbar.csprofile-header .cs-mega-nav,
  .csprofile-header.topbar .cs-mega-nav,
  .topbar:has(.cs-mega-nav) .cs-mega-nav{
    gap:12px !important;
  }
}

@media(max-width:980px){
  .topbar.csprofile-header .brand,
  .csprofile-header.topbar .brand,
  .topbar:has(.cs-mega-nav) .brand{
    flex:0 0 auto !important;
    width:auto !important;
    min-width:0 !important;
    max-width:none !important;
  }
}



/* =========================================================
   WIDE SCREEN HEADER ALIGNMENT
   Keeps the header content aligned with the DB content lane
   now that the left sidebar has been removed.
   ========================================================= */

@media (min-width: 1500px){
  .topbar.csprofile-header,
  .csprofile-header.topbar,
  .topbar:has(.cs-mega-nav){
    padding-left:calc((100vw - 1480px) / 2 + 22px) !important;
    padding-right:calc((100vw - 1480px) / 2 + 22px) !important;
  }
}

@media (min-width: 1800px){
  .topbar.csprofile-header .brand,
  .csprofile-header.topbar .brand,
  .topbar:has(.cs-mega-nav) .brand{
    flex:0 0 210px !important;
    width:210px !important;
    min-width:210px !important;
    max-width:210px !important;
  }
}


/* =========================================================
   HEADER GLOBAL SEARCH
   Replaces the old sidebar search now that sidebar navigation
   has been removed from DB pages.
   ========================================================= */

.topbar.csprofile-header .top-actions,
.topbar:has(.cs-mega-nav) .top-actions{
  gap:12px !important;
}

.header-search{
  position:relative !important;
  width:260px !important;
  height:38px !important;
  margin:0 !important;
  padding:0 12px !important;
  border:1px solid rgba(255,255,255,.11) !important;
  border-radius:10px !important;
  background:rgba(13,20,34,.9) !important;
  display:flex !important;
  align-items:center !important;
  color:var(--muted,#8f9bb8) !important;
}

.header-search .header-search-icon{
  flex:0 0 auto !important;
  font-size:13px !important;
  opacity:.85 !important;
}

.header-search input{
  width:100% !important;
  min-width:0 !important;
  border:0 !important;
  outline:0 !important;
  background:transparent !important;
  color:#fff !important;
  padding:0 0 0 8px !important;
  font:inherit !important;
  font-size:13px !important;
}

.header-search input::placeholder{
  color:#8f98a3 !important;
}

.header-search:focus-within{
  border-color:rgba(139,92,246,.65) !important;
  box-shadow:0 0 0 3px rgba(139,92,246,.13) !important;
}

/* Autocomplete dropdown positioning inside the header */
.header-search .cs-suggest-box{
  left:auto !important;
  right:0 !important;
  top:calc(100% + 10px) !important;
  width:min(520px, calc(100vw - 28px)) !important;
  z-index:7000 !important;
}

/* Keep the Organize button compact when search exists */
.topbar.csprofile-header .watch,
.topbar:has(.cs-mega-nav) .watch{
  white-space:nowrap !important;
}

@media(max-width:1280px){
  .header-search{
    width:220px !important;
  }
}

@media(max-width:1080px){
  .header-search{
    width:190px !important;
  }
}

@media(max-width:980px){
  .header-search{
    order:1 !important;
    width:min(420px, calc(100vw - 28px)) !important;
  }

  .topbar.csprofile-header .top-actions,
  .topbar:has(.cs-mega-nav) .top-actions{
    margin-left:0 !important;
    width:100% !important;
    order:2 !important;
    justify-content:space-between !important;
  }
}

@media(max-width:560px){
  .header-search{
    width:100% !important;
  }

  .topbar.csprofile-header .watch,
  .topbar:has(.cs-mega-nav) .watch{
    display:none !important;
  }
}


/* Header autocomplete suggestions */
.header-search{
  overflow:visible !important;
}

.header-search .cs-suggest-box{
  position:absolute !important;
  display:none;
  right:0 !important;
  left:auto !important;
  top:calc(100% + 10px) !important;
  width:min(520px, calc(100vw - 28px)) !important;
  max-height:420px !important;
  overflow:auto !important;
  z-index:9999 !important;
}

.header-search .cs-suggest-box.is-open{
  display:block;
}


/* Purple scrollbar inside header search suggestions */
.header-search .cs-suggest-box{
  scrollbar-width:thin !important;
  scrollbar-color:rgba(139,92,246,.9) rgba(255,255,255,.06) !important;
}

.header-search .cs-suggest-box::-webkit-scrollbar{
  width:8px !important;
}

.header-search .cs-suggest-box::-webkit-scrollbar-track{
  background:rgba(255,255,255,.06) !important;
  border-radius:999px !important;
}

.header-search .cs-suggest-box::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg, rgba(139,92,246,.95), rgba(59,130,246,.85)) !important;
  border-radius:999px !important;
  border:2px solid rgba(8,12,22,.95) !important;
}

.header-search .cs-suggest-box::-webkit-scrollbar-thumb:hover{
  background:linear-gradient(180deg, rgba(167,139,250,1), rgba(96,165,250,.95)) !important;
}


/* =========================================================
   HEADER CLEANUP
   - Hide dropdown chevrons
   - Make JS-controlled active state win over old hardcoded .active
   ========================================================= */

/* Hide the little v / chevron in nav buttons */
.cs-mega-nav .nav-dropbtn span{
  display:none !important;
}

/* Only JS .is-active should look active.
   This prevents the hardcoded Tools .active class staying purple everywhere. */
.cs-mega-nav .nav-dropdown.active:not(.is-active) > .nav-dropbtn{
  color:inherit !important;
  background:transparent !important;
  border-color:transparent !important;
  box-shadow:none !important;
}

.cs-mega-nav .nav-dropdown.is-active > .nav-dropbtn{
  color:#fff !important;
  background:linear-gradient(135deg, rgba(139,92,246,.24), rgba(59,130,246,.14)) !important;
  border-color:rgba(139,92,246,.35) !important;
}


/* =========================================================
   ACTIVE NAV TEXT ONLY
   Active nav should tint the text purple, not fill the box.
   ========================================================= */

.cs-mega-nav .nav-dropdown.is-active > .nav-dropbtn{
  color:#a78bfa !important;
  background:transparent !important;
  border-color:transparent !important;
  box-shadow:none !important;
}

.cs-mega-nav .nav-dropdown.is-active > .nav-dropbtn:hover{
  color:#c4b5fd !important;
  background:rgba(255,255,255,.04) !important;
  border-color:rgba(255,255,255,.08) !important;
}

.cs-mega-nav .nav-dropdown.active:not(.is-active) > .nav-dropbtn{
  color:inherit !important;
  background:transparent !important;
  border-color:transparent !important;
  box-shadow:none !important;
}


/* =========================================================
   REAL CSPROFILE LOGO
   Replaces temporary CS mark with actual logo image styling.
   ========================================================= */

.csprofile-header .brand{
  gap:10px !important;
}

.csprofile-header .brand-mark{
  width:34px !important;
  height:34px !important;
  min-width:34px !important;
  border-radius:9px !important;
  overflow:hidden !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  color:transparent !important;
  font-size:0 !important;
}

.csprofile-header .brand-mark img{
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  display:block !important;
}

.csprofile-header .brand-text{
  display:flex !important;
  align-items:baseline !important;
  gap:8px !important;
  min-width:0 !important;
}

.csprofile-header .brand-text strong{
  font-size:15px !important;
  letter-spacing:.04em !important;
  line-height:1 !important;
}

.csprofile-header .brand-text span{
  font-size:11px !important;
  letter-spacing:.08em !important;
  line-height:1 !important;
  color:#8f9bb8 !important;
  white-space:nowrap !important;
}

/* If you want BETA V3 like the old header */
.csprofile-header .brand-text span::before{
  content:"BETA V3" !important;
}

.csprofile-header .brand-text span{
  font-size:0 !important;
}

.csprofile-header .brand-text span::before{
  font-size:11px !important;
}

@media(max-width:560px){
  .csprofile-header .brand-text span{
    display:none !important;
  }
}


/* =========================================================
   LOGO CLEANUP — REMOVE BETA TEXT
   Keeps the real logo, removes subtext clutter.
   ========================================================= */

.csprofile-header .brand{
  gap:10px !important;
  flex:0 0 auto !important;
  width:auto !important;
  min-width:0 !important;
  max-width:none !important;
}

.csprofile-header .brand-text{
  display:flex !important;
  align-items:center !important;
  gap:0 !important;
}

.csprofile-header .brand-text strong{
  font-size:16px !important;
  line-height:1 !important;
  letter-spacing:.06em !important;
  white-space:nowrap !important;
}

.csprofile-header .brand-text span,
.csprofile-header .brand-text span::before{
  content:none !important;
  display:none !important;
}

@media (min-width:1800px){
  .topbar.csprofile-header .brand,
  .csprofile-header.topbar .brand,
  .topbar:has(.cs-mega-nav) .brand{
    flex:0 0 auto !important;
    width:auto !important;
    min-width:0 !important;
    max-width:none !important;
  }
}


/* =========================================================
   HEADER NAV GAP FROM LOGO
   Gives the main nav breathing room away from the logo.
   ========================================================= */

.topbar.csprofile-header .cs-mega-nav,
.csprofile-header.topbar .cs-mega-nav,
.topbar:has(.cs-mega-nav) .cs-mega-nav{
  margin-left:34px !important;
}

@media(max-width:1180px){
  .topbar.csprofile-header .cs-mega-nav,
  .csprofile-header.topbar .cs-mega-nav,
  .topbar:has(.cs-mega-nav) .cs-mega-nav{
    margin-left:22px !important;
  }
}

@media(max-width:980px){
  .topbar.csprofile-header .cs-mega-nav,
  .csprofile-header.topbar .cs-mega-nav,
  .topbar:has(.cs-mega-nav) .cs-mega-nav{
    margin-left:0 !important;
  }
}


/* =========================================================
   CSPROFILE LOGO COLOUR THEME UPDATE
   Orange/purple/blue accents pulled from the logo.
   Safe override block: keep existing layout, just modernise colours.
   ========================================================= */
:root{
  --bg:#050914;
  --bg2:#080d18;
  --panel:rgba(13,20,36,.94);
  --panel2:rgba(17,26,45,.90);
  --card:#0b1220;
  --line:rgba(255,255,255,.085);
  --line2:rgba(139,92,246,.34);
  --text:#f5f7ff;
  --muted:#9aa6c3;
  --muted2:#c7d2fe;
  --purple:#8b5cf6;
  --purple2:#6d3df2;
  --brand-purple:#8b5cf6;
  --brand-purple-soft:#a78bfa;
  --brand-orange:#f59e0b;
  --brand-orange-soft:#fbbf24;
  --brand-blue:#60a5fa;
  --accent:var(--brand-purple);
  --accent2:var(--brand-orange);
  --green:#54e38f;
  --red:#ff5c6c;
  --yellow:#facc15;
  --shadow:0 20px 80px rgba(0,0,0,.38);
  --glow-purple:0 0 28px rgba(139,92,246,.26);
  --glow-orange:0 0 26px rgba(245,158,11,.20);
}
body{
  background:
    radial-gradient(circle at top left,rgba(245,158,11,.10),transparent 24%),
    radial-gradient(circle at top right,rgba(139,92,246,.14),transparent 30%),
    radial-gradient(circle at 55% 0%,rgba(96,165,250,.06),transparent 28%),
    var(--bg) !important;
}
.hero{
  background:
    linear-gradient(90deg,rgba(12,18,32,.96),rgba(12,18,32,.70)),
    radial-gradient(circle at 78% 34%,rgba(245,158,11,.13),transparent 30%),
    radial-gradient(circle at 88% 44%,rgba(139,92,246,.18),transparent 38%),
    var(--panel) !important;
}
.stat-icon,.strip-icon{
  background:linear-gradient(135deg,rgba(139,92,246,.24),rgba(245,158,11,.16)) !important;
  color:var(--brand-orange-soft) !important;
}
.control:focus{
  border-color:rgba(245,158,11,.55) !important;
  box-shadow:0 0 0 3px rgba(245,158,11,.12),0 0 0 1px rgba(139,92,246,.18) !important;
}
.tab.active,.view-toggle button.active,.page-btn.active{
  border-color:rgba(139,92,246,.75) !important;
  background:linear-gradient(135deg,rgba(139,92,246,.28),rgba(245,158,11,.10)) !important;
  color:var(--brand-purple-soft) !important;
}
.item-card:hover,.related-card:hover{
  border-color:rgba(245,158,11,.35) !important;
  box-shadow:0 0 0 1px rgba(245,158,11,.14),0 18px 45px rgba(0,0,0,.35),var(--glow-purple) !important;
}
.primary,.btn-primary,.search-submit,.header-search button{
  background:linear-gradient(135deg,var(--brand-purple),var(--brand-blue)) !important;
}
.badge.orange,.float-marker,.cs-suggest-item mark{
  color:var(--brand-orange-soft) !important;
}

/* Logo image + header colour polish */
.topbar.csprofile-header .brand-mark,
.csprofile-header.topbar .brand-mark,
.topbar:has(.cs-mega-nav) .brand-mark{
  background:transparent !important;
  box-shadow:0 0 0 1px rgba(255,255,255,.08),0 0 22px rgba(245,158,11,.18),0 0 26px rgba(139,92,246,.16) !important;
  overflow:hidden !important;
}
.csprofile-header .brand-mark img{width:100% !important;height:100% !important;display:block !important;object-fit:contain !important;}
.cs-mega-nav .nav-dropbtn span,.topbar.csprofile-header .cs-mega-nav .nav-dropbtn span{display:none !important;}
.cs-mega-nav .nav-dropbtn:hover{color:var(--brand-orange-soft) !important;}
.cs-mega-nav .nav-dropdown.active .nav-dropbtn,.cs-mega-nav .nav-dropdown.is-active .nav-dropbtn{color:var(--brand-purple-soft) !important;border-bottom-color:var(--brand-purple) !important;background:transparent !important;}
.cs-mega-nav .nav-mega{background:#111827 !important;border-color:rgba(255,255,255,.09) !important;}
.cs-mega-nav .nav-item:hover,.cs-mega-nav .nav-item.active{background:rgba(245,158,11,.08) !important;color:#fff !important;}
.cs-mega-nav .nav-mega::-webkit-scrollbar-thumb{background:linear-gradient(180deg,var(--brand-purple),var(--brand-orange)) !important;}


/* =========================================================
   MOBILE HEADER CLEANUP
   Keeps desktop unchanged. Mobile becomes:
   logo row -> search row -> horizontal nav row.
   Mega menus become fixed-width panels so they do not fall
   off the screen.
   ========================================================= */

@media(max-width: 760px){
  .topbar.csprofile-header,
  .csprofile-header.topbar,
  .topbar:has(.cs-mega-nav){
    height:auto !important;
    min-height:0 !important;
    display:flex !important;
    flex-wrap:wrap !important;
    align-items:center !important;
    gap:8px 10px !important;
    padding:10px 12px 8px !important;
    overflow:visible !important;
  }

  .topbar.csprofile-header .brand,
  .csprofile-header.topbar .brand,
  .topbar:has(.cs-mega-nav) .brand{
    order:1 !important;
    flex:0 0 auto !important;
    width:auto !important;
    min-width:0 !important;
    max-width:calc(100% - 96px) !important;
    gap:8px !important;
  }

  .topbar.csprofile-header .brand-mark,
  .csprofile-header.topbar .brand-mark,
  .topbar:has(.cs-mega-nav) .brand-mark{
    width:30px !important;
    height:30px !important;
    min-width:30px !important;
    flex-basis:30px !important;
  }

  .topbar.csprofile-header .brand-text strong,
  .csprofile-header.topbar .brand-text strong,
  .topbar:has(.cs-mega-nav) .brand-text strong{
    font-size:14px !important;
    letter-spacing:.05em !important;
  }

  .topbar.csprofile-header .brand-text span,
  .csprofile-header.topbar .brand-text span,
  .topbar:has(.cs-mega-nav) .brand-text span{
    display:none !important;
  }

  .topbar.csprofile-header .top-actions,
  .csprofile-header.topbar .top-actions,
  .topbar:has(.cs-mega-nav) .top-actions{
    order:2 !important;
    margin-left:auto !important;
    width:auto !important;
    flex:1 1 auto !important;
    min-width:0 !important;
    display:flex !important;
    justify-content:flex-end !important;
    gap:8px !important;
  }

  .topbar.csprofile-header .watch,
  .csprofile-header.topbar .watch,
  .topbar:has(.cs-mega-nav) .watch{
    display:none !important;
  }

  .header-search{
    order:1 !important;
    width:min(220px, 54vw) !important;
    height:36px !important;
    flex:0 1 min(220px, 54vw) !important;
  }

  .header-search input{
    font-size:13px !important;
  }

  .topbar.csprofile-header .cs-mega-nav,
  .csprofile-header.topbar .cs-mega-nav,
  .topbar:has(.cs-mega-nav) .cs-mega-nav{
    order:3 !important;
    width:100% !important;
    height:auto !important;
    min-height:38px !important;
    display:flex !important;
    flex-wrap:nowrap !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    gap:8px !important;
    margin:2px 0 0 !important;
    padding:0 0 6px !important;
    scrollbar-width:thin !important;
    scrollbar-color:rgba(139,92,246,.9) rgba(255,255,255,.06) !important;
    -webkit-overflow-scrolling:touch !important;
  }

  .topbar.csprofile-header .cs-mega-nav::-webkit-scrollbar,
  .csprofile-header.topbar .cs-mega-nav::-webkit-scrollbar,
  .topbar:has(.cs-mega-nav) .cs-mega-nav::-webkit-scrollbar{
    height:5px !important;
  }

  .topbar.csprofile-header .cs-mega-nav::-webkit-scrollbar-thumb,
  .csprofile-header.topbar .cs-mega-nav::-webkit-scrollbar-thumb,
  .topbar:has(.cs-mega-nav) .cs-mega-nav::-webkit-scrollbar-thumb{
    background:rgba(139,92,246,.85) !important;
    border-radius:999px !important;
  }

  .topbar.csprofile-header .cs-mega-nav .nav-dropdown,
  .csprofile-header.topbar .cs-mega-nav .nav-dropdown,
  .topbar:has(.cs-mega-nav) .cs-mega-nav .nav-dropdown{
    height:auto !important;
    flex:0 0 auto !important;
    position:static !important;
  }

  .topbar.csprofile-header .cs-mega-nav .nav-dropbtn,
  .csprofile-header.topbar .cs-mega-nav .nav-dropbtn,
  .topbar:has(.cs-mega-nav) .cs-mega-nav .nav-dropbtn{
    height:36px !important;
    line-height:36px !important;
    min-height:36px !important;
    padding:0 10px !important;
    border:1px solid rgba(255,255,255,.08) !important;
    border-radius:10px !important;
    background:rgba(13,20,34,.66) !important;
    font-size:13px !important;
  }

  .topbar.csprofile-header .cs-mega-nav .nav-dropdown.is-active > .nav-dropbtn,
  .csprofile-header.topbar .cs-mega-nav .nav-dropdown.is-active > .nav-dropbtn,
  .topbar:has(.cs-mega-nav) .cs-mega-nav .nav-dropdown.is-active > .nav-dropbtn{
    color:#a78bfa !important;
    border-color:rgba(139,92,246,.45) !important;
    background:rgba(139,92,246,.12) !important;
  }

  .topbar.csprofile-header .cs-mega-nav .nav-mega,
  .csprofile-header.topbar .cs-mega-nav .nav-mega,
  .topbar:has(.cs-mega-nav) .cs-mega-nav .nav-mega{
    position:fixed !important;
    left:12px !important;
    right:12px !important;
    top:118px !important;
    width:auto !important;
    max-width:none !important;
    max-height:62vh !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    border-radius:14px !important;
    background:rgba(15,22,38,.98) !important;
    border:1px solid rgba(139,92,246,.24) !important;
    box-shadow:0 20px 70px rgba(0,0,0,.58) !important;
    z-index:9999 !important;
  }

  .topbar.csprofile-header .cs-mega-nav .nav-search input,
  .csprofile-header.topbar .cs-mega-nav .nav-search input,
  .topbar:has(.cs-mega-nav) .cs-mega-nav .nav-search input{
    height:40px !important;
    border-radius:10px !important;
    background:rgba(6,11,20,.72) !important;
  }

  .topbar.csprofile-header .cs-mega-nav .nav-item,
  .csprofile-header.topbar .cs-mega-nav .nav-item,
  .topbar:has(.cs-mega-nav) .cs-mega-nav .nav-item{
    min-height:42px !important;
    font-size:14px !important;
    padding:10px 16px !important;
  }

  .header-search .cs-suggest-box{
    position:fixed !important;
    left:12px !important;
    right:12px !important;
    top:58px !important;
    width:auto !important;
    max-height:58vh !important;
    z-index:10000 !important;
  }
}

@media(max-width: 420px){
  .header-search{
    width:48vw !important;
    flex-basis:48vw !important;
  }

  .topbar.csprofile-header .brand-text strong,
  .csprofile-header.topbar .brand-text strong,
  .topbar:has(.cs-mega-nav) .brand-text strong{
    font-size:13px !important;
  }
}


/* Mobile tap-open support from csprofile-header.js */
@media(max-width:760px){
  .csprofile-header .cs-mega-nav .nav-dropdown.mobile-open .nav-mega,
  .topbar:has(.cs-mega-nav) .cs-mega-nav .nav-dropdown.mobile-open .nav-mega{
    display:block !important;
  }
}


/* =========================================================
   MOBILE NAV TAP FIX
   Let JS-opened dropdowns display on phones/tablets.
   Desktop hover behaviour stays unchanged.
   ========================================================= */

@media(max-width:980px){
  .topbar.csprofile-header .cs-mega-nav .nav-dropdown.mobile-open .nav-mega,
  .csprofile-header.topbar .cs-mega-nav .nav-dropdown.mobile-open .nav-mega,
  .topbar:has(.cs-mega-nav) .cs-mega-nav .nav-dropdown.mobile-open .nav-mega{
    display:block !important;
  }

  .topbar.csprofile-header .cs-mega-nav .nav-dropdown.mobile-open > .nav-dropbtn,
  .csprofile-header.topbar .cs-mega-nav .nav-dropdown.mobile-open > .nav-dropbtn,
  .topbar:has(.cs-mega-nav) .cs-mega-nav .nav-dropdown.mobile-open > .nav-dropbtn{
    color:#a78bfa !important;
    border-color:rgba(139,92,246,.5) !important;
    background:rgba(139,92,246,.14) !important;
  }

  .topbar.csprofile-header .cs-mega-nav .nav-mega,
  .csprofile-header.topbar .cs-mega-nav .nav-mega,
  .topbar:has(.cs-mega-nav) .cs-mega-nav .nav-mega{
    position:fixed !important;
    left:12px !important;
    right:12px !important;
    top:118px !important;
    width:auto !important;
    max-width:none !important;
    max-height:62vh !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    z-index:10000 !important;
  }
}

@media(max-width:760px){
  .topbar.csprofile-header .cs-mega-nav .nav-mega,
  .csprofile-header.topbar .cs-mega-nav .nav-mega,
  .topbar:has(.cs-mega-nav) .cs-mega-nav .nav-mega{
    top:118px !important;
  }
}


/* =========================================================
   MOBILE DROPDOWN PANEL VISIBLE FIX
   Parent tab was opening, but the .nav-mega panel could still
   be hidden/positioned by older header rules.
   ========================================================= */

@media(max-width:980px){
  body.mobile-nav-open{
    overflow:hidden !important;
  }

  .topbar.csprofile-header .cs-mega-nav .nav-dropdown,
  .csprofile-header.topbar .cs-mega-nav .nav-dropdown,
  .topbar:has(.cs-mega-nav) .cs-mega-nav .nav-dropdown{
    position:static !important;
  }

  .topbar.csprofile-header .cs-mega-nav .nav-dropdown .nav-mega,
  .csprofile-header.topbar .cs-mega-nav .nav-dropdown .nav-mega,
  .topbar:has(.cs-mega-nav) .cs-mega-nav .nav-dropdown .nav-mega{
    display:none !important;
  }

  .topbar.csprofile-header .cs-mega-nav .nav-dropdown.mobile-open .nav-mega,
  .csprofile-header.topbar .cs-mega-nav .nav-dropdown.mobile-open .nav-mega,
  .topbar:has(.cs-mega-nav) .cs-mega-nav .nav-dropdown.mobile-open .nav-mega{
    display:block !important;
    position:fixed !important;
    left:10px !important;
    right:10px !important;
    top:116px !important;
    width:auto !important;
    min-width:0 !important;
    max-width:none !important;
    height:auto !important;
    max-height:calc(100vh - 132px) !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    padding:8px 0 !important;
    border:1px solid rgba(139,92,246,.28) !important;
    border-radius:14px !important;
    background:rgba(14,20,34,.985) !important;
    box-shadow:0 24px 90px rgba(0,0,0,.72) !important;
    z-index:2147483000 !important;
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
    transform:none !important;
  }

  .topbar.csprofile-header .cs-mega-nav .nav-dropdown.mobile-open .nav-mega-wide,
  .csprofile-header.topbar .cs-mega-nav .nav-dropdown.mobile-open .nav-mega-wide,
  .topbar:has(.cs-mega-nav) .cs-mega-nav .nav-dropdown.mobile-open .nav-mega-wide{
    width:auto !important;
  }

  .topbar.csprofile-header .cs-mega-nav .nav-dropdown.mobile-open .nav-section-title,
  .csprofile-header.topbar .cs-mega-nav .nav-dropdown.mobile-open .nav-section-title,
  .topbar:has(.cs-mega-nav) .cs-mega-nav .nav-dropdown.mobile-open .nav-section-title{
    display:block !important;
    padding:11px 16px 7px !important;
    color:#f59e0b !important;
    font-size:12px !important;
    font-weight:900 !important;
    letter-spacing:.03em !important;
  }

  .topbar.csprofile-header .cs-mega-nav .nav-dropdown.mobile-open .nav-item,
  .csprofile-header.topbar .cs-mega-nav .nav-dropdown.mobile-open .nav-item,
  .topbar:has(.cs-mega-nav) .cs-mega-nav .nav-dropdown.mobile-open .nav-item{
    display:flex !important;
    min-height:43px !important;
    align-items:center !important;
    padding:10px 16px !important;
    color:#e7ecff !important;
    font-size:14px !important;
    border-bottom:1px solid rgba(255,255,255,.055) !important;
    opacity:1 !important;
  }

  .topbar.csprofile-header .cs-mega-nav .nav-dropdown.mobile-open .nav-item:last-child,
  .csprofile-header.topbar .cs-mega-nav .nav-dropdown.mobile-open .nav-item:last-child,
  .topbar:has(.cs-mega-nav) .cs-mega-nav .nav-dropdown.mobile-open .nav-item:last-child{
    border-bottom:0 !important;
  }

  .topbar.csprofile-header .cs-mega-nav .nav-dropdown.mobile-open .nav-search,
  .csprofile-header.topbar .cs-mega-nav .nav-dropdown.mobile-open .nav-search,
  .topbar:has(.cs-mega-nav) .cs-mega-nav .nav-dropdown.mobile-open .nav-search{
    display:block !important;
    padding:8px 12px 10px !important;
    border-bottom:1px solid rgba(255,255,255,.08) !important;
  }

  .topbar.csprofile-header .cs-mega-nav .nav-dropdown.mobile-open .nav-search input,
  .csprofile-header.topbar .cs-mega-nav .nav-dropdown.mobile-open .nav-search input,
  .topbar:has(.cs-mega-nav) .cs-mega-nav .nav-dropdown.mobile-open .nav-search input{
    width:100% !important;
    height:40px !important;
    display:block !important;
  }
}

@media(max-width:520px){
  .topbar.csprofile-header .cs-mega-nav .nav-dropdown.mobile-open .nav-mega,
  .csprofile-header.topbar .cs-mega-nav .nav-dropdown.mobile-open .nav-mega,
  .topbar:has(.cs-mega-nav) .cs-mega-nav .nav-dropdown.mobile-open .nav-mega{
    top:112px !important;
    max-height:calc(100vh - 126px) !important;
  }
}


/* =========================================================
   MOBILE MEGA MENU PORTAL
   Mobile dropdowns are rendered as a body-level panel so they
   cannot be clipped by the horizontal nav row.
   ========================================================= */

@media(max-width:980px){
  body.mobile-mega-open{
    overflow:hidden !important;
  }

  .mobile-mega-portal{
    position:fixed !important;
    left:10px !important;
    right:10px !important;
    top:104px !important;
    max-height:calc(100vh - 118px) !important;
    z-index:2147483647 !important;
    overflow:hidden !important;
    display:flex !important;
    flex-direction:column !important;
    border:1px solid rgba(139,92,246,.32) !important;
    border-radius:16px !important;
    background:rgba(12,18,32,.985) !important;
    box-shadow:0 24px 90px rgba(0,0,0,.75) !important;
    backdrop-filter:blur(18px) !important;
  }

  .mobile-mega-head{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:12px !important;
    padding:13px 14px !important;
    border-bottom:1px solid rgba(255,255,255,.08) !important;
    background:linear-gradient(135deg,rgba(139,92,246,.16),rgba(245,158,11,.08)) !important;
  }

  .mobile-mega-head strong{
    color:#f4f7ff !important;
    font-size:14px !important;
    letter-spacing:.04em !important;
  }

  .mobile-mega-close{
    width:34px !important;
    height:34px !important;
    border:1px solid rgba(255,255,255,.12) !important;
    border-radius:10px !important;
    background:rgba(255,255,255,.06) !important;
    color:#fff !important;
    font-size:24px !important;
    line-height:1 !important;
    cursor:pointer !important;
  }

  .mobile-mega-body{
    overflow-y:auto !important;
    overflow-x:hidden !important;
    padding:8px 0 !important;
    scrollbar-width:thin !important;
    scrollbar-color:rgba(139,92,246,.9) rgba(255,255,255,.06) !important;
  }

  .mobile-mega-body::-webkit-scrollbar{
    width:8px !important;
  }

  .mobile-mega-body::-webkit-scrollbar-track{
    background:rgba(255,255,255,.06) !important;
  }

  .mobile-mega-body::-webkit-scrollbar-thumb{
    background:linear-gradient(180deg,rgba(139,92,246,.95),rgba(245,158,11,.78)) !important;
    border-radius:999px !important;
    border:2px solid rgba(8,12,22,.95) !important;
  }

  .mobile-mega-body .nav-search{
    display:block !important;
    padding:8px 12px 12px !important;
    margin:0 0 4px !important;
    border-bottom:1px solid rgba(255,255,255,.08) !important;
  }

  .mobile-mega-body .nav-search input{
    width:100% !important;
    height:42px !important;
    border:1px solid rgba(255,255,255,.12) !important;
    border-radius:12px !important;
    background:rgba(6,11,20,.72) !important;
    color:#fff !important;
    outline:none !important;
    padding:0 12px !important;
    font-size:14px !important;
  }

  .mobile-mega-body .nav-section-title{
    display:block !important;
    padding:12px 16px 7px !important;
    color:#f59e0b !important;
    font-size:12px !important;
    font-weight:900 !important;
    letter-spacing:.04em !important;
  }

  .mobile-mega-body .nav-item{
    display:flex !important;
    align-items:center !important;
    min-height:44px !important;
    padding:10px 16px !important;
    color:#e7ecff !important;
    font-size:14px !important;
    line-height:1.25 !important;
    border-bottom:1px solid rgba(255,255,255,.055) !important;
    text-decoration:none !important;
    opacity:1 !important;
  }

  .mobile-mega-body .nav-item:hover,
  .mobile-mega-body .nav-item:focus{
    background:rgba(139,92,246,.16) !important;
    color:#fff !important;
  }

  .mobile-mega-body .nav-item.is-hidden{
    display:none !important;
  }
}

@media(max-width:520px){
  .mobile-mega-portal{
    top:100px !important;
    max-height:calc(100vh - 112px) !important;
  }
}


/* One-tap mobile portal: visual active state only */
@media(max-width:980px){
  .cs-mega-nav .nav-dropdown.mobile-open > .nav-dropbtn{
    color:#a78bfa !important;
    border-color:rgba(139,92,246,.5) !important;
    background:rgba(139,92,246,.14) !important;
  }
}


/* =========================================================
   HEADER SEARCH ICON CLEANUP
   Removes the emoji-looking search icon from the header search.
   ========================================================= */

.header-search::before,
.header-search .search-icon,
.header-search .icon,
.header-search > span:first-child{
  display:none !important;
  content:none !important;
}

.header-search input{
  padding-left:14px !important;
}


/* =========================================================
   NAV DROPDOWN VISUAL UPGRADE
   Removes plain grey feel, adds glass gradient panels, and
   supports weapon thumbnail rows/cards.
   ========================================================= */

.cs-mega-nav .nav-search{
  display:none !important;
}

.cs-mega-nav .nav-mega{
  background:
    radial-gradient(circle at 18% 0%, rgba(139,92,246,.18), transparent 34%),
    radial-gradient(circle at 90% 8%, rgba(245,158,11,.12), transparent 30%),
    linear-gradient(135deg, rgba(8,13,25,.985), rgba(14,20,38,.975) 46%, rgba(18,14,38,.965)) !important;
  border:1px solid rgba(139,92,246,.22) !important;
  box-shadow:0 24px 80px rgba(0,0,0,.62), inset 0 1px 0 rgba(255,255,255,.045) !important;
  backdrop-filter:blur(18px) !important;
}

.cs-mega-nav .nav-mega::before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  pointer-events:none !important;
  border-radius:inherit !important;
  background:
    linear-gradient(90deg, rgba(139,92,246,.18), transparent 24%, transparent 74%, rgba(245,158,11,.12)),
    linear-gradient(180deg, rgba(255,255,255,.045), transparent 38%) !important;
  opacity:.72 !important;
}

.cs-mega-nav .nav-section-title{
  position:relative !important;
  color:#f59e0b !important;
  opacity:.95 !important;
  font-size:12px !important;
  letter-spacing:.055em !important;
  text-transform:none !important;
}

.cs-mega-nav .nav-item{
  position:relative !important;
  border-radius:10px !important;
  margin:2px 8px !important;
  color:#dfe7ff !important;
  transition:background .16s ease, color .16s ease, border-color .16s ease, transform .16s ease !important;
}

.cs-mega-nav .nav-item:hover,
.cs-mega-nav .nav-item:focus{
  background:linear-gradient(135deg, rgba(139,92,246,.18), rgba(245,158,11,.08)) !important;
  color:#fff !important;
  transform:translateX(2px) !important;
}

.cs-mega-nav .nav-item.nav-weapon{
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  min-height:44px !important;
  padding:8px 12px !important;
  border:1px solid rgba(255,255,255,.055) !important;
  background:rgba(255,255,255,.025) !important;
}

.cs-mega-nav .nav-item.nav-weapon:hover,
.cs-mega-nav .nav-item.nav-weapon:focus{
  border-color:rgba(139,92,246,.36) !important;
  background:
    radial-gradient(circle at 12% 50%, rgba(139,92,246,.22), transparent 38%),
    linear-gradient(135deg, rgba(139,92,246,.16), rgba(245,158,11,.075)) !important;
}

.cs-mega-nav .nav-item.nav-weapon img{
  width:44px !important;
  height:30px !important;
  object-fit:contain !important;
  flex:0 0 44px !important;
  filter:drop-shadow(0 8px 12px rgba(0,0,0,.45)) !important;
}

.cs-mega-nav .nav-item.nav-weapon span{
  min-width:0 !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
}

@media(min-width:981px){
  .cs-mega-nav .nav-mega .nav-item.nav-weapon{
    margin:4px 8px !important;
  }

  .cs-mega-nav .nav-mega:has(.nav-weapon){
    min-width:300px !important;
  }
}

@media(max-width:980px){
  .mobile-mega-portal{
    background:
      radial-gradient(circle at 18% 0%, rgba(139,92,246,.20), transparent 36%),
      radial-gradient(circle at 92% 6%, rgba(245,158,11,.13), transparent 32%),
      linear-gradient(135deg, rgba(8,13,25,.99), rgba(14,20,38,.985) 48%, rgba(18,14,38,.975)) !important;
    border-color:rgba(139,92,246,.32) !important;
  }

  .mobile-mega-body .nav-search{
    display:none !important;
  }

  .mobile-mega-body .nav-item.nav-weapon{
    display:flex !important;
    align-items:center !important;
    gap:12px !important;
    min-height:52px !important;
    margin:4px 10px !important;
    padding:9px 12px !important;
    border:1px solid rgba(255,255,255,.06) !important;
    border-radius:12px !important;
    background:rgba(255,255,255,.028) !important;
  }

  .mobile-mega-body .nav-item.nav-weapon img{
    width:52px !important;
    height:34px !important;
    object-fit:contain !important;
    flex:0 0 52px !important;
    filter:drop-shadow(0 8px 12px rgba(0,0,0,.45)) !important;
  }

  .mobile-mega-body .nav-item.nav-weapon span{
    font-weight:800 !important;
  }
}


/* =========================================================
   NORMALISE ALL DROPDOWN ITEMS
   Keep Pistols / Knives / Gloves / Cases etc visually consistent.
   ========================================================= */

.cs-mega-nav .nav-mega .nav-item{
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  min-height:42px !important;
  padding:9px 12px !important;
  margin:4px 8px !important;
  border:1px solid rgba(255,255,255,.055) !important;
  border-radius:11px !important;
  background:rgba(255,255,255,.025) !important;
}

.cs-mega-nav .nav-mega .nav-item:hover,
.cs-mega-nav .nav-mega .nav-item:focus{
  border-color:rgba(139,92,246,.36) !important;
  background:
    radial-gradient(circle at 12% 50%, rgba(139,92,246,.22), transparent 38%),
    linear-gradient(135deg, rgba(139,92,246,.16), rgba(245,158,11,.075)) !important;
  transform:translateX(2px) !important;
}

.mobile-mega-body .nav-item{
  display:flex !important;
  align-items:center !important;
  gap:12px !important;
  min-height:48px !important;
  margin:4px 10px !important;
  padding:10px 12px !important;
  border:1px solid rgba(255,255,255,.06) !important;
  border-radius:12px !important;
  background:rgba(255,255,255,.028) !important;
}

.mobile-mega-body .nav-item:hover,
.mobile-mega-body .nav-item:focus{
  border-color:rgba(139,92,246,.38) !important;
  background:
    radial-gradient(circle at 12% 50%, rgba(139,92,246,.20), transparent 38%),
    linear-gradient(135deg, rgba(139,92,246,.14), rgba(245,158,11,.07)) !important;
}


/* Safe currency switcher */
.csp-currency-switch{
  display:flex;
  align-items:center;
  gap:7px;
  height:34px;
  padding:0 8px 0 10px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:10px;
  background:rgba(13,20,34,.82);
  color:#b8c0d9;
  font-size:12px;
  white-space:nowrap;
}
.csp-currency-switch span{color:#8f9bb8;font-weight:700;}
.csp-currency-switch select{
  height:28px;
  border:0;
  outline:0;
  background:transparent;
  color:#f4f7ff;
  font-weight:850;
  cursor:pointer;
}
.csp-currency-switch select option{background:#0b1220;color:#f4f7ff;}
@media(max-width:720px){
  .csp-currency-switch span{display:none;}
  .csp-currency-switch{padding:0 6px;}
}


/* =========================================================
   MOBILE PASS SAFE — shared header polish
   CSS-only, no loading/search/currency logic changed.
   ========================================================= */
@media(max-width:980px){
  .topbar:has(.cs-mega-nav),
  .topbar.csprofile-header{
    position:sticky !important;
    top:0 !important;
    align-items:center !important;
    padding:10px 12px !important;
    gap:8px !important;
  }

  .topbar:has(.cs-mega-nav) .brand,
  .topbar.csprofile-header .brand{
    min-width:0 !important;
    width:auto !important;
    flex:0 1 auto !important;
  }

  .topbar:has(.cs-mega-nav) .brand-text strong,
  .topbar.csprofile-header .brand-text strong{
    font-size:15px !important;
  }

  .topbar:has(.cs-mega-nav) .top-actions,
  .topbar.csprofile-header .top-actions{
    gap:8px !important;
    margin-left:auto !important;
    min-width:0 !important;
  }

  .header-search{
    width:min(46vw, 260px) !important;
    min-width:145px !important;
    height:36px !important;
  }

  .header-search input{
    font-size:13px !important;
  }

  .csprofile-header .cs-mega-nav,
  .topbar:has(.cs-mega-nav) .cs-mega-nav{
    order:3 !important;
    width:100% !important;
    height:42px !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    gap:8px !important;
    padding:0 2px 4px !important;
    scrollbar-width:none !important;
    -webkit-overflow-scrolling:touch !important;
  }

  .csprofile-header .cs-mega-nav::-webkit-scrollbar,
  .topbar:has(.cs-mega-nav) .cs-mega-nav::-webkit-scrollbar{
    display:none !important;
  }

  .csprofile-header .cs-mega-nav .nav-dropbtn,
  .topbar:has(.cs-mega-nav) .cs-mega-nav .nav-dropbtn{
    height:38px !important;
    line-height:38px !important;
    padding:0 11px !important;
    border:1px solid rgba(255,255,255,.08) !important;
    border-radius:999px !important;
    background:rgba(255,255,255,.035) !important;
  }

  .mobile-mega-portal{
    position:fixed !important;
    left:10px !important;
    right:10px !important;
    top:118px !important;
    max-height:calc(100vh - 132px) !important;
    overflow:hidden !important;
    z-index:9000 !important;
    border-radius:18px !important;
    box-shadow:0 24px 90px rgba(0,0,0,.62) !important;
  }

  .mobile-mega-head{
    position:sticky !important;
    top:0 !important;
    z-index:2 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:12px !important;
    padding:13px 14px !important;
    border-bottom:1px solid rgba(255,255,255,.08) !important;
    background:rgba(8,13,25,.96) !important;
  }

  .mobile-mega-close{
    width:34px !important;
    height:34px !important;
    border-radius:10px !important;
    border:1px solid rgba(255,255,255,.10) !important;
    background:rgba(255,255,255,.055) !important;
    color:#fff !important;
    font-size:22px !important;
    line-height:1 !important;
  }

  .mobile-mega-body{
    max-height:calc(100vh - 190px) !important;
    overflow:auto !important;
    padding:8px 0 10px !important;
    -webkit-overflow-scrolling:touch !important;
  }
}

@media(max-width:520px){
  .topbar:has(.cs-mega-nav),
  .topbar.csprofile-header{
    padding:9px 10px !important;
  }

  .topbar:has(.cs-mega-nav) .brand-mark,
  .topbar.csprofile-header .brand-mark{
    width:30px !important;
    height:30px !important;
    min-width:30px !important;
  }

  .topbar:has(.cs-mega-nav) .brand-text strong,
  .topbar.csprofile-header .brand-text strong{
    font-size:13px !important;
    letter-spacing:.06em !important;
  }

  .header-search{
    width:42vw !important;
    min-width:118px !important;
  }

  .header-search input::placeholder{
    color:transparent !important;
  }

  .csp-currency-switch{
    height:32px !important;
    border-radius:9px !important;
  }

  .csp-currency-switch select{
    font-size:12px !important;
  }

  .mobile-mega-portal{
    top:112px !important;
    left:8px !important;
    right:8px !important;
    max-height:calc(100vh - 124px) !important;
  }

  .mobile-mega-body{
    max-height:calc(100vh - 180px) !important;
  }
}

/* =========================================================
   DROPDOWN FULL-HEIGHT GRADIENT FIX
   Fixes the nav dropdown edge gradient stopping early when the
   collections/tools panel has more content than the visible area.
   Keep this block at the VERY bottom of csprofile-header.css.
   ========================================================= */

/* Disable the old absolute overlay. It only covers the visible
   dropdown box and can look like the gradient ends before the
   scrolled content ends. */
.cs-mega-nav .nav-mega::before{
  display:none !important;
  content:none !important;
}

/* Put the gradient directly on the scrollable desktop dropdown. */
.cs-mega-nav .nav-mega{
  background:
    linear-gradient(
      90deg,
      rgba(139,92,246,.18) 0%,
      rgba(139,92,246,.08) 2px,
      rgba(8,13,25,.985) 18px,
      rgba(14,20,38,.975) 52%,
      rgba(18,14,38,.965) calc(100% - 18px),
      rgba(245,158,11,.08) calc(100% - 2px),
      rgba(245,158,11,.22) 100%
    ),
    radial-gradient(circle at 18% 0%, rgba(139,92,246,.18), transparent 34%),
    radial-gradient(circle at 90% 8%, rgba(245,158,11,.12), transparent 30%) !important;
  background-attachment:local, scroll, scroll !important;
  border-left:1px solid rgba(139,92,246,.38) !important;
  border-right:1px solid rgba(245,158,11,.28) !important;
}

/* Same fix for the JS mobile portal menu. The portal shell should
   provide the edge colour, while the scrolling body keeps it going
   all the way down through the list. */
.mobile-mega-portal{
  border-left:1px solid rgba(139,92,246,.38) !important;
  border-right:1px solid rgba(245,158,11,.30) !important;
  background:
    linear-gradient(
      90deg,
      rgba(139,92,246,.16) 0%,
      rgba(12,18,32,.985) 18px,
      rgba(12,18,32,.985) calc(100% - 18px),
      rgba(245,158,11,.12) 100%
    ) !important;
}

.mobile-mega-body{
  background:
    linear-gradient(
      90deg,
      rgba(139,92,246,.16) 0%,
      rgba(139,92,246,.07) 2px,
      transparent 18px,
      transparent calc(100% - 18px),
      rgba(245,158,11,.07) calc(100% - 2px),
      rgba(245,158,11,.20) 100%
    ) !important;
  background-attachment:local !important;
}

/* Keep the active/hover item backgrounds from covering the right edge. */
.cs-mega-nav .nav-item,
.mobile-mega-body .nav-item{
  position:relative !important;
  margin-left:2px !important;
  margin-right:2px !important;
  border-radius:10px !important;
}

/* Optional nav styling for the Colours database link. */
.cs-mega-nav .nav-item.nav-colours::before,
.mobile-mega-body .nav-item.nav-colours::before{
  content:"" !important;
  width:10px !important;
  height:10px !important;
  border-radius:50% !important;
  margin-right:9px !important;
  background:linear-gradient(135deg,#3b82f6,#8b5cf6 45%,#ec4899 72%,#facc15) !important;
  box-shadow:0 0 0 1px rgba(255,255,255,.22) !important;
  flex:0 0 10px !important;
}