/* Space Tools navigation: dark glass, spectral edges, per-section light. */
#st-navigation .tabs-island { background:transparent !important; box-shadow:none !important; }
#st-navigation .tabs {
  position:relative; isolation:isolate; overflow:hidden;
  padding:7px !important; gap:5px !important; border-radius:22px !important;
  background:linear-gradient(160deg,#100b19 0%,#050407 45%,#08060d 100%) !important;
  border:1px solid rgba(163,112,231,.27) !important;
  box-shadow:inset 0 1px 0 rgba(227,210,255,.1),inset 0 -1px 0 rgba(113,72,174,.13),0 10px 32px #0008,0 0 30px #713fc511 !important;
}
@property --st-rim-angle { syntax:"<angle>"; initial-value:0deg; inherits:false; }
#st-navigation .tabs::before {
  content:""; position:absolute; z-index:2; pointer-events:none;
  inset:0; padding:1px; border-radius:inherit;
  background:conic-gradient(from var(--st-rim-angle),#75539470 0deg,#a17bceaa 60deg,#8bb8f5bb 120deg,#a17bceaa 180deg,#75539470 240deg,#75539470 360deg);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  animation:st-nav-edge 14s linear infinite;
}
#st-navigation .tabs::after {
  content:""; position:absolute; pointer-events:none; bottom:0; left:25%; right:25%; height:1px;
  background:linear-gradient(90deg,transparent,#8c56d259,transparent);
}
#st-navigation .tabs .tab {
  --nav-color:#ad77f5; --nav-fill:var(--nav-color);
  position:relative; isolation:isolate; overflow:hidden; min-height:44px !important;
  padding:11px 16px !important; border:1px solid transparent !important; border-radius:15px !important;
  color:#a8a1b3 !important; background:transparent !important;
  font-weight:600; letter-spacing:-.015em;
  transition:color .22s ease,background .22s ease,border-color .22s ease,box-shadow .22s ease,transform .22s ease !important;
}
#st-navigation .tabs .tab[href="/"] { --nav-color:#b280ff; --nav-fill:#330066; }
#st-navigation .tabs .tab[href="/upload"] { --nav-color:#38bdf8; }
#st-navigation .tabs .tab[href="/design"] { --nav-color:#c084fc; }
#st-navigation .tabs .tab[href="/library"] { --nav-color:#fbbf24; }
#st-navigation .tabs .tab[href="/stl-library"] { --nav-color:#2dd4bf; }
#st-navigation .tabs .tab[href="/telegram"] { --nav-color:#4169E1; }
#st-navigation .tabs .tab[href="/etsy"] { --nav-color:#FC6A03; }
#st-navigation .tabs .tab::before {
  content:""; position:absolute; pointer-events:none; inset:0;
  background:linear-gradient(110deg,transparent 30%,#ffffff12 48%,transparent 65%);
  transform:translateX(-140%); transition:transform .65s ease;
}
#st-navigation .tabs .tab::after {
  content:""; position:absolute; pointer-events:none; bottom:3px; left:30%; right:30%; height:2px;
  border-radius:99px; background:var(--nav-color); opacity:0; transform:scaleX(.4);
  box-shadow:0 0 9px var(--nav-color); transition:opacity .22s ease,transform .3s ease;
}
#st-navigation .tabs .tab.active {
  background:linear-gradient(145deg,color-mix(in srgb,var(--nav-fill) 46%,#08050d),color-mix(in srgb,var(--nav-fill) 18%,#030305)) !important;
  border-color:color-mix(in srgb,var(--nav-color) 40%,transparent) !important;
  color:#faf7ff !important;
  box-shadow:inset 0 1px 0 #ffffff15,0 0 20px color-mix(in srgb,var(--nav-color) 14%,transparent),0 4px 12px #0005 !important;
  animation:none !important;
}
#st-navigation .tabs .tab.active::after { opacity:.9; transform:scaleX(1); }
#st-navigation .tabs .tab .nav-dot {
  position:relative; width:7px; height:7px; flex:0 0 7px !important;
  background:var(--nav-color) !important;
  box-shadow:0 0 9px color-mix(in srgb,var(--nav-color) 70%,transparent) !important;
  transition:box-shadow .25s ease;
}
#st-navigation .tabs .tab.active .nav-dot { background:#fff !important; box-shadow:0 0 9px var(--nav-color) !important; }
#st-navigation .tabs .tab.active .nav-dot::after {
  content:""; position:absolute; inset:-4px; border:1px solid var(--nav-color); border-radius:50%;
  animation:st-nav-pulse 3.8s ease-out infinite;
}
#st-navigation .tabs .tab:focus-visible { outline:2px solid var(--nav-color); outline-offset:-3px; color:#fff !important; }
@media(hover:hover) {
  #st-navigation .tabs .tab:hover { color:#fff !important; transform:translateY(-1px); background:color-mix(in srgb,var(--nav-color) 9%,#07050b) !important; border-color:color-mix(in srgb,var(--nav-color) 25%,transparent) !important; box-shadow:0 4px 18px #0005 !important; }
  #st-navigation .tabs .tab:hover::before { transform:translateX(140%); }
  #st-navigation .tabs .tab:hover::after { opacity:.7; transform:scaleX(1); }
}
@keyframes st-nav-edge { from { --st-rim-angle:0deg; } to { --st-rim-angle:360deg; } }
@keyframes st-nav-pulse { 0% { transform:scale(.65); opacity:0; } 20% { opacity:.7; } 85%,100% { transform:scale(1.35); opacity:0; } }
@media(max-width:1100px) {
  #st-navigation .tabs-island { padding:6px !important; background:#050407 !important; border:1px solid #9867d838 !important; border-radius:22px !important; }
  #st-navigation .tabs { padding:5px !important; gap:5px !important; border-radius:17px !important; }
  #st-navigation .tabs .tab { min-height:47px !important; padding:12px 16px !important; border-radius:12px !important; }
  #st-navigation .tabs .tab::after { left:auto; right:12px; top:35%; bottom:35%; width:2px; height:auto; }
  #st-navigation .nav-toggle { border:1px solid #aa74ea42 !important; background:linear-gradient(145deg,#180c27,#060409) !important; box-shadow:inset 0 1px 0 #ffffff0c,0 0 16px #7543b51a !important; }
}
@media(prefers-reduced-motion:reduce) {
  #st-navigation .tabs::before,#st-navigation .tabs .tab.active .nav-dot::after { animation:none !important; }
  #st-navigation .tabs .tab,#st-navigation .tabs .tab::before,#st-navigation .tabs .tab::after { transition:none !important; }
  #st-navigation .tabs .tab:hover { transform:none; }
}


/* =========================================================
   SPACETOOLS NAV — FINAL PER-TAB ACTIVE COLORS
   Single source of truth.
   ========================================================= */

/* HOME — PURPLE */
#st-navigation .tabs .tab[href="/"] {
  --nav-color: #b280ff;
  --nav-fill: #5a2a8a;
}

/* 3D MAKER — CYAN / BLUE */
#st-navigation .tabs .tab[href="/upload"] {
  --nav-color: #38bdf8;
  --nav-fill: #12658a;
}

/* AI CHAT — PURPLE / PINK */
#st-navigation .tabs .tab[href="/design"] {
  --nav-color: #c084fc;
  --nav-fill: #713493;
}

/* LIBRARY — GOLD */
#st-navigation .tabs .tab[href="/library"] {
  --nav-color: #fbbf24;
  --nav-fill: #745716;
}

/* STL LIBRARY — TEAL */
#st-navigation .tabs .tab[href="/stl-library"] {
  --nav-color: #2dd4bf;
  --nav-fill: #126d61;
}

/* TELEGRAM — ROYAL BLUE */
#st-navigation .tabs .tab[href="/telegram"] {
  --nav-color: #4169e1;
  --nav-fill: #263f91;
}

/* ETSY — ORANGE */
#st-navigation .tabs .tab[href="/etsy"] {
  --nav-color: #fc6a03;
  --nav-fill: #913d08;
}


/* ---------------------------------------------------------
   ACTIVE TAB
   --------------------------------------------------------- */

#st-navigation .tabs .tab.active {
  color: #fff !important;

  background:
    linear-gradient(
      145deg,
      color-mix(in srgb, var(--nav-fill) 88%, #0a070d),
      color-mix(in srgb, var(--nav-fill) 52%, #050407)
    ) !important;

  border-color:
    color-mix(
      in srgb,
      var(--nav-color) 62%,
      transparent
    ) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    0 0 19px color-mix(
      in srgb,
      var(--nav-color) 20%,
      transparent
    ),
    0 5px 15px rgba(0,0,0,.35) !important;
}


/* bottom accent line */
#st-navigation .tabs .tab.active::after {
  background:
    var(--nav-color) !important;

  box-shadow:
    0 0 8px var(--nav-color) !important;

  opacity: 1 !important;
}


/* active dot */
#st-navigation .tabs .tab.active .nav-dot {
  background: #fff !important;

  box-shadow:
    0 0 4px #fff,
    0 0 10px var(--nav-color),
    0 0 16px color-mix(
      in srgb,
      var(--nav-color) 45%,
      transparent
    ) !important;
}


/* ---------------------------------------------------------
   HOVER — SAME COLOR FAMILY
   --------------------------------------------------------- */

@media (hover:hover) {
  #st-navigation .tabs .tab:hover:not(.active) {
    color: #fff !important;

    background:
      color-mix(
        in srgb,
        var(--nav-color) 12%,
        #08060b
      ) !important;

    border-color:
      color-mix(
        in srgb,
        var(--nav-color) 28%,
        transparent
      ) !important;
  }
}

/* =========================================================
   LIBRARY ACTIVE NAV — FINAL OVERRIDE
   ========================================================= */

#st-navigation .tabs .tab[href="/library"].active {
  background:
    linear-gradient(
      180deg,
      rgba(251,191,36,.22),
      rgba(120,82,10,.13)
    ) !important;

  border-color: rgba(251,191,36,.46) !important;

  color: #fff7d6 !important;

  box-shadow:
    inset 0 0 0 1px rgba(251,191,36,.04),
    0 8px 22px rgba(251,191,36,.10) !important;
}

#st-navigation .tabs .tab[href="/library"].active::after {
  background: #fbbf24 !important;
  box-shadow: 0 0 12px rgba(251,191,36,.45) !important;
}

#st-navigation .tabs .tab[href="/library"].active .nav-dot {
  background: #ffffff !important;
  box-shadow:
    0 0 10px rgba(251,191,36,.85) !important;
}


/* Video Downloader */
#st-navigation .tabs .tab[href="/downloader"] {
  --nav-color: #ff4f72;
  --nav-fill: #7a1737;
}


/* SPACETOOLS_STICKER_STUDIO_V1_NAV */
#st-navigation .tabs .tab[href="/stickers"]{
  --nav-color:#f472b6;
  --nav-fill:var(--nav-color);
}