@vanduo-oss/framework 1.5.1 → 1.6.0

package/dist/vanduo-core.min.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":null,"mappings":"AAYA,uCAOA,qBAMA,oFAOA,yEAOA,4CAMA,qDAaA,oCAUA,gEAMA,0DAUA,0CAQA,qCAKA,gCAKA,uCACI,uCAIA,8JAWJ,gCAKA,iDAOA,gDAeA,qgQAgdA,oEAKA,0EAKA,iEAKA,oEAKA,oEAKA,8DAKA,2DAKA,8DAKA,8DAKA,wDAKA,+DASA,+CAIA,kDAIA,+CAIA,+CAIA,2CAIA,yCAIA,2CAIA,2CAIA,0CAIA,0CAIA,8CAQA,wEAKA,8EAKA,wEAKA,wEAKA,kEAKA,+DAKA,yEAKA,sEASA,m1BAoCA,mCACE,01BA2CF,yUAcA,0WAcA,2PAcA,0WAcA,oVAcA,+VAcA,6PAcA,oVAcA,oVAcA,yPAcA,oVAcA,0WAcA,0WAcA,gWAcA,6PAcA,oVAcA,0PAcA,2PAmBA,kWAcA,4NAcA,iUAcA,sTAcA,uVAcA,iUAwBA,2IAQA,0IAQA,4IAQA,wIAaA,iKAQA,kKAQA,8JAaA,uJAQA,sJAQA,oJAaA,8JAQA,6JAQA,2JAaA,sKAQA,mKAaA,8IAQA,6IAQA,2IAaA,wIAQA,qIAaA,uJAQA,sJAQA,oJAaA,2IAQA,0IAQA,wIAaA,mKAQA,oKAQA,gKAaA,oJAcA,6SAQA,+FAIA,6GAIA,uGAIA,0GAIA,+HAKA,iGAIA,6FAIA,uGAIA,qGAIA,+FAIA,+GAKA,+gCA0DA,oOAUA,8JAaA,qCAIA,qCAIA,qCAIA,oCAIA,oCAIA,sCAKA,iCAMA,0EAMA,qEAKA,6EAMA,sDAOA,uBAKA,kCAKA,8DAKA,wCAMA,6IAWA,oMAUA,uLAWA,wDAOA,qDAIA,uDAIA,qDAKA,6CAIA,6CAIA,iDAIA,6CAIA,6CAIA,+CAIA,+CAIA,+CAIA,+CAIA,+CAKA,uDAIA,yDAIA,yDAIA,6DAIA,qDAIA,kCAIA,+DAOA,oCAIA,oCAIA,sCAIA,iCAKA,qCAIA,2CAIA,mCAKA,qDAIA,uDAIA,qDAIA,yDAIA,2DAIA,uDAKA,kEAIA,8DAIA,gEAIA,4DAIA,8DAIA,gEAUA,2oLA8OA,ylCAoCA,mCACE,gmCAyCF,8gBAgDA,uLASA,kHAOA,mLAUA,iMAUA,kMASA,uBACE,2DAKF,uBACE,4DAMF,iIAQA,oHAOA,mCAKA,mCAKA,8BAKA,mCAKA,mCAKA,8BAKA,mCAKA,mCAKA,8BAKA,oCAKA,oCAKA,gCAKA,kCAMA,sBACE,sCAKA,sCAKA,iCAKA,sCAKA,sCAKA,iCAKA,sCAKA,sCAKA,iCAKA,uCAKA,uCAKA,mCAKA,sCAOF,sBACE,sCAKA,sCAKA,iCAKA,sCAKA,sCAKA,iCAKA,sCAKA,sCAKA,iCAKA,uCAKA,uCAKA,mCAKA,sCAOF,sBACE,sCAKA,sCAKA,iCAKA,sCAKA,sCAKA,iCAKA,sCAKA,sCAKA,iCAKA,uCAKA,uCAKA,mCAKA,sCAOF,uBACE,sCAKA,sCAKA,iCAKA,sCAKA,sCAKA,iCAKA,sCAKA,sCAKA,iCAKA,uCAKA,uCAKA,mCAKA,sCAOF,uBACE,uCAKA,uCAKA,kCAKA,uCAKA,uCAKA,kCAKA,uCAKA,uCAKA,kCAKA,wCAKA,wCAKA,oCAKA,uCAOF,2BAIA,kCAIA,kCAIA,6BAIA,kCAIA,kCAIA,6BAIA,kCAIA,kCAIA,6BAIA,mCAIA,mCAKA,sBACE,8BAIA,qCAIA,qCAIA,gCAIA,qCAIA,qCAIA,gCAIA,qCAIA,qCAIA,gCAIA,sCAIA,uCAMF,sBACE,8BAIA,qCAIA,qCAIA,gCAIA,qCAIA,qCAIA,gCAIA,qCAIA,qCAIA,gCAIA,sCAIA,uCAMF,sBACE,8BAIA,qCAIA,qCAIA,gCAIA,qCAIA,qCAIA,gCAIA,qCAIA,qCAIA,gCAIA,sCAIA,uCAMF,uBACE,8BAIA,qCAIA,qCAIA,gCAIA,qCAIA,qCAIA,gCAIA,qCAIA,qCAIA,gCAIA,sCAIA,uCAMF,uBACE,+BAIA,sCAIA,sCAIA,iCAIA,sCAIA,sCAIA,iCAIA,sCAIA,sCAIA,iCAIA,uCAIA,wCAUF,yBAIA,wBAIA,oBAIA,oBAIA,oBAIA,oBAIA,oBAIA,oBAIA,oBAIA,oBAIA,oBAIA,oBAIA,sBAIA,sBAIA,sBAKA,sBACE,4BAIA,2BAIA,uBAIA,uBAIA,uBAIA,uBAIA,uBAIA,uBAIA,uBAIA,uBAIA,uBAIA,uBAIA,yBAIA,yBAIA,0BAMF,sBACE,4BAIA,2BAIA,uBAIA,uBAIA,uBAIA,uBAIA,uBAIA,uBAIA,uBAIA,uBAIA,uBAIA,uBAIA,yBAIA,yBAIA,0BAMF,sBACE,4BAIA,2BAIA,uBAIA,uBAIA,uBAIA,uBAIA,uBAIA,uBAIA,uBAIA,uBAIA,uBAIA,uBAIA,yBAIA,yBAIA,0BAMF,uBACE,4BAIA,2BAIA,uBAIA,uBAIA,uBAIA,uBAIA,uBAIA,uBAIA,uBAIA,uBAIA,uBAIA,uBAIA,yBAIA,yBAIA,0BAMF,uBACE,6BAIA,4BAIA,wBAIA,wBAIA,wBAIA,wBAIA,wBAIA,wBAIA,wBAIA,wBAIA,wBAIA,wBAIA,0BAIA,0BAIA,2BAYF,4JAQA,4JAQA,8JAaA,uNAYA,sBACE,mDAKF,sBACE,oEASF,sBACE,qFAaF,uBACE,sGAiBF,uBACE,yHAsBF,wIAOA,0JAOA,0JAQA,uIAOA,kJAQA,kJASA,uIAOA,6IAQA,6IAQA,6IASA,sGAOA,sHAOA,oGAQA,uIAOA,kJAQA,kJAQA,kJAQA,kJASA,2IAOA,oJAQA,oJAQA,iJASA,wGAOA,4GAYA,sCAIA,sCAIA,sCAIA,sCAIA,wCAIA,wCAIA,8CAIA,8CAIA,8CAIA,8CAIA,gDAIA,gDAIA,iDAIA,iDAIA,iDAIA,iDAIA,mDAIA,mDAUA,6EAOA,uHAQA,mIASA,6KAMA,6KAMA,iLAMA,2IAMA,0KAMA,yBAEE,+aAiBA,iPAsDF,oHASA,qCACA,2DACA,2DACA,2DACA,2DACA,2DACA,6DACA,6DACA,6DACA,6DAGA,+DACA,mEACA,iEACA,yDACA,6DAIA,2CACA,8DACA,8DACA,8DACA,+DACA,kEACA,gDAEA,6DAMA,sFAQA,yCACA,+DACA,+DACA,+DACA,+DACA,+DACA,iEACA,iEACA,iEACA,iEAEA,mDACA,gDACA,+CACA,kDAMA,qGAUA,2CACA,iEACA,iEACA,iEACA,iEACA,iEACA,mEACA,mEACA,mEACA,mEAEA,oDACA,iDACA,gDACA,qDACA,mDAEA,0DACA,uDACA,sDACA,+DACA,6DACA,6DAEA,8CAMA,gGAQA,mDACA,mDACA,mDAEA,kFAMA,qEAKA,+DASA,kGAQA,oIAWA,oDACA,4DACA,gDACA,qDACA,oDACA,iDACA,qDAMA,iKAWA,gDACA,6CACA,iDACA,iDAEA,+DACA,+DACA,+DACA,iEACA,iEACA,iEAQA,sHASA,wFAKA,mEACA,mEACA,mEAEA,qEACA,qEACA,qEACA,uEACA,uEACA,uEAYA,ukBAqDA,mCAIA,mCAIA,mCAIA,mCAIA,mCAIA,mCAIA,mCAIA,mCAIA,qCAIA,qCAIA,qCAIA,qCAIA,qCAIA,uBAKA,qCAIA,qCAIA,qCAIA,qCAIA,qCAIA,qCAIA,qCAIA,qCAIA,uCAIA,uCAIA,uCAIA,uCAIA,uCAIA,yBAKA,uCAIA,uCAIA,uCAIA,uCAIA,uCAIA,uCAIA,uCAIA,uCAIA,yCAIA,yCAIA,yCAIA,yCAIA,yCAIA,2BAKA,wCAIA,wCAIA,wCAIA,wCAIA,wCAIA,wCAIA,wCAIA,wCAIA,0CAIA,0CAIA,0CAIA,0CAIA,0CAIA,4BAKA,sCAIA,sCAIA,sCAIA,sCAIA,sCAIA,sCAIA,sCAIA,sCAIA,wCAIA,wCAIA,wCAIA,wCAIA,wCAIA,0BAKA,oCAIA,oCAIA,oCAIA,oCAIA,oCAIA,oCAIA,oCAIA,oCAIA,sCAIA,sCAIA,sCAIA,sCAIA,sCAKA,sCAIA,sCAIA,sCAIA,sCAIA,sCAIA,sCAIA,sCAIA,sCAIA,wCAIA,wCAIA,wCAIA,wCAIA,wCAKA,wCAIA,wCAIA,wCAIA,wCAIA,wCAIA,wCAIA,wCAIA,wCAIA,0CAIA,0CAIA,0CAIA,0CAIA,0CAKA,yCAIA,yCAIA,yCAIA,yCAIA,yCAIA,yCAIA,yCAIA,yCAIA,2CAIA,2CAIA,2CAIA,2CAIA,2CAKA,uCAIA,uCAIA,uCAIA,uCAIA,uCAIA,uCAIA,uCAIA,uCAIA,yCAIA,yCAIA,yCAIA,yCAIA,yCAKA,wBAIA,4BAIA,wCAIA,0BAIA,0BAIA,kCAIA,oCAIA,wBAIA,sCAIA,wBAIA,sCAKA,sBACE,2BAIA,+BAIA,2CAIA,6BAIA,2BAIA,yCAIA,4BAKF,sBACE,2BAIA,+BAIA,2CAIA,6BAIA,2BAIA,yCAIA,4BAKF,sBACE,2BAIA,+BAIA,2CAIA,6BAIA,2BAIA,yCAIA,4BAKF,uBACE,2BAIA,+BAIA,2CAIA,6BAIA,2BAIA,yCAIA,4BAMF,iCAIA,qCAIA,qCAIA,+BAIA,iCAKA,aAIA,iBAIA,mBAIA,eAKA,mBAIA,mBAIA,sBAIA,kBAIA,wBAIA,6BAIA,qBAIA,4BAKA,4BAIA,4BAIA,2BAIA,2BAIA,2BAKA,oBAIA,oBAIA,uBAIA,mBAIA,yBAIA,8BAIA,sBAIA,6BAKA,6BAIA,iCAIA,mCAIA,iCAIA,iCAIA,qCAIA,qCAIA,iCAIA,qCAIA,qCAKA,0CAKA,kEAKA,6CAKA,qEAKA,wCAKA,8CAKA,gEAKA,oCAIA,gCAIA,iCAIA,qCAIA,mCAIA,0CAIA,sCAIA,uCAIA,+CAIA,6CAIA,6CAIA,eAIA,qBAIA,qBAKA,kCAIA,kCAIA,kCAIA,kCAIA,kCAIA,kCAIA,kCAIA,kCAIA,oCAIA,oCAKA,sBACE,gCAIA,gDAIA,mCAIA,oDAKF,sBACE,gCAIA,gDAIA,mCAIA,oDAKF,sBACE,gCAIA,gDAIA,mCAIA,oDAKF,uBACE,gCAIA,gDAIA,mCAIA,oDAMF,sBACE,qCAIA,qCAIA,qCAIA,qCAIA,qCAIA,qCAIA,qCAIA,qCAIA,uCAIA,wCAKF,sBACE,qCAIA,qCAIA,qCAIA,qCAIA,qCAIA,qCAIA,qCAIA,qCAIA,uCAIA,wCAKF,sBACE,qCAIA,qCAIA,qCAIA,qCAIA,qCAIA,qCAIA,qCAIA,qCAIA,uCAIA,wCAKF,uBACE,qCAIA,qCAIA,qCAIA,qCAIA,qCAIA,qCAIA,qCAIA,qCAIA,uCAIA,wCAMF,sCAIA,kCAKA,4BAIA,6BAKA,+BAIA,+BAIA,uCAIA,yBAIA,yBAIA,yBAKA,8BAIA,8BAIA,4BAIA,8BAKA,2DAKA,gCAKA,uEAKA,6EAKA,gFAKA,0EAKA,wCAKA,wCAKA,wCAMA,+CAKA,gEAMA,0DAMA,gEAMA,gEAMA,iEAMA,mEAMA,oDAKA,sHAMA,0HAMA,4HAMA,wHAOA,wCACA,wCACA,wCACA,wCACA,wCACA,wCACA,2CACA,2CACA,2CACA,2CACA,2CACA,2CACA,2CACA,0CACA,0CACA,yCAGA,sBACE,sCAIA,sCAIA,sCAIA,sCAIA,sCAIA,sCAIA,sCAIA,0BAIA,wCAIA,wCAIA,2CAIA,2CAIA,uCAIA,uCAIA,uCAIA,uCAIA,uCAIA,uCAIA,wCAKF,sBACE,sCAIA,sCAIA,sCAIA,sCAIA,sCAIA,sCAIA,sCAIA,0BAIA,wCAIA,wCAIA,2CAIA,2CAIA,uCAIA,uCAIA,uCAIA,uCAIA,uCAIA,uCAIA,wCAKF,sBACE,sCAIA,sCAIA,sCAIA,sCAIA,sCAIA,sCAIA,sCAIA,0BAIA,wCAIA,wCAIA,2CAIA,2CAIA,uCAIA,uCAIA,uCAIA,uCAIA,uCAIA,uCAIA,wCAKF,uBACE,sCAIA,sCAIA,sCAIA,sCAIA,sCAIA,sCAIA,sCAIA,0BAIA,wCAIA,wCAIA,2CAIA,2CAIA,uCAIA,uCAIA,uCAIA,uCAIA,uCAIA,uCAIA,wCAMF,yMAYA,2FAQA,8IAYA,uKAaA,uFAKA,8FAKA,sHAMA,8BAIA,kCAIA,gCAIA,oCAKA,4CAIA,4CAIA,8CAIA,yCAKA,4EAMA,mCAIA,iCAIA,8DAMA,6CAIA,mDAIA,2CAKA,kCAIA,kCAKA,sBACE,iCAIA,qCAIA,oCAKF,sBACE,iCAIA,qCAIA,oCAKF,sBACE,iCAIA,qCAIA,oCAKF,uBACE,iCAIA,qCAIA,oCAMF,qBAIA,wBAIA,uBAIA,wBAIA,uBAKA,eAIA,iBAIA,iBAIA,iBAIA,iBAIA,iBAIA,qBAIA,uBAKA,mCAIA,+BAIA,6BAIA,6BAIA,yCAKA,sCAIA,gCAIA,sCAIA,kCAIA,oCAKA,yCAIA,yCAKA,+BAIA,8BAIA,gCAIA,6BAIA,kCAIA,6CAWA,4IAUA,4LAUA,sLAUA,8LAUA,gLAkBA,g1BA2BA,gCAIA,6CAIA,uCAIA,6CAIA,6CAIA,6CAIA,+CAIA,mDAKA,uDAIA,uDAIA,uDAIA,mDAKA,6BAIA,4CAIA,yCAIA,4CAIA,4CAIA,4CAUA,2GAQA,gGAOA,2JAQA,4FAKA,4FAKA,sFAMA,oHAKA,oHAKA,8GAMA,iFAKA,kFAKA,kFAKA,yGAKA,0GAKA,0GAQA,42BAsBA,mCACE,21BA0BF,kpCA4BA,oCACA,gHAIA,2EACA,gHAIA,+EACA,iFAGA,yEACA,+EACA,iFACA,uFACA,6EAGA,2CACA,8EACA,2FAKA,iGAKA,4FAMA,oDACA,2DACA,qDACA,6DAGA,8CACA,8CACA,8CACA,+CACA,8CACA,8CACA,8CACA,8CACA,8CAGA,uCACE,8JAgBF,4BACA,8BACA,+BACA,8BACA,+BACA,8BACA,iCACA,gCACA,iCACA,gCAGA,8BACA,mCACA,mCACA,qCACA,qCACA,qCACA,uCAGA,sCACA,wCACA,wCACA,wCACA,wCACA,wCACA,0CACA,0CACA,0CACA,0CACA,0CAEA,uCACA,yCACA,yCACA,yCACA,yCACA,yCACA,2CACA,2CACA,2CACA,2CACA,2CAGA,4CACA,8CACA,2CACA,6CACA,6CACA,+CACA,4CACA,8CAGA,oCACA,iCACA,0CACA,oCACA,gDACA,uCACA,4CACA,gCACA,sCAQA,oEAOA,sBAKA,uCAIA,mCAIA,iCAIA,iCAIA,6CAKA,+CAIA,yCAIA,+CAIA,2CAIA,6CAIA,mDAIA,qDAIA,yDAIA,2DAKA,iEAMA,uFASA,sCAIA,yCAIA,qCAIA,0CAIA,yCAIA,qCAIA,0CAIA,oDAKA,uDAIA,8BAIA,+KAUA,kEAMA,mEAMA,6DAOA,wDAYA,kVAoBA,yIASA,kLASA,sLAQA,2FAMA,mKAYA,kIAOA,2NAWA,iIAKA,qGAKA,4HAQA,oJASA,oLAUA,kMAUA,oLAUA,uLAUA,sKAUA,+JAWA,6EAMA,wKAcA,wHAQA,iHAQA,oGAOA,yBAEE,uHAQA,8GAOF,yBAEE,uHAQA,8GAOF,yBAEE,uHAQA,8GAOF,0BAEE,uHAQA,8GAQF,iGAMA,sIASA,gMAMA,yJAOA,mRAWA,gKAOA,8IAMA,qKAKA,kGAMA,mCAEE,+RAWA,wLAOA,0JAMA,iLAKA,+GAwBF,8CACA,8CACA,8CACA,8CACA,8CACA,8CACA,8CACA,8CACA,8CACA,8CAEA,qCACA,qCACA,qCACA,qCACA,qCACA,qCACA,qCACA,qCACA,qCACA,qCAMA,oDACA,oDACA,oDACA,oDACA,oDACA,oDACA,oDACA,oDACA,oDACA,oDAEA,2CACA,2CACA,2CACA,2CACA,2CACA,2CACA,2CACA,2CACA,2CACA,2CAMA,oDACA,oDACA,oDACA,oDACA,oDACA,oDACA,oDACA,oDACA,oDACA,oDAEA,2CACA,2CACA,2CACA,2CACA,2CACA,2CACA,2CACA,2CACA,2CACA,2CAMA,gDACA,gDACA,gDACA,gDACA,gDACA,gDACA,gDACA,gDACA,gDACA,gDAEA,uCACA,uCACA,uCACA,uCACA,uCACA,uCACA,uCACA,uCACA,uCACA,uCAMA,kDACA,kDACA,kDACA,kDACA,kDACA,kDACA,kDACA,kDACA,kDACA,kDAEA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCAMA,gDACA,gDACA,gDACA,gDACA,gDACA,gDACA,gDACA,gDACA,gDACA,gDAEA,uCACA,uCACA,uCACA,uCACA,uCACA,uCACA,uCACA,uCACA,uCACA,uCAMA,gDACA,gDACA,gDACA,gDACA,gDACA,gDACA,gDACA,gDACA,gDACA,gDAEA,uCACA,uCACA,uCACA,uCACA,uCACA,uCACA,uCACA,uCACA,uCACA,uCAMA,gDACA,gDACA,gDACA,gDACA,gDACA,gDACA,gDACA,gDACA,gDACA,gDAEA,uCACA,uCACA,uCACA,uCACA,uCACA,uCACA,uCACA,uCACA,uCACA,uCAMA,oDACA,oDACA,oDACA,oDACA,oDACA,oDACA,oDACA,oDACA,oDACA,oDAEA,2CACA,2CACA,2CACA,2CACA,2CACA,2CACA,2CACA,2CACA,2CACA,2CAMA,oDACA,oDACA,oDACA,oDACA,oDACA,oDACA,oDACA,oDACA,oDACA,oDAEA,2CACA,2CACA,2CACA,2CACA,2CACA,2CACA,2CACA,2CACA,2CACA,2CAMA,kDACA,kDACA,kDACA,kDACA,kDACA,kDACA,kDACA,kDACA,kDACA,kDAEA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCAMA,gDACA,gDACA,gDACA,gDACA,gDACA,gDACA,gDACA,gDACA,gDACA,gDAEA,uCACA,uCACA,uCACA,uCACA,uCACA,uCACA,uCACA,uCACA,uCACA,uCAMA,gDACA,gDACA,gDACA,gDACA,gDACA,gDACA,gDACA,gDACA,gDACA,gDAEA,uCACA,uCACA,uCACA,uCACA,uCACA,uCACA,uCACA,uCACA,uCACA,uCASA,ufAoCA,0fAqBA,kCAKA,qEAMA,iEAKA,mFAKA,wGASA,0HAMA,0LAMA,yLAOA,gIAMA,gMAMA,+LAOA,0HAMA,0LAMA,yLAOA,0HAMA,0LAMA,yLAOA,oHAMA,oLAMA,mLAOA,iHAMA,iLAMA,gLAOA,0GAMA,gLAMA,kHAMA,wLAMA,wHAMA,8LAMA,kHAMA,wLAMA,kHAMA,wLAMA,4GAMA,kLAMA,yGAMA,+KAOA,sFAMA,yJAKA,iJAMA,8FAMA,iKAKA,oKAKA,kGAMA,uKAKA,0KAKA,8FAMA,iKAKA,oKAKA,8FAMA,iKAKA,oKAKA,0FAMA,2JAKA,8JAKA,wFAMA,wJAKA,2JAMA,mHAMA,wKAMA,4IAMA,2JAOA,2JAOA,oDAOA,yJAYA,6FAQA,+FASA,8BAIA,mCAKA,6CASA,qEAMA,yNAcA,8NASA,6FAKA,oDAWA,m2BA2CA,oGAKA,mCACE,2GAWF,iqBA0BA,6WAgBA,+EAMA,+IAUA,ggBAkBA,qIAOA,kFAMA,qJASA,mDAMA,yNAeA,yNAeA,mJAYA,2OAcA,gHAOA,4LASA,yJAYA,mPAcA,0HAOA,wMASA,sMAUA,oFAMA,0DAKA,4DAMA,uCAKA,0CAKA,0HAQA,kFAMA,sDAIA,gIAQA,sDAIA,oHASA,4DAMA,iGAQA,0JAOA,yIAMA,+cAgBA,oHAKA,mHAKA,4GAKA,6GAWA,sbAmBA,sPAiBA,yaAgBA,6KAMA,uRAaA,gKAOA,6HAMA,uKAMA,qHASA,0GAUA,8TAcA,8YAgBA,iPAOA,uXAeA,+QAOA,8WAeA,iPAOA,mKAOA,uQASA,6QASA,uOAQA,6QASA,uOASA,kFAOA,kEAQA,iWAqBA,iPAeA,oXAgBA,kHAKA,gSAaA,uJAOA,oHAMA,8JAMA,kHASA,uGAUA,qTAcA,+VAgBA,mLAMA,uXAeA,qOAOA,uJAOA,wPASA,2PASA,qNAQA,yNAQA,2PASA,qNAQA,yNASA,+EAOA,+DAQA,0cAiBA,+DAIA,mCACE,sEAMF,sEAQA,sMAaA,yEAKA,4LAKA,oLAMA,2MASA,uNAUA,8OAWA,kMAQA,8cAeA,6HAMA,6UAYA,qHAKA,gGAMA,iIAKA,yHAMA,8FAKA,0IAKA,kIAKA,mQAOA,oKAMA,8FAKA,0IAKA,kIAKA,mQAOA,oKAOA,sSAaA,wKASA,wIAUA,woBAiCA,8DAIA,mCACE,qEAMF,oPAeA,0EAOA,2OAUA,gUAcA,4FAIA,0JAIA,kIAKA,8HAUA,oHASA,yGAWA,gOAaA,6SAcA,+WAgBA,yLAMA,8OAMA,2OAOA,6JAOA,oNAQA,uGAKA,4HAMA,sIAMA,qTAQA,2KAOA,kOAQA,uOAQA,6RAMA,2KAOA,kOAQA,uOAQA,6RAOA,yPAMA,yPAMA,iPAQA,yIAOA,iGASA,28BAuBA,4EAIA,kIAMA,+FASA,+9BAyBA,yaAUA,0ZAWA,+IAOA,yJAQA,+TAUA,+TAWA,6OAUA,4IAQA,4SAgBA,8CAIA,iRAaA,uHAMA,2JAMA,gIAOA,yNASA,uIAKA,yLASA,2ZAQA,ybAQA,wcASA,sBAEE,mVAsBA,mKAiBF,wdA4BA,sOAUA,mCACE,6OAWF,8SAaA,qNASA,qLAWA,wIAKA,uGAMA,sFAOA,mVASA,qIAKA,qDAIA,qDAKA,uDAKA,mDAIA,mDAKA,mVASA,0IAKA,qDAIA,qDAKA,uNAOA,oIAKA,yIAMA,4OAOA,8IAKA,kEAOA,4IAOA,0CAKA,yHAQA,8DAKA,yCAKA,gJAOA,sDAIA,sDAKA,4CAIA,uGASA,mIAOA,sIAOA,kGAKA,yIAMA,qFAMA,4GAMA,gJAKA,sDAKA,2DAOA,sBACE,kCAIA,gCAoBF,8JAWA,4UAeA,sEAIA,uEAIA,uEAIA,uEAIA,uEAIA,uEAIA,4GAQA,oIAMA,4EAKA,0EAKA,kEAKA,+IAOA,kFAKA,mFAKA,kIASA,6HAQA,+PAaA,8HASA,oHAOA,0DAKA,iDAKA,oCACE,sbAqBA,6UAaA,qKAOA,wJAMA,oIAMA,sHAMA,yHAQA,mIAUA,wIAQA,gFAKA,sGAMA,kFAKA,mHAOF,uCACE,6HAaF,wvBA2BA,kMAOA,mCACE,yMASF,sSAaA,2bAcA,gIASA,2QAaA,uBACE,uDAKF,uBACE,wDAMF,6RAcA,0EAMA,2GAMA,+DAOA,0HAUA,8JAQA,4JAOA,uGAKA,uHAMA,4LAcA,4KAUA,oIAKA,sGAKA,wIAMA,4EAOA,qCAKA,6DAOA,oLAaA,qDAMA,+HAMA,wEAIA,kHAKA,wDAIA,mKAMA,uFAIA,gIAMA,iEAKA,qIAKA,iIAMA,sHAUA,8EAMA,4GASA,iEAKA,oFAQA,sCAIA,uTAgBA,+CAIA,gSAeA,mKAOA,2HAKA,0GAKA,qDAIA,6JAOA,sBACE,uCAIA,gIAUA,mEAKA,2FAKA,iDAKA,2GASA,4DAIA,2CAMF,yBACE,iDAKA,kTAgBA,8MAOA,gCAIA,sFAIA,gCAKA,0GAMA,0DAIA,0EAIA,yJAWA,oEAIA,kHAOA,+DAMF,8DAKA,oDAIA,iDAKA,kCAUA,miBAoBA,uMAOA,mCACE,8MASF,mMAQA,mLASA,kEAIA,8CAKA,oKASA,qIAQA,wFAKA,wGAOA,mDAMA,yCAIA,gDAKA,uLASA,0CAIA,4CAKA,4HAmBA,sBACE,oDAIA,oDAIA,qDAMF,4HAMA,0EAIA,gDAIA,0EAIA,4EAMA,+EAIA,+EAKA,8DAKA,oCAIA,gDAKA,wJAOA,yFAMA,wDAMA,uOAaA,6HAMA,kFAKA,kHAMA,yBACE,0EAMA,wEAOF,6KAUA,oJAOA,4MAWA,2GAMA,wFAKA,kFAQA,2GAQA,mJAQA,8EAKA,6GAMA,iFAQA,4DAIA,kGAKA,mCACE,kEAIA,yGAWF,0aAsBA,qRAYA,oDAKA,4FAIA,oPASA,0HAOA,4HAMA,wIAQA,0FAKA,iIAOA,uFAMA,wFAOA,kDAIA,sDAIA,oDAIA,iDAIA,iDAKA,qIAKA,sIAMA,yBACE,qDAIA,iLAYF,8wBAmCA,yGAKA,mCACE,gHAOF,spBAuBA,yPASA,iCAKA,oFASA,2FAKA,mRAUA,8FAKA,sRAUA,4FAKA,6TAUA,6FAKA,8TASA,mJAKA,yJAKA,iKAKA,mKAMA,sIAMA,qJAKA,2JAKA,mKAKA,qKAMA,oGAKA,kJAKA,wJAKA,gKAKA,kKAMA,8IAMA,8JAKA,oKAKA,gMAKA,kMAKA,8IAMA,8JAKA,oKAKA,gMAKA,kMAMA,iCAKA,2DAWA,wmBAoBA,0NAOA,mCACE,iOASF,yEAQA,mOAUA,2EAMA,kgBAqBA,4GAKA,uIAQA,gSAQA,iMAOA,qXAmBA,2IAQA,iPAYA,mMAQA,iIAMA,wHAQA,yNASA,iHAOA,8FAKA,kLAOA,yKAOA,iNAMA,qOAQA,2NAUA,qHAKA,yLAOA,oOAOA,wUAOA,4UAWA,2MAMA,6HAKA,6MAMA,8HAMA,4GAMA,mHAKA,yBACE,+JAMA,8EAYF,4qBA2BA,2GAKA,mCACE,kHAOF,oDAMA,yHAQA,2QAcA,wEAKA,+kBAoBA,2OAQA,0EAOA,yHAQA,sEAIA,qHAQA,wEAIA,+HASA,uEAKA,yGAQA,sDAKA,iEAYA,6WAiBA,iKAOA,8FAKA,4LAOA,wJASA,kHAQA,0SAaA,0CAKA,wCAMA,kFAKA,sIAIA,mFAKA,wIAKA,0FAMA,uCAIA,wFAOA,+NAeA,yBACE,qEAaF,8lBA4BA,uDAIA,mCACE,8DAMF,kOAaA,yGAKA,2DAMA,2OAgBA,mFAQA,sQAWA,sDAKA,2SAcA,wOASA,oTAUA,kLASA,mWAiBA,uHAQA,8FAMA,gFAOA,uUAYA,4BAKA,gHAKA,gHAKA,gHAKA,qGAQA,4EAOA,+DAKA,kEAMA,mFAMA,mGAOA,yBACE,kFAMA,8EAOA,qFAQF,4DAIA,yEAIA,oDAIA,oEAKA,iDAUA,ubAiCA,2GAKA,yHAKA,mCACE,iHAKA,gIAOF,+XAeA,uFAKA,2FAKA,uFAKA,0FAKA,mFAKA,iFAKA,yFAKA,qFAMA,sHAKA,sHAMA,+IAMA,2DAKA,uGAKA,6GAKA,uGAKA,uGAKA,iGAKA,8FAKA,uGAKA,sGAMA,8IASA,gEAMA,+DAMA,qEAMA,oEAOA,6CAMA,mHAgBA,grBAyBA,8JAMA,mCACE,qKAQF,iMAUA,iVAYA,kDAIA,mGAKA,uJAMA,+EAOA,sQAaA,kEAMA,4EAMA,6CAKA,yLAQA,8EAIA,sIAOA,4EAMA,mEAKA,qFAQA,sHAQA,6WAaA,qIAMA,sGAIA,0EAIA,mGAIA,qHAIA,4DAKA,4HAIA,6HAKA,wEAIA,uEAIA,4HAIA,6HAKA,wEAIA,yEAKA,yBACE,mCAIA,4HAcF,wxBA0BA,8JAMA,mCACE,qKAQF,mFASA,0DAKA,8CAIA,8CAKA,ydAgBA,wLAOA,0FAOA,2NAQA,wMAOA,+OAUA,iFAKA,gFAKA,8EAMA,4JAQA,8JAKA,8JAMA,6CAIA,8CAKA,yBACE,qDAKA,mCAIA,qFAcF,ypBA6BA,yGAKA,mCACE,gHAOF,+QAaA,4DAMA,qTAiBA,2CAKA,8DAMA,iDAaA,mJAKA,+FAKA,wDAKA,iDAKA,sNASA,oIAOA,0SAeA,yEAOA,sFAQA,qJAOA,mDAOA,oOAUA,6CAKA,+BAIA,oVAaA,0HAMA,gGAKA,8KAOA,0IAQA,gDAIA,gFAIA,kGAIA,gDAIA,gFAIA,kGAMA,uTAiBA,0DAKA,oHAYA,0EAMA,yHAYA,gFAMA,gEAMA,mDAKA,mCAKA,yBACE,2BAKA,4DAMA,6DAIA,iDAIA,yDAeF,gVAWA,sEACA,wEACA,sEACA,sEAGA,iEACA,qEACA,iEACA,iEACA,6DACA,2DACA,4CACA,6DAGA,+HASA,mFAMA,uCACE,uCAWF,44BA8BA,sRAQA,mCACE,6RAUF,yRAWA,6IAMA,6IAMA,6IAMA,sJAOA,iIAOA,8DAMA,sGASA,gFAMA,yBAKA,yCAIA,uOAeA,gCAIA,2DAMA,8GAOA,4DAMA,2IAMA,2IAMA,8IAMA,qKAOA,kIAOA,yCAKA,qEAKA,yEAMA,qHAMA,uCACE,iCAUF,qdAoBA,wDAIA,mCACE,+DAMF,6YAkBA,0HAMA,0HAOA,mGAMA,yGAMA,mGAMA,sGAMA,yHAQA,0FAOA,4FAMA,oJAOA,oJAOA,oJAOA,4IAOA,wIAQA,4HAWA,sIASA,6NAWA,4DAKA,yRAoBA,gDAKA,oFAQA,gDAKA,kGAQA,mFAMA,mFAOA,gEAQA,uCACE,yDAaF,ghBAqBA,gJAMA,mCACE,uJAQF,6XAmBA,6EAQA,8DAMA,2HAMA,2HAMA,2HAMA,2HAMA,2HAMA,+HAOA,6DAIA,kCAKA,uNAaA,0JAOA,kUAgBA,yFACA,2FACA,qFACA,qFAGA,gGAIA,wGAIA,wGAIA,oGAKA,gEAKA,yFAKA,qDAIA,4CAKA,kDAIA,iDAKA,8WAeA,mFAKA,wFAKA,4FAKA,wFAKA,2FAKA,oFAKA,kFAMA,sFAMA,+DAKA,sHAOA,uCACE,6CAKA,yDAWF,uJAQA,2GAKA,mCACE,kHAOF,qIAQA,oNAiBA,0DAOA,6DAMA,uDAMA,mCACA,oCACA,oCACA,mCAGA,gEAMA,8CAMA,6DAMA,kDACA,8CACA,kDACA,8CACA,8CAGA,0CAKA,kCACA,kCAGA,uFAMA,8CAKA,8CAMA,iHAOA,sFAOA,oEAMA,yDAIA,gEACA,gEACA,gEACA,gEAGA,8DAMA,gEAMA,yDAIA,mFAQA,kGAOA,6GAOA,yDAKA,+BACA,6BACA,kCACA,6BACA,kCACA,6BAGA,uCAKA,sEAIA,sCAIA,0DAUA,uCACE,gEAMA,mCAUF,geAqBA,6DAIA,mCACE,oEAMF,uDAOA,+IAWA,gCAKA,saAiBA,0FAKA,yFAMA,2IAOA,iJASA,iCAKA,0BAIA,qCAKA,6DAKA,+CAKA,2JAQA,yFAKA,4EAIA,2LAOA,8FAKA,yDAKA,yFAKA,8JAOA,kKAMA,4FAMA,0RAQA,+KAQA,6EAIA,mDAKA,wHAKA,wHAMA,sCAIA,kCAIA,6DAMA,oDAKA,mDAKA,qCAIA,6IAQA,iEAKA,wKAQA,wKAMA,yEAOA,yDAOA,wQAcA,qHAMA,wHAOA,iEAKA,uCACE,yDAWF,uVAiBA,4FAKA,mCACE,mGAOF,4IAWA,iEAMA,iEAMA,2FAOA,uEAMA,uEAMA,iGAQA,ucAkBA,sNASA,sDAMA,yDAMA,4GAKA,8HAKA,kIAMA,qEAIA,4EAIA,gFAIA,uEAIA,+EAIA,kFAKA,6EAQA,qCAMA,gFAMA,kFAMA,sUAkBA,2DAKA,mEAIA,oEAOA,gEAIA,+DAIA,gEAIA,+DAIA,4DAIA,2DAIA,0DAIA,yDAKA,2IAMA,mEAIA,4EAIA,8IAMA,mEAIA,+EAIA,qIAMA,iEAIA,0EAIA,kIAMA,gEAIA,yEAKA,gOAWA,qDAUA,0DAMA,6DAKA,uCACE,2DAKA,mEAQA,mCAUF,ulCAwCA,8kBAuBA,mCACE,qlBA2BF,sLAaA,wXAgBA,qGAKA,sGAMA,iGAOA,4JAWA,iGAIA,2GAQA,sCAIA,4HAMA,8EAQA,yPAcA,iGAQA,mVAeA,kGAKA,mGAKA,kGAMA,4IAQA,4XAeA,mGAKA,mGAMA,sEAMA,shBAWA,2GAKA,mWAIA,iHAKA,uEAIA,qHASA,wDASA,0LASA,8CAIA,oQAcA,sDAIA,yDAIA,wQAYA,0EAIA,6CAMA,kKAYA,mCACA,qCACA,yCACA,6DAGA,6CACA,6CACA,uCACA,qCAGA,2CACA,6CACA,yCACA,6CACA,mDAMA,yEAIA,2DAQA,2EAMA,6DAIA,oFAKA,sEAQA,sFAKA,mIAUA,6DAIA,qEAQA,sBACE,+DAMA,+GAQA,sDAIA,+CAKA,qCAIA,+CASF,aACE,0DAKA,qEAKA,iDAIA,sEAKA,qIAaF,uCACE,iHAaF,kLAQA,iKAQA,0PAcA,8EACA,8EACA,0EACA,wEAGA,yCACA,yCACA,0CACA,0CAGA,wHAOA,sKAeA,yFAIA,0FAMA,iHAKA,8FAMA,uCACE,mGAOF,iEAIA,mCACE,wEAUF,8HAQA,mSAUA,uDAKA,gEAMA,2OAYA,8CAIA,4CAIA,yGAMA,kNAUA,6DAMA,oEACA,sEACA,oEACA,oEAGA,+DACA,+DACA,2DACA,yDACA,0CACA,2DAGA,2GAQA,2HASA,iGAQA,yMASA,sEAIA,sEAIA,uEAIA,oEAIA,6FAMA,gLASA,8HASA,kFAIA,mCACE,yFAMF,uCACE,2HAeF,0EAMA,oEAOA,8GAMA,8FAMA,+HAQA,4GAOA,0DAKA,oHAMA,yGAMA,mFAKA,kFAMA,2CAKA,qCAQA,+TAiBA,6dAoBA,6FAUA,0KAQA,8HAOA,8CAIA,yGAKA,kCAIA,uCAIA,mJASA,4EAMA,8MAWA,uEAKA,4FAKA,yGAMA,8EAMA,0PAaA,2JASA,sFAKA,0GAKA,8FAKA,yGAMA,oCAKA,mSAeA,+HAIA,8HAIA,kDAIA,uEAKA,oGAMA,kIAQA,+RAYA,+DAIA,8HAOA,kCAKA,6PAeA,6HAIA,4HAIA,gDAIA,qEAKA,kGAMA,gIAOA,8BAQA,8EAMA,gSAeA,8IAMA,wGAKA,iDAIA,sKAUA,wdAoBA,wFAMA,sEAQA,0CAIA,+CAIA,mMAUA,mMAcA,oDAQA,gFAMA,uOAaA,0GAKA,8FAKA,yGAKA,2JASA,iJASA,+DAIA,2GAMA,yEAKA,sEAQA,2CAKA,2SAeA,6GAIA,4GAIA,0DAIA,+EAKA,4GAMA,0IAWA,mCAIA,wDAKA,uIAaA,yCAKA,qQAeA,2GAIA,0GAIA,wDAIA,6EAKA,0GAMA,wIAOA,sCAQA,wGAKA,0HAKA,+QASA,mCACE,8GAKA,sIAKA,wSAcF,yBACE,2RAiBA,qHAOA,yDAKA,0CASA,iTAiBA,uEAKA,gMAaA,qEAMF,sBACE,oEAaF,wDAIA,mEAIA,8GAKA,gGAQA,2KASA,sIAOA,yRAcA,sIAMA,6FAUA,uVASA,8HAKA,mCACE,qIAMF,0DAKA,kYAiBA,oMAQA,ysBA0BA,4IAMA,+JAQA,yZAkBA,gRASA,2PAYA,6VA0BA,mRAUA,2sBAkBA,iFAMA,mhBAoBA,+DAMA,waAaA,mHAMA,sMAYA,wfAuBA,6GAMA,gEAKA,uFAMA,+WAgBA,wFAMA,+EAMA,uCAEE,+HAQA,4CAMF,yBACE,+FAMA,+EAUF,qHAOA,0JASA,wOASA,+GAMA,wFAKA,iIAKA,2DAiBA,wjCAiCA,sHAKA,mCACE,6HAUF,oDASA,+EAOA,wLAYA,2IAMA,mfAeA,uEAKA,6JAOA,2FAMA,6fAqBA,kFAQA,6ZAkBA,6CAKA,qEAUA,mMAWA,kFAIA,gIAOA,kPAcA,iDAKA,yKAQA,gHAMA,mMAWA,sLAYA,oFAMA,2EAMA,uJAOA,sFASA,wFAMA,gOAUA,wDAUA,iNAWA,sWAeA,sEAUA,0KAKA,yJAKA,qKAKA,sKAKA,2KAKA,+JASA,oJAcA,sBACE,kCAIA,oFAQA,qCAIA,6FAKA,mCAIA,qJAWF,8GAYA,uCACE,sCAIA,wDAUF,23BA4BA,2XAUA,mCACE,kYAYF,oXAeA,sHAKA,qCAIA,0CAIA,qDAKA,+OAWA,oNAYA,wDAIA,0DAKA,iUAYA,sHAKA,wKAQA,8IASA,mNAYA,6QAWA,kGAMA,yUAcA,2HAKA,oPAUA,0CAKA,4OASA,mHASA,mCAKA,gKAUA,yBACE,sCAIA,kCAIA,2CAKA,8CAOF,0HAOA,+FAYA,kFAMA,8BACE,6DAKA,4GAMA,2CAIA,qEAKA,0FAYF,qmBAkCA,4HAMA,mCACE,mIASF,mNAaA,kKAQA,oEAOA,+GAQA,2DAOA,6CAIA,iLASA,uFAQA,ibAsBA,4IAOA,mFAKA,0HAMA,iDAIA,kDAMA,8OAcA,kOAWA,8CAIA,gGAKA,yGAOA,mJAUA,0GAOA,+FASA,uEAKA,mEAKA,yEAOA,sBACE,kEAMA,iDAWF,keAyBA,kKAMA,mCACE,yKASF,4fAmBA,iIAUA,8LAWA,iDAMA,2RAmBA,iCAIA,wJAUA,kJAOA,yIAOA,4IAOA,+IASA,4GAKA,wFAWA,qOAQA,mFAIA,mCACE,0FAOF,mMASA,6PAOA,qJAQA,8IAMA,kDASA,wGAMA,0CAIA,mCACE,iDAOF,sGAQA,mNASA,6DASA,kEAKA,wEAKA,oEAUA,4ZAsBA,uIAKA,mCACE,8IAQF,+VAiBA,qPASA,4GAMA,uHAKA,oCAIA,4EAOA,uFAMA,mFAQA,gFASA,kHASA,kIAQA,+HAQA,wIASA,2HAQA,yDAMA,kHAKA,sFAKA,oFAOA,+HAQA,0NAWA,0FAMA,8HAOA,+UAgBA,yFAMA,6HAEA,iIAEA,gIAEA,iIASA,iKAOA,wDAIA,mCACE,+DAOF,oKAWA,kIASA,6CAIA,mGAWA,uiBAoBA,6NAOA,mCACE,oOAUF,+FASA,qYAkBA,uCAMA,0IAOA,kGAKA,iHAMA,0EAKA,2DAMA,8GAQA,gHAWA,kpBAwBA,wMAOA,mCACE,+MAUF,sRAcA,2CAMA,4HAQA,4FAMA,8DAIA,iRAiBA,yFAOA,4EAQA,0MAaA,6GAOA,mQAeA,8DAIA,+EAKA,6HAMA,mEAIA,4GAQA,0IAMA,wIAMA,oEAOA,sHAQA,+LAWA,kGAKA,uJAWA,qbAcA,yMAOA,mCACE,gNAUF,2SAeA,2CAMA,sKASA,gEAIA,gIAMA,kFAWA,wdAgBA,uIAKA,mCACE,8IAQF,8EAOA,kHAUA,mXAYA,4YAgBA,yHAOA,+FAQA,+IAMA,kGAKA,wJAMA,iFAIA,mFAIA,4IAMA,gFAMA,kEAKA,mIAQA,uPASA,sHAMA,iGAQA,sDAIA,8FAUA,yeAiBA,2LAMA,mCACE,kMASF,2IAQA,+NAYA,8EAKA,8CAMA,uWAaA,0SAaA,2MAOA,sEAMA,6FAMA,6CAOA,0JAKA,0JAKA,uJAOA,wCAIA,mEAKA,6GAMA,yFAKA,kJAKA,iIAMA,sIAMA,sBACE,4GAIA,iIAKA,sOAUA,uPASF,kMASA,6NAOA,6EAKA,2FAKA,sBACE,iIAIA,gIAKF,uCACE,8IAaF,4OAaA,8EAIA,mCACE,qFAOF,2EAMA,4QAeA,qCAIA,2CAIA,8DAIA,8DAKA,gFAKA,yIAYA,uEAKA,yDAMA,iEAIA,iEAMA,0GAYA,qbAYA,qOAOA,mCACE,4OAUF,yEAMA,8MAYA,qVAYA,sEAOA,+GAKA,2NAYA,sHASA,kJAUA,oEAIA,6EAIA,gDAMA,+GAQA,4QAeA,mEAIA,wDAOA,sBACE,mCAIA,yCAUF,oQAUA,6HAKA,mCACE,oIAQF,4CAMA,qDAMA,gCAIA,wLAWA,oEAMA,iSAgBA,qCAIA,oFAKA,2EAOA,yCAOA,kGAMA,uFAIA,2CAIA,yCAMA,4FAQA,qHAOA,qGAQA,sDAMA,mDAIA,wMAUA,+OAeA,gkBAcA,gIAKA,mCACE,uIAQF,0JAaA,mWAWA,wEAMA,gFAQA,6FAOA,0EAKA,gDAKA,4NAUA,kEAIA,6HAMA,gFAMA,gSAkBA,4FAQA,0DAOA,kJAYA,iDAMA,oEAIA,wEAIA,oEAUA,iFAQA,sKAaA,iCAIA,iCAIA,iCAIA,mCAKA,uCACE,iGASF,yBACE,qLAcF,kFAKA,qRAYA,kNAcA,6eAWA,uDAMA,mFAMA,kFAMA,oFAMA,yJASA,4GAIA,yJAMA,yEAMA,6OAQA,iKAQA,2GAKA,0CACE,wDAMF,6CACE,+JAWA,sFAQF,uCACE,mCAIA,yEAmBF,8JASA,mHAUA,kmBAsBA,wHAIA,8bAkBA,sUA6BA,wNA2BA,yPAoBA,4GAIA,wGAmBA,yKAWA,uLAWA,sLAWA,oJAQA,2IAUA,8DAKA,8DAOA,uCACE,+GAgBF,aAEE,oHAUA,sCAKA,yDAKA,yDAMA,qDAMA,iEAMA,qBAMA,yCAIA,iCAIA,2BAKA,2OAkBA,0CAIA,4CAIA,wDAKA,yGAQA,6DAMA","sources":["vanduo-core.css"],"sourcesContent":["/**\n * Vanduo Framework - Main Stylesheet\n * Import all framework modules\n */\n\n/* Layer 0: Reset */\n/**\n * Vanduo Framework - CSS Reset\n * Modern CSS reset for consistent cross-browser styling\n */\n\n/* Box sizing rules */\n*,\n*::before,\n*::after {\n    box-sizing: border-box;\n}\n\n/* Remove default margin and padding */\n* {\n    margin: 0;\n    padding: 0;\n}\n\n/* Prevent font size inflation on mobile */\nhtml {\n    -moz-text-size-adjust: none;\n    -webkit-text-size-adjust: none;\n    text-size-adjust: none;\n}\n\n/* Set core body defaults */\nbody {\n    min-height: 100vh;\n    line-height: 1.5;\n    -webkit-font-smoothing: antialiased;\n}\n\n/* Remove list styles on ul, ol elements with a list role */\nul[role='list'],\nol[role='list'] {\n    list-style: none;\n}\n\n/* Set shorter line heights on headings and interactive elements */\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\nbutton,\ninput,\nlabel {\n    line-height: 1.1;\n}\n\n/* Balance text wrapping on headings */\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n    text-wrap: balance;\n}\n\n/* Anchor elements without a class get default styles */\na:not([class]) {\n    text-decoration-skip-ink: auto;\n    color: currentColor;\n}\n\n/* Make images easier to work with */\nimg,\npicture,\nvideo,\ncanvas,\nsvg {\n    display: block;\n    max-width: 100%;\n}\n\n/* Inherit fonts for inputs and buttons */\ninput,\nbutton,\ntextarea,\nselect {\n    font: inherit;\n}\n\n/* Make sure textareas without rows have a sensible min-height */\ntextarea:not([rows]) {\n    min-height: 10em;\n}\n\n/* Anything that has been anchored to should have extra scroll margin */\n:target {\n    scroll-margin-block: 5ex;\n}\n\n/* Remove all animations, transitions and smooth scroll for users that prefer reduced motion */\n@media (prefers-reduced-motion: reduce) {\n    html:focus-within {\n        scroll-behavior: auto;\n    }\n\n    *,\n    *::before,\n    *::after {\n        animation-duration: 0.01ms !important;\n        animation-iteration-count: 1 !important;\n        transition-duration: 0.01ms !important;\n        scroll-behavior: auto !important;\n    }\n}\n\n/* Ensure hidden attribute works as expected */\n[hidden] {\n    display: none !important;\n}\n\n/* Remove default button styles */\nbutton {\n    background: none;\n    border: none;\n    cursor: pointer;\n}\n\n/* Table reset */\ntable {\n    border-collapse: collapse;\n    border-spacing: 0;\n}\n\n/* Layer 1: Foundation (vd-prefixed palette and canonical tokens) */\n/**\n * Vanduo Framework - Color System\n *\n * Color palette based on Open Color (https://yeun.github.io/open-color/)\n * Open Color is MIT licensed, Copyright (c) 2016 Heeyeun Jeong\n *\n * @license MIT\n */\n\n:root {\n  /* ═══════════════════════════════════════════════════════════════════════\n   * OPEN COLOR PALETTE\n   * ═══════════════════════════════════════════════════════════════════════ */\n\n  /* --- NEUTRALS: Gray Scale (Open Color Gray 0-9) ---\n   * Used for: Backgrounds, borders, text, and UI structure\n   */\n  --vd-gray-0: #f8f9fa;\n  /* Lightest - hover backgrounds, light sections */\n  --vd-gray-1: #f1f3f5;\n  --vd-gray-2: #e9ecef;\n  /* Secondary backgrounds, cards */\n  --vd-gray-3: #dee2e6;\n  /* Borders, dividers */\n  --vd-gray-4: #ced4da;\n  --vd-gray-5: #adb5bd;\n  /* Disabled text, placeholders */\n  --vd-gray-6: #868e96;\n  /* Muted text */\n  --vd-gray-7: #495057;\n  /* Secondary text */\n  --vd-gray-8: #343a40;\n  /* Primary text */\n  --vd-gray-9: #212529;\n  /* Darkest - headings, dark mode backgrounds */\n\n  /* --- PRIMARY: Indigo Scale (Open Color Indigo 0-9) ---\n   * Global default for buttons, links, highlights, brand elements\n   * Used for: Buttons, links, highlights, brand elements\n   */\n  --vd-primary-0: #edf2ff;\n  /* Lightest - hover backgrounds, highlights */\n  --vd-primary-1: #dbe4ff;\n  --vd-primary-2: #bac8ff;\n  --vd-primary-3: #91a7ff;\n  --vd-primary-4: #748ffc;\n  --vd-primary-5: #5c7cfa;\n  /* ★ Main brand color */\n  --vd-primary-6: #4c6ef5;\n  /* Hover state */\n  --vd-primary-7: #4263eb;\n  /* Active state */\n  --vd-primary-8: #3b5bdb;\n  --vd-primary-9: #364fc7;\n  /* Darkest - pressed state */\n\n  /* --- SECONDARY: Teal Scale (Open Color Teal 0-9) ---\n   * Complementary to Cyan for secondary actions\n   */\n  --vd-secondary-0: #e6fcf5;\n  --vd-secondary-1: #c3fae8;\n  --vd-secondary-2: #96f2d7;\n  --vd-secondary-3: #63e6be;\n  --vd-secondary-4: #38d9a9;\n  --vd-secondary-5: #20c997;\n  /* ★ Main secondary color */\n  --vd-secondary-6: #12b886;\n  /* Hover state */\n  --vd-secondary-7: #0ca678;\n  /* Active state */\n  --vd-secondary-8: #099268;\n  --vd-secondary-9: #087f5b;\n\n  /* --- FUNCTIONAL: Semantic Colors ---\n   * Used for: Status indicators, feedback, alerts\n   */\n\n  /* Danger/Error - Open Color Red */\n  --vd-danger-0: #fff5f5;\n  --vd-danger-1: #ffe3e3;\n  --vd-danger-2: #ffc9c9;\n  --vd-danger-3: #ffa8a8;\n  --vd-danger-4: #ff8787;\n  --vd-danger-5: #ff6b6b;\n  --vd-danger-6: #fa5252;\n  /* ★ Main danger color */\n  --vd-danger-7: #f03e3e;\n  /* Hover state */\n  --vd-danger-8: #e03131;\n  --vd-danger-9: #c92a2a;\n  /* Active state */\n\n  /* Error aliases (maps to danger scale for consistent naming) */\n  --vd-error-0: var(--vd-danger-0);\n  --vd-error-1: var(--vd-danger-1);\n  --vd-error-2: var(--vd-danger-2);\n  --vd-error-3: var(--vd-danger-3);\n  --vd-error-4: var(--vd-danger-4);\n  --vd-error-5: var(--vd-danger-5);\n  --vd-error-6: var(--vd-danger-6);\n  --vd-error-7: var(--vd-danger-7);\n  --vd-error-8: var(--vd-danger-8);\n  --vd-error-9: var(--vd-danger-9);\n\n  /* Success - Open Color Green */\n  --vd-success-0: #ebfbee;\n  --vd-success-1: #d3f9d8;\n  --vd-success-2: #b2f2bb;\n  --vd-success-3: #8ce99a;\n  --vd-success-4: #69db7c;\n  --vd-success-5: #51cf66;\n  --vd-success-6: #40c057;\n  /* ★ Main success color */\n  --vd-success-7: #37b24d;\n  /* Hover state */\n  --vd-success-8: #2f9e44;\n  --vd-success-9: #2b8a3e;\n  /* Active state */\n\n  /* Warning - Open Color Yellow */\n  --vd-warning-0: #fff9db;\n  --vd-warning-1: #fff3bf;\n  --vd-warning-2: #ffec99;\n  --vd-warning-3: #ffe066;\n  --vd-warning-4: #ffd43b;\n  --vd-warning-5: #fcc419;\n  --vd-warning-6: #fab005;\n  /* ★ Main warning color */\n  --vd-warning-7: #f59f00;\n  /* Hover state */\n  --vd-warning-8: #f08c00;\n  --vd-warning-9: #e67700;\n  /* Active state */\n\n  /* Info - Open Color Blue (complementary to Cyan) */\n  --vd-info-0: #e7f5ff;\n  --vd-info-1: #d0ebff;\n  --vd-info-2: #a5d8ff;\n  --vd-info-3: #74c0fc;\n  --vd-info-4: #4dabf7;\n  --vd-info-5: #339af0;\n  --vd-info-6: #228be6;\n  /* ★ Main info color */\n  --vd-info-7: #1c7ed6;\n  /* Hover state */\n  --vd-info-8: #1971c2;\n  --vd-info-9: #1864ab;\n  /* Active state */\n\n  /* ═══════════════════════════════════════════════════════════════════════\n   * EXTENDED COLOR PALETTES (for Theme Customizer)\n   * All colors from Open Color palette\n   * ═══════════════════════════════════════════════════════════════════════ */\n\n  /* --- Red Scale --- */\n  --vd-red-0: #fff5f5;\n  --vd-red-1: #ffe3e3;\n  --vd-red-2: #ffc9c9;\n  --vd-red-3: #ffa8a8;\n  --vd-red-4: #ff8787;\n  --vd-red-5: #ff6b6b;\n  --vd-red-6: #fa5252;\n  --vd-red-7: #f03e3e;\n  --vd-red-8: #e03131;\n  --vd-red-9: #c92a2a;\n\n  /* --- Orange Scale --- */\n  --vd-orange-0: #fff4e6;\n  --vd-orange-1: #ffe8cc;\n  --vd-orange-2: #ffd8a8;\n  --vd-orange-3: #ffc078;\n  --vd-orange-4: #ffa94d;\n  --vd-orange-5: #ff922b;\n  --vd-orange-6: #fd7e14;\n  --vd-orange-7: #f76707;\n  --vd-orange-8: #e8590c;\n  --vd-orange-9: #d9480f;\n\n  /* --- Yellow Scale --- */\n  --vd-yellow-0: #fff9db;\n  --vd-yellow-1: #fff3bf;\n  --vd-yellow-2: #ffec99;\n  --vd-yellow-3: #ffe066;\n  --vd-yellow-4: #ffd43b;\n  --vd-yellow-5: #fcc419;\n  --vd-yellow-6: #fab005;\n  --vd-yellow-7: #f59f00;\n  --vd-yellow-8: #f08c00;\n  --vd-yellow-9: #e67700;\n\n  /* --- Lime Scale --- */\n  --vd-lime-0: #f4fce3;\n  --vd-lime-1: #e9fac8;\n  --vd-lime-2: #d8f5a2;\n  --vd-lime-3: #c0eb75;\n  --vd-lime-4: #a9e34b;\n  --vd-lime-5: #94d82d;\n  --vd-lime-6: #82c91e;\n  --vd-lime-7: #74b816;\n  --vd-lime-8: #66a80f;\n  --vd-lime-9: #5c940d;\n\n  /* --- Green Scale --- */\n  --vd-green-0: #ebfbee;\n  --vd-green-1: #d3f9d8;\n  --vd-green-2: #b2f2bb;\n  --vd-green-3: #8ce99a;\n  --vd-green-4: #69db7c;\n  --vd-green-5: #51cf66;\n  --vd-green-6: #40c057;\n  --vd-green-7: #37b24d;\n  --vd-green-8: #2f9e44;\n  --vd-green-9: #2b8a3e;\n\n  /* --- Teal Scale --- */\n  --vd-teal-0: #e6fcf5;\n  --vd-teal-1: #c3fae8;\n  --vd-teal-2: #96f2d7;\n  --vd-teal-3: #63e6be;\n  --vd-teal-4: #38d9a9;\n  --vd-teal-5: #20c997;\n  --vd-teal-6: #12b886;\n  --vd-teal-7: #0ca678;\n  --vd-teal-8: #099268;\n  --vd-teal-9: #087f5b;\n\n  /* --- Cyan Scale --- */\n  --vd-cyan-0: #e3fafc;\n  --vd-cyan-1: #c5f6fa;\n  --vd-cyan-2: #99e9f2;\n  --vd-cyan-3: #66d9e8;\n  --vd-cyan-4: #3bc9db;\n  --vd-cyan-5: #22b8cf;\n  --vd-cyan-6: #15aabf;\n  --vd-cyan-7: #1098ad;\n  --vd-cyan-8: #0c8599;\n  --vd-cyan-9: #0b7285;\n\n  /* --- Blue Scale --- */\n  --vd-blue-0: #e7f5ff;\n  --vd-blue-1: #d0ebff;\n  --vd-blue-2: #a5d8ff;\n  --vd-blue-3: #74c0fc;\n  --vd-blue-4: #4dabf7;\n  --vd-blue-5: #339af0;\n  --vd-blue-6: #228be6;\n  --vd-blue-7: #1c7ed6;\n  --vd-blue-8: #1971c2;\n  --vd-blue-9: #1864ab;\n\n  /* --- Indigo Scale --- */\n  --vd-indigo-0: #edf2ff;\n  --vd-indigo-1: #dbe4ff;\n  --vd-indigo-2: #bac8ff;\n  --vd-indigo-3: #91a7ff;\n  --vd-indigo-4: #748ffc;\n  --vd-indigo-5: #5c7cfa;\n  --vd-indigo-6: #4c6ef5;\n  --vd-indigo-7: #4263eb;\n  --vd-indigo-8: #3b5bdb;\n  --vd-indigo-9: #364fc7;\n\n  /* --- Violet Scale --- */\n  --vd-violet-0: #f3f0ff;\n  --vd-violet-1: #e5dbff;\n  --vd-violet-2: #d0bfff;\n  --vd-violet-3: #b197fc;\n  --vd-violet-4: #9775fa;\n  --vd-violet-5: #845ef7;\n  --vd-violet-6: #7950f2;\n  --vd-violet-7: #7048e8;\n  --vd-violet-8: #6741d9;\n  --vd-violet-9: #5f3dc4;\n\n  /* --- Grape (Purple) Scale --- */\n  --vd-grape-0: #f8f0fc;\n  --vd-grape-1: #f3d9fa;\n  --vd-grape-2: #eebefa;\n  --vd-grape-3: #e599f7;\n  --vd-grape-4: #da77f2;\n  --vd-grape-5: #cc5de8;\n  --vd-grape-6: #be4bdb;\n  --vd-grape-7: #ae3ec9;\n  --vd-grape-8: #9c36b5;\n  --vd-grape-9: #862e9c;\n\n  /* --- Pink Scale --- */\n  --vd-pink-0: #fff0f6;\n  --vd-pink-1: #ffdeeb;\n  --vd-pink-2: #fcc2d7;\n  --vd-pink-3: #faa2c1;\n  --vd-pink-4: #f783ac;\n  --vd-pink-5: #f06595;\n  --vd-pink-6: #e64980;\n  --vd-pink-7: #d6336c;\n  --vd-pink-8: #c2255c;\n  --vd-pink-9: #a61e4d;\n\n  /* ═══════════════════════════════════════════════════════════════════════\n   * NEUTRAL COLOR ALTERNATIVES (for Theme Customizer)\n   * ═══════════════════════════════════════════════════════════════════════ */\n\n  /* --- Slate Scale (Cool blue-gray) --- */\n  --vd-slate-0: #f8fafc;\n  --vd-slate-1: #f1f5f9;\n  --vd-slate-2: #e2e8f0;\n  --vd-slate-3: #cbd5e1;\n  --vd-slate-4: #94a3b8;\n  --vd-slate-5: #64748b;\n  --vd-slate-6: #475569;\n  --vd-slate-7: #334155;\n  --vd-slate-8: #1e293b;\n  --vd-slate-9: #0f172a;\n\n  /* --- Charcoal Scale (Deep cool charcoal) --- */\n  --vd-charcoal-0: #f5f7f8;\n  --vd-charcoal-1: #e7ebee;\n  --vd-charcoal-2: #ced6dc;\n  --vd-charcoal-3: #adb8c1;\n  --vd-charcoal-4: #8b98a3;\n  --vd-charcoal-5: #6d7c88;\n  --vd-charcoal-6: #53616d;\n  --vd-charcoal-7: #394754;\n  --vd-charcoal-8: #202c38;\n  --vd-charcoal-9: #0d1117;\n\n  /* --- Zinc Scale (Slightly warm gray) --- */\n  --vd-zinc-0: #fafafa;\n  --vd-zinc-1: #f4f4f5;\n  --vd-zinc-2: #e4e4e7;\n  --vd-zinc-3: #d4d4d8;\n  --vd-zinc-4: #a1a1aa;\n  --vd-zinc-5: #71717a;\n  --vd-zinc-6: #52525b;\n  --vd-zinc-7: #3f3f46;\n  --vd-zinc-8: #27272a;\n  --vd-zinc-9: #18181b;\n\n  /* --- Neutral Scale (True neutral) --- */\n  --vd-neutral-0: #fafafa;\n  --vd-neutral-1: #f5f5f5;\n  --vd-neutral-2: #e5e5e5;\n  --vd-neutral-3: #d4d4d4;\n  --vd-neutral-4: #a3a3a3;\n  --vd-neutral-5: #737373;\n  --vd-neutral-6: #525252;\n  --vd-neutral-7: #404040;\n  --vd-neutral-8: #262626;\n  --vd-neutral-9: #171717;\n\n  /* --- Stone Scale (Warm beige-gray) --- */\n  --vd-stone-0: #fafaf9;\n  --vd-stone-1: #f5f5f4;\n  --vd-stone-2: #e7e5e4;\n  --vd-stone-3: #d6d3d1;\n  --vd-stone-4: #a8a29e;\n  --vd-stone-5: #78716c;\n  --vd-stone-6: #57534e;\n  --vd-stone-7: #44403c;\n  --vd-stone-8: #292524;\n  --vd-stone-9: #1c1917;\n\n  /* ═══════════════════════════════════════════════════════════════════════\n   * SEMANTIC COLOR TOKENS\n   * Canonical Vanduo names mapped to Open Color scales\n   * ═══════════════════════════════════════════════════════════════════════ */\n\n  /* Primary Brand */\n  --vd-color-primary: var(--vd-primary-5);\n  --vd-color-primary-light: var(--vd-primary-3);\n  --vd-color-primary-dark: var(--vd-primary-7);\n  --vd-color-primary-hover: var(--vd-primary-6);\n  --vd-color-primary-active: var(--vd-primary-7);\n\n  /* Secondary */\n  --vd-color-secondary: var(--vd-secondary-5);\n  --vd-color-secondary-light: var(--vd-secondary-3);\n  --vd-color-secondary-dark: var(--vd-secondary-7);\n  --vd-color-secondary-hover: var(--vd-secondary-6);\n  --vd-color-secondary-active: var(--vd-secondary-7);\n\n  /* Accent - Same as primary for Vanduo */\n  --vd-color-accent: var(--vd-primary-5);\n  --vd-color-accent-light: var(--vd-primary-3);\n  --vd-color-accent-dark: var(--vd-primary-7);\n\n  /* Semantic - Success */\n  --vd-color-success: var(--vd-success-6);\n  --vd-color-success-light: var(--vd-success-4);\n  --vd-color-success-dark: var(--vd-success-7);\n  --vd-color-success-hover: var(--vd-success-7);\n  --vd-color-success-active: var(--vd-success-8);\n\n  /* Semantic - Warning */\n  --vd-color-warning: var(--vd-warning-6);\n  --vd-color-warning-light: var(--vd-warning-4);\n  --vd-color-warning-dark: var(--vd-warning-7);\n  --vd-color-warning-hover: var(--vd-warning-7);\n  --vd-color-warning-active: var(--vd-warning-8);\n\n  /* Semantic - Error/Danger */\n  --vd-color-error: var(--vd-danger-6);\n  --vd-color-error-light: var(--vd-danger-4);\n  --vd-color-error-dark: var(--vd-danger-7);\n  --vd-color-error-hover: var(--vd-danger-7);\n  --vd-color-error-active: var(--vd-danger-8);\n\n  /* Semantic - Info */\n  --vd-color-info: var(--vd-info-6);\n  --vd-color-info-light: var(--vd-info-4);\n  --vd-color-info-dark: var(--vd-info-7);\n  --vd-color-info-hover: var(--vd-info-7);\n  --vd-color-info-active: var(--vd-info-8);\n\n  /* Base Colors */\n  --vd-color-white: #ffffff;\n  --vd-color-black: #000000;\n\n  /* Neutral semantic gray tokens */\n  --vd-color-gray-50: var(--vd-gray-0);\n  --vd-color-gray-100: var(--vd-gray-2);\n  --vd-color-gray-200: var(--vd-gray-3);\n  --vd-color-gray-300: var(--vd-gray-4);\n  --vd-color-gray-400: var(--vd-gray-5);\n  --vd-color-gray-500: var(--vd-gray-6);\n  --vd-color-gray-600: var(--vd-gray-7);\n  --vd-color-gray-700: var(--vd-gray-8);\n  --vd-color-gray-800: var(--vd-gray-9);\n  --vd-color-gray-900: #1a1d20;\n  /* Slightly darker than gray-9 */\n\n  /* ═══════════════════════════════════════════════════════════════════════\n   * APPLICATION-SPECIFIC VARIABLES\n   * ═══════════════════════════════════════════════════════════════════════ */\n\n  /* Background Colors */\n  --vd-bg-primary: var(--vd-color-white);\n  --vd-bg-secondary: var(--vd-gray-0);\n  --vd-bg-tertiary: var(--vd-gray-1);\n  --vd-bg-dark: var(--vd-gray-8);\n  --vd-bg-darker: var(--vd-gray-9);\n\n  /* Text Colors */\n  --vd-text-primary: var(--vd-gray-8);\n  --vd-text-secondary: var(--vd-gray-7);\n  --vd-text-muted: var(--vd-gray-5);\n  --vd-text-light: var(--vd-gray-4);\n  --vd-text-inverse: var(--vd-color-white);\n\n  /* Border Colors */\n  --vd-border-color: var(--vd-gray-3);\n  --vd-border-color-light: var(--vd-gray-2);\n  --vd-border-color-dark: var(--vd-gray-4);\n\n  /* Alpha Colors (for hover/active states) - indigo */\n  --vd-color-primary-alpha-10: rgba(92, 124, 250, 0.1);\n  --vd-color-primary-alpha-20: rgba(92, 124, 250, 0.2);\n  --vd-color-secondary-alpha-10: rgba(32, 201, 151, 0.1);\n  --vd-color-secondary-alpha-20: rgba(32, 201, 151, 0.2);\n  --vd-color-success-alpha-10: rgba(64, 192, 87, 0.1);\n  --vd-color-success-alpha-20: rgba(64, 192, 87, 0.2);\n  --vd-color-error-alpha-10: rgba(250, 82, 82, 0.1);\n  --vd-color-error-alpha-20: rgba(250, 82, 82, 0.2);\n  --vd-color-warning-alpha-10: rgba(250, 176, 5, 0.1);\n  --vd-color-warning-alpha-20: rgba(250, 176, 5, 0.2);\n  --vd-color-info-alpha-10: rgba(34, 139, 230, 0.1);\n  --vd-color-info-alpha-20: rgba(34, 139, 230, 0.2);\n}\n\n/* ═════════════════════════════════════════════════════════════════════════\n * BACKGROUND COLOR UTILITIES\n * ═════════════════════════════════════════════════════════════════════════ */\n\n.vd-bg-primary,\n.bg-primary {\n  background-color: var(--vd-color-primary);\n}\n\n.vd-bg-secondary,\n.bg-secondary {\n  background-color: var(--vd-color-secondary);\n}\n\n.vd-bg-accent,\n.bg-accent {\n  background-color: var(--vd-color-accent);\n}\n\n.vd-bg-success,\n.bg-success {\n  background-color: var(--vd-color-success);\n}\n\n.vd-bg-warning,\n.bg-warning {\n  background-color: var(--vd-color-warning);\n}\n\n.vd-bg-error,\n.bg-error {\n  background-color: var(--vd-color-error);\n}\n\n.vd-bg-info,\n.bg-info {\n  background-color: var(--vd-color-info);\n}\n\n.vd-bg-white,\n.bg-white {\n  background-color: var(--vd-color-white);\n}\n\n.vd-bg-black,\n.bg-black {\n  background-color: var(--vd-color-black);\n}\n\n.vd-bg-dark,\n.bg-dark {\n  background-color: var(--vd-bg-dark);\n}\n\n.vd-bg-light,\n.bg-light {\n  background-color: var(--vd-bg-secondary);\n}\n\n/* ═════════════════════════════════════════════════════════════════════════\n * TEXT COLOR UTILITIES\n * ═════════════════════════════════════════════════════════════════════════ */\n\n.vd-text-primary {\n  color: var(--vd-color-primary);\n}\n\n.vd-text-secondary {\n  color: var(--vd-text-secondary);\n}\n\n.vd-text-success {\n  color: var(--vd-color-success);\n}\n\n.vd-text-warning {\n  color: var(--vd-color-warning);\n}\n\n.vd-text-error {\n  color: var(--vd-color-error);\n}\n\n.vd-text-info {\n  color: var(--vd-color-info);\n}\n\n.vd-text-white {\n  color: var(--vd-color-white);\n}\n\n.vd-text-black {\n  color: var(--vd-color-black);\n}\n\n.vd-text-muted {\n  color: var(--vd-text-muted);\n}\n\n.vd-text-light {\n  color: var(--vd-text-light);\n}\n\n.vd-text-inverse {\n  color: var(--vd-text-inverse);\n}\n\n/* ═════════════════════════════════════════════════════════════════════════\n * BORDER COLOR UTILITIES\n * ═════════════════════════════════════════════════════════════════════════ */\n\n.vd-border-primary,\n.border-primary {\n  border-color: var(--vd-color-primary);\n}\n\n.vd-border-secondary,\n.border-secondary {\n  border-color: var(--vd-color-secondary);\n}\n\n.vd-border-success,\n.border-success {\n  border-color: var(--vd-color-success);\n}\n\n.vd-border-warning,\n.border-warning {\n  border-color: var(--vd-color-warning);\n}\n\n.vd-border-error,\n.border-error {\n  border-color: var(--vd-color-error);\n}\n\n.vd-border-info,\n.border-info {\n  border-color: var(--vd-color-info);\n}\n\n.vd-border-light,\n.border-light {\n  border-color: var(--vd-border-color-light);\n}\n\n.vd-border-dark,\n.border-dark {\n  border-color: var(--vd-border-color-dark);\n}\n\n/* ═════════════════════════════════════════════════════════════════════════\n * DARK THEME OVERRIDES\n * ═════════════════════════════════════════════════════════════════════════ */\n\n[data-theme=\"dark\"] {\n  /* Background Colors */\n  --vd-bg-primary: var(--vd-gray-9);\n  --vd-bg-secondary: var(--vd-gray-8);\n  --vd-bg-tertiary: var(--vd-gray-7);\n  --vd-bg-dark: var(--vd-color-black);\n  --vd-bg-darker: #000000;\n\n  /* Text Colors */\n  --vd-text-primary: var(--vd-gray-0);\n  --vd-text-secondary: var(--vd-gray-3);\n  --vd-text-muted: var(--vd-gray-4);\n  --vd-text-light: var(--vd-gray-5);\n  --vd-text-inverse: var(--vd-gray-9);\n\n  /* Border Colors */\n  --vd-border-color: var(--vd-gray-7);\n  --vd-border-color-light: var(--vd-gray-8);\n  --vd-border-color-dark: var(--vd-gray-6);\n\n  /* Primary - Slightly brighter for dark backgrounds */\n  --vd-color-primary: var(--vd-primary-4);\n  --vd-color-primary-light: var(--vd-primary-3);\n  --vd-color-primary-dark: var(--vd-primary-5);\n  --vd-color-primary-hover: var(--vd-primary-5);\n  --vd-color-primary-active: var(--vd-primary-6);\n\n  /* Secondary */\n  --vd-color-secondary: var(--vd-secondary-4);\n  --vd-color-secondary-hover: var(--vd-secondary-5);\n\n  /* Alpha Colors for Dark Mode - indigo */\n  --vd-color-primary-alpha-10: rgba(116, 143, 252, 0.15);\n  --vd-color-primary-alpha-20: rgba(116, 143, 252, 0.25);\n}\n\n@media (prefers-color-scheme: dark) {\n  :root:not([data-theme]) {\n    /* Background Colors */\n    --vd-bg-primary: var(--vd-gray-9);\n    --vd-bg-secondary: var(--vd-gray-8);\n    --vd-bg-tertiary: var(--vd-gray-7);\n    --vd-bg-dark: var(--vd-color-black);\n    --vd-bg-darker: #000000;\n\n    /* Text Colors */\n    --vd-text-primary: var(--vd-gray-0);\n    --vd-text-secondary: var(--vd-gray-3);\n    --vd-text-muted: var(--vd-gray-4);\n    --vd-text-light: var(--vd-gray-5);\n    --vd-text-inverse: var(--vd-gray-9);\n\n    /* Border Colors */\n    --vd-border-color: var(--vd-gray-7);\n    --vd-border-color-light: var(--vd-gray-8);\n    --vd-border-color-dark: var(--vd-gray-6);\n\n    /* Primary - Slightly brighter for dark backgrounds */\n    --vd-color-primary: var(--vd-primary-4);\n    --vd-color-primary-light: var(--vd-primary-3);\n    --vd-color-primary-dark: var(--vd-primary-5);\n    --vd-color-primary-hover: var(--vd-primary-5);\n    --vd-color-primary-active: var(--vd-primary-6);\n\n    /* Secondary */\n    --vd-color-secondary: var(--vd-secondary-4);\n    --vd-color-secondary-hover: var(--vd-secondary-5);\n\n    /* Alpha Colors for Dark Mode - indigo */\n    --vd-color-primary-alpha-10: rgba(116, 143, 252, 0.15);\n    --vd-color-primary-alpha-20: rgba(116, 143, 252, 0.25);\n  }\n}\n\n/* ═════════════════════════════════════════════════════════════════════════\n * DYNAMIC PRIMARY COLOR SWITCHING (Theme Customizer)\n * These rules remap --vd-primary-* variables based on [data-primary] attribute\n * ═════════════════════════════════════════════════════════════════════════ */\n\n/* Red Primary */\n[data-primary=\"red\"] {\n  --vd-primary-0: var(--vd-red-0);\n  --vd-primary-1: var(--vd-red-1);\n  --vd-primary-2: var(--vd-red-2);\n  --vd-primary-3: var(--vd-red-3);\n  --vd-primary-4: var(--vd-red-4);\n  --vd-primary-5: var(--vd-red-5);\n  --vd-primary-6: var(--vd-red-6);\n  --vd-primary-7: var(--vd-red-7);\n  --vd-primary-8: var(--vd-red-8);\n  --vd-primary-9: var(--vd-red-9);\n}\n\n/* Orange Primary */\n[data-primary=\"orange\"] {\n  --vd-primary-0: var(--vd-orange-0);\n  --vd-primary-1: var(--vd-orange-1);\n  --vd-primary-2: var(--vd-orange-2);\n  --vd-primary-3: var(--vd-orange-3);\n  --vd-primary-4: var(--vd-orange-4);\n  --vd-primary-5: var(--vd-orange-5);\n  --vd-primary-6: var(--vd-orange-6);\n  --vd-primary-7: var(--vd-orange-7);\n  --vd-primary-8: var(--vd-orange-8);\n  --vd-primary-9: var(--vd-orange-9);\n}\n\n/* Amber Primary (using yellow with warmer tones) */\n[data-primary=\"amber\"] {\n  --vd-primary-0: #fffbeb;\n  --vd-primary-1: #fef3c7;\n  --vd-primary-2: #fde68a;\n  --vd-primary-3: #fcd34d;\n  --vd-primary-4: #fbbf24;\n  --vd-primary-5: #f59e0b;\n  --vd-primary-6: #d97706;\n  --vd-primary-7: #b45309;\n  --vd-primary-8: #92400e;\n  --vd-primary-9: #78350f;\n}\n\n/* Yellow Primary */\n[data-primary=\"yellow\"] {\n  --vd-primary-0: var(--vd-yellow-0);\n  --vd-primary-1: var(--vd-yellow-1);\n  --vd-primary-2: var(--vd-yellow-2);\n  --vd-primary-3: var(--vd-yellow-3);\n  --vd-primary-4: var(--vd-yellow-4);\n  --vd-primary-5: var(--vd-yellow-5);\n  --vd-primary-6: var(--vd-yellow-6);\n  --vd-primary-7: var(--vd-yellow-7);\n  --vd-primary-8: var(--vd-yellow-8);\n  --vd-primary-9: var(--vd-yellow-9);\n}\n\n/* Lime Primary */\n[data-primary=\"lime\"] {\n  --vd-primary-0: var(--vd-lime-0);\n  --vd-primary-1: var(--vd-lime-1);\n  --vd-primary-2: var(--vd-lime-2);\n  --vd-primary-3: var(--vd-lime-3);\n  --vd-primary-4: var(--vd-lime-4);\n  --vd-primary-5: var(--vd-lime-5);\n  --vd-primary-6: var(--vd-lime-6);\n  --vd-primary-7: var(--vd-lime-7);\n  --vd-primary-8: var(--vd-lime-8);\n  --vd-primary-9: var(--vd-lime-9);\n}\n\n/* Green Primary */\n[data-primary=\"green\"] {\n  --vd-primary-0: var(--vd-green-0);\n  --vd-primary-1: var(--vd-green-1);\n  --vd-primary-2: var(--vd-green-2);\n  --vd-primary-3: var(--vd-green-3);\n  --vd-primary-4: var(--vd-green-4);\n  --vd-primary-5: var(--vd-green-5);\n  --vd-primary-6: var(--vd-green-6);\n  --vd-primary-7: var(--vd-green-7);\n  --vd-primary-8: var(--vd-green-8);\n  --vd-primary-9: var(--vd-green-9);\n}\n\n/* Emerald Primary (slightly different green) */\n[data-primary=\"emerald\"] {\n  --vd-primary-0: #ecfdf5;\n  --vd-primary-1: #d1fae5;\n  --vd-primary-2: #a7f3d0;\n  --vd-primary-3: #6ee7b7;\n  --vd-primary-4: #34d399;\n  --vd-primary-5: #10b981;\n  --vd-primary-6: #059669;\n  --vd-primary-7: #047857;\n  --vd-primary-8: #065f46;\n  --vd-primary-9: #064e3b;\n}\n\n/* Teal Primary */\n[data-primary=\"teal\"] {\n  --vd-primary-0: var(--vd-teal-0);\n  --vd-primary-1: var(--vd-teal-1);\n  --vd-primary-2: var(--vd-teal-2);\n  --vd-primary-3: var(--vd-teal-3);\n  --vd-primary-4: var(--vd-teal-4);\n  --vd-primary-5: var(--vd-teal-5);\n  --vd-primary-6: var(--vd-teal-6);\n  --vd-primary-7: var(--vd-teal-7);\n  --vd-primary-8: var(--vd-teal-8);\n  --vd-primary-9: var(--vd-teal-9);\n}\n\n/* Cyan Primary (default - no override needed, but included for completeness) */\n[data-primary=\"cyan\"] {\n  --vd-primary-0: var(--vd-cyan-0);\n  --vd-primary-1: var(--vd-cyan-1);\n  --vd-primary-2: var(--vd-cyan-2);\n  --vd-primary-3: var(--vd-cyan-3);\n  --vd-primary-4: var(--vd-cyan-4);\n  --vd-primary-5: var(--vd-cyan-5);\n  --vd-primary-6: var(--vd-cyan-6);\n  --vd-primary-7: var(--vd-cyan-7);\n  --vd-primary-8: var(--vd-cyan-8);\n  --vd-primary-9: var(--vd-cyan-9);\n}\n\n/* Sky Primary */\n[data-primary=\"sky\"] {\n  --vd-primary-0: #f0f9ff;\n  --vd-primary-1: #e0f2fe;\n  --vd-primary-2: #bae6fd;\n  --vd-primary-3: #7dd3fc;\n  --vd-primary-4: #38bdf8;\n  --vd-primary-5: #0ea5e9;\n  --vd-primary-6: #0284c7;\n  --vd-primary-7: #0369a1;\n  --vd-primary-8: #075985;\n  --vd-primary-9: #0c4a6e;\n}\n\n/* Blue Primary */\n[data-primary=\"blue\"] {\n  --vd-primary-0: var(--vd-blue-0);\n  --vd-primary-1: var(--vd-blue-1);\n  --vd-primary-2: var(--vd-blue-2);\n  --vd-primary-3: var(--vd-blue-3);\n  --vd-primary-4: var(--vd-blue-4);\n  --vd-primary-5: var(--vd-blue-5);\n  --vd-primary-6: var(--vd-blue-6);\n  --vd-primary-7: var(--vd-blue-7);\n  --vd-primary-8: var(--vd-blue-8);\n  --vd-primary-9: var(--vd-blue-9);\n}\n\n/* Indigo Primary */\n[data-primary=\"indigo\"] {\n  --vd-primary-0: var(--vd-indigo-0);\n  --vd-primary-1: var(--vd-indigo-1);\n  --vd-primary-2: var(--vd-indigo-2);\n  --vd-primary-3: var(--vd-indigo-3);\n  --vd-primary-4: var(--vd-indigo-4);\n  --vd-primary-5: var(--vd-indigo-5);\n  --vd-primary-6: var(--vd-indigo-6);\n  --vd-primary-7: var(--vd-indigo-7);\n  --vd-primary-8: var(--vd-indigo-8);\n  --vd-primary-9: var(--vd-indigo-9);\n}\n\n/* Violet Primary */\n[data-primary=\"violet\"] {\n  --vd-primary-0: var(--vd-violet-0);\n  --vd-primary-1: var(--vd-violet-1);\n  --vd-primary-2: var(--vd-violet-2);\n  --vd-primary-3: var(--vd-violet-3);\n  --vd-primary-4: var(--vd-violet-4);\n  --vd-primary-5: var(--vd-violet-5);\n  --vd-primary-6: var(--vd-violet-6);\n  --vd-primary-7: var(--vd-violet-7);\n  --vd-primary-8: var(--vd-violet-8);\n  --vd-primary-9: var(--vd-violet-9);\n}\n\n/* Purple Primary (using grape) */\n[data-primary=\"purple\"] {\n  --vd-primary-0: var(--vd-grape-0);\n  --vd-primary-1: var(--vd-grape-1);\n  --vd-primary-2: var(--vd-grape-2);\n  --vd-primary-3: var(--vd-grape-3);\n  --vd-primary-4: var(--vd-grape-4);\n  --vd-primary-5: var(--vd-grape-5);\n  --vd-primary-6: var(--vd-grape-6);\n  --vd-primary-7: var(--vd-grape-7);\n  --vd-primary-8: var(--vd-grape-8);\n  --vd-primary-9: var(--vd-grape-9);\n}\n\n/* Fuchsia Primary */\n[data-primary=\"fuchsia\"] {\n  --vd-primary-0: #fdf4ff;\n  --vd-primary-1: #fae8ff;\n  --vd-primary-2: #f5d0fe;\n  --vd-primary-3: #f0abfc;\n  --vd-primary-4: #e879f9;\n  --vd-primary-5: #d946ef;\n  --vd-primary-6: #c026d3;\n  --vd-primary-7: #a21caf;\n  --vd-primary-8: #86198f;\n  --vd-primary-9: #701a75;\n}\n\n/* Pink Primary */\n[data-primary=\"pink\"] {\n  --vd-primary-0: var(--vd-pink-0);\n  --vd-primary-1: var(--vd-pink-1);\n  --vd-primary-2: var(--vd-pink-2);\n  --vd-primary-3: var(--vd-pink-3);\n  --vd-primary-4: var(--vd-pink-4);\n  --vd-primary-5: var(--vd-pink-5);\n  --vd-primary-6: var(--vd-pink-6);\n  --vd-primary-7: var(--vd-pink-7);\n  --vd-primary-8: var(--vd-pink-8);\n  --vd-primary-9: var(--vd-pink-9);\n}\n\n/* Rose Primary */\n[data-primary=\"rose\"] {\n  --vd-primary-0: #fff1f2;\n  --vd-primary-1: #ffe4e6;\n  --vd-primary-2: #fecdd3;\n  --vd-primary-3: #fda4af;\n  --vd-primary-4: #fb7185;\n  --vd-primary-5: #f43f5e;\n  --vd-primary-6: #e11d48;\n  --vd-primary-7: #be123c;\n  --vd-primary-8: #9f1239;\n  --vd-primary-9: #881337;\n}\n\n/* Black Primary (grayscale) */\n[data-primary=\"black\"] {\n  --vd-primary-0: #fafafa;\n  --vd-primary-1: #f5f5f5;\n  --vd-primary-2: #e5e5e5;\n  --vd-primary-3: #d4d4d4;\n  --vd-primary-4: #a3a3a3;\n  --vd-primary-5: #525252;\n  --vd-primary-6: #404040;\n  --vd-primary-7: #262626;\n  --vd-primary-8: #171717;\n  --vd-primary-9: #0a0a0a;\n}\n\n/* ═════════════════════════════════════════════════════════════════════════\n * DYNAMIC NEUTRAL COLOR SWITCHING (Theme Customizer)\n * These rules remap --vd-gray-* variables based on [data-neutral] attribute\n * ═════════════════════════════════════════════════════════════════════════ */\n\n/* Charcoal Neutral (default) */\n[data-neutral=\"charcoal\"] {\n  --vd-gray-0: var(--vd-charcoal-0);\n  --vd-gray-1: var(--vd-charcoal-1);\n  --vd-gray-2: var(--vd-charcoal-2);\n  --vd-gray-3: var(--vd-charcoal-3);\n  --vd-gray-4: var(--vd-charcoal-4);\n  --vd-gray-5: var(--vd-charcoal-5);\n  --vd-gray-6: var(--vd-charcoal-6);\n  --vd-gray-7: var(--vd-charcoal-7);\n  --vd-gray-8: var(--vd-charcoal-8);\n  --vd-gray-9: var(--vd-charcoal-9);\n}\n\n/* Gray Neutral */\n[data-neutral=\"gray\"] {\n  --vd-gray-0: #f8f9fa;\n  --vd-gray-1: #f1f3f5;\n  --vd-gray-2: #e9ecef;\n  --vd-gray-3: #dee2e6;\n  --vd-gray-4: #ced4da;\n  --vd-gray-5: #adb5bd;\n  --vd-gray-6: #868e96;\n  --vd-gray-7: #495057;\n  --vd-gray-8: #343a40;\n  --vd-gray-9: #212529;\n}\n\n/* Slate Neutral */\n[data-neutral=\"slate\"] {\n  --vd-gray-0: var(--vd-slate-0);\n  --vd-gray-1: var(--vd-slate-1);\n  --vd-gray-2: var(--vd-slate-2);\n  --vd-gray-3: var(--vd-slate-3);\n  --vd-gray-4: var(--vd-slate-4);\n  --vd-gray-5: var(--vd-slate-5);\n  --vd-gray-6: var(--vd-slate-6);\n  --vd-gray-7: var(--vd-slate-7);\n  --vd-gray-8: var(--vd-slate-8);\n  --vd-gray-9: var(--vd-slate-9);\n}\n\n/* Zinc Neutral */\n[data-neutral=\"zinc\"] {\n  --vd-gray-0: var(--vd-zinc-0);\n  --vd-gray-1: var(--vd-zinc-1);\n  --vd-gray-2: var(--vd-zinc-2);\n  --vd-gray-3: var(--vd-zinc-3);\n  --vd-gray-4: var(--vd-zinc-4);\n  --vd-gray-5: var(--vd-zinc-5);\n  --vd-gray-6: var(--vd-zinc-6);\n  --vd-gray-7: var(--vd-zinc-7);\n  --vd-gray-8: var(--vd-zinc-8);\n  --vd-gray-9: var(--vd-zinc-9);\n}\n\n/* Neutral (true neutral) */\n[data-neutral=\"neutral\"] {\n  --vd-gray-0: var(--vd-neutral-0);\n  --vd-gray-1: var(--vd-neutral-1);\n  --vd-gray-2: var(--vd-neutral-2);\n  --vd-gray-3: var(--vd-neutral-3);\n  --vd-gray-4: var(--vd-neutral-4);\n  --vd-gray-5: var(--vd-neutral-5);\n  --vd-gray-6: var(--vd-neutral-6);\n  --vd-gray-7: var(--vd-neutral-7);\n  --vd-gray-8: var(--vd-neutral-8);\n  --vd-gray-9: var(--vd-neutral-9);\n}\n\n/* Stone Neutral */\n[data-neutral=\"stone\"] {\n  --vd-gray-0: var(--vd-stone-0);\n  --vd-gray-1: var(--vd-stone-1);\n  --vd-gray-2: var(--vd-stone-2);\n  --vd-gray-3: var(--vd-stone-3);\n  --vd-gray-4: var(--vd-stone-4);\n  --vd-gray-5: var(--vd-stone-5);\n  --vd-gray-6: var(--vd-stone-6);\n  --vd-gray-7: var(--vd-stone-7);\n  --vd-gray-8: var(--vd-stone-8);\n  --vd-gray-9: var(--vd-stone-9);\n}\n\n/**\n * Vanduo Framework - Self-Hosted Web Fonts\n * Optional font faces for consistent typography across platforms\n * All fonts are OFL (Open Font License) licensed\n */\n\n/* ==========================================================================\n   Inter - Modern, clean sans-serif by Rasmus Andersson\n   https://github.com/rsms/inter\n   ========================================================================== */\n\n@font-face {\n  font-family: 'Inter';\n  src: url('./fonts/inter/inter-regular.woff2') format('woff2');\n  font-weight: 400;\n  font-style: normal;\n  font-display: swap;\n}\n\n@font-face {\n  font-family: 'Inter';\n  src: url('./fonts/inter/inter-medium.woff2') format('woff2');\n  font-weight: 500;\n  font-style: normal;\n  font-display: swap;\n}\n\n@font-face {\n  font-family: 'Inter';\n  src: url('./fonts/inter/inter-semibold.woff2') format('woff2');\n  font-weight: 600;\n  font-style: normal;\n  font-display: swap;\n}\n\n@font-face {\n  font-family: 'Inter';\n  src: url('./fonts/inter/inter-bold.woff2') format('woff2');\n  font-weight: 700;\n  font-style: normal;\n  font-display: swap;\n}\n\n/* ==========================================================================\n   Source Sans 3 - Adobe's versatile sans-serif\n   https://github.com/adobe-fonts/source-sans\n   ========================================================================== */\n\n@font-face {\n  font-family: 'Source Sans 3';\n  src: url('./fonts/source-sans/source-sans-regular.woff2') format('woff2');\n  font-weight: 400;\n  font-style: normal;\n  font-display: swap;\n}\n\n@font-face {\n  font-family: 'Source Sans 3';\n  src: url('./fonts/source-sans/source-sans-semibold.woff2') format('woff2');\n  font-weight: 600;\n  font-style: normal;\n  font-display: swap;\n}\n\n@font-face {\n  font-family: 'Source Sans 3';\n  src: url('./fonts/source-sans/source-sans-bold.woff2') format('woff2');\n  font-weight: 700;\n  font-style: normal;\n  font-display: swap;\n}\n\n/* ==========================================================================\n   Fira Sans - Mozilla's readable sans-serif\n   https://github.com/mozilla/Fira\n   ========================================================================== */\n\n@font-face {\n  font-family: 'Fira Sans';\n  src: url('./fonts/fira-sans/fira-sans-regular.woff2') format('woff2');\n  font-weight: 400;\n  font-style: normal;\n  font-display: swap;\n}\n\n@font-face {\n  font-family: 'Fira Sans';\n  src: url('./fonts/fira-sans/fira-sans-medium.woff2') format('woff2');\n  font-weight: 500;\n  font-style: normal;\n  font-display: swap;\n}\n\n@font-face {\n  font-family: 'Fira Sans';\n  src: url('./fonts/fira-sans/fira-sans-bold.woff2') format('woff2');\n  font-weight: 700;\n  font-style: normal;\n  font-display: swap;\n}\n\n/* ==========================================================================\n   IBM Plex Sans - Professional, complete font family\n   https://github.com/IBM/plex\n   ========================================================================== */\n\n@font-face {\n  font-family: 'IBM Plex Sans';\n  src: url('./fonts/ibm-plex/ibm-plex-sans-regular.woff2') format('woff2');\n  font-weight: 400;\n  font-style: normal;\n  font-display: swap;\n}\n\n@font-face {\n  font-family: 'IBM Plex Sans';\n  src: url('./fonts/ibm-plex/ibm-plex-sans-medium.woff2') format('woff2');\n  font-weight: 500;\n  font-style: normal;\n  font-display: swap;\n}\n\n@font-face {\n  font-family: 'IBM Plex Sans';\n  src: url('./fonts/ibm-plex/ibm-plex-sans-bold.woff2') format('woff2');\n  font-weight: 700;\n  font-style: normal;\n  font-display: swap;\n}\n\n/* ==========================================================================\n   JetBrains Mono - Monospace font for code\n   https://github.com/JetBrains/JetBrainsMono\n   ========================================================================== */\n\n@font-face {\n  font-family: 'JetBrains Mono';\n  src: url('./fonts/jetbrains-mono/jetbrains-mono-regular.woff2') format('woff2');\n  font-weight: 400;\n  font-style: normal;\n  font-display: swap;\n}\n\n@font-face {\n  font-family: 'JetBrains Mono';\n  src: url('./fonts/jetbrains-mono/jetbrains-mono-bold.woff2') format('woff2');\n  font-weight: 700;\n  font-style: normal;\n  font-display: swap;\n}\n\n/* ==========================================================================\n   Ubuntu - Humanist sans-serif by Dalton Maag\n   https://design.ubuntu.com/font/\n   ========================================================================== */\n\n@font-face {\n  font-family: 'Ubuntu';\n  src: url('./fonts/ubuntu/ubuntu-regular.woff2') format('woff2');\n  font-weight: 400;\n  font-style: normal;\n  font-display: swap;\n}\n\n@font-face {\n  font-family: 'Ubuntu';\n  src: url('./fonts/ubuntu/ubuntu-medium.woff2') format('woff2');\n  font-weight: 500;\n  font-style: normal;\n  font-display: swap;\n}\n\n@font-face {\n  font-family: 'Ubuntu';\n  src: url('./fonts/ubuntu/ubuntu-bold.woff2') format('woff2');\n  font-weight: 700;\n  font-style: normal;\n  font-display: swap;\n}\n\n/* ==========================================================================\n   Lato - Humanist sans-serif by Lukasz Dziedzic\n   https://fonts.google.com/specimen/Lato\n   ========================================================================== */\n\n@font-face {\n  font-family: 'Lato';\n  src: url('./fonts/lato/lato-regular.woff2') format('woff2');\n  font-weight: 400;\n  font-style: normal;\n  font-display: swap;\n}\n\n@font-face {\n  font-family: 'Lato';\n  src: url('./fonts/lato/lato-bold.woff2') format('woff2');\n  font-weight: 700;\n  font-style: normal;\n  font-display: swap;\n}\n\n/* ==========================================================================\n   Open Sans - Neutral sans-serif by Steve Matteson\n   https://fonts.google.com/specimen/Open+Sans\n   ========================================================================== */\n\n@font-face {\n  font-family: 'Open Sans';\n  src: url('./fonts/open-sans/open-sans-regular.woff2') format('woff2');\n  font-weight: 400;\n  font-style: normal;\n  font-display: swap;\n}\n\n@font-face {\n  font-family: 'Open Sans';\n  src: url('./fonts/open-sans/open-sans-medium.woff2') format('woff2');\n  font-weight: 500;\n  font-style: normal;\n  font-display: swap;\n}\n\n@font-face {\n  font-family: 'Open Sans';\n  src: url('./fonts/open-sans/open-sans-bold.woff2') format('woff2');\n  font-weight: 700;\n  font-style: normal;\n  font-display: swap;\n}\n\n/* ==========================================================================\n   Rubik - Geometric sans-serif by Hubert and Fischer\n   https://fonts.google.com/specimen/Rubik\n   ========================================================================== */\n\n@font-face {\n  font-family: 'Rubik';\n  src: url('./fonts/rubik/rubik-regular.woff2') format('woff2');\n  font-weight: 400;\n  font-style: normal;\n  font-display: swap;\n}\n\n@font-face {\n  font-family: 'Rubik';\n  src: url('./fonts/rubik/rubik-medium.woff2') format('woff2');\n  font-weight: 500;\n  font-style: normal;\n  font-display: swap;\n}\n\n@font-face {\n  font-family: 'Rubik';\n  src: url('./fonts/rubik/rubik-bold.woff2') format('woff2');\n  font-weight: 700;\n  font-style: normal;\n  font-display: swap;\n}\n\n/* ==========================================================================\n   Titillium Web - Sans-serif by Accademia di Belle Arti di Urbino\n   https://fonts.google.com/specimen/Titillium+Web\n   ========================================================================== */\n\n@font-face {\n  font-family: 'Titillium Web';\n  src: url('./fonts/titillium-web/titillium-web-regular.woff2') format('woff2');\n  font-weight: 400;\n  font-style: normal;\n  font-display: swap;\n}\n\n@font-face {\n  font-family: 'Titillium Web';\n  src: url('./fonts/titillium-web/titillium-web-semibold.woff2') format('woff2');\n  font-weight: 600;\n  font-style: normal;\n  font-display: swap;\n}\n\n@font-face {\n  font-family: 'Titillium Web';\n  src: url('./fonts/titillium-web/titillium-web-bold.woff2') format('woff2');\n  font-weight: 700;\n  font-style: normal;\n  font-display: swap;\n}\n\n/* ==========================================================================\n   Zen Dots - Display sans-serif by Yuki Kato\n   https://fonts.google.com/specimen/Zen+Dots\n   ========================================================================== */\n\n@font-face {\n  font-family: 'Zen Dots';\n  src: url('./fonts/zen-dots/zen-dots-regular.woff2') format('woff2');\n  font-weight: 400;\n  font-style: normal;\n  font-display: swap;\n}\n\n/**\n * Vanduo Framework - Typography\n * Font system, headings, and text utilities\n */\n\n/* stylelint-disable-next-line no-duplicate-selectors -- token families stay grouped by concern. */\n:root {\n  /* Font Families */\n  --vd-font-family-sans: 'Ubuntu', -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif;\n  --vd-font-family-serif: Georgia, \"Times New Roman\", Times, serif;\n  --vd-font-family-mono: \"SF Mono\", Monaco, \"Cascadia Code\", \"Roboto Mono\", Consolas, \"Courier New\", monospace;\n}\n\n/* Font Switching - Applied via data-font attribute on html element */\n[data-font=\"inter\"] {\n  --vd-font-family-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n}\n\n[data-font=\"source-sans\"] {\n  --vd-font-family-sans: 'Source Sans 3', -apple-system, BlinkMacSystemFont, sans-serif;\n}\n\n[data-font=\"fira-sans\"] {\n  --vd-font-family-sans: 'Fira Sans', -apple-system, BlinkMacSystemFont, sans-serif;\n}\n\n[data-font=\"ibm-plex\"] {\n  --vd-font-family-sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, sans-serif;\n}\n\n[data-font=\"jetbrains-mono\"] {\n  --vd-font-family-sans: 'JetBrains Mono', monospace;\n  --vd-font-family-mono: 'JetBrains Mono', monospace;\n}\n\n[data-font=\"ubuntu\"] {\n  --vd-font-family-sans: 'Ubuntu', -apple-system, BlinkMacSystemFont, sans-serif;\n}\n\n[data-font=\"lato\"] {\n  --vd-font-family-sans: 'Lato', -apple-system, BlinkMacSystemFont, sans-serif;\n}\n\n[data-font=\"open-sans\"] {\n  --vd-font-family-sans: 'Open Sans', -apple-system, BlinkMacSystemFont, sans-serif;\n}\n\n[data-font=\"zen-dots\"] {\n  --vd-font-family-sans: 'Zen Dots', -apple-system, BlinkMacSystemFont, sans-serif;\n}\n\n[data-font=\"rubik\"] {\n  --vd-font-family-sans: 'Rubik', -apple-system, BlinkMacSystemFont, sans-serif;\n}\n\n[data-font=\"titillium-web\"] {\n  --vd-font-family-sans: 'Titillium Web', -apple-system, BlinkMacSystemFont, sans-serif;\n}\n\n/* stylelint-disable-next-line no-duplicate-selectors -- type scale tokens stay grouped separately from font-family tokens. */\n:root {\n\n  /* Golden Ratio Type Scale (Fluid)\n   * Uses clamp() to scale between mobile (min) and desktop (max)\n   * Mobile scale: ~1.414 (Augmented Fourth)\n   * Desktop scale: 1.618 (Golden Ratio)\n   */\n  --vd-font-size-xs: 0.625rem;\n  /* 10px */\n  --vd-font-size-sm: 0.8125rem;\n  /* 13px */\n  --vd-font-size-base: 1rem;\n  /* 16px */\n  --vd-font-size-lg: clamp(1.125rem, 1.08rem + 0.22vw, 1.25rem);\n  /* 18px -> 20px */\n  --vd-font-size-xl: clamp(1.35rem, 1.25rem + 0.5vw, 1.625rem);\n  /* 21.6px -> 26px */\n  --vd-font-size-2xl: clamp(1.62rem, 1.46rem + 0.8vw, 2.0625rem);\n  /* 26px -> 33px */\n  --vd-font-size-3xl: clamp(1.94rem, 1.69rem + 1.25vw, 2.625rem);\n  /* 31px -> 42px */\n  --vd-font-size-4xl: clamp(2.33rem, 1.97rem + 1.8vw, 3.3125rem);\n  /* 37px -> 53px */\n  --vd-font-size-5xl: clamp(2.8rem, 2.27rem + 2.65vw, 4.25rem);\n  /* 45px -> 68px */\n  --vd-font-size-6xl: clamp(3.36rem, 2.63rem + 3.65vw, 5.375rem);\n  /* 54px -> 86px */\n\n  /* Font Weights */\n  --vd-font-weight-light: 300;\n  --vd-font-weight-normal: 400;\n  --vd-font-weight-medium: 500;\n  --vd-font-weight-semibold: 600;\n  --vd-font-weight-bold: 700;\n  --vd-font-weight-extrabold: 800;\n\n  /* Line Heights (phi-derived) */\n  --vd-line-height-none: 1;\n  --vd-line-height-tight: 1.236;\n  /* ~2/phi - for headings */\n  --vd-line-height-snug: 1.382;\n  /* ~(1+1/phi)/1.17 */\n  --vd-line-height-normal: 1.5;\n  /* body text standard */\n  --vd-line-height-relaxed: 1.618;\n  /* phi itself */\n  --vd-line-height-loose: 2;\n\n  /* Letter Spacing */\n  --vd-letter-spacing-tighter: -0.05em;\n  --vd-letter-spacing-tight: -0.025em;\n  --vd-letter-spacing-normal: 0;\n  --vd-letter-spacing-wide: 0.025em;\n  --vd-letter-spacing-wider: 0.05em;\n  --vd-letter-spacing-widest: 0.1em;\n}\n\n/* Base Typography */\nbody {\n  font-family: var(--vd-font-family-sans);\n  font-size: var(--vd-font-size-base);\n  font-weight: var(--vd-font-weight-normal);\n  line-height: var(--vd-line-height-normal);\n  color: var(--vd-text-primary);\n  background-color: var(--vd-bg-primary);\n}\n\n/* Headings */\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n  margin-top: 0;\n  margin-bottom: 0.5em;\n  font-weight: var(--vd-font-weight-bold);\n  line-height: var(--vd-line-height-tight);\n  color: var(--vd-text-primary);\n}\n\nh1 {\n  font-size: var(--vd-font-size-4xl);\n}\n\nh2 {\n  font-size: var(--vd-font-size-3xl);\n}\n\nh3 {\n  font-size: var(--vd-font-size-2xl);\n}\n\nh4 {\n  font-size: var(--vd-font-size-xl);\n}\n\nh5 {\n  font-size: var(--vd-font-size-lg);\n}\n\nh6 {\n  font-size: var(--vd-font-size-base);\n}\n\n/* Paragraphs */\np {\n  margin-top: 0;\n  margin-bottom: 1em;\n}\n\n/* Links */\na {\n  color: var(--vd-color-primary);\n  text-decoration: none;\n  transition: color 0.2s ease;\n}\n\na:hover {\n  color: var(--vd-color-primary-dark);\n  text-decoration: underline;\n}\n\na:focus-visible {\n  outline: 2px solid var(--vd-color-primary);\n  outline-offset: 2px;\n}\n\n/* Lists */\nul,\nol {\n  margin-top: 0;\n  margin-bottom: 1em;\n  padding-left: 2em;\n}\n\nli {\n  margin-bottom: 0.25em;\n}\n\n/* Definition Lists */\ndl {\n  margin-top: 0;\n  margin-bottom: 1em;\n}\n\ndt {\n  font-weight: var(--vd-font-weight-semibold);\n  margin-top: 0.5em;\n}\n\ndd {\n  margin-left: 1.5em;\n  margin-bottom: 0.5em;\n}\n\n/* Blockquote */\nblockquote {\n  margin: 1em 0;\n  padding-left: 0.8125rem;\n  /* 13px - fib */\n  border-left: 3px solid var(--vd-color-primary);\n  /* fib(3) */\n  color: var(--vd-text-secondary);\n  font-style: italic;\n}\n\n/* Code */\ncode {\n  font-family: var(--vd-font-family-mono);\n  font-size: 0.875em;\n  background-color: var(--vd-bg-secondary);\n  padding: 0.125em 0.1875em;\n  /* 2px 3px - fib pair */\n  border-radius: var(--vd-radius-fib-3);\n  color: var(--vd-color-primary-dark);\n}\n\npre {\n  font-family: var(--vd-font-family-mono);\n  font-size: 0.875em;\n  background-color: var(--vd-bg-secondary);\n  padding: 0.8125rem;\n  /* 13px - fib */\n  border-radius: var(--vd-radius-fib-5);\n  overflow-x: auto;\n  margin: 1em 0;\n}\n\npre code {\n  background-color: transparent;\n  padding: 0;\n  color: inherit;\n}\n\n/* Font Family Utilities */\n.vd-font-sans {\n  font-family: var(--vd-font-family-sans);\n}\n\n.vd-font-serif {\n  font-family: var(--vd-font-family-serif);\n}\n\n.vd-font-mono {\n  font-family: var(--vd-font-family-mono);\n}\n\n/* Font Size Utilities */\n.vd-text-xs {\n  font-size: var(--vd-font-size-xs);\n}\n\n.vd-text-sm {\n  font-size: var(--vd-font-size-sm);\n}\n\n.vd-text-base {\n  font-size: var(--vd-font-size-base);\n}\n\n.vd-text-lg {\n  font-size: var(--vd-font-size-lg);\n}\n\n.vd-text-xl {\n  font-size: var(--vd-font-size-xl);\n}\n\n.vd-text-2xl {\n  font-size: var(--vd-font-size-2xl);\n}\n\n.vd-text-3xl {\n  font-size: var(--vd-font-size-3xl);\n}\n\n.vd-text-4xl {\n  font-size: var(--vd-font-size-4xl);\n}\n\n.vd-text-5xl {\n  font-size: var(--vd-font-size-5xl);\n}\n\n.vd-text-6xl {\n  font-size: var(--vd-font-size-6xl);\n}\n\n/* Font Weight Utilities */\n.vd-font-light {\n  font-weight: var(--vd-font-weight-light);\n}\n\n.vd-font-normal {\n  font-weight: var(--vd-font-weight-normal);\n}\n\n.vd-font-medium {\n  font-weight: var(--vd-font-weight-medium);\n}\n\n.vd-font-semibold {\n  font-weight: var(--vd-font-weight-semibold);\n}\n\n.vd-font-bold {\n  font-weight: var(--vd-font-weight-bold);\n}\n\n.vd-text-italic {\n  font-style: italic;\n}\n\n.vd-font-extrabold {\n  font-weight: var(--vd-font-weight-extrabold);\n}\n\n/* Text Alignment: see helpers.css for .vd-text-left, .vd-text-center, .vd-text-right, .vd-text-justify */\n\n/* Text Transform Utilities (shorthand aliases — see also .vd-text-uppercase etc. in helpers.css) */\n.uppercase {\n  text-transform: uppercase;\n}\n\n.lowercase {\n  text-transform: lowercase;\n}\n\n.capitalize {\n  text-transform: capitalize;\n}\n\n.normal-case {\n  text-transform: none;\n}\n\n/* Text Decoration Utilities */\n.underline {\n  text-decoration: underline;\n}\n\n.line-through {\n  text-decoration: line-through;\n}\n\n.no-underline {\n  text-decoration: none;\n}\n\n/* Line Height Utilities */\n.leading-none {\n  line-height: var(--vd-line-height-none);\n}\n\n.leading-tight {\n  line-height: var(--vd-line-height-tight);\n}\n\n.leading-snug {\n  line-height: var(--vd-line-height-snug);\n}\n\n.leading-normal {\n  line-height: var(--vd-line-height-normal);\n}\n\n.leading-relaxed {\n  line-height: var(--vd-line-height-relaxed);\n}\n\n.leading-loose {\n  line-height: var(--vd-line-height-loose);\n}\n\n/* Letter Spacing Utilities */\n.tracking-tighter {\n  letter-spacing: var(--vd-letter-spacing-tighter);\n}\n\n.tracking-tight {\n  letter-spacing: var(--vd-letter-spacing-tight);\n}\n\n.tracking-normal {\n  letter-spacing: var(--vd-letter-spacing-normal);\n}\n\n.tracking-wide {\n  letter-spacing: var(--vd-letter-spacing-wide);\n}\n\n.tracking-wider {\n  letter-spacing: var(--vd-letter-spacing-wider);\n}\n\n.tracking-widest {\n  letter-spacing: var(--vd-letter-spacing-widest);\n}\n\n/**\n * Vanduo Framework - Design Tokens\n * Centralized CSS custom properties for consistent theming\n * v1.4.1\n */\n\n:root {\n  /* ============================================\n   * COLOR TOKENS\n   * Based on Open Color with semantic mapping\n   * ============================================ */\n\n  /* Primary Colors */\n  --vd-color-primary: var(--vd-primary-5);\n  --vd-color-primary-light: var(--vd-primary-3);\n  --vd-color-primary-dark: var(--vd-primary-7);\n  --vd-color-primary-hover: var(--vd-primary-6);\n  --vd-color-primary-active: var(--vd-primary-7);\n  --vd-color-primary-rgb: 92, 124, 250;\n  --vd-color-primary-alpha-5: rgba(92, 124, 250, 0.05);\n  --vd-color-primary-alpha-08: rgba(92, 124, 250, 0.08);\n  --vd-color-primary-alpha-10: rgba(92, 124, 250, 0.1);\n  --vd-color-primary-alpha-15: rgba(92, 124, 250, 0.15);\n  --vd-color-primary-alpha-20: rgba(92, 124, 250, 0.2);\n  --vd-color-primary-alpha-30: rgba(92, 124, 250, 0.3);\n  --vd-color-primary-alpha-40: rgba(92, 124, 250, 0.4);\n  --vd-color-primary-alpha-50: rgba(92, 124, 250, 0.5);\n\n  /* Secondary Colors */\n  --vd-color-secondary: var(--vd-secondary-5);\n  --vd-color-secondary-light: var(--vd-secondary-3);\n  --vd-color-secondary-dark: var(--vd-secondary-7);\n  --vd-color-secondary-hover: var(--vd-secondary-6);\n  --vd-color-secondary-active: var(--vd-secondary-7);\n  --vd-color-secondary-alpha-10: rgba(32, 201, 151, 0.1);\n  --vd-color-secondary-alpha-20: rgba(32, 201, 151, 0.2);\n\n  /* Accent */\n  --vd-color-accent: var(--vd-color-primary);\n  --vd-color-accent-light: var(--vd-color-primary-light);\n  --vd-color-accent-dark: var(--vd-color-primary-dark);\n\n  /* Semantic Colors */\n  --vd-color-success: var(--vd-success-6);\n  --vd-color-success-light: var(--vd-success-4);\n  --vd-color-success-dark: var(--vd-success-7);\n  --vd-color-success-hover: var(--vd-success-7);\n  --vd-color-success-active: var(--vd-success-8);\n  --vd-color-success-rgb: 64, 192, 87;\n  --vd-color-success-alpha-10: rgba(64, 192, 87, 0.1);\n  --vd-color-success-alpha-20: rgba(64, 192, 87, 0.2);\n\n  --vd-color-warning: var(--vd-warning-6);\n  --vd-color-warning-light: var(--vd-warning-4);\n  --vd-color-warning-dark: var(--vd-warning-7);\n  --vd-color-warning-hover: var(--vd-warning-7);\n  --vd-color-warning-active: var(--vd-warning-8);\n  --vd-color-warning-rgb: 250, 176, 5;\n  --vd-color-warning-alpha-10: rgba(250, 176, 5, 0.1);\n  --vd-color-warning-alpha-20: rgba(250, 176, 5, 0.2);\n  --vd-color-warning-alpha-30: rgba(250, 176, 5, 0.3);\n\n  --vd-color-error: var(--vd-danger-6);\n  --vd-color-error-light: var(--vd-danger-4);\n  --vd-color-error-dark: var(--vd-danger-7);\n  --vd-color-error-hover: var(--vd-danger-7);\n  --vd-color-error-active: var(--vd-danger-8);\n  --vd-color-error-rgb: 250, 82, 82;\n  --vd-color-error-alpha-10: rgba(250, 82, 82, 0.1);\n  --vd-color-error-alpha-20: rgba(250, 82, 82, 0.2);\n\n  --vd-color-danger: var(--vd-color-error);\n  --vd-color-danger-light: var(--vd-color-error-light);\n  --vd-color-danger-dark: var(--vd-color-error-dark);\n  --vd-color-danger-hover: var(--vd-color-error-hover);\n  --vd-color-danger-active: var(--vd-color-error-active);\n  --vd-color-danger-alpha-10: var(--vd-color-error-alpha-10);\n  --vd-color-danger-alpha-20: var(--vd-color-error-alpha-20);\n\n  --vd-color-info: var(--vd-info-6);\n  --vd-color-info-light: var(--vd-info-4);\n  --vd-color-info-dark: var(--vd-info-7);\n  --vd-color-info-hover: var(--vd-info-7);\n  --vd-color-info-active: var(--vd-info-8);\n  --vd-color-info-rgb: 34, 139, 230;\n  --vd-color-info-alpha-10: rgba(34, 139, 230, 0.1);\n  --vd-color-info-alpha-20: rgba(34, 139, 230, 0.2);\n\n  /* Neutral Colors (Open Color) */\n  --vd-color-white: #ffffff;\n  --vd-color-black: #000000;\n  --vd-color-gray-50: var(--vd-gray-0);\n  --vd-color-gray-100: var(--vd-gray-2);\n  --vd-color-gray-200: var(--vd-gray-3);\n  --vd-color-gray-300: var(--vd-gray-4);\n  --vd-color-gray-400: var(--vd-gray-5);\n  --vd-color-gray-500: var(--vd-gray-6);\n  --vd-color-gray-600: var(--vd-gray-7);\n  --vd-color-gray-700: var(--vd-gray-8);\n  --vd-color-gray-800: var(--vd-gray-9);\n  --vd-color-gray-900: #1a1d20;\n\n  /* ============================================\n   * BACKGROUND TOKENS\n   * ============================================ */\n  --vd-bg-primary: var(--vd-color-white);\n  --vd-bg-secondary: var(--vd-color-gray-100);\n  --vd-bg-tertiary: var(--vd-color-gray-200);\n  --vd-bg-dark: var(--vd-color-gray-800);\n  --vd-bg-darker: var(--vd-color-gray-900);\n\n  /* ============================================\n   * TEXT TOKENS\n   * ============================================ */\n  --vd-text-primary: var(--vd-color-gray-900);\n  --vd-text-secondary: var(--vd-color-gray-600);\n  --vd-text-muted: var(--vd-color-gray-500);\n  --vd-text-light: var(--vd-color-gray-400);\n  --vd-text-tertiary: var(--vd-text-secondary);\n  --vd-text-disabled: var(--vd-text-muted);\n  --vd-text-on-primary: var(--vd-color-white);\n  --vd-text-inverse: var(--vd-color-white);\n\n  /* ============================================\n   * BORDER TOKENS\n   * ============================================ */\n  --vd-border-color: var(--vd-color-gray-300);\n  --vd-border-color-light: var(--vd-color-gray-200);\n  --vd-border-color-dark: var(--vd-color-gray-400);\n  --vd-border-width: 1px;\n  --vd-border-radius-sm: 0.25rem;\n  --vd-border-radius-md: 0.5rem;\n  --vd-border-radius-lg: 0.75rem;\n  --vd-border-radius-xl: 1rem;\n\n  /* ============================================\n   * TYPOGRAPHY TOKENS\n   * ============================================ */\n  --vd-font-family-base: 'Ubuntu', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n  --vd-font-family-mono: 'JetBrains Mono', 'Fira Code', monospace;\n\n  /* Font Sizes (Fibonacci scale) */\n  --vd-font-size-xs: 0.75rem;\n  --vd-font-size-sm: 0.8125rem;\n  --vd-font-size-base: 1rem;\n  --vd-font-size-lg: 1.125rem;\n  --vd-font-size-xl: 1.25rem;\n  --vd-font-size-2xl: 1.5rem;\n  --vd-font-size-3xl: 1.875rem;\n  --vd-font-size-4xl: 2.25rem;\n\n  /* Font Weights */\n  --vd-font-weight-light: 300;\n  --vd-font-weight-normal: 400;\n  --vd-font-weight-medium: 500;\n  --vd-font-weight-semibold: 600;\n  --vd-font-weight-bold: 700;\n\n  /* Line Heights */\n  --vd-line-height-tight: 1.25;\n  --vd-line-height-normal: 1.5;\n  --vd-line-height-relaxed: 1.75;\n\n  /* ============================================\n   * SPACING TOKENS (Fibonacci)\n   * ============================================ */\n  --vd-space-fib-1: 0.125rem;   /* 2px */\n  --vd-space-fib-2: 0.25rem;    /* 4px */\n  --vd-space-fib-3: 0.375rem;   /* 6px */\n  --vd-space-fib-5: 0.5rem;     /* 8px */\n  --vd-space-fib-8: 0.75rem;    /* 12px */\n  --vd-space-fib-13: 0.8125rem; /* 13px */\n  --vd-space-fib-21: 1.3125rem; /* 21px */\n  --vd-space-fib-34: 2.125rem;  /* 34px */\n  --vd-space-fib-55: 3.4375rem; /* 55px */\n\n  /* Standard spacing */\n  --vd-space-1: 0.25rem;\n  --vd-space-2: 0.5rem;\n  --vd-space-3: 0.75rem;\n  --vd-space-4: 1rem;\n  --vd-space-5: 1.25rem;\n  --vd-space-6: 1.5rem;\n  --vd-space-8: 2rem;\n  --vd-space-10: 2.5rem;\n  --vd-space-12: 3rem;\n  --vd-space-16: 4rem;\n\n  /* ============================================\n   * SHADOW TOKENS\n   * ============================================ */\n  --vd-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);\n  --vd-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);\n  --vd-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);\n  --vd-shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15);\n\n  /* ============================================\n   * GLASS TOKENS\n   * ============================================ */\n  --vd-glass-blur: 12px;\n  --vd-glass-saturate: 1.8;\n  --vd-glass-bg-opacity: 0.65;\n  --vd-glass-bg-light: rgba(255, 255, 255, var(--vd-glass-bg-opacity));\n  --vd-glass-bg-dark: rgba(30, 30, 30, var(--vd-glass-bg-opacity));\n  --vd-glass-border-alpha: 0.18;\n  --vd-glass-border-light: rgba(255, 255, 255, var(--vd-glass-border-alpha));\n  --vd-glass-border-dark: rgba(255, 255, 255, 0.08);\n  --vd-glass-highlight-alpha: 0.25;\n  --vd-glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);\n  --vd-glass-noise-opacity: 0.03;\n\n  /* ============================================\n   * TRANSITION TOKENS\n   * ============================================ */\n  --vd-transition-fast: 150ms ease;\n  --vd-transition-normal: 250ms ease;\n  --vd-transition-slow: 350ms ease;\n\n  /* ============================================\n   * Z-INDEX TOKENS\n   * ============================================ */\n  --vd-z-dropdown: 1000;\n  --vd-z-sticky: 1020;\n  --vd-z-fixed: 1030;\n  --vd-z-modal-backdrop: 1040;\n  --vd-z-modal: 1050;\n  --vd-z-popover: 1060;\n  --vd-z-tooltip: 1070;\n  --vd-z-toast: 1080;\n\n  /* ============================================\n   * BREAKPOINT TOKENS\n   * (Documented, not CSS variables - used in media queries)\n   * ============================================ */\n  /* sm: 576px */\n  /* md: 768px */\n  /* lg: 992px */\n  /* xl: 1200px */\n  /* 2xl: 1400px */\n}\n\n/* ============================================\n * DARK MODE TOKENS\n * ============================================ */\n[data-theme=\"dark\"] {\n  --vd-bg-primary: var(--vd-color-gray-900);\n  --vd-bg-secondary: var(--vd-color-gray-800);\n  --vd-bg-tertiary: var(--vd-color-gray-700);\n  --vd-bg-dark: var(--vd-color-black);\n  --vd-bg-darker: #000000;\n\n  --vd-text-primary: var(--vd-color-gray-100);\n  --vd-text-secondary: var(--vd-color-gray-400);\n  --vd-text-muted: var(--vd-color-gray-500);\n  --vd-text-light: var(--vd-color-gray-600);\n  --vd-text-inverse: var(--vd-color-gray-900);\n\n  --vd-border-color: var(--vd-color-gray-700);\n  --vd-border-color-light: var(--vd-color-gray-800);\n  --vd-border-color-dark: var(--vd-color-gray-600);\n\n  --vd-color-primary: var(--vd-primary-4);\n  --vd-color-primary-light: var(--vd-primary-3);\n  --vd-color-primary-dark: var(--vd-primary-5);\n  --vd-color-primary-hover: var(--vd-primary-5);\n  --vd-color-primary-active: var(--vd-primary-6);\n  --vd-color-primary-alpha-10: rgba(116, 143, 252, 0.15);\n  --vd-color-primary-alpha-20: rgba(116, 143, 252, 0.25);\n\n  --vd-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);\n  --vd-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);\n  --vd-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.4);\n\n  --vd-glass-bg-light: var(--vd-glass-bg-dark);\n  --vd-glass-border-light: var(--vd-glass-border-dark);\n  --vd-glass-shadow: 0 12px 36px rgba(0, 0, 0, 0.45);\n  --vd-glass-highlight-alpha: 0.16;\n}\n\n/* Dark mode via prefers-color-scheme */\n@media (prefers-color-scheme: dark) {\n  :root:not([data-theme]) {\n    --vd-bg-primary: var(--vd-color-gray-900);\n    --vd-bg-secondary: var(--vd-color-gray-800);\n    --vd-bg-tertiary: var(--vd-color-gray-700);\n    --vd-bg-dark: var(--vd-color-black);\n    --vd-bg-darker: #000000;\n\n    --vd-text-primary: var(--vd-color-gray-100);\n    --vd-text-secondary: var(--vd-color-gray-400);\n    --vd-text-muted: var(--vd-color-gray-500);\n    --vd-text-light: var(--vd-color-gray-600);\n    --vd-text-inverse: var(--vd-color-gray-900);\n\n    --vd-border-color: var(--vd-color-gray-700);\n    --vd-border-color-light: var(--vd-color-gray-800);\n    --vd-border-color-dark: var(--vd-color-gray-600);\n\n    --vd-color-primary: var(--vd-primary-4);\n    --vd-color-primary-light: var(--vd-primary-3);\n    --vd-color-primary-dark: var(--vd-primary-5);\n    --vd-color-primary-hover: var(--vd-primary-5);\n    --vd-color-primary-active: var(--vd-primary-6);\n    --vd-color-primary-alpha-10: rgba(116, 143, 252, 0.15);\n    --vd-color-primary-alpha-20: rgba(116, 143, 252, 0.25);\n\n    --vd-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);\n    --vd-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);\n    --vd-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.4);\n\n    --vd-glass-bg-light: var(--vd-glass-bg-dark);\n    --vd-glass-border-light: var(--vd-glass-border-dark);\n    --vd-glass-shadow: 0 12px 36px rgba(0, 0, 0, 0.45);\n    --vd-glass-highlight-alpha: 0.16;\n  }\n}\n\n/**\n * Vanduo Framework - Grid System\n * Responsive grid system using CSS Grid and Flexbox\n */\n\n:root {\n  /* Container (Fibonacci: 987px) */\n  --vd-container-max-width: 987px;\n  --vd-container-max-width-wide: 1597px;\n  /* next Fibonacci */\n  --vd-container-padding: 0.8125rem;\n  /* 13px - fib */\n\n  /* Breakpoints */\n  --vd-breakpoint-sm: 576px;\n  --vd-breakpoint-md: 768px;\n  --vd-breakpoint-lg: 992px;\n  --vd-breakpoint-xl: 1200px;\n  --vd-breakpoint-2xl: 1400px;\n\n  /* Grid Gutter (Fibonacci: 13px) */\n  --vd-grid-gutter: 0.8125rem;\n\n  /* Fibonacci Gap Scale */\n  --vd-gap-fib-2: 0.125rem;\n  /* 2px */\n  --vd-gap-fib-3: 0.1875rem;\n  /* 3px */\n  --vd-gap-fib-5: 0.3125rem;\n  /* 5px */\n  --vd-gap-fib-8: 0.5rem;\n  /* 8px */\n  --vd-gap-fib-13: 0.8125rem;\n  /* 13px */\n  --vd-gap-fib-21: 1.3125rem;\n  /* 21px */\n\n  /* Responsive Container Widths (Fibonacci-derived)\n   * Using Fibonacci: 377, 610, 987, 1597\n   * Lucas numbers (related to Fibonacci): 521, 843, 1364 for intermediate sizes */\n  --vd-container-sm: 521px;\n  /* Lucas - between fib 377 and 610 */\n  --vd-container-md: 610px;\n  /* Fibonacci */\n  --vd-container-lg: 987px;\n  /* Fibonacci - matches --vd-container-max-width */\n  --vd-container-xl: 1364px;\n  /* Lucas - between fib 987 and 1597 */\n  --vd-container-2xl: 1597px;\n  /* Fibonacci - matches --vd-container-max-width-wide */\n}\n\n/* Container */\n.vd-container {\n  width: 100%;\n  max-width: var(--vd-container-max-width);\n  margin-left: auto;\n  margin-right: auto;\n  padding-left: var(--vd-container-padding);\n  padding-right: var(--vd-container-padding);\n}\n\n.vd-container-fluid {\n  width: 100%;\n  padding-left: var(--vd-container-padding);\n  padding-right: var(--vd-container-padding);\n}\n\n/* Container XL - Intermediate size (1364px Lucas number) */\n.vd-container-xl {\n  width: 100%;\n  max-width: var(--vd-container-xl);\n  margin-left: auto;\n  margin-right: auto;\n  padding-left: var(--vd-container-padding);\n  padding-right: var(--vd-container-padding);\n}\n\n/* Container Wide - Full Fibonacci wide (1597px) */\n.vd-container-wide {\n  width: 100%;\n  max-width: var(--vd-container-max-width-wide);\n  margin-left: auto;\n  margin-right: auto;\n  padding-left: var(--vd-container-padding);\n  padding-right: var(--vd-container-padding);\n}\n\n/* Container Responsive - Grows with viewport at XL+ breakpoints */\n.vd-container-responsive {\n  width: 100%;\n  max-width: var(--vd-container-max-width);\n  margin-left: auto;\n  margin-right: auto;\n  padding-left: var(--vd-container-padding);\n  padding-right: var(--vd-container-padding);\n}\n\n@media (min-width: 1200px) {\n  .vd-container-responsive {\n    max-width: var(--vd-container-xl);\n  }\n}\n\n@media (min-width: 1400px) {\n  .vd-container-responsive {\n    max-width: var(--vd-container-2xl);\n  }\n}\n\n/* Row */\n.vd-row {\n  display: flex;\n  flex-wrap: wrap;\n  margin-left: calc(var(--vd-grid-gutter) * -0.5);\n  margin-right: calc(var(--vd-grid-gutter) * -0.5);\n}\n\n/* Columns */\n[class*=\"col-\"] {\n  flex: 1 0 0%;\n  padding-left: calc(var(--vd-grid-gutter) * 0.5);\n  padding-right: calc(var(--vd-grid-gutter) * 0.5);\n}\n\n/* Column Sizes - Mobile First (12-column system) */\n.vd-col-1 {\n  flex: 0 0 auto;\n  width: 8.333333%;\n}\n\n.vd-col-2 {\n  flex: 0 0 auto;\n  width: 16.666667%;\n}\n\n.vd-col-3 {\n  flex: 0 0 auto;\n  width: 25%;\n}\n\n.vd-col-4 {\n  flex: 0 0 auto;\n  width: 33.333333%;\n}\n\n.vd-col-5 {\n  flex: 0 0 auto;\n  width: 41.666667%;\n}\n\n.vd-col-6 {\n  flex: 0 0 auto;\n  width: 50%;\n}\n\n.vd-col-7 {\n  flex: 0 0 auto;\n  width: 58.333333%;\n}\n\n.vd-col-8 {\n  flex: 0 0 auto;\n  width: 66.666667%;\n}\n\n.vd-col-9 {\n  flex: 0 0 auto;\n  width: 75%;\n}\n\n.vd-col-10 {\n  flex: 0 0 auto;\n  width: 83.333333%;\n}\n\n.vd-col-11 {\n  flex: 0 0 auto;\n  width: 91.666667%;\n}\n\n.vd-col-12 {\n  flex: 0 0 auto;\n  width: 100%;\n}\n\n.vd-col-auto {\n  flex: 0 0 auto;\n  width: auto;\n}\n\n/* Responsive Columns - Small (sm) */\n@media (min-width: 576px) {\n  .vd-col-sm-1 {\n    flex: 0 0 auto;\n    width: 8.333333%;\n  }\n\n  .vd-col-sm-2 {\n    flex: 0 0 auto;\n    width: 16.666667%;\n  }\n\n  .vd-col-sm-3 {\n    flex: 0 0 auto;\n    width: 25%;\n  }\n\n  .vd-col-sm-4 {\n    flex: 0 0 auto;\n    width: 33.333333%;\n  }\n\n  .vd-col-sm-5 {\n    flex: 0 0 auto;\n    width: 41.666667%;\n  }\n\n  .vd-col-sm-6 {\n    flex: 0 0 auto;\n    width: 50%;\n  }\n\n  .vd-col-sm-7 {\n    flex: 0 0 auto;\n    width: 58.333333%;\n  }\n\n  .vd-col-sm-8 {\n    flex: 0 0 auto;\n    width: 66.666667%;\n  }\n\n  .vd-col-sm-9 {\n    flex: 0 0 auto;\n    width: 75%;\n  }\n\n  .vd-col-sm-10 {\n    flex: 0 0 auto;\n    width: 83.333333%;\n  }\n\n  .vd-col-sm-11 {\n    flex: 0 0 auto;\n    width: 91.666667%;\n  }\n\n  .vd-col-sm-12 {\n    flex: 0 0 auto;\n    width: 100%;\n  }\n\n  .vd-col-sm-auto {\n    flex: 0 0 auto;\n    width: auto;\n  }\n}\n\n/* Responsive Columns - Medium (md) */\n@media (min-width: 768px) {\n  .vd-col-md-1 {\n    flex: 0 0 auto;\n    width: 8.333333%;\n  }\n\n  .vd-col-md-2 {\n    flex: 0 0 auto;\n    width: 16.666667%;\n  }\n\n  .vd-col-md-3 {\n    flex: 0 0 auto;\n    width: 25%;\n  }\n\n  .vd-col-md-4 {\n    flex: 0 0 auto;\n    width: 33.333333%;\n  }\n\n  .vd-col-md-5 {\n    flex: 0 0 auto;\n    width: 41.666667%;\n  }\n\n  .vd-col-md-6 {\n    flex: 0 0 auto;\n    width: 50%;\n  }\n\n  .vd-col-md-7 {\n    flex: 0 0 auto;\n    width: 58.333333%;\n  }\n\n  .vd-col-md-8 {\n    flex: 0 0 auto;\n    width: 66.666667%;\n  }\n\n  .vd-col-md-9 {\n    flex: 0 0 auto;\n    width: 75%;\n  }\n\n  .vd-col-md-10 {\n    flex: 0 0 auto;\n    width: 83.333333%;\n  }\n\n  .vd-col-md-11 {\n    flex: 0 0 auto;\n    width: 91.666667%;\n  }\n\n  .vd-col-md-12 {\n    flex: 0 0 auto;\n    width: 100%;\n  }\n\n  .vd-col-md-auto {\n    flex: 0 0 auto;\n    width: auto;\n  }\n}\n\n/* Responsive Columns - Large (lg) */\n@media (min-width: 992px) {\n  .vd-col-lg-1 {\n    flex: 0 0 auto;\n    width: 8.333333%;\n  }\n\n  .vd-col-lg-2 {\n    flex: 0 0 auto;\n    width: 16.666667%;\n  }\n\n  .vd-col-lg-3 {\n    flex: 0 0 auto;\n    width: 25%;\n  }\n\n  .vd-col-lg-4 {\n    flex: 0 0 auto;\n    width: 33.333333%;\n  }\n\n  .vd-col-lg-5 {\n    flex: 0 0 auto;\n    width: 41.666667%;\n  }\n\n  .vd-col-lg-6 {\n    flex: 0 0 auto;\n    width: 50%;\n  }\n\n  .vd-col-lg-7 {\n    flex: 0 0 auto;\n    width: 58.333333%;\n  }\n\n  .vd-col-lg-8 {\n    flex: 0 0 auto;\n    width: 66.666667%;\n  }\n\n  .vd-col-lg-9 {\n    flex: 0 0 auto;\n    width: 75%;\n  }\n\n  .vd-col-lg-10 {\n    flex: 0 0 auto;\n    width: 83.333333%;\n  }\n\n  .vd-col-lg-11 {\n    flex: 0 0 auto;\n    width: 91.666667%;\n  }\n\n  .vd-col-lg-12 {\n    flex: 0 0 auto;\n    width: 100%;\n  }\n\n  .vd-col-lg-auto {\n    flex: 0 0 auto;\n    width: auto;\n  }\n}\n\n/* Responsive Columns - Extra Large (xl) */\n@media (min-width: 1200px) {\n  .vd-col-xl-1 {\n    flex: 0 0 auto;\n    width: 8.333333%;\n  }\n\n  .vd-col-xl-2 {\n    flex: 0 0 auto;\n    width: 16.666667%;\n  }\n\n  .vd-col-xl-3 {\n    flex: 0 0 auto;\n    width: 25%;\n  }\n\n  .vd-col-xl-4 {\n    flex: 0 0 auto;\n    width: 33.333333%;\n  }\n\n  .vd-col-xl-5 {\n    flex: 0 0 auto;\n    width: 41.666667%;\n  }\n\n  .vd-col-xl-6 {\n    flex: 0 0 auto;\n    width: 50%;\n  }\n\n  .vd-col-xl-7 {\n    flex: 0 0 auto;\n    width: 58.333333%;\n  }\n\n  .vd-col-xl-8 {\n    flex: 0 0 auto;\n    width: 66.666667%;\n  }\n\n  .vd-col-xl-9 {\n    flex: 0 0 auto;\n    width: 75%;\n  }\n\n  .vd-col-xl-10 {\n    flex: 0 0 auto;\n    width: 83.333333%;\n  }\n\n  .vd-col-xl-11 {\n    flex: 0 0 auto;\n    width: 91.666667%;\n  }\n\n  .vd-col-xl-12 {\n    flex: 0 0 auto;\n    width: 100%;\n  }\n\n  .vd-col-xl-auto {\n    flex: 0 0 auto;\n    width: auto;\n  }\n}\n\n/* Responsive Columns - Extra Extra Large (2xl) */\n@media (min-width: 1400px) {\n  .vd-col-2xl-1 {\n    flex: 0 0 auto;\n    width: 8.333333%;\n  }\n\n  .vd-col-2xl-2 {\n    flex: 0 0 auto;\n    width: 16.666667%;\n  }\n\n  .vd-col-2xl-3 {\n    flex: 0 0 auto;\n    width: 25%;\n  }\n\n  .vd-col-2xl-4 {\n    flex: 0 0 auto;\n    width: 33.333333%;\n  }\n\n  .vd-col-2xl-5 {\n    flex: 0 0 auto;\n    width: 41.666667%;\n  }\n\n  .vd-col-2xl-6 {\n    flex: 0 0 auto;\n    width: 50%;\n  }\n\n  .vd-col-2xl-7 {\n    flex: 0 0 auto;\n    width: 58.333333%;\n  }\n\n  .vd-col-2xl-8 {\n    flex: 0 0 auto;\n    width: 66.666667%;\n  }\n\n  .vd-col-2xl-9 {\n    flex: 0 0 auto;\n    width: 75%;\n  }\n\n  .vd-col-2xl-10 {\n    flex: 0 0 auto;\n    width: 83.333333%;\n  }\n\n  .vd-col-2xl-11 {\n    flex: 0 0 auto;\n    width: 91.666667%;\n  }\n\n  .vd-col-2xl-12 {\n    flex: 0 0 auto;\n    width: 100%;\n  }\n\n  .vd-col-2xl-auto {\n    flex: 0 0 auto;\n    width: auto;\n  }\n}\n\n/* Offset Utilities */\n.vd-offset-0 {\n  margin-left: 0;\n}\n\n.vd-offset-1 {\n  margin-left: 8.333333%;\n}\n\n.vd-offset-2 {\n  margin-left: 16.666667%;\n}\n\n.vd-offset-3 {\n  margin-left: 25%;\n}\n\n.vd-offset-4 {\n  margin-left: 33.333333%;\n}\n\n.vd-offset-5 {\n  margin-left: 41.666667%;\n}\n\n.vd-offset-6 {\n  margin-left: 50%;\n}\n\n.vd-offset-7 {\n  margin-left: 58.333333%;\n}\n\n.vd-offset-8 {\n  margin-left: 66.666667%;\n}\n\n.vd-offset-9 {\n  margin-left: 75%;\n}\n\n.vd-offset-10 {\n  margin-left: 83.333333%;\n}\n\n.vd-offset-11 {\n  margin-left: 91.666667%;\n}\n\n/* Responsive Offsets - sm */\n@media (min-width: 576px) {\n  .vd-offset-sm-0 {\n    margin-left: 0;\n  }\n\n  .vd-offset-sm-1 {\n    margin-left: 8.333333%;\n  }\n\n  .vd-offset-sm-2 {\n    margin-left: 16.666667%;\n  }\n\n  .vd-offset-sm-3 {\n    margin-left: 25%;\n  }\n\n  .vd-offset-sm-4 {\n    margin-left: 33.333333%;\n  }\n\n  .vd-offset-sm-5 {\n    margin-left: 41.666667%;\n  }\n\n  .vd-offset-sm-6 {\n    margin-left: 50%;\n  }\n\n  .vd-offset-sm-7 {\n    margin-left: 58.333333%;\n  }\n\n  .vd-offset-sm-8 {\n    margin-left: 66.666667%;\n  }\n\n  .vd-offset-sm-9 {\n    margin-left: 75%;\n  }\n\n  .vd-offset-sm-10 {\n    margin-left: 83.333333%;\n  }\n\n  .vd-offset-sm-11 {\n    margin-left: 91.666667%;\n  }\n}\n\n/* Responsive Offsets - md */\n@media (min-width: 768px) {\n  .vd-offset-md-0 {\n    margin-left: 0;\n  }\n\n  .vd-offset-md-1 {\n    margin-left: 8.333333%;\n  }\n\n  .vd-offset-md-2 {\n    margin-left: 16.666667%;\n  }\n\n  .vd-offset-md-3 {\n    margin-left: 25%;\n  }\n\n  .vd-offset-md-4 {\n    margin-left: 33.333333%;\n  }\n\n  .vd-offset-md-5 {\n    margin-left: 41.666667%;\n  }\n\n  .vd-offset-md-6 {\n    margin-left: 50%;\n  }\n\n  .vd-offset-md-7 {\n    margin-left: 58.333333%;\n  }\n\n  .vd-offset-md-8 {\n    margin-left: 66.666667%;\n  }\n\n  .vd-offset-md-9 {\n    margin-left: 75%;\n  }\n\n  .vd-offset-md-10 {\n    margin-left: 83.333333%;\n  }\n\n  .vd-offset-md-11 {\n    margin-left: 91.666667%;\n  }\n}\n\n/* Responsive Offsets - lg */\n@media (min-width: 992px) {\n  .vd-offset-lg-0 {\n    margin-left: 0;\n  }\n\n  .vd-offset-lg-1 {\n    margin-left: 8.333333%;\n  }\n\n  .vd-offset-lg-2 {\n    margin-left: 16.666667%;\n  }\n\n  .vd-offset-lg-3 {\n    margin-left: 25%;\n  }\n\n  .vd-offset-lg-4 {\n    margin-left: 33.333333%;\n  }\n\n  .vd-offset-lg-5 {\n    margin-left: 41.666667%;\n  }\n\n  .vd-offset-lg-6 {\n    margin-left: 50%;\n  }\n\n  .vd-offset-lg-7 {\n    margin-left: 58.333333%;\n  }\n\n  .vd-offset-lg-8 {\n    margin-left: 66.666667%;\n  }\n\n  .vd-offset-lg-9 {\n    margin-left: 75%;\n  }\n\n  .vd-offset-lg-10 {\n    margin-left: 83.333333%;\n  }\n\n  .vd-offset-lg-11 {\n    margin-left: 91.666667%;\n  }\n}\n\n/* Responsive Offsets - xl */\n@media (min-width: 1200px) {\n  .vd-offset-xl-0 {\n    margin-left: 0;\n  }\n\n  .vd-offset-xl-1 {\n    margin-left: 8.333333%;\n  }\n\n  .vd-offset-xl-2 {\n    margin-left: 16.666667%;\n  }\n\n  .vd-offset-xl-3 {\n    margin-left: 25%;\n  }\n\n  .vd-offset-xl-4 {\n    margin-left: 33.333333%;\n  }\n\n  .vd-offset-xl-5 {\n    margin-left: 41.666667%;\n  }\n\n  .vd-offset-xl-6 {\n    margin-left: 50%;\n  }\n\n  .vd-offset-xl-7 {\n    margin-left: 58.333333%;\n  }\n\n  .vd-offset-xl-8 {\n    margin-left: 66.666667%;\n  }\n\n  .vd-offset-xl-9 {\n    margin-left: 75%;\n  }\n\n  .vd-offset-xl-10 {\n    margin-left: 83.333333%;\n  }\n\n  .vd-offset-xl-11 {\n    margin-left: 91.666667%;\n  }\n}\n\n/* Responsive Offsets - 2xl */\n@media (min-width: 1400px) {\n  .vd-offset-2xl-0 {\n    margin-left: 0;\n  }\n\n  .vd-offset-2xl-1 {\n    margin-left: 8.333333%;\n  }\n\n  .vd-offset-2xl-2 {\n    margin-left: 16.666667%;\n  }\n\n  .vd-offset-2xl-3 {\n    margin-left: 25%;\n  }\n\n  .vd-offset-2xl-4 {\n    margin-left: 33.333333%;\n  }\n\n  .vd-offset-2xl-5 {\n    margin-left: 41.666667%;\n  }\n\n  .vd-offset-2xl-6 {\n    margin-left: 50%;\n  }\n\n  .vd-offset-2xl-7 {\n    margin-left: 58.333333%;\n  }\n\n  .vd-offset-2xl-8 {\n    margin-left: 66.666667%;\n  }\n\n  .vd-offset-2xl-9 {\n    margin-left: 75%;\n  }\n\n  .vd-offset-2xl-10 {\n    margin-left: 83.333333%;\n  }\n\n  .vd-offset-2xl-11 {\n    margin-left: 91.666667%;\n  }\n}\n\n/* ===================================================\n * Order Utilities\n * Control visual order of flex/grid items\n * =================================================== */\n\n.vd-order-first {\n  order: -1;\n}\n\n.vd-order-last {\n  order: 13;\n}\n\n.vd-order-0 {\n  order: 0;\n}\n\n.vd-order-1 {\n  order: 1;\n}\n\n.vd-order-2 {\n  order: 2;\n}\n\n.vd-order-3 {\n  order: 3;\n}\n\n.vd-order-4 {\n  order: 4;\n}\n\n.vd-order-5 {\n  order: 5;\n}\n\n.vd-order-6 {\n  order: 6;\n}\n\n.vd-order-7 {\n  order: 7;\n}\n\n.vd-order-8 {\n  order: 8;\n}\n\n.vd-order-9 {\n  order: 9;\n}\n\n.vd-order-10 {\n  order: 10;\n}\n\n.vd-order-11 {\n  order: 11;\n}\n\n.vd-order-12 {\n  order: 12;\n}\n\n/* Responsive Order - sm */\n@media (min-width: 576px) {\n  .vd-order-sm-first {\n    order: -1;\n  }\n\n  .vd-order-sm-last {\n    order: 13;\n  }\n\n  .vd-order-sm-0 {\n    order: 0;\n  }\n\n  .vd-order-sm-1 {\n    order: 1;\n  }\n\n  .vd-order-sm-2 {\n    order: 2;\n  }\n\n  .vd-order-sm-3 {\n    order: 3;\n  }\n\n  .vd-order-sm-4 {\n    order: 4;\n  }\n\n  .vd-order-sm-5 {\n    order: 5;\n  }\n\n  .vd-order-sm-6 {\n    order: 6;\n  }\n\n  .vd-order-sm-7 {\n    order: 7;\n  }\n\n  .vd-order-sm-8 {\n    order: 8;\n  }\n\n  .vd-order-sm-9 {\n    order: 9;\n  }\n\n  .vd-order-sm-10 {\n    order: 10;\n  }\n\n  .vd-order-sm-11 {\n    order: 11;\n  }\n\n  .vd-order-sm-12 {\n    order: 12;\n  }\n}\n\n/* Responsive Order - md */\n@media (min-width: 768px) {\n  .vd-order-md-first {\n    order: -1;\n  }\n\n  .vd-order-md-last {\n    order: 13;\n  }\n\n  .vd-order-md-0 {\n    order: 0;\n  }\n\n  .vd-order-md-1 {\n    order: 1;\n  }\n\n  .vd-order-md-2 {\n    order: 2;\n  }\n\n  .vd-order-md-3 {\n    order: 3;\n  }\n\n  .vd-order-md-4 {\n    order: 4;\n  }\n\n  .vd-order-md-5 {\n    order: 5;\n  }\n\n  .vd-order-md-6 {\n    order: 6;\n  }\n\n  .vd-order-md-7 {\n    order: 7;\n  }\n\n  .vd-order-md-8 {\n    order: 8;\n  }\n\n  .vd-order-md-9 {\n    order: 9;\n  }\n\n  .vd-order-md-10 {\n    order: 10;\n  }\n\n  .vd-order-md-11 {\n    order: 11;\n  }\n\n  .vd-order-md-12 {\n    order: 12;\n  }\n}\n\n/* Responsive Order - lg */\n@media (min-width: 992px) {\n  .vd-order-lg-first {\n    order: -1;\n  }\n\n  .vd-order-lg-last {\n    order: 13;\n  }\n\n  .vd-order-lg-0 {\n    order: 0;\n  }\n\n  .vd-order-lg-1 {\n    order: 1;\n  }\n\n  .vd-order-lg-2 {\n    order: 2;\n  }\n\n  .vd-order-lg-3 {\n    order: 3;\n  }\n\n  .vd-order-lg-4 {\n    order: 4;\n  }\n\n  .vd-order-lg-5 {\n    order: 5;\n  }\n\n  .vd-order-lg-6 {\n    order: 6;\n  }\n\n  .vd-order-lg-7 {\n    order: 7;\n  }\n\n  .vd-order-lg-8 {\n    order: 8;\n  }\n\n  .vd-order-lg-9 {\n    order: 9;\n  }\n\n  .vd-order-lg-10 {\n    order: 10;\n  }\n\n  .vd-order-lg-11 {\n    order: 11;\n  }\n\n  .vd-order-lg-12 {\n    order: 12;\n  }\n}\n\n/* Responsive Order - xl */\n@media (min-width: 1200px) {\n  .vd-order-xl-first {\n    order: -1;\n  }\n\n  .vd-order-xl-last {\n    order: 13;\n  }\n\n  .vd-order-xl-0 {\n    order: 0;\n  }\n\n  .vd-order-xl-1 {\n    order: 1;\n  }\n\n  .vd-order-xl-2 {\n    order: 2;\n  }\n\n  .vd-order-xl-3 {\n    order: 3;\n  }\n\n  .vd-order-xl-4 {\n    order: 4;\n  }\n\n  .vd-order-xl-5 {\n    order: 5;\n  }\n\n  .vd-order-xl-6 {\n    order: 6;\n  }\n\n  .vd-order-xl-7 {\n    order: 7;\n  }\n\n  .vd-order-xl-8 {\n    order: 8;\n  }\n\n  .vd-order-xl-9 {\n    order: 9;\n  }\n\n  .vd-order-xl-10 {\n    order: 10;\n  }\n\n  .vd-order-xl-11 {\n    order: 11;\n  }\n\n  .vd-order-xl-12 {\n    order: 12;\n  }\n}\n\n/* Responsive Order - 2xl */\n@media (min-width: 1400px) {\n  .vd-order-2xl-first {\n    order: -1;\n  }\n\n  .vd-order-2xl-last {\n    order: 13;\n  }\n\n  .vd-order-2xl-0 {\n    order: 0;\n  }\n\n  .vd-order-2xl-1 {\n    order: 1;\n  }\n\n  .vd-order-2xl-2 {\n    order: 2;\n  }\n\n  .vd-order-2xl-3 {\n    order: 3;\n  }\n\n  .vd-order-2xl-4 {\n    order: 4;\n  }\n\n  .vd-order-2xl-5 {\n    order: 5;\n  }\n\n  .vd-order-2xl-6 {\n    order: 6;\n  }\n\n  .vd-order-2xl-7 {\n    order: 7;\n  }\n\n  .vd-order-2xl-8 {\n    order: 8;\n  }\n\n  .vd-order-2xl-9 {\n    order: 9;\n  }\n\n  .vd-order-2xl-10 {\n    order: 10;\n  }\n\n  .vd-order-2xl-11 {\n    order: 11;\n  }\n\n  .vd-order-2xl-12 {\n    order: 12;\n  }\n}\n\n/* ===================================================\n * Golden Ratio Grid Layouts\n * Two-column split: 38.2% / 61.8% (minor / major)\n * Fibonacci column ratios: 2:3:5, 3:5:8, 5:8\n * =================================================== */\n\n/* Fibonacci-number container widths */\n.vd-container-fib-610 {\n  max-width: 610px;\n  margin-left: auto;\n  margin-right: auto;\n  padding-left: var(--vd-container-padding);\n  padding-right: var(--vd-container-padding);\n}\n\n.vd-container-fib-987 {\n  max-width: 987px;\n  margin-left: auto;\n  margin-right: auto;\n  padding-left: var(--vd-container-padding);\n  padding-right: var(--vd-container-padding);\n}\n\n.vd-container-fib-1597 {\n  max-width: 1597px;\n  margin-left: auto;\n  margin-right: auto;\n  padding-left: var(--vd-container-padding);\n  padding-right: var(--vd-container-padding);\n}\n\n/* ===================================================\n * Responsive Containers\n * Fluid below their breakpoint, fixed max-width above\n * =================================================== */\n\n.vd-container-sm,\n.vd-container-md,\n.vd-container-lg,\n.vd-container-xl,\n.vd-container-2xl {\n  width: 100%;\n  margin-left: auto;\n  margin-right: auto;\n  padding-left: var(--vd-container-padding);\n  padding-right: var(--vd-container-padding);\n}\n\n@media (min-width: 576px) {\n  .vd-container-sm {\n    max-width: var(--vd-container-sm);\n  }\n}\n\n@media (min-width: 768px) {\n  .vd-container-sm {\n    max-width: var(--vd-container-md);\n  }\n\n  .vd-container-md {\n    max-width: var(--vd-container-md);\n  }\n}\n\n@media (min-width: 992px) {\n  .vd-container-sm {\n    max-width: var(--vd-container-lg);\n  }\n\n  .vd-container-md {\n    max-width: var(--vd-container-lg);\n  }\n\n  .vd-container-lg {\n    max-width: var(--vd-container-lg);\n  }\n}\n\n@media (min-width: 1200px) {\n  .vd-container-sm {\n    max-width: var(--vd-container-xl);\n  }\n\n  .vd-container-md {\n    max-width: var(--vd-container-xl);\n  }\n\n  .vd-container-lg {\n    max-width: var(--vd-container-xl);\n  }\n\n  .vd-container-xl {\n    max-width: var(--vd-container-xl);\n  }\n}\n\n@media (min-width: 1400px) {\n  .vd-container-sm {\n    max-width: var(--vd-container-2xl);\n  }\n\n  .vd-container-md {\n    max-width: var(--vd-container-2xl);\n  }\n\n  .vd-container-lg {\n    max-width: var(--vd-container-2xl);\n  }\n\n  .vd-container-xl {\n    max-width: var(--vd-container-2xl);\n  }\n\n  .vd-container-2xl {\n    max-width: var(--vd-container-2xl);\n  }\n}\n\n/* Golden Ratio Two-Column (flexbox) */\n.vd-row-golden {\n  display: flex;\n  flex-wrap: wrap;\n  margin-left: calc(var(--vd-grid-gutter) * -0.5);\n  margin-right: calc(var(--vd-grid-gutter) * -0.5);\n}\n\n.vd-row-golden>.vd-col-golden-minor {\n  flex: 0 0 auto;\n  width: 38.196601%;\n  padding-left: calc(var(--vd-grid-gutter) * 0.5);\n  padding-right: calc(var(--vd-grid-gutter) * 0.5);\n}\n\n.vd-row-golden>.vd-col-golden-major {\n  flex: 0 0 auto;\n  width: 61.803399%;\n  padding-left: calc(var(--vd-grid-gutter) * 0.5);\n  padding-right: calc(var(--vd-grid-gutter) * 0.5);\n}\n\n/* Fibonacci Two-Column: 5:8 proportions */\n.vd-row-fib-2 {\n  display: flex;\n  flex-wrap: wrap;\n  margin-left: calc(var(--vd-grid-gutter) * -0.5);\n  margin-right: calc(var(--vd-grid-gutter) * -0.5);\n}\n\n.vd-row-fib-2>.vd-col-fib-5 {\n  flex: 0 0 auto;\n  width: 38.461538%;\n  /* 5/13 */\n  padding-left: calc(var(--vd-grid-gutter) * 0.5);\n  padding-right: calc(var(--vd-grid-gutter) * 0.5);\n}\n\n.vd-row-fib-2>.vd-col-fib-8 {\n  flex: 0 0 auto;\n  width: 61.538462%;\n  /* 8/13 */\n  padding-left: calc(var(--vd-grid-gutter) * 0.5);\n  padding-right: calc(var(--vd-grid-gutter) * 0.5);\n}\n\n/* Fibonacci Three-Column: 2:3:5 proportions */\n.vd-row-fib-3 {\n  display: flex;\n  flex-wrap: wrap;\n  margin-left: calc(var(--vd-grid-gutter) * -0.5);\n  margin-right: calc(var(--vd-grid-gutter) * -0.5);\n}\n\n.vd-row-fib-3>.vd-col-fib-2 {\n  flex: 0 0 auto;\n  width: 20%;\n  /* 2/10 */\n  padding-left: calc(var(--vd-grid-gutter) * 0.5);\n  padding-right: calc(var(--vd-grid-gutter) * 0.5);\n}\n\n.vd-row-fib-3>.vd-col-fib-3 {\n  flex: 0 0 auto;\n  width: 30%;\n  /* 3/10 */\n  padding-left: calc(var(--vd-grid-gutter) * 0.5);\n  padding-right: calc(var(--vd-grid-gutter) * 0.5);\n}\n\n.vd-row-fib-3>.vd-col-fib-5 {\n  flex: 0 0 auto;\n  width: 50%;\n  /* 5/10 */\n  padding-left: calc(var(--vd-grid-gutter) * 0.5);\n  padding-right: calc(var(--vd-grid-gutter) * 0.5);\n}\n\n/* CSS Grid Golden Ratio layouts */\n.vd-grid-golden,\n.grid-golden {\n  display: grid;\n  grid-template-columns: 1fr 1.618fr;\n  gap: var(--vd-grid-gutter);\n}\n\n.vd-grid-golden-reverse,\n.grid-golden-reverse {\n  display: grid;\n  grid-template-columns: 1.618fr 1fr;\n  gap: var(--vd-grid-gutter);\n}\n\n.vd-grid-fib-3,\n.grid-fib-3 {\n  display: grid;\n  grid-template-columns: 2fr 3fr 5fr;\n  gap: var(--vd-grid-gutter);\n}\n\n/* Fibonacci Four-Column: 1:2:3:5 proportions */\n.vd-row-fib-4 {\n  display: flex;\n  flex-wrap: wrap;\n  margin-left: calc(var(--vd-grid-gutter) * -0.5);\n  margin-right: calc(var(--vd-grid-gutter) * -0.5);\n}\n\n.vd-row-fib-4>.vd-col-fib-1 {\n  flex: 0 0 auto;\n  width: 9.090909%;\n  /* 1/11 */\n  padding-left: calc(var(--vd-grid-gutter) * 0.5);\n  padding-right: calc(var(--vd-grid-gutter) * 0.5);\n}\n\n.vd-row-fib-4>.vd-col-fib-2 {\n  flex: 0 0 auto;\n  width: 18.181818%;\n  /* 2/11 */\n  padding-left: calc(var(--vd-grid-gutter) * 0.5);\n  padding-right: calc(var(--vd-grid-gutter) * 0.5);\n}\n\n.vd-row-fib-4>.vd-col-fib-3 {\n  flex: 0 0 auto;\n  width: 27.272727%;\n  /* 3/11 */\n  padding-left: calc(var(--vd-grid-gutter) * 0.5);\n  padding-right: calc(var(--vd-grid-gutter) * 0.5);\n}\n\n.vd-row-fib-4>.vd-col-fib-5 {\n  flex: 0 0 auto;\n  width: 45.454545%;\n  /* 5/11 */\n  padding-left: calc(var(--vd-grid-gutter) * 0.5);\n  padding-right: calc(var(--vd-grid-gutter) * 0.5);\n}\n\n/* Fibonacci Three-Column: 3:5:8 proportions */\n.vd-row-fib-3-alt {\n  display: flex;\n  flex-wrap: wrap;\n  margin-left: calc(var(--vd-grid-gutter) * -0.5);\n  margin-right: calc(var(--vd-grid-gutter) * -0.5);\n}\n\n.vd-row-fib-3-alt>.vd-col-fib-3 {\n  flex: 0 0 auto;\n  width: 18.75%;\n  /* 3/16 */\n  padding-left: calc(var(--vd-grid-gutter) * 0.5);\n  padding-right: calc(var(--vd-grid-gutter) * 0.5);\n}\n\n.vd-row-fib-3-alt>.vd-col-fib-5 {\n  flex: 0 0 auto;\n  width: 31.25%;\n  /* 5/16 */\n  padding-left: calc(var(--vd-grid-gutter) * 0.5);\n  padding-right: calc(var(--vd-grid-gutter) * 0.5);\n}\n\n.vd-row-fib-3-alt>.vd-col-fib-8 {\n  flex: 0 0 auto;\n  width: 50%;\n  /* 8/16 */\n  padding-left: calc(var(--vd-grid-gutter) * 0.5);\n  padding-right: calc(var(--vd-grid-gutter) * 0.5);\n}\n\n/* CSS Grid Fibonacci variants */\n.vd-grid-fib-4,\n.grid-fib-4 {\n  display: grid;\n  grid-template-columns: 1fr 2fr 3fr 5fr;\n  gap: var(--vd-grid-gutter);\n}\n\n.vd-grid-fib-3-alt,\n.grid-fib-3-alt {\n  display: grid;\n  grid-template-columns: 3fr 5fr 8fr;\n  gap: var(--vd-grid-gutter);\n}\n\n/* ===================================================\n * Fibonacci Gap Utilities\n * Gap classes using Fibonacci sequence values\n * =================================================== */\n\n.vd-gap-fib-2 {\n  gap: var(--vd-gap-fib-2);\n}\n\n.vd-gap-fib-3 {\n  gap: var(--vd-gap-fib-3);\n}\n\n.vd-gap-fib-5 {\n  gap: var(--vd-gap-fib-5);\n}\n\n.vd-gap-fib-8 {\n  gap: var(--vd-gap-fib-8);\n}\n\n.vd-gap-fib-13 {\n  gap: var(--vd-gap-fib-13);\n}\n\n.vd-gap-fib-21 {\n  gap: var(--vd-gap-fib-21);\n}\n\n.vd-row-gap-fib-2 {\n  row-gap: var(--vd-gap-fib-2);\n}\n\n.vd-row-gap-fib-3 {\n  row-gap: var(--vd-gap-fib-3);\n}\n\n.vd-row-gap-fib-5 {\n  row-gap: var(--vd-gap-fib-5);\n}\n\n.vd-row-gap-fib-8 {\n  row-gap: var(--vd-gap-fib-8);\n}\n\n.vd-row-gap-fib-13 {\n  row-gap: var(--vd-gap-fib-13);\n}\n\n.vd-row-gap-fib-21 {\n  row-gap: var(--vd-gap-fib-21);\n}\n\n.vd-col-gap-fib-2 {\n  column-gap: var(--vd-gap-fib-2);\n}\n\n.vd-col-gap-fib-3 {\n  column-gap: var(--vd-gap-fib-3);\n}\n\n.vd-col-gap-fib-5 {\n  column-gap: var(--vd-gap-fib-5);\n}\n\n.vd-col-gap-fib-8 {\n  column-gap: var(--vd-gap-fib-8);\n}\n\n.vd-col-gap-fib-13 {\n  column-gap: var(--vd-gap-fib-13);\n}\n\n.vd-col-gap-fib-21 {\n  column-gap: var(--vd-gap-fib-21);\n}\n\n/* ===================================================\n * Grid Mode Toggle Classes\n * Switch between standard 12-column and Fibonacci modes\n * =================================================== */\n\n/* Standard grid mode (default behavior) */\n.vd-grid-standard>.vd-row,\n.grid-standard>.vd-row {\n  display: flex;\n  flex-wrap: wrap;\n}\n\n/* Fibonacci grid mode - converts rows to CSS Grid with Fibonacci proportions */\n.vd-grid-fibonacci>.vd-row,\n.grid-fibonacci>.vd-row {\n  display: grid;\n  gap: var(--vd-grid-gutter);\n  margin-left: 0;\n  margin-right: 0;\n}\n\n.vd-grid-fibonacci>.vd-row>[class*=\"col-\"],\n.grid-fibonacci>.vd-row>[class*=\"col-\"] {\n  width: auto;\n  padding-left: 0;\n  padding-right: 0;\n  flex: none;\n}\n\n/* Two-child fibonacci rows use golden ratio */\n.vd-grid-fibonacci>.vd-row:has(> [class*=\"col-\"]:nth-child(2):last-child),\n.grid-fibonacci>.vd-row:has(> [class*=\"col-\"]:nth-child(2):last-child) {\n  grid-template-columns: 1fr 1.618fr;\n}\n\n/* Three-child fibonacci rows use 2:3:5 */\n.vd-grid-fibonacci>.vd-row:has(> [class*=\"col-\"]:nth-child(3):last-child),\n.grid-fibonacci>.vd-row:has(> [class*=\"col-\"]:nth-child(3):last-child) {\n  grid-template-columns: 2fr 3fr 5fr;\n}\n\n/* Four-child fibonacci rows use 1:2:3:5 */\n.vd-grid-fibonacci>.vd-row:has(> [class*=\"col-\"]:nth-child(4):last-child),\n.grid-fibonacci>.vd-row:has(> [class*=\"col-\"]:nth-child(4):last-child) {\n  grid-template-columns: 1fr 2fr 3fr 5fr;\n}\n\n/* Single-child rows stay full width */\n.vd-grid-fibonacci>.vd-row:has(> [class*=\"col-\"]:only-child),\n.grid-fibonacci>.vd-row:has(> [class*=\"col-\"]:only-child) {\n  grid-template-columns: 1fr;\n}\n\n/* Five+ children use equal columns */\n.vd-grid-fibonacci>.vd-row:has(> [class*=\"col-\"]:nth-child(5)),\n.grid-fibonacci>.vd-row:has(> [class*=\"col-\"]:nth-child(5)) {\n  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));\n}\n\n/* Responsive: stack golden/fibonacci grids on mobile */\n@media (max-width: 767.98px) {\n\n  .vd-row-golden>.vd-col-golden-minor,\n  .vd-row-golden>.vd-col-golden-major,\n  .vd-row-fib-2>.vd-col-fib-5,\n  .vd-row-fib-2>.vd-col-fib-8,\n  .vd-row-fib-3>.vd-col-fib-2,\n  .vd-row-fib-3>.vd-col-fib-3,\n  .vd-row-fib-3>.vd-col-fib-5,\n  .vd-row-fib-4>.vd-col-fib-1,\n  .vd-row-fib-4>.vd-col-fib-2,\n  .vd-row-fib-4>.vd-col-fib-3,\n  .vd-row-fib-4>.vd-col-fib-5,\n  .vd-row-fib-3-alt>.vd-col-fib-3,\n  .vd-row-fib-3-alt>.vd-col-fib-5,\n  .vd-row-fib-3-alt>.vd-col-fib-8 {\n    width: 100%;\n  }\n\n  .vd-grid-golden,\n  .vd-grid-golden-reverse,\n  .vd-grid-fib-3,\n  .vd-grid-fib-4,\n  .vd-grid-fib-3-alt,\n  .grid-golden,\n  .grid-golden-reverse,\n  .grid-fib-3,\n  .grid-fib-4,\n  .grid-fib-3-alt {\n    grid-template-columns: 1fr;\n  }\n\n  .vd-grid-fibonacci>.vd-row,\n  .grid-fibonacci>.vd-row {\n    grid-template-columns: 1fr;\n  }\n}\n\n\n/* Layer 1.5: Layout primitives (Box, Stack, Inline, Center).\n   Imported BEFORE helpers so the spacing/gap/padding/radius utilities that follow\n   override a primitive default on equal specificity (utilities stay the escape\n   hatch). Primitive token references resolve order-independently from :root. */\n/**\n * Vanduo Framework - Layout Primitives\n *\n * Unstyled, single-responsibility layout containers that consume design tokens.\n * They express a layout INTENT (vertical rhythm, wrapping row, centered column)\n * rather than a single property — the composition layer between utilities and\n * components:  tokens -> (utilities | primitives) -> components.\n *\n * Override semantics: this file is imported BEFORE core/helpers.css and the\n * utilities layer, so a spacing/gap/padding/radius utility on the same element\n * (e.g. .vd-gap-5) always wins over a primitive's default on equal specificity.\n * Each primitive sets a vd-prefixed internal custom property defaulted from a\n * token; data-* attributes remap that property.\n *\n *   .vd-box      data-pad data-bg data-round data-border\n *   .vd-stack    data-gap data-align\n *   .vd-inline   data-gap data-align data-justify data-wrap\n *   .vd-center   data-axis data-max\n *   .vd-frame    data-ratio\n *   .vd-cover    data-min data-gap\n *   .vd-switcher data-threshold data-gap\n *\n * @since 1.5.0\n * @license MIT\n */\n\n/* ═══════════════════════════════════════════════════════════════════════════\n * BOX — a single padded / optionally skinned surface\n * ═══════════════════════════════════════════════════════════════════════════ */\n\n.vd-box {\n  --vd-box-pad: 0;\n  --vd-box-radius: 0;\n\n  display: block;\n  padding: var(--vd-box-pad);\n  border-radius: var(--vd-box-radius);\n}\n\n.vd-box[data-pad=\"0\"] { --vd-box-pad: 0; }\n.vd-box[data-pad=\"fib-1\"] { --vd-box-pad: var(--vd-space-fib-1); }\n.vd-box[data-pad=\"fib-2\"] { --vd-box-pad: var(--vd-space-fib-2); }\n.vd-box[data-pad=\"fib-3\"] { --vd-box-pad: var(--vd-space-fib-3); }\n.vd-box[data-pad=\"fib-5\"] { --vd-box-pad: var(--vd-space-fib-5); }\n.vd-box[data-pad=\"fib-8\"] { --vd-box-pad: var(--vd-space-fib-8); }\n.vd-box[data-pad=\"fib-13\"] { --vd-box-pad: var(--vd-space-fib-13); }\n.vd-box[data-pad=\"fib-21\"] { --vd-box-pad: var(--vd-space-fib-21); }\n.vd-box[data-pad=\"fib-34\"] { --vd-box-pad: var(--vd-space-fib-34); }\n.vd-box[data-pad=\"fib-55\"] { --vd-box-pad: var(--vd-space-fib-55); }\n\n/* Background — canonical semantic surfaces */\n.vd-box[data-bg=\"primary\"] { background-color: var(--vd-bg-primary); }\n.vd-box[data-bg=\"secondary\"] { background-color: var(--vd-bg-secondary); }\n.vd-box[data-bg=\"tertiary\"] { background-color: var(--vd-bg-tertiary); }\n.vd-box[data-bg=\"dark\"] { background-color: var(--vd-bg-dark); }\n.vd-box[data-bg=\"darker\"] { background-color: var(--vd-bg-darker); }\n\n/* Radius — mirrors the .vd-rounded-* scale (uses data-round, NOT data-radius,\n   which is the global theme-customizer radius hook). */\n.vd-box[data-round=\"none\"] { --vd-box-radius: 0; }\n.vd-box[data-round=\"sm\"] { --vd-box-radius: var(--vd-radius-fib-2); }\n.vd-box[data-round=\"md\"] { --vd-box-radius: var(--vd-radius-fib-5); }\n.vd-box[data-round=\"lg\"] { --vd-box-radius: var(--vd-radius-fib-8); }\n.vd-box[data-round=\"xl\"] { --vd-box-radius: var(--vd-radius-fib-13); }\n.vd-box[data-round=\"2xl\"] { --vd-box-radius: var(--vd-radius-fib-21); }\n.vd-box[data-round=\"full\"] { --vd-box-radius: 9999px; }\n\n.vd-box[data-border] { border: 1px solid var(--vd-border-color); }\n\n/* ═══════════════════════════════════════════════════════════════════════════\n * STACK — vertical rhythm (flex column with token-driven gap)\n * ═══════════════════════════════════════════════════════════════════════════ */\n\n.vd-stack {\n  --vd-stack-gap: 0;\n\n  display: flex;\n  flex-direction: column;\n  gap: var(--vd-stack-gap);\n}\n\n.vd-stack[data-gap=\"0\"] { --vd-stack-gap: 0; }\n.vd-stack[data-gap=\"fib-1\"] { --vd-stack-gap: var(--vd-space-fib-1); }\n.vd-stack[data-gap=\"fib-2\"] { --vd-stack-gap: var(--vd-space-fib-2); }\n.vd-stack[data-gap=\"fib-3\"] { --vd-stack-gap: var(--vd-space-fib-3); }\n.vd-stack[data-gap=\"fib-5\"] { --vd-stack-gap: var(--vd-space-fib-5); }\n.vd-stack[data-gap=\"fib-8\"] { --vd-stack-gap: var(--vd-space-fib-8); }\n.vd-stack[data-gap=\"fib-13\"] { --vd-stack-gap: var(--vd-space-fib-13); }\n.vd-stack[data-gap=\"fib-21\"] { --vd-stack-gap: var(--vd-space-fib-21); }\n.vd-stack[data-gap=\"fib-34\"] { --vd-stack-gap: var(--vd-space-fib-34); }\n.vd-stack[data-gap=\"fib-55\"] { --vd-stack-gap: var(--vd-space-fib-55); }\n\n.vd-stack[data-align=\"start\"] { align-items: flex-start; }\n.vd-stack[data-align=\"center\"] { align-items: center; }\n.vd-stack[data-align=\"end\"] { align-items: flex-end; }\n.vd-stack[data-align=\"stretch\"] { align-items: stretch; }\n\n/* ═══════════════════════════════════════════════════════════════════════════\n * INLINE — horizontal cluster (wrapping flex row with token-driven gap)\n * ═══════════════════════════════════════════════════════════════════════════ */\n\n.vd-inline {\n  --vd-inline-gap: 0;\n\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--vd-inline-gap);\n}\n\n.vd-inline[data-gap=\"0\"] { --vd-inline-gap: 0; }\n.vd-inline[data-gap=\"fib-1\"] { --vd-inline-gap: var(--vd-space-fib-1); }\n.vd-inline[data-gap=\"fib-2\"] { --vd-inline-gap: var(--vd-space-fib-2); }\n.vd-inline[data-gap=\"fib-3\"] { --vd-inline-gap: var(--vd-space-fib-3); }\n.vd-inline[data-gap=\"fib-5\"] { --vd-inline-gap: var(--vd-space-fib-5); }\n.vd-inline[data-gap=\"fib-8\"] { --vd-inline-gap: var(--vd-space-fib-8); }\n.vd-inline[data-gap=\"fib-13\"] { --vd-inline-gap: var(--vd-space-fib-13); }\n.vd-inline[data-gap=\"fib-21\"] { --vd-inline-gap: var(--vd-space-fib-21); }\n.vd-inline[data-gap=\"fib-34\"] { --vd-inline-gap: var(--vd-space-fib-34); }\n.vd-inline[data-gap=\"fib-55\"] { --vd-inline-gap: var(--vd-space-fib-55); }\n\n.vd-inline[data-align=\"start\"] { align-items: flex-start; }\n.vd-inline[data-align=\"center\"] { align-items: center; }\n.vd-inline[data-align=\"end\"] { align-items: flex-end; }\n.vd-inline[data-align=\"baseline\"] { align-items: baseline; }\n.vd-inline[data-align=\"stretch\"] { align-items: stretch; }\n\n.vd-inline[data-justify=\"start\"] { justify-content: flex-start; }\n.vd-inline[data-justify=\"center\"] { justify-content: center; }\n.vd-inline[data-justify=\"end\"] { justify-content: flex-end; }\n.vd-inline[data-justify=\"between\"] { justify-content: space-between; }\n.vd-inline[data-justify=\"around\"] { justify-content: space-around; }\n.vd-inline[data-justify=\"evenly\"] { justify-content: space-evenly; }\n\n.vd-inline[data-wrap=\"nowrap\"] { flex-wrap: nowrap; }\n\n/* ═══════════════════════════════════════════════════════════════════════════\n * CENTER — center a column horizontally (data-max) and/or its content (data-axis)\n * ═══════════════════════════════════════════════════════════════════════════ */\n\n.vd-center {\n  --vd-center-max: none;\n\n  display: block;\n  max-width: var(--vd-center-max);\n  margin-inline: auto;\n}\n\n.vd-center[data-max=\"fib-377\"] { --vd-center-max: 377px; }\n.vd-center[data-max=\"fib-610\"] { --vd-center-max: 610px; }\n.vd-center[data-max=\"fib-987\"] { --vd-center-max: 987px; }\n\n.vd-center[data-axis=\"both\"] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.vd-center[data-axis=\"horizontal\"] {\n  display: flex;\n  justify-content: center;\n}\n\n.vd-center[data-axis=\"vertical\"] {\n  display: flex;\n  align-items: center;\n}\n\n/* ═══════════════════════════════════════════════════════════════════════════\n * FRAME — a fixed aspect-ratio box (golden by default); media children cover it\n * ═══════════════════════════════════════════════════════════════════════════ */\n\n.vd-frame {\n  --vd-frame-ratio: 1.618;\n\n  display: block;\n  overflow: hidden;\n  aspect-ratio: var(--vd-frame-ratio);\n}\n\n.vd-frame > img,\n.vd-frame > video,\n.vd-frame > canvas,\n.vd-frame > svg,\n.vd-frame > iframe {\n  display: block;\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n\n.vd-frame[data-ratio=\"golden\"] { --vd-frame-ratio: 1.618; }\n.vd-frame[data-ratio=\"golden-portrait\"] { --vd-frame-ratio: 0.618; }\n.vd-frame[data-ratio=\"square\"] { --vd-frame-ratio: 1; }\n.vd-frame[data-ratio=\"16-9\"] { --vd-frame-ratio: 1.7778; }\n.vd-frame[data-ratio=\"4-3\"] { --vd-frame-ratio: 1.3333; }\n.vd-frame[data-ratio=\"3-2\"] { --vd-frame-ratio: 1.5; }\n.vd-frame[data-ratio=\"21-9\"] { --vd-frame-ratio: 2.3333; }\n\n/* ═══════════════════════════════════════════════════════════════════════════\n * COVER — a min-height region that vertically centers its content\n * ═══════════════════════════════════════════════════════════════════════════ */\n\n.vd-cover {\n  --vd-cover-min: 100vh;\n  --vd-cover-gap: 0;\n\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  gap: var(--vd-cover-gap);\n  min-height: var(--vd-cover-min);\n}\n\n.vd-cover[data-min=\"screen\"] { --vd-cover-min: 100vh; }\n.vd-cover[data-min=\"half\"] { --vd-cover-min: 50vh; }\n.vd-cover[data-min=\"fib-610\"] { --vd-cover-min: 610px; }\n.vd-cover[data-min=\"fib-987\"] { --vd-cover-min: 987px; }\n\n.vd-cover[data-gap=\"fib-3\"] { --vd-cover-gap: var(--vd-space-fib-3); }\n.vd-cover[data-gap=\"fib-5\"] { --vd-cover-gap: var(--vd-space-fib-5); }\n.vd-cover[data-gap=\"fib-8\"] { --vd-cover-gap: var(--vd-space-fib-8); }\n.vd-cover[data-gap=\"fib-13\"] { --vd-cover-gap: var(--vd-space-fib-13); }\n.vd-cover[data-gap=\"fib-21\"] { --vd-cover-gap: var(--vd-space-fib-21); }\n.vd-cover[data-gap=\"fib-34\"] { --vd-cover-gap: var(--vd-space-fib-34); }\n\n/* ═══════════════════════════════════════════════════════════════════════════\n * SWITCHER — auto row→column at a container-width threshold (no media query).\n * When the container is wider than the threshold the children share a row;\n * narrower and they each take a full row. Thresholds are Fibonacci by design.\n * ═══════════════════════════════════════════════════════════════════════════ */\n\n.vd-switcher {\n  --vd-switcher-threshold: 610px;\n  --vd-switcher-gap: 0;\n\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--vd-switcher-gap);\n}\n\n.vd-switcher > * {\n  flex-grow: 1;\n  flex-basis: calc((var(--vd-switcher-threshold) - 100%) * 999);\n}\n\n.vd-switcher[data-threshold=\"fib-377\"] { --vd-switcher-threshold: 377px; }\n.vd-switcher[data-threshold=\"fib-610\"] { --vd-switcher-threshold: 610px; }\n.vd-switcher[data-threshold=\"fib-987\"] { --vd-switcher-threshold: 987px; }\n\n.vd-switcher[data-gap=\"fib-3\"] { --vd-switcher-gap: var(--vd-space-fib-3); }\n.vd-switcher[data-gap=\"fib-5\"] { --vd-switcher-gap: var(--vd-space-fib-5); }\n.vd-switcher[data-gap=\"fib-8\"] { --vd-switcher-gap: var(--vd-space-fib-8); }\n.vd-switcher[data-gap=\"fib-13\"] { --vd-switcher-gap: var(--vd-space-fib-13); }\n.vd-switcher[data-gap=\"fib-21\"] { --vd-switcher-gap: var(--vd-space-fib-21); }\n.vd-switcher[data-gap=\"fib-34\"] { --vd-switcher-gap: var(--vd-space-fib-34); }\n\n\n/**\n * Vanduo Framework - Helpers\n * Utility classes for spacing, display, positioning, and more\n *\n * Design System: Fibonacci / Golden Ratio (phi = 1.618)\n * Spacing values follow the Fibonacci sequence: 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144\n * Consecutive Fibonacci pairs yield ratios approaching phi (e.g. 21/13 = 1.615)\n */\n\n:root {\n  /* Golden Ratio Constants */\n  --vd-phi: 1.618;\n  --vd-phi-inverse: 0.618;\n  --vd-phi-percent-major: 61.8%;\n  --vd-phi-percent-minor: 38.2%;\n\n  /* Fibonacci Border Radius Scale */\n  --vd-radius-fib-2: 0.125rem;\n  /* 2px */\n  --vd-radius-fib-3: 0.1875rem;\n  /* 3px */\n  --vd-radius-fib-5: 0.3125rem;\n  /* 5px */\n  --vd-radius-fib-8: 0.5rem;\n  /* 8px */\n  --vd-radius-fib-13: 0.8125rem;\n  /* 13px */\n  --vd-radius-fib-21: 1.3125rem;\n  /* 21px */\n\n  /* Radius Scale Factor (for Theme Customizer) */\n  --vd-radius-scale: 1;\n\n  /* Fibonacci Spacing Scale */\n  --vd-spacing-0: 0;\n  --vd-spacing-1: 0.0625rem;\n  /* 1px  - fib(1) */\n  --vd-spacing-2: 0.125rem;\n  /* 2px  - fib(2) */\n  --vd-spacing-3: 0.1875rem;\n  /* 3px  - fib(3) */\n  --vd-spacing-4: 0.3125rem;\n  /* 5px  - fib(5) */\n  --vd-spacing-5: 0.5rem;\n  /* 8px  - fib(8) */\n  --vd-spacing-6: 0.8125rem;\n  /* 13px - fib(13) */\n  --vd-spacing-8: 1.3125rem;\n  /* 21px - fib(21) */\n  --vd-spacing-10: 2.125rem;\n  /* 34px - fib(34) */\n  --vd-spacing-12: 3.4375rem;\n  /* 55px - fib(55) */\n  --vd-spacing-16: 5.5625rem;\n  /* 89px - fib(89) */\n  --vd-spacing-20: 9rem;\n  /* 144px - fib(144) */\n  --vd-spacing-24: 9rem;\n  /* 144px - alias */\n}\n\n/* Margin Utilities */\n.vd-m-0 {\n  margin: var(--vd-spacing-0);\n}\n\n.vd-m-1 {\n  margin: var(--vd-spacing-1);\n}\n\n.vd-m-2 {\n  margin: var(--vd-spacing-2);\n}\n\n.vd-m-3 {\n  margin: var(--vd-spacing-3);\n}\n\n.vd-m-4 {\n  margin: var(--vd-spacing-4);\n}\n\n.vd-m-5 {\n  margin: var(--vd-spacing-5);\n}\n\n.vd-m-6 {\n  margin: var(--vd-spacing-6);\n}\n\n.vd-m-8 {\n  margin: var(--vd-spacing-8);\n}\n\n.vd-m-10 {\n  margin: var(--vd-spacing-10);\n}\n\n.vd-m-12 {\n  margin: var(--vd-spacing-12);\n}\n\n.vd-m-16 {\n  margin: var(--vd-spacing-16);\n}\n\n.vd-m-20 {\n  margin: var(--vd-spacing-20);\n}\n\n.vd-m-24 {\n  margin: var(--vd-spacing-24);\n}\n\n.vd-m-auto {\n  margin: auto;\n}\n\n/* Margin Top */\n.mt-0 {\n  margin-top: var(--vd-spacing-0);\n}\n\n.mt-1 {\n  margin-top: var(--vd-spacing-1);\n}\n\n.mt-2 {\n  margin-top: var(--vd-spacing-2);\n}\n\n.mt-3 {\n  margin-top: var(--vd-spacing-3);\n}\n\n.mt-4 {\n  margin-top: var(--vd-spacing-4);\n}\n\n.mt-5 {\n  margin-top: var(--vd-spacing-5);\n}\n\n.mt-6 {\n  margin-top: var(--vd-spacing-6);\n}\n\n.mt-8 {\n  margin-top: var(--vd-spacing-8);\n}\n\n.mt-10 {\n  margin-top: var(--vd-spacing-10);\n}\n\n.mt-12 {\n  margin-top: var(--vd-spacing-12);\n}\n\n.mt-16 {\n  margin-top: var(--vd-spacing-16);\n}\n\n.mt-20 {\n  margin-top: var(--vd-spacing-20);\n}\n\n.mt-24 {\n  margin-top: var(--vd-spacing-24);\n}\n\n.mt-auto {\n  margin-top: auto;\n}\n\n/* Margin Right */\n.mr-0 {\n  margin-right: var(--vd-spacing-0);\n}\n\n.mr-1 {\n  margin-right: var(--vd-spacing-1);\n}\n\n.mr-2 {\n  margin-right: var(--vd-spacing-2);\n}\n\n.mr-3 {\n  margin-right: var(--vd-spacing-3);\n}\n\n.mr-4 {\n  margin-right: var(--vd-spacing-4);\n}\n\n.mr-5 {\n  margin-right: var(--vd-spacing-5);\n}\n\n.mr-6 {\n  margin-right: var(--vd-spacing-6);\n}\n\n.mr-8 {\n  margin-right: var(--vd-spacing-8);\n}\n\n.mr-10 {\n  margin-right: var(--vd-spacing-10);\n}\n\n.mr-12 {\n  margin-right: var(--vd-spacing-12);\n}\n\n.mr-16 {\n  margin-right: var(--vd-spacing-16);\n}\n\n.mr-20 {\n  margin-right: var(--vd-spacing-20);\n}\n\n.mr-24 {\n  margin-right: var(--vd-spacing-24);\n}\n\n.mr-auto {\n  margin-right: auto;\n}\n\n/* Margin Bottom */\n.mb-0 {\n  margin-bottom: var(--vd-spacing-0);\n}\n\n.mb-1 {\n  margin-bottom: var(--vd-spacing-1);\n}\n\n.mb-2 {\n  margin-bottom: var(--vd-spacing-2);\n}\n\n.mb-3 {\n  margin-bottom: var(--vd-spacing-3);\n}\n\n.mb-4 {\n  margin-bottom: var(--vd-spacing-4);\n}\n\n.mb-5 {\n  margin-bottom: var(--vd-spacing-5);\n}\n\n.mb-6 {\n  margin-bottom: var(--vd-spacing-6);\n}\n\n.mb-8 {\n  margin-bottom: var(--vd-spacing-8);\n}\n\n.mb-10 {\n  margin-bottom: var(--vd-spacing-10);\n}\n\n.mb-12 {\n  margin-bottom: var(--vd-spacing-12);\n}\n\n.mb-16 {\n  margin-bottom: var(--vd-spacing-16);\n}\n\n.mb-20 {\n  margin-bottom: var(--vd-spacing-20);\n}\n\n.mb-24 {\n  margin-bottom: var(--vd-spacing-24);\n}\n\n.mb-auto {\n  margin-bottom: auto;\n}\n\n/* Margin Left */\n.ml-0 {\n  margin-left: var(--vd-spacing-0);\n}\n\n.ml-1 {\n  margin-left: var(--vd-spacing-1);\n}\n\n.ml-2 {\n  margin-left: var(--vd-spacing-2);\n}\n\n.ml-3 {\n  margin-left: var(--vd-spacing-3);\n}\n\n.ml-4 {\n  margin-left: var(--vd-spacing-4);\n}\n\n.ml-5 {\n  margin-left: var(--vd-spacing-5);\n}\n\n.ml-6 {\n  margin-left: var(--vd-spacing-6);\n}\n\n.ml-8 {\n  margin-left: var(--vd-spacing-8);\n}\n\n.ml-10 {\n  margin-left: var(--vd-spacing-10);\n}\n\n.ml-12 {\n  margin-left: var(--vd-spacing-12);\n}\n\n.ml-16 {\n  margin-left: var(--vd-spacing-16);\n}\n\n.ml-20 {\n  margin-left: var(--vd-spacing-20);\n}\n\n.ml-24 {\n  margin-left: var(--vd-spacing-24);\n}\n\n.ml-auto {\n  margin-left: auto;\n}\n\n/* Padding Utilities */\n.vd-p-0 {\n  padding: var(--vd-spacing-0);\n}\n\n.vd-p-1 {\n  padding: var(--vd-spacing-1);\n}\n\n.vd-p-2 {\n  padding: var(--vd-spacing-2);\n}\n\n.vd-p-3 {\n  padding: var(--vd-spacing-3);\n}\n\n.vd-p-4 {\n  padding: var(--vd-spacing-4);\n}\n\n.vd-p-5 {\n  padding: var(--vd-spacing-5);\n}\n\n.vd-p-6 {\n  padding: var(--vd-spacing-6);\n}\n\n.vd-p-8 {\n  padding: var(--vd-spacing-8);\n}\n\n.vd-p-10 {\n  padding: var(--vd-spacing-10);\n}\n\n.vd-p-12 {\n  padding: var(--vd-spacing-12);\n}\n\n.vd-p-16 {\n  padding: var(--vd-spacing-16);\n}\n\n.vd-p-20 {\n  padding: var(--vd-spacing-20);\n}\n\n.vd-p-24 {\n  padding: var(--vd-spacing-24);\n}\n\n/* Padding Top */\n.pt-0 {\n  padding-top: var(--vd-spacing-0);\n}\n\n.pt-1 {\n  padding-top: var(--vd-spacing-1);\n}\n\n.pt-2 {\n  padding-top: var(--vd-spacing-2);\n}\n\n.pt-3 {\n  padding-top: var(--vd-spacing-3);\n}\n\n.pt-4 {\n  padding-top: var(--vd-spacing-4);\n}\n\n.pt-5 {\n  padding-top: var(--vd-spacing-5);\n}\n\n.pt-6 {\n  padding-top: var(--vd-spacing-6);\n}\n\n.pt-8 {\n  padding-top: var(--vd-spacing-8);\n}\n\n.pt-10 {\n  padding-top: var(--vd-spacing-10);\n}\n\n.pt-12 {\n  padding-top: var(--vd-spacing-12);\n}\n\n.pt-16 {\n  padding-top: var(--vd-spacing-16);\n}\n\n.pt-20 {\n  padding-top: var(--vd-spacing-20);\n}\n\n.pt-24 {\n  padding-top: var(--vd-spacing-24);\n}\n\n/* Padding Right */\n.pr-0 {\n  padding-right: var(--vd-spacing-0);\n}\n\n.pr-1 {\n  padding-right: var(--vd-spacing-1);\n}\n\n.pr-2 {\n  padding-right: var(--vd-spacing-2);\n}\n\n.pr-3 {\n  padding-right: var(--vd-spacing-3);\n}\n\n.pr-4 {\n  padding-right: var(--vd-spacing-4);\n}\n\n.pr-5 {\n  padding-right: var(--vd-spacing-5);\n}\n\n.pr-6 {\n  padding-right: var(--vd-spacing-6);\n}\n\n.pr-8 {\n  padding-right: var(--vd-spacing-8);\n}\n\n.pr-10 {\n  padding-right: var(--vd-spacing-10);\n}\n\n.pr-12 {\n  padding-right: var(--vd-spacing-12);\n}\n\n.pr-16 {\n  padding-right: var(--vd-spacing-16);\n}\n\n.pr-20 {\n  padding-right: var(--vd-spacing-20);\n}\n\n.pr-24 {\n  padding-right: var(--vd-spacing-24);\n}\n\n/* Padding Bottom */\n.pb-0 {\n  padding-bottom: var(--vd-spacing-0);\n}\n\n.pb-1 {\n  padding-bottom: var(--vd-spacing-1);\n}\n\n.pb-2 {\n  padding-bottom: var(--vd-spacing-2);\n}\n\n.pb-3 {\n  padding-bottom: var(--vd-spacing-3);\n}\n\n.pb-4 {\n  padding-bottom: var(--vd-spacing-4);\n}\n\n.pb-5 {\n  padding-bottom: var(--vd-spacing-5);\n}\n\n.pb-6 {\n  padding-bottom: var(--vd-spacing-6);\n}\n\n.pb-8 {\n  padding-bottom: var(--vd-spacing-8);\n}\n\n.pb-10 {\n  padding-bottom: var(--vd-spacing-10);\n}\n\n.pb-12 {\n  padding-bottom: var(--vd-spacing-12);\n}\n\n.pb-16 {\n  padding-bottom: var(--vd-spacing-16);\n}\n\n.pb-20 {\n  padding-bottom: var(--vd-spacing-20);\n}\n\n.pb-24 {\n  padding-bottom: var(--vd-spacing-24);\n}\n\n/* Padding Left */\n.pl-0 {\n  padding-left: var(--vd-spacing-0);\n}\n\n.pl-1 {\n  padding-left: var(--vd-spacing-1);\n}\n\n.pl-2 {\n  padding-left: var(--vd-spacing-2);\n}\n\n.pl-3 {\n  padding-left: var(--vd-spacing-3);\n}\n\n.pl-4 {\n  padding-left: var(--vd-spacing-4);\n}\n\n.pl-5 {\n  padding-left: var(--vd-spacing-5);\n}\n\n.pl-6 {\n  padding-left: var(--vd-spacing-6);\n}\n\n.pl-8 {\n  padding-left: var(--vd-spacing-8);\n}\n\n.pl-10 {\n  padding-left: var(--vd-spacing-10);\n}\n\n.pl-12 {\n  padding-left: var(--vd-spacing-12);\n}\n\n.pl-16 {\n  padding-left: var(--vd-spacing-16);\n}\n\n.pl-20 {\n  padding-left: var(--vd-spacing-20);\n}\n\n.pl-24 {\n  padding-left: var(--vd-spacing-24);\n}\n\n/* Display Utilities */\n.vd-d-none {\n  display: none;\n}\n\n.vd-d-inline {\n  display: inline;\n}\n\n.vd-d-inline-block {\n  display: inline-block;\n}\n\n.vd-d-block {\n  display: block;\n}\n\n.vd-d-table {\n  display: table;\n}\n\n.vd-d-table-row {\n  display: table-row;\n}\n\n.vd-d-table-cell {\n  display: table-cell;\n}\n\n.vd-d-flex {\n  display: flex;\n}\n\n.vd-d-inline-flex {\n  display: inline-flex;\n}\n\n.vd-d-grid {\n  display: grid;\n}\n\n.vd-d-inline-grid {\n  display: inline-grid;\n}\n\n/* Responsive Display */\n@media (min-width: 576px) {\n  .vd-d-sm-none {\n    display: none;\n  }\n\n  .vd-d-sm-inline {\n    display: inline;\n  }\n\n  .vd-d-sm-inline-block {\n    display: inline-block;\n  }\n\n  .vd-d-sm-block {\n    display: block;\n  }\n\n  .vd-d-sm-flex {\n    display: flex;\n  }\n\n  .vd-d-sm-inline-flex {\n    display: inline-flex;\n  }\n\n  .vd-d-sm-grid {\n    display: grid;\n  }\n}\n\n@media (min-width: 768px) {\n  .vd-d-md-none {\n    display: none;\n  }\n\n  .vd-d-md-inline {\n    display: inline;\n  }\n\n  .vd-d-md-inline-block {\n    display: inline-block;\n  }\n\n  .vd-d-md-block {\n    display: block;\n  }\n\n  .vd-d-md-flex {\n    display: flex;\n  }\n\n  .vd-d-md-inline-flex {\n    display: inline-flex;\n  }\n\n  .vd-d-md-grid {\n    display: grid;\n  }\n}\n\n@media (min-width: 992px) {\n  .vd-d-lg-none {\n    display: none;\n  }\n\n  .vd-d-lg-inline {\n    display: inline;\n  }\n\n  .vd-d-lg-inline-block {\n    display: inline-block;\n  }\n\n  .vd-d-lg-block {\n    display: block;\n  }\n\n  .vd-d-lg-flex {\n    display: flex;\n  }\n\n  .vd-d-lg-inline-flex {\n    display: inline-flex;\n  }\n\n  .vd-d-lg-grid {\n    display: grid;\n  }\n}\n\n@media (min-width: 1200px) {\n  .vd-d-xl-none {\n    display: none;\n  }\n\n  .vd-d-xl-inline {\n    display: inline;\n  }\n\n  .vd-d-xl-inline-block {\n    display: inline-block;\n  }\n\n  .vd-d-xl-block {\n    display: block;\n  }\n\n  .vd-d-xl-flex {\n    display: flex;\n  }\n\n  .vd-d-xl-inline-flex {\n    display: inline-flex;\n  }\n\n  .vd-d-xl-grid {\n    display: grid;\n  }\n}\n\n/* Position Utilities */\n.position-static {\n  position: static;\n}\n\n.position-relative {\n  position: relative;\n}\n\n.position-absolute {\n  position: absolute;\n}\n\n.position-fixed {\n  position: fixed;\n}\n\n.position-sticky {\n  position: sticky;\n}\n\n/* Position Values */\n.top-0 {\n  top: 0;\n}\n\n.right-0 {\n  right: 0;\n}\n\n.bottom-0 {\n  bottom: 0;\n}\n\n.left-0 {\n  left: 0;\n}\n\n/* Width Utilities */\n.w-auto {\n  width: auto;\n}\n\n.w-full {\n  width: 100%;\n}\n\n.w-screen {\n  width: 100vw;\n}\n\n.w-half {\n  width: 50%;\n}\n\n.w-third {\n  width: 33.333333%;\n}\n\n.w-two-thirds {\n  width: 66.666667%;\n}\n\n.w-quarter {\n  width: 25%;\n}\n\n.w-three-quarters {\n  width: 75%;\n}\n\n/* Golden Ratio Width Utilities */\n.w-phi-major {\n  width: 61.803399%;\n}\n\n.w-phi-minor {\n  width: 38.196601%;\n}\n\n.w-fib-987 {\n  max-width: 987px;\n}\n\n.w-fib-610 {\n  max-width: 610px;\n}\n\n.w-fib-377 {\n  max-width: 377px;\n}\n\n/* Height Utilities */\n.h-auto {\n  height: auto;\n}\n\n.h-full {\n  height: 100%;\n}\n\n.h-screen {\n  height: 100vh;\n}\n\n.h-half {\n  height: 50%;\n}\n\n.h-third {\n  height: 33.333333%;\n}\n\n.h-two-thirds {\n  height: 66.666667%;\n}\n\n.h-quarter {\n  height: 25%;\n}\n\n.h-three-quarters {\n  height: 75%;\n}\n\n/* Overflow Utilities */\n.overflow-auto {\n  overflow: auto;\n}\n\n.overflow-hidden {\n  overflow: hidden;\n}\n\n.overflow-visible {\n  overflow: visible;\n}\n\n.overflow-scroll {\n  overflow: scroll;\n}\n\n.overflow-x-auto {\n  overflow-x: auto;\n}\n\n.overflow-x-hidden {\n  overflow-x: hidden;\n}\n\n.overflow-x-scroll {\n  overflow-x: scroll;\n}\n\n.overflow-y-auto {\n  overflow-y: auto;\n}\n\n.overflow-y-hidden {\n  overflow-y: hidden;\n}\n\n.overflow-y-scroll {\n  overflow-y: scroll;\n}\n\n/* Flexbox Utilities */\n.vd-flex-row,\n.flex-row {\n  flex-direction: row;\n}\n\n.vd-flex-row-reverse,\n.flex-row-reverse {\n  flex-direction: row-reverse;\n}\n\n.vd-flex-col,\n.flex-col {\n  flex-direction: column;\n}\n\n.vd-flex-col-reverse,\n.flex-col-reverse {\n  flex-direction: column-reverse;\n}\n\n.vd-flex-wrap,\n.flex-wrap {\n  flex-wrap: wrap;\n}\n\n.vd-flex-nowrap,\n.flex-nowrap {\n  flex-wrap: nowrap;\n}\n\n.vd-flex-wrap-reverse,\n.flex-wrap-reverse {\n  flex-wrap: wrap-reverse;\n}\n\n.items-start {\n  align-items: flex-start;\n}\n\n.items-end {\n  align-items: flex-end;\n}\n\n.items-center {\n  align-items: center;\n}\n\n.items-baseline {\n  align-items: baseline;\n}\n\n.items-stretch {\n  align-items: stretch;\n}\n\n.justify-start {\n  justify-content: flex-start;\n}\n\n.justify-end {\n  justify-content: flex-end;\n}\n\n.justify-center {\n  justify-content: center;\n}\n\n.justify-between {\n  justify-content: space-between;\n}\n\n.justify-around {\n  justify-content: space-around;\n}\n\n.justify-evenly {\n  justify-content: space-evenly;\n}\n\n.flex-1 {\n  flex: 1 1 0%;\n}\n\n.flex-auto {\n  flex: 1 1 auto;\n}\n\n.flex-none {\n  flex: none;\n}\n\n/* Gap Utilities (for Grid and Flexbox) */\n.vd-gap-0 {\n  gap: var(--vd-spacing-0);\n}\n\n.vd-gap-1 {\n  gap: var(--vd-spacing-1);\n}\n\n.vd-gap-2 {\n  gap: var(--vd-spacing-2);\n}\n\n.vd-gap-3 {\n  gap: var(--vd-spacing-3);\n}\n\n.vd-gap-4 {\n  gap: var(--vd-spacing-4);\n}\n\n.vd-gap-5 {\n  gap: var(--vd-spacing-5);\n}\n\n.vd-gap-6 {\n  gap: var(--vd-spacing-6);\n}\n\n.vd-gap-8 {\n  gap: var(--vd-spacing-8);\n}\n\n.vd-gap-10 {\n  gap: var(--vd-spacing-10);\n}\n\n.vd-gap-12 {\n  gap: var(--vd-spacing-12);\n}\n\n/* Responsive Flex Direction */\n@media (min-width: 576px) {\n  .flex-sm-row {\n    flex-direction: row;\n  }\n\n  .flex-sm-row-reverse {\n    flex-direction: row-reverse;\n  }\n\n  .flex-sm-col {\n    flex-direction: column;\n  }\n\n  .flex-sm-col-reverse {\n    flex-direction: column-reverse;\n  }\n}\n\n@media (min-width: 768px) {\n  .flex-md-row {\n    flex-direction: row;\n  }\n\n  .flex-md-row-reverse {\n    flex-direction: row-reverse;\n  }\n\n  .flex-md-col {\n    flex-direction: column;\n  }\n\n  .flex-md-col-reverse {\n    flex-direction: column-reverse;\n  }\n}\n\n@media (min-width: 992px) {\n  .flex-lg-row {\n    flex-direction: row;\n  }\n\n  .flex-lg-row-reverse {\n    flex-direction: row-reverse;\n  }\n\n  .flex-lg-col {\n    flex-direction: column;\n  }\n\n  .flex-lg-col-reverse {\n    flex-direction: column-reverse;\n  }\n}\n\n@media (min-width: 1200px) {\n  .flex-xl-row {\n    flex-direction: row;\n  }\n\n  .flex-xl-row-reverse {\n    flex-direction: row-reverse;\n  }\n\n  .flex-xl-col {\n    flex-direction: column;\n  }\n\n  .flex-xl-col-reverse {\n    flex-direction: column-reverse;\n  }\n}\n\n/* Responsive Gap */\n@media (min-width: 576px) {\n  .vd-gap-sm-0 {\n    gap: var(--vd-spacing-0);\n  }\n\n  .vd-gap-sm-1 {\n    gap: var(--vd-spacing-1);\n  }\n\n  .vd-gap-sm-2 {\n    gap: var(--vd-spacing-2);\n  }\n\n  .vd-gap-sm-3 {\n    gap: var(--vd-spacing-3);\n  }\n\n  .vd-gap-sm-4 {\n    gap: var(--vd-spacing-4);\n  }\n\n  .vd-gap-sm-5 {\n    gap: var(--vd-spacing-5);\n  }\n\n  .vd-gap-sm-6 {\n    gap: var(--vd-spacing-6);\n  }\n\n  .vd-gap-sm-8 {\n    gap: var(--vd-spacing-8);\n  }\n\n  .vd-gap-sm-10 {\n    gap: var(--vd-spacing-10);\n  }\n\n  .vd-gap-sm-12 {\n    gap: var(--vd-spacing-12);\n  }\n}\n\n@media (min-width: 768px) {\n  .vd-gap-md-0 {\n    gap: var(--vd-spacing-0);\n  }\n\n  .vd-gap-md-1 {\n    gap: var(--vd-spacing-1);\n  }\n\n  .vd-gap-md-2 {\n    gap: var(--vd-spacing-2);\n  }\n\n  .vd-gap-md-3 {\n    gap: var(--vd-spacing-3);\n  }\n\n  .vd-gap-md-4 {\n    gap: var(--vd-spacing-4);\n  }\n\n  .vd-gap-md-5 {\n    gap: var(--vd-spacing-5);\n  }\n\n  .vd-gap-md-6 {\n    gap: var(--vd-spacing-6);\n  }\n\n  .vd-gap-md-8 {\n    gap: var(--vd-spacing-8);\n  }\n\n  .vd-gap-md-10 {\n    gap: var(--vd-spacing-10);\n  }\n\n  .vd-gap-md-12 {\n    gap: var(--vd-spacing-12);\n  }\n}\n\n@media (min-width: 992px) {\n  .vd-gap-lg-0 {\n    gap: var(--vd-spacing-0);\n  }\n\n  .vd-gap-lg-1 {\n    gap: var(--vd-spacing-1);\n  }\n\n  .vd-gap-lg-2 {\n    gap: var(--vd-spacing-2);\n  }\n\n  .vd-gap-lg-3 {\n    gap: var(--vd-spacing-3);\n  }\n\n  .vd-gap-lg-4 {\n    gap: var(--vd-spacing-4);\n  }\n\n  .vd-gap-lg-5 {\n    gap: var(--vd-spacing-5);\n  }\n\n  .vd-gap-lg-6 {\n    gap: var(--vd-spacing-6);\n  }\n\n  .vd-gap-lg-8 {\n    gap: var(--vd-spacing-8);\n  }\n\n  .vd-gap-lg-10 {\n    gap: var(--vd-spacing-10);\n  }\n\n  .vd-gap-lg-12 {\n    gap: var(--vd-spacing-12);\n  }\n}\n\n@media (min-width: 1200px) {\n  .vd-gap-xl-0 {\n    gap: var(--vd-spacing-0);\n  }\n\n  .vd-gap-xl-1 {\n    gap: var(--vd-spacing-1);\n  }\n\n  .vd-gap-xl-2 {\n    gap: var(--vd-spacing-2);\n  }\n\n  .vd-gap-xl-3 {\n    gap: var(--vd-spacing-3);\n  }\n\n  .vd-gap-xl-4 {\n    gap: var(--vd-spacing-4);\n  }\n\n  .vd-gap-xl-5 {\n    gap: var(--vd-spacing-5);\n  }\n\n  .vd-gap-xl-6 {\n    gap: var(--vd-spacing-6);\n  }\n\n  .vd-gap-xl-8 {\n    gap: var(--vd-spacing-8);\n  }\n\n  .vd-gap-xl-10 {\n    gap: var(--vd-spacing-10);\n  }\n\n  .vd-gap-xl-12 {\n    gap: var(--vd-spacing-12);\n  }\n}\n\n/* Scroll Behavior Utilities */\n.scroll-smooth {\n  scroll-behavior: smooth;\n}\n\n.scroll-auto {\n  scroll-behavior: auto;\n}\n\n/* Visibility Utilities */\n.visible {\n  visibility: visible;\n}\n\n.invisible {\n  visibility: hidden;\n}\n\n/* Cursor Utilities */\n.cursor-pointer {\n  cursor: pointer;\n}\n\n.cursor-default {\n  cursor: default;\n}\n\n.cursor-not-allowed {\n  cursor: not-allowed;\n}\n\n.cursor-wait {\n  cursor: wait;\n}\n\n.cursor-text {\n  cursor: text;\n}\n\n.cursor-move {\n  cursor: move;\n}\n\n/* User Select Utilities */\n.select-none {\n  user-select: none;\n}\n\n.select-text {\n  user-select: text;\n}\n\n.select-all {\n  user-select: all;\n}\n\n.select-auto {\n  user-select: auto;\n}\n\n/* Border Utilities */\n.vd-border,\n.border {\n  border: 1px solid var(--vd-border-color);\n}\n\n.vd-border-0,\n.border-0 {\n  border: 0;\n}\n\n.vd-border-top,\n.border-top {\n  border-top: 1px solid var(--vd-border-color);\n}\n\n.vd-border-right,\n.border-right {\n  border-right: 1px solid var(--vd-border-color);\n}\n\n.vd-border-bottom,\n.border-bottom {\n  border-bottom: 1px solid var(--vd-border-color);\n}\n\n.vd-border-left,\n.border-left {\n  border-left: 1px solid var(--vd-border-color);\n}\n\n.vd-border-2,\n.border-2 {\n  border-width: 2px;\n}\n\n.vd-border-4,\n.border-4 {\n  border-width: 4px;\n}\n\n.vd-border-8,\n.border-8 {\n  border-width: 8px;\n}\n\n/* Border Radius Utilities (Fibonacci: 2, 3, 5, 8, 13, 21) */\n.vd-rounded-none,\n.rounded-none {\n  border-radius: 0;\n}\n\n.vd-rounded-sm,\n.rounded-sm {\n  border-radius: var(--vd-radius-fib-2);\n}\n\n/* 2px */\n.vd-rounded,\n.rounded {\n  border-radius: var(--vd-radius-fib-3);\n}\n\n/* 3px */\n.vd-rounded-md,\n.rounded-md {\n  border-radius: var(--vd-radius-fib-5);\n}\n\n/* 5px */\n.vd-rounded-lg,\n.rounded-lg {\n  border-radius: var(--vd-radius-fib-8);\n}\n\n/* 8px */\n.vd-rounded-xl,\n.rounded-xl {\n  border-radius: var(--vd-radius-fib-13);\n}\n\n/* 13px */\n.vd-rounded-2xl,\n.rounded-2xl {\n  border-radius: var(--vd-radius-fib-21);\n}\n\n/* 21px */\n.vd-rounded-full,\n.rounded-full {\n  border-radius: 9999px;\n}\n\n.vd-rounded-t,\n.rounded-t {\n  border-top-left-radius: var(--vd-radius-fib-3);\n  border-top-right-radius: var(--vd-radius-fib-3);\n}\n\n.vd-rounded-r,\n.rounded-r {\n  border-top-right-radius: var(--vd-radius-fib-3);\n  border-bottom-right-radius: var(--vd-radius-fib-3);\n}\n\n.vd-rounded-b,\n.rounded-b {\n  border-bottom-right-radius: var(--vd-radius-fib-3);\n  border-bottom-left-radius: var(--vd-radius-fib-3);\n}\n\n.vd-rounded-l,\n.rounded-l {\n  border-top-left-radius: var(--vd-radius-fib-3);\n  border-bottom-left-radius: var(--vd-radius-fib-3);\n}\n\n/* Directional margin aliases (vd- prefix) */\n.vd-mt-2 { margin-top: var(--vd-spacing-2); }\n.vd-mt-3 { margin-top: var(--vd-spacing-3); }\n.vd-mt-4 { margin-top: var(--vd-spacing-4); }\n.vd-mt-5 { margin-top: var(--vd-spacing-5); }\n.vd-mt-6 { margin-top: var(--vd-spacing-6); }\n.vd-mt-8 { margin-top: var(--vd-spacing-8); }\n.vd-mb-0 { margin-bottom: var(--vd-spacing-0); }\n.vd-mb-2 { margin-bottom: var(--vd-spacing-2); }\n.vd-mb-3 { margin-bottom: var(--vd-spacing-3); }\n.vd-mb-4 { margin-bottom: var(--vd-spacing-4); }\n.vd-mb-5 { margin-bottom: var(--vd-spacing-5); }\n.vd-mb-6 { margin-bottom: var(--vd-spacing-6); }\n.vd-mb-8 { margin-bottom: var(--vd-spacing-8); }\n.vd-mr-3 { margin-right: var(--vd-spacing-3); }\n.vd-mr-6 { margin-right: var(--vd-spacing-6); }\n.vd-ml-5 { margin-left: var(--vd-spacing-5); }\n\n/* Responsive Spacing Utilities */\n@media (min-width: 576px) {\n  .vd-m-sm-0 {\n    margin: var(--vd-spacing-0);\n  }\n\n  .vd-m-sm-1 {\n    margin: var(--vd-spacing-1);\n  }\n\n  .vd-m-sm-2 {\n    margin: var(--vd-spacing-2);\n  }\n\n  .vd-m-sm-3 {\n    margin: var(--vd-spacing-3);\n  }\n\n  .vd-m-sm-4 {\n    margin: var(--vd-spacing-4);\n  }\n\n  .vd-m-sm-5 {\n    margin: var(--vd-spacing-5);\n  }\n\n  .vd-m-sm-6 {\n    margin: var(--vd-spacing-6);\n  }\n\n  .vd-m-sm-auto {\n    margin: auto;\n  }\n\n  .mt-sm-0 {\n    margin-top: var(--vd-spacing-0);\n  }\n\n  .mt-sm-4 {\n    margin-top: var(--vd-spacing-4);\n  }\n\n  .mb-sm-0 {\n    margin-bottom: var(--vd-spacing-0);\n  }\n\n  .mb-sm-4 {\n    margin-bottom: var(--vd-spacing-4);\n  }\n\n  .vd-p-sm-0 {\n    padding: var(--vd-spacing-0);\n  }\n\n  .vd-p-sm-1 {\n    padding: var(--vd-spacing-1);\n  }\n\n  .vd-p-sm-2 {\n    padding: var(--vd-spacing-2);\n  }\n\n  .vd-p-sm-3 {\n    padding: var(--vd-spacing-3);\n  }\n\n  .vd-p-sm-4 {\n    padding: var(--vd-spacing-4);\n  }\n\n  .vd-p-sm-5 {\n    padding: var(--vd-spacing-5);\n  }\n\n  .vd-p-sm-6 {\n    padding: var(--vd-spacing-6);\n  }\n}\n\n@media (min-width: 768px) {\n  .vd-m-md-0 {\n    margin: var(--vd-spacing-0);\n  }\n\n  .vd-m-md-1 {\n    margin: var(--vd-spacing-1);\n  }\n\n  .vd-m-md-2 {\n    margin: var(--vd-spacing-2);\n  }\n\n  .vd-m-md-3 {\n    margin: var(--vd-spacing-3);\n  }\n\n  .vd-m-md-4 {\n    margin: var(--vd-spacing-4);\n  }\n\n  .vd-m-md-5 {\n    margin: var(--vd-spacing-5);\n  }\n\n  .vd-m-md-6 {\n    margin: var(--vd-spacing-6);\n  }\n\n  .vd-m-md-auto {\n    margin: auto;\n  }\n\n  .mt-md-0 {\n    margin-top: var(--vd-spacing-0);\n  }\n\n  .mt-md-4 {\n    margin-top: var(--vd-spacing-4);\n  }\n\n  .mb-md-0 {\n    margin-bottom: var(--vd-spacing-0);\n  }\n\n  .mb-md-4 {\n    margin-bottom: var(--vd-spacing-4);\n  }\n\n  .vd-p-md-0 {\n    padding: var(--vd-spacing-0);\n  }\n\n  .vd-p-md-1 {\n    padding: var(--vd-spacing-1);\n  }\n\n  .vd-p-md-2 {\n    padding: var(--vd-spacing-2);\n  }\n\n  .vd-p-md-3 {\n    padding: var(--vd-spacing-3);\n  }\n\n  .vd-p-md-4 {\n    padding: var(--vd-spacing-4);\n  }\n\n  .vd-p-md-5 {\n    padding: var(--vd-spacing-5);\n  }\n\n  .vd-p-md-6 {\n    padding: var(--vd-spacing-6);\n  }\n}\n\n@media (min-width: 992px) {\n  .vd-m-lg-0 {\n    margin: var(--vd-spacing-0);\n  }\n\n  .vd-m-lg-1 {\n    margin: var(--vd-spacing-1);\n  }\n\n  .vd-m-lg-2 {\n    margin: var(--vd-spacing-2);\n  }\n\n  .vd-m-lg-3 {\n    margin: var(--vd-spacing-3);\n  }\n\n  .vd-m-lg-4 {\n    margin: var(--vd-spacing-4);\n  }\n\n  .vd-m-lg-5 {\n    margin: var(--vd-spacing-5);\n  }\n\n  .vd-m-lg-6 {\n    margin: var(--vd-spacing-6);\n  }\n\n  .vd-m-lg-auto {\n    margin: auto;\n  }\n\n  .mt-lg-0 {\n    margin-top: var(--vd-spacing-0);\n  }\n\n  .mt-lg-4 {\n    margin-top: var(--vd-spacing-4);\n  }\n\n  .mb-lg-0 {\n    margin-bottom: var(--vd-spacing-0);\n  }\n\n  .mb-lg-4 {\n    margin-bottom: var(--vd-spacing-4);\n  }\n\n  .vd-p-lg-0 {\n    padding: var(--vd-spacing-0);\n  }\n\n  .vd-p-lg-1 {\n    padding: var(--vd-spacing-1);\n  }\n\n  .vd-p-lg-2 {\n    padding: var(--vd-spacing-2);\n  }\n\n  .vd-p-lg-3 {\n    padding: var(--vd-spacing-3);\n  }\n\n  .vd-p-lg-4 {\n    padding: var(--vd-spacing-4);\n  }\n\n  .vd-p-lg-5 {\n    padding: var(--vd-spacing-5);\n  }\n\n  .vd-p-lg-6 {\n    padding: var(--vd-spacing-6);\n  }\n}\n\n@media (min-width: 1200px) {\n  .vd-m-xl-0 {\n    margin: var(--vd-spacing-0);\n  }\n\n  .vd-m-xl-1 {\n    margin: var(--vd-spacing-1);\n  }\n\n  .vd-m-xl-2 {\n    margin: var(--vd-spacing-2);\n  }\n\n  .vd-m-xl-3 {\n    margin: var(--vd-spacing-3);\n  }\n\n  .vd-m-xl-4 {\n    margin: var(--vd-spacing-4);\n  }\n\n  .vd-m-xl-5 {\n    margin: var(--vd-spacing-5);\n  }\n\n  .vd-m-xl-6 {\n    margin: var(--vd-spacing-6);\n  }\n\n  .vd-m-xl-auto {\n    margin: auto;\n  }\n\n  .mt-xl-0 {\n    margin-top: var(--vd-spacing-0);\n  }\n\n  .mt-xl-4 {\n    margin-top: var(--vd-spacing-4);\n  }\n\n  .mb-xl-0 {\n    margin-bottom: var(--vd-spacing-0);\n  }\n\n  .mb-xl-4 {\n    margin-bottom: var(--vd-spacing-4);\n  }\n\n  .vd-p-xl-0 {\n    padding: var(--vd-spacing-0);\n  }\n\n  .vd-p-xl-1 {\n    padding: var(--vd-spacing-1);\n  }\n\n  .vd-p-xl-2 {\n    padding: var(--vd-spacing-2);\n  }\n\n  .vd-p-xl-3 {\n    padding: var(--vd-spacing-3);\n  }\n\n  .vd-p-xl-4 {\n    padding: var(--vd-spacing-4);\n  }\n\n  .vd-p-xl-5 {\n    padding: var(--vd-spacing-5);\n  }\n\n  .vd-p-xl-6 {\n    padding: var(--vd-spacing-6);\n  }\n}\n\n/* Skip Link - Accessibility */\n.skip-link {\n  position: absolute;\n  left: -9999px;\n  z-index: 9999;\n  padding: 0.8125rem;\n  /* 13px - fib */\n  background-color: var(--vd-bg-primary);\n  color: var(--vd-text-primary);\n  text-decoration: none;\n  font-weight: var(--vd-font-weight-medium);\n}\n\n.skip-link:focus {\n  left: 0;\n  top: 0;\n  outline: 2px solid var(--vd-color-primary);\n  outline-offset: 2px;\n}\n\n/* Screen Reader Only - Visually hidden but accessible to assistive technology */\n.sr-only {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border-width: 0;\n}\n\n.sr-only-focusable:focus,\n.sr-only-focusable:active {\n  position: static;\n  width: auto;\n  height: auto;\n  padding: inherit;\n  margin: inherit;\n  overflow: visible;\n  clip: auto;\n  white-space: normal;\n}\n\n/* Focus Visible Utilities */\n.focus-ring:focus-visible {\n  outline: 2px solid var(--vd-color-primary);\n  outline-offset: 2px;\n}\n\n.focus-ring-inset:focus-visible {\n  outline: 2px solid var(--vd-color-primary);\n  outline-offset: -2px;\n}\n\n.focus-ring-shadow:focus-visible {\n  outline: none;\n  box-shadow: 0 0 0 3px rgba(var(--vd-color-primary-rgb, 0, 123, 255), 0.25);\n}\n\n/* Text Alignment Utilities */\n.vd-text-left {\n  text-align: left;\n}\n\n.vd-text-center {\n  text-align: center;\n}\n\n.vd-text-right {\n  text-align: right;\n}\n\n.vd-text-justify {\n  text-align: justify;\n}\n\n/* Text Transform Utilities */\n.vd-text-uppercase {\n  text-transform: uppercase;\n}\n\n.vd-text-lowercase {\n  text-transform: lowercase;\n}\n\n.vd-text-capitalize {\n  text-transform: capitalize;\n}\n\n.vd-text-normal-case {\n  text-transform: none;\n}\n\n/* Text Overflow Utilities */\n.vd-text-truncate {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.vd-text-nowrap {\n  white-space: nowrap;\n}\n\n.vd-text-wrap {\n  white-space: normal;\n}\n\n.vd-text-break {\n  word-break: break-word;\n  overflow-wrap: break-word;\n}\n\n/* Text Decoration Utilities */\n.vd-text-underline {\n  text-decoration: underline;\n}\n\n.vd-text-line-through {\n  text-decoration: line-through;\n}\n\n.vd-text-no-underline {\n  text-decoration: none;\n}\n\n/* Font Style Utilities */\n.vd-font-italic {\n  font-style: italic;\n}\n\n.vd-font-normal {\n  font-style: normal;\n}\n\n/* Responsive Text Alignment */\n@media (min-width: 576px) {\n  .vd-text-sm-left {\n    text-align: left;\n  }\n\n  .vd-text-sm-center {\n    text-align: center;\n  }\n\n  .vd-text-sm-right {\n    text-align: right;\n  }\n}\n\n@media (min-width: 768px) {\n  .vd-text-md-left {\n    text-align: left;\n  }\n\n  .vd-text-md-center {\n    text-align: center;\n  }\n\n  .vd-text-md-right {\n    text-align: right;\n  }\n}\n\n@media (min-width: 992px) {\n  .vd-text-lg-left {\n    text-align: left;\n  }\n\n  .vd-text-lg-center {\n    text-align: center;\n  }\n\n  .vd-text-lg-right {\n    text-align: right;\n  }\n}\n\n@media (min-width: 1200px) {\n  .vd-text-xl-left {\n    text-align: left;\n  }\n\n  .vd-text-xl-center {\n    text-align: center;\n  }\n\n  .vd-text-xl-right {\n    text-align: right;\n  }\n}\n\n/* Opacity Utilities */\n.opacity-0 {\n  opacity: 0;\n}\n\n.opacity-25 {\n  opacity: 0.25;\n}\n\n.opacity-50 {\n  opacity: 0.5;\n}\n\n.opacity-75 {\n  opacity: 0.75;\n}\n\n.opacity-100 {\n  opacity: 1;\n}\n\n/* Z-Index Utilities */\n.z-0 {\n  z-index: 0;\n}\n\n.z-10 {\n  z-index: 10;\n}\n\n.z-20 {\n  z-index: 20;\n}\n\n.z-30 {\n  z-index: 30;\n}\n\n.z-40 {\n  z-index: 40;\n}\n\n.z-50 {\n  z-index: 50;\n}\n\n.z-auto {\n  z-index: auto;\n}\n\n.z-negative {\n  z-index: -1;\n}\n\n/* Object Fit Utilities */\n.object-contain {\n  object-fit: contain;\n}\n\n.object-cover {\n  object-fit: cover;\n}\n\n.object-fill {\n  object-fit: fill;\n}\n\n.object-none {\n  object-fit: none;\n}\n\n.object-scale-down {\n  object-fit: scale-down;\n}\n\n/* Object Position Utilities */\n.object-center {\n  object-position: center;\n}\n\n.object-top {\n  object-position: top;\n}\n\n.object-bottom {\n  object-position: bottom;\n}\n\n.object-left {\n  object-position: left;\n}\n\n.object-right {\n  object-position: right;\n}\n\n/* Pointer Events Utilities */\n.pointer-events-none {\n  pointer-events: none;\n}\n\n.pointer-events-auto {\n  pointer-events: auto;\n}\n\n/* Aspect Ratio Utilities */\n.aspect-auto {\n  aspect-ratio: auto;\n}\n\n.aspect-square {\n  aspect-ratio: 1 / 1;\n}\n\n.aspect-video {\n  aspect-ratio: 16 / 9;\n}\n\n.aspect-4-3 {\n  aspect-ratio: 4 / 3;\n}\n\n.aspect-golden {\n  aspect-ratio: 1.618 / 1;\n}\n\n.aspect-golden-portrait {\n  aspect-ratio: 1 / 1.618;\n}\n\n/* ═════════════════════════════════════════════════════════════════════════\n * DYNAMIC RADIUS SWITCHING (Theme Customizer)\n * These rules remap --vd-radius-fib-* variables based on [data-radius] attribute\n * Values: 0, 0.125, 0.25, 0.375, 0.5 (rem multiplier)\n * ═════════════════════════════════════════════════════════════════════════ */\n\n/* No radius (sharp corners) */\n[data-radius=\"0\"] {\n  --vd-radius-fib-2: 0;\n  --vd-radius-fib-3: 0;\n  --vd-radius-fib-5: 0;\n  --vd-radius-fib-8: 0;\n  --vd-radius-fib-13: 0;\n  --vd-radius-fib-21: 0;\n}\n\n/* Extra small radius (0.125rem base) */\n[data-radius=\"0.125\"] {\n  --vd-radius-fib-2: 0.0625rem;   /* 1px */\n  --vd-radius-fib-3: 0.09375rem;  /* 1.5px */\n  --vd-radius-fib-5: 0.15625rem;  /* 2.5px */\n  --vd-radius-fib-8: 0.25rem;     /* 4px */\n  --vd-radius-fib-13: 0.40625rem; /* 6.5px */\n  --vd-radius-fib-21: 0.65625rem; /* 10.5px */\n}\n\n/* Small radius (0.25rem base - default) */\n[data-radius=\"0.25\"] {\n  --vd-radius-fib-2: 0.125rem;    /* 2px */\n  --vd-radius-fib-3: 0.1875rem;   /* 3px */\n  --vd-radius-fib-5: 0.3125rem;   /* 5px */\n  --vd-radius-fib-8: 0.5rem;      /* 8px */\n  --vd-radius-fib-13: 0.8125rem;  /* 13px */\n  --vd-radius-fib-21: 1.3125rem;  /* 21px */\n}\n\n/* Medium radius (0.375rem base) */\n[data-radius=\"0.375\"] {\n  --vd-radius-fib-2: 0.1875rem;   /* 3px */\n  --vd-radius-fib-3: 0.28125rem;  /* 4.5px */\n  --vd-radius-fib-5: 0.46875rem;  /* 7.5px */\n  --vd-radius-fib-8: 0.75rem;     /* 12px */\n  --vd-radius-fib-13: 1.21875rem; /* 19.5px */\n  --vd-radius-fib-21: 1.96875rem; /* 31.5px */\n}\n\n/* Large radius (0.5rem base) */\n[data-radius=\"0.5\"] {\n  --vd-radius-fib-2: 0.25rem;     /* 4px */\n  --vd-radius-fib-3: 0.375rem;    /* 6px */\n  --vd-radius-fib-5: 0.625rem;    /* 10px */\n  --vd-radius-fib-8: 1rem;        /* 16px */\n  --vd-radius-fib-13: 1.625rem;   /* 26px */\n  --vd-radius-fib-21: 2.625rem;   /* 42px */\n}\n\n\n/* Layer 2: Icons (regular + fill; import css/icons/icons-all.css for all 6 weights) */\n\n/* Layer 3: Utilities */\n/**\n * Vanduo Framework - Shadow Utilities\n * Elevation and shadow system for depth and visual hierarchy\n */\n\n:root {\n  /* Fibonacci Shadow System\n   * Y-offset and blur follow Fibonacci pairs: 1/2, 2/3, 3/5, 8/13, 13/21, 21/34\n   * Each level steps through the Fibonacci sequence */\n  --vd-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);\n  --vd-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);\n  --vd-shadow-md: 0 3px 5px -1px rgba(0, 0, 0, 0.1), 0 2px 3px -2px rgba(0, 0, 0, 0.1);\n  --vd-shadow-lg: 0 8px 13px -3px rgba(0, 0, 0, 0.1), 0 3px 5px -3px rgba(0, 0, 0, 0.1);\n  --vd-shadow-xl: 0 13px 21px -5px rgba(0, 0, 0, 0.1), 0 5px 8px -5px rgba(0, 0, 0, 0.1);\n  --vd-shadow-2xl: 0 21px 34px -8px rgba(0, 0, 0, 0.25);\n  --vd-shadow-inner: inset 0 2px 3px 0 rgba(0, 0, 0, 0.05);\n\n  /* Colored Shadows (Fibonacci: 3/5 offset/blur)\n   * Colors match Open Color palette defined in colors.css */\n  --vd-shadow-primary: 0 3px 5px -1px rgba(34, 184, 207, 0.2), 0 2px 3px -2px rgba(34, 184, 207, 0.1);\n  --vd-shadow-success: 0 3px 5px -1px rgba(64, 192, 87, 0.2), 0 2px 3px -2px rgba(64, 192, 87, 0.1);\n  --vd-shadow-warning: 0 3px 5px -1px rgba(250, 176, 5, 0.2), 0 2px 3px -2px rgba(250, 176, 5, 0.1);\n  --vd-shadow-error: 0 3px 5px -1px rgba(250, 82, 82, 0.2), 0 2px 3px -2px rgba(250, 82, 82, 0.1);\n\n  /* Glow Effect Colors - uses color scale variables */\n  --vd-glow-primary-color: var(--vd-primary-3);\n  --vd-glow-success-color: var(--vd-success-3);\n  --vd-glow-warning-color: var(--vd-warning-3);\n  --vd-glow-error-color: var(--vd-danger-3);\n}\n\n/* Shadow Utilities */\n.vd-shadow-none {\n  box-shadow: none;\n}\n\n.vd-shadow-sm {\n  box-shadow: var(--vd-shadow-sm);\n}\n\n.vd-shadow {\n  box-shadow: var(--vd-shadow);\n}\n\n.vd-shadow-md {\n  box-shadow: var(--vd-shadow-md);\n}\n\n.vd-shadow-lg {\n  box-shadow: var(--vd-shadow-lg);\n}\n\n.vd-shadow-xl {\n  box-shadow: var(--vd-shadow-xl);\n}\n\n.vd-shadow-2xl {\n  box-shadow: var(--vd-shadow-2xl);\n}\n\n.vd-shadow-inner {\n  box-shadow: var(--vd-shadow-inner);\n}\n\n/* Colored Shadow Utilities */\n.vd-shadow-primary {\n  box-shadow: var(--vd-shadow-primary);\n}\n\n.vd-shadow-success {\n  box-shadow: var(--vd-shadow-success);\n}\n\n.vd-shadow-warning {\n  box-shadow: var(--vd-shadow-warning);\n}\n\n.vd-shadow-error {\n  box-shadow: var(--vd-shadow-error);\n}\n\n/* Elevation Levels (for Material Design-like system) */\n.elevation-0 {\n  box-shadow: none;\n}\n\n.elevation-1 {\n  box-shadow: var(--vd-shadow-sm);\n}\n\n.elevation-2 {\n  box-shadow: var(--vd-shadow);\n}\n\n.elevation-3 {\n  box-shadow: var(--vd-shadow-md);\n}\n\n.elevation-4 {\n  box-shadow: var(--vd-shadow-lg);\n}\n\n.elevation-5 {\n  box-shadow: var(--vd-shadow-xl);\n}\n\n/* ═════════════════════════════════════════════════════════════════════════\n * GLOW EFFECT UTILITIES\n * Soft glowing shadows for interactive elements\n * ═════════════════════════════════════════════════════════════════════════ */\n\n/* Base Glow (uses primary color) */\n.vd-glow,\n.vd-glow-primary,\n.glow,\n.glow-primary {\n  box-shadow: 0 0 15px 0 var(--vd-glow-primary-color, rgba(34, 184, 207, 0.25));\n}\n\n/* Glow on Hover */\n.vd-hover-glow,\n.vd-hover-glow-primary,\n.hover-glow,\n.hover-glow-primary {\n  transition: box-shadow 0.3s ease;\n}\n\n.vd-hover-glow:hover,\n.vd-hover-glow-primary:hover,\n.hover-glow:hover,\n.hover-glow-primary:hover {\n  box-shadow: 0 0 15px 0 var(--vd-glow-primary-color, rgba(34, 184, 207, 0.25));\n}\n\n/* Glow Color Variants */\n.vd-glow-success,\n.glow-success {\n  box-shadow: 0 0 15px 0 var(--vd-glow-success-color, rgba(64, 192, 87, 0.25));\n}\n\n.vd-glow-warning,\n.glow-warning {\n  box-shadow: 0 0 15px 0 var(--vd-glow-warning-color, rgba(250, 176, 5, 0.25));\n}\n\n.vd-glow-error,\n.glow-error {\n  box-shadow: 0 0 15px 0 var(--vd-glow-error-color, rgba(250, 82, 82, 0.25));\n}\n\n/* Glow Hover Variants */\n.vd-hover-glow-success:hover,\n.hover-glow-success:hover {\n  box-shadow: 0 0 15px 0 var(--vd-glow-success-color, rgba(64, 192, 87, 0.25));\n}\n\n.vd-hover-glow-warning:hover,\n.hover-glow-warning:hover {\n  box-shadow: 0 0 15px 0 var(--vd-glow-warning-color, rgba(250, 176, 5, 0.25));\n}\n\n.vd-hover-glow-error:hover,\n.hover-glow-error:hover {\n  box-shadow: 0 0 15px 0 var(--vd-glow-error-color, rgba(250, 82, 82, 0.25));\n}\n\n/* Glow Intensity Variants */\n.vd-glow-sm,\n.glow-sm {\n  box-shadow: 0 0 8px 0 var(--vd-glow-primary-color, rgba(34, 184, 207, 0.15));\n}\n\n.vd-glow-md,\n.glow-md {\n  box-shadow: 0 0 15px 0 var(--vd-glow-primary-color, rgba(34, 184, 207, 0.25));\n}\n\n.vd-glow-lg,\n.glow-lg {\n  box-shadow: 0 0 22px 0 var(--vd-glow-primary-color, rgba(34, 184, 207, 0.35));\n}\n\n.vd-hover-glow-sm:hover,\n.hover-glow-sm:hover {\n  box-shadow: 0 0 8px 0 var(--vd-glow-primary-color, rgba(34, 184, 207, 0.15));\n}\n\n.vd-hover-glow-md:hover,\n.hover-glow-md:hover {\n  box-shadow: 0 0 15px 0 var(--vd-glow-primary-color, rgba(34, 184, 207, 0.25));\n}\n\n.vd-hover-glow-lg:hover,\n.hover-glow-lg:hover {\n  box-shadow: 0 0 22px 0 var(--vd-glow-primary-color, rgba(34, 184, 207, 0.35));\n}\n\n/* Dark Mode Shadow Overrides\n * Dark backgrounds need stronger shadows for visible depth\n * Matches both explicit dark theme and system preference */\n[data-theme=\"dark\"],\n:root:not([data-theme]) {\n  --vd-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.2);\n  --vd-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.3), 0 1px 2px -1px rgba(0, 0, 0, 0.3);\n  --vd-shadow-md: 0 3px 5px -1px rgba(0, 0, 0, 0.35), 0 2px 3px -2px rgba(0, 0, 0, 0.3);\n  --vd-shadow-lg: 0 8px 13px -3px rgba(0, 0, 0, 0.35), 0 3px 5px -3px rgba(0, 0, 0, 0.3);\n  --vd-shadow-xl: 0 13px 21px -5px rgba(0, 0, 0, 0.35), 0 5px 8px -5px rgba(0, 0, 0, 0.3);\n  --vd-shadow-2xl: 0 21px 34px -8px rgba(0, 0, 0, 0.5);\n  --vd-shadow-inner: inset 0 2px 3px 0 rgba(0, 0, 0, 0.2);\n  --vd-shadow-primary: 0 3px 5px -1px rgba(34, 184, 207, 0.3), 0 2px 3px -2px rgba(34, 184, 207, 0.2);\n  --vd-shadow-success: 0 3px 5px -1px rgba(64, 192, 87, 0.3), 0 2px 3px -2px rgba(64, 192, 87, 0.2);\n  --vd-shadow-warning: 0 3px 5px -1px rgba(250, 176, 5, 0.3), 0 2px 3px -2px rgba(250, 176, 5, 0.2);\n  --vd-shadow-error: 0 3px 5px -1px rgba(250, 82, 82, 0.3), 0 2px 3px -2px rgba(250, 82, 82, 0.2);\n\n  /* Glow Effect Colors - Dark Mode (lighter shades for visibility) */\n  --vd-glow-primary-color: var(--vd-primary-4);\n  --vd-glow-success-color: var(--vd-success-4);\n  --vd-glow-warning-color: var(--vd-warning-4);\n  --vd-glow-error-color: var(--vd-danger-4);\n}\n\n/* System preference dark mode (when no explicit theme is set) */\n@media (prefers-color-scheme: dark) {\n  :root:not([data-theme]) {\n    --vd-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.2);\n    --vd-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.3), 0 1px 2px -1px rgba(0, 0, 0, 0.3);\n    --vd-shadow-md: 0 3px 5px -1px rgba(0, 0, 0, 0.35), 0 2px 3px -2px rgba(0, 0, 0, 0.3);\n    --vd-shadow-lg: 0 8px 13px -3px rgba(0, 0, 0, 0.35), 0 3px 5px -3px rgba(0, 0, 0, 0.3);\n    --vd-shadow-xl: 0 13px 21px -5px rgba(0, 0, 0, 0.35), 0 5px 8px -5px rgba(0, 0, 0, 0.3);\n    --vd-shadow-2xl: 0 21px 34px -8px rgba(0, 0, 0, 0.5);\n    --vd-shadow-inner: inset 0 2px 3px 0 rgba(0, 0, 0, 0.2);\n    --vd-shadow-primary: 0 3px 5px -1px rgba(34, 184, 207, 0.3), 0 2px 3px -2px rgba(34, 184, 207, 0.2);\n    --vd-shadow-success: 0 3px 5px -1px rgba(64, 192, 87, 0.3), 0 2px 3px -2px rgba(64, 192, 87, 0.2);\n    --vd-shadow-warning: 0 3px 5px -1px rgba(250, 176, 5, 0.3), 0 2px 3px -2px rgba(250, 176, 5, 0.2);\n    --vd-shadow-error: 0 3px 5px -1px rgba(250, 82, 82, 0.3), 0 2px 3px -2px rgba(250, 82, 82, 0.2);\n\n    /* Glow Effect Colors - Dark Mode */\n    --vd-glow-primary-color: var(--vd-primary-4);\n    --vd-glow-success-color: var(--vd-success-4);\n    --vd-glow-warning-color: var(--vd-warning-4);\n    --vd-glow-error-color: var(--vd-danger-4);\n  }\n}\n\n/**\n * Vanduo Framework - Transitions\n * Transition utilities for animations and effects\n */\n\n:root {\n  /* Transition Durations */\n  --vd-transition-duration-fast: 150ms;\n  --vd-transition-duration-base: 200ms;\n  --vd-transition-duration-slow: 300ms;\n  --vd-transition-duration-slower: 400ms;\n  --vd-transition-duration-slowest: 500ms;\n  \n  /* Transition Timing Functions */\n  --vd-transition-ease: ease;\n  --vd-transition-ease-in: ease-in;\n  --vd-transition-ease-out: ease-out;\n  --vd-transition-ease-in-out: ease-in-out;\n  --vd-transition-linear: linear;\n  \n  /* Common Transitions */\n  --vd-transition-base: all var(--vd-transition-duration-base) var(--vd-transition-ease);\n  --vd-transition-fast: all var(--vd-transition-duration-fast) var(--vd-transition-ease);\n  --vd-transition-slow: all var(--vd-transition-duration-slow) var(--vd-transition-ease);\n  --vd-transition-color: color var(--vd-transition-duration-base) var(--vd-transition-ease);\n  --vd-transition-bg: background-color var(--vd-transition-duration-base) var(--vd-transition-ease);\n  --vd-transition-border: border-color var(--vd-transition-duration-base) var(--vd-transition-ease);\n  --vd-transition-opacity: opacity var(--vd-transition-duration-base) var(--vd-transition-ease);\n  --vd-transition-transform: transform var(--vd-transition-duration-base) var(--vd-transition-ease);\n  --vd-transition-shadow: box-shadow var(--vd-transition-duration-base) var(--vd-transition-ease);\n}\n\n/* Transition Duration Utilities */\n.vd-transition-none { transition: none; }\n.vd-transition-fast {\n  transition: var(--vd-transition-fast);\n  transition-duration: var(--vd-transition-duration-fast);\n}\n.vd-transition-base { transition-duration: var(--vd-transition-duration-base); }\n.vd-transition-slow {\n  transition: var(--vd-transition-slow);\n  transition-duration: var(--vd-transition-duration-slow);\n}\n.vd-transition-slower { transition-duration: var(--vd-transition-duration-slower); }\n.vd-transition-slowest { transition-duration: var(--vd-transition-duration-slowest); }\n\n/* Transition Timing Function Utilities */\n.vd-transition-ease { transition-timing-function: var(--vd-transition-ease); }\n.vd-transition-ease-in { transition-timing-function: var(--vd-transition-ease-in); }\n.vd-transition-ease-out { transition-timing-function: var(--vd-transition-ease-out); }\n.vd-transition-ease-in-out { transition-timing-function: var(--vd-transition-ease-in-out); }\n.vd-transition-linear { transition-timing-function: var(--vd-transition-linear); }\n\n/* Transition Property Utilities */\n.vd-transition-all { transition-property: all; }\n.vd-transition-colors { transition-property: color, background-color, border-color; }\n.vd-transition-opacity {\n  transition: var(--vd-transition-opacity);\n  transition-property: opacity;\n}\n\n.vd-transition-transform {\n  transition: var(--vd-transition-transform);\n  transition-property: transform;\n}\n\n.vd-transition-shadow {\n  transition: var(--vd-transition-shadow);\n  transition-property: box-shadow;\n}\n\n/* Combined Transition Utilities */\n.vd-transition { transition: var(--vd-transition-base); }\n.vd-transition-color { transition: var(--vd-transition-color); }\n.vd-transition-bg { transition: var(--vd-transition-bg); }\n.vd-transition-border { transition: var(--vd-transition-border); }\n\n/* Delay Utilities */\n.vd-transition-delay-none { transition-delay: 0ms; }\n.vd-transition-delay-75 { transition-delay: 75ms; }\n.vd-transition-delay-100 { transition-delay: 100ms; }\n.vd-transition-delay-150 { transition-delay: 150ms; }\n.vd-transition-delay-200 { transition-delay: 200ms; }\n.vd-transition-delay-300 { transition-delay: 300ms; }\n.vd-transition-delay-500 { transition-delay: 500ms; }\n.vd-transition-delay-700 { transition-delay: 700ms; }\n.vd-transition-delay-1000 { transition-delay: 1000ms; }\n\n/* Reduced Motion - Accessibility */\n@media (prefers-reduced-motion: reduce) {\n  *,\n  *::before,\n  *::after {\n    animation-duration: 0.01ms !important;\n    animation-iteration-count: 1 !important;\n    transition-duration: 0.01ms !important;\n    scroll-behavior: auto !important;\n  }\n}\n\n/**\n * Vanduo Framework - Transform Utilities\n * Scale, rotate, and translate utilities\n */\n\n/* Scale Utilities */\n.scale-0 { transform: scale(0); }\n.scale-50 { transform: scale(0.5); }\n.scale-75 { transform: scale(0.75); }\n.scale-90 { transform: scale(0.9); }\n.scale-95 { transform: scale(0.95); }\n.scale-100 { transform: scale(1); }\n.scale-105 { transform: scale(1.05); }\n.scale-110 { transform: scale(1.1); }\n.scale-125 { transform: scale(1.25); }\n.scale-150 { transform: scale(1.5); }\n\n/* Rotate Utilities */\n.rotate-0 { transform: rotate(0deg); }\n.rotate-45 { transform: rotate(45deg); }\n.rotate-90 { transform: rotate(90deg); }\n.rotate-180 { transform: rotate(180deg); }\n.-rotate-45 { transform: rotate(-45deg); }\n.-rotate-90 { transform: rotate(-90deg); }\n.-rotate-180 { transform: rotate(-180deg); }\n\n/* Translate Utilities (Fibonacci-based: 1, 2, 3, 5, 8, 13, 21px) */\n.translate-x-0 { transform: translateX(0); }\n.translate-x-1 { transform: translateX(1px); }\n.translate-x-2 { transform: translateX(2px); }\n.translate-x-3 { transform: translateX(3px); }\n.translate-x-5 { transform: translateX(5px); }\n.translate-x-8 { transform: translateX(8px); }\n.-translate-x-1 { transform: translateX(-1px); }\n.-translate-x-2 { transform: translateX(-2px); }\n.-translate-x-3 { transform: translateX(-3px); }\n.-translate-x-5 { transform: translateX(-5px); }\n.-translate-x-8 { transform: translateX(-8px); }\n\n.translate-y-0 { transform: translateY(0); }\n.translate-y-1 { transform: translateY(1px); }\n.translate-y-2 { transform: translateY(2px); }\n.translate-y-3 { transform: translateY(3px); }\n.translate-y-5 { transform: translateY(5px); }\n.translate-y-8 { transform: translateY(8px); }\n.-translate-y-1 { transform: translateY(-1px); }\n.-translate-y-2 { transform: translateY(-2px); }\n.-translate-y-3 { transform: translateY(-3px); }\n.-translate-y-5 { transform: translateY(-5px); }\n.-translate-y-8 { transform: translateY(-8px); }\n\n/* Translate percentage-based */\n.translate-x-full { transform: translateX(100%); }\n.-translate-x-full { transform: translateX(-100%); }\n.translate-x-half { transform: translateX(50%); }\n.-translate-x-half { transform: translateX(-50%); }\n.translate-y-full { transform: translateY(100%); }\n.-translate-y-full { transform: translateY(-100%); }\n.translate-y-half { transform: translateY(50%); }\n.-translate-y-half { transform: translateY(-50%); }\n\n/* Transform Origin */\n.origin-center { transform-origin: center; }\n.origin-top { transform-origin: top; }\n.origin-top-right { transform-origin: top right; }\n.origin-right { transform-origin: right; }\n.origin-bottom-right { transform-origin: bottom right; }\n.origin-bottom { transform-origin: bottom; }\n.origin-bottom-left { transform-origin: bottom left; }\n.origin-left { transform-origin: left; }\n.origin-top-left { transform-origin: top left; }\n\n/**\n * Vanduo Framework - Media Utilities\n * Responsive image and media utilities\n */\n\n/* Responsive Images */\n.img-responsive,\n.img-fluid {\n  max-width: 100%;\n  height: auto;\n  display: block;\n}\n\n.img-fluid {\n  width: 100%;\n}\n\n/* Object Fit Utilities */\n.object-fit-contain {\n  object-fit: contain;\n}\n\n.object-fit-cover {\n  object-fit: cover;\n}\n\n.object-fit-fill {\n  object-fit: fill;\n}\n\n.object-fit-none {\n  object-fit: none;\n}\n\n.object-fit-scale-down {\n  object-fit: scale-down;\n}\n\n/* Object Position Utilities */\n.object-position-center {\n  object-position: center;\n}\n\n.object-position-top {\n  object-position: top;\n}\n\n.object-position-bottom {\n  object-position: bottom;\n}\n\n.object-position-left {\n  object-position: left;\n}\n\n.object-position-right {\n  object-position: right;\n}\n\n.object-position-top-left {\n  object-position: top left;\n}\n\n.object-position-top-right {\n  object-position: top right;\n}\n\n.object-position-bottom-left {\n  object-position: bottom left;\n}\n\n.object-position-bottom-right {\n  object-position: bottom right;\n}\n\n/* Aspect Ratio Utilities */\n.aspect-ratio {\n  position: relative;\n  width: 100%;\n  padding-bottom: 56.25%; /* 16:9 default */\n}\n\n.aspect-ratio > * {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n\n.aspect-ratio-1-1 {\n  padding-bottom: 100%; /* 1:1 - Square */\n}\n\n.aspect-ratio-16-9 {\n  padding-bottom: 56.25%; /* 16:9 - Video */\n}\n\n.aspect-ratio-4-3 {\n  padding-bottom: 75%; /* 4:3 - Classic */\n}\n\n.aspect-ratio-21-9 {\n  padding-bottom: 42.857%; /* 21:9 - Ultrawide */\n}\n\n.aspect-ratio-3-2 {\n  padding-bottom: 66.667%; /* 3:2 */\n}\n\n.aspect-ratio-2-1 {\n  padding-bottom: 50%; /* 2:1 */\n}\n\n.aspect-ratio-golden {\n  padding-bottom: 61.8%; /* 1:1.618 - Golden Rectangle landscape */\n}\n\n.aspect-ratio-golden-portrait {\n  padding-bottom: 161.8%; /* 1.618:1 - Golden Rectangle portrait */\n}\n\n/* Image Styles */\n.img-rounded {\n  border-radius: var(--vd-btn-border-radius);\n}\n\n.img-circle {\n  border-radius: 50%;\n}\n\n.img-thumbnail {\n  padding: 0.1875rem; /* 3px - fib */\n  background-color: var(--vd-color-white);\n  border: 1px solid var(--vd-border-color);\n  border-radius: var(--vd-radius-fib-5);\n  max-width: 100%;\n  height: auto;\n}\n\n/* Image Alignment */\n.img-left {\n  float: left;\n  margin-right: 0.8125rem; /* 13px - fib */\n  margin-bottom: 0.8125rem;\n}\n\n.img-right {\n  float: right;\n  margin-left: 0.8125rem; /* 13px - fib */\n  margin-bottom: 0.8125rem;\n}\n\n.img-center {\n  display: block;\n  margin-left: auto;\n  margin-right: auto;\n}\n\n/* Clearfix for floated images */\n.img-clearfix::after {\n  content: '';\n  display: table;\n  clear: both;\n}\n\n\n/**\n * Vanduo Framework - Table Utilities\n * Table styling utilities\n */\n\n:root {\n  /* Table Colors */\n  --vd-table-bg: var(--vd-color-white);\n  --vd-table-border-color: var(--vd-border-color);\n  --vd-table-striped-bg: var(--vd-bg-secondary);\n  --vd-table-hover-bg: rgba(0, 0, 0, 0.075);\n  --vd-table-active-bg: var(--vd-color-primary-alpha-10);\n\n  /* Table Spacing (Fibonacci) */\n  --vd-table-padding-y: 0.5rem;\n  /* 8px  - fib */\n  --vd-table-padding-x: 0.8125rem;\n  /* 13px - fib (13/8 ~ phi) */\n  --vd-table-padding-y-sm: 0.3125rem;\n  /* 5px  - fib */\n  --vd-table-padding-x-sm: 0.5rem;\n  /* 8px  - fib (8/5 ~ phi) */\n}\n\n/* Base Table */\n.vd-table,\n.table {\n  width: 100%;\n  margin-bottom: 1rem;\n  color: var(--vd-text-primary);\n  background-color: var(--vd-table-bg);\n  border-collapse: collapse;\n}\n\n.vd-table th,\n.vd-table td,\n.table th,\n.table td {\n  padding: var(--vd-table-padding-y) var(--vd-table-padding-x);\n  vertical-align: middle;\n  border-top: 1px solid var(--vd-table-border-color);\n}\n\n.vd-table thead th,\n.table thead th {\n  vertical-align: bottom;\n  border-bottom: 2px solid var(--vd-table-border-color);\n  font-weight: var(--vd-font-weight-semibold);\n  color: var(--vd-text-primary);\n}\n\n.vd-table tbody+tbody,\n.table tbody+tbody {\n  border-top: 2px solid var(--vd-table-border-color);\n}\n\n/* Table Variants */\n.vd-table-bordered,\n.table-bordered {\n  border: 1px solid var(--vd-table-border-color);\n}\n\n.vd-table-bordered th,\n.vd-table-bordered td,\n.table-bordered th,\n.table-bordered td {\n  border: 1px solid var(--vd-table-border-color);\n}\n\n.vd-table-bordered thead th,\n.vd-table-bordered thead td,\n.table-bordered thead th,\n.table-bordered thead td {\n  border-bottom-width: 2px;\n}\n\n.vd-table-borderless th,\n.vd-table-borderless td,\n.vd-table-borderless thead th,\n.vd-table-borderless tbody+tbody,\n.table-borderless th,\n.table-borderless td,\n.table-borderless thead th,\n.table-borderless tbody+tbody {\n  border: 0;\n}\n\n.vd-table-striped tbody tr:nth-of-type(odd),\n.table-striped tbody tr:nth-of-type(odd) {\n  background-color: var(--vd-table-striped-bg);\n}\n\n.vd-table-hover tbody tr:hover,\n.table-hover tbody tr:hover {\n  background-color: var(--vd-table-hover-bg);\n}\n\n.vd-table-sm th,\n.vd-table-sm td,\n.table-sm th,\n.table-sm td {\n  padding: var(--vd-table-padding-y-sm) var(--vd-table-padding-x-sm);\n}\n\n/* Table Cell States */\n.vd-table-active,\n.vd-table-active>th,\n.vd-table-active>td,\n.table-active,\n.table-active>th,\n.table-active>td {\n  background-color: var(--vd-table-active-bg);\n}\n\n.vd-table-primary,\n.vd-table-primary>th,\n.vd-table-primary>td,\n.table-primary,\n.table-primary>th,\n.table-primary>td {\n  color: var(--vd-color-white);\n  background-color: var(--vd-color-primary);\n}\n\n.vd-table-secondary,\n.vd-table-secondary>th,\n.vd-table-secondary>td,\n.table-secondary,\n.table-secondary>th,\n.table-secondary>td {\n  color: var(--vd-color-white);\n  background-color: var(--vd-color-secondary);\n}\n\n.vd-table-success,\n.vd-table-success>th,\n.vd-table-success>td,\n.table-success,\n.table-success>th,\n.table-success>td {\n  color: var(--vd-color-white);\n  background-color: var(--vd-color-success);\n}\n\n.vd-table-warning,\n.vd-table-warning>th,\n.vd-table-warning>td,\n.table-warning,\n.table-warning>th,\n.table-warning>td {\n  color: var(--vd-color-gray-900);\n  background-color: var(--vd-color-warning);\n}\n\n.vd-table-error,\n.vd-table-error>th,\n.vd-table-error>td,\n.table-error,\n.table-error>th,\n.table-error>td {\n  color: var(--vd-color-white);\n  background-color: var(--vd-color-error);\n}\n\n.vd-table-info,\n.vd-table-info>th,\n.vd-table-info>td,\n.table-info,\n.table-info>th,\n.table-info>td {\n  color: var(--vd-color-white);\n  background-color: var(--vd-color-info);\n}\n\n/* Table Sections */\n.vd-table-header,\n.table-header,\nthead {\n  background-color: var(--vd-bg-secondary);\n}\n\n.vd-table-header th,\n.table-header th,\nthead th {\n  font-weight: var(--vd-font-weight-semibold);\n  text-transform: uppercase;\n  font-size: var(--vd-font-size-sm);\n  letter-spacing: 0.05em;\n}\n\n.table-body,\ntbody {\n  /* Default styling */\n}\n\n.vd-table-footer,\n.table-footer,\ntfoot {\n  background-color: var(--vd-bg-secondary);\n  font-weight: var(--vd-font-weight-semibold);\n}\n\n/* Responsive Table Wrapper */\n.vd-table-responsive,\n.table-responsive {\n  display: block;\n  width: 100%;\n  overflow-x: auto;\n  -webkit-overflow-scrolling: touch;\n}\n\n.vd-table-responsive>.vd-table,\n.vd-table-responsive>.table,\n.table-responsive>.table {\n  margin-bottom: 0;\n}\n\n/* Responsive Breakpoints */\n@media (max-width: 575.98px) {\n\n  .vd-table-responsive-sm,\n  .table-responsive-sm {\n    display: block;\n    width: 100%;\n    overflow-x: auto;\n    -webkit-overflow-scrolling: touch;\n  }\n\n  .vd-table-responsive-sm>.vd-table,\n  .vd-table-responsive-sm>.table,\n  .table-responsive-sm>.table {\n    margin-bottom: 0;\n  }\n}\n\n@media (max-width: 767.98px) {\n\n  .vd-table-responsive-md,\n  .table-responsive-md {\n    display: block;\n    width: 100%;\n    overflow-x: auto;\n    -webkit-overflow-scrolling: touch;\n  }\n\n  .vd-table-responsive-md>.vd-table,\n  .vd-table-responsive-md>.table,\n  .table-responsive-md>.table {\n    margin-bottom: 0;\n  }\n}\n\n@media (max-width: 991.98px) {\n\n  .vd-table-responsive-lg,\n  .table-responsive-lg {\n    display: block;\n    width: 100%;\n    overflow-x: auto;\n    -webkit-overflow-scrolling: touch;\n  }\n\n  .vd-table-responsive-lg>.vd-table,\n  .vd-table-responsive-lg>.table,\n  .table-responsive-lg>.table {\n    margin-bottom: 0;\n  }\n}\n\n@media (max-width: 1199.98px) {\n\n  .vd-table-responsive-xl,\n  .table-responsive-xl {\n    display: block;\n    width: 100%;\n    overflow-x: auto;\n    -webkit-overflow-scrolling: touch;\n  }\n\n  .vd-table-responsive-xl>.vd-table,\n  .vd-table-responsive-xl>.table,\n  .table-responsive-xl>.table {\n    margin-bottom: 0;\n  }\n}\n\n/* Dark Table Variant */\n.vd-table-dark,\n.table-dark {\n  color: var(--vd-color-white);\n  background-color: var(--vd-color-gray-800);\n}\n\n.vd-table-dark th,\n.vd-table-dark td,\n.vd-table-dark thead th,\n.table-dark th,\n.table-dark td,\n.table-dark thead th {\n  border-color: rgba(255, 255, 255, 0.1);\n}\n\n.vd-table-dark.vd-table-striped tbody tr:nth-of-type(odd),\n.vd-table-dark.table-striped tbody tr:nth-of-type(odd),\n.table-dark.table-striped tbody tr:nth-of-type(odd) {\n  background-color: rgba(255, 255, 255, 0.05);\n}\n\n.vd-table-dark.vd-table-hover tbody tr:hover,\n.vd-table-dark.table-hover tbody tr:hover,\n.table-dark.table-hover tbody tr:hover {\n  background-color: rgba(255, 255, 255, 0.075);\n}\n\n/* Dark Mode Table Overrides */\n[data-theme=\"dark\"] .vd-table,\n[data-theme=\"dark\"] .table {\n  --vd-table-bg: var(--vd-bg-primary);\n  --vd-table-border-color: var(--vd-border-color);\n  --vd-table-striped-bg: var(--vd-bg-secondary);\n  --vd-table-hover-bg: rgba(255, 255, 255, 0.05);\n\n  background-color: var(--vd-table-bg);\n  color: var(--vd-text-primary);\n}\n\n[data-theme=\"dark\"] .vd-table th,\n[data-theme=\"dark\"] .vd-table td,\n[data-theme=\"dark\"] .table th,\n[data-theme=\"dark\"] .table td {\n  border-color: var(--vd-table-border-color);\n}\n\n[data-theme=\"dark\"] .vd-table thead th,\n[data-theme=\"dark\"] .table thead th {\n  border-color: var(--vd-table-border-color);\n  color: var(--vd-text-primary);\n}\n\n[data-theme=\"dark\"] .vd-table-striped tbody tr:nth-of-type(odd),\n[data-theme=\"dark\"] .table-striped tbody tr:nth-of-type(odd) {\n  background-color: var(--vd-table-striped-bg);\n}\n\n[data-theme=\"dark\"] .vd-table thead,\n[data-theme=\"dark\"] thead {\n  background-color: var(--vd-bg-secondary);\n}\n\n/* Dark mode support for system preference */\n@media (prefers-color-scheme: dark) {\n\n  :root:not([data-theme]) .vd-table,\n  :root:not([data-theme]) .table {\n    --vd-table-bg: var(--vd-bg-primary);\n    --vd-table-border-color: var(--vd-border-color);\n    --vd-table-striped-bg: var(--vd-bg-secondary);\n    --vd-table-hover-bg: rgba(255, 255, 255, 0.05);\n\n    background-color: var(--vd-table-bg);\n    color: var(--vd-text-primary);\n  }\n\n  :root:not([data-theme]) .vd-table th,\n  :root:not([data-theme]) .vd-table td,\n  :root:not([data-theme]) .table th,\n  :root:not([data-theme]) .table td {\n    border-color: var(--vd-table-border-color);\n  }\n\n  :root:not([data-theme]) .vd-table thead th,\n  :root:not([data-theme]) .table thead th {\n    border-color: var(--vd-table-border-color);\n    color: var(--vd-text-primary);\n  }\n\n  :root:not([data-theme]) .vd-table-striped tbody tr:nth-of-type(odd),\n  :root:not([data-theme]) .table-striped tbody tr:nth-of-type(odd) {\n    background-color: var(--vd-table-striped-bg);\n  }\n\n  :root:not([data-theme]) .vd-table thead,\n  :root:not([data-theme]) thead {\n    background-color: var(--vd-bg-secondary);\n  }\n}\n/**\n * Vanduo Framework - Color Utility Classes\n *\n * Per-hue background and text color utilities for all Open Color scales.\n * Usage:\n *   Background: .vd-bg-{color}-{shade}  (e.g. .vd-bg-teal-3)\n *   Text:       .vd-text-{color}-{shade} (e.g. .vd-text-indigo-7)\n *\n * Covers 13 hues × 10 shades (0–9) × 2 properties = 260 classes.\n * All values reference existing CSS custom properties from colors.css.\n *\n * @since 1.2.6\n * @license MIT\n */\n\n/* ═══════════════════════════════════════════════════════════════════════════\n * RED\n * ═══════════════════════════════════════════════════════════════════════════ */\n\n.vd-bg-red-0 { background-color: var(--vd-red-0); }\n.vd-bg-red-1 { background-color: var(--vd-red-1); }\n.vd-bg-red-2 { background-color: var(--vd-red-2); }\n.vd-bg-red-3 { background-color: var(--vd-red-3); }\n.vd-bg-red-4 { background-color: var(--vd-red-4); }\n.vd-bg-red-5 { background-color: var(--vd-red-5); }\n.vd-bg-red-6 { background-color: var(--vd-red-6); }\n.vd-bg-red-7 { background-color: var(--vd-red-7); }\n.vd-bg-red-8 { background-color: var(--vd-red-8); }\n.vd-bg-red-9 { background-color: var(--vd-red-9); }\n\n.vd-text-red-0 { color: var(--vd-red-0); }\n.vd-text-red-1 { color: var(--vd-red-1); }\n.vd-text-red-2 { color: var(--vd-red-2); }\n.vd-text-red-3 { color: var(--vd-red-3); }\n.vd-text-red-4 { color: var(--vd-red-4); }\n.vd-text-red-5 { color: var(--vd-red-5); }\n.vd-text-red-6 { color: var(--vd-red-6); }\n.vd-text-red-7 { color: var(--vd-red-7); }\n.vd-text-red-8 { color: var(--vd-red-8); }\n.vd-text-red-9 { color: var(--vd-red-9); }\n\n/* ═══════════════════════════════════════════════════════════════════════════\n * ORANGE\n * ═══════════════════════════════════════════════════════════════════════════ */\n\n.vd-bg-orange-0 { background-color: var(--vd-orange-0); }\n.vd-bg-orange-1 { background-color: var(--vd-orange-1); }\n.vd-bg-orange-2 { background-color: var(--vd-orange-2); }\n.vd-bg-orange-3 { background-color: var(--vd-orange-3); }\n.vd-bg-orange-4 { background-color: var(--vd-orange-4); }\n.vd-bg-orange-5 { background-color: var(--vd-orange-5); }\n.vd-bg-orange-6 { background-color: var(--vd-orange-6); }\n.vd-bg-orange-7 { background-color: var(--vd-orange-7); }\n.vd-bg-orange-8 { background-color: var(--vd-orange-8); }\n.vd-bg-orange-9 { background-color: var(--vd-orange-9); }\n\n.vd-text-orange-0 { color: var(--vd-orange-0); }\n.vd-text-orange-1 { color: var(--vd-orange-1); }\n.vd-text-orange-2 { color: var(--vd-orange-2); }\n.vd-text-orange-3 { color: var(--vd-orange-3); }\n.vd-text-orange-4 { color: var(--vd-orange-4); }\n.vd-text-orange-5 { color: var(--vd-orange-5); }\n.vd-text-orange-6 { color: var(--vd-orange-6); }\n.vd-text-orange-7 { color: var(--vd-orange-7); }\n.vd-text-orange-8 { color: var(--vd-orange-8); }\n.vd-text-orange-9 { color: var(--vd-orange-9); }\n\n/* ═══════════════════════════════════════════════════════════════════════════\n * YELLOW\n * ═══════════════════════════════════════════════════════════════════════════ */\n\n.vd-bg-yellow-0 { background-color: var(--vd-yellow-0); }\n.vd-bg-yellow-1 { background-color: var(--vd-yellow-1); }\n.vd-bg-yellow-2 { background-color: var(--vd-yellow-2); }\n.vd-bg-yellow-3 { background-color: var(--vd-yellow-3); }\n.vd-bg-yellow-4 { background-color: var(--vd-yellow-4); }\n.vd-bg-yellow-5 { background-color: var(--vd-yellow-5); }\n.vd-bg-yellow-6 { background-color: var(--vd-yellow-6); }\n.vd-bg-yellow-7 { background-color: var(--vd-yellow-7); }\n.vd-bg-yellow-8 { background-color: var(--vd-yellow-8); }\n.vd-bg-yellow-9 { background-color: var(--vd-yellow-9); }\n\n.vd-text-yellow-0 { color: var(--vd-yellow-0); }\n.vd-text-yellow-1 { color: var(--vd-yellow-1); }\n.vd-text-yellow-2 { color: var(--vd-yellow-2); }\n.vd-text-yellow-3 { color: var(--vd-yellow-3); }\n.vd-text-yellow-4 { color: var(--vd-yellow-4); }\n.vd-text-yellow-5 { color: var(--vd-yellow-5); }\n.vd-text-yellow-6 { color: var(--vd-yellow-6); }\n.vd-text-yellow-7 { color: var(--vd-yellow-7); }\n.vd-text-yellow-8 { color: var(--vd-yellow-8); }\n.vd-text-yellow-9 { color: var(--vd-yellow-9); }\n\n/* ═══════════════════════════════════════════════════════════════════════════\n * LIME\n * ═══════════════════════════════════════════════════════════════════════════ */\n\n.vd-bg-lime-0 { background-color: var(--vd-lime-0); }\n.vd-bg-lime-1 { background-color: var(--vd-lime-1); }\n.vd-bg-lime-2 { background-color: var(--vd-lime-2); }\n.vd-bg-lime-3 { background-color: var(--vd-lime-3); }\n.vd-bg-lime-4 { background-color: var(--vd-lime-4); }\n.vd-bg-lime-5 { background-color: var(--vd-lime-5); }\n.vd-bg-lime-6 { background-color: var(--vd-lime-6); }\n.vd-bg-lime-7 { background-color: var(--vd-lime-7); }\n.vd-bg-lime-8 { background-color: var(--vd-lime-8); }\n.vd-bg-lime-9 { background-color: var(--vd-lime-9); }\n\n.vd-text-lime-0 { color: var(--vd-lime-0); }\n.vd-text-lime-1 { color: var(--vd-lime-1); }\n.vd-text-lime-2 { color: var(--vd-lime-2); }\n.vd-text-lime-3 { color: var(--vd-lime-3); }\n.vd-text-lime-4 { color: var(--vd-lime-4); }\n.vd-text-lime-5 { color: var(--vd-lime-5); }\n.vd-text-lime-6 { color: var(--vd-lime-6); }\n.vd-text-lime-7 { color: var(--vd-lime-7); }\n.vd-text-lime-8 { color: var(--vd-lime-8); }\n.vd-text-lime-9 { color: var(--vd-lime-9); }\n\n/* ═══════════════════════════════════════════════════════════════════════════\n * GREEN\n * ═══════════════════════════════════════════════════════════════════════════ */\n\n.vd-bg-green-0 { background-color: var(--vd-green-0); }\n.vd-bg-green-1 { background-color: var(--vd-green-1); }\n.vd-bg-green-2 { background-color: var(--vd-green-2); }\n.vd-bg-green-3 { background-color: var(--vd-green-3); }\n.vd-bg-green-4 { background-color: var(--vd-green-4); }\n.vd-bg-green-5 { background-color: var(--vd-green-5); }\n.vd-bg-green-6 { background-color: var(--vd-green-6); }\n.vd-bg-green-7 { background-color: var(--vd-green-7); }\n.vd-bg-green-8 { background-color: var(--vd-green-8); }\n.vd-bg-green-9 { background-color: var(--vd-green-9); }\n\n.vd-text-green-0 { color: var(--vd-green-0); }\n.vd-text-green-1 { color: var(--vd-green-1); }\n.vd-text-green-2 { color: var(--vd-green-2); }\n.vd-text-green-3 { color: var(--vd-green-3); }\n.vd-text-green-4 { color: var(--vd-green-4); }\n.vd-text-green-5 { color: var(--vd-green-5); }\n.vd-text-green-6 { color: var(--vd-green-6); }\n.vd-text-green-7 { color: var(--vd-green-7); }\n.vd-text-green-8 { color: var(--vd-green-8); }\n.vd-text-green-9 { color: var(--vd-green-9); }\n\n/* ═══════════════════════════════════════════════════════════════════════════\n * TEAL\n * ═══════════════════════════════════════════════════════════════════════════ */\n\n.vd-bg-teal-0 { background-color: var(--vd-teal-0); }\n.vd-bg-teal-1 { background-color: var(--vd-teal-1); }\n.vd-bg-teal-2 { background-color: var(--vd-teal-2); }\n.vd-bg-teal-3 { background-color: var(--vd-teal-3); }\n.vd-bg-teal-4 { background-color: var(--vd-teal-4); }\n.vd-bg-teal-5 { background-color: var(--vd-teal-5); }\n.vd-bg-teal-6 { background-color: var(--vd-teal-6); }\n.vd-bg-teal-7 { background-color: var(--vd-teal-7); }\n.vd-bg-teal-8 { background-color: var(--vd-teal-8); }\n.vd-bg-teal-9 { background-color: var(--vd-teal-9); }\n\n.vd-text-teal-0 { color: var(--vd-teal-0); }\n.vd-text-teal-1 { color: var(--vd-teal-1); }\n.vd-text-teal-2 { color: var(--vd-teal-2); }\n.vd-text-teal-3 { color: var(--vd-teal-3); }\n.vd-text-teal-4 { color: var(--vd-teal-4); }\n.vd-text-teal-5 { color: var(--vd-teal-5); }\n.vd-text-teal-6 { color: var(--vd-teal-6); }\n.vd-text-teal-7 { color: var(--vd-teal-7); }\n.vd-text-teal-8 { color: var(--vd-teal-8); }\n.vd-text-teal-9 { color: var(--vd-teal-9); }\n\n/* ═══════════════════════════════════════════════════════════════════════════\n * CYAN\n * ═══════════════════════════════════════════════════════════════════════════ */\n\n.vd-bg-cyan-0 { background-color: var(--vd-cyan-0); }\n.vd-bg-cyan-1 { background-color: var(--vd-cyan-1); }\n.vd-bg-cyan-2 { background-color: var(--vd-cyan-2); }\n.vd-bg-cyan-3 { background-color: var(--vd-cyan-3); }\n.vd-bg-cyan-4 { background-color: var(--vd-cyan-4); }\n.vd-bg-cyan-5 { background-color: var(--vd-cyan-5); }\n.vd-bg-cyan-6 { background-color: var(--vd-cyan-6); }\n.vd-bg-cyan-7 { background-color: var(--vd-cyan-7); }\n.vd-bg-cyan-8 { background-color: var(--vd-cyan-8); }\n.vd-bg-cyan-9 { background-color: var(--vd-cyan-9); }\n\n.vd-text-cyan-0 { color: var(--vd-cyan-0); }\n.vd-text-cyan-1 { color: var(--vd-cyan-1); }\n.vd-text-cyan-2 { color: var(--vd-cyan-2); }\n.vd-text-cyan-3 { color: var(--vd-cyan-3); }\n.vd-text-cyan-4 { color: var(--vd-cyan-4); }\n.vd-text-cyan-5 { color: var(--vd-cyan-5); }\n.vd-text-cyan-6 { color: var(--vd-cyan-6); }\n.vd-text-cyan-7 { color: var(--vd-cyan-7); }\n.vd-text-cyan-8 { color: var(--vd-cyan-8); }\n.vd-text-cyan-9 { color: var(--vd-cyan-9); }\n\n/* ═══════════════════════════════════════════════════════════════════════════\n * BLUE\n * ═══════════════════════════════════════════════════════════════════════════ */\n\n.vd-bg-blue-0 { background-color: var(--vd-blue-0); }\n.vd-bg-blue-1 { background-color: var(--vd-blue-1); }\n.vd-bg-blue-2 { background-color: var(--vd-blue-2); }\n.vd-bg-blue-3 { background-color: var(--vd-blue-3); }\n.vd-bg-blue-4 { background-color: var(--vd-blue-4); }\n.vd-bg-blue-5 { background-color: var(--vd-blue-5); }\n.vd-bg-blue-6 { background-color: var(--vd-blue-6); }\n.vd-bg-blue-7 { background-color: var(--vd-blue-7); }\n.vd-bg-blue-8 { background-color: var(--vd-blue-8); }\n.vd-bg-blue-9 { background-color: var(--vd-blue-9); }\n\n.vd-text-blue-0 { color: var(--vd-blue-0); }\n.vd-text-blue-1 { color: var(--vd-blue-1); }\n.vd-text-blue-2 { color: var(--vd-blue-2); }\n.vd-text-blue-3 { color: var(--vd-blue-3); }\n.vd-text-blue-4 { color: var(--vd-blue-4); }\n.vd-text-blue-5 { color: var(--vd-blue-5); }\n.vd-text-blue-6 { color: var(--vd-blue-6); }\n.vd-text-blue-7 { color: var(--vd-blue-7); }\n.vd-text-blue-8 { color: var(--vd-blue-8); }\n.vd-text-blue-9 { color: var(--vd-blue-9); }\n\n/* ═══════════════════════════════════════════════════════════════════════════\n * INDIGO\n * ═══════════════════════════════════════════════════════════════════════════ */\n\n.vd-bg-indigo-0 { background-color: var(--vd-indigo-0); }\n.vd-bg-indigo-1 { background-color: var(--vd-indigo-1); }\n.vd-bg-indigo-2 { background-color: var(--vd-indigo-2); }\n.vd-bg-indigo-3 { background-color: var(--vd-indigo-3); }\n.vd-bg-indigo-4 { background-color: var(--vd-indigo-4); }\n.vd-bg-indigo-5 { background-color: var(--vd-indigo-5); }\n.vd-bg-indigo-6 { background-color: var(--vd-indigo-6); }\n.vd-bg-indigo-7 { background-color: var(--vd-indigo-7); }\n.vd-bg-indigo-8 { background-color: var(--vd-indigo-8); }\n.vd-bg-indigo-9 { background-color: var(--vd-indigo-9); }\n\n.vd-text-indigo-0 { color: var(--vd-indigo-0); }\n.vd-text-indigo-1 { color: var(--vd-indigo-1); }\n.vd-text-indigo-2 { color: var(--vd-indigo-2); }\n.vd-text-indigo-3 { color: var(--vd-indigo-3); }\n.vd-text-indigo-4 { color: var(--vd-indigo-4); }\n.vd-text-indigo-5 { color: var(--vd-indigo-5); }\n.vd-text-indigo-6 { color: var(--vd-indigo-6); }\n.vd-text-indigo-7 { color: var(--vd-indigo-7); }\n.vd-text-indigo-8 { color: var(--vd-indigo-8); }\n.vd-text-indigo-9 { color: var(--vd-indigo-9); }\n\n/* ═══════════════════════════════════════════════════════════════════════════\n * VIOLET\n * ═══════════════════════════════════════════════════════════════════════════ */\n\n.vd-bg-violet-0 { background-color: var(--vd-violet-0); }\n.vd-bg-violet-1 { background-color: var(--vd-violet-1); }\n.vd-bg-violet-2 { background-color: var(--vd-violet-2); }\n.vd-bg-violet-3 { background-color: var(--vd-violet-3); }\n.vd-bg-violet-4 { background-color: var(--vd-violet-4); }\n.vd-bg-violet-5 { background-color: var(--vd-violet-5); }\n.vd-bg-violet-6 { background-color: var(--vd-violet-6); }\n.vd-bg-violet-7 { background-color: var(--vd-violet-7); }\n.vd-bg-violet-8 { background-color: var(--vd-violet-8); }\n.vd-bg-violet-9 { background-color: var(--vd-violet-9); }\n\n.vd-text-violet-0 { color: var(--vd-violet-0); }\n.vd-text-violet-1 { color: var(--vd-violet-1); }\n.vd-text-violet-2 { color: var(--vd-violet-2); }\n.vd-text-violet-3 { color: var(--vd-violet-3); }\n.vd-text-violet-4 { color: var(--vd-violet-4); }\n.vd-text-violet-5 { color: var(--vd-violet-5); }\n.vd-text-violet-6 { color: var(--vd-violet-6); }\n.vd-text-violet-7 { color: var(--vd-violet-7); }\n.vd-text-violet-8 { color: var(--vd-violet-8); }\n.vd-text-violet-9 { color: var(--vd-violet-9); }\n\n/* ═══════════════════════════════════════════════════════════════════════════\n * GRAPE\n * ═══════════════════════════════════════════════════════════════════════════ */\n\n.vd-bg-grape-0 { background-color: var(--vd-grape-0); }\n.vd-bg-grape-1 { background-color: var(--vd-grape-1); }\n.vd-bg-grape-2 { background-color: var(--vd-grape-2); }\n.vd-bg-grape-3 { background-color: var(--vd-grape-3); }\n.vd-bg-grape-4 { background-color: var(--vd-grape-4); }\n.vd-bg-grape-5 { background-color: var(--vd-grape-5); }\n.vd-bg-grape-6 { background-color: var(--vd-grape-6); }\n.vd-bg-grape-7 { background-color: var(--vd-grape-7); }\n.vd-bg-grape-8 { background-color: var(--vd-grape-8); }\n.vd-bg-grape-9 { background-color: var(--vd-grape-9); }\n\n.vd-text-grape-0 { color: var(--vd-grape-0); }\n.vd-text-grape-1 { color: var(--vd-grape-1); }\n.vd-text-grape-2 { color: var(--vd-grape-2); }\n.vd-text-grape-3 { color: var(--vd-grape-3); }\n.vd-text-grape-4 { color: var(--vd-grape-4); }\n.vd-text-grape-5 { color: var(--vd-grape-5); }\n.vd-text-grape-6 { color: var(--vd-grape-6); }\n.vd-text-grape-7 { color: var(--vd-grape-7); }\n.vd-text-grape-8 { color: var(--vd-grape-8); }\n.vd-text-grape-9 { color: var(--vd-grape-9); }\n\n/* ═══════════════════════════════════════════════════════════════════════════\n * PINK\n * ═══════════════════════════════════════════════════════════════════════════ */\n\n.vd-bg-pink-0 { background-color: var(--vd-pink-0); }\n.vd-bg-pink-1 { background-color: var(--vd-pink-1); }\n.vd-bg-pink-2 { background-color: var(--vd-pink-2); }\n.vd-bg-pink-3 { background-color: var(--vd-pink-3); }\n.vd-bg-pink-4 { background-color: var(--vd-pink-4); }\n.vd-bg-pink-5 { background-color: var(--vd-pink-5); }\n.vd-bg-pink-6 { background-color: var(--vd-pink-6); }\n.vd-bg-pink-7 { background-color: var(--vd-pink-7); }\n.vd-bg-pink-8 { background-color: var(--vd-pink-8); }\n.vd-bg-pink-9 { background-color: var(--vd-pink-9); }\n\n.vd-text-pink-0 { color: var(--vd-pink-0); }\n.vd-text-pink-1 { color: var(--vd-pink-1); }\n.vd-text-pink-2 { color: var(--vd-pink-2); }\n.vd-text-pink-3 { color: var(--vd-pink-3); }\n.vd-text-pink-4 { color: var(--vd-pink-4); }\n.vd-text-pink-5 { color: var(--vd-pink-5); }\n.vd-text-pink-6 { color: var(--vd-pink-6); }\n.vd-text-pink-7 { color: var(--vd-pink-7); }\n.vd-text-pink-8 { color: var(--vd-pink-8); }\n.vd-text-pink-9 { color: var(--vd-pink-9); }\n\n/* ═══════════════════════════════════════════════════════════════════════════\n * GRAY\n * ═══════════════════════════════════════════════════════════════════════════ */\n\n.vd-bg-gray-0 { background-color: var(--vd-gray-0); }\n.vd-bg-gray-1 { background-color: var(--vd-gray-1); }\n.vd-bg-gray-2 { background-color: var(--vd-gray-2); }\n.vd-bg-gray-3 { background-color: var(--vd-gray-3); }\n.vd-bg-gray-4 { background-color: var(--vd-gray-4); }\n.vd-bg-gray-5 { background-color: var(--vd-gray-5); }\n.vd-bg-gray-6 { background-color: var(--vd-gray-6); }\n.vd-bg-gray-7 { background-color: var(--vd-gray-7); }\n.vd-bg-gray-8 { background-color: var(--vd-gray-8); }\n.vd-bg-gray-9 { background-color: var(--vd-gray-9); }\n\n.vd-text-gray-0 { color: var(--vd-gray-0); }\n.vd-text-gray-1 { color: var(--vd-gray-1); }\n.vd-text-gray-2 { color: var(--vd-gray-2); }\n.vd-text-gray-3 { color: var(--vd-gray-3); }\n.vd-text-gray-4 { color: var(--vd-gray-4); }\n.vd-text-gray-5 { color: var(--vd-gray-5); }\n.vd-text-gray-6 { color: var(--vd-gray-6); }\n.vd-text-gray-7 { color: var(--vd-gray-7); }\n.vd-text-gray-8 { color: var(--vd-gray-8); }\n.vd-text-gray-9 { color: var(--vd-gray-9); }\n\n\n/* Layer 4: Components */\n/**\n * Vanduo Framework - Buttons\n * Button component with variants, sizes, and states\n */\n\n:root {\n  /* Button Padding (Fibonacci pairs: x/y ratio ~ phi)\n   * sm:  13px/8px  = 1.625 ~ phi\n   * base: 21px/13px = 1.615 ~ phi\n   * lg:  34px/21px = 1.619 ~ phi */\n  --vd-btn-padding-x-sm: 0.8125rem;\n  /* 13px - fib */\n  --vd-btn-padding-y-sm: 0.5rem;\n  /* 8px  - fib */\n  --vd-btn-padding-x: 1.3125rem;\n  /* 21px - fib */\n  --vd-btn-padding-y: 0.8125rem;\n  /* 13px - fib */\n  --vd-btn-padding-x-lg: 2.125rem;\n  /* 34px - fib */\n  --vd-btn-padding-y-lg: 1.3125rem;\n  /* 21px - fib */\n\n  /* Button Font Sizes */\n  --vd-btn-font-size-sm: var(--vd-font-size-sm);\n  --vd-btn-font-size: var(--vd-font-size-base);\n  --vd-btn-font-size-lg: var(--vd-font-size-lg);\n\n  /* Button Border Radius (Fibonacci) */\n  --vd-btn-border-radius: var(--vd-radius-fib-5);\n  /* 5px */\n  --vd-btn-border-radius-sm: var(--vd-radius-fib-3);\n  /* 3px */\n  --vd-btn-border-radius-lg: var(--vd-radius-fib-8);\n  /* 8px */\n\n  /* Button Transitions */\n  --vd-btn-transition: all 0.2s ease-in-out;\n}\n\n/* Base Button */\n.vd-btn {\n  display: inline-block;\n  padding: var(--vd-btn-padding-y) var(--vd-btn-padding-x);\n  font-family: var(--vd-font-family-sans);\n  font-size: var(--vd-btn-font-size);\n  font-weight: var(--vd-font-weight-medium);\n  line-height: var(--vd-line-height-normal);\n  text-align: center;\n  text-decoration: none;\n  vertical-align: middle;\n  cursor: pointer;\n  user-select: none;\n  border: 1px solid transparent;\n  border-radius: var(--vd-btn-border-radius);\n  transition: var(--vd-btn-transition);\n  background-color: transparent;\n  color: var(--vd-text-primary);\n  margin-bottom: 0.5rem;\n}\n\n/* Button spacing when adjacent */\n.vd-btn+.vd-btn {\n  margin-left: 0.5rem;\n}\n\n/* Reset margin for vertical groups */\n.vd-btn-group-vertical>.vd-btn+.vd-btn {\n  margin-left: 0;\n  margin-top: -1px;\n}\n\n/* Reset bottom margin in flush contexts */\n.vd-modal-footer .vd-btn,\n.vd-card-footer .vd-btn {\n  margin-bottom: 0;\n}\n\n.vd-btn:focus-visible {\n  outline: 2px solid var(--vd-color-primary);\n  outline-offset: 2px;\n}\n\n.vd-btn:disabled,\n.vd-btn.disabled,\n.vd-btn.is-disabled {\n  opacity: 0.6;\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n/* Button Variants - Primary */\n.vd-btn-primary {\n  background-color: var(--vd-color-primary);\n  border-color: var(--vd-color-primary);\n  color: var(--vd-color-white);\n}\n\n.vd-btn-primary:hover:not(:disabled):not(.disabled):not(.is-disabled) {\n  background-color: var(--vd-color-primary-dark);\n  border-color: var(--vd-color-primary-dark);\n  color: var(--vd-color-white);\n}\n\n.vd-btn-primary:active:not(:disabled):not(.disabled):not(.is-disabled) {\n  background-color: var(--vd-color-primary-dark);\n  border-color: var(--vd-color-primary-dark);\n  transform: translateY(1px);\n}\n\n/* Button Variants - Secondary */\n.vd-btn-secondary {\n  background-color: var(--vd-color-secondary);\n  border-color: var(--vd-color-secondary);\n  color: var(--vd-color-white);\n}\n\n.vd-btn-secondary:hover:not(:disabled):not(.disabled):not(.is-disabled) {\n  background-color: var(--vd-color-secondary-dark);\n  border-color: var(--vd-color-secondary-dark);\n  color: var(--vd-color-white);\n}\n\n.vd-btn-secondary:active:not(:disabled):not(.disabled):not(.is-disabled) {\n  background-color: var(--vd-color-secondary-dark);\n  border-color: var(--vd-color-secondary-dark);\n  transform: translateY(1px);\n}\n\n/* Button Variants - Success */\n.vd-btn-success {\n  background-color: var(--vd-color-success);\n  border-color: var(--vd-color-success);\n  color: var(--vd-color-white);\n}\n\n.vd-btn-success:hover:not(:disabled):not(.disabled):not(.is-disabled) {\n  background-color: var(--vd-color-success-dark);\n  border-color: var(--vd-color-success-dark);\n  color: var(--vd-color-white);\n}\n\n.vd-btn-success:active:not(:disabled):not(.disabled):not(.is-disabled) {\n  background-color: var(--vd-color-success-dark);\n  border-color: var(--vd-color-success-dark);\n  transform: translateY(1px);\n}\n\n/* Button Variants - Warning */\n.vd-btn-warning {\n  background-color: var(--vd-color-warning);\n  border-color: var(--vd-color-warning);\n  color: var(--vd-color-black);\n}\n\n.vd-btn-warning:hover:not(:disabled):not(.disabled):not(.is-disabled) {\n  background-color: var(--vd-color-warning-dark);\n  border-color: var(--vd-color-warning-dark);\n  color: var(--vd-color-black);\n}\n\n.vd-btn-warning:active:not(:disabled):not(.disabled):not(.is-disabled) {\n  background-color: var(--vd-color-warning-dark);\n  border-color: var(--vd-color-warning-dark);\n  transform: translateY(1px);\n}\n\n/* Button Variants - Error */\n.vd-btn-error {\n  background-color: var(--vd-color-error);\n  border-color: var(--vd-color-error);\n  color: var(--vd-color-white);\n}\n\n.vd-btn-error:hover:not(:disabled):not(.disabled):not(.is-disabled) {\n  background-color: var(--vd-color-error-dark);\n  border-color: var(--vd-color-error-dark);\n  color: var(--vd-color-white);\n}\n\n.vd-btn-error:active:not(:disabled):not(.disabled):not(.is-disabled) {\n  background-color: var(--vd-color-error-dark);\n  border-color: var(--vd-color-error-dark);\n  transform: translateY(1px);\n}\n\n/* Button Variants - Info */\n.vd-btn-info {\n  background-color: var(--vd-color-info);\n  border-color: var(--vd-color-info);\n  color: var(--vd-color-white);\n}\n\n.vd-btn-info:hover:not(:disabled):not(.disabled):not(.is-disabled) {\n  background-color: var(--vd-color-info-dark);\n  border-color: var(--vd-color-info-dark);\n  color: var(--vd-color-white);\n}\n\n.vd-btn-info:active:not(:disabled):not(.disabled):not(.is-disabled) {\n  background-color: var(--vd-color-info-dark);\n  border-color: var(--vd-color-info-dark);\n  transform: translateY(1px);\n}\n\n/* Button Variants - Outline */\n.vd-btn-outline {\n  background-color: transparent;\n  border-color: var(--vd-color-primary);\n  color: var(--vd-color-primary);\n}\n\n.vd-btn-outline:hover:not(:disabled):not(.disabled):not(.is-disabled) {\n  background-color: var(--vd-color-primary);\n  border-color: var(--vd-color-primary);\n  color: var(--vd-color-white);\n}\n\n.vd-btn-outline-primary {\n  background-color: transparent;\n  border-color: var(--vd-color-primary);\n  color: var(--vd-color-primary);\n}\n\n.vd-btn-outline-primary:hover:not(:disabled):not(.disabled):not(.is-disabled) {\n  background-color: var(--vd-color-primary);\n  border-color: var(--vd-color-primary);\n  color: var(--vd-color-white);\n}\n\n.vd-btn-outline-secondary {\n  background-color: transparent;\n  border-color: var(--vd-color-secondary);\n  color: var(--vd-color-secondary);\n}\n\n.vd-btn-outline-secondary:hover:not(:disabled):not(.disabled):not(.is-disabled) {\n  background-color: var(--vd-color-secondary);\n  border-color: var(--vd-color-secondary);\n  color: var(--vd-color-white);\n}\n\n.vd-btn-outline-success {\n  background-color: transparent;\n  border-color: var(--vd-color-success);\n  color: var(--vd-color-success);\n}\n\n.vd-btn-outline-success:hover:not(:disabled):not(.disabled):not(.is-disabled) {\n  background-color: var(--vd-color-success);\n  border-color: var(--vd-color-success);\n  color: var(--vd-color-white);\n}\n\n.vd-btn-outline-warning {\n  background-color: transparent;\n  border-color: var(--vd-color-warning);\n  color: var(--vd-color-warning);\n}\n\n.vd-btn-outline-warning:hover:not(:disabled):not(.disabled):not(.is-disabled) {\n  background-color: var(--vd-color-warning);\n  border-color: var(--vd-color-warning);\n  color: var(--vd-color-black);\n}\n\n.vd-btn-outline-error {\n  background-color: transparent;\n  border-color: var(--vd-color-error);\n  color: var(--vd-color-error);\n}\n\n.vd-btn-outline-error:hover:not(:disabled):not(.disabled):not(.is-disabled) {\n  background-color: var(--vd-color-error);\n  border-color: var(--vd-color-error);\n  color: var(--vd-color-white);\n}\n\n.vd-btn-outline-info {\n  background-color: transparent;\n  border-color: var(--vd-color-info);\n  color: var(--vd-color-info);\n}\n\n.vd-btn-outline-info:hover:not(:disabled):not(.disabled):not(.is-disabled) {\n  background-color: var(--vd-color-info);\n  border-color: var(--vd-color-info);\n  color: var(--vd-color-white);\n}\n\n/* Button Variants - Ghost/Text */\n.vd-btn-ghost {\n  background-color: transparent;\n  border-color: transparent;\n  color: var(--vd-color-primary);\n}\n\n.vd-btn-ghost:hover:not(:disabled):not(.disabled):not(.is-disabled) {\n  background-color: var(--vd-color-primary-alpha-10);\n  color: var(--vd-color-primary-dark);\n}\n\n.vd-btn-ghost:active:not(:disabled):not(.disabled):not(.is-disabled) {\n  background-color: var(--vd-color-primary-alpha-20);\n  transform: translateY(1px);\n}\n\n/* Ghost Button Variants */\n.vd-btn-ghost-primary {\n  background-color: transparent;\n  border-color: transparent;\n  color: var(--vd-color-primary);\n}\n\n.vd-btn-ghost-primary:hover:not(:disabled):not(.disabled):not(.is-disabled) {\n  background-color: var(--vd-color-primary-alpha-10);\n  color: var(--vd-color-primary-dark);\n}\n\n.vd-btn-ghost-primary:active:not(:disabled):not(.disabled):not(.is-disabled) {\n  background-color: var(--vd-color-primary-alpha-20);\n  color: var(--vd-color-primary-active);\n}\n\n.vd-btn-ghost-secondary {\n  background-color: transparent;\n  border-color: transparent;\n  color: var(--vd-color-secondary);\n}\n\n.vd-btn-ghost-secondary:hover:not(:disabled):not(.disabled):not(.is-disabled) {\n  background-color: var(--vd-color-secondary-alpha-10);\n  color: var(--vd-color-secondary-dark);\n}\n\n.vd-btn-ghost-secondary:active:not(:disabled):not(.disabled):not(.is-disabled) {\n  background-color: var(--vd-color-secondary-alpha-20);\n  color: var(--vd-color-secondary-active);\n}\n\n.vd-btn-ghost-success {\n  background-color: transparent;\n  border-color: transparent;\n  color: var(--vd-color-success);\n}\n\n.vd-btn-ghost-success:hover:not(:disabled):not(.disabled):not(.is-disabled) {\n  background-color: var(--vd-color-success-alpha-10);\n  color: var(--vd-color-success-dark);\n}\n\n.vd-btn-ghost-success:active:not(:disabled):not(.disabled):not(.is-disabled) {\n  background-color: var(--vd-color-success-alpha-20);\n  color: var(--vd-color-success-active);\n}\n\n.vd-btn-ghost-warning {\n  background-color: transparent;\n  border-color: transparent;\n  color: var(--vd-color-warning);\n}\n\n.vd-btn-ghost-warning:hover:not(:disabled):not(.disabled):not(.is-disabled) {\n  background-color: var(--vd-color-warning-alpha-10);\n  color: var(--vd-color-warning-dark);\n}\n\n.vd-btn-ghost-warning:active:not(:disabled):not(.disabled):not(.is-disabled) {\n  background-color: var(--vd-color-warning-alpha-20);\n  color: var(--vd-color-warning-active);\n}\n\n.vd-btn-ghost-error {\n  background-color: transparent;\n  border-color: transparent;\n  color: var(--vd-color-error);\n}\n\n.vd-btn-ghost-error:hover:not(:disabled):not(.disabled):not(.is-disabled) {\n  background-color: var(--vd-color-error-alpha-10);\n  color: var(--vd-color-error-dark);\n}\n\n.vd-btn-ghost-error:active:not(:disabled):not(.disabled):not(.is-disabled) {\n  background-color: var(--vd-color-error-alpha-20);\n  color: var(--vd-color-error-active);\n}\n\n.vd-btn-ghost-info {\n  background-color: transparent;\n  border-color: transparent;\n  color: var(--vd-color-info);\n}\n\n.vd-btn-ghost-info:hover:not(:disabled):not(.disabled):not(.is-disabled) {\n  background-color: var(--vd-color-info-alpha-10);\n  color: var(--vd-color-info-dark);\n}\n\n.vd-btn-ghost-info:active:not(:disabled):not(.disabled):not(.is-disabled) {\n  background-color: var(--vd-color-info-alpha-20);\n  color: var(--vd-color-info-active);\n}\n\n/* Ghost Button with Border (Subtle) */\n.vd-btn-ghost-subtle {\n  background-color: transparent;\n  border: 1px solid var(--vd-border-color);\n  color: var(--vd-text-secondary);\n}\n\n.vd-btn-ghost-subtle:hover:not(:disabled):not(.disabled):not(.is-disabled) {\n  background-color: var(--vd-gray-0);\n  border-color: var(--vd-gray-4);\n  color: var(--vd-text-primary);\n}\n\n.vd-btn-ghost-subtle:active:not(:disabled):not(.disabled):not(.is-disabled) {\n  background-color: var(--vd-gray-1);\n  border-color: var(--vd-gray-5);\n}\n\n/* Button Sizes - Small */\n.vd-btn-sm {\n  padding: var(--vd-btn-padding-y-sm) var(--vd-btn-padding-x-sm);\n  font-size: var(--vd-btn-font-size-sm);\n  border-radius: var(--vd-btn-border-radius-sm);\n}\n\n/* Button Sizes - Large */\n.vd-btn-lg {\n  padding: var(--vd-btn-padding-y-lg) var(--vd-btn-padding-x-lg);\n  font-size: var(--vd-btn-font-size-lg);\n  border-radius: var(--vd-btn-border-radius-lg);\n}\n\n/* Full Width Button */\n.vd-btn-block,\n.vd-btn-full {\n  display: block;\n  width: 100%;\n}\n\n/* Icon Button Support (Fibonacci squares) */\n.vd-btn-icon {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  padding: var(--vd-btn-padding-y);\n  width: auto;\n  min-width: 2.125rem;\n  /* 34px - fib */\n  height: 2.125rem;\n  /* 34px - fib */\n}\n\n.vd-btn-icon.vd-btn-sm {\n  min-width: 2.125rem;\n  /* 34px - fib */\n  height: 2.125rem;\n  /* 34px - fib */\n  padding: var(--vd-btn-padding-y-sm);\n}\n\n.vd-btn-icon.vd-btn-lg {\n  min-width: 3.4375rem;\n  /* 55px - fib */\n  height: 3.4375rem;\n  /* 55px - fib */\n  padding: var(--vd-btn-padding-y-lg);\n}\n\n/* Button with Icon Spacing */\n.vd-btn>*+* {\n  margin-left: 0.5rem;\n}\n\n.vd-btn>*:first-child {\n  margin-left: 0;\n}\n\n/* Link as Button */\na.vd-btn {\n  text-decoration: none;\n}\n\na.vd-btn:hover {\n  text-decoration: none;\n}\n\n/* Loading State */\n.vd-btn.is-loading {\n  position: relative;\n  color: transparent;\n  pointer-events: none;\n}\n\n.vd-btn.is-loading::after {\n  content: '';\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  width: 1em;\n  height: 1em;\n  margin: -0.5em 0 0 -0.5em;\n  border: 2px solid currentColor;\n  border-right-color: transparent;\n  border-radius: 50%;\n  animation: btn-spinner 0.6s linear infinite;\n}\n\n.vd-btn-primary.is-loading::after,\n.vd-btn-secondary.is-loading::after,\n.vd-btn-success.is-loading::after,\n.vd-btn-error.is-loading::after,\n.vd-btn-info.is-loading::after {\n  border-color: var(--vd-color-white);\n  border-right-color: transparent;\n}\n\n.vd-btn-warning.is-loading::after {\n  border-color: var(--vd-color-black);\n  border-right-color: transparent;\n}\n\n@keyframes btn-spinner {\n  to {\n    transform: rotate(360deg);\n  }\n}\n/**\n * Vanduo Framework - Forms\n * Form components: inputs, textareas, labels, and validation\n */\n\n/* stylelint-disable-next-line no-duplicate-selectors -- control-specific tokens stay grouped near their rules. */\n:root {\n  /* Input Padding (Fibonacci pairs: x/y ratio ~ phi)\n   * sm:  8px/5px  = 1.6 ~ phi\n   * base: 13px/8px = 1.625 ~ phi\n   * lg:  21px/13px = 1.615 ~ phi */\n  --vd-input-padding-x-sm: 0.5rem;\n  /* 8px  - fib */\n  --vd-input-padding-y-sm: 0.3125rem;\n  /* 5px  - fib */\n  --vd-input-padding-x: 0.8125rem;\n  /* 13px - fib */\n  --vd-input-padding-y: 0.5rem;\n  /* 8px  - fib */\n  --vd-input-padding-x-lg: 1.3125rem;\n  /* 21px - fib */\n  --vd-input-padding-y-lg: 0.8125rem;\n  /* 13px - fib */\n\n  /* Input Font Sizes */\n  --vd-input-font-size-sm: var(--vd-font-size-sm);\n  --vd-input-font-size: var(--vd-font-size-base);\n  --vd-input-font-size-lg: var(--vd-font-size-lg);\n\n  /* Input Border */\n  --vd-input-border-width: 1px;\n  --vd-input-border-color: var(--vd-border-color);\n  --vd-input-border-radius: var(--vd-btn-border-radius);\n  --vd-input-border-radius-sm: var(--vd-btn-border-radius-sm);\n  --vd-input-border-radius-lg: var(--vd-btn-border-radius-lg);\n\n  /* Input Background */\n  --vd-input-bg: var(--vd-color-white);\n  --vd-input-bg-disabled: var(--vd-bg-secondary);\n\n  /* Input Focus */\n  --vd-input-focus-border-color: var(--vd-color-primary);\n  --vd-input-focus-box-shadow: 0 0 0 3px var(--vd-color-primary-alpha-20);\n\n  /* Input Transitions */\n  --vd-input-transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;\n}\n\n/* Dark Theme Overrides */\n[data-theme=\"dark\"] {\n  --vd-input-bg: var(--vd-bg-secondary);\n  --vd-input-bg-disabled: var(--vd-bg-tertiary);\n}\n\n@media (prefers-color-scheme: dark) {\n  :root:not([data-theme]) {\n    --vd-input-bg: var(--vd-bg-secondary);\n    --vd-input-bg-disabled: var(--vd-bg-tertiary);\n  }\n}\n\n/* Base Input\n * The main bundle intentionally styles both `.vd-*` controls and native form\n * elements for full-page framework usage. Keep new raw element selectors in\n * reset/base layers; component-specific styling should prefer `.vd-*` hooks.\n */\n.vd-input,\ninput[type=\"text\"],\ninput[type=\"email\"],\ninput[type=\"password\"],\ninput[type=\"number\"],\ninput[type=\"tel\"],\ninput[type=\"url\"],\ninput[type=\"search\"],\ninput[type=\"date\"],\ninput[type=\"time\"],\ninput[type=\"datetime-local\"] {\n  display: block;\n  width: 100%;\n  padding: var(--vd-input-padding-y) var(--vd-input-padding-x);\n  font-family: var(--vd-font-family-sans);\n  font-size: var(--vd-input-font-size);\n  font-weight: var(--vd-font-weight-normal);\n  line-height: var(--vd-line-height-normal);\n  color: var(--vd-text-primary);\n  background-color: var(--vd-input-bg);\n  border: var(--vd-input-border-width) solid var(--vd-input-border-color);\n  border-radius: var(--vd-input-border-radius);\n  transition: var(--vd-input-transition);\n  appearance: none;\n}\n\n.vd-input:focus,\ninput[type=\"text\"]:focus,\ninput[type=\"email\"]:focus,\ninput[type=\"password\"]:focus,\ninput[type=\"number\"]:focus,\ninput[type=\"tel\"]:focus,\ninput[type=\"url\"]:focus,\ninput[type=\"search\"]:focus,\ninput[type=\"date\"]:focus,\ninput[type=\"time\"]:focus,\ninput[type=\"datetime-local\"]:focus {\n  outline: 0;\n  border-color: var(--vd-input-focus-border-color);\n  box-shadow: var(--vd-input-focus-box-shadow);\n}\n\n.vd-input::placeholder,\ninput::placeholder {\n  color: var(--vd-text-muted);\n  opacity: 1;\n}\n\n.vd-input:disabled,\ninput:disabled,\n.vd-input.disabled,\ninput.disabled {\n  background-color: var(--vd-input-bg-disabled);\n  opacity: 0.6;\n  cursor: not-allowed;\n}\n\n/* Textarea */\n.textarea,\ntextarea {\n  display: block;\n  width: 100%;\n  padding: var(--vd-input-padding-y) var(--vd-input-padding-x);\n  font-family: var(--vd-font-family-sans);\n  font-size: var(--vd-input-font-size);\n  font-weight: var(--vd-font-weight-normal);\n  line-height: var(--vd-line-height-normal);\n  color: var(--vd-text-primary);\n  background-color: var(--vd-input-bg);\n  border: var(--vd-input-border-width) solid var(--vd-input-border-color);\n  border-radius: var(--vd-input-border-radius);\n  transition: var(--vd-input-transition);\n  resize: vertical;\n  min-height: 100px;\n}\n\n.textarea:focus,\ntextarea:focus {\n  outline: 0;\n  border-color: var(--vd-input-focus-border-color);\n  box-shadow: var(--vd-input-focus-box-shadow);\n}\n\n.textarea::placeholder,\ntextarea::placeholder {\n  color: var(--vd-text-muted);\n  opacity: 1;\n}\n\n.textarea:disabled,\ntextarea:disabled,\n.textarea.disabled,\ntextarea.disabled {\n  background-color: var(--vd-input-bg-disabled);\n  opacity: 0.6;\n  cursor: not-allowed;\n}\n\n.textarea-no-resize,\ntextarea.no-resize {\n  resize: none;\n}\n\n/* Input Sizes - Small */\n.vd-input-sm,\ninput.vd-input-sm {\n  padding: var(--vd-input-padding-y-sm) var(--vd-input-padding-x-sm);\n  font-size: var(--vd-input-font-size-sm);\n  border-radius: var(--vd-input-border-radius-sm);\n}\n\n.textarea-sm,\ntextarea.textarea-sm {\n  padding: var(--vd-input-padding-y-sm) var(--vd-input-padding-x-sm);\n  font-size: var(--vd-input-font-size-sm);\n  border-radius: var(--vd-input-border-radius-sm);\n}\n\n/* Input Sizes - Large */\n.vd-input-lg,\ninput.vd-input-lg {\n  padding: var(--vd-input-padding-y-lg) var(--vd-input-padding-x-lg);\n  font-size: var(--vd-input-font-size-lg);\n  border-radius: var(--vd-input-border-radius-lg);\n}\n\n.textarea-lg,\ntextarea.textarea-lg {\n  padding: var(--vd-input-padding-y-lg) var(--vd-input-padding-x-lg);\n  font-size: var(--vd-input-font-size-lg);\n  border-radius: var(--vd-input-border-radius-lg);\n}\n\n/* Input States - Error */\n.vd-input-error,\ninput.vd-input-error,\n.vd-input.is-error,\ninput.is-error {\n  border-color: var(--vd-color-error);\n}\n\n.vd-input-invalid,\ninput.vd-input-invalid {\n  border-color: var(--vd-color-error);\n}\n\n.vd-input-error:focus,\ninput.vd-input-error:focus,\n.vd-input.is-error:focus,\ninput.is-error:focus {\n  border-color: var(--vd-color-error);\n  box-shadow: 0 0 0 3px var(--vd-color-error-alpha-10);\n}\n\n.vd-input-invalid:focus,\ninput.vd-input-invalid:focus {\n  border-color: var(--vd-color-error);\n  box-shadow: 0 0 0 3px var(--vd-color-error-alpha-10);\n}\n\n.textarea-error,\ntextarea.textarea-error,\n.textarea.is-error,\ntextarea.is-error {\n  border-color: var(--vd-color-error);\n}\n\n.textarea-error:focus,\ntextarea.textarea-error:focus,\n.textarea.is-error:focus,\ntextarea.is-error:focus {\n  border-color: var(--vd-color-error);\n  box-shadow: 0 0 0 3px var(--vd-color-error-alpha-10);\n}\n\n/* Input States - Success */\n.vd-input-success,\ninput.vd-input-success,\n.vd-input.is-success,\ninput.is-success {\n  border-color: var(--vd-color-success);\n}\n\n.vd-input-valid,\ninput.vd-input-valid {\n  border-color: var(--vd-color-success);\n}\n\n.vd-input-success:focus,\ninput.vd-input-success:focus,\n.vd-input.is-success:focus,\ninput.is-success:focus {\n  border-color: var(--vd-color-success);\n  box-shadow: 0 0 0 3px var(--vd-color-success-alpha-10);\n}\n\n.vd-input-valid:focus,\ninput.vd-input-valid:focus {\n  border-color: var(--vd-color-success);\n  box-shadow: 0 0 0 3px var(--vd-color-success-alpha-10);\n}\n\n.textarea-success,\ntextarea.textarea-success,\n.textarea.is-success,\ntextarea.is-success {\n  border-color: var(--vd-color-success);\n}\n\n.textarea-success:focus,\ntextarea.textarea-success:focus,\n.textarea.is-success:focus,\ntextarea.is-success:focus {\n  border-color: var(--vd-color-success);\n  box-shadow: 0 0 0 3px var(--vd-color-success-alpha-10);\n}\n\n/* Labels */\n.label,\nlabel {\n  display: inline-block;\n  margin-bottom: 0.5rem;\n  font-size: var(--vd-font-size-sm);\n  font-weight: var(--vd-font-weight-medium);\n  color: var(--vd-text-primary);\n  line-height: var(--vd-line-height-normal);\n}\n\n.label-required::after,\nlabel.required::after {\n  content: \" *\";\n  color: var(--vd-color-error);\n}\n\n.label-sm,\nlabel.label-sm {\n  font-size: var(--vd-font-size-xs);\n}\n\n.label-lg,\nlabel.label-lg {\n  font-size: var(--vd-font-size-base);\n}\n\n/* Form Groups */\n.vd-form-group {\n  margin-bottom: 1.3125rem;\n  /* 21px - fib */\n}\n\n.vd-form-group:last-child {\n  margin-bottom: 0;\n}\n\n/* Validation Messages */\n.vd-form-error,\n.error-message {\n  display: block;\n  margin-top: 0.5rem;\n  font-size: var(--vd-font-size-sm);\n  color: var(--vd-color-error);\n}\n\n.vd-form-feedback {\n  display: block;\n  margin-top: 0.5rem;\n  font-size: var(--vd-font-size-sm);\n}\n\n.vd-form-feedback-invalid {\n  color: var(--vd-color-error);\n}\n\n.vd-form-success,\n.success-message {\n  display: block;\n  margin-top: 0.5rem;\n  font-size: var(--vd-font-size-sm);\n  color: var(--vd-color-success);\n}\n\n.vd-form-feedback-valid {\n  color: var(--vd-color-success);\n}\n\n.vd-form-help,\n.help-text {\n  display: block;\n  margin-top: 0.5rem;\n  font-size: var(--vd-font-size-sm);\n  color: var(--vd-text-muted);\n}\n\n/* Input Groups (with prefix/suffix) */\n.vd-input-group {\n  display: flex;\n  width: 100%;\n  align-items: stretch;\n}\n\n.vd-input-group>.vd-input,\n.vd-input-group>input {\n  position: relative;\n  flex: 1 1 auto;\n  width: 1%;\n  min-width: 0;\n}\n\n.vd-input-group>.vd-input:not(:first-child),\n.vd-input-group>input:not(:first-child) {\n  border-top-left-radius: 0;\n  border-bottom-left-radius: 0;\n  margin-left: -1px;\n}\n\n.vd-input-group>.vd-input:not(:last-child),\n.vd-input-group>input:not(:last-child) {\n  border-top-right-radius: 0;\n  border-bottom-right-radius: 0;\n}\n\n.vd-input-group-prefix,\n.vd-input-group-suffix {\n  display: flex;\n  align-items: center;\n  padding: var(--vd-input-padding-y) var(--vd-input-padding-x);\n  font-size: var(--vd-input-font-size);\n  font-weight: var(--vd-font-weight-normal);\n  line-height: var(--vd-line-height-normal);\n  color: var(--vd-text-secondary);\n  text-align: center;\n  white-space: nowrap;\n  background-color: var(--vd-bg-secondary);\n  background-clip: padding-box;\n  border: var(--vd-input-border-width) solid var(--vd-input-border-color);\n}\n\n.vd-input-group-prefix {\n  border-right: 0;\n  border-radius: var(--vd-input-border-radius) 0 0 var(--vd-input-border-radius);\n}\n\n.vd-input-group-suffix {\n  border-left: 0;\n  border-radius: 0 var(--vd-input-border-radius) var(--vd-input-border-radius) 0;\n}\n\n.vd-input-group>.vd-input-group-prefix+.vd-input,\n.vd-input-group>.vd-input-group-prefix+input {\n  border-left: 0;\n}\n\n.vd-input-group>.vd-input+.vd-input-group-suffix,\n.vd-input-group>input+.vd-input-group-suffix {\n  border-right: 0;\n}\n\n/* ============================================\n   Phase 4: Custom Form Controls\n   ============================================ */\n\n/* Checkbox Variables */\n/* stylelint-disable-next-line no-duplicate-selectors -- control-specific tokens stay grouped near their rules. */\n:root {\n  --vd-checkbox-size: 1.3125rem;\n  /* 21px - fib */\n  --vd-checkbox-size-sm: 0.8125rem;\n  /* 13px - fib */\n  --vd-checkbox-size-lg: 2.125rem;\n  /* 34px - fib */\n  --vd-checkbox-border-width: 2px;\n  /* fib(2) */\n  --vd-checkbox-border-radius: var(--vd-radius-fib-3);\n  /* 3px */\n  --vd-checkbox-check-color: var(--vd-color-white);\n  --vd-checkbox-bg-checked: var(--vd-color-primary);\n  --vd-checkbox-bg-indeterminate: var(--vd-color-primary);\n  --vd-checkbox-border-color: var(--vd-input-border-color);\n  --vd-checkbox-transition: var(--vd-transition-base);\n}\n\n/* Checkbox Wrapper */\n.checkbox,\n.vd-form-check {\n  display: flex;\n  align-items: center;\n  margin-bottom: 0.8125rem;\n  /* 13px - fib */\n  position: relative;\n  cursor: pointer;\n  font-size: var(--vd-input-font-size);\n  line-height: var(--vd-line-height-normal);\n  color: var(--vd-text-primary);\n  user-select: none;\n  gap: 0.5rem;\n  /* 8px - fib */\n}\n\n/* Native checkbox styling (label.checkbox > input + span pattern) */\n.checkbox>input[type=\"checkbox\"],\n.vd-form-check>input[type=\"checkbox\"] {\n  appearance: none;\n  -webkit-appearance: none;\n  width: var(--vd-checkbox-size);\n  height: var(--vd-checkbox-size);\n  border: var(--vd-checkbox-border-width) solid var(--vd-checkbox-border-color);\n  border-radius: var(--vd-checkbox-border-radius);\n  background-color: var(--vd-input-bg);\n  cursor: pointer;\n  flex-shrink: 0;\n  margin: 0;\n  position: relative;\n  transition: var(--vd-checkbox-transition);\n}\n\n.checkbox>input[type=\"checkbox\"]:checked,\n.vd-form-check>input[type=\"checkbox\"]:checked {\n  background-color: var(--vd-checkbox-bg-checked);\n  border-color: var(--vd-checkbox-bg-checked);\n}\n\n.checkbox>input[type=\"checkbox\"]:checked::after,\n.vd-form-check>input[type=\"checkbox\"]:checked::after {\n  content: '';\n  position: absolute;\n  left: 50%;\n  top: 45%;\n  transform: translate(-50%, -50%) rotate(45deg);\n  width: 0.3rem;\n  height: 0.6rem;\n  border: solid var(--vd-checkbox-check-color);\n  border-width: 0 2px 2px 0;\n}\n\n.checkbox>input[type=\"checkbox\"]:disabled,\n.vd-form-check>input[type=\"checkbox\"]:disabled {\n  background-color: var(--vd-input-bg-disabled);\n  cursor: not-allowed;\n  opacity: 0.6;\n}\n\n.checkbox>input[type=\"checkbox\"]:disabled+span,\n.vd-form-check>input[type=\"checkbox\"]:disabled+span {\n  opacity: 0.6;\n  cursor: not-allowed;\n}\n\n.checkbox>input[type=\"checkbox\"]:focus-visible,\n.vd-form-check>input[type=\"checkbox\"]:focus-visible {\n  outline: 2px solid var(--vd-input-focus-border-color);\n  outline-offset: 2px;\n}\n\n.checkbox-inline,\n.vd-form-check-inline {\n  display: inline-flex;\n  margin-right: 1.5rem;\n  margin-bottom: 0;\n  vertical-align: middle;\n}\n\n/* Checkbox Input (class-based pattern) */\n.checkbox-input,\n.vd-form-check-input {\n  position: absolute;\n  opacity: 0;\n  width: 0;\n  height: 0;\n  margin: 0;\n  cursor: pointer;\n}\n\n.checkbox-label,\n.vd-form-check-label {\n  display: inline-flex;\n  align-items: center;\n  cursor: pointer;\n  font-size: var(--vd-input-font-size);\n  line-height: var(--vd-line-height-normal);\n  color: var(--vd-text-primary);\n  user-select: none;\n  padding-left: calc(var(--vd-checkbox-size) + 0.5rem);\n  position: relative;\n  min-height: var(--vd-checkbox-size);\n}\n\n.checkbox-label::before,\n.vd-form-check-label::before {\n  content: '';\n  position: absolute;\n  left: 0;\n  top: 50%;\n  transform: translateY(-50%);\n  width: var(--vd-checkbox-size);\n  height: var(--vd-checkbox-size);\n  border: var(--vd-checkbox-border-width) solid var(--vd-checkbox-border-color);\n  border-radius: var(--vd-checkbox-border-radius);\n  background-color: var(--vd-input-bg);\n  transition: var(--vd-checkbox-transition);\n  flex-shrink: 0;\n}\n\n.checkbox-input:checked+.checkbox-label::before,\n.checkbox-input:checked~.checkbox-label::before,\n.vd-form-check-input:checked+.vd-form-check-label::before {\n  background-color: var(--vd-checkbox-bg-checked);\n  border-color: var(--vd-checkbox-bg-checked);\n}\n\n.checkbox-input:checked+.checkbox-label::after,\n.checkbox-input:checked~.checkbox-label::after,\n.vd-form-check-input:checked+.vd-form-check-label::after {\n  content: '';\n  position: absolute;\n  left: calc(var(--vd-checkbox-size) / 2);\n  top: 50%;\n  transform: translate(-50%, -60%) rotate(45deg);\n  width: 0.375rem;\n  height: 0.75rem;\n  border: solid var(--vd-checkbox-check-color);\n  border-width: 0 2px 2px 0;\n  opacity: 1;\n}\n\n.checkbox-input:indeterminate+.checkbox-label::before,\n.checkbox-input:indeterminate~.checkbox-label::before,\n.vd-form-check-input:indeterminate+.vd-form-check-label::before {\n  background-color: var(--vd-checkbox-bg-indeterminate);\n  border-color: var(--vd-checkbox-bg-indeterminate);\n}\n\n.checkbox-input:indeterminate+.checkbox-label::after,\n.checkbox-input:indeterminate~.checkbox-label::after,\n.vd-form-check-input:indeterminate+.vd-form-check-label::after {\n  content: '';\n  position: absolute;\n  left: calc(var(--vd-checkbox-size) / 2);\n  top: 50%;\n  transform: translate(-50%, -50%);\n  width: 0.5rem;\n  height: 2px;\n  background-color: var(--vd-checkbox-check-color);\n  border: none;\n  opacity: 1;\n}\n\n.checkbox-input:focus-visible+.checkbox-label::before,\n.checkbox-input:focus-visible~.checkbox-label::before,\n.vd-form-check-input:focus-visible+.vd-form-check-label::before {\n  outline: 2px solid var(--vd-input-focus-border-color);\n  outline-offset: 2px;\n}\n\n.checkbox-input:disabled+.checkbox-label,\n.checkbox-input:disabled~.checkbox-label,\n.vd-form-check-input:disabled+.vd-form-check-label {\n  opacity: 0.6;\n  cursor: not-allowed;\n}\n\n.checkbox-input:disabled+.checkbox-label::before,\n.checkbox-input:disabled~.checkbox-label::before,\n.vd-form-check-input:disabled+.vd-form-check-label::before {\n  background-color: var(--vd-input-bg-disabled);\n  border-color: var(--vd-checkbox-border-color);\n  cursor: not-allowed;\n}\n\n/* Checkbox Sizes */\n.checkbox-sm .checkbox-label,\n.checkbox-sm .vd-form-check-label,\n.vd-form-check-sm .checkbox-label,\n.vd-form-check-sm .vd-form-check-label {\n  font-size: var(--vd-input-font-size-sm);\n  padding-left: calc(var(--vd-checkbox-size-sm) + 0.625rem);\n  min-height: var(--vd-checkbox-size-sm);\n}\n\n.checkbox-sm .checkbox-label::before,\n.checkbox-sm .vd-form-check-label::before,\n.vd-form-check-sm .checkbox-label::before,\n.vd-form-check-sm .vd-form-check-label::before {\n  width: var(--vd-checkbox-size-sm);\n  height: var(--vd-checkbox-size-sm);\n}\n\n.checkbox-lg .checkbox-label,\n.checkbox-lg .vd-form-check-label,\n.vd-form-check-lg .checkbox-label,\n.vd-form-check-lg .vd-form-check-label {\n  font-size: var(--vd-input-font-size-lg);\n  padding-left: calc(var(--vd-checkbox-size-lg) + 0.875rem);\n  min-height: var(--vd-checkbox-size-lg);\n}\n\n.checkbox-lg .checkbox-label::before,\n.checkbox-lg .vd-form-check-label::before,\n.vd-form-check-lg .checkbox-label::before,\n.vd-form-check-lg .vd-form-check-label::before {\n  width: var(--vd-checkbox-size-lg);\n  height: var(--vd-checkbox-size-lg);\n}\n\n/* Checkbox Groups */\n.checkbox-group,\n.vd-form-check-group {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n}\n\n.checkbox-group-inline,\n.vd-form-check-group-inline {\n  flex-direction: row;\n  flex-wrap: wrap;\n}\n\n/* Radio Button Variables */\n/* stylelint-disable-next-line no-duplicate-selectors -- control-specific tokens stay grouped near their rules. */\n:root {\n  --vd-radio-size: 1.3125rem;\n  /* 21px - fib */\n  --vd-radio-size-sm: 0.8125rem;\n  /* 13px - fib */\n  --vd-radio-size-lg: 2.125rem;\n  /* 34px - fib */\n  --vd-radio-border-width: 2px;\n  /* fib(2) */\n  --vd-radio-dot-size: 0.5rem;\n  /* 8px - fib */\n  --vd-radio-dot-size-sm: 0.3125rem;\n  /* 5px - fib */\n  --vd-radio-dot-size-lg: 0.8125rem;\n  /* 13px - fib */\n  --vd-radio-bg-checked: var(--vd-color-primary);\n  --vd-radio-border-color: var(--vd-input-border-color);\n  --vd-radio-transition: var(--vd-transition-base);\n}\n\n/* Radio Wrapper */\n.radio,\n.vd-form-radio {\n  display: flex;\n  align-items: center;\n  margin-bottom: 0.75rem;\n  position: relative;\n  cursor: pointer;\n  font-size: var(--vd-input-font-size);\n  line-height: var(--vd-line-height-normal);\n  color: var(--vd-text-primary);\n  user-select: none;\n  gap: 0.5rem;\n}\n\n/* Native radio styling (label.radio > input + span pattern) */\n.radio>input[type=\"radio\"],\n.vd-form-radio>input[type=\"radio\"] {\n  appearance: none;\n  -webkit-appearance: none;\n  width: var(--vd-radio-size);\n  height: var(--vd-radio-size);\n  border: var(--vd-radio-border-width) solid var(--vd-radio-border-color);\n  border-radius: 50%;\n  background-color: var(--vd-input-bg);\n  cursor: pointer;\n  flex-shrink: 0;\n  margin: 0;\n  position: relative;\n  transition: var(--vd-radio-transition);\n}\n\n.radio>input[type=\"radio\"]:checked,\n.vd-form-radio>input[type=\"radio\"]:checked {\n  border-color: var(--vd-radio-bg-checked);\n}\n\n.radio>input[type=\"radio\"]:checked::after,\n.vd-form-radio>input[type=\"radio\"]:checked::after {\n  content: '';\n  position: absolute;\n  left: 50%;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  width: var(--vd-radio-dot-size);\n  height: var(--vd-radio-dot-size);\n  border-radius: 50%;\n  background-color: var(--vd-radio-bg-checked);\n}\n\n.radio>input[type=\"radio\"]:disabled,\n.vd-form-radio>input[type=\"radio\"]:disabled {\n  background-color: var(--vd-input-bg-disabled);\n  cursor: not-allowed;\n  opacity: 0.6;\n}\n\n.radio>input[type=\"radio\"]:disabled+span,\n.vd-form-radio>input[type=\"radio\"]:disabled+span {\n  opacity: 0.6;\n  cursor: not-allowed;\n}\n\n.radio>input[type=\"radio\"]:focus-visible,\n.vd-form-radio>input[type=\"radio\"]:focus-visible {\n  outline: 2px solid var(--vd-input-focus-border-color);\n  outline-offset: 2px;\n}\n\n.radio-inline,\n.vd-form-radio-inline {\n  display: inline-flex;\n  margin-right: 1.5rem;\n  margin-bottom: 0;\n  vertical-align: middle;\n}\n\n/* Radio Input (class-based pattern) */\n.radio-input,\n.vd-form-radio-input {\n  position: absolute;\n  opacity: 0;\n  width: 0;\n  height: 0;\n  margin: 0;\n  cursor: pointer;\n}\n\n.radio-label,\n.vd-form-radio-label {\n  display: inline-flex;\n  align-items: center;\n  cursor: pointer;\n  font-size: var(--vd-input-font-size);\n  line-height: var(--vd-line-height-normal);\n  color: var(--vd-text-primary);\n  user-select: none;\n  padding-left: calc(var(--vd-radio-size) + 0.5rem);\n  position: relative;\n  min-height: var(--vd-radio-size);\n}\n\n.radio-label::before,\n.vd-form-radio-label::before {\n  content: '';\n  position: absolute;\n  left: 0;\n  top: 50%;\n  transform: translateY(-50%);\n  width: var(--vd-radio-size);\n  height: var(--vd-radio-size);\n  border: var(--vd-radio-border-width) solid var(--vd-radio-border-color);\n  border-radius: 50%;\n  background-color: var(--vd-input-bg);\n  transition: var(--vd-radio-transition);\n  flex-shrink: 0;\n}\n\n.radio-input:checked+.radio-label::before,\n.radio-input:checked~.radio-label::before,\n.vd-form-radio-input:checked+.vd-form-radio-label::before {\n  border-color: var(--vd-radio-bg-checked);\n}\n\n.radio-input:checked+.radio-label::after,\n.radio-input:checked~.radio-label::after,\n.vd-form-radio-input:checked+.vd-form-radio-label::after {\n  content: '';\n  position: absolute;\n  left: calc(var(--vd-radio-size) / 2);\n  top: 50%;\n  transform: translate(-50%, -50%);\n  width: var(--vd-radio-dot-size);\n  height: var(--vd-radio-dot-size);\n  border-radius: 50%;\n  background-color: var(--vd-radio-bg-checked);\n  opacity: 1;\n}\n\n.radio-input:focus-visible+.radio-label::before,\n.radio-input:focus-visible~.radio-label::before,\n.vd-form-radio-input:focus-visible+.vd-form-radio-label::before {\n  outline: 2px solid var(--vd-input-focus-border-color);\n  outline-offset: 2px;\n}\n\n.radio-input:disabled+.radio-label,\n.radio-input:disabled~.radio-label,\n.vd-form-radio-input:disabled+.vd-form-radio-label {\n  opacity: 0.6;\n  cursor: not-allowed;\n}\n\n.radio-input:disabled+.radio-label::before,\n.radio-input:disabled~.radio-label::before,\n.vd-form-radio-input:disabled+.vd-form-radio-label::before {\n  background-color: var(--vd-input-bg-disabled);\n  border-color: var(--vd-radio-border-color);\n  cursor: not-allowed;\n}\n\n/* Radio Sizes */\n.radio-sm .radio-label,\n.radio-sm .vd-form-radio-label,\n.vd-form-radio-sm .radio-label,\n.vd-form-radio-sm .vd-form-radio-label {\n  font-size: var(--vd-input-font-size-sm);\n  padding-left: calc(var(--vd-radio-size-sm) + 0.625rem);\n  min-height: var(--vd-radio-size-sm);\n}\n\n.radio-sm .radio-label::before,\n.radio-sm .vd-form-radio-label::before,\n.vd-form-radio-sm .radio-label::before,\n.vd-form-radio-sm .vd-form-radio-label::before {\n  width: var(--vd-radio-size-sm);\n  height: var(--vd-radio-size-sm);\n}\n\n.radio-sm .radio-label::after,\n.radio-sm .vd-form-radio-label::after,\n.vd-form-radio-sm .radio-label::after,\n.vd-form-radio-sm .vd-form-radio-label::after {\n  width: var(--vd-radio-dot-size-sm);\n  height: var(--vd-radio-dot-size-sm);\n}\n\n.radio-lg .radio-label,\n.radio-lg .vd-form-radio-label,\n.vd-form-radio-lg .radio-label,\n.vd-form-radio-lg .vd-form-radio-label {\n  font-size: var(--vd-input-font-size-lg);\n  padding-left: calc(var(--vd-radio-size-lg) + 0.875rem);\n  min-height: var(--vd-radio-size-lg);\n}\n\n.radio-lg .radio-label::before,\n.radio-lg .vd-form-radio-label::before,\n.vd-form-radio-lg .radio-label::before,\n.vd-form-radio-lg .vd-form-radio-label::before {\n  width: var(--vd-radio-size-lg);\n  height: var(--vd-radio-size-lg);\n}\n\n.radio-lg .radio-label::after,\n.radio-lg .vd-form-radio-label::after,\n.vd-form-radio-lg .radio-label::after,\n.vd-form-radio-lg .vd-form-radio-label::after {\n  width: var(--vd-radio-dot-size-lg);\n  height: var(--vd-radio-dot-size-lg);\n}\n\n/* Radio Groups */\n.radio-group,\n.vd-form-radio-group {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n}\n\n.radio-group-inline,\n.vd-form-radio-group-inline {\n  flex-direction: row;\n  flex-wrap: wrap;\n}\n\n/* Range Variables */\n/* stylelint-disable-next-line no-duplicate-selectors -- range tokens stay grouped with range control styles. */\n:root {\n  --vd-range-track-height: 0.5rem;\n  --vd-range-track-height-sm: 0.375rem;\n  --vd-range-track-height-lg: 0.625rem;\n  --vd-range-thumb-size: 1.25rem;\n  --vd-range-thumb-size-sm: 1rem;\n  --vd-range-thumb-size-lg: 1.5rem;\n  --vd-range-track-bg: var(--vd-color-gray-300);\n  --vd-range-track-border: none;\n  --vd-range-track-fill: var(--vd-color-primary);\n  --vd-range-thumb-bg: var(--vd-color-primary);\n  --vd-range-thumb-border: 2px solid var(--vd-color-white);\n  --vd-range-thumb-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);\n}\n\n/* Dark Theme Range Overrides - more visible track */\n/* stylelint-disable-next-line no-duplicate-selectors -- dark-mode token overrides stay adjacent to range styles. */\n[data-theme=\"dark\"] {\n  --vd-range-track-bg: var(--vd-color-gray-400);\n}\n\n@media (prefers-color-scheme: dark) {\n  :root:not([data-theme]) {\n    --vd-range-track-bg: var(--vd-color-gray-400);\n  }\n}\n\n/* Range Wrapper */\n.range-wrapper,\n.range {\n  position: relative;\n  width: 100%;\n  margin-bottom: 1rem;\n}\n\n/* Range Input */\ninput[type=\"range\"].range-input,\ninput[type=\"range\"] {\n  width: 100%;\n  height: var(--vd-range-track-height);\n  -webkit-appearance: none;\n  appearance: none;\n  background: transparent;\n  cursor: pointer;\n  margin: 0;\n  padding: 0;\n  display: block;\n}\n\ninput[type=\"range\"].range-input:focus,\ninput[type=\"range\"]:focus {\n  outline: none;\n}\n\ninput[type=\"range\"].range-input:focus::-webkit-slider-thumb,\ninput[type=\"range\"]:focus::-webkit-slider-thumb {\n  box-shadow: var(--vd-range-thumb-shadow), 0 0 0 3px var(--vd-color-primary-alpha-10);\n}\n\ninput[type=\"range\"].range-input:focus::-moz-range-thumb,\ninput[type=\"range\"]:focus::-moz-range-thumb {\n  box-shadow: var(--vd-range-thumb-shadow), 0 0 0 3px var(--vd-color-primary-alpha-10);\n}\n\n/* Range Track (Webkit - Chrome, Safari, Edge) */\ninput[type=\"range\"]::-webkit-slider-runnable-track {\n  width: 100%;\n  height: var(--vd-range-track-height);\n  background: var(--vd-range-track-bg);\n  border: var(--vd-range-track-border);\n  border-radius: 0.5rem;\n  cursor: pointer;\n}\n\ninput[type=\"range\"].range-input::-webkit-slider-runnable-track {\n  width: 100%;\n  height: var(--vd-range-track-height);\n  background: var(--vd-range-track-bg);\n  border: var(--vd-range-track-border);\n  border-radius: 0.5rem;\n  cursor: pointer;\n}\n\n/* Range Track (Firefox) */\ninput[type=\"range\"].range-input::-moz-range-track,\ninput[type=\"range\"]::-moz-range-track {\n  width: 100%;\n  height: var(--vd-range-track-height);\n  background: var(--vd-range-track-bg);\n  border: var(--vd-range-track-border);\n  border-radius: 0.5rem;\n  cursor: pointer;\n}\n\n/* Range Progress/Fill (Firefox) - uses --vd-range-track-fill */\ninput[type=\"range\"].range-input::-moz-range-progress,\ninput[type=\"range\"]::-moz-range-progress {\n  height: var(--vd-range-track-height);\n  background: var(--vd-range-track-fill);\n  border-radius: 0.5rem 0 0 0.5rem;\n}\n\n/* Range Thumb (Webkit) */\ninput[type=\"range\"].range-input::-webkit-slider-thumb,\ninput[type=\"range\"]::-webkit-slider-thumb {\n  -webkit-appearance: none;\n  appearance: none;\n  width: var(--vd-range-thumb-size);\n  height: var(--vd-range-thumb-size);\n  background: var(--vd-range-thumb-bg);\n  border: var(--vd-range-thumb-border);\n  border-radius: 50%;\n  cursor: pointer;\n  box-shadow: var(--vd-range-thumb-shadow);\n  transition: var(--vd-transition-base);\n  margin-top: calc((var(--vd-range-track-height) - var(--vd-range-thumb-size)) / 2);\n}\n\ninput[type=\"range\"].range-input::-webkit-slider-thumb:hover,\ninput[type=\"range\"]::-webkit-slider-thumb:hover {\n  transform: scale(1.1);\n}\n\n/* Range Thumb (Firefox) */\ninput[type=\"range\"].range-input::-moz-range-thumb,\ninput[type=\"range\"]::-moz-range-thumb {\n  width: var(--vd-range-thumb-size);\n  height: var(--vd-range-thumb-size);\n  background: var(--vd-range-thumb-bg);\n  border: var(--vd-range-thumb-border);\n  border-radius: 50%;\n  cursor: pointer;\n  box-shadow: var(--vd-range-thumb-shadow);\n  transition: var(--vd-transition-base);\n}\n\ninput[type=\"range\"].range-input::-moz-range-thumb:hover,\ninput[type=\"range\"]::-moz-range-thumb:hover {\n  transform: scale(1.1);\n}\n\ninput[type=\"range\"].range-input:disabled,\ninput[type=\"range\"]:disabled {\n  opacity: 0.6;\n  cursor: not-allowed;\n}\n\ninput[type=\"range\"].range-input:disabled::-webkit-slider-thumb,\ninput[type=\"range\"]:disabled::-webkit-slider-thumb {\n  cursor: not-allowed;\n}\n\ninput[type=\"range\"].range-input:disabled::-moz-range-thumb,\ninput[type=\"range\"]:disabled::-moz-range-thumb {\n  cursor: not-allowed;\n}\n\n/* Range Sizes */\n.range-sm input[type=\"range\"],\ninput[type=\"range\"].range-sm {\n  height: var(--vd-range-track-height-sm);\n}\n\n.range-sm input[type=\"range\"]::-webkit-slider-track,\ninput[type=\"range\"].range-sm::-webkit-slider-track {\n  height: var(--vd-range-track-height-sm);\n}\n\n.range-sm input[type=\"range\"]::-moz-range-track,\ninput[type=\"range\"].range-sm::-moz-range-track {\n  height: var(--vd-range-track-height-sm);\n}\n\n.range-sm input[type=\"range\"]::-webkit-slider-thumb,\ninput[type=\"range\"].range-sm::-webkit-slider-thumb {\n  width: var(--vd-range-thumb-size-sm);\n  height: var(--vd-range-thumb-size-sm);\n  margin-top: calc((var(--vd-range-track-height-sm) - var(--vd-range-thumb-size-sm)) / 2);\n}\n\n.range-sm input[type=\"range\"]::-moz-range-thumb,\ninput[type=\"range\"].range-sm::-moz-range-thumb {\n  width: var(--vd-range-thumb-size-sm);\n  height: var(--vd-range-thumb-size-sm);\n}\n\n.range-lg input[type=\"range\"],\ninput[type=\"range\"].range-lg {\n  height: var(--vd-range-track-height-lg);\n}\n\n.range-lg input[type=\"range\"]::-webkit-slider-track,\ninput[type=\"range\"].range-lg::-webkit-slider-track {\n  height: var(--vd-range-track-height-lg);\n}\n\n.range-lg input[type=\"range\"]::-moz-range-track,\ninput[type=\"range\"].range-lg::-moz-range-track {\n  height: var(--vd-range-track-height-lg);\n}\n\n.range-lg input[type=\"range\"]::-webkit-slider-thumb,\ninput[type=\"range\"].range-lg::-webkit-slider-thumb {\n  width: var(--vd-range-thumb-size-lg);\n  height: var(--vd-range-thumb-size-lg);\n  margin-top: calc((var(--vd-range-track-height-lg) - var(--vd-range-thumb-size-lg)) / 2);\n}\n\n.range-lg input[type=\"range\"]::-moz-range-thumb,\ninput[type=\"range\"].range-lg::-moz-range-thumb {\n  width: var(--vd-range-thumb-size-lg);\n  height: var(--vd-range-thumb-size-lg);\n}\n\n/* Range Value Display */\n.range-value {\n  display: inline-block;\n  margin-left: 0.5rem;\n  padding: 0.25rem 0.5rem;\n  background-color: var(--vd-bg-secondary);\n  border-radius: var(--vd-btn-border-radius-sm);\n  font-size: var(--vd-font-size-sm);\n  font-weight: var(--vd-font-weight-medium);\n  color: var(--vd-text-primary);\n  min-width: 3rem;\n  text-align: center;\n}\n\n.range-label {\n  display: flex;\n  align-items: center;\n  margin-bottom: 0.5rem;\n  font-size: var(--vd-font-size-sm);\n  font-weight: var(--vd-font-weight-medium);\n  color: var(--vd-text-primary);\n}\n\n.range-min-max {\n  display: flex;\n  justify-content: space-between;\n  margin-top: 0.25rem;\n  font-size: var(--vd-font-size-xs);\n  color: var(--vd-text-muted);\n}\n\n/* Switch Variables */\n/* stylelint-disable-next-line no-duplicate-selectors -- control-specific tokens stay grouped near their rules. */\n:root {\n  /* Switch: golden rectangle (55x34 outer, 21px thumb) */\n  --vd-switch-width: 3.4375rem;\n  /* 55px - fib */\n  --vd-switch-width-sm: 2.125rem;\n  /* 34px - fib */\n  --vd-switch-width-lg: 5.5625rem;\n  /* 89px - fib */\n  --vd-switch-height: 2.125rem;\n  /* 34px - fib (55/34 ~ phi) */\n  --vd-switch-height-sm: 1.3125rem;\n  /* 21px - fib (34/21 ~ phi) */\n  --vd-switch-height-lg: 3.4375rem;\n  /* 55px - fib (89/55 ~ phi) */\n  --vd-switch-thumb-size: 1.3125rem;\n  /* 21px - fib */\n  --vd-switch-thumb-size-sm: 0.8125rem;\n  /* 13px - fib */\n  --vd-switch-thumb-size-lg: 2.125rem;\n  /* 34px - fib */\n  --vd-switch-thumb-offset: 0.1875rem;\n  /* 3px - fib */\n  --vd-switch-bg-off: var(--vd-color-gray-300);\n  --vd-switch-bg-on: var(--vd-color-primary);\n  --vd-switch-bg-on-success: var(--vd-color-success);\n  --vd-switch-bg-on-warning: var(--vd-color-warning);\n  --vd-switch-bg-on-error: var(--vd-color-error);\n  --vd-switch-thumb-bg: var(--vd-color-white);\n  --vd-switch-transition: var(--vd-transition-base);\n}\n\n/* Dark Theme Switch Overrides */\n/* stylelint-disable-next-line no-duplicate-selectors -- dark-mode token overrides stay adjacent to switch styles. */\n[data-theme=\"dark\"] {\n  --vd-switch-bg-off: var(--vd-color-gray-600);\n}\n\n@media (prefers-color-scheme: dark) {\n  :root:not([data-theme]) {\n    --vd-switch-bg-off: var(--vd-color-gray-600);\n  }\n}\n\n/* Switch Wrapper */\n.switch,\n.vd-form-switch {\n  display: flex;\n  align-items: center;\n  margin-bottom: 0.75rem;\n  position: relative;\n  cursor: pointer;\n  font-size: var(--vd-input-font-size);\n  line-height: var(--vd-line-height-normal);\n  color: var(--vd-text-primary);\n  user-select: none;\n  gap: 0.75rem;\n}\n\n/* Native switch styling (label.switch > input + .switch-slider + span pattern) */\n.switch>input[type=\"checkbox\"] {\n  position: absolute;\n  opacity: 0;\n  width: 0;\n  height: 0;\n}\n\n.switch-slider {\n  position: relative;\n  width: var(--vd-switch-width);\n  height: var(--vd-switch-height);\n  background-color: var(--vd-switch-bg-off);\n  border-radius: calc(var(--vd-switch-height) / 2);\n  transition: var(--vd-switch-transition);\n  flex-shrink: 0;\n}\n\n.switch-slider::after {\n  content: '';\n  position: absolute;\n  left: var(--vd-switch-thumb-offset);\n  top: 50%;\n  transform: translateY(-50%);\n  width: var(--vd-switch-thumb-size);\n  height: var(--vd-switch-thumb-size);\n  background-color: var(--vd-switch-thumb-bg);\n  border-radius: 50%;\n  box-shadow: var(--vd-shadow-sm);\n  transition: var(--vd-switch-transition);\n}\n\n.switch>input[type=\"checkbox\"]:checked+.switch-slider {\n  background-color: var(--vd-switch-bg-on);\n}\n\n.switch>input[type=\"checkbox\"]:checked+.switch-slider::after {\n  left: calc(var(--vd-switch-width) - var(--vd-switch-thumb-size) - var(--vd-switch-thumb-offset));\n}\n\n.switch>input[type=\"checkbox\"]:focus-visible+.switch-slider {\n  outline: 2px solid var(--vd-input-focus-border-color);\n  outline-offset: 2px;\n}\n\n.switch>input[type=\"checkbox\"]:disabled+.switch-slider {\n  opacity: 0.6;\n  cursor: not-allowed;\n}\n\n.switch>input[type=\"checkbox\"]:disabled~span {\n  opacity: 0.6;\n  cursor: not-allowed;\n}\n\n.switch-inline,\n.vd-form-switch-inline {\n  display: inline-flex;\n  margin-right: 1.5rem;\n  margin-bottom: 0;\n  vertical-align: middle;\n}\n\n/* Switch Input (class-based pattern) */\n.switch-input,\n.vd-form-switch-input {\n  position: absolute;\n  opacity: 0;\n  width: 0;\n  height: 0;\n  margin: 0;\n  cursor: pointer;\n}\n\n/* Switch Label */\n.switch-label,\n.vd-form-switch-label {\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  font-size: var(--vd-input-font-size);\n  line-height: var(--vd-line-height-normal);\n  color: var(--vd-text-primary);\n  user-select: none;\n  position: relative;\n}\n\n/* Switch Track */\n.switch-label::before,\n.vd-form-switch-label::before {\n  content: '';\n  position: relative;\n  width: var(--vd-switch-width);\n  height: var(--vd-switch-height);\n  background-color: var(--vd-switch-bg-off);\n  border-radius: calc(var(--vd-switch-height) / 2);\n  transition: var(--vd-switch-transition);\n  flex-shrink: 0;\n  margin-right: 0.75rem;\n}\n\n/* Switch Thumb */\n.switch-label::after,\n.vd-form-switch-label::after {\n  content: '';\n  position: absolute;\n  left: var(--vd-switch-thumb-offset);\n  top: 50%;\n  transform: translateY(-50%);\n  width: var(--vd-switch-thumb-size);\n  height: var(--vd-switch-thumb-size);\n  background-color: var(--vd-switch-thumb-bg);\n  border-radius: 50%;\n  box-shadow: var(--vd-shadow-sm);\n  transition: var(--vd-switch-transition);\n  pointer-events: none;\n}\n\n.switch-input:checked+.switch-label::before,\n.switch-input:checked~.switch-label::before,\n.vd-form-switch-input:checked+.vd-form-switch-label::before {\n  background-color: var(--vd-switch-bg-on);\n}\n\n.switch-input:checked+.switch-label::after,\n.switch-input:checked~.switch-label::after,\n.vd-form-switch-input:checked+.vd-form-switch-label::after {\n  left: calc(var(--vd-switch-width) - var(--vd-switch-thumb-size) - var(--vd-switch-thumb-offset));\n}\n\n.switch-input:focus-visible+.switch-label::before,\n.switch-input:focus-visible~.switch-label::before,\n.vd-form-switch-input:focus-visible+.vd-form-switch-label::before {\n  outline: 2px solid var(--vd-input-focus-border-color);\n  outline-offset: 2px;\n}\n\n.switch-input:disabled+.switch-label,\n.switch-input:disabled~.switch-label,\n.vd-form-switch-input:disabled+.vd-form-switch-label {\n  opacity: 0.6;\n  cursor: not-allowed;\n}\n\n.switch-input:disabled+.switch-label::before,\n.switch-input:disabled~.switch-label::before,\n.vd-form-switch-input:disabled+.vd-form-switch-label::before {\n  background-color: var(--vd-input-bg-disabled);\n  cursor: not-allowed;\n}\n\n/* Switch Label Position - Right */\n.switch-label-right .switch-label,\n.switch-label-right .vd-form-switch-label {\n  flex-direction: row-reverse;\n}\n\n.switch-label-right .switch-label::before,\n.switch-label-right .vd-form-switch-label::before {\n  margin-right: 0;\n  margin-left: 0.75rem;\n}\n\n.switch-label-right .switch-label::after,\n.switch-label-right .vd-form-switch-label::after {\n  left: auto;\n  right: var(--vd-switch-thumb-offset);\n}\n\n.switch-label-right .switch-input:checked+.switch-label::after,\n.switch-label-right .switch-input:checked~.switch-label::after,\n.switch-label-right .vd-form-switch-input:checked+.vd-form-switch-label::after {\n  right: calc(var(--vd-switch-width) - var(--vd-switch-thumb-size) - var(--vd-switch-thumb-offset));\n  left: auto;\n}\n\n/* Switch Sizes */\n.switch-sm .switch-label,\n.switch-sm .vd-form-switch-label,\n.vd-form-switch-sm .switch-label,\n.vd-form-switch-sm .vd-form-switch-label {\n  font-size: var(--vd-input-font-size-sm);\n}\n\n.switch-sm .switch-label::before,\n.switch-sm .vd-form-switch-label::before,\n.vd-form-switch-sm .switch-label::before,\n.vd-form-switch-sm .vd-form-switch-label::before {\n  width: var(--vd-switch-width-sm);\n  height: var(--vd-switch-height-sm);\n}\n\n.switch-sm .switch-label::after,\n.switch-sm .vd-form-switch-label::after,\n.vd-form-switch-sm .switch-label::after,\n.vd-form-switch-sm .vd-form-switch-label::after {\n  width: var(--vd-switch-thumb-size-sm);\n  height: var(--vd-switch-thumb-size-sm);\n}\n\n.switch-sm .switch-input:checked+.switch-label::after,\n.switch-sm .switch-input:checked~.switch-label::after,\n.vd-form-switch-sm .vd-form-switch-input:checked+.vd-form-switch-label::after {\n  left: calc(var(--vd-switch-width-sm) - var(--vd-switch-thumb-size-sm) - var(--vd-switch-thumb-offset));\n}\n\n.switch-lg .switch-label,\n.switch-lg .vd-form-switch-label,\n.vd-form-switch-lg .switch-label,\n.vd-form-switch-lg .vd-form-switch-label {\n  font-size: var(--vd-input-font-size-lg);\n}\n\n.switch-lg .switch-label::before,\n.switch-lg .vd-form-switch-label::before,\n.vd-form-switch-lg .switch-label::before,\n.vd-form-switch-lg .vd-form-switch-label::before {\n  width: var(--vd-switch-width-lg);\n  height: var(--vd-switch-height-lg);\n}\n\n.switch-lg .switch-label::after,\n.switch-lg .vd-form-switch-label::after,\n.vd-form-switch-lg .switch-label::after,\n.vd-form-switch-lg .vd-form-switch-label::after {\n  width: var(--vd-switch-thumb-size-lg);\n  height: var(--vd-switch-thumb-size-lg);\n}\n\n.switch-lg .switch-input:checked+.switch-label::after,\n.switch-lg .switch-input:checked~.switch-label::after,\n.vd-form-switch-lg .vd-form-switch-input:checked+.vd-form-switch-label::after {\n  left: calc(var(--vd-switch-width-lg) - var(--vd-switch-thumb-size-lg) - var(--vd-switch-thumb-offset));\n}\n\n/* Switch Variants */\n.switch-success .switch-input:checked+.switch-label::before,\n.switch-success .switch-input:checked~.switch-label::before,\n.vd-form-switch-success .vd-form-switch-input:checked+.vd-form-switch-label::before {\n  background-color: var(--vd-switch-bg-on-success);\n}\n\n.switch-warning .switch-input:checked+.switch-label::before,\n.switch-warning .switch-input:checked~.switch-label::before,\n.vd-form-switch-warning .vd-form-switch-input:checked+.vd-form-switch-label::before {\n  background-color: var(--vd-switch-bg-on-warning);\n}\n\n.switch-error .switch-input:checked+.switch-label::before,\n.switch-error .switch-input:checked~.switch-label::before,\n.vd-form-switch-error .vd-form-switch-input:checked+.vd-form-switch-label::before {\n  background-color: var(--vd-switch-bg-on-error);\n}\n\n/* Select Variables */\n/* stylelint-disable-next-line no-duplicate-selectors -- control-specific tokens stay grouped near their rules. */\n:root {\n  --vd-select-arrow-size: 16px;\n  --vd-select-arrow-color: var(--vd-text-secondary);\n  --vd-select-arrow-color-focus: var(--vd-color-primary);\n}\n\n/* Select Wrapper */\n.select-wrapper,\n.custom-select,\n.custom-select-wrapper {\n  position: relative;\n  display: block;\n  width: 100%;\n}\n\n/* Custom Select Button (for JS-enhanced selects) */\n.custom-select-button {\n  display: block;\n  width: 100%;\n  padding: var(--vd-input-padding-y) var(--vd-input-padding-x);\n  padding-right: calc(var(--vd-input-padding-x) + var(--vd-select-arrow-size) + 0.5rem);\n  font-family: var(--vd-font-family-sans);\n  font-size: var(--vd-input-font-size);\n  font-weight: var(--vd-font-weight-normal);\n  line-height: var(--vd-line-height-normal);\n  color: var(--vd-text-primary);\n  text-align: left;\n  background-color: var(--vd-input-bg);\n  background-image: url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23495057' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e\");\n  background-repeat: no-repeat;\n  background-position: right 0.75rem center;\n  background-size: var(--vd-select-arrow-size) 12px;\n  border: var(--vd-input-border-width) solid var(--vd-input-border-color);\n  border-radius: var(--vd-input-border-radius);\n  transition: var(--vd-input-transition);\n  cursor: pointer;\n  appearance: none;\n}\n\n.custom-select-button:hover {\n  border-color: var(--vd-input-focus-border-color);\n}\n\n.custom-select-button:focus {\n  outline: 0;\n  border-color: var(--vd-input-focus-border-color);\n  box-shadow: var(--vd-input-focus-box-shadow);\n}\n\n.custom-select-wrapper select {\n  position: absolute;\n  opacity: 0;\n  pointer-events: none;\n  width: 0;\n  height: 0;\n}\n\n/* Select (Enhanced Styling) */\nselect.vd-input,\nselect,\n.select-input,\n.custom-select-input {\n  display: block;\n  width: 100%;\n  padding: var(--vd-input-padding-y) var(--vd-input-padding-x);\n  padding-right: calc(var(--vd-input-padding-x) + var(--vd-select-arrow-size) + 0.5rem);\n  font-family: var(--vd-font-family-sans);\n  font-size: var(--vd-input-font-size);\n  font-weight: var(--vd-font-weight-normal);\n  line-height: var(--vd-line-height-normal);\n  color: var(--vd-text-primary);\n  background-color: var(--vd-input-bg);\n  background-image: url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23495057' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e\");\n  background-repeat: no-repeat;\n  background-position: right 0.75rem center;\n  background-size: var(--vd-select-arrow-size) 12px;\n  border: var(--vd-input-border-width) solid var(--vd-input-border-color);\n  border-radius: var(--vd-input-border-radius);\n  transition: var(--vd-input-transition);\n  appearance: none;\n  cursor: pointer;\n}\n\nselect.vd-input:focus,\nselect:focus,\n.select-input:focus,\n.custom-select-input:focus {\n  outline: 0;\n  border-color: var(--vd-input-focus-border-color);\n  box-shadow: var(--vd-input-focus-box-shadow);\n  background-image: url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2322b8cf' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e\");\n}\n\nselect.vd-input:disabled,\nselect:disabled,\n.select-input:disabled,\n.custom-select-input:disabled {\n  background-color: var(--vd-input-bg-disabled);\n  opacity: 0.6;\n  cursor: not-allowed;\n  background-image: url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23868e96' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e\");\n}\n\n/* Select States */\nselect.vd-input.vd-input-error,\nselect.vd-input.is-error,\n.select-input.vd-input-error,\n.select-input.is-error {\n  border-color: var(--vd-color-error);\n}\n\nselect.vd-input.vd-input-success,\nselect.vd-input.is-success,\n.select-input.vd-input-success,\n.select-input.is-success {\n  border-color: var(--vd-color-success);\n}\n\n/* Select Sizes */\nselect.vd-input-sm,\n.select-input-sm,\n.custom-select-sm {\n  padding: var(--vd-input-padding-y-sm) var(--vd-input-padding-x-sm);\n  padding-right: calc(var(--vd-input-padding-x-sm) + var(--vd-select-arrow-size) + 0.5rem);\n  font-size: var(--vd-input-font-size-sm);\n  border-radius: var(--vd-input-border-radius-sm);\n  background-size: 14px 10px;\n}\n\nselect.vd-input-lg,\n.select-input-lg,\n.custom-select-lg {\n  padding: var(--vd-input-padding-y-lg) var(--vd-input-padding-x-lg);\n  padding-right: calc(var(--vd-input-padding-x-lg) + var(--vd-select-arrow-size) + 0.5rem);\n  font-size: var(--vd-input-font-size-lg);\n  border-radius: var(--vd-input-border-radius-lg);\n  background-size: 18px 14px;\n}\n\n/* Multi-Select */\nselect[multiple].vd-input,\nselect[multiple],\n.select-input[multiple],\n.custom-select-input[multiple] {\n  padding: var(--vd-input-padding-y) var(--vd-input-padding-x);\n  padding-right: var(--vd-input-padding-x);\n  background-image: none;\n  min-height: 120px;\n}\n\nselect[multiple].vd-input option,\nselect[multiple] option,\n.select-input[multiple] option,\n.custom-select-input[multiple] option {\n  padding: 0.5rem;\n}\n\n/* Select with Custom Dropdown (for JS enhancement) */\n.custom-select-dropdown {\n  position: absolute;\n  top: 100%;\n  left: 0;\n  right: 0;\n  z-index: 1000;\n  display: none;\n  margin-top: 0.25rem;\n  background-color: var(--vd-input-bg);\n  border: 1px solid var(--vd-input-border-color);\n  border-radius: var(--vd-input-border-radius);\n  box-shadow: var(--vd-shadow-lg);\n  max-height: 300px;\n  overflow-y: auto;\n}\n\n.custom-select-dropdown.is-open {\n  display: block;\n}\n\n.custom-select-option {\n  display: block;\n  width: 100%;\n  padding: var(--vd-input-padding-y) var(--vd-input-padding-x);\n  font-size: var(--vd-input-font-size);\n  color: var(--vd-text-primary);\n  background-color: transparent;\n  border: none;\n  text-align: left;\n  cursor: pointer;\n  transition: var(--vd-transition-bg);\n}\n\n.custom-select-option:hover,\n.custom-select-option:focus {\n  background-color: var(--vd-color-primary-alpha-10);\n  outline: none;\n}\n\n.custom-select-option.is-selected {\n  background-color: var(--vd-color-primary-alpha-10);\n  color: var(--vd-color-primary);\n  font-weight: var(--vd-font-weight-medium);\n}\n\n.custom-select-option.is-disabled,\n.custom-select-option[data-value=\"\"] {\n  opacity: 0.6;\n  cursor: not-allowed;\n  color: var(--vd-text-muted);\n}\n\n.custom-select-option-group {\n  padding: 0.5rem var(--vd-input-padding-x);\n  font-size: var(--vd-font-size-sm);\n  font-weight: var(--vd-font-weight-semibold);\n  color: var(--vd-text-muted);\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n}\n\n.custom-select-search {\n  padding: var(--vd-input-padding-y) var(--vd-input-padding-x);\n  border-bottom: 1px solid var(--vd-input-border-color);\n}\n\n.custom-select-search input {\n  width: 100%;\n  padding: 0.5rem;\n  font-size: var(--vd-input-font-size-sm);\n  border: 1px solid var(--vd-input-border-color);\n  border-radius: var(--vd-input-border-radius-sm);\n}\n\n/* Dark Mode - Select Arrow Colors */\n[data-theme=\"dark\"] select.vd-input,\n[data-theme=\"dark\"] select,\n[data-theme=\"dark\"] .select-input,\n[data-theme=\"dark\"] .custom-select-input,\n[data-theme=\"dark\"] .custom-select-button {\n  background-image: url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23adb5bd' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e\");\n}\n\n[data-theme=\"dark\"] select.vd-input:focus,\n[data-theme=\"dark\"] select:focus,\n[data-theme=\"dark\"] .select-input:focus,\n[data-theme=\"dark\"] .custom-select-input:focus,\n[data-theme=\"dark\"] .custom-select-button:focus {\n  background-image: url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%233bc9db' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e\");\n}\n\n[data-theme=\"dark\"] select.vd-input:disabled,\n[data-theme=\"dark\"] select:disabled,\n[data-theme=\"dark\"] .select-input:disabled,\n[data-theme=\"dark\"] .custom-select-input:disabled,\n[data-theme=\"dark\"] .custom-select-button:disabled {\n  background-image: url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23868e96' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e\");\n}\n\n/* Mobile Touch Target Optimization */\n@media (max-width: 767px) {\n\n  .vd-input,\n  input[type=\"text\"],\n  input[type=\"email\"],\n  input[type=\"password\"],\n  input[type=\"number\"],\n  input[type=\"tel\"],\n  input[type=\"url\"],\n  input[type=\"search\"],\n  input[type=\"date\"],\n  input[type=\"time\"],\n  input[type=\"datetime-local\"],\n  .textarea,\n  textarea,\n  select,\n  .select-input,\n  .custom-select-input,\n  .custom-select-button {\n    min-height: 44px;\n    padding-top: 0.625rem;\n    padding-bottom: 0.625rem;\n  }\n\n  .checkbox-label,\n  .vd-form-check-label,\n  .radio-label,\n  .vd-form-radio-label,\n  .switch-label,\n  .vd-form-switch-label {\n    min-height: 44px;\n    padding-top: 0.5rem;\n    padding-bottom: 0.5rem;\n  }\n}\n\n/**\n * Vanduo Framework - Cards\n * Card component for content containers\n */\n\n:root {\n  /* Card Padding (Fibonacci: 13, 21, 34) */\n  --vd-card-padding: 1.3125rem;\n  /* 21px - fib */\n  --vd-card-padding-sm: 0.8125rem;\n  /* 13px - fib */\n  --vd-card-padding-lg: 2.125rem;\n  /* 34px - fib */\n\n  /* Card Border */\n  --vd-card-border-width: 1px;\n  --vd-card-border-color: var(--vd-border-color);\n  --vd-card-border-radius: var(--vd-btn-border-radius-lg);\n\n  /* Card Background */\n  --vd-card-bg: var(--vd-color-white);\n  --vd-card-bg-filled: var(--vd-bg-secondary);\n\n  /* Card Shadow */\n  --vd-card-shadow: var(--vd-shadow-sm);\n  --vd-card-shadow-elevated: var(--vd-shadow-md);\n\n  /* Card Glow Effect - uses primary color scale */\n  --vd-card-glow-color: var(--vd-primary-2);\n  --vd-card-glow-border-color: var(--vd-primary-3);\n}\n\n/* Dark Theme Overrides */\n[data-theme=\"dark\"] {\n  --vd-card-bg: var(--vd-bg-secondary);\n  --vd-card-bg-filled: var(--vd-bg-primary);\n  /* Stronger elevation on dark surfaces */\n  --vd-card-shadow-elevated: var(--vd-shadow-lg);\n  /* Glow uses lighter primary shades for dark mode visibility */\n  --vd-card-glow-color: var(--vd-primary-3);\n  --vd-card-glow-border-color: var(--vd-primary-4);\n}\n\n@media (prefers-color-scheme: dark) {\n  :root:not([data-theme]) {\n    --vd-card-bg: var(--vd-bg-secondary);\n    --vd-card-bg-filled: var(--vd-bg-primary);\n    --vd-card-shadow-elevated: var(--vd-shadow-lg);\n    /* Glow uses lighter primary shades for dark mode visibility */\n    --vd-card-glow-color: var(--vd-primary-3);\n    --vd-card-glow-border-color: var(--vd-primary-4);\n  }\n}\n\n/* Base Card */\n.vd-card {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n  word-wrap: break-word;\n  background-color: var(--vd-card-bg);\n  background-clip: border-box;\n  border: var(--vd-card-border-width) solid var(--vd-card-border-color);\n  border-radius: var(--vd-card-border-radius);\n  box-shadow: var(--vd-card-shadow);\n}\n\n.vd-card-glass {\n  background: var(--vd-glass-bg-light);\n  border-color: var(--vd-glass-border-light);\n  box-shadow: var(--vd-glass-shadow);\n  backdrop-filter: blur(var(--vd-glass-blur)) saturate(var(--vd-glass-saturate));\n  -webkit-backdrop-filter: blur(var(--vd-glass-blur)) saturate(var(--vd-glass-saturate));\n}\n\n/* Card Variants - Elevated (default) */\n.vd-card-elevated,\n.vd-card {\n  box-shadow: var(--vd-card-shadow-elevated);\n  transition: box-shadow 0.2s ease;\n  /* Fix Safari disappearing bug during transform transitions */\n  -webkit-backface-visibility: hidden;\n  backface-visibility: hidden;\n  transform: translateZ(0);\n}\n\n/* Subtle lift on hover — skip links (they have their own hover) and non-elevated variants */\n.vd-card:not(a):not(.vd-card-outlined):not(.vd-card-filled):not(.vd-card-glass):not(.vd-card-glow):hover {\n  box-shadow: var(--vd-shadow-lg);\n}\n\n/* Card Variants - Outlined */\n.vd-card-outlined {\n  box-shadow: none;\n  border: var(--vd-card-border-width) solid var(--vd-card-border-color);\n}\n\n/* Card Variants - Filled */\n.vd-card-filled {\n  background-color: var(--vd-card-bg-filled);\n  box-shadow: none;\n  border: none;\n}\n\n/* Card Header */\n.vd-card-header {\n  padding: var(--vd-card-padding);\n  margin-bottom: 0;\n  background-color: transparent;\n  border-bottom: var(--vd-card-border-width) solid var(--vd-card-border-color);\n  border-top-left-radius: calc(var(--vd-card-border-radius) - var(--vd-card-border-width));\n  border-top-right-radius: calc(var(--vd-card-border-radius) - var(--vd-card-border-width));\n}\n\n.vd-card-header:first-child {\n  border-top-left-radius: var(--vd-card-border-radius);\n  border-top-right-radius: var(--vd-card-border-radius);\n}\n\n.vd-card-header-sm {\n  padding: var(--vd-card-padding-sm);\n}\n\n.vd-card-header-lg {\n  padding: var(--vd-card-padding-lg);\n}\n\n/* Card Body */\n.vd-card-body {\n  flex: 1 1 auto;\n  padding: var(--vd-card-padding);\n}\n\n.vd-card-body-sm {\n  padding: var(--vd-card-padding-sm);\n}\n\n.vd-card-body-lg {\n  padding: var(--vd-card-padding-lg);\n}\n\n/* Card Footer */\n.vd-card-footer {\n  padding: var(--vd-card-padding);\n  margin-top: 0;\n  background-color: transparent;\n  border-top: var(--vd-card-border-width) solid var(--vd-card-border-color);\n  border-bottom-left-radius: calc(var(--vd-card-border-radius) - var(--vd-card-border-width));\n  border-bottom-right-radius: calc(var(--vd-card-border-radius) - var(--vd-card-border-width));\n}\n\n.vd-card-footer:last-child {\n  border-bottom-left-radius: var(--vd-card-border-radius);\n  border-bottom-right-radius: var(--vd-card-border-radius);\n}\n\n.vd-card-footer-sm {\n  padding: var(--vd-card-padding-sm);\n}\n\n.vd-card-footer-lg {\n  padding: var(--vd-card-padding-lg);\n}\n\n/* Card Image */\n.vd-card-image {\n  width: 100%;\n  height: auto;\n  border-top-left-radius: calc(var(--vd-card-border-radius) - var(--vd-card-border-width));\n  border-top-right-radius: calc(var(--vd-card-border-radius) - var(--vd-card-border-width));\n}\n\n.vd-card-image:first-child {\n  border-top-left-radius: var(--vd-card-border-radius);\n  border-top-right-radius: var(--vd-card-border-radius);\n}\n\n.vd-card-image:last-child {\n  border-bottom-left-radius: var(--vd-card-border-radius);\n  border-bottom-right-radius: var(--vd-card-border-radius);\n}\n\n/* Card Image Container */\n.vd-card-image-container {\n  position: relative;\n  overflow: hidden;\n  border-top-left-radius: calc(var(--vd-card-border-radius) - var(--vd-card-border-width));\n  border-top-right-radius: calc(var(--vd-card-border-radius) - var(--vd-card-border-width));\n}\n\n.vd-card-image-container:first-child {\n  border-top-left-radius: var(--vd-card-border-radius);\n  border-top-right-radius: var(--vd-card-border-radius);\n}\n\n.vd-card-image-container img {\n  width: 100%;\n  height: auto;\n  display: block;\n}\n\n/* Card Title */\n.vd-card-title {\n  margin-bottom: 0.5rem;\n  font-size: var(--vd-font-size-xl);\n  font-weight: var(--vd-font-weight-semibold);\n  color: var(--vd-text-primary);\n}\n\n.vd-card-title:last-child {\n  margin-bottom: 0;\n}\n\n/* Card Subtitle */\n.vd-card-subtitle {\n  margin-top: -0.25rem;\n  margin-bottom: 0.5rem;\n  font-size: var(--vd-font-size-sm);\n  color: var(--vd-text-secondary);\n}\n\n/* Card Text */\n.vd-card-text {\n  margin-bottom: 1rem;\n  color: var(--vd-text-primary);\n}\n\n.vd-card-text:last-child {\n  margin-bottom: 0;\n}\n\n/* Card Actions */\n.vd-card-actions {\n  display: flex;\n  gap: 0.5rem;\n  padding: var(--vd-card-padding);\n  border-top: var(--vd-card-border-width) solid var(--vd-card-border-color);\n}\n\n.vd-card-actions-sm {\n  padding: var(--vd-card-padding-sm);\n}\n\n.vd-card-actions-lg {\n  padding: var(--vd-card-padding-lg);\n}\n\n/* Card with No Padding */\n.vd-card-no-padding .vd-card-body {\n  padding: 0;\n}\n\n.vd-card-no-padding .vd-card-header {\n  padding: var(--vd-card-padding);\n}\n\n.vd-card-no-padding .vd-card-footer {\n  padding: var(--vd-card-padding);\n}\n\n/* Card Sizes - Compact */\n.vd-card-compact .vd-card-header,\n.vd-card-compact .vd-card-body,\n.vd-card-compact .vd-card-footer {\n  padding: var(--vd-card-padding-sm);\n}\n\n/* Card Sizes - Spacious */\n.vd-card-spacious .vd-card-header,\n.vd-card-spacious .vd-card-body,\n.vd-card-spacious .vd-card-footer {\n  padding: var(--vd-card-padding-lg);\n}\n\n/* Card Glow Effect */\n.vd-card-glow {\n  transition: box-shadow 0.3s ease, border-color 0.3s ease;\n  border-color: var(--vd-card-border-color);\n}\n\n.vd-card-glow:hover {\n  box-shadow: 0 0 15px 0 var(--vd-card-glow-color), var(--vd-card-shadow);\n  border-color: var(--vd-card-glow-border-color);\n}\n\n/* Card Link */\na.vd-card {\n  text-decoration: none;\n  color: inherit;\n  transition: transform 0.2s ease, box-shadow 0.2s ease;\n}\n\na.vd-card:hover {\n  text-decoration: none;\n  transform: translateY(-2px) translateZ(0);\n  box-shadow: var(--vd-shadow-xl);\n}\n\na.vd-card.vd-card-glow:hover {\n  box-shadow: 0 0 15px 0 var(--vd-card-glow-color), var(--vd-shadow-xl);\n  border-color: var(--vd-card-glow-border-color);\n}\n\na.vd-card:active {\n  transform: translateY(0) translateZ(0);\n}\n\n/* Card Groups (for multiple cards) */\n.vd-card-group {\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n  /* Fibonacci-inspired spacing */\n}\n\n@media (min-width: 768px) {\n  .vd-card-group {\n    flex-direction: row;\n  }\n\n  .vd-card-group>.vd-card {\n    flex: 1 1 0%;\n  }\n}\n\n/**\n * Vanduo Framework — Expanding flex cards\n *\n * Adapted from MIT-licensed CodePen \"Expanding flex cards\" by Zed Dash:\n * https://codepen.io/z-/pen/OBPJKK\n *\n * Usage:\n *   <div class=\"vd-expanding-cards\" data-vd-expanding-cards>\n *     <div class=\"vd-expanding-card is-active\" style=\"--vd-expanding-card-bg: url('components/...')\">\n *       <div class=\"vd-expanding-card-shadow\"></div>\n *       <div class=\"vd-expanding-card-label\">...</div>\n *     </div>\n *   </div>\n */\n\n.vd-expanding-cards {\n  display: flex;\n  flex-direction: row;\n  align-items: stretch;\n  overflow: hidden;\n  min-width: 600px;\n  max-width: 900px;\n  width: calc(100% - 100px);\n  height: 400px;\n}\n\n.vd-expanding-card {\n  position: relative;\n  overflow: hidden;\n  min-width: 60px;\n  margin: 10px;\n  flex-grow: 1;\n  border-radius: 30px;\n  cursor: pointer;\n  background: var(--vd-expanding-card-bg, var(--vd-expanding-card-bg-default, #e6e9ed));\n  background-repeat: no-repeat;\n  background-size: cover;\n  background-position: center;\n  transition: 0.5s cubic-bezier(0.05, 0.61, 0.41, 0.95);\n}\n\n.vd-expanding-card:nth-child(1) {\n  --vd-expanding-card-bg-default: #ed5565;\n}\n\n.vd-expanding-card:nth-child(2) {\n  --vd-expanding-card-bg-default: #fc6e51;\n}\n\n.vd-expanding-card:nth-child(3) {\n  --vd-expanding-card-bg-default: #ffce54;\n}\n\n.vd-expanding-card:nth-child(4) {\n  --vd-expanding-card-bg-default: #2ecc71;\n}\n\n.vd-expanding-card:nth-child(5) {\n  --vd-expanding-card-bg-default: #5d9cec;\n}\n\n.vd-expanding-card:nth-child(6) {\n  --vd-expanding-card-bg-default: #ac92ec;\n}\n\n.vd-expanding-card.is-active {\n  flex-grow: 10000;\n  transform: scale(1);\n  max-width: 600px;\n  margin: 0;\n  border-radius: 40px;\n}\n\n.vd-expanding-card.is-active .vd-expanding-card-shadow {\n  box-shadow:\n    inset 0 -120px 120px -120px black,\n    inset 0 -120px 120px -100px black;\n}\n\n.vd-expanding-card.is-active .vd-expanding-card-label {\n  bottom: 20px;\n  left: 20px;\n}\n\n.vd-expanding-card.is-active .vd-expanding-card-info > div {\n  left: 0;\n  opacity: 1;\n}\n\n.vd-expanding-card:not(.is-active) {\n  flex-grow: 1;\n  border-radius: 30px;\n}\n\n.vd-expanding-card:not(.is-active) .vd-expanding-card-shadow {\n  bottom: -40px;\n  box-shadow:\n    inset 0 -120px 0 -120px black,\n    inset 0 -120px 0 -100px black;\n}\n\n.vd-expanding-card:not(.is-active) .vd-expanding-card-label {\n  bottom: 10px;\n  left: 10px;\n}\n\n.vd-expanding-card:not(.is-active) .vd-expanding-card-info > div {\n  left: 20px;\n  opacity: 0;\n}\n\n.vd-expanding-card-shadow {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  height: 120px;\n  transition: 0.5s cubic-bezier(0.05, 0.61, 0.41, 0.95);\n}\n\n.vd-expanding-card-label {\n  display: flex;\n  position: absolute;\n  right: 0;\n  height: 40px;\n  transition: 0.5s cubic-bezier(0.05, 0.61, 0.41, 0.95);\n}\n\n.vd-expanding-card-icon {\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  min-width: 40px;\n  max-width: 40px;\n  height: 40px;\n  border-radius: 100%;\n  background-color: #fff;\n  color: var(--vd-expanding-card-bg-default, var(--vd-color-primary, #3b82f6));\n}\n\n.vd-expanding-card-info {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  margin-left: 10px;\n  color: #fff;\n  white-space: pre;\n}\n\n.vd-expanding-card-info > div {\n  position: relative;\n  transition:\n    0.5s cubic-bezier(0.05, 0.61, 0.41, 0.95),\n    opacity 0.5s ease-out;\n}\n\n.vd-expanding-card-title {\n  font-weight: bold;\n  font-size: 1.2rem;\n}\n\n.vd-expanding-card-subtitle {\n  transition-delay: 0.1s;\n}\n\n/* Mobile: vertical stack, expand in place (mirrors desktop flex-grow model) */\n@media screen and (max-width: 767.98px) {\n  .vd-expanding-cards {\n    --vd-expanding-card-mobile-stripe: 56px;\n    --vd-expanding-card-mobile-active: clamp(200px, 55vw, 280px);\n    --vd-expanding-card-mobile-gap: 8px;\n\n    flex-direction: column;\n    align-items: stretch;\n    overflow: hidden;\n    min-width: 0;\n    max-width: 100%;\n    width: 100%;\n    height: min(\n      72vh,\n      calc(\n        var(--vd-expanding-card-mobile-active) +\n          5 * (var(--vd-expanding-card-mobile-stripe) + var(--vd-expanding-card-mobile-gap))\n      )\n    );\n    gap: var(--vd-expanding-card-mobile-gap);\n  }\n\n  .vd-expanding-card {\n    min-width: 0;\n    width: 100%;\n    margin: 0;\n    flex: 1 1 var(--vd-expanding-card-mobile-stripe);\n    min-height: var(--vd-expanding-card-mobile-stripe);\n    transition:\n      flex 0.5s cubic-bezier(0.05, 0.61, 0.41, 0.95),\n      min-height 0.5s cubic-bezier(0.05, 0.61, 0.41, 0.95),\n      border-radius 0.5s cubic-bezier(0.05, 0.61, 0.41, 0.95),\n      margin 0.5s cubic-bezier(0.05, 0.61, 0.41, 0.95);\n  }\n\n  .vd-expanding-card.is-active {\n    flex: 10000 1 var(--vd-expanding-card-mobile-active);\n    min-height: var(--vd-expanding-card-mobile-active);\n    max-width: none;\n    border-radius: 32px;\n  }\n\n  .vd-expanding-card:not(.is-active) {\n    flex: 1 1 var(--vd-expanding-card-mobile-stripe);\n    min-height: var(--vd-expanding-card-mobile-stripe);\n    border-radius: 28px;\n  }\n\n  .vd-expanding-card.is-active .vd-expanding-card-shadow {\n    box-shadow:\n      inset 0 -120px 120px -120px black,\n      inset 0 -120px 120px -100px black;\n  }\n\n  .vd-expanding-card:not(.is-active) .vd-expanding-card-shadow {\n    bottom: 0;\n    height: 100%;\n    box-shadow: inset 0 0 80px 0 rgb(0 0 0 / 35%);\n  }\n\n  .vd-expanding-card.is-active .vd-expanding-card-label {\n    bottom: 20px;\n    left: 20px;\n    top: auto;\n    transform: none;\n    align-items: flex-end;\n  }\n\n  .vd-expanding-card:not(.is-active) .vd-expanding-card-label {\n    bottom: 8px;\n    left: 12px;\n    top: auto;\n    right: auto;\n    height: 40px;\n    transform: none;\n    align-items: center;\n  }\n\n  .vd-expanding-card:not(.is-active) .vd-expanding-card-info {\n    min-width: 0;\n    flex: 1;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n\n  .vd-expanding-card:not(.is-active) .vd-expanding-card-info > div {\n    left: 0;\n    opacity: 1;\n  }\n\n  .vd-expanding-card:not(.is-active) .vd-expanding-card-subtitle {\n    opacity: 0;\n    max-height: 0;\n    overflow: hidden;\n  }\n\n  .vd-expanding-card.is-active .vd-expanding-card-subtitle {\n    opacity: 1;\n    max-height: 2em;\n  }\n\n  .vd-expanding-card:not(.is-active) .vd-expanding-card-title {\n    font-size: 1rem;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .vd-expanding-card,\n  .vd-expanding-card-shadow,\n  .vd-expanding-card-label,\n  .vd-expanding-card-info > div {\n    transition: none !important;\n  }\n}\n\n/**\n * Vanduo Framework - Navbar\n * Navigation bar component with responsive mobile menu\n */\n\n:root {\n  /* Navbar Colors */\n  --vd-navbar-bg: var(--vd-color-white);\n  --vd-navbar-bg-dark: var(--vd-bg-dark);\n  --vd-navbar-text-color: var(--vd-text-primary);\n  --vd-navbar-text-color-dark: var(--vd-text-inverse);\n  --vd-navbar-link-color: var(--vd-text-primary);\n  --vd-navbar-link-hover-color: var(--vd-color-primary);\n  --vd-navbar-link-active-color: var(--vd-color-primary);\n  --vd-navbar-border-color: var(--vd-border-color);\n  \n  /* Navbar Spacing (Fibonacci) */\n  --vd-navbar-padding-y: 0.8125rem;   /* 13px - fib */\n  --vd-navbar-padding-x: 1.3125rem;   /* 21px - fib (21/13 ~ phi) */\n  --vd-navbar-height: 3.4375rem;      /* 55px - fib */\n  --vd-navbar-brand-font-size: var(--vd-font-size-xl);\n  --vd-navbar-nav-gap: 1.3125rem;     /* 21px - fib */\n  --vd-navbar-actions-gap: 2.125rem;  /* 34px - fib */\n\n  /* Mobile Menu */\n  --vd-navbar-mobile-menu-bg: var(--vd-color-white);\n  --vd-navbar-mobile-menu-bg-dark: var(--vd-bg-dark);\n  --vd-navbar-mobile-menu-width: 233px; /* fib */\n  --vd-navbar-mobile-overlay-bg: rgba(0, 0, 0, 0.5);\n}\n\n/* Dark Theme Overrides */\n[data-theme=\"dark\"] {\n  --vd-navbar-bg: var(--vd-bg-primary);\n  --vd-navbar-text-color: var(--vd-text-primary);\n  --vd-navbar-link-color: var(--vd-text-primary);\n  --vd-navbar-mobile-menu-bg: var(--vd-bg-primary);\n}\n\n@media (prefers-color-scheme: dark) {\n  :root:not([data-theme]) {\n    --vd-navbar-bg: var(--vd-bg-primary);\n    --vd-navbar-text-color: var(--vd-text-primary);\n    --vd-navbar-link-color: var(--vd-text-primary);\n    --vd-navbar-mobile-menu-bg: var(--vd-bg-primary);\n  }\n}\n\n/* Base Navbar */\n.vd-navbar {\n  position: relative;\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  justify-content: space-between;\n  padding: var(--vd-navbar-padding-y) var(--vd-navbar-padding-x);\n  background-color: var(--vd-navbar-bg);\n  border-bottom: 1px solid var(--vd-navbar-border-color);\n  min-height: var(--vd-navbar-height);\n}\n\n/* Navbar Variant - Glass */\n.vd-navbar-glass {\n  background: var(--vd-glass-bg-light);\n  border-bottom: 1px solid var(--vd-glass-border-light);\n  box-shadow: var(--vd-glass-shadow);\n  backdrop-filter: blur(var(--vd-glass-blur)) saturate(var(--vd-glass-saturate));\n  -webkit-backdrop-filter: blur(var(--vd-glass-blur)) saturate(var(--vd-glass-saturate));\n  transition:\n    background var(--vd-transition-normal, 0.25s ease),\n    border-color var(--vd-transition-normal, 0.25s ease),\n    box-shadow var(--vd-transition-normal, 0.25s ease),\n    backdrop-filter var(--vd-transition-normal, 0.25s ease);\n}\n\n/* Scroll-activated: transparent at rest, frosted glass once scrolled */\n.vd-navbar-glass:not(.vd-navbar-scrolled) {\n  background: transparent;\n  border-bottom-color: transparent;\n  box-shadow: none;\n  backdrop-filter: none;\n  -webkit-backdrop-filter: none;\n}\n\n/* Navbar Container - matches .vd-container-responsive breakpoints for alignment with page content */\n.vd-navbar-container {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  justify-content: space-between;\n  width: 100%;\n  max-width: var(--vd-container-max-width);\n  margin-left: auto;\n  margin-right: auto;\n  padding-left: var(--vd-container-padding);\n  padding-right: var(--vd-container-padding);\n}\n\n@media (min-width: 1200px) {\n  .vd-navbar-container {\n    max-width: var(--vd-container-xl);\n  }\n}\n\n@media (min-width: 1400px) {\n  .vd-navbar-container {\n    max-width: var(--vd-container-2xl);\n  }\n}\n\n/* Navbar Brand */\n.vd-navbar-brand {\n  display: inline-flex;\n  align-items: center;\n  margin-right: 1rem;\n  margin-bottom: 0.5rem;\n  font-size: var(--vd-navbar-brand-font-size);\n  font-weight: var(--vd-font-weight-bold);\n  line-height: 1;\n  white-space: nowrap;\n  color: var(--vd-navbar-text-color);\n  text-decoration: none;\n  transition: color 0.2s ease;\n}\n\n.vd-navbar-brand a {\n  color: inherit;\n  text-decoration: none;\n  font-weight: inherit;\n}\n\n.vd-navbar-brand:hover,\n.vd-navbar-brand:focus {\n  color: var(--vd-navbar-link-hover-color);\n  text-decoration: none;\n}\n\n.vd-navbar-brand img {\n  height: 2rem;\n  width: auto;\n  margin-right: 0.5rem;\n}\n\n/* Navbar Navigation */\n.vd-navbar-nav {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  padding-left: 0;\n  margin-bottom: 0;\n  list-style: none;\n  gap: 0;\n}\n\n.vd-navbar-nav .vd-nav-link {\n  padding: 0.5rem 1rem;\n  color: var(--vd-navbar-link-color);\n  text-decoration: none;\n  transition: color 0.2s ease, background-color 0.2s ease;\n  display: block;\n}\n\n.vd-navbar-nav .vd-nav-link:hover,\n.vd-navbar-nav .vd-nav-link:focus {\n  color: var(--vd-navbar-link-hover-color);\n  text-decoration: none;\n  background-color: rgba(0, 0, 0, 0.05);\n}\n\n.vd-navbar-nav .vd-nav-link:focus-visible {\n  outline: 2px solid var(--vd-color-primary);\n  outline-offset: 2px;\n}\n\n.vd-navbar-nav .vd-nav-link.active {\n  color: var(--vd-navbar-link-active-color);\n  font-weight: var(--vd-font-weight-semibold);\n}\n\n/* Navbar Toggle (Hamburger Menu) */\n.vd-navbar-toggle,\n.vd-navbar-burger {\n  display: none;\n  flex-direction: column;\n  justify-content: space-around;\n  width: 2rem;\n  height: 2rem;\n  background: transparent;\n  border: none;\n  cursor: pointer;\n  padding: 0;\n  z-index: 1001;\n}\n\n.vd-navbar-toggle span,\n.vd-navbar-burger span {\n  width: 2rem;\n  height: 2px;\n  background-color: var(--vd-navbar-text-color);\n  border-radius: 10px;\n  transition: all 0.3s ease;\n  transform-origin: center;\n}\n\n.vd-navbar-toggle.is-active span:nth-child(1),\n.vd-navbar-burger.is-active span:nth-child(1) {\n  transform: rotate(45deg) translate(5px, 5px);\n}\n\n.vd-navbar-toggle.is-active span:nth-child(2),\n.vd-navbar-burger.is-active span:nth-child(2) {\n  opacity: 0;\n}\n\n.vd-navbar-toggle.is-active span:nth-child(3),\n.vd-navbar-burger.is-active span:nth-child(3) {\n  transform: rotate(-45deg) translate(7px, -6px);\n}\n\n/* Mobile Menu */\n.vd-navbar-menu {\n  display: flex;\n  flex-basis: 100%;\n  flex-grow: 1;\n  align-items: center;\n}\n\n.vd-navbar-menu.is-open {\n  display: flex;\n}\n\n/* Navbar Actions */\n.vd-navbar-actions {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n}\n\n/* Mobile Menu Overlay */\n.vd-navbar-overlay {\n  display: none;\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background-color: var(--vd-navbar-mobile-overlay-bg);\n  z-index: 999;\n  opacity: 0;\n  transition: opacity 0.3s ease;\n}\n\n.vd-navbar-overlay.is-active {\n  display: block;\n  opacity: 1;\n}\n\n/* Navbar Variants - Dark */\n.vd-navbar-dark {\n  background-color: var(--vd-navbar-bg-dark);\n  color: var(--vd-navbar-text-color-dark);\n  border-bottom-color: rgba(255, 255, 255, 0.1);\n}\n\n.vd-navbar-dark .vd-navbar-brand {\n  color: var(--vd-navbar-text-color-dark);\n}\n\n.vd-navbar-dark .vd-navbar-brand:hover,\n.vd-navbar-dark .vd-navbar-brand:focus {\n  color: var(--vd-color-primary-light);\n}\n\n.vd-navbar-dark .vd-navbar-nav .vd-nav-link {\n  color: rgba(255, 255, 255, 0.8);\n}\n\n.vd-navbar-dark .vd-navbar-nav .vd-nav-link:hover,\n.vd-navbar-dark .vd-navbar-nav .vd-nav-link:focus {\n  color: var(--vd-color-primary-light);\n  background-color: rgba(255, 255, 255, 0.1);\n}\n\n.vd-navbar-dark .vd-navbar-nav .vd-nav-link.active {\n  color: var(--vd-color-primary-light);\n}\n\n.vd-navbar-dark .vd-navbar-toggle span,\n.vd-navbar-dark .vd-navbar-burger span {\n  background-color: var(--vd-navbar-text-color-dark);\n}\n\n/* Navbar Variants - Transparent */\n.vd-navbar-transparent {\n  background-color: transparent;\n  border-bottom: none;\n}\n\n.vd-navbar-transparent.vd-navbar-scrolled {\n  background-color: var(--vd-navbar-bg);\n  border-bottom: 1px solid var(--vd-navbar-border-color);\n}\n\n.vd-navbar-transparent.vd-navbar-dark.vd-navbar-scrolled {\n  background-color: var(--vd-navbar-bg-dark);\n  border-bottom-color: rgba(255, 255, 255, 0.1);\n}\n\n/* Navbar Positioning - Fixed Top */\n.vd-navbar-fixed,\n.vd-navbar-fixed-top {\n  position: fixed;\n  top: 0;\n  right: 0;\n  left: 0;\n  z-index: 1000;\n  box-shadow: var(--vd-shadow-sm);\n}\n\n.vd-navbar-fixed ~ *,\n.vd-navbar-fixed-top ~ * {\n  padding-top: var(--vd-navbar-height);\n}\n\n/* Navbar Positioning - Fixed Bottom */\n.vd-navbar-fixed-bottom {\n  position: fixed;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  z-index: 1000;\n  box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1);\n}\n\n.vd-navbar-fixed-bottom ~ * {\n  padding-bottom: var(--vd-navbar-height);\n}\n\n/* Navbar Positioning - Sticky */\n.vd-navbar-sticky {\n  position: sticky;\n  top: 0;\n  z-index: 1000;\n  box-shadow: var(--vd-shadow-sm);\n}\n\n/* Navbar Dropdown */\n.vd-navbar-dropdown {\n  position: relative;\n}\n\n.vd-navbar-dropdown-menu {\n  position: absolute;\n  top: 100%;\n  left: 0;\n  z-index: 1000;\n  display: none;\n  min-width: 200px;\n  padding: 0.5rem 0;\n  margin: 0.125rem 0 0;\n  background-color: var(--vd-color-white);\n  border: 1px solid var(--vd-navbar-border-color);\n  border-radius: var(--vd-btn-border-radius);\n  box-shadow: var(--vd-shadow-md);\n  list-style: none;\n}\n\n.vd-navbar-dropdown-menu.is-open {\n  display: block;\n}\n\n.vd-navbar-dropdown-item {\n  display: block;\n  width: 100%;\n  padding: 0.5rem 1rem;\n  clear: both;\n  font-weight: var(--vd-font-weight-normal);\n  color: var(--vd-navbar-link-color);\n  text-align: inherit;\n  text-decoration: none;\n  white-space: nowrap;\n  background-color: transparent;\n  border: 0;\n  transition: background-color 0.2s ease, color 0.2s ease;\n}\n\n.vd-navbar-dropdown-item:hover,\n.vd-navbar-dropdown-item:focus {\n  color: var(--vd-navbar-link-hover-color);\n  background-color: var(--vd-bg-secondary);\n  text-decoration: none;\n}\n\n.vd-navbar-dropdown-item.active {\n  color: var(--vd-navbar-link-active-color);\n  background-color: var(--vd-color-primary-alpha-10);\n}\n\n.vd-navbar-dark .vd-navbar-dropdown-menu {\n  background-color: var(--vd-navbar-bg-dark);\n  border-color: rgba(255, 255, 255, 0.1);\n}\n\n.vd-navbar-dark .vd-navbar-dropdown-item {\n  color: rgba(255, 255, 255, 0.8);\n}\n\n.vd-navbar-dark .vd-navbar-dropdown-item:hover,\n.vd-navbar-dark .vd-navbar-dropdown-item:focus {\n  color: var(--vd-color-primary-light);\n  background-color: rgba(255, 255, 255, 0.1);\n}\n\n/* Desktop Layout */\n@media (min-width: 992px) {\n  .vd-navbar-container {\n    position: relative;\n  }\n\n  .vd-navbar-nav {\n    flex-direction: row;\n    flex-wrap: wrap;\n    gap: 0.5rem var(--vd-navbar-nav-gap);\n    position: absolute;\n    left: 50%;\n    transform: translateX(-50%);\n    z-index: 1;\n  }\n\n  .vd-navbar-nav .vd-nav-link {\n    padding: 0.5rem 0;\n    background-color: transparent;\n  }\n\n  .vd-navbar-nav .vd-nav-link:hover,\n  .vd-navbar-nav .vd-nav-link:focus {\n    background-color: transparent;\n  }\n\n  .vd-navbar-toggle,\n  .vd-navbar-burger {\n    display: none;\n  }\n\n  .vd-navbar-menu {\n    display: flex;\n    flex: 1;\n    flex-wrap: wrap;\n    align-items: center;\n    justify-content: flex-end;\n    min-width: 0;\n  }\n\n  .vd-navbar-actions {\n    margin-left: var(--vd-navbar-actions-gap);\n  }\n\n  .vd-navbar-dropdown-menu {\n    margin-top: 0.5rem;\n  }\n}\n\n/* Mobile Layout */\n@media (max-width: 991.98px) {\n  .vd-navbar-toggle,\n  .vd-navbar-burger {\n    display: flex;\n  }\n  \n  .vd-navbar-menu {\n    position: fixed;\n    top: 0;\n    right: -100%;\n    width: var(--vd-navbar-mobile-menu-width);\n    height: 100vh;\n    background-color: var(--vd-navbar-mobile-menu-bg);\n    flex-direction: column;\n    align-items: flex-start;\n    padding: 4rem 1.5rem 1.5rem;\n    box-shadow: -2px 0 8px rgba(0, 0, 0, 0.1);\n    transition: right 0.3s ease;\n    z-index: 1000;\n    overflow-y: auto;\n  }\n\n  .vd-navbar-glass .vd-navbar-menu {\n    background: var(--vd-glass-bg-light);\n    border-left: 1px solid var(--vd-glass-border-light);\n    backdrop-filter: blur(var(--vd-glass-blur)) saturate(var(--vd-glass-saturate));\n    -webkit-backdrop-filter: blur(var(--vd-glass-blur)) saturate(var(--vd-glass-saturate));\n  }\n  \n  .vd-navbar-menu.is-open {\n    right: 0;\n  }\n  \n  .vd-navbar-dark .vd-navbar-menu {\n    background-color: var(--vd-navbar-mobile-menu-bg-dark);\n  }\n  \n  .vd-navbar-nav {\n    width: 100%;\n    gap: 0;\n  }\n  \n  .vd-navbar-nav .vd-nav-link {\n    width: 100%;\n    padding: 1rem;\n    border-bottom: 1px solid var(--vd-navbar-border-color);\n  }\n  \n  .vd-navbar-nav .vd-nav-link:last-child {\n    border-bottom: none;\n  }\n  \n  .vd-navbar-dark .vd-navbar-nav .vd-nav-link {\n    border-bottom-color: rgba(255, 255, 255, 0.1);\n  }\n  \n  .vd-navbar-dropdown-menu {\n    position: static;\n    display: block;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    box-shadow: none;\n    background-color: var(--vd-bg-secondary);\n  }\n  \n  .vd-navbar-dark .vd-navbar-dropdown-menu {\n    background-color: rgba(255, 255, 255, 0.05);\n  }\n  \n  .vd-navbar-actions {\n    margin-top: 1rem;\n    padding-top: 1rem;\n    border-top: 1px solid var(--vd-navbar-border-color);\n    width: 100%;\n  }\n  \n  .vd-navbar-dark .vd-navbar-actions {\n    border-top-color: rgba(255, 255, 255, 0.1);\n  }\n}\n\n/* Navbar Utilities */\n.vd-navbar-expand {\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n}\n\n.vd-navbar-expand .vd-navbar-nav {\n  flex-direction: row;\n}\n\n.vd-navbar-expand .vd-navbar-toggle {\n  display: none;\n}\n\n/* Body Scroll Lock - class-based to avoid conflicts with modals */\n.body-navbar-open {\n  overflow: hidden;\n}\n\n\n/**\n * Vanduo Framework - Footer\n * Footer component for site footers\n */\n\n:root {\n  /* Footer Colors */\n  --vd-footer-bg: var(--vd-bg-secondary);\n  --vd-footer-bg-dark: var(--vd-bg-dark);\n  --vd-footer-text-color: var(--vd-text-primary);\n  --vd-footer-text-color-dark: var(--vd-text-inverse);\n  --vd-footer-link-color: var(--vd-text-secondary);\n  --vd-footer-link-hover-color: var(--vd-color-primary);\n  --vd-footer-border-color: var(--vd-border-color);\n  --vd-footer-heading-color: var(--vd-text-primary);\n  \n  /* Footer Spacing (Fibonacci) */\n  --vd-footer-padding-y: 3.4375rem;    /* 55px - fib */\n  --vd-footer-padding-x: 1.3125rem;    /* 21px - fib */\n  --vd-footer-padding-y-sm: 2.125rem;  /* 34px - fib */\n  --vd-footer-padding-y-lg: 5.5625rem; /* 89px - fib */\n  --vd-footer-section-spacing: 2.125rem; /* 34px - fib */\n}\n\n/* Dark Theme Overrides */\n[data-theme=\"dark\"] {\n  --vd-footer-bg: var(--vd-bg-secondary);\n  --vd-footer-text-color: var(--vd-text-primary);\n  --vd-footer-link-color: var(--vd-text-secondary);\n  --vd-footer-heading-color: var(--vd-text-primary);\n}\n\n@media (prefers-color-scheme: dark) {\n  :root:not([data-theme]) {\n    --vd-footer-bg: var(--vd-bg-secondary);\n    --vd-footer-text-color: var(--vd-text-primary);\n    --vd-footer-link-color: var(--vd-text-secondary);\n    --vd-footer-heading-color: var(--vd-text-primary);\n  }\n}\n\n/* Base Footer */\n.vd-footer {\n  padding: var(--vd-footer-padding-y) var(--vd-footer-padding-x);\n  background-color: var(--vd-footer-bg);\n  color: var(--vd-footer-text-color);\n  border-top: 1px solid var(--vd-footer-border-color);\n}\n\n/* Footer Container */\n.vd-footer-container {\n  max-width: var(--vd-container-max-width);\n  margin-left: auto;\n  margin-right: auto;\n  padding-left: var(--vd-container-padding);\n  padding-right: var(--vd-container-padding);\n}\n\n/* Footer Sections */\n.vd-footer-section {\n  margin-bottom: var(--vd-footer-section-spacing);\n}\n\n.vd-footer-section:last-child {\n  margin-bottom: 0;\n}\n\n/* Footer Headings */\n.vd-footer-heading {\n  font-size: var(--vd-font-size-lg);\n  font-weight: var(--vd-font-weight-semibold);\n  color: var(--vd-footer-heading-color);\n  margin-bottom: 1rem;\n  margin-top: 0;\n}\n\n/* Footer Links */\n.vd-footer-link {\n  display: inline-block;\n  color: var(--vd-footer-link-color);\n  text-decoration: none;\n  transition: color 0.2s ease;\n  margin-bottom: 0.5rem;\n}\n\n.vd-footer-link:hover {\n  color: var(--vd-footer-link-hover-color);\n  text-decoration: underline;\n}\n\n.vd-footer-link:focus {\n  outline: 2px solid var(--vd-color-primary);\n  outline-offset: 2px;\n  border-radius: 0.25rem;\n}\n\n/* Footer Lists */\n.vd-footer-list {\n  list-style: none;\n  padding: 0;\n  margin: 0;\n}\n\n.vd-footer-list-item {\n  margin-bottom: 0.5rem;\n}\n\n.vd-footer-list-item:last-child {\n  margin-bottom: 0;\n}\n\n/* Copyright Area */\n.vd-footer-copyright {\n  padding-top: 2rem;\n  margin-top: 2rem;\n  border-top: 1px solid var(--vd-footer-border-color);\n  text-align: center;\n  font-size: var(--vd-font-size-sm);\n  color: var(--vd-text-muted);\n}\n\n.vd-footer-copyright-left {\n  text-align: left;\n}\n\n.vd-footer-copyright-right {\n  text-align: right;\n}\n\n/* Multi-Column Footer Layouts */\n.vd-footer-2col,\n.vd-footer-3col,\n.vd-footer-4col {\n  display: grid;\n  gap: var(--vd-footer-section-spacing);\n}\n\n.vd-footer-2col {\n  grid-template-columns: 1fr;\n}\n\n.vd-footer-3col {\n  grid-template-columns: 1fr;\n}\n\n.vd-footer-4col {\n  grid-template-columns: 1fr;\n}\n\n@media (min-width: 768px) {\n  .vd-footer-2col {\n    grid-template-columns: repeat(2, 1fr);\n  }\n  \n  .vd-footer-3col {\n    grid-template-columns: repeat(3, 1fr);\n  }\n  \n  .vd-footer-4col {\n    grid-template-columns: repeat(4, 1fr);\n  }\n}\n\n/* Footer Variants - Dark */\n.vd-footer-dark {\n  background-color: var(--vd-footer-bg-dark);\n  color: var(--vd-footer-text-color-dark);\n  border-top-color: rgba(255, 255, 255, 0.1);\n}\n\n.vd-footer-dark .vd-footer-heading {\n  color: var(--vd-footer-text-color-dark);\n}\n\n.vd-footer-dark .vd-footer-link {\n  color: rgba(255, 255, 255, 0.7);\n}\n\n.vd-footer-dark .vd-footer-link:hover {\n  color: var(--vd-color-primary-light);\n}\n\n.vd-footer-dark .vd-footer-copyright {\n  border-top-color: rgba(255, 255, 255, 0.1);\n  color: rgba(255, 255, 255, 0.6);\n}\n\n/* Footer Sizes */\n.vd-footer-sm {\n  padding: var(--vd-footer-padding-y-sm) var(--vd-footer-padding-x);\n}\n\n.vd-footer-lg {\n  padding: var(--vd-footer-padding-y-lg) var(--vd-footer-padding-x);\n}\n\n/* Footer with Container */\n.vd-footer .container {\n  max-width: var(--vd-container-max-width);\n}\n\n/* Footer Brand/Logo Area */\n.vd-footer-brand {\n  margin-bottom: 1rem;\n}\n\n.vd-footer-brand img {\n  max-height: 2rem;\n  width: auto;\n}\n\n.vd-footer-brand-text {\n  font-size: var(--vd-font-size-xl);\n  font-weight: var(--vd-font-weight-bold);\n  color: var(--vd-footer-heading-color);\n  text-decoration: none;\n}\n\n.vd-footer-brand-text:hover {\n  text-decoration: none;\n  color: var(--vd-footer-link-hover-color);\n}\n\n/* Footer Social Links */\n.vd-footer-social {\n  display: flex;\n  gap: 1rem;\n  margin-top: 1rem;\n}\n\n.vd-footer-social-link {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 2.5rem;\n  height: 2.5rem;\n  border-radius: 50%;\n  background-color: rgba(0, 0, 0, 0.05);\n  color: var(--vd-footer-link-color);\n  text-decoration: none;\n  transition: all 0.2s ease;\n}\n\n.vd-footer-social-link:hover {\n  background-color: var(--vd-color-primary);\n  color: var(--vd-color-white);\n  transform: translateY(-2px);\n}\n\n.vd-footer-dark .vd-footer-social-link {\n  background-color: rgba(255, 255, 255, 0.1);\n  color: rgba(255, 255, 255, 0.7);\n}\n\n.vd-footer-dark .vd-footer-social-link:hover {\n  background-color: var(--vd-color-primary);\n  color: var(--vd-color-white);\n}\n\n/* Responsive Footer */\n@media (max-width: 767.98px) {\n  .vd-footer-2col,\n  .vd-footer-3col,\n  .vd-footer-4col {\n    grid-template-columns: 1fr;\n  }\n  \n  .vd-footer-copyright-left,\n  .vd-footer-copyright-right {\n    text-align: center;\n  }\n}\n\n/* Made with Kilo Code Section */\n.vd-footer-made-with {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 0.75rem;\n  padding: 1.5rem 0;\n  margin-top: 1.5rem;\n  border-top: 1px solid var(--vd-footer-border-color);\n}\n\n.vd-footer-made-with-text {\n  font-size: var(--vd-font-size-sm);\n  color: var(--vd-text-muted);\n  font-weight: var(--vd-font-weight-medium);\n  letter-spacing: 0.02em;\n}\n\n.vd-footer-kilo-link {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0.375rem;\n  border-radius: 0.5rem;\n  background: rgba(0, 0, 0, 0.04);\n  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n  text-decoration: none;\n}\n\n.vd-footer-kilo-link:hover {\n  background: rgba(0, 0, 0, 0.08);\n  transform: translateY(-2px);\n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\n}\n\n.vd-footer-kilo-link:focus {\n  outline: 2px solid var(--vd-color-primary);\n  outline-offset: 2px;\n}\n\n.vd-footer-kilo-logo {\n  height: 1.75rem;\n  width: auto;\n  display: block;\n  border-radius: 0.25rem;\n}\n\n/* Vertical Separator */\n.vd-footer-separator {\n  width: 1px;\n  height: 1.5rem;\n  background-color: var(--vd-footer-border-color);\n  margin: 0 0.5rem;\n}\n\n/* Buy Me A Coffee Link */\n.vd-footer-bmac-link {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n  text-decoration: none;\n}\n\n.vd-footer-bmac-link:hover {\n  transform: translateY(-2px);\n  filter: brightness(1.05);\n}\n\n.vd-footer-bmac-link:focus {\n  outline: 2px solid var(--vd-color-primary);\n  outline-offset: 2px;\n  border-radius: 0.25rem;\n}\n\n.vd-footer-bmac-logo {\n  height: 2.5rem;\n  width: auto;\n  display: block;\n  border-radius: 0.25rem;\n}\n\n/* Dark theme styles for Kilo Code section */\n[data-theme=\"dark\"] .vd-footer-kilo-link {\n  background: rgba(255, 255, 255, 0.08);\n}\n\n[data-theme=\"dark\"] .vd-footer-kilo-link:hover {\n  background: rgba(255, 255, 255, 0.14);\n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);\n}\n\n@media (prefers-color-scheme: dark) {\n  :root:not([data-theme]) .vd-footer-kilo-link {\n    background: rgba(255, 255, 255, 0.08);\n  }\n  \n  :root:not([data-theme]) .vd-footer-kilo-link:hover {\n    background: rgba(255, 255, 255, 0.14);\n    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);\n  }\n}\n\n/**\n * Vanduo Framework - Breadcrumbs\n * Breadcrumb navigation component\n */\n\n:root {\n  /* Breadcrumb Spacing (Fibonacci) */\n  --vd-breadcrumb-padding-y: 0.5rem;     /* 8px - fib */\n  --vd-breadcrumb-padding-x: 0;\n  --vd-breadcrumb-margin-bottom: 0.8125rem; /* 13px - fib */\n\n  /* Breadcrumb Separator */\n  --vd-breadcrumb-separator: \"/\";\n  --vd-breadcrumb-separator-color: var(--vd-text-muted);\n  --vd-breadcrumb-separator-padding: 0.5rem; /* 8px - fib */\n  \n  /* Breadcrumb Colors */\n  --vd-breadcrumb-bg: transparent;\n  --vd-breadcrumb-link-color: var(--vd-color-primary);\n  --vd-breadcrumb-link-hover-color: var(--vd-color-primary-dark);\n  --vd-breadcrumb-active-color: var(--vd-text-secondary);\n}\n\n/* Dark Theme Overrides - breadcrumbs use CSS variables that already adapt */\n/* No additional overrides needed as --vd-text-secondary and --vd-color-primary update in dark mode */\n\n/* Base Breadcrumbs */\n.vd-breadcrumbs,\n.vd-breadcrumb {\n  display: flex;\n  flex-wrap: wrap;\n  padding: var(--vd-breadcrumb-padding-y) var(--vd-breadcrumb-padding-x);\n  margin-bottom: var(--vd-breadcrumb-margin-bottom);\n  list-style: none;\n  background-color: var(--vd-breadcrumb-bg);\n  border-radius: var(--vd-btn-border-radius);\n}\n\n/* Breadcrumb Item */\n.vd-breadcrumb-item {\n  display: flex;\n  align-items: center;\n}\n\n.vd-breadcrumb-item + .vd-breadcrumb-item {\n  padding-left: var(--vd-breadcrumb-separator-padding);\n}\n\n.vd-breadcrumb-item + .vd-breadcrumb-item::before {\n  content: var(--vd-breadcrumb-separator);\n  display: inline-block;\n  padding-right: var(--vd-breadcrumb-separator-padding);\n  color: var(--vd-breadcrumb-separator-color);\n  font-weight: var(--vd-font-weight-normal);\n}\n\n/* Breadcrumb Link */\n.vd-breadcrumb-link,\n.vd-breadcrumb-item > a {\n  color: var(--vd-breadcrumb-link-color);\n  text-decoration: none;\n  transition: color 0.2s ease;\n}\n\n.vd-breadcrumb-link:hover,\n.vd-breadcrumb-item > a:hover {\n  color: var(--vd-breadcrumb-link-hover-color);\n  text-decoration: underline;\n}\n\n.vd-breadcrumb-link:focus,\n.vd-breadcrumb-item > a:focus {\n  outline: 2px solid var(--vd-color-primary);\n  outline-offset: 2px;\n  border-radius: 0.25rem;\n}\n\n/* Active/Current Breadcrumb Item */\n.vd-breadcrumb-item.active,\n.vd-breadcrumb-current {\n  color: var(--vd-breadcrumb-active-color);\n}\n\n.vd-breadcrumb-item.active > a,\n.vd-breadcrumb-current > a {\n  color: var(--vd-breadcrumb-active-color);\n  pointer-events: none;\n  cursor: default;\n}\n\n.vd-breadcrumb-item.active > a:hover,\n.vd-breadcrumb-current > a:hover {\n  text-decoration: none;\n}\n\n/* Breadcrumb Variants - With Icons */\n.vd-breadcrumb-item > svg,\n.vd-breadcrumb-item > i {\n  margin-right: 0.25rem;\n  vertical-align: middle;\n}\n\n/* Custom Separators */\n.vd-breadcrumb-separator-slash::before {\n  content: \"/\";\n}\n\n.vd-breadcrumb-separator-chevron::before {\n  content: \"›\";\n}\n\n.vd-breadcrumb-separator-arrow::before {\n  content: \"→\";\n}\n\n.vd-breadcrumb-separator-dot::before {\n  content: \"·\";\n}\n\n.vd-breadcrumb-separator-pipe::before {\n  content: \"|\";\n}\n\n/* Breadcrumb Sizes */\n.vd-breadcrumb-sm {\n  font-size: var(--vd-font-size-sm);\n  padding: calc(var(--vd-breadcrumb-padding-y) * 0.75) var(--vd-breadcrumb-padding-x);\n}\n\n.vd-breadcrumb-lg {\n  font-size: var(--vd-font-size-lg);\n  padding: calc(var(--vd-breadcrumb-padding-y) * 1.25) var(--vd-breadcrumb-padding-x);\n}\n\n/* Responsive Behavior */\n@media (max-width: 575.98px) {\n  .vd-breadcrumb-item {\n    font-size: var(--vd-font-size-sm);\n  }\n  \n  .vd-breadcrumb-item + .vd-breadcrumb-item::before {\n    padding-right: calc(var(--vd-breadcrumb-separator-padding) * 0.75);\n    padding-left: calc(var(--vd-breadcrumb-separator-padding) * 0.75);\n  }\n}\n\n\n/**\n * Vanduo Framework - Tooltips\n * Tooltip component for contextual information\n */\n\n:root {\n  /* Tooltip Colors */\n  --vd-tooltip-bg: var(--vd-color-white);\n  --vd-tooltip-bg-light: var(--vd-color-gray-100);\n  --vd-tooltip-bg-dark: var(--vd-color-gray-900);\n  --vd-tooltip-text-color: var(--vd-color-gray-900);\n  --vd-tooltip-text-color-light: var(--vd-color-gray-800);\n  --vd-tooltip-text-color-dark: var(--vd-color-white);\n  \n  /* Tooltip Spacing (Fibonacci pairs: x/y ratio ~ phi) */\n  --vd-tooltip-padding-y: 0.5rem;        /* 8px - fib */\n  --vd-tooltip-padding-x: 0.8125rem;     /* 13px - fib (13/8 ~ phi) */\n  --vd-tooltip-padding-y-sm: 0.3125rem;  /* 5px - fib */\n  --vd-tooltip-padding-x-sm: 0.5rem;     /* 8px - fib (8/5 = 1.6 ~ phi) */\n  --vd-tooltip-padding-y-lg: 0.8125rem;  /* 13px - fib */\n  --vd-tooltip-padding-x-lg: 1.3125rem;  /* 21px - fib (21/13 ~ phi) */\n\n  /* Tooltip Font */\n  --vd-tooltip-font-size: var(--vd-font-size-sm);\n  --vd-tooltip-font-size-sm: var(--vd-font-size-xs);\n  --vd-tooltip-font-size-lg: var(--vd-font-size-base);\n\n  /* Tooltip Arrow (Fibonacci) */\n  --vd-tooltip-arrow-size: 5px;     /* fib */\n  --vd-tooltip-arrow-size-sm: 3px;  /* fib */\n  --vd-tooltip-arrow-size-lg: 8px;  /* fib */\n\n  /* Tooltip Z-index */\n  --vd-tooltip-z-index: 1070;\n\n  /* Tooltip Max Width */\n  --vd-tooltip-max-width: 233px; /* fib */\n}\n\n/* Dark Theme Overrides */\n[data-theme=\"dark\"] {\n  --vd-tooltip-bg: var(--vd-color-gray-900);\n  --vd-tooltip-text-color: var(--vd-color-white);\n}\n\n@media (prefers-color-scheme: dark) {\n  :root:not([data-theme]) {\n    --vd-tooltip-bg: var(--vd-color-gray-900);\n    --vd-tooltip-text-color: var(--vd-color-white);\n  }\n}\n\n/* Base Tooltip */\n.vd-tooltip {\n  position: absolute;\n  z-index: var(--vd-tooltip-z-index);\n  display: block;\n  padding: var(--vd-tooltip-padding-y) var(--vd-tooltip-padding-x);\n  margin: 0;\n  font-family: var(--vd-font-family-sans);\n  font-size: var(--vd-tooltip-font-size);\n  font-weight: var(--vd-font-weight-normal);\n  line-height: var(--vd-line-height-normal);\n  color: var(--vd-tooltip-text-color);\n  text-align: center;\n  white-space: normal;\n  word-wrap: break-word;\n  background-color: var(--vd-tooltip-bg);\n  border-radius: var(--vd-btn-border-radius);\n  box-shadow: var(--vd-shadow-lg);\n  opacity: 0;\n  pointer-events: none;\n  max-width: var(--vd-tooltip-max-width);\n  transition: opacity var(--vd-transition-duration-base) var(--vd-transition-ease);\n}\n\n.vd-tooltip-glass {\n  background: var(--vd-glass-bg-light);\n  border: 1px solid var(--vd-glass-border-light);\n  box-shadow: var(--vd-glass-shadow);\n  color: var(--vd-text-primary);\n  backdrop-filter: blur(var(--vd-glass-blur)) saturate(var(--vd-glass-saturate));\n  -webkit-backdrop-filter: blur(var(--vd-glass-blur)) saturate(var(--vd-glass-saturate));\n}\n\n.vd-tooltip.is-visible {\n  opacity: 1;\n}\n\n/* Tooltip Arrow */\n.vd-tooltip::before {\n  content: '';\n  position: absolute;\n  width: 0;\n  height: 0;\n  border-style: solid;\n}\n\n/* Tooltip Positioning - Top */\n.vd-tooltip-top,\n.vd-tooltip[data-placement=\"top\"] {\n  margin-bottom: var(--vd-tooltip-arrow-size);\n}\n\n.vd-tooltip-top::before,\n.vd-tooltip[data-placement=\"top\"]::before {\n  bottom: calc(var(--vd-tooltip-arrow-size) * -1);\n  left: 50%;\n  transform: translateX(-50%);\n  border-width: var(--vd-tooltip-arrow-size) var(--vd-tooltip-arrow-size) 0;\n  border-color: var(--vd-tooltip-bg) transparent transparent;\n}\n\n/* Tooltip Positioning - Bottom */\n.vd-tooltip-bottom,\n.vd-tooltip[data-placement=\"bottom\"] {\n  margin-top: var(--vd-tooltip-arrow-size);\n}\n\n.vd-tooltip-bottom::before,\n.vd-tooltip[data-placement=\"bottom\"]::before {\n  top: calc(var(--vd-tooltip-arrow-size) * -1);\n  left: 50%;\n  transform: translateX(-50%);\n  border-width: 0 var(--vd-tooltip-arrow-size) var(--vd-tooltip-arrow-size);\n  border-color: transparent transparent var(--vd-tooltip-bg);\n}\n\n/* Tooltip Positioning - Left */\n.vd-tooltip-left,\n.vd-tooltip[data-placement=\"left\"] {\n  margin-right: var(--vd-tooltip-arrow-size);\n}\n\n.vd-tooltip-left::before,\n.vd-tooltip[data-placement=\"left\"]::before {\n  right: calc(var(--vd-tooltip-arrow-size) * -1);\n  top: 50%;\n  transform: translateY(-50%);\n  border-width: var(--vd-tooltip-arrow-size) 0 var(--vd-tooltip-arrow-size) var(--vd-tooltip-arrow-size);\n  border-color: transparent transparent transparent var(--vd-tooltip-bg);\n}\n\n/* Tooltip Positioning - Right */\n.vd-tooltip-right,\n.vd-tooltip[data-placement=\"right\"] {\n  margin-left: var(--vd-tooltip-arrow-size);\n}\n\n.vd-tooltip-right::before,\n.vd-tooltip[data-placement=\"right\"]::before {\n  left: calc(var(--vd-tooltip-arrow-size) * -1);\n  top: 50%;\n  transform: translateY(-50%);\n  border-width: var(--vd-tooltip-arrow-size) var(--vd-tooltip-arrow-size) var(--vd-tooltip-arrow-size) 0;\n  border-color: transparent var(--vd-tooltip-bg) transparent transparent;\n}\n\n.vd-tooltip-glass.vd-tooltip-top::before,\n.vd-tooltip-glass[data-placement=\"top\"]::before {\n  border-color: var(--vd-glass-bg-light) transparent transparent;\n}\n\n.vd-tooltip-glass.vd-tooltip-bottom::before,\n.vd-tooltip-glass[data-placement=\"bottom\"]::before {\n  border-color: transparent transparent var(--vd-glass-bg-light);\n}\n\n.vd-tooltip-glass.vd-tooltip-left::before,\n.vd-tooltip-glass[data-placement=\"left\"]::before {\n  border-color: transparent transparent transparent var(--vd-glass-bg-light);\n}\n\n.vd-tooltip-glass.vd-tooltip-right::before,\n.vd-tooltip-glass[data-placement=\"right\"]::before {\n  border-color: transparent var(--vd-glass-bg-light) transparent transparent;\n}\n\n/* Tooltip Variants - Light */\n.vd-tooltip-light {\n  background-color: var(--vd-tooltip-bg-light);\n  color: var(--vd-tooltip-text-color-light);\n  box-shadow: var(--vd-shadow-md);\n}\n\n.vd-tooltip-light.vd-tooltip-top::before,\n.vd-tooltip-light[data-placement=\"top\"]::before {\n  border-color: var(--vd-tooltip-bg-light) transparent transparent;\n}\n\n.vd-tooltip-light.vd-tooltip-bottom::before,\n.vd-tooltip-light[data-placement=\"bottom\"]::before {\n  border-color: transparent transparent var(--vd-tooltip-bg-light);\n}\n\n.vd-tooltip-light.vd-tooltip-left::before,\n.vd-tooltip-light[data-placement=\"left\"]::before {\n  border-color: transparent transparent transparent var(--vd-tooltip-bg-light);\n}\n\n.vd-tooltip-light.vd-tooltip-right::before,\n.vd-tooltip-light[data-placement=\"right\"]::before {\n  border-color: transparent var(--vd-tooltip-bg-light) transparent transparent;\n}\n\n/* Tooltip Variants - Dark */\n.vd-tooltip-dark {\n  background-color: var(--vd-tooltip-bg-dark);\n  color: var(--vd-tooltip-text-color-dark);\n}\n\n.vd-tooltip-dark.vd-tooltip-top::before,\n.vd-tooltip-dark[data-placement=\"top\"]::before {\n  border-color: var(--vd-tooltip-bg-dark) transparent transparent;\n}\n\n.vd-tooltip-dark.vd-tooltip-bottom::before,\n.vd-tooltip-dark[data-placement=\"bottom\"]::before {\n  border-color: transparent transparent var(--vd-tooltip-bg-dark);\n}\n\n.vd-tooltip-dark.vd-tooltip-left::before,\n.vd-tooltip-dark[data-placement=\"left\"]::before {\n  border-color: transparent transparent transparent var(--vd-tooltip-bg-dark);\n}\n\n.vd-tooltip-dark.vd-tooltip-right::before,\n.vd-tooltip-dark[data-placement=\"right\"]::before {\n  border-color: transparent var(--vd-tooltip-bg-dark) transparent transparent;\n}\n\n/* Tooltip Sizes */\n.vd-tooltip-sm {\n  padding: var(--vd-tooltip-padding-y-sm) var(--vd-tooltip-padding-x-sm);\n  font-size: var(--vd-tooltip-font-size-sm);\n  max-width: 150px;\n}\n\n.vd-tooltip-sm.vd-tooltip-top::before,\n.vd-tooltip-sm[data-placement=\"top\"]::before {\n  border-width: var(--vd-tooltip-arrow-size-sm) var(--vd-tooltip-arrow-size-sm) 0;\n}\n\n.vd-tooltip-sm.vd-tooltip-bottom::before,\n.vd-tooltip-sm[data-placement=\"bottom\"]::before {\n  border-width: 0 var(--vd-tooltip-arrow-size-sm) var(--vd-tooltip-arrow-size-sm);\n}\n\n.vd-tooltip-sm.vd-tooltip-left::before,\n.vd-tooltip-sm[data-placement=\"left\"]::before {\n  border-width: var(--vd-tooltip-arrow-size-sm) 0 var(--vd-tooltip-arrow-size-sm) var(--vd-tooltip-arrow-size-sm);\n}\n\n.vd-tooltip-sm.vd-tooltip-right::before,\n.vd-tooltip-sm[data-placement=\"right\"]::before {\n  border-width: var(--vd-tooltip-arrow-size-sm) var(--vd-tooltip-arrow-size-sm) var(--vd-tooltip-arrow-size-sm) 0;\n}\n\n.vd-tooltip-lg {\n  padding: var(--vd-tooltip-padding-y-lg) var(--vd-tooltip-padding-x-lg);\n  font-size: var(--vd-tooltip-font-size-lg);\n  max-width: 300px;\n}\n\n.vd-tooltip-lg.vd-tooltip-top::before,\n.vd-tooltip-lg[data-placement=\"top\"]::before {\n  border-width: var(--vd-tooltip-arrow-size-lg) var(--vd-tooltip-arrow-size-lg) 0;\n}\n\n.vd-tooltip-lg.vd-tooltip-bottom::before,\n.vd-tooltip-lg[data-placement=\"bottom\"]::before {\n  border-width: 0 var(--vd-tooltip-arrow-size-lg) var(--vd-tooltip-arrow-size-lg);\n}\n\n.vd-tooltip-lg.vd-tooltip-left::before,\n.vd-tooltip-lg[data-placement=\"left\"]::before {\n  border-width: var(--vd-tooltip-arrow-size-lg) 0 var(--vd-tooltip-arrow-size-lg) var(--vd-tooltip-arrow-size-lg);\n}\n\n.vd-tooltip-lg.vd-tooltip-right::before,\n.vd-tooltip-lg[data-placement=\"right\"]::before {\n  border-width: var(--vd-tooltip-arrow-size-lg) var(--vd-tooltip-arrow-size-lg) var(--vd-tooltip-arrow-size-lg) 0;\n}\n\n/* Tooltip with HTML Content */\n.vd-tooltip-html {\n  text-align: left;\n}\n\n/* Tooltip Wrapper (for positioning) */\n.vd-tooltip-wrapper {\n  position: relative;\n  display: inline-block;\n}\n\n\n/**\n * Vanduo Framework - Collapsible\n * Collapsible/Accordion component for expandable content\n */\n\n:root {\n  /* Collapsible Colors */\n  --vd-collapsible-border-color: var(--vd-border-color);\n  --vd-collapsible-bg: var(--vd-color-white);\n  --vd-collapsible-header-bg: var(--vd-bg-secondary);\n  --vd-collapsible-header-bg-hover: var(--vd-bg-secondary);\n  --vd-collapsible-header-bg-active: var(--vd-bg-secondary);\n  --vd-collapsible-focus-ring: 0 0 0 2px var(--vd-input-focus-border-color);\n  \n  /* Collapsible Spacing (Fibonacci) */\n  --vd-collapsible-padding-y: 0.8125rem;    /* 13px - fib */\n  --vd-collapsible-padding-x: 1.3125rem;    /* 21px - fib (21/13 ~ phi) */\n  --vd-collapsible-body-padding: 1.3125rem; /* 21px - fib */\n  \n  /* Collapsible Transitions */\n  --vd-collapsible-transition: height var(--vd-transition-duration-slow) var(--vd-transition-ease),\n                            opacity var(--vd-transition-duration-base) var(--vd-transition-ease);\n}\n\n/* Dark Theme Overrides */\n[data-theme=\"dark\"] {\n  --vd-collapsible-bg: var(--vd-bg-secondary);\n  --vd-collapsible-header-bg: var(--vd-bg-primary);\n  --vd-collapsible-header-bg-hover: var(--vd-bg-primary);\n  --vd-collapsible-header-bg-active: var(--vd-bg-primary);\n}\n\n@media (prefers-color-scheme: dark) {\n  :root:not([data-theme]) {\n    --vd-collapsible-bg: var(--vd-bg-secondary);\n    --vd-collapsible-header-bg: var(--vd-bg-primary);\n    --vd-collapsible-header-bg-hover: var(--vd-bg-primary);\n    --vd-collapsible-header-bg-active: var(--vd-bg-primary);\n  }\n}\n\n/* Base Collapsible Container */\n.vd-collapsible,\n.accordion {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n}\n\n/* Collapsible Item */\n.vd-collapsible-item,\n.accordion-item {\n  border: 1px solid var(--vd-collapsible-border-color);\n  border-radius: var(--vd-btn-border-radius);\n  margin-bottom: 0.5rem;\n  overflow: hidden;\n  background-color: var(--vd-collapsible-bg);\n  position: relative;\n}\n\n.vd-collapsible-item:last-child,\n.accordion-item:last-child {\n  margin-bottom: 0;\n}\n\n/* Collapsible Header */\n.vd-collapsible-header,\n.accordion-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: var(--vd-collapsible-padding-y) var(--vd-collapsible-padding-x);\n  background-color: var(--vd-collapsible-header-bg);\n  cursor: pointer;\n  user-select: none;\n  transition: var(--vd-transition-bg);\n  border: none;\n  -webkit-appearance: none;\n  appearance: none;\n  width: 100%;\n  text-align: left;\n  font-family: var(--vd-font-family-sans);\n  font-size: var(--vd-font-size-base);\n  font-weight: var(--vd-font-weight-medium);\n  color: var(--vd-text-primary);\n}\n\n.vd-collapsible-header:hover,\n.accordion-header:hover {\n  background-color: var(--vd-collapsible-header-bg-hover);\n}\n\n.vd-collapsible-header:focus,\n.vd-collapsible-header:focus-visible,\n.accordion-header:focus,\n.accordion-header:focus-visible {\n  outline: none;\n}\n\n/* Focus ring on the parent item so it follows the outer rounded border */\n.vd-collapsible-item:has(.vd-collapsible-header:focus-visible),\n.vd-collapsible-item:has(.vd-collapsible-trigger:focus-visible),\n.accordion-item:has(.accordion-header:focus-visible),\n.accordion-item:has(.accordion-trigger:focus-visible) {\n  box-shadow: var(--vd-collapsible-focus-ring);\n  z-index: 1;\n}\n\n.vd-collapsible-item.is-open .vd-collapsible-header,\n.accordion-item.is-open .accordion-header {\n  background-color: var(--vd-collapsible-header-bg-active);\n  font-weight: var(--vd-font-weight-semibold);\n}\n\n/* Collapsible Trigger */\n.vd-collapsible-trigger,\n.accordion-trigger {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  width: 100%;\n  font-family: var(--vd-font-family-sans);\n  font-size: var(--vd-font-size-base);\n  font-weight: var(--vd-font-weight-medium);\n  color: var(--vd-text-primary);\n  text-decoration: none;\n  background: none;\n  border: none;\n  -webkit-appearance: none;\n  appearance: none;\n  padding: 0;\n  cursor: pointer;\n}\n\n.vd-collapsible-trigger:focus,\n.vd-collapsible-trigger:focus-visible,\n.accordion-trigger:focus,\n.accordion-trigger:focus-visible {\n  outline: none;\n}\n\n/* Collapsible Icon */\n.vd-collapsible-icon,\n.accordion-icon {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 1.5rem;\n  height: 1.5rem;\n  margin-left: 0.75rem;\n  flex-shrink: 0;\n  transition: transform var(--vd-transition-duration-base) var(--vd-transition-ease);\n}\n\n.vd-collapsible-icon::before,\n.accordion-icon::before {\n  content: '▼';\n  font-size: 0.75rem;\n  color: var(--vd-text-secondary);\n  transition: transform var(--vd-transition-duration-base) var(--vd-transition-ease);\n}\n\n.vd-collapsible-item.is-open .vd-collapsible-icon::before,\n.accordion-item.is-open .accordion-icon::before {\n  transform: rotate(180deg);\n}\n\n/* Collapsible Body */\n.vd-collapsible-body,\n.accordion-body {\n  max-height: 0;\n  overflow: hidden;\n  transition: var(--vd-collapsible-transition);\n  opacity: 0;\n}\n\n.vd-collapsible-item.is-open .vd-collapsible-body,\n.accordion-item.is-open .accordion-body {\n  max-height: 5000px;\n  opacity: 1;\n  padding: var(--vd-collapsible-body-padding);\n  border-top: 1px solid var(--vd-collapsible-border-color);\n}\n\n/* Collapsible Content */\n.vd-collapsible-content,\n.accordion-content {\n  color: var(--vd-text-primary);\n  line-height: var(--vd-line-height-normal);\n}\n\n/* Collapsible States */\n.vd-collapsible-item.is-active,\n.accordion-item.is-active {\n  border-color: var(--vd-color-primary);\n}\n\n.vd-collapsible-item.is-active .vd-collapsible-header,\n.accordion-item.is-active .accordion-header {\n  background-color: var(--vd-color-primary-alpha-10);\n  color: var(--vd-color-primary);\n}\n\n/* Collapsible Variants - Bordered */\n.vd-collapsible-bordered .vd-collapsible-item,\n.accordion-bordered .accordion-item {\n  border: 1px solid var(--vd-collapsible-border-color);\n  border-radius: 0;\n  margin-bottom: -1px;\n}\n\n.vd-collapsible-bordered .vd-collapsible-item:first-child,\n.accordion-bordered .accordion-item:first-child {\n  border-top-left-radius: var(--vd-btn-border-radius);\n  border-top-right-radius: var(--vd-btn-border-radius);\n}\n\n.vd-collapsible-bordered .vd-collapsible-item:last-child,\n.accordion-bordered .accordion-item:last-child {\n  border-bottom-left-radius: var(--vd-btn-border-radius);\n  border-bottom-right-radius: var(--vd-btn-border-radius);\n  margin-bottom: 0;\n}\n\n/* Collapsible Variants - Flush (no borders) */\n.vd-collapsible-flush .vd-collapsible-item,\n.accordion-flush .accordion-item {\n  border: none;\n  border-radius: 0;\n  border-bottom: 1px solid var(--vd-collapsible-border-color);\n  margin-bottom: 0;\n  background-color: transparent;\n  overflow: visible;\n}\n\n.vd-collapsible-flush .vd-collapsible-item:last-child,\n.accordion-flush .accordion-item:last-child {\n  border-bottom: none;\n}\n\n.vd-collapsible-flush .vd-collapsible-header,\n.vd-collapsible-flush .vd-collapsible-trigger,\n.accordion-flush .accordion-header,\n.accordion-flush .accordion-trigger {\n  background-color: transparent;\n}\n\n.vd-collapsible-flush .vd-collapsible-header:hover,\n.vd-collapsible-flush .vd-collapsible-trigger:hover,\n.accordion-flush .accordion-header:hover,\n.accordion-flush .accordion-trigger:hover {\n  border-radius: var(--vd-btn-border-radius);\n}\n\n.vd-collapsible-flush .vd-collapsible-item:has(.vd-collapsible-header:focus-visible),\n.vd-collapsible-flush .vd-collapsible-item:has(.vd-collapsible-trigger:focus-visible),\n.accordion-flush .accordion-item:has(.accordion-header:focus-visible),\n.accordion-flush .accordion-item:has(.accordion-trigger:focus-visible) {\n  box-shadow: none;\n}\n\n.vd-collapsible-flush .vd-collapsible-header:focus-visible,\n.vd-collapsible-flush .vd-collapsible-trigger:focus-visible,\n.accordion-flush .accordion-header:focus-visible,\n.accordion-flush .accordion-trigger:focus-visible {\n  border-radius: var(--vd-btn-border-radius);\n  box-shadow: var(--vd-collapsible-focus-ring);\n  position: relative;\n  z-index: 1;\n}\n\n/* Collapsible Sizes */\n.vd-collapsible-sm .vd-collapsible-header,\n.accordion-sm .accordion-header {\n  padding: calc(var(--vd-collapsible-padding-y) * 0.75) calc(var(--vd-collapsible-padding-x) * 0.75);\n  font-size: var(--vd-font-size-sm);\n}\n\n.vd-collapsible-sm .vd-collapsible-body,\n.accordion-sm .accordion-body {\n  padding: calc(var(--vd-collapsible-body-padding) * 0.75);\n}\n\n.vd-collapsible-lg .vd-collapsible-header,\n.accordion-lg .accordion-header {\n  padding: calc(var(--vd-collapsible-padding-y) * 1.25) calc(var(--vd-collapsible-padding-x) * 1.25);\n  font-size: var(--vd-font-size-lg);\n}\n\n.vd-collapsible-lg .vd-collapsible-body,\n.accordion-lg .accordion-body {\n  padding: calc(var(--vd-collapsible-body-padding) * 1.25);\n}\n\n/* Accordion Mode (single open) */\n.accordion .accordion-item.is-open ~ .accordion-item.is-open .accordion-body {\n  max-height: 0;\n  opacity: 0;\n  padding: 0;\n}\n\n.accordion .accordion-item.is-open ~ .accordion-item.is-open {\n  border-top: 1px solid var(--vd-collapsible-border-color);\n}\n\n/* Responsive Behavior */\n@media (max-width: 575.98px) {\n  .vd-collapsible-header,\n  .accordion-header {\n    padding: calc(var(--vd-collapsible-padding-y) * 0.875) var(--vd-collapsible-padding-x);\n    font-size: var(--vd-font-size-sm);\n  }\n  \n  .vd-collapsible-body,\n  .accordion-body {\n    padding: var(--vd-collapsible-padding-x);\n  }\n}\n\n\n/**\n * Vanduo Framework - Dropdown\n * Dropdown menu component\n */\n\n:root {\n  /* Dropdown Colors */\n  --vd-dropdown-bg: var(--vd-color-white);\n  --vd-dropdown-border-color: var(--vd-border-color);\n  --vd-dropdown-item-color: var(--vd-text-primary);\n  --vd-dropdown-item-hover-bg: var(--vd-bg-secondary);\n  --vd-dropdown-item-hover-color: var(--vd-text-primary);\n  --vd-dropdown-item-active-bg: var(--vd-color-primary-alpha-10);\n  --vd-dropdown-item-active-color: var(--vd-color-primary);\n  --vd-dropdown-item-disabled-color: var(--vd-text-muted);\n  \n  /* Dropdown Spacing (Fibonacci) */\n  --vd-dropdown-padding-y: 0.5rem;          /* 8px - fib */\n  --vd-dropdown-padding-x: 0;\n  --vd-dropdown-item-padding-y: 0.5rem;     /* 8px  - fib */\n  --vd-dropdown-item-padding-x: 0.8125rem;  /* 13px - fib */\n  --vd-dropdown-header-padding-y: 0.5rem;   /* 8px  - fib */\n  --vd-dropdown-header-padding-x: 0.8125rem;/* 13px - fib */\n\n  /* Dropdown Z-index */\n  --vd-dropdown-z-index: 1000;\n\n  /* Dropdown Min Width */\n  --vd-dropdown-min-width: 13rem; /* ~208px, Fibonacci-inspired */\n}\n\n/* Dark Theme Overrides */\n[data-theme=\"dark\"] {\n  --vd-dropdown-bg: var(--vd-bg-secondary);\n  --vd-dropdown-item-hover-bg: var(--vd-bg-primary);\n}\n\n@media (prefers-color-scheme: dark) {\n  :root:not([data-theme]) {\n    --vd-dropdown-bg: var(--vd-bg-secondary);\n    --vd-dropdown-item-hover-bg: var(--vd-bg-primary);\n  }\n}\n\n/* Base Dropdown */\n.vd-dropdown {\n  position: relative;\n  display: inline-block;\n}\n\n/* Dropdown Toggle */\n.vd-dropdown-toggle {\n  display: inline-flex;\n  align-items: center;\n  justify-content: space-between;\n  cursor: pointer;\n  user-select: none;\n}\n\n.vd-dropdown-toggle::after {\n  content: '';\n  display: inline-block;\n  width: 0;\n  height: 0;\n  margin-left: 0.5rem;\n  vertical-align: 0.255em;\n  border-top: 0.3em solid;\n  border-right: 0.3em solid transparent;\n  border-bottom: 0;\n  border-left: 0.3em solid transparent;\n  transition: transform var(--vd-transition-duration-base) var(--vd-transition-ease);\n}\n\n.vd-dropdown.is-open .vd-dropdown-toggle::after {\n  transform: rotate(180deg);\n}\n\n/* Dropdown Menu */\n.vd-dropdown-menu {\n  position: absolute;\n  top: 100%;\n  left: 0;\n  z-index: var(--vd-dropdown-z-index);\n  display: none;\n  min-width: var(--vd-dropdown-min-width);\n  padding: var(--vd-dropdown-padding-y) var(--vd-dropdown-padding-x);\n  margin: 0.125rem 0 0;\n  background-color: var(--vd-dropdown-bg);\n  border: 1px solid var(--vd-dropdown-border-color);\n  border-radius: var(--vd-btn-border-radius);\n  box-shadow: var(--vd-shadow-lg);\n  list-style: none;\n  opacity: 0;\n  transform: translateY(-10px);\n  transition: opacity var(--vd-transition-duration-base) var(--vd-transition-ease),\n              transform var(--vd-transition-duration-base) var(--vd-transition-ease);\n}\n\n.vd-dropdown-glass .vd-dropdown-menu {\n  background: var(--vd-glass-bg-light);\n  border-color: var(--vd-glass-border-light);\n  box-shadow: var(--vd-glass-shadow);\n  backdrop-filter: blur(var(--vd-glass-blur)) saturate(var(--vd-glass-saturate));\n  -webkit-backdrop-filter: blur(var(--vd-glass-blur)) saturate(var(--vd-glass-saturate));\n}\n\n.vd-dropdown-menu.is-open {\n  display: block;\n  opacity: 1;\n  transform: translateY(0);\n}\n\n/* Directional wrappers */\n.vd-dropdown-dropup .vd-dropdown-menu {\n  top: auto;\n  bottom: 100%;\n  margin-top: 0;\n  margin-bottom: 0.125rem;\n  transform: translateY(10px);\n}\n\n.vd-dropdown-dropup .vd-dropdown-menu.is-open {\n  transform: translateY(0);\n}\n\n.vd-dropdown-dropright .vd-dropdown-menu {\n  top: 0;\n  left: 100%;\n  margin-top: 0;\n  margin-left: 0.125rem;\n  transform: translateX(-10px);\n}\n\n.vd-dropdown-dropright .vd-dropdown-menu.is-open {\n  transform: translateX(0);\n}\n\n.vd-dropdown-dropleft .vd-dropdown-menu {\n  top: 0;\n  left: auto;\n  right: 100%;\n  margin-top: 0;\n  margin-right: 0.125rem;\n  transform: translateX(10px);\n}\n\n.vd-dropdown-dropleft .vd-dropdown-menu.is-open {\n  transform: translateX(0);\n}\n\n/* Dropdown Menu Positioning - Top */\n.vd-dropdown-menu-top {\n  top: auto;\n  bottom: 100%;\n  margin-top: 0;\n  margin-bottom: 0.125rem;\n  transform: translateY(10px);\n}\n\n.vd-dropdown-menu-top.is-open {\n  transform: translateY(0);\n}\n\n/* Dropdown Menu Positioning - Right */\n.vd-dropdown-menu-right {\n  left: auto;\n  right: 0;\n}\n\n/* Dropdown Menu Positioning - Left */\n.vd-dropdown-menu-left {\n  left: auto;\n  right: 0;\n}\n\n/* Dropdown Item */\n.vd-dropdown-item {\n  display: block;\n  width: 100%;\n  padding: var(--vd-dropdown-item-padding-y) var(--vd-dropdown-item-padding-x);\n  clear: both;\n  font-weight: var(--vd-font-weight-normal);\n  color: var(--vd-dropdown-item-color);\n  text-align: inherit;\n  text-decoration: none;\n  white-space: nowrap;\n  background-color: transparent;\n  border: 0;\n  cursor: pointer;\n  transition: var(--vd-transition-bg);\n  user-select: none;\n}\n\n.vd-dropdown-item:hover,\n.vd-dropdown-item:focus {\n  color: var(--vd-dropdown-item-hover-color);\n  background-color: var(--vd-dropdown-item-hover-bg);\n  text-decoration: none;\n}\n\n.vd-dropdown-item:focus-visible {\n  outline: 2px solid var(--vd-color-primary);\n  outline-offset: -2px;\n}\n\n.vd-dropdown-item.active,\n.vd-dropdown-item.is-active {\n  color: var(--vd-dropdown-item-active-color);\n  background-color: var(--vd-dropdown-item-active-bg);\n  font-weight: var(--vd-font-weight-medium);\n}\n\n.vd-dropdown-item.disabled,\n.vd-dropdown-item.is-disabled {\n  color: var(--vd-dropdown-item-disabled-color);\n  pointer-events: none;\n  cursor: not-allowed;\n  opacity: 0.6;\n}\n\n/* Dropdown Divider */\n.vd-dropdown-divider {\n  height: 0;\n  margin: 0.5rem 0;\n  overflow: hidden;\n  border-top: 1px solid var(--vd-dropdown-border-color);\n}\n\n/* Dropdown Header */\n.vd-dropdown-header {\n  display: block;\n  padding: var(--vd-dropdown-header-padding-y) var(--vd-dropdown-header-padding-x);\n  margin-bottom: 0;\n  font-size: var(--vd-font-size-sm);\n  font-weight: var(--vd-font-weight-semibold);\n  color: var(--vd-text-muted);\n  white-space: nowrap;\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n}\n\n/* Dropdown Menu Alignment */\n.vd-dropdown-menu-start {\n  left: 0;\n  right: auto;\n}\n\n.vd-dropdown-menu-end {\n  left: auto;\n  right: 0;\n}\n\n/* Dropdown Sizes */\n.vd-dropdown-sm .vd-dropdown-menu {\n  min-width: 8rem;\n  font-size: var(--vd-font-size-sm);\n}\n\n.vd-dropdown-sm .vd-dropdown-item {\n  padding: calc(var(--vd-dropdown-item-padding-y) * 0.75) calc(var(--vd-dropdown-item-padding-x) * 0.75);\n}\n\n.vd-dropdown-lg .vd-dropdown-menu {\n  min-width: 15rem;\n  font-size: var(--vd-font-size-lg);\n}\n\n.vd-dropdown-lg .vd-dropdown-item {\n  padding: calc(var(--vd-dropdown-item-padding-y) * 1.25) calc(var(--vd-dropdown-item-padding-x) * 1.25);\n}\n\n/* Dropdown with Button Toggle */\n.vd-btn + .vd-dropdown-menu,\n.vd-dropdown-toggle.vd-btn + .vd-dropdown-menu {\n  margin-top: 0.125rem;\n}\n\n/* Nested Dropdown (Submenu) */\n.vd-dropdown-submenu {\n  position: relative;\n}\n\n.vd-dropdown-submenu > .vd-dropdown-menu {\n  top: 0;\n  left: 100%;\n  margin-top: 0;\n  margin-left: 0.125rem;\n}\n\n.vd-dropdown-submenu > .vd-dropdown-item::after {\n  content: '';\n  display: inline-block;\n  width: 0;\n  height: 0;\n  margin-left: auto;\n  margin-right: -0.5rem;\n  vertical-align: 0.255em;\n  border-top: 0.3em solid transparent;\n  border-right: 0;\n  border-bottom: 0.3em solid transparent;\n  border-left: 0.3em solid;\n}\n\n/* Responsive Behavior */\n@media (max-width: 575.98px) {\n  .vd-dropdown-menu {\n    min-width: 100%;\n    left: 0 !important;\n    right: 0 !important;\n  }\n}\n\n\n/**\n * Vanduo Framework - Modals\n * Modal dialog component\n */\n\n:root {\n  /* Modal Colors */\n  --vd-modal-bg: var(--vd-color-white);\n  --vd-modal-backdrop-bg: rgba(0, 0, 0, 0.5);\n  --vd-modal-border-color: var(--vd-border-color);\n  \n  /* Modal Spacing (Fibonacci: 21px) */\n  --vd-modal-padding: 1.3125rem;\n  --vd-modal-header-padding: 1.3125rem;\n  --vd-modal-body-padding: 1.3125rem;\n  --vd-modal-footer-padding: 1.3125rem;\n\n  /* Modal Sizes (all Fibonacci numbers) */\n  --vd-modal-width-sm: 233px;   /* fib(13) */\n  --vd-modal-width: 377px;      /* fib(14) */\n  --vd-modal-width-lg: 610px;   /* fib(15) */\n  --vd-modal-width-xl: 987px;   /* fib(16) */\n  \n  /* Modal Z-index */\n  --vd-modal-z-index: 1050;\n  --vd-modal-backdrop-z-index: 1040;\n  \n  /* Modal Transitions */\n  --vd-modal-transition: opacity var(--vd-transition-duration-base) var(--vd-transition-ease);\n  --vd-modal-dialog-transition: transform var(--vd-transition-duration-base) var(--vd-transition-ease);\n}\n\n/* Dark Theme Overrides */\n[data-theme=\"dark\"] {\n  --vd-modal-bg: var(--vd-bg-secondary);\n}\n\n@media (prefers-color-scheme: dark) {\n  :root:not([data-theme]) {\n    --vd-modal-bg: var(--vd-bg-secondary);\n  }\n}\n\n/* Modal Backdrop */\n.vd-modal-backdrop {\n  position: fixed;\n  top: 0;\n  left: 0;\n  z-index: var(--vd-modal-backdrop-z-index);\n  width: 100vw;\n  height: 100vh;\n  background-color: var(--vd-modal-backdrop-bg);\n  opacity: 0;\n  transition: var(--vd-modal-transition);\n  pointer-events: none;\n}\n\n.vd-modal-backdrop.vd-modal-glass-backdrop {\n  backdrop-filter: blur(calc(var(--vd-glass-blur) * 0.5));\n  -webkit-backdrop-filter: blur(calc(var(--vd-glass-blur) * 0.5));\n}\n\n.vd-modal-backdrop.is-visible {\n  opacity: 1;\n  pointer-events: all;\n}\n\n/* Base Modal */\n.vd-modal {\n  position: fixed;\n  top: 0;\n  left: 0;\n  z-index: var(--vd-modal-z-index);\n  display: none;\n  width: 100%;\n  height: 100%;\n  overflow-x: hidden;\n  overflow-y: auto;\n  outline: 0;\n  opacity: 0;\n  transition: var(--vd-modal-transition);\n  --vd-modal-dialog-max-width: var(--vd-modal-width);\n}\n\n.vd-modal.is-open {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  opacity: 1;\n}\n\n/* Modal Dialog */\n.vd-modal-dialog {\n  position: relative;\n  width: min(calc(100% - 3.5rem), var(--vd-modal-dialog-max-width));\n  margin: 1.75rem auto;\n  max-width: var(--vd-modal-dialog-max-width);\n  pointer-events: none;\n  transform: scale(0.95);\n  transition: var(--vd-modal-dialog-transition);\n  z-index: 1060;\n}\n\n.vd-modal.is-open .vd-modal-dialog {\n  transform: scale(1);\n}\n\n/* Modal Content */\n.vd-modal-content {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  pointer-events: auto;\n  background-color: var(--vd-modal-bg);\n  background-clip: padding-box;\n  border: 1px solid var(--vd-modal-border-color);\n  border-radius: var(--vd-btn-border-radius-lg);\n  box-shadow: var(--vd-shadow-2xl);\n  outline: 0;\n}\n\n.vd-modal-glass .vd-modal-content {\n  background: var(--vd-glass-bg-light);\n  border-color: var(--vd-glass-border-light);\n  box-shadow: var(--vd-glass-shadow);\n  backdrop-filter: blur(var(--vd-glass-blur)) saturate(var(--vd-glass-saturate));\n  -webkit-backdrop-filter: blur(var(--vd-glass-blur)) saturate(var(--vd-glass-saturate));\n}\n\n/* Modal Header */\n.vd-modal-header {\n  display: flex;\n  align-items: flex-start;\n  justify-content: space-between;\n  padding: var(--vd-modal-header-padding);\n  border-bottom: 1px solid var(--vd-modal-border-color);\n  border-top-left-radius: calc(var(--vd-btn-border-radius-lg) - 1px);\n  border-top-right-radius: calc(var(--vd-btn-border-radius-lg) - 1px);\n}\n\n.vd-modal-title {\n  margin-bottom: 0;\n  line-height: var(--vd-line-height-normal);\n  font-size: var(--vd-font-size-xl);\n  font-weight: var(--vd-font-weight-semibold);\n  color: var(--vd-text-primary);\n}\n\n/* Modal Close Button */\n.vd-modal-close {\n  padding: 0.5rem;\n  margin: -0.5rem -0.5rem -0.5rem auto;\n  background: transparent;\n  border: 0;\n  border-radius: var(--vd-btn-border-radius);\n  opacity: 0.5;\n  cursor: pointer;\n  font-size: 1.5rem;\n  font-weight: var(--vd-font-weight-bold);\n  line-height: 1;\n  color: var(--vd-text-secondary);\n  text-shadow: 0 1px 0 var(--vd-color-white);\n  transition: var(--vd-transition-opacity);\n  user-select: none;\n}\n\n.vd-modal-close:hover,\n.vd-modal-close:focus {\n  color: var(--vd-text-primary);\n  text-decoration: none;\n  opacity: 0.75;\n  outline: none;\n}\n\n.vd-modal-close:focus {\n  outline: 2px solid var(--vd-input-focus-border-color);\n  outline-offset: 2px;\n}\n\n/* Modal Body */\n.vd-modal-body {\n  position: relative;\n  flex: 1 1 auto;\n  padding: var(--vd-modal-body-padding);\n}\n\n/* Modal Footer */\n.vd-modal-footer {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  justify-content: flex-end;\n  padding: var(--vd-modal-footer-padding);\n  border-top: 1px solid var(--vd-modal-border-color);\n  border-bottom-left-radius: calc(var(--vd-btn-border-radius-lg) - 1px);\n  border-bottom-right-radius: calc(var(--vd-btn-border-radius-lg) - 1px);\n  gap: 0.5rem;\n}\n\n.vd-modal-footer > * {\n  margin: 0;\n}\n\n/* Modal Sizes */\n.vd-modal-dialog.vd-modal-sm,\n.vd-modal-sm .vd-modal-dialog {\n  --vd-modal-dialog-max-width: var(--vd-modal-width-sm);\n}\n\n.vd-modal-dialog.vd-modal-lg,\n.vd-modal-lg .vd-modal-dialog {\n  --vd-modal-dialog-max-width: var(--vd-modal-width-lg);\n}\n\n.vd-modal-dialog.vd-modal-xl,\n.vd-modal-xl .vd-modal-dialog {\n  --vd-modal-dialog-max-width: var(--vd-modal-width-xl);\n}\n\n.vd-modal-fullscreen .vd-modal-dialog {\n  max-width: 100%;\n  width: 100%;\n  height: 100%;\n  margin: 0;\n  border-radius: 0;\n}\n\n.vd-modal-fullscreen .vd-modal-content {\n  height: 100%;\n  border: 0;\n  border-radius: 0;\n}\n\n/* Modal Positioning */\n.vd-modal-top .vd-modal-dialog {\n  margin-top: 0;\n  margin-bottom: auto;\n}\n\n.vd-modal-bottom .vd-modal-dialog {\n  margin-top: auto;\n  margin-bottom: 0;\n}\n\n/* Modal Scrollable */\n.vd-modal-scrollable .vd-modal-body {\n  overflow-y: auto;\n  max-height: calc(100vh - 200px);\n}\n\n/* Modal Centered */\n.vd-modal-centered .vd-modal-dialog {\n  display: flex;\n  align-items: center;\n  min-height: calc(100% - 3.5rem);\n}\n\n/* Responsive Behavior */\n@media (max-width: 575.98px) {\n  .vd-modal-dialog {\n    margin: 0.5rem;\n    width: calc(100% - 1rem);\n    max-width: calc(100% - 1rem);\n  }\n  \n  .vd-modal-fullscreen-sm-down {\n    width: 100vw;\n    max-width: 100vw;\n    height: 100%;\n    margin: 0;\n  }\n  \n  .vd-modal-fullscreen-sm-down .vd-modal-content {\n    height: 100%;\n    border: 0;\n    border-radius: 0;\n  }\n}\n\n/* Modal Animation Variants */\n.vd-modal-fade .vd-modal-dialog {\n  transform: translateY(-50px);\n}\n\n.vd-modal.is-open.vd-modal-fade .vd-modal-dialog {\n  transform: translateY(0);\n}\n\n.vd-modal-zoom .vd-modal-dialog {\n  transform: scale(0.8);\n}\n\n.vd-modal.is-open.vd-modal-zoom .vd-modal-dialog {\n  transform: scale(1);\n}\n\n/* Body Scroll Lock */\n.body-modal-open {\n  overflow: hidden;\n  padding-right: 0;\n}\n\n/**\n * Vanduo Framework - Badges\n * Status indicator badges\n */\n\n:root {\n  /* Badge Padding (x/y ratio ~ phi) */\n  --vd-badge-padding-y: 0.3em;\n  --vd-badge-padding-x: 0.48em;     /* 0.48/0.3 = 1.6 ~ phi */\n  --vd-badge-padding-y-sm: 0.18em;\n  --vd-badge-padding-x-sm: 0.3em;   /* 0.3/0.18 = 1.67 ~ phi */\n  --vd-badge-padding-y-lg: 0.42em;\n  --vd-badge-padding-x-lg: 0.65em;    /* 0.65/0.42 = 1.55 ~ phi */\n  \n  /* Badge Font */\n  --vd-badge-font-size: 0.8125em;\n  --vd-badge-font-size-sm: 0.7em;\n  --vd-badge-font-size-lg: 0.9375em;\n  --vd-badge-font-weight: var(--vd-font-weight-semibold);\n  --vd-badge-line-height: 1;\n  \n  /* Badge Border Radius */\n  --vd-badge-border-radius: var(--vd-btn-border-radius-sm);\n  --vd-badge-pill-border-radius: 50rem;\n}\n\n/* Dark Theme Overrides */\n[data-theme=\"dark\"] {\n  /* Invert light/dark badge colors for visibility */\n}\n\n@media (prefers-color-scheme: dark) {\n  :root:not([data-theme]) {\n    /* Invert light/dark badge colors for visibility */\n  }\n}\n\n/* Dark Theme - Light badge needs different colors */\n[data-theme=\"dark\"] .vd-badge-light {\n  background-color: var(--vd-color-gray-700);\n  color: var(--vd-color-gray-100);\n}\n\n[data-theme=\"dark\"] .vd-badge-outlined.vd-badge-light {\n  color: var(--vd-color-gray-300);\n  border-color: var(--vd-color-gray-500);\n}\n\n@media (prefers-color-scheme: dark) {\n  :root:not([data-theme]) .vd-badge-light {\n    background-color: var(--vd-color-gray-700);\n    color: var(--vd-color-gray-100);\n  }\n\n  :root:not([data-theme]) .vd-badge-outlined.vd-badge-light {\n    color: var(--vd-color-gray-300);\n    border-color: var(--vd-color-gray-500);\n  }\n}\n\n/* Base Badge */\n.vd-badge {\n  display: inline-block;\n  padding: var(--vd-badge-padding-y) var(--vd-badge-padding-x);\n  font-size: var(--vd-badge-font-size);\n  font-weight: var(--vd-badge-font-weight);\n  line-height: var(--vd-badge-line-height);\n  color: var(--vd-color-white);\n  text-align: center;\n  white-space: nowrap;\n  vertical-align: baseline;\n  border-radius: var(--vd-badge-border-radius);\n  background-color: var(--vd-color-secondary);\n}\n\n/* Badge Variants */\n.vd-badge-primary {\n  background-color: var(--vd-color-primary);\n  color: var(--vd-color-white);\n}\n\n.vd-badge-secondary {\n  background-color: var(--vd-color-secondary);\n  color: var(--vd-color-white);\n}\n\n.vd-badge-success {\n  background-color: var(--vd-color-success);\n  color: var(--vd-color-white);\n}\n\n.vd-badge-warning {\n  background-color: var(--vd-color-warning);\n  color: var(--vd-color-gray-900);\n}\n\n.vd-badge-error {\n  background-color: var(--vd-color-error);\n  color: var(--vd-color-white);\n}\n\n.vd-badge-info {\n  background-color: var(--vd-color-info);\n  color: var(--vd-color-white);\n}\n\n.vd-badge-light {\n  background-color: var(--vd-color-gray-100);\n  color: var(--vd-color-gray-900);\n}\n\n.vd-badge-dark {\n  background-color: var(--vd-color-gray-800);\n  color: var(--vd-color-white);\n}\n\n/* Badge Sizes */\n.vd-badge-sm {\n  padding: var(--vd-badge-padding-y-sm) var(--vd-badge-padding-x-sm);\n  font-size: var(--vd-badge-font-size-sm);\n}\n\n.vd-badge-lg {\n  padding: var(--vd-badge-padding-y-lg) var(--vd-badge-padding-x-lg);\n  font-size: var(--vd-badge-font-size-lg);\n}\n\n/* Badge Styles */\n.vd-badge-pill {\n  padding-right: var(--vd-badge-padding-x);\n  padding-left: var(--vd-badge-padding-x);\n  border-radius: var(--vd-badge-pill-border-radius);\n}\n\n.vd-badge-outlined {\n  background-color: transparent;\n  border: 1px solid currentColor;\n}\n\n.vd-badge-outlined.vd-badge-primary {\n  color: var(--vd-color-primary);\n  border-color: var(--vd-color-primary);\n}\n\n.vd-badge-outlined.vd-badge-secondary {\n  color: var(--vd-color-secondary);\n  border-color: var(--vd-color-secondary);\n}\n\n.vd-badge-outlined.vd-badge-success {\n  color: var(--vd-color-success);\n  border-color: var(--vd-color-success);\n}\n\n.vd-badge-outlined.vd-badge-warning {\n  color: var(--vd-color-warning);\n  border-color: var(--vd-color-warning);\n}\n\n.vd-badge-outlined.vd-badge-error {\n  color: var(--vd-color-error);\n  border-color: var(--vd-color-error);\n}\n\n.vd-badge-outlined.vd-badge-info {\n  color: var(--vd-color-info);\n  border-color: var(--vd-color-info);\n}\n\n.vd-badge-outlined.vd-badge-light {\n  color: var(--vd-color-gray-600);\n  border-color: var(--vd-color-gray-300);\n}\n\n.vd-badge-outlined.vd-badge-dark {\n  color: var(--vd-color-gray-800);\n  border-color: var(--vd-color-gray-800);\n}\n\n/* Badge Positioning (for use with buttons, avatars, etc.) */\n.vd-badge-top-right,\n.vd-badge-top-left,\n.vd-badge-bottom-right,\n.vd-badge-bottom-left {\n  position: absolute;\n  z-index: 1;\n  transform: translate(50%, -50%);\n}\n\n.vd-badge-top-right {\n  top: 0;\n  right: 0;\n  transform: translate(50%, -50%);\n}\n\n.vd-badge-top-left {\n  top: 0;\n  left: 0;\n  transform: translate(-50%, -50%);\n}\n\n.vd-badge-bottom-right {\n  bottom: 0;\n  right: 0;\n  transform: translate(50%, 50%);\n}\n\n.vd-badge-bottom-left {\n  bottom: 0;\n  left: 0;\n  transform: translate(-50%, 50%);\n}\n\n/* Badge in Buttons */\n.vd-btn .vd-badge {\n  position: relative;\n  top: -1px;\n}\n\n/* Badge in Headings */\nh1 .vd-badge,\nh2 .vd-badge,\nh3 .vd-badge,\nh4 .vd-badge,\nh5 .vd-badge,\nh6 .vd-badge {\n  font-size: 0.6em;\n  vertical-align: middle;\n}\n\n\n/**\n * Vanduo Framework - Collections\n * List/item collection component\n */\n\n:root {\n  /* Collection Colors */\n  --vd-collection-bg: var(--vd-color-white);\n  --vd-collection-item-bg: var(--vd-color-white);\n  --vd-collection-item-bg-hover: var(--vd-bg-secondary);\n  --vd-collection-item-bg-active: var(--vd-color-primary-alpha-10);\n  --vd-collection-border-color: var(--vd-border-color);\n  \n  /* Collection Spacing (Fibonacci) */\n  --vd-collection-padding-y: 0;\n  --vd-collection-padding-x: 0;\n  --vd-collection-item-padding-y: 0.8125rem;    /* 13px - fib */\n  --vd-collection-item-padding-x: 1.3125rem;    /* 21px - fib */\n  --vd-collection-item-padding-y-sm: 0.5rem;    /* 8px  - fib */\n  --vd-collection-item-padding-x-sm: 0.8125rem; /* 13px - fib */\n  --vd-collection-item-padding-y-lg: 1.3125rem; /* 21px - fib */\n  --vd-collection-item-padding-x-lg: 2.125rem;  /* 34px - fib */\n\n  /* Collection Avatar (Fibonacci) */\n  --vd-collection-avatar-size: 2.125rem;     /* 34px - fib */\n  --vd-collection-avatar-size-sm: 1.3125rem; /* 21px - fib */\n  --vd-collection-avatar-size-lg: 3.4375rem; /* 55px - fib */\n}\n\n/* Dark Theme Overrides */\n[data-theme=\"dark\"] {\n  --vd-collection-bg: var(--vd-bg-secondary);\n  --vd-collection-item-bg: var(--vd-bg-secondary);\n  --vd-collection-item-bg-hover: var(--vd-bg-primary);\n}\n\n@media (prefers-color-scheme: dark) {\n  :root:not([data-theme]) {\n    --vd-collection-bg: var(--vd-bg-secondary);\n    --vd-collection-item-bg: var(--vd-bg-secondary);\n    --vd-collection-item-bg-hover: var(--vd-bg-primary);\n  }\n}\n\n/* Base Collection */\n.vd-collection {\n  display: flex;\n  flex-direction: column;\n  padding: var(--vd-collection-padding-y) var(--vd-collection-padding-x);\n  margin-bottom: 0;\n  list-style: none;\n  background-color: var(--vd-collection-bg);\n}\n\n/* Collection Item */\n.vd-collection-item {\n  display: flex;\n  align-items: center;\n  padding: var(--vd-collection-item-padding-y) var(--vd-collection-item-padding-x);\n  margin-bottom: 0;\n  color: var(--vd-text-primary);\n  text-decoration: none;\n  background-color: var(--vd-collection-item-bg);\n  border-bottom: 1px solid var(--vd-collection-border-color);\n  transition: var(--vd-transition-bg);\n}\n\n.vd-collection-item:last-child {\n  border-bottom: none;\n}\n\n.vd-collection-item:hover {\n  background-color: var(--vd-collection-item-bg-hover);\n  text-decoration: none;\n}\n\n.vd-collection-item.active {\n  background-color: var(--vd-collection-item-bg-active);\n  color: var(--vd-color-primary);\n  font-weight: var(--vd-font-weight-medium);\n}\n\n.vd-collection-item.disabled {\n  opacity: 0.6;\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n/* Collection Avatar */\n.vd-collection-avatar {\n  flex-shrink: 0;\n  width: var(--vd-collection-avatar-size);\n  height: var(--vd-collection-avatar-size);\n  margin-right: 1rem;\n  border-radius: 50%;\n  background-color: var(--vd-bg-secondary);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  overflow: hidden;\n}\n\n.vd-collection-avatar img {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n\n.vd-collection-avatar-icon {\n  font-size: 1.25rem;\n  color: var(--vd-text-secondary);\n}\n\n/* Collection Content */\n.vd-collection-content {\n  flex: 1 1 auto;\n  min-width: 0;\n}\n\n.vd-collection-title {\n  margin: 0 0 0.25rem 0;\n  font-size: var(--vd-font-size-base);\n  font-weight: var(--vd-font-weight-medium);\n  line-height: var(--vd-line-height-normal);\n  color: var(--vd-text-primary);\n}\n\n.vd-collection-item.active .vd-collection-title {\n  color: var(--vd-color-primary);\n}\n\n.vd-collection-text {\n  margin: 0;\n  font-size: var(--vd-font-size-sm);\n  line-height: var(--vd-line-height-normal);\n  color: var(--vd-text-secondary);\n}\n\n.vd-collection-item-secondary {\n  display: flex;\n  flex-direction: column;\n  gap: 0.25rem;\n}\n\n.vd-collection-item-secondary .vd-collection-title {\n  margin-bottom: 0;\n}\n\n/* Collection Action */\n.vd-collection-action {\n  flex-shrink: 0;\n  margin-left: 1rem;\n  display: flex;\n  align-items: center;\n}\n\n/* Collection Divider */\n.vd-collection-divider {\n  height: 0;\n  margin: 0.5rem 0;\n  overflow: hidden;\n  border-top: 1px solid var(--vd-collection-border-color);\n}\n\n/* Collection Header */\n.vd-collection-header {\n  padding: var(--vd-collection-item-padding-y) var(--vd-collection-item-padding-x);\n  margin-bottom: 0;\n  font-size: var(--vd-font-size-sm);\n  font-weight: var(--vd-font-weight-semibold);\n  color: var(--vd-text-muted);\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n  background-color: var(--vd-bg-secondary);\n  border-bottom: 1px solid var(--vd-collection-border-color);\n}\n\n/* Collection Variants */\n.vd-collection-bordered {\n  border: 1px solid var(--vd-collection-border-color);\n  border-radius: var(--vd-btn-border-radius);\n  overflow: hidden;\n}\n\n.vd-collection-bordered .vd-collection-item {\n  border-bottom: 1px solid var(--vd-collection-border-color);\n}\n\n.vd-collection-bordered .vd-collection-item:last-child {\n  border-bottom: none;\n}\n\n.vd-collection-stripped .vd-collection-item:nth-child(odd) {\n  background-color: var(--vd-bg-secondary);\n}\n\n.vd-collection-stripped .vd-collection-item:nth-child(odd):hover {\n  background-color: var(--vd-collection-item-bg-hover);\n}\n\n.vd-collection-hoverable .vd-collection-item {\n  cursor: pointer;\n}\n\n/* Collection Sizes */\n.vd-collection-sm .vd-collection-item {\n  padding: var(--vd-collection-item-padding-y-sm) var(--vd-collection-item-padding-x-sm);\n}\n\n.vd-collection-sm .vd-collection-avatar {\n  width: var(--vd-collection-avatar-size-sm);\n  height: var(--vd-collection-avatar-size-sm);\n}\n\n.vd-collection-sm .vd-collection-title {\n  font-size: var(--vd-font-size-sm);\n}\n\n.vd-collection-sm .vd-collection-text {\n  font-size: var(--vd-font-size-xs);\n}\n\n.vd-collection-lg .vd-collection-item {\n  padding: var(--vd-collection-item-padding-y-lg) var(--vd-collection-item-padding-x-lg);\n}\n\n.vd-collection-lg .vd-collection-avatar {\n  width: var(--vd-collection-avatar-size-lg);\n  height: var(--vd-collection-avatar-size-lg);\n}\n\n.vd-collection-lg .vd-collection-title {\n  font-size: var(--vd-font-size-lg);\n}\n\n.vd-collection-lg .vd-collection-text {\n  font-size: var(--vd-font-size-base);\n}\n\n/* Responsive Behavior */\n@media (max-width: 575.98px) {\n  .vd-collection-item {\n    flex-wrap: wrap;\n  }\n  \n  .vd-collection-action {\n    width: 100%;\n    margin-left: 0;\n    margin-top: 0.5rem;\n    padding-left: calc(var(--vd-collection-avatar-size) + 1rem);\n  }\n}\n\n\n/**\n * Vanduo Framework - Pagination\n * Page navigation component\n */\n\n:root {\n  /* Pagination Colors */\n  --vd-pagination-bg: var(--vd-color-white);\n  --vd-pagination-border-color: var(--vd-border-color);\n  --vd-pagination-link-color: var(--vd-color-primary);\n  --vd-pagination-link-bg: var(--vd-color-white);\n  --vd-pagination-link-bg-hover: var(--vd-bg-secondary);\n  --vd-pagination-link-bg-active: var(--vd-color-primary);\n  --vd-pagination-link-color-active: var(--vd-color-white);\n  --vd-pagination-link-color-disabled: var(--vd-text-muted);\n  \n  /* Pagination Spacing (Fibonacci pairs: x/y ratio ~ phi) */\n  --vd-pagination-padding-y: 0.5rem;        /* 8px  - fib */\n  --vd-pagination-padding-x: 0.8125rem;     /* 13px - fib */\n  --vd-pagination-padding-y-sm: 0.1875rem;  /* 3px  - fib */\n  --vd-pagination-padding-x-sm: 0.3125rem;  /* 5px  - fib */\n  --vd-pagination-padding-y-lg: 0.8125rem;  /* 13px - fib */\n  --vd-pagination-padding-x-lg: 1.3125rem;  /* 21px - fib */\n  \n  /* Pagination Font */\n  --vd-pagination-font-size: var(--vd-font-size-base);\n  --vd-pagination-font-size-sm: var(--vd-font-size-sm);\n  --vd-pagination-font-size-lg: var(--vd-font-size-lg);\n}\n\n/* Dark Theme Overrides */\n[data-theme=\"dark\"] {\n  --vd-pagination-bg: var(--vd-bg-secondary);\n  --vd-pagination-link-bg: var(--vd-bg-secondary);\n  --vd-pagination-link-bg-hover: var(--vd-bg-primary);\n}\n\n@media (prefers-color-scheme: dark) {\n  :root:not([data-theme]) {\n    --vd-pagination-bg: var(--vd-bg-secondary);\n    --vd-pagination-link-bg: var(--vd-bg-secondary);\n    --vd-pagination-link-bg-hover: var(--vd-bg-primary);\n  }\n}\n\n/* Base Pagination */\n.vd-pagination {\n  display: flex;\n  flex-wrap: wrap;\n  padding-left: 0;\n  margin: 0;\n  list-style: none;\n}\n\n/* Pagination Item */\n.vd-pagination-item {\n  display: inline-block;\n  margin: 0 0.125rem;\n}\n\n.vd-pagination-item:first-child {\n  margin-left: 0;\n}\n\n.vd-pagination-item:last-child {\n  margin-right: 0;\n}\n\n/* Pagination Link */\n.vd-pagination-link {\n  position: relative;\n  display: block;\n  padding: var(--vd-pagination-padding-y) var(--vd-pagination-padding-x);\n  font-size: var(--vd-pagination-font-size);\n  line-height: var(--vd-line-height-normal);\n  color: var(--vd-pagination-link-color);\n  text-decoration: none;\n  background-color: var(--vd-pagination-link-bg);\n  border: 1px solid var(--vd-pagination-border-color);\n  border-radius: var(--vd-btn-border-radius);\n  transition: var(--vd-transition-colors);\n  cursor: pointer;\n  user-select: none;\n}\n\n.vd-pagination-link:hover {\n  color: var(--vd-pagination-link-color);\n  background-color: var(--vd-pagination-link-bg-hover);\n  border-color: var(--vd-pagination-border-color);\n  text-decoration: none;\n}\n\n.vd-pagination-link:focus {\n  outline: 0;\n  box-shadow: var(--vd-input-focus-box-shadow);\n  z-index: 1;\n}\n\n/* Pagination Active State */\n.vd-pagination-item.active .vd-pagination-link {\n  z-index: 1;\n  color: var(--vd-pagination-link-color-active);\n  background-color: var(--vd-pagination-link-bg-active);\n  border-color: var(--vd-pagination-link-bg-active);\n  cursor: default;\n}\n\n.vd-pagination-item.active .vd-pagination-link:hover {\n  color: var(--vd-pagination-link-color-active);\n  background-color: var(--vd-pagination-link-bg-active);\n  border-color: var(--vd-pagination-link-bg-active);\n}\n\n/* Pagination Disabled State */\n.vd-pagination-item.disabled .vd-pagination-link {\n  color: var(--vd-pagination-link-color-disabled);\n  pointer-events: none;\n  cursor: not-allowed;\n  background-color: var(--vd-pagination-link-bg);\n  border-color: var(--vd-pagination-border-color);\n  opacity: 0.6;\n}\n\n/* Pagination Previous/Next */\n.vd-pagination-prev,\n.vd-pagination-next {\n  font-weight: var(--vd-font-weight-medium);\n}\n\n.vd-pagination-prev .vd-pagination-link::before {\n  content: '«';\n  margin-right: 0.25rem;\n}\n\n.vd-pagination-next .vd-pagination-link::after {\n  content: '»';\n  margin-left: 0.25rem;\n}\n\n/* Pagination Ellipsis */\n.vd-pagination-ellipsis {\n  padding: var(--vd-pagination-padding-y) var(--vd-pagination-padding-x);\n  color: var(--vd-text-muted);\n  pointer-events: none;\n  cursor: default;\n}\n\n/* Pagination Sizes */\n.vd-pagination-sm .vd-pagination-link {\n  padding: var(--vd-pagination-padding-y-sm) var(--vd-pagination-padding-x-sm);\n  font-size: var(--vd-pagination-font-size-sm);\n}\n\n.vd-pagination-lg .vd-pagination-link {\n  padding: var(--vd-pagination-padding-y-lg) var(--vd-pagination-padding-x-lg);\n  font-size: var(--vd-pagination-font-size-lg);\n}\n\n/* Pagination Alignment */\n.vd-pagination-center {\n  justify-content: center;\n}\n\n.vd-pagination-right {\n  justify-content: flex-end;\n}\n\n/* Responsive Behavior */\n@media (max-width: 575.98px) {\n  .vd-pagination {\n    flex-wrap: wrap;\n    justify-content: center;\n  }\n  \n  .vd-pagination-item {\n    margin: 0.125rem;\n  }\n  \n  .vd-pagination-prev,\n  .vd-pagination-next {\n    width: 100%;\n    text-align: center;\n    margin: 0.5rem 0;\n  }\n}\n\n\n/**\n * Vanduo Framework - Sidenav\n * Side navigation drawer component\n */\n\n:root {\n  /* Sidenav Colors */\n  --vd-sidenav-bg: var(--vd-color-white);\n  --vd-sidenav-overlay-bg: rgba(0, 0, 0, 0.35);\n  --vd-sidenav-border-color: var(--vd-border-color);\n  --vd-sidenav-item-bg-hover: var(--vd-bg-secondary);\n  --vd-sidenav-item-bg-active: var(--vd-color-primary-alpha-10);\n  --vd-sidenav-item-color-active: var(--vd-color-primary);\n  \n  /* Sidenav Dimensions (Fibonacci) */\n  --vd-sidenav-width: 233px;     /* fib */\n  --vd-sidenav-width-sm: 233px;  /* fib */\n  --vd-sidenav-width-lg: 377px;  /* fib */\n\n  /* Sidenav Spacing (Fibonacci) */\n  --vd-sidenav-padding-y: 0.8125rem;      /* 13px - fib */\n  --vd-sidenav-padding-x: 1.3125rem;      /* 21px - fib */\n  --vd-sidenav-item-padding-y: 0.5rem;    /* 8px  - fib */\n  --vd-sidenav-item-padding-x: 0.8125rem; /* 13px - fib */\n  \n  /* Sidenav Z-index */\n  --vd-sidenav-z-index: 1040;\n  --vd-sidenav-overlay-z-index: 1030;\n  \n  /* Sidenav Transitions */\n  --vd-sidenav-transition: transform var(--vd-transition-duration-slow) var(--vd-transition-ease);\n}\n\n/* Dark Theme Overrides */\n[data-theme=\"dark\"] {\n  --vd-sidenav-bg: var(--vd-bg-secondary);\n  --vd-sidenav-item-bg-hover: var(--vd-bg-primary);\n}\n\n@media (prefers-color-scheme: dark) {\n  :root:not([data-theme]) {\n    --vd-sidenav-bg: var(--vd-bg-secondary);\n    --vd-sidenav-item-bg-hover: var(--vd-bg-primary);\n  }\n}\n\n/* Sidenav Overlay */\n.vd-sidenav-overlay {\n  position: fixed;\n  top: 0;\n  left: 0;\n  z-index: var(--vd-sidenav-overlay-z-index);\n  width: 100vw;\n  height: 100vh;\n  background-color: var(--vd-sidenav-overlay-bg);\n  opacity: 0;\n  transition: opacity var(--vd-transition-duration-base) var(--vd-transition-ease);\n  pointer-events: none;\n}\n\n.vd-sidenav-overlay.is-visible {\n  opacity: 1;\n  pointer-events: all;\n}\n\n/* Base Sidenav */\n.vd-sidenav {\n  position: fixed;\n  top: 0;\n  left: 0;\n  z-index: var(--vd-sidenav-z-index);\n  width: var(--vd-sidenav-width);\n  height: 100vh;\n  display: flex;\n  flex-direction: column;\n  background-color: var(--vd-sidenav-bg);\n  box-shadow: var(--vd-shadow-lg);\n  transform: translateX(-100%);\n  transition: var(--vd-sidenav-transition);\n  overflow-y: auto;\n  overflow-x: hidden;\n}\n\n.vd-sidenav.is-open {\n  transform: translateX(0);\n}\n\n/* Sidenav Right */\n.vd-sidenav-right {\n  left: auto;\n  right: 0;\n  transform: translateX(100%);\n}\n\n.vd-sidenav-right.is-open {\n  transform: translateX(0);\n}\n\n/* Sidenav Variants */\n.vd-sidenav-overlay-variant {\n  /* Overlay variant - slides over content */\n}\n\n.vd-sidenav-push {\n  /* Push variant - pushes content */\n}\n\n.vd-sidenav-push.is-open ~ * {\n  margin-left: var(--vd-sidenav-width);\n  transition: margin-left var(--vd-transition-duration-slow) var(--vd-transition-ease);\n}\n\n.vd-sidenav-push.vd-sidenav-right.is-open ~ * {\n  margin-left: 0;\n  margin-right: var(--vd-sidenav-width);\n}\n\n.vd-sidenav-fixed {\n  position: fixed;\n  transform: translateX(0);\n}\n\n.vd-sidenav-fixed.is-open {\n  transform: translateX(0);\n}\n\n/* Sidenav Header */\n.vd-sidenav-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: var(--vd-sidenav-padding-y) var(--vd-sidenav-padding-x);\n  border-bottom: 1px solid var(--vd-sidenav-border-color);\n  flex-shrink: 0;\n}\n\n.vd-sidenav-title {\n  margin: 0;\n  font-size: var(--vd-font-size-lg);\n  font-weight: var(--vd-font-weight-semibold);\n  color: var(--vd-text-primary);\n}\n\n.vd-sidenav-close {\n  padding: 0.5rem;\n  margin: -0.5rem -0.5rem -0.5rem auto;\n  background: transparent;\n  border: 0;\n  border-radius: var(--vd-btn-border-radius);\n  opacity: 0.5;\n  cursor: pointer;\n  font-size: 1.5rem;\n  font-weight: var(--vd-font-weight-bold);\n  line-height: 1;\n  color: var(--vd-text-secondary);\n  transition: var(--vd-transition-opacity);\n}\n\n.vd-sidenav-close:hover,\n.vd-sidenav-close:focus {\n  opacity: 0.75;\n  outline: none;\n}\n\n/* Sidenav Body */\n.vd-sidenav-body {\n  flex: 1 1 auto;\n  padding: var(--vd-sidenav-padding-y) 0;\n  overflow-y: auto;\n  overflow-x: hidden;\n}\n\n/* Sidenav Footer */\n.vd-sidenav-footer {\n  padding: var(--vd-sidenav-padding-y) var(--vd-sidenav-padding-x);\n  border-top: 1px solid var(--vd-sidenav-border-color);\n  flex-shrink: 0;\n}\n\n/* Sidenav Navigation */\n.vd-sidenav-nav {\n  list-style: none;\n  padding: 0;\n  margin: 0;\n}\n\n/* Sidenav Section */\n.vd-sidenav-section {\n  padding: 0.5rem var(--vd-sidenav-padding-x);\n  margin-top: 0.5rem;\n  font-size: var(--vd-font-size-xs);\n  font-weight: var(--vd-font-weight-semibold);\n  color: var(--vd-text-muted);\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n}\n\n.vd-sidenav-section:first-child {\n  margin-top: 0;\n}\n\n/* Sidenav Item */\n.vd-sidenav-item {\n  display: block;\n}\n\n.vd-sidenav-link {\n  display: flex;\n  align-items: center;\n  padding: var(--vd-sidenav-item-padding-y) var(--vd-sidenav-item-padding-x);\n  font-size: var(--vd-font-size-base);\n  font-weight: var(--vd-font-weight-normal);\n  line-height: var(--vd-line-height-normal);\n  color: var(--vd-text-primary);\n  text-decoration: none;\n  transition: var(--vd-transition-bg);\n  cursor: pointer;\n}\n\n.vd-sidenav-link:hover {\n  background-color: var(--vd-sidenav-item-bg-hover);\n  color: var(--vd-text-primary);\n  text-decoration: none;\n}\n\n.vd-sidenav-link:focus {\n  outline: 2px solid var(--vd-input-focus-border-color);\n  outline-offset: -2px;\n}\n\n.vd-sidenav-item.active .vd-sidenav-link {\n  background-color: var(--vd-sidenav-item-bg-active);\n  color: var(--vd-sidenav-item-color-active);\n  font-weight: var(--vd-font-weight-medium);\n}\n\n/* Sidenav Divider */\n.vd-sidenav-divider {\n  height: 0;\n  margin: 0.5rem var(--vd-sidenav-padding-x);\n  overflow: hidden;\n  border-top: 1px solid var(--vd-sidenav-border-color);\n}\n\n/* Sidenav Sizes */\n.vd-sidenav-sm {\n  width: var(--vd-sidenav-width-sm);\n}\n\n.vd-sidenav-sm.vd-sidenav-push.is-open ~ * {\n  margin-left: var(--vd-sidenav-width-sm);\n}\n\n.vd-sidenav-sm.vd-sidenav-push.vd-sidenav-right.is-open ~ * {\n  margin-right: var(--vd-sidenav-width-sm);\n}\n\n.vd-sidenav-lg {\n  width: var(--vd-sidenav-width-lg);\n}\n\n.vd-sidenav-lg.vd-sidenav-push.is-open ~ * {\n  margin-left: var(--vd-sidenav-width-lg);\n}\n\n.vd-sidenav-lg.vd-sidenav-push.vd-sidenav-right.is-open ~ * {\n  margin-right: var(--vd-sidenav-width-lg);\n}\n\n/* ========== Offcanvas Alias ========== */\n\n.vd-offcanvas {\n  position: fixed;\n  top: 0;\n  left: 0;\n  z-index: var(--vd-sidenav-z-index);\n  width: var(--vd-sidenav-width);\n  height: 100vh;\n  display: flex;\n  flex-direction: column;\n  background-color: var(--vd-sidenav-bg);\n  box-shadow: var(--vd-shadow-lg);\n  transform: translateX(-100%);\n  transition: var(--vd-sidenav-transition);\n  overflow-y: auto;\n  overflow-x: hidden;\n}\n\n.vd-offcanvas.is-open {\n  transform: translateX(0) translateY(0);\n}\n\n/* Top direction */\n.vd-sidenav-top,\n.vd-offcanvas-top {\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: auto;\n  width: 100%;\n  height: auto;\n  max-height: 80vh;\n  transform: translateY(-100%);\n}\n\n.vd-sidenav-top.is-open,\n.vd-offcanvas-top.is-open {\n  transform: translateY(0);\n}\n\n/* Bottom direction */\n.vd-sidenav-bottom,\n.vd-offcanvas-bottom {\n  top: auto;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  width: 100%;\n  height: auto;\n  max-height: 80vh;\n  transform: translateY(100%);\n}\n\n.vd-sidenav-bottom.is-open,\n.vd-offcanvas-bottom.is-open {\n  transform: translateY(0);\n}\n\n/* Right alias for offcanvas */\n.vd-offcanvas-right {\n  left: auto;\n  right: 0;\n  transform: translateX(100%);\n}\n\n.vd-offcanvas-right.is-open {\n  transform: translateX(0);\n}\n\n/* Body Scroll Lock */\n.body-sidenav-open {\n  overflow: hidden;\n}\n\n/* Responsive Behavior */\n@media (max-width: 991.98px) {\n  .vd-sidenav {\n    /* On mobile, sidenav is always overlay */\n    position: fixed;\n  }\n  \n  .vd-sidenav-fixed {\n    /* Fixed sidenav becomes overlay on mobile */\n    position: fixed;\n    transform: translateX(-100%);\n  }\n  \n  .vd-sidenav-fixed.vd-sidenav-right {\n    transform: translateX(100%);\n  }\n  \n  .vd-sidenav-fixed.is-open {\n    transform: translateX(0);\n  }\n  \n  .vd-sidenav-push.is-open ~ * {\n    margin-left: 0;\n    margin-right: 0;\n  }\n}\n\n\n/**\n * Vanduo Framework - Preloader Component\n * Legacy preloader aliases and preloader layout helpers.\n *\n * Spinner visuals live in spinner.css. Progress bars live in progress.css.\n */\n\n/* Legacy preloader spinner alias */\n.vd-preloader {\n  display: inline-block;\n  width: var(--vd-spinner-size, 2rem);\n  height: var(--vd-spinner-size, 2rem);\n  border: var(--vd-spinner-border-width, 3px) solid var(--vd-border-color, #e9ecef);\n  border-top-color: var(--vd-spinner-color, var(--vd-color-primary));\n  border-radius: 50%;\n  animation: spinner-rotate var(--vd-spinner-speed, 0.65s) linear infinite;\n}\n\n/* Preloader Sizes */\n.vd-preloader-xs { --vd-spinner-size: 1rem; --vd-spinner-border-width: 2px; }\n.vd-preloader-sm { --vd-spinner-size: 1.5rem; --vd-spinner-border-width: 2px; }\n.vd-preloader-lg { --vd-spinner-size: 3rem; --vd-spinner-border-width: 4px; }\n.vd-preloader-xl { --vd-spinner-size: 4rem; --vd-spinner-border-width: 5px; }\n\n/* Preloader Colors */\n.vd-preloader-primary { --vd-spinner-color: var(--vd-color-primary); }\n.vd-preloader-secondary { --vd-spinner-color: var(--vd-color-secondary); }\n.vd-preloader-success { --vd-spinner-color: var(--vd-color-success); }\n.vd-preloader-warning { --vd-spinner-color: var(--vd-color-warning); }\n.vd-preloader-error { --vd-spinner-color: var(--vd-color-error); }\n.vd-preloader-info { --vd-spinner-color: var(--vd-color-info); }\n.vd-preloader-light { --vd-spinner-color: #fff; }\n.vd-preloader-dark { --vd-spinner-color: var(--vd-text-primary); }\n\n/* Preloader Container */\n.vd-preloader-container {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  min-height: 200px;\n  gap: 1rem;\n}\n\n.vd-preloader-text {\n  color: var(--vd-text-secondary);\n  font-size: var(--vd-font-size-sm);\n}\n\n/* Reduced Motion */\n@media (prefers-reduced-motion: reduce) {\n  .vd-preloader {\n    animation-duration: 1.5s;\n  }\n}\n\n\n/**\n * Vanduo Framework - Alerts\n * Alert and notification components for user feedback\n */\n\n:root {\n  /* Alert Spacing (Fibonacci: 21px/13px, ratio ~ phi) */\n  --vd-alert-padding-x: 1.3125rem;   /* 21px - fib */\n  --vd-alert-padding-y: 0.8125rem;   /* 13px - fib */\n  --vd-alert-border-radius: var(--vd-btn-border-radius);\n  --vd-alert-border-width: 1px;\n\n  /* Alert Colors */\n  --vd-alert-primary-bg: var(--vd-color-primary-alpha-10);\n  --vd-alert-primary-border: var(--vd-color-primary);\n  --vd-alert-primary-text: var(--vd-color-primary-dark);\n\n  --vd-alert-success-bg: var(--vd-color-success-alpha-10);\n  --vd-alert-success-border: var(--vd-color-success);\n  --vd-alert-success-text: var(--vd-color-success-dark);\n\n  --vd-alert-warning-bg: var(--vd-color-warning-alpha-10);\n  --vd-alert-warning-border: var(--vd-color-warning);\n  --vd-alert-warning-text: var(--vd-color-warning-dark);\n\n  --vd-alert-error-bg: var(--vd-color-error-alpha-10);\n  --vd-alert-error-border: var(--vd-color-error);\n  --vd-alert-error-text: var(--vd-color-error-dark);\n\n  --vd-alert-info-bg: var(--vd-color-info-alpha-10);\n  --vd-alert-info-border: var(--vd-color-info);\n  --vd-alert-info-text: var(--vd-color-info-dark);\n}\n\n/* Dark Theme Overrides */\n[data-theme=\"dark\"] {\n  --vd-alert-primary-text: var(--vd-color-primary-light);\n  --vd-alert-success-text: var(--vd-color-success-light);\n  --vd-alert-warning-text: var(--vd-color-warning-light);\n  --vd-alert-error-text: var(--vd-color-error-light);\n  --vd-alert-info-text: var(--vd-color-info-light);\n}\n\n@media (prefers-color-scheme: dark) {\n  :root:not([data-theme]) {\n    --vd-alert-primary-text: var(--vd-color-primary-light);\n    --vd-alert-success-text: var(--vd-color-success-light);\n    --vd-alert-warning-text: var(--vd-color-warning-light);\n    --vd-alert-error-text: var(--vd-color-error-light);\n    --vd-alert-info-text: var(--vd-color-info-light);\n  }\n}\n\n/* Base Alert */\n.vd-alert {\n  position: relative;\n  padding: var(--vd-alert-padding-y) var(--vd-alert-padding-x);\n  margin-bottom: 1rem;\n  border: var(--vd-alert-border-width) solid transparent;\n  border-radius: var(--vd-alert-border-radius);\n  font-size: var(--vd-font-size-base);\n  line-height: var(--vd-line-height-normal);\n}\n\n/* Alert Variants */\n.vd-alert-primary {\n  background-color: var(--vd-alert-primary-bg);\n  border-color: var(--vd-alert-primary-border);\n  color: var(--vd-alert-primary-text);\n}\n\n.vd-alert-success {\n  background-color: var(--vd-alert-success-bg);\n  border-color: var(--vd-alert-success-border);\n  color: var(--vd-alert-success-text);\n}\n\n.vd-alert-warning {\n  background-color: var(--vd-alert-warning-bg);\n  border-color: var(--vd-alert-warning-border);\n  color: var(--vd-alert-warning-text);\n}\n\n.vd-alert-error,\n.vd-alert-danger {\n  background-color: var(--vd-alert-error-bg);\n  border-color: var(--vd-alert-error-border);\n  color: var(--vd-alert-error-text);\n}\n\n.vd-alert-info {\n  background-color: var(--vd-alert-info-bg);\n  border-color: var(--vd-alert-info-border);\n  color: var(--vd-alert-info-text);\n}\n\n/* Alert with Icon */\n.vd-alert-icon {\n  display: flex;\n  align-items: flex-start;\n  gap: 0.75rem;\n}\n\n.vd-alert-icon > svg,\n.vd-alert-icon > .icon {\n  flex-shrink: 0;\n  width: 1.25rem;\n  height: 1.25rem;\n  margin-top: 0.125rem;\n}\n\n/* Alert Title */\n.vd-alert-title {\n  font-weight: var(--vd-font-weight-semibold);\n  margin-bottom: 0.25rem;\n}\n\n/* Alert Content */\n.vd-alert-content {\n  flex: 1;\n}\n\n/* Dismissible Alert */\n.vd-alert-dismissible {\n  padding-right: 3rem;\n}\n\n.vd-alert-close {\n  position: absolute;\n  top: 0;\n  right: 0;\n  padding: var(--vd-alert-padding-y) var(--vd-alert-padding-x);\n  background: transparent;\n  border: none;\n  cursor: pointer;\n  opacity: 0.5;\n  transition: opacity 0.15s ease;\n  color: inherit;\n  font-size: 1.25rem;\n  line-height: 1;\n}\n\n.vd-alert-close:hover {\n  opacity: 1;\n}\n\n.vd-alert-close:focus {\n  outline: 2px solid currentColor;\n  outline-offset: 2px;\n}\n\n/* Alert Link */\n.vd-alert a,\n.vd-alert-link {\n  font-weight: var(--vd-font-weight-semibold);\n  color: inherit;\n  text-decoration: underline;\n}\n\n.vd-alert a:hover,\n.vd-alert-link:hover {\n  text-decoration: none;\n}\n\n/* Solid Variants (filled background) */\n.vd-alert-solid.vd-alert-primary {\n  background-color: var(--vd-color-primary);\n  border-color: var(--vd-color-primary);\n  color: var(--vd-color-white);\n}\n\n.vd-alert-solid.vd-alert-success {\n  background-color: var(--vd-color-success);\n  border-color: var(--vd-color-success);\n  color: var(--vd-color-white);\n}\n\n.vd-alert-solid.vd-alert-warning {\n  background-color: var(--vd-color-warning);\n  border-color: var(--vd-color-warning);\n  color: var(--vd-color-gray-900);\n}\n\n.vd-alert-solid.vd-alert-error,\n.vd-alert-solid.vd-alert-danger {\n  background-color: var(--vd-color-error);\n  border-color: var(--vd-color-error);\n  color: var(--vd-color-white);\n}\n\n.vd-alert-solid.vd-alert-info {\n  background-color: var(--vd-color-info);\n  border-color: var(--vd-color-info);\n  color: var(--vd-color-white);\n}\n\n/* Outline Variants */\n.vd-alert-outline {\n  background-color: transparent;\n}\n\n/* Alert Sizes */\n.vd-alert-sm {\n  padding: 0.3125rem 0.5rem; /* 5px 8px - fib pair */\n  font-size: var(--vd-font-size-sm);\n}\n\n.vd-alert-lg {\n  padding: 1.3125rem 2.125rem; /* 21px 34px - fib pair */\n  font-size: var(--vd-font-size-lg);\n}\n\n/* Alert with Border Left Accent */\n.vd-alert-accent {\n  border-left-width: 4px;\n  border-radius: 0 var(--vd-alert-border-radius) var(--vd-alert-border-radius) 0;\n}\n\n/* Reduced Motion */\n@media (prefers-reduced-motion: reduce) {\n  .vd-alert-close {\n    transition: none;\n  }\n}\n\n/**\n * Vanduo Framework - Chips/Tags\n * Small interactive elements for tags, filters, and selections\n */\n\n:root {\n  /* Chip Sizing (Fibonacci) */\n  --vd-chip-padding-x: 0.8125rem;     /* 13px - fib */\n  --vd-chip-padding-y: 0.3125rem;     /* 5px  - fib */\n  --vd-chip-padding-x-sm: 0.5rem;     /* 8px  - fib */\n  --vd-chip-padding-y-sm: 0.1875rem;  /* 3px  - fib */\n  --vd-chip-padding-x-lg: 1.3125rem;  /* 21px - fib */\n  --vd-chip-padding-y-lg: 0.5rem;     /* 8px  - fib */\n  --vd-chip-border-radius: 9999px;\n  --vd-chip-font-size: var(--vd-font-size-sm);\n  --vd-chip-font-size-sm: var(--vd-font-size-xs);\n  --vd-chip-font-size-lg: var(--vd-font-size-base);\n\n  /* Chip Colors */\n  --vd-chip-bg: var(--vd-bg-secondary);\n  --vd-chip-text: var(--vd-text-primary);\n  --vd-chip-border: var(--vd-border-color);\n}\n\n/* Dark Theme Overrides */\n[data-theme=\"dark\"] {\n  --vd-chip-bg: var(--vd-color-gray-700);\n}\n\n@media (prefers-color-scheme: dark) {\n  :root:not([data-theme]) {\n    --vd-chip-bg: var(--vd-color-gray-700);\n  }\n}\n\n/* Base Chip */\n.vd-chip,\n.tag {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.375rem;\n  padding: var(--vd-chip-padding-y) var(--vd-chip-padding-x);\n  font-size: var(--vd-chip-font-size);\n  font-weight: var(--vd-font-weight-medium);\n  line-height: 1.2;\n  color: var(--vd-chip-text);\n  background-color: var(--vd-chip-bg);\n  border-radius: var(--vd-chip-border-radius);\n  white-space: nowrap;\n  vertical-align: middle;\n  transition: var(--vd-transition-base);\n}\n\n/* Chip Sizes */\n.vd-chip-sm,\n.tag-sm {\n  padding: var(--vd-chip-padding-y-sm) var(--vd-chip-padding-x-sm);\n  font-size: var(--vd-chip-font-size-sm);\n}\n\n.vd-chip-lg,\n.tag-lg {\n  padding: var(--vd-chip-padding-y-lg) var(--vd-chip-padding-x-lg);\n  font-size: var(--vd-chip-font-size-lg);\n}\n\n/* Chip Color Variants */\n.vd-chip-primary,\n.tag-primary {\n  background-color: var(--vd-color-primary);\n  color: var(--vd-color-white);\n}\n\n.vd-chip-secondary,\n.tag-secondary {\n  background-color: var(--vd-color-secondary);\n  color: var(--vd-color-white);\n}\n\n.vd-chip-success,\n.tag-success {\n  background-color: var(--vd-color-success);\n  color: var(--vd-color-white);\n}\n\n.vd-chip-warning,\n.tag-warning {\n  background-color: var(--vd-color-warning);\n  color: var(--vd-color-gray-900);\n}\n\n.vd-chip-error,\n.tag-error,\n.vd-chip-danger,\n.tag-danger {\n  background-color: var(--vd-color-error);\n  color: var(--vd-color-white);\n}\n\n.vd-chip-info,\n.tag-info {\n  background-color: var(--vd-color-info);\n  color: var(--vd-color-white);\n}\n\n/* Outline Variants */\n.vd-chip-outline,\n.tag-outline {\n  background-color: transparent;\n  border: 1px solid var(--vd-chip-border);\n}\n\n.vd-chip-outline.vd-chip-primary,\n.tag-outline.tag-primary {\n  border-color: var(--vd-color-primary);\n  color: var(--vd-color-primary);\n  background-color: transparent;\n}\n\n.vd-chip-outline.vd-chip-success,\n.tag-outline.tag-success {\n  border-color: var(--vd-color-success);\n  color: var(--vd-color-success);\n  background-color: transparent;\n}\n\n.vd-chip-outline.vd-chip-warning,\n.tag-outline.tag-warning {\n  border-color: var(--vd-color-warning);\n  color: var(--vd-color-warning);\n  background-color: transparent;\n}\n\n.vd-chip-outline.vd-chip-error,\n.tag-outline.tag-error {\n  border-color: var(--vd-color-error);\n  color: var(--vd-color-error);\n  background-color: transparent;\n}\n\n.vd-chip-outline.vd-chip-info,\n.tag-outline.tag-info {\n  border-color: var(--vd-color-info);\n  color: var(--vd-color-info);\n  background-color: transparent;\n}\n\n/* Clickable/Interactive Chip */\n.vd-chip-clickable,\n.tag-clickable,\na.vd-chip,\na.tag,\nbutton.vd-chip,\nbutton.tag {\n  cursor: pointer;\n  text-decoration: none;\n  border: none;\n}\n\n.vd-chip-clickable:hover,\n.tag-clickable:hover,\na.vd-chip:hover,\na.tag:hover,\nbutton.vd-chip:hover,\nbutton.tag:hover {\n  filter: brightness(0.9);\n}\n\n.vd-chip-clickable:focus-visible,\n.tag-clickable:focus-visible,\na.vd-chip:focus-visible,\na.tag:focus-visible,\nbutton.vd-chip:focus-visible,\nbutton.tag:focus-visible {\n  outline: 2px solid var(--vd-color-primary);\n  outline-offset: 2px;\n}\n\n/* Dismissible Chip */\n.vd-chip-dismissible,\n.tag-dismissible {\n  padding-right: 0.375rem;\n}\n\n.vd-chip-close,\n.tag-close {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 1rem;\n  height: 1rem;\n  padding: 0;\n  margin-left: 0.125rem;\n  font-size: 0.75rem;\n  line-height: 1;\n  color: inherit;\n  background: transparent;\n  border: none;\n  border-radius: 50%;\n  cursor: pointer;\n  opacity: 0.7;\n  transition: opacity 0.15s ease;\n}\n\n.vd-chip-close:hover,\n.tag-close:hover {\n  opacity: 1;\n}\n\n.vd-chip-close::before,\n.tag-close::before {\n  content: '\\00D7';\n  font-size: 1rem;\n  font-weight: bold;\n}\n\n/* Chip with Avatar/Image */\n.vd-chip-avatar,\n.tag-avatar {\n  padding-left: 0.25rem;\n}\n\n.vd-chip-avatar img,\n.tag-avatar img {\n  width: 1.5rem;\n  height: 1.5rem;\n  border-radius: 50%;\n  object-fit: cover;\n}\n\n.vd-chip-sm.vd-chip-avatar img,\n.tag-sm.tag-avatar img {\n  width: 1.25rem;\n  height: 1.25rem;\n}\n\n.vd-chip-lg.vd-chip-avatar img,\n.tag-lg.tag-avatar img {\n  width: 1.75rem;\n  height: 1.75rem;\n}\n\n/* Chip Group */\n.vd-chip-group,\n.tag-group {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 0.5rem;\n}\n\n/* Reduced Motion */\n@media (prefers-reduced-motion: reduce) {\n  .vd-chip,\n  .tag,\n  .vd-chip-close,\n  .tag-close {\n    transition: none;\n  }\n}\n\n/**\n * Vanduo Framework - Avatar\n * User profile images and placeholders\n */\n\n:root {\n  /* Avatar Sizes (Fibonacci) */\n  --vd-avatar-size-xs: 1.3125rem;  /* 21px - fib */\n  --vd-avatar-size-sm: 2.125rem;   /* 34px - fib */\n  --vd-avatar-size-md: 3.4375rem;  /* 55px - fib */\n  --vd-avatar-size: 3.4375rem;     /* 55px - fib (default / md) */\n  --vd-avatar-size-lg: 5.5625rem;  /* 89px - fib */\n  --vd-avatar-size-xl: 9rem;       /* 144px - fib */\n  --vd-avatar-size-2xl: 14.5625rem;/* 233px - fib */\n\n  /* Avatar Colors */\n  --vd-avatar-bg: var(--vd-color-gray-300);\n  --vd-avatar-text: var(--vd-color-gray-700);\n  --vd-avatar-border: var(--vd-color-white);\n  --vd-avatar-status-online: var(--vd-color-success);\n  --vd-avatar-status-offline: var(--vd-color-gray-400);\n  --vd-avatar-status-busy: var(--vd-color-error);\n  --vd-avatar-status-away: var(--vd-color-warning);\n}\n\n/* Dark Theme Overrides */\n[data-theme=\"dark\"] {\n  --vd-avatar-bg: var(--vd-color-gray-600);\n  --vd-avatar-text: var(--vd-color-gray-200);\n  --vd-avatar-border: var(--vd-color-gray-800);\n}\n\n@media (prefers-color-scheme: dark) {\n  :root:not([data-theme]) {\n    --vd-avatar-bg: var(--vd-color-gray-600);\n    --vd-avatar-text: var(--vd-color-gray-200);\n    --vd-avatar-border: var(--vd-color-gray-800);\n  }\n}\n\n/* Base Avatar */\n.vd-avatar {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--vd-avatar-size);\n  height: var(--vd-avatar-size);\n  border-radius: 50%;\n  background-color: var(--vd-avatar-bg);\n  color: var(--vd-avatar-text);\n  font-weight: var(--vd-font-weight-medium);\n  font-size: calc(var(--vd-avatar-size) * 0.4);\n  line-height: 1;\n  overflow: hidden;\n  flex-shrink: 0;\n  vertical-align: middle;\n}\n\n/* Avatar Image */\n.vd-avatar img {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  border-radius: inherit;\n}\n\n/* Avatar Initials (fallback) */\n.vd-avatar-initials {\n  text-transform: uppercase;\n  user-select: none;\n}\n\n/* Avatar Sizes */\n.vd-avatar-xs {\n  width: var(--vd-avatar-size-xs);\n  height: var(--vd-avatar-size-xs);\n  font-size: calc(var(--vd-avatar-size-xs) * 0.4);\n}\n\n.vd-avatar-sm {\n  width: var(--vd-avatar-size-sm);\n  height: var(--vd-avatar-size-sm);\n  font-size: calc(var(--vd-avatar-size-sm) * 0.4);\n}\n\n.vd-avatar-md {\n  width: var(--vd-avatar-size-md);\n  height: var(--vd-avatar-size-md);\n  font-size: calc(var(--vd-avatar-size-md) * 0.4);\n}\n\n.vd-avatar-lg {\n  width: var(--vd-avatar-size-lg);\n  height: var(--vd-avatar-size-lg);\n  font-size: calc(var(--vd-avatar-size-lg) * 0.4);\n}\n\n.vd-avatar-xl {\n  width: var(--vd-avatar-size-xl);\n  height: var(--vd-avatar-size-xl);\n  font-size: calc(var(--vd-avatar-size-xl) * 0.4);\n}\n\n.vd-avatar-2xl {\n  width: var(--vd-avatar-size-2xl);\n  height: var(--vd-avatar-size-2xl);\n  font-size: calc(var(--vd-avatar-size-2xl) * 0.4);\n}\n\n/* Avatar Shapes */\n.vd-avatar-rounded {\n  border-radius: var(--vd-btn-border-radius);\n}\n\n.vd-avatar-square {\n  border-radius: 0;\n}\n\n/* Avatar Status Indicator */\n.vd-avatar-status {\n  position: absolute;\n  bottom: 0;\n  right: 0;\n  width: 25%;\n  height: 25%;\n  min-width: 0.5rem;\n  min-height: 0.5rem;\n  border-radius: 50%;\n  border: 2px solid var(--vd-avatar-border);\n  background-color: var(--vd-avatar-status-offline);\n}\n\n.vd-avatar.vd-avatar-status-online,\n.vd-avatar.vd-avatar-status-offline,\n.vd-avatar.vd-avatar-status-busy,\n.vd-avatar.vd-avatar-status-away {\n  overflow: visible;\n}\n\n.vd-avatar.vd-avatar-status-online::after,\n.vd-avatar.vd-avatar-status-offline::after,\n.vd-avatar.vd-avatar-status-busy::after,\n.vd-avatar.vd-avatar-status-away::after {\n  content: '';\n  position: absolute;\n  bottom: 2%;\n  right: 2%;\n  width: 25%;\n  height: 25%;\n  min-width: 0.5rem;\n  min-height: 0.5rem;\n  border-radius: 50%;\n  border: 2px solid var(--vd-avatar-border);\n}\n\n.vd-avatar.vd-avatar-status-online::after  { background-color: var(--vd-avatar-status-online); }\n.vd-avatar.vd-avatar-status-offline::after { background-color: var(--vd-avatar-status-offline); }\n.vd-avatar.vd-avatar-status-busy::after    { background-color: var(--vd-avatar-status-busy); }\n.vd-avatar.vd-avatar-status-away::after    { background-color: var(--vd-avatar-status-away); }\n\n/* Avatar with Ring/Border */\n.vd-avatar-ring {\n  box-shadow: 0 0 0 3px var(--vd-avatar-border), 0 0 0 5px var(--vd-color-primary);\n}\n\n.vd-avatar-ring-success {\n  box-shadow: 0 0 0 3px var(--vd-avatar-border), 0 0 0 5px var(--vd-color-success);\n}\n\n.vd-avatar-ring-warning {\n  box-shadow: 0 0 0 3px var(--vd-avatar-border), 0 0 0 5px var(--vd-color-warning);\n}\n\n.vd-avatar-ring-error {\n  box-shadow: 0 0 0 3px var(--vd-avatar-border), 0 0 0 5px var(--vd-color-error);\n}\n\n/* Avatar Group (stacked avatars) */\n.vd-avatar-group {\n  display: inline-flex;\n  flex-direction: row-reverse;\n}\n\n.vd-avatar-group .vd-avatar {\n  border: 2px solid var(--vd-avatar-border);\n  margin-left: -0.75rem;\n}\n\n.vd-avatar-group .vd-avatar:last-child {\n  margin-left: 0;\n}\n\n.vd-avatar-group .vd-avatar:hover {\n  z-index: 1;\n}\n\n/* Avatar Group Sizes */\n.vd-avatar-group-sm .vd-avatar {\n  margin-left: -0.5rem;\n}\n\n.vd-avatar-group-lg .vd-avatar {\n  margin-left: -1rem;\n}\n\n/* Avatar Group with Counter */\n.vd-avatar-group-count {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--vd-avatar-size);\n  height: var(--vd-avatar-size);\n  border-radius: 50%;\n  background-color: var(--vd-color-gray-200);\n  color: var(--vd-text-primary);\n  font-size: var(--vd-font-size-sm);\n  font-weight: var(--vd-font-weight-medium);\n  border: 2px solid var(--vd-avatar-border);\n  margin-left: -0.75rem;\n}\n\n[data-theme=\"dark\"] .vd-avatar-group-count {\n  background-color: var(--vd-color-gray-700);\n}\n\n/* Color Variants */\n.vd-avatar-primary {\n  background-color: var(--vd-color-primary);\n  color: var(--vd-color-white);\n}\n\n.vd-avatar-secondary {\n  background-color: var(--vd-color-secondary);\n  color: var(--vd-color-white);\n}\n\n.vd-avatar-success {\n  background-color: var(--vd-color-success);\n  color: var(--vd-color-white);\n}\n\n.vd-avatar-warning {\n  background-color: var(--vd-color-warning);\n  color: var(--vd-color-gray-900);\n}\n\n.vd-avatar-error {\n  background-color: var(--vd-color-error);\n  color: var(--vd-color-white);\n}\n\n.vd-avatar-info {\n  background-color: var(--vd-color-info);\n  color: var(--vd-color-white);\n}\n\n/* Clickable Avatar */\na.vd-avatar,\nbutton.vd-avatar {\n  cursor: pointer;\n  transition: transform 0.15s ease, box-shadow 0.15s ease;\n}\n\na.vd-avatar:hover,\nbutton.vd-avatar:hover {\n  transform: scale(1.05);\n}\n\na.vd-avatar:focus-visible,\nbutton.vd-avatar:focus-visible {\n  outline: 2px solid var(--vd-color-primary);\n  outline-offset: 2px;\n}\n\n/* Reduced Motion */\n@media (prefers-reduced-motion: reduce) {\n  a.vd-avatar,\n  button.vd-avatar {\n    transition: none;\n  }\n\n  a.vd-avatar:hover,\n  button.vd-avatar:hover {\n    transform: none;\n  }\n}\n\n/**\n * Vanduo Framework - Skeleton\n * Loading placeholder animations\n */\n\n:root {\n  /* Skeleton Colors */\n  --vd-skeleton-bg: var(--vd-color-gray-200);\n  --vd-skeleton-shimmer: var(--vd-color-gray-100);\n  --vd-skeleton-border-radius: var(--vd-btn-border-radius);\n}\n\n/* Dark Theme Overrides */\n[data-theme=\"dark\"] {\n  --vd-skeleton-bg: var(--vd-color-gray-700);\n  --vd-skeleton-shimmer: var(--vd-color-gray-600);\n}\n\n@media (prefers-color-scheme: dark) {\n  :root:not([data-theme]) {\n    --vd-skeleton-bg: var(--vd-color-gray-700);\n    --vd-skeleton-shimmer: var(--vd-color-gray-600);\n  }\n}\n\n/* Base Skeleton */\n.vd-skeleton {\n  position: relative;\n  overflow: hidden;\n  background-color: var(--vd-skeleton-bg);\n  border-radius: var(--vd-skeleton-border-radius);\n}\n\n/* Shimmer Animation */\n.vd-skeleton::after {\n  content: '';\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  transform: translateX(-100%);\n  background: linear-gradient(\n    90deg,\n    transparent,\n    var(--vd-skeleton-shimmer),\n    transparent\n  );\n  animation: skeleton-shimmer 1.5s infinite;\n}\n\n@keyframes skeleton-shimmer {\n  100% {\n    transform: translateX(100%);\n  }\n}\n\n/* Skeleton Text (single line) */\n.vd-skeleton-text {\n  height: 1rem;\n  width: 100%;\n  margin-bottom: 0.5rem;\n}\n\n.vd-skeleton-text:last-child {\n  width: 80%;\n  margin-bottom: 0;\n}\n\n/* Skeleton Text Sizes */\n.vd-skeleton-text-xs { height: 0.75rem; }\n.vd-skeleton-text-sm { height: 0.875rem; }\n.vd-skeleton-text-lg { height: 1.25rem; }\n.vd-skeleton-text-xl { height: 1.5rem; }\n\n/* Skeleton Heading */\n.vd-skeleton-heading {\n  height: 1.5rem;\n  width: 60%;\n  margin-bottom: 1rem;\n}\n\n.vd-skeleton-heading-lg {\n  height: 2rem;\n  width: 50%;\n}\n\n/* Skeleton Circle (for avatars) */\n.vd-skeleton-circle {\n  border-radius: 50%;\n  width: 3rem;\n  height: 3rem;\n}\n\n.vd-skeleton-circle-xs { width: 1.5rem; height: 1.5rem; }\n.vd-skeleton-circle-sm { width: 2rem; height: 2rem; }\n.vd-skeleton-circle-md { width: 2.5rem; height: 2.5rem; }\n.vd-skeleton-circle-lg { width: 4rem; height: 4rem; }\n.vd-skeleton-circle-xl { width: 5rem; height: 5rem; }\n\n/* Skeleton Rectangle (for images/thumbnails) */\n.vd-skeleton-rect {\n  width: 100%;\n  height: 200px;\n}\n\n.vd-skeleton-rect-sm { height: 100px; }\n.vd-skeleton-rect-lg { height: 300px; }\n\n/* Skeleton Button */\n.vd-skeleton-button {\n  height: 2.5rem;\n  width: 6rem;\n  border-radius: var(--vd-btn-border-radius);\n}\n\n.vd-skeleton-button-sm {\n  height: 2rem;\n  width: 4rem;\n}\n\n.vd-skeleton-button-lg {\n  height: 3rem;\n  width: 8rem;\n}\n\n/* Skeleton Card */\n.vd-skeleton-card {\n  padding: 1rem;\n  border-radius: var(--vd-btn-border-radius);\n  border: 1px solid var(--vd-border-color);\n}\n\n/* Skeleton Input */\n.vd-skeleton-input {\n  height: 2.5rem;\n  width: 100%;\n  border-radius: var(--vd-btn-border-radius);\n}\n\n/* Skeleton Paragraph (multiple lines) */\n.vd-skeleton-paragraph {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n}\n\n.vd-skeleton-paragraph .vd-skeleton-text {\n  margin-bottom: 0;\n}\n\n.vd-skeleton-paragraph .vd-skeleton-text:nth-child(1) { width: 100%; }\n.vd-skeleton-paragraph .vd-skeleton-text:nth-child(2) { width: 95%; }\n.vd-skeleton-paragraph .vd-skeleton-text:nth-child(3) { width: 90%; }\n.vd-skeleton-paragraph .vd-skeleton-text:nth-child(4) { width: 70%; }\n\n/* Skeleton List */\n.vd-skeleton-list {\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n}\n\n.vd-skeleton-list-item {\n  display: flex;\n  align-items: center;\n  gap: 1rem;\n}\n\n.vd-skeleton-list-item .vd-skeleton-circle {\n  flex-shrink: 0;\n}\n\n.vd-skeleton-list-item-content {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n}\n\n/* Skeleton Grid */\n.vd-skeleton-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));\n  gap: 1rem;\n}\n\n/* Skeleton Table Row */\n.vd-skeleton-table-row {\n  display: flex;\n  gap: 1rem;\n  padding: 0.75rem 0;\n  border-bottom: 1px solid var(--vd-border-color);\n}\n\n.vd-skeleton-table-row .vd-skeleton-text {\n  margin-bottom: 0;\n}\n\n/* Width Variants */\n.vd-skeleton-w-full { width: 100%; }\n.vd-skeleton-w-3-4 { width: 75%; }\n.vd-skeleton-w-2-3 { width: 66.666667%; }\n.vd-skeleton-w-1-2 { width: 50%; }\n.vd-skeleton-w-1-3 { width: 33.333333%; }\n.vd-skeleton-w-1-4 { width: 25%; }\n\n/* No Animation Variant */\n.vd-skeleton-static::after {\n  display: none;\n}\n\n/* Pulse Animation Variant */\n.vd-skeleton-pulse {\n  animation: skeleton-pulse 1.5s ease-in-out infinite;\n}\n\n.vd-skeleton-pulse::after {\n  display: none;\n}\n\n@keyframes skeleton-pulse {\n  0%, 100% {\n    opacity: 1;\n  }\n  50% {\n    opacity: 0.5;\n  }\n}\n\n/* Reduced Motion */\n@media (prefers-reduced-motion: reduce) {\n  .vd-skeleton::after {\n    animation: none;\n    transform: none;\n    background: transparent;\n  }\n\n  .vd-skeleton-pulse {\n    animation: none;\n  }\n}\n\n/**\n * Vanduo Framework - Tabs\n * Tabbed content navigation component\n */\n\n:root {\n  /* Tab Sizing (Fibonacci pairs: x/y ratio ~ phi) */\n  --vd-tab-padding-x: 1.3125rem;     /* 21px - fib */\n  --vd-tab-padding-y: 0.8125rem;     /* 13px - fib */\n  --vd-tab-padding-x-sm: 0.8125rem;  /* 13px - fib */\n  --vd-tab-padding-y-sm: 0.5rem;     /* 8px  - fib */\n  --vd-tab-padding-x-lg: 2.125rem;   /* 34px - fib */\n  --vd-tab-padding-y-lg: 1.3125rem;  /* 21px - fib */\n  --vd-tab-gap: 0;\n  --vd-tab-border-width: 2px; /* fib(2) */\n\n  /* Tab Colors */\n  --vd-tab-text: var(--vd-text-secondary);\n  --vd-tab-text-hover: var(--vd-text-primary);\n  --vd-tab-text-active: var(--vd-color-primary);\n  --vd-tab-border: var(--vd-border-color);\n  --vd-tab-border-active: var(--vd-color-primary);\n  --vd-tab-bg-hover: var(--vd-bg-secondary);\n}\n\n/* Dark Theme Overrides */\n[data-theme=\"dark\"] {\n  --vd-tab-bg-hover: var(--vd-color-gray-800);\n}\n\n@media (prefers-color-scheme: dark) {\n  :root:not([data-theme]) {\n    --vd-tab-bg-hover: var(--vd-color-gray-800);\n  }\n}\n\n/* Base Tabs Container */\n.vd-tabs {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n}\n\n/* Tab List */\n.vd-tab-list {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--vd-tab-gap);\n  padding: 0;\n  margin: 0;\n  list-style: none;\n  border-bottom: 1px solid var(--vd-tab-border);\n}\n\n/* Tab Item */\n.vd-tab-item {\n  margin-bottom: -1px;\n}\n\n/* Tab Link/Button */\n.vd-tab-link {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.5rem;\n  padding: var(--vd-tab-padding-y) var(--vd-tab-padding-x);\n  font-size: var(--vd-font-size-base);\n  font-weight: var(--vd-font-weight-medium);\n  color: var(--vd-tab-text);\n  text-decoration: none;\n  background: transparent;\n  border: none;\n  border-bottom: var(--vd-tab-border-width) solid transparent;\n  cursor: pointer;\n  transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;\n  white-space: nowrap;\n}\n\n.vd-tab-link:hover {\n  color: var(--vd-tab-text-hover);\n  background-color: var(--vd-tab-bg-hover);\n}\n\n.vd-tab-link:focus-visible {\n  outline: 2px solid var(--vd-color-primary);\n  outline-offset: -2px;\n}\n\n/* Active Tab */\n.vd-tab-link.is-active,\n.vd-tab-item.is-active .vd-tab-link {\n  color: var(--vd-tab-text-active);\n  border-bottom-color: var(--vd-tab-border-active);\n}\n\n/* Disabled Tab */\n.vd-tab-link.disabled,\n.vd-tab-link:disabled,\n.vd-tab-item.disabled .vd-tab-link {\n  color: var(--vd-text-muted);\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n/* Tab Content */\n.vd-tab-content {\n  padding-top: 1rem;\n}\n\n/* Tab Pane */\n.vd-tab-pane {\n  display: none;\n}\n\n.vd-tab-pane.is-active {\n  display: block;\n}\n\n/* Fade Animation */\n.vd-tabs-fade .vd-tab-pane {\n  opacity: 0;\n  transition: opacity 0.15s ease;\n}\n\n.vd-tabs-fade .vd-tab-pane.is-active {\n  opacity: 1;\n}\n\n/* Tab Variants - Boxed */\n.vd-tabs-boxed .vd-tab-list {\n  background-color: var(--vd-bg-secondary);\n  padding: 0.25rem;\n  border-radius: var(--vd-btn-border-radius);\n  border-bottom: none;\n  gap: 0.25rem;\n}\n\n.vd-tabs-boxed .vd-tab-link {\n  border-radius: var(--vd-btn-border-radius);\n  border-bottom: none;\n}\n\n.vd-tabs-boxed .vd-tab-link:hover {\n  background-color: var(--vd-color-gray-200);\n}\n\n.vd-tabs-boxed .vd-tab-link.is-active,\n.vd-tabs-boxed .vd-tab-item.is-active .vd-tab-link {\n  background-color: var(--vd-bg-primary);\n  color: var(--vd-text-primary);\n  box-shadow: var(--vd-shadow-sm);\n}\n\n[data-theme=\"dark\"] .vd-tabs-boxed .vd-tab-link:hover {\n  background-color: var(--vd-color-gray-700);\n}\n\n/* Tab Variants - Pills */\n.vd-tabs-pills .vd-tab-list {\n  border-bottom: none;\n  gap: 0.5rem;\n}\n\n.vd-tabs-pills .vd-tab-link {\n  border-radius: var(--vd-btn-border-radius);\n  border-bottom: none;\n}\n\n.vd-tabs-pills .vd-tab-link.is-active,\n.vd-tabs-pills .vd-tab-item.is-active .vd-tab-link {\n  background-color: var(--vd-color-primary);\n  color: var(--vd-color-white);\n}\n\n/* Tab Variants - Bordered */\n.vd-tabs-bordered .vd-tab-list {\n  border: 1px solid var(--vd-tab-border);\n  border-radius: var(--vd-btn-border-radius) var(--vd-btn-border-radius) 0 0;\n  border-bottom: none;\n}\n\n.vd-tabs-bordered .vd-tab-link {\n  border: 1px solid transparent;\n  border-bottom: none;\n  margin: -1px -1px 0 -1px;\n}\n\n.vd-tabs-bordered .vd-tab-link.is-active,\n.vd-tabs-bordered .vd-tab-item.is-active .vd-tab-link {\n  border-color: var(--vd-tab-border);\n  background-color: var(--vd-bg-primary);\n  border-bottom-color: var(--vd-bg-primary);\n  border-radius: var(--vd-btn-border-radius) var(--vd-btn-border-radius) 0 0;\n}\n\n.vd-tabs-bordered .vd-tab-content {\n  border: 1px solid var(--vd-tab-border);\n  border-top: none;\n  border-radius: 0 0 var(--vd-btn-border-radius) var(--vd-btn-border-radius);\n  padding: 1rem;\n}\n\n/* Tab Variants - Underline Only */\n.vd-tabs-underline .vd-tab-list {\n  border-bottom: 2px solid var(--vd-tab-border);\n}\n\n.vd-tabs-underline .vd-tab-link {\n  margin-bottom: -2px;\n}\n\n/* Tab Sizes */\n.vd-tabs-sm .vd-tab-link {\n  padding: var(--vd-tab-padding-y-sm) var(--vd-tab-padding-x-sm);\n  font-size: var(--vd-font-size-sm);\n}\n\n.vd-tabs-lg .vd-tab-link {\n  padding: var(--vd-tab-padding-y-lg) var(--vd-tab-padding-x-lg);\n  font-size: var(--vd-font-size-lg);\n}\n\n/* Full Width Tabs */\n.vd-tabs-full .vd-tab-list {\n  width: 100%;\n}\n\n.vd-tabs-full .vd-tab-item {\n  flex: 1;\n}\n\n.vd-tabs-full .vd-tab-link {\n  width: 100%;\n  justify-content: center;\n}\n\n/* Centered Tabs */\n.vd-tabs-center .vd-tab-list {\n  justify-content: center;\n}\n\n/* Right Aligned Tabs */\n.vd-tabs-end .vd-tab-list {\n  justify-content: flex-end;\n}\n\n/* Vertical Tabs */\n.vd-tabs-vertical {\n  flex-direction: row;\n}\n\n.vd-tabs-vertical .vd-tab-list {\n  flex-direction: column;\n  border-bottom: none;\n  border-right: 1px solid var(--vd-tab-border);\n  width: auto;\n  flex-shrink: 0;\n}\n\n.vd-tabs-vertical .vd-tab-item {\n  margin-bottom: 0;\n  margin-right: -1px;\n}\n\n.vd-tabs-vertical .vd-tab-link {\n  box-sizing: border-box;\n  width: 100%;\n  border-bottom: none;\n  border-right: var(--vd-tab-border-width) solid transparent;\n  justify-content: flex-start;\n}\n\n.vd-tabs-vertical .vd-tab-link.is-active,\n.vd-tabs-vertical .vd-tab-item.is-active .vd-tab-link {\n  border-bottom-color: transparent;\n  border-right-color: var(--vd-tab-border-active);\n}\n\n.vd-tabs-vertical .vd-tab-content {\n  padding-top: 0;\n  padding-left: 1rem;\n  flex: 1;\n}\n\n/* Tab with Icon */\n.vd-tab-link .icon,\n.vd-tab-link svg {\n  width: 1em;\n  height: 1em;\n}\n\n/* Tab with Badge/Count */\n.vd-tab-badge {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-width: 1.25rem;\n  height: 1.25rem;\n  padding: 0 0.375rem;\n  font-size: 0.75rem;\n  font-weight: var(--vd-font-weight-semibold);\n  line-height: 1;\n  background-color: var(--vd-color-gray-200);\n  border-radius: 9999px;\n}\n\n.vd-tab-link.is-active .vd-tab-badge {\n  background-color: var(--vd-color-primary-alpha-20);\n  color: var(--vd-color-primary);\n}\n\n/* Scrollable Tabs (for many tabs) */\n.vd-tabs-scrollable .vd-tab-list {\n  flex-wrap: nowrap;\n  overflow-x: auto;\n  -webkit-overflow-scrolling: touch;\n  scrollbar-width: none;\n}\n\n.vd-tabs-scrollable .vd-tab-list::-webkit-scrollbar {\n  display: none;\n}\n\n/* Reduced Motion */\n@media (prefers-reduced-motion: reduce) {\n  .vd-tab-link,\n  .vd-tabs-fade .vd-tab-pane {\n    transition: none;\n  }\n}\n\n/**\n * Vanduo Framework - Toast Notifications\n * Popup notifications for user feedback\n */\n\n:root {\n  /* Toast Sizing (Fibonacci) */\n  --vd-toast-width: 377px;             /* fib */\n  --vd-toast-max-width: 90vw;\n  --vd-toast-padding-x: 1.3125rem;     /* 21px - fib */\n  --vd-toast-padding-y: 0.8125rem;     /* 13px - fib */\n  --vd-toast-border-radius: var(--vd-radius-fib-5);\n  --vd-toast-gap: 0.8125rem;           /* 13px - fib */\n\n  /* Toast Colors */\n  --vd-toast-bg: var(--vd-color-white);\n  --vd-toast-text: var(--vd-text-primary);\n  --vd-toast-border: var(--vd-border-color);\n  --vd-toast-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n}\n\n/* Dark Theme Overrides */\n[data-theme=\"dark\"] {\n  --vd-toast-bg: var(--vd-color-gray-800);\n  --vd-toast-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);\n}\n\n@media (prefers-color-scheme: dark) {\n  :root:not([data-theme]) {\n    --vd-toast-bg: var(--vd-color-gray-800);\n    --vd-toast-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);\n  }\n}\n\n/* Toast Container - Positions toasts on screen */\n.vd-toast-container {\n  position: fixed;\n  z-index: 9999;\n  display: flex;\n  flex-direction: column;\n  gap: var(--vd-toast-gap);\n  pointer-events: none;\n  padding: 1rem;\n}\n\n/* Container Positions */\n.vd-toast-container-top-right {\n  top: 0;\n  right: 0;\n  align-items: flex-end;\n}\n\n.vd-toast-container-top-left {\n  top: 0;\n  left: 0;\n  align-items: flex-start;\n}\n\n.vd-toast-container-top-center {\n  top: 0;\n  left: 50%;\n  transform: translateX(-50%);\n  align-items: center;\n}\n\n.vd-toast-container-bottom-right {\n  bottom: 0;\n  right: 0;\n  align-items: flex-end;\n}\n\n.vd-toast-container-bottom-left {\n  bottom: 0;\n  left: 0;\n  align-items: flex-start;\n}\n\n.vd-toast-container-bottom-center {\n  bottom: 0;\n  left: 50%;\n  transform: translateX(-50%);\n  align-items: center;\n}\n\n/* Base Toast */\n.vd-toast {\n  display: flex;\n  align-items: flex-start;\n  gap: 0.75rem;\n  width: var(--vd-toast-width);\n  max-width: var(--vd-toast-max-width);\n  padding: var(--vd-toast-padding-y) var(--vd-toast-padding-x);\n  background-color: var(--vd-toast-bg);\n  color: var(--vd-toast-text);\n  border: 1px solid var(--vd-toast-border);\n  border-radius: var(--vd-toast-border-radius);\n  box-shadow: var(--vd-toast-shadow);\n  pointer-events: auto;\n  opacity: 0;\n  transform: translateX(100%);\n  transition: opacity 0.3s ease, transform 0.3s ease;\n}\n\n.vd-toast-glass {\n  background: var(--vd-glass-bg-light);\n  border-color: var(--vd-glass-border-light);\n  box-shadow: var(--vd-glass-shadow);\n  backdrop-filter: blur(var(--vd-glass-blur)) saturate(var(--vd-glass-saturate));\n  -webkit-backdrop-filter: blur(var(--vd-glass-blur)) saturate(var(--vd-glass-saturate));\n}\n\n/* Toast Visible State */\n.vd-toast.is-visible {\n  opacity: 1;\n  transform: translateX(0);\n}\n\n/* Toast Exiting State */\n.vd-toast.is-exiting {\n  opacity: 0;\n  transform: translateX(100%);\n}\n\n/* Left-side containers animate from left */\n.vd-toast-container-top-left .vd-toast,\n.vd-toast-container-bottom-left .vd-toast {\n  transform: translateX(-100%);\n}\n\n.vd-toast-container-top-left .vd-toast.is-visible,\n.vd-toast-container-bottom-left .vd-toast.is-visible {\n  transform: translateX(0);\n}\n\n.vd-toast-container-top-left .vd-toast.is-exiting,\n.vd-toast-container-bottom-left .vd-toast.is-exiting {\n  transform: translateX(-100%);\n}\n\n/* Center containers animate from top/bottom */\n.vd-toast-container-top-center .vd-toast {\n  transform: translateY(-100%);\n}\n\n.vd-toast-container-top-center .vd-toast.is-visible {\n  transform: translateY(0);\n}\n\n.vd-toast-container-top-center .vd-toast.is-exiting {\n  transform: translateY(-100%);\n}\n\n.vd-toast-container-bottom-center .vd-toast {\n  transform: translateY(100%);\n}\n\n.vd-toast-container-bottom-center .vd-toast.is-visible {\n  transform: translateY(0);\n}\n\n.vd-toast-container-bottom-center .vd-toast.is-exiting {\n  transform: translateY(100%);\n}\n\n/* Toast Icon */\n.vd-toast-icon {\n  flex-shrink: 0;\n  width: 1.25rem;\n  height: 1.25rem;\n  margin-top: 0.125rem;\n}\n\n/* Toast Content */\n.vd-toast-content {\n  flex: 1;\n  min-width: 0;\n}\n\n/* Toast Title */\n.vd-toast-title {\n  font-weight: var(--vd-font-weight-semibold);\n  margin-bottom: 0.25rem;\n}\n\n/* Toast Message */\n.vd-toast-message {\n  font-size: var(--vd-font-size-sm);\n  color: var(--vd-text-secondary);\n}\n\n/* Toast Close Button */\n.vd-toast-close {\n  flex-shrink: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 1.5rem;\n  height: 1.5rem;\n  padding: 0;\n  margin: -0.25rem -0.25rem -0.25rem 0;\n  background: transparent;\n  border: none;\n  border-radius: var(--vd-btn-border-radius);\n  color: var(--vd-text-tertiary);\n  cursor: pointer;\n  opacity: 0.6;\n  transition: opacity 0.15s ease, background-color 0.15s ease;\n}\n\n.vd-toast-close:hover {\n  opacity: 1;\n  background-color: rgba(0, 0, 0, 0.05);\n}\n\n[data-theme=\"dark\"] .vd-toast-close:hover {\n  background-color: rgba(255, 255, 255, 0.1);\n}\n\n.vd-toast-close::before {\n  content: '\\00D7';\n  font-size: 1.25rem;\n  line-height: 1;\n}\n\n/* Toast Color Variants */\n.vd-toast-success {\n  border-left: 4px solid var(--vd-color-success);\n}\n\n.vd-toast-success .vd-toast-icon {\n  color: var(--vd-color-success);\n}\n\n.vd-toast-warning {\n  border-left: 4px solid var(--vd-color-warning);\n}\n\n.vd-toast-warning .vd-toast-icon {\n  color: var(--vd-color-warning);\n}\n\n.vd-toast-error {\n  border-left: 4px solid var(--vd-color-error);\n}\n\n.vd-toast-error .vd-toast-icon {\n  color: var(--vd-color-error);\n}\n\n.vd-toast-info {\n  border-left: 4px solid var(--vd-color-info);\n}\n\n.vd-toast-info .vd-toast-icon {\n  color: var(--vd-color-info);\n}\n\n/* Solid Variants */\n.vd-toast-solid.vd-toast-success {\n  background-color: var(--vd-color-success);\n  border-color: var(--vd-color-success);\n  color: var(--vd-color-white);\n}\n\n.vd-toast-solid.vd-toast-success .vd-toast-message {\n  color: rgba(255, 255, 255, 0.85);\n}\n\n.vd-toast-solid.vd-toast-success .vd-toast-icon {\n  color: var(--vd-color-white);\n}\n\n.vd-toast-solid.vd-toast-warning {\n  background-color: var(--vd-color-warning);\n  border-color: var(--vd-color-warning);\n  color: var(--vd-color-gray-900);\n}\n\n.vd-toast-solid.vd-toast-warning .vd-toast-message {\n  color: rgba(0, 0, 0, 0.7);\n}\n\n.vd-toast-solid.vd-toast-warning .vd-toast-icon {\n  color: var(--vd-color-gray-900);\n}\n\n.vd-toast-solid.vd-toast-error {\n  background-color: var(--vd-color-error);\n  border-color: var(--vd-color-error);\n  color: var(--vd-color-white);\n}\n\n.vd-toast-solid.vd-toast-error .vd-toast-message {\n  color: rgba(255, 255, 255, 0.85);\n}\n\n.vd-toast-solid.vd-toast-error .vd-toast-icon {\n  color: var(--vd-color-white);\n}\n\n.vd-toast-solid.vd-toast-info {\n  background-color: var(--vd-color-info);\n  border-color: var(--vd-color-info);\n  color: var(--vd-color-white);\n}\n\n.vd-toast-solid.vd-toast-info .vd-toast-message {\n  color: rgba(255, 255, 255, 0.85);\n}\n\n.vd-toast-solid.vd-toast-info .vd-toast-icon {\n  color: var(--vd-color-white);\n}\n\n/* Toast Progress Bar (auto-dismiss indicator) */\n.vd-toast-progress {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  height: 3px;\n  background-color: currentColor;\n  opacity: 0.3;\n  border-radius: 0 0 var(--vd-toast-border-radius) var(--vd-toast-border-radius);\n  animation: toast-progress linear forwards;\n}\n\n@keyframes toast-progress {\n  from {\n    width: 100%;\n  }\n  to {\n    width: 0%;\n  }\n}\n\n/* Toast with Progress */\n.vd-toast-with-progress {\n  position: relative;\n  overflow: hidden;\n}\n\n/* Stacked Toasts Animation */\n.vd-toast-container .vd-toast:not(:first-child) {\n  margin-top: 0;\n}\n\n/* Reduced Motion */\n@media (prefers-reduced-motion: reduce) {\n  .vd-toast {\n    transition: opacity 0.15s ease;\n    transform: none !important;\n  }\n\n  .vd-toast.is-visible {\n    transform: none !important;\n  }\n\n  .vd-toast.is-exiting {\n    transform: none !important;\n  }\n\n  .vd-toast-progress {\n    animation: none;\n  }\n}\n\n/**\n * Vanduo Framework - Code Snippet Component\n * Copyable code blocks with tabs and syntax highlighting\n */\n\n:root {\n  /* Code Snippet Sizing - Fibonacci */\n  --vd-code-padding-x: 1.3125rem;        /* 21px - fib */\n  --vd-code-padding-y: 0.8125rem;        /* 13px - fib */\n  --vd-code-border-radius: var(--vd-radius-fib-5, 8px);\n  --vd-code-tab-gap: 0.5rem;             /* 8px - fib */\n  --vd-code-header-height: 2.75rem;      /* 44px - touch target */\n  --vd-code-line-height: 1.618;          /* Golden ratio */\n  --vd-code-font-size: 0.875rem;         /* 14px */\n  \n  /* Code Snippet Colors - Light Mode */\n  --vd-code-bg: var(--vd-color-gray-50, #f8fafc);\n  --vd-code-header-bg: var(--vd-color-gray-100, #f1f5f9);\n  --vd-code-border: var(--vd-border-color, #e2e8f0);\n  --vd-code-text: var(--vd-text-primary, #1e293b);\n  --vd-code-text-muted: var(--vd-text-secondary, #64748b);\n  --vd-code-tab-text: var(--vd-text-secondary, #64748b);\n  --vd-code-tab-active: var(--vd-color-primary, #3b82f6);\n  --vd-code-tab-hover-bg: var(--vd-color-gray-200, #e2e8f0);\n  --vd-code-copy-success: var(--vd-color-success, #22c55e);\n  --vd-code-line-number: var(--vd-text-tertiary, #94a3b8);\n  --vd-code-line-highlight: rgba(59, 130, 246, 0.1);\n  \n  /* Syntax Highlighting Colors - Light Mode */\n  --vd-code-tag: #e11d48;                /* HTML tags - rose */\n  --vd-code-attr: #7c3aed;               /* Attributes - violet */\n  --vd-code-string: #16a34a;             /* Strings - green */\n  --vd-code-comment: #64748b;            /* Comments - slate */\n  --vd-code-selector: #e11d48;           /* CSS selectors - rose */\n  --vd-code-property: #2563eb;           /* CSS properties - blue */\n  --vd-code-value: #16a34a;              /* CSS values - green */\n  --vd-code-unit: #d97706;               /* Units - amber */\n  --vd-code-keyword: #7c3aed;            /* JS keywords - violet */\n  --vd-code-function: #2563eb;           /* JS functions - blue */\n  --vd-code-number: #d97706;             /* Numbers - amber */\n  --vd-code-operator: #64748b;           /* Operators - slate */\n  --vd-code-punctuation: #64748b;        /* Punctuation - slate */\n}\n\n/* Dark Theme Overrides */\n[data-theme=\"dark\"] {\n  --vd-code-bg: var(--vd-color-gray-900, #0f172a);\n  --vd-code-header-bg: var(--vd-color-gray-800, #1e293b);\n  --vd-code-border: var(--vd-color-gray-700, #334155);\n  --vd-code-tab-hover-bg: var(--vd-color-gray-700, #334155);\n  --vd-code-line-highlight: rgba(59, 130, 246, 0.15);\n  \n  /* Syntax Highlighting - Dark Mode */\n  --vd-code-tag: #fb7185;                /* HTML tags - rose */\n  --vd-code-attr: #a78bfa;               /* Attributes - violet */\n  --vd-code-string: #4ade80;             /* Strings - green */\n  --vd-code-comment: #64748b;            /* Comments - slate */\n  --vd-code-selector: #fb7185;           /* CSS selectors - rose */\n  --vd-code-property: #60a5fa;           /* CSS properties - blue */\n  --vd-code-value: #4ade80;              /* CSS values - green */\n  --vd-code-unit: #fbbf24;               /* Units - amber */\n  --vd-code-keyword: #a78bfa;            /* JS keywords - violet */\n  --vd-code-function: #60a5fa;           /* JS functions - blue */\n  --vd-code-number: #fbbf24;             /* Numbers - amber */\n  --vd-code-operator: #94a3b8;           /* Operators - slate */\n  --vd-code-punctuation: #94a3b8;        /* Punctuation - slate */\n}\n\n@media (prefers-color-scheme: dark) {\n  :root:not([data-theme]) {\n    --vd-code-bg: var(--vd-color-gray-900, #0f172a);\n    --vd-code-header-bg: var(--vd-color-gray-800, #1e293b);\n    --vd-code-border: var(--vd-color-gray-700, #334155);\n    --vd-code-tab-hover-bg: var(--vd-color-gray-700, #334155);\n    --vd-code-line-highlight: rgba(59, 130, 246, 0.15);\n    \n    --vd-code-tag: #fb7185;\n    --vd-code-attr: #a78bfa;\n    --vd-code-string: #4ade80;\n    --vd-code-comment: #64748b;\n    --vd-code-selector: #fb7185;\n    --vd-code-property: #60a5fa;\n    --vd-code-value: #4ade80;\n    --vd-code-unit: #fbbf24;\n    --vd-code-keyword: #a78bfa;\n    --vd-code-function: #60a5fa;\n    --vd-code-number: #fbbf24;\n    --vd-code-operator: #94a3b8;\n    --vd-code-punctuation: #94a3b8;\n  }\n}\n\n/* ==========================================================================\n   Base Code Snippet Container\n   ========================================================================== */\n\n.vd-code-snippet {\n  position: relative;\n  margin: 1rem 0;\n  border-radius: var(--vd-code-border-radius);\n  border: 1px solid var(--vd-code-border);\n  background-color: var(--vd-code-bg);\n  overflow: hidden;\n}\n\n/* ==========================================================================\n   Collapsible Toggle Button\n   ========================================================================== */\n\n.vd-code-snippet-toggle {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  width: 100%;\n  padding: var(--vd-code-padding-y) var(--vd-code-padding-x);\n  background-color: var(--vd-code-header-bg);\n  border: none;\n  color: var(--vd-code-text-muted);\n  font-size: var(--vd-code-font-size);\n  font-weight: var(--vd-font-weight-medium, 500);\n  cursor: pointer;\n  transition: color 0.15s ease, background-color 0.15s ease;\n  text-align: left;\n}\n\n.vd-code-snippet-toggle:hover {\n  color: var(--vd-code-text);\n  background-color: var(--vd-code-tab-hover-bg);\n}\n\n.vd-code-snippet-toggle:focus-visible {\n  outline: 2px solid var(--vd-code-tab-active);\n  outline-offset: -2px;\n}\n\n/* Toggle Icon (chevron) */\n.vd-code-snippet-toggle-icon {\n  display: inline-flex;\n  width: 1rem;\n  height: 1rem;\n  transition: transform 0.2s ease;\n}\n\n.vd-code-snippet-toggle-icon::before {\n  content: '';\n  width: 0.5rem;\n  height: 0.5rem;\n  border-right: 2px solid currentColor;\n  border-bottom: 2px solid currentColor;\n  transform: rotate(-45deg);\n  margin: auto;\n}\n\n/* Expanded state */\n.vd-code-snippet[data-expanded=\"true\"] .vd-code-snippet-toggle-icon::before {\n  transform: rotate(45deg);\n}\n\n.vd-code-snippet[data-expanded=\"true\"] .vd-code-snippet-toggle {\n  border-bottom: 1px solid var(--vd-code-border);\n}\n\n/* ==========================================================================\n   Collapsible Content\n   ========================================================================== */\n\n.vd-code-snippet-content {\n  display: none;\n}\n\n.vd-code-snippet-content[data-visible=\"true\"],\n.vd-code-snippet:not([data-collapsible]) .vd-code-snippet-content {\n  display: block;\n}\n\n/* Non-collapsible variant */\n.vd-code-snippet:not([data-collapsible]) .vd-code-snippet-toggle {\n  display: none;\n}\n\n/* ==========================================================================\n   Header with Tabs and Copy Button\n   ========================================================================== */\n\n.vd-code-snippet-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  min-height: var(--vd-code-header-height);\n  padding: 0 var(--vd-code-padding-x);\n  background-color: var(--vd-code-header-bg);\n  border-bottom: 1px solid var(--vd-code-border);\n}\n\n/* ==========================================================================\n   Tabs\n   ========================================================================== */\n\n.vd-code-snippet-tabs {\n  display: flex;\n  gap: var(--vd-code-tab-gap);\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n\n.vd-code-snippet-tab {\n  display: inline-flex;\n  align-items: center;\n  padding: 0.5rem 0.75rem;\n  font-size: var(--vd-code-font-size);\n  font-weight: var(--vd-font-weight-medium, 500);\n  color: var(--vd-code-tab-text);\n  background: transparent;\n  border: none;\n  border-radius: var(--vd-code-border-radius);\n  cursor: pointer;\n  transition: color 0.15s ease, background-color 0.15s ease;\n  white-space: nowrap;\n}\n\n.vd-code-snippet-tab:hover {\n  color: var(--vd-code-text);\n  background-color: var(--vd-code-tab-hover-bg);\n}\n\n.vd-code-snippet-tab:focus-visible {\n  outline: 2px solid var(--vd-code-tab-active);\n  outline-offset: -2px;\n}\n\n.vd-code-snippet-tab.is-active {\n  color: var(--vd-code-tab-active);\n  background-color: var(--vd-code-bg);\n}\n\n/* Language labels */\n.vd-code-snippet-tab[data-lang=\"html\"]::before { content: ''; }\n.vd-code-snippet-tab[data-lang=\"css\"]::before { content: ''; }\n.vd-code-snippet-tab[data-lang=\"js\"]::before { content: ''; }\n\n/* ==========================================================================\n   Copy Button\n   ========================================================================== */\n\n.vd-code-snippet-copy {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.375rem;\n  padding: 0.375rem 0.75rem;\n  font-size: var(--vd-code-font-size);\n  font-weight: var(--vd-font-weight-medium, 500);\n  color: var(--vd-code-tab-text);\n  background: transparent;\n  border: 1px solid var(--vd-code-border);\n  border-radius: var(--vd-code-border-radius);\n  cursor: pointer;\n  transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;\n}\n\n.vd-code-snippet-copy:hover {\n  color: var(--vd-code-text);\n  background-color: var(--vd-code-tab-hover-bg);\n}\n\n.vd-code-snippet-copy:focus-visible {\n  outline: 2px solid var(--vd-code-tab-active);\n  outline-offset: 2px;\n}\n\n/* Copy Icon */\n.vd-code-snippet-copy-icon {\n  display: inline-flex;\n  width: 1rem;\n  height: 1rem;\n}\n\n.vd-code-snippet-copy-icon::before {\n  content: '';\n  width: 100%;\n  height: 100%;\n  background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='13' height='13' rx='2' ry='2'%3E%3C/rect%3E%3Cpath d='M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1'%3E%3C/path%3E%3C/svg%3E\");\n  background-size: contain;\n  background-repeat: no-repeat;\n  background-position: center;\n}\n\n/* Success state */\n.vd-code-snippet-copy.is-copied {\n  color: var(--vd-code-copy-success);\n  border-color: var(--vd-code-copy-success);\n}\n\n.vd-code-snippet-copy.is-copied .vd-code-snippet-copy-icon::before {\n  background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2322c55e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E\");\n}\n\n.vd-code-snippet-copy.is-copied .vd-code-snippet-copy-text::after {\n  content: 'd!';\n  font-size: var(--vd-code-font-size);\n}\n\n.vd-code-snippet-copy.is-copied .vd-code-snippet-copy-text {\n  font-size: 0;\n}\n\n.vd-code-snippet-copy.is-copied .vd-code-snippet-copy-text::before {\n  content: 'Copie';\n  font-size: var(--vd-code-font-size);\n}\n\n/* ==========================================================================\n   Code Body\n   ========================================================================== */\n\n.vd-code-snippet-body {\n  position: relative;\n  overflow: hidden;\n}\n\n/* ==========================================================================\n   Code Panes\n   ========================================================================== */\n\n.vd-code-snippet-pane {\n  display: none;\n  margin: 0;\n  padding: var(--vd-code-padding-y) var(--vd-code-padding-x);\n  background-color: var(--vd-code-bg);\n  overflow-x: auto;\n  -webkit-overflow-scrolling: touch;\n}\n\n.vd-code-snippet-pane.is-active {\n  display: block;\n}\n\n.vd-code-snippet-pane code {\n  display: block;\n  font-family: var(--vd-font-family-mono, 'JetBrains Mono', 'Fira Code', 'Consolas', monospace);\n  font-size: var(--vd-code-font-size);\n  line-height: var(--vd-code-line-height);\n  color: var(--vd-code-text);\n  white-space: pre;\n  tab-size: 2;\n}\n\n/* ==========================================================================\n   Line Numbers (Optional)\n   ========================================================================== */\n\n.vd-code-snippet-pane.has-line-numbers {\n  padding-left: 0;\n}\n\n.vd-code-snippet-pane.has-line-numbers code {\n  display: flex;\n}\n\n.vd-code-snippet-line-numbers {\n  display: flex;\n  flex-direction: column;\n  padding: 0 var(--vd-code-padding-x);\n  margin-right: var(--vd-code-padding-x);\n  border-right: 1px solid var(--vd-code-border);\n  color: var(--vd-code-line-number);\n  text-align: right;\n  user-select: none;\n  flex-shrink: 0;\n}\n\n.vd-code-snippet-line-numbers span {\n  line-height: var(--vd-code-line-height);\n}\n\n.vd-code-snippet-code {\n  flex: 1;\n  overflow-x: auto;\n}\n\n/* Line highlighting */\n.code-line-highlight {\n  display: block;\n  background-color: var(--vd-code-line-highlight);\n  margin: 0 calc(-1 * var(--vd-code-padding-x));\n  padding: 0 var(--vd-code-padding-x);\n}\n\n/* ==========================================================================\n   Syntax Highlighting Classes\n   ========================================================================== */\n\n/* HTML Syntax */\n.code-tag { color: var(--vd-code-tag); }\n.code-attr { color: var(--vd-code-attr); }\n.code-string { color: var(--vd-code-string); }\n.code-comment { color: var(--vd-code-comment); font-style: italic; }\n\n/* CSS Syntax */\n.code-selector { color: var(--vd-code-selector); }\n.code-property { color: var(--vd-code-property); }\n.code-value { color: var(--vd-code-value); }\n.code-unit { color: var(--vd-code-unit); }\n\n/* JavaScript Syntax */\n.code-keyword { color: var(--vd-code-keyword); }\n.code-function { color: var(--vd-code-function); }\n.code-number { color: var(--vd-code-number); }\n.code-operator { color: var(--vd-code-operator); }\n.code-punctuation { color: var(--vd-code-punctuation); }\n\n/* ==========================================================================\n   Single Language Variant (No Tabs)\n   ========================================================================== */\n\n.vd-code-snippet-single .vd-code-snippet-header {\n  justify-content: flex-end;\n}\n\n.vd-code-snippet-single .vd-code-snippet-tabs {\n  display: none;\n}\n\n/* ==========================================================================\n   Inline Variant\n   ========================================================================== */\n\n.vd-code-snippet-inline {\n  display: inline-flex;\n  margin: 0;\n  vertical-align: middle;\n}\n\n.vd-code-snippet-inline .vd-code-snippet-header {\n  display: none;\n}\n\n.vd-code-snippet-inline .vd-code-snippet-pane {\n  display: block;\n  padding: 0.125rem 0.375rem;\n}\n\n.vd-code-snippet-inline .vd-code-snippet-pane code {\n  white-space: nowrap;\n}\n\n/* ==========================================================================\n   Compact Variant\n   ========================================================================== */\n\n.vd-code-snippet-compact .vd-code-snippet-header {\n  min-height: auto;\n  padding: 0.25rem 0.5rem;\n}\n\n.vd-code-snippet-compact .vd-code-snippet-tab {\n  padding: 0.25rem 0.5rem;\n  font-size: 0.75rem;\n}\n\n.vd-code-snippet-compact .vd-code-snippet-copy {\n  padding: 0.25rem 0.5rem;\n  font-size: 0.75rem;\n}\n\n.vd-code-snippet-compact .vd-code-snippet-pane {\n  padding: 0.5rem;\n}\n\n.vd-code-snippet-compact .vd-code-snippet-pane code {\n  font-size: 0.75rem;\n}\n\n/* ==========================================================================\n   Responsive Design\n   ========================================================================== */\n\n@media (max-width: 640px) {\n  .vd-code-snippet-header {\n    flex-wrap: wrap;\n    gap: 0.5rem;\n    padding: 0.5rem;\n  }\n  \n  .vd-code-snippet-tabs {\n    order: 2;\n    width: 100%;\n    overflow-x: auto;\n    -webkit-overflow-scrolling: touch;\n    scrollbar-width: none;\n  }\n  \n  .vd-code-snippet-tabs::-webkit-scrollbar {\n    display: none;\n  }\n  \n  .vd-code-snippet-copy {\n    order: 1;\n    margin-left: auto;\n  }\n  \n  .vd-code-snippet-pane {\n    padding: 0.75rem;\n  }\n  \n  .vd-code-snippet-pane code {\n    font-size: 0.8125rem;\n  }\n}\n\n/* ==========================================================================\n   Print Styles\n   ========================================================================== */\n\n@media print {\n  .vd-code-snippet {\n    break-inside: avoid;\n    border: 1px solid #ccc;\n  }\n  \n  .vd-code-snippet-toggle,\n  .vd-code-snippet-copy {\n    display: none !important;\n  }\n  \n  .vd-code-snippet-content {\n    display: block !important;\n  }\n  \n  .vd-code-snippet-pane {\n    display: block !important;\n    page-break-inside: avoid;\n  }\n  \n  .vd-code-snippet-pane::before {\n    content: attr(data-lang) ':';\n    display: block;\n    font-weight: bold;\n    margin-bottom: 0.5rem;\n    text-transform: uppercase;\n  }\n}\n\n/* ==========================================================================\n   Reduced Motion\n   ========================================================================== */\n\n@media (prefers-reduced-motion: reduce) {\n  .vd-code-snippet-toggle,\n  .vd-code-snippet-toggle-icon,\n  .vd-code-snippet-tab,\n  .vd-code-snippet-copy {\n    transition: none;\n  }\n}\n\n/**\n * Vanduo Framework - Progress Bar Component\n * CSS-only progress bar with variants and sizes\n */\n\n:root {\n  --vd-progress-height: 8px;\n  --vd-progress-bg: var(--vd-bg-tertiary, #e9ecef);\n  --vd-progress-bar-bg: var(--vd-color-primary);\n  --vd-progress-border-radius: var(--vd-radius-fib-5, 5px);\n}\n\n/* Base Progress */\n.vd-progress {\n  display: flex;\n  height: var(--vd-progress-height);\n  overflow: hidden;\n  background-color: var(--vd-progress-bg);\n  border-radius: var(--vd-progress-border-radius);\n}\n\n.vd-progress-bar {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  overflow: hidden;\n  color: #fff;\n  text-align: center;\n  white-space: nowrap;\n  background-color: var(--vd-progress-bar-bg);\n  transition: width 0.4s ease;\n  border-radius: var(--vd-progress-border-radius);\n}\n\n/* Variants */\n.vd-progress-bar.vd-progress-success { background-color: var(--vd-color-success); }\n.vd-progress-bar.vd-progress-warning { background-color: var(--vd-color-warning); }\n.vd-progress-bar.vd-progress-error { background-color: var(--vd-color-error); }\n.vd-progress-bar.vd-progress-info { background-color: var(--vd-color-info); }\n\n/* Sizes */\n.vd-progress-xs { --vd-progress-height: 3px; }\n.vd-progress-sm { --vd-progress-height: 5px; }\n.vd-progress-lg { --vd-progress-height: 13px; }\n.vd-progress-xl { --vd-progress-height: 21px; }\n\n/* Labeled (show text) */\n.vd-progress-xl .vd-progress-bar,\n.vd-progress-lg .vd-progress-bar {\n  font-size: var(--vd-font-size-xs, 0.75rem);\n  line-height: 1;\n}\n\n/* Striped */\n.vd-progress-striped .vd-progress-bar {\n  background-image: linear-gradient(\n    45deg,\n    rgba(255, 255, 255, 0.15) 25%,\n    transparent 25%,\n    transparent 50%,\n    rgba(255, 255, 255, 0.15) 50%,\n    rgba(255, 255, 255, 0.15) 75%,\n    transparent 75%,\n    transparent\n  );\n  background-size: 1rem 1rem;\n}\n\n/* Animated Striped */\n.vd-progress-animated .vd-progress-bar {\n  animation: progress-bar-stripes 1s linear infinite;\n}\n\n@keyframes progress-bar-stripes {\n  from { background-position: 1rem 0; }\n  to { background-position: 0 0; }\n}\n\n/* Indeterminate */\n.vd-progress-indeterminate .vd-progress-bar {\n  width: 30%;\n  animation: progress-indeterminate 1.5s ease-in-out infinite;\n}\n\n@keyframes progress-indeterminate {\n  0% { transform: translateX(-100%); }\n  100% { transform: translateX(400%); }\n}\n\n/* Reduced motion */\n@media (prefers-reduced-motion: reduce) {\n  .vd-progress-animated .vd-progress-bar,\n  .vd-progress-indeterminate .vd-progress-bar {\n    animation: none;\n  }\n}\n\n/* Dark mode */\n[data-theme=\"dark\"] {\n  --vd-progress-bg: var(--vd-bg-tertiary, #2d3748);\n}\n\n@media (prefers-color-scheme: dark) {\n  :root:not([data-theme]) {\n    --vd-progress-bg: var(--vd-bg-tertiary, #2d3748);\n  }\n}\n\n/**\n * Vanduo Framework - Spinner Component\n * Loading indicators with variants and sizes\n */\n\n:root {\n  --vd-spinner-size: 2rem;\n  --vd-spinner-border-width: 3px;\n  --vd-spinner-color: var(--vd-color-primary);\n  --vd-spinner-speed: 0.65s;\n}\n\n/* Border Spinner */\n.vd-spinner {\n  display: inline-block;\n  width: var(--vd-spinner-size);\n  height: var(--vd-spinner-size);\n  border: var(--vd-spinner-border-width) solid var(--vd-border-color, #e9ecef);\n  border-top-color: var(--vd-spinner-color);\n  border-radius: 50%;\n  animation: spinner-rotate var(--vd-spinner-speed) linear infinite;\n}\n\n@keyframes spinner-rotate {\n  to { transform: rotate(360deg); }\n}\n\n/* Dot Spinner */\n.vd-spinner-dots {\n  display: inline-flex;\n  align-items: center;\n  gap: 5px;\n}\n\n.vd-spinner-dots::before,\n.vd-spinner-dots::after,\n.vd-spinner-dots span {\n  content: '';\n  display: block;\n  width: 8px;\n  height: 8px;\n  border-radius: 50%;\n  background-color: var(--vd-spinner-color);\n  animation: spinner-dots-bounce 1.4s ease-in-out infinite both;\n}\n\n.vd-spinner-dots::before {\n  animation-delay: -0.32s;\n}\n\n.vd-spinner-dots span {\n  animation-delay: -0.16s;\n}\n\n@keyframes spinner-dots-bounce {\n  0%, 80%, 100% { transform: scale(0); opacity: 0.5; }\n  40% { transform: scale(1); opacity: 1; }\n}\n\n/* Growing Spinner */\n.vd-spinner-grow {\n  display: inline-block;\n  width: var(--vd-spinner-size);\n  height: var(--vd-spinner-size);\n  background-color: var(--vd-spinner-color);\n  border-radius: 50%;\n  opacity: 0;\n  animation: spinner-grow 0.75s linear infinite;\n}\n\n@keyframes spinner-grow {\n  0% { transform: scale(0); }\n  50% { opacity: 1; }\n}\n\n/* Size Variants */\n.vd-spinner-xs { --vd-spinner-size: 1rem; --vd-spinner-border-width: 2px; }\n.vd-spinner-sm { --vd-spinner-size: 1.5rem; --vd-spinner-border-width: 2px; }\n.vd-spinner-lg { --vd-spinner-size: 3rem; --vd-spinner-border-width: 4px; }\n.vd-spinner-xl { --vd-spinner-size: 4rem; --vd-spinner-border-width: 5px; }\n\n/* Color Variants */\n.vd-spinner-success { --vd-spinner-color: var(--vd-color-success); }\n.vd-spinner-warning { --vd-spinner-color: var(--vd-color-warning); }\n.vd-spinner-error { --vd-spinner-color: var(--vd-color-error); }\n.vd-spinner-info { --vd-spinner-color: var(--vd-color-info); }\n.vd-spinner-light { --vd-spinner-color: #fff; }\n.vd-spinner-dark { --vd-spinner-color: var(--vd-text-primary); }\n\n/* Centering Helper */\n.vd-spinner-center {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  padding: var(--vd-spacing-5, 1rem);\n}\n\n/* Quad-Spinner Loader — signature Vanduo 2x2 grid loader */\n.vd-dynamic-loader {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 4rem 1rem;\n  gap: 1rem;\n}\n\n.vd-dynamic-loader-grid {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 0.75rem;\n  align-items: center;\n  justify-items: center;\n}\n\n.vd-dynamic-loader-grid .vd-spinner {\n  --vd-spinner-size: 1.125rem;\n  --vd-spinner-border-width: 2px;\n  --vd-spinner-speed: 0.9s;\n\n  border-color: var(--vd-border-color, #d9d9d9);\n  border-top-color: var(--vd-spinner-color);\n}\n\n.vd-dynamic-loader-grid .vd-spinner:nth-child(1) {\n  animation-delay: -0.45s;\n}\n\n.vd-dynamic-loader-grid .vd-spinner:nth-child(2) {\n  animation-delay: -0.3s;\n}\n\n.vd-dynamic-loader-grid .vd-spinner:nth-child(3) {\n  animation-delay: -0.15s;\n}\n\n.vd-dynamic-loader-grid .vd-spinner:nth-child(4) {\n  animation-delay: 0s;\n}\n\n.vd-dynamic-loader-text {\n  color: var(--vd-text-muted);\n  font-size: var(--vd-font-size-sm, 0.8125rem);\n}\n\n/* Quad-Spinner overlaying a skeleton card */\n.vd-dynamic-loader-card {\n  position: relative;\n  min-height: 300px;\n  padding: 2rem;\n  overflow: hidden;\n  border-radius: var(--vd-btn-border-radius, 0.5rem);\n  border: 1px solid var(--vd-border-color);\n}\n\n.vd-dynamic-loader-card > .vd-dynamic-loader {\n  position: absolute;\n  inset: 0;\n  padding: 0;\n  background: rgba(255, 255, 255, 0.6);\n  z-index: 1;\n  pointer-events: none;\n}\n\n[data-theme=\"dark\"] .vd-dynamic-loader-card > .vd-dynamic-loader {\n  background: rgba(0, 0, 0, 0.35);\n}\n\n@media (prefers-color-scheme: dark) {\n  :root:not([data-theme]) .vd-dynamic-loader-card > .vd-dynamic-loader {\n    background: rgba(0, 0, 0, 0.35);\n  }\n}\n\n/* Reduced motion */\n@media (prefers-reduced-motion: reduce) {\n  .vd-spinner,\n  .vd-spinner-dots::before,\n  .vd-spinner-dots::after,\n  .vd-spinner-dots span,\n  .vd-spinner-grow {\n    animation-duration: 1.5s;\n  }\n}\n\n/**\n * Vanduo Framework - Button Group Component\n * Toolbar-style button grouping\n */\n\n/* Button Group - Horizontal */\n.vd-btn-group {\n  display: inline-flex;\n  position: relative;\n  vertical-align: middle;\n}\n\n.vd-btn-group>.vd-btn {\n  position: relative;\n  flex: 0 1 auto;\n  margin-bottom: 0;\n}\n\n/* Remove inner border-radius for adjacent buttons */\n.vd-btn-group>.vd-btn:not(:first-child) {\n  border-top-left-radius: 0;\n  border-bottom-left-radius: 0;\n  margin-left: -1px;\n}\n\n.vd-btn-group>.vd-btn:not(:last-child) {\n  border-top-right-radius: 0;\n  border-bottom-right-radius: 0;\n}\n\n/* Ensure z-index for focus/active states */\n.vd-btn-group>.vd-btn:hover,\n.vd-btn-group>.vd-btn:focus,\n.vd-btn-group>.vd-btn:active,\n.vd-btn-group>.vd-btn.is-active {\n  z-index: 1;\n}\n\n/* Button Group - Vertical */\n.vd-btn-group-vertical {\n  display: inline-flex;\n  flex-direction: column;\n  align-items: stretch;\n  justify-content: center;\n}\n\n.vd-btn-group-vertical>.vd-btn {\n  width: 100%;\n  margin-bottom: 0;\n}\n\n.vd-btn-group-vertical>.vd-btn:not(:first-child) {\n  border-top-left-radius: 0;\n  border-top-right-radius: 0;\n  margin-top: -1px;\n}\n\n.vd-btn-group-vertical>.vd-btn:not(:last-child) {\n  border-bottom-left-radius: 0;\n  border-bottom-right-radius: 0;\n}\n\n/* Sizing - inherit from button sizes */\n.vd-btn-group-sm>.vd-btn {\n  font-size: var(--vd-font-size-sm);\n  padding: 0.3125rem 0.625rem;\n}\n\n.vd-btn-group-lg>.vd-btn {\n  font-size: var(--vd-font-size-lg);\n  padding: 0.625rem 1.25rem;\n}\n\n/* Full Width */\n.vd-btn-group-full {\n  display: flex;\n  width: 100%;\n}\n\n.vd-btn-group-full>.vd-btn {\n  flex: 1 1 auto;\n}\n/**\n * Vanduo Framework - Theme Customizer\n * A comprehensive theme customization panel for the navbar\n */\n\n:root {\n  /* Theme Customizer Variables */\n  --vd-customizer-width: 320px;\n  --vd-customizer-padding: 1rem;\n  --vd-customizer-gap: 0.75rem;\n  --vd-customizer-swatch-size: 28px;\n  --vd-customizer-radius-btn-width: 48px;\n  --vd-customizer-bg: var(--vd-bg-primary);\n  --vd-customizer-border: var(--vd-border-color);\n  --vd-customizer-shadow: var(--vd-shadow-lg);\n  --vd-customizer-z-index: 1050;\n}\n\n/* ==========================================================================\n   Dynamic Panel (appended to body)\n   ========================================================================== */\n\nbody > .vd-theme-customizer-panel {\n  position: fixed;\n  /* top is set dynamically by JS based on actual navbar height */\n  top: 55px;\n  right: 0;\n  width: var(--vd-customizer-width);\n  max-height: calc(100vh - 55px);\n  overflow-y: auto;\n  padding: 0; /* Override .vd-navbar-fixed ~ * padding-top rule */\n  background-color: var(--vd-customizer-bg);\n  border: 1px solid var(--vd-customizer-border);\n  border-radius: calc(var(--vd-radius-scale, 0.25) * 1rem);\n  box-shadow: var(--vd-customizer-shadow);\n  z-index: var(--vd-customizer-z-index);\n  opacity: 0;\n  visibility: hidden;\n  transform: translateY(-10px);\n  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;\n}\n\nbody > .vd-theme-customizer-panel.is-open {\n  opacity: 1;\n  visibility: visible;\n  transform: translateY(0);\n}\n\n/* ==========================================================================\n   Dynamic Panel Inner Structure (tc-* classes)\n   ========================================================================== */\n\n.tc-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 0.5rem var(--vd-customizer-padding) 0.75rem;\n  border-bottom: 1px solid var(--vd-border-color);\n}\n\n.tc-title {\n  font-size: var(--vd-font-size-base);\n  font-weight: var(--vd-font-weight-semibold);\n  color: var(--vd-text-primary);\n  margin: 0;\n}\n\n.tc-body {\n  padding: var(--vd-customizer-padding);\n}\n\n.tc-footer {\n  padding: 0.75rem var(--vd-customizer-padding) 0.5rem;\n  border-top: 1px solid var(--vd-border-color);\n}\n\n.tc-section {\n  margin-bottom: 1.25rem;\n}\n\n.tc-section:last-child {\n  margin-bottom: 0;\n}\n\n.tc-label {\n  display: block;\n  margin-bottom: 0.5rem;\n  font-size: var(--vd-font-size-sm);\n  font-weight: var(--vd-font-weight-medium);\n  color: var(--vd-text-primary);\n}\n\n/* Primary Color Grid */\n.tc-color-grid {\n  display: grid;\n  grid-template-columns: repeat(6, 1fr);\n  gap: 0.375rem;\n}\n\n.tc-color-swatch {\n  width: 100%;\n  aspect-ratio: 1;\n  padding: 0;\n  background-color: var(--vd-swatch-color);\n  border: 2px solid transparent;\n  border-radius: calc(var(--vd-radius-scale, 0.25) * 0.5rem);\n  cursor: pointer;\n  transition: all 0.15s ease;\n}\n\n.tc-color-swatch:hover {\n  transform: scale(1.1);\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);\n}\n\n.tc-color-swatch:focus-visible {\n  outline: 2px solid var(--vd-color-primary);\n  outline-offset: 2px;\n}\n\n.tc-color-swatch.is-active {\n  border-color: var(--vd-text-primary);\n  box-shadow: 0 0 0 2px var(--vd-bg-primary);\n}\n\n/* Neutral Color Grid */\n.tc-neutral-grid {\n  display: grid;\n  grid-template-columns: repeat(5, 1fr);\n  gap: 0.375rem;\n}\n\n.tc-neutral-swatch {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 0.25rem;\n  padding: 0.5rem 0.25rem;\n  background: transparent;\n  border: 1px solid var(--vd-border-color);\n  border-radius: calc(var(--vd-radius-scale, 0.25) * 0.5rem);\n  cursor: pointer;\n  transition: all 0.15s ease;\n}\n\n.tc-neutral-swatch::before {\n  content: '';\n  width: 16px;\n  height: 16px;\n  border-radius: 50%;\n  background-color: var(--vd-swatch-color);\n  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);\n}\n\n.tc-neutral-swatch span {\n  font-size: var(--vd-font-size-xs);\n  color: var(--vd-text-primary);\n}\n\n.tc-neutral-swatch:hover {\n  background-color: var(--vd-bg-secondary);\n  border-color: var(--vd-border-color-dark);\n}\n\n.tc-neutral-swatch:focus-visible {\n  outline: 2px solid var(--vd-color-primary);\n  outline-offset: 1px;\n}\n\n.tc-neutral-swatch.is-active {\n  background-color: var(--vd-bg-secondary);\n  border-color: var(--vd-text-primary);\n}\n\n/* Radius Group */\n.tc-radius-group {\n  display: flex;\n  gap: 0;\n}\n\n.tc-radius-btn {\n  flex: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0.5rem 0.25rem;\n  background: transparent;\n  border: 1px solid var(--vd-border-color);\n  color: var(--vd-text-primary);\n  font-size: var(--vd-font-size-xs);\n  font-weight: var(--vd-font-weight-medium);\n  cursor: pointer;\n  transition: all 0.15s ease;\n}\n\n.tc-radius-btn:first-child {\n  border-radius: calc(var(--vd-radius-scale, 0.25) * 0.5rem) 0 0 calc(var(--vd-radius-scale, 0.25) * 0.5rem);\n}\n\n.tc-radius-btn:last-child {\n  border-radius: 0 calc(var(--vd-radius-scale, 0.25) * 0.5rem) calc(var(--vd-radius-scale, 0.25) * 0.5rem) 0;\n}\n\n.tc-radius-btn:not(:first-child) {\n  margin-left: -1px;\n}\n\n.tc-radius-btn:hover {\n  background-color: var(--vd-bg-secondary);\n  z-index: 1;\n}\n\n.tc-radius-btn:focus-visible {\n  outline: 2px solid var(--vd-color-primary);\n  outline-offset: 1px;\n  z-index: 2;\n}\n\n.tc-radius-btn.is-active {\n  background-color: var(--vd-bg-dark);\n  border-color: var(--vd-bg-dark);\n  color: var(--vd-text-inverse);\n  z-index: 1;\n}\n\n/* Font Select */\n.tc-font-select {\n  width: 100%;\n  padding: 0.5rem 0.75rem;\n  background-color: var(--vd-bg-primary);\n  border: 1px solid var(--vd-border-color);\n  border-radius: calc(var(--vd-radius-scale, 0.25) * 0.5rem);\n  color: var(--vd-text-primary);\n  font-size: var(--vd-font-size-sm);\n  cursor: pointer;\n  transition: border-color 0.15s ease;\n}\n\n.tc-font-select:hover {\n  border-color: var(--vd-border-color-dark);\n}\n\n.tc-font-select:focus {\n  outline: none;\n  border-color: var(--vd-color-primary);\n  box-shadow: 0 0 0 3px var(--vd-color-primary-alpha-10);\n}\n\n/* Mode Group */\n.tc-mode-group {\n  display: flex;\n  gap: 0;\n}\n\n.tc-mode-btn {\n  flex: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 0.375rem;\n  padding: 0.5rem 0.5rem;\n  background: transparent;\n  border: 1px solid var(--vd-border-color);\n  color: var(--vd-text-primary);\n  font-size: var(--vd-font-size-xs);\n  cursor: pointer;\n  transition: all 0.15s ease;\n}\n\n.tc-mode-btn:first-child {\n  border-radius: calc(var(--vd-radius-scale, 0.25) * 0.5rem) 0 0 calc(var(--vd-radius-scale, 0.25) * 0.5rem);\n}\n\n.tc-mode-btn:last-child {\n  border-radius: 0 calc(var(--vd-radius-scale, 0.25) * 0.5rem) calc(var(--vd-radius-scale, 0.25) * 0.5rem) 0;\n}\n\n.tc-mode-btn:not(:first-child) {\n  margin-left: -1px;\n}\n\n.tc-mode-btn:hover {\n  background-color: var(--vd-bg-secondary);\n  z-index: 1;\n}\n\n.tc-mode-btn:focus-visible {\n  outline: 2px solid var(--vd-color-primary);\n  outline-offset: 1px;\n  z-index: 2;\n}\n\n.tc-mode-btn.is-active {\n  background-color: var(--vd-bg-dark);\n  border-color: var(--vd-bg-dark);\n  color: var(--vd-text-inverse);\n  z-index: 1;\n}\n\n.tc-mode-btn i {\n  font-size: 1rem;\n}\n\n/* ==========================================================================\n   Trigger Button\n   ========================================================================== */\n\n.vd-theme-customizer {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n}\n\n.vd-theme-customizer-trigger {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 2.5rem;\n  height: 2.5rem;\n  padding: 0;\n  background: transparent;\n  border: 1px solid var(--vd-border-color);\n  border-radius: var(--vd-btn-border-radius);\n  color: var(--vd-text-primary);\n  cursor: pointer;\n  transition: all 0.2s ease;\n}\n\n.vd-theme-customizer-trigger:hover {\n  background-color: var(--vd-bg-secondary);\n  border-color: var(--vd-color-primary);\n  color: var(--vd-color-primary);\n}\n\n.vd-theme-customizer-trigger:focus-visible {\n  outline: 2px solid var(--vd-color-primary);\n  outline-offset: 2px;\n}\n\n.vd-theme-customizer-trigger i {\n  font-size: 1.25rem;\n}\n\n.vd-theme-customizer-trigger[aria-expanded=\"true\"] {\n  background-color: var(--vd-color-primary-alpha-10);\n  border-color: var(--vd-color-primary);\n  color: var(--vd-color-primary);\n}\n\n/* ==========================================================================\n    Panel\n    ========================================================================== */\n\n.vd-theme-customizer-panel {\n  position: fixed;\n  /* top is set dynamically by JS based on actual navbar height */\n  top: 55px;\n  right: 0;\n  width: var(--vd-customizer-width);\n  max-height: calc(100vh - 55px);\n  overflow-y: auto;\n  padding: 0; /* Override .vd-navbar-fixed ~ * padding-top rule */\n  background-color: var(--vd-customizer-bg);\n  border: 1px solid var(--vd-customizer-border);\n  border-radius: calc(var(--vd-radius-scale, 0.25) * 1rem);\n  box-shadow: var(--vd-customizer-shadow);\n  z-index: var(--vd-customizer-z-index);\n  opacity: 0;\n  visibility: hidden;\n  transform: translateY(-10px);\n  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;\n}\n\n.vd-theme-customizer-panel.is-open {\n  opacity: 1;\n  visibility: visible;\n  transform: translateY(0);\n}\n\n.vd-theme-customizer-panel-inner {\n  padding: var(--vd-customizer-padding);\n}\n\n/* ==========================================================================\n   Sections\n   ========================================================================== */\n\n.customizer-section {\n  margin-bottom: 1.25rem;\n}\n\n.customizer-section:last-child {\n  margin-bottom: 0;\n}\n\n.customizer-section-title {\n  display: flex;\n  align-items: center;\n  gap: 0.375rem;\n  margin-bottom: 0.625rem;\n  font-size: var(--vd-font-size-sm);\n  font-weight: var(--vd-font-weight-medium);\n  color: var(--vd-text-primary);\n}\n\n.customizer-help {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 1rem;\n  height: 1rem;\n  padding: 0;\n  background: transparent;\n  border: none;\n  color: var(--vd-text-muted);\n  cursor: help;\n  font-size: 0.75rem;\n}\n\n.customizer-help:hover {\n  color: var(--vd-text-primary);\n}\n\n/* ==========================================================================\n   Color Swatches (Primary & Neutral)\n   ========================================================================== */\n\n.customizer-colors {\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  gap: 0.375rem;\n}\n\n.customizer-swatch {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  padding: 0.375rem 0.5rem;\n  background: transparent;\n  border: 1px solid var(--vd-border-color);\n  border-radius: var(--vd-btn-border-radius);\n  cursor: pointer;\n  transition: all 0.15s ease;\n  text-align: left;\n}\n\n.customizer-swatch:hover {\n  background-color: var(--vd-bg-secondary);\n  border-color: var(--vd-border-color-dark);\n}\n\n.customizer-swatch:focus-visible {\n  outline: 2px solid var(--vd-color-primary);\n  outline-offset: 1px;\n}\n\n.customizer-swatch.is-active {\n  background-color: var(--vd-bg-secondary);\n  border-color: var(--vd-text-primary);\n}\n\n.customizer-swatch-dot {\n  flex-shrink: 0;\n  width: 12px;\n  height: 12px;\n  border-radius: 50%;\n  background-color: var(--vd-swatch-color);\n  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);\n}\n\n.customizer-swatch-label {\n  font-size: var(--vd-font-size-xs);\n  color: var(--vd-text-primary);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n/* Neutral swatches - 5 columns */\n.customizer-neutral-colors {\n  grid-template-columns: repeat(5, 1fr);\n}\n\n.customizer-neutral-colors .customizer-swatch {\n  flex-direction: column;\n  padding: 0.5rem 0.25rem;\n  text-align: center;\n}\n\n.customizer-neutral-colors .customizer-swatch-dot {\n  width: 16px;\n  height: 16px;\n}\n\n.customizer-neutral-colors .customizer-swatch-label {\n  margin-top: 0.25rem;\n}\n\n/* ==========================================================================\n   Radius Options\n   ========================================================================== */\n\n.customizer-radius {\n  display: flex;\n  gap: 0.25rem;\n}\n\n.customizer-radius-btn {\n  flex: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0.5rem 0.25rem;\n  background: transparent;\n  border: 1px solid var(--vd-border-color);\n  color: var(--vd-text-primary);\n  font-size: var(--vd-font-size-xs);\n  font-weight: var(--vd-font-weight-medium);\n  cursor: pointer;\n  transition: all 0.15s ease;\n}\n\n.customizer-radius-btn:first-child {\n  border-radius: var(--vd-btn-border-radius) 0 0 var(--vd-btn-border-radius);\n}\n\n.customizer-radius-btn:last-child {\n  border-radius: 0 var(--vd-btn-border-radius) var(--vd-btn-border-radius) 0;\n}\n\n.customizer-radius-btn:not(:first-child) {\n  margin-left: -1px;\n}\n\n.customizer-radius-btn:hover {\n  background-color: var(--vd-bg-secondary);\n  z-index: 1;\n}\n\n.customizer-radius-btn:focus-visible {\n  outline: 2px solid var(--vd-color-primary);\n  outline-offset: 1px;\n  z-index: 2;\n}\n\n.customizer-radius-btn.is-active {\n  background-color: var(--vd-bg-dark);\n  border-color: var(--vd-bg-dark);\n  color: var(--vd-text-inverse);\n  z-index: 1;\n}\n\n/* ==========================================================================\n   Font Selector\n   ========================================================================== */\n\n.customizer-font {\n  position: relative;\n}\n\n.customizer-font .vd-input {\n  width: 100%;\n  padding-left: 2rem;\n}\n\n.customizer-font-icon {\n  position: absolute;\n  left: 0.625rem;\n  top: 50%;\n  transform: translateY(-50%);\n  color: var(--vd-text-muted);\n  pointer-events: none;\n}\n\n/* ==========================================================================\n   Color Mode Switcher\n   ========================================================================== */\n\n.customizer-mode {\n  display: flex;\n  gap: 0.25rem;\n}\n\n.customizer-mode-btn {\n  flex: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 0.375rem;\n  padding: 0.5rem 0.5rem;\n  background: transparent;\n  border: 1px solid var(--vd-border-color);\n  color: var(--vd-text-primary);\n  font-size: var(--vd-font-size-xs);\n  cursor: pointer;\n  transition: all 0.15s ease;\n}\n\n.customizer-mode-btn:first-child {\n  border-radius: var(--vd-btn-border-radius) 0 0 var(--vd-btn-border-radius);\n}\n\n.customizer-mode-btn:last-child {\n  border-radius: 0 var(--vd-btn-border-radius) var(--vd-btn-border-radius) 0;\n}\n\n.customizer-mode-btn:not(:first-child) {\n  margin-left: -1px;\n}\n\n.customizer-mode-btn:hover {\n  background-color: var(--vd-bg-secondary);\n  z-index: 1;\n}\n\n.customizer-mode-btn:focus-visible {\n  outline: 2px solid var(--vd-color-primary);\n  outline-offset: 1px;\n  z-index: 2;\n}\n\n.customizer-mode-btn.is-active {\n  background-color: var(--vd-bg-dark);\n  border-color: var(--vd-bg-dark);\n  color: var(--vd-text-inverse);\n  z-index: 1;\n}\n\n.customizer-mode-btn i {\n  font-size: 1rem;\n}\n\n/* ==========================================================================\n   Dark Theme Overrides\n   ========================================================================== */\n\n[data-theme=\"dark\"] {\n  --vd-customizer-bg: var(--vd-bg-primary);\n  --vd-customizer-border: var(--vd-border-color);\n}\n\n[data-theme=\"dark\"] .customizer-swatch-dot,\n[data-theme=\"dark\"] .tc-neutral-swatch::before {\n  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);\n}\n\n[data-theme=\"dark\"] .customizer-radius-btn.is-active,\n[data-theme=\"dark\"] .customizer-mode-btn.is-active,\n[data-theme=\"dark\"] .tc-radius-btn.is-active,\n[data-theme=\"dark\"] .tc-mode-btn.is-active {\n  background-color: var(--vd-gray-2);\n  border-color: var(--vd-gray-2);\n  color: var(--vd-gray-9);\n}\n\n@media (prefers-color-scheme: dark) {\n  :root:not([data-theme]) {\n    --vd-customizer-bg: var(--vd-bg-primary);\n    --vd-customizer-border: var(--vd-border-color);\n  }\n\n  :root:not([data-theme]) .customizer-swatch-dot,\n  :root:not([data-theme]) .tc-neutral-swatch::before {\n    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);\n  }\n\n  :root:not([data-theme]) .customizer-radius-btn.is-active,\n  :root:not([data-theme]) .customizer-mode-btn.is-active,\n  :root:not([data-theme]) .tc-radius-btn.is-active,\n  :root:not([data-theme]) .tc-mode-btn.is-active {\n    background-color: var(--vd-gray-2);\n    border-color: var(--vd-gray-2);\n    color: var(--vd-gray-9);\n  }\n}\n\n/* ==========================================================================\n    Mobile Responsive\n    ========================================================================== */\n\n@media (max-width: 767.98px) {\n  .vd-theme-customizer-panel,\n  body > .vd-theme-customizer-panel {\n    position: fixed;\n    top: 0;\n    right: -100%;\n    bottom: 0;\n    width: 100%;\n    max-width: 320px;\n    max-height: none;\n    border: none;\n    border-left: 1px solid var(--vd-customizer-border);\n    border-radius: 0;\n    transform: none;\n    opacity: 1;\n    transition: right 0.3s ease, visibility 0.3s ease;\n  }\n\n  .vd-theme-customizer-panel.is-open,\n  body > .vd-theme-customizer-panel.is-open {\n    right: 0;\n    transform: none;\n    visibility: visible;\n  }\n\n  .vd-theme-customizer-panel-inner,\n  .tc-body {\n    padding: 1.5rem;\n  }\n\n  .tc-header {\n    padding: 1rem 1.5rem;\n  }\n\n  .tc-footer {\n    padding: 1rem 1.5rem;\n  }\n\n  /* Mobile close button */\n  .customizer-mobile-close {\n    position: absolute;\n    top: 1rem;\n    right: 1rem;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 2rem;\n    height: 2rem;\n    padding: 0;\n    background: transparent;\n    border: 1px solid var(--vd-border-color);\n    border-radius: calc(var(--vd-radius-scale, 0.25) * 0.5rem);\n    color: var(--vd-text-primary);\n    cursor: pointer;\n  }\n\n  .customizer-mobile-close:hover {\n    background-color: var(--vd-bg-secondary);\n  }\n\n  /* Mobile overlay */\n  .vd-theme-customizer-overlay {\n    position: fixed;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    background-color: rgba(0, 0, 0, 0.5);\n    z-index: calc(var(--vd-customizer-z-index) - 1);\n    opacity: 0;\n    visibility: hidden;\n    transition: opacity 0.3s ease, visibility 0.3s ease;\n  }\n\n  .vd-theme-customizer-overlay.is-active {\n    opacity: 1;\n    visibility: visible;\n  }\n}\n\n@media (min-width: 768px) {\n  .customizer-mobile-close {\n    display: none;\n  }\n\n  .vd-theme-customizer-overlay {\n    display: none;\n  }\n}\n\n/* ==========================================================================\n   Scrollbar Styling\n   ========================================================================== */\n\n.vd-theme-customizer-panel::-webkit-scrollbar {\n  width: 6px;\n}\n\n.vd-theme-customizer-panel::-webkit-scrollbar-track {\n  background: transparent;\n}\n\n.vd-theme-customizer-panel::-webkit-scrollbar-thumb {\n  background-color: var(--vd-border-color);\n  border-radius: 3px;\n}\n\n.vd-theme-customizer-panel::-webkit-scrollbar-thumb:hover {\n  background-color: var(--vd-text-muted);\n}\n\n/* ==========================================================================\n   Animation for panel header\n   ========================================================================== */\n\n.customizer-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding-bottom: 0.75rem;\n  margin-bottom: 0.75rem;\n  border-bottom: 1px solid var(--vd-border-color);\n}\n\n.customizer-title {\n  font-size: var(--vd-font-size-base);\n  font-weight: var(--vd-font-weight-semibold);\n  color: var(--vd-text-primary);\n  margin: 0;\n}\n\n.customizer-reset {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.25rem;\n  padding: 0.25rem 0.5rem;\n  background: transparent;\n  border: 1px solid var(--vd-border-color);\n  border-radius: var(--vd-btn-border-radius);\n  color: var(--vd-text-muted);\n  font-size: var(--vd-font-size-xs);\n  cursor: pointer;\n  transition: all 0.15s ease;\n}\n\n.customizer-reset:hover {\n  background-color: var(--vd-bg-secondary);\n  color: var(--vd-text-primary);\n  border-color: var(--vd-border-color-dark);\n}\n\n.customizer-reset:focus-visible {\n  outline: 2px solid var(--vd-color-primary);\n  outline-offset: 1px;\n}\n\n/**\n * Vanduo Framework - Theme Switcher\n * Icon-only menu variant for explicit theme selection\n */\n\n:root {\n  --vd-theme-switcher-menu-bg: var(--vd-color-white);\n  --vd-theme-switcher-menu-border-color: var(--vd-border-color);\n  --vd-theme-switcher-option-hover-bg: var(--vd-bg-secondary);\n  --vd-theme-switcher-option-active-bg: var(--vd-color-primary-alpha-10);\n  --vd-theme-switcher-option-active-color: var(--vd-color-primary);\n  --vd-theme-switcher-z-index: 1000;\n}\n\n[data-theme=\"dark\"] {\n  --vd-theme-switcher-menu-bg: var(--vd-bg-primary);\n  --vd-theme-switcher-option-hover-bg: var(--vd-bg-secondary);\n}\n\n@media (prefers-color-scheme: dark) {\n  :root:not([data-theme]) {\n    --vd-theme-switcher-menu-bg: var(--vd-bg-primary);\n    --vd-theme-switcher-option-hover-bg: var(--vd-bg-secondary);\n  }\n}\n\n.vd-theme-switcher {\n  position: relative;\n  display: inline-block;\n}\n\n.vd-theme-switcher-toggle {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 2.375rem;\n  height: 2.375rem;\n  padding: 0;\n  border: 1px solid var(--vd-border-color);\n  border-radius: var(--vd-btn-border-radius, var(--vd-card-border-radius));\n  background: transparent;\n  color: var(--vd-text-secondary);\n  cursor: pointer;\n  font-size: 1.15rem;\n  line-height: 1;\n  transition: color 0.2s, border-color 0.2s, background 0.2s;\n}\n\n.vd-theme-switcher-toggle:hover,\n.vd-theme-switcher-toggle:focus-visible {\n  color: var(--vd-color-primary);\n  border-color: var(--vd-color-primary);\n  background: var(--vd-color-primary-alpha-10);\n  outline: none;\n}\n\n.vd-theme-switcher-menu {\n  position: absolute;\n  top: calc(100% + 0.375rem);\n  left: 0;\n  z-index: var(--vd-theme-switcher-z-index);\n  display: none;\n  flex-direction: column;\n  gap: 0.25rem;\n  min-width: auto;\n  padding: 0.375rem;\n  margin: 0;\n  background: var(--vd-theme-switcher-menu-bg, #ffffff);\n  border: 1px solid var(--vd-theme-switcher-menu-border-color);\n  border-radius: var(--vd-btn-border-radius, var(--vd-card-border-radius));\n  box-shadow: var(--vd-shadow-lg);\n  list-style: none;\n  isolation: isolate;\n  backdrop-filter: none;\n  -webkit-backdrop-filter: none;\n  visibility: hidden;\n  pointer-events: none;\n  transform: translateY(-6px);\n  transition: visibility var(--vd-transition-duration-base, 0.2s) var(--vd-transition-ease, ease),\n              transform var(--vd-transition-duration-base, 0.2s) var(--vd-transition-ease, ease);\n}\n\n.vd-theme-switcher-menu-end .vd-theme-switcher-menu,\n.vd-theme-switcher.vd-theme-switcher-menu-end .vd-theme-switcher-menu {\n  right: 0;\n  left: auto;\n}\n\n.vd-theme-switcher.is-open .vd-theme-switcher-menu,\n.vd-theme-switcher-menu.is-open {\n  display: flex;\n  visibility: visible;\n  pointer-events: auto;\n  transform: translateY(0);\n}\n\n.vd-theme-switcher-option,\n.vd-theme-switcher-menu [data-theme-value] {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 2.375rem;\n  height: 2.375rem;\n  padding: 0;\n  border: 1px solid transparent;\n  border-radius: var(--vd-btn-border-radius-sm, var(--vd-radius-fib-3));\n  background: transparent;\n  color: var(--vd-text-secondary);\n  cursor: pointer;\n  font-size: 1.15rem;\n  line-height: 1;\n  transition: color 0.2s, background 0.2s, border-color 0.2s;\n}\n\n.vd-theme-switcher-option:hover,\n.vd-theme-switcher-option:focus-visible,\n.vd-theme-switcher-menu [data-theme-value]:hover,\n.vd-theme-switcher-menu [data-theme-value]:focus-visible {\n  color: var(--vd-text-primary);\n  background: var(--vd-theme-switcher-option-hover-bg);\n  outline: none;\n}\n\n.vd-theme-switcher-option.is-active,\n.vd-theme-switcher-menu [data-theme-value].is-active {\n  color: var(--vd-theme-switcher-option-active-color);\n  background: var(--vd-theme-switcher-option-active-bg);\n  border-color: var(--vd-color-primary-alpha-20, transparent);\n}\n\n/**\n * Vanduo Framework - Image Box Component\n * Lightbox-style image enlargement with smooth transitions\n */\n\n:root {\n  /* Image Box Colors */\n  --vd-image-box-backdrop-bg: rgba(0, 0, 0, 0.9);\n  --vd-image-box-backdrop-blur: 8px;\n\n  /* Image Box Transitions (Fibonacci-inspired timing) */\n  --vd-image-box-transition-duration: 0.3s;\n  --vd-image-box-transition-easing: cubic-bezier(0.4, 0, 0.2, 1);\n\n  /* Image Box Z-index */\n  --vd-image-box-z-index: 2000;\n\n  /* Image Box Padding */\n  --vd-image-box-padding: 21px;\n  /* Fibonacci number */\n\n  /* Image Box Scale */\n  --vd-image-box-scale-start: 0.9;\n  --vd-image-box-scale-end: 1;\n\n  /* Image Box Max Size */\n  --vd-image-box-max-width: 50vw;\n  --vd-image-box-max-height: 50vh;\n}\n\n/* Broken Image Handling for Triggers */\n.vd-image-box-trigger {\n  position: relative;\n  min-height: 60px;\n  min-width: 60px;\n  cursor: zoom-in;\n  transition: transform var(--vd-image-box-transition-duration) var(--vd-image-box-transition-easing),\n    box-shadow var(--vd-image-box-transition-duration) var(--vd-image-box-transition-easing);\n}\n\n/* Hide broken image alt text and show styled placeholder */\n.vd-image-box-trigger.is-broken {\n  /* Gradient background for placeholder */\n  background: linear-gradient(135deg,\n      var(--vd-bg-tertiary, rgba(128, 128, 128, 0.1)) 0%,\n      var(--vd-bg-secondary, rgba(128, 128, 128, 0.15)) 100%);\n  border: 1px dashed var(--vd-border-color, rgba(128, 128, 128, 0.3));\n\n  /* Center the icon using background image */\n  background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23888888' viewBox='0 0 256 256'%3E%3Cpath d='M216,40H40A16,16,0,0,0,24,56V200a16,16,0,0,0,16,16H216a16,16,0,0,0,16-16V56A16,16,0,0,0,216,40ZM40,56H216v94.75l-24.29-24.29a16,16,0,0,0-22.63,0L144,151.51l-25.38-25.38a16,16,0,0,0-22.62,0L40,182.12V56Z'/%3E%3Ccircle cx='100' cy='108' r='20'/%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  background-position: center;\n  background-size: 32px 32px;\n\n  /* Hide the broken image icon and alt text */\n  color: transparent;\n  overflow: hidden;\n}\n\n.vd-image-box-trigger:hover {\n  transform: scale(1.02);\n  box-shadow: var(--vd-shadow-lg);\n}\n\n/* Image Box Backdrop */\n.vd-image-box-backdrop {\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100vw;\n  height: 100vh;\n  z-index: var(--vd-image-box-z-index);\n  background-color: var(--vd-image-box-backdrop-bg);\n  backdrop-filter: blur(var(--vd-image-box-backdrop-blur));\n  -webkit-backdrop-filter: blur(var(--vd-image-box-backdrop-blur));\n  opacity: 0;\n  visibility: hidden;\n  transition: opacity var(--vd-image-box-transition-duration) var(--vd-image-box-transition-easing),\n    visibility var(--vd-image-box-transition-duration) var(--vd-image-box-transition-easing);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: var(--vd-image-box-padding);\n}\n\n.vd-image-box-backdrop.is-visible {\n  opacity: 1;\n  visibility: visible;\n}\n\n/* Image Box Container */\n.vd-image-box-container {\n  position: relative;\n  max-width: var(--vd-image-box-max-width);\n  max-height: var(--vd-image-box-max-height);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transform: scale(var(--vd-image-box-scale-start));\n  opacity: 0;\n  transition: transform var(--vd-image-box-transition-duration) var(--vd-image-box-transition-easing),\n    opacity var(--vd-image-box-transition-duration) var(--vd-image-box-transition-easing);\n}\n\n.vd-image-box-backdrop.is-visible .vd-image-box-container {\n  transform: scale(var(--vd-image-box-scale-end));\n  opacity: 1;\n}\n\n/* Image Box Image */\n.vd-image-box-img {\n  max-width: 100%;\n  max-height: 100%;\n  object-fit: contain;\n  border-radius: var(--vd-btn-border-radius);\n  box-shadow: var(--vd-shadow-2xl);\n  cursor: zoom-out;\n  user-select: none;\n  -webkit-user-drag: none;\n}\n\n/* Image Box Close Button (optional) */\n.vd-image-box-close {\n  position: absolute;\n  top: 21px;\n  right: 21px;\n  width: 44px;\n  height: 44px;\n  background: rgba(255, 255, 255, 0.1);\n  border: none;\n  border-radius: 50%;\n  color: var(--vd-color-white);\n  font-size: 24px;\n  line-height: 1;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: background-color var(--vd-transition-duration-fast) var(--vd-transition-ease),\n    transform var(--vd-transition-duration-fast) var(--vd-transition-ease);\n  z-index: calc(var(--vd-image-box-z-index) + 1);\n  opacity: 0;\n  transform: translateY(-10px);\n}\n\n.vd-image-box-backdrop.is-visible .vd-image-box-close {\n  opacity: 1;\n  transform: translateY(0);\n  transition-delay: 0.1s;\n}\n\n.vd-image-box-close:hover {\n  background: rgba(255, 255, 255, 0.2);\n  transform: scale(1.1);\n}\n\n.vd-image-box-close:focus {\n  outline: 2px solid var(--vd-color-primary);\n  outline-offset: 2px;\n}\n\n/* Image Box Caption */\n.vd-image-box-caption {\n  position: absolute;\n  bottom: 21px;\n  left: 50%;\n  transform: translateX(-50%);\n  background: rgba(0, 0, 0, 0.7);\n  color: var(--vd-color-white);\n  padding: 8px 16px;\n  border-radius: var(--vd-btn-border-radius);\n  font-size: var(--vd-font-size-sm);\n  text-align: center;\n  max-width: 80%;\n  opacity: 0;\n  transition: opacity var(--vd-image-box-transition-duration) var(--vd-image-box-transition-easing);\n}\n\n.vd-image-box-backdrop.is-visible .vd-image-box-caption {\n  opacity: 1;\n  transition-delay: 0.15s;\n}\n\n/* Body scroll lock when Image Box is open */\n.body-image-box-open {\n  overflow: hidden;\n  padding-right: var(--vd-scrollbar-width, 0);\n}\n\n/* Reduced Motion Support */\n@media (prefers-reduced-motion: reduce) {\n\n  .vd-image-box-trigger,\n  .vd-image-box-backdrop,\n  .vd-image-box-container,\n  .vd-image-box-close,\n  .vd-image-box-caption {\n    transition: none;\n  }\n\n  .vd-image-box-trigger:hover {\n    transform: none;\n  }\n}\n\n/* Mobile Adjustments */\n@media (max-width: 767.98px) {\n  :root {\n    --vd-image-box-padding: 13px;\n    --vd-image-box-max-width: 90vw;\n    --vd-image-box-max-height: 80vh;\n  }\n\n  .vd-image-box-close {\n    top: 13px;\n    right: 13px;\n    width: 40px;\n    height: 40px;\n    font-size: 20px;\n  }\n}\n\n/* Gallery Grid Support */\n.vd-image-box-gallery {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));\n  gap: 13px;\n  margin-top: 21px;\n}\n\n.vd-image-box-gallery .vd-image-box-trigger {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  aspect-ratio: 4 / 3;\n  transition: transform 0.2s ease, box-shadow 0.2s ease, outline 0.15s ease;\n}\n\n/* Active/selected state for gallery thumbnails */\n.vd-image-box-gallery .vd-image-box-trigger.is-active,\n.vd-image-box-gallery .vd-image-box-trigger[aria-selected=\"true\"] {\n  outline: 3px solid var(--vd-color-primary);\n  outline-offset: 2px;\n  transform: scale(1.05);\n  box-shadow: var(--vd-shadow-lg);\n}\n\n/* Keyboard focus for gallery thumbnails */\n.vd-image-box-gallery .vd-image-box-trigger:focus {\n  outline: 3px solid var(--vd-color-primary);\n  outline-offset: 2px;\n}\n\n/* Portrait orientation gallery item */\n.vd-image-box-gallery .vd-image-box-trigger[data-orientation=\"portrait\"] {\n  aspect-ratio: 3 / 4;\n}\n\n/* Loading State */\n.vd-image-box-trigger.is-loading {\n  background: var(--vd-bg-secondary);\n  animation: image-box-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n}\n\n@keyframes image-box-pulse {\n\n  0%,\n  100% {\n    opacity: 1;\n  }\n\n  50% {\n    opacity: 0.5;\n  }\n}\n\n/**\n * Vanduo Framework - Documentation Search Component\n * Search functionality for documentation pages\n */\n\n:root {\n  /* Search Input */\n  --vd-doc-search-input-bg: var(--vd-input-bg);\n  --vd-doc-search-input-border: var(--vd-input-border-color);\n  --vd-doc-search-input-focus-border: var(--vd-color-primary);\n  --vd-doc-search-input-radius: var(--vd-input-border-radius);\n  --vd-doc-search-input-padding-y: 0.5rem;\n  --vd-doc-search-input-padding-x: 0.75rem;\n  --vd-doc-search-input-padding-left: 30px;\n  \n  /* Search Results */\n  --vd-doc-search-results-bg: var(--vd-card-bg, var(--vd-bg-primary));\n  --vd-doc-search-results-border: var(--vd-border-color);\n  --vd-doc-search-results-shadow: var(--vd-shadow-lg);\n  --vd-doc-search-results-max-height: 400px;\n  --vd-doc-search-results-radius: var(--vd-input-border-radius);\n  \n  /* Result Items */\n  --vd-doc-search-result-padding: 0.75rem 1rem;\n  --vd-doc-search-result-hover-bg: var(--vd-color-primary-alpha-10, rgba(34, 184, 207, 0.1));\n  --vd-doc-search-result-active-bg: var(--vd-color-primary-alpha-20, rgba(34, 184, 207, 0.2));\n  \n  /* Highlight */\n  --vd-doc-search-highlight-bg: var(--vd-color-warning-alpha-30, rgba(250, 176, 5, 0.3));\n  --vd-doc-search-highlight-color: inherit;\n  \n  /* Shortcut Badge */\n  --vd-doc-search-shortcut-bg: var(--vd-bg-secondary);\n  --vd-doc-search-shortcut-border: var(--vd-border-color);\n  --vd-doc-search-shortcut-color: var(--vd-text-muted);\n}\n\n/* Dark Theme Overrides */\n[data-theme=\"dark\"] {\n  --vd-doc-search-results-bg: var(--vd-bg-secondary);\n  --vd-doc-search-shortcut-bg: var(--vd-bg-tertiary);\n}\n\n@media (prefers-color-scheme: dark) {\n  :root:not([data-theme]) {\n    --vd-doc-search-results-bg: var(--vd-bg-secondary);\n    --vd-doc-search-shortcut-bg: var(--vd-bg-tertiary);\n  }\n}\n\n/* ============================================\n   Search Container\n   ============================================ */\n\n.vd-doc-search {\n  position: relative;\n  margin-bottom: 1rem;\n}\n\n/* ============================================\n   Search Input Wrapper\n   ============================================ */\n\n.vd-doc-search-input-wrapper {\n  position: relative;\n  display: flex;\n  align-items: center;\n}\n\n/* Search Icon */\n.vd-doc-search-icon {\n  position: absolute;\n  left: 0.625rem;\n  top: 50%;\n  transform: translateY(-50%);\n  color: var(--vd-text-muted);\n  font-size: 1.125rem;\n  pointer-events: none;\n  z-index: 1;\n  transition: color 0.15s ease;\n}\n\n.vd-doc-search-input:focus ~ .vd-doc-search-icon,\n.vd-doc-search-input-wrapper:focus-within .vd-doc-search-icon {\n  color: var(--vd-color-primary);\n}\n\n/* Search Input - input.vd-doc-search-input matches forms.css specificity so padding overrides base input[type=\"search\"] */\ninput.vd-doc-search-input {\n  width: 100%;\n  padding: var(--vd-input-padding-y) var(--vd-input-padding-x);\n  padding-left: var(--vd-doc-search-input-padding-left);\n  font-family: var(--vd-font-family-sans);\n  font-size: var(--vd-font-size-sm);\n  line-height: var(--vd-line-height-normal);\n  color: var(--vd-text-primary);\n  background-color: var(--vd-doc-search-input-bg);\n  border: 1px solid var(--vd-doc-search-input-border);\n  border-radius: var(--vd-doc-search-input-radius);\n  transition: border-color 0.15s ease, box-shadow 0.15s ease;\n  appearance: none;\n}\n\n.vd-doc-search-input::placeholder {\n  color: var(--vd-text-muted);\n  opacity: 1;\n}\n\n.vd-doc-search-input:focus {\n  outline: none;\n  border-color: var(--vd-doc-search-input-focus-border);\n  box-shadow: 0 0 0 3px var(--vd-color-primary-alpha-20, rgba(34, 184, 207, 0.2));\n}\n\n/* Clear the default search cancel button */\n.vd-doc-search-input::-webkit-search-cancel-button {\n  -webkit-appearance: none;\n  appearance: none;\n}\n\n/* Keyboard Shortcut Badge */\n.vd-doc-search-shortcut {\n  position: absolute;\n  right: var(--vd-doc-search-input-padding-x);\n  top: 50%;\n  transform: translateY(-50%);\n  display: inline-flex;\n  align-items: center;\n  gap: 0.125rem;\n  padding: 0.125rem 0.375rem;\n  font-family: var(--vd-font-family-sans);\n  font-size: var(--vd-font-size-xs);\n  font-weight: var(--vd-font-weight-medium);\n  color: var(--vd-doc-search-shortcut-color);\n  background-color: var(--vd-doc-search-shortcut-bg);\n  border: 1px solid var(--vd-doc-search-shortcut-border);\n  border-radius: 4px;\n  pointer-events: none;\n  user-select: none;\n}\n\n/* Hide shortcut when input has value */\n.vd-doc-search-input:not(:placeholder-shown) ~ .vd-doc-search-shortcut {\n  display: none;\n}\n\n/* ============================================\n   Search Results Dropdown\n   ============================================ */\n\n.vd-doc-search-results {\n  position: absolute;\n  top: 100%;\n  left: 0;\n  right: 0;\n  z-index: 1000;\n  display: none;\n  margin-top: 0.5rem;\n  background-color: var(--vd-doc-search-results-bg);\n  border: 1px solid var(--vd-doc-search-results-border);\n  border-radius: var(--vd-doc-search-results-radius);\n  box-shadow: var(--vd-doc-search-results-shadow);\n  max-height: var(--vd-doc-search-results-max-height);\n  overflow-y: auto;\n  overflow-x: hidden;\n  animation: doc-search-fade-in 0.15s ease;\n}\n\n.vd-doc-search-results.is-open {\n  display: block;\n}\n\n/* Results List */\n.vd-doc-search-results-list {\n  list-style: none;\n  margin: 0;\n  padding: 0.5rem 0;\n}\n\n/* ============================================\n   Search Result Item\n   ============================================ */\n\n.vd-doc-search-result {\n  display: flex;\n  align-items: flex-start;\n  gap: 0.75rem;\n  padding: var(--vd-doc-search-result-padding);\n  cursor: pointer;\n  transition: background-color 0.1s ease;\n  text-decoration: none;\n  color: inherit;\n}\n\n.vd-doc-search-result:hover {\n  background-color: var(--vd-doc-search-result-hover-bg);\n}\n\n.vd-doc-search-result.is-active,\n.vd-doc-search-result:focus {\n  background-color: var(--vd-doc-search-result-active-bg);\n  outline: none;\n}\n\n/* Result Icon */\n.vd-doc-search-result-icon {\n  flex-shrink: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 2rem;\n  height: 2rem;\n  background-color: var(--vd-color-primary-alpha-10, rgba(34, 184, 207, 0.1));\n  border-radius: 6px;\n  color: var(--vd-color-primary);\n  font-size: 1rem;\n}\n\n/* Result Content */\n.vd-doc-search-result-content {\n  flex: 1;\n  min-width: 0;\n}\n\n.vd-doc-search-result-title {\n  font-size: var(--vd-font-size-sm);\n  font-weight: var(--vd-font-weight-medium);\n  color: var(--vd-text-primary);\n  line-height: 1.4;\n  margin-bottom: 0.125rem;\n}\n\n.vd-doc-search-result-category {\n  font-size: var(--vd-font-size-xs);\n  color: var(--vd-text-muted);\n  margin-bottom: 0.25rem;\n}\n\n.vd-doc-search-result-excerpt {\n  font-size: var(--vd-font-size-xs);\n  color: var(--vd-text-secondary);\n  line-height: 1.4;\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n}\n\n/* Highlight matched text */\n.vd-doc-search-result mark,\n.vd-doc-search-highlight {\n  background-color: var(--vd-doc-search-highlight-bg);\n  color: var(--vd-doc-search-highlight-color);\n  padding: 0 0.125rem;\n  border-radius: 2px;\n}\n\n/* ============================================\n   Empty State\n   ============================================ */\n\n.vd-doc-search-empty {\n  padding: 2rem 1rem;\n  text-align: center;\n  color: var(--vd-text-muted);\n}\n\n.vd-doc-search-empty-icon {\n  font-size: 2.5rem;\n  margin-bottom: 0.75rem;\n  opacity: 0.5;\n}\n\n.vd-doc-search-empty-title {\n  font-size: var(--vd-font-size-sm);\n  font-weight: var(--vd-font-weight-medium);\n  color: var(--vd-text-primary);\n  margin-bottom: 0.25rem;\n}\n\n.vd-doc-search-empty-text {\n  font-size: var(--vd-font-size-xs);\n  color: var(--vd-text-muted);\n}\n\n/* ============================================\n   Loading State\n   ============================================ */\n\n.vd-doc-search-loading {\n  padding: 1.5rem 1rem;\n  text-align: center;\n  color: var(--vd-text-muted);\n}\n\n.vd-doc-search-loading-spinner {\n  display: inline-block;\n  width: 1.5rem;\n  height: 1.5rem;\n  border: 2px solid var(--vd-border-color);\n  border-top-color: var(--vd-color-primary);\n  border-radius: 50%;\n  animation: doc-search-spin 0.6s linear infinite;\n}\n\n@keyframes doc-search-spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n\n/* ============================================\n   Footer Hint\n   ============================================ */\n\n.vd-doc-search-footer {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 1rem;\n  padding: 0.5rem 1rem;\n  border-top: 1px solid var(--vd-border-color);\n  font-size: var(--vd-font-size-xs);\n  color: var(--vd-text-muted);\n}\n\n.vd-doc-search-footer kbd {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-width: 1.25rem;\n  height: 1.25rem;\n  padding: 0 0.25rem;\n  font-family: var(--vd-font-family-sans);\n  font-size: 0.625rem;\n  font-weight: var(--vd-font-weight-medium);\n  background-color: var(--vd-doc-search-shortcut-bg);\n  border: 1px solid var(--vd-doc-search-shortcut-border);\n  border-radius: 3px;\n}\n\n.vd-doc-search-footer-item {\n  display: flex;\n  align-items: center;\n  gap: 0.25rem;\n}\n\n/* ============================================\n   Category Icons\n   ============================================ */\n\n.vd-doc-search-result[data-category=\"getting-started\"] .vd-doc-search-result-icon {\n  background-color: var(--vd-color-success-alpha-10, rgba(64, 192, 87, 0.1));\n  color: var(--vd-color-success);\n}\n\n.vd-doc-search-result[data-category=\"core\"] .vd-doc-search-result-icon {\n  background-color: var(--vd-color-info-alpha-10, rgba(34, 139, 230, 0.1));\n  color: var(--vd-color-info);\n}\n\n.vd-doc-search-result[data-category=\"components\"] .vd-doc-search-result-icon {\n  background-color: var(--vd-color-primary-alpha-10, rgba(34, 184, 207, 0.1));\n  color: var(--vd-color-primary);\n}\n\n.vd-doc-search-result[data-category=\"interactive\"] .vd-doc-search-result-icon {\n  background-color: var(--vd-color-warning-alpha-10, rgba(250, 176, 5, 0.1));\n  color: var(--vd-color-warning);\n}\n\n.vd-doc-search-result[data-category=\"data-display\"] .vd-doc-search-result-icon {\n  background-color: var(--vd-color-secondary-alpha-10, rgba(32, 201, 151, 0.1));\n  color: var(--vd-color-secondary);\n}\n\n.vd-doc-search-result[data-category=\"feedback\"] .vd-doc-search-result-icon {\n  background-color: var(--vd-color-error-alpha-10, rgba(250, 82, 82, 0.1));\n  color: var(--vd-color-error);\n}\n\n/* ============================================\n   Sidebar context - sticky search below navbar\n   ============================================ */\n\n.doc-sidebar .vd-doc-search {\n  flex-shrink: 0;\n  position: sticky;\n  top: 70px;\n  z-index: 2;\n  background: var(--vd-bg-primary);\n  padding-top: 0.5rem;\n  padding-bottom: 0.5rem;\n}\n\n/* ============================================\n   Responsive Styles\n   ============================================ */\n\n@media (max-width: 991px) {\n  .vd-doc-search {\n    margin-bottom: 1rem;\n  }\n  \n  .vd-doc-search-results {\n    position: fixed;\n    left: 1rem;\n    right: 1rem;\n    top: auto;\n    max-height: 60vh;\n  }\n  \n  .vd-doc-search-shortcut {\n    display: none;\n  }\n  \n  input.vd-doc-search-input {\n    padding-right: var(--vd-doc-search-input-padding-x);\n    min-height: 44px;\n  }\n  \n  .vd-doc-search-result {\n    padding: 1rem;\n  }\n\n  .doc-sidebar .vd-doc-search {\n    flex-shrink: 0;\n    position: sticky;\n    top: 70px;\n    z-index: 2;\n    background: var(--vd-bg-primary);\n    padding-top: 0.5rem;\n    padding-bottom: 0.5rem;\n  }\n}\n\n@keyframes doc-search-fade-in {\n  from {\n    opacity: 0;\n    transform: translateY(-0.5rem);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n/* Reduced motion */\n@media (prefers-reduced-motion: reduce) {\n  .vd-doc-search-results {\n    animation: none;\n  }\n  \n  .vd-doc-search-loading-spinner {\n    animation-duration: 1.5s;\n  }\n}\n\n/**\n * Vanduo Framework - Draggable Component\n * CSS styles for draggable elements and drop zones\n */\n\n:root {\n  /* Draggable Colors */\n  --vd-draggable-bg: var(--vd-color-white);\n  --vd-draggable-border-color: var(--vd-border-color);\n  --vd-draggable-hover-bg: var(--vd-bg-secondary);\n  --vd-draggable-hover-border-color: var(--vd-color-primary);\n  --vd-draggable-dragging-bg: var(--vd-bg-secondary);\n  --vd-draggable-dragging-border-color: var(--vd-color-primary);\n  --vd-draggable-dragging-shadow: var(--vd-shadow-lg);\n  \n  /* Drop Zone Colors */\n  --vd-drop-zone-bg: var(--vd-color-primary-alpha-5);\n  --vd-drop-zone-border-color: var(--vd-color-primary-alpha-30);\n  --vd-drop-zone-hover-bg: var(--vd-color-primary-alpha-10);\n  --vd-drop-zone-hover-border-color: var(--vd-color-primary);\n  --vd-drop-zone-active-bg: var(--vd-color-primary-alpha-15);\n  --vd-drop-zone-active-border-color: var(--vd-color-primary);\n  \n  /* Spacing */\n  --vd-draggable-padding: 0.8125rem; /* 13px - fib */\n  --vd-draggable-margin: 0.5rem; /* 8px - fib */\n  --vd-drop-zone-padding: 1.3125rem; /* 21px - fib */\n  \n  /* Transitions */\n  --vd-draggable-transition: all var(--vd-transition-duration-base) var(--vd-transition-ease);\n}\n\n/* Dark Theme Overrides */\n[data-theme=\"dark\"] {\n  --vd-draggable-bg: var(--vd-bg-secondary);\n  --vd-draggable-hover-bg: var(--vd-bg-primary);\n  --vd-draggable-dragging-bg: var(--vd-bg-primary);\n  --vd-drop-zone-bg: var(--vd-color-primary-alpha-10);\n  --vd-drop-zone-border-color: var(--vd-color-primary-alpha-40);\n  --vd-drop-zone-hover-bg: var(--vd-color-primary-alpha-15);\n  --vd-drop-zone-active-bg: var(--vd-color-primary-alpha-20);\n}\n\n@media (prefers-color-scheme: dark) {\n  :root:not([data-theme]) {\n    --vd-draggable-bg: var(--vd-bg-secondary);\n    --vd-draggable-hover-bg: var(--vd-bg-primary);\n    --vd-draggable-dragging-bg: var(--vd-bg-primary);\n    --vd-drop-zone-bg: var(--vd-color-primary-alpha-10);\n    --vd-drop-zone-border-color: var(--vd-color-primary-alpha-40);\n    --vd-drop-zone-hover-bg: var(--vd-color-primary-alpha-15);\n    --vd-drop-zone-active-bg: var(--vd-color-primary-alpha-20);\n  }\n}\n\n/* Base Draggable Element */\n.vd-draggable {\n  position: relative;\n  display: inline-block;\n  padding: var(--vd-draggable-padding);\n  margin: var(--vd-draggable-margin);\n  background-color: var(--vd-draggable-bg);\n  background-clip: padding-box;\n  border: 1px solid var(--vd-draggable-border-color);\n  border-radius: var(--vd-btn-border-radius);\n  cursor: grab;\n  user-select: none;\n  transition: var(--vd-draggable-transition);\n  touch-action: none;\n}\n\n.vd-draggable:hover {\n  background-color: var(--vd-draggable-hover-bg);\n  border-color: var(--vd-draggable-hover-border-color);\n}\n\n.vd-draggable:active {\n  cursor: grabbing;\n}\n\n.vd-draggable[draggable=\"true\"] {\n  cursor: grab;\n}\n\n.vd-draggable[draggable=\"true\"]:active {\n  cursor: grabbing;\n}\n\n/* Dragging State */\n.vd-draggable.is-dragging {\n  opacity: 0.7;\n  transform: scale(1.02);\n  background-color: var(--vd-draggable-dragging-bg);\n  border-color: var(--vd-draggable-dragging-border-color);\n  box-shadow: var(--vd-draggable-dragging-shadow);\n  cursor: grabbing;\n  z-index: 1000;\n}\n\n/* Draggable Handle */\n.vd-draggable-handle {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 1.25rem; /* 20px */\n  height: 1.25rem; /* 20px */\n  margin-right: 0.5rem; /* 8px */\n  color: var(--vd-text-muted);\n  cursor: grab;\n  transition: var(--vd-draggable-transition);\n}\n\n.vd-draggable-handle:hover {\n  color: var(--vd-text-primary);\n}\n\n.vd-draggable:active .vd-draggable-handle {\n  cursor: grabbing;\n}\n\n/* Drop Zone */\n.vd-drop-zone {\n  position: relative;\n  min-height: 3rem; /* 48px */\n  padding: var(--vd-drop-zone-padding);\n  margin: var(--vd-draggable-margin);\n  background-color: var(--vd-drop-zone-bg);\n  background-clip: padding-box;\n  border: 2px dashed var(--vd-drop-zone-border-color);\n  border-radius: var(--vd-btn-border-radius);\n  transition: var(--vd-draggable-transition);\n}\n\n.vd-drop-zone:hover {\n  background-color: var(--vd-drop-zone-hover-bg);\n  border-color: var(--vd-drop-zone-hover-border-color);\n}\n\n.vd-drop-zone.is-drag-over {\n  background-color: var(--vd-drop-zone-active-bg);\n  border-color: var(--vd-drop-zone-active-border-color);\n  border-style: solid;\n  transform: scale(1.01);\n}\n\n/* Empty drop zone placeholder */\n.vd-drop-zone:empty::after {\n  content: 'Drag items here';\n  display: block;\n  text-align: center;\n  padding: 1rem;\n  color: var(--vd-text-muted);\n  font-style: italic;\n}\n\n.vd-drop-zone.is-drag-over::before {\n  content: 'Drop here';\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  font-weight: var(--vd-font-weight-medium);\n  color: var(--vd-color-primary);\n  pointer-events: none;\n}\n\n/* Draggable Container */\n.vd-draggable-container {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--vd-draggable-margin);\n  padding: var(--vd-draggable-padding);\n  background-color: var(--vd-bg-secondary);\n  background-clip: padding-box;\n  border: 1px solid var(--vd-border-color);\n  border-radius: var(--vd-btn-border-radius);\n}\n\n.vd-draggable-container.vd-draggable-container-vertical {\n  flex-direction: column;\n  align-items: stretch;\n}\n\n/* Draggable Item */\n.vd-draggable-item {\n  flex: 0 0 auto;\n  min-width: 8rem; /* 128px */\n  padding: var(--vd-draggable-padding);\n  background-color: var(--vd-draggable-bg);\n  background-clip: padding-box;\n  border: 1px solid var(--vd-draggable-border-color);\n  border-radius: var(--vd-btn-border-radius);\n  cursor: grab;\n  user-select: none;\n  touch-action: none;\n  transition: var(--vd-draggable-transition);\n}\n\n.vd-draggable-item:hover {\n  background-color: var(--vd-draggable-hover-bg);\n  border-color: var(--vd-draggable-hover-border-color);\n}\n\n.vd-draggable-item.is-dragging {\n  opacity: 0.7;\n  transform: scale(1.02);\n  background-color: var(--vd-draggable-dragging-bg);\n  border-color: var(--vd-draggable-dragging-border-color);\n  box-shadow: var(--vd-draggable-dragging-shadow);\n  cursor: grabbing;\n  z-index: 1000;\n}\n\n.vd-draggable-item:active {\n  cursor: grabbing;\n}\n\n/* Keyboard-activated grab state (via aria-grabbed) */\n.vd-draggable[aria-grabbed=\"true\"],\n.vd-draggable-item[aria-grabbed=\"true\"] {\n  outline: 2px solid var(--vd-color-primary);\n  outline-offset: 2px;\n  background-color: var(--vd-draggable-dragging-bg);\n  border-color: var(--vd-draggable-dragging-border-color);\n}\n\n/* Drag Feedback */\n.vd-drag-feedback {\n  position: fixed;\n  pointer-events: none;\n  z-index: 9999;\n  opacity: 0.9;\n  transform: none;\n  transition: opacity 0.2s ease;\n}\n\n.vd-drag-feedback.hidden {\n  opacity: 0;\n}\n\n/* Disabled State */\n.vd-draggable.is-disabled,\n.vd-draggable[disabled],\n.vd-draggable-item.is-disabled,\n.vd-draggable-item[disabled] {\n  opacity: 0.6;\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n/* Responsive Behavior */\n@media (max-width: 575.98px) {\n  .vd-draggable-container {\n    padding: 0.5rem; /* 8px */\n  }\n  \n  .vd-draggable-item {\n    min-width: 100%;\n  }\n  \n  .vd-draggable {\n    display: block;\n    margin: 0.5rem 0;\n  }\n  \n  .vd-drop-zone {\n    padding: 1rem; /* 16px */\n    min-height: 2.5rem; /* 40px */\n  }\n}\n\n/* Accessibility */\n.vd-draggable:focus-visible,\n.vd-draggable-item:focus-visible {\n  outline: 2px solid var(--vd-color-primary);\n  outline-offset: 2px;\n}\n\n/* Animation for dropping */\n@keyframes vd-drag-drop {\n  0% {\n    transform: scale(1);\n  }\n  50% {\n    transform: scale(1.05);\n  }\n  100% {\n    transform: scale(1);\n  }\n}\n\n.vd-draggable.is-dropped,\n.vd-draggable-item.is-dropped {\n  animation: vd-drag-drop 0.3s ease;\n}\n\n/* High Contrast / Forced Colors Mode */\n@media (forced-colors: active) {\n  .vd-draggable,\n  .vd-draggable-item {\n    border: 2px solid ButtonText;\n  }\n\n  .vd-draggable.is-dragging,\n  .vd-draggable-item.is-dragging {\n    border-color: Highlight;\n    outline: 2px solid Highlight;\n  }\n\n  .vd-drop-zone {\n    border: 2px dashed ButtonText;\n  }\n\n  .vd-drop-zone.is-drag-over {\n    border-color: Highlight;\n    border-style: solid;\n  }\n\n  .vd-draggable:focus-visible,\n  .vd-draggable-item:focus-visible {\n    outline: 2px solid Highlight;\n  }\n}\n\n/**\n * Vanduo Framework - Flow (Carousel/Slider)\n * Content carousel with slide/fade transitions, touch support\n * Primary: .vd-flow | Alias: .vd-carousel\n */\n\n:root {\n  /* Flow Dimensions */\n  --vd-flow-height: auto;\n  --vd-flow-min-height: 13rem;          /* 208px - fib */\n\n  /* Flow Spacing (Fibonacci) */\n  --vd-flow-padding: 0;\n  --vd-flow-gap: 0;\n  --vd-flow-indicator-size: 0.5rem;     /* 8px - fib */\n  --vd-flow-indicator-gap: 0.5rem;      /* 8px - fib */\n  --vd-flow-control-size: 2.5rem;       /* 40px */\n  --vd-flow-control-offset: 0.8125rem;  /* 13px - fib */\n\n  /* Flow Colors */\n  --vd-flow-bg: var(--vd-bg-primary, #fff);\n  --vd-flow-indicator-bg: rgba(255, 255, 255, 0.5);\n  --vd-flow-indicator-active-bg: #fff;\n  --vd-flow-control-bg: rgba(0, 0, 0, 0.3);\n  --vd-flow-control-hover-bg: rgba(0, 0, 0, 0.5);\n  --vd-flow-control-color: #fff;\n\n  /* Flow Transitions */\n  --vd-flow-transition-duration: 0.5s;\n  --vd-flow-transition-timing: cubic-bezier(0.4, 0, 0.2, 1);\n\n  /* Flow Border */\n  --vd-flow-border-radius: var(--vd-border-radius, 0.5rem);\n\n  /* Flow Z-index */\n  --vd-flow-z-controls: 10;\n  --vd-flow-z-indicators: 10;\n}\n\n/* Dark Theme */\n[data-theme=\"dark\"] {\n  --vd-flow-bg: var(--vd-bg-primary, #1a1a2e);\n  --vd-flow-control-bg: rgba(255, 255, 255, 0.2);\n  --vd-flow-control-hover-bg: rgba(255, 255, 255, 0.35);\n}\n\n@media (prefers-color-scheme: dark) {\n  :root:not([data-theme]) {\n    --vd-flow-bg: var(--vd-bg-primary, #1a1a2e);\n    --vd-flow-control-bg: rgba(255, 255, 255, 0.2);\n    --vd-flow-control-hover-bg: rgba(255, 255, 255, 0.35);\n  }\n}\n\n/* ========== Base ========== */\n\n.vd-flow,\n.vd-carousel {\n  position: relative;\n  overflow: hidden;\n  width: 100%;\n  min-height: var(--vd-flow-min-height);\n  height: var(--vd-flow-height);\n  background-color: var(--vd-flow-bg);\n  border-radius: var(--vd-flow-border-radius);\n}\n\n/* ========== Track ========== */\n\n.vd-flow-track {\n  display: flex;\n  width: 100%;\n  height: 100%;\n  transition: transform var(--vd-flow-transition-duration) var(--vd-flow-transition-timing);\n  will-change: transform;\n}\n\n.vd-flow.is-dragging .vd-flow-track {\n  transition: none;\n  cursor: grabbing;\n}\n\n/* ========== Slides ========== */\n\n.vd-flow-slide {\n  position: relative;\n  flex: 0 0 100%;\n  width: 100%;\n  min-height: var(--vd-flow-min-height);\n  overflow: hidden;\n}\n\n.vd-flow-slide img {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n\n/* Fade transition variant */\n.vd-flow-fade .vd-flow-track {\n  transition: none;\n}\n\n.vd-flow-fade .vd-flow-slide {\n  position: absolute;\n  top: 0;\n  left: 0;\n  opacity: 0;\n  transition: opacity var(--vd-flow-transition-duration) var(--vd-flow-transition-timing);\n  pointer-events: none;\n}\n\n.vd-flow-fade .vd-flow-slide.is-active {\n  opacity: 1;\n  pointer-events: auto;\n  position: relative;\n}\n\n/* ========== Controls ========== */\n\n.vd-flow-prev,\n.vd-flow-next {\n  position: absolute;\n  top: 50%;\n  transform: translateY(-50%);\n  z-index: var(--vd-flow-z-controls);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--vd-flow-control-size);\n  height: var(--vd-flow-control-size);\n  padding: 0;\n  border: none;\n  border-radius: 50%;\n  background: var(--vd-flow-control-bg);\n  color: var(--vd-flow-control-color);\n  font-size: 1.125rem;\n  cursor: pointer;\n  transition: background 0.2s ease, opacity 0.2s ease;\n  opacity: 0;\n}\n\n.vd-flow:hover .vd-flow-prev,\n.vd-flow:hover .vd-flow-next,\n.vd-flow:focus-within .vd-flow-prev,\n.vd-flow:focus-within .vd-flow-next {\n  opacity: 1;\n}\n\n.vd-flow-prev:hover,\n.vd-flow-next:hover {\n  background: var(--vd-flow-control-hover-bg);\n}\n\n.vd-flow-prev:focus-visible,\n.vd-flow-next:focus-visible {\n  outline: 2px solid var(--vd-flow-control-color);\n  outline-offset: 2px;\n}\n\n.vd-flow-prev {\n  left: var(--vd-flow-control-offset);\n}\n\n.vd-flow-next {\n  right: var(--vd-flow-control-offset);\n}\n\n/* ========== Indicators ========== */\n\n.vd-flow-indicators {\n  position: absolute;\n  bottom: 0.8125rem; /* 13px - fib */\n  left: 50%;\n  transform: translateX(-50%);\n  z-index: var(--vd-flow-z-indicators);\n  display: flex;\n  gap: var(--vd-flow-indicator-gap);\n  padding: 0.3125rem 0.5rem; /* 5px 8px - fib */\n  margin: 0;\n  list-style: none;\n  border-radius: 1rem;\n}\n\n.vd-flow-indicator {\n  width: var(--vd-flow-indicator-size);\n  height: var(--vd-flow-indicator-size);\n  padding: 0;\n  border: none;\n  border-radius: 50%;\n  background: var(--vd-flow-indicator-bg);\n  cursor: pointer;\n  transition: background 0.2s ease, transform 0.2s ease;\n}\n\n.vd-flow-indicator:hover {\n  background: rgba(255, 255, 255, 0.75);\n}\n\n.vd-flow-indicator.is-active {\n  background: var(--vd-flow-indicator-active-bg);\n  transform: scale(1.3);\n}\n\n.vd-flow-indicator:focus-visible {\n  outline: 2px solid var(--vd-flow-indicator-active-bg);\n  outline-offset: 2px;\n}\n\n/* ========== Slide Content Overlay ========== */\n\n.vd-flow-caption {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  padding: 1.3125rem 1.3125rem 2.625rem; /* 21px 21px 42px - fib */\n  background: linear-gradient(transparent, rgba(0, 0, 0, 0.6));\n  color: #fff;\n}\n\n.vd-flow-caption h3,\n.vd-flow-caption .vd-flow-title {\n  margin: 0 0 0.3125rem; /* 5px - fib */\n  font-size: 1.25rem;\n  font-weight: 600;\n}\n\n.vd-flow-caption p,\n.vd-flow-caption .vd-flow-description {\n  margin: 0;\n  font-size: 0.875rem;\n  opacity: 0.9;\n}\n\n/* ========== Size Variants ========== */\n\n.vd-flow-compact {\n  --vd-flow-min-height: 8rem;\n  --vd-flow-control-size: 2rem;\n}\n\n.vd-flow-lg {\n  --vd-flow-min-height: 21rem; /* 336px - fib×16 */\n  --vd-flow-control-size: 3rem;\n}\n\n.vd-flow-fullscreen {\n  --vd-flow-min-height: 100vh;\n  --vd-flow-border-radius: 0;\n}\n\n/* ========== Responsive ========== */\n\n@media (max-width: 768px) {\n  .vd-flow-prev,\n  .vd-flow-next {\n    opacity: 1;\n    --vd-flow-control-size: 2rem;\n  }\n\n  .vd-flow-caption {\n    padding: 0.8125rem 0.8125rem 2rem;\n  }\n}\n\n/**\n * Vanduo Framework - Bubble (Popover)\n * Click-triggered rich content popover\n * Primary: .vd-bubble | Alias: .vd-popover\n */\n\n:root {\n  /* Bubble Colors */\n  --vd-bubble-bg: var(--vd-card-bg, #fff);\n  --vd-bubble-text: var(--vd-text-primary, #212529);\n  --vd-bubble-border-color: var(--vd-border-color, #dee2e6);\n  --vd-bubble-shadow: 0 0.5rem 1.3125rem rgba(0, 0, 0, 0.12); /* 8px 21px - fib */\n\n  /* Bubble Spacing (Fibonacci) */\n  --vd-bubble-padding: 0.8125rem; /* 13px - fib */\n  --vd-bubble-header-padding: 0.5rem 0.8125rem; /* 8px 13px */\n  --vd-bubble-arrow-size: 8px; /* fib */\n\n  /* Bubble Sizing */\n  --vd-bubble-max-width: 21rem; /* 336px - fib×16 */\n  --vd-bubble-min-width: 8rem;\n  --vd-bubble-border-radius: var(--vd-border-radius, 0.5rem);\n\n  /* Bubble Z-index */\n  --vd-bubble-z-index: 1060;\n\n  /* Bubble Font */\n  --vd-bubble-font-size: var(--vd-font-size-sm, 0.875rem);\n}\n\n/* Dark Theme */\n[data-theme=\"dark\"] {\n  --vd-bubble-bg: var(--vd-card-bg, #2d2d44);\n  --vd-bubble-border-color: var(--vd-border-color, #3d3d5c);\n  --vd-bubble-shadow: 0 0.5rem 1.3125rem rgba(0, 0, 0, 0.3);\n}\n\n@media (prefers-color-scheme: dark) {\n  :root:not([data-theme]) {\n    --vd-bubble-bg: var(--vd-card-bg, #2d2d44);\n    --vd-bubble-border-color: var(--vd-border-color, #3d3d5c);\n    --vd-bubble-shadow: 0 0.5rem 1.3125rem rgba(0, 0, 0, 0.3);\n  }\n}\n\n/* ========== Base ========== */\n\n.vd-bubble-content,\n.vd-popover-content {\n  position: absolute;\n  z-index: var(--vd-bubble-z-index);\n  max-width: var(--vd-bubble-max-width);\n  min-width: var(--vd-bubble-min-width);\n  background: var(--vd-bubble-bg);\n  color: var(--vd-bubble-text);\n  border: 1px solid var(--vd-bubble-border-color);\n  border-radius: var(--vd-bubble-border-radius);\n  box-shadow: var(--vd-bubble-shadow);\n  font-size: var(--vd-bubble-font-size);\n  opacity: 0;\n  visibility: hidden;\n  transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;\n  transform: scale(0.95);\n  pointer-events: none;\n}\n\n.vd-bubble-content.is-visible,\n.vd-popover-content.is-visible {\n  opacity: 1;\n  visibility: visible;\n  transform: scale(1);\n  pointer-events: auto;\n}\n\n/* ========== Header ========== */\n\n.vd-bubble-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: var(--vd-bubble-header-padding);\n  border-bottom: 1px solid var(--vd-bubble-border-color);\n  font-weight: 600;\n}\n\n/* ========== Body ========== */\n\n.vd-bubble-body {\n  padding: var(--vd-bubble-padding);\n}\n\n/* ========== Close Button ========== */\n\n.vd-bubble-close {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 1.5rem;\n  height: 1.5rem;\n  padding: 0;\n  margin-left: 0.5rem;\n  border: none;\n  border-radius: 50%;\n  background: transparent;\n  color: var(--vd-bubble-text);\n  font-size: 1.125rem;\n  line-height: 1;\n  cursor: pointer;\n  opacity: 0.5;\n  transition: opacity 0.15s ease;\n}\n\n.vd-bubble-close:hover { opacity: 1; }\n\n/* ========== Arrow ========== */\n\n.vd-bubble-content::before,\n.vd-popover-content::before {\n  content: '';\n  position: absolute;\n  width: 0;\n  height: 0;\n  border: var(--vd-bubble-arrow-size) solid transparent;\n}\n\n/* Arrow: top placement (popover below trigger) */\n.vd-bubble-content[data-placement=\"bottom\"]::before {\n  bottom: 100%;\n  left: 50%;\n  transform: translateX(-50%);\n  border-bottom-color: var(--vd-bubble-border-color);\n}\n\n.vd-bubble-content[data-placement=\"top\"]::before {\n  top: 100%;\n  left: 50%;\n  transform: translateX(-50%);\n  border-top-color: var(--vd-bubble-border-color);\n}\n\n.vd-bubble-content[data-placement=\"left\"]::before {\n  left: 100%;\n  top: 50%;\n  transform: translateY(-50%);\n  border-left-color: var(--vd-bubble-border-color);\n}\n\n.vd-bubble-content[data-placement=\"right\"]::before {\n  right: 100%;\n  top: 50%;\n  transform: translateY(-50%);\n  border-right-color: var(--vd-bubble-border-color);\n}\n\n/* ========== Size Variants ========== */\n\n.vd-bubble-sm .vd-bubble-body {\n  --vd-bubble-padding: 0.5rem; /* 8px - fib */\n  --vd-bubble-font-size: var(--vd-font-size-xs, 0.75rem);\n}\n\n.vd-bubble-lg .vd-bubble-body {\n  --vd-bubble-padding: 1.3125rem; /* 21px - fib */\n  --vd-bubble-max-width: 34rem;\n}\n\n/**\n * Vanduo Framework - Waypoint (Scrollspy)\n * Scroll-position-aware navigation highlighting\n * Primary: .vd-waypoint | Alias: .vd-scrollspy\n */\n\n:root {\n  /* Waypoint active indicator */\n  --vd-waypoint-active-color: var(--vd-color-primary, #0d6efd);\n  --vd-waypoint-active-bg: transparent;\n  --vd-waypoint-active-border-width: 2px;\n  --vd-waypoint-transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;\n}\n\n[data-theme=\"dark\"] {\n  --vd-waypoint-active-color: var(--vd-color-primary-light, #6ea8fe);\n}\n\n@media (prefers-color-scheme: dark) {\n  :root:not([data-theme]) {\n    --vd-waypoint-active-color: var(--vd-color-primary-light, #6ea8fe);\n  }\n}\n\n/* ========== Nav Link Active State ========== */\n\n[data-vd-waypoint-nav] a.is-active,\n[data-vd-scrollspy-nav] a.is-active,\n.vd-waypoint-nav a.is-active {\n  color: var(--vd-waypoint-active-color);\n  font-weight: 600;\n  transition: var(--vd-waypoint-transition);\n}\n\n/* Sidebar variant: left border indicator */\n.vd-sidenav [data-vd-waypoint-nav] a.is-active,\n.vd-waypoint-nav.vd-waypoint-border a.is-active {\n  border-left: var(--vd-waypoint-active-border-width) solid var(--vd-waypoint-active-color);\n  padding-left: calc(0.8125rem - var(--vd-waypoint-active-border-width)); /* 13px - border */\n}\n\n/* Pill variant */\n.vd-waypoint-nav.vd-waypoint-pill a.is-active {\n  background-color: var(--vd-waypoint-active-color);\n  color: #fff;\n  border-radius: 1rem;\n  padding: 0.25rem 0.8125rem; /* 4px 13px */\n}\n\n/* Underline variant (for horizontal navs) */\n.vd-waypoint-nav.vd-waypoint-underline a.is-active {\n  border-bottom: var(--vd-waypoint-active-border-width) solid var(--vd-waypoint-active-color);\n}\n\n/* ========== Smooth Scroll Target ========== */\n\n[data-vd-waypoint-section] {\n  scroll-margin-top: 5rem; /* offset for fixed headers */\n}\n\n/**\n * Vanduo Framework - Ripple (Waves Effect)\n * Click-position-based expanding circle animation\n */\n\n:root {\n  --vd-ripple-color: rgba(255, 255, 255, 0.35);\n  --vd-ripple-duration: 0.6s;\n  --vd-ripple-timing: cubic-bezier(0, 0, 0.2, 1);\n}\n\n[data-theme=\"dark\"] {\n  --vd-ripple-color: rgba(255, 255, 255, 0.2);\n}\n\n@media (prefers-color-scheme: dark) {\n  :root:not([data-theme]) {\n    --vd-ripple-color: rgba(255, 255, 255, 0.2);\n  }\n}\n\n/* ========== Base ========== */\n\n.vd-ripple,\n[data-vd-ripple] {\n  position: relative;\n  overflow: hidden;\n  -webkit-tap-highlight-color: transparent;\n}\n\n/* The animated circle */\n.vd-ripple-wave {\n  position: absolute;\n  border-radius: 50%;\n  background: var(--vd-ripple-color);\n  transform: scale(0);\n  animation: vd-ripple-expand var(--vd-ripple-duration) var(--vd-ripple-timing) forwards;\n  pointer-events: none;\n}\n\n@keyframes vd-ripple-expand {\n  to {\n    transform: scale(4);\n    opacity: 0;\n  }\n}\n\n/* ========== Color Variants ========== */\n\n.vd-ripple-dark,\n[data-vd-ripple=\"dark\"] {\n  --vd-ripple-color: rgba(0, 0, 0, 0.15);\n}\n\n.vd-ripple-primary,\n[data-vd-ripple=\"primary\"] {\n  --vd-ripple-color: rgba(13, 110, 253, 0.3);\n}\n\n.vd-ripple-light,\n[data-vd-ripple=\"light\"] {\n  --vd-ripple-color: rgba(255, 255, 255, 0.5);\n}\n\n/**\n * Vanduo Framework - FAB (Floating Action Button)\n * Elevated circular action button with optional fixed positioning and speed-dial menu\n */\n\n:root {\n  /* FAB Dimensions (Fibonacci) */\n  --vd-fab-size: 3.5rem;           /* 56px */\n  --vd-fab-size-sm: 2.5rem;        /* 40px */\n  --vd-fab-size-lg: 4.5rem;        /* 72px */\n  --vd-fab-icon-size: 1.5rem;\n\n  /* FAB Colors */\n  --vd-fab-bg: var(--vd-color-primary, #0d6efd);\n  --vd-fab-color: #fff;\n  --vd-fab-hover-bg: var(--vd-color-primary-dark, #0b5ed7);\n  --vd-fab-shadow: 0 3px 8px rgba(0, 0, 0, 0.25), 0 1px 3px rgba(0, 0, 0, 0.15);\n  --vd-fab-hover-shadow: 0 5px 13px rgba(0, 0, 0, 0.3), 0 2px 5px rgba(0, 0, 0, 0.2);\n\n  /* FAB Position */\n  --vd-fab-offset: 1.3125rem;      /* 21px - fib */\n  --vd-fab-z-index: 1030;\n\n  /* FAB Menu */\n  --vd-fab-menu-gap: 0.8125rem;    /* 13px - fib */\n}\n\n[data-theme=\"dark\"] {\n  --vd-fab-shadow: 0 3px 8px rgba(0, 0, 0, 0.5), 0 1px 3px rgba(0, 0, 0, 0.3);\n  --vd-fab-hover-shadow: 0 5px 13px rgba(0, 0, 0, 0.6), 0 2px 5px rgba(0, 0, 0, 0.35);\n}\n\n@media (prefers-color-scheme: dark) {\n  :root:not([data-theme]) {\n    --vd-fab-shadow: 0 3px 8px rgba(0, 0, 0, 0.5), 0 1px 3px rgba(0, 0, 0, 0.3);\n    --vd-fab-hover-shadow: 0 5px 13px rgba(0, 0, 0, 0.6), 0 2px 5px rgba(0, 0, 0, 0.35);\n  }\n}\n\n/* ========== Base ========== */\n\n.vd-fab {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--vd-fab-size);\n  height: var(--vd-fab-size);\n  padding: 0;\n  border: none;\n  border-radius: 50%;\n  background: var(--vd-fab-bg);\n  color: var(--vd-fab-color);\n  font-size: var(--vd-fab-icon-size);\n  box-shadow: var(--vd-fab-shadow);\n  cursor: pointer;\n  transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;\n}\n\n.vd-fab-glass {\n  background: var(--vd-glass-bg-light);\n  color: var(--vd-text-primary);\n  border: 1px solid var(--vd-glass-border-light);\n  box-shadow: var(--vd-glass-shadow);\n  backdrop-filter: blur(var(--vd-glass-blur)) saturate(var(--vd-glass-saturate));\n  -webkit-backdrop-filter: blur(var(--vd-glass-blur)) saturate(var(--vd-glass-saturate));\n}\n\n.vd-fab:hover {\n  background: var(--vd-fab-hover-bg);\n  box-shadow: var(--vd-fab-hover-shadow);\n  transform: scale(1.05);\n}\n\n.vd-fab-glass:hover {\n  background: var(--vd-glass-bg-light);\n  box-shadow: var(--vd-glass-float-shadow, var(--vd-glass-shadow));\n}\n\n.vd-fab:active {\n  transform: scale(0.95);\n}\n\n.vd-fab:focus-visible {\n  outline: 2px solid var(--vd-fab-bg);\n  outline-offset: 3px;\n}\n\n/* ========== Sizes ========== */\n\n.vd-fab-sm {\n  width: var(--vd-fab-size-sm);\n  height: var(--vd-fab-size-sm);\n  font-size: 1.125rem;\n}\n\n.vd-fab-lg {\n  width: var(--vd-fab-size-lg);\n  height: var(--vd-fab-size-lg);\n  font-size: 2rem;\n}\n\n/* ========== Extended (with label) ========== */\n\n.vd-fab-extended {\n  border-radius: 1.75rem;\n  width: auto;\n  padding: 0 1.3125rem; /* 21px - fib */\n  gap: 0.5rem;\n}\n\n/* ========== Fixed Positioning ========== */\n\n.vd-fab-fixed {\n  position: fixed;\n  bottom: var(--vd-fab-offset);\n  right: var(--vd-fab-offset);\n  z-index: var(--vd-fab-z-index);\n}\n\n/* ========== Position Variants (all include position: fixed) ========== */\n\n.vd-fab-bottom-left {\n  position: fixed;\n  z-index: var(--vd-fab-z-index);\n  bottom: var(--vd-fab-offset);\n  right: auto;\n  left: var(--vd-fab-offset);\n}\n\n.vd-fab-top-right {\n  position: fixed;\n  z-index: var(--vd-fab-z-index);\n  bottom: auto;\n  right: var(--vd-fab-offset);\n  top: var(--vd-fab-offset);\n}\n\n.vd-fab-top-left {\n  position: fixed;\n  z-index: var(--vd-fab-z-index);\n  bottom: auto;\n  right: auto;\n  top: var(--vd-fab-offset);\n  left: var(--vd-fab-offset);\n}\n\n.vd-fab-center {\n  position: fixed;\n  z-index: var(--vd-fab-z-index);\n  bottom: var(--vd-fab-offset);\n  right: 50%;\n  transform: translateX(50%);\n}\n\n.vd-fab-center:hover {\n  transform: translateX(50%) scale(1.05);\n}\n\n/* ========== Color Variants ========== */\n\n.vd-fab-secondary {\n  --vd-fab-bg: var(--vd-color-gray-600, #6c757d);\n  --vd-fab-hover-bg: var(--vd-color-gray-700, #5c636a);\n}\n\n.vd-fab-success {\n  --vd-fab-bg: var(--vd-color-success, #198754);\n  --vd-fab-hover-bg: #157347;\n}\n\n.vd-fab-danger {\n  --vd-fab-bg: var(--vd-color-danger, #dc3545);\n  --vd-fab-hover-bg: #bb2d3b;\n}\n\n/* ========== Speed Dial Menu ========== */\n\n.vd-fab-menu {\n  position: relative;\n  display: inline-flex;\n  flex-direction: column-reverse;\n  align-items: center;\n  gap: var(--vd-fab-menu-gap);\n}\n\n.vd-fab-menu .vd-fab-actions {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: var(--vd-fab-menu-gap);\n  opacity: 0;\n  visibility: hidden;\n  transform: translateY(0.5rem);\n  transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;\n}\n\n.vd-fab-menu.is-open .vd-fab-actions {\n  opacity: 1;\n  visibility: visible;\n  transform: translateY(0);\n}\n\n.vd-fab-menu.vd-fab-fixed {\n  position: fixed;\n  bottom: var(--vd-fab-offset);\n  right: var(--vd-fab-offset);\n  z-index: var(--vd-fab-z-index);\n}\n\n.vd-fab-menu .vd-fab-action {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--vd-fab-size-sm);\n  height: var(--vd-fab-size-sm);\n  border: none;\n  border-radius: 50%;\n  background: var(--vd-fab-bg);\n  color: var(--vd-fab-color);\n  font-size: 1rem;\n  box-shadow: var(--vd-fab-shadow);\n  cursor: pointer;\n  transition: background 0.15s ease, transform 0.15s ease;\n}\n\n.vd-fab-menu .vd-fab-action:hover {\n  transform: scale(1.1);\n  background: var(--vd-fab-hover-bg);\n}\n\n/* Staggered entrance for action buttons */\n.vd-fab-menu.is-open .vd-fab-actions .vd-fab:nth-child(1),\n.vd-fab-menu.is-open .vd-fab-action:nth-child(1) { transition-delay: 0s; }\n.vd-fab-menu.is-open .vd-fab-actions .vd-fab:nth-child(2),\n.vd-fab-menu.is-open .vd-fab-action:nth-child(2) { transition-delay: 0.05s; }\n.vd-fab-menu.is-open .vd-fab-actions .vd-fab:nth-child(3),\n.vd-fab-menu.is-open .vd-fab-action:nth-child(3) { transition-delay: 0.1s; }\n.vd-fab-menu.is-open .vd-fab-actions .vd-fab:nth-child(4),\n.vd-fab-menu.is-open .vd-fab-action:nth-child(4) { transition-delay: 0.15s; }\n\n/**\n * Vanduo Framework - Affix (Sticky)\n * Scroll-aware sticky positioning with is-stuck state\n * Primary: .vd-affix | Alias: .vd-sticky\n */\n\n:root {\n  --vd-affix-top-offset: 0;\n  --vd-affix-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n  --vd-affix-transition: box-shadow 0.2s ease, background-color 0.2s ease;\n  --vd-affix-z-index: 1020;\n}\n\n[data-theme=\"dark\"] {\n  --vd-affix-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);\n}\n\n@media (prefers-color-scheme: dark) {\n  :root:not([data-theme]) {\n    --vd-affix-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);\n  }\n}\n\n/* ========== Base ========== */\n\n.vd-affix,\n.vd-sticky,\n[data-vd-affix] {\n  position: sticky;\n  top: var(--vd-affix-top-offset);\n  transition: var(--vd-affix-transition);\n  z-index: calc(var(--vd-affix-z-index) - 1);\n}\n\n/* ========== Stuck State ========== */\n\n.vd-affix.is-stuck,\n.vd-sticky.is-stuck,\n[data-vd-affix].is-stuck {\n  z-index: var(--vd-affix-z-index);\n  box-shadow: var(--vd-affix-shadow);\n}\n\n/* ========== Variants ========== */\n\n.vd-affix-no-shadow.is-stuck {\n  box-shadow: none;\n}\n\n.vd-affix-bordered.is-stuck {\n  box-shadow: none;\n  border-bottom: 1px solid var(--vd-border-color, #dee2e6);\n}\n\n/**\n * Vanduo Framework - Suggest (Autocomplete)\n * Dropdown suggestion list for text inputs\n * Primary: .vd-suggest | Alias: .vd-autocomplete\n */\n\n:root {\n  /* Suggest Colors */\n  --vd-suggest-bg: var(--vd-card-bg, #fff);\n  --vd-suggest-border-color: var(--vd-border-color, #dee2e6);\n  --vd-suggest-shadow: 0 0.25rem 0.8125rem rgba(0, 0, 0, 0.1); /* 4px 13px - fib */\n  --vd-suggest-item-hover-bg: var(--vd-bg-secondary, #f8f9fa);\n  --vd-suggest-item-active-bg: var(--vd-color-primary, #0d6efd);\n  --vd-suggest-item-active-color: #fff;\n  --vd-suggest-highlight-color: var(--vd-color-primary, #0d6efd);\n\n  /* Suggest Spacing (Fibonacci) */\n  --vd-suggest-padding: 0.3125rem 0; /* 5px - fib */\n  --vd-suggest-item-padding: 0.5rem 0.8125rem; /* 8px 13px - fib */\n  --vd-suggest-max-height: 15rem;\n  --vd-suggest-border-radius: var(--vd-border-radius, 0.5rem);\n\n  /* Suggest Z-index */\n  --vd-suggest-z-index: 1050;\n}\n\n[data-theme=\"dark\"] {\n  --vd-suggest-bg: var(--vd-card-bg, #2d2d44);\n  --vd-suggest-border-color: var(--vd-border-color, #3d3d5c);\n  --vd-suggest-item-hover-bg: var(--vd-bg-primary, #1a1a2e);\n  --vd-suggest-shadow: 0 0.25rem 0.8125rem rgba(0, 0, 0, 0.3);\n}\n\n@media (prefers-color-scheme: dark) {\n  :root:not([data-theme]) {\n    --vd-suggest-bg: var(--vd-card-bg, #2d2d44);\n    --vd-suggest-border-color: var(--vd-border-color, #3d3d5c);\n    --vd-suggest-item-hover-bg: var(--vd-bg-primary, #1a1a2e);\n    --vd-suggest-shadow: 0 0.25rem 0.8125rem rgba(0, 0, 0, 0.3);\n  }\n}\n\n/* ========== Wrapper ========== */\n\n.vd-suggest-wrapper,\n.vd-autocomplete-wrapper {\n  position: relative;\n  display: inline-block;\n  width: 100%;\n}\n\n/* ========== Dropdown List ========== */\n\n.vd-suggest-list {\n  position: absolute;\n  top: 100%;\n  left: 0;\n  right: 0;\n  z-index: var(--vd-suggest-z-index);\n  margin-top: 2px;\n  padding: var(--vd-suggest-padding);\n  max-height: var(--vd-suggest-max-height);\n  overflow-y: auto;\n  background: var(--vd-suggest-bg);\n  border: 1px solid var(--vd-suggest-border-color);\n  border-radius: var(--vd-suggest-border-radius);\n  box-shadow: var(--vd-suggest-shadow);\n  list-style: none;\n  display: none;\n}\n\n.vd-suggest-list.is-open {\n  display: block;\n}\n\n/* ========== Items ========== */\n\n.vd-suggest-item {\n  padding: var(--vd-suggest-item-padding);\n  cursor: pointer;\n  transition: background 0.15s ease;\n  font-size: var(--vd-font-size-base, 1rem);\n}\n\n.vd-suggest-item:hover,\n.vd-suggest-item.is-highlighted {\n  background: var(--vd-suggest-item-hover-bg);\n}\n\n.vd-suggest-item.is-active {\n  background: var(--vd-suggest-item-active-bg);\n  color: var(--vd-suggest-item-active-color);\n}\n\n/* Match highlight */\n.vd-suggest-match {\n  font-weight: 600;\n  color: var(--vd-suggest-highlight-color);\n}\n\n.vd-suggest-item.is-active .vd-suggest-match {\n  color: inherit;\n}\n\n/* ========== No Results ========== */\n\n.vd-suggest-empty {\n  padding: var(--vd-suggest-item-padding);\n  color: var(--vd-text-muted, #6c757d);\n  font-style: italic;\n}\n\n/* ========== Loading ========== */\n\n.vd-suggest-loading {\n  padding: var(--vd-suggest-item-padding);\n  text-align: center;\n  color: var(--vd-text-muted, #6c757d);\n}\n\n/**\n * Vanduo Framework - Datepicker\n * Calendar popup for date selection\n */\n\n:root {\n  /* Datepicker Colors */\n  --vd-dp-bg: var(--vd-card-bg, #fff);\n  --vd-dp-border-color: var(--vd-border-color, #dee2e6);\n  --vd-dp-shadow: 0 0.25rem 0.8125rem rgba(0, 0, 0, 0.12); /* 4px 13px fib */\n  --vd-dp-header-bg: var(--vd-color-primary, #0d6efd);\n  --vd-dp-header-color: #fff;\n  --vd-dp-day-hover-bg: var(--vd-bg-secondary, #f8f9fa);\n  --vd-dp-day-selected-bg: var(--vd-color-primary, #0d6efd);\n  --vd-dp-day-selected-color: #fff;\n  --vd-dp-day-today-color: var(--vd-color-primary, #0d6efd);\n  --vd-dp-day-outside-color: var(--vd-text-muted, #6c757d);\n  --vd-dp-day-disabled-color: var(--vd-text-disabled, #adb5bd);\n\n  /* Datepicker Spacing (Fibonacci) */\n  --vd-dp-padding: 0.5rem;        /* 8px - fib */\n  --vd-dp-cell-size: 2.25rem;     /* 36px */\n  --vd-dp-gap: 2px;\n  --vd-dp-border-radius: var(--vd-border-radius, 0.5rem);\n\n  /* Datepicker Z-index */\n  --vd-dp-z-index: 1055;\n}\n\n[data-theme=\"dark\"] {\n  --vd-dp-bg: var(--vd-card-bg, #2d2d44);\n  --vd-dp-border-color: var(--vd-border-color, #3d3d5c);\n  --vd-dp-day-hover-bg: var(--vd-bg-primary, #1a1a2e);\n  --vd-dp-shadow: 0 0.25rem 0.8125rem rgba(0, 0, 0, 0.3);\n}\n\n@media (prefers-color-scheme: dark) {\n  :root:not([data-theme]) {\n    --vd-dp-bg: var(--vd-card-bg, #2d2d44);\n    --vd-dp-border-color: var(--vd-border-color, #3d3d5c);\n    --vd-dp-day-hover-bg: var(--vd-bg-primary, #1a1a2e);\n    --vd-dp-shadow: 0 0.25rem 0.8125rem rgba(0, 0, 0, 0.3);\n  }\n}\n\n/* ========== Calendar Popup ========== */\n\n.vd-datepicker-popup {\n  position: fixed;\n  top: 0;\n  left: 0;\n  z-index: var(--vd-dp-z-index);\n  background: var(--vd-dp-bg);\n  border: 1px solid var(--vd-dp-border-color);\n  border-radius: var(--vd-dp-border-radius);\n  box-shadow: var(--vd-dp-shadow);\n  padding: var(--vd-dp-padding);\n  display: none;\n  min-width: 17rem;\n}\n\n.vd-datepicker-popup.is-open {\n  display: block;\n}\n\n/* ========== Header ========== */\n\n.vd-datepicker-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 0.3125rem; /* 5px - fib */\n  margin-bottom: 0.3125rem;\n}\n\n.vd-datepicker-title {\n  font-weight: 600;\n  font-size: var(--vd-font-size-base, 1rem);\n  cursor: pointer;\n}\n\n.vd-datepicker-title:hover {\n  color: var(--vd-dp-day-today-color);\n}\n\n.vd-datepicker-prev,\n.vd-datepicker-next {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 1.75rem;\n  height: 1.75rem;\n  padding: 0;\n  border: none;\n  border-radius: 50%;\n  background: transparent;\n  cursor: pointer;\n  font-size: 1rem;\n  color: var(--vd-text-primary, #212529);\n  transition: background 0.15s ease;\n}\n\n.vd-datepicker-prev:hover,\n.vd-datepicker-next:hover {\n  background: var(--vd-dp-day-hover-bg);\n}\n\n/* ========== Calendar grid (weekday row + week rows) ========== */\n\n.vd-datepicker-grid {\n  display: flex;\n  flex-direction: column;\n  gap: var(--vd-dp-gap);\n}\n\n/* ========== Weekday Headers ========== */\n\n.vd-datepicker-weekdays {\n  display: grid;\n  grid-template-columns: repeat(7, 1fr);\n  gap: var(--vd-dp-gap);\n  text-align: center;\n  font-size: 0.75rem;\n  font-weight: 600;\n  color: var(--vd-text-muted, #6c757d);\n  padding-bottom: 0.25rem;\n}\n\n/* ========== Days Grid ========== */\n\n.vd-datepicker-days,\n.vd-datepicker-row {\n  display: grid;\n  grid-template-columns: repeat(7, 1fr);\n  gap: var(--vd-dp-gap);\n}\n\n.vd-datepicker-day {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--vd-dp-cell-size);\n  height: var(--vd-dp-cell-size);\n  border: none;\n  border-radius: 50%;\n  background: transparent;\n  cursor: pointer;\n  font-size: 0.875rem;\n  transition: background 0.15s ease, color 0.15s ease;\n  padding: 0;\n}\n\n.vd-datepicker-day:hover {\n  background: var(--vd-dp-day-hover-bg);\n}\n\n.vd-datepicker-day.is-today {\n  color: var(--vd-dp-day-today-color);\n  font-weight: 700;\n}\n\n.vd-datepicker-day.is-selected {\n  background: var(--vd-dp-day-selected-bg);\n  color: var(--vd-dp-day-selected-color);\n  font-weight: 600;\n}\n\n.vd-datepicker-day.is-outside {\n  color: var(--vd-dp-day-outside-color);\n}\n\n.vd-datepicker-day.is-disabled {\n  color: var(--vd-dp-day-disabled-color);\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n/* ========== Range ========== */\n\n.vd-datepicker-day.is-range-start {\n  border-radius: 50% 0 0 50%;\n  background: var(--vd-dp-day-selected-bg);\n  color: var(--vd-dp-day-selected-color);\n}\n\n.vd-datepicker-day.is-range-end {\n  border-radius: 0 50% 50% 0;\n  background: var(--vd-dp-day-selected-bg);\n  color: var(--vd-dp-day-selected-color);\n}\n\n.vd-datepicker-day.is-in-range {\n  background: rgba(13, 110, 253, 0.1);\n  border-radius: 0;\n}\n\n/* ========== Month/Year Picker ========== */\n\n.vd-datepicker-months,\n.vd-datepicker-years {\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  gap: 0.25rem;\n  padding: 0.25rem;\n}\n\n.vd-datepicker-month-btn,\n.vd-datepicker-year-btn {\n  padding: 0.5rem;\n  border: none;\n  border-radius: var(--vd-dp-border-radius);\n  background: transparent;\n  cursor: pointer;\n  text-align: center;\n  transition: background 0.15s ease;\n}\n\n.vd-datepicker-month-btn:hover,\n.vd-datepicker-year-btn:hover {\n  background: var(--vd-dp-day-hover-bg);\n}\n\n.vd-datepicker-month-btn.is-selected,\n.vd-datepicker-year-btn.is-selected {\n  background: var(--vd-dp-day-selected-bg);\n  color: var(--vd-dp-day-selected-color);\n}\n\n/**\n * Vanduo Framework - Timepicker\n * Dropdown time selection with 12h/24h format\n */\n\n:root {\n  --vd-tp-bg: var(--vd-card-bg, #fff);\n  --vd-tp-border-color: var(--vd-border-color, #dee2e6);\n  --vd-tp-shadow: 0 0.25rem 0.8125rem rgba(0, 0, 0, 0.12);\n  --vd-tp-item-hover-bg: var(--vd-bg-secondary, #f8f9fa);\n  --vd-tp-item-selected-bg: var(--vd-color-primary, #0d6efd);\n  --vd-tp-item-selected-color: #fff;\n  --vd-tp-padding: 0.5rem;\n  --vd-tp-item-padding: 0.3125rem 0.8125rem; /* 5px 13px - fib */\n  --vd-tp-max-height: 15rem;\n  --vd-tp-border-radius: var(--vd-border-radius, 0.5rem);\n  --vd-tp-z-index: 1055;\n}\n\n[data-theme=\"dark\"] {\n  --vd-tp-bg: var(--vd-card-bg, #2d2d44);\n  --vd-tp-border-color: var(--vd-border-color, #3d3d5c);\n  --vd-tp-item-hover-bg: var(--vd-bg-primary, #1a1a2e);\n  --vd-tp-shadow: 0 0.25rem 0.8125rem rgba(0, 0, 0, 0.3);\n}\n\n@media (prefers-color-scheme: dark) {\n  :root:not([data-theme]) {\n    --vd-tp-bg: var(--vd-card-bg, #2d2d44);\n    --vd-tp-border-color: var(--vd-border-color, #3d3d5c);\n    --vd-tp-item-hover-bg: var(--vd-bg-primary, #1a1a2e);\n    --vd-tp-shadow: 0 0.25rem 0.8125rem rgba(0, 0, 0, 0.3);\n  }\n}\n\n/* ========== Popup ========== */\n\n.vd-timepicker-popup {\n  position: fixed;\n  top: 0;\n  left: 0;\n  z-index: var(--vd-tp-z-index);\n  background: var(--vd-tp-bg);\n  border: 1px solid var(--vd-tp-border-color);\n  border-radius: var(--vd-tp-border-radius);\n  box-shadow: var(--vd-tp-shadow);\n  max-height: var(--vd-tp-max-height);\n  overflow-y: auto;\n  display: none;\n  min-width: 8rem;\n}\n\n.vd-timepicker-popup.is-open {\n  display: block;\n}\n\n/* ========== Time Items ========== */\n\n.vd-timepicker-item {\n  padding: var(--vd-tp-item-padding);\n  cursor: pointer;\n  font-size: 0.875rem;\n  text-align: center;\n  transition: background 0.15s ease;\n  font-variant-numeric: tabular-nums;\n}\n\n.vd-timepicker-item:hover {\n  background: var(--vd-tp-item-hover-bg);\n}\n\n.vd-timepicker-item.is-selected {\n  background: var(--vd-tp-item-selected-bg);\n  color: var(--vd-tp-item-selected-color);\n  font-weight: 600;\n}\n\n.vd-timepicker-item.is-disabled {\n  opacity: 0.4;\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n/**\n * Vanduo Framework - Stepper\n * Multi-step progress indicator with states\n */\n\n:root {\n  /* Stepper Colors */\n  --vd-stepper-active-color: var(--vd-color-primary, #0d6efd);\n  --vd-stepper-completed-color: var(--vd-color-success, #198754);\n  --vd-stepper-error-color: var(--vd-color-danger, #dc3545);\n  --vd-stepper-pending-color: var(--vd-color-gray-400, #ced4da);\n  --vd-stepper-text-color: var(--vd-text-primary, #212529);\n  --vd-stepper-line-color: var(--vd-border-color, #dee2e6);\n\n  /* Stepper Dimensions (Fibonacci) */\n  --vd-stepper-circle-size: 2.125rem; /* 34px ~ fib */\n  --vd-stepper-line-width: 2px;\n  --vd-stepper-gap: 0.5rem;          /* 8px - fib */\n  --vd-stepper-connector-gap: 0.8125rem; /* 13px - fib */\n}\n\n[data-theme=\"dark\"] {\n  --vd-stepper-pending-color: var(--vd-color-gray-600, #6c757d);\n  --vd-stepper-line-color: var(--vd-color-gray-600, #6c757d);\n}\n\n@media (prefers-color-scheme: dark) {\n  :root:not([data-theme]) {\n    --vd-stepper-pending-color: var(--vd-color-gray-600, #6c757d);\n    --vd-stepper-line-color: var(--vd-color-gray-600, #6c757d);\n  }\n}\n\n/* ========== Horizontal (default) ========== */\n\n.vd-stepper {\n  display: flex;\n  align-items: flex-start;\n  width: 100%;\n  counter-reset: step;\n}\n\n.vd-stepper-item {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  flex: 1;\n  position: relative;\n  text-align: center;\n}\n\n/* Connector line */\n.vd-stepper-item:not(:last-child)::after {\n  content: '';\n  position: absolute;\n  top: calc(var(--vd-stepper-circle-size) / 2);\n  left: calc(50% + var(--vd-stepper-circle-size) / 2 + var(--vd-stepper-connector-gap));\n  right: calc(-50% + var(--vd-stepper-circle-size) / 2 + var(--vd-stepper-connector-gap));\n  height: var(--vd-stepper-line-width);\n  background: var(--vd-stepper-line-color);\n  z-index: 0;\n}\n\n/* Circle indicator */\n.vd-stepper-circle {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--vd-stepper-circle-size);\n  height: var(--vd-stepper-circle-size);\n  border-radius: 50%;\n  border: var(--vd-stepper-line-width) solid var(--vd-stepper-pending-color);\n  background: var(--vd-bg-primary, #fff);\n  font-weight: 600;\n  font-size: 0.875rem;\n  z-index: 1;\n  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;\n  counter-increment: step;\n}\n\n.vd-stepper-label {\n  margin-top: var(--vd-stepper-gap);\n  font-size: 0.8125rem;\n  font-weight: 500;\n  color: var(--vd-text-muted, #6c757d);\n}\n\n.vd-stepper-description {\n  font-size: 0.75rem;\n  color: var(--vd-text-muted, #6c757d);\n  margin-top: 0.125rem;\n}\n\n/* ========== States ========== */\n\n.vd-stepper-item.is-active .vd-stepper-circle {\n  border-color: var(--vd-stepper-active-color);\n  background: var(--vd-stepper-active-color);\n  color: #fff;\n}\n\n.vd-stepper-item.is-active .vd-stepper-label {\n  color: var(--vd-stepper-active-color);\n  font-weight: 600;\n}\n\n.vd-stepper-item.is-completed .vd-stepper-circle {\n  border-color: var(--vd-stepper-completed-color);\n  background: var(--vd-stepper-completed-color);\n  color: #fff;\n}\n\n.vd-stepper-item.is-completed::after {\n  background: var(--vd-stepper-completed-color);\n}\n\n.vd-stepper-item.is-completed .vd-stepper-label {\n  color: var(--vd-stepper-text-color);\n}\n\n.vd-stepper-item.is-error .vd-stepper-circle {\n  border-color: var(--vd-stepper-error-color);\n  background: var(--vd-stepper-error-color);\n  color: #fff;\n}\n\n.vd-stepper-item.is-error .vd-stepper-label {\n  color: var(--vd-stepper-error-color);\n}\n\n/* ========== Vertical ========== */\n\n.vd-stepper-vertical {\n  flex-direction: column;\n  align-items: flex-start;\n}\n\n.vd-stepper-vertical .vd-stepper-item {\n  flex-direction: row;\n  align-items: flex-start;\n  flex: none;\n  text-align: left;\n  padding-bottom: 1.3125rem; /* 21px - fib */\n}\n\n.vd-stepper-vertical .vd-stepper-item:not(:last-child)::after {\n  top: calc(var(--vd-stepper-circle-size) + var(--vd-stepper-connector-gap));\n  left: calc(var(--vd-stepper-circle-size) / 2);\n  right: auto;\n  bottom: 0;\n  width: var(--vd-stepper-line-width);\n  height: auto;\n}\n\n.vd-stepper-vertical .vd-stepper-label,\n.vd-stepper-vertical .vd-stepper-description {\n  margin-top: 0;\n  margin-left: 0.8125rem; /* 13px - fib */\n}\n\n.vd-stepper-vertical .vd-stepper-content {\n  display: flex;\n  flex-direction: column;\n  margin-left: 0.8125rem;\n}\n\n/* ========== Clickable ========== */\n\n.vd-stepper-clickable .vd-stepper-item {\n  cursor: pointer;\n}\n\n.vd-stepper-clickable .vd-stepper-circle:hover {\n  transform: scale(1.1);\n  transition: transform 0.15s ease;\n}\n\n/**\n * Vanduo Framework - Timeline\n * CSS-only vertical timeline layout\n */\n\n:root {\n  /* Timeline Colors */\n  --vd-timeline-line-color: var(--vd-border-color, #dee2e6);\n  --vd-timeline-marker-bg: var(--vd-color-primary, #0d6efd);\n  --vd-timeline-marker-color: #fff;\n  --vd-timeline-content-bg: var(--vd-card-bg, #fff);\n  --vd-timeline-content-border: var(--vd-border-color, #dee2e6);\n\n  /* Timeline Dimensions (Fibonacci) */\n  --vd-timeline-line-width: 2px;\n  --vd-timeline-marker-size: 0.8125rem; /* 13px - fib */\n  --vd-timeline-marker-size-lg: 2.125rem; /* 34px ~ fib */\n  --vd-timeline-spacing: 1.3125rem;  /* 21px - fib */\n  --vd-timeline-content-padding: 0.8125rem; /* 13px - fib */\n  --vd-timeline-border-radius: var(--vd-border-radius, 0.5rem);\n}\n\n[data-theme=\"dark\"] {\n  --vd-timeline-line-color: var(--vd-color-gray-600, #6c757d);\n  --vd-timeline-content-bg: var(--vd-card-bg, #2d2d44);\n  --vd-timeline-content-border: var(--vd-border-color, #3d3d5c);\n}\n\n@media (prefers-color-scheme: dark) {\n  :root:not([data-theme]) {\n    --vd-timeline-line-color: var(--vd-color-gray-600, #6c757d);\n    --vd-timeline-content-bg: var(--vd-card-bg, #2d2d44);\n    --vd-timeline-content-border: var(--vd-border-color, #3d3d5c);\n  }\n}\n\n/* ========== Base (Vertical Left) ========== */\n\n.vd-timeline {\n  position: relative;\n  padding-left: calc(var(--vd-timeline-marker-size) / 2 + var(--vd-timeline-spacing));\n  list-style: none;\n  margin: 0;\n}\n\n/* Vertical line */\n.vd-timeline::before {\n  content: '';\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: calc(var(--vd-timeline-marker-size) / 2 - var(--vd-timeline-line-width) / 2);\n  width: var(--vd-timeline-line-width);\n  background: var(--vd-timeline-line-color);\n}\n\n/* ========== Item ========== */\n\n.vd-timeline-item {\n  position: relative;\n  padding-bottom: var(--vd-timeline-spacing);\n}\n\n.vd-timeline-item:last-child {\n  padding-bottom: 0;\n}\n\n/* ========== Marker ========== */\n\n.vd-timeline-marker {\n  position: absolute;\n  left: calc(-1 * var(--vd-timeline-spacing) - var(--vd-timeline-marker-size) / 2);\n  top: 0.25rem;\n  width: var(--vd-timeline-marker-size);\n  height: var(--vd-timeline-marker-size);\n  border-radius: 50%;\n  background: var(--vd-timeline-marker-bg);\n  border: 2px solid var(--vd-timeline-content-bg);\n  box-shadow: 0 0 0 2px var(--vd-timeline-marker-bg);\n}\n\n/* Large marker with icon/text */\n.vd-timeline-marker-lg {\n  width: var(--vd-timeline-marker-size-lg);\n  height: var(--vd-timeline-marker-size-lg);\n  left: calc(-1 * var(--vd-timeline-spacing) - var(--vd-timeline-marker-size-lg) / 2);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--vd-timeline-marker-color);\n  font-size: 0.875rem;\n}\n\n/* ========== Content ========== */\n\n.vd-timeline-content {\n  background: var(--vd-timeline-content-bg);\n  border: 1px solid var(--vd-timeline-content-border);\n  border-radius: var(--vd-timeline-border-radius);\n  padding: var(--vd-timeline-content-padding);\n}\n\n.vd-timeline-title {\n  margin: 0 0 0.3125rem; /* 5px - fib */\n  font-weight: 600;\n  font-size: 1rem;\n}\n\n.vd-timeline-date {\n  font-size: 0.75rem;\n  color: var(--vd-text-muted, #6c757d);\n  margin-bottom: 0.3125rem;\n}\n\n.vd-timeline-text {\n  margin: 0;\n  font-size: 0.875rem;\n}\n\n/* ========== Color Variants ========== */\n\n.vd-timeline-item.vd-timeline-success .vd-timeline-marker {\n  background: var(--vd-color-success, #198754);\n  box-shadow: 0 0 0 2px var(--vd-color-success, #198754);\n}\n\n.vd-timeline-item.vd-timeline-warning .vd-timeline-marker {\n  background: var(--vd-color-warning, #ffc107);\n  box-shadow: 0 0 0 2px var(--vd-color-warning, #ffc107);\n}\n\n.vd-timeline-item.vd-timeline-danger .vd-timeline-marker {\n  background: var(--vd-color-danger, #dc3545);\n  box-shadow: 0 0 0 2px var(--vd-color-danger, #dc3545);\n}\n\n/* ========== Alternating Mode ========== */\n\n.vd-timeline-alternating {\n  padding-left: 0;\n}\n\n.vd-timeline-alternating::before {\n  left: 50%;\n  transform: translateX(-50%);\n}\n\n.vd-timeline-alternating .vd-timeline-item {\n  width: 50%;\n  padding-right: var(--vd-timeline-spacing);\n  padding-left: 0;\n}\n\n.vd-timeline-alternating .vd-timeline-item:nth-child(odd) {\n  margin-left: 0;\n  text-align: right;\n}\n\n.vd-timeline-alternating .vd-timeline-item:nth-child(odd) .vd-timeline-marker {\n  left: auto;\n  right: calc(-1 * var(--vd-timeline-marker-size) / 2 - 1px);\n}\n\n.vd-timeline-alternating .vd-timeline-item:nth-child(even) {\n  margin-left: 50%;\n  padding-left: var(--vd-timeline-spacing);\n  padding-right: 0;\n}\n\n.vd-timeline-alternating .vd-timeline-item:nth-child(even) .vd-timeline-marker {\n  left: calc(-1 * var(--vd-timeline-marker-size) / 2 - 1px);\n}\n\n/* ========== Responsive ========== */\n\n@media (max-width: 768px) {\n  .vd-timeline-alternating {\n    padding-left: calc(var(--vd-timeline-marker-size) / 2 + var(--vd-timeline-spacing));\n  }\n\n  .vd-timeline-alternating::before {\n    left: calc(var(--vd-timeline-marker-size) / 2 - var(--vd-timeline-line-width) / 2);\n    transform: none;\n  }\n\n  .vd-timeline-alternating .vd-timeline-item,\n  .vd-timeline-alternating .vd-timeline-item:nth-child(odd),\n  .vd-timeline-alternating .vd-timeline-item:nth-child(even) {\n    width: 100%;\n    margin-left: 0;\n    padding-left: 0;\n    padding-right: 0;\n    text-align: left;\n  }\n\n  .vd-timeline-alternating .vd-timeline-item:nth-child(odd) .vd-timeline-marker,\n  .vd-timeline-alternating .vd-timeline-item:nth-child(even) .vd-timeline-marker {\n    left: calc(-1 * var(--vd-timeline-spacing) - var(--vd-timeline-marker-size) / 2);\n    right: auto;\n  }\n}\n\n/* ========== Animated reveal (opt-in) ========== */\n\n.vd-timeline-animated .vd-timeline-item {\n  opacity: 0;\n  transform: translateY(12px);\n  transition:\n    opacity 0.55s ease,\n    transform 0.55s cubic-bezier(0.2, 0.8, 0.35, 1);\n  transition-delay: var(--vd-timeline-reveal-delay, 0s);\n}\n\n.vd-timeline-animated .vd-timeline-item .vd-timeline-marker {\n  transform: scale(0.4);\n  transform-origin: center center;\n  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);\n  transition-delay: calc(var(--vd-timeline-reveal-delay, 0s) + 0.12s);\n}\n\n.vd-timeline-animated .vd-timeline-item.is-revealed {\n  opacity: 1;\n  transform: none;\n}\n\n.vd-timeline-animated .vd-timeline-item.is-revealed .vd-timeline-marker {\n  transform: scale(1);\n}\n\n/* Alternating + animated: entrance from each side (desktop only; narrow uses base vertical slide) */\n@media (min-width: 769px) {\n  .vd-timeline-alternating.vd-timeline-animated .vd-timeline-item:nth-child(odd):not(.is-revealed) {\n    transform: translate(-12px, 12px);\n  }\n\n  .vd-timeline-alternating.vd-timeline-animated .vd-timeline-item:nth-child(even):not(.is-revealed) {\n    transform: translate(12px, 12px);\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .vd-timeline-animated .vd-timeline-item,\n  .vd-timeline-animated .vd-timeline-item .vd-timeline-marker {\n    opacity: 1;\n    transform: none;\n    transition: none;\n  }\n}\n\n/**\n * Vanduo Framework - Rating\n * Star/icon-based rating input with read-only mode\n */\n\n:root {\n  /* Rating Colors */\n  --vd-rating-active-color: #f59e0b;\n  --vd-rating-inactive-color: var(--vd-color-gray-300, #dee2e6);\n  --vd-rating-hover-color: #fbbf24;\n\n  /* Rating Dimensions (Fibonacci) */\n  --vd-rating-size: 1.3125rem;  /* 21px - fib */\n  --vd-rating-size-sm: 1rem;\n  --vd-rating-size-lg: 2.125rem; /* 34px ~ fib */\n  --vd-rating-gap: 0.125rem;     /* 2px */\n}\n\n[data-theme=\"dark\"] {\n  --vd-rating-inactive-color: var(--vd-color-gray-600, #6c757d);\n}\n\n@media (prefers-color-scheme: dark) {\n  :root:not([data-theme]) {\n    --vd-rating-inactive-color: var(--vd-color-gray-600, #6c757d);\n  }\n}\n\n/* ========== Base ========== */\n\n.vd-rating {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--vd-rating-gap);\n}\n\n.vd-rating-star {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  font-size: var(--vd-rating-size);\n  color: var(--vd-rating-inactive-color);\n  cursor: pointer;\n  transition: color 0.15s ease, transform 0.15s ease;\n  user-select: none;\n  border: none;\n  background: none;\n  padding: 0;\n  line-height: 1;\n}\n\n.vd-rating-star::before {\n  content: '\\2605'; /* filled star */\n}\n\n.vd-rating-star:hover {\n  transform: scale(1.2);\n}\n\n.vd-rating-star.is-active {\n  color: var(--vd-rating-active-color);\n}\n\n.vd-rating-star.is-hovered {\n  color: var(--vd-rating-hover-color);\n}\n\n/* Half-star support */\n.vd-rating-star.is-half {\n  position: relative;\n  color: var(--vd-rating-inactive-color);\n}\n\n.vd-rating-star.is-half::after {\n  content: '\\2605';\n  position: absolute;\n  left: 0;\n  top: 0;\n  width: 50%;\n  overflow: hidden;\n  color: var(--vd-rating-active-color);\n}\n\n/* ========== Read-only ========== */\n\n.vd-rating-readonly .vd-rating-star {\n  cursor: default;\n  pointer-events: none;\n}\n\n.vd-rating-readonly .vd-rating-star:hover {\n  transform: none;\n}\n\n/* ========== Sizes ========== */\n\n.vd-rating-sm .vd-rating-star {\n  font-size: var(--vd-rating-size-sm);\n}\n\n.vd-rating-lg .vd-rating-star {\n  font-size: var(--vd-rating-size-lg);\n}\n\n/* ========== Value Display ========== */\n\n.vd-rating-value {\n  margin-left: 0.5rem;\n  font-size: 0.875rem;\n  font-weight: 600;\n  color: var(--vd-text-primary, #212529);\n}\n\n/**\n * Vanduo Framework - Transfer (Dual-list)\n * Source/target list transfer panel\n */\n\n:root {\n  --vd-transfer-bg: var(--vd-card-bg, #fff);\n  --vd-transfer-border-color: var(--vd-border-color, #dee2e6);\n  --vd-transfer-item-hover-bg: var(--vd-bg-secondary, #f8f9fa);\n  --vd-transfer-item-selected-bg: var(--vd-color-primary-alpha-10, rgba(13, 110, 253, 0.1));\n  --vd-transfer-header-bg: var(--vd-bg-secondary, #f8f9fa);\n  --vd-transfer-padding: 0.5rem;\n  --vd-transfer-list-height: 15rem;\n  --vd-transfer-border-radius: var(--vd-border-radius, 0.5rem);\n  --vd-transfer-gap: 0.8125rem; /* 13px - fib */\n}\n\n[data-theme=\"dark\"] {\n  --vd-transfer-bg: var(--vd-card-bg, #2d2d44);\n  --vd-transfer-border-color: var(--vd-border-color, #3d3d5c);\n  --vd-transfer-item-hover-bg: var(--vd-bg-primary, #1a1a2e);\n  --vd-transfer-header-bg: var(--vd-bg-primary, #1a1a2e);\n}\n\n@media (prefers-color-scheme: dark) {\n  :root:not([data-theme]) {\n    --vd-transfer-bg: var(--vd-card-bg, #2d2d44);\n    --vd-transfer-border-color: var(--vd-border-color, #3d3d5c);\n    --vd-transfer-item-hover-bg: var(--vd-bg-primary, #1a1a2e);\n    --vd-transfer-header-bg: var(--vd-bg-primary, #1a1a2e);\n  }\n}\n\n/* ========== Layout ========== */\n\n.vd-transfer {\n  display: flex;\n  align-items: stretch;\n  gap: var(--vd-transfer-gap);\n}\n\n.vd-transfer-panel {\n  flex: 1;\n  border: 1px solid var(--vd-transfer-border-color);\n  border-radius: var(--vd-transfer-border-radius);\n  background: var(--vd-transfer-bg);\n  display: flex;\n  flex-direction: column;\n  min-width: 10rem;\n}\n\n/* ========== Panel Header ========== */\n\n.vd-transfer-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: var(--vd-transfer-padding) 0.8125rem;\n  background: var(--vd-transfer-header-bg);\n  border-bottom: 1px solid var(--vd-transfer-border-color);\n  border-radius: var(--vd-transfer-border-radius) var(--vd-transfer-border-radius) 0 0;\n  font-size: 0.8125rem;\n  font-weight: 600;\n}\n\n.vd-transfer-count {\n  font-weight: 400;\n  color: var(--vd-text-muted, #6c757d);\n}\n\n/* ========== Search ========== */\n\n.vd-transfer-search {\n  padding: var(--vd-transfer-padding);\n  border-bottom: 1px solid var(--vd-transfer-border-color);\n}\n\n.vd-transfer-search input {\n  width: 100%;\n  padding: 0.3125rem 0.5rem;\n  border: 1px solid var(--vd-transfer-border-color);\n  border-radius: 0.25rem;\n  font-size: 0.8125rem;\n  background: var(--vd-transfer-bg);\n  color: var(--vd-text-primary, #212529);\n}\n\n/* ========== List ========== */\n\n.vd-transfer-list {\n  flex: 1;\n  overflow-y: auto;\n  max-height: var(--vd-transfer-list-height);\n  list-style: none;\n  margin: 0;\n  padding: 0;\n}\n\n.vd-transfer-item {\n  display: flex;\n  align-items: center;\n  padding: 0.3125rem 0.8125rem; /* 5px 13px - fib */\n  cursor: pointer;\n  font-size: 0.875rem;\n  transition: background 0.15s ease;\n  gap: 0.5rem;\n}\n\n.vd-transfer-item:hover {\n  background: var(--vd-transfer-item-hover-bg);\n}\n\n.vd-transfer-item.is-selected {\n  background: var(--vd-transfer-item-selected-bg);\n}\n\n.vd-transfer-item input[type=\"checkbox\"] {\n  margin: 0;\n}\n\n/* ========== Actions ========== */\n\n.vd-transfer-actions {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 0.3125rem; /* 5px - fib */\n}\n\n.vd-transfer-btn {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 2rem;\n  height: 2rem;\n  border: 1px solid var(--vd-transfer-border-color);\n  border-radius: 0.25rem;\n  background: var(--vd-transfer-bg);\n  cursor: pointer;\n  font-size: 0.875rem;\n  transition: background 0.15s ease;\n  padding: 0;\n}\n\n.vd-transfer-btn:hover {\n  background: var(--vd-transfer-item-hover-bg);\n}\n\n.vd-transfer-btn:disabled {\n  opacity: 0.4;\n  cursor: not-allowed;\n}\n\n/* ========== Responsive ========== */\n\n@media (max-width: 576px) {\n  .vd-transfer {\n    flex-direction: column;\n  }\n\n  .vd-transfer-actions {\n    flex-direction: row;\n  }\n}\n\n/**\n * Vanduo Framework - Tree View\n * Hierarchical collapsible tree structure with checkbox selection\n */\n\n:root {\n  --vd-tree-indent: 1.3125rem;     /* 21px - fib */\n  --vd-tree-line-color: var(--vd-border-color, #dee2e6);\n  --vd-tree-line-width: 1px;\n  --vd-tree-item-padding: 0.25rem 0.3125rem; /* 4px 5px */\n  --vd-tree-item-hover-bg: var(--vd-bg-secondary, #f8f9fa);\n  --vd-tree-icon-size: 1rem;\n  --vd-tree-toggle-size: 1.125rem;\n}\n\n[data-theme=\"dark\"] {\n  --vd-tree-line-color: var(--vd-color-gray-600, #6c757d);\n  --vd-tree-item-hover-bg: var(--vd-bg-primary, #1a1a2e);\n}\n\n@media (prefers-color-scheme: dark) {\n  :root:not([data-theme]) {\n    --vd-tree-line-color: var(--vd-color-gray-600, #6c757d);\n    --vd-tree-item-hover-bg: var(--vd-bg-primary, #1a1a2e);\n  }\n}\n\n/* ========== Base ========== */\n\n.vd-tree {\n  list-style: none;\n  padding: 0;\n  margin: 0;\n}\n\n.vd-tree .vd-tree {\n  padding-left: var(--vd-tree-indent);\n}\n\n/* ========== Node ========== */\n\n.vd-tree-node {\n  position: relative;\n}\n\n.vd-tree-node-content {\n  display: flex;\n  align-items: center;\n  gap: 0.3125rem; /* 5px - fib */\n  padding: var(--vd-tree-item-padding);\n  border-radius: 0.25rem;\n  cursor: default;\n  font-size: 0.875rem;\n  transition: background 0.15s ease;\n}\n\n.vd-tree-node-content:hover {\n  background: var(--vd-tree-item-hover-bg);\n}\n\n/* ========== Toggle ========== */\n\n.vd-tree-toggle {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--vd-tree-toggle-size);\n  height: var(--vd-tree-toggle-size);\n  border: none;\n  background: none;\n  padding: 0;\n  cursor: pointer;\n  font-size: 0.625rem;\n  color: var(--vd-text-muted, #6c757d);\n  transition: transform 0.2s ease;\n  flex-shrink: 0;\n}\n\n.vd-tree-toggle::before {\n  content: '\\25B6'; /* right-pointing triangle */\n}\n\n.vd-tree-node.is-open > .vd-tree-node-content .vd-tree-toggle {\n  transform: rotate(90deg);\n}\n\n/* Placeholder for leaf nodes (no children) */\n.vd-tree-toggle-placeholder {\n  width: var(--vd-tree-toggle-size);\n  flex-shrink: 0;\n}\n\n/* ========== Checkbox ========== */\n\n.vd-tree-checkbox {\n  margin: 0;\n  flex-shrink: 0;\n}\n\n/* ========== Icon ========== */\n\n.vd-tree-icon {\n  font-size: var(--vd-tree-icon-size);\n  flex-shrink: 0;\n  color: var(--vd-text-muted, #6c757d);\n}\n\n.vd-tree-node.is-open > .vd-tree-node-content .vd-tree-icon-folder::before {\n  content: '\\1F4C2'; /* open folder */\n}\n\n.vd-tree-icon-folder::before {\n  content: '\\1F4C1'; /* closed folder */\n}\n\n.vd-tree-icon-file::before {\n  content: '\\1F4C4'; /* file */\n}\n\n/* ========== Label ========== */\n\n.vd-tree-label {\n  flex: 1;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.vd-tree-node.is-selected > .vd-tree-node-content .vd-tree-label {\n  font-weight: 600;\n  color: var(--vd-color-primary, #0d6efd);\n}\n\n/* ========== Children Container ========== */\n\n.vd-tree-children {\n  display: none;\n  list-style: none;\n  padding: 0;\n  margin: 0;\n  padding-left: var(--vd-tree-indent);\n}\n\n.vd-tree-node.is-open > .vd-tree-children {\n  display: block;\n}\n\n/* ========== Connection Lines ========== */\n\n.vd-tree-lines .vd-tree-children {\n  position: relative;\n}\n\n.vd-tree-lines .vd-tree-children::before {\n  content: '';\n  position: absolute;\n  top: 0;\n  left: calc(var(--vd-tree-toggle-size) / 2);\n  bottom: 0.75rem;\n  width: var(--vd-tree-line-width);\n  background: var(--vd-tree-line-color);\n}\n\n.vd-tree-lines .vd-tree-children .vd-tree-node::before {\n  content: '';\n  position: absolute;\n  top: 50%;\n  left: calc(var(--vd-tree-toggle-size) / 2 - var(--vd-tree-indent));\n  width: 0.5rem;\n  height: var(--vd-tree-line-width);\n  background: var(--vd-tree-line-color);\n}\n\n/**\n * Vanduo Framework - Spotlight (Feature Discovery)\n * Overlay highlight + tooltip tour system\n */\n\n:root {\n  --vd-spotlight-overlay-bg: rgba(0, 0, 0, 0.5);\n  --vd-spotlight-tooltip-bg: var(--vd-card-bg, #fff);\n  --vd-spotlight-tooltip-color: var(--vd-text-primary, #212529);\n  --vd-spotlight-tooltip-shadow: 0 0.5rem 1.3125rem rgba(0, 0, 0, 0.15);\n  --vd-spotlight-tooltip-padding: 1.3125rem; /* 21px - fib */\n  --vd-spotlight-tooltip-radius: var(--vd-card-border-radius, var(--vd-btn-border-radius-lg, 0.5rem));\n  --vd-spotlight-tooltip-max-width: 21rem; /* 336px - fib×16 */\n  --vd-spotlight-highlight-padding: 0.5rem; /* 8px - fib */\n  /* Match card/modal surfaces so the cutout reads like other rounded UI (not the smaller base button token). */\n  --vd-spotlight-target-radius: var(--vd-card-border-radius, var(--vd-btn-border-radius-lg, var(--vd-btn-border-radius, 0.25rem)));\n  --vd-spotlight-z-index: 1080;\n}\n\n[data-theme=\"dark\"] {\n  --vd-spotlight-tooltip-bg: var(--vd-card-bg, #2d2d44);\n  --vd-spotlight-tooltip-shadow: 0 0.5rem 1.3125rem rgba(0, 0, 0, 0.35);\n}\n\n@media (prefers-color-scheme: dark) {\n  :root:not([data-theme]) {\n    --vd-spotlight-tooltip-bg: var(--vd-card-bg, #2d2d44);\n    --vd-spotlight-tooltip-shadow: 0 0.5rem 1.3125rem rgba(0, 0, 0, 0.35);\n  }\n}\n\n/* ========== Overlay ========== */\n\n.vd-spotlight-overlay {\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100vw;\n  height: 100vh;\n  z-index: var(--vd-spotlight-z-index);\n  pointer-events: auto;\n  transition: opacity 0.3s ease;\n}\n\n/* ========== Tooltip ========== */\n\n.vd-spotlight-tooltip {\n  position: absolute;\n  z-index: calc(var(--vd-spotlight-z-index) + 2);\n  background: var(--vd-spotlight-tooltip-bg);\n  color: var(--vd-spotlight-tooltip-color);\n  padding: var(--vd-spotlight-tooltip-padding);\n  border-radius: var(--vd-spotlight-tooltip-radius);\n  box-shadow: var(--vd-spotlight-tooltip-shadow);\n  max-width: var(--vd-spotlight-tooltip-max-width);\n}\n\n.vd-spotlight-title {\n  margin: 0 0 0.5rem;\n  font-weight: 600;\n  font-size: 1.125rem;\n}\n\n.vd-spotlight-description {\n  margin: 0 0 0.8125rem; /* 13px - fib */\n  font-size: 0.875rem;\n  line-height: 1.5;\n}\n\n/* ========== Footer (nav buttons) ========== */\n\n.vd-spotlight-footer {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 0.5rem;\n}\n\n.vd-spotlight-counter {\n  font-size: 0.75rem;\n  color: var(--vd-text-muted, #6c757d);\n}\n\n.vd-spotlight-actions {\n  display: flex;\n  gap: 0.3125rem; /* 5px - fib */\n}\n\n.vd-spotlight-btn {\n  padding: 0.3125rem 0.8125rem; /* 5px 13px - fib */\n  border: 1px solid var(--vd-border-color, #dee2e6);\n  border-radius: var(--vd-btn-border-radius-sm, 0.25rem);\n  background: transparent;\n  cursor: pointer;\n  font-size: 0.8125rem;\n  transition: background 0.15s ease;\n}\n\n.vd-spotlight-btn:hover {\n  background: var(--vd-bg-secondary, #f8f9fa);\n}\n\n.vd-spotlight-btn-primary {\n  background: var(--vd-color-primary, #0d6efd);\n  color: #fff;\n  border-color: var(--vd-color-primary, #0d6efd);\n}\n\n.vd-spotlight-btn-primary:hover {\n  background: var(--vd-color-primary-dark, #0b5ed7);\n}\n\n/* ========== Highlighted Target ========== */\n\n.vd-spotlight-target {\n  position: relative;\n  z-index: calc(var(--vd-spotlight-z-index) + 1);\n  isolation: isolate;\n  overflow: visible;\n  /* box-shadow cutout follows border-radius; !important wins over consumer utilities (e.g. docs demos) */\n  border-radius: var(--vd-spotlight-target-radius) !important;\n  box-shadow: 0 0 0 var(--vd-spotlight-highlight-padding) rgba(13, 110, 253, 0.25),\n              0 0 0 9999px var(--vd-spotlight-overlay-bg);\n}\n\n\n/* Layer 5: Effects */\n/**\n * Vanduo Framework - Parallax Effects\n * Parallax scroll effects\n */\n\n:root {\n  /* Parallax Settings */\n  --vd-parallax-speed-slow: 0.5;\n  --vd-parallax-speed-medium: 1;\n  --vd-parallax-speed-fast: 1.5;\n}\n\n/* Base Parallax Container */\n.vd-parallax {\n  position: relative;\n  overflow: hidden;\n  width: 100%;\n}\n\n/* Parallax Layer */\n.vd-parallax-layer {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  will-change: transform;\n  backface-visibility: hidden;\n  transform: translateZ(0);\n}\n\n/* Parallax Content */\n.vd-parallax-content {\n  position: relative;\n  z-index: 1;\n}\n\n/* Parallax Speed Variants */\n.vd-parallax-slow {\n  --vd-parallax-speed: var(--vd-parallax-speed-slow);\n}\n\n.vd-parallax-medium {\n  --vd-parallax-speed: var(--vd-parallax-speed-medium);\n}\n\n.vd-parallax-fast {\n  --vd-parallax-speed: var(--vd-parallax-speed-fast);\n}\n\n/* Parallax Direction */\n.vd-parallax-horizontal .vd-parallax-layer {\n  /* Horizontal parallax will be handled by JS */\n}\n\n/* Parallax Image */\n.vd-parallax-image {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  will-change: transform;\n}\n\n/* Parallax Background */\n.vd-parallax-bg {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 120%; /* Extra height for parallax effect */\n  background-size: cover;\n  background-position: center;\n  background-repeat: no-repeat;\n  will-change: transform;\n}\n\n/* Parallax Container Heights (Fibonacci) */\n.vd-parallax-sm {\n  min-height: 377px; /* fib */\n}\n\n.vd-parallax-md {\n  min-height: 610px; /* fib */\n}\n\n.vd-parallax-lg {\n  min-height: 987px; /* fib */\n}\n\n.vd-parallax-full {\n  min-height: 100vh;\n}\n\n/* Reduced Motion Support */\n@media (prefers-reduced-motion: reduce) {\n  .vd-parallax-layer,\n  .vd-parallax-bg,\n  .vd-parallax-image {\n    transform: none !important;\n    will-change: auto;\n  }\n}\n\n/* Mobile Optimization (disable parallax on small screens) */\n@media (max-width: 767.98px) {\n  .vd-parallax-disable-mobile .vd-parallax-layer,\n  .vd-parallax-disable-mobile .vd-parallax-bg,\n  .vd-parallax-disable-mobile .vd-parallax-image {\n    transform: none !important;\n    will-change: auto;\n  }\n}\n\n\n/**\n * Vanduo Framework - Glass Effects\n * Frosted glass utility surfaces and modifiers\n */\n\n:root {\n  --vd-glass-float-shadow: 0 14px 42px rgba(0, 0, 0, 0.2);\n  --vd-glass-float-translate-y: -2px;\n}\n\n.vd-glass,\n.vd-glass-md {\n  position: relative;\n  overflow: hidden;\n  background: var(--vd-glass-bg-light);\n  border: 1px solid var(--vd-glass-border-light);\n  box-shadow: var(--vd-glass-shadow);\n  backdrop-filter: blur(var(--vd-glass-blur)) saturate(var(--vd-glass-saturate));\n  -webkit-backdrop-filter: blur(var(--vd-glass-blur)) saturate(var(--vd-glass-saturate));\n  isolation: isolate;\n}\n\n.vd-glass::before,\n.vd-glass-md::before {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  background: linear-gradient(\n    to bottom,\n    rgba(255, 255, 255, var(--vd-glass-highlight-alpha)) 0%,\n    rgba(255, 255, 255, 0) 45%\n  );\n  pointer-events: none;\n  z-index: 1;\n}\n\n.vd-glass::after,\n.vd-glass-md::after {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.15' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url('effects/%23n')' opacity='0.25'/%3E%3C/svg%3E\");\n  opacity: var(--vd-glass-noise-opacity);\n  pointer-events: none;\n  z-index: 2;\n}\n\n.vd-glass > *,\n.vd-glass-md > * {\n  position: relative;\n  z-index: 3;\n}\n\n.vd-glass-sm {\n  --vd-glass-blur: 6px;\n  --vd-glass-saturate: 1.4;\n  --vd-glass-bg-opacity: 0.55;\n}\n\n.vd-glass-lg {\n  --vd-glass-blur: 20px;\n  --vd-glass-saturate: 2;\n  --vd-glass-bg-opacity: 0.72;\n}\n\n.vd-glass-xl {\n  --vd-glass-blur: 28px;\n  --vd-glass-saturate: 2.2;\n  --vd-glass-bg-opacity: 0.78;\n}\n\n.vd-glass-tinted {\n  background: linear-gradient(\n      135deg,\n      var(--vd-glass-tint, var(--vd-color-primary-alpha-10)) 0%,\n      transparent 70%\n    ),\n    var(--vd-glass-bg-light);\n}\n\n.vd-glass-floating {\n  transition: transform var(--vd-transition-normal), box-shadow var(--vd-transition-normal);\n}\n\n.vd-glass-floating:hover,\n.vd-glass-floating:focus-within {\n  transform: translateY(var(--vd-glass-float-translate-y));\n  box-shadow: var(--vd-glass-float-shadow);\n}\n\n.vd-glass-contrast {\n  --vd-glass-bg-opacity: 0.82;\n  --vd-glass-border-alpha: 0.26;\n}\n\n/* Scroll-activated glass: inactive until .is-glass-active is set by glass.js */\n[data-glass-scroll] {\n  transition:\n    background var(--vd-transition-normal, 0.25s ease),\n    border-color var(--vd-transition-normal, 0.25s ease),\n    box-shadow var(--vd-transition-normal, 0.25s ease),\n    backdrop-filter var(--vd-transition-normal, 0.25s ease);\n}\n\n[data-glass-scroll]:not(.is-glass-active) {\n  background: transparent !important;\n  border-color: transparent !important;\n  box-shadow: none !important;\n  backdrop-filter: none !important;\n  -webkit-backdrop-filter: none !important;\n}\n\n[data-glass-scroll]:not(.is-glass-active)::before,\n[data-glass-scroll]:not(.is-glass-active)::after {\n  opacity: 0;\n}\n\n@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {\n  .vd-glass,\n  .vd-glass-md {\n    background: var(--vd-bg-primary);\n  }\n}\n\n@media (prefers-reduced-transparency: reduce) {\n  .vd-glass,\n  .vd-glass-sm,\n  .vd-glass-md,\n  .vd-glass-lg,\n  .vd-glass-xl {\n    backdrop-filter: none;\n    -webkit-backdrop-filter: none;\n    background: var(--vd-bg-primary);\n    border-color: var(--vd-border-color);\n  }\n\n  .vd-glass::before,\n  .vd-glass::after,\n  .vd-glass-md::before,\n  .vd-glass-md::after {\n    display: none;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .vd-glass-floating {\n    transition: none;\n  }\n\n  .vd-glass-floating:hover,\n  .vd-glass-floating:focus-within {\n    transform: none;\n  }\n}\n\n/**\n * Vanduo Framework - Water Morph Effect\n * Liquid wave content-swap animation on click\n *\n * Usage:\n *   Add `.vd-morph` (or `data-vd-morph`) to any element.\n *   Inside it, place:\n *     .vd-morph-wave     — radial wave layer (auto-created by JS if missing)\n *     .vd-morph-shine    — light-sweep layer (auto-created by JS if missing)\n *     .vd-morph-content.vd-morph-current — visible state\n *     .vd-morph-content.vd-morph-next    — hidden next state\n */\n\n:root {\n  --vd-morph-duration: 0.75s;\n  --vd-morph-easing: cubic-bezier(0.2, 0.8, 0.35, 1);\n  --vd-morph-blur-peak: 11px;\n  --vd-morph-wave-color: var(--vd-color-primary, #3b82f6);\n}\n\n/* ========== Base ========== */\n\n.vd-morph,\n[data-vd-morph] {\n  position: relative;\n  overflow: hidden;\n  cursor: pointer;\n  -webkit-tap-highlight-color: transparent;\n}\n\n/* ========== Wave Layer ========== */\n\n.vd-morph-wave {\n  position: absolute;\n  border-radius: 50%;\n  background:\n    radial-gradient(circle at 32% 28%,\n      color-mix(in srgb, #fff 55%, transparent) 0%,\n      color-mix(in srgb, #fff 18%, transparent) 18%,\n      transparent 38%),\n    radial-gradient(circle at 68% 70%,\n      color-mix(in srgb, #fff 30%, transparent) 0%,\n      transparent 30%),\n    radial-gradient(circle at 50% 50%,\n      color-mix(in srgb, var(--vd-morph-wave-color) 96%, #a8d8ff) 0%,\n      color-mix(in srgb, var(--vd-morph-wave-color) 82%, #7ec8ff) 35%,\n      color-mix(in srgb, var(--vd-morph-wave-color) 70%, #5ba4f5) 65%,\n      color-mix(in srgb, var(--vd-morph-wave-color) 90%, #4478f0) 100%);\n  pointer-events: none;\n  opacity: 0;\n  transform: translate(-50%, -50%);\n  will-change: width, height, opacity, filter;\n}\n\n.vd-morph.is-morphing .vd-morph-wave {\n  animation: vd-morph-expand var(--vd-morph-duration) var(--vd-morph-easing) forwards;\n}\n\n.vd-morph.is-morphing .vd-morph-wave::after {\n  content: '';\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  width: 0;\n  height: 0;\n  border-radius: 50%;\n  background:\n    radial-gradient(circle at 50% 50%,\n      color-mix(in srgb, var(--vd-morph-wave-color) 70%, #b0e0ff) 0%,\n      color-mix(in srgb, var(--vd-morph-wave-color) 50%, #88c0ff) 45%,\n      transparent 80%);\n  transform: translate(-50%, -50%);\n  opacity: 0;\n  animation: vd-morph-expand2 var(--vd-morph-duration) var(--vd-morph-easing) 0.08s forwards;\n}\n\n@keyframes vd-morph-expand {\n  0% {\n    width: 0;\n    height: 0;\n    opacity: 0;\n    filter: blur(0) saturate(2);\n  }\n  6% {\n    opacity: 1;\n    filter: blur(1px) saturate(2.2);\n  }\n  35% {\n    opacity: 0.92;\n    filter: blur(6px) saturate(1.7);\n  }\n  68% {\n    width: 360%;\n    height: 360%;\n    opacity: 0.6;\n    filter: blur(var(--vd-morph-blur-peak)) saturate(1.3);\n  }\n  100% {\n    width: 360%;\n    height: 360%;\n    opacity: 0;\n    filter: blur(7px) saturate(1);\n  }\n}\n\n@keyframes vd-morph-expand2 {\n  0% {\n    width: 0;\n    height: 0;\n    opacity: 0;\n    filter: blur(0);\n  }\n  10% {\n    opacity: 0.7;\n    filter: blur(3px);\n  }\n  60% {\n    width: 280%;\n    height: 280%;\n    opacity: 0.38;\n    filter: blur(14px);\n  }\n  100% {\n    width: 280%;\n    height: 280%;\n    opacity: 0;\n    filter: blur(10px);\n  }\n}\n\n/* ========== Shine Sweep ========== */\n\n.vd-morph-shine {\n  position: absolute;\n  top: 0;\n  left: -110%;\n  width: 80%;\n  height: 100%;\n  background: linear-gradient(\n    105deg,\n    transparent 0%,\n    color-mix(in srgb, #fff 10%, transparent) 35%,\n    color-mix(in srgb, #fff 52%, transparent) 50%,\n    color-mix(in srgb, #fff 10%, transparent) 65%,\n    transparent 100%\n  );\n  pointer-events: none;\n  opacity: 0;\n  transform: skewX(-12deg);\n  will-change: left, opacity;\n}\n\n.vd-morph.is-morphing .vd-morph-shine {\n  animation: vd-morph-shine 0.72s cubic-bezier(0.3, 0.65, 0.5, 1) 0.04s forwards;\n}\n\n@keyframes vd-morph-shine {\n  0% {\n    left: -110%;\n    opacity: 0;\n  }\n  15% {\n    opacity: 0.9;\n  }\n  72% {\n    opacity: 0.4;\n  }\n  100% {\n    left: 130%;\n    opacity: 0;\n  }\n}\n\n/* ========== Content Layers ========== */\n\n.vd-morph-content {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 0.45rem;\n  pointer-events: none;\n  will-change: opacity, transform, filter;\n}\n\n.vd-morph-current {\n  opacity: 1;\n  transform: scale(1) translateY(0);\n  filter: blur(0);\n  z-index: 2;\n  transition:\n    opacity 0.28s cubic-bezier(0.4, 0, 0.6, 1),\n    transform 0.28s cubic-bezier(0.4, 0, 0.6, 1),\n    filter 0.28s ease;\n}\n\n.vd-morph-next {\n  opacity: 0;\n  transform: scale(0.86) translateY(4px);\n  filter: blur(3px);\n  z-index: 1;\n  transition:\n    opacity 0.3s cubic-bezier(0, 0, 0.2, 1),\n    transform 0.3s cubic-bezier(0, 0, 0.2, 1),\n    filter 0.3s ease;\n}\n\n.vd-morph.is-morphing .vd-morph-current {\n  opacity: 0;\n  transform: scale(0.82) translateY(-4px);\n  filter: blur(4px);\n  transition-duration: 0.2s;\n  transition-delay: 0s;\n}\n\n.vd-morph.is-morphing .vd-morph-next {\n  opacity: 1;\n  transform: scale(1) translateY(0);\n  filter: blur(0);\n  transition-duration: 0.3s;\n  transition-delay: 0.25s;\n}\n\n/* ========== Size Variants ========== */\n\n.vd-morph-sm {\n  --vd-morph-duration: 0.5s;\n  --vd-morph-blur-peak: 7px;\n}\n\n.vd-morph-lg {\n  --vd-morph-duration: 1s;\n  --vd-morph-blur-peak: 16px;\n}\n\n/* ========== Accessibility ========== */\n\n@media (prefers-reduced-motion: reduce) {\n  .vd-morph,\n  .vd-morph-content,\n  .vd-morph-wave,\n  .vd-morph-shine {\n    transition: none !important;\n    animation: none !important;\n  }\n}\n\n\n/* Layer 6: Print */\n/**\n * Vanduo Framework - Print Styles\n * Optimized styles for printing\n */\n\n@media print {\n  /* Reset backgrounds and shadows for printing */\n  *,\n  *::before,\n  *::after {\n    background: transparent !important;\n    color: #000 !important;\n    box-shadow: none !important;\n    text-shadow: none !important;\n  }\n\n  /* Links */\n  a,\n  a:visited {\n    text-decoration: underline;\n  }\n\n  a[href]::after {\n    content: \" (\" attr(href) \")\";\n    font-size: 0.8em;\n  }\n\n  a[href^=\"#\"]::after,\n  a[href^=\"javascript:\"]::after {\n    content: \"\";\n  }\n\n  /* Images */\n  img {\n    max-width: 100% !important;\n    page-break-inside: avoid;\n  }\n\n  /* Headings */\n  h1, h2, h3, h4, h5, h6 {\n    page-break-after: avoid;\n    page-break-inside: avoid;\n  }\n\n  /* Paragraphs */\n  p {\n    orphans: 3;\n    widows: 3;\n  }\n\n  /* Tables */\n  table {\n    border-collapse: collapse !important;\n  }\n\n  thead {\n    display: table-header-group;\n  }\n\n  tr {\n    page-break-inside: avoid;\n  }\n\n  /* Hide non-essential UI chrome */\n  .vd-navbar,\n  .vd-navbar-menu,\n  .vd-navbar-toggle,\n  .vd-navbar-overlay,\n  .vd-sidenav,\n  .vd-sidenav-overlay,\n  .vd-modal,\n  .vd-modal-backdrop,\n  .vd-tooltip,\n  .vd-dropdown-menu,\n  .vd-btn-group,\n  .vd-pagination,\n  .skip-link,\n  .vd-d-print-none {\n    display: none !important;\n  }\n\n  /* Show print-only elements */\n  .vd-d-print-block {\n    display: block !important;\n  }\n\n  .vd-d-print-inline {\n    display: inline !important;\n  }\n\n  .vd-d-print-inline-block {\n    display: inline-block !important;\n  }\n\n  /* Container adjustments */\n  .vd-container,\n  .vd-container-responsive {\n    width: 100% !important;\n    max-width: none !important;\n    padding: 0 !important;\n  }\n\n  /* Pre and code blocks */\n  pre,\n  blockquote {\n    border: 1px solid #999;\n    page-break-inside: avoid;\n  }\n\n  pre {\n    white-space: pre-wrap !important;\n  }\n}\n\n"],"names":[]}
+{"version":3,"sourceRoot":null,"mappings":"AAYA,uCAOA,qBAMA,oFAOA,yEAOA,4CAMA,qDAaA,oCAUA,gEAMA,0DAUA,0CAQA,qCAKA,gCAKA,uCACI,uCAIA,8JAWJ,gCAKA,iDAOA,gDAqBA,k9pBAm+BA,oEAKA,0EAKA,iEAKA,oEAKA,oEAKA,8DAKA,2DAKA,8DAKA,8DAKA,wDAKA,+DASA,+CAIA,kDAIA,+CAIA,+CAIA,2CAIA,yCAIA,2CAIA,2CAIA,0CAIA,0CAIA,8CAQA,wEAKA,8EAKA,wEAKA,wEAKA,kEAKA,+DAKA,yEAKA,sEASA,y7BAoCA,mCACE,g8BA2CF,6UAcA,8WAcA,+PAcA,8WAcA,wVAcA,mWAcA,iQAcA,wVAcA,wVAcA,6PAcA,wVAcA,8WAcA,8WAcA,oWAcA,iQAcA,wVAcA,8PAcA,+PAmBA,sWAcA,gOAcA,qUAcA,0TAcA,2VAcA,qUAwBA,0yRAsQA,ujSAqQA,shRAwQA,2IAQA,0IAQA,4IAQA,wIAaA,iKAQA,kKAQA,8JAaA,uJAQA,sJAQA,oJAaA,8JAQA,6JAQA,2JAaA,sKAQA,mKAaA,8IAQA,6IAQA,2IAaA,wIAQA,qIAaA,uJAQA,sJAQA,oJAaA,2IAQA,0IAQA,wIAaA,mKAQA,oKAQA,gKAaA,oJAcA,6SAQA,+FAIA,6GAIA,uGAIA,0GAIA,+HAKA,iGAIA,6FAIA,uGAIA,qGAIA,+FAIA,+GAKA,+gCA0DA,oOAUA,8JAaA,qCAIA,qCAIA,qCAIA,oCAIA,oCAIA,sCAKA,iCAMA,0EAMA,qEAKA,6EAMA,sDAOA,uBAKA,kCAKA,8DAKA,wCAMA,6IAWA,oMAUA,uLAWA,wDAOA,qDAIA,uDAIA,qDAKA,6CAIA,6CAIA,iDAIA,6CAIA,6CAIA,+CAIA,+CAIA,+CAIA,+CAIA,+CAKA,uDAIA,yDAIA,yDAIA,6DAIA,qDAIA,kCAIA,+DAOA,oCAIA,oCAIA,sCAIA,iCAKA,qCAIA,2CAIA,mCAKA,qDAIA,uDAIA,qDAIA,yDAIA,2DAIA,uDAKA,kEAIA,8DAIA,gEAIA,4DAIA,8DAIA,gEAUA,4kNA8OA,ylCAoCA,mCACE,gmCAyCF,8gBAgDA,uLASA,kHAOA,mLAUA,iMAUA,kMASA,uBACE,2DAKF,uBACE,4DAMF,iIAQA,oHAOA,mCAKA,mCAKA,8BAKA,mCAKA,mCAKA,8BAKA,mCAKA,mCAKA,8BAKA,oCAKA,oCAKA,gCAKA,kCAMA,sBACE,sCAKA,sCAKA,iCAKA,sCAKA,sCAKA,iCAKA,sCAKA,sCAKA,iCAKA,uCAKA,uCAKA,mCAKA,sCAOF,sBACE,sCAKA,sCAKA,iCAKA,sCAKA,sCAKA,iCAKA,sCAKA,sCAKA,iCAKA,uCAKA,uCAKA,mCAKA,sCAOF,sBACE,sCAKA,sCAKA,iCAKA,sCAKA,sCAKA,iCAKA,sCAKA,sCAKA,iCAKA,uCAKA,uCAKA,mCAKA,sCAOF,uBACE,sCAKA,sCAKA,iCAKA,sCAKA,sCAKA,iCAKA,sCAKA,sCAKA,iCAKA,uCAKA,uCAKA,mCAKA,sCAOF,uBACE,uCAKA,uCAKA,kCAKA,uCAKA,uCAKA,kCAKA,uCAKA,uCAKA,kCAKA,wCAKA,wCAKA,oCAKA,uCAOF,2BAIA,kCAIA,kCAIA,6BAIA,kCAIA,kCAIA,6BAIA,kCAIA,kCAIA,6BAIA,mCAIA,mCAKA,sBACE,8BAIA,qCAIA,qCAIA,gCAIA,qCAIA,qCAIA,gCAIA,qCAIA,qCAIA,gCAIA,sCAIA,uCAMF,sBACE,8BAIA,qCAIA,qCAIA,gCAIA,qCAIA,qCAIA,gCAIA,qCAIA,qCAIA,gCAIA,sCAIA,uCAMF,sBACE,8BAIA,qCAIA,qCAIA,gCAIA,qCAIA,qCAIA,gCAIA,qCAIA,qCAIA,gCAIA,sCAIA,uCAMF,uBACE,8BAIA,qCAIA,qCAIA,gCAIA,qCAIA,qCAIA,gCAIA,qCAIA,qCAIA,gCAIA,sCAIA,uCAMF,uBACE,+BAIA,sCAIA,sCAIA,iCAIA,sCAIA,sCAIA,iCAIA,sCAIA,sCAIA,iCAIA,uCAIA,wCAUF,yBAIA,wBAIA,oBAIA,oBAIA,oBAIA,oBAIA,oBAIA,oBAIA,oBAIA,oBAIA,oBAIA,oBAIA,sBAIA,sBAIA,sBAKA,sBACE,4BAIA,2BAIA,uBAIA,uBAIA,uBAIA,uBAIA,uBAIA,uBAIA,uBAIA,uBAIA,uBAIA,uBAIA,yBAIA,yBAIA,0BAMF,sBACE,4BAIA,2BAIA,uBAIA,uBAIA,uBAIA,uBAIA,uBAIA,uBAIA,uBAIA,uBAIA,uBAIA,uBAIA,yBAIA,yBAIA,0BAMF,sBACE,4BAIA,2BAIA,uBAIA,uBAIA,uBAIA,uBAIA,uBAIA,uBAIA,uBAIA,uBAIA,uBAIA,uBAIA,yBAIA,yBAIA,0BAMF,uBACE,4BAIA,2BAIA,uBAIA,uBAIA,uBAIA,uBAIA,uBAIA,uBAIA,uBAIA,uBAIA,uBAIA,uBAIA,yBAIA,yBAIA,0BAMF,uBACE,6BAIA,4BAIA,wBAIA,wBAIA,wBAIA,wBAIA,wBAIA,wBAIA,wBAIA,wBAIA,wBAIA,wBAIA,0BAIA,0BAIA,2BAYF,4JAQA,4JAQA,8JAaA,uNAYA,sBACE,mDAKF,sBACE,oEASF,sBACE,qFAaF,uBACE,sGAiBF,uBACE,yHAsBF,wIAOA,0JAOA,0JAQA,uIAOA,kJAQA,kJASA,uIAOA,6IAQA,6IAQA,6IASA,sGAOA,sHAOA,oGAQA,uIAOA,kJAQA,kJAQA,kJAQA,kJASA,2IAOA,oJAQA,oJAQA,iJASA,wGAOA,4GAYA,sCAIA,sCAIA,sCAIA,sCAIA,wCAIA,wCAIA,8CAIA,8CAIA,8CAIA,8CAIA,gDAIA,gDAIA,iDAIA,iDAIA,iDAIA,iDAIA,mDAIA,mDAUA,6EAOA,uHAQA,mIASA,6KAMA,6KAMA,iLAMA,2IAMA,0KAMA,yBAEE,+aAiBA,iPAsDF,oHASA,qCACA,2DACA,2DACA,2DACA,2DACA,2DACA,6DACA,6DACA,6DACA,6DAGA,+DACA,mEACA,iEACA,yDACA,6DAIA,2CACA,8DACA,8DACA,8DACA,+DACA,kEACA,gDAEA,6DAMA,sFAQA,yCACA,+DACA,+DACA,+DACA,+DACA,+DACA,iEACA,iEACA,iEACA,iEAEA,mDACA,gDACA,+CACA,kDAMA,qGAUA,2CACA,iEACA,iEACA,iEACA,iEACA,iEACA,mEACA,mEACA,mEACA,mEAEA,oDACA,iDACA,gDACA,qDACA,mDAEA,0DACA,uDACA,sDACA,+DACA,6DACA,6DAEA,8CAMA,gGAQA,mDACA,mDACA,mDAEA,kFAMA,qEAKA,+DASA,kGAQA,oIAWA,oDACA,4DACA,gDACA,qDACA,oDACA,iDACA,qDAMA,iKAWA,gDACA,6CACA,iDACA,iDAEA,+DACA,+DACA,+DACA,iEACA,iEACA,iEAQA,sHASA,wFAKA,mEACA,mEACA,mEAEA,qEACA,qEACA,qEACA,uEACA,uEACA,uEAYA,ukBAqDA,mCAIA,mCAIA,mCAIA,mCAIA,mCAIA,mCAIA,mCAIA,mCAIA,qCAIA,qCAIA,qCAIA,qCAIA,qCAIA,uBAKA,qCAIA,qCAIA,qCAIA,qCAIA,qCAIA,qCAIA,qCAIA,qCAIA,uCAIA,uCAIA,uCAIA,uCAIA,uCAIA,yBAKA,uCAIA,uCAIA,uCAIA,uCAIA,uCAIA,uCAIA,uCAIA,uCAIA,yCAIA,yCAIA,yCAIA,yCAIA,yCAIA,2BAKA,wCAIA,wCAIA,wCAIA,wCAIA,wCAIA,wCAIA,wCAIA,wCAIA,0CAIA,0CAIA,0CAIA,0CAIA,0CAIA,4BAKA,sCAIA,sCAIA,sCAIA,sCAIA,sCAIA,sCAIA,sCAIA,sCAIA,wCAIA,wCAIA,wCAIA,wCAIA,wCAIA,0BAKA,oCAIA,oCAIA,oCAIA,oCAIA,oCAIA,oCAIA,oCAIA,oCAIA,sCAIA,sCAIA,sCAIA,sCAIA,sCAKA,sCAIA,sCAIA,sCAIA,sCAIA,sCAIA,sCAIA,sCAIA,sCAIA,wCAIA,wCAIA,wCAIA,wCAIA,wCAKA,wCAIA,wCAIA,wCAIA,wCAIA,wCAIA,wCAIA,wCAIA,wCAIA,0CAIA,0CAIA,0CAIA,0CAIA,0CAKA,yCAIA,yCAIA,yCAIA,yCAIA,yCAIA,yCAIA,yCAIA,yCAIA,2CAIA,2CAIA,2CAIA,2CAIA,2CAKA,uCAIA,uCAIA,uCAIA,uCAIA,uCAIA,uCAIA,uCAIA,uCAIA,yCAIA,yCAIA,yCAIA,yCAIA,yCAKA,wBAIA,4BAIA,wCAIA,0BAIA,0BAIA,kCAIA,oCAIA,wBAIA,sCAIA,wBAIA,sCAKA,sBACE,2BAIA,+BAIA,2CAIA,6BAIA,2BAIA,yCAIA,4BAKF,sBACE,2BAIA,+BAIA,2CAIA,6BAIA,2BAIA,yCAIA,4BAKF,sBACE,2BAIA,+BAIA,2CAIA,6BAIA,2BAIA,yCAIA,4BAKF,uBACE,2BAIA,+BAIA,2CAIA,6BAIA,2BAIA,yCAIA,4BAMF,iCAIA,qCAIA,qCAIA,+BAIA,iCAKA,aAIA,iBAIA,mBAIA,eAKA,mBAIA,mBAIA,sBAIA,kBAIA,wBAIA,6BAIA,qBAIA,4BAKA,4BAIA,4BAIA,2BAIA,2BAIA,2BAKA,oBAIA,oBAIA,uBAIA,mBAIA,yBAIA,8BAIA,sBAIA,6BAKA,6BAIA,iCAIA,mCAIA,iCAIA,iCAIA,qCAIA,qCAIA,iCAIA,qCAIA,qCAKA,0CAKA,kEAKA,6CAKA,qEAKA,wCAKA,8CAKA,gEAKA,oCAIA,gCAIA,iCAIA,qCAIA,mCAIA,0CAIA,sCAIA,uCAIA,+CAIA,6CAIA,6CAIA,eAIA,qBAIA,qBAKA,kCAIA,kCAIA,kCAIA,kCAIA,kCAIA,kCAIA,kCAIA,kCAIA,oCAIA,oCAKA,sBACE,gCAIA,gDAIA,mCAIA,oDAKF,sBACE,gCAIA,gDAIA,mCAIA,oDAKF,sBACE,gCAIA,gDAIA,mCAIA,oDAKF,uBACE,gCAIA,gDAIA,mCAIA,oDAMF,sBACE,qCAIA,qCAIA,qCAIA,qCAIA,qCAIA,qCAIA,qCAIA,qCAIA,uCAIA,wCAKF,sBACE,qCAIA,qCAIA,qCAIA,qCAIA,qCAIA,qCAIA,qCAIA,qCAIA,uCAIA,wCAKF,sBACE,qCAIA,qCAIA,qCAIA,qCAIA,qCAIA,qCAIA,qCAIA,qCAIA,uCAIA,wCAKF,uBACE,qCAIA,qCAIA,qCAIA,qCAIA,qCAIA,qCAIA,qCAIA,qCAIA,uCAIA,wCAMF,sCAIA,kCAKA,4BAIA,6BAKA,+BAIA,+BAIA,uCAIA,yBAIA,yBAIA,yBAKA,8BAIA,8BAIA,4BAIA,8BAKA,2DAKA,gCAKA,uEAKA,6EAKA,gFAKA,0EAKA,wCAKA,wCAKA,wCAMA,+CAKA,gEAMA,0DAMA,gEAMA,gEAMA,iEAMA,mEAMA,oDAKA,sHAMA,0HAMA,4HAMA,wHAOA,wCACA,wCACA,wCACA,wCACA,wCACA,wCACA,2CACA,2CACA,2CACA,2CACA,2CACA,2CACA,2CACA,0CACA,0CACA,yCAGA,sBACE,sCAIA,sCAIA,sCAIA,sCAIA,sCAIA,sCAIA,sCAIA,0BAIA,wCAIA,wCAIA,2CAIA,2CAIA,uCAIA,uCAIA,uCAIA,uCAIA,uCAIA,uCAIA,wCAKF,sBACE,sCAIA,sCAIA,sCAIA,sCAIA,sCAIA,sCAIA,sCAIA,0BAIA,wCAIA,wCAIA,2CAIA,2CAIA,uCAIA,uCAIA,uCAIA,uCAIA,uCAIA,uCAIA,wCAKF,sBACE,sCAIA,sCAIA,sCAIA,sCAIA,sCAIA,sCAIA,sCAIA,0BAIA,wCAIA,wCAIA,2CAIA,2CAIA,uCAIA,uCAIA,uCAIA,uCAIA,uCAIA,uCAIA,wCAKF,uBACE,sCAIA,sCAIA,sCAIA,sCAIA,sCAIA,sCAIA,sCAIA,0BAIA,wCAIA,wCAIA,2CAIA,2CAIA,uCAIA,uCAIA,uCAIA,uCAIA,uCAIA,uCAIA,wCAMF,yMAYA,2FAQA,8IAYA,uKAaA,uFAKA,8FAKA,sHAMA,8BAIA,kCAIA,gCAIA,oCAKA,4CAIA,4CAIA,8CAIA,yCAKA,4EAMA,mCAIA,iCAIA,8DAMA,6CAIA,mDAIA,2CAKA,kCAIA,kCAKA,sBACE,iCAIA,qCAIA,oCAKF,sBACE,iCAIA,qCAIA,oCAKF,sBACE,iCAIA,qCAIA,oCAKF,uBACE,iCAIA,qCAIA,oCAMF,qBAIA,wBAIA,uBAIA,wBAIA,uBAKA,eAIA,iBAIA,iBAIA,iBAIA,iBAIA,iBAIA,qBAIA,uBAKA,mCAIA,+BAIA,6BAIA,6BAIA,yCAKA,sCAIA,gCAIA,sCAIA,kCAIA,oCAKA,yCAIA,yCAKA,+BAIA,8BAIA,gCAIA,6BAIA,kCAIA,6CAWA,4IAUA,4LAUA,sLAUA,8LAUA,gLAkBA,g1BA2BA,gCAIA,6CAIA,uCAIA,6CAIA,6CAIA,6CAIA,+CAIA,mDAKA,uDAIA,uDAIA,uDAIA,mDAKA,6BAIA,4CAIA,yCAIA,4CAIA,4CAIA,4CAUA,2GAQA,gGAOA,2JAQA,4FAKA,4FAKA,sFAMA,oHAKA,oHAKA,8GAMA,iFAKA,kFAKA,kFAKA,yGAKA,0GAKA,0GAQA,42BAsBA,mCACE,21BA0BF,kpCA4BA,oCACA,gHAIA,2EACA,gHAIA,+EACA,iFAGA,yEACA,+EACA,iFACA,uFACA,6EAGA,2CACA,8EACA,2FAKA,iGAKA,4FAMA,oDACA,2DACA,qDACA,6DAGA,8CACA,8CACA,8CACA,+CACA,8CACA,8CACA,8CACA,8CACA,8CAGA,uCACE,8JAgBF,4BACA,8BACA,+BACA,8BACA,+BACA,8BACA,iCACA,gCACA,iCACA,gCAGA,8BACA,mCACA,mCACA,qCACA,qCACA,qCACA,uCAGA,sCACA,wCACA,wCACA,wCACA,wCACA,wCACA,0CACA,0CACA,0CACA,0CACA,0CAEA,uCACA,yCACA,yCACA,yCACA,yCACA,yCACA,2CACA,2CACA,2CACA,2CACA,2CAGA,4CACA,8CACA,2CACA,6CACA,6CACA,+CACA,4CACA,8CAGA,oCACA,iCACA,0CACA,oCACA,gDACA,uCACA,4CACA,gCACA,sCAQA,oEAOA,sBAKA,uCAIA,mCAIA,iCAIA,iCAIA,6CAKA,+CAIA,yCAIA,+CAIA,2CAIA,6CAIA,mDAIA,qDAIA,yDAIA,2DAKA,iEAMA,uFASA,sCAIA,yCAIA,qCAIA,0CAIA,yCAIA,qCAIA,0CAIA,oDAKA,uDAIA,8BAIA,+KAUA,kEAMA,mEAMA,6DAOA,wDAYA,kVAoBA,yIASA,kLASA,sLAQA,2FAMA,mKAYA,kIAOA,2NAWA,iIAKA,qGAKA,4HAQA,oJASA,oLAUA,kMAUA,oLAUA,uLAUA,sKAUA,+JAWA,6EAMA,wKAcA,wHAQA,iHAQA,oGAOA,yBAEE,uHAQA,8GAOF,yBAEE,uHAQA,8GAOF,yBAEE,uHAQA,8GAOF,0BAEE,uHAQA,8GAQF,iGAMA,sIASA,gMAMA,yJAOA,mRAWA,gKAOA,8IAMA,qKAKA,kGAMA,mCAEE,+RAWA,wLAOA,0JAMA,iLAKA,+GAwBF,8CACA,8CACA,8CACA,8CACA,8CACA,8CACA,8CACA,8CACA,8CACA,8CAEA,qCACA,qCACA,qCACA,qCACA,qCACA,qCACA,qCACA,qCACA,qCACA,qCAMA,oDACA,oDACA,oDACA,oDACA,oDACA,oDACA,oDACA,oDACA,oDACA,oDAEA,2CACA,2CACA,2CACA,2CACA,2CACA,2CACA,2CACA,2CACA,2CACA,2CAMA,oDACA,oDACA,oDACA,oDACA,oDACA,oDACA,oDACA,oDACA,oDACA,oDAEA,2CACA,2CACA,2CACA,2CACA,2CACA,2CACA,2CACA,2CACA,2CACA,2CAMA,gDACA,gDACA,gDACA,gDACA,gDACA,gDACA,gDACA,gDACA,gDACA,gDAEA,uCACA,uCACA,uCACA,uCACA,uCACA,uCACA,uCACA,uCACA,uCACA,uCAMA,kDACA,kDACA,kDACA,kDACA,kDACA,kDACA,kDACA,kDACA,kDACA,kDAEA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCAMA,gDACA,gDACA,gDACA,gDACA,gDACA,gDACA,gDACA,gDACA,gDACA,gDAEA,uCACA,uCACA,uCACA,uCACA,uCACA,uCACA,uCACA,uCACA,uCACA,uCAMA,gDACA,gDACA,gDACA,gDACA,gDACA,gDACA,gDACA,gDACA,gDACA,gDAEA,uCACA,uCACA,uCACA,uCACA,uCACA,uCACA,uCACA,uCACA,uCACA,uCAMA,gDACA,gDACA,gDACA,gDACA,gDACA,gDACA,gDACA,gDACA,gDACA,gDAEA,uCACA,uCACA,uCACA,uCACA,uCACA,uCACA,uCACA,uCACA,uCACA,uCAMA,oDACA,oDACA,oDACA,oDACA,oDACA,oDACA,oDACA,oDACA,oDACA,oDAEA,2CACA,2CACA,2CACA,2CACA,2CACA,2CACA,2CACA,2CACA,2CACA,2CAMA,oDACA,oDACA,oDACA,oDACA,oDACA,oDACA,oDACA,oDACA,oDACA,oDAEA,2CACA,2CACA,2CACA,2CACA,2CACA,2CACA,2CACA,2CACA,2CACA,2CAMA,kDACA,kDACA,kDACA,kDACA,kDACA,kDACA,kDACA,kDACA,kDACA,kDAEA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCAMA,gDACA,gDACA,gDACA,gDACA,gDACA,gDACA,gDACA,gDACA,gDACA,gDAEA,uCACA,uCACA,uCACA,uCACA,uCACA,uCACA,uCACA,uCACA,uCACA,uCAMA,gDACA,gDACA,gDACA,gDACA,gDACA,gDACA,gDACA,gDACA,gDACA,gDAEA,uCACA,uCACA,uCACA,uCACA,uCACA,uCACA,uCACA,uCACA,uCACA,uCASA,ufAoCA,0fAqBA,kCAKA,qEAMA,iEAKA,mFAKA,wGASA,0HAMA,0LAMA,yLAOA,gIAMA,gMAMA,+LAOA,0HAMA,0LAMA,yLAOA,0HAMA,0LAMA,yLAOA,oHAMA,oLAMA,mLAOA,iHAMA,iLAMA,gLAOA,0GAMA,gLAMA,kHAMA,wLAMA,wHAMA,8LAMA,kHAMA,wLAMA,kHAMA,wLAMA,4GAMA,kLAMA,yGAMA,+KAOA,sFAMA,yJAKA,iJAMA,8FAMA,iKAKA,oKAKA,kGAMA,uKAKA,0KAKA,8FAMA,iKAKA,oKAKA,8FAMA,iKAKA,oKAKA,0FAMA,2JAKA,8JAKA,wFAMA,wJAKA,2JAMA,mHAMA,wKAMA,4IAMA,2JAOA,2JAOA,oDAOA,yJAYA,6FAQA,+FASA,8BAIA,mCAKA,6CASA,qEAMA,yNAcA,8NASA,6FAKA,oDAWA,m2BA2CA,oGAKA,mCACE,2GAWF,iqBA0BA,6WAgBA,+EAMA,+IAUA,ggBAkBA,qIAOA,kFAMA,qJASA,mDAMA,yNAeA,yNAeA,mJAYA,2OAcA,gHAOA,4LASA,yJAYA,mPAcA,0HAOA,wMASA,sMAUA,oFAMA,0DAKA,4DAMA,uCAKA,0CAKA,0HAQA,kFAMA,sDAIA,gIAQA,sDAIA,oHASA,4DAMA,iGAQA,0JAOA,yIAMA,+cAgBA,oHAKA,mHAKA,4GAKA,6GAWA,sbAmBA,sPAiBA,yaAgBA,6KAMA,uRAaA,gKAOA,6HAMA,uKAMA,qHASA,0GAUA,8TAcA,8YAgBA,iPAOA,uXAeA,+QAOA,8WAeA,iPAOA,mKAOA,uQASA,6QASA,uOAQA,6QASA,uOASA,kFAOA,kEAQA,iWAqBA,iPAeA,oXAgBA,kHAKA,gSAaA,uJAOA,oHAMA,8JAMA,kHASA,uGAUA,qTAcA,+VAgBA,mLAMA,uXAeA,qOAOA,uJAOA,wPASA,2PASA,qNAQA,yNAQA,2PASA,qNAQA,yNASA,+EAOA,+DAQA,0cAiBA,+DAIA,mCACE,sEAMF,sEAQA,sMAaA,yEAKA,4LAKA,oLAMA,2MASA,uNAUA,8OAWA,kMAQA,8cAeA,6HAMA,6UAYA,qHAKA,gGAMA,iIAKA,yHAMA,8FAKA,0IAKA,kIAKA,mQAOA,oKAMA,8FAKA,0IAKA,kIAKA,mQAOA,oKAOA,sSAaA,wKASA,wIAUA,woBAiCA,8DAIA,mCACE,qEAMF,oPAeA,0EAOA,2OAUA,gUAcA,4FAIA,0JAIA,kIAKA,8HAUA,oHASA,yGAWA,gOAaA,6SAcA,+WAgBA,yLAMA,8OAMA,2OAOA,6JAOA,oNAQA,uGAKA,4HAMA,sIAMA,qTAQA,2KAOA,kOAQA,uOAQA,6RAMA,2KAOA,kOAQA,uOAQA,6RAOA,yPAMA,yPAMA,iPAQA,yIAOA,iGASA,28BAuBA,4EAIA,kIAMA,+FASA,+9BAyBA,yaAUA,0ZAWA,+IAOA,yJAQA,+TAUA,+TAWA,6OAUA,4IAQA,4SAgBA,8CAIA,iRAaA,uHAMA,2JAMA,gIAOA,yNASA,uIAKA,yLASA,2ZAQA,ybAQA,wcASA,sBAEE,mVAsBA,mKAiBF,wdA4BA,sOAUA,mCACE,6OAWF,8SAaA,qNASA,qLAWA,wIAKA,uGAMA,sFAOA,mVASA,qIAKA,qDAIA,qDAKA,uDAKA,mDAIA,mDAKA,mVASA,0IAKA,qDAIA,qDAKA,uNAOA,oIAKA,yIAMA,4OAOA,8IAKA,kEAOA,4IAOA,0CAKA,yHAQA,8DAKA,yCAKA,gJAOA,sDAIA,sDAKA,4CAIA,uGASA,mIAOA,sIAOA,kGAKA,yIAMA,qFAMA,4GAMA,gJAKA,sDAKA,2DAOA,sBACE,kCAIA,gCAoBF,8JAWA,4UAeA,sEAIA,uEAIA,uEAIA,uEAIA,uEAIA,uEAIA,4GAQA,oIAMA,4EAKA,0EAKA,kEAKA,+IAOA,kFAKA,mFAKA,kIASA,6HAQA,+PAaA,8HASA,oHAOA,0DAKA,iDAKA,oCACE,sbAqBA,6UAaA,qKAOA,wJAMA,oIAMA,sHAMA,yHAQA,mIAUA,wIAQA,gFAKA,sGAMA,kFAKA,mHAOF,uCACE,6HAaF,wvBA2BA,kMAOA,mCACE,yMASF,sSAaA,2bAcA,gIASA,iFAKA,8IAMA,2QAaA,uBACE,uDAKF,uBACE,wDAMF,6RAcA,0EAMA,2GAMA,+DAOA,0HAUA,8JAQA,4JAOA,uGAKA,uHAMA,4LAcA,4KAUA,oIAKA,sGAKA,wIAMA,4EAOA,qCAKA,6DAOA,oLAaA,qDAMA,+HAMA,wEAIA,kHAKA,wDAIA,mKAMA,uFAIA,gIAMA,iEAKA,qIAKA,iIAMA,sHAUA,8EAMA,4GASA,iEAKA,oFAQA,sCAIA,uTAgBA,+CAIA,gSAeA,mKAOA,2HAKA,0GAKA,qDAIA,6JAOA,sBACE,uCAIA,gIAUA,mEAKA,2FAKA,iDAKA,2GASA,4DAIA,2CAMF,yBACE,iDAKA,kTAgBA,8MAOA,gCAIA,sFAIA,gCAKA,0GAMA,0DAIA,0EAIA,yJAWA,oEAIA,kHAOA,+DAMF,8DAKA,oDAIA,iDAKA,kCAUA,miBAoBA,uMAOA,mCACE,8MASF,mMAQA,mLASA,kEAIA,8CAKA,oKASA,qIAQA,wFAKA,wGAOA,mDAMA,yCAIA,gDAKA,uLASA,0CAIA,4CAKA,4HAmBA,sBACE,oDAIA,oDAIA,qDAMF,4HAMA,0EAIA,gDAIA,0EAIA,4EAMA,+EAIA,+EAKA,8DAKA,oCAIA,gDAKA,wJAOA,yFAMA,wDAMA,uOAaA,6HAMA,kFAKA,kHAMA,yBACE,0EAMA,wEAOF,6KAUA,oJAOA,4MAWA,2GAMA,wFAKA,kFAQA,2GAQA,mJAQA,8EAKA,6GAMA,iFAQA,4DAIA,kGAKA,mCACE,kEAIA,yGAWF,0aAsBA,qRAYA,oDAKA,4FAIA,oPASA,0HAOA,4HAMA,wIAQA,0FAKA,iIAOA,uFAMA,wFAOA,kDAIA,sDAIA,oDAIA,iDAIA,iDAKA,qIAKA,sIAMA,yBACE,qDAIA,iLAYF,8wBAmCA,yGAKA,mCACE,gHAOF,spBAuBA,yPASA,iCAKA,oFASA,2FAKA,mRAUA,8FAKA,sRAUA,4FAKA,6TAUA,6FAKA,8TASA,mJAKA,yJAKA,iKAKA,mKAMA,sIAMA,qJAKA,2JAKA,mKAKA,qKAMA,oGAKA,kJAKA,wJAKA,gKAKA,kKAMA,8IAMA,8JAKA,oKAKA,gMAKA,kMAKA,8IAMA,8JAKA,oKAKA,gMAKA,kMAMA,iCAKA,2DAWA,wmBAoBA,0NAOA,mCACE,iOASF,yEAQA,mOAUA,2EAMA,kgBAqBA,4GAKA,uIAQA,gSAQA,iMAOA,qXAmBA,2IAQA,iPAYA,mMAQA,iIAMA,wHAQA,yNASA,iHAOA,8FAKA,kLAOA,yKAOA,iNAMA,qOAQA,2NAUA,qHAKA,yLAOA,oOAOA,wUAOA,4UAWA,2MAMA,6HAKA,6MAMA,8HAMA,4GAMA,mHAKA,yBACE,+JAMA,8EAYF,4qBA2BA,2GAKA,mCACE,kHAOF,oDAMA,yHAQA,2QAcA,wEAKA,+kBAoBA,2OAQA,0EAOA,yHAQA,sEAIA,qHAQA,wEAIA,+HASA,uEAKA,yGAQA,sDAKA,iEAYA,6WAiBA,iKAOA,8FAKA,4LAOA,wJASA,kHAQA,0SAaA,0CAKA,wCAMA,kFAKA,sIAIA,mFAKA,wIAKA,0FAMA,uCAIA,wFAOA,+NAeA,yBACE,qEAaF,8lBA4BA,uDAIA,mCACE,8DAMF,kOAaA,yGAKA,2DAMA,2OAgBA,mFAQA,sQAWA,sDAKA,2SAcA,wOASA,oTAUA,kLASA,mWAiBA,uHAQA,8FAMA,gFAOA,uUAYA,4BAKA,gHAKA,gHAKA,gHAKA,qGAQA,4EAOA,+DAKA,kEAMA,mFAMA,mGAOA,yBACE,kFAMA,8EAOA,qFAQF,4DAIA,yEAIA,oDAIA,oEAKA,iDAUA,ubAiCA,2GAKA,yHAKA,mCACE,iHAKA,gIAOF,+XAeA,uFAKA,2FAKA,uFAKA,0FAKA,mFAKA,iFAKA,yFAKA,qFAMA,sHAKA,sHAMA,+IAMA,2DAKA,uGAKA,6GAKA,uGAKA,uGAKA,iGAKA,8FAKA,uGAKA,sGAMA,8IASA,gEAMA,+DAMA,qEAMA,oEAOA,6CAMA,mHAgBA,grBAyBA,8JAMA,mCACE,qKAQF,iMAUA,iVAYA,kDAIA,mGAKA,uJAMA,+EAOA,sQAaA,kEAMA,4EAMA,6CAKA,yLAQA,8EAIA,sIAOA,4EAMA,mEAKA,qFAQA,sHAQA,6WAaA,qIAMA,sGAIA,0EAIA,mGAIA,qHAIA,4DAKA,4HAIA,6HAKA,wEAIA,uEAIA,4HAIA,6HAKA,wEAIA,yEAKA,yBACE,mCAIA,4HAcF,wxBA0BA,8JAMA,mCACE,qKAQF,mFASA,0DAKA,8CAIA,8CAKA,ydAgBA,wLAOA,0FAOA,2NAQA,wMAOA,+OAUA,iFAKA,gFAKA,8EAMA,4JAQA,8JAKA,8JAMA,6CAIA,8CAKA,yBACE,qDAKA,mCAIA,qFAcF,ypBA6BA,yGAKA,mCACE,gHAOF,+QAaA,4DAMA,qTAiBA,2CAKA,8DAMA,iDAaA,mJAKA,+FAKA,wDAKA,iDAKA,sNASA,oIAOA,0SAeA,yEAOA,sFAQA,qJAOA,mDAOA,oOAUA,6CAKA,+BAIA,oVAaA,0HAMA,gGAKA,8KAOA,0IAQA,gDAIA,gFAIA,kGAIA,gDAIA,gFAIA,kGAMA,uTAiBA,0DAKA,oHAYA,0EAMA,yHAYA,gFAMA,gEAMA,mDAKA,mCAKA,yBACE,2BAKA,4DAMA,6DAIA,iDAIA,yDAeF,gVAWA,sEACA,wEACA,sEACA,sEAGA,iEACA,qEACA,iEACA,iEACA,6DACA,2DACA,4CACA,6DAGA,+HASA,mFAMA,uCACE,uCAWF,44BA8BA,sRAQA,mCACE,6RAUF,yRAWA,6IAMA,6IAMA,6IAMA,sJAOA,iIAOA,8DAMA,sGASA,gFAMA,yBAKA,yCAIA,uOAeA,gCAIA,2DAMA,8GAOA,4DAMA,2IAMA,2IAMA,8IAMA,qKAOA,kIAOA,yCAKA,qEAKA,yEAMA,qHAMA,uCACE,iCAUF,qdAoBA,wDAIA,mCACE,+DAMF,6YAkBA,0HAMA,0HAOA,mGAMA,yGAMA,mGAMA,sGAMA,yHAQA,0FAOA,4FAMA,oJAOA,oJAOA,oJAOA,4IAOA,wIAQA,4HAWA,sIASA,6NAWA,4DAKA,yRAoBA,gDAKA,oFAQA,gDAKA,kGAQA,mFAMA,mFAOA,gEAQA,uCACE,yDAaF,ghBAqBA,gJAMA,mCACE,uJAQF,6XAmBA,6EAQA,8DAMA,2HAMA,2HAMA,2HAMA,2HAMA,2HAMA,+HAOA,6DAIA,kCAKA,uNAaA,0JAOA,kUAgBA,yFACA,2FACA,qFACA,qFAGA,gGAIA,wGAIA,wGAIA,oGAKA,gEAKA,yFAKA,qDAIA,4CAKA,kDAIA,iDAKA,8WAeA,mFAKA,wFAKA,4FAKA,wFAKA,2FAKA,oFAKA,kFAMA,sFAMA,+DAKA,sHAOA,uCACE,6CAKA,yDAWF,uJAQA,2GAKA,mCACE,kHAOF,qIAQA,oNAiBA,0DAOA,6DAMA,uDAMA,mCACA,oCACA,oCACA,mCAGA,gEAMA,8CAMA,6DAMA,kDACA,8CACA,kDACA,8CACA,8CAGA,0CAKA,kCACA,kCAGA,uFAMA,8CAKA,8CAMA,iHAOA,sFAOA,oEAMA,yDAIA,gEACA,gEACA,gEACA,gEAGA,8DAMA,gEAMA,yDAIA,mFAQA,kGAOA,6GAOA,yDAKA,+BACA,6BACA,kCACA,6BACA,kCACA,6BAGA,uCAKA,sEAIA,sCAIA,0DAUA,uCACE,gEAMA,mCAUF,geAqBA,6DAIA,mCACE,oEAMF,uDAOA,+IAWA,gCAKA,saAiBA,0FAKA,yFAMA,2IAOA,iJASA,iCAKA,0BAIA,qCAKA,6DAKA,+CAKA,2JAQA,yFAKA,4EAIA,2LAOA,8FAKA,yDAKA,yFAKA,8JAOA,kKAMA,4FAMA,0RAQA,+KAQA,6EAIA,mDAKA,wHAKA,wHAMA,sCAIA,kCAIA,6DAMA,oDAKA,mDAKA,qCAIA,6IAQA,iEAKA,wKAQA,wKAMA,yEAOA,yDAOA,wQAcA,qHAMA,wHAOA,iEAKA,uCACE,yDAWF,uVAiBA,4FAKA,mCACE,mGAOF,4IAWA,iEAMA,iEAMA,2FAOA,uEAMA,uEAMA,iGAQA,ucAkBA,sNASA,sDAMA,yDAMA,4GAKA,8HAKA,kIAMA,qEAIA,4EAIA,gFAIA,uEAIA,+EAIA,kFAKA,6EAQA,qCAMA,gFAMA,kFAMA,sUAkBA,2DAKA,mEAIA,oEAOA,gEAIA,+DAIA,gEAIA,+DAIA,4DAIA,2DAIA,0DAIA,yDAKA,2IAMA,mEAIA,4EAIA,8IAMA,mEAIA,+EAIA,qIAMA,iEAIA,0EAIA,kIAMA,gEAIA,yEAKA,gOAWA,qDAUA,0DAMA,6DAKA,uCACE,2DAKA,mEAQA,mCAUF,ulCAwCA,8kBAuBA,mCACE,qlBA2BF,sLAaA,wXAgBA,qGAKA,sGAMA,iGAOA,4JAWA,iGAIA,2GAQA,sCAIA,4HAMA,8EAQA,yPAcA,iGAQA,mVAeA,kGAKA,mGAKA,kGAMA,4IAQA,4XAeA,mGAKA,mGAMA,sEAMA,shBAWA,2GAKA,mWAIA,iHAKA,uEAIA,qHASA,wDASA,0LASA,8CAIA,oQAcA,sDAIA,yDAIA,wQAYA,0EAIA,6CAMA,kKAYA,mCACA,qCACA,yCACA,6DAGA,6CACA,6CACA,uCACA,qCAGA,2CACA,6CACA,yCACA,6CACA,mDAMA,yEAIA,2DAQA,2EAMA,6DAIA,oFAKA,sEAQA,sFAKA,mIAUA,6DAIA,qEAQA,sBACE,+DAMA,+GAQA,sDAIA,+CAKA,qCAIA,+CASF,aACE,0DAKA,qEAKA,iDAIA,sEAKA,qIAaF,uCACE,iHAaF,kLAQA,iKAQA,0PAcA,8EACA,8EACA,0EACA,wEAGA,yCACA,yCACA,0CACA,0CAGA,wHAOA,sKAeA,yFAIA,0FAMA,iHAKA,8FAMA,uCACE,mGAOF,iEAIA,mCACE,wEAUF,8HAQA,mSAUA,uDAKA,gEAMA,2OAYA,8CAIA,4CAIA,yGAMA,kNAUA,6DAMA,oEACA,sEACA,oEACA,oEAGA,+DACA,+DACA,2DACA,yDACA,0CACA,2DAGA,2GAQA,2HASA,iGAQA,yMASA,sEAIA,sEAIA,uEAIA,oEAIA,6FAMA,gLASA,8HASA,kFAIA,mCACE,yFAMF,uCACE,2HAeF,0EAMA,oEAOA,8GAMA,8FAMA,+HAQA,4GAOA,0DAKA,oHAMA,yGAMA,mFAKA,kFAMA,2CAKA,qCAQA,+TAiBA,6dAoBA,6FAUA,0KAQA,8HAOA,8CAIA,yGAKA,kCAIA,uCAIA,mJASA,4EAMA,8MAWA,uEAKA,4FAKA,yGAMA,8EAMA,0PAaA,2JASA,sFAKA,0GAKA,8FAKA,yGAMA,oCAKA,mSAeA,+HAIA,8HAIA,kDAIA,uEAKA,oGAMA,kIAQA,qCAKA,6RAeA,gIAIA,+HAIA,mDAIA,wEAKA,qGAMA,mIAQA,+RAYA,+DAIA,8HAOA,kCAKA,6PAeA,6HAIA,4HAIA,gDAIA,qEAKA,kGAMA,gIAOA,8BAQA,8EAMA,gSAeA,8IAMA,wGAKA,iDAIA,sKAUA,wdAoBA,wFAMA,sEAQA,0CAIA,+CAIA,mMAUA,mMAcA,oDAQA,gFAMA,uOAaA,0GAKA,8FAKA,yGAKA,2JASA,iJASA,+DAIA,2GAMA,yEAKA,sEAQA,2CAKA,2SAeA,6GAIA,4GAIA,0DAIA,+EAKA,4GAMA,0IAWA,mCAIA,wDAKA,uIAaA,yCAKA,qQAeA,2GAIA,0GAIA,wDAIA,6EAKA,0GAMA,wIAOA,sCAQA,wGAKA,0HAKA,2TAUA,mCACE,8GAKA,sIAKA,0VAeF,yBACE,2RAiBA,qHAOA,yDAKA,0CASA,iTAiBA,uEAKA,gMAaA,qEAMF,sBACE,oEAaF,wDAIA,mEAIA,8GAKA,gGAQA,2KASA,sIAOA,yRAcA,sIAMA,6FAUA,uVASA,8HAKA,mCACE,qIAMF,0DAKA,kYAiBA,oMAQA,ysBA0BA,4IAMA,+JAQA,yZAkBA,gRASA,2PAYA,6VA0BA,mRAUA,2sBAkBA,iFAMA,mhBAoBA,+DAMA,waAaA,mHAMA,sMAYA,wfAuBA,6GAMA,gEAKA,uFAMA,+WAgBA,wFAMA,+EAMA,uCAEE,+HAQA,4CAMF,yBACE,+FAMA,+EAUF,qHAOA,0JASA,wOASA,+GAMA,wFAKA,iIAKA,2DAiBA,wjCAiCA,sHAKA,mCACE,6HAUF,oDASA,+EAOA,wLAYA,2IAMA,mfAeA,uEAKA,6JAOA,2FAMA,6fAqBA,kFAQA,6ZAkBA,6CAKA,qEAUA,mMAWA,kFAIA,gIAOA,kPAcA,iDAKA,yKAQA,gHAMA,mMAWA,sLAYA,oFAMA,2EAMA,uJAOA,sFASA,wFAMA,gOAUA,wDAUA,iNAWA,sWAeA,sEAUA,0KAKA,yJAKA,qKAKA,sKAKA,2KAKA,+JASA,oJAcA,sBACE,kCAIA,oFAQA,qCAIA,6FAKA,mCAIA,qJAWF,8GAYA,uCACE,sCAIA,wDAUF,23BA4BA,2XAUA,mCACE,kYAYF,oXAeA,sHAKA,qCAIA,0CAIA,qDAKA,+OAWA,oNAYA,wDAIA,0DAKA,iUAYA,sHAKA,wKAQA,8IASA,mNAYA,6QAWA,kGAMA,yUAcA,2HAKA,oPAUA,0CAKA,4OASA,mHASA,mCAKA,gKAUA,yBACE,sCAIA,kCAIA,2CAKA,8CAOF,0HAOA,+FAYA,kFAMA,8BACE,6DAKA,4GAMA,2CAIA,qEAKA,0FAYF,qmBAkCA,4HAMA,mCACE,mIASF,mNAaA,kKAQA,oEAOA,+GAQA,2DAOA,6CAIA,iLASA,uFAQA,ibAsBA,4IAOA,mFAKA,0HAMA,iDAIA,kDAMA,8OAcA,kOAWA,8CAIA,gGAKA,yGAOA,mJAUA,0GAOA,+FASA,uEAKA,mEAKA,yEAOA,sBACE,kEAMA,iDAWF,keAyBA,kKAMA,mCACE,yKASF,4fAmBA,iIAUA,8LAWA,iDAMA,2RAmBA,iCAIA,wJAUA,kJAOA,yIAOA,4IAOA,+IASA,4GAKA,wFAYA,4bAcA,qKAMA,mCACE,4KAOF,2bAeA,iDAIA,6HAQA,kJAOA,yIAOA,4IAOA,+IAOA,+FACA,2EAEA,+FAUA,qOAQA,mFAIA,mCACE,0FAOF,mMASA,6PAOA,qJAQA,8IAMA,kDASA,wGAMA,0CAIA,mCACE,iDAOF,sGAQA,mNASA,6DASA,kEAKA,wEAKA,oEAUA,4ZAsBA,uIAKA,mCACE,8IAQF,+VAiBA,qPASA,4GAMA,uHAKA,oCAIA,4EAOA,uFAMA,mFAQA,gFASA,kHASA,kIAQA,+HAQA,wIASA,2HAQA,yDAMA,kHAKA,sFAKA,oFAOA,+HAQA,0NAWA,0FAMA,8HAOA,+UAgBA,yFAMA,6HAEA,iIAEA,gIAEA,iIASA,iKAOA,wDAIA,mCACE,+DAOF,oKAWA,kIASA,6CAIA,mGAWA,uiBAoBA,6NAOA,mCACE,oOAUF,+FASA,qYAkBA,uCAMA,0IAOA,kGAKA,iHAMA,0EAKA,2DAMA,8GAQA,gHAWA,kpBAwBA,wMAOA,mCACE,+MAUF,sRAcA,2CAMA,4HAQA,4FAMA,8DAIA,iRAiBA,yFAOA,4EAQA,0MAaA,6GAOA,mQAeA,8DAIA,+EAKA,6HAMA,mEAIA,4GAQA,0IAMA,wIAMA,oEAOA,sHAQA,+LAWA,kGAKA,uJAWA,qbAcA,yMAOA,mCACE,gNAUF,2SAeA,2CAMA,sKASA,gEAIA,gIAMA,kFAWA,wdAgBA,uIAKA,mCACE,8IAQF,8EAOA,kHAUA,mXAYA,4YAgBA,yHAOA,+FAQA,+IAMA,kGAKA,wJAMA,iFAIA,mFAIA,4IAMA,gFAMA,kEAKA,mIAQA,uPASA,sHAMA,iGAQA,sDAIA,8FAUA,yeAiBA,2LAMA,mCACE,kMASF,2IAQA,+NAYA,8EAKA,8CAMA,uWAaA,0SAaA,2MAOA,sEAMA,6FAMA,6CAOA,0JAKA,0JAKA,uJAOA,wCAIA,mEAKA,6GAMA,yFAKA,kJAKA,iIAMA,sIAMA,sBACE,4GAIA,iIAKA,sOAUA,uPASF,kMASA,6NAOA,6EAKA,2FAKA,sBACE,iIAIA,gIAKF,uCACE,8IAaF,4OAaA,8EAIA,mCACE,qFAOF,2EAMA,4QAeA,qCAIA,2CAIA,8DAIA,8DAKA,gFAKA,yIAYA,uEAKA,yDAMA,iEAIA,iEAMA,0GAYA,qbAYA,qOAOA,mCACE,4OAUF,yEAMA,8MAYA,qVAYA,sEAOA,+GAKA,2NAYA,sHASA,kJAUA,oEAIA,6EAIA,gDAMA,+GAQA,4QAeA,mEAIA,wDAOA,sBACE,mCAIA,yCAUF,oQAUA,6HAKA,mCACE,oIAQF,4CAMA,qDAMA,gCAIA,wLAWA,oEAMA,iSAgBA,qCAIA,oFAKA,2EAOA,yCAOA,kGAMA,uFAIA,2CAIA,yCAMA,4FAQA,qHAOA,qGAQA,sDAMA,mDAIA,wMAUA,+OAeA,gkBAcA,gIAKA,mCACE,uIAQF,0JAaA,mWAWA,wEAMA,gFAQA,6FAOA,0EAKA,gDAKA,4NAUA,kEAIA,6HAMA,gFAMA,gSAkBA,4FAQA,0DAOA,kJAYA,iDAMA,oEAIA,wEAIA,oEAUA,iFAQA,sKAaA,iCAIA,iCAIA,iCAIA,mCAKA,uCACE,iGASF,yBACE,qLAcF,kFAKA,qRAYA,kNAcA,6eAWA,uDAMA,mFAMA,kFAMA,oFAMA,yJASA,4GAIA,yJAMA,yEAMA,6OAQA,iKAQA,2GAKA,0CACE,wDAMF,6CACE,+JAWA,sFAQF,uCACE,mCAIA,yEAmBF,8JASA,mHAUA,kmBAsBA,wHAIA,8bAkBA,sUA6BA,wNA2BA,yPAoBA,4GAIA,wGAmBA,yKAWA,uLAWA,sLAWA,oJAQA,2IAUA,8DAKA,8DAOA,uCACE,+GAgBF,aAEE,oHAUA,sCAKA,yDAKA,yDAMA,qDAMA,iEAMA,qBAMA,yCAIA,iCAIA,2BAKA,2OAkBA,0CAIA,4CAIA,wDAKA,yGAQA,6DAMA","sources":["vanduo-core.css"],"sourcesContent":["/**\n * Vanduo Framework - Main Stylesheet\n * Import all framework modules\n */\n\n/* Layer 0: Reset */\n/**\n * Vanduo Framework - CSS Reset\n * Modern CSS reset for consistent cross-browser styling\n */\n\n/* Box sizing rules */\n*,\n*::before,\n*::after {\n    box-sizing: border-box;\n}\n\n/* Remove default margin and padding */\n* {\n    margin: 0;\n    padding: 0;\n}\n\n/* Prevent font size inflation on mobile */\nhtml {\n    -moz-text-size-adjust: none;\n    -webkit-text-size-adjust: none;\n    text-size-adjust: none;\n}\n\n/* Set core body defaults */\nbody {\n    min-height: 100vh;\n    line-height: 1.5;\n    -webkit-font-smoothing: antialiased;\n}\n\n/* Remove list styles on ul, ol elements with a list role */\nul[role='list'],\nol[role='list'] {\n    list-style: none;\n}\n\n/* Set shorter line heights on headings and interactive elements */\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\nbutton,\ninput,\nlabel {\n    line-height: 1.1;\n}\n\n/* Balance text wrapping on headings */\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n    text-wrap: balance;\n}\n\n/* Anchor elements without a class get default styles */\na:not([class]) {\n    text-decoration-skip-ink: auto;\n    color: currentColor;\n}\n\n/* Make images easier to work with */\nimg,\npicture,\nvideo,\ncanvas,\nsvg {\n    display: block;\n    max-width: 100%;\n}\n\n/* Inherit fonts for inputs and buttons */\ninput,\nbutton,\ntextarea,\nselect {\n    font: inherit;\n}\n\n/* Make sure textareas without rows have a sensible min-height */\ntextarea:not([rows]) {\n    min-height: 10em;\n}\n\n/* Anything that has been anchored to should have extra scroll margin */\n:target {\n    scroll-margin-block: 5ex;\n}\n\n/* Remove all animations, transitions and smooth scroll for users that prefer reduced motion */\n@media (prefers-reduced-motion: reduce) {\n    html:focus-within {\n        scroll-behavior: auto;\n    }\n\n    *,\n    *::before,\n    *::after {\n        animation-duration: 0.01ms !important;\n        animation-iteration-count: 1 !important;\n        transition-duration: 0.01ms !important;\n        scroll-behavior: auto !important;\n    }\n}\n\n/* Ensure hidden attribute works as expected */\n[hidden] {\n    display: none !important;\n}\n\n/* Remove default button styles */\nbutton {\n    background: none;\n    border: none;\n    cursor: pointer;\n}\n\n/* Table reset */\ntable {\n    border-collapse: collapse;\n    border-spacing: 0;\n}\n\n/* Layer 1: Foundation (vd-prefixed palette and canonical tokens)\n   Palette layering (generated by @vanduo-oss/core):\n     colors-fib-base.css  raw namespaced scales (--vd-oc-* / --vd-fib-*)  [before]\n     colors.css           legacy literals, semantics, theming, hue remaps\n     colors-palette.css   active scales + [data-palette] switch (Fibonacci default) [after] */\n/**\n * Vanduo Framework - Palette Base Scales (generated)\n *\n * Raw, palette-namespaced color scales for the runtime [data-palette] switch.\n *   --vd-oc-*  Open Color (optional palette)\n *   --vd-fib-* Fibonacci / golden-angle (optional palette) + golden accent track\n *\n * Generated by @vanduo-oss/core scripts/generate-fib-palette.mjs from the shared\n * token sources. Do not edit by hand; run `pnpm gen:fib` in ../core.\n */\n\n:root {\n  /* Open Color palette (optional) */\n  --vd-oc-gray-0: #f8f9fa;\n  --vd-oc-gray-1: #f1f3f5;\n  --vd-oc-gray-2: #e9ecef;\n  --vd-oc-gray-3: #dee2e6;\n  --vd-oc-gray-4: #ced4da;\n  --vd-oc-gray-5: #adb5bd;\n  --vd-oc-gray-6: #868e96;\n  --vd-oc-gray-7: #495057;\n  --vd-oc-gray-8: #343a40;\n  --vd-oc-gray-9: #212529;\n  --vd-oc-primary-0: #edf2ff;\n  --vd-oc-primary-1: #dbe4ff;\n  --vd-oc-primary-2: #bac8ff;\n  --vd-oc-primary-3: #91a7ff;\n  --vd-oc-primary-4: #748ffc;\n  --vd-oc-primary-5: #5c7cfa;\n  --vd-oc-primary-6: #4c6ef5;\n  --vd-oc-primary-7: #4263eb;\n  --vd-oc-primary-8: #3b5bdb;\n  --vd-oc-primary-9: #364fc7;\n  --vd-oc-secondary-0: #e6fcf5;\n  --vd-oc-secondary-1: #c3fae8;\n  --vd-oc-secondary-2: #96f2d7;\n  --vd-oc-secondary-3: #63e6be;\n  --vd-oc-secondary-4: #38d9a9;\n  --vd-oc-secondary-5: #20c997;\n  --vd-oc-secondary-6: #12b886;\n  --vd-oc-secondary-7: #0ca678;\n  --vd-oc-secondary-8: #099268;\n  --vd-oc-secondary-9: #087f5b;\n  --vd-oc-danger-0: #fff5f5;\n  --vd-oc-danger-1: #ffe3e3;\n  --vd-oc-danger-2: #ffc9c9;\n  --vd-oc-danger-3: #ffa8a8;\n  --vd-oc-danger-4: #ff8787;\n  --vd-oc-danger-5: #ff6b6b;\n  --vd-oc-danger-6: #fa5252;\n  --vd-oc-danger-7: #f03e3e;\n  --vd-oc-danger-8: #e03131;\n  --vd-oc-danger-9: #c92a2a;\n  --vd-oc-error-0: #fff5f5;\n  --vd-oc-error-1: #ffe3e3;\n  --vd-oc-error-2: #ffc9c9;\n  --vd-oc-error-3: #ffa8a8;\n  --vd-oc-error-4: #ff8787;\n  --vd-oc-error-5: #ff6b6b;\n  --vd-oc-error-6: #fa5252;\n  --vd-oc-error-7: #f03e3e;\n  --vd-oc-error-8: #e03131;\n  --vd-oc-error-9: #c92a2a;\n  --vd-oc-success-0: #ebfbee;\n  --vd-oc-success-1: #d3f9d8;\n  --vd-oc-success-2: #b2f2bb;\n  --vd-oc-success-3: #8ce99a;\n  --vd-oc-success-4: #69db7c;\n  --vd-oc-success-5: #51cf66;\n  --vd-oc-success-6: #40c057;\n  --vd-oc-success-7: #37b24d;\n  --vd-oc-success-8: #2f9e44;\n  --vd-oc-success-9: #2b8a3e;\n  --vd-oc-warning-0: #fff9db;\n  --vd-oc-warning-1: #fff3bf;\n  --vd-oc-warning-2: #ffec99;\n  --vd-oc-warning-3: #ffe066;\n  --vd-oc-warning-4: #ffd43b;\n  --vd-oc-warning-5: #fcc419;\n  --vd-oc-warning-6: #fab005;\n  --vd-oc-warning-7: #f59f00;\n  --vd-oc-warning-8: #f08c00;\n  --vd-oc-warning-9: #e67700;\n  --vd-oc-info-0: #e7f5ff;\n  --vd-oc-info-1: #d0ebff;\n  --vd-oc-info-2: #a5d8ff;\n  --vd-oc-info-3: #74c0fc;\n  --vd-oc-info-4: #4dabf7;\n  --vd-oc-info-5: #339af0;\n  --vd-oc-info-6: #228be6;\n  --vd-oc-info-7: #1c7ed6;\n  --vd-oc-info-8: #1971c2;\n  --vd-oc-info-9: #1864ab;\n  --vd-oc-red-0: #fff5f5;\n  --vd-oc-red-1: #ffe3e3;\n  --vd-oc-red-2: #ffc9c9;\n  --vd-oc-red-3: #ffa8a8;\n  --vd-oc-red-4: #ff8787;\n  --vd-oc-red-5: #ff6b6b;\n  --vd-oc-red-6: #fa5252;\n  --vd-oc-red-7: #f03e3e;\n  --vd-oc-red-8: #e03131;\n  --vd-oc-red-9: #c92a2a;\n  --vd-oc-orange-0: #fff4e6;\n  --vd-oc-orange-1: #ffe8cc;\n  --vd-oc-orange-2: #ffd8a8;\n  --vd-oc-orange-3: #ffc078;\n  --vd-oc-orange-4: #ffa94d;\n  --vd-oc-orange-5: #ff922b;\n  --vd-oc-orange-6: #fd7e14;\n  --vd-oc-orange-7: #f76707;\n  --vd-oc-orange-8: #e8590c;\n  --vd-oc-orange-9: #d9480f;\n  --vd-oc-yellow-0: #fff9db;\n  --vd-oc-yellow-1: #fff3bf;\n  --vd-oc-yellow-2: #ffec99;\n  --vd-oc-yellow-3: #ffe066;\n  --vd-oc-yellow-4: #ffd43b;\n  --vd-oc-yellow-5: #fcc419;\n  --vd-oc-yellow-6: #fab005;\n  --vd-oc-yellow-7: #f59f00;\n  --vd-oc-yellow-8: #f08c00;\n  --vd-oc-yellow-9: #e67700;\n  --vd-oc-lime-0: #f4fce3;\n  --vd-oc-lime-1: #e9fac8;\n  --vd-oc-lime-2: #d8f5a2;\n  --vd-oc-lime-3: #c0eb75;\n  --vd-oc-lime-4: #a9e34b;\n  --vd-oc-lime-5: #94d82d;\n  --vd-oc-lime-6: #82c91e;\n  --vd-oc-lime-7: #74b816;\n  --vd-oc-lime-8: #66a80f;\n  --vd-oc-lime-9: #5c940d;\n  --vd-oc-green-0: #ebfbee;\n  --vd-oc-green-1: #d3f9d8;\n  --vd-oc-green-2: #b2f2bb;\n  --vd-oc-green-3: #8ce99a;\n  --vd-oc-green-4: #69db7c;\n  --vd-oc-green-5: #51cf66;\n  --vd-oc-green-6: #40c057;\n  --vd-oc-green-7: #37b24d;\n  --vd-oc-green-8: #2f9e44;\n  --vd-oc-green-9: #2b8a3e;\n  --vd-oc-teal-0: #e6fcf5;\n  --vd-oc-teal-1: #c3fae8;\n  --vd-oc-teal-2: #96f2d7;\n  --vd-oc-teal-3: #63e6be;\n  --vd-oc-teal-4: #38d9a9;\n  --vd-oc-teal-5: #20c997;\n  --vd-oc-teal-6: #12b886;\n  --vd-oc-teal-7: #0ca678;\n  --vd-oc-teal-8: #099268;\n  --vd-oc-teal-9: #087f5b;\n  --vd-oc-cyan-0: #e3fafc;\n  --vd-oc-cyan-1: #c5f6fa;\n  --vd-oc-cyan-2: #99e9f2;\n  --vd-oc-cyan-3: #66d9e8;\n  --vd-oc-cyan-4: #3bc9db;\n  --vd-oc-cyan-5: #22b8cf;\n  --vd-oc-cyan-6: #15aabf;\n  --vd-oc-cyan-7: #1098ad;\n  --vd-oc-cyan-8: #0c8599;\n  --vd-oc-cyan-9: #0b7285;\n  --vd-oc-blue-0: #e7f5ff;\n  --vd-oc-blue-1: #d0ebff;\n  --vd-oc-blue-2: #a5d8ff;\n  --vd-oc-blue-3: #74c0fc;\n  --vd-oc-blue-4: #4dabf7;\n  --vd-oc-blue-5: #339af0;\n  --vd-oc-blue-6: #228be6;\n  --vd-oc-blue-7: #1c7ed6;\n  --vd-oc-blue-8: #1971c2;\n  --vd-oc-blue-9: #1864ab;\n  --vd-oc-indigo-0: #edf2ff;\n  --vd-oc-indigo-1: #dbe4ff;\n  --vd-oc-indigo-2: #bac8ff;\n  --vd-oc-indigo-3: #91a7ff;\n  --vd-oc-indigo-4: #748ffc;\n  --vd-oc-indigo-5: #5c7cfa;\n  --vd-oc-indigo-6: #4c6ef5;\n  --vd-oc-indigo-7: #4263eb;\n  --vd-oc-indigo-8: #3b5bdb;\n  --vd-oc-indigo-9: #364fc7;\n  --vd-oc-violet-0: #f3f0ff;\n  --vd-oc-violet-1: #e5dbff;\n  --vd-oc-violet-2: #d0bfff;\n  --vd-oc-violet-3: #b197fc;\n  --vd-oc-violet-4: #9775fa;\n  --vd-oc-violet-5: #845ef7;\n  --vd-oc-violet-6: #7950f2;\n  --vd-oc-violet-7: #7048e8;\n  --vd-oc-violet-8: #6741d9;\n  --vd-oc-violet-9: #5f3dc4;\n  --vd-oc-grape-0: #f8f0fc;\n  --vd-oc-grape-1: #f3d9fa;\n  --vd-oc-grape-2: #eebefa;\n  --vd-oc-grape-3: #e599f7;\n  --vd-oc-grape-4: #da77f2;\n  --vd-oc-grape-5: #cc5de8;\n  --vd-oc-grape-6: #be4bdb;\n  --vd-oc-grape-7: #ae3ec9;\n  --vd-oc-grape-8: #9c36b5;\n  --vd-oc-grape-9: #862e9c;\n  --vd-oc-pink-0: #fff0f6;\n  --vd-oc-pink-1: #ffdeeb;\n  --vd-oc-pink-2: #fcc2d7;\n  --vd-oc-pink-3: #faa2c1;\n  --vd-oc-pink-4: #f783ac;\n  --vd-oc-pink-5: #f06595;\n  --vd-oc-pink-6: #e64980;\n  --vd-oc-pink-7: #d6336c;\n  --vd-oc-pink-8: #c2255c;\n  --vd-oc-pink-9: #a61e4d;\n  --vd-oc-slate-0: #f8fafc;\n  --vd-oc-slate-1: #f1f5f9;\n  --vd-oc-slate-2: #e2e8f0;\n  --vd-oc-slate-3: #cbd5e1;\n  --vd-oc-slate-4: #94a3b8;\n  --vd-oc-slate-5: #64748b;\n  --vd-oc-slate-6: #475569;\n  --vd-oc-slate-7: #334155;\n  --vd-oc-slate-8: #1e293b;\n  --vd-oc-slate-9: #0f172a;\n  --vd-oc-charcoal-0: #f5f7f8;\n  --vd-oc-charcoal-1: #e7ebee;\n  --vd-oc-charcoal-2: #ced6dc;\n  --vd-oc-charcoal-3: #adb8c1;\n  --vd-oc-charcoal-4: #8b98a3;\n  --vd-oc-charcoal-5: #6d7c88;\n  --vd-oc-charcoal-6: #53616d;\n  --vd-oc-charcoal-7: #394754;\n  --vd-oc-charcoal-8: #202c38;\n  --vd-oc-charcoal-9: #0d1117;\n  --vd-oc-zinc-0: #fafafa;\n  --vd-oc-zinc-1: #f4f4f5;\n  --vd-oc-zinc-2: #e4e4e7;\n  --vd-oc-zinc-3: #d4d4d8;\n  --vd-oc-zinc-4: #a1a1aa;\n  --vd-oc-zinc-5: #71717a;\n  --vd-oc-zinc-6: #52525b;\n  --vd-oc-zinc-7: #3f3f46;\n  --vd-oc-zinc-8: #27272a;\n  --vd-oc-zinc-9: #18181b;\n  --vd-oc-neutral-0: #fafafa;\n  --vd-oc-neutral-1: #f5f5f5;\n  --vd-oc-neutral-2: #e5e5e5;\n  --vd-oc-neutral-3: #d4d4d4;\n  --vd-oc-neutral-4: #a3a3a3;\n  --vd-oc-neutral-5: #737373;\n  --vd-oc-neutral-6: #525252;\n  --vd-oc-neutral-7: #404040;\n  --vd-oc-neutral-8: #262626;\n  --vd-oc-neutral-9: #171717;\n  --vd-oc-stone-0: #fafaf9;\n  --vd-oc-stone-1: #f5f5f4;\n  --vd-oc-stone-2: #e7e5e4;\n  --vd-oc-stone-3: #d6d3d1;\n  --vd-oc-stone-4: #a8a29e;\n  --vd-oc-stone-5: #78716c;\n  --vd-oc-stone-6: #57534e;\n  --vd-oc-stone-7: #44403c;\n  --vd-oc-stone-8: #292524;\n  --vd-oc-stone-9: #1c1917;\n\n  /* Fibonacci (golden-angle) palette (default) + golden accent track */\n  --vd-fib-gray-0: #f5f6f6;\n  --vd-fib-gray-1: #e7e8e9;\n  --vd-fib-gray-2: #d3d5d7;\n  --vd-fib-gray-3: #bdc0c2;\n  --vd-fib-gray-4: #a6a9ac;\n  --vd-fib-gray-5: #8f9296;\n  --vd-fib-gray-6: #797c80;\n  --vd-fib-gray-7: #616366;\n  --vd-fib-gray-8: #494b4d;\n  --vd-fib-gray-9: #323334;\n  --vd-fib-slate-0: #f4f6f7;\n  --vd-fib-slate-1: #e5e8eb;\n  --vd-fib-slate-2: #d1d5da;\n  --vd-fib-slate-3: #bac0c6;\n  --vd-fib-slate-4: #a2a9b0;\n  --vd-fib-slate-5: #8b939a;\n  --vd-fib-slate-6: #757d84;\n  --vd-fib-slate-7: #5d646a;\n  --vd-fib-slate-8: #464b50;\n  --vd-fib-slate-9: #303336;\n  --vd-fib-charcoal-0: #f5f6f7;\n  --vd-fib-charcoal-1: #e6e8ea;\n  --vd-fib-charcoal-2: #d2d5d9;\n  --vd-fib-charcoal-3: #bcc0c5;\n  --vd-fib-charcoal-4: #a4a9ae;\n  --vd-fib-charcoal-5: #8d9399;\n  --vd-fib-charcoal-6: #777d83;\n  --vd-fib-charcoal-7: #5f6469;\n  --vd-fib-charcoal-8: #474b4f;\n  --vd-fib-charcoal-9: #313336;\n  --vd-fib-zinc-0: #f6f6f6;\n  --vd-fib-zinc-1: #e8e8e9;\n  --vd-fib-zinc-2: #d4d4d7;\n  --vd-fib-zinc-3: #bfbfc2;\n  --vd-fib-zinc-4: #a8a8ab;\n  --vd-fib-zinc-5: #929295;\n  --vd-fib-zinc-6: #7c7c7f;\n  --vd-fib-zinc-7: #636366;\n  --vd-fib-zinc-8: #4a4a4c;\n  --vd-fib-zinc-9: #333334;\n  --vd-fib-neutral-0: #f6f6f6;\n  --vd-fib-neutral-1: #e8e8e8;\n  --vd-fib-neutral-2: #d5d5d5;\n  --vd-fib-neutral-3: #bfbfbf;\n  --vd-fib-neutral-4: #a8a8a8;\n  --vd-fib-neutral-5: #929292;\n  --vd-fib-neutral-6: #7c7c7c;\n  --vd-fib-neutral-7: #636363;\n  --vd-fib-neutral-8: #4a4a4a;\n  --vd-fib-neutral-9: #333333;\n  --vd-fib-stone-0: #f6f6f5;\n  --vd-fib-stone-1: #e9e7e6;\n  --vd-fib-stone-2: #d7d4d2;\n  --vd-fib-stone-3: #c2bfbb;\n  --vd-fib-stone-4: #aba8a3;\n  --vd-fib-stone-5: #95918d;\n  --vd-fib-stone-6: #7f7b77;\n  --vd-fib-stone-7: #66635f;\n  --vd-fib-stone-8: #4c4a47;\n  --vd-fib-stone-9: #343230;\n  --vd-fib-primary-0: #e4fbfc;\n  --vd-fib-primary-1: #c1f3f5;\n  --vd-fib-primary-2: #8fe6eb;\n  --vd-fib-primary-3: #51d6dd;\n  --vd-fib-primary-4: #00bfc7;\n  --vd-fib-primary-5: #00a6ad;\n  --vd-fib-primary-6: #008d93;\n  --vd-fib-primary-7: #007176;\n  --vd-fib-primary-8: #005559;\n  --vd-fib-primary-9: #003b3e;\n  --vd-fib-secondary-0: #fff1fa;\n  --vd-fib-secondary-1: #ffdcf4;\n  --vd-fib-secondary-2: #fac0e9;\n  --vd-fib-secondary-3: #efa3da;\n  --vd-fib-secondary-4: #de85c6;\n  --vd-fib-secondary-5: #ca6bb2;\n  --vd-fib-secondary-6: #b2549b;\n  --vd-fib-secondary-7: #92407e;\n  --vd-fib-secondary-8: #6e305f;\n  --vd-fib-secondary-9: #4c2041;\n  --vd-fib-danger-0: #fff3f1;\n  --vd-fib-danger-1: #ffe0db;\n  --vd-fib-danger-2: #ffc4bd;\n  --vd-fib-danger-3: #ffa499;\n  --vd-fib-danger-4: #f68176;\n  --vd-fib-danger-5: #e3655b;\n  --vd-fib-danger-6: #c94d45;\n  --vd-fib-danger-7: #a63933;\n  --vd-fib-danger-8: #7d2b26;\n  --vd-fib-danger-9: #571d19;\n  --vd-fib-error-0: #fff3f1;\n  --vd-fib-error-1: #ffe0db;\n  --vd-fib-error-2: #ffc4bd;\n  --vd-fib-error-3: #ffa499;\n  --vd-fib-error-4: #f68176;\n  --vd-fib-error-5: #e3655b;\n  --vd-fib-error-6: #c94d45;\n  --vd-fib-error-7: #a63933;\n  --vd-fib-error-8: #7d2b26;\n  --vd-fib-error-9: #571d19;\n  --vd-fib-success-0: #ecfbed;\n  --vd-fib-success-1: #d2f2d5;\n  --vd-fib-success-2: #b0e5b6;\n  --vd-fib-success-3: #8bd496;\n  --vd-fib-success-4: #67bf76;\n  --vd-fib-success-5: #46aa5b;\n  --vd-fib-success-6: #299344;\n  --vd-fib-success-7: #167732;\n  --vd-fib-success-8: #125925;\n  --vd-fib-success-9: #0d3e19;\n  --vd-fib-warning-0: #fff4e6;\n  --vd-fib-warning-1: #fce4c3;\n  --vd-fib-warning-2: #f6ce97;\n  --vd-fib-warning-3: #ebb567;\n  --vd-fib-warning-4: #d99b35;\n  --vd-fib-warning-5: #c38400;\n  --vd-fib-warning-6: #a66f00;\n  --vd-fib-warning-7: #865900;\n  --vd-fib-warning-8: #654200;\n  --vd-fib-warning-9: #472d00;\n  --vd-fib-info-0: #eff7ff;\n  --vd-fib-info-1: #d7eaff;\n  --vd-fib-info-2: #b5d9ff;\n  --vd-fib-info-3: #8dc5ff;\n  --vd-fib-info-4: #61adfa;\n  --vd-fib-info-5: #3f96e9;\n  --vd-fib-info-6: #227fd1;\n  --vd-fib-info-7: #0f66ac;\n  --vd-fib-info-8: #0d4c82;\n  --vd-fib-info-9: #09345a;\n  --vd-fib-red-0: #fff3f1;\n  --vd-fib-red-1: #ffe0db;\n  --vd-fib-red-2: #ffc4bd;\n  --vd-fib-red-3: #ffa499;\n  --vd-fib-red-4: #f68176;\n  --vd-fib-red-5: #e3655b;\n  --vd-fib-red-6: #c94d45;\n  --vd-fib-red-7: #a63933;\n  --vd-fib-red-8: #7d2b26;\n  --vd-fib-red-9: #571d19;\n  --vd-fib-orange-0: #fff3ed;\n  --vd-fib-orange-1: #ffe1d1;\n  --vd-fib-orange-2: #ffc7a8;\n  --vd-fib-orange-3: #fbaa7c;\n  --vd-fib-orange-4: #eb8d55;\n  --vd-fib-orange-5: #d87331;\n  --vd-fib-orange-6: #c05b0e;\n  --vd-fib-orange-7: #9c4700;\n  --vd-fib-orange-8: #773501;\n  --vd-fib-orange-9: #522403;\n  --vd-fib-yellow-0: #fbf6e4;\n  --vd-fib-yellow-1: #f2e8c2;\n  --vd-fib-yellow-2: #e6d595;\n  --vd-fib-yellow-3: #d7bf65;\n  --vd-fib-yellow-4: #c3a730;\n  --vd-fib-yellow-5: #ac9000;\n  --vd-fib-yellow-6: #937a00;\n  --vd-fib-yellow-7: #766200;\n  --vd-fib-yellow-8: #594900;\n  --vd-fib-yellow-9: #3d3200;\n  --vd-fib-lime-0: #f1f9e8;\n  --vd-fib-lime-1: #deefcb;\n  --vd-fib-lime-2: #c5e0a5;\n  --vd-fib-lime-3: #aace7d;\n  --vd-fib-lime-4: #90b856;\n  --vd-fib-lime-5: #77a331;\n  --vd-fib-lime-6: #628c0a;\n  --vd-fib-lime-7: #4d7000;\n  --vd-fib-lime-8: #395400;\n  --vd-fib-lime-9: #273a03;\n  --vd-fib-green-0: #ecfbed;\n  --vd-fib-green-1: #d2f2d5;\n  --vd-fib-green-2: #b0e5b6;\n  --vd-fib-green-3: #8bd496;\n  --vd-fib-green-4: #67bf76;\n  --vd-fib-green-5: #46aa5b;\n  --vd-fib-green-6: #299344;\n  --vd-fib-green-7: #167732;\n  --vd-fib-green-8: #125925;\n  --vd-fib-green-9: #0d3e19;\n  --vd-fib-teal-0: #e7fbf6;\n  --vd-fib-teal-1: #c7f3e8;\n  --vd-fib-teal-2: #9be6d5;\n  --vd-fib-teal-3: #69d6c0;\n  --vd-fib-teal-4: #2bc2a8;\n  --vd-fib-teal-5: #00aa92;\n  --vd-fib-teal-6: #00917c;\n  --vd-fib-teal-7: #007463;\n  --vd-fib-teal-8: #00574a;\n  --vd-fib-teal-9: #003c33;\n  --vd-fib-cyan-0: #e5fbfc;\n  --vd-fib-cyan-1: #c4f2f4;\n  --vd-fib-cyan-2: #95e5e9;\n  --vd-fib-cyan-3: #5ed4db;\n  --vd-fib-cyan-4: #00bfc7;\n  --vd-fib-cyan-5: #00a6ad;\n  --vd-fib-cyan-6: #008d93;\n  --vd-fib-cyan-7: #007176;\n  --vd-fib-cyan-8: #005559;\n  --vd-fib-cyan-9: #003b3e;\n  --vd-fib-blue-0: #eff7ff;\n  --vd-fib-blue-1: #d7eaff;\n  --vd-fib-blue-2: #b5d9ff;\n  --vd-fib-blue-3: #8dc5ff;\n  --vd-fib-blue-4: #61adfa;\n  --vd-fib-blue-5: #3f96e9;\n  --vd-fib-blue-6: #227fd1;\n  --vd-fib-blue-7: #0f66ac;\n  --vd-fib-blue-8: #0d4c82;\n  --vd-fib-blue-9: #09345a;\n  --vd-fib-indigo-0: #f2f5ff;\n  --vd-fib-indigo-1: #e0e7ff;\n  --vd-fib-indigo-2: #c6d3ff;\n  --vd-fib-indigo-3: #a9bcff;\n  --vd-fib-indigo-4: #8ba2fd;\n  --vd-fib-indigo-5: #738aec;\n  --vd-fib-indigo-6: #5e73d4;\n  --vd-fib-indigo-7: #495baf;\n  --vd-fib-indigo-8: #374484;\n  --vd-fib-indigo-9: #252f5c;\n  --vd-fib-violet-0: #f6f4ff;\n  --vd-fib-violet-1: #e9e3ff;\n  --vd-fib-violet-2: #d8ccff;\n  --vd-fib-violet-3: #c4b2ff;\n  --vd-fib-violet-4: #af96f4;\n  --vd-fib-violet-5: #9a7de3;\n  --vd-fib-violet-6: #8466ca;\n  --vd-fib-violet-7: #6a50a7;\n  --vd-fib-violet-8: #503c7e;\n  --vd-fib-violet-9: #362957;\n  --vd-fib-grape-0: #fff1ff;\n  --vd-fib-grape-1: #faddfb;\n  --vd-fib-grape-2: #f2c2f4;\n  --vd-fib-grape-3: #e5a6e8;\n  --vd-fib-grape-4: #d389d7;\n  --vd-fib-grape-5: #bf6fc4;\n  --vd-fib-grape-6: #a758ac;\n  --vd-fib-grape-7: #88448d;\n  --vd-fib-grape-8: #67336a;\n  --vd-fib-grape-9: #472249;\n  --vd-fib-pink-0: #fff2f7;\n  --vd-fib-pink-1: #ffddeb;\n  --vd-fib-pink-2: #ffc0da;\n  --vd-fib-pink-3: #f9a1c7;\n  --vd-fib-pink-4: #e883b1;\n  --vd-fib-pink-5: #d5689c;\n  --vd-fib-pink-6: #bc5085;\n  --vd-fib-pink-7: #9a3c6b;\n  --vd-fib-pink-8: #742d50;\n  --vd-fib-pink-9: #501f37;\n  --vd-fib-golden-1: #008d93;\n  --vd-fib-golden-2: #b5509d;\n  --vd-fib-golden-3: #7a8400;\n  --vd-fib-golden-4: #227dd7;\n  --vd-fib-golden-5: #c94e3e;\n  --vd-fib-golden-6: #00926e;\n  --vd-fib-golden-7: #935fc7;\n  --vd-fib-golden-8: #9f7400;\n}\n\n/**\n * Vanduo Framework - Color System\n *\n * Palette system: the DEFAULT palette is Fibonacci (golden-angle generated);\n * Open Color is an opt-in alternative via [data-palette=\"open-color\"]. The raw,\n * namespaced scales for both palettes live in colors-fib-base.css, and the\n * active scales + runtime switch live in colors-palette.css (both generated by\n * @vanduo-oss/core). The literal values below are the legacy Open Color scales;\n * colors-palette.css rebinds the active --vd-<family>-<step> scales on top.\n *\n * Open Color (https://yeun.github.io/open-color/) is MIT licensed,\n * Copyright (c) 2016 Heeyeun Jeong.\n *\n * @license MIT\n */\n\n:root {\n  /* ═══════════════════════════════════════════════════════════════════════\n   * OPEN COLOR PALETTE (legacy literals; rebound by colors-palette.css)\n   * ═══════════════════════════════════════════════════════════════════════ */\n\n  /* --- NEUTRALS: Gray Scale (Open Color Gray 0-9) ---\n   * Used for: Backgrounds, borders, text, and UI structure\n   */\n  --vd-gray-0: #f8f9fa;\n  /* Lightest - hover backgrounds, light sections */\n  --vd-gray-1: #f1f3f5;\n  --vd-gray-2: #e9ecef;\n  /* Secondary backgrounds, cards */\n  --vd-gray-3: #dee2e6;\n  /* Borders, dividers */\n  --vd-gray-4: #ced4da;\n  --vd-gray-5: #adb5bd;\n  /* Disabled text, placeholders */\n  --vd-gray-6: #868e96;\n  /* Muted text */\n  --vd-gray-7: #495057;\n  /* Secondary text */\n  --vd-gray-8: #343a40;\n  /* Primary text */\n  --vd-gray-9: #212529;\n  /* Darkest - headings, dark mode backgrounds */\n\n  /* --- PRIMARY: Indigo Scale (Open Color Indigo 0-9) ---\n   * Global default for buttons, links, highlights, brand elements\n   * Used for: Buttons, links, highlights, brand elements\n   */\n  --vd-primary-0: #edf2ff;\n  /* Lightest - hover backgrounds, highlights */\n  --vd-primary-1: #dbe4ff;\n  --vd-primary-2: #bac8ff;\n  --vd-primary-3: #91a7ff;\n  --vd-primary-4: #748ffc;\n  --vd-primary-5: #5c7cfa;\n  /* ★ Main brand color */\n  --vd-primary-6: #4c6ef5;\n  /* Hover state */\n  --vd-primary-7: #4263eb;\n  /* Active state */\n  --vd-primary-8: #3b5bdb;\n  --vd-primary-9: #364fc7;\n  /* Darkest - pressed state */\n\n  /* --- SECONDARY: Teal Scale (Open Color Teal 0-9) ---\n   * Complementary to Cyan for secondary actions\n   */\n  --vd-secondary-0: #e6fcf5;\n  --vd-secondary-1: #c3fae8;\n  --vd-secondary-2: #96f2d7;\n  --vd-secondary-3: #63e6be;\n  --vd-secondary-4: #38d9a9;\n  --vd-secondary-5: #20c997;\n  /* ★ Main secondary color */\n  --vd-secondary-6: #12b886;\n  /* Hover state */\n  --vd-secondary-7: #0ca678;\n  /* Active state */\n  --vd-secondary-8: #099268;\n  --vd-secondary-9: #087f5b;\n\n  /* --- FUNCTIONAL: Semantic Colors ---\n   * Used for: Status indicators, feedback, alerts\n   */\n\n  /* Danger/Error - Open Color Red */\n  --vd-danger-0: #fff5f5;\n  --vd-danger-1: #ffe3e3;\n  --vd-danger-2: #ffc9c9;\n  --vd-danger-3: #ffa8a8;\n  --vd-danger-4: #ff8787;\n  --vd-danger-5: #ff6b6b;\n  --vd-danger-6: #fa5252;\n  /* ★ Main danger color */\n  --vd-danger-7: #f03e3e;\n  /* Hover state */\n  --vd-danger-8: #e03131;\n  --vd-danger-9: #c92a2a;\n  /* Active state */\n\n  /* Error aliases (maps to danger scale for consistent naming) */\n  --vd-error-0: var(--vd-danger-0);\n  --vd-error-1: var(--vd-danger-1);\n  --vd-error-2: var(--vd-danger-2);\n  --vd-error-3: var(--vd-danger-3);\n  --vd-error-4: var(--vd-danger-4);\n  --vd-error-5: var(--vd-danger-5);\n  --vd-error-6: var(--vd-danger-6);\n  --vd-error-7: var(--vd-danger-7);\n  --vd-error-8: var(--vd-danger-8);\n  --vd-error-9: var(--vd-danger-9);\n\n  /* Success - Open Color Green */\n  --vd-success-0: #ebfbee;\n  --vd-success-1: #d3f9d8;\n  --vd-success-2: #b2f2bb;\n  --vd-success-3: #8ce99a;\n  --vd-success-4: #69db7c;\n  --vd-success-5: #51cf66;\n  --vd-success-6: #40c057;\n  /* ★ Main success color */\n  --vd-success-7: #37b24d;\n  /* Hover state */\n  --vd-success-8: #2f9e44;\n  --vd-success-9: #2b8a3e;\n  /* Active state */\n\n  /* Warning - Open Color Yellow */\n  --vd-warning-0: #fff9db;\n  --vd-warning-1: #fff3bf;\n  --vd-warning-2: #ffec99;\n  --vd-warning-3: #ffe066;\n  --vd-warning-4: #ffd43b;\n  --vd-warning-5: #fcc419;\n  --vd-warning-6: #fab005;\n  /* ★ Main warning color */\n  --vd-warning-7: #f59f00;\n  /* Hover state */\n  --vd-warning-8: #f08c00;\n  --vd-warning-9: #e67700;\n  /* Active state */\n\n  /* Info - Open Color Blue (complementary to Cyan) */\n  --vd-info-0: #e7f5ff;\n  --vd-info-1: #d0ebff;\n  --vd-info-2: #a5d8ff;\n  --vd-info-3: #74c0fc;\n  --vd-info-4: #4dabf7;\n  --vd-info-5: #339af0;\n  --vd-info-6: #228be6;\n  /* ★ Main info color */\n  --vd-info-7: #1c7ed6;\n  /* Hover state */\n  --vd-info-8: #1971c2;\n  --vd-info-9: #1864ab;\n  /* Active state */\n\n  /* ═══════════════════════════════════════════════════════════════════════\n   * EXTENDED COLOR PALETTES (for Theme Customizer)\n   * All colors from Open Color palette\n   * ═══════════════════════════════════════════════════════════════════════ */\n\n  /* --- Red Scale --- */\n  --vd-red-0: #fff5f5;\n  --vd-red-1: #ffe3e3;\n  --vd-red-2: #ffc9c9;\n  --vd-red-3: #ffa8a8;\n  --vd-red-4: #ff8787;\n  --vd-red-5: #ff6b6b;\n  --vd-red-6: #fa5252;\n  --vd-red-7: #f03e3e;\n  --vd-red-8: #e03131;\n  --vd-red-9: #c92a2a;\n\n  /* --- Orange Scale --- */\n  --vd-orange-0: #fff4e6;\n  --vd-orange-1: #ffe8cc;\n  --vd-orange-2: #ffd8a8;\n  --vd-orange-3: #ffc078;\n  --vd-orange-4: #ffa94d;\n  --vd-orange-5: #ff922b;\n  --vd-orange-6: #fd7e14;\n  --vd-orange-7: #f76707;\n  --vd-orange-8: #e8590c;\n  --vd-orange-9: #d9480f;\n\n  /* --- Yellow Scale --- */\n  --vd-yellow-0: #fff9db;\n  --vd-yellow-1: #fff3bf;\n  --vd-yellow-2: #ffec99;\n  --vd-yellow-3: #ffe066;\n  --vd-yellow-4: #ffd43b;\n  --vd-yellow-5: #fcc419;\n  --vd-yellow-6: #fab005;\n  --vd-yellow-7: #f59f00;\n  --vd-yellow-8: #f08c00;\n  --vd-yellow-9: #e67700;\n\n  /* --- Lime Scale --- */\n  --vd-lime-0: #f4fce3;\n  --vd-lime-1: #e9fac8;\n  --vd-lime-2: #d8f5a2;\n  --vd-lime-3: #c0eb75;\n  --vd-lime-4: #a9e34b;\n  --vd-lime-5: #94d82d;\n  --vd-lime-6: #82c91e;\n  --vd-lime-7: #74b816;\n  --vd-lime-8: #66a80f;\n  --vd-lime-9: #5c940d;\n\n  /* --- Green Scale --- */\n  --vd-green-0: #ebfbee;\n  --vd-green-1: #d3f9d8;\n  --vd-green-2: #b2f2bb;\n  --vd-green-3: #8ce99a;\n  --vd-green-4: #69db7c;\n  --vd-green-5: #51cf66;\n  --vd-green-6: #40c057;\n  --vd-green-7: #37b24d;\n  --vd-green-8: #2f9e44;\n  --vd-green-9: #2b8a3e;\n\n  /* --- Teal Scale --- */\n  --vd-teal-0: #e6fcf5;\n  --vd-teal-1: #c3fae8;\n  --vd-teal-2: #96f2d7;\n  --vd-teal-3: #63e6be;\n  --vd-teal-4: #38d9a9;\n  --vd-teal-5: #20c997;\n  --vd-teal-6: #12b886;\n  --vd-teal-7: #0ca678;\n  --vd-teal-8: #099268;\n  --vd-teal-9: #087f5b;\n\n  /* --- Cyan Scale --- */\n  --vd-cyan-0: #e3fafc;\n  --vd-cyan-1: #c5f6fa;\n  --vd-cyan-2: #99e9f2;\n  --vd-cyan-3: #66d9e8;\n  --vd-cyan-4: #3bc9db;\n  --vd-cyan-5: #22b8cf;\n  --vd-cyan-6: #15aabf;\n  --vd-cyan-7: #1098ad;\n  --vd-cyan-8: #0c8599;\n  --vd-cyan-9: #0b7285;\n\n  /* --- Blue Scale --- */\n  --vd-blue-0: #e7f5ff;\n  --vd-blue-1: #d0ebff;\n  --vd-blue-2: #a5d8ff;\n  --vd-blue-3: #74c0fc;\n  --vd-blue-4: #4dabf7;\n  --vd-blue-5: #339af0;\n  --vd-blue-6: #228be6;\n  --vd-blue-7: #1c7ed6;\n  --vd-blue-8: #1971c2;\n  --vd-blue-9: #1864ab;\n\n  /* --- Indigo Scale --- */\n  --vd-indigo-0: #edf2ff;\n  --vd-indigo-1: #dbe4ff;\n  --vd-indigo-2: #bac8ff;\n  --vd-indigo-3: #91a7ff;\n  --vd-indigo-4: #748ffc;\n  --vd-indigo-5: #5c7cfa;\n  --vd-indigo-6: #4c6ef5;\n  --vd-indigo-7: #4263eb;\n  --vd-indigo-8: #3b5bdb;\n  --vd-indigo-9: #364fc7;\n\n  /* --- Violet Scale --- */\n  --vd-violet-0: #f3f0ff;\n  --vd-violet-1: #e5dbff;\n  --vd-violet-2: #d0bfff;\n  --vd-violet-3: #b197fc;\n  --vd-violet-4: #9775fa;\n  --vd-violet-5: #845ef7;\n  --vd-violet-6: #7950f2;\n  --vd-violet-7: #7048e8;\n  --vd-violet-8: #6741d9;\n  --vd-violet-9: #5f3dc4;\n\n  /* --- Grape (Purple) Scale --- */\n  --vd-grape-0: #f8f0fc;\n  --vd-grape-1: #f3d9fa;\n  --vd-grape-2: #eebefa;\n  --vd-grape-3: #e599f7;\n  --vd-grape-4: #da77f2;\n  --vd-grape-5: #cc5de8;\n  --vd-grape-6: #be4bdb;\n  --vd-grape-7: #ae3ec9;\n  --vd-grape-8: #9c36b5;\n  --vd-grape-9: #862e9c;\n\n  /* --- Pink Scale --- */\n  --vd-pink-0: #fff0f6;\n  --vd-pink-1: #ffdeeb;\n  --vd-pink-2: #fcc2d7;\n  --vd-pink-3: #faa2c1;\n  --vd-pink-4: #f783ac;\n  --vd-pink-5: #f06595;\n  --vd-pink-6: #e64980;\n  --vd-pink-7: #d6336c;\n  --vd-pink-8: #c2255c;\n  --vd-pink-9: #a61e4d;\n\n  /* ═══════════════════════════════════════════════════════════════════════\n   * NEUTRAL COLOR ALTERNATIVES (for Theme Customizer)\n   * ═══════════════════════════════════════════════════════════════════════ */\n\n  /* --- Slate Scale (Cool blue-gray) --- */\n  --vd-slate-0: #f8fafc;\n  --vd-slate-1: #f1f5f9;\n  --vd-slate-2: #e2e8f0;\n  --vd-slate-3: #cbd5e1;\n  --vd-slate-4: #94a3b8;\n  --vd-slate-5: #64748b;\n  --vd-slate-6: #475569;\n  --vd-slate-7: #334155;\n  --vd-slate-8: #1e293b;\n  --vd-slate-9: #0f172a;\n\n  /* --- Charcoal Scale (Deep cool charcoal) --- */\n  --vd-charcoal-0: #f5f7f8;\n  --vd-charcoal-1: #e7ebee;\n  --vd-charcoal-2: #ced6dc;\n  --vd-charcoal-3: #adb8c1;\n  --vd-charcoal-4: #8b98a3;\n  --vd-charcoal-5: #6d7c88;\n  --vd-charcoal-6: #53616d;\n  --vd-charcoal-7: #394754;\n  --vd-charcoal-8: #202c38;\n  --vd-charcoal-9: #0d1117;\n\n  /* --- Zinc Scale (Slightly warm gray) --- */\n  --vd-zinc-0: #fafafa;\n  --vd-zinc-1: #f4f4f5;\n  --vd-zinc-2: #e4e4e7;\n  --vd-zinc-3: #d4d4d8;\n  --vd-zinc-4: #a1a1aa;\n  --vd-zinc-5: #71717a;\n  --vd-zinc-6: #52525b;\n  --vd-zinc-7: #3f3f46;\n  --vd-zinc-8: #27272a;\n  --vd-zinc-9: #18181b;\n\n  /* --- Neutral Scale (True neutral) --- */\n  --vd-neutral-0: #fafafa;\n  --vd-neutral-1: #f5f5f5;\n  --vd-neutral-2: #e5e5e5;\n  --vd-neutral-3: #d4d4d4;\n  --vd-neutral-4: #a3a3a3;\n  --vd-neutral-5: #737373;\n  --vd-neutral-6: #525252;\n  --vd-neutral-7: #404040;\n  --vd-neutral-8: #262626;\n  --vd-neutral-9: #171717;\n\n  /* --- Stone Scale (Warm beige-gray) --- */\n  --vd-stone-0: #fafaf9;\n  --vd-stone-1: #f5f5f4;\n  --vd-stone-2: #e7e5e4;\n  --vd-stone-3: #d6d3d1;\n  --vd-stone-4: #a8a29e;\n  --vd-stone-5: #78716c;\n  --vd-stone-6: #57534e;\n  --vd-stone-7: #44403c;\n  --vd-stone-8: #292524;\n  --vd-stone-9: #1c1917;\n\n  /* ═══════════════════════════════════════════════════════════════════════\n   * SEMANTIC COLOR TOKENS\n   * Canonical Vanduo names mapped to Open Color scales\n   * ═══════════════════════════════════════════════════════════════════════ */\n\n  /* Primary Brand */\n  --vd-color-primary: var(--vd-primary-5);\n  --vd-color-primary-light: var(--vd-primary-3);\n  --vd-color-primary-dark: var(--vd-primary-7);\n  --vd-color-primary-hover: var(--vd-primary-6);\n  --vd-color-primary-active: var(--vd-primary-7);\n\n  /* Secondary */\n  --vd-color-secondary: var(--vd-secondary-5);\n  --vd-color-secondary-light: var(--vd-secondary-3);\n  --vd-color-secondary-dark: var(--vd-secondary-7);\n  --vd-color-secondary-hover: var(--vd-secondary-6);\n  --vd-color-secondary-active: var(--vd-secondary-7);\n\n  /* Accent - Same as primary for Vanduo */\n  --vd-color-accent: var(--vd-primary-5);\n  --vd-color-accent-light: var(--vd-primary-3);\n  --vd-color-accent-dark: var(--vd-primary-7);\n\n  /* Semantic - Success */\n  --vd-color-success: var(--vd-success-6);\n  --vd-color-success-light: var(--vd-success-4);\n  --vd-color-success-dark: var(--vd-success-7);\n  --vd-color-success-hover: var(--vd-success-7);\n  --vd-color-success-active: var(--vd-success-8);\n\n  /* Semantic - Warning */\n  --vd-color-warning: var(--vd-warning-6);\n  --vd-color-warning-light: var(--vd-warning-4);\n  --vd-color-warning-dark: var(--vd-warning-7);\n  --vd-color-warning-hover: var(--vd-warning-7);\n  --vd-color-warning-active: var(--vd-warning-8);\n\n  /* Semantic - Error/Danger */\n  --vd-color-error: var(--vd-danger-6);\n  --vd-color-error-light: var(--vd-danger-4);\n  --vd-color-error-dark: var(--vd-danger-7);\n  --vd-color-error-hover: var(--vd-danger-7);\n  --vd-color-error-active: var(--vd-danger-8);\n\n  /* Semantic - Info */\n  --vd-color-info: var(--vd-info-6);\n  --vd-color-info-light: var(--vd-info-4);\n  --vd-color-info-dark: var(--vd-info-7);\n  --vd-color-info-hover: var(--vd-info-7);\n  --vd-color-info-active: var(--vd-info-8);\n\n  /* Base Colors */\n  --vd-color-white: #ffffff;\n  --vd-color-black: #000000;\n\n  /* Neutral semantic gray tokens */\n  --vd-color-gray-50: var(--vd-gray-0);\n  --vd-color-gray-100: var(--vd-gray-2);\n  --vd-color-gray-200: var(--vd-gray-3);\n  --vd-color-gray-300: var(--vd-gray-4);\n  --vd-color-gray-400: var(--vd-gray-5);\n  --vd-color-gray-500: var(--vd-gray-6);\n  --vd-color-gray-600: var(--vd-gray-7);\n  --vd-color-gray-700: var(--vd-gray-8);\n  --vd-color-gray-800: var(--vd-gray-9);\n  --vd-color-gray-900: #1a1d20;\n  /* Slightly darker than gray-9 */\n\n  /* ═══════════════════════════════════════════════════════════════════════\n   * APPLICATION-SPECIFIC VARIABLES\n   * ═══════════════════════════════════════════════════════════════════════ */\n\n  /* Background Colors */\n  --vd-bg-primary: var(--vd-color-white);\n  --vd-bg-secondary: var(--vd-gray-0);\n  --vd-bg-tertiary: var(--vd-gray-1);\n  --vd-bg-dark: var(--vd-gray-8);\n  --vd-bg-darker: var(--vd-gray-9);\n\n  /* Text Colors */\n  --vd-text-primary: var(--vd-gray-8);\n  --vd-text-secondary: var(--vd-gray-7);\n  --vd-text-muted: var(--vd-gray-5);\n  --vd-text-light: var(--vd-gray-4);\n  --vd-text-inverse: var(--vd-color-white);\n\n  /* Border Colors */\n  --vd-border-color: var(--vd-gray-3);\n  --vd-border-color-light: var(--vd-gray-2);\n  --vd-border-color-dark: var(--vd-gray-4);\n\n  /* Alpha Colors (for hover/active states) — palette-agnostic via color-mix\n   * so they track whichever palette / data-primary is active. */\n  --vd-color-primary-alpha-10: color-mix(in srgb, var(--vd-color-primary) 10%, transparent);\n  --vd-color-primary-alpha-20: color-mix(in srgb, var(--vd-color-primary) 20%, transparent);\n  --vd-color-secondary-alpha-10: color-mix(in srgb, var(--vd-color-secondary) 10%, transparent);\n  --vd-color-secondary-alpha-20: color-mix(in srgb, var(--vd-color-secondary) 20%, transparent);\n  --vd-color-success-alpha-10: color-mix(in srgb, var(--vd-color-success) 10%, transparent);\n  --vd-color-success-alpha-20: color-mix(in srgb, var(--vd-color-success) 20%, transparent);\n  --vd-color-error-alpha-10: color-mix(in srgb, var(--vd-color-error) 10%, transparent);\n  --vd-color-error-alpha-20: color-mix(in srgb, var(--vd-color-error) 20%, transparent);\n  --vd-color-warning-alpha-10: color-mix(in srgb, var(--vd-color-warning) 10%, transparent);\n  --vd-color-warning-alpha-20: color-mix(in srgb, var(--vd-color-warning) 20%, transparent);\n  --vd-color-info-alpha-10: color-mix(in srgb, var(--vd-color-info) 10%, transparent);\n  --vd-color-info-alpha-20: color-mix(in srgb, var(--vd-color-info) 20%, transparent);\n}\n\n/* ═════════════════════════════════════════════════════════════════════════\n * BACKGROUND COLOR UTILITIES\n * ═════════════════════════════════════════════════════════════════════════ */\n\n.vd-bg-primary,\n.bg-primary {\n  background-color: var(--vd-color-primary);\n}\n\n.vd-bg-secondary,\n.bg-secondary {\n  background-color: var(--vd-color-secondary);\n}\n\n.vd-bg-accent,\n.bg-accent {\n  background-color: var(--vd-color-accent);\n}\n\n.vd-bg-success,\n.bg-success {\n  background-color: var(--vd-color-success);\n}\n\n.vd-bg-warning,\n.bg-warning {\n  background-color: var(--vd-color-warning);\n}\n\n.vd-bg-error,\n.bg-error {\n  background-color: var(--vd-color-error);\n}\n\n.vd-bg-info,\n.bg-info {\n  background-color: var(--vd-color-info);\n}\n\n.vd-bg-white,\n.bg-white {\n  background-color: var(--vd-color-white);\n}\n\n.vd-bg-black,\n.bg-black {\n  background-color: var(--vd-color-black);\n}\n\n.vd-bg-dark,\n.bg-dark {\n  background-color: var(--vd-bg-dark);\n}\n\n.vd-bg-light,\n.bg-light {\n  background-color: var(--vd-bg-secondary);\n}\n\n/* ═════════════════════════════════════════════════════════════════════════\n * TEXT COLOR UTILITIES\n * ═════════════════════════════════════════════════════════════════════════ */\n\n.vd-text-primary {\n  color: var(--vd-color-primary);\n}\n\n.vd-text-secondary {\n  color: var(--vd-text-secondary);\n}\n\n.vd-text-success {\n  color: var(--vd-color-success);\n}\n\n.vd-text-warning {\n  color: var(--vd-color-warning);\n}\n\n.vd-text-error {\n  color: var(--vd-color-error);\n}\n\n.vd-text-info {\n  color: var(--vd-color-info);\n}\n\n.vd-text-white {\n  color: var(--vd-color-white);\n}\n\n.vd-text-black {\n  color: var(--vd-color-black);\n}\n\n.vd-text-muted {\n  color: var(--vd-text-muted);\n}\n\n.vd-text-light {\n  color: var(--vd-text-light);\n}\n\n.vd-text-inverse {\n  color: var(--vd-text-inverse);\n}\n\n/* ═════════════════════════════════════════════════════════════════════════\n * BORDER COLOR UTILITIES\n * ═════════════════════════════════════════════════════════════════════════ */\n\n.vd-border-primary,\n.border-primary {\n  border-color: var(--vd-color-primary);\n}\n\n.vd-border-secondary,\n.border-secondary {\n  border-color: var(--vd-color-secondary);\n}\n\n.vd-border-success,\n.border-success {\n  border-color: var(--vd-color-success);\n}\n\n.vd-border-warning,\n.border-warning {\n  border-color: var(--vd-color-warning);\n}\n\n.vd-border-error,\n.border-error {\n  border-color: var(--vd-color-error);\n}\n\n.vd-border-info,\n.border-info {\n  border-color: var(--vd-color-info);\n}\n\n.vd-border-light,\n.border-light {\n  border-color: var(--vd-border-color-light);\n}\n\n.vd-border-dark,\n.border-dark {\n  border-color: var(--vd-border-color-dark);\n}\n\n/* ═════════════════════════════════════════════════════════════════════════\n * DARK THEME OVERRIDES\n * ═════════════════════════════════════════════════════════════════════════ */\n\n[data-theme=\"dark\"] {\n  /* Background Colors */\n  --vd-bg-primary: var(--vd-gray-9);\n  --vd-bg-secondary: var(--vd-gray-8);\n  --vd-bg-tertiary: var(--vd-gray-7);\n  --vd-bg-dark: var(--vd-color-black);\n  --vd-bg-darker: #000000;\n\n  /* Text Colors */\n  --vd-text-primary: var(--vd-gray-0);\n  --vd-text-secondary: var(--vd-gray-3);\n  --vd-text-muted: var(--vd-gray-4);\n  --vd-text-light: var(--vd-gray-5);\n  --vd-text-inverse: var(--vd-gray-9);\n\n  /* Border Colors */\n  --vd-border-color: var(--vd-gray-7);\n  --vd-border-color-light: var(--vd-gray-8);\n  --vd-border-color-dark: var(--vd-gray-6);\n\n  /* Primary - Slightly brighter for dark backgrounds */\n  --vd-color-primary: var(--vd-primary-4);\n  --vd-color-primary-light: var(--vd-primary-3);\n  --vd-color-primary-dark: var(--vd-primary-5);\n  --vd-color-primary-hover: var(--vd-primary-5);\n  --vd-color-primary-active: var(--vd-primary-6);\n\n  /* Secondary */\n  --vd-color-secondary: var(--vd-secondary-4);\n  --vd-color-secondary-hover: var(--vd-secondary-5);\n\n  /* Alpha Colors for Dark Mode — palette-agnostic */\n  --vd-color-primary-alpha-10: color-mix(in srgb, var(--vd-color-primary) 15%, transparent);\n  --vd-color-primary-alpha-20: color-mix(in srgb, var(--vd-color-primary) 25%, transparent);\n}\n\n@media (prefers-color-scheme: dark) {\n  :root:not([data-theme]) {\n    /* Background Colors */\n    --vd-bg-primary: var(--vd-gray-9);\n    --vd-bg-secondary: var(--vd-gray-8);\n    --vd-bg-tertiary: var(--vd-gray-7);\n    --vd-bg-dark: var(--vd-color-black);\n    --vd-bg-darker: #000000;\n\n    /* Text Colors */\n    --vd-text-primary: var(--vd-gray-0);\n    --vd-text-secondary: var(--vd-gray-3);\n    --vd-text-muted: var(--vd-gray-4);\n    --vd-text-light: var(--vd-gray-5);\n    --vd-text-inverse: var(--vd-gray-9);\n\n    /* Border Colors */\n    --vd-border-color: var(--vd-gray-7);\n    --vd-border-color-light: var(--vd-gray-8);\n    --vd-border-color-dark: var(--vd-gray-6);\n\n    /* Primary - Slightly brighter for dark backgrounds */\n    --vd-color-primary: var(--vd-primary-4);\n    --vd-color-primary-light: var(--vd-primary-3);\n    --vd-color-primary-dark: var(--vd-primary-5);\n    --vd-color-primary-hover: var(--vd-primary-5);\n    --vd-color-primary-active: var(--vd-primary-6);\n\n    /* Secondary */\n    --vd-color-secondary: var(--vd-secondary-4);\n    --vd-color-secondary-hover: var(--vd-secondary-5);\n\n    /* Alpha Colors for Dark Mode — palette-agnostic */\n    --vd-color-primary-alpha-10: color-mix(in srgb, var(--vd-color-primary) 15%, transparent);\n    --vd-color-primary-alpha-20: color-mix(in srgb, var(--vd-color-primary) 25%, transparent);\n  }\n}\n\n/* ═════════════════════════════════════════════════════════════════════════\n * DYNAMIC PRIMARY COLOR SWITCHING (Theme Customizer)\n * These rules remap --vd-primary-* variables based on [data-primary] attribute\n * ═════════════════════════════════════════════════════════════════════════ */\n\n/* Red Primary */\nhtml[data-primary=\"red\"] {\n  --vd-primary-0: var(--vd-red-0);\n  --vd-primary-1: var(--vd-red-1);\n  --vd-primary-2: var(--vd-red-2);\n  --vd-primary-3: var(--vd-red-3);\n  --vd-primary-4: var(--vd-red-4);\n  --vd-primary-5: var(--vd-red-5);\n  --vd-primary-6: var(--vd-red-6);\n  --vd-primary-7: var(--vd-red-7);\n  --vd-primary-8: var(--vd-red-8);\n  --vd-primary-9: var(--vd-red-9);\n}\n\n/* Orange Primary */\nhtml[data-primary=\"orange\"] {\n  --vd-primary-0: var(--vd-orange-0);\n  --vd-primary-1: var(--vd-orange-1);\n  --vd-primary-2: var(--vd-orange-2);\n  --vd-primary-3: var(--vd-orange-3);\n  --vd-primary-4: var(--vd-orange-4);\n  --vd-primary-5: var(--vd-orange-5);\n  --vd-primary-6: var(--vd-orange-6);\n  --vd-primary-7: var(--vd-orange-7);\n  --vd-primary-8: var(--vd-orange-8);\n  --vd-primary-9: var(--vd-orange-9);\n}\n\n/* Amber Primary (using yellow with warmer tones) */\nhtml[data-primary=\"amber\"] {\n  --vd-primary-0: #fffbeb;\n  --vd-primary-1: #fef3c7;\n  --vd-primary-2: #fde68a;\n  --vd-primary-3: #fcd34d;\n  --vd-primary-4: #fbbf24;\n  --vd-primary-5: #f59e0b;\n  --vd-primary-6: #d97706;\n  --vd-primary-7: #b45309;\n  --vd-primary-8: #92400e;\n  --vd-primary-9: #78350f;\n}\n\n/* Yellow Primary */\nhtml[data-primary=\"yellow\"] {\n  --vd-primary-0: var(--vd-yellow-0);\n  --vd-primary-1: var(--vd-yellow-1);\n  --vd-primary-2: var(--vd-yellow-2);\n  --vd-primary-3: var(--vd-yellow-3);\n  --vd-primary-4: var(--vd-yellow-4);\n  --vd-primary-5: var(--vd-yellow-5);\n  --vd-primary-6: var(--vd-yellow-6);\n  --vd-primary-7: var(--vd-yellow-7);\n  --vd-primary-8: var(--vd-yellow-8);\n  --vd-primary-9: var(--vd-yellow-9);\n}\n\n/* Lime Primary */\nhtml[data-primary=\"lime\"] {\n  --vd-primary-0: var(--vd-lime-0);\n  --vd-primary-1: var(--vd-lime-1);\n  --vd-primary-2: var(--vd-lime-2);\n  --vd-primary-3: var(--vd-lime-3);\n  --vd-primary-4: var(--vd-lime-4);\n  --vd-primary-5: var(--vd-lime-5);\n  --vd-primary-6: var(--vd-lime-6);\n  --vd-primary-7: var(--vd-lime-7);\n  --vd-primary-8: var(--vd-lime-8);\n  --vd-primary-9: var(--vd-lime-9);\n}\n\n/* Green Primary */\nhtml[data-primary=\"green\"] {\n  --vd-primary-0: var(--vd-green-0);\n  --vd-primary-1: var(--vd-green-1);\n  --vd-primary-2: var(--vd-green-2);\n  --vd-primary-3: var(--vd-green-3);\n  --vd-primary-4: var(--vd-green-4);\n  --vd-primary-5: var(--vd-green-5);\n  --vd-primary-6: var(--vd-green-6);\n  --vd-primary-7: var(--vd-green-7);\n  --vd-primary-8: var(--vd-green-8);\n  --vd-primary-9: var(--vd-green-9);\n}\n\n/* Emerald Primary (slightly different green) */\nhtml[data-primary=\"emerald\"] {\n  --vd-primary-0: #ecfdf5;\n  --vd-primary-1: #d1fae5;\n  --vd-primary-2: #a7f3d0;\n  --vd-primary-3: #6ee7b7;\n  --vd-primary-4: #34d399;\n  --vd-primary-5: #10b981;\n  --vd-primary-6: #059669;\n  --vd-primary-7: #047857;\n  --vd-primary-8: #065f46;\n  --vd-primary-9: #064e3b;\n}\n\n/* Teal Primary */\nhtml[data-primary=\"teal\"] {\n  --vd-primary-0: var(--vd-teal-0);\n  --vd-primary-1: var(--vd-teal-1);\n  --vd-primary-2: var(--vd-teal-2);\n  --vd-primary-3: var(--vd-teal-3);\n  --vd-primary-4: var(--vd-teal-4);\n  --vd-primary-5: var(--vd-teal-5);\n  --vd-primary-6: var(--vd-teal-6);\n  --vd-primary-7: var(--vd-teal-7);\n  --vd-primary-8: var(--vd-teal-8);\n  --vd-primary-9: var(--vd-teal-9);\n}\n\n/* Cyan Primary (default - no override needed, but included for completeness) */\nhtml[data-primary=\"cyan\"] {\n  --vd-primary-0: var(--vd-cyan-0);\n  --vd-primary-1: var(--vd-cyan-1);\n  --vd-primary-2: var(--vd-cyan-2);\n  --vd-primary-3: var(--vd-cyan-3);\n  --vd-primary-4: var(--vd-cyan-4);\n  --vd-primary-5: var(--vd-cyan-5);\n  --vd-primary-6: var(--vd-cyan-6);\n  --vd-primary-7: var(--vd-cyan-7);\n  --vd-primary-8: var(--vd-cyan-8);\n  --vd-primary-9: var(--vd-cyan-9);\n}\n\n/* Sky Primary */\nhtml[data-primary=\"sky\"] {\n  --vd-primary-0: #f0f9ff;\n  --vd-primary-1: #e0f2fe;\n  --vd-primary-2: #bae6fd;\n  --vd-primary-3: #7dd3fc;\n  --vd-primary-4: #38bdf8;\n  --vd-primary-5: #0ea5e9;\n  --vd-primary-6: #0284c7;\n  --vd-primary-7: #0369a1;\n  --vd-primary-8: #075985;\n  --vd-primary-9: #0c4a6e;\n}\n\n/* Blue Primary */\nhtml[data-primary=\"blue\"] {\n  --vd-primary-0: var(--vd-blue-0);\n  --vd-primary-1: var(--vd-blue-1);\n  --vd-primary-2: var(--vd-blue-2);\n  --vd-primary-3: var(--vd-blue-3);\n  --vd-primary-4: var(--vd-blue-4);\n  --vd-primary-5: var(--vd-blue-5);\n  --vd-primary-6: var(--vd-blue-6);\n  --vd-primary-7: var(--vd-blue-7);\n  --vd-primary-8: var(--vd-blue-8);\n  --vd-primary-9: var(--vd-blue-9);\n}\n\n/* Indigo Primary */\nhtml[data-primary=\"indigo\"] {\n  --vd-primary-0: var(--vd-indigo-0);\n  --vd-primary-1: var(--vd-indigo-1);\n  --vd-primary-2: var(--vd-indigo-2);\n  --vd-primary-3: var(--vd-indigo-3);\n  --vd-primary-4: var(--vd-indigo-4);\n  --vd-primary-5: var(--vd-indigo-5);\n  --vd-primary-6: var(--vd-indigo-6);\n  --vd-primary-7: var(--vd-indigo-7);\n  --vd-primary-8: var(--vd-indigo-8);\n  --vd-primary-9: var(--vd-indigo-9);\n}\n\n/* Violet Primary */\nhtml[data-primary=\"violet\"] {\n  --vd-primary-0: var(--vd-violet-0);\n  --vd-primary-1: var(--vd-violet-1);\n  --vd-primary-2: var(--vd-violet-2);\n  --vd-primary-3: var(--vd-violet-3);\n  --vd-primary-4: var(--vd-violet-4);\n  --vd-primary-5: var(--vd-violet-5);\n  --vd-primary-6: var(--vd-violet-6);\n  --vd-primary-7: var(--vd-violet-7);\n  --vd-primary-8: var(--vd-violet-8);\n  --vd-primary-9: var(--vd-violet-9);\n}\n\n/* Purple Primary (using grape) */\nhtml[data-primary=\"purple\"] {\n  --vd-primary-0: var(--vd-grape-0);\n  --vd-primary-1: var(--vd-grape-1);\n  --vd-primary-2: var(--vd-grape-2);\n  --vd-primary-3: var(--vd-grape-3);\n  --vd-primary-4: var(--vd-grape-4);\n  --vd-primary-5: var(--vd-grape-5);\n  --vd-primary-6: var(--vd-grape-6);\n  --vd-primary-7: var(--vd-grape-7);\n  --vd-primary-8: var(--vd-grape-8);\n  --vd-primary-9: var(--vd-grape-9);\n}\n\n/* Fuchsia Primary */\nhtml[data-primary=\"fuchsia\"] {\n  --vd-primary-0: #fdf4ff;\n  --vd-primary-1: #fae8ff;\n  --vd-primary-2: #f5d0fe;\n  --vd-primary-3: #f0abfc;\n  --vd-primary-4: #e879f9;\n  --vd-primary-5: #d946ef;\n  --vd-primary-6: #c026d3;\n  --vd-primary-7: #a21caf;\n  --vd-primary-8: #86198f;\n  --vd-primary-9: #701a75;\n}\n\n/* Pink Primary */\nhtml[data-primary=\"pink\"] {\n  --vd-primary-0: var(--vd-pink-0);\n  --vd-primary-1: var(--vd-pink-1);\n  --vd-primary-2: var(--vd-pink-2);\n  --vd-primary-3: var(--vd-pink-3);\n  --vd-primary-4: var(--vd-pink-4);\n  --vd-primary-5: var(--vd-pink-5);\n  --vd-primary-6: var(--vd-pink-6);\n  --vd-primary-7: var(--vd-pink-7);\n  --vd-primary-8: var(--vd-pink-8);\n  --vd-primary-9: var(--vd-pink-9);\n}\n\n/* Rose Primary */\nhtml[data-primary=\"rose\"] {\n  --vd-primary-0: #fff1f2;\n  --vd-primary-1: #ffe4e6;\n  --vd-primary-2: #fecdd3;\n  --vd-primary-3: #fda4af;\n  --vd-primary-4: #fb7185;\n  --vd-primary-5: #f43f5e;\n  --vd-primary-6: #e11d48;\n  --vd-primary-7: #be123c;\n  --vd-primary-8: #9f1239;\n  --vd-primary-9: #881337;\n}\n\n/* Black Primary (grayscale) */\nhtml[data-primary=\"black\"] {\n  --vd-primary-0: #fafafa;\n  --vd-primary-1: #f5f5f5;\n  --vd-primary-2: #e5e5e5;\n  --vd-primary-3: #d4d4d4;\n  --vd-primary-4: #a3a3a3;\n  --vd-primary-5: #525252;\n  --vd-primary-6: #404040;\n  --vd-primary-7: #262626;\n  --vd-primary-8: #171717;\n  --vd-primary-9: #0a0a0a;\n}\n\n/* ═════════════════════════════════════════════════════════════════════════\n * DYNAMIC NEUTRAL COLOR SWITCHING (Theme Customizer)\n * These rules remap --vd-gray-* variables based on [data-neutral] attribute\n * ═════════════════════════════════════════════════════════════════════════ */\n\n/* Charcoal Neutral (default) */\nhtml[data-neutral=\"charcoal\"] {\n  --vd-gray-0: var(--vd-charcoal-0);\n  --vd-gray-1: var(--vd-charcoal-1);\n  --vd-gray-2: var(--vd-charcoal-2);\n  --vd-gray-3: var(--vd-charcoal-3);\n  --vd-gray-4: var(--vd-charcoal-4);\n  --vd-gray-5: var(--vd-charcoal-5);\n  --vd-gray-6: var(--vd-charcoal-6);\n  --vd-gray-7: var(--vd-charcoal-7);\n  --vd-gray-8: var(--vd-charcoal-8);\n  --vd-gray-9: var(--vd-charcoal-9);\n}\n\n/* Gray Neutral */\nhtml[data-neutral=\"gray\"] {\n  --vd-gray-0: #f8f9fa;\n  --vd-gray-1: #f1f3f5;\n  --vd-gray-2: #e9ecef;\n  --vd-gray-3: #dee2e6;\n  --vd-gray-4: #ced4da;\n  --vd-gray-5: #adb5bd;\n  --vd-gray-6: #868e96;\n  --vd-gray-7: #495057;\n  --vd-gray-8: #343a40;\n  --vd-gray-9: #212529;\n}\n\n/* Slate Neutral */\nhtml[data-neutral=\"slate\"] {\n  --vd-gray-0: var(--vd-slate-0);\n  --vd-gray-1: var(--vd-slate-1);\n  --vd-gray-2: var(--vd-slate-2);\n  --vd-gray-3: var(--vd-slate-3);\n  --vd-gray-4: var(--vd-slate-4);\n  --vd-gray-5: var(--vd-slate-5);\n  --vd-gray-6: var(--vd-slate-6);\n  --vd-gray-7: var(--vd-slate-7);\n  --vd-gray-8: var(--vd-slate-8);\n  --vd-gray-9: var(--vd-slate-9);\n}\n\n/* Zinc Neutral */\nhtml[data-neutral=\"zinc\"] {\n  --vd-gray-0: var(--vd-zinc-0);\n  --vd-gray-1: var(--vd-zinc-1);\n  --vd-gray-2: var(--vd-zinc-2);\n  --vd-gray-3: var(--vd-zinc-3);\n  --vd-gray-4: var(--vd-zinc-4);\n  --vd-gray-5: var(--vd-zinc-5);\n  --vd-gray-6: var(--vd-zinc-6);\n  --vd-gray-7: var(--vd-zinc-7);\n  --vd-gray-8: var(--vd-zinc-8);\n  --vd-gray-9: var(--vd-zinc-9);\n}\n\n/* Neutral (true neutral) */\nhtml[data-neutral=\"neutral\"] {\n  --vd-gray-0: var(--vd-neutral-0);\n  --vd-gray-1: var(--vd-neutral-1);\n  --vd-gray-2: var(--vd-neutral-2);\n  --vd-gray-3: var(--vd-neutral-3);\n  --vd-gray-4: var(--vd-neutral-4);\n  --vd-gray-5: var(--vd-neutral-5);\n  --vd-gray-6: var(--vd-neutral-6);\n  --vd-gray-7: var(--vd-neutral-7);\n  --vd-gray-8: var(--vd-neutral-8);\n  --vd-gray-9: var(--vd-neutral-9);\n}\n\n/* Stone Neutral */\nhtml[data-neutral=\"stone\"] {\n  --vd-gray-0: var(--vd-stone-0);\n  --vd-gray-1: var(--vd-stone-1);\n  --vd-gray-2: var(--vd-stone-2);\n  --vd-gray-3: var(--vd-stone-3);\n  --vd-gray-4: var(--vd-stone-4);\n  --vd-gray-5: var(--vd-stone-5);\n  --vd-gray-6: var(--vd-stone-6);\n  --vd-gray-7: var(--vd-stone-7);\n  --vd-gray-8: var(--vd-stone-8);\n  --vd-gray-9: var(--vd-stone-9);\n}\n\n/**\n * Vanduo Framework - Active Palette Layer (generated)\n *\n * Binds the active --vd-<family>-<step> scales to a palette and provides the\n * [data-palette] runtime switch. Open Color is the default;\n * [data-palette=\"fibonacci\"] opts into the Fibonacci (golden-angle) palette.\n *\n * Generated by @vanduo-oss/core scripts/generate-fib-palette.mjs. Do not edit\n * by hand; run `pnpm gen:fib` in ../core. Import AFTER colors.css.\n */\n\n:root {\n  /* Active scales default to the Open Color palette */\n  --vd-gray-0: var(--vd-oc-gray-0);\n  --vd-gray-1: var(--vd-oc-gray-1);\n  --vd-gray-2: var(--vd-oc-gray-2);\n  --vd-gray-3: var(--vd-oc-gray-3);\n  --vd-gray-4: var(--vd-oc-gray-4);\n  --vd-gray-5: var(--vd-oc-gray-5);\n  --vd-gray-6: var(--vd-oc-gray-6);\n  --vd-gray-7: var(--vd-oc-gray-7);\n  --vd-gray-8: var(--vd-oc-gray-8);\n  --vd-gray-9: var(--vd-oc-gray-9);\n  --vd-slate-0: var(--vd-oc-slate-0);\n  --vd-slate-1: var(--vd-oc-slate-1);\n  --vd-slate-2: var(--vd-oc-slate-2);\n  --vd-slate-3: var(--vd-oc-slate-3);\n  --vd-slate-4: var(--vd-oc-slate-4);\n  --vd-slate-5: var(--vd-oc-slate-5);\n  --vd-slate-6: var(--vd-oc-slate-6);\n  --vd-slate-7: var(--vd-oc-slate-7);\n  --vd-slate-8: var(--vd-oc-slate-8);\n  --vd-slate-9: var(--vd-oc-slate-9);\n  --vd-charcoal-0: var(--vd-oc-charcoal-0);\n  --vd-charcoal-1: var(--vd-oc-charcoal-1);\n  --vd-charcoal-2: var(--vd-oc-charcoal-2);\n  --vd-charcoal-3: var(--vd-oc-charcoal-3);\n  --vd-charcoal-4: var(--vd-oc-charcoal-4);\n  --vd-charcoal-5: var(--vd-oc-charcoal-5);\n  --vd-charcoal-6: var(--vd-oc-charcoal-6);\n  --vd-charcoal-7: var(--vd-oc-charcoal-7);\n  --vd-charcoal-8: var(--vd-oc-charcoal-8);\n  --vd-charcoal-9: var(--vd-oc-charcoal-9);\n  --vd-zinc-0: var(--vd-oc-zinc-0);\n  --vd-zinc-1: var(--vd-oc-zinc-1);\n  --vd-zinc-2: var(--vd-oc-zinc-2);\n  --vd-zinc-3: var(--vd-oc-zinc-3);\n  --vd-zinc-4: var(--vd-oc-zinc-4);\n  --vd-zinc-5: var(--vd-oc-zinc-5);\n  --vd-zinc-6: var(--vd-oc-zinc-6);\n  --vd-zinc-7: var(--vd-oc-zinc-7);\n  --vd-zinc-8: var(--vd-oc-zinc-8);\n  --vd-zinc-9: var(--vd-oc-zinc-9);\n  --vd-neutral-0: var(--vd-oc-neutral-0);\n  --vd-neutral-1: var(--vd-oc-neutral-1);\n  --vd-neutral-2: var(--vd-oc-neutral-2);\n  --vd-neutral-3: var(--vd-oc-neutral-3);\n  --vd-neutral-4: var(--vd-oc-neutral-4);\n  --vd-neutral-5: var(--vd-oc-neutral-5);\n  --vd-neutral-6: var(--vd-oc-neutral-6);\n  --vd-neutral-7: var(--vd-oc-neutral-7);\n  --vd-neutral-8: var(--vd-oc-neutral-8);\n  --vd-neutral-9: var(--vd-oc-neutral-9);\n  --vd-stone-0: var(--vd-oc-stone-0);\n  --vd-stone-1: var(--vd-oc-stone-1);\n  --vd-stone-2: var(--vd-oc-stone-2);\n  --vd-stone-3: var(--vd-oc-stone-3);\n  --vd-stone-4: var(--vd-oc-stone-4);\n  --vd-stone-5: var(--vd-oc-stone-5);\n  --vd-stone-6: var(--vd-oc-stone-6);\n  --vd-stone-7: var(--vd-oc-stone-7);\n  --vd-stone-8: var(--vd-oc-stone-8);\n  --vd-stone-9: var(--vd-oc-stone-9);\n  --vd-primary-0: var(--vd-oc-primary-0);\n  --vd-primary-1: var(--vd-oc-primary-1);\n  --vd-primary-2: var(--vd-oc-primary-2);\n  --vd-primary-3: var(--vd-oc-primary-3);\n  --vd-primary-4: var(--vd-oc-primary-4);\n  --vd-primary-5: var(--vd-oc-primary-5);\n  --vd-primary-6: var(--vd-oc-primary-6);\n  --vd-primary-7: var(--vd-oc-primary-7);\n  --vd-primary-8: var(--vd-oc-primary-8);\n  --vd-primary-9: var(--vd-oc-primary-9);\n  --vd-secondary-0: var(--vd-oc-secondary-0);\n  --vd-secondary-1: var(--vd-oc-secondary-1);\n  --vd-secondary-2: var(--vd-oc-secondary-2);\n  --vd-secondary-3: var(--vd-oc-secondary-3);\n  --vd-secondary-4: var(--vd-oc-secondary-4);\n  --vd-secondary-5: var(--vd-oc-secondary-5);\n  --vd-secondary-6: var(--vd-oc-secondary-6);\n  --vd-secondary-7: var(--vd-oc-secondary-7);\n  --vd-secondary-8: var(--vd-oc-secondary-8);\n  --vd-secondary-9: var(--vd-oc-secondary-9);\n  --vd-danger-0: var(--vd-oc-danger-0);\n  --vd-danger-1: var(--vd-oc-danger-1);\n  --vd-danger-2: var(--vd-oc-danger-2);\n  --vd-danger-3: var(--vd-oc-danger-3);\n  --vd-danger-4: var(--vd-oc-danger-4);\n  --vd-danger-5: var(--vd-oc-danger-5);\n  --vd-danger-6: var(--vd-oc-danger-6);\n  --vd-danger-7: var(--vd-oc-danger-7);\n  --vd-danger-8: var(--vd-oc-danger-8);\n  --vd-danger-9: var(--vd-oc-danger-9);\n  --vd-error-0: var(--vd-oc-error-0);\n  --vd-error-1: var(--vd-oc-error-1);\n  --vd-error-2: var(--vd-oc-error-2);\n  --vd-error-3: var(--vd-oc-error-3);\n  --vd-error-4: var(--vd-oc-error-4);\n  --vd-error-5: var(--vd-oc-error-5);\n  --vd-error-6: var(--vd-oc-error-6);\n  --vd-error-7: var(--vd-oc-error-7);\n  --vd-error-8: var(--vd-oc-error-8);\n  --vd-error-9: var(--vd-oc-error-9);\n  --vd-success-0: var(--vd-oc-success-0);\n  --vd-success-1: var(--vd-oc-success-1);\n  --vd-success-2: var(--vd-oc-success-2);\n  --vd-success-3: var(--vd-oc-success-3);\n  --vd-success-4: var(--vd-oc-success-4);\n  --vd-success-5: var(--vd-oc-success-5);\n  --vd-success-6: var(--vd-oc-success-6);\n  --vd-success-7: var(--vd-oc-success-7);\n  --vd-success-8: var(--vd-oc-success-8);\n  --vd-success-9: var(--vd-oc-success-9);\n  --vd-warning-0: var(--vd-oc-warning-0);\n  --vd-warning-1: var(--vd-oc-warning-1);\n  --vd-warning-2: var(--vd-oc-warning-2);\n  --vd-warning-3: var(--vd-oc-warning-3);\n  --vd-warning-4: var(--vd-oc-warning-4);\n  --vd-warning-5: var(--vd-oc-warning-5);\n  --vd-warning-6: var(--vd-oc-warning-6);\n  --vd-warning-7: var(--vd-oc-warning-7);\n  --vd-warning-8: var(--vd-oc-warning-8);\n  --vd-warning-9: var(--vd-oc-warning-9);\n  --vd-info-0: var(--vd-oc-info-0);\n  --vd-info-1: var(--vd-oc-info-1);\n  --vd-info-2: var(--vd-oc-info-2);\n  --vd-info-3: var(--vd-oc-info-3);\n  --vd-info-4: var(--vd-oc-info-4);\n  --vd-info-5: var(--vd-oc-info-5);\n  --vd-info-6: var(--vd-oc-info-6);\n  --vd-info-7: var(--vd-oc-info-7);\n  --vd-info-8: var(--vd-oc-info-8);\n  --vd-info-9: var(--vd-oc-info-9);\n  --vd-red-0: var(--vd-oc-red-0);\n  --vd-red-1: var(--vd-oc-red-1);\n  --vd-red-2: var(--vd-oc-red-2);\n  --vd-red-3: var(--vd-oc-red-3);\n  --vd-red-4: var(--vd-oc-red-4);\n  --vd-red-5: var(--vd-oc-red-5);\n  --vd-red-6: var(--vd-oc-red-6);\n  --vd-red-7: var(--vd-oc-red-7);\n  --vd-red-8: var(--vd-oc-red-8);\n  --vd-red-9: var(--vd-oc-red-9);\n  --vd-orange-0: var(--vd-oc-orange-0);\n  --vd-orange-1: var(--vd-oc-orange-1);\n  --vd-orange-2: var(--vd-oc-orange-2);\n  --vd-orange-3: var(--vd-oc-orange-3);\n  --vd-orange-4: var(--vd-oc-orange-4);\n  --vd-orange-5: var(--vd-oc-orange-5);\n  --vd-orange-6: var(--vd-oc-orange-6);\n  --vd-orange-7: var(--vd-oc-orange-7);\n  --vd-orange-8: var(--vd-oc-orange-8);\n  --vd-orange-9: var(--vd-oc-orange-9);\n  --vd-yellow-0: var(--vd-oc-yellow-0);\n  --vd-yellow-1: var(--vd-oc-yellow-1);\n  --vd-yellow-2: var(--vd-oc-yellow-2);\n  --vd-yellow-3: var(--vd-oc-yellow-3);\n  --vd-yellow-4: var(--vd-oc-yellow-4);\n  --vd-yellow-5: var(--vd-oc-yellow-5);\n  --vd-yellow-6: var(--vd-oc-yellow-6);\n  --vd-yellow-7: var(--vd-oc-yellow-7);\n  --vd-yellow-8: var(--vd-oc-yellow-8);\n  --vd-yellow-9: var(--vd-oc-yellow-9);\n  --vd-lime-0: var(--vd-oc-lime-0);\n  --vd-lime-1: var(--vd-oc-lime-1);\n  --vd-lime-2: var(--vd-oc-lime-2);\n  --vd-lime-3: var(--vd-oc-lime-3);\n  --vd-lime-4: var(--vd-oc-lime-4);\n  --vd-lime-5: var(--vd-oc-lime-5);\n  --vd-lime-6: var(--vd-oc-lime-6);\n  --vd-lime-7: var(--vd-oc-lime-7);\n  --vd-lime-8: var(--vd-oc-lime-8);\n  --vd-lime-9: var(--vd-oc-lime-9);\n  --vd-green-0: var(--vd-oc-green-0);\n  --vd-green-1: var(--vd-oc-green-1);\n  --vd-green-2: var(--vd-oc-green-2);\n  --vd-green-3: var(--vd-oc-green-3);\n  --vd-green-4: var(--vd-oc-green-4);\n  --vd-green-5: var(--vd-oc-green-5);\n  --vd-green-6: var(--vd-oc-green-6);\n  --vd-green-7: var(--vd-oc-green-7);\n  --vd-green-8: var(--vd-oc-green-8);\n  --vd-green-9: var(--vd-oc-green-9);\n  --vd-teal-0: var(--vd-oc-teal-0);\n  --vd-teal-1: var(--vd-oc-teal-1);\n  --vd-teal-2: var(--vd-oc-teal-2);\n  --vd-teal-3: var(--vd-oc-teal-3);\n  --vd-teal-4: var(--vd-oc-teal-4);\n  --vd-teal-5: var(--vd-oc-teal-5);\n  --vd-teal-6: var(--vd-oc-teal-6);\n  --vd-teal-7: var(--vd-oc-teal-7);\n  --vd-teal-8: var(--vd-oc-teal-8);\n  --vd-teal-9: var(--vd-oc-teal-9);\n  --vd-cyan-0: var(--vd-oc-cyan-0);\n  --vd-cyan-1: var(--vd-oc-cyan-1);\n  --vd-cyan-2: var(--vd-oc-cyan-2);\n  --vd-cyan-3: var(--vd-oc-cyan-3);\n  --vd-cyan-4: var(--vd-oc-cyan-4);\n  --vd-cyan-5: var(--vd-oc-cyan-5);\n  --vd-cyan-6: var(--vd-oc-cyan-6);\n  --vd-cyan-7: var(--vd-oc-cyan-7);\n  --vd-cyan-8: var(--vd-oc-cyan-8);\n  --vd-cyan-9: var(--vd-oc-cyan-9);\n  --vd-blue-0: var(--vd-oc-blue-0);\n  --vd-blue-1: var(--vd-oc-blue-1);\n  --vd-blue-2: var(--vd-oc-blue-2);\n  --vd-blue-3: var(--vd-oc-blue-3);\n  --vd-blue-4: var(--vd-oc-blue-4);\n  --vd-blue-5: var(--vd-oc-blue-5);\n  --vd-blue-6: var(--vd-oc-blue-6);\n  --vd-blue-7: var(--vd-oc-blue-7);\n  --vd-blue-8: var(--vd-oc-blue-8);\n  --vd-blue-9: var(--vd-oc-blue-9);\n  --vd-indigo-0: var(--vd-oc-indigo-0);\n  --vd-indigo-1: var(--vd-oc-indigo-1);\n  --vd-indigo-2: var(--vd-oc-indigo-2);\n  --vd-indigo-3: var(--vd-oc-indigo-3);\n  --vd-indigo-4: var(--vd-oc-indigo-4);\n  --vd-indigo-5: var(--vd-oc-indigo-5);\n  --vd-indigo-6: var(--vd-oc-indigo-6);\n  --vd-indigo-7: var(--vd-oc-indigo-7);\n  --vd-indigo-8: var(--vd-oc-indigo-8);\n  --vd-indigo-9: var(--vd-oc-indigo-9);\n  --vd-violet-0: var(--vd-oc-violet-0);\n  --vd-violet-1: var(--vd-oc-violet-1);\n  --vd-violet-2: var(--vd-oc-violet-2);\n  --vd-violet-3: var(--vd-oc-violet-3);\n  --vd-violet-4: var(--vd-oc-violet-4);\n  --vd-violet-5: var(--vd-oc-violet-5);\n  --vd-violet-6: var(--vd-oc-violet-6);\n  --vd-violet-7: var(--vd-oc-violet-7);\n  --vd-violet-8: var(--vd-oc-violet-8);\n  --vd-violet-9: var(--vd-oc-violet-9);\n  --vd-grape-0: var(--vd-oc-grape-0);\n  --vd-grape-1: var(--vd-oc-grape-1);\n  --vd-grape-2: var(--vd-oc-grape-2);\n  --vd-grape-3: var(--vd-oc-grape-3);\n  --vd-grape-4: var(--vd-oc-grape-4);\n  --vd-grape-5: var(--vd-oc-grape-5);\n  --vd-grape-6: var(--vd-oc-grape-6);\n  --vd-grape-7: var(--vd-oc-grape-7);\n  --vd-grape-8: var(--vd-oc-grape-8);\n  --vd-grape-9: var(--vd-oc-grape-9);\n  --vd-pink-0: var(--vd-oc-pink-0);\n  --vd-pink-1: var(--vd-oc-pink-1);\n  --vd-pink-2: var(--vd-oc-pink-2);\n  --vd-pink-3: var(--vd-oc-pink-3);\n  --vd-pink-4: var(--vd-oc-pink-4);\n  --vd-pink-5: var(--vd-oc-pink-5);\n  --vd-pink-6: var(--vd-oc-pink-6);\n  --vd-pink-7: var(--vd-oc-pink-7);\n  --vd-pink-8: var(--vd-oc-pink-8);\n  --vd-pink-9: var(--vd-oc-pink-9);\n  --vd-golden-1: var(--vd-fib-golden-1);\n  --vd-golden-2: var(--vd-fib-golden-2);\n  --vd-golden-3: var(--vd-fib-golden-3);\n  --vd-golden-4: var(--vd-fib-golden-4);\n  --vd-golden-5: var(--vd-fib-golden-5);\n  --vd-golden-6: var(--vd-fib-golden-6);\n  --vd-golden-7: var(--vd-fib-golden-7);\n  --vd-golden-8: var(--vd-fib-golden-8);\n}\n\n[data-palette=\"fibonacci\"] {\n  --vd-gray-0: var(--vd-fib-gray-0);\n  --vd-gray-1: var(--vd-fib-gray-1);\n  --vd-gray-2: var(--vd-fib-gray-2);\n  --vd-gray-3: var(--vd-fib-gray-3);\n  --vd-gray-4: var(--vd-fib-gray-4);\n  --vd-gray-5: var(--vd-fib-gray-5);\n  --vd-gray-6: var(--vd-fib-gray-6);\n  --vd-gray-7: var(--vd-fib-gray-7);\n  --vd-gray-8: var(--vd-fib-gray-8);\n  --vd-gray-9: var(--vd-fib-gray-9);\n  --vd-slate-0: var(--vd-fib-slate-0);\n  --vd-slate-1: var(--vd-fib-slate-1);\n  --vd-slate-2: var(--vd-fib-slate-2);\n  --vd-slate-3: var(--vd-fib-slate-3);\n  --vd-slate-4: var(--vd-fib-slate-4);\n  --vd-slate-5: var(--vd-fib-slate-5);\n  --vd-slate-6: var(--vd-fib-slate-6);\n  --vd-slate-7: var(--vd-fib-slate-7);\n  --vd-slate-8: var(--vd-fib-slate-8);\n  --vd-slate-9: var(--vd-fib-slate-9);\n  --vd-charcoal-0: var(--vd-fib-charcoal-0);\n  --vd-charcoal-1: var(--vd-fib-charcoal-1);\n  --vd-charcoal-2: var(--vd-fib-charcoal-2);\n  --vd-charcoal-3: var(--vd-fib-charcoal-3);\n  --vd-charcoal-4: var(--vd-fib-charcoal-4);\n  --vd-charcoal-5: var(--vd-fib-charcoal-5);\n  --vd-charcoal-6: var(--vd-fib-charcoal-6);\n  --vd-charcoal-7: var(--vd-fib-charcoal-7);\n  --vd-charcoal-8: var(--vd-fib-charcoal-8);\n  --vd-charcoal-9: var(--vd-fib-charcoal-9);\n  --vd-zinc-0: var(--vd-fib-zinc-0);\n  --vd-zinc-1: var(--vd-fib-zinc-1);\n  --vd-zinc-2: var(--vd-fib-zinc-2);\n  --vd-zinc-3: var(--vd-fib-zinc-3);\n  --vd-zinc-4: var(--vd-fib-zinc-4);\n  --vd-zinc-5: var(--vd-fib-zinc-5);\n  --vd-zinc-6: var(--vd-fib-zinc-6);\n  --vd-zinc-7: var(--vd-fib-zinc-7);\n  --vd-zinc-8: var(--vd-fib-zinc-8);\n  --vd-zinc-9: var(--vd-fib-zinc-9);\n  --vd-neutral-0: var(--vd-fib-neutral-0);\n  --vd-neutral-1: var(--vd-fib-neutral-1);\n  --vd-neutral-2: var(--vd-fib-neutral-2);\n  --vd-neutral-3: var(--vd-fib-neutral-3);\n  --vd-neutral-4: var(--vd-fib-neutral-4);\n  --vd-neutral-5: var(--vd-fib-neutral-5);\n  --vd-neutral-6: var(--vd-fib-neutral-6);\n  --vd-neutral-7: var(--vd-fib-neutral-7);\n  --vd-neutral-8: var(--vd-fib-neutral-8);\n  --vd-neutral-9: var(--vd-fib-neutral-9);\n  --vd-stone-0: var(--vd-fib-stone-0);\n  --vd-stone-1: var(--vd-fib-stone-1);\n  --vd-stone-2: var(--vd-fib-stone-2);\n  --vd-stone-3: var(--vd-fib-stone-3);\n  --vd-stone-4: var(--vd-fib-stone-4);\n  --vd-stone-5: var(--vd-fib-stone-5);\n  --vd-stone-6: var(--vd-fib-stone-6);\n  --vd-stone-7: var(--vd-fib-stone-7);\n  --vd-stone-8: var(--vd-fib-stone-8);\n  --vd-stone-9: var(--vd-fib-stone-9);\n  --vd-primary-0: var(--vd-fib-primary-0);\n  --vd-primary-1: var(--vd-fib-primary-1);\n  --vd-primary-2: var(--vd-fib-primary-2);\n  --vd-primary-3: var(--vd-fib-primary-3);\n  --vd-primary-4: var(--vd-fib-primary-4);\n  --vd-primary-5: var(--vd-fib-primary-5);\n  --vd-primary-6: var(--vd-fib-primary-6);\n  --vd-primary-7: var(--vd-fib-primary-7);\n  --vd-primary-8: var(--vd-fib-primary-8);\n  --vd-primary-9: var(--vd-fib-primary-9);\n  --vd-secondary-0: var(--vd-fib-secondary-0);\n  --vd-secondary-1: var(--vd-fib-secondary-1);\n  --vd-secondary-2: var(--vd-fib-secondary-2);\n  --vd-secondary-3: var(--vd-fib-secondary-3);\n  --vd-secondary-4: var(--vd-fib-secondary-4);\n  --vd-secondary-5: var(--vd-fib-secondary-5);\n  --vd-secondary-6: var(--vd-fib-secondary-6);\n  --vd-secondary-7: var(--vd-fib-secondary-7);\n  --vd-secondary-8: var(--vd-fib-secondary-8);\n  --vd-secondary-9: var(--vd-fib-secondary-9);\n  --vd-danger-0: var(--vd-fib-danger-0);\n  --vd-danger-1: var(--vd-fib-danger-1);\n  --vd-danger-2: var(--vd-fib-danger-2);\n  --vd-danger-3: var(--vd-fib-danger-3);\n  --vd-danger-4: var(--vd-fib-danger-4);\n  --vd-danger-5: var(--vd-fib-danger-5);\n  --vd-danger-6: var(--vd-fib-danger-6);\n  --vd-danger-7: var(--vd-fib-danger-7);\n  --vd-danger-8: var(--vd-fib-danger-8);\n  --vd-danger-9: var(--vd-fib-danger-9);\n  --vd-error-0: var(--vd-fib-error-0);\n  --vd-error-1: var(--vd-fib-error-1);\n  --vd-error-2: var(--vd-fib-error-2);\n  --vd-error-3: var(--vd-fib-error-3);\n  --vd-error-4: var(--vd-fib-error-4);\n  --vd-error-5: var(--vd-fib-error-5);\n  --vd-error-6: var(--vd-fib-error-6);\n  --vd-error-7: var(--vd-fib-error-7);\n  --vd-error-8: var(--vd-fib-error-8);\n  --vd-error-9: var(--vd-fib-error-9);\n  --vd-success-0: var(--vd-fib-success-0);\n  --vd-success-1: var(--vd-fib-success-1);\n  --vd-success-2: var(--vd-fib-success-2);\n  --vd-success-3: var(--vd-fib-success-3);\n  --vd-success-4: var(--vd-fib-success-4);\n  --vd-success-5: var(--vd-fib-success-5);\n  --vd-success-6: var(--vd-fib-success-6);\n  --vd-success-7: var(--vd-fib-success-7);\n  --vd-success-8: var(--vd-fib-success-8);\n  --vd-success-9: var(--vd-fib-success-9);\n  --vd-warning-0: var(--vd-fib-warning-0);\n  --vd-warning-1: var(--vd-fib-warning-1);\n  --vd-warning-2: var(--vd-fib-warning-2);\n  --vd-warning-3: var(--vd-fib-warning-3);\n  --vd-warning-4: var(--vd-fib-warning-4);\n  --vd-warning-5: var(--vd-fib-warning-5);\n  --vd-warning-6: var(--vd-fib-warning-6);\n  --vd-warning-7: var(--vd-fib-warning-7);\n  --vd-warning-8: var(--vd-fib-warning-8);\n  --vd-warning-9: var(--vd-fib-warning-9);\n  --vd-info-0: var(--vd-fib-info-0);\n  --vd-info-1: var(--vd-fib-info-1);\n  --vd-info-2: var(--vd-fib-info-2);\n  --vd-info-3: var(--vd-fib-info-3);\n  --vd-info-4: var(--vd-fib-info-4);\n  --vd-info-5: var(--vd-fib-info-5);\n  --vd-info-6: var(--vd-fib-info-6);\n  --vd-info-7: var(--vd-fib-info-7);\n  --vd-info-8: var(--vd-fib-info-8);\n  --vd-info-9: var(--vd-fib-info-9);\n  --vd-red-0: var(--vd-fib-red-0);\n  --vd-red-1: var(--vd-fib-red-1);\n  --vd-red-2: var(--vd-fib-red-2);\n  --vd-red-3: var(--vd-fib-red-3);\n  --vd-red-4: var(--vd-fib-red-4);\n  --vd-red-5: var(--vd-fib-red-5);\n  --vd-red-6: var(--vd-fib-red-6);\n  --vd-red-7: var(--vd-fib-red-7);\n  --vd-red-8: var(--vd-fib-red-8);\n  --vd-red-9: var(--vd-fib-red-9);\n  --vd-orange-0: var(--vd-fib-orange-0);\n  --vd-orange-1: var(--vd-fib-orange-1);\n  --vd-orange-2: var(--vd-fib-orange-2);\n  --vd-orange-3: var(--vd-fib-orange-3);\n  --vd-orange-4: var(--vd-fib-orange-4);\n  --vd-orange-5: var(--vd-fib-orange-5);\n  --vd-orange-6: var(--vd-fib-orange-6);\n  --vd-orange-7: var(--vd-fib-orange-7);\n  --vd-orange-8: var(--vd-fib-orange-8);\n  --vd-orange-9: var(--vd-fib-orange-9);\n  --vd-yellow-0: var(--vd-fib-yellow-0);\n  --vd-yellow-1: var(--vd-fib-yellow-1);\n  --vd-yellow-2: var(--vd-fib-yellow-2);\n  --vd-yellow-3: var(--vd-fib-yellow-3);\n  --vd-yellow-4: var(--vd-fib-yellow-4);\n  --vd-yellow-5: var(--vd-fib-yellow-5);\n  --vd-yellow-6: var(--vd-fib-yellow-6);\n  --vd-yellow-7: var(--vd-fib-yellow-7);\n  --vd-yellow-8: var(--vd-fib-yellow-8);\n  --vd-yellow-9: var(--vd-fib-yellow-9);\n  --vd-lime-0: var(--vd-fib-lime-0);\n  --vd-lime-1: var(--vd-fib-lime-1);\n  --vd-lime-2: var(--vd-fib-lime-2);\n  --vd-lime-3: var(--vd-fib-lime-3);\n  --vd-lime-4: var(--vd-fib-lime-4);\n  --vd-lime-5: var(--vd-fib-lime-5);\n  --vd-lime-6: var(--vd-fib-lime-6);\n  --vd-lime-7: var(--vd-fib-lime-7);\n  --vd-lime-8: var(--vd-fib-lime-8);\n  --vd-lime-9: var(--vd-fib-lime-9);\n  --vd-green-0: var(--vd-fib-green-0);\n  --vd-green-1: var(--vd-fib-green-1);\n  --vd-green-2: var(--vd-fib-green-2);\n  --vd-green-3: var(--vd-fib-green-3);\n  --vd-green-4: var(--vd-fib-green-4);\n  --vd-green-5: var(--vd-fib-green-5);\n  --vd-green-6: var(--vd-fib-green-6);\n  --vd-green-7: var(--vd-fib-green-7);\n  --vd-green-8: var(--vd-fib-green-8);\n  --vd-green-9: var(--vd-fib-green-9);\n  --vd-teal-0: var(--vd-fib-teal-0);\n  --vd-teal-1: var(--vd-fib-teal-1);\n  --vd-teal-2: var(--vd-fib-teal-2);\n  --vd-teal-3: var(--vd-fib-teal-3);\n  --vd-teal-4: var(--vd-fib-teal-4);\n  --vd-teal-5: var(--vd-fib-teal-5);\n  --vd-teal-6: var(--vd-fib-teal-6);\n  --vd-teal-7: var(--vd-fib-teal-7);\n  --vd-teal-8: var(--vd-fib-teal-8);\n  --vd-teal-9: var(--vd-fib-teal-9);\n  --vd-cyan-0: var(--vd-fib-cyan-0);\n  --vd-cyan-1: var(--vd-fib-cyan-1);\n  --vd-cyan-2: var(--vd-fib-cyan-2);\n  --vd-cyan-3: var(--vd-fib-cyan-3);\n  --vd-cyan-4: var(--vd-fib-cyan-4);\n  --vd-cyan-5: var(--vd-fib-cyan-5);\n  --vd-cyan-6: var(--vd-fib-cyan-6);\n  --vd-cyan-7: var(--vd-fib-cyan-7);\n  --vd-cyan-8: var(--vd-fib-cyan-8);\n  --vd-cyan-9: var(--vd-fib-cyan-9);\n  --vd-blue-0: var(--vd-fib-blue-0);\n  --vd-blue-1: var(--vd-fib-blue-1);\n  --vd-blue-2: var(--vd-fib-blue-2);\n  --vd-blue-3: var(--vd-fib-blue-3);\n  --vd-blue-4: var(--vd-fib-blue-4);\n  --vd-blue-5: var(--vd-fib-blue-5);\n  --vd-blue-6: var(--vd-fib-blue-6);\n  --vd-blue-7: var(--vd-fib-blue-7);\n  --vd-blue-8: var(--vd-fib-blue-8);\n  --vd-blue-9: var(--vd-fib-blue-9);\n  --vd-indigo-0: var(--vd-fib-indigo-0);\n  --vd-indigo-1: var(--vd-fib-indigo-1);\n  --vd-indigo-2: var(--vd-fib-indigo-2);\n  --vd-indigo-3: var(--vd-fib-indigo-3);\n  --vd-indigo-4: var(--vd-fib-indigo-4);\n  --vd-indigo-5: var(--vd-fib-indigo-5);\n  --vd-indigo-6: var(--vd-fib-indigo-6);\n  --vd-indigo-7: var(--vd-fib-indigo-7);\n  --vd-indigo-8: var(--vd-fib-indigo-8);\n  --vd-indigo-9: var(--vd-fib-indigo-9);\n  --vd-violet-0: var(--vd-fib-violet-0);\n  --vd-violet-1: var(--vd-fib-violet-1);\n  --vd-violet-2: var(--vd-fib-violet-2);\n  --vd-violet-3: var(--vd-fib-violet-3);\n  --vd-violet-4: var(--vd-fib-violet-4);\n  --vd-violet-5: var(--vd-fib-violet-5);\n  --vd-violet-6: var(--vd-fib-violet-6);\n  --vd-violet-7: var(--vd-fib-violet-7);\n  --vd-violet-8: var(--vd-fib-violet-8);\n  --vd-violet-9: var(--vd-fib-violet-9);\n  --vd-grape-0: var(--vd-fib-grape-0);\n  --vd-grape-1: var(--vd-fib-grape-1);\n  --vd-grape-2: var(--vd-fib-grape-2);\n  --vd-grape-3: var(--vd-fib-grape-3);\n  --vd-grape-4: var(--vd-fib-grape-4);\n  --vd-grape-5: var(--vd-fib-grape-5);\n  --vd-grape-6: var(--vd-fib-grape-6);\n  --vd-grape-7: var(--vd-fib-grape-7);\n  --vd-grape-8: var(--vd-fib-grape-8);\n  --vd-grape-9: var(--vd-fib-grape-9);\n  --vd-pink-0: var(--vd-fib-pink-0);\n  --vd-pink-1: var(--vd-fib-pink-1);\n  --vd-pink-2: var(--vd-fib-pink-2);\n  --vd-pink-3: var(--vd-fib-pink-3);\n  --vd-pink-4: var(--vd-fib-pink-4);\n  --vd-pink-5: var(--vd-fib-pink-5);\n  --vd-pink-6: var(--vd-fib-pink-6);\n  --vd-pink-7: var(--vd-fib-pink-7);\n  --vd-pink-8: var(--vd-fib-pink-8);\n  --vd-pink-9: var(--vd-fib-pink-9);\n  --vd-golden-1: var(--vd-fib-golden-1);\n  --vd-golden-2: var(--vd-fib-golden-2);\n  --vd-golden-3: var(--vd-fib-golden-3);\n  --vd-golden-4: var(--vd-fib-golden-4);\n  --vd-golden-5: var(--vd-fib-golden-5);\n  --vd-golden-6: var(--vd-fib-golden-6);\n  --vd-golden-7: var(--vd-fib-golden-7);\n  --vd-golden-8: var(--vd-fib-golden-8);\n}\n\n[data-palette=\"open-color\"] {\n  --vd-gray-0: var(--vd-oc-gray-0);\n  --vd-gray-1: var(--vd-oc-gray-1);\n  --vd-gray-2: var(--vd-oc-gray-2);\n  --vd-gray-3: var(--vd-oc-gray-3);\n  --vd-gray-4: var(--vd-oc-gray-4);\n  --vd-gray-5: var(--vd-oc-gray-5);\n  --vd-gray-6: var(--vd-oc-gray-6);\n  --vd-gray-7: var(--vd-oc-gray-7);\n  --vd-gray-8: var(--vd-oc-gray-8);\n  --vd-gray-9: var(--vd-oc-gray-9);\n  --vd-primary-0: var(--vd-oc-primary-0);\n  --vd-primary-1: var(--vd-oc-primary-1);\n  --vd-primary-2: var(--vd-oc-primary-2);\n  --vd-primary-3: var(--vd-oc-primary-3);\n  --vd-primary-4: var(--vd-oc-primary-4);\n  --vd-primary-5: var(--vd-oc-primary-5);\n  --vd-primary-6: var(--vd-oc-primary-6);\n  --vd-primary-7: var(--vd-oc-primary-7);\n  --vd-primary-8: var(--vd-oc-primary-8);\n  --vd-primary-9: var(--vd-oc-primary-9);\n  --vd-secondary-0: var(--vd-oc-secondary-0);\n  --vd-secondary-1: var(--vd-oc-secondary-1);\n  --vd-secondary-2: var(--vd-oc-secondary-2);\n  --vd-secondary-3: var(--vd-oc-secondary-3);\n  --vd-secondary-4: var(--vd-oc-secondary-4);\n  --vd-secondary-5: var(--vd-oc-secondary-5);\n  --vd-secondary-6: var(--vd-oc-secondary-6);\n  --vd-secondary-7: var(--vd-oc-secondary-7);\n  --vd-secondary-8: var(--vd-oc-secondary-8);\n  --vd-secondary-9: var(--vd-oc-secondary-9);\n  --vd-danger-0: var(--vd-oc-danger-0);\n  --vd-danger-1: var(--vd-oc-danger-1);\n  --vd-danger-2: var(--vd-oc-danger-2);\n  --vd-danger-3: var(--vd-oc-danger-3);\n  --vd-danger-4: var(--vd-oc-danger-4);\n  --vd-danger-5: var(--vd-oc-danger-5);\n  --vd-danger-6: var(--vd-oc-danger-6);\n  --vd-danger-7: var(--vd-oc-danger-7);\n  --vd-danger-8: var(--vd-oc-danger-8);\n  --vd-danger-9: var(--vd-oc-danger-9);\n  --vd-error-0: var(--vd-oc-error-0);\n  --vd-error-1: var(--vd-oc-error-1);\n  --vd-error-2: var(--vd-oc-error-2);\n  --vd-error-3: var(--vd-oc-error-3);\n  --vd-error-4: var(--vd-oc-error-4);\n  --vd-error-5: var(--vd-oc-error-5);\n  --vd-error-6: var(--vd-oc-error-6);\n  --vd-error-7: var(--vd-oc-error-7);\n  --vd-error-8: var(--vd-oc-error-8);\n  --vd-error-9: var(--vd-oc-error-9);\n  --vd-success-0: var(--vd-oc-success-0);\n  --vd-success-1: var(--vd-oc-success-1);\n  --vd-success-2: var(--vd-oc-success-2);\n  --vd-success-3: var(--vd-oc-success-3);\n  --vd-success-4: var(--vd-oc-success-4);\n  --vd-success-5: var(--vd-oc-success-5);\n  --vd-success-6: var(--vd-oc-success-6);\n  --vd-success-7: var(--vd-oc-success-7);\n  --vd-success-8: var(--vd-oc-success-8);\n  --vd-success-9: var(--vd-oc-success-9);\n  --vd-warning-0: var(--vd-oc-warning-0);\n  --vd-warning-1: var(--vd-oc-warning-1);\n  --vd-warning-2: var(--vd-oc-warning-2);\n  --vd-warning-3: var(--vd-oc-warning-3);\n  --vd-warning-4: var(--vd-oc-warning-4);\n  --vd-warning-5: var(--vd-oc-warning-5);\n  --vd-warning-6: var(--vd-oc-warning-6);\n  --vd-warning-7: var(--vd-oc-warning-7);\n  --vd-warning-8: var(--vd-oc-warning-8);\n  --vd-warning-9: var(--vd-oc-warning-9);\n  --vd-info-0: var(--vd-oc-info-0);\n  --vd-info-1: var(--vd-oc-info-1);\n  --vd-info-2: var(--vd-oc-info-2);\n  --vd-info-3: var(--vd-oc-info-3);\n  --vd-info-4: var(--vd-oc-info-4);\n  --vd-info-5: var(--vd-oc-info-5);\n  --vd-info-6: var(--vd-oc-info-6);\n  --vd-info-7: var(--vd-oc-info-7);\n  --vd-info-8: var(--vd-oc-info-8);\n  --vd-info-9: var(--vd-oc-info-9);\n  --vd-red-0: var(--vd-oc-red-0);\n  --vd-red-1: var(--vd-oc-red-1);\n  --vd-red-2: var(--vd-oc-red-2);\n  --vd-red-3: var(--vd-oc-red-3);\n  --vd-red-4: var(--vd-oc-red-4);\n  --vd-red-5: var(--vd-oc-red-5);\n  --vd-red-6: var(--vd-oc-red-6);\n  --vd-red-7: var(--vd-oc-red-7);\n  --vd-red-8: var(--vd-oc-red-8);\n  --vd-red-9: var(--vd-oc-red-9);\n  --vd-orange-0: var(--vd-oc-orange-0);\n  --vd-orange-1: var(--vd-oc-orange-1);\n  --vd-orange-2: var(--vd-oc-orange-2);\n  --vd-orange-3: var(--vd-oc-orange-3);\n  --vd-orange-4: var(--vd-oc-orange-4);\n  --vd-orange-5: var(--vd-oc-orange-5);\n  --vd-orange-6: var(--vd-oc-orange-6);\n  --vd-orange-7: var(--vd-oc-orange-7);\n  --vd-orange-8: var(--vd-oc-orange-8);\n  --vd-orange-9: var(--vd-oc-orange-9);\n  --vd-yellow-0: var(--vd-oc-yellow-0);\n  --vd-yellow-1: var(--vd-oc-yellow-1);\n  --vd-yellow-2: var(--vd-oc-yellow-2);\n  --vd-yellow-3: var(--vd-oc-yellow-3);\n  --vd-yellow-4: var(--vd-oc-yellow-4);\n  --vd-yellow-5: var(--vd-oc-yellow-5);\n  --vd-yellow-6: var(--vd-oc-yellow-6);\n  --vd-yellow-7: var(--vd-oc-yellow-7);\n  --vd-yellow-8: var(--vd-oc-yellow-8);\n  --vd-yellow-9: var(--vd-oc-yellow-9);\n  --vd-lime-0: var(--vd-oc-lime-0);\n  --vd-lime-1: var(--vd-oc-lime-1);\n  --vd-lime-2: var(--vd-oc-lime-2);\n  --vd-lime-3: var(--vd-oc-lime-3);\n  --vd-lime-4: var(--vd-oc-lime-4);\n  --vd-lime-5: var(--vd-oc-lime-5);\n  --vd-lime-6: var(--vd-oc-lime-6);\n  --vd-lime-7: var(--vd-oc-lime-7);\n  --vd-lime-8: var(--vd-oc-lime-8);\n  --vd-lime-9: var(--vd-oc-lime-9);\n  --vd-green-0: var(--vd-oc-green-0);\n  --vd-green-1: var(--vd-oc-green-1);\n  --vd-green-2: var(--vd-oc-green-2);\n  --vd-green-3: var(--vd-oc-green-3);\n  --vd-green-4: var(--vd-oc-green-4);\n  --vd-green-5: var(--vd-oc-green-5);\n  --vd-green-6: var(--vd-oc-green-6);\n  --vd-green-7: var(--vd-oc-green-7);\n  --vd-green-8: var(--vd-oc-green-8);\n  --vd-green-9: var(--vd-oc-green-9);\n  --vd-teal-0: var(--vd-oc-teal-0);\n  --vd-teal-1: var(--vd-oc-teal-1);\n  --vd-teal-2: var(--vd-oc-teal-2);\n  --vd-teal-3: var(--vd-oc-teal-3);\n  --vd-teal-4: var(--vd-oc-teal-4);\n  --vd-teal-5: var(--vd-oc-teal-5);\n  --vd-teal-6: var(--vd-oc-teal-6);\n  --vd-teal-7: var(--vd-oc-teal-7);\n  --vd-teal-8: var(--vd-oc-teal-8);\n  --vd-teal-9: var(--vd-oc-teal-9);\n  --vd-cyan-0: var(--vd-oc-cyan-0);\n  --vd-cyan-1: var(--vd-oc-cyan-1);\n  --vd-cyan-2: var(--vd-oc-cyan-2);\n  --vd-cyan-3: var(--vd-oc-cyan-3);\n  --vd-cyan-4: var(--vd-oc-cyan-4);\n  --vd-cyan-5: var(--vd-oc-cyan-5);\n  --vd-cyan-6: var(--vd-oc-cyan-6);\n  --vd-cyan-7: var(--vd-oc-cyan-7);\n  --vd-cyan-8: var(--vd-oc-cyan-8);\n  --vd-cyan-9: var(--vd-oc-cyan-9);\n  --vd-blue-0: var(--vd-oc-blue-0);\n  --vd-blue-1: var(--vd-oc-blue-1);\n  --vd-blue-2: var(--vd-oc-blue-2);\n  --vd-blue-3: var(--vd-oc-blue-3);\n  --vd-blue-4: var(--vd-oc-blue-4);\n  --vd-blue-5: var(--vd-oc-blue-5);\n  --vd-blue-6: var(--vd-oc-blue-6);\n  --vd-blue-7: var(--vd-oc-blue-7);\n  --vd-blue-8: var(--vd-oc-blue-8);\n  --vd-blue-9: var(--vd-oc-blue-9);\n  --vd-indigo-0: var(--vd-oc-indigo-0);\n  --vd-indigo-1: var(--vd-oc-indigo-1);\n  --vd-indigo-2: var(--vd-oc-indigo-2);\n  --vd-indigo-3: var(--vd-oc-indigo-3);\n  --vd-indigo-4: var(--vd-oc-indigo-4);\n  --vd-indigo-5: var(--vd-oc-indigo-5);\n  --vd-indigo-6: var(--vd-oc-indigo-6);\n  --vd-indigo-7: var(--vd-oc-indigo-7);\n  --vd-indigo-8: var(--vd-oc-indigo-8);\n  --vd-indigo-9: var(--vd-oc-indigo-9);\n  --vd-violet-0: var(--vd-oc-violet-0);\n  --vd-violet-1: var(--vd-oc-violet-1);\n  --vd-violet-2: var(--vd-oc-violet-2);\n  --vd-violet-3: var(--vd-oc-violet-3);\n  --vd-violet-4: var(--vd-oc-violet-4);\n  --vd-violet-5: var(--vd-oc-violet-5);\n  --vd-violet-6: var(--vd-oc-violet-6);\n  --vd-violet-7: var(--vd-oc-violet-7);\n  --vd-violet-8: var(--vd-oc-violet-8);\n  --vd-violet-9: var(--vd-oc-violet-9);\n  --vd-grape-0: var(--vd-oc-grape-0);\n  --vd-grape-1: var(--vd-oc-grape-1);\n  --vd-grape-2: var(--vd-oc-grape-2);\n  --vd-grape-3: var(--vd-oc-grape-3);\n  --vd-grape-4: var(--vd-oc-grape-4);\n  --vd-grape-5: var(--vd-oc-grape-5);\n  --vd-grape-6: var(--vd-oc-grape-6);\n  --vd-grape-7: var(--vd-oc-grape-7);\n  --vd-grape-8: var(--vd-oc-grape-8);\n  --vd-grape-9: var(--vd-oc-grape-9);\n  --vd-pink-0: var(--vd-oc-pink-0);\n  --vd-pink-1: var(--vd-oc-pink-1);\n  --vd-pink-2: var(--vd-oc-pink-2);\n  --vd-pink-3: var(--vd-oc-pink-3);\n  --vd-pink-4: var(--vd-oc-pink-4);\n  --vd-pink-5: var(--vd-oc-pink-5);\n  --vd-pink-6: var(--vd-oc-pink-6);\n  --vd-pink-7: var(--vd-oc-pink-7);\n  --vd-pink-8: var(--vd-oc-pink-8);\n  --vd-pink-9: var(--vd-oc-pink-9);\n  --vd-slate-0: var(--vd-oc-slate-0);\n  --vd-slate-1: var(--vd-oc-slate-1);\n  --vd-slate-2: var(--vd-oc-slate-2);\n  --vd-slate-3: var(--vd-oc-slate-3);\n  --vd-slate-4: var(--vd-oc-slate-4);\n  --vd-slate-5: var(--vd-oc-slate-5);\n  --vd-slate-6: var(--vd-oc-slate-6);\n  --vd-slate-7: var(--vd-oc-slate-7);\n  --vd-slate-8: var(--vd-oc-slate-8);\n  --vd-slate-9: var(--vd-oc-slate-9);\n  --vd-charcoal-0: var(--vd-oc-charcoal-0);\n  --vd-charcoal-1: var(--vd-oc-charcoal-1);\n  --vd-charcoal-2: var(--vd-oc-charcoal-2);\n  --vd-charcoal-3: var(--vd-oc-charcoal-3);\n  --vd-charcoal-4: var(--vd-oc-charcoal-4);\n  --vd-charcoal-5: var(--vd-oc-charcoal-5);\n  --vd-charcoal-6: var(--vd-oc-charcoal-6);\n  --vd-charcoal-7: var(--vd-oc-charcoal-7);\n  --vd-charcoal-8: var(--vd-oc-charcoal-8);\n  --vd-charcoal-9: var(--vd-oc-charcoal-9);\n  --vd-zinc-0: var(--vd-oc-zinc-0);\n  --vd-zinc-1: var(--vd-oc-zinc-1);\n  --vd-zinc-2: var(--vd-oc-zinc-2);\n  --vd-zinc-3: var(--vd-oc-zinc-3);\n  --vd-zinc-4: var(--vd-oc-zinc-4);\n  --vd-zinc-5: var(--vd-oc-zinc-5);\n  --vd-zinc-6: var(--vd-oc-zinc-6);\n  --vd-zinc-7: var(--vd-oc-zinc-7);\n  --vd-zinc-8: var(--vd-oc-zinc-8);\n  --vd-zinc-9: var(--vd-oc-zinc-9);\n  --vd-neutral-0: var(--vd-oc-neutral-0);\n  --vd-neutral-1: var(--vd-oc-neutral-1);\n  --vd-neutral-2: var(--vd-oc-neutral-2);\n  --vd-neutral-3: var(--vd-oc-neutral-3);\n  --vd-neutral-4: var(--vd-oc-neutral-4);\n  --vd-neutral-5: var(--vd-oc-neutral-5);\n  --vd-neutral-6: var(--vd-oc-neutral-6);\n  --vd-neutral-7: var(--vd-oc-neutral-7);\n  --vd-neutral-8: var(--vd-oc-neutral-8);\n  --vd-neutral-9: var(--vd-oc-neutral-9);\n  --vd-stone-0: var(--vd-oc-stone-0);\n  --vd-stone-1: var(--vd-oc-stone-1);\n  --vd-stone-2: var(--vd-oc-stone-2);\n  --vd-stone-3: var(--vd-oc-stone-3);\n  --vd-stone-4: var(--vd-oc-stone-4);\n  --vd-stone-5: var(--vd-oc-stone-5);\n  --vd-stone-6: var(--vd-oc-stone-6);\n  --vd-stone-7: var(--vd-oc-stone-7);\n  --vd-stone-8: var(--vd-oc-stone-8);\n  --vd-stone-9: var(--vd-oc-stone-9);\n}\n\n/**\n * Vanduo Framework - Self-Hosted Web Fonts\n * Optional font faces for consistent typography across platforms\n * All fonts are OFL (Open Font License) licensed\n */\n\n/* ==========================================================================\n   Inter - Modern, clean sans-serif by Rasmus Andersson\n   https://github.com/rsms/inter\n   ========================================================================== */\n\n@font-face {\n  font-family: 'Inter';\n  src: url('./fonts/inter/inter-regular.woff2') format('woff2');\n  font-weight: 400;\n  font-style: normal;\n  font-display: swap;\n}\n\n@font-face {\n  font-family: 'Inter';\n  src: url('./fonts/inter/inter-medium.woff2') format('woff2');\n  font-weight: 500;\n  font-style: normal;\n  font-display: swap;\n}\n\n@font-face {\n  font-family: 'Inter';\n  src: url('./fonts/inter/inter-semibold.woff2') format('woff2');\n  font-weight: 600;\n  font-style: normal;\n  font-display: swap;\n}\n\n@font-face {\n  font-family: 'Inter';\n  src: url('./fonts/inter/inter-bold.woff2') format('woff2');\n  font-weight: 700;\n  font-style: normal;\n  font-display: swap;\n}\n\n/* ==========================================================================\n   Source Sans 3 - Adobe's versatile sans-serif\n   https://github.com/adobe-fonts/source-sans\n   ========================================================================== */\n\n@font-face {\n  font-family: 'Source Sans 3';\n  src: url('./fonts/source-sans/source-sans-regular.woff2') format('woff2');\n  font-weight: 400;\n  font-style: normal;\n  font-display: swap;\n}\n\n@font-face {\n  font-family: 'Source Sans 3';\n  src: url('./fonts/source-sans/source-sans-semibold.woff2') format('woff2');\n  font-weight: 600;\n  font-style: normal;\n  font-display: swap;\n}\n\n@font-face {\n  font-family: 'Source Sans 3';\n  src: url('./fonts/source-sans/source-sans-bold.woff2') format('woff2');\n  font-weight: 700;\n  font-style: normal;\n  font-display: swap;\n}\n\n/* ==========================================================================\n   Fira Sans - Mozilla's readable sans-serif\n   https://github.com/mozilla/Fira\n   ========================================================================== */\n\n@font-face {\n  font-family: 'Fira Sans';\n  src: url('./fonts/fira-sans/fira-sans-regular.woff2') format('woff2');\n  font-weight: 400;\n  font-style: normal;\n  font-display: swap;\n}\n\n@font-face {\n  font-family: 'Fira Sans';\n  src: url('./fonts/fira-sans/fira-sans-medium.woff2') format('woff2');\n  font-weight: 500;\n  font-style: normal;\n  font-display: swap;\n}\n\n@font-face {\n  font-family: 'Fira Sans';\n  src: url('./fonts/fira-sans/fira-sans-bold.woff2') format('woff2');\n  font-weight: 700;\n  font-style: normal;\n  font-display: swap;\n}\n\n/* ==========================================================================\n   IBM Plex Sans - Professional, complete font family\n   https://github.com/IBM/plex\n   ========================================================================== */\n\n@font-face {\n  font-family: 'IBM Plex Sans';\n  src: url('./fonts/ibm-plex/ibm-plex-sans-regular.woff2') format('woff2');\n  font-weight: 400;\n  font-style: normal;\n  font-display: swap;\n}\n\n@font-face {\n  font-family: 'IBM Plex Sans';\n  src: url('./fonts/ibm-plex/ibm-plex-sans-medium.woff2') format('woff2');\n  font-weight: 500;\n  font-style: normal;\n  font-display: swap;\n}\n\n@font-face {\n  font-family: 'IBM Plex Sans';\n  src: url('./fonts/ibm-plex/ibm-plex-sans-bold.woff2') format('woff2');\n  font-weight: 700;\n  font-style: normal;\n  font-display: swap;\n}\n\n/* ==========================================================================\n   JetBrains Mono - Monospace font for code\n   https://github.com/JetBrains/JetBrainsMono\n   ========================================================================== */\n\n@font-face {\n  font-family: 'JetBrains Mono';\n  src: url('./fonts/jetbrains-mono/jetbrains-mono-regular.woff2') format('woff2');\n  font-weight: 400;\n  font-style: normal;\n  font-display: swap;\n}\n\n@font-face {\n  font-family: 'JetBrains Mono';\n  src: url('./fonts/jetbrains-mono/jetbrains-mono-bold.woff2') format('woff2');\n  font-weight: 700;\n  font-style: normal;\n  font-display: swap;\n}\n\n/* ==========================================================================\n   Ubuntu - Humanist sans-serif by Dalton Maag\n   https://design.ubuntu.com/font/\n   ========================================================================== */\n\n@font-face {\n  font-family: 'Ubuntu';\n  src: url('./fonts/ubuntu/ubuntu-regular.woff2') format('woff2');\n  font-weight: 400;\n  font-style: normal;\n  font-display: swap;\n}\n\n@font-face {\n  font-family: 'Ubuntu';\n  src: url('./fonts/ubuntu/ubuntu-medium.woff2') format('woff2');\n  font-weight: 500;\n  font-style: normal;\n  font-display: swap;\n}\n\n@font-face {\n  font-family: 'Ubuntu';\n  src: url('./fonts/ubuntu/ubuntu-bold.woff2') format('woff2');\n  font-weight: 700;\n  font-style: normal;\n  font-display: swap;\n}\n\n/* ==========================================================================\n   Lato - Humanist sans-serif by Lukasz Dziedzic\n   https://fonts.google.com/specimen/Lato\n   ========================================================================== */\n\n@font-face {\n  font-family: 'Lato';\n  src: url('./fonts/lato/lato-regular.woff2') format('woff2');\n  font-weight: 400;\n  font-style: normal;\n  font-display: swap;\n}\n\n@font-face {\n  font-family: 'Lato';\n  src: url('./fonts/lato/lato-bold.woff2') format('woff2');\n  font-weight: 700;\n  font-style: normal;\n  font-display: swap;\n}\n\n/* ==========================================================================\n   Open Sans - Neutral sans-serif by Steve Matteson\n   https://fonts.google.com/specimen/Open+Sans\n   ========================================================================== */\n\n@font-face {\n  font-family: 'Open Sans';\n  src: url('./fonts/open-sans/open-sans-regular.woff2') format('woff2');\n  font-weight: 400;\n  font-style: normal;\n  font-display: swap;\n}\n\n@font-face {\n  font-family: 'Open Sans';\n  src: url('./fonts/open-sans/open-sans-medium.woff2') format('woff2');\n  font-weight: 500;\n  font-style: normal;\n  font-display: swap;\n}\n\n@font-face {\n  font-family: 'Open Sans';\n  src: url('./fonts/open-sans/open-sans-bold.woff2') format('woff2');\n  font-weight: 700;\n  font-style: normal;\n  font-display: swap;\n}\n\n/* ==========================================================================\n   Rubik - Geometric sans-serif by Hubert and Fischer\n   https://fonts.google.com/specimen/Rubik\n   ========================================================================== */\n\n@font-face {\n  font-family: 'Rubik';\n  src: url('./fonts/rubik/rubik-regular.woff2') format('woff2');\n  font-weight: 400;\n  font-style: normal;\n  font-display: swap;\n}\n\n@font-face {\n  font-family: 'Rubik';\n  src: url('./fonts/rubik/rubik-medium.woff2') format('woff2');\n  font-weight: 500;\n  font-style: normal;\n  font-display: swap;\n}\n\n@font-face {\n  font-family: 'Rubik';\n  src: url('./fonts/rubik/rubik-bold.woff2') format('woff2');\n  font-weight: 700;\n  font-style: normal;\n  font-display: swap;\n}\n\n/* ==========================================================================\n   Titillium Web - Sans-serif by Accademia di Belle Arti di Urbino\n   https://fonts.google.com/specimen/Titillium+Web\n   ========================================================================== */\n\n@font-face {\n  font-family: 'Titillium Web';\n  src: url('./fonts/titillium-web/titillium-web-regular.woff2') format('woff2');\n  font-weight: 400;\n  font-style: normal;\n  font-display: swap;\n}\n\n@font-face {\n  font-family: 'Titillium Web';\n  src: url('./fonts/titillium-web/titillium-web-semibold.woff2') format('woff2');\n  font-weight: 600;\n  font-style: normal;\n  font-display: swap;\n}\n\n@font-face {\n  font-family: 'Titillium Web';\n  src: url('./fonts/titillium-web/titillium-web-bold.woff2') format('woff2');\n  font-weight: 700;\n  font-style: normal;\n  font-display: swap;\n}\n\n/* ==========================================================================\n   Zen Dots - Display sans-serif by Yuki Kato\n   https://fonts.google.com/specimen/Zen+Dots\n   ========================================================================== */\n\n@font-face {\n  font-family: 'Zen Dots';\n  src: url('./fonts/zen-dots/zen-dots-regular.woff2') format('woff2');\n  font-weight: 400;\n  font-style: normal;\n  font-display: swap;\n}\n\n/**\n * Vanduo Framework - Typography\n * Font system, headings, and text utilities\n */\n\n/* stylelint-disable-next-line no-duplicate-selectors -- token families stay grouped by concern. */\n:root {\n  /* Font Families */\n  --vd-font-family-sans: 'Ubuntu', -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif;\n  --vd-font-family-serif: Georgia, \"Times New Roman\", Times, serif;\n  --vd-font-family-mono: \"SF Mono\", Monaco, \"Cascadia Code\", \"Roboto Mono\", Consolas, \"Courier New\", monospace;\n}\n\n/* Font Switching - Applied via data-font attribute on html element */\n[data-font=\"inter\"] {\n  --vd-font-family-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n}\n\n[data-font=\"source-sans\"] {\n  --vd-font-family-sans: 'Source Sans 3', -apple-system, BlinkMacSystemFont, sans-serif;\n}\n\n[data-font=\"fira-sans\"] {\n  --vd-font-family-sans: 'Fira Sans', -apple-system, BlinkMacSystemFont, sans-serif;\n}\n\n[data-font=\"ibm-plex\"] {\n  --vd-font-family-sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, sans-serif;\n}\n\n[data-font=\"jetbrains-mono\"] {\n  --vd-font-family-sans: 'JetBrains Mono', monospace;\n  --vd-font-family-mono: 'JetBrains Mono', monospace;\n}\n\n[data-font=\"ubuntu\"] {\n  --vd-font-family-sans: 'Ubuntu', -apple-system, BlinkMacSystemFont, sans-serif;\n}\n\n[data-font=\"lato\"] {\n  --vd-font-family-sans: 'Lato', -apple-system, BlinkMacSystemFont, sans-serif;\n}\n\n[data-font=\"open-sans\"] {\n  --vd-font-family-sans: 'Open Sans', -apple-system, BlinkMacSystemFont, sans-serif;\n}\n\n[data-font=\"zen-dots\"] {\n  --vd-font-family-sans: 'Zen Dots', -apple-system, BlinkMacSystemFont, sans-serif;\n}\n\n[data-font=\"rubik\"] {\n  --vd-font-family-sans: 'Rubik', -apple-system, BlinkMacSystemFont, sans-serif;\n}\n\n[data-font=\"titillium-web\"] {\n  --vd-font-family-sans: 'Titillium Web', -apple-system, BlinkMacSystemFont, sans-serif;\n}\n\n/* stylelint-disable-next-line no-duplicate-selectors -- type scale tokens stay grouped separately from font-family tokens. */\n:root {\n\n  /* Golden Ratio Type Scale (Fluid)\n   * Uses clamp() to scale between mobile (min) and desktop (max)\n   * Mobile scale: ~1.414 (Augmented Fourth)\n   * Desktop scale: 1.618 (Golden Ratio)\n   */\n  --vd-font-size-xs: 0.625rem;\n  /* 10px */\n  --vd-font-size-sm: 0.8125rem;\n  /* 13px */\n  --vd-font-size-base: 1rem;\n  /* 16px */\n  --vd-font-size-lg: clamp(1.125rem, 1.08rem + 0.22vw, 1.25rem);\n  /* 18px -> 20px */\n  --vd-font-size-xl: clamp(1.35rem, 1.25rem + 0.5vw, 1.625rem);\n  /* 21.6px -> 26px */\n  --vd-font-size-2xl: clamp(1.62rem, 1.46rem + 0.8vw, 2.0625rem);\n  /* 26px -> 33px */\n  --vd-font-size-3xl: clamp(1.94rem, 1.69rem + 1.25vw, 2.625rem);\n  /* 31px -> 42px */\n  --vd-font-size-4xl: clamp(2.33rem, 1.97rem + 1.8vw, 3.3125rem);\n  /* 37px -> 53px */\n  --vd-font-size-5xl: clamp(2.8rem, 2.27rem + 2.65vw, 4.25rem);\n  /* 45px -> 68px */\n  --vd-font-size-6xl: clamp(3.36rem, 2.63rem + 3.65vw, 5.375rem);\n  /* 54px -> 86px */\n\n  /* Font Weights */\n  --vd-font-weight-light: 300;\n  --vd-font-weight-normal: 400;\n  --vd-font-weight-medium: 500;\n  --vd-font-weight-semibold: 600;\n  --vd-font-weight-bold: 700;\n  --vd-font-weight-extrabold: 800;\n\n  /* Line Heights (phi-derived) */\n  --vd-line-height-none: 1;\n  --vd-line-height-tight: 1.236;\n  /* ~2/phi - for headings */\n  --vd-line-height-snug: 1.382;\n  /* ~(1+1/phi)/1.17 */\n  --vd-line-height-normal: 1.5;\n  /* body text standard */\n  --vd-line-height-relaxed: 1.618;\n  /* phi itself */\n  --vd-line-height-loose: 2;\n\n  /* Letter Spacing */\n  --vd-letter-spacing-tighter: -0.05em;\n  --vd-letter-spacing-tight: -0.025em;\n  --vd-letter-spacing-normal: 0;\n  --vd-letter-spacing-wide: 0.025em;\n  --vd-letter-spacing-wider: 0.05em;\n  --vd-letter-spacing-widest: 0.1em;\n}\n\n/* Base Typography */\nbody {\n  font-family: var(--vd-font-family-sans);\n  font-size: var(--vd-font-size-base);\n  font-weight: var(--vd-font-weight-normal);\n  line-height: var(--vd-line-height-normal);\n  color: var(--vd-text-primary);\n  background-color: var(--vd-bg-primary);\n}\n\n/* Headings */\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n  margin-top: 0;\n  margin-bottom: 0.5em;\n  font-weight: var(--vd-font-weight-bold);\n  line-height: var(--vd-line-height-tight);\n  color: var(--vd-text-primary);\n}\n\nh1 {\n  font-size: var(--vd-font-size-4xl);\n}\n\nh2 {\n  font-size: var(--vd-font-size-3xl);\n}\n\nh3 {\n  font-size: var(--vd-font-size-2xl);\n}\n\nh4 {\n  font-size: var(--vd-font-size-xl);\n}\n\nh5 {\n  font-size: var(--vd-font-size-lg);\n}\n\nh6 {\n  font-size: var(--vd-font-size-base);\n}\n\n/* Paragraphs */\np {\n  margin-top: 0;\n  margin-bottom: 1em;\n}\n\n/* Links */\na {\n  color: var(--vd-color-primary);\n  text-decoration: none;\n  transition: color 0.2s ease;\n}\n\na:hover {\n  color: var(--vd-color-primary-dark);\n  text-decoration: underline;\n}\n\na:focus-visible {\n  outline: 2px solid var(--vd-color-primary);\n  outline-offset: 2px;\n}\n\n/* Lists */\nul,\nol {\n  margin-top: 0;\n  margin-bottom: 1em;\n  padding-left: 2em;\n}\n\nli {\n  margin-bottom: 0.25em;\n}\n\n/* Definition Lists */\ndl {\n  margin-top: 0;\n  margin-bottom: 1em;\n}\n\ndt {\n  font-weight: var(--vd-font-weight-semibold);\n  margin-top: 0.5em;\n}\n\ndd {\n  margin-left: 1.5em;\n  margin-bottom: 0.5em;\n}\n\n/* Blockquote */\nblockquote {\n  margin: 1em 0;\n  padding-left: 0.8125rem;\n  /* 13px - fib */\n  border-left: 3px solid var(--vd-color-primary);\n  /* fib(3) */\n  color: var(--vd-text-secondary);\n  font-style: italic;\n}\n\n/* Code */\ncode {\n  font-family: var(--vd-font-family-mono);\n  font-size: 0.875em;\n  background-color: var(--vd-bg-secondary);\n  padding: 0.125em 0.1875em;\n  /* 2px 3px - fib pair */\n  border-radius: var(--vd-radius-fib-3);\n  color: var(--vd-color-primary-dark);\n}\n\npre {\n  font-family: var(--vd-font-family-mono);\n  font-size: 0.875em;\n  background-color: var(--vd-bg-secondary);\n  padding: 0.8125rem;\n  /* 13px - fib */\n  border-radius: var(--vd-radius-fib-5);\n  overflow-x: auto;\n  margin: 1em 0;\n}\n\npre code {\n  background-color: transparent;\n  padding: 0;\n  color: inherit;\n}\n\n/* Font Family Utilities */\n.vd-font-sans {\n  font-family: var(--vd-font-family-sans);\n}\n\n.vd-font-serif {\n  font-family: var(--vd-font-family-serif);\n}\n\n.vd-font-mono {\n  font-family: var(--vd-font-family-mono);\n}\n\n/* Font Size Utilities */\n.vd-text-xs {\n  font-size: var(--vd-font-size-xs);\n}\n\n.vd-text-sm {\n  font-size: var(--vd-font-size-sm);\n}\n\n.vd-text-base {\n  font-size: var(--vd-font-size-base);\n}\n\n.vd-text-lg {\n  font-size: var(--vd-font-size-lg);\n}\n\n.vd-text-xl {\n  font-size: var(--vd-font-size-xl);\n}\n\n.vd-text-2xl {\n  font-size: var(--vd-font-size-2xl);\n}\n\n.vd-text-3xl {\n  font-size: var(--vd-font-size-3xl);\n}\n\n.vd-text-4xl {\n  font-size: var(--vd-font-size-4xl);\n}\n\n.vd-text-5xl {\n  font-size: var(--vd-font-size-5xl);\n}\n\n.vd-text-6xl {\n  font-size: var(--vd-font-size-6xl);\n}\n\n/* Font Weight Utilities */\n.vd-font-light {\n  font-weight: var(--vd-font-weight-light);\n}\n\n.vd-font-normal {\n  font-weight: var(--vd-font-weight-normal);\n}\n\n.vd-font-medium {\n  font-weight: var(--vd-font-weight-medium);\n}\n\n.vd-font-semibold {\n  font-weight: var(--vd-font-weight-semibold);\n}\n\n.vd-font-bold {\n  font-weight: var(--vd-font-weight-bold);\n}\n\n.vd-text-italic {\n  font-style: italic;\n}\n\n.vd-font-extrabold {\n  font-weight: var(--vd-font-weight-extrabold);\n}\n\n/* Text Alignment: see helpers.css for .vd-text-left, .vd-text-center, .vd-text-right, .vd-text-justify */\n\n/* Text Transform Utilities (shorthand aliases — see also .vd-text-uppercase etc. in helpers.css) */\n.uppercase {\n  text-transform: uppercase;\n}\n\n.lowercase {\n  text-transform: lowercase;\n}\n\n.capitalize {\n  text-transform: capitalize;\n}\n\n.normal-case {\n  text-transform: none;\n}\n\n/* Text Decoration Utilities */\n.underline {\n  text-decoration: underline;\n}\n\n.line-through {\n  text-decoration: line-through;\n}\n\n.no-underline {\n  text-decoration: none;\n}\n\n/* Line Height Utilities */\n.leading-none {\n  line-height: var(--vd-line-height-none);\n}\n\n.leading-tight {\n  line-height: var(--vd-line-height-tight);\n}\n\n.leading-snug {\n  line-height: var(--vd-line-height-snug);\n}\n\n.leading-normal {\n  line-height: var(--vd-line-height-normal);\n}\n\n.leading-relaxed {\n  line-height: var(--vd-line-height-relaxed);\n}\n\n.leading-loose {\n  line-height: var(--vd-line-height-loose);\n}\n\n/* Letter Spacing Utilities */\n.tracking-tighter {\n  letter-spacing: var(--vd-letter-spacing-tighter);\n}\n\n.tracking-tight {\n  letter-spacing: var(--vd-letter-spacing-tight);\n}\n\n.tracking-normal {\n  letter-spacing: var(--vd-letter-spacing-normal);\n}\n\n.tracking-wide {\n  letter-spacing: var(--vd-letter-spacing-wide);\n}\n\n.tracking-wider {\n  letter-spacing: var(--vd-letter-spacing-wider);\n}\n\n.tracking-widest {\n  letter-spacing: var(--vd-letter-spacing-widest);\n}\n\n/**\n * Vanduo Framework - Design Tokens\n * Centralized CSS custom properties for consistent theming\n * v1.4.1\n */\n\n:root {\n  /* ============================================\n   * COLOR TOKENS\n   * Based on Open Color with semantic mapping\n   * ============================================ */\n\n  /* Primary Colors */\n  --vd-color-primary: var(--vd-primary-5);\n  --vd-color-primary-light: var(--vd-primary-3);\n  --vd-color-primary-dark: var(--vd-primary-7);\n  --vd-color-primary-hover: var(--vd-primary-6);\n  --vd-color-primary-active: var(--vd-primary-7);\n  --vd-color-primary-rgb: 92, 124, 250;\n  --vd-color-primary-alpha-5: color-mix(in srgb, var(--vd-color-primary) 5%, transparent);\n  --vd-color-primary-alpha-08: color-mix(in srgb, var(--vd-color-primary) 8%, transparent);\n  --vd-color-primary-alpha-10: color-mix(in srgb, var(--vd-color-primary) 10%, transparent);\n  --vd-color-primary-alpha-15: color-mix(in srgb, var(--vd-color-primary) 15%, transparent);\n  --vd-color-primary-alpha-20: color-mix(in srgb, var(--vd-color-primary) 20%, transparent);\n  --vd-color-primary-alpha-30: color-mix(in srgb, var(--vd-color-primary) 30%, transparent);\n  --vd-color-primary-alpha-40: color-mix(in srgb, var(--vd-color-primary) 40%, transparent);\n  --vd-color-primary-alpha-50: color-mix(in srgb, var(--vd-color-primary) 50%, transparent);\n\n  /* Secondary Colors */\n  --vd-color-secondary: var(--vd-secondary-5);\n  --vd-color-secondary-light: var(--vd-secondary-3);\n  --vd-color-secondary-dark: var(--vd-secondary-7);\n  --vd-color-secondary-hover: var(--vd-secondary-6);\n  --vd-color-secondary-active: var(--vd-secondary-7);\n  --vd-color-secondary-alpha-10: color-mix(in srgb, var(--vd-color-secondary) 10%, transparent);\n  --vd-color-secondary-alpha-20: color-mix(in srgb, var(--vd-color-secondary) 20%, transparent);\n\n  /* Accent */\n  --vd-color-accent: var(--vd-color-primary);\n  --vd-color-accent-light: var(--vd-color-primary-light);\n  --vd-color-accent-dark: var(--vd-color-primary-dark);\n\n  /* Semantic Colors */\n  --vd-color-success: var(--vd-success-6);\n  --vd-color-success-light: var(--vd-success-4);\n  --vd-color-success-dark: var(--vd-success-7);\n  --vd-color-success-hover: var(--vd-success-7);\n  --vd-color-success-active: var(--vd-success-8);\n  --vd-color-success-rgb: 64, 192, 87;\n  --vd-color-success-alpha-10: color-mix(in srgb, var(--vd-color-success) 10%, transparent);\n  --vd-color-success-alpha-20: color-mix(in srgb, var(--vd-color-success) 20%, transparent);\n\n  --vd-color-warning: var(--vd-warning-6);\n  --vd-color-warning-light: var(--vd-warning-4);\n  --vd-color-warning-dark: var(--vd-warning-7);\n  --vd-color-warning-hover: var(--vd-warning-7);\n  --vd-color-warning-active: var(--vd-warning-8);\n  --vd-color-warning-rgb: 250, 176, 5;\n  --vd-color-warning-alpha-10: color-mix(in srgb, var(--vd-color-warning) 10%, transparent);\n  --vd-color-warning-alpha-20: color-mix(in srgb, var(--vd-color-warning) 20%, transparent);\n  --vd-color-warning-alpha-30: color-mix(in srgb, var(--vd-color-warning) 30%, transparent);\n\n  --vd-color-error: var(--vd-danger-6);\n  --vd-color-error-light: var(--vd-danger-4);\n  --vd-color-error-dark: var(--vd-danger-7);\n  --vd-color-error-hover: var(--vd-danger-7);\n  --vd-color-error-active: var(--vd-danger-8);\n  --vd-color-error-rgb: 250, 82, 82;\n  --vd-color-error-alpha-10: color-mix(in srgb, var(--vd-color-error) 10%, transparent);\n  --vd-color-error-alpha-20: color-mix(in srgb, var(--vd-color-error) 20%, transparent);\n\n  --vd-color-danger: var(--vd-color-error);\n  --vd-color-danger-light: var(--vd-color-error-light);\n  --vd-color-danger-dark: var(--vd-color-error-dark);\n  --vd-color-danger-hover: var(--vd-color-error-hover);\n  --vd-color-danger-active: var(--vd-color-error-active);\n  --vd-color-danger-alpha-10: var(--vd-color-error-alpha-10);\n  --vd-color-danger-alpha-20: var(--vd-color-error-alpha-20);\n\n  --vd-color-info: var(--vd-info-6);\n  --vd-color-info-light: var(--vd-info-4);\n  --vd-color-info-dark: var(--vd-info-7);\n  --vd-color-info-hover: var(--vd-info-7);\n  --vd-color-info-active: var(--vd-info-8);\n  --vd-color-info-rgb: 34, 139, 230;\n  --vd-color-info-alpha-10: color-mix(in srgb, var(--vd-color-info) 10%, transparent);\n  --vd-color-info-alpha-20: color-mix(in srgb, var(--vd-color-info) 20%, transparent);\n\n  /* Neutral Colors (Open Color) */\n  --vd-color-white: #ffffff;\n  --vd-color-black: #000000;\n  --vd-color-gray-50: var(--vd-gray-0);\n  --vd-color-gray-100: var(--vd-gray-2);\n  --vd-color-gray-200: var(--vd-gray-3);\n  --vd-color-gray-300: var(--vd-gray-4);\n  --vd-color-gray-400: var(--vd-gray-5);\n  --vd-color-gray-500: var(--vd-gray-6);\n  --vd-color-gray-600: var(--vd-gray-7);\n  --vd-color-gray-700: var(--vd-gray-8);\n  --vd-color-gray-800: var(--vd-gray-9);\n  --vd-color-gray-900: #1a1d20;\n\n  /* ============================================\n   * BACKGROUND TOKENS\n   * ============================================ */\n  --vd-bg-primary: var(--vd-color-white);\n  --vd-bg-secondary: var(--vd-color-gray-100);\n  --vd-bg-tertiary: var(--vd-color-gray-200);\n  --vd-bg-dark: var(--vd-color-gray-800);\n  --vd-bg-darker: var(--vd-color-gray-900);\n\n  /* ============================================\n   * TEXT TOKENS\n   * ============================================ */\n  --vd-text-primary: var(--vd-color-gray-900);\n  --vd-text-secondary: var(--vd-color-gray-600);\n  --vd-text-muted: var(--vd-color-gray-500);\n  --vd-text-light: var(--vd-color-gray-400);\n  --vd-text-tertiary: var(--vd-text-secondary);\n  --vd-text-disabled: var(--vd-text-muted);\n  --vd-text-on-primary: var(--vd-color-white);\n  --vd-text-inverse: var(--vd-color-white);\n\n  /* ============================================\n   * BORDER TOKENS\n   * ============================================ */\n  --vd-border-color: var(--vd-color-gray-300);\n  --vd-border-color-light: var(--vd-color-gray-200);\n  --vd-border-color-dark: var(--vd-color-gray-400);\n  --vd-border-width: 1px;\n  --vd-border-radius-sm: 0.25rem;\n  --vd-border-radius-md: 0.5rem;\n  --vd-border-radius-lg: 0.75rem;\n  --vd-border-radius-xl: 1rem;\n\n  /* ============================================\n   * TYPOGRAPHY TOKENS\n   * ============================================ */\n  --vd-font-family-base: 'Ubuntu', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n  --vd-font-family-mono: 'JetBrains Mono', 'Fira Code', monospace;\n\n  /* Font Sizes (Fibonacci scale) */\n  --vd-font-size-xs: 0.75rem;\n  --vd-font-size-sm: 0.8125rem;\n  --vd-font-size-base: 1rem;\n  --vd-font-size-lg: 1.125rem;\n  --vd-font-size-xl: 1.25rem;\n  --vd-font-size-2xl: 1.5rem;\n  --vd-font-size-3xl: 1.875rem;\n  --vd-font-size-4xl: 2.25rem;\n\n  /* Font Weights */\n  --vd-font-weight-light: 300;\n  --vd-font-weight-normal: 400;\n  --vd-font-weight-medium: 500;\n  --vd-font-weight-semibold: 600;\n  --vd-font-weight-bold: 700;\n\n  /* Line Heights */\n  --vd-line-height-tight: 1.25;\n  --vd-line-height-normal: 1.5;\n  --vd-line-height-relaxed: 1.75;\n\n  /* ============================================\n   * SPACING TOKENS (Fibonacci)\n   * ============================================ */\n  --vd-space-fib-1: 0.125rem;   /* 2px */\n  --vd-space-fib-2: 0.25rem;    /* 4px */\n  --vd-space-fib-3: 0.375rem;   /* 6px */\n  --vd-space-fib-5: 0.5rem;     /* 8px */\n  --vd-space-fib-8: 0.75rem;    /* 12px */\n  --vd-space-fib-13: 0.8125rem; /* 13px */\n  --vd-space-fib-21: 1.3125rem; /* 21px */\n  --vd-space-fib-34: 2.125rem;  /* 34px */\n  --vd-space-fib-55: 3.4375rem; /* 55px */\n\n  /* Standard spacing */\n  --vd-space-1: 0.25rem;\n  --vd-space-2: 0.5rem;\n  --vd-space-3: 0.75rem;\n  --vd-space-4: 1rem;\n  --vd-space-5: 1.25rem;\n  --vd-space-6: 1.5rem;\n  --vd-space-8: 2rem;\n  --vd-space-10: 2.5rem;\n  --vd-space-12: 3rem;\n  --vd-space-16: 4rem;\n\n  /* ============================================\n   * SHADOW TOKENS\n   * ============================================ */\n  --vd-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);\n  --vd-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);\n  --vd-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);\n  --vd-shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15);\n\n  /* ============================================\n   * GLASS TOKENS\n   * ============================================ */\n  --vd-glass-blur: 12px;\n  --vd-glass-saturate: 1.8;\n  --vd-glass-bg-opacity: 0.65;\n  --vd-glass-bg-light: rgba(255, 255, 255, var(--vd-glass-bg-opacity));\n  --vd-glass-bg-dark: rgba(30, 30, 30, var(--vd-glass-bg-opacity));\n  --vd-glass-border-alpha: 0.18;\n  --vd-glass-border-light: rgba(255, 255, 255, var(--vd-glass-border-alpha));\n  --vd-glass-border-dark: rgba(255, 255, 255, 0.08);\n  --vd-glass-highlight-alpha: 0.25;\n  --vd-glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);\n  --vd-glass-noise-opacity: 0.03;\n\n  /* ============================================\n   * TRANSITION TOKENS\n   * ============================================ */\n  --vd-transition-fast: 150ms ease;\n  --vd-transition-normal: 250ms ease;\n  --vd-transition-slow: 350ms ease;\n\n  /* ============================================\n   * Z-INDEX TOKENS\n   * ============================================ */\n  --vd-z-dropdown: 1000;\n  --vd-z-sticky: 1020;\n  --vd-z-fixed: 1030;\n  --vd-z-modal-backdrop: 1040;\n  --vd-z-modal: 1050;\n  --vd-z-popover: 1060;\n  --vd-z-tooltip: 1070;\n  --vd-z-toast: 1080;\n\n  /* ============================================\n   * BREAKPOINT TOKENS\n   * (Documented, not CSS variables - used in media queries)\n   * ============================================ */\n  /* sm: 576px */\n  /* md: 768px */\n  /* lg: 992px */\n  /* xl: 1200px */\n  /* 2xl: 1400px */\n}\n\n/* ============================================\n * DARK MODE TOKENS\n * ============================================ */\n[data-theme=\"dark\"] {\n  --vd-bg-primary: var(--vd-color-gray-900);\n  --vd-bg-secondary: var(--vd-color-gray-800);\n  --vd-bg-tertiary: var(--vd-color-gray-700);\n  --vd-bg-dark: var(--vd-color-black);\n  --vd-bg-darker: #000000;\n\n  --vd-text-primary: var(--vd-color-gray-100);\n  --vd-text-secondary: var(--vd-color-gray-400);\n  --vd-text-muted: var(--vd-color-gray-500);\n  --vd-text-light: var(--vd-color-gray-600);\n  --vd-text-inverse: var(--vd-color-gray-900);\n\n  --vd-border-color: var(--vd-color-gray-700);\n  --vd-border-color-light: var(--vd-color-gray-800);\n  --vd-border-color-dark: var(--vd-color-gray-600);\n\n  --vd-color-primary: var(--vd-primary-4);\n  --vd-color-primary-light: var(--vd-primary-3);\n  --vd-color-primary-dark: var(--vd-primary-5);\n  --vd-color-primary-hover: var(--vd-primary-5);\n  --vd-color-primary-active: var(--vd-primary-6);\n  --vd-color-primary-alpha-10: rgba(116, 143, 252, 0.15);\n  --vd-color-primary-alpha-20: rgba(116, 143, 252, 0.25);\n\n  --vd-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);\n  --vd-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);\n  --vd-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.4);\n\n  --vd-glass-bg-light: var(--vd-glass-bg-dark);\n  --vd-glass-border-light: var(--vd-glass-border-dark);\n  --vd-glass-shadow: 0 12px 36px rgba(0, 0, 0, 0.45);\n  --vd-glass-highlight-alpha: 0.16;\n}\n\n/* Dark mode via prefers-color-scheme */\n@media (prefers-color-scheme: dark) {\n  :root:not([data-theme]) {\n    --vd-bg-primary: var(--vd-color-gray-900);\n    --vd-bg-secondary: var(--vd-color-gray-800);\n    --vd-bg-tertiary: var(--vd-color-gray-700);\n    --vd-bg-dark: var(--vd-color-black);\n    --vd-bg-darker: #000000;\n\n    --vd-text-primary: var(--vd-color-gray-100);\n    --vd-text-secondary: var(--vd-color-gray-400);\n    --vd-text-muted: var(--vd-color-gray-500);\n    --vd-text-light: var(--vd-color-gray-600);\n    --vd-text-inverse: var(--vd-color-gray-900);\n\n    --vd-border-color: var(--vd-color-gray-700);\n    --vd-border-color-light: var(--vd-color-gray-800);\n    --vd-border-color-dark: var(--vd-color-gray-600);\n\n    --vd-color-primary: var(--vd-primary-4);\n    --vd-color-primary-light: var(--vd-primary-3);\n    --vd-color-primary-dark: var(--vd-primary-5);\n    --vd-color-primary-hover: var(--vd-primary-5);\n    --vd-color-primary-active: var(--vd-primary-6);\n    --vd-color-primary-alpha-10: rgba(116, 143, 252, 0.15);\n    --vd-color-primary-alpha-20: rgba(116, 143, 252, 0.25);\n\n    --vd-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);\n    --vd-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);\n    --vd-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.4);\n\n    --vd-glass-bg-light: var(--vd-glass-bg-dark);\n    --vd-glass-border-light: var(--vd-glass-border-dark);\n    --vd-glass-shadow: 0 12px 36px rgba(0, 0, 0, 0.45);\n    --vd-glass-highlight-alpha: 0.16;\n  }\n}\n\n/**\n * Vanduo Framework - Grid System\n * Responsive grid system using CSS Grid and Flexbox\n */\n\n:root {\n  /* Container (Fibonacci: 987px) */\n  --vd-container-max-width: 987px;\n  --vd-container-max-width-wide: 1597px;\n  /* next Fibonacci */\n  --vd-container-padding: 0.8125rem;\n  /* 13px - fib */\n\n  /* Breakpoints */\n  --vd-breakpoint-sm: 576px;\n  --vd-breakpoint-md: 768px;\n  --vd-breakpoint-lg: 992px;\n  --vd-breakpoint-xl: 1200px;\n  --vd-breakpoint-2xl: 1400px;\n\n  /* Grid Gutter (Fibonacci: 13px) */\n  --vd-grid-gutter: 0.8125rem;\n\n  /* Fibonacci Gap Scale */\n  --vd-gap-fib-2: 0.125rem;\n  /* 2px */\n  --vd-gap-fib-3: 0.1875rem;\n  /* 3px */\n  --vd-gap-fib-5: 0.3125rem;\n  /* 5px */\n  --vd-gap-fib-8: 0.5rem;\n  /* 8px */\n  --vd-gap-fib-13: 0.8125rem;\n  /* 13px */\n  --vd-gap-fib-21: 1.3125rem;\n  /* 21px */\n\n  /* Responsive Container Widths (Fibonacci-derived)\n   * Using Fibonacci: 377, 610, 987, 1597\n   * Lucas numbers (related to Fibonacci): 521, 843, 1364 for intermediate sizes */\n  --vd-container-sm: 521px;\n  /* Lucas - between fib 377 and 610 */\n  --vd-container-md: 610px;\n  /* Fibonacci */\n  --vd-container-lg: 987px;\n  /* Fibonacci - matches --vd-container-max-width */\n  --vd-container-xl: 1364px;\n  /* Lucas - between fib 987 and 1597 */\n  --vd-container-2xl: 1597px;\n  /* Fibonacci - matches --vd-container-max-width-wide */\n}\n\n/* Container */\n.vd-container {\n  width: 100%;\n  max-width: var(--vd-container-max-width);\n  margin-left: auto;\n  margin-right: auto;\n  padding-left: var(--vd-container-padding);\n  padding-right: var(--vd-container-padding);\n}\n\n.vd-container-fluid {\n  width: 100%;\n  padding-left: var(--vd-container-padding);\n  padding-right: var(--vd-container-padding);\n}\n\n/* Container XL - Intermediate size (1364px Lucas number) */\n.vd-container-xl {\n  width: 100%;\n  max-width: var(--vd-container-xl);\n  margin-left: auto;\n  margin-right: auto;\n  padding-left: var(--vd-container-padding);\n  padding-right: var(--vd-container-padding);\n}\n\n/* Container Wide - Full Fibonacci wide (1597px) */\n.vd-container-wide {\n  width: 100%;\n  max-width: var(--vd-container-max-width-wide);\n  margin-left: auto;\n  margin-right: auto;\n  padding-left: var(--vd-container-padding);\n  padding-right: var(--vd-container-padding);\n}\n\n/* Container Responsive - Grows with viewport at XL+ breakpoints */\n.vd-container-responsive {\n  width: 100%;\n  max-width: var(--vd-container-max-width);\n  margin-left: auto;\n  margin-right: auto;\n  padding-left: var(--vd-container-padding);\n  padding-right: var(--vd-container-padding);\n}\n\n@media (min-width: 1200px) {\n  .vd-container-responsive {\n    max-width: var(--vd-container-xl);\n  }\n}\n\n@media (min-width: 1400px) {\n  .vd-container-responsive {\n    max-width: var(--vd-container-2xl);\n  }\n}\n\n/* Row */\n.vd-row {\n  display: flex;\n  flex-wrap: wrap;\n  margin-left: calc(var(--vd-grid-gutter) * -0.5);\n  margin-right: calc(var(--vd-grid-gutter) * -0.5);\n}\n\n/* Columns */\n[class*=\"col-\"] {\n  flex: 1 0 0%;\n  padding-left: calc(var(--vd-grid-gutter) * 0.5);\n  padding-right: calc(var(--vd-grid-gutter) * 0.5);\n}\n\n/* Column Sizes - Mobile First (12-column system) */\n.vd-col-1 {\n  flex: 0 0 auto;\n  width: 8.333333%;\n}\n\n.vd-col-2 {\n  flex: 0 0 auto;\n  width: 16.666667%;\n}\n\n.vd-col-3 {\n  flex: 0 0 auto;\n  width: 25%;\n}\n\n.vd-col-4 {\n  flex: 0 0 auto;\n  width: 33.333333%;\n}\n\n.vd-col-5 {\n  flex: 0 0 auto;\n  width: 41.666667%;\n}\n\n.vd-col-6 {\n  flex: 0 0 auto;\n  width: 50%;\n}\n\n.vd-col-7 {\n  flex: 0 0 auto;\n  width: 58.333333%;\n}\n\n.vd-col-8 {\n  flex: 0 0 auto;\n  width: 66.666667%;\n}\n\n.vd-col-9 {\n  flex: 0 0 auto;\n  width: 75%;\n}\n\n.vd-col-10 {\n  flex: 0 0 auto;\n  width: 83.333333%;\n}\n\n.vd-col-11 {\n  flex: 0 0 auto;\n  width: 91.666667%;\n}\n\n.vd-col-12 {\n  flex: 0 0 auto;\n  width: 100%;\n}\n\n.vd-col-auto {\n  flex: 0 0 auto;\n  width: auto;\n}\n\n/* Responsive Columns - Small (sm) */\n@media (min-width: 576px) {\n  .vd-col-sm-1 {\n    flex: 0 0 auto;\n    width: 8.333333%;\n  }\n\n  .vd-col-sm-2 {\n    flex: 0 0 auto;\n    width: 16.666667%;\n  }\n\n  .vd-col-sm-3 {\n    flex: 0 0 auto;\n    width: 25%;\n  }\n\n  .vd-col-sm-4 {\n    flex: 0 0 auto;\n    width: 33.333333%;\n  }\n\n  .vd-col-sm-5 {\n    flex: 0 0 auto;\n    width: 41.666667%;\n  }\n\n  .vd-col-sm-6 {\n    flex: 0 0 auto;\n    width: 50%;\n  }\n\n  .vd-col-sm-7 {\n    flex: 0 0 auto;\n    width: 58.333333%;\n  }\n\n  .vd-col-sm-8 {\n    flex: 0 0 auto;\n    width: 66.666667%;\n  }\n\n  .vd-col-sm-9 {\n    flex: 0 0 auto;\n    width: 75%;\n  }\n\n  .vd-col-sm-10 {\n    flex: 0 0 auto;\n    width: 83.333333%;\n  }\n\n  .vd-col-sm-11 {\n    flex: 0 0 auto;\n    width: 91.666667%;\n  }\n\n  .vd-col-sm-12 {\n    flex: 0 0 auto;\n    width: 100%;\n  }\n\n  .vd-col-sm-auto {\n    flex: 0 0 auto;\n    width: auto;\n  }\n}\n\n/* Responsive Columns - Medium (md) */\n@media (min-width: 768px) {\n  .vd-col-md-1 {\n    flex: 0 0 auto;\n    width: 8.333333%;\n  }\n\n  .vd-col-md-2 {\n    flex: 0 0 auto;\n    width: 16.666667%;\n  }\n\n  .vd-col-md-3 {\n    flex: 0 0 auto;\n    width: 25%;\n  }\n\n  .vd-col-md-4 {\n    flex: 0 0 auto;\n    width: 33.333333%;\n  }\n\n  .vd-col-md-5 {\n    flex: 0 0 auto;\n    width: 41.666667%;\n  }\n\n  .vd-col-md-6 {\n    flex: 0 0 auto;\n    width: 50%;\n  }\n\n  .vd-col-md-7 {\n    flex: 0 0 auto;\n    width: 58.333333%;\n  }\n\n  .vd-col-md-8 {\n    flex: 0 0 auto;\n    width: 66.666667%;\n  }\n\n  .vd-col-md-9 {\n    flex: 0 0 auto;\n    width: 75%;\n  }\n\n  .vd-col-md-10 {\n    flex: 0 0 auto;\n    width: 83.333333%;\n  }\n\n  .vd-col-md-11 {\n    flex: 0 0 auto;\n    width: 91.666667%;\n  }\n\n  .vd-col-md-12 {\n    flex: 0 0 auto;\n    width: 100%;\n  }\n\n  .vd-col-md-auto {\n    flex: 0 0 auto;\n    width: auto;\n  }\n}\n\n/* Responsive Columns - Large (lg) */\n@media (min-width: 992px) {\n  .vd-col-lg-1 {\n    flex: 0 0 auto;\n    width: 8.333333%;\n  }\n\n  .vd-col-lg-2 {\n    flex: 0 0 auto;\n    width: 16.666667%;\n  }\n\n  .vd-col-lg-3 {\n    flex: 0 0 auto;\n    width: 25%;\n  }\n\n  .vd-col-lg-4 {\n    flex: 0 0 auto;\n    width: 33.333333%;\n  }\n\n  .vd-col-lg-5 {\n    flex: 0 0 auto;\n    width: 41.666667%;\n  }\n\n  .vd-col-lg-6 {\n    flex: 0 0 auto;\n    width: 50%;\n  }\n\n  .vd-col-lg-7 {\n    flex: 0 0 auto;\n    width: 58.333333%;\n  }\n\n  .vd-col-lg-8 {\n    flex: 0 0 auto;\n    width: 66.666667%;\n  }\n\n  .vd-col-lg-9 {\n    flex: 0 0 auto;\n    width: 75%;\n  }\n\n  .vd-col-lg-10 {\n    flex: 0 0 auto;\n    width: 83.333333%;\n  }\n\n  .vd-col-lg-11 {\n    flex: 0 0 auto;\n    width: 91.666667%;\n  }\n\n  .vd-col-lg-12 {\n    flex: 0 0 auto;\n    width: 100%;\n  }\n\n  .vd-col-lg-auto {\n    flex: 0 0 auto;\n    width: auto;\n  }\n}\n\n/* Responsive Columns - Extra Large (xl) */\n@media (min-width: 1200px) {\n  .vd-col-xl-1 {\n    flex: 0 0 auto;\n    width: 8.333333%;\n  }\n\n  .vd-col-xl-2 {\n    flex: 0 0 auto;\n    width: 16.666667%;\n  }\n\n  .vd-col-xl-3 {\n    flex: 0 0 auto;\n    width: 25%;\n  }\n\n  .vd-col-xl-4 {\n    flex: 0 0 auto;\n    width: 33.333333%;\n  }\n\n  .vd-col-xl-5 {\n    flex: 0 0 auto;\n    width: 41.666667%;\n  }\n\n  .vd-col-xl-6 {\n    flex: 0 0 auto;\n    width: 50%;\n  }\n\n  .vd-col-xl-7 {\n    flex: 0 0 auto;\n    width: 58.333333%;\n  }\n\n  .vd-col-xl-8 {\n    flex: 0 0 auto;\n    width: 66.666667%;\n  }\n\n  .vd-col-xl-9 {\n    flex: 0 0 auto;\n    width: 75%;\n  }\n\n  .vd-col-xl-10 {\n    flex: 0 0 auto;\n    width: 83.333333%;\n  }\n\n  .vd-col-xl-11 {\n    flex: 0 0 auto;\n    width: 91.666667%;\n  }\n\n  .vd-col-xl-12 {\n    flex: 0 0 auto;\n    width: 100%;\n  }\n\n  .vd-col-xl-auto {\n    flex: 0 0 auto;\n    width: auto;\n  }\n}\n\n/* Responsive Columns - Extra Extra Large (2xl) */\n@media (min-width: 1400px) {\n  .vd-col-2xl-1 {\n    flex: 0 0 auto;\n    width: 8.333333%;\n  }\n\n  .vd-col-2xl-2 {\n    flex: 0 0 auto;\n    width: 16.666667%;\n  }\n\n  .vd-col-2xl-3 {\n    flex: 0 0 auto;\n    width: 25%;\n  }\n\n  .vd-col-2xl-4 {\n    flex: 0 0 auto;\n    width: 33.333333%;\n  }\n\n  .vd-col-2xl-5 {\n    flex: 0 0 auto;\n    width: 41.666667%;\n  }\n\n  .vd-col-2xl-6 {\n    flex: 0 0 auto;\n    width: 50%;\n  }\n\n  .vd-col-2xl-7 {\n    flex: 0 0 auto;\n    width: 58.333333%;\n  }\n\n  .vd-col-2xl-8 {\n    flex: 0 0 auto;\n    width: 66.666667%;\n  }\n\n  .vd-col-2xl-9 {\n    flex: 0 0 auto;\n    width: 75%;\n  }\n\n  .vd-col-2xl-10 {\n    flex: 0 0 auto;\n    width: 83.333333%;\n  }\n\n  .vd-col-2xl-11 {\n    flex: 0 0 auto;\n    width: 91.666667%;\n  }\n\n  .vd-col-2xl-12 {\n    flex: 0 0 auto;\n    width: 100%;\n  }\n\n  .vd-col-2xl-auto {\n    flex: 0 0 auto;\n    width: auto;\n  }\n}\n\n/* Offset Utilities */\n.vd-offset-0 {\n  margin-left: 0;\n}\n\n.vd-offset-1 {\n  margin-left: 8.333333%;\n}\n\n.vd-offset-2 {\n  margin-left: 16.666667%;\n}\n\n.vd-offset-3 {\n  margin-left: 25%;\n}\n\n.vd-offset-4 {\n  margin-left: 33.333333%;\n}\n\n.vd-offset-5 {\n  margin-left: 41.666667%;\n}\n\n.vd-offset-6 {\n  margin-left: 50%;\n}\n\n.vd-offset-7 {\n  margin-left: 58.333333%;\n}\n\n.vd-offset-8 {\n  margin-left: 66.666667%;\n}\n\n.vd-offset-9 {\n  margin-left: 75%;\n}\n\n.vd-offset-10 {\n  margin-left: 83.333333%;\n}\n\n.vd-offset-11 {\n  margin-left: 91.666667%;\n}\n\n/* Responsive Offsets - sm */\n@media (min-width: 576px) {\n  .vd-offset-sm-0 {\n    margin-left: 0;\n  }\n\n  .vd-offset-sm-1 {\n    margin-left: 8.333333%;\n  }\n\n  .vd-offset-sm-2 {\n    margin-left: 16.666667%;\n  }\n\n  .vd-offset-sm-3 {\n    margin-left: 25%;\n  }\n\n  .vd-offset-sm-4 {\n    margin-left: 33.333333%;\n  }\n\n  .vd-offset-sm-5 {\n    margin-left: 41.666667%;\n  }\n\n  .vd-offset-sm-6 {\n    margin-left: 50%;\n  }\n\n  .vd-offset-sm-7 {\n    margin-left: 58.333333%;\n  }\n\n  .vd-offset-sm-8 {\n    margin-left: 66.666667%;\n  }\n\n  .vd-offset-sm-9 {\n    margin-left: 75%;\n  }\n\n  .vd-offset-sm-10 {\n    margin-left: 83.333333%;\n  }\n\n  .vd-offset-sm-11 {\n    margin-left: 91.666667%;\n  }\n}\n\n/* Responsive Offsets - md */\n@media (min-width: 768px) {\n  .vd-offset-md-0 {\n    margin-left: 0;\n  }\n\n  .vd-offset-md-1 {\n    margin-left: 8.333333%;\n  }\n\n  .vd-offset-md-2 {\n    margin-left: 16.666667%;\n  }\n\n  .vd-offset-md-3 {\n    margin-left: 25%;\n  }\n\n  .vd-offset-md-4 {\n    margin-left: 33.333333%;\n  }\n\n  .vd-offset-md-5 {\n    margin-left: 41.666667%;\n  }\n\n  .vd-offset-md-6 {\n    margin-left: 50%;\n  }\n\n  .vd-offset-md-7 {\n    margin-left: 58.333333%;\n  }\n\n  .vd-offset-md-8 {\n    margin-left: 66.666667%;\n  }\n\n  .vd-offset-md-9 {\n    margin-left: 75%;\n  }\n\n  .vd-offset-md-10 {\n    margin-left: 83.333333%;\n  }\n\n  .vd-offset-md-11 {\n    margin-left: 91.666667%;\n  }\n}\n\n/* Responsive Offsets - lg */\n@media (min-width: 992px) {\n  .vd-offset-lg-0 {\n    margin-left: 0;\n  }\n\n  .vd-offset-lg-1 {\n    margin-left: 8.333333%;\n  }\n\n  .vd-offset-lg-2 {\n    margin-left: 16.666667%;\n  }\n\n  .vd-offset-lg-3 {\n    margin-left: 25%;\n  }\n\n  .vd-offset-lg-4 {\n    margin-left: 33.333333%;\n  }\n\n  .vd-offset-lg-5 {\n    margin-left: 41.666667%;\n  }\n\n  .vd-offset-lg-6 {\n    margin-left: 50%;\n  }\n\n  .vd-offset-lg-7 {\n    margin-left: 58.333333%;\n  }\n\n  .vd-offset-lg-8 {\n    margin-left: 66.666667%;\n  }\n\n  .vd-offset-lg-9 {\n    margin-left: 75%;\n  }\n\n  .vd-offset-lg-10 {\n    margin-left: 83.333333%;\n  }\n\n  .vd-offset-lg-11 {\n    margin-left: 91.666667%;\n  }\n}\n\n/* Responsive Offsets - xl */\n@media (min-width: 1200px) {\n  .vd-offset-xl-0 {\n    margin-left: 0;\n  }\n\n  .vd-offset-xl-1 {\n    margin-left: 8.333333%;\n  }\n\n  .vd-offset-xl-2 {\n    margin-left: 16.666667%;\n  }\n\n  .vd-offset-xl-3 {\n    margin-left: 25%;\n  }\n\n  .vd-offset-xl-4 {\n    margin-left: 33.333333%;\n  }\n\n  .vd-offset-xl-5 {\n    margin-left: 41.666667%;\n  }\n\n  .vd-offset-xl-6 {\n    margin-left: 50%;\n  }\n\n  .vd-offset-xl-7 {\n    margin-left: 58.333333%;\n  }\n\n  .vd-offset-xl-8 {\n    margin-left: 66.666667%;\n  }\n\n  .vd-offset-xl-9 {\n    margin-left: 75%;\n  }\n\n  .vd-offset-xl-10 {\n    margin-left: 83.333333%;\n  }\n\n  .vd-offset-xl-11 {\n    margin-left: 91.666667%;\n  }\n}\n\n/* Responsive Offsets - 2xl */\n@media (min-width: 1400px) {\n  .vd-offset-2xl-0 {\n    margin-left: 0;\n  }\n\n  .vd-offset-2xl-1 {\n    margin-left: 8.333333%;\n  }\n\n  .vd-offset-2xl-2 {\n    margin-left: 16.666667%;\n  }\n\n  .vd-offset-2xl-3 {\n    margin-left: 25%;\n  }\n\n  .vd-offset-2xl-4 {\n    margin-left: 33.333333%;\n  }\n\n  .vd-offset-2xl-5 {\n    margin-left: 41.666667%;\n  }\n\n  .vd-offset-2xl-6 {\n    margin-left: 50%;\n  }\n\n  .vd-offset-2xl-7 {\n    margin-left: 58.333333%;\n  }\n\n  .vd-offset-2xl-8 {\n    margin-left: 66.666667%;\n  }\n\n  .vd-offset-2xl-9 {\n    margin-left: 75%;\n  }\n\n  .vd-offset-2xl-10 {\n    margin-left: 83.333333%;\n  }\n\n  .vd-offset-2xl-11 {\n    margin-left: 91.666667%;\n  }\n}\n\n/* ===================================================\n * Order Utilities\n * Control visual order of flex/grid items\n * =================================================== */\n\n.vd-order-first {\n  order: -1;\n}\n\n.vd-order-last {\n  order: 13;\n}\n\n.vd-order-0 {\n  order: 0;\n}\n\n.vd-order-1 {\n  order: 1;\n}\n\n.vd-order-2 {\n  order: 2;\n}\n\n.vd-order-3 {\n  order: 3;\n}\n\n.vd-order-4 {\n  order: 4;\n}\n\n.vd-order-5 {\n  order: 5;\n}\n\n.vd-order-6 {\n  order: 6;\n}\n\n.vd-order-7 {\n  order: 7;\n}\n\n.vd-order-8 {\n  order: 8;\n}\n\n.vd-order-9 {\n  order: 9;\n}\n\n.vd-order-10 {\n  order: 10;\n}\n\n.vd-order-11 {\n  order: 11;\n}\n\n.vd-order-12 {\n  order: 12;\n}\n\n/* Responsive Order - sm */\n@media (min-width: 576px) {\n  .vd-order-sm-first {\n    order: -1;\n  }\n\n  .vd-order-sm-last {\n    order: 13;\n  }\n\n  .vd-order-sm-0 {\n    order: 0;\n  }\n\n  .vd-order-sm-1 {\n    order: 1;\n  }\n\n  .vd-order-sm-2 {\n    order: 2;\n  }\n\n  .vd-order-sm-3 {\n    order: 3;\n  }\n\n  .vd-order-sm-4 {\n    order: 4;\n  }\n\n  .vd-order-sm-5 {\n    order: 5;\n  }\n\n  .vd-order-sm-6 {\n    order: 6;\n  }\n\n  .vd-order-sm-7 {\n    order: 7;\n  }\n\n  .vd-order-sm-8 {\n    order: 8;\n  }\n\n  .vd-order-sm-9 {\n    order: 9;\n  }\n\n  .vd-order-sm-10 {\n    order: 10;\n  }\n\n  .vd-order-sm-11 {\n    order: 11;\n  }\n\n  .vd-order-sm-12 {\n    order: 12;\n  }\n}\n\n/* Responsive Order - md */\n@media (min-width: 768px) {\n  .vd-order-md-first {\n    order: -1;\n  }\n\n  .vd-order-md-last {\n    order: 13;\n  }\n\n  .vd-order-md-0 {\n    order: 0;\n  }\n\n  .vd-order-md-1 {\n    order: 1;\n  }\n\n  .vd-order-md-2 {\n    order: 2;\n  }\n\n  .vd-order-md-3 {\n    order: 3;\n  }\n\n  .vd-order-md-4 {\n    order: 4;\n  }\n\n  .vd-order-md-5 {\n    order: 5;\n  }\n\n  .vd-order-md-6 {\n    order: 6;\n  }\n\n  .vd-order-md-7 {\n    order: 7;\n  }\n\n  .vd-order-md-8 {\n    order: 8;\n  }\n\n  .vd-order-md-9 {\n    order: 9;\n  }\n\n  .vd-order-md-10 {\n    order: 10;\n  }\n\n  .vd-order-md-11 {\n    order: 11;\n  }\n\n  .vd-order-md-12 {\n    order: 12;\n  }\n}\n\n/* Responsive Order - lg */\n@media (min-width: 992px) {\n  .vd-order-lg-first {\n    order: -1;\n  }\n\n  .vd-order-lg-last {\n    order: 13;\n  }\n\n  .vd-order-lg-0 {\n    order: 0;\n  }\n\n  .vd-order-lg-1 {\n    order: 1;\n  }\n\n  .vd-order-lg-2 {\n    order: 2;\n  }\n\n  .vd-order-lg-3 {\n    order: 3;\n  }\n\n  .vd-order-lg-4 {\n    order: 4;\n  }\n\n  .vd-order-lg-5 {\n    order: 5;\n  }\n\n  .vd-order-lg-6 {\n    order: 6;\n  }\n\n  .vd-order-lg-7 {\n    order: 7;\n  }\n\n  .vd-order-lg-8 {\n    order: 8;\n  }\n\n  .vd-order-lg-9 {\n    order: 9;\n  }\n\n  .vd-order-lg-10 {\n    order: 10;\n  }\n\n  .vd-order-lg-11 {\n    order: 11;\n  }\n\n  .vd-order-lg-12 {\n    order: 12;\n  }\n}\n\n/* Responsive Order - xl */\n@media (min-width: 1200px) {\n  .vd-order-xl-first {\n    order: -1;\n  }\n\n  .vd-order-xl-last {\n    order: 13;\n  }\n\n  .vd-order-xl-0 {\n    order: 0;\n  }\n\n  .vd-order-xl-1 {\n    order: 1;\n  }\n\n  .vd-order-xl-2 {\n    order: 2;\n  }\n\n  .vd-order-xl-3 {\n    order: 3;\n  }\n\n  .vd-order-xl-4 {\n    order: 4;\n  }\n\n  .vd-order-xl-5 {\n    order: 5;\n  }\n\n  .vd-order-xl-6 {\n    order: 6;\n  }\n\n  .vd-order-xl-7 {\n    order: 7;\n  }\n\n  .vd-order-xl-8 {\n    order: 8;\n  }\n\n  .vd-order-xl-9 {\n    order: 9;\n  }\n\n  .vd-order-xl-10 {\n    order: 10;\n  }\n\n  .vd-order-xl-11 {\n    order: 11;\n  }\n\n  .vd-order-xl-12 {\n    order: 12;\n  }\n}\n\n/* Responsive Order - 2xl */\n@media (min-width: 1400px) {\n  .vd-order-2xl-first {\n    order: -1;\n  }\n\n  .vd-order-2xl-last {\n    order: 13;\n  }\n\n  .vd-order-2xl-0 {\n    order: 0;\n  }\n\n  .vd-order-2xl-1 {\n    order: 1;\n  }\n\n  .vd-order-2xl-2 {\n    order: 2;\n  }\n\n  .vd-order-2xl-3 {\n    order: 3;\n  }\n\n  .vd-order-2xl-4 {\n    order: 4;\n  }\n\n  .vd-order-2xl-5 {\n    order: 5;\n  }\n\n  .vd-order-2xl-6 {\n    order: 6;\n  }\n\n  .vd-order-2xl-7 {\n    order: 7;\n  }\n\n  .vd-order-2xl-8 {\n    order: 8;\n  }\n\n  .vd-order-2xl-9 {\n    order: 9;\n  }\n\n  .vd-order-2xl-10 {\n    order: 10;\n  }\n\n  .vd-order-2xl-11 {\n    order: 11;\n  }\n\n  .vd-order-2xl-12 {\n    order: 12;\n  }\n}\n\n/* ===================================================\n * Golden Ratio Grid Layouts\n * Two-column split: 38.2% / 61.8% (minor / major)\n * Fibonacci column ratios: 2:3:5, 3:5:8, 5:8\n * =================================================== */\n\n/* Fibonacci-number container widths */\n.vd-container-fib-610 {\n  max-width: 610px;\n  margin-left: auto;\n  margin-right: auto;\n  padding-left: var(--vd-container-padding);\n  padding-right: var(--vd-container-padding);\n}\n\n.vd-container-fib-987 {\n  max-width: 987px;\n  margin-left: auto;\n  margin-right: auto;\n  padding-left: var(--vd-container-padding);\n  padding-right: var(--vd-container-padding);\n}\n\n.vd-container-fib-1597 {\n  max-width: 1597px;\n  margin-left: auto;\n  margin-right: auto;\n  padding-left: var(--vd-container-padding);\n  padding-right: var(--vd-container-padding);\n}\n\n/* ===================================================\n * Responsive Containers\n * Fluid below their breakpoint, fixed max-width above\n * =================================================== */\n\n.vd-container-sm,\n.vd-container-md,\n.vd-container-lg,\n.vd-container-xl,\n.vd-container-2xl {\n  width: 100%;\n  margin-left: auto;\n  margin-right: auto;\n  padding-left: var(--vd-container-padding);\n  padding-right: var(--vd-container-padding);\n}\n\n@media (min-width: 576px) {\n  .vd-container-sm {\n    max-width: var(--vd-container-sm);\n  }\n}\n\n@media (min-width: 768px) {\n  .vd-container-sm {\n    max-width: var(--vd-container-md);\n  }\n\n  .vd-container-md {\n    max-width: var(--vd-container-md);\n  }\n}\n\n@media (min-width: 992px) {\n  .vd-container-sm {\n    max-width: var(--vd-container-lg);\n  }\n\n  .vd-container-md {\n    max-width: var(--vd-container-lg);\n  }\n\n  .vd-container-lg {\n    max-width: var(--vd-container-lg);\n  }\n}\n\n@media (min-width: 1200px) {\n  .vd-container-sm {\n    max-width: var(--vd-container-xl);\n  }\n\n  .vd-container-md {\n    max-width: var(--vd-container-xl);\n  }\n\n  .vd-container-lg {\n    max-width: var(--vd-container-xl);\n  }\n\n  .vd-container-xl {\n    max-width: var(--vd-container-xl);\n  }\n}\n\n@media (min-width: 1400px) {\n  .vd-container-sm {\n    max-width: var(--vd-container-2xl);\n  }\n\n  .vd-container-md {\n    max-width: var(--vd-container-2xl);\n  }\n\n  .vd-container-lg {\n    max-width: var(--vd-container-2xl);\n  }\n\n  .vd-container-xl {\n    max-width: var(--vd-container-2xl);\n  }\n\n  .vd-container-2xl {\n    max-width: var(--vd-container-2xl);\n  }\n}\n\n/* Golden Ratio Two-Column (flexbox) */\n.vd-row-golden {\n  display: flex;\n  flex-wrap: wrap;\n  margin-left: calc(var(--vd-grid-gutter) * -0.5);\n  margin-right: calc(var(--vd-grid-gutter) * -0.5);\n}\n\n.vd-row-golden>.vd-col-golden-minor {\n  flex: 0 0 auto;\n  width: 38.196601%;\n  padding-left: calc(var(--vd-grid-gutter) * 0.5);\n  padding-right: calc(var(--vd-grid-gutter) * 0.5);\n}\n\n.vd-row-golden>.vd-col-golden-major {\n  flex: 0 0 auto;\n  width: 61.803399%;\n  padding-left: calc(var(--vd-grid-gutter) * 0.5);\n  padding-right: calc(var(--vd-grid-gutter) * 0.5);\n}\n\n/* Fibonacci Two-Column: 5:8 proportions */\n.vd-row-fib-2 {\n  display: flex;\n  flex-wrap: wrap;\n  margin-left: calc(var(--vd-grid-gutter) * -0.5);\n  margin-right: calc(var(--vd-grid-gutter) * -0.5);\n}\n\n.vd-row-fib-2>.vd-col-fib-5 {\n  flex: 0 0 auto;\n  width: 38.461538%;\n  /* 5/13 */\n  padding-left: calc(var(--vd-grid-gutter) * 0.5);\n  padding-right: calc(var(--vd-grid-gutter) * 0.5);\n}\n\n.vd-row-fib-2>.vd-col-fib-8 {\n  flex: 0 0 auto;\n  width: 61.538462%;\n  /* 8/13 */\n  padding-left: calc(var(--vd-grid-gutter) * 0.5);\n  padding-right: calc(var(--vd-grid-gutter) * 0.5);\n}\n\n/* Fibonacci Three-Column: 2:3:5 proportions */\n.vd-row-fib-3 {\n  display: flex;\n  flex-wrap: wrap;\n  margin-left: calc(var(--vd-grid-gutter) * -0.5);\n  margin-right: calc(var(--vd-grid-gutter) * -0.5);\n}\n\n.vd-row-fib-3>.vd-col-fib-2 {\n  flex: 0 0 auto;\n  width: 20%;\n  /* 2/10 */\n  padding-left: calc(var(--vd-grid-gutter) * 0.5);\n  padding-right: calc(var(--vd-grid-gutter) * 0.5);\n}\n\n.vd-row-fib-3>.vd-col-fib-3 {\n  flex: 0 0 auto;\n  width: 30%;\n  /* 3/10 */\n  padding-left: calc(var(--vd-grid-gutter) * 0.5);\n  padding-right: calc(var(--vd-grid-gutter) * 0.5);\n}\n\n.vd-row-fib-3>.vd-col-fib-5 {\n  flex: 0 0 auto;\n  width: 50%;\n  /* 5/10 */\n  padding-left: calc(var(--vd-grid-gutter) * 0.5);\n  padding-right: calc(var(--vd-grid-gutter) * 0.5);\n}\n\n/* CSS Grid Golden Ratio layouts */\n.vd-grid-golden,\n.grid-golden {\n  display: grid;\n  grid-template-columns: 1fr 1.618fr;\n  gap: var(--vd-grid-gutter);\n}\n\n.vd-grid-golden-reverse,\n.grid-golden-reverse {\n  display: grid;\n  grid-template-columns: 1.618fr 1fr;\n  gap: var(--vd-grid-gutter);\n}\n\n.vd-grid-fib-3,\n.grid-fib-3 {\n  display: grid;\n  grid-template-columns: 2fr 3fr 5fr;\n  gap: var(--vd-grid-gutter);\n}\n\n/* Fibonacci Four-Column: 1:2:3:5 proportions */\n.vd-row-fib-4 {\n  display: flex;\n  flex-wrap: wrap;\n  margin-left: calc(var(--vd-grid-gutter) * -0.5);\n  margin-right: calc(var(--vd-grid-gutter) * -0.5);\n}\n\n.vd-row-fib-4>.vd-col-fib-1 {\n  flex: 0 0 auto;\n  width: 9.090909%;\n  /* 1/11 */\n  padding-left: calc(var(--vd-grid-gutter) * 0.5);\n  padding-right: calc(var(--vd-grid-gutter) * 0.5);\n}\n\n.vd-row-fib-4>.vd-col-fib-2 {\n  flex: 0 0 auto;\n  width: 18.181818%;\n  /* 2/11 */\n  padding-left: calc(var(--vd-grid-gutter) * 0.5);\n  padding-right: calc(var(--vd-grid-gutter) * 0.5);\n}\n\n.vd-row-fib-4>.vd-col-fib-3 {\n  flex: 0 0 auto;\n  width: 27.272727%;\n  /* 3/11 */\n  padding-left: calc(var(--vd-grid-gutter) * 0.5);\n  padding-right: calc(var(--vd-grid-gutter) * 0.5);\n}\n\n.vd-row-fib-4>.vd-col-fib-5 {\n  flex: 0 0 auto;\n  width: 45.454545%;\n  /* 5/11 */\n  padding-left: calc(var(--vd-grid-gutter) * 0.5);\n  padding-right: calc(var(--vd-grid-gutter) * 0.5);\n}\n\n/* Fibonacci Three-Column: 3:5:8 proportions */\n.vd-row-fib-3-alt {\n  display: flex;\n  flex-wrap: wrap;\n  margin-left: calc(var(--vd-grid-gutter) * -0.5);\n  margin-right: calc(var(--vd-grid-gutter) * -0.5);\n}\n\n.vd-row-fib-3-alt>.vd-col-fib-3 {\n  flex: 0 0 auto;\n  width: 18.75%;\n  /* 3/16 */\n  padding-left: calc(var(--vd-grid-gutter) * 0.5);\n  padding-right: calc(var(--vd-grid-gutter) * 0.5);\n}\n\n.vd-row-fib-3-alt>.vd-col-fib-5 {\n  flex: 0 0 auto;\n  width: 31.25%;\n  /* 5/16 */\n  padding-left: calc(var(--vd-grid-gutter) * 0.5);\n  padding-right: calc(var(--vd-grid-gutter) * 0.5);\n}\n\n.vd-row-fib-3-alt>.vd-col-fib-8 {\n  flex: 0 0 auto;\n  width: 50%;\n  /* 8/16 */\n  padding-left: calc(var(--vd-grid-gutter) * 0.5);\n  padding-right: calc(var(--vd-grid-gutter) * 0.5);\n}\n\n/* CSS Grid Fibonacci variants */\n.vd-grid-fib-4,\n.grid-fib-4 {\n  display: grid;\n  grid-template-columns: 1fr 2fr 3fr 5fr;\n  gap: var(--vd-grid-gutter);\n}\n\n.vd-grid-fib-3-alt,\n.grid-fib-3-alt {\n  display: grid;\n  grid-template-columns: 3fr 5fr 8fr;\n  gap: var(--vd-grid-gutter);\n}\n\n/* ===================================================\n * Fibonacci Gap Utilities\n * Gap classes using Fibonacci sequence values\n * =================================================== */\n\n.vd-gap-fib-2 {\n  gap: var(--vd-gap-fib-2);\n}\n\n.vd-gap-fib-3 {\n  gap: var(--vd-gap-fib-3);\n}\n\n.vd-gap-fib-5 {\n  gap: var(--vd-gap-fib-5);\n}\n\n.vd-gap-fib-8 {\n  gap: var(--vd-gap-fib-8);\n}\n\n.vd-gap-fib-13 {\n  gap: var(--vd-gap-fib-13);\n}\n\n.vd-gap-fib-21 {\n  gap: var(--vd-gap-fib-21);\n}\n\n.vd-row-gap-fib-2 {\n  row-gap: var(--vd-gap-fib-2);\n}\n\n.vd-row-gap-fib-3 {\n  row-gap: var(--vd-gap-fib-3);\n}\n\n.vd-row-gap-fib-5 {\n  row-gap: var(--vd-gap-fib-5);\n}\n\n.vd-row-gap-fib-8 {\n  row-gap: var(--vd-gap-fib-8);\n}\n\n.vd-row-gap-fib-13 {\n  row-gap: var(--vd-gap-fib-13);\n}\n\n.vd-row-gap-fib-21 {\n  row-gap: var(--vd-gap-fib-21);\n}\n\n.vd-col-gap-fib-2 {\n  column-gap: var(--vd-gap-fib-2);\n}\n\n.vd-col-gap-fib-3 {\n  column-gap: var(--vd-gap-fib-3);\n}\n\n.vd-col-gap-fib-5 {\n  column-gap: var(--vd-gap-fib-5);\n}\n\n.vd-col-gap-fib-8 {\n  column-gap: var(--vd-gap-fib-8);\n}\n\n.vd-col-gap-fib-13 {\n  column-gap: var(--vd-gap-fib-13);\n}\n\n.vd-col-gap-fib-21 {\n  column-gap: var(--vd-gap-fib-21);\n}\n\n/* ===================================================\n * Grid Mode Toggle Classes\n * Switch between standard 12-column and Fibonacci modes\n * =================================================== */\n\n/* Standard grid mode (default behavior) */\n.vd-grid-standard>.vd-row,\n.grid-standard>.vd-row {\n  display: flex;\n  flex-wrap: wrap;\n}\n\n/* Fibonacci grid mode - converts rows to CSS Grid with Fibonacci proportions */\n.vd-grid-fibonacci>.vd-row,\n.grid-fibonacci>.vd-row {\n  display: grid;\n  gap: var(--vd-grid-gutter);\n  margin-left: 0;\n  margin-right: 0;\n}\n\n.vd-grid-fibonacci>.vd-row>[class*=\"col-\"],\n.grid-fibonacci>.vd-row>[class*=\"col-\"] {\n  width: auto;\n  padding-left: 0;\n  padding-right: 0;\n  flex: none;\n}\n\n/* Two-child fibonacci rows use golden ratio */\n.vd-grid-fibonacci>.vd-row:has(> [class*=\"col-\"]:nth-child(2):last-child),\n.grid-fibonacci>.vd-row:has(> [class*=\"col-\"]:nth-child(2):last-child) {\n  grid-template-columns: 1fr 1.618fr;\n}\n\n/* Three-child fibonacci rows use 2:3:5 */\n.vd-grid-fibonacci>.vd-row:has(> [class*=\"col-\"]:nth-child(3):last-child),\n.grid-fibonacci>.vd-row:has(> [class*=\"col-\"]:nth-child(3):last-child) {\n  grid-template-columns: 2fr 3fr 5fr;\n}\n\n/* Four-child fibonacci rows use 1:2:3:5 */\n.vd-grid-fibonacci>.vd-row:has(> [class*=\"col-\"]:nth-child(4):last-child),\n.grid-fibonacci>.vd-row:has(> [class*=\"col-\"]:nth-child(4):last-child) {\n  grid-template-columns: 1fr 2fr 3fr 5fr;\n}\n\n/* Single-child rows stay full width */\n.vd-grid-fibonacci>.vd-row:has(> [class*=\"col-\"]:only-child),\n.grid-fibonacci>.vd-row:has(> [class*=\"col-\"]:only-child) {\n  grid-template-columns: 1fr;\n}\n\n/* Five+ children use equal columns */\n.vd-grid-fibonacci>.vd-row:has(> [class*=\"col-\"]:nth-child(5)),\n.grid-fibonacci>.vd-row:has(> [class*=\"col-\"]:nth-child(5)) {\n  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));\n}\n\n/* Responsive: stack golden/fibonacci grids on mobile */\n@media (max-width: 767.98px) {\n\n  .vd-row-golden>.vd-col-golden-minor,\n  .vd-row-golden>.vd-col-golden-major,\n  .vd-row-fib-2>.vd-col-fib-5,\n  .vd-row-fib-2>.vd-col-fib-8,\n  .vd-row-fib-3>.vd-col-fib-2,\n  .vd-row-fib-3>.vd-col-fib-3,\n  .vd-row-fib-3>.vd-col-fib-5,\n  .vd-row-fib-4>.vd-col-fib-1,\n  .vd-row-fib-4>.vd-col-fib-2,\n  .vd-row-fib-4>.vd-col-fib-3,\n  .vd-row-fib-4>.vd-col-fib-5,\n  .vd-row-fib-3-alt>.vd-col-fib-3,\n  .vd-row-fib-3-alt>.vd-col-fib-5,\n  .vd-row-fib-3-alt>.vd-col-fib-8 {\n    width: 100%;\n  }\n\n  .vd-grid-golden,\n  .vd-grid-golden-reverse,\n  .vd-grid-fib-3,\n  .vd-grid-fib-4,\n  .vd-grid-fib-3-alt,\n  .grid-golden,\n  .grid-golden-reverse,\n  .grid-fib-3,\n  .grid-fib-4,\n  .grid-fib-3-alt {\n    grid-template-columns: 1fr;\n  }\n\n  .vd-grid-fibonacci>.vd-row,\n  .grid-fibonacci>.vd-row {\n    grid-template-columns: 1fr;\n  }\n}\n\n\n/* Layer 1.5: Layout primitives (Box, Stack, Inline, Center).\n   Imported BEFORE helpers so the spacing/gap/padding/radius utilities that follow\n   override a primitive default on equal specificity (utilities stay the escape\n   hatch). Primitive token references resolve order-independently from :root. */\n/**\n * Vanduo Framework - Layout Primitives\n *\n * Unstyled, single-responsibility layout containers that consume design tokens.\n * They express a layout INTENT (vertical rhythm, wrapping row, centered column)\n * rather than a single property — the composition layer between utilities and\n * components:  tokens -> (utilities | primitives) -> components.\n *\n * Override semantics: this file is imported BEFORE core/helpers.css and the\n * utilities layer, so a spacing/gap/padding/radius utility on the same element\n * (e.g. .vd-gap-5) always wins over a primitive's default on equal specificity.\n * Each primitive sets a vd-prefixed internal custom property defaulted from a\n * token; data-* attributes remap that property.\n *\n *   .vd-box      data-pad data-bg data-round data-border\n *   .vd-stack    data-gap data-align\n *   .vd-inline   data-gap data-align data-justify data-wrap\n *   .vd-center   data-axis data-max\n *   .vd-frame    data-ratio\n *   .vd-cover    data-min data-gap\n *   .vd-switcher data-threshold data-gap\n *\n * @since 1.5.0\n * @license MIT\n */\n\n/* ═══════════════════════════════════════════════════════════════════════════\n * BOX — a single padded / optionally skinned surface\n * ═══════════════════════════════════════════════════════════════════════════ */\n\n.vd-box {\n  --vd-box-pad: 0;\n  --vd-box-radius: 0;\n\n  display: block;\n  padding: var(--vd-box-pad);\n  border-radius: var(--vd-box-radius);\n}\n\n.vd-box[data-pad=\"0\"] { --vd-box-pad: 0; }\n.vd-box[data-pad=\"fib-1\"] { --vd-box-pad: var(--vd-space-fib-1); }\n.vd-box[data-pad=\"fib-2\"] { --vd-box-pad: var(--vd-space-fib-2); }\n.vd-box[data-pad=\"fib-3\"] { --vd-box-pad: var(--vd-space-fib-3); }\n.vd-box[data-pad=\"fib-5\"] { --vd-box-pad: var(--vd-space-fib-5); }\n.vd-box[data-pad=\"fib-8\"] { --vd-box-pad: var(--vd-space-fib-8); }\n.vd-box[data-pad=\"fib-13\"] { --vd-box-pad: var(--vd-space-fib-13); }\n.vd-box[data-pad=\"fib-21\"] { --vd-box-pad: var(--vd-space-fib-21); }\n.vd-box[data-pad=\"fib-34\"] { --vd-box-pad: var(--vd-space-fib-34); }\n.vd-box[data-pad=\"fib-55\"] { --vd-box-pad: var(--vd-space-fib-55); }\n\n/* Background — canonical semantic surfaces */\n.vd-box[data-bg=\"primary\"] { background-color: var(--vd-bg-primary); }\n.vd-box[data-bg=\"secondary\"] { background-color: var(--vd-bg-secondary); }\n.vd-box[data-bg=\"tertiary\"] { background-color: var(--vd-bg-tertiary); }\n.vd-box[data-bg=\"dark\"] { background-color: var(--vd-bg-dark); }\n.vd-box[data-bg=\"darker\"] { background-color: var(--vd-bg-darker); }\n\n/* Radius — mirrors the .vd-rounded-* scale (uses data-round, NOT data-radius,\n   which is the global theme-customizer radius hook). */\n.vd-box[data-round=\"none\"] { --vd-box-radius: 0; }\n.vd-box[data-round=\"sm\"] { --vd-box-radius: var(--vd-radius-fib-2); }\n.vd-box[data-round=\"md\"] { --vd-box-radius: var(--vd-radius-fib-5); }\n.vd-box[data-round=\"lg\"] { --vd-box-radius: var(--vd-radius-fib-8); }\n.vd-box[data-round=\"xl\"] { --vd-box-radius: var(--vd-radius-fib-13); }\n.vd-box[data-round=\"2xl\"] { --vd-box-radius: var(--vd-radius-fib-21); }\n.vd-box[data-round=\"full\"] { --vd-box-radius: 9999px; }\n\n.vd-box[data-border] { border: 1px solid var(--vd-border-color); }\n\n/* ═══════════════════════════════════════════════════════════════════════════\n * STACK — vertical rhythm (flex column with token-driven gap)\n * ═══════════════════════════════════════════════════════════════════════════ */\n\n.vd-stack {\n  --vd-stack-gap: 0;\n\n  display: flex;\n  flex-direction: column;\n  gap: var(--vd-stack-gap);\n}\n\n.vd-stack[data-gap=\"0\"] { --vd-stack-gap: 0; }\n.vd-stack[data-gap=\"fib-1\"] { --vd-stack-gap: var(--vd-space-fib-1); }\n.vd-stack[data-gap=\"fib-2\"] { --vd-stack-gap: var(--vd-space-fib-2); }\n.vd-stack[data-gap=\"fib-3\"] { --vd-stack-gap: var(--vd-space-fib-3); }\n.vd-stack[data-gap=\"fib-5\"] { --vd-stack-gap: var(--vd-space-fib-5); }\n.vd-stack[data-gap=\"fib-8\"] { --vd-stack-gap: var(--vd-space-fib-8); }\n.vd-stack[data-gap=\"fib-13\"] { --vd-stack-gap: var(--vd-space-fib-13); }\n.vd-stack[data-gap=\"fib-21\"] { --vd-stack-gap: var(--vd-space-fib-21); }\n.vd-stack[data-gap=\"fib-34\"] { --vd-stack-gap: var(--vd-space-fib-34); }\n.vd-stack[data-gap=\"fib-55\"] { --vd-stack-gap: var(--vd-space-fib-55); }\n\n.vd-stack[data-align=\"start\"] { align-items: flex-start; }\n.vd-stack[data-align=\"center\"] { align-items: center; }\n.vd-stack[data-align=\"end\"] { align-items: flex-end; }\n.vd-stack[data-align=\"stretch\"] { align-items: stretch; }\n\n/* ═══════════════════════════════════════════════════════════════════════════\n * INLINE — horizontal cluster (wrapping flex row with token-driven gap)\n * ═══════════════════════════════════════════════════════════════════════════ */\n\n.vd-inline {\n  --vd-inline-gap: 0;\n\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--vd-inline-gap);\n}\n\n.vd-inline[data-gap=\"0\"] { --vd-inline-gap: 0; }\n.vd-inline[data-gap=\"fib-1\"] { --vd-inline-gap: var(--vd-space-fib-1); }\n.vd-inline[data-gap=\"fib-2\"] { --vd-inline-gap: var(--vd-space-fib-2); }\n.vd-inline[data-gap=\"fib-3\"] { --vd-inline-gap: var(--vd-space-fib-3); }\n.vd-inline[data-gap=\"fib-5\"] { --vd-inline-gap: var(--vd-space-fib-5); }\n.vd-inline[data-gap=\"fib-8\"] { --vd-inline-gap: var(--vd-space-fib-8); }\n.vd-inline[data-gap=\"fib-13\"] { --vd-inline-gap: var(--vd-space-fib-13); }\n.vd-inline[data-gap=\"fib-21\"] { --vd-inline-gap: var(--vd-space-fib-21); }\n.vd-inline[data-gap=\"fib-34\"] { --vd-inline-gap: var(--vd-space-fib-34); }\n.vd-inline[data-gap=\"fib-55\"] { --vd-inline-gap: var(--vd-space-fib-55); }\n\n.vd-inline[data-align=\"start\"] { align-items: flex-start; }\n.vd-inline[data-align=\"center\"] { align-items: center; }\n.vd-inline[data-align=\"end\"] { align-items: flex-end; }\n.vd-inline[data-align=\"baseline\"] { align-items: baseline; }\n.vd-inline[data-align=\"stretch\"] { align-items: stretch; }\n\n.vd-inline[data-justify=\"start\"] { justify-content: flex-start; }\n.vd-inline[data-justify=\"center\"] { justify-content: center; }\n.vd-inline[data-justify=\"end\"] { justify-content: flex-end; }\n.vd-inline[data-justify=\"between\"] { justify-content: space-between; }\n.vd-inline[data-justify=\"around\"] { justify-content: space-around; }\n.vd-inline[data-justify=\"evenly\"] { justify-content: space-evenly; }\n\n.vd-inline[data-wrap=\"nowrap\"] { flex-wrap: nowrap; }\n\n/* ═══════════════════════════════════════════════════════════════════════════\n * CENTER — center a column horizontally (data-max) and/or its content (data-axis)\n * ═══════════════════════════════════════════════════════════════════════════ */\n\n.vd-center {\n  --vd-center-max: none;\n\n  display: block;\n  max-width: var(--vd-center-max);\n  margin-inline: auto;\n}\n\n.vd-center[data-max=\"fib-377\"] { --vd-center-max: 377px; }\n.vd-center[data-max=\"fib-610\"] { --vd-center-max: 610px; }\n.vd-center[data-max=\"fib-987\"] { --vd-center-max: 987px; }\n\n.vd-center[data-axis=\"both\"] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.vd-center[data-axis=\"horizontal\"] {\n  display: flex;\n  justify-content: center;\n}\n\n.vd-center[data-axis=\"vertical\"] {\n  display: flex;\n  align-items: center;\n}\n\n/* ═══════════════════════════════════════════════════════════════════════════\n * FRAME — a fixed aspect-ratio box (golden by default); media children cover it\n * ═══════════════════════════════════════════════════════════════════════════ */\n\n.vd-frame {\n  --vd-frame-ratio: 1.618;\n\n  display: block;\n  overflow: hidden;\n  aspect-ratio: var(--vd-frame-ratio);\n}\n\n.vd-frame > img,\n.vd-frame > video,\n.vd-frame > canvas,\n.vd-frame > svg,\n.vd-frame > iframe {\n  display: block;\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n\n.vd-frame[data-ratio=\"golden\"] { --vd-frame-ratio: 1.618; }\n.vd-frame[data-ratio=\"golden-portrait\"] { --vd-frame-ratio: 0.618; }\n.vd-frame[data-ratio=\"square\"] { --vd-frame-ratio: 1; }\n.vd-frame[data-ratio=\"16-9\"] { --vd-frame-ratio: 1.7778; }\n.vd-frame[data-ratio=\"4-3\"] { --vd-frame-ratio: 1.3333; }\n.vd-frame[data-ratio=\"3-2\"] { --vd-frame-ratio: 1.5; }\n.vd-frame[data-ratio=\"21-9\"] { --vd-frame-ratio: 2.3333; }\n\n/* ═══════════════════════════════════════════════════════════════════════════\n * COVER — a min-height region that vertically centers its content\n * ═══════════════════════════════════════════════════════════════════════════ */\n\n.vd-cover {\n  --vd-cover-min: 100vh;\n  --vd-cover-gap: 0;\n\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  gap: var(--vd-cover-gap);\n  min-height: var(--vd-cover-min);\n}\n\n.vd-cover[data-min=\"screen\"] { --vd-cover-min: 100vh; }\n.vd-cover[data-min=\"half\"] { --vd-cover-min: 50vh; }\n.vd-cover[data-min=\"fib-610\"] { --vd-cover-min: 610px; }\n.vd-cover[data-min=\"fib-987\"] { --vd-cover-min: 987px; }\n\n.vd-cover[data-gap=\"fib-3\"] { --vd-cover-gap: var(--vd-space-fib-3); }\n.vd-cover[data-gap=\"fib-5\"] { --vd-cover-gap: var(--vd-space-fib-5); }\n.vd-cover[data-gap=\"fib-8\"] { --vd-cover-gap: var(--vd-space-fib-8); }\n.vd-cover[data-gap=\"fib-13\"] { --vd-cover-gap: var(--vd-space-fib-13); }\n.vd-cover[data-gap=\"fib-21\"] { --vd-cover-gap: var(--vd-space-fib-21); }\n.vd-cover[data-gap=\"fib-34\"] { --vd-cover-gap: var(--vd-space-fib-34); }\n\n/* ═══════════════════════════════════════════════════════════════════════════\n * SWITCHER — auto row→column at a container-width threshold (no media query).\n * When the container is wider than the threshold the children share a row;\n * narrower and they each take a full row. Thresholds are Fibonacci by design.\n * ═══════════════════════════════════════════════════════════════════════════ */\n\n.vd-switcher {\n  --vd-switcher-threshold: 610px;\n  --vd-switcher-gap: 0;\n\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--vd-switcher-gap);\n}\n\n.vd-switcher > * {\n  flex-grow: 1;\n  flex-basis: calc((var(--vd-switcher-threshold) - 100%) * 999);\n}\n\n.vd-switcher[data-threshold=\"fib-377\"] { --vd-switcher-threshold: 377px; }\n.vd-switcher[data-threshold=\"fib-610\"] { --vd-switcher-threshold: 610px; }\n.vd-switcher[data-threshold=\"fib-987\"] { --vd-switcher-threshold: 987px; }\n\n.vd-switcher[data-gap=\"fib-3\"] { --vd-switcher-gap: var(--vd-space-fib-3); }\n.vd-switcher[data-gap=\"fib-5\"] { --vd-switcher-gap: var(--vd-space-fib-5); }\n.vd-switcher[data-gap=\"fib-8\"] { --vd-switcher-gap: var(--vd-space-fib-8); }\n.vd-switcher[data-gap=\"fib-13\"] { --vd-switcher-gap: var(--vd-space-fib-13); }\n.vd-switcher[data-gap=\"fib-21\"] { --vd-switcher-gap: var(--vd-space-fib-21); }\n.vd-switcher[data-gap=\"fib-34\"] { --vd-switcher-gap: var(--vd-space-fib-34); }\n\n\n/**\n * Vanduo Framework - Helpers\n * Utility classes for spacing, display, positioning, and more\n *\n * Design System: Fibonacci / Golden Ratio (phi = 1.618)\n * Spacing values follow the Fibonacci sequence: 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144\n * Consecutive Fibonacci pairs yield ratios approaching phi (e.g. 21/13 = 1.615)\n */\n\n:root {\n  /* Golden Ratio Constants */\n  --vd-phi: 1.618;\n  --vd-phi-inverse: 0.618;\n  --vd-phi-percent-major: 61.8%;\n  --vd-phi-percent-minor: 38.2%;\n\n  /* Fibonacci Border Radius Scale */\n  --vd-radius-fib-2: 0.125rem;\n  /* 2px */\n  --vd-radius-fib-3: 0.1875rem;\n  /* 3px */\n  --vd-radius-fib-5: 0.3125rem;\n  /* 5px */\n  --vd-radius-fib-8: 0.5rem;\n  /* 8px */\n  --vd-radius-fib-13: 0.8125rem;\n  /* 13px */\n  --vd-radius-fib-21: 1.3125rem;\n  /* 21px */\n\n  /* Radius Scale Factor (for Theme Customizer) */\n  --vd-radius-scale: 1;\n\n  /* Fibonacci Spacing Scale */\n  --vd-spacing-0: 0;\n  --vd-spacing-1: 0.0625rem;\n  /* 1px  - fib(1) */\n  --vd-spacing-2: 0.125rem;\n  /* 2px  - fib(2) */\n  --vd-spacing-3: 0.1875rem;\n  /* 3px  - fib(3) */\n  --vd-spacing-4: 0.3125rem;\n  /* 5px  - fib(5) */\n  --vd-spacing-5: 0.5rem;\n  /* 8px  - fib(8) */\n  --vd-spacing-6: 0.8125rem;\n  /* 13px - fib(13) */\n  --vd-spacing-8: 1.3125rem;\n  /* 21px - fib(21) */\n  --vd-spacing-10: 2.125rem;\n  /* 34px - fib(34) */\n  --vd-spacing-12: 3.4375rem;\n  /* 55px - fib(55) */\n  --vd-spacing-16: 5.5625rem;\n  /* 89px - fib(89) */\n  --vd-spacing-20: 9rem;\n  /* 144px - fib(144) */\n  --vd-spacing-24: 9rem;\n  /* 144px - alias */\n}\n\n/* Margin Utilities */\n.vd-m-0 {\n  margin: var(--vd-spacing-0);\n}\n\n.vd-m-1 {\n  margin: var(--vd-spacing-1);\n}\n\n.vd-m-2 {\n  margin: var(--vd-spacing-2);\n}\n\n.vd-m-3 {\n  margin: var(--vd-spacing-3);\n}\n\n.vd-m-4 {\n  margin: var(--vd-spacing-4);\n}\n\n.vd-m-5 {\n  margin: var(--vd-spacing-5);\n}\n\n.vd-m-6 {\n  margin: var(--vd-spacing-6);\n}\n\n.vd-m-8 {\n  margin: var(--vd-spacing-8);\n}\n\n.vd-m-10 {\n  margin: var(--vd-spacing-10);\n}\n\n.vd-m-12 {\n  margin: var(--vd-spacing-12);\n}\n\n.vd-m-16 {\n  margin: var(--vd-spacing-16);\n}\n\n.vd-m-20 {\n  margin: var(--vd-spacing-20);\n}\n\n.vd-m-24 {\n  margin: var(--vd-spacing-24);\n}\n\n.vd-m-auto {\n  margin: auto;\n}\n\n/* Margin Top */\n.mt-0 {\n  margin-top: var(--vd-spacing-0);\n}\n\n.mt-1 {\n  margin-top: var(--vd-spacing-1);\n}\n\n.mt-2 {\n  margin-top: var(--vd-spacing-2);\n}\n\n.mt-3 {\n  margin-top: var(--vd-spacing-3);\n}\n\n.mt-4 {\n  margin-top: var(--vd-spacing-4);\n}\n\n.mt-5 {\n  margin-top: var(--vd-spacing-5);\n}\n\n.mt-6 {\n  margin-top: var(--vd-spacing-6);\n}\n\n.mt-8 {\n  margin-top: var(--vd-spacing-8);\n}\n\n.mt-10 {\n  margin-top: var(--vd-spacing-10);\n}\n\n.mt-12 {\n  margin-top: var(--vd-spacing-12);\n}\n\n.mt-16 {\n  margin-top: var(--vd-spacing-16);\n}\n\n.mt-20 {\n  margin-top: var(--vd-spacing-20);\n}\n\n.mt-24 {\n  margin-top: var(--vd-spacing-24);\n}\n\n.mt-auto {\n  margin-top: auto;\n}\n\n/* Margin Right */\n.mr-0 {\n  margin-right: var(--vd-spacing-0);\n}\n\n.mr-1 {\n  margin-right: var(--vd-spacing-1);\n}\n\n.mr-2 {\n  margin-right: var(--vd-spacing-2);\n}\n\n.mr-3 {\n  margin-right: var(--vd-spacing-3);\n}\n\n.mr-4 {\n  margin-right: var(--vd-spacing-4);\n}\n\n.mr-5 {\n  margin-right: var(--vd-spacing-5);\n}\n\n.mr-6 {\n  margin-right: var(--vd-spacing-6);\n}\n\n.mr-8 {\n  margin-right: var(--vd-spacing-8);\n}\n\n.mr-10 {\n  margin-right: var(--vd-spacing-10);\n}\n\n.mr-12 {\n  margin-right: var(--vd-spacing-12);\n}\n\n.mr-16 {\n  margin-right: var(--vd-spacing-16);\n}\n\n.mr-20 {\n  margin-right: var(--vd-spacing-20);\n}\n\n.mr-24 {\n  margin-right: var(--vd-spacing-24);\n}\n\n.mr-auto {\n  margin-right: auto;\n}\n\n/* Margin Bottom */\n.mb-0 {\n  margin-bottom: var(--vd-spacing-0);\n}\n\n.mb-1 {\n  margin-bottom: var(--vd-spacing-1);\n}\n\n.mb-2 {\n  margin-bottom: var(--vd-spacing-2);\n}\n\n.mb-3 {\n  margin-bottom: var(--vd-spacing-3);\n}\n\n.mb-4 {\n  margin-bottom: var(--vd-spacing-4);\n}\n\n.mb-5 {\n  margin-bottom: var(--vd-spacing-5);\n}\n\n.mb-6 {\n  margin-bottom: var(--vd-spacing-6);\n}\n\n.mb-8 {\n  margin-bottom: var(--vd-spacing-8);\n}\n\n.mb-10 {\n  margin-bottom: var(--vd-spacing-10);\n}\n\n.mb-12 {\n  margin-bottom: var(--vd-spacing-12);\n}\n\n.mb-16 {\n  margin-bottom: var(--vd-spacing-16);\n}\n\n.mb-20 {\n  margin-bottom: var(--vd-spacing-20);\n}\n\n.mb-24 {\n  margin-bottom: var(--vd-spacing-24);\n}\n\n.mb-auto {\n  margin-bottom: auto;\n}\n\n/* Margin Left */\n.ml-0 {\n  margin-left: var(--vd-spacing-0);\n}\n\n.ml-1 {\n  margin-left: var(--vd-spacing-1);\n}\n\n.ml-2 {\n  margin-left: var(--vd-spacing-2);\n}\n\n.ml-3 {\n  margin-left: var(--vd-spacing-3);\n}\n\n.ml-4 {\n  margin-left: var(--vd-spacing-4);\n}\n\n.ml-5 {\n  margin-left: var(--vd-spacing-5);\n}\n\n.ml-6 {\n  margin-left: var(--vd-spacing-6);\n}\n\n.ml-8 {\n  margin-left: var(--vd-spacing-8);\n}\n\n.ml-10 {\n  margin-left: var(--vd-spacing-10);\n}\n\n.ml-12 {\n  margin-left: var(--vd-spacing-12);\n}\n\n.ml-16 {\n  margin-left: var(--vd-spacing-16);\n}\n\n.ml-20 {\n  margin-left: var(--vd-spacing-20);\n}\n\n.ml-24 {\n  margin-left: var(--vd-spacing-24);\n}\n\n.ml-auto {\n  margin-left: auto;\n}\n\n/* Padding Utilities */\n.vd-p-0 {\n  padding: var(--vd-spacing-0);\n}\n\n.vd-p-1 {\n  padding: var(--vd-spacing-1);\n}\n\n.vd-p-2 {\n  padding: var(--vd-spacing-2);\n}\n\n.vd-p-3 {\n  padding: var(--vd-spacing-3);\n}\n\n.vd-p-4 {\n  padding: var(--vd-spacing-4);\n}\n\n.vd-p-5 {\n  padding: var(--vd-spacing-5);\n}\n\n.vd-p-6 {\n  padding: var(--vd-spacing-6);\n}\n\n.vd-p-8 {\n  padding: var(--vd-spacing-8);\n}\n\n.vd-p-10 {\n  padding: var(--vd-spacing-10);\n}\n\n.vd-p-12 {\n  padding: var(--vd-spacing-12);\n}\n\n.vd-p-16 {\n  padding: var(--vd-spacing-16);\n}\n\n.vd-p-20 {\n  padding: var(--vd-spacing-20);\n}\n\n.vd-p-24 {\n  padding: var(--vd-spacing-24);\n}\n\n/* Padding Top */\n.pt-0 {\n  padding-top: var(--vd-spacing-0);\n}\n\n.pt-1 {\n  padding-top: var(--vd-spacing-1);\n}\n\n.pt-2 {\n  padding-top: var(--vd-spacing-2);\n}\n\n.pt-3 {\n  padding-top: var(--vd-spacing-3);\n}\n\n.pt-4 {\n  padding-top: var(--vd-spacing-4);\n}\n\n.pt-5 {\n  padding-top: var(--vd-spacing-5);\n}\n\n.pt-6 {\n  padding-top: var(--vd-spacing-6);\n}\n\n.pt-8 {\n  padding-top: var(--vd-spacing-8);\n}\n\n.pt-10 {\n  padding-top: var(--vd-spacing-10);\n}\n\n.pt-12 {\n  padding-top: var(--vd-spacing-12);\n}\n\n.pt-16 {\n  padding-top: var(--vd-spacing-16);\n}\n\n.pt-20 {\n  padding-top: var(--vd-spacing-20);\n}\n\n.pt-24 {\n  padding-top: var(--vd-spacing-24);\n}\n\n/* Padding Right */\n.pr-0 {\n  padding-right: var(--vd-spacing-0);\n}\n\n.pr-1 {\n  padding-right: var(--vd-spacing-1);\n}\n\n.pr-2 {\n  padding-right: var(--vd-spacing-2);\n}\n\n.pr-3 {\n  padding-right: var(--vd-spacing-3);\n}\n\n.pr-4 {\n  padding-right: var(--vd-spacing-4);\n}\n\n.pr-5 {\n  padding-right: var(--vd-spacing-5);\n}\n\n.pr-6 {\n  padding-right: var(--vd-spacing-6);\n}\n\n.pr-8 {\n  padding-right: var(--vd-spacing-8);\n}\n\n.pr-10 {\n  padding-right: var(--vd-spacing-10);\n}\n\n.pr-12 {\n  padding-right: var(--vd-spacing-12);\n}\n\n.pr-16 {\n  padding-right: var(--vd-spacing-16);\n}\n\n.pr-20 {\n  padding-right: var(--vd-spacing-20);\n}\n\n.pr-24 {\n  padding-right: var(--vd-spacing-24);\n}\n\n/* Padding Bottom */\n.pb-0 {\n  padding-bottom: var(--vd-spacing-0);\n}\n\n.pb-1 {\n  padding-bottom: var(--vd-spacing-1);\n}\n\n.pb-2 {\n  padding-bottom: var(--vd-spacing-2);\n}\n\n.pb-3 {\n  padding-bottom: var(--vd-spacing-3);\n}\n\n.pb-4 {\n  padding-bottom: var(--vd-spacing-4);\n}\n\n.pb-5 {\n  padding-bottom: var(--vd-spacing-5);\n}\n\n.pb-6 {\n  padding-bottom: var(--vd-spacing-6);\n}\n\n.pb-8 {\n  padding-bottom: var(--vd-spacing-8);\n}\n\n.pb-10 {\n  padding-bottom: var(--vd-spacing-10);\n}\n\n.pb-12 {\n  padding-bottom: var(--vd-spacing-12);\n}\n\n.pb-16 {\n  padding-bottom: var(--vd-spacing-16);\n}\n\n.pb-20 {\n  padding-bottom: var(--vd-spacing-20);\n}\n\n.pb-24 {\n  padding-bottom: var(--vd-spacing-24);\n}\n\n/* Padding Left */\n.pl-0 {\n  padding-left: var(--vd-spacing-0);\n}\n\n.pl-1 {\n  padding-left: var(--vd-spacing-1);\n}\n\n.pl-2 {\n  padding-left: var(--vd-spacing-2);\n}\n\n.pl-3 {\n  padding-left: var(--vd-spacing-3);\n}\n\n.pl-4 {\n  padding-left: var(--vd-spacing-4);\n}\n\n.pl-5 {\n  padding-left: var(--vd-spacing-5);\n}\n\n.pl-6 {\n  padding-left: var(--vd-spacing-6);\n}\n\n.pl-8 {\n  padding-left: var(--vd-spacing-8);\n}\n\n.pl-10 {\n  padding-left: var(--vd-spacing-10);\n}\n\n.pl-12 {\n  padding-left: var(--vd-spacing-12);\n}\n\n.pl-16 {\n  padding-left: var(--vd-spacing-16);\n}\n\n.pl-20 {\n  padding-left: var(--vd-spacing-20);\n}\n\n.pl-24 {\n  padding-left: var(--vd-spacing-24);\n}\n\n/* Display Utilities */\n.vd-d-none {\n  display: none;\n}\n\n.vd-d-inline {\n  display: inline;\n}\n\n.vd-d-inline-block {\n  display: inline-block;\n}\n\n.vd-d-block {\n  display: block;\n}\n\n.vd-d-table {\n  display: table;\n}\n\n.vd-d-table-row {\n  display: table-row;\n}\n\n.vd-d-table-cell {\n  display: table-cell;\n}\n\n.vd-d-flex {\n  display: flex;\n}\n\n.vd-d-inline-flex {\n  display: inline-flex;\n}\n\n.vd-d-grid {\n  display: grid;\n}\n\n.vd-d-inline-grid {\n  display: inline-grid;\n}\n\n/* Responsive Display */\n@media (min-width: 576px) {\n  .vd-d-sm-none {\n    display: none;\n  }\n\n  .vd-d-sm-inline {\n    display: inline;\n  }\n\n  .vd-d-sm-inline-block {\n    display: inline-block;\n  }\n\n  .vd-d-sm-block {\n    display: block;\n  }\n\n  .vd-d-sm-flex {\n    display: flex;\n  }\n\n  .vd-d-sm-inline-flex {\n    display: inline-flex;\n  }\n\n  .vd-d-sm-grid {\n    display: grid;\n  }\n}\n\n@media (min-width: 768px) {\n  .vd-d-md-none {\n    display: none;\n  }\n\n  .vd-d-md-inline {\n    display: inline;\n  }\n\n  .vd-d-md-inline-block {\n    display: inline-block;\n  }\n\n  .vd-d-md-block {\n    display: block;\n  }\n\n  .vd-d-md-flex {\n    display: flex;\n  }\n\n  .vd-d-md-inline-flex {\n    display: inline-flex;\n  }\n\n  .vd-d-md-grid {\n    display: grid;\n  }\n}\n\n@media (min-width: 992px) {\n  .vd-d-lg-none {\n    display: none;\n  }\n\n  .vd-d-lg-inline {\n    display: inline;\n  }\n\n  .vd-d-lg-inline-block {\n    display: inline-block;\n  }\n\n  .vd-d-lg-block {\n    display: block;\n  }\n\n  .vd-d-lg-flex {\n    display: flex;\n  }\n\n  .vd-d-lg-inline-flex {\n    display: inline-flex;\n  }\n\n  .vd-d-lg-grid {\n    display: grid;\n  }\n}\n\n@media (min-width: 1200px) {\n  .vd-d-xl-none {\n    display: none;\n  }\n\n  .vd-d-xl-inline {\n    display: inline;\n  }\n\n  .vd-d-xl-inline-block {\n    display: inline-block;\n  }\n\n  .vd-d-xl-block {\n    display: block;\n  }\n\n  .vd-d-xl-flex {\n    display: flex;\n  }\n\n  .vd-d-xl-inline-flex {\n    display: inline-flex;\n  }\n\n  .vd-d-xl-grid {\n    display: grid;\n  }\n}\n\n/* Position Utilities */\n.position-static {\n  position: static;\n}\n\n.position-relative {\n  position: relative;\n}\n\n.position-absolute {\n  position: absolute;\n}\n\n.position-fixed {\n  position: fixed;\n}\n\n.position-sticky {\n  position: sticky;\n}\n\n/* Position Values */\n.top-0 {\n  top: 0;\n}\n\n.right-0 {\n  right: 0;\n}\n\n.bottom-0 {\n  bottom: 0;\n}\n\n.left-0 {\n  left: 0;\n}\n\n/* Width Utilities */\n.w-auto {\n  width: auto;\n}\n\n.w-full {\n  width: 100%;\n}\n\n.w-screen {\n  width: 100vw;\n}\n\n.w-half {\n  width: 50%;\n}\n\n.w-third {\n  width: 33.333333%;\n}\n\n.w-two-thirds {\n  width: 66.666667%;\n}\n\n.w-quarter {\n  width: 25%;\n}\n\n.w-three-quarters {\n  width: 75%;\n}\n\n/* Golden Ratio Width Utilities */\n.w-phi-major {\n  width: 61.803399%;\n}\n\n.w-phi-minor {\n  width: 38.196601%;\n}\n\n.w-fib-987 {\n  max-width: 987px;\n}\n\n.w-fib-610 {\n  max-width: 610px;\n}\n\n.w-fib-377 {\n  max-width: 377px;\n}\n\n/* Height Utilities */\n.h-auto {\n  height: auto;\n}\n\n.h-full {\n  height: 100%;\n}\n\n.h-screen {\n  height: 100vh;\n}\n\n.h-half {\n  height: 50%;\n}\n\n.h-third {\n  height: 33.333333%;\n}\n\n.h-two-thirds {\n  height: 66.666667%;\n}\n\n.h-quarter {\n  height: 25%;\n}\n\n.h-three-quarters {\n  height: 75%;\n}\n\n/* Overflow Utilities */\n.overflow-auto {\n  overflow: auto;\n}\n\n.overflow-hidden {\n  overflow: hidden;\n}\n\n.overflow-visible {\n  overflow: visible;\n}\n\n.overflow-scroll {\n  overflow: scroll;\n}\n\n.overflow-x-auto {\n  overflow-x: auto;\n}\n\n.overflow-x-hidden {\n  overflow-x: hidden;\n}\n\n.overflow-x-scroll {\n  overflow-x: scroll;\n}\n\n.overflow-y-auto {\n  overflow-y: auto;\n}\n\n.overflow-y-hidden {\n  overflow-y: hidden;\n}\n\n.overflow-y-scroll {\n  overflow-y: scroll;\n}\n\n/* Flexbox Utilities */\n.vd-flex-row,\n.flex-row {\n  flex-direction: row;\n}\n\n.vd-flex-row-reverse,\n.flex-row-reverse {\n  flex-direction: row-reverse;\n}\n\n.vd-flex-col,\n.flex-col {\n  flex-direction: column;\n}\n\n.vd-flex-col-reverse,\n.flex-col-reverse {\n  flex-direction: column-reverse;\n}\n\n.vd-flex-wrap,\n.flex-wrap {\n  flex-wrap: wrap;\n}\n\n.vd-flex-nowrap,\n.flex-nowrap {\n  flex-wrap: nowrap;\n}\n\n.vd-flex-wrap-reverse,\n.flex-wrap-reverse {\n  flex-wrap: wrap-reverse;\n}\n\n.items-start {\n  align-items: flex-start;\n}\n\n.items-end {\n  align-items: flex-end;\n}\n\n.items-center {\n  align-items: center;\n}\n\n.items-baseline {\n  align-items: baseline;\n}\n\n.items-stretch {\n  align-items: stretch;\n}\n\n.justify-start {\n  justify-content: flex-start;\n}\n\n.justify-end {\n  justify-content: flex-end;\n}\n\n.justify-center {\n  justify-content: center;\n}\n\n.justify-between {\n  justify-content: space-between;\n}\n\n.justify-around {\n  justify-content: space-around;\n}\n\n.justify-evenly {\n  justify-content: space-evenly;\n}\n\n.flex-1 {\n  flex: 1 1 0%;\n}\n\n.flex-auto {\n  flex: 1 1 auto;\n}\n\n.flex-none {\n  flex: none;\n}\n\n/* Gap Utilities (for Grid and Flexbox) */\n.vd-gap-0 {\n  gap: var(--vd-spacing-0);\n}\n\n.vd-gap-1 {\n  gap: var(--vd-spacing-1);\n}\n\n.vd-gap-2 {\n  gap: var(--vd-spacing-2);\n}\n\n.vd-gap-3 {\n  gap: var(--vd-spacing-3);\n}\n\n.vd-gap-4 {\n  gap: var(--vd-spacing-4);\n}\n\n.vd-gap-5 {\n  gap: var(--vd-spacing-5);\n}\n\n.vd-gap-6 {\n  gap: var(--vd-spacing-6);\n}\n\n.vd-gap-8 {\n  gap: var(--vd-spacing-8);\n}\n\n.vd-gap-10 {\n  gap: var(--vd-spacing-10);\n}\n\n.vd-gap-12 {\n  gap: var(--vd-spacing-12);\n}\n\n/* Responsive Flex Direction */\n@media (min-width: 576px) {\n  .flex-sm-row {\n    flex-direction: row;\n  }\n\n  .flex-sm-row-reverse {\n    flex-direction: row-reverse;\n  }\n\n  .flex-sm-col {\n    flex-direction: column;\n  }\n\n  .flex-sm-col-reverse {\n    flex-direction: column-reverse;\n  }\n}\n\n@media (min-width: 768px) {\n  .flex-md-row {\n    flex-direction: row;\n  }\n\n  .flex-md-row-reverse {\n    flex-direction: row-reverse;\n  }\n\n  .flex-md-col {\n    flex-direction: column;\n  }\n\n  .flex-md-col-reverse {\n    flex-direction: column-reverse;\n  }\n}\n\n@media (min-width: 992px) {\n  .flex-lg-row {\n    flex-direction: row;\n  }\n\n  .flex-lg-row-reverse {\n    flex-direction: row-reverse;\n  }\n\n  .flex-lg-col {\n    flex-direction: column;\n  }\n\n  .flex-lg-col-reverse {\n    flex-direction: column-reverse;\n  }\n}\n\n@media (min-width: 1200px) {\n  .flex-xl-row {\n    flex-direction: row;\n  }\n\n  .flex-xl-row-reverse {\n    flex-direction: row-reverse;\n  }\n\n  .flex-xl-col {\n    flex-direction: column;\n  }\n\n  .flex-xl-col-reverse {\n    flex-direction: column-reverse;\n  }\n}\n\n/* Responsive Gap */\n@media (min-width: 576px) {\n  .vd-gap-sm-0 {\n    gap: var(--vd-spacing-0);\n  }\n\n  .vd-gap-sm-1 {\n    gap: var(--vd-spacing-1);\n  }\n\n  .vd-gap-sm-2 {\n    gap: var(--vd-spacing-2);\n  }\n\n  .vd-gap-sm-3 {\n    gap: var(--vd-spacing-3);\n  }\n\n  .vd-gap-sm-4 {\n    gap: var(--vd-spacing-4);\n  }\n\n  .vd-gap-sm-5 {\n    gap: var(--vd-spacing-5);\n  }\n\n  .vd-gap-sm-6 {\n    gap: var(--vd-spacing-6);\n  }\n\n  .vd-gap-sm-8 {\n    gap: var(--vd-spacing-8);\n  }\n\n  .vd-gap-sm-10 {\n    gap: var(--vd-spacing-10);\n  }\n\n  .vd-gap-sm-12 {\n    gap: var(--vd-spacing-12);\n  }\n}\n\n@media (min-width: 768px) {\n  .vd-gap-md-0 {\n    gap: var(--vd-spacing-0);\n  }\n\n  .vd-gap-md-1 {\n    gap: var(--vd-spacing-1);\n  }\n\n  .vd-gap-md-2 {\n    gap: var(--vd-spacing-2);\n  }\n\n  .vd-gap-md-3 {\n    gap: var(--vd-spacing-3);\n  }\n\n  .vd-gap-md-4 {\n    gap: var(--vd-spacing-4);\n  }\n\n  .vd-gap-md-5 {\n    gap: var(--vd-spacing-5);\n  }\n\n  .vd-gap-md-6 {\n    gap: var(--vd-spacing-6);\n  }\n\n  .vd-gap-md-8 {\n    gap: var(--vd-spacing-8);\n  }\n\n  .vd-gap-md-10 {\n    gap: var(--vd-spacing-10);\n  }\n\n  .vd-gap-md-12 {\n    gap: var(--vd-spacing-12);\n  }\n}\n\n@media (min-width: 992px) {\n  .vd-gap-lg-0 {\n    gap: var(--vd-spacing-0);\n  }\n\n  .vd-gap-lg-1 {\n    gap: var(--vd-spacing-1);\n  }\n\n  .vd-gap-lg-2 {\n    gap: var(--vd-spacing-2);\n  }\n\n  .vd-gap-lg-3 {\n    gap: var(--vd-spacing-3);\n  }\n\n  .vd-gap-lg-4 {\n    gap: var(--vd-spacing-4);\n  }\n\n  .vd-gap-lg-5 {\n    gap: var(--vd-spacing-5);\n  }\n\n  .vd-gap-lg-6 {\n    gap: var(--vd-spacing-6);\n  }\n\n  .vd-gap-lg-8 {\n    gap: var(--vd-spacing-8);\n  }\n\n  .vd-gap-lg-10 {\n    gap: var(--vd-spacing-10);\n  }\n\n  .vd-gap-lg-12 {\n    gap: var(--vd-spacing-12);\n  }\n}\n\n@media (min-width: 1200px) {\n  .vd-gap-xl-0 {\n    gap: var(--vd-spacing-0);\n  }\n\n  .vd-gap-xl-1 {\n    gap: var(--vd-spacing-1);\n  }\n\n  .vd-gap-xl-2 {\n    gap: var(--vd-spacing-2);\n  }\n\n  .vd-gap-xl-3 {\n    gap: var(--vd-spacing-3);\n  }\n\n  .vd-gap-xl-4 {\n    gap: var(--vd-spacing-4);\n  }\n\n  .vd-gap-xl-5 {\n    gap: var(--vd-spacing-5);\n  }\n\n  .vd-gap-xl-6 {\n    gap: var(--vd-spacing-6);\n  }\n\n  .vd-gap-xl-8 {\n    gap: var(--vd-spacing-8);\n  }\n\n  .vd-gap-xl-10 {\n    gap: var(--vd-spacing-10);\n  }\n\n  .vd-gap-xl-12 {\n    gap: var(--vd-spacing-12);\n  }\n}\n\n/* Scroll Behavior Utilities */\n.scroll-smooth {\n  scroll-behavior: smooth;\n}\n\n.scroll-auto {\n  scroll-behavior: auto;\n}\n\n/* Visibility Utilities */\n.visible {\n  visibility: visible;\n}\n\n.invisible {\n  visibility: hidden;\n}\n\n/* Cursor Utilities */\n.cursor-pointer {\n  cursor: pointer;\n}\n\n.cursor-default {\n  cursor: default;\n}\n\n.cursor-not-allowed {\n  cursor: not-allowed;\n}\n\n.cursor-wait {\n  cursor: wait;\n}\n\n.cursor-text {\n  cursor: text;\n}\n\n.cursor-move {\n  cursor: move;\n}\n\n/* User Select Utilities */\n.select-none {\n  user-select: none;\n}\n\n.select-text {\n  user-select: text;\n}\n\n.select-all {\n  user-select: all;\n}\n\n.select-auto {\n  user-select: auto;\n}\n\n/* Border Utilities */\n.vd-border,\n.border {\n  border: 1px solid var(--vd-border-color);\n}\n\n.vd-border-0,\n.border-0 {\n  border: 0;\n}\n\n.vd-border-top,\n.border-top {\n  border-top: 1px solid var(--vd-border-color);\n}\n\n.vd-border-right,\n.border-right {\n  border-right: 1px solid var(--vd-border-color);\n}\n\n.vd-border-bottom,\n.border-bottom {\n  border-bottom: 1px solid var(--vd-border-color);\n}\n\n.vd-border-left,\n.border-left {\n  border-left: 1px solid var(--vd-border-color);\n}\n\n.vd-border-2,\n.border-2 {\n  border-width: 2px;\n}\n\n.vd-border-4,\n.border-4 {\n  border-width: 4px;\n}\n\n.vd-border-8,\n.border-8 {\n  border-width: 8px;\n}\n\n/* Border Radius Utilities (Fibonacci: 2, 3, 5, 8, 13, 21) */\n.vd-rounded-none,\n.rounded-none {\n  border-radius: 0;\n}\n\n.vd-rounded-sm,\n.rounded-sm {\n  border-radius: var(--vd-radius-fib-2);\n}\n\n/* 2px */\n.vd-rounded,\n.rounded {\n  border-radius: var(--vd-radius-fib-3);\n}\n\n/* 3px */\n.vd-rounded-md,\n.rounded-md {\n  border-radius: var(--vd-radius-fib-5);\n}\n\n/* 5px */\n.vd-rounded-lg,\n.rounded-lg {\n  border-radius: var(--vd-radius-fib-8);\n}\n\n/* 8px */\n.vd-rounded-xl,\n.rounded-xl {\n  border-radius: var(--vd-radius-fib-13);\n}\n\n/* 13px */\n.vd-rounded-2xl,\n.rounded-2xl {\n  border-radius: var(--vd-radius-fib-21);\n}\n\n/* 21px */\n.vd-rounded-full,\n.rounded-full {\n  border-radius: 9999px;\n}\n\n.vd-rounded-t,\n.rounded-t {\n  border-top-left-radius: var(--vd-radius-fib-3);\n  border-top-right-radius: var(--vd-radius-fib-3);\n}\n\n.vd-rounded-r,\n.rounded-r {\n  border-top-right-radius: var(--vd-radius-fib-3);\n  border-bottom-right-radius: var(--vd-radius-fib-3);\n}\n\n.vd-rounded-b,\n.rounded-b {\n  border-bottom-right-radius: var(--vd-radius-fib-3);\n  border-bottom-left-radius: var(--vd-radius-fib-3);\n}\n\n.vd-rounded-l,\n.rounded-l {\n  border-top-left-radius: var(--vd-radius-fib-3);\n  border-bottom-left-radius: var(--vd-radius-fib-3);\n}\n\n/* Directional margin aliases (vd- prefix) */\n.vd-mt-2 { margin-top: var(--vd-spacing-2); }\n.vd-mt-3 { margin-top: var(--vd-spacing-3); }\n.vd-mt-4 { margin-top: var(--vd-spacing-4); }\n.vd-mt-5 { margin-top: var(--vd-spacing-5); }\n.vd-mt-6 { margin-top: var(--vd-spacing-6); }\n.vd-mt-8 { margin-top: var(--vd-spacing-8); }\n.vd-mb-0 { margin-bottom: var(--vd-spacing-0); }\n.vd-mb-2 { margin-bottom: var(--vd-spacing-2); }\n.vd-mb-3 { margin-bottom: var(--vd-spacing-3); }\n.vd-mb-4 { margin-bottom: var(--vd-spacing-4); }\n.vd-mb-5 { margin-bottom: var(--vd-spacing-5); }\n.vd-mb-6 { margin-bottom: var(--vd-spacing-6); }\n.vd-mb-8 { margin-bottom: var(--vd-spacing-8); }\n.vd-mr-3 { margin-right: var(--vd-spacing-3); }\n.vd-mr-6 { margin-right: var(--vd-spacing-6); }\n.vd-ml-5 { margin-left: var(--vd-spacing-5); }\n\n/* Responsive Spacing Utilities */\n@media (min-width: 576px) {\n  .vd-m-sm-0 {\n    margin: var(--vd-spacing-0);\n  }\n\n  .vd-m-sm-1 {\n    margin: var(--vd-spacing-1);\n  }\n\n  .vd-m-sm-2 {\n    margin: var(--vd-spacing-2);\n  }\n\n  .vd-m-sm-3 {\n    margin: var(--vd-spacing-3);\n  }\n\n  .vd-m-sm-4 {\n    margin: var(--vd-spacing-4);\n  }\n\n  .vd-m-sm-5 {\n    margin: var(--vd-spacing-5);\n  }\n\n  .vd-m-sm-6 {\n    margin: var(--vd-spacing-6);\n  }\n\n  .vd-m-sm-auto {\n    margin: auto;\n  }\n\n  .mt-sm-0 {\n    margin-top: var(--vd-spacing-0);\n  }\n\n  .mt-sm-4 {\n    margin-top: var(--vd-spacing-4);\n  }\n\n  .mb-sm-0 {\n    margin-bottom: var(--vd-spacing-0);\n  }\n\n  .mb-sm-4 {\n    margin-bottom: var(--vd-spacing-4);\n  }\n\n  .vd-p-sm-0 {\n    padding: var(--vd-spacing-0);\n  }\n\n  .vd-p-sm-1 {\n    padding: var(--vd-spacing-1);\n  }\n\n  .vd-p-sm-2 {\n    padding: var(--vd-spacing-2);\n  }\n\n  .vd-p-sm-3 {\n    padding: var(--vd-spacing-3);\n  }\n\n  .vd-p-sm-4 {\n    padding: var(--vd-spacing-4);\n  }\n\n  .vd-p-sm-5 {\n    padding: var(--vd-spacing-5);\n  }\n\n  .vd-p-sm-6 {\n    padding: var(--vd-spacing-6);\n  }\n}\n\n@media (min-width: 768px) {\n  .vd-m-md-0 {\n    margin: var(--vd-spacing-0);\n  }\n\n  .vd-m-md-1 {\n    margin: var(--vd-spacing-1);\n  }\n\n  .vd-m-md-2 {\n    margin: var(--vd-spacing-2);\n  }\n\n  .vd-m-md-3 {\n    margin: var(--vd-spacing-3);\n  }\n\n  .vd-m-md-4 {\n    margin: var(--vd-spacing-4);\n  }\n\n  .vd-m-md-5 {\n    margin: var(--vd-spacing-5);\n  }\n\n  .vd-m-md-6 {\n    margin: var(--vd-spacing-6);\n  }\n\n  .vd-m-md-auto {\n    margin: auto;\n  }\n\n  .mt-md-0 {\n    margin-top: var(--vd-spacing-0);\n  }\n\n  .mt-md-4 {\n    margin-top: var(--vd-spacing-4);\n  }\n\n  .mb-md-0 {\n    margin-bottom: var(--vd-spacing-0);\n  }\n\n  .mb-md-4 {\n    margin-bottom: var(--vd-spacing-4);\n  }\n\n  .vd-p-md-0 {\n    padding: var(--vd-spacing-0);\n  }\n\n  .vd-p-md-1 {\n    padding: var(--vd-spacing-1);\n  }\n\n  .vd-p-md-2 {\n    padding: var(--vd-spacing-2);\n  }\n\n  .vd-p-md-3 {\n    padding: var(--vd-spacing-3);\n  }\n\n  .vd-p-md-4 {\n    padding: var(--vd-spacing-4);\n  }\n\n  .vd-p-md-5 {\n    padding: var(--vd-spacing-5);\n  }\n\n  .vd-p-md-6 {\n    padding: var(--vd-spacing-6);\n  }\n}\n\n@media (min-width: 992px) {\n  .vd-m-lg-0 {\n    margin: var(--vd-spacing-0);\n  }\n\n  .vd-m-lg-1 {\n    margin: var(--vd-spacing-1);\n  }\n\n  .vd-m-lg-2 {\n    margin: var(--vd-spacing-2);\n  }\n\n  .vd-m-lg-3 {\n    margin: var(--vd-spacing-3);\n  }\n\n  .vd-m-lg-4 {\n    margin: var(--vd-spacing-4);\n  }\n\n  .vd-m-lg-5 {\n    margin: var(--vd-spacing-5);\n  }\n\n  .vd-m-lg-6 {\n    margin: var(--vd-spacing-6);\n  }\n\n  .vd-m-lg-auto {\n    margin: auto;\n  }\n\n  .mt-lg-0 {\n    margin-top: var(--vd-spacing-0);\n  }\n\n  .mt-lg-4 {\n    margin-top: var(--vd-spacing-4);\n  }\n\n  .mb-lg-0 {\n    margin-bottom: var(--vd-spacing-0);\n  }\n\n  .mb-lg-4 {\n    margin-bottom: var(--vd-spacing-4);\n  }\n\n  .vd-p-lg-0 {\n    padding: var(--vd-spacing-0);\n  }\n\n  .vd-p-lg-1 {\n    padding: var(--vd-spacing-1);\n  }\n\n  .vd-p-lg-2 {\n    padding: var(--vd-spacing-2);\n  }\n\n  .vd-p-lg-3 {\n    padding: var(--vd-spacing-3);\n  }\n\n  .vd-p-lg-4 {\n    padding: var(--vd-spacing-4);\n  }\n\n  .vd-p-lg-5 {\n    padding: var(--vd-spacing-5);\n  }\n\n  .vd-p-lg-6 {\n    padding: var(--vd-spacing-6);\n  }\n}\n\n@media (min-width: 1200px) {\n  .vd-m-xl-0 {\n    margin: var(--vd-spacing-0);\n  }\n\n  .vd-m-xl-1 {\n    margin: var(--vd-spacing-1);\n  }\n\n  .vd-m-xl-2 {\n    margin: var(--vd-spacing-2);\n  }\n\n  .vd-m-xl-3 {\n    margin: var(--vd-spacing-3);\n  }\n\n  .vd-m-xl-4 {\n    margin: var(--vd-spacing-4);\n  }\n\n  .vd-m-xl-5 {\n    margin: var(--vd-spacing-5);\n  }\n\n  .vd-m-xl-6 {\n    margin: var(--vd-spacing-6);\n  }\n\n  .vd-m-xl-auto {\n    margin: auto;\n  }\n\n  .mt-xl-0 {\n    margin-top: var(--vd-spacing-0);\n  }\n\n  .mt-xl-4 {\n    margin-top: var(--vd-spacing-4);\n  }\n\n  .mb-xl-0 {\n    margin-bottom: var(--vd-spacing-0);\n  }\n\n  .mb-xl-4 {\n    margin-bottom: var(--vd-spacing-4);\n  }\n\n  .vd-p-xl-0 {\n    padding: var(--vd-spacing-0);\n  }\n\n  .vd-p-xl-1 {\n    padding: var(--vd-spacing-1);\n  }\n\n  .vd-p-xl-2 {\n    padding: var(--vd-spacing-2);\n  }\n\n  .vd-p-xl-3 {\n    padding: var(--vd-spacing-3);\n  }\n\n  .vd-p-xl-4 {\n    padding: var(--vd-spacing-4);\n  }\n\n  .vd-p-xl-5 {\n    padding: var(--vd-spacing-5);\n  }\n\n  .vd-p-xl-6 {\n    padding: var(--vd-spacing-6);\n  }\n}\n\n/* Skip Link - Accessibility */\n.skip-link {\n  position: absolute;\n  left: -9999px;\n  z-index: 9999;\n  padding: 0.8125rem;\n  /* 13px - fib */\n  background-color: var(--vd-bg-primary);\n  color: var(--vd-text-primary);\n  text-decoration: none;\n  font-weight: var(--vd-font-weight-medium);\n}\n\n.skip-link:focus {\n  left: 0;\n  top: 0;\n  outline: 2px solid var(--vd-color-primary);\n  outline-offset: 2px;\n}\n\n/* Screen Reader Only - Visually hidden but accessible to assistive technology */\n.sr-only {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border-width: 0;\n}\n\n.sr-only-focusable:focus,\n.sr-only-focusable:active {\n  position: static;\n  width: auto;\n  height: auto;\n  padding: inherit;\n  margin: inherit;\n  overflow: visible;\n  clip: auto;\n  white-space: normal;\n}\n\n/* Focus Visible Utilities */\n.focus-ring:focus-visible {\n  outline: 2px solid var(--vd-color-primary);\n  outline-offset: 2px;\n}\n\n.focus-ring-inset:focus-visible {\n  outline: 2px solid var(--vd-color-primary);\n  outline-offset: -2px;\n}\n\n.focus-ring-shadow:focus-visible {\n  outline: none;\n  box-shadow: 0 0 0 3px rgba(var(--vd-color-primary-rgb, 0, 123, 255), 0.25);\n}\n\n/* Text Alignment Utilities */\n.vd-text-left {\n  text-align: left;\n}\n\n.vd-text-center {\n  text-align: center;\n}\n\n.vd-text-right {\n  text-align: right;\n}\n\n.vd-text-justify {\n  text-align: justify;\n}\n\n/* Text Transform Utilities */\n.vd-text-uppercase {\n  text-transform: uppercase;\n}\n\n.vd-text-lowercase {\n  text-transform: lowercase;\n}\n\n.vd-text-capitalize {\n  text-transform: capitalize;\n}\n\n.vd-text-normal-case {\n  text-transform: none;\n}\n\n/* Text Overflow Utilities */\n.vd-text-truncate {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.vd-text-nowrap {\n  white-space: nowrap;\n}\n\n.vd-text-wrap {\n  white-space: normal;\n}\n\n.vd-text-break {\n  word-break: break-word;\n  overflow-wrap: break-word;\n}\n\n/* Text Decoration Utilities */\n.vd-text-underline {\n  text-decoration: underline;\n}\n\n.vd-text-line-through {\n  text-decoration: line-through;\n}\n\n.vd-text-no-underline {\n  text-decoration: none;\n}\n\n/* Font Style Utilities */\n.vd-font-italic {\n  font-style: italic;\n}\n\n.vd-font-normal {\n  font-style: normal;\n}\n\n/* Responsive Text Alignment */\n@media (min-width: 576px) {\n  .vd-text-sm-left {\n    text-align: left;\n  }\n\n  .vd-text-sm-center {\n    text-align: center;\n  }\n\n  .vd-text-sm-right {\n    text-align: right;\n  }\n}\n\n@media (min-width: 768px) {\n  .vd-text-md-left {\n    text-align: left;\n  }\n\n  .vd-text-md-center {\n    text-align: center;\n  }\n\n  .vd-text-md-right {\n    text-align: right;\n  }\n}\n\n@media (min-width: 992px) {\n  .vd-text-lg-left {\n    text-align: left;\n  }\n\n  .vd-text-lg-center {\n    text-align: center;\n  }\n\n  .vd-text-lg-right {\n    text-align: right;\n  }\n}\n\n@media (min-width: 1200px) {\n  .vd-text-xl-left {\n    text-align: left;\n  }\n\n  .vd-text-xl-center {\n    text-align: center;\n  }\n\n  .vd-text-xl-right {\n    text-align: right;\n  }\n}\n\n/* Opacity Utilities */\n.opacity-0 {\n  opacity: 0;\n}\n\n.opacity-25 {\n  opacity: 0.25;\n}\n\n.opacity-50 {\n  opacity: 0.5;\n}\n\n.opacity-75 {\n  opacity: 0.75;\n}\n\n.opacity-100 {\n  opacity: 1;\n}\n\n/* Z-Index Utilities */\n.z-0 {\n  z-index: 0;\n}\n\n.z-10 {\n  z-index: 10;\n}\n\n.z-20 {\n  z-index: 20;\n}\n\n.z-30 {\n  z-index: 30;\n}\n\n.z-40 {\n  z-index: 40;\n}\n\n.z-50 {\n  z-index: 50;\n}\n\n.z-auto {\n  z-index: auto;\n}\n\n.z-negative {\n  z-index: -1;\n}\n\n/* Object Fit Utilities */\n.object-contain {\n  object-fit: contain;\n}\n\n.object-cover {\n  object-fit: cover;\n}\n\n.object-fill {\n  object-fit: fill;\n}\n\n.object-none {\n  object-fit: none;\n}\n\n.object-scale-down {\n  object-fit: scale-down;\n}\n\n/* Object Position Utilities */\n.object-center {\n  object-position: center;\n}\n\n.object-top {\n  object-position: top;\n}\n\n.object-bottom {\n  object-position: bottom;\n}\n\n.object-left {\n  object-position: left;\n}\n\n.object-right {\n  object-position: right;\n}\n\n/* Pointer Events Utilities */\n.pointer-events-none {\n  pointer-events: none;\n}\n\n.pointer-events-auto {\n  pointer-events: auto;\n}\n\n/* Aspect Ratio Utilities */\n.aspect-auto {\n  aspect-ratio: auto;\n}\n\n.aspect-square {\n  aspect-ratio: 1 / 1;\n}\n\n.aspect-video {\n  aspect-ratio: 16 / 9;\n}\n\n.aspect-4-3 {\n  aspect-ratio: 4 / 3;\n}\n\n.aspect-golden {\n  aspect-ratio: 1.618 / 1;\n}\n\n.aspect-golden-portrait {\n  aspect-ratio: 1 / 1.618;\n}\n\n/* ═════════════════════════════════════════════════════════════════════════\n * DYNAMIC RADIUS SWITCHING (Theme Customizer)\n * These rules remap --vd-radius-fib-* variables based on [data-radius] attribute\n * Values: 0, 0.125, 0.25, 0.375, 0.5 (rem multiplier)\n * ═════════════════════════════════════════════════════════════════════════ */\n\n/* No radius (sharp corners) */\n[data-radius=\"0\"] {\n  --vd-radius-fib-2: 0;\n  --vd-radius-fib-3: 0;\n  --vd-radius-fib-5: 0;\n  --vd-radius-fib-8: 0;\n  --vd-radius-fib-13: 0;\n  --vd-radius-fib-21: 0;\n}\n\n/* Extra small radius (0.125rem base) */\n[data-radius=\"0.125\"] {\n  --vd-radius-fib-2: 0.0625rem;   /* 1px */\n  --vd-radius-fib-3: 0.09375rem;  /* 1.5px */\n  --vd-radius-fib-5: 0.15625rem;  /* 2.5px */\n  --vd-radius-fib-8: 0.25rem;     /* 4px */\n  --vd-radius-fib-13: 0.40625rem; /* 6.5px */\n  --vd-radius-fib-21: 0.65625rem; /* 10.5px */\n}\n\n/* Small radius (0.25rem base - default) */\n[data-radius=\"0.25\"] {\n  --vd-radius-fib-2: 0.125rem;    /* 2px */\n  --vd-radius-fib-3: 0.1875rem;   /* 3px */\n  --vd-radius-fib-5: 0.3125rem;   /* 5px */\n  --vd-radius-fib-8: 0.5rem;      /* 8px */\n  --vd-radius-fib-13: 0.8125rem;  /* 13px */\n  --vd-radius-fib-21: 1.3125rem;  /* 21px */\n}\n\n/* Medium radius (0.375rem base) */\n[data-radius=\"0.375\"] {\n  --vd-radius-fib-2: 0.1875rem;   /* 3px */\n  --vd-radius-fib-3: 0.28125rem;  /* 4.5px */\n  --vd-radius-fib-5: 0.46875rem;  /* 7.5px */\n  --vd-radius-fib-8: 0.75rem;     /* 12px */\n  --vd-radius-fib-13: 1.21875rem; /* 19.5px */\n  --vd-radius-fib-21: 1.96875rem; /* 31.5px */\n}\n\n/* Large radius (0.5rem base) */\n[data-radius=\"0.5\"] {\n  --vd-radius-fib-2: 0.25rem;     /* 4px */\n  --vd-radius-fib-3: 0.375rem;    /* 6px */\n  --vd-radius-fib-5: 0.625rem;    /* 10px */\n  --vd-radius-fib-8: 1rem;        /* 16px */\n  --vd-radius-fib-13: 1.625rem;   /* 26px */\n  --vd-radius-fib-21: 2.625rem;   /* 42px */\n}\n\n\n/* Layer 2: Icons (regular + fill; import css/icons/icons-all.css for all 6 weights) */\n\n/* Layer 3: Utilities */\n/**\n * Vanduo Framework - Shadow Utilities\n * Elevation and shadow system for depth and visual hierarchy\n */\n\n:root {\n  /* Fibonacci Shadow System\n   * Y-offset and blur follow Fibonacci pairs: 1/2, 2/3, 3/5, 8/13, 13/21, 21/34\n   * Each level steps through the Fibonacci sequence */\n  --vd-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);\n  --vd-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);\n  --vd-shadow-md: 0 3px 5px -1px rgba(0, 0, 0, 0.1), 0 2px 3px -2px rgba(0, 0, 0, 0.1);\n  --vd-shadow-lg: 0 8px 13px -3px rgba(0, 0, 0, 0.1), 0 3px 5px -3px rgba(0, 0, 0, 0.1);\n  --vd-shadow-xl: 0 13px 21px -5px rgba(0, 0, 0, 0.1), 0 5px 8px -5px rgba(0, 0, 0, 0.1);\n  --vd-shadow-2xl: 0 21px 34px -8px rgba(0, 0, 0, 0.25);\n  --vd-shadow-inner: inset 0 2px 3px 0 rgba(0, 0, 0, 0.05);\n\n  /* Colored Shadows (Fibonacci: 3/5 offset/blur)\n   * Colors match Open Color palette defined in colors.css */\n  --vd-shadow-primary: 0 3px 5px -1px rgba(34, 184, 207, 0.2), 0 2px 3px -2px rgba(34, 184, 207, 0.1);\n  --vd-shadow-success: 0 3px 5px -1px rgba(64, 192, 87, 0.2), 0 2px 3px -2px rgba(64, 192, 87, 0.1);\n  --vd-shadow-warning: 0 3px 5px -1px rgba(250, 176, 5, 0.2), 0 2px 3px -2px rgba(250, 176, 5, 0.1);\n  --vd-shadow-error: 0 3px 5px -1px rgba(250, 82, 82, 0.2), 0 2px 3px -2px rgba(250, 82, 82, 0.1);\n\n  /* Glow Effect Colors - uses color scale variables */\n  --vd-glow-primary-color: var(--vd-primary-3);\n  --vd-glow-success-color: var(--vd-success-3);\n  --vd-glow-warning-color: var(--vd-warning-3);\n  --vd-glow-error-color: var(--vd-danger-3);\n}\n\n/* Shadow Utilities */\n.vd-shadow-none {\n  box-shadow: none;\n}\n\n.vd-shadow-sm {\n  box-shadow: var(--vd-shadow-sm);\n}\n\n.vd-shadow {\n  box-shadow: var(--vd-shadow);\n}\n\n.vd-shadow-md {\n  box-shadow: var(--vd-shadow-md);\n}\n\n.vd-shadow-lg {\n  box-shadow: var(--vd-shadow-lg);\n}\n\n.vd-shadow-xl {\n  box-shadow: var(--vd-shadow-xl);\n}\n\n.vd-shadow-2xl {\n  box-shadow: var(--vd-shadow-2xl);\n}\n\n.vd-shadow-inner {\n  box-shadow: var(--vd-shadow-inner);\n}\n\n/* Colored Shadow Utilities */\n.vd-shadow-primary {\n  box-shadow: var(--vd-shadow-primary);\n}\n\n.vd-shadow-success {\n  box-shadow: var(--vd-shadow-success);\n}\n\n.vd-shadow-warning {\n  box-shadow: var(--vd-shadow-warning);\n}\n\n.vd-shadow-error {\n  box-shadow: var(--vd-shadow-error);\n}\n\n/* Elevation Levels (for Material Design-like system) */\n.elevation-0 {\n  box-shadow: none;\n}\n\n.elevation-1 {\n  box-shadow: var(--vd-shadow-sm);\n}\n\n.elevation-2 {\n  box-shadow: var(--vd-shadow);\n}\n\n.elevation-3 {\n  box-shadow: var(--vd-shadow-md);\n}\n\n.elevation-4 {\n  box-shadow: var(--vd-shadow-lg);\n}\n\n.elevation-5 {\n  box-shadow: var(--vd-shadow-xl);\n}\n\n/* ═════════════════════════════════════════════════════════════════════════\n * GLOW EFFECT UTILITIES\n * Soft glowing shadows for interactive elements\n * ═════════════════════════════════════════════════════════════════════════ */\n\n/* Base Glow (uses primary color) */\n.vd-glow,\n.vd-glow-primary,\n.glow,\n.glow-primary {\n  box-shadow: 0 0 15px 0 var(--vd-glow-primary-color, rgba(34, 184, 207, 0.25));\n}\n\n/* Glow on Hover */\n.vd-hover-glow,\n.vd-hover-glow-primary,\n.hover-glow,\n.hover-glow-primary {\n  transition: box-shadow 0.3s ease;\n}\n\n.vd-hover-glow:hover,\n.vd-hover-glow-primary:hover,\n.hover-glow:hover,\n.hover-glow-primary:hover {\n  box-shadow: 0 0 15px 0 var(--vd-glow-primary-color, rgba(34, 184, 207, 0.25));\n}\n\n/* Glow Color Variants */\n.vd-glow-success,\n.glow-success {\n  box-shadow: 0 0 15px 0 var(--vd-glow-success-color, rgba(64, 192, 87, 0.25));\n}\n\n.vd-glow-warning,\n.glow-warning {\n  box-shadow: 0 0 15px 0 var(--vd-glow-warning-color, rgba(250, 176, 5, 0.25));\n}\n\n.vd-glow-error,\n.glow-error {\n  box-shadow: 0 0 15px 0 var(--vd-glow-error-color, rgba(250, 82, 82, 0.25));\n}\n\n/* Glow Hover Variants */\n.vd-hover-glow-success:hover,\n.hover-glow-success:hover {\n  box-shadow: 0 0 15px 0 var(--vd-glow-success-color, rgba(64, 192, 87, 0.25));\n}\n\n.vd-hover-glow-warning:hover,\n.hover-glow-warning:hover {\n  box-shadow: 0 0 15px 0 var(--vd-glow-warning-color, rgba(250, 176, 5, 0.25));\n}\n\n.vd-hover-glow-error:hover,\n.hover-glow-error:hover {\n  box-shadow: 0 0 15px 0 var(--vd-glow-error-color, rgba(250, 82, 82, 0.25));\n}\n\n/* Glow Intensity Variants */\n.vd-glow-sm,\n.glow-sm {\n  box-shadow: 0 0 8px 0 var(--vd-glow-primary-color, rgba(34, 184, 207, 0.15));\n}\n\n.vd-glow-md,\n.glow-md {\n  box-shadow: 0 0 15px 0 var(--vd-glow-primary-color, rgba(34, 184, 207, 0.25));\n}\n\n.vd-glow-lg,\n.glow-lg {\n  box-shadow: 0 0 22px 0 var(--vd-glow-primary-color, rgba(34, 184, 207, 0.35));\n}\n\n.vd-hover-glow-sm:hover,\n.hover-glow-sm:hover {\n  box-shadow: 0 0 8px 0 var(--vd-glow-primary-color, rgba(34, 184, 207, 0.15));\n}\n\n.vd-hover-glow-md:hover,\n.hover-glow-md:hover {\n  box-shadow: 0 0 15px 0 var(--vd-glow-primary-color, rgba(34, 184, 207, 0.25));\n}\n\n.vd-hover-glow-lg:hover,\n.hover-glow-lg:hover {\n  box-shadow: 0 0 22px 0 var(--vd-glow-primary-color, rgba(34, 184, 207, 0.35));\n}\n\n/* Dark Mode Shadow Overrides\n * Dark backgrounds need stronger shadows for visible depth\n * Matches both explicit dark theme and system preference */\n[data-theme=\"dark\"],\n:root:not([data-theme]) {\n  --vd-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.2);\n  --vd-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.3), 0 1px 2px -1px rgba(0, 0, 0, 0.3);\n  --vd-shadow-md: 0 3px 5px -1px rgba(0, 0, 0, 0.35), 0 2px 3px -2px rgba(0, 0, 0, 0.3);\n  --vd-shadow-lg: 0 8px 13px -3px rgba(0, 0, 0, 0.35), 0 3px 5px -3px rgba(0, 0, 0, 0.3);\n  --vd-shadow-xl: 0 13px 21px -5px rgba(0, 0, 0, 0.35), 0 5px 8px -5px rgba(0, 0, 0, 0.3);\n  --vd-shadow-2xl: 0 21px 34px -8px rgba(0, 0, 0, 0.5);\n  --vd-shadow-inner: inset 0 2px 3px 0 rgba(0, 0, 0, 0.2);\n  --vd-shadow-primary: 0 3px 5px -1px rgba(34, 184, 207, 0.3), 0 2px 3px -2px rgba(34, 184, 207, 0.2);\n  --vd-shadow-success: 0 3px 5px -1px rgba(64, 192, 87, 0.3), 0 2px 3px -2px rgba(64, 192, 87, 0.2);\n  --vd-shadow-warning: 0 3px 5px -1px rgba(250, 176, 5, 0.3), 0 2px 3px -2px rgba(250, 176, 5, 0.2);\n  --vd-shadow-error: 0 3px 5px -1px rgba(250, 82, 82, 0.3), 0 2px 3px -2px rgba(250, 82, 82, 0.2);\n\n  /* Glow Effect Colors - Dark Mode (lighter shades for visibility) */\n  --vd-glow-primary-color: var(--vd-primary-4);\n  --vd-glow-success-color: var(--vd-success-4);\n  --vd-glow-warning-color: var(--vd-warning-4);\n  --vd-glow-error-color: var(--vd-danger-4);\n}\n\n/* System preference dark mode (when no explicit theme is set) */\n@media (prefers-color-scheme: dark) {\n  :root:not([data-theme]) {\n    --vd-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.2);\n    --vd-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.3), 0 1px 2px -1px rgba(0, 0, 0, 0.3);\n    --vd-shadow-md: 0 3px 5px -1px rgba(0, 0, 0, 0.35), 0 2px 3px -2px rgba(0, 0, 0, 0.3);\n    --vd-shadow-lg: 0 8px 13px -3px rgba(0, 0, 0, 0.35), 0 3px 5px -3px rgba(0, 0, 0, 0.3);\n    --vd-shadow-xl: 0 13px 21px -5px rgba(0, 0, 0, 0.35), 0 5px 8px -5px rgba(0, 0, 0, 0.3);\n    --vd-shadow-2xl: 0 21px 34px -8px rgba(0, 0, 0, 0.5);\n    --vd-shadow-inner: inset 0 2px 3px 0 rgba(0, 0, 0, 0.2);\n    --vd-shadow-primary: 0 3px 5px -1px rgba(34, 184, 207, 0.3), 0 2px 3px -2px rgba(34, 184, 207, 0.2);\n    --vd-shadow-success: 0 3px 5px -1px rgba(64, 192, 87, 0.3), 0 2px 3px -2px rgba(64, 192, 87, 0.2);\n    --vd-shadow-warning: 0 3px 5px -1px rgba(250, 176, 5, 0.3), 0 2px 3px -2px rgba(250, 176, 5, 0.2);\n    --vd-shadow-error: 0 3px 5px -1px rgba(250, 82, 82, 0.3), 0 2px 3px -2px rgba(250, 82, 82, 0.2);\n\n    /* Glow Effect Colors - Dark Mode */\n    --vd-glow-primary-color: var(--vd-primary-4);\n    --vd-glow-success-color: var(--vd-success-4);\n    --vd-glow-warning-color: var(--vd-warning-4);\n    --vd-glow-error-color: var(--vd-danger-4);\n  }\n}\n\n/**\n * Vanduo Framework - Transitions\n * Transition utilities for animations and effects\n */\n\n:root {\n  /* Transition Durations */\n  --vd-transition-duration-fast: 150ms;\n  --vd-transition-duration-base: 200ms;\n  --vd-transition-duration-slow: 300ms;\n  --vd-transition-duration-slower: 400ms;\n  --vd-transition-duration-slowest: 500ms;\n  \n  /* Transition Timing Functions */\n  --vd-transition-ease: ease;\n  --vd-transition-ease-in: ease-in;\n  --vd-transition-ease-out: ease-out;\n  --vd-transition-ease-in-out: ease-in-out;\n  --vd-transition-linear: linear;\n  \n  /* Common Transitions */\n  --vd-transition-base: all var(--vd-transition-duration-base) var(--vd-transition-ease);\n  --vd-transition-fast: all var(--vd-transition-duration-fast) var(--vd-transition-ease);\n  --vd-transition-slow: all var(--vd-transition-duration-slow) var(--vd-transition-ease);\n  --vd-transition-color: color var(--vd-transition-duration-base) var(--vd-transition-ease);\n  --vd-transition-bg: background-color var(--vd-transition-duration-base) var(--vd-transition-ease);\n  --vd-transition-border: border-color var(--vd-transition-duration-base) var(--vd-transition-ease);\n  --vd-transition-opacity: opacity var(--vd-transition-duration-base) var(--vd-transition-ease);\n  --vd-transition-transform: transform var(--vd-transition-duration-base) var(--vd-transition-ease);\n  --vd-transition-shadow: box-shadow var(--vd-transition-duration-base) var(--vd-transition-ease);\n}\n\n/* Transition Duration Utilities */\n.vd-transition-none { transition: none; }\n.vd-transition-fast {\n  transition: var(--vd-transition-fast);\n  transition-duration: var(--vd-transition-duration-fast);\n}\n.vd-transition-base { transition-duration: var(--vd-transition-duration-base); }\n.vd-transition-slow {\n  transition: var(--vd-transition-slow);\n  transition-duration: var(--vd-transition-duration-slow);\n}\n.vd-transition-slower { transition-duration: var(--vd-transition-duration-slower); }\n.vd-transition-slowest { transition-duration: var(--vd-transition-duration-slowest); }\n\n/* Transition Timing Function Utilities */\n.vd-transition-ease { transition-timing-function: var(--vd-transition-ease); }\n.vd-transition-ease-in { transition-timing-function: var(--vd-transition-ease-in); }\n.vd-transition-ease-out { transition-timing-function: var(--vd-transition-ease-out); }\n.vd-transition-ease-in-out { transition-timing-function: var(--vd-transition-ease-in-out); }\n.vd-transition-linear { transition-timing-function: var(--vd-transition-linear); }\n\n/* Transition Property Utilities */\n.vd-transition-all { transition-property: all; }\n.vd-transition-colors { transition-property: color, background-color, border-color; }\n.vd-transition-opacity {\n  transition: var(--vd-transition-opacity);\n  transition-property: opacity;\n}\n\n.vd-transition-transform {\n  transition: var(--vd-transition-transform);\n  transition-property: transform;\n}\n\n.vd-transition-shadow {\n  transition: var(--vd-transition-shadow);\n  transition-property: box-shadow;\n}\n\n/* Combined Transition Utilities */\n.vd-transition { transition: var(--vd-transition-base); }\n.vd-transition-color { transition: var(--vd-transition-color); }\n.vd-transition-bg { transition: var(--vd-transition-bg); }\n.vd-transition-border { transition: var(--vd-transition-border); }\n\n/* Delay Utilities */\n.vd-transition-delay-none { transition-delay: 0ms; }\n.vd-transition-delay-75 { transition-delay: 75ms; }\n.vd-transition-delay-100 { transition-delay: 100ms; }\n.vd-transition-delay-150 { transition-delay: 150ms; }\n.vd-transition-delay-200 { transition-delay: 200ms; }\n.vd-transition-delay-300 { transition-delay: 300ms; }\n.vd-transition-delay-500 { transition-delay: 500ms; }\n.vd-transition-delay-700 { transition-delay: 700ms; }\n.vd-transition-delay-1000 { transition-delay: 1000ms; }\n\n/* Reduced Motion - Accessibility */\n@media (prefers-reduced-motion: reduce) {\n  *,\n  *::before,\n  *::after {\n    animation-duration: 0.01ms !important;\n    animation-iteration-count: 1 !important;\n    transition-duration: 0.01ms !important;\n    scroll-behavior: auto !important;\n  }\n}\n\n/**\n * Vanduo Framework - Transform Utilities\n * Scale, rotate, and translate utilities\n */\n\n/* Scale Utilities */\n.scale-0 { transform: scale(0); }\n.scale-50 { transform: scale(0.5); }\n.scale-75 { transform: scale(0.75); }\n.scale-90 { transform: scale(0.9); }\n.scale-95 { transform: scale(0.95); }\n.scale-100 { transform: scale(1); }\n.scale-105 { transform: scale(1.05); }\n.scale-110 { transform: scale(1.1); }\n.scale-125 { transform: scale(1.25); }\n.scale-150 { transform: scale(1.5); }\n\n/* Rotate Utilities */\n.rotate-0 { transform: rotate(0deg); }\n.rotate-45 { transform: rotate(45deg); }\n.rotate-90 { transform: rotate(90deg); }\n.rotate-180 { transform: rotate(180deg); }\n.-rotate-45 { transform: rotate(-45deg); }\n.-rotate-90 { transform: rotate(-90deg); }\n.-rotate-180 { transform: rotate(-180deg); }\n\n/* Translate Utilities (Fibonacci-based: 1, 2, 3, 5, 8, 13, 21px) */\n.translate-x-0 { transform: translateX(0); }\n.translate-x-1 { transform: translateX(1px); }\n.translate-x-2 { transform: translateX(2px); }\n.translate-x-3 { transform: translateX(3px); }\n.translate-x-5 { transform: translateX(5px); }\n.translate-x-8 { transform: translateX(8px); }\n.-translate-x-1 { transform: translateX(-1px); }\n.-translate-x-2 { transform: translateX(-2px); }\n.-translate-x-3 { transform: translateX(-3px); }\n.-translate-x-5 { transform: translateX(-5px); }\n.-translate-x-8 { transform: translateX(-8px); }\n\n.translate-y-0 { transform: translateY(0); }\n.translate-y-1 { transform: translateY(1px); }\n.translate-y-2 { transform: translateY(2px); }\n.translate-y-3 { transform: translateY(3px); }\n.translate-y-5 { transform: translateY(5px); }\n.translate-y-8 { transform: translateY(8px); }\n.-translate-y-1 { transform: translateY(-1px); }\n.-translate-y-2 { transform: translateY(-2px); }\n.-translate-y-3 { transform: translateY(-3px); }\n.-translate-y-5 { transform: translateY(-5px); }\n.-translate-y-8 { transform: translateY(-8px); }\n\n/* Translate percentage-based */\n.translate-x-full { transform: translateX(100%); }\n.-translate-x-full { transform: translateX(-100%); }\n.translate-x-half { transform: translateX(50%); }\n.-translate-x-half { transform: translateX(-50%); }\n.translate-y-full { transform: translateY(100%); }\n.-translate-y-full { transform: translateY(-100%); }\n.translate-y-half { transform: translateY(50%); }\n.-translate-y-half { transform: translateY(-50%); }\n\n/* Transform Origin */\n.origin-center { transform-origin: center; }\n.origin-top { transform-origin: top; }\n.origin-top-right { transform-origin: top right; }\n.origin-right { transform-origin: right; }\n.origin-bottom-right { transform-origin: bottom right; }\n.origin-bottom { transform-origin: bottom; }\n.origin-bottom-left { transform-origin: bottom left; }\n.origin-left { transform-origin: left; }\n.origin-top-left { transform-origin: top left; }\n\n/**\n * Vanduo Framework - Media Utilities\n * Responsive image and media utilities\n */\n\n/* Responsive Images */\n.img-responsive,\n.img-fluid {\n  max-width: 100%;\n  height: auto;\n  display: block;\n}\n\n.img-fluid {\n  width: 100%;\n}\n\n/* Object Fit Utilities */\n.object-fit-contain {\n  object-fit: contain;\n}\n\n.object-fit-cover {\n  object-fit: cover;\n}\n\n.object-fit-fill {\n  object-fit: fill;\n}\n\n.object-fit-none {\n  object-fit: none;\n}\n\n.object-fit-scale-down {\n  object-fit: scale-down;\n}\n\n/* Object Position Utilities */\n.object-position-center {\n  object-position: center;\n}\n\n.object-position-top {\n  object-position: top;\n}\n\n.object-position-bottom {\n  object-position: bottom;\n}\n\n.object-position-left {\n  object-position: left;\n}\n\n.object-position-right {\n  object-position: right;\n}\n\n.object-position-top-left {\n  object-position: top left;\n}\n\n.object-position-top-right {\n  object-position: top right;\n}\n\n.object-position-bottom-left {\n  object-position: bottom left;\n}\n\n.object-position-bottom-right {\n  object-position: bottom right;\n}\n\n/* Aspect Ratio Utilities */\n.aspect-ratio {\n  position: relative;\n  width: 100%;\n  padding-bottom: 56.25%; /* 16:9 default */\n}\n\n.aspect-ratio > * {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n\n.aspect-ratio-1-1 {\n  padding-bottom: 100%; /* 1:1 - Square */\n}\n\n.aspect-ratio-16-9 {\n  padding-bottom: 56.25%; /* 16:9 - Video */\n}\n\n.aspect-ratio-4-3 {\n  padding-bottom: 75%; /* 4:3 - Classic */\n}\n\n.aspect-ratio-21-9 {\n  padding-bottom: 42.857%; /* 21:9 - Ultrawide */\n}\n\n.aspect-ratio-3-2 {\n  padding-bottom: 66.667%; /* 3:2 */\n}\n\n.aspect-ratio-2-1 {\n  padding-bottom: 50%; /* 2:1 */\n}\n\n.aspect-ratio-golden {\n  padding-bottom: 61.8%; /* 1:1.618 - Golden Rectangle landscape */\n}\n\n.aspect-ratio-golden-portrait {\n  padding-bottom: 161.8%; /* 1.618:1 - Golden Rectangle portrait */\n}\n\n/* Image Styles */\n.img-rounded {\n  border-radius: var(--vd-btn-border-radius);\n}\n\n.img-circle {\n  border-radius: 50%;\n}\n\n.img-thumbnail {\n  padding: 0.1875rem; /* 3px - fib */\n  background-color: var(--vd-color-white);\n  border: 1px solid var(--vd-border-color);\n  border-radius: var(--vd-radius-fib-5);\n  max-width: 100%;\n  height: auto;\n}\n\n/* Image Alignment */\n.img-left {\n  float: left;\n  margin-right: 0.8125rem; /* 13px - fib */\n  margin-bottom: 0.8125rem;\n}\n\n.img-right {\n  float: right;\n  margin-left: 0.8125rem; /* 13px - fib */\n  margin-bottom: 0.8125rem;\n}\n\n.img-center {\n  display: block;\n  margin-left: auto;\n  margin-right: auto;\n}\n\n/* Clearfix for floated images */\n.img-clearfix::after {\n  content: '';\n  display: table;\n  clear: both;\n}\n\n\n/**\n * Vanduo Framework - Table Utilities\n * Table styling utilities\n */\n\n:root {\n  /* Table Colors */\n  --vd-table-bg: var(--vd-color-white);\n  --vd-table-border-color: var(--vd-border-color);\n  --vd-table-striped-bg: var(--vd-bg-secondary);\n  --vd-table-hover-bg: rgba(0, 0, 0, 0.075);\n  --vd-table-active-bg: var(--vd-color-primary-alpha-10);\n\n  /* Table Spacing (Fibonacci) */\n  --vd-table-padding-y: 0.5rem;\n  /* 8px  - fib */\n  --vd-table-padding-x: 0.8125rem;\n  /* 13px - fib (13/8 ~ phi) */\n  --vd-table-padding-y-sm: 0.3125rem;\n  /* 5px  - fib */\n  --vd-table-padding-x-sm: 0.5rem;\n  /* 8px  - fib (8/5 ~ phi) */\n}\n\n/* Base Table */\n.vd-table,\n.table {\n  width: 100%;\n  margin-bottom: 1rem;\n  color: var(--vd-text-primary);\n  background-color: var(--vd-table-bg);\n  border-collapse: collapse;\n}\n\n.vd-table th,\n.vd-table td,\n.table th,\n.table td {\n  padding: var(--vd-table-padding-y) var(--vd-table-padding-x);\n  vertical-align: middle;\n  border-top: 1px solid var(--vd-table-border-color);\n}\n\n.vd-table thead th,\n.table thead th {\n  vertical-align: bottom;\n  border-bottom: 2px solid var(--vd-table-border-color);\n  font-weight: var(--vd-font-weight-semibold);\n  color: var(--vd-text-primary);\n}\n\n.vd-table tbody+tbody,\n.table tbody+tbody {\n  border-top: 2px solid var(--vd-table-border-color);\n}\n\n/* Table Variants */\n.vd-table-bordered,\n.table-bordered {\n  border: 1px solid var(--vd-table-border-color);\n}\n\n.vd-table-bordered th,\n.vd-table-bordered td,\n.table-bordered th,\n.table-bordered td {\n  border: 1px solid var(--vd-table-border-color);\n}\n\n.vd-table-bordered thead th,\n.vd-table-bordered thead td,\n.table-bordered thead th,\n.table-bordered thead td {\n  border-bottom-width: 2px;\n}\n\n.vd-table-borderless th,\n.vd-table-borderless td,\n.vd-table-borderless thead th,\n.vd-table-borderless tbody+tbody,\n.table-borderless th,\n.table-borderless td,\n.table-borderless thead th,\n.table-borderless tbody+tbody {\n  border: 0;\n}\n\n.vd-table-striped tbody tr:nth-of-type(odd),\n.table-striped tbody tr:nth-of-type(odd) {\n  background-color: var(--vd-table-striped-bg);\n}\n\n.vd-table-hover tbody tr:hover,\n.table-hover tbody tr:hover {\n  background-color: var(--vd-table-hover-bg);\n}\n\n.vd-table-sm th,\n.vd-table-sm td,\n.table-sm th,\n.table-sm td {\n  padding: var(--vd-table-padding-y-sm) var(--vd-table-padding-x-sm);\n}\n\n/* Table Cell States */\n.vd-table-active,\n.vd-table-active>th,\n.vd-table-active>td,\n.table-active,\n.table-active>th,\n.table-active>td {\n  background-color: var(--vd-table-active-bg);\n}\n\n.vd-table-primary,\n.vd-table-primary>th,\n.vd-table-primary>td,\n.table-primary,\n.table-primary>th,\n.table-primary>td {\n  color: var(--vd-color-white);\n  background-color: var(--vd-color-primary);\n}\n\n.vd-table-secondary,\n.vd-table-secondary>th,\n.vd-table-secondary>td,\n.table-secondary,\n.table-secondary>th,\n.table-secondary>td {\n  color: var(--vd-color-white);\n  background-color: var(--vd-color-secondary);\n}\n\n.vd-table-success,\n.vd-table-success>th,\n.vd-table-success>td,\n.table-success,\n.table-success>th,\n.table-success>td {\n  color: var(--vd-color-white);\n  background-color: var(--vd-color-success);\n}\n\n.vd-table-warning,\n.vd-table-warning>th,\n.vd-table-warning>td,\n.table-warning,\n.table-warning>th,\n.table-warning>td {\n  color: var(--vd-color-gray-900);\n  background-color: var(--vd-color-warning);\n}\n\n.vd-table-error,\n.vd-table-error>th,\n.vd-table-error>td,\n.table-error,\n.table-error>th,\n.table-error>td {\n  color: var(--vd-color-white);\n  background-color: var(--vd-color-error);\n}\n\n.vd-table-info,\n.vd-table-info>th,\n.vd-table-info>td,\n.table-info,\n.table-info>th,\n.table-info>td {\n  color: var(--vd-color-white);\n  background-color: var(--vd-color-info);\n}\n\n/* Table Sections */\n.vd-table-header,\n.table-header,\nthead {\n  background-color: var(--vd-bg-secondary);\n}\n\n.vd-table-header th,\n.table-header th,\nthead th {\n  font-weight: var(--vd-font-weight-semibold);\n  text-transform: uppercase;\n  font-size: var(--vd-font-size-sm);\n  letter-spacing: 0.05em;\n}\n\n.table-body,\ntbody {\n  /* Default styling */\n}\n\n.vd-table-footer,\n.table-footer,\ntfoot {\n  background-color: var(--vd-bg-secondary);\n  font-weight: var(--vd-font-weight-semibold);\n}\n\n/* Responsive Table Wrapper */\n.vd-table-responsive,\n.table-responsive {\n  display: block;\n  width: 100%;\n  overflow-x: auto;\n  -webkit-overflow-scrolling: touch;\n}\n\n.vd-table-responsive>.vd-table,\n.vd-table-responsive>.table,\n.table-responsive>.table {\n  margin-bottom: 0;\n}\n\n/* Responsive Breakpoints */\n@media (max-width: 575.98px) {\n\n  .vd-table-responsive-sm,\n  .table-responsive-sm {\n    display: block;\n    width: 100%;\n    overflow-x: auto;\n    -webkit-overflow-scrolling: touch;\n  }\n\n  .vd-table-responsive-sm>.vd-table,\n  .vd-table-responsive-sm>.table,\n  .table-responsive-sm>.table {\n    margin-bottom: 0;\n  }\n}\n\n@media (max-width: 767.98px) {\n\n  .vd-table-responsive-md,\n  .table-responsive-md {\n    display: block;\n    width: 100%;\n    overflow-x: auto;\n    -webkit-overflow-scrolling: touch;\n  }\n\n  .vd-table-responsive-md>.vd-table,\n  .vd-table-responsive-md>.table,\n  .table-responsive-md>.table {\n    margin-bottom: 0;\n  }\n}\n\n@media (max-width: 991.98px) {\n\n  .vd-table-responsive-lg,\n  .table-responsive-lg {\n    display: block;\n    width: 100%;\n    overflow-x: auto;\n    -webkit-overflow-scrolling: touch;\n  }\n\n  .vd-table-responsive-lg>.vd-table,\n  .vd-table-responsive-lg>.table,\n  .table-responsive-lg>.table {\n    margin-bottom: 0;\n  }\n}\n\n@media (max-width: 1199.98px) {\n\n  .vd-table-responsive-xl,\n  .table-responsive-xl {\n    display: block;\n    width: 100%;\n    overflow-x: auto;\n    -webkit-overflow-scrolling: touch;\n  }\n\n  .vd-table-responsive-xl>.vd-table,\n  .vd-table-responsive-xl>.table,\n  .table-responsive-xl>.table {\n    margin-bottom: 0;\n  }\n}\n\n/* Dark Table Variant */\n.vd-table-dark,\n.table-dark {\n  color: var(--vd-color-white);\n  background-color: var(--vd-color-gray-800);\n}\n\n.vd-table-dark th,\n.vd-table-dark td,\n.vd-table-dark thead th,\n.table-dark th,\n.table-dark td,\n.table-dark thead th {\n  border-color: rgba(255, 255, 255, 0.1);\n}\n\n.vd-table-dark.vd-table-striped tbody tr:nth-of-type(odd),\n.vd-table-dark.table-striped tbody tr:nth-of-type(odd),\n.table-dark.table-striped tbody tr:nth-of-type(odd) {\n  background-color: rgba(255, 255, 255, 0.05);\n}\n\n.vd-table-dark.vd-table-hover tbody tr:hover,\n.vd-table-dark.table-hover tbody tr:hover,\n.table-dark.table-hover tbody tr:hover {\n  background-color: rgba(255, 255, 255, 0.075);\n}\n\n/* Dark Mode Table Overrides */\n[data-theme=\"dark\"] .vd-table,\n[data-theme=\"dark\"] .table {\n  --vd-table-bg: var(--vd-bg-primary);\n  --vd-table-border-color: var(--vd-border-color);\n  --vd-table-striped-bg: var(--vd-bg-secondary);\n  --vd-table-hover-bg: rgba(255, 255, 255, 0.05);\n\n  background-color: var(--vd-table-bg);\n  color: var(--vd-text-primary);\n}\n\n[data-theme=\"dark\"] .vd-table th,\n[data-theme=\"dark\"] .vd-table td,\n[data-theme=\"dark\"] .table th,\n[data-theme=\"dark\"] .table td {\n  border-color: var(--vd-table-border-color);\n}\n\n[data-theme=\"dark\"] .vd-table thead th,\n[data-theme=\"dark\"] .table thead th {\n  border-color: var(--vd-table-border-color);\n  color: var(--vd-text-primary);\n}\n\n[data-theme=\"dark\"] .vd-table-striped tbody tr:nth-of-type(odd),\n[data-theme=\"dark\"] .table-striped tbody tr:nth-of-type(odd) {\n  background-color: var(--vd-table-striped-bg);\n}\n\n[data-theme=\"dark\"] .vd-table thead,\n[data-theme=\"dark\"] thead {\n  background-color: var(--vd-bg-secondary);\n}\n\n/* Dark mode support for system preference */\n@media (prefers-color-scheme: dark) {\n\n  :root:not([data-theme]) .vd-table,\n  :root:not([data-theme]) .table {\n    --vd-table-bg: var(--vd-bg-primary);\n    --vd-table-border-color: var(--vd-border-color);\n    --vd-table-striped-bg: var(--vd-bg-secondary);\n    --vd-table-hover-bg: rgba(255, 255, 255, 0.05);\n\n    background-color: var(--vd-table-bg);\n    color: var(--vd-text-primary);\n  }\n\n  :root:not([data-theme]) .vd-table th,\n  :root:not([data-theme]) .vd-table td,\n  :root:not([data-theme]) .table th,\n  :root:not([data-theme]) .table td {\n    border-color: var(--vd-table-border-color);\n  }\n\n  :root:not([data-theme]) .vd-table thead th,\n  :root:not([data-theme]) .table thead th {\n    border-color: var(--vd-table-border-color);\n    color: var(--vd-text-primary);\n  }\n\n  :root:not([data-theme]) .vd-table-striped tbody tr:nth-of-type(odd),\n  :root:not([data-theme]) .table-striped tbody tr:nth-of-type(odd) {\n    background-color: var(--vd-table-striped-bg);\n  }\n\n  :root:not([data-theme]) .vd-table thead,\n  :root:not([data-theme]) thead {\n    background-color: var(--vd-bg-secondary);\n  }\n}\n/**\n * Vanduo Framework - Color Utility Classes\n *\n * Per-hue background and text color utilities for all Open Color scales.\n * Usage:\n *   Background: .vd-bg-{color}-{shade}  (e.g. .vd-bg-teal-3)\n *   Text:       .vd-text-{color}-{shade} (e.g. .vd-text-indigo-7)\n *\n * Covers 13 hues × 10 shades (0–9) × 2 properties = 260 classes.\n * All values reference existing CSS custom properties from colors.css.\n *\n * @since 1.2.6\n * @license MIT\n */\n\n/* ═══════════════════════════════════════════════════════════════════════════\n * RED\n * ═══════════════════════════════════════════════════════════════════════════ */\n\n.vd-bg-red-0 { background-color: var(--vd-red-0); }\n.vd-bg-red-1 { background-color: var(--vd-red-1); }\n.vd-bg-red-2 { background-color: var(--vd-red-2); }\n.vd-bg-red-3 { background-color: var(--vd-red-3); }\n.vd-bg-red-4 { background-color: var(--vd-red-4); }\n.vd-bg-red-5 { background-color: var(--vd-red-5); }\n.vd-bg-red-6 { background-color: var(--vd-red-6); }\n.vd-bg-red-7 { background-color: var(--vd-red-7); }\n.vd-bg-red-8 { background-color: var(--vd-red-8); }\n.vd-bg-red-9 { background-color: var(--vd-red-9); }\n\n.vd-text-red-0 { color: var(--vd-red-0); }\n.vd-text-red-1 { color: var(--vd-red-1); }\n.vd-text-red-2 { color: var(--vd-red-2); }\n.vd-text-red-3 { color: var(--vd-red-3); }\n.vd-text-red-4 { color: var(--vd-red-4); }\n.vd-text-red-5 { color: var(--vd-red-5); }\n.vd-text-red-6 { color: var(--vd-red-6); }\n.vd-text-red-7 { color: var(--vd-red-7); }\n.vd-text-red-8 { color: var(--vd-red-8); }\n.vd-text-red-9 { color: var(--vd-red-9); }\n\n/* ═══════════════════════════════════════════════════════════════════════════\n * ORANGE\n * ═══════════════════════════════════════════════════════════════════════════ */\n\n.vd-bg-orange-0 { background-color: var(--vd-orange-0); }\n.vd-bg-orange-1 { background-color: var(--vd-orange-1); }\n.vd-bg-orange-2 { background-color: var(--vd-orange-2); }\n.vd-bg-orange-3 { background-color: var(--vd-orange-3); }\n.vd-bg-orange-4 { background-color: var(--vd-orange-4); }\n.vd-bg-orange-5 { background-color: var(--vd-orange-5); }\n.vd-bg-orange-6 { background-color: var(--vd-orange-6); }\n.vd-bg-orange-7 { background-color: var(--vd-orange-7); }\n.vd-bg-orange-8 { background-color: var(--vd-orange-8); }\n.vd-bg-orange-9 { background-color: var(--vd-orange-9); }\n\n.vd-text-orange-0 { color: var(--vd-orange-0); }\n.vd-text-orange-1 { color: var(--vd-orange-1); }\n.vd-text-orange-2 { color: var(--vd-orange-2); }\n.vd-text-orange-3 { color: var(--vd-orange-3); }\n.vd-text-orange-4 { color: var(--vd-orange-4); }\n.vd-text-orange-5 { color: var(--vd-orange-5); }\n.vd-text-orange-6 { color: var(--vd-orange-6); }\n.vd-text-orange-7 { color: var(--vd-orange-7); }\n.vd-text-orange-8 { color: var(--vd-orange-8); }\n.vd-text-orange-9 { color: var(--vd-orange-9); }\n\n/* ═══════════════════════════════════════════════════════════════════════════\n * YELLOW\n * ═══════════════════════════════════════════════════════════════════════════ */\n\n.vd-bg-yellow-0 { background-color: var(--vd-yellow-0); }\n.vd-bg-yellow-1 { background-color: var(--vd-yellow-1); }\n.vd-bg-yellow-2 { background-color: var(--vd-yellow-2); }\n.vd-bg-yellow-3 { background-color: var(--vd-yellow-3); }\n.vd-bg-yellow-4 { background-color: var(--vd-yellow-4); }\n.vd-bg-yellow-5 { background-color: var(--vd-yellow-5); }\n.vd-bg-yellow-6 { background-color: var(--vd-yellow-6); }\n.vd-bg-yellow-7 { background-color: var(--vd-yellow-7); }\n.vd-bg-yellow-8 { background-color: var(--vd-yellow-8); }\n.vd-bg-yellow-9 { background-color: var(--vd-yellow-9); }\n\n.vd-text-yellow-0 { color: var(--vd-yellow-0); }\n.vd-text-yellow-1 { color: var(--vd-yellow-1); }\n.vd-text-yellow-2 { color: var(--vd-yellow-2); }\n.vd-text-yellow-3 { color: var(--vd-yellow-3); }\n.vd-text-yellow-4 { color: var(--vd-yellow-4); }\n.vd-text-yellow-5 { color: var(--vd-yellow-5); }\n.vd-text-yellow-6 { color: var(--vd-yellow-6); }\n.vd-text-yellow-7 { color: var(--vd-yellow-7); }\n.vd-text-yellow-8 { color: var(--vd-yellow-8); }\n.vd-text-yellow-9 { color: var(--vd-yellow-9); }\n\n/* ═══════════════════════════════════════════════════════════════════════════\n * LIME\n * ═══════════════════════════════════════════════════════════════════════════ */\n\n.vd-bg-lime-0 { background-color: var(--vd-lime-0); }\n.vd-bg-lime-1 { background-color: var(--vd-lime-1); }\n.vd-bg-lime-2 { background-color: var(--vd-lime-2); }\n.vd-bg-lime-3 { background-color: var(--vd-lime-3); }\n.vd-bg-lime-4 { background-color: var(--vd-lime-4); }\n.vd-bg-lime-5 { background-color: var(--vd-lime-5); }\n.vd-bg-lime-6 { background-color: var(--vd-lime-6); }\n.vd-bg-lime-7 { background-color: var(--vd-lime-7); }\n.vd-bg-lime-8 { background-color: var(--vd-lime-8); }\n.vd-bg-lime-9 { background-color: var(--vd-lime-9); }\n\n.vd-text-lime-0 { color: var(--vd-lime-0); }\n.vd-text-lime-1 { color: var(--vd-lime-1); }\n.vd-text-lime-2 { color: var(--vd-lime-2); }\n.vd-text-lime-3 { color: var(--vd-lime-3); }\n.vd-text-lime-4 { color: var(--vd-lime-4); }\n.vd-text-lime-5 { color: var(--vd-lime-5); }\n.vd-text-lime-6 { color: var(--vd-lime-6); }\n.vd-text-lime-7 { color: var(--vd-lime-7); }\n.vd-text-lime-8 { color: var(--vd-lime-8); }\n.vd-text-lime-9 { color: var(--vd-lime-9); }\n\n/* ═══════════════════════════════════════════════════════════════════════════\n * GREEN\n * ═══════════════════════════════════════════════════════════════════════════ */\n\n.vd-bg-green-0 { background-color: var(--vd-green-0); }\n.vd-bg-green-1 { background-color: var(--vd-green-1); }\n.vd-bg-green-2 { background-color: var(--vd-green-2); }\n.vd-bg-green-3 { background-color: var(--vd-green-3); }\n.vd-bg-green-4 { background-color: var(--vd-green-4); }\n.vd-bg-green-5 { background-color: var(--vd-green-5); }\n.vd-bg-green-6 { background-color: var(--vd-green-6); }\n.vd-bg-green-7 { background-color: var(--vd-green-7); }\n.vd-bg-green-8 { background-color: var(--vd-green-8); }\n.vd-bg-green-9 { background-color: var(--vd-green-9); }\n\n.vd-text-green-0 { color: var(--vd-green-0); }\n.vd-text-green-1 { color: var(--vd-green-1); }\n.vd-text-green-2 { color: var(--vd-green-2); }\n.vd-text-green-3 { color: var(--vd-green-3); }\n.vd-text-green-4 { color: var(--vd-green-4); }\n.vd-text-green-5 { color: var(--vd-green-5); }\n.vd-text-green-6 { color: var(--vd-green-6); }\n.vd-text-green-7 { color: var(--vd-green-7); }\n.vd-text-green-8 { color: var(--vd-green-8); }\n.vd-text-green-9 { color: var(--vd-green-9); }\n\n/* ═══════════════════════════════════════════════════════════════════════════\n * TEAL\n * ═══════════════════════════════════════════════════════════════════════════ */\n\n.vd-bg-teal-0 { background-color: var(--vd-teal-0); }\n.vd-bg-teal-1 { background-color: var(--vd-teal-1); }\n.vd-bg-teal-2 { background-color: var(--vd-teal-2); }\n.vd-bg-teal-3 { background-color: var(--vd-teal-3); }\n.vd-bg-teal-4 { background-color: var(--vd-teal-4); }\n.vd-bg-teal-5 { background-color: var(--vd-teal-5); }\n.vd-bg-teal-6 { background-color: var(--vd-teal-6); }\n.vd-bg-teal-7 { background-color: var(--vd-teal-7); }\n.vd-bg-teal-8 { background-color: var(--vd-teal-8); }\n.vd-bg-teal-9 { background-color: var(--vd-teal-9); }\n\n.vd-text-teal-0 { color: var(--vd-teal-0); }\n.vd-text-teal-1 { color: var(--vd-teal-1); }\n.vd-text-teal-2 { color: var(--vd-teal-2); }\n.vd-text-teal-3 { color: var(--vd-teal-3); }\n.vd-text-teal-4 { color: var(--vd-teal-4); }\n.vd-text-teal-5 { color: var(--vd-teal-5); }\n.vd-text-teal-6 { color: var(--vd-teal-6); }\n.vd-text-teal-7 { color: var(--vd-teal-7); }\n.vd-text-teal-8 { color: var(--vd-teal-8); }\n.vd-text-teal-9 { color: var(--vd-teal-9); }\n\n/* ═══════════════════════════════════════════════════════════════════════════\n * CYAN\n * ═══════════════════════════════════════════════════════════════════════════ */\n\n.vd-bg-cyan-0 { background-color: var(--vd-cyan-0); }\n.vd-bg-cyan-1 { background-color: var(--vd-cyan-1); }\n.vd-bg-cyan-2 { background-color: var(--vd-cyan-2); }\n.vd-bg-cyan-3 { background-color: var(--vd-cyan-3); }\n.vd-bg-cyan-4 { background-color: var(--vd-cyan-4); }\n.vd-bg-cyan-5 { background-color: var(--vd-cyan-5); }\n.vd-bg-cyan-6 { background-color: var(--vd-cyan-6); }\n.vd-bg-cyan-7 { background-color: var(--vd-cyan-7); }\n.vd-bg-cyan-8 { background-color: var(--vd-cyan-8); }\n.vd-bg-cyan-9 { background-color: var(--vd-cyan-9); }\n\n.vd-text-cyan-0 { color: var(--vd-cyan-0); }\n.vd-text-cyan-1 { color: var(--vd-cyan-1); }\n.vd-text-cyan-2 { color: var(--vd-cyan-2); }\n.vd-text-cyan-3 { color: var(--vd-cyan-3); }\n.vd-text-cyan-4 { color: var(--vd-cyan-4); }\n.vd-text-cyan-5 { color: var(--vd-cyan-5); }\n.vd-text-cyan-6 { color: var(--vd-cyan-6); }\n.vd-text-cyan-7 { color: var(--vd-cyan-7); }\n.vd-text-cyan-8 { color: var(--vd-cyan-8); }\n.vd-text-cyan-9 { color: var(--vd-cyan-9); }\n\n/* ═══════════════════════════════════════════════════════════════════════════\n * BLUE\n * ═══════════════════════════════════════════════════════════════════════════ */\n\n.vd-bg-blue-0 { background-color: var(--vd-blue-0); }\n.vd-bg-blue-1 { background-color: var(--vd-blue-1); }\n.vd-bg-blue-2 { background-color: var(--vd-blue-2); }\n.vd-bg-blue-3 { background-color: var(--vd-blue-3); }\n.vd-bg-blue-4 { background-color: var(--vd-blue-4); }\n.vd-bg-blue-5 { background-color: var(--vd-blue-5); }\n.vd-bg-blue-6 { background-color: var(--vd-blue-6); }\n.vd-bg-blue-7 { background-color: var(--vd-blue-7); }\n.vd-bg-blue-8 { background-color: var(--vd-blue-8); }\n.vd-bg-blue-9 { background-color: var(--vd-blue-9); }\n\n.vd-text-blue-0 { color: var(--vd-blue-0); }\n.vd-text-blue-1 { color: var(--vd-blue-1); }\n.vd-text-blue-2 { color: var(--vd-blue-2); }\n.vd-text-blue-3 { color: var(--vd-blue-3); }\n.vd-text-blue-4 { color: var(--vd-blue-4); }\n.vd-text-blue-5 { color: var(--vd-blue-5); }\n.vd-text-blue-6 { color: var(--vd-blue-6); }\n.vd-text-blue-7 { color: var(--vd-blue-7); }\n.vd-text-blue-8 { color: var(--vd-blue-8); }\n.vd-text-blue-9 { color: var(--vd-blue-9); }\n\n/* ═══════════════════════════════════════════════════════════════════════════\n * INDIGO\n * ═══════════════════════════════════════════════════════════════════════════ */\n\n.vd-bg-indigo-0 { background-color: var(--vd-indigo-0); }\n.vd-bg-indigo-1 { background-color: var(--vd-indigo-1); }\n.vd-bg-indigo-2 { background-color: var(--vd-indigo-2); }\n.vd-bg-indigo-3 { background-color: var(--vd-indigo-3); }\n.vd-bg-indigo-4 { background-color: var(--vd-indigo-4); }\n.vd-bg-indigo-5 { background-color: var(--vd-indigo-5); }\n.vd-bg-indigo-6 { background-color: var(--vd-indigo-6); }\n.vd-bg-indigo-7 { background-color: var(--vd-indigo-7); }\n.vd-bg-indigo-8 { background-color: var(--vd-indigo-8); }\n.vd-bg-indigo-9 { background-color: var(--vd-indigo-9); }\n\n.vd-text-indigo-0 { color: var(--vd-indigo-0); }\n.vd-text-indigo-1 { color: var(--vd-indigo-1); }\n.vd-text-indigo-2 { color: var(--vd-indigo-2); }\n.vd-text-indigo-3 { color: var(--vd-indigo-3); }\n.vd-text-indigo-4 { color: var(--vd-indigo-4); }\n.vd-text-indigo-5 { color: var(--vd-indigo-5); }\n.vd-text-indigo-6 { color: var(--vd-indigo-6); }\n.vd-text-indigo-7 { color: var(--vd-indigo-7); }\n.vd-text-indigo-8 { color: var(--vd-indigo-8); }\n.vd-text-indigo-9 { color: var(--vd-indigo-9); }\n\n/* ═══════════════════════════════════════════════════════════════════════════\n * VIOLET\n * ═══════════════════════════════════════════════════════════════════════════ */\n\n.vd-bg-violet-0 { background-color: var(--vd-violet-0); }\n.vd-bg-violet-1 { background-color: var(--vd-violet-1); }\n.vd-bg-violet-2 { background-color: var(--vd-violet-2); }\n.vd-bg-violet-3 { background-color: var(--vd-violet-3); }\n.vd-bg-violet-4 { background-color: var(--vd-violet-4); }\n.vd-bg-violet-5 { background-color: var(--vd-violet-5); }\n.vd-bg-violet-6 { background-color: var(--vd-violet-6); }\n.vd-bg-violet-7 { background-color: var(--vd-violet-7); }\n.vd-bg-violet-8 { background-color: var(--vd-violet-8); }\n.vd-bg-violet-9 { background-color: var(--vd-violet-9); }\n\n.vd-text-violet-0 { color: var(--vd-violet-0); }\n.vd-text-violet-1 { color: var(--vd-violet-1); }\n.vd-text-violet-2 { color: var(--vd-violet-2); }\n.vd-text-violet-3 { color: var(--vd-violet-3); }\n.vd-text-violet-4 { color: var(--vd-violet-4); }\n.vd-text-violet-5 { color: var(--vd-violet-5); }\n.vd-text-violet-6 { color: var(--vd-violet-6); }\n.vd-text-violet-7 { color: var(--vd-violet-7); }\n.vd-text-violet-8 { color: var(--vd-violet-8); }\n.vd-text-violet-9 { color: var(--vd-violet-9); }\n\n/* ═══════════════════════════════════════════════════════════════════════════\n * GRAPE\n * ═══════════════════════════════════════════════════════════════════════════ */\n\n.vd-bg-grape-0 { background-color: var(--vd-grape-0); }\n.vd-bg-grape-1 { background-color: var(--vd-grape-1); }\n.vd-bg-grape-2 { background-color: var(--vd-grape-2); }\n.vd-bg-grape-3 { background-color: var(--vd-grape-3); }\n.vd-bg-grape-4 { background-color: var(--vd-grape-4); }\n.vd-bg-grape-5 { background-color: var(--vd-grape-5); }\n.vd-bg-grape-6 { background-color: var(--vd-grape-6); }\n.vd-bg-grape-7 { background-color: var(--vd-grape-7); }\n.vd-bg-grape-8 { background-color: var(--vd-grape-8); }\n.vd-bg-grape-9 { background-color: var(--vd-grape-9); }\n\n.vd-text-grape-0 { color: var(--vd-grape-0); }\n.vd-text-grape-1 { color: var(--vd-grape-1); }\n.vd-text-grape-2 { color: var(--vd-grape-2); }\n.vd-text-grape-3 { color: var(--vd-grape-3); }\n.vd-text-grape-4 { color: var(--vd-grape-4); }\n.vd-text-grape-5 { color: var(--vd-grape-5); }\n.vd-text-grape-6 { color: var(--vd-grape-6); }\n.vd-text-grape-7 { color: var(--vd-grape-7); }\n.vd-text-grape-8 { color: var(--vd-grape-8); }\n.vd-text-grape-9 { color: var(--vd-grape-9); }\n\n/* ═══════════════════════════════════════════════════════════════════════════\n * PINK\n * ═══════════════════════════════════════════════════════════════════════════ */\n\n.vd-bg-pink-0 { background-color: var(--vd-pink-0); }\n.vd-bg-pink-1 { background-color: var(--vd-pink-1); }\n.vd-bg-pink-2 { background-color: var(--vd-pink-2); }\n.vd-bg-pink-3 { background-color: var(--vd-pink-3); }\n.vd-bg-pink-4 { background-color: var(--vd-pink-4); }\n.vd-bg-pink-5 { background-color: var(--vd-pink-5); }\n.vd-bg-pink-6 { background-color: var(--vd-pink-6); }\n.vd-bg-pink-7 { background-color: var(--vd-pink-7); }\n.vd-bg-pink-8 { background-color: var(--vd-pink-8); }\n.vd-bg-pink-9 { background-color: var(--vd-pink-9); }\n\n.vd-text-pink-0 { color: var(--vd-pink-0); }\n.vd-text-pink-1 { color: var(--vd-pink-1); }\n.vd-text-pink-2 { color: var(--vd-pink-2); }\n.vd-text-pink-3 { color: var(--vd-pink-3); }\n.vd-text-pink-4 { color: var(--vd-pink-4); }\n.vd-text-pink-5 { color: var(--vd-pink-5); }\n.vd-text-pink-6 { color: var(--vd-pink-6); }\n.vd-text-pink-7 { color: var(--vd-pink-7); }\n.vd-text-pink-8 { color: var(--vd-pink-8); }\n.vd-text-pink-9 { color: var(--vd-pink-9); }\n\n/* ═══════════════════════════════════════════════════════════════════════════\n * GRAY\n * ═══════════════════════════════════════════════════════════════════════════ */\n\n.vd-bg-gray-0 { background-color: var(--vd-gray-0); }\n.vd-bg-gray-1 { background-color: var(--vd-gray-1); }\n.vd-bg-gray-2 { background-color: var(--vd-gray-2); }\n.vd-bg-gray-3 { background-color: var(--vd-gray-3); }\n.vd-bg-gray-4 { background-color: var(--vd-gray-4); }\n.vd-bg-gray-5 { background-color: var(--vd-gray-5); }\n.vd-bg-gray-6 { background-color: var(--vd-gray-6); }\n.vd-bg-gray-7 { background-color: var(--vd-gray-7); }\n.vd-bg-gray-8 { background-color: var(--vd-gray-8); }\n.vd-bg-gray-9 { background-color: var(--vd-gray-9); }\n\n.vd-text-gray-0 { color: var(--vd-gray-0); }\n.vd-text-gray-1 { color: var(--vd-gray-1); }\n.vd-text-gray-2 { color: var(--vd-gray-2); }\n.vd-text-gray-3 { color: var(--vd-gray-3); }\n.vd-text-gray-4 { color: var(--vd-gray-4); }\n.vd-text-gray-5 { color: var(--vd-gray-5); }\n.vd-text-gray-6 { color: var(--vd-gray-6); }\n.vd-text-gray-7 { color: var(--vd-gray-7); }\n.vd-text-gray-8 { color: var(--vd-gray-8); }\n.vd-text-gray-9 { color: var(--vd-gray-9); }\n\n\n/* Layer 4: Components */\n/**\n * Vanduo Framework - Buttons\n * Button component with variants, sizes, and states\n */\n\n:root {\n  /* Button Padding (Fibonacci pairs: x/y ratio ~ phi)\n   * sm:  13px/8px  = 1.625 ~ phi\n   * base: 21px/13px = 1.615 ~ phi\n   * lg:  34px/21px = 1.619 ~ phi */\n  --vd-btn-padding-x-sm: 0.8125rem;\n  /* 13px - fib */\n  --vd-btn-padding-y-sm: 0.5rem;\n  /* 8px  - fib */\n  --vd-btn-padding-x: 1.3125rem;\n  /* 21px - fib */\n  --vd-btn-padding-y: 0.8125rem;\n  /* 13px - fib */\n  --vd-btn-padding-x-lg: 2.125rem;\n  /* 34px - fib */\n  --vd-btn-padding-y-lg: 1.3125rem;\n  /* 21px - fib */\n\n  /* Button Font Sizes */\n  --vd-btn-font-size-sm: var(--vd-font-size-sm);\n  --vd-btn-font-size: var(--vd-font-size-base);\n  --vd-btn-font-size-lg: var(--vd-font-size-lg);\n\n  /* Button Border Radius (Fibonacci) */\n  --vd-btn-border-radius: var(--vd-radius-fib-5);\n  /* 5px */\n  --vd-btn-border-radius-sm: var(--vd-radius-fib-3);\n  /* 3px */\n  --vd-btn-border-radius-lg: var(--vd-radius-fib-8);\n  /* 8px */\n\n  /* Button Transitions */\n  --vd-btn-transition: all 0.2s ease-in-out;\n}\n\n/* Base Button */\n.vd-btn {\n  display: inline-block;\n  padding: var(--vd-btn-padding-y) var(--vd-btn-padding-x);\n  font-family: var(--vd-font-family-sans);\n  font-size: var(--vd-btn-font-size);\n  font-weight: var(--vd-font-weight-medium);\n  line-height: var(--vd-line-height-normal);\n  text-align: center;\n  text-decoration: none;\n  vertical-align: middle;\n  cursor: pointer;\n  user-select: none;\n  border: 1px solid transparent;\n  border-radius: var(--vd-btn-border-radius);\n  transition: var(--vd-btn-transition);\n  background-color: transparent;\n  color: var(--vd-text-primary);\n  margin-bottom: 0.5rem;\n}\n\n/* Button spacing when adjacent */\n.vd-btn+.vd-btn {\n  margin-left: 0.5rem;\n}\n\n/* Reset margin for vertical groups */\n.vd-btn-group-vertical>.vd-btn+.vd-btn {\n  margin-left: 0;\n  margin-top: -1px;\n}\n\n/* Reset bottom margin in flush contexts */\n.vd-modal-footer .vd-btn,\n.vd-card-footer .vd-btn {\n  margin-bottom: 0;\n}\n\n.vd-btn:focus-visible {\n  outline: 2px solid var(--vd-color-primary);\n  outline-offset: 2px;\n}\n\n.vd-btn:disabled,\n.vd-btn.disabled,\n.vd-btn.is-disabled {\n  opacity: 0.6;\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n/* Button Variants - Primary */\n.vd-btn-primary {\n  background-color: var(--vd-color-primary);\n  border-color: var(--vd-color-primary);\n  color: var(--vd-color-white);\n}\n\n.vd-btn-primary:hover:not(:disabled):not(.disabled):not(.is-disabled) {\n  background-color: var(--vd-color-primary-dark);\n  border-color: var(--vd-color-primary-dark);\n  color: var(--vd-color-white);\n}\n\n.vd-btn-primary:active:not(:disabled):not(.disabled):not(.is-disabled) {\n  background-color: var(--vd-color-primary-dark);\n  border-color: var(--vd-color-primary-dark);\n  transform: translateY(1px);\n}\n\n/* Button Variants - Secondary */\n.vd-btn-secondary {\n  background-color: var(--vd-color-secondary);\n  border-color: var(--vd-color-secondary);\n  color: var(--vd-color-white);\n}\n\n.vd-btn-secondary:hover:not(:disabled):not(.disabled):not(.is-disabled) {\n  background-color: var(--vd-color-secondary-dark);\n  border-color: var(--vd-color-secondary-dark);\n  color: var(--vd-color-white);\n}\n\n.vd-btn-secondary:active:not(:disabled):not(.disabled):not(.is-disabled) {\n  background-color: var(--vd-color-secondary-dark);\n  border-color: var(--vd-color-secondary-dark);\n  transform: translateY(1px);\n}\n\n/* Button Variants - Success */\n.vd-btn-success {\n  background-color: var(--vd-color-success);\n  border-color: var(--vd-color-success);\n  color: var(--vd-color-white);\n}\n\n.vd-btn-success:hover:not(:disabled):not(.disabled):not(.is-disabled) {\n  background-color: var(--vd-color-success-dark);\n  border-color: var(--vd-color-success-dark);\n  color: var(--vd-color-white);\n}\n\n.vd-btn-success:active:not(:disabled):not(.disabled):not(.is-disabled) {\n  background-color: var(--vd-color-success-dark);\n  border-color: var(--vd-color-success-dark);\n  transform: translateY(1px);\n}\n\n/* Button Variants - Warning */\n.vd-btn-warning {\n  background-color: var(--vd-color-warning);\n  border-color: var(--vd-color-warning);\n  color: var(--vd-color-black);\n}\n\n.vd-btn-warning:hover:not(:disabled):not(.disabled):not(.is-disabled) {\n  background-color: var(--vd-color-warning-dark);\n  border-color: var(--vd-color-warning-dark);\n  color: var(--vd-color-black);\n}\n\n.vd-btn-warning:active:not(:disabled):not(.disabled):not(.is-disabled) {\n  background-color: var(--vd-color-warning-dark);\n  border-color: var(--vd-color-warning-dark);\n  transform: translateY(1px);\n}\n\n/* Button Variants - Error */\n.vd-btn-error {\n  background-color: var(--vd-color-error);\n  border-color: var(--vd-color-error);\n  color: var(--vd-color-white);\n}\n\n.vd-btn-error:hover:not(:disabled):not(.disabled):not(.is-disabled) {\n  background-color: var(--vd-color-error-dark);\n  border-color: var(--vd-color-error-dark);\n  color: var(--vd-color-white);\n}\n\n.vd-btn-error:active:not(:disabled):not(.disabled):not(.is-disabled) {\n  background-color: var(--vd-color-error-dark);\n  border-color: var(--vd-color-error-dark);\n  transform: translateY(1px);\n}\n\n/* Button Variants - Info */\n.vd-btn-info {\n  background-color: var(--vd-color-info);\n  border-color: var(--vd-color-info);\n  color: var(--vd-color-white);\n}\n\n.vd-btn-info:hover:not(:disabled):not(.disabled):not(.is-disabled) {\n  background-color: var(--vd-color-info-dark);\n  border-color: var(--vd-color-info-dark);\n  color: var(--vd-color-white);\n}\n\n.vd-btn-info:active:not(:disabled):not(.disabled):not(.is-disabled) {\n  background-color: var(--vd-color-info-dark);\n  border-color: var(--vd-color-info-dark);\n  transform: translateY(1px);\n}\n\n/* Button Variants - Outline */\n.vd-btn-outline {\n  background-color: transparent;\n  border-color: var(--vd-color-primary);\n  color: var(--vd-color-primary);\n}\n\n.vd-btn-outline:hover:not(:disabled):not(.disabled):not(.is-disabled) {\n  background-color: var(--vd-color-primary);\n  border-color: var(--vd-color-primary);\n  color: var(--vd-color-white);\n}\n\n.vd-btn-outline-primary {\n  background-color: transparent;\n  border-color: var(--vd-color-primary);\n  color: var(--vd-color-primary);\n}\n\n.vd-btn-outline-primary:hover:not(:disabled):not(.disabled):not(.is-disabled) {\n  background-color: var(--vd-color-primary);\n  border-color: var(--vd-color-primary);\n  color: var(--vd-color-white);\n}\n\n.vd-btn-outline-secondary {\n  background-color: transparent;\n  border-color: var(--vd-color-secondary);\n  color: var(--vd-color-secondary);\n}\n\n.vd-btn-outline-secondary:hover:not(:disabled):not(.disabled):not(.is-disabled) {\n  background-color: var(--vd-color-secondary);\n  border-color: var(--vd-color-secondary);\n  color: var(--vd-color-white);\n}\n\n.vd-btn-outline-success {\n  background-color: transparent;\n  border-color: var(--vd-color-success);\n  color: var(--vd-color-success);\n}\n\n.vd-btn-outline-success:hover:not(:disabled):not(.disabled):not(.is-disabled) {\n  background-color: var(--vd-color-success);\n  border-color: var(--vd-color-success);\n  color: var(--vd-color-white);\n}\n\n.vd-btn-outline-warning {\n  background-color: transparent;\n  border-color: var(--vd-color-warning);\n  color: var(--vd-color-warning);\n}\n\n.vd-btn-outline-warning:hover:not(:disabled):not(.disabled):not(.is-disabled) {\n  background-color: var(--vd-color-warning);\n  border-color: var(--vd-color-warning);\n  color: var(--vd-color-black);\n}\n\n.vd-btn-outline-error {\n  background-color: transparent;\n  border-color: var(--vd-color-error);\n  color: var(--vd-color-error);\n}\n\n.vd-btn-outline-error:hover:not(:disabled):not(.disabled):not(.is-disabled) {\n  background-color: var(--vd-color-error);\n  border-color: var(--vd-color-error);\n  color: var(--vd-color-white);\n}\n\n.vd-btn-outline-info {\n  background-color: transparent;\n  border-color: var(--vd-color-info);\n  color: var(--vd-color-info);\n}\n\n.vd-btn-outline-info:hover:not(:disabled):not(.disabled):not(.is-disabled) {\n  background-color: var(--vd-color-info);\n  border-color: var(--vd-color-info);\n  color: var(--vd-color-white);\n}\n\n/* Button Variants - Ghost/Text */\n.vd-btn-ghost {\n  background-color: transparent;\n  border-color: transparent;\n  color: var(--vd-color-primary);\n}\n\n.vd-btn-ghost:hover:not(:disabled):not(.disabled):not(.is-disabled) {\n  background-color: var(--vd-color-primary-alpha-10);\n  color: var(--vd-color-primary-dark);\n}\n\n.vd-btn-ghost:active:not(:disabled):not(.disabled):not(.is-disabled) {\n  background-color: var(--vd-color-primary-alpha-20);\n  transform: translateY(1px);\n}\n\n/* Ghost Button Variants */\n.vd-btn-ghost-primary {\n  background-color: transparent;\n  border-color: transparent;\n  color: var(--vd-color-primary);\n}\n\n.vd-btn-ghost-primary:hover:not(:disabled):not(.disabled):not(.is-disabled) {\n  background-color: var(--vd-color-primary-alpha-10);\n  color: var(--vd-color-primary-dark);\n}\n\n.vd-btn-ghost-primary:active:not(:disabled):not(.disabled):not(.is-disabled) {\n  background-color: var(--vd-color-primary-alpha-20);\n  color: var(--vd-color-primary-active);\n}\n\n.vd-btn-ghost-secondary {\n  background-color: transparent;\n  border-color: transparent;\n  color: var(--vd-color-secondary);\n}\n\n.vd-btn-ghost-secondary:hover:not(:disabled):not(.disabled):not(.is-disabled) {\n  background-color: var(--vd-color-secondary-alpha-10);\n  color: var(--vd-color-secondary-dark);\n}\n\n.vd-btn-ghost-secondary:active:not(:disabled):not(.disabled):not(.is-disabled) {\n  background-color: var(--vd-color-secondary-alpha-20);\n  color: var(--vd-color-secondary-active);\n}\n\n.vd-btn-ghost-success {\n  background-color: transparent;\n  border-color: transparent;\n  color: var(--vd-color-success);\n}\n\n.vd-btn-ghost-success:hover:not(:disabled):not(.disabled):not(.is-disabled) {\n  background-color: var(--vd-color-success-alpha-10);\n  color: var(--vd-color-success-dark);\n}\n\n.vd-btn-ghost-success:active:not(:disabled):not(.disabled):not(.is-disabled) {\n  background-color: var(--vd-color-success-alpha-20);\n  color: var(--vd-color-success-active);\n}\n\n.vd-btn-ghost-warning {\n  background-color: transparent;\n  border-color: transparent;\n  color: var(--vd-color-warning);\n}\n\n.vd-btn-ghost-warning:hover:not(:disabled):not(.disabled):not(.is-disabled) {\n  background-color: var(--vd-color-warning-alpha-10);\n  color: var(--vd-color-warning-dark);\n}\n\n.vd-btn-ghost-warning:active:not(:disabled):not(.disabled):not(.is-disabled) {\n  background-color: var(--vd-color-warning-alpha-20);\n  color: var(--vd-color-warning-active);\n}\n\n.vd-btn-ghost-error {\n  background-color: transparent;\n  border-color: transparent;\n  color: var(--vd-color-error);\n}\n\n.vd-btn-ghost-error:hover:not(:disabled):not(.disabled):not(.is-disabled) {\n  background-color: var(--vd-color-error-alpha-10);\n  color: var(--vd-color-error-dark);\n}\n\n.vd-btn-ghost-error:active:not(:disabled):not(.disabled):not(.is-disabled) {\n  background-color: var(--vd-color-error-alpha-20);\n  color: var(--vd-color-error-active);\n}\n\n.vd-btn-ghost-info {\n  background-color: transparent;\n  border-color: transparent;\n  color: var(--vd-color-info);\n}\n\n.vd-btn-ghost-info:hover:not(:disabled):not(.disabled):not(.is-disabled) {\n  background-color: var(--vd-color-info-alpha-10);\n  color: var(--vd-color-info-dark);\n}\n\n.vd-btn-ghost-info:active:not(:disabled):not(.disabled):not(.is-disabled) {\n  background-color: var(--vd-color-info-alpha-20);\n  color: var(--vd-color-info-active);\n}\n\n/* Ghost Button with Border (Subtle) */\n.vd-btn-ghost-subtle {\n  background-color: transparent;\n  border: 1px solid var(--vd-border-color);\n  color: var(--vd-text-secondary);\n}\n\n.vd-btn-ghost-subtle:hover:not(:disabled):not(.disabled):not(.is-disabled) {\n  background-color: var(--vd-gray-0);\n  border-color: var(--vd-gray-4);\n  color: var(--vd-text-primary);\n}\n\n.vd-btn-ghost-subtle:active:not(:disabled):not(.disabled):not(.is-disabled) {\n  background-color: var(--vd-gray-1);\n  border-color: var(--vd-gray-5);\n}\n\n/* Button Sizes - Small */\n.vd-btn-sm {\n  padding: var(--vd-btn-padding-y-sm) var(--vd-btn-padding-x-sm);\n  font-size: var(--vd-btn-font-size-sm);\n  border-radius: var(--vd-btn-border-radius-sm);\n}\n\n/* Button Sizes - Large */\n.vd-btn-lg {\n  padding: var(--vd-btn-padding-y-lg) var(--vd-btn-padding-x-lg);\n  font-size: var(--vd-btn-font-size-lg);\n  border-radius: var(--vd-btn-border-radius-lg);\n}\n\n/* Full Width Button */\n.vd-btn-block,\n.vd-btn-full {\n  display: block;\n  width: 100%;\n}\n\n/* Icon Button Support (Fibonacci squares) */\n.vd-btn-icon {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  padding: var(--vd-btn-padding-y);\n  width: auto;\n  min-width: 2.125rem;\n  /* 34px - fib */\n  height: 2.125rem;\n  /* 34px - fib */\n}\n\n.vd-btn-icon.vd-btn-sm {\n  min-width: 2.125rem;\n  /* 34px - fib */\n  height: 2.125rem;\n  /* 34px - fib */\n  padding: var(--vd-btn-padding-y-sm);\n}\n\n.vd-btn-icon.vd-btn-lg {\n  min-width: 3.4375rem;\n  /* 55px - fib */\n  height: 3.4375rem;\n  /* 55px - fib */\n  padding: var(--vd-btn-padding-y-lg);\n}\n\n/* Button with Icon Spacing */\n.vd-btn>*+* {\n  margin-left: 0.5rem;\n}\n\n.vd-btn>*:first-child {\n  margin-left: 0;\n}\n\n/* Link as Button */\na.vd-btn {\n  text-decoration: none;\n}\n\na.vd-btn:hover {\n  text-decoration: none;\n}\n\n/* Loading State */\n.vd-btn.is-loading {\n  position: relative;\n  color: transparent;\n  pointer-events: none;\n}\n\n.vd-btn.is-loading::after {\n  content: '';\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  width: 1em;\n  height: 1em;\n  margin: -0.5em 0 0 -0.5em;\n  border: 2px solid currentColor;\n  border-right-color: transparent;\n  border-radius: 50%;\n  animation: btn-spinner 0.6s linear infinite;\n}\n\n.vd-btn-primary.is-loading::after,\n.vd-btn-secondary.is-loading::after,\n.vd-btn-success.is-loading::after,\n.vd-btn-error.is-loading::after,\n.vd-btn-info.is-loading::after {\n  border-color: var(--vd-color-white);\n  border-right-color: transparent;\n}\n\n.vd-btn-warning.is-loading::after {\n  border-color: var(--vd-color-black);\n  border-right-color: transparent;\n}\n\n@keyframes btn-spinner {\n  to {\n    transform: rotate(360deg);\n  }\n}\n/**\n * Vanduo Framework - Forms\n * Form components: inputs, textareas, labels, and validation\n */\n\n/* stylelint-disable-next-line no-duplicate-selectors -- control-specific tokens stay grouped near their rules. */\n:root {\n  /* Input Padding (Fibonacci pairs: x/y ratio ~ phi)\n   * sm:  8px/5px  = 1.6 ~ phi\n   * base: 13px/8px = 1.625 ~ phi\n   * lg:  21px/13px = 1.615 ~ phi */\n  --vd-input-padding-x-sm: 0.5rem;\n  /* 8px  - fib */\n  --vd-input-padding-y-sm: 0.3125rem;\n  /* 5px  - fib */\n  --vd-input-padding-x: 0.8125rem;\n  /* 13px - fib */\n  --vd-input-padding-y: 0.5rem;\n  /* 8px  - fib */\n  --vd-input-padding-x-lg: 1.3125rem;\n  /* 21px - fib */\n  --vd-input-padding-y-lg: 0.8125rem;\n  /* 13px - fib */\n\n  /* Input Font Sizes */\n  --vd-input-font-size-sm: var(--vd-font-size-sm);\n  --vd-input-font-size: var(--vd-font-size-base);\n  --vd-input-font-size-lg: var(--vd-font-size-lg);\n\n  /* Input Border */\n  --vd-input-border-width: 1px;\n  --vd-input-border-color: var(--vd-border-color);\n  --vd-input-border-radius: var(--vd-btn-border-radius);\n  --vd-input-border-radius-sm: var(--vd-btn-border-radius-sm);\n  --vd-input-border-radius-lg: var(--vd-btn-border-radius-lg);\n\n  /* Input Background */\n  --vd-input-bg: var(--vd-color-white);\n  --vd-input-bg-disabled: var(--vd-bg-secondary);\n\n  /* Input Focus */\n  --vd-input-focus-border-color: var(--vd-color-primary);\n  --vd-input-focus-box-shadow: 0 0 0 3px var(--vd-color-primary-alpha-20);\n\n  /* Input Transitions */\n  --vd-input-transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;\n}\n\n/* Dark Theme Overrides */\n[data-theme=\"dark\"] {\n  --vd-input-bg: var(--vd-bg-secondary);\n  --vd-input-bg-disabled: var(--vd-bg-tertiary);\n}\n\n@media (prefers-color-scheme: dark) {\n  :root:not([data-theme]) {\n    --vd-input-bg: var(--vd-bg-secondary);\n    --vd-input-bg-disabled: var(--vd-bg-tertiary);\n  }\n}\n\n/* Base Input\n * The main bundle intentionally styles both `.vd-*` controls and native form\n * elements for full-page framework usage. Keep new raw element selectors in\n * reset/base layers; component-specific styling should prefer `.vd-*` hooks.\n */\n.vd-input,\ninput[type=\"text\"],\ninput[type=\"email\"],\ninput[type=\"password\"],\ninput[type=\"number\"],\ninput[type=\"tel\"],\ninput[type=\"url\"],\ninput[type=\"search\"],\ninput[type=\"date\"],\ninput[type=\"time\"],\ninput[type=\"datetime-local\"] {\n  display: block;\n  width: 100%;\n  padding: var(--vd-input-padding-y) var(--vd-input-padding-x);\n  font-family: var(--vd-font-family-sans);\n  font-size: var(--vd-input-font-size);\n  font-weight: var(--vd-font-weight-normal);\n  line-height: var(--vd-line-height-normal);\n  color: var(--vd-text-primary);\n  background-color: var(--vd-input-bg);\n  border: var(--vd-input-border-width) solid var(--vd-input-border-color);\n  border-radius: var(--vd-input-border-radius);\n  transition: var(--vd-input-transition);\n  appearance: none;\n}\n\n.vd-input:focus,\ninput[type=\"text\"]:focus,\ninput[type=\"email\"]:focus,\ninput[type=\"password\"]:focus,\ninput[type=\"number\"]:focus,\ninput[type=\"tel\"]:focus,\ninput[type=\"url\"]:focus,\ninput[type=\"search\"]:focus,\ninput[type=\"date\"]:focus,\ninput[type=\"time\"]:focus,\ninput[type=\"datetime-local\"]:focus {\n  outline: 0;\n  border-color: var(--vd-input-focus-border-color);\n  box-shadow: var(--vd-input-focus-box-shadow);\n}\n\n.vd-input::placeholder,\ninput::placeholder {\n  color: var(--vd-text-muted);\n  opacity: 1;\n}\n\n.vd-input:disabled,\ninput:disabled,\n.vd-input.disabled,\ninput.disabled {\n  background-color: var(--vd-input-bg-disabled);\n  opacity: 0.6;\n  cursor: not-allowed;\n}\n\n/* Textarea */\n.textarea,\ntextarea {\n  display: block;\n  width: 100%;\n  padding: var(--vd-input-padding-y) var(--vd-input-padding-x);\n  font-family: var(--vd-font-family-sans);\n  font-size: var(--vd-input-font-size);\n  font-weight: var(--vd-font-weight-normal);\n  line-height: var(--vd-line-height-normal);\n  color: var(--vd-text-primary);\n  background-color: var(--vd-input-bg);\n  border: var(--vd-input-border-width) solid var(--vd-input-border-color);\n  border-radius: var(--vd-input-border-radius);\n  transition: var(--vd-input-transition);\n  resize: vertical;\n  min-height: 100px;\n}\n\n.textarea:focus,\ntextarea:focus {\n  outline: 0;\n  border-color: var(--vd-input-focus-border-color);\n  box-shadow: var(--vd-input-focus-box-shadow);\n}\n\n.textarea::placeholder,\ntextarea::placeholder {\n  color: var(--vd-text-muted);\n  opacity: 1;\n}\n\n.textarea:disabled,\ntextarea:disabled,\n.textarea.disabled,\ntextarea.disabled {\n  background-color: var(--vd-input-bg-disabled);\n  opacity: 0.6;\n  cursor: not-allowed;\n}\n\n.textarea-no-resize,\ntextarea.no-resize {\n  resize: none;\n}\n\n/* Input Sizes - Small */\n.vd-input-sm,\ninput.vd-input-sm {\n  padding: var(--vd-input-padding-y-sm) var(--vd-input-padding-x-sm);\n  font-size: var(--vd-input-font-size-sm);\n  border-radius: var(--vd-input-border-radius-sm);\n}\n\n.textarea-sm,\ntextarea.textarea-sm {\n  padding: var(--vd-input-padding-y-sm) var(--vd-input-padding-x-sm);\n  font-size: var(--vd-input-font-size-sm);\n  border-radius: var(--vd-input-border-radius-sm);\n}\n\n/* Input Sizes - Large */\n.vd-input-lg,\ninput.vd-input-lg {\n  padding: var(--vd-input-padding-y-lg) var(--vd-input-padding-x-lg);\n  font-size: var(--vd-input-font-size-lg);\n  border-radius: var(--vd-input-border-radius-lg);\n}\n\n.textarea-lg,\ntextarea.textarea-lg {\n  padding: var(--vd-input-padding-y-lg) var(--vd-input-padding-x-lg);\n  font-size: var(--vd-input-font-size-lg);\n  border-radius: var(--vd-input-border-radius-lg);\n}\n\n/* Input States - Error */\n.vd-input-error,\ninput.vd-input-error,\n.vd-input.is-error,\ninput.is-error {\n  border-color: var(--vd-color-error);\n}\n\n.vd-input-invalid,\ninput.vd-input-invalid {\n  border-color: var(--vd-color-error);\n}\n\n.vd-input-error:focus,\ninput.vd-input-error:focus,\n.vd-input.is-error:focus,\ninput.is-error:focus {\n  border-color: var(--vd-color-error);\n  box-shadow: 0 0 0 3px var(--vd-color-error-alpha-10);\n}\n\n.vd-input-invalid:focus,\ninput.vd-input-invalid:focus {\n  border-color: var(--vd-color-error);\n  box-shadow: 0 0 0 3px var(--vd-color-error-alpha-10);\n}\n\n.textarea-error,\ntextarea.textarea-error,\n.textarea.is-error,\ntextarea.is-error {\n  border-color: var(--vd-color-error);\n}\n\n.textarea-error:focus,\ntextarea.textarea-error:focus,\n.textarea.is-error:focus,\ntextarea.is-error:focus {\n  border-color: var(--vd-color-error);\n  box-shadow: 0 0 0 3px var(--vd-color-error-alpha-10);\n}\n\n/* Input States - Success */\n.vd-input-success,\ninput.vd-input-success,\n.vd-input.is-success,\ninput.is-success {\n  border-color: var(--vd-color-success);\n}\n\n.vd-input-valid,\ninput.vd-input-valid {\n  border-color: var(--vd-color-success);\n}\n\n.vd-input-success:focus,\ninput.vd-input-success:focus,\n.vd-input.is-success:focus,\ninput.is-success:focus {\n  border-color: var(--vd-color-success);\n  box-shadow: 0 0 0 3px var(--vd-color-success-alpha-10);\n}\n\n.vd-input-valid:focus,\ninput.vd-input-valid:focus {\n  border-color: var(--vd-color-success);\n  box-shadow: 0 0 0 3px var(--vd-color-success-alpha-10);\n}\n\n.textarea-success,\ntextarea.textarea-success,\n.textarea.is-success,\ntextarea.is-success {\n  border-color: var(--vd-color-success);\n}\n\n.textarea-success:focus,\ntextarea.textarea-success:focus,\n.textarea.is-success:focus,\ntextarea.is-success:focus {\n  border-color: var(--vd-color-success);\n  box-shadow: 0 0 0 3px var(--vd-color-success-alpha-10);\n}\n\n/* Labels */\n.label,\nlabel {\n  display: inline-block;\n  margin-bottom: 0.5rem;\n  font-size: var(--vd-font-size-sm);\n  font-weight: var(--vd-font-weight-medium);\n  color: var(--vd-text-primary);\n  line-height: var(--vd-line-height-normal);\n}\n\n.label-required::after,\nlabel.required::after {\n  content: \" *\";\n  color: var(--vd-color-error);\n}\n\n.label-sm,\nlabel.label-sm {\n  font-size: var(--vd-font-size-xs);\n}\n\n.label-lg,\nlabel.label-lg {\n  font-size: var(--vd-font-size-base);\n}\n\n/* Form Groups */\n.vd-form-group {\n  margin-bottom: 1.3125rem;\n  /* 21px - fib */\n}\n\n.vd-form-group:last-child {\n  margin-bottom: 0;\n}\n\n/* Validation Messages */\n.vd-form-error,\n.error-message {\n  display: block;\n  margin-top: 0.5rem;\n  font-size: var(--vd-font-size-sm);\n  color: var(--vd-color-error);\n}\n\n.vd-form-feedback {\n  display: block;\n  margin-top: 0.5rem;\n  font-size: var(--vd-font-size-sm);\n}\n\n.vd-form-feedback-invalid {\n  color: var(--vd-color-error);\n}\n\n.vd-form-success,\n.success-message {\n  display: block;\n  margin-top: 0.5rem;\n  font-size: var(--vd-font-size-sm);\n  color: var(--vd-color-success);\n}\n\n.vd-form-feedback-valid {\n  color: var(--vd-color-success);\n}\n\n.vd-form-help,\n.help-text {\n  display: block;\n  margin-top: 0.5rem;\n  font-size: var(--vd-font-size-sm);\n  color: var(--vd-text-muted);\n}\n\n/* Input Groups (with prefix/suffix) */\n.vd-input-group {\n  display: flex;\n  width: 100%;\n  align-items: stretch;\n}\n\n.vd-input-group>.vd-input,\n.vd-input-group>input {\n  position: relative;\n  flex: 1 1 auto;\n  width: 1%;\n  min-width: 0;\n}\n\n.vd-input-group>.vd-input:not(:first-child),\n.vd-input-group>input:not(:first-child) {\n  border-top-left-radius: 0;\n  border-bottom-left-radius: 0;\n  margin-left: -1px;\n}\n\n.vd-input-group>.vd-input:not(:last-child),\n.vd-input-group>input:not(:last-child) {\n  border-top-right-radius: 0;\n  border-bottom-right-radius: 0;\n}\n\n.vd-input-group-prefix,\n.vd-input-group-suffix {\n  display: flex;\n  align-items: center;\n  padding: var(--vd-input-padding-y) var(--vd-input-padding-x);\n  font-size: var(--vd-input-font-size);\n  font-weight: var(--vd-font-weight-normal);\n  line-height: var(--vd-line-height-normal);\n  color: var(--vd-text-secondary);\n  text-align: center;\n  white-space: nowrap;\n  background-color: var(--vd-bg-secondary);\n  background-clip: padding-box;\n  border: var(--vd-input-border-width) solid var(--vd-input-border-color);\n}\n\n.vd-input-group-prefix {\n  border-right: 0;\n  border-radius: var(--vd-input-border-radius) 0 0 var(--vd-input-border-radius);\n}\n\n.vd-input-group-suffix {\n  border-left: 0;\n  border-radius: 0 var(--vd-input-border-radius) var(--vd-input-border-radius) 0;\n}\n\n.vd-input-group>.vd-input-group-prefix+.vd-input,\n.vd-input-group>.vd-input-group-prefix+input {\n  border-left: 0;\n}\n\n.vd-input-group>.vd-input+.vd-input-group-suffix,\n.vd-input-group>input+.vd-input-group-suffix {\n  border-right: 0;\n}\n\n/* ============================================\n   Phase 4: Custom Form Controls\n   ============================================ */\n\n/* Checkbox Variables */\n/* stylelint-disable-next-line no-duplicate-selectors -- control-specific tokens stay grouped near their rules. */\n:root {\n  --vd-checkbox-size: 1.3125rem;\n  /* 21px - fib */\n  --vd-checkbox-size-sm: 0.8125rem;\n  /* 13px - fib */\n  --vd-checkbox-size-lg: 2.125rem;\n  /* 34px - fib */\n  --vd-checkbox-border-width: 2px;\n  /* fib(2) */\n  --vd-checkbox-border-radius: var(--vd-radius-fib-3);\n  /* 3px */\n  --vd-checkbox-check-color: var(--vd-color-white);\n  --vd-checkbox-bg-checked: var(--vd-color-primary);\n  --vd-checkbox-bg-indeterminate: var(--vd-color-primary);\n  --vd-checkbox-border-color: var(--vd-input-border-color);\n  --vd-checkbox-transition: var(--vd-transition-base);\n}\n\n/* Checkbox Wrapper */\n.checkbox,\n.vd-form-check {\n  display: flex;\n  align-items: center;\n  margin-bottom: 0.8125rem;\n  /* 13px - fib */\n  position: relative;\n  cursor: pointer;\n  font-size: var(--vd-input-font-size);\n  line-height: var(--vd-line-height-normal);\n  color: var(--vd-text-primary);\n  user-select: none;\n  gap: 0.5rem;\n  /* 8px - fib */\n}\n\n/* Native checkbox styling (label.checkbox > input + span pattern) */\n.checkbox>input[type=\"checkbox\"],\n.vd-form-check>input[type=\"checkbox\"] {\n  appearance: none;\n  -webkit-appearance: none;\n  width: var(--vd-checkbox-size);\n  height: var(--vd-checkbox-size);\n  border: var(--vd-checkbox-border-width) solid var(--vd-checkbox-border-color);\n  border-radius: var(--vd-checkbox-border-radius);\n  background-color: var(--vd-input-bg);\n  cursor: pointer;\n  flex-shrink: 0;\n  margin: 0;\n  position: relative;\n  transition: var(--vd-checkbox-transition);\n}\n\n.checkbox>input[type=\"checkbox\"]:checked,\n.vd-form-check>input[type=\"checkbox\"]:checked {\n  background-color: var(--vd-checkbox-bg-checked);\n  border-color: var(--vd-checkbox-bg-checked);\n}\n\n.checkbox>input[type=\"checkbox\"]:checked::after,\n.vd-form-check>input[type=\"checkbox\"]:checked::after {\n  content: '';\n  position: absolute;\n  left: 50%;\n  top: 45%;\n  transform: translate(-50%, -50%) rotate(45deg);\n  width: 0.3rem;\n  height: 0.6rem;\n  border: solid var(--vd-checkbox-check-color);\n  border-width: 0 2px 2px 0;\n}\n\n.checkbox>input[type=\"checkbox\"]:disabled,\n.vd-form-check>input[type=\"checkbox\"]:disabled {\n  background-color: var(--vd-input-bg-disabled);\n  cursor: not-allowed;\n  opacity: 0.6;\n}\n\n.checkbox>input[type=\"checkbox\"]:disabled+span,\n.vd-form-check>input[type=\"checkbox\"]:disabled+span {\n  opacity: 0.6;\n  cursor: not-allowed;\n}\n\n.checkbox>input[type=\"checkbox\"]:focus-visible,\n.vd-form-check>input[type=\"checkbox\"]:focus-visible {\n  outline: 2px solid var(--vd-input-focus-border-color);\n  outline-offset: 2px;\n}\n\n.checkbox-inline,\n.vd-form-check-inline {\n  display: inline-flex;\n  margin-right: 1.5rem;\n  margin-bottom: 0;\n  vertical-align: middle;\n}\n\n/* Checkbox Input (class-based pattern) */\n.checkbox-input,\n.vd-form-check-input {\n  position: absolute;\n  opacity: 0;\n  width: 0;\n  height: 0;\n  margin: 0;\n  cursor: pointer;\n}\n\n.checkbox-label,\n.vd-form-check-label {\n  display: inline-flex;\n  align-items: center;\n  cursor: pointer;\n  font-size: var(--vd-input-font-size);\n  line-height: var(--vd-line-height-normal);\n  color: var(--vd-text-primary);\n  user-select: none;\n  padding-left: calc(var(--vd-checkbox-size) + 0.5rem);\n  position: relative;\n  min-height: var(--vd-checkbox-size);\n}\n\n.checkbox-label::before,\n.vd-form-check-label::before {\n  content: '';\n  position: absolute;\n  left: 0;\n  top: 50%;\n  transform: translateY(-50%);\n  width: var(--vd-checkbox-size);\n  height: var(--vd-checkbox-size);\n  border: var(--vd-checkbox-border-width) solid var(--vd-checkbox-border-color);\n  border-radius: var(--vd-checkbox-border-radius);\n  background-color: var(--vd-input-bg);\n  transition: var(--vd-checkbox-transition);\n  flex-shrink: 0;\n}\n\n.checkbox-input:checked+.checkbox-label::before,\n.checkbox-input:checked~.checkbox-label::before,\n.vd-form-check-input:checked+.vd-form-check-label::before {\n  background-color: var(--vd-checkbox-bg-checked);\n  border-color: var(--vd-checkbox-bg-checked);\n}\n\n.checkbox-input:checked+.checkbox-label::after,\n.checkbox-input:checked~.checkbox-label::after,\n.vd-form-check-input:checked+.vd-form-check-label::after {\n  content: '';\n  position: absolute;\n  left: calc(var(--vd-checkbox-size) / 2);\n  top: 50%;\n  transform: translate(-50%, -60%) rotate(45deg);\n  width: 0.375rem;\n  height: 0.75rem;\n  border: solid var(--vd-checkbox-check-color);\n  border-width: 0 2px 2px 0;\n  opacity: 1;\n}\n\n.checkbox-input:indeterminate+.checkbox-label::before,\n.checkbox-input:indeterminate~.checkbox-label::before,\n.vd-form-check-input:indeterminate+.vd-form-check-label::before {\n  background-color: var(--vd-checkbox-bg-indeterminate);\n  border-color: var(--vd-checkbox-bg-indeterminate);\n}\n\n.checkbox-input:indeterminate+.checkbox-label::after,\n.checkbox-input:indeterminate~.checkbox-label::after,\n.vd-form-check-input:indeterminate+.vd-form-check-label::after {\n  content: '';\n  position: absolute;\n  left: calc(var(--vd-checkbox-size) / 2);\n  top: 50%;\n  transform: translate(-50%, -50%);\n  width: 0.5rem;\n  height: 2px;\n  background-color: var(--vd-checkbox-check-color);\n  border: none;\n  opacity: 1;\n}\n\n.checkbox-input:focus-visible+.checkbox-label::before,\n.checkbox-input:focus-visible~.checkbox-label::before,\n.vd-form-check-input:focus-visible+.vd-form-check-label::before {\n  outline: 2px solid var(--vd-input-focus-border-color);\n  outline-offset: 2px;\n}\n\n.checkbox-input:disabled+.checkbox-label,\n.checkbox-input:disabled~.checkbox-label,\n.vd-form-check-input:disabled+.vd-form-check-label {\n  opacity: 0.6;\n  cursor: not-allowed;\n}\n\n.checkbox-input:disabled+.checkbox-label::before,\n.checkbox-input:disabled~.checkbox-label::before,\n.vd-form-check-input:disabled+.vd-form-check-label::before {\n  background-color: var(--vd-input-bg-disabled);\n  border-color: var(--vd-checkbox-border-color);\n  cursor: not-allowed;\n}\n\n/* Checkbox Sizes */\n.checkbox-sm .checkbox-label,\n.checkbox-sm .vd-form-check-label,\n.vd-form-check-sm .checkbox-label,\n.vd-form-check-sm .vd-form-check-label {\n  font-size: var(--vd-input-font-size-sm);\n  padding-left: calc(var(--vd-checkbox-size-sm) + 0.625rem);\n  min-height: var(--vd-checkbox-size-sm);\n}\n\n.checkbox-sm .checkbox-label::before,\n.checkbox-sm .vd-form-check-label::before,\n.vd-form-check-sm .checkbox-label::before,\n.vd-form-check-sm .vd-form-check-label::before {\n  width: var(--vd-checkbox-size-sm);\n  height: var(--vd-checkbox-size-sm);\n}\n\n.checkbox-lg .checkbox-label,\n.checkbox-lg .vd-form-check-label,\n.vd-form-check-lg .checkbox-label,\n.vd-form-check-lg .vd-form-check-label {\n  font-size: var(--vd-input-font-size-lg);\n  padding-left: calc(var(--vd-checkbox-size-lg) + 0.875rem);\n  min-height: var(--vd-checkbox-size-lg);\n}\n\n.checkbox-lg .checkbox-label::before,\n.checkbox-lg .vd-form-check-label::before,\n.vd-form-check-lg .checkbox-label::before,\n.vd-form-check-lg .vd-form-check-label::before {\n  width: var(--vd-checkbox-size-lg);\n  height: var(--vd-checkbox-size-lg);\n}\n\n/* Checkbox Groups */\n.checkbox-group,\n.vd-form-check-group {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n}\n\n.checkbox-group-inline,\n.vd-form-check-group-inline {\n  flex-direction: row;\n  flex-wrap: wrap;\n}\n\n/* Radio Button Variables */\n/* stylelint-disable-next-line no-duplicate-selectors -- control-specific tokens stay grouped near their rules. */\n:root {\n  --vd-radio-size: 1.3125rem;\n  /* 21px - fib */\n  --vd-radio-size-sm: 0.8125rem;\n  /* 13px - fib */\n  --vd-radio-size-lg: 2.125rem;\n  /* 34px - fib */\n  --vd-radio-border-width: 2px;\n  /* fib(2) */\n  --vd-radio-dot-size: 0.5rem;\n  /* 8px - fib */\n  --vd-radio-dot-size-sm: 0.3125rem;\n  /* 5px - fib */\n  --vd-radio-dot-size-lg: 0.8125rem;\n  /* 13px - fib */\n  --vd-radio-bg-checked: var(--vd-color-primary);\n  --vd-radio-border-color: var(--vd-input-border-color);\n  --vd-radio-transition: var(--vd-transition-base);\n}\n\n/* Radio Wrapper */\n.radio,\n.vd-form-radio {\n  display: flex;\n  align-items: center;\n  margin-bottom: 0.75rem;\n  position: relative;\n  cursor: pointer;\n  font-size: var(--vd-input-font-size);\n  line-height: var(--vd-line-height-normal);\n  color: var(--vd-text-primary);\n  user-select: none;\n  gap: 0.5rem;\n}\n\n/* Native radio styling (label.radio > input + span pattern) */\n.radio>input[type=\"radio\"],\n.vd-form-radio>input[type=\"radio\"] {\n  appearance: none;\n  -webkit-appearance: none;\n  width: var(--vd-radio-size);\n  height: var(--vd-radio-size);\n  border: var(--vd-radio-border-width) solid var(--vd-radio-border-color);\n  border-radius: 50%;\n  background-color: var(--vd-input-bg);\n  cursor: pointer;\n  flex-shrink: 0;\n  margin: 0;\n  position: relative;\n  transition: var(--vd-radio-transition);\n}\n\n.radio>input[type=\"radio\"]:checked,\n.vd-form-radio>input[type=\"radio\"]:checked {\n  border-color: var(--vd-radio-bg-checked);\n}\n\n.radio>input[type=\"radio\"]:checked::after,\n.vd-form-radio>input[type=\"radio\"]:checked::after {\n  content: '';\n  position: absolute;\n  left: 50%;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  width: var(--vd-radio-dot-size);\n  height: var(--vd-radio-dot-size);\n  border-radius: 50%;\n  background-color: var(--vd-radio-bg-checked);\n}\n\n.radio>input[type=\"radio\"]:disabled,\n.vd-form-radio>input[type=\"radio\"]:disabled {\n  background-color: var(--vd-input-bg-disabled);\n  cursor: not-allowed;\n  opacity: 0.6;\n}\n\n.radio>input[type=\"radio\"]:disabled+span,\n.vd-form-radio>input[type=\"radio\"]:disabled+span {\n  opacity: 0.6;\n  cursor: not-allowed;\n}\n\n.radio>input[type=\"radio\"]:focus-visible,\n.vd-form-radio>input[type=\"radio\"]:focus-visible {\n  outline: 2px solid var(--vd-input-focus-border-color);\n  outline-offset: 2px;\n}\n\n.radio-inline,\n.vd-form-radio-inline {\n  display: inline-flex;\n  margin-right: 1.5rem;\n  margin-bottom: 0;\n  vertical-align: middle;\n}\n\n/* Radio Input (class-based pattern) */\n.radio-input,\n.vd-form-radio-input {\n  position: absolute;\n  opacity: 0;\n  width: 0;\n  height: 0;\n  margin: 0;\n  cursor: pointer;\n}\n\n.radio-label,\n.vd-form-radio-label {\n  display: inline-flex;\n  align-items: center;\n  cursor: pointer;\n  font-size: var(--vd-input-font-size);\n  line-height: var(--vd-line-height-normal);\n  color: var(--vd-text-primary);\n  user-select: none;\n  padding-left: calc(var(--vd-radio-size) + 0.5rem);\n  position: relative;\n  min-height: var(--vd-radio-size);\n}\n\n.radio-label::before,\n.vd-form-radio-label::before {\n  content: '';\n  position: absolute;\n  left: 0;\n  top: 50%;\n  transform: translateY(-50%);\n  width: var(--vd-radio-size);\n  height: var(--vd-radio-size);\n  border: var(--vd-radio-border-width) solid var(--vd-radio-border-color);\n  border-radius: 50%;\n  background-color: var(--vd-input-bg);\n  transition: var(--vd-radio-transition);\n  flex-shrink: 0;\n}\n\n.radio-input:checked+.radio-label::before,\n.radio-input:checked~.radio-label::before,\n.vd-form-radio-input:checked+.vd-form-radio-label::before {\n  border-color: var(--vd-radio-bg-checked);\n}\n\n.radio-input:checked+.radio-label::after,\n.radio-input:checked~.radio-label::after,\n.vd-form-radio-input:checked+.vd-form-radio-label::after {\n  content: '';\n  position: absolute;\n  left: calc(var(--vd-radio-size) / 2);\n  top: 50%;\n  transform: translate(-50%, -50%);\n  width: var(--vd-radio-dot-size);\n  height: var(--vd-radio-dot-size);\n  border-radius: 50%;\n  background-color: var(--vd-radio-bg-checked);\n  opacity: 1;\n}\n\n.radio-input:focus-visible+.radio-label::before,\n.radio-input:focus-visible~.radio-label::before,\n.vd-form-radio-input:focus-visible+.vd-form-radio-label::before {\n  outline: 2px solid var(--vd-input-focus-border-color);\n  outline-offset: 2px;\n}\n\n.radio-input:disabled+.radio-label,\n.radio-input:disabled~.radio-label,\n.vd-form-radio-input:disabled+.vd-form-radio-label {\n  opacity: 0.6;\n  cursor: not-allowed;\n}\n\n.radio-input:disabled+.radio-label::before,\n.radio-input:disabled~.radio-label::before,\n.vd-form-radio-input:disabled+.vd-form-radio-label::before {\n  background-color: var(--vd-input-bg-disabled);\n  border-color: var(--vd-radio-border-color);\n  cursor: not-allowed;\n}\n\n/* Radio Sizes */\n.radio-sm .radio-label,\n.radio-sm .vd-form-radio-label,\n.vd-form-radio-sm .radio-label,\n.vd-form-radio-sm .vd-form-radio-label {\n  font-size: var(--vd-input-font-size-sm);\n  padding-left: calc(var(--vd-radio-size-sm) + 0.625rem);\n  min-height: var(--vd-radio-size-sm);\n}\n\n.radio-sm .radio-label::before,\n.radio-sm .vd-form-radio-label::before,\n.vd-form-radio-sm .radio-label::before,\n.vd-form-radio-sm .vd-form-radio-label::before {\n  width: var(--vd-radio-size-sm);\n  height: var(--vd-radio-size-sm);\n}\n\n.radio-sm .radio-label::after,\n.radio-sm .vd-form-radio-label::after,\n.vd-form-radio-sm .radio-label::after,\n.vd-form-radio-sm .vd-form-radio-label::after {\n  width: var(--vd-radio-dot-size-sm);\n  height: var(--vd-radio-dot-size-sm);\n}\n\n.radio-lg .radio-label,\n.radio-lg .vd-form-radio-label,\n.vd-form-radio-lg .radio-label,\n.vd-form-radio-lg .vd-form-radio-label {\n  font-size: var(--vd-input-font-size-lg);\n  padding-left: calc(var(--vd-radio-size-lg) + 0.875rem);\n  min-height: var(--vd-radio-size-lg);\n}\n\n.radio-lg .radio-label::before,\n.radio-lg .vd-form-radio-label::before,\n.vd-form-radio-lg .radio-label::before,\n.vd-form-radio-lg .vd-form-radio-label::before {\n  width: var(--vd-radio-size-lg);\n  height: var(--vd-radio-size-lg);\n}\n\n.radio-lg .radio-label::after,\n.radio-lg .vd-form-radio-label::after,\n.vd-form-radio-lg .radio-label::after,\n.vd-form-radio-lg .vd-form-radio-label::after {\n  width: var(--vd-radio-dot-size-lg);\n  height: var(--vd-radio-dot-size-lg);\n}\n\n/* Radio Groups */\n.radio-group,\n.vd-form-radio-group {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n}\n\n.radio-group-inline,\n.vd-form-radio-group-inline {\n  flex-direction: row;\n  flex-wrap: wrap;\n}\n\n/* Range Variables */\n/* stylelint-disable-next-line no-duplicate-selectors -- range tokens stay grouped with range control styles. */\n:root {\n  --vd-range-track-height: 0.5rem;\n  --vd-range-track-height-sm: 0.375rem;\n  --vd-range-track-height-lg: 0.625rem;\n  --vd-range-thumb-size: 1.25rem;\n  --vd-range-thumb-size-sm: 1rem;\n  --vd-range-thumb-size-lg: 1.5rem;\n  --vd-range-track-bg: var(--vd-color-gray-300);\n  --vd-range-track-border: none;\n  --vd-range-track-fill: var(--vd-color-primary);\n  --vd-range-thumb-bg: var(--vd-color-primary);\n  --vd-range-thumb-border: 2px solid var(--vd-color-white);\n  --vd-range-thumb-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);\n}\n\n/* Dark Theme Range Overrides - more visible track */\n/* stylelint-disable-next-line no-duplicate-selectors -- dark-mode token overrides stay adjacent to range styles. */\n[data-theme=\"dark\"] {\n  --vd-range-track-bg: var(--vd-color-gray-400);\n}\n\n@media (prefers-color-scheme: dark) {\n  :root:not([data-theme]) {\n    --vd-range-track-bg: var(--vd-color-gray-400);\n  }\n}\n\n/* Range Wrapper */\n.range-wrapper,\n.range {\n  position: relative;\n  width: 100%;\n  margin-bottom: 1rem;\n}\n\n/* Range Input */\ninput[type=\"range\"].range-input,\ninput[type=\"range\"] {\n  width: 100%;\n  height: var(--vd-range-track-height);\n  -webkit-appearance: none;\n  appearance: none;\n  background: transparent;\n  cursor: pointer;\n  margin: 0;\n  padding: 0;\n  display: block;\n}\n\ninput[type=\"range\"].range-input:focus,\ninput[type=\"range\"]:focus {\n  outline: none;\n}\n\ninput[type=\"range\"].range-input:focus::-webkit-slider-thumb,\ninput[type=\"range\"]:focus::-webkit-slider-thumb {\n  box-shadow: var(--vd-range-thumb-shadow), 0 0 0 3px var(--vd-color-primary-alpha-10);\n}\n\ninput[type=\"range\"].range-input:focus::-moz-range-thumb,\ninput[type=\"range\"]:focus::-moz-range-thumb {\n  box-shadow: var(--vd-range-thumb-shadow), 0 0 0 3px var(--vd-color-primary-alpha-10);\n}\n\n/* Range Track (Webkit - Chrome, Safari, Edge) */\ninput[type=\"range\"]::-webkit-slider-runnable-track {\n  width: 100%;\n  height: var(--vd-range-track-height);\n  background: var(--vd-range-track-bg);\n  border: var(--vd-range-track-border);\n  border-radius: 0.5rem;\n  cursor: pointer;\n}\n\ninput[type=\"range\"].range-input::-webkit-slider-runnable-track {\n  width: 100%;\n  height: var(--vd-range-track-height);\n  background: var(--vd-range-track-bg);\n  border: var(--vd-range-track-border);\n  border-radius: 0.5rem;\n  cursor: pointer;\n}\n\n/* Range Track (Firefox) */\ninput[type=\"range\"].range-input::-moz-range-track,\ninput[type=\"range\"]::-moz-range-track {\n  width: 100%;\n  height: var(--vd-range-track-height);\n  background: var(--vd-range-track-bg);\n  border: var(--vd-range-track-border);\n  border-radius: 0.5rem;\n  cursor: pointer;\n}\n\n/* Range Progress/Fill (Firefox) - uses --vd-range-track-fill */\ninput[type=\"range\"].range-input::-moz-range-progress,\ninput[type=\"range\"]::-moz-range-progress {\n  height: var(--vd-range-track-height);\n  background: var(--vd-range-track-fill);\n  border-radius: 0.5rem 0 0 0.5rem;\n}\n\n/* Range Thumb (Webkit) */\ninput[type=\"range\"].range-input::-webkit-slider-thumb,\ninput[type=\"range\"]::-webkit-slider-thumb {\n  -webkit-appearance: none;\n  appearance: none;\n  width: var(--vd-range-thumb-size);\n  height: var(--vd-range-thumb-size);\n  background: var(--vd-range-thumb-bg);\n  border: var(--vd-range-thumb-border);\n  border-radius: 50%;\n  cursor: pointer;\n  box-shadow: var(--vd-range-thumb-shadow);\n  transition: var(--vd-transition-base);\n  margin-top: calc((var(--vd-range-track-height) - var(--vd-range-thumb-size)) / 2);\n}\n\ninput[type=\"range\"].range-input::-webkit-slider-thumb:hover,\ninput[type=\"range\"]::-webkit-slider-thumb:hover {\n  transform: scale(1.1);\n}\n\n/* Range Thumb (Firefox) */\ninput[type=\"range\"].range-input::-moz-range-thumb,\ninput[type=\"range\"]::-moz-range-thumb {\n  width: var(--vd-range-thumb-size);\n  height: var(--vd-range-thumb-size);\n  background: var(--vd-range-thumb-bg);\n  border: var(--vd-range-thumb-border);\n  border-radius: 50%;\n  cursor: pointer;\n  box-shadow: var(--vd-range-thumb-shadow);\n  transition: var(--vd-transition-base);\n}\n\ninput[type=\"range\"].range-input::-moz-range-thumb:hover,\ninput[type=\"range\"]::-moz-range-thumb:hover {\n  transform: scale(1.1);\n}\n\ninput[type=\"range\"].range-input:disabled,\ninput[type=\"range\"]:disabled {\n  opacity: 0.6;\n  cursor: not-allowed;\n}\n\ninput[type=\"range\"].range-input:disabled::-webkit-slider-thumb,\ninput[type=\"range\"]:disabled::-webkit-slider-thumb {\n  cursor: not-allowed;\n}\n\ninput[type=\"range\"].range-input:disabled::-moz-range-thumb,\ninput[type=\"range\"]:disabled::-moz-range-thumb {\n  cursor: not-allowed;\n}\n\n/* Range Sizes */\n.range-sm input[type=\"range\"],\ninput[type=\"range\"].range-sm {\n  height: var(--vd-range-track-height-sm);\n}\n\n.range-sm input[type=\"range\"]::-webkit-slider-track,\ninput[type=\"range\"].range-sm::-webkit-slider-track {\n  height: var(--vd-range-track-height-sm);\n}\n\n.range-sm input[type=\"range\"]::-moz-range-track,\ninput[type=\"range\"].range-sm::-moz-range-track {\n  height: var(--vd-range-track-height-sm);\n}\n\n.range-sm input[type=\"range\"]::-webkit-slider-thumb,\ninput[type=\"range\"].range-sm::-webkit-slider-thumb {\n  width: var(--vd-range-thumb-size-sm);\n  height: var(--vd-range-thumb-size-sm);\n  margin-top: calc((var(--vd-range-track-height-sm) - var(--vd-range-thumb-size-sm)) / 2);\n}\n\n.range-sm input[type=\"range\"]::-moz-range-thumb,\ninput[type=\"range\"].range-sm::-moz-range-thumb {\n  width: var(--vd-range-thumb-size-sm);\n  height: var(--vd-range-thumb-size-sm);\n}\n\n.range-lg input[type=\"range\"],\ninput[type=\"range\"].range-lg {\n  height: var(--vd-range-track-height-lg);\n}\n\n.range-lg input[type=\"range\"]::-webkit-slider-track,\ninput[type=\"range\"].range-lg::-webkit-slider-track {\n  height: var(--vd-range-track-height-lg);\n}\n\n.range-lg input[type=\"range\"]::-moz-range-track,\ninput[type=\"range\"].range-lg::-moz-range-track {\n  height: var(--vd-range-track-height-lg);\n}\n\n.range-lg input[type=\"range\"]::-webkit-slider-thumb,\ninput[type=\"range\"].range-lg::-webkit-slider-thumb {\n  width: var(--vd-range-thumb-size-lg);\n  height: var(--vd-range-thumb-size-lg);\n  margin-top: calc((var(--vd-range-track-height-lg) - var(--vd-range-thumb-size-lg)) / 2);\n}\n\n.range-lg input[type=\"range\"]::-moz-range-thumb,\ninput[type=\"range\"].range-lg::-moz-range-thumb {\n  width: var(--vd-range-thumb-size-lg);\n  height: var(--vd-range-thumb-size-lg);\n}\n\n/* Range Value Display */\n.range-value {\n  display: inline-block;\n  margin-left: 0.5rem;\n  padding: 0.25rem 0.5rem;\n  background-color: var(--vd-bg-secondary);\n  border-radius: var(--vd-btn-border-radius-sm);\n  font-size: var(--vd-font-size-sm);\n  font-weight: var(--vd-font-weight-medium);\n  color: var(--vd-text-primary);\n  min-width: 3rem;\n  text-align: center;\n}\n\n.range-label {\n  display: flex;\n  align-items: center;\n  margin-bottom: 0.5rem;\n  font-size: var(--vd-font-size-sm);\n  font-weight: var(--vd-font-weight-medium);\n  color: var(--vd-text-primary);\n}\n\n.range-min-max {\n  display: flex;\n  justify-content: space-between;\n  margin-top: 0.25rem;\n  font-size: var(--vd-font-size-xs);\n  color: var(--vd-text-muted);\n}\n\n/* Switch Variables */\n/* stylelint-disable-next-line no-duplicate-selectors -- control-specific tokens stay grouped near their rules. */\n:root {\n  /* Switch: golden rectangle (55x34 outer, 21px thumb) */\n  --vd-switch-width: 3.4375rem;\n  /* 55px - fib */\n  --vd-switch-width-sm: 2.125rem;\n  /* 34px - fib */\n  --vd-switch-width-lg: 5.5625rem;\n  /* 89px - fib */\n  --vd-switch-height: 2.125rem;\n  /* 34px - fib (55/34 ~ phi) */\n  --vd-switch-height-sm: 1.3125rem;\n  /* 21px - fib (34/21 ~ phi) */\n  --vd-switch-height-lg: 3.4375rem;\n  /* 55px - fib (89/55 ~ phi) */\n  --vd-switch-thumb-size: 1.3125rem;\n  /* 21px - fib */\n  --vd-switch-thumb-size-sm: 0.8125rem;\n  /* 13px - fib */\n  --vd-switch-thumb-size-lg: 2.125rem;\n  /* 34px - fib */\n  --vd-switch-thumb-offset: 0.1875rem;\n  /* 3px - fib */\n  --vd-switch-bg-off: var(--vd-color-gray-300);\n  --vd-switch-bg-on: var(--vd-color-primary);\n  --vd-switch-bg-on-success: var(--vd-color-success);\n  --vd-switch-bg-on-warning: var(--vd-color-warning);\n  --vd-switch-bg-on-error: var(--vd-color-error);\n  --vd-switch-thumb-bg: var(--vd-color-white);\n  --vd-switch-transition: var(--vd-transition-base);\n}\n\n/* Dark Theme Switch Overrides */\n/* stylelint-disable-next-line no-duplicate-selectors -- dark-mode token overrides stay adjacent to switch styles. */\n[data-theme=\"dark\"] {\n  --vd-switch-bg-off: var(--vd-color-gray-600);\n}\n\n@media (prefers-color-scheme: dark) {\n  :root:not([data-theme]) {\n    --vd-switch-bg-off: var(--vd-color-gray-600);\n  }\n}\n\n/* Switch Wrapper */\n.switch,\n.vd-form-switch {\n  display: flex;\n  align-items: center;\n  margin-bottom: 0.75rem;\n  position: relative;\n  cursor: pointer;\n  font-size: var(--vd-input-font-size);\n  line-height: var(--vd-line-height-normal);\n  color: var(--vd-text-primary);\n  user-select: none;\n  gap: 0.75rem;\n}\n\n/* Native switch styling (label.switch > input + .switch-slider + span pattern) */\n.switch>input[type=\"checkbox\"] {\n  position: absolute;\n  opacity: 0;\n  width: 0;\n  height: 0;\n}\n\n.switch-slider {\n  position: relative;\n  width: var(--vd-switch-width);\n  height: var(--vd-switch-height);\n  background-color: var(--vd-switch-bg-off);\n  border-radius: calc(var(--vd-switch-height) / 2);\n  transition: var(--vd-switch-transition);\n  flex-shrink: 0;\n}\n\n.switch-slider::after {\n  content: '';\n  position: absolute;\n  left: var(--vd-switch-thumb-offset);\n  top: 50%;\n  transform: translateY(-50%);\n  width: var(--vd-switch-thumb-size);\n  height: var(--vd-switch-thumb-size);\n  background-color: var(--vd-switch-thumb-bg);\n  border-radius: 50%;\n  box-shadow: var(--vd-shadow-sm);\n  transition: var(--vd-switch-transition);\n}\n\n.switch>input[type=\"checkbox\"]:checked+.switch-slider {\n  background-color: var(--vd-switch-bg-on);\n}\n\n.switch>input[type=\"checkbox\"]:checked+.switch-slider::after {\n  left: calc(var(--vd-switch-width) - var(--vd-switch-thumb-size) - var(--vd-switch-thumb-offset));\n}\n\n.switch>input[type=\"checkbox\"]:focus-visible+.switch-slider {\n  outline: 2px solid var(--vd-input-focus-border-color);\n  outline-offset: 2px;\n}\n\n.switch>input[type=\"checkbox\"]:disabled+.switch-slider {\n  opacity: 0.6;\n  cursor: not-allowed;\n}\n\n.switch>input[type=\"checkbox\"]:disabled~span {\n  opacity: 0.6;\n  cursor: not-allowed;\n}\n\n.switch-inline,\n.vd-form-switch-inline {\n  display: inline-flex;\n  margin-right: 1.5rem;\n  margin-bottom: 0;\n  vertical-align: middle;\n}\n\n/* Switch Input (class-based pattern) */\n.switch-input,\n.vd-form-switch-input {\n  position: absolute;\n  opacity: 0;\n  width: 0;\n  height: 0;\n  margin: 0;\n  cursor: pointer;\n}\n\n/* Switch Label */\n.switch-label,\n.vd-form-switch-label {\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  font-size: var(--vd-input-font-size);\n  line-height: var(--vd-line-height-normal);\n  color: var(--vd-text-primary);\n  user-select: none;\n  position: relative;\n}\n\n/* Switch Track */\n.switch-label::before,\n.vd-form-switch-label::before {\n  content: '';\n  position: relative;\n  width: var(--vd-switch-width);\n  height: var(--vd-switch-height);\n  background-color: var(--vd-switch-bg-off);\n  border-radius: calc(var(--vd-switch-height) / 2);\n  transition: var(--vd-switch-transition);\n  flex-shrink: 0;\n  margin-right: 0.75rem;\n}\n\n/* Switch Thumb */\n.switch-label::after,\n.vd-form-switch-label::after {\n  content: '';\n  position: absolute;\n  left: var(--vd-switch-thumb-offset);\n  top: 50%;\n  transform: translateY(-50%);\n  width: var(--vd-switch-thumb-size);\n  height: var(--vd-switch-thumb-size);\n  background-color: var(--vd-switch-thumb-bg);\n  border-radius: 50%;\n  box-shadow: var(--vd-shadow-sm);\n  transition: var(--vd-switch-transition);\n  pointer-events: none;\n}\n\n.switch-input:checked+.switch-label::before,\n.switch-input:checked~.switch-label::before,\n.vd-form-switch-input:checked+.vd-form-switch-label::before {\n  background-color: var(--vd-switch-bg-on);\n}\n\n.switch-input:checked+.switch-label::after,\n.switch-input:checked~.switch-label::after,\n.vd-form-switch-input:checked+.vd-form-switch-label::after {\n  left: calc(var(--vd-switch-width) - var(--vd-switch-thumb-size) - var(--vd-switch-thumb-offset));\n}\n\n.switch-input:focus-visible+.switch-label::before,\n.switch-input:focus-visible~.switch-label::before,\n.vd-form-switch-input:focus-visible+.vd-form-switch-label::before {\n  outline: 2px solid var(--vd-input-focus-border-color);\n  outline-offset: 2px;\n}\n\n.switch-input:disabled+.switch-label,\n.switch-input:disabled~.switch-label,\n.vd-form-switch-input:disabled+.vd-form-switch-label {\n  opacity: 0.6;\n  cursor: not-allowed;\n}\n\n.switch-input:disabled+.switch-label::before,\n.switch-input:disabled~.switch-label::before,\n.vd-form-switch-input:disabled+.vd-form-switch-label::before {\n  background-color: var(--vd-input-bg-disabled);\n  cursor: not-allowed;\n}\n\n/* Switch Label Position - Right */\n.switch-label-right .switch-label,\n.switch-label-right .vd-form-switch-label {\n  flex-direction: row-reverse;\n}\n\n.switch-label-right .switch-label::before,\n.switch-label-right .vd-form-switch-label::before {\n  margin-right: 0;\n  margin-left: 0.75rem;\n}\n\n.switch-label-right .switch-label::after,\n.switch-label-right .vd-form-switch-label::after {\n  left: auto;\n  right: var(--vd-switch-thumb-offset);\n}\n\n.switch-label-right .switch-input:checked+.switch-label::after,\n.switch-label-right .switch-input:checked~.switch-label::after,\n.switch-label-right .vd-form-switch-input:checked+.vd-form-switch-label::after {\n  right: calc(var(--vd-switch-width) - var(--vd-switch-thumb-size) - var(--vd-switch-thumb-offset));\n  left: auto;\n}\n\n/* Switch Sizes */\n.switch-sm .switch-label,\n.switch-sm .vd-form-switch-label,\n.vd-form-switch-sm .switch-label,\n.vd-form-switch-sm .vd-form-switch-label {\n  font-size: var(--vd-input-font-size-sm);\n}\n\n.switch-sm .switch-label::before,\n.switch-sm .vd-form-switch-label::before,\n.vd-form-switch-sm .switch-label::before,\n.vd-form-switch-sm .vd-form-switch-label::before {\n  width: var(--vd-switch-width-sm);\n  height: var(--vd-switch-height-sm);\n}\n\n.switch-sm .switch-label::after,\n.switch-sm .vd-form-switch-label::after,\n.vd-form-switch-sm .switch-label::after,\n.vd-form-switch-sm .vd-form-switch-label::after {\n  width: var(--vd-switch-thumb-size-sm);\n  height: var(--vd-switch-thumb-size-sm);\n}\n\n.switch-sm .switch-input:checked+.switch-label::after,\n.switch-sm .switch-input:checked~.switch-label::after,\n.vd-form-switch-sm .vd-form-switch-input:checked+.vd-form-switch-label::after {\n  left: calc(var(--vd-switch-width-sm) - var(--vd-switch-thumb-size-sm) - var(--vd-switch-thumb-offset));\n}\n\n.switch-lg .switch-label,\n.switch-lg .vd-form-switch-label,\n.vd-form-switch-lg .switch-label,\n.vd-form-switch-lg .vd-form-switch-label {\n  font-size: var(--vd-input-font-size-lg);\n}\n\n.switch-lg .switch-label::before,\n.switch-lg .vd-form-switch-label::before,\n.vd-form-switch-lg .switch-label::before,\n.vd-form-switch-lg .vd-form-switch-label::before {\n  width: var(--vd-switch-width-lg);\n  height: var(--vd-switch-height-lg);\n}\n\n.switch-lg .switch-label::after,\n.switch-lg .vd-form-switch-label::after,\n.vd-form-switch-lg .switch-label::after,\n.vd-form-switch-lg .vd-form-switch-label::after {\n  width: var(--vd-switch-thumb-size-lg);\n  height: var(--vd-switch-thumb-size-lg);\n}\n\n.switch-lg .switch-input:checked+.switch-label::after,\n.switch-lg .switch-input:checked~.switch-label::after,\n.vd-form-switch-lg .vd-form-switch-input:checked+.vd-form-switch-label::after {\n  left: calc(var(--vd-switch-width-lg) - var(--vd-switch-thumb-size-lg) - var(--vd-switch-thumb-offset));\n}\n\n/* Switch Variants */\n.switch-success .switch-input:checked+.switch-label::before,\n.switch-success .switch-input:checked~.switch-label::before,\n.vd-form-switch-success .vd-form-switch-input:checked+.vd-form-switch-label::before {\n  background-color: var(--vd-switch-bg-on-success);\n}\n\n.switch-warning .switch-input:checked+.switch-label::before,\n.switch-warning .switch-input:checked~.switch-label::before,\n.vd-form-switch-warning .vd-form-switch-input:checked+.vd-form-switch-label::before {\n  background-color: var(--vd-switch-bg-on-warning);\n}\n\n.switch-error .switch-input:checked+.switch-label::before,\n.switch-error .switch-input:checked~.switch-label::before,\n.vd-form-switch-error .vd-form-switch-input:checked+.vd-form-switch-label::before {\n  background-color: var(--vd-switch-bg-on-error);\n}\n\n/* Select Variables */\n/* stylelint-disable-next-line no-duplicate-selectors -- control-specific tokens stay grouped near their rules. */\n:root {\n  --vd-select-arrow-size: 16px;\n  --vd-select-arrow-color: var(--vd-text-secondary);\n  --vd-select-arrow-color-focus: var(--vd-color-primary);\n}\n\n/* Select Wrapper */\n.select-wrapper,\n.custom-select,\n.custom-select-wrapper {\n  position: relative;\n  display: block;\n  width: 100%;\n}\n\n/* Custom Select Button (for JS-enhanced selects) */\n.custom-select-button {\n  display: block;\n  width: 100%;\n  padding: var(--vd-input-padding-y) var(--vd-input-padding-x);\n  padding-right: calc(var(--vd-input-padding-x) + var(--vd-select-arrow-size) + 0.5rem);\n  font-family: var(--vd-font-family-sans);\n  font-size: var(--vd-input-font-size);\n  font-weight: var(--vd-font-weight-normal);\n  line-height: var(--vd-line-height-normal);\n  color: var(--vd-text-primary);\n  text-align: left;\n  background-color: var(--vd-input-bg);\n  background-image: url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23495057' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e\");\n  background-repeat: no-repeat;\n  background-position: right 0.75rem center;\n  background-size: var(--vd-select-arrow-size) 12px;\n  border: var(--vd-input-border-width) solid var(--vd-input-border-color);\n  border-radius: var(--vd-input-border-radius);\n  transition: var(--vd-input-transition);\n  cursor: pointer;\n  appearance: none;\n}\n\n.custom-select-button:hover {\n  border-color: var(--vd-input-focus-border-color);\n}\n\n.custom-select-button:focus {\n  outline: 0;\n  border-color: var(--vd-input-focus-border-color);\n  box-shadow: var(--vd-input-focus-box-shadow);\n}\n\n.custom-select-wrapper select {\n  position: absolute;\n  opacity: 0;\n  pointer-events: none;\n  width: 0;\n  height: 0;\n}\n\n/* Select (Enhanced Styling) */\nselect.vd-input,\nselect,\n.select-input,\n.custom-select-input {\n  display: block;\n  width: 100%;\n  padding: var(--vd-input-padding-y) var(--vd-input-padding-x);\n  padding-right: calc(var(--vd-input-padding-x) + var(--vd-select-arrow-size) + 0.5rem);\n  font-family: var(--vd-font-family-sans);\n  font-size: var(--vd-input-font-size);\n  font-weight: var(--vd-font-weight-normal);\n  line-height: var(--vd-line-height-normal);\n  color: var(--vd-text-primary);\n  background-color: var(--vd-input-bg);\n  background-image: url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23495057' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e\");\n  background-repeat: no-repeat;\n  background-position: right 0.75rem center;\n  background-size: var(--vd-select-arrow-size) 12px;\n  border: var(--vd-input-border-width) solid var(--vd-input-border-color);\n  border-radius: var(--vd-input-border-radius);\n  transition: var(--vd-input-transition);\n  appearance: none;\n  cursor: pointer;\n}\n\nselect.vd-input:focus,\nselect:focus,\n.select-input:focus,\n.custom-select-input:focus {\n  outline: 0;\n  border-color: var(--vd-input-focus-border-color);\n  box-shadow: var(--vd-input-focus-box-shadow);\n  background-image: url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2322b8cf' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e\");\n}\n\nselect.vd-input:disabled,\nselect:disabled,\n.select-input:disabled,\n.custom-select-input:disabled {\n  background-color: var(--vd-input-bg-disabled);\n  opacity: 0.6;\n  cursor: not-allowed;\n  background-image: url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23868e96' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e\");\n}\n\n/* Select States */\nselect.vd-input.vd-input-error,\nselect.vd-input.is-error,\n.select-input.vd-input-error,\n.select-input.is-error {\n  border-color: var(--vd-color-error);\n}\n\nselect.vd-input.vd-input-success,\nselect.vd-input.is-success,\n.select-input.vd-input-success,\n.select-input.is-success {\n  border-color: var(--vd-color-success);\n}\n\n/* Select Sizes */\nselect.vd-input-sm,\n.select-input-sm,\n.custom-select-sm {\n  padding: var(--vd-input-padding-y-sm) var(--vd-input-padding-x-sm);\n  padding-right: calc(var(--vd-input-padding-x-sm) + var(--vd-select-arrow-size) + 0.5rem);\n  font-size: var(--vd-input-font-size-sm);\n  border-radius: var(--vd-input-border-radius-sm);\n  background-size: 14px 10px;\n}\n\nselect.vd-input-lg,\n.select-input-lg,\n.custom-select-lg {\n  padding: var(--vd-input-padding-y-lg) var(--vd-input-padding-x-lg);\n  padding-right: calc(var(--vd-input-padding-x-lg) + var(--vd-select-arrow-size) + 0.5rem);\n  font-size: var(--vd-input-font-size-lg);\n  border-radius: var(--vd-input-border-radius-lg);\n  background-size: 18px 14px;\n}\n\n/* Multi-Select */\nselect[multiple].vd-input,\nselect[multiple],\n.select-input[multiple],\n.custom-select-input[multiple] {\n  padding: var(--vd-input-padding-y) var(--vd-input-padding-x);\n  padding-right: var(--vd-input-padding-x);\n  background-image: none;\n  min-height: 120px;\n}\n\nselect[multiple].vd-input option,\nselect[multiple] option,\n.select-input[multiple] option,\n.custom-select-input[multiple] option {\n  padding: 0.5rem;\n}\n\n/* Select with Custom Dropdown (for JS enhancement) */\n.custom-select-dropdown {\n  position: absolute;\n  top: 100%;\n  left: 0;\n  right: 0;\n  z-index: 1000;\n  display: none;\n  margin-top: 0.25rem;\n  background-color: var(--vd-input-bg);\n  border: 1px solid var(--vd-input-border-color);\n  border-radius: var(--vd-input-border-radius);\n  box-shadow: var(--vd-shadow-lg);\n  max-height: 300px;\n  overflow-y: auto;\n}\n\n.custom-select-dropdown.is-open {\n  display: block;\n}\n\n.custom-select-option {\n  display: block;\n  width: 100%;\n  padding: var(--vd-input-padding-y) var(--vd-input-padding-x);\n  font-size: var(--vd-input-font-size);\n  color: var(--vd-text-primary);\n  background-color: transparent;\n  border: none;\n  text-align: left;\n  cursor: pointer;\n  transition: var(--vd-transition-bg);\n}\n\n.custom-select-option:hover,\n.custom-select-option:focus {\n  background-color: var(--vd-color-primary-alpha-10);\n  outline: none;\n}\n\n.custom-select-option.is-selected {\n  background-color: var(--vd-color-primary-alpha-10);\n  color: var(--vd-color-primary);\n  font-weight: var(--vd-font-weight-medium);\n}\n\n.custom-select-option.is-disabled,\n.custom-select-option[data-value=\"\"] {\n  opacity: 0.6;\n  cursor: not-allowed;\n  color: var(--vd-text-muted);\n}\n\n.custom-select-option-group {\n  padding: 0.5rem var(--vd-input-padding-x);\n  font-size: var(--vd-font-size-sm);\n  font-weight: var(--vd-font-weight-semibold);\n  color: var(--vd-text-muted);\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n}\n\n.custom-select-search {\n  padding: var(--vd-input-padding-y) var(--vd-input-padding-x);\n  border-bottom: 1px solid var(--vd-input-border-color);\n}\n\n.custom-select-search input {\n  width: 100%;\n  padding: 0.5rem;\n  font-size: var(--vd-input-font-size-sm);\n  border: 1px solid var(--vd-input-border-color);\n  border-radius: var(--vd-input-border-radius-sm);\n}\n\n/* Dark Mode - Select Arrow Colors */\n[data-theme=\"dark\"] select.vd-input,\n[data-theme=\"dark\"] select,\n[data-theme=\"dark\"] .select-input,\n[data-theme=\"dark\"] .custom-select-input,\n[data-theme=\"dark\"] .custom-select-button {\n  background-image: url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23adb5bd' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e\");\n}\n\n[data-theme=\"dark\"] select.vd-input:focus,\n[data-theme=\"dark\"] select:focus,\n[data-theme=\"dark\"] .select-input:focus,\n[data-theme=\"dark\"] .custom-select-input:focus,\n[data-theme=\"dark\"] .custom-select-button:focus {\n  background-image: url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%233bc9db' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e\");\n}\n\n[data-theme=\"dark\"] select.vd-input:disabled,\n[data-theme=\"dark\"] select:disabled,\n[data-theme=\"dark\"] .select-input:disabled,\n[data-theme=\"dark\"] .custom-select-input:disabled,\n[data-theme=\"dark\"] .custom-select-button:disabled {\n  background-image: url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23868e96' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e\");\n}\n\n/* Mobile Touch Target Optimization */\n@media (max-width: 767px) {\n\n  .vd-input,\n  input[type=\"text\"],\n  input[type=\"email\"],\n  input[type=\"password\"],\n  input[type=\"number\"],\n  input[type=\"tel\"],\n  input[type=\"url\"],\n  input[type=\"search\"],\n  input[type=\"date\"],\n  input[type=\"time\"],\n  input[type=\"datetime-local\"],\n  .textarea,\n  textarea,\n  select,\n  .select-input,\n  .custom-select-input,\n  .custom-select-button {\n    min-height: 44px;\n    padding-top: 0.625rem;\n    padding-bottom: 0.625rem;\n  }\n\n  .checkbox-label,\n  .vd-form-check-label,\n  .radio-label,\n  .vd-form-radio-label,\n  .switch-label,\n  .vd-form-switch-label {\n    min-height: 44px;\n    padding-top: 0.5rem;\n    padding-bottom: 0.5rem;\n  }\n}\n\n/**\n * Vanduo Framework - Cards\n * Card component for content containers\n */\n\n:root {\n  /* Card Padding (Fibonacci: 13, 21, 34) */\n  --vd-card-padding: 1.3125rem;\n  /* 21px - fib */\n  --vd-card-padding-sm: 0.8125rem;\n  /* 13px - fib */\n  --vd-card-padding-lg: 2.125rem;\n  /* 34px - fib */\n\n  /* Card Border */\n  --vd-card-border-width: 1px;\n  --vd-card-border-color: var(--vd-border-color);\n  --vd-card-border-radius: var(--vd-btn-border-radius-lg);\n\n  /* Card Background */\n  --vd-card-bg: var(--vd-color-white);\n  --vd-card-bg-filled: var(--vd-bg-secondary);\n\n  /* Card Shadow */\n  --vd-card-shadow: var(--vd-shadow-sm);\n  --vd-card-shadow-elevated: var(--vd-shadow-md);\n\n  /* Card Glow Effect - uses primary color scale */\n  --vd-card-glow-color: var(--vd-primary-2);\n  --vd-card-glow-border-color: var(--vd-primary-3);\n}\n\n/* Dark Theme Overrides */\n[data-theme=\"dark\"] {\n  --vd-card-bg: var(--vd-bg-secondary);\n  --vd-card-bg-filled: var(--vd-bg-primary);\n  /* Stronger elevation on dark surfaces */\n  --vd-card-shadow-elevated: var(--vd-shadow-lg);\n  /* Glow uses lighter primary shades for dark mode visibility */\n  --vd-card-glow-color: var(--vd-primary-3);\n  --vd-card-glow-border-color: var(--vd-primary-4);\n}\n\n@media (prefers-color-scheme: dark) {\n  :root:not([data-theme]) {\n    --vd-card-bg: var(--vd-bg-secondary);\n    --vd-card-bg-filled: var(--vd-bg-primary);\n    --vd-card-shadow-elevated: var(--vd-shadow-lg);\n    /* Glow uses lighter primary shades for dark mode visibility */\n    --vd-card-glow-color: var(--vd-primary-3);\n    --vd-card-glow-border-color: var(--vd-primary-4);\n  }\n}\n\n/* Base Card */\n.vd-card {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n  word-wrap: break-word;\n  background-color: var(--vd-card-bg);\n  background-clip: border-box;\n  border: var(--vd-card-border-width) solid var(--vd-card-border-color);\n  border-radius: var(--vd-card-border-radius);\n  box-shadow: var(--vd-card-shadow);\n}\n\n.vd-card-glass {\n  background: var(--vd-glass-bg-light);\n  border-color: var(--vd-glass-border-light);\n  box-shadow: var(--vd-glass-shadow);\n  backdrop-filter: blur(var(--vd-glass-blur)) saturate(var(--vd-glass-saturate));\n  -webkit-backdrop-filter: blur(var(--vd-glass-blur)) saturate(var(--vd-glass-saturate));\n}\n\n/* Card Variants - Elevated (default) */\n.vd-card-elevated,\n.vd-card {\n  box-shadow: var(--vd-card-shadow-elevated);\n  transition: box-shadow 0.2s ease;\n  /* Fix Safari disappearing bug during transform transitions */\n  -webkit-backface-visibility: hidden;\n  backface-visibility: hidden;\n  transform: translateZ(0);\n}\n\n/* Subtle lift on hover — skip links (they have their own hover) and non-elevated variants */\n.vd-card:not(a):not(.vd-card-outlined):not(.vd-card-filled):not(.vd-card-glass):not(.vd-card-glow):hover {\n  box-shadow: var(--vd-shadow-lg);\n}\n\n/* Card Variants - Outlined */\n.vd-card-outlined {\n  box-shadow: none;\n  border: var(--vd-card-border-width) solid var(--vd-card-border-color);\n}\n\n/* Card Variants - Filled */\n.vd-card-filled {\n  background-color: var(--vd-card-bg-filled);\n  box-shadow: none;\n  border: none;\n}\n\n/* Card Header */\n.vd-card-header {\n  padding: var(--vd-card-padding);\n  margin-bottom: 0;\n  background-color: transparent;\n  border-bottom: var(--vd-card-border-width) solid var(--vd-card-border-color);\n  border-top-left-radius: calc(var(--vd-card-border-radius) - var(--vd-card-border-width));\n  border-top-right-radius: calc(var(--vd-card-border-radius) - var(--vd-card-border-width));\n}\n\n.vd-card-header:first-child {\n  border-top-left-radius: var(--vd-card-border-radius);\n  border-top-right-radius: var(--vd-card-border-radius);\n}\n\n.vd-card-header-sm {\n  padding: var(--vd-card-padding-sm);\n}\n\n.vd-card-header-lg {\n  padding: var(--vd-card-padding-lg);\n}\n\n/* Card Body */\n.vd-card-body {\n  flex: 1 1 auto;\n  padding: var(--vd-card-padding);\n}\n\n.vd-card-body-sm {\n  padding: var(--vd-card-padding-sm);\n}\n\n.vd-card-body-lg {\n  padding: var(--vd-card-padding-lg);\n}\n\n/* Card Footer */\n.vd-card-footer {\n  padding: var(--vd-card-padding);\n  margin-top: 0;\n  background-color: transparent;\n  border-top: var(--vd-card-border-width) solid var(--vd-card-border-color);\n  border-bottom-left-radius: calc(var(--vd-card-border-radius) - var(--vd-card-border-width));\n  border-bottom-right-radius: calc(var(--vd-card-border-radius) - var(--vd-card-border-width));\n}\n\n.vd-card-footer:last-child {\n  border-bottom-left-radius: var(--vd-card-border-radius);\n  border-bottom-right-radius: var(--vd-card-border-radius);\n}\n\n.vd-card-footer-sm {\n  padding: var(--vd-card-padding-sm);\n}\n\n.vd-card-footer-lg {\n  padding: var(--vd-card-padding-lg);\n}\n\n/* Card Image */\n.vd-card-image {\n  width: 100%;\n  height: auto;\n  border-top-left-radius: calc(var(--vd-card-border-radius) - var(--vd-card-border-width));\n  border-top-right-radius: calc(var(--vd-card-border-radius) - var(--vd-card-border-width));\n}\n\n.vd-card-image:first-child {\n  border-top-left-radius: var(--vd-card-border-radius);\n  border-top-right-radius: var(--vd-card-border-radius);\n}\n\n.vd-card-image:last-child {\n  border-bottom-left-radius: var(--vd-card-border-radius);\n  border-bottom-right-radius: var(--vd-card-border-radius);\n}\n\n/* Card Image Container */\n.vd-card-image-container {\n  position: relative;\n  overflow: hidden;\n  border-top-left-radius: calc(var(--vd-card-border-radius) - var(--vd-card-border-width));\n  border-top-right-radius: calc(var(--vd-card-border-radius) - var(--vd-card-border-width));\n}\n\n.vd-card-image-container:first-child {\n  border-top-left-radius: var(--vd-card-border-radius);\n  border-top-right-radius: var(--vd-card-border-radius);\n}\n\n.vd-card-image-container img {\n  width: 100%;\n  height: auto;\n  display: block;\n}\n\n/* Card Title */\n.vd-card-title {\n  margin-bottom: 0.5rem;\n  font-size: var(--vd-font-size-xl);\n  font-weight: var(--vd-font-weight-semibold);\n  color: var(--vd-text-primary);\n}\n\n.vd-card-title:last-child {\n  margin-bottom: 0;\n}\n\n/* Card Subtitle */\n.vd-card-subtitle {\n  margin-top: -0.25rem;\n  margin-bottom: 0.5rem;\n  font-size: var(--vd-font-size-sm);\n  color: var(--vd-text-secondary);\n}\n\n/* Card Text */\n.vd-card-text {\n  margin-bottom: 1rem;\n  color: var(--vd-text-primary);\n}\n\n.vd-card-text:last-child {\n  margin-bottom: 0;\n}\n\n/* Card Actions */\n.vd-card-actions {\n  display: flex;\n  gap: 0.5rem;\n  padding: var(--vd-card-padding);\n  border-top: var(--vd-card-border-width) solid var(--vd-card-border-color);\n}\n\n.vd-card-actions-sm {\n  padding: var(--vd-card-padding-sm);\n}\n\n.vd-card-actions-lg {\n  padding: var(--vd-card-padding-lg);\n}\n\n/* Card with No Padding */\n.vd-card-no-padding .vd-card-body {\n  padding: 0;\n}\n\n.vd-card-no-padding .vd-card-header {\n  padding: var(--vd-card-padding);\n}\n\n.vd-card-no-padding .vd-card-footer {\n  padding: var(--vd-card-padding);\n}\n\n/* Card Sizes - Compact */\n.vd-card-compact .vd-card-header,\n.vd-card-compact .vd-card-body,\n.vd-card-compact .vd-card-footer {\n  padding: var(--vd-card-padding-sm);\n}\n\n/* Card Sizes - Spacious */\n.vd-card-spacious .vd-card-header,\n.vd-card-spacious .vd-card-body,\n.vd-card-spacious .vd-card-footer {\n  padding: var(--vd-card-padding-lg);\n}\n\n/* Card Glow Effect */\n.vd-card-glow {\n  transition: box-shadow 0.3s ease, border-color 0.3s ease;\n  border-color: var(--vd-card-border-color);\n}\n\n.vd-card-glow:hover {\n  box-shadow: 0 0 15px 0 var(--vd-card-glow-color), var(--vd-card-shadow);\n  border-color: var(--vd-card-glow-border-color);\n}\n\n/* Card Link */\na.vd-card {\n  text-decoration: none;\n  color: inherit;\n  transition: transform 0.2s ease, box-shadow 0.2s ease;\n}\n\na.vd-card:hover {\n  text-decoration: none;\n  transform: translateY(-2px) translateZ(0);\n  box-shadow: var(--vd-shadow-xl);\n}\n\na.vd-card.vd-card-glow:hover {\n  box-shadow: 0 0 15px 0 var(--vd-card-glow-color), var(--vd-shadow-xl);\n  border-color: var(--vd-card-glow-border-color);\n}\n\na.vd-card:active {\n  transform: translateY(0) translateZ(0);\n}\n\n/* Card Groups (for multiple cards) */\n.vd-card-group {\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n  /* Fibonacci-inspired spacing */\n}\n\n@media (min-width: 768px) {\n  .vd-card-group {\n    flex-direction: row;\n  }\n\n  .vd-card-group>.vd-card {\n    flex: 1 1 0%;\n  }\n}\n\n/**\n * Vanduo Framework — Expanding flex cards\n *\n * Adapted from MIT-licensed CodePen \"Expanding flex cards\" by Zed Dash:\n * https://codepen.io/z-/pen/OBPJKK\n *\n * Usage:\n *   <div class=\"vd-expanding-cards\" data-vd-expanding-cards>\n *     <div class=\"vd-expanding-card is-active\" style=\"--vd-expanding-card-bg: url('components/...')\">\n *       <div class=\"vd-expanding-card-shadow\"></div>\n *       <div class=\"vd-expanding-card-label\">...</div>\n *     </div>\n *   </div>\n */\n\n.vd-expanding-cards {\n  display: flex;\n  flex-direction: row;\n  align-items: stretch;\n  overflow: hidden;\n  min-width: 600px;\n  max-width: 900px;\n  width: calc(100% - 100px);\n  height: 400px;\n}\n\n.vd-expanding-card {\n  position: relative;\n  overflow: hidden;\n  min-width: 60px;\n  margin: 10px;\n  flex-grow: 1;\n  border-radius: 30px;\n  cursor: pointer;\n  background: var(--vd-expanding-card-bg, var(--vd-expanding-card-bg-default, #e6e9ed));\n  background-repeat: no-repeat;\n  background-size: cover;\n  background-position: center;\n  transition: 0.5s cubic-bezier(0.05, 0.61, 0.41, 0.95);\n}\n\n.vd-expanding-card:nth-child(1) {\n  --vd-expanding-card-bg-default: #ed5565;\n}\n\n.vd-expanding-card:nth-child(2) {\n  --vd-expanding-card-bg-default: #fc6e51;\n}\n\n.vd-expanding-card:nth-child(3) {\n  --vd-expanding-card-bg-default: #ffce54;\n}\n\n.vd-expanding-card:nth-child(4) {\n  --vd-expanding-card-bg-default: #2ecc71;\n}\n\n.vd-expanding-card:nth-child(5) {\n  --vd-expanding-card-bg-default: #5d9cec;\n}\n\n.vd-expanding-card:nth-child(6) {\n  --vd-expanding-card-bg-default: #ac92ec;\n}\n\n.vd-expanding-card.is-active {\n  flex-grow: 10000;\n  transform: scale(1);\n  max-width: 600px;\n  margin: 0;\n  border-radius: 40px;\n}\n\n.vd-expanding-card.is-active .vd-expanding-card-shadow {\n  box-shadow:\n    inset 0 -120px 120px -120px black,\n    inset 0 -120px 120px -100px black;\n}\n\n.vd-expanding-card.is-active .vd-expanding-card-label {\n  bottom: 20px;\n  left: 20px;\n}\n\n.vd-expanding-card.is-active .vd-expanding-card-info > div {\n  left: 0;\n  opacity: 1;\n}\n\n.vd-expanding-card:not(.is-active) {\n  flex-grow: 1;\n  border-radius: 30px;\n}\n\n.vd-expanding-card:not(.is-active) .vd-expanding-card-shadow {\n  bottom: -40px;\n  box-shadow:\n    inset 0 -120px 0 -120px black,\n    inset 0 -120px 0 -100px black;\n}\n\n.vd-expanding-card:not(.is-active) .vd-expanding-card-label {\n  bottom: 10px;\n  left: 10px;\n}\n\n.vd-expanding-card:not(.is-active) .vd-expanding-card-info > div {\n  left: 20px;\n  opacity: 0;\n}\n\n.vd-expanding-card-shadow {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  height: 120px;\n  transition: 0.5s cubic-bezier(0.05, 0.61, 0.41, 0.95);\n}\n\n.vd-expanding-card-label {\n  display: flex;\n  position: absolute;\n  right: 0;\n  height: 40px;\n  transition: 0.5s cubic-bezier(0.05, 0.61, 0.41, 0.95);\n}\n\n.vd-expanding-card-icon {\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  min-width: 40px;\n  max-width: 40px;\n  height: 40px;\n  border-radius: 100%;\n  background-color: #fff;\n  color: var(--vd-expanding-card-bg-default, var(--vd-color-primary, #3b82f6));\n}\n\n.vd-expanding-card-info {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  margin-left: 10px;\n  color: #fff;\n  white-space: pre;\n}\n\n.vd-expanding-card-info > div {\n  position: relative;\n  transition:\n    0.5s cubic-bezier(0.05, 0.61, 0.41, 0.95),\n    opacity 0.5s ease-out;\n}\n\n.vd-expanding-card-title {\n  font-weight: bold;\n  font-size: 1.2rem;\n}\n\n.vd-expanding-card-subtitle {\n  transition-delay: 0.1s;\n}\n\n/* Mobile: vertical stack, expand in place (mirrors desktop flex-grow model) */\n@media screen and (max-width: 767.98px) {\n  .vd-expanding-cards {\n    --vd-expanding-card-mobile-stripe: 56px;\n    --vd-expanding-card-mobile-active: clamp(200px, 55vw, 280px);\n    --vd-expanding-card-mobile-gap: 8px;\n\n    flex-direction: column;\n    align-items: stretch;\n    overflow: hidden;\n    min-width: 0;\n    max-width: 100%;\n    width: 100%;\n    height: min(\n      72vh,\n      calc(\n        var(--vd-expanding-card-mobile-active) +\n          5 * (var(--vd-expanding-card-mobile-stripe) + var(--vd-expanding-card-mobile-gap))\n      )\n    );\n    gap: var(--vd-expanding-card-mobile-gap);\n  }\n\n  .vd-expanding-card {\n    min-width: 0;\n    width: 100%;\n    margin: 0;\n    flex: 1 1 var(--vd-expanding-card-mobile-stripe);\n    min-height: var(--vd-expanding-card-mobile-stripe);\n    transition:\n      flex 0.5s cubic-bezier(0.05, 0.61, 0.41, 0.95),\n      min-height 0.5s cubic-bezier(0.05, 0.61, 0.41, 0.95),\n      border-radius 0.5s cubic-bezier(0.05, 0.61, 0.41, 0.95),\n      margin 0.5s cubic-bezier(0.05, 0.61, 0.41, 0.95);\n  }\n\n  .vd-expanding-card.is-active {\n    flex: 10000 1 var(--vd-expanding-card-mobile-active);\n    min-height: var(--vd-expanding-card-mobile-active);\n    max-width: none;\n    border-radius: 32px;\n  }\n\n  .vd-expanding-card:not(.is-active) {\n    flex: 1 1 var(--vd-expanding-card-mobile-stripe);\n    min-height: var(--vd-expanding-card-mobile-stripe);\n    border-radius: 28px;\n  }\n\n  .vd-expanding-card.is-active .vd-expanding-card-shadow {\n    box-shadow:\n      inset 0 -120px 120px -120px black,\n      inset 0 -120px 120px -100px black;\n  }\n\n  .vd-expanding-card:not(.is-active) .vd-expanding-card-shadow {\n    bottom: 0;\n    height: 100%;\n    box-shadow: inset 0 0 80px 0 rgb(0 0 0 / 35%);\n  }\n\n  .vd-expanding-card.is-active .vd-expanding-card-label {\n    bottom: 20px;\n    left: 20px;\n    top: auto;\n    transform: none;\n    align-items: flex-end;\n  }\n\n  .vd-expanding-card:not(.is-active) .vd-expanding-card-label {\n    bottom: 8px;\n    left: 12px;\n    top: auto;\n    right: auto;\n    height: 40px;\n    transform: none;\n    align-items: center;\n  }\n\n  .vd-expanding-card:not(.is-active) .vd-expanding-card-info {\n    min-width: 0;\n    flex: 1;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n\n  .vd-expanding-card:not(.is-active) .vd-expanding-card-info > div {\n    left: 0;\n    opacity: 1;\n  }\n\n  .vd-expanding-card:not(.is-active) .vd-expanding-card-subtitle {\n    opacity: 0;\n    max-height: 0;\n    overflow: hidden;\n  }\n\n  .vd-expanding-card.is-active .vd-expanding-card-subtitle {\n    opacity: 1;\n    max-height: 2em;\n  }\n\n  .vd-expanding-card:not(.is-active) .vd-expanding-card-title {\n    font-size: 1rem;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .vd-expanding-card,\n  .vd-expanding-card-shadow,\n  .vd-expanding-card-label,\n  .vd-expanding-card-info > div {\n    transition: none !important;\n  }\n}\n\n/**\n * Vanduo Framework - Navbar\n * Navigation bar component with responsive mobile menu\n */\n\n:root {\n  /* Navbar Colors */\n  --vd-navbar-bg: var(--vd-color-white);\n  --vd-navbar-bg-dark: var(--vd-bg-dark);\n  --vd-navbar-text-color: var(--vd-text-primary);\n  --vd-navbar-text-color-dark: var(--vd-text-inverse);\n  --vd-navbar-link-color: var(--vd-text-primary);\n  --vd-navbar-link-hover-color: var(--vd-color-primary);\n  --vd-navbar-link-active-color: var(--vd-color-primary);\n  --vd-navbar-border-color: var(--vd-border-color);\n  \n  /* Navbar Spacing (Fibonacci) */\n  --vd-navbar-padding-y: 0.8125rem;   /* 13px - fib */\n  --vd-navbar-padding-x: 1.3125rem;   /* 21px - fib (21/13 ~ phi) */\n  --vd-navbar-height: 3.4375rem;      /* 55px - fib */\n  --vd-navbar-brand-font-size: var(--vd-font-size-xl);\n  --vd-navbar-nav-gap: 1.3125rem;     /* 21px - fib */\n  --vd-navbar-actions-gap: 2.125rem;  /* 34px - fib */\n\n  /* Mobile Menu */\n  --vd-navbar-mobile-menu-bg: var(--vd-color-white);\n  --vd-navbar-mobile-menu-bg-dark: var(--vd-bg-dark);\n  --vd-navbar-mobile-menu-width: 233px; /* fib */\n  --vd-navbar-mobile-overlay-bg: rgba(0, 0, 0, 0.5);\n}\n\n/* Dark Theme Overrides */\n[data-theme=\"dark\"] {\n  --vd-navbar-bg: var(--vd-bg-primary);\n  --vd-navbar-text-color: var(--vd-text-primary);\n  --vd-navbar-link-color: var(--vd-text-primary);\n  --vd-navbar-mobile-menu-bg: var(--vd-bg-primary);\n}\n\n@media (prefers-color-scheme: dark) {\n  :root:not([data-theme]) {\n    --vd-navbar-bg: var(--vd-bg-primary);\n    --vd-navbar-text-color: var(--vd-text-primary);\n    --vd-navbar-link-color: var(--vd-text-primary);\n    --vd-navbar-mobile-menu-bg: var(--vd-bg-primary);\n  }\n}\n\n/* Base Navbar */\n.vd-navbar {\n  position: relative;\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  justify-content: space-between;\n  padding: var(--vd-navbar-padding-y) var(--vd-navbar-padding-x);\n  background-color: var(--vd-navbar-bg);\n  border-bottom: 1px solid var(--vd-navbar-border-color);\n  min-height: var(--vd-navbar-height);\n}\n\n/* Navbar Variant - Glass */\n.vd-navbar-glass {\n  background: var(--vd-glass-bg-light);\n  border-bottom: 1px solid var(--vd-glass-border-light);\n  box-shadow: var(--vd-glass-shadow);\n  backdrop-filter: blur(var(--vd-glass-blur)) saturate(var(--vd-glass-saturate));\n  -webkit-backdrop-filter: blur(var(--vd-glass-blur)) saturate(var(--vd-glass-saturate));\n  transition:\n    background var(--vd-transition-normal, 0.25s ease),\n    border-color var(--vd-transition-normal, 0.25s ease),\n    box-shadow var(--vd-transition-normal, 0.25s ease),\n    backdrop-filter var(--vd-transition-normal, 0.25s ease);\n}\n\n/* Scroll-activated: transparent at rest, frosted glass once scrolled */\n.vd-navbar-glass:not(.vd-navbar-scrolled) {\n  background: transparent;\n  border-bottom-color: transparent;\n  box-shadow: none;\n  backdrop-filter: none;\n  -webkit-backdrop-filter: none;\n}\n\n/* Strong frosted surface once scroll activates glass (beyond vd-glass-xl) */\n.vd-navbar-glass.vd-navbar-scrolled {\n  --vd-glass-blur: 80px;\n  --vd-glass-saturate: 2.6;\n}\n\n.vd-navbar-fixed.vd-navbar-glass.vd-navbar-scrolled,\n.vd-navbar-fixed-top.vd-navbar-glass.vd-navbar-scrolled {\n  box-shadow: var(--vd-glass-shadow);\n}\n\n/* Navbar Container - matches .vd-container-responsive breakpoints for alignment with page content */\n.vd-navbar-container {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  justify-content: space-between;\n  width: 100%;\n  max-width: var(--vd-container-max-width);\n  margin-left: auto;\n  margin-right: auto;\n  padding-left: var(--vd-container-padding);\n  padding-right: var(--vd-container-padding);\n}\n\n@media (min-width: 1200px) {\n  .vd-navbar-container {\n    max-width: var(--vd-container-xl);\n  }\n}\n\n@media (min-width: 1400px) {\n  .vd-navbar-container {\n    max-width: var(--vd-container-2xl);\n  }\n}\n\n/* Navbar Brand */\n.vd-navbar-brand {\n  display: inline-flex;\n  align-items: center;\n  margin-right: 1rem;\n  margin-bottom: 0.5rem;\n  font-size: var(--vd-navbar-brand-font-size);\n  font-weight: var(--vd-font-weight-bold);\n  line-height: 1;\n  white-space: nowrap;\n  color: var(--vd-navbar-text-color);\n  text-decoration: none;\n  transition: color 0.2s ease;\n}\n\n.vd-navbar-brand a {\n  color: inherit;\n  text-decoration: none;\n  font-weight: inherit;\n}\n\n.vd-navbar-brand:hover,\n.vd-navbar-brand:focus {\n  color: var(--vd-navbar-link-hover-color);\n  text-decoration: none;\n}\n\n.vd-navbar-brand img {\n  height: 2rem;\n  width: auto;\n  margin-right: 0.5rem;\n}\n\n/* Navbar Navigation */\n.vd-navbar-nav {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  padding-left: 0;\n  margin-bottom: 0;\n  list-style: none;\n  gap: 0;\n}\n\n.vd-navbar-nav .vd-nav-link {\n  padding: 0.5rem 1rem;\n  color: var(--vd-navbar-link-color);\n  text-decoration: none;\n  transition: color 0.2s ease, background-color 0.2s ease;\n  display: block;\n}\n\n.vd-navbar-nav .vd-nav-link:hover,\n.vd-navbar-nav .vd-nav-link:focus {\n  color: var(--vd-navbar-link-hover-color);\n  text-decoration: none;\n  background-color: rgba(0, 0, 0, 0.05);\n}\n\n.vd-navbar-nav .vd-nav-link:focus-visible {\n  outline: 2px solid var(--vd-color-primary);\n  outline-offset: 2px;\n}\n\n.vd-navbar-nav .vd-nav-link.active {\n  color: var(--vd-navbar-link-active-color);\n  font-weight: var(--vd-font-weight-semibold);\n}\n\n/* Navbar Toggle (Hamburger Menu) */\n.vd-navbar-toggle,\n.vd-navbar-burger {\n  display: none;\n  flex-direction: column;\n  justify-content: space-around;\n  width: 2rem;\n  height: 2rem;\n  background: transparent;\n  border: none;\n  cursor: pointer;\n  padding: 0;\n  z-index: 1001;\n}\n\n.vd-navbar-toggle span,\n.vd-navbar-burger span {\n  width: 2rem;\n  height: 2px;\n  background-color: var(--vd-navbar-text-color);\n  border-radius: 10px;\n  transition: all 0.3s ease;\n  transform-origin: center;\n}\n\n.vd-navbar-toggle.is-active span:nth-child(1),\n.vd-navbar-burger.is-active span:nth-child(1) {\n  transform: rotate(45deg) translate(5px, 5px);\n}\n\n.vd-navbar-toggle.is-active span:nth-child(2),\n.vd-navbar-burger.is-active span:nth-child(2) {\n  opacity: 0;\n}\n\n.vd-navbar-toggle.is-active span:nth-child(3),\n.vd-navbar-burger.is-active span:nth-child(3) {\n  transform: rotate(-45deg) translate(7px, -6px);\n}\n\n/* Mobile Menu */\n.vd-navbar-menu {\n  display: flex;\n  flex-basis: 100%;\n  flex-grow: 1;\n  align-items: center;\n}\n\n.vd-navbar-menu.is-open {\n  display: flex;\n}\n\n/* Navbar Actions */\n.vd-navbar-actions {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n}\n\n/* Mobile Menu Overlay */\n.vd-navbar-overlay {\n  display: none;\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background-color: var(--vd-navbar-mobile-overlay-bg);\n  z-index: 999;\n  opacity: 0;\n  transition: opacity 0.3s ease;\n}\n\n.vd-navbar-overlay.is-active {\n  display: block;\n  opacity: 1;\n}\n\n/* Navbar Variants - Dark */\n.vd-navbar-dark {\n  background-color: var(--vd-navbar-bg-dark);\n  color: var(--vd-navbar-text-color-dark);\n  border-bottom-color: rgba(255, 255, 255, 0.1);\n}\n\n.vd-navbar-dark .vd-navbar-brand {\n  color: var(--vd-navbar-text-color-dark);\n}\n\n.vd-navbar-dark .vd-navbar-brand:hover,\n.vd-navbar-dark .vd-navbar-brand:focus {\n  color: var(--vd-color-primary-light);\n}\n\n.vd-navbar-dark .vd-navbar-nav .vd-nav-link {\n  color: rgba(255, 255, 255, 0.8);\n}\n\n.vd-navbar-dark .vd-navbar-nav .vd-nav-link:hover,\n.vd-navbar-dark .vd-navbar-nav .vd-nav-link:focus {\n  color: var(--vd-color-primary-light);\n  background-color: rgba(255, 255, 255, 0.1);\n}\n\n.vd-navbar-dark .vd-navbar-nav .vd-nav-link.active {\n  color: var(--vd-color-primary-light);\n}\n\n.vd-navbar-dark .vd-navbar-toggle span,\n.vd-navbar-dark .vd-navbar-burger span {\n  background-color: var(--vd-navbar-text-color-dark);\n}\n\n/* Navbar Variants - Transparent */\n.vd-navbar-transparent {\n  background-color: transparent;\n  border-bottom: none;\n}\n\n.vd-navbar-transparent.vd-navbar-scrolled {\n  background-color: var(--vd-navbar-bg);\n  border-bottom: 1px solid var(--vd-navbar-border-color);\n}\n\n.vd-navbar-transparent.vd-navbar-dark.vd-navbar-scrolled {\n  background-color: var(--vd-navbar-bg-dark);\n  border-bottom-color: rgba(255, 255, 255, 0.1);\n}\n\n/* Navbar Positioning - Fixed Top */\n.vd-navbar-fixed,\n.vd-navbar-fixed-top {\n  position: fixed;\n  top: 0;\n  right: 0;\n  left: 0;\n  z-index: 1000;\n  box-shadow: var(--vd-shadow-sm);\n}\n\n.vd-navbar-fixed ~ *,\n.vd-navbar-fixed-top ~ * {\n  padding-top: var(--vd-navbar-height);\n}\n\n/* Navbar Positioning - Fixed Bottom */\n.vd-navbar-fixed-bottom {\n  position: fixed;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  z-index: 1000;\n  box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1);\n}\n\n.vd-navbar-fixed-bottom ~ * {\n  padding-bottom: var(--vd-navbar-height);\n}\n\n/* Navbar Positioning - Sticky */\n.vd-navbar-sticky {\n  position: sticky;\n  top: 0;\n  z-index: 1000;\n  box-shadow: var(--vd-shadow-sm);\n}\n\n/* Navbar Dropdown */\n.vd-navbar-dropdown {\n  position: relative;\n}\n\n.vd-navbar-dropdown-menu {\n  position: absolute;\n  top: 100%;\n  left: 0;\n  z-index: 1000;\n  display: none;\n  min-width: 200px;\n  padding: 0.5rem 0;\n  margin: 0.125rem 0 0;\n  background-color: var(--vd-color-white);\n  border: 1px solid var(--vd-navbar-border-color);\n  border-radius: var(--vd-btn-border-radius);\n  box-shadow: var(--vd-shadow-md);\n  list-style: none;\n}\n\n.vd-navbar-dropdown-menu.is-open {\n  display: block;\n}\n\n.vd-navbar-dropdown-item {\n  display: block;\n  width: 100%;\n  padding: 0.5rem 1rem;\n  clear: both;\n  font-weight: var(--vd-font-weight-normal);\n  color: var(--vd-navbar-link-color);\n  text-align: inherit;\n  text-decoration: none;\n  white-space: nowrap;\n  background-color: transparent;\n  border: 0;\n  transition: background-color 0.2s ease, color 0.2s ease;\n}\n\n.vd-navbar-dropdown-item:hover,\n.vd-navbar-dropdown-item:focus {\n  color: var(--vd-navbar-link-hover-color);\n  background-color: var(--vd-bg-secondary);\n  text-decoration: none;\n}\n\n.vd-navbar-dropdown-item.active {\n  color: var(--vd-navbar-link-active-color);\n  background-color: var(--vd-color-primary-alpha-10);\n}\n\n.vd-navbar-dark .vd-navbar-dropdown-menu {\n  background-color: var(--vd-navbar-bg-dark);\n  border-color: rgba(255, 255, 255, 0.1);\n}\n\n.vd-navbar-dark .vd-navbar-dropdown-item {\n  color: rgba(255, 255, 255, 0.8);\n}\n\n.vd-navbar-dark .vd-navbar-dropdown-item:hover,\n.vd-navbar-dark .vd-navbar-dropdown-item:focus {\n  color: var(--vd-color-primary-light);\n  background-color: rgba(255, 255, 255, 0.1);\n}\n\n/* Desktop Layout */\n@media (min-width: 992px) {\n  .vd-navbar-container {\n    position: relative;\n  }\n\n  .vd-navbar-nav {\n    flex-direction: row;\n    flex-wrap: wrap;\n    gap: 0.5rem var(--vd-navbar-nav-gap);\n    position: absolute;\n    left: 50%;\n    transform: translateX(-50%);\n    z-index: 1;\n  }\n\n  .vd-navbar-nav .vd-nav-link {\n    padding: 0.5rem 0;\n    background-color: transparent;\n  }\n\n  .vd-navbar-nav .vd-nav-link:hover,\n  .vd-navbar-nav .vd-nav-link:focus {\n    background-color: transparent;\n  }\n\n  .vd-navbar-toggle,\n  .vd-navbar-burger {\n    display: none;\n  }\n\n  .vd-navbar-menu {\n    display: flex;\n    flex: 1;\n    flex-wrap: wrap;\n    align-items: center;\n    justify-content: flex-end;\n    min-width: 0;\n  }\n\n  .vd-navbar-actions {\n    margin-left: var(--vd-navbar-actions-gap);\n  }\n\n  .vd-navbar-dropdown-menu {\n    margin-top: 0.5rem;\n  }\n}\n\n/* Mobile Layout */\n@media (max-width: 991.98px) {\n  .vd-navbar-toggle,\n  .vd-navbar-burger {\n    display: flex;\n  }\n  \n  .vd-navbar-menu {\n    position: fixed;\n    top: 0;\n    right: -100%;\n    width: var(--vd-navbar-mobile-menu-width);\n    height: 100vh;\n    background-color: var(--vd-navbar-mobile-menu-bg);\n    flex-direction: column;\n    align-items: flex-start;\n    padding: 4rem 1.5rem 1.5rem;\n    box-shadow: -2px 0 8px rgba(0, 0, 0, 0.1);\n    transition: right 0.3s ease;\n    z-index: 1000;\n    overflow-y: auto;\n  }\n\n  .vd-navbar-glass .vd-navbar-menu {\n    background: var(--vd-glass-bg-light);\n    border-left: 1px solid var(--vd-glass-border-light);\n    backdrop-filter: blur(var(--vd-glass-blur)) saturate(var(--vd-glass-saturate));\n    -webkit-backdrop-filter: blur(var(--vd-glass-blur)) saturate(var(--vd-glass-saturate));\n  }\n  \n  .vd-navbar-menu.is-open {\n    right: 0;\n  }\n  \n  .vd-navbar-dark .vd-navbar-menu {\n    background-color: var(--vd-navbar-mobile-menu-bg-dark);\n  }\n  \n  .vd-navbar-nav {\n    width: 100%;\n    gap: 0;\n  }\n  \n  .vd-navbar-nav .vd-nav-link {\n    width: 100%;\n    padding: 1rem;\n    border-bottom: 1px solid var(--vd-navbar-border-color);\n  }\n  \n  .vd-navbar-nav .vd-nav-link:last-child {\n    border-bottom: none;\n  }\n  \n  .vd-navbar-dark .vd-navbar-nav .vd-nav-link {\n    border-bottom-color: rgba(255, 255, 255, 0.1);\n  }\n  \n  .vd-navbar-dropdown-menu {\n    position: static;\n    display: block;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    box-shadow: none;\n    background-color: var(--vd-bg-secondary);\n  }\n  \n  .vd-navbar-dark .vd-navbar-dropdown-menu {\n    background-color: rgba(255, 255, 255, 0.05);\n  }\n  \n  .vd-navbar-actions {\n    margin-top: 1rem;\n    padding-top: 1rem;\n    border-top: 1px solid var(--vd-navbar-border-color);\n    width: 100%;\n  }\n  \n  .vd-navbar-dark .vd-navbar-actions {\n    border-top-color: rgba(255, 255, 255, 0.1);\n  }\n}\n\n/* Navbar Utilities */\n.vd-navbar-expand {\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n}\n\n.vd-navbar-expand .vd-navbar-nav {\n  flex-direction: row;\n}\n\n.vd-navbar-expand .vd-navbar-toggle {\n  display: none;\n}\n\n/* Body Scroll Lock - class-based to avoid conflicts with modals */\n.body-navbar-open {\n  overflow: hidden;\n}\n\n\n/**\n * Vanduo Framework - Footer\n * Footer component for site footers\n */\n\n:root {\n  /* Footer Colors */\n  --vd-footer-bg: var(--vd-bg-secondary);\n  --vd-footer-bg-dark: var(--vd-bg-dark);\n  --vd-footer-text-color: var(--vd-text-primary);\n  --vd-footer-text-color-dark: var(--vd-text-inverse);\n  --vd-footer-link-color: var(--vd-text-secondary);\n  --vd-footer-link-hover-color: var(--vd-color-primary);\n  --vd-footer-border-color: var(--vd-border-color);\n  --vd-footer-heading-color: var(--vd-text-primary);\n  \n  /* Footer Spacing (Fibonacci) */\n  --vd-footer-padding-y: 3.4375rem;    /* 55px - fib */\n  --vd-footer-padding-x: 1.3125rem;    /* 21px - fib */\n  --vd-footer-padding-y-sm: 2.125rem;  /* 34px - fib */\n  --vd-footer-padding-y-lg: 5.5625rem; /* 89px - fib */\n  --vd-footer-section-spacing: 2.125rem; /* 34px - fib */\n}\n\n/* Dark Theme Overrides */\n[data-theme=\"dark\"] {\n  --vd-footer-bg: var(--vd-bg-secondary);\n  --vd-footer-text-color: var(--vd-text-primary);\n  --vd-footer-link-color: var(--vd-text-secondary);\n  --vd-footer-heading-color: var(--vd-text-primary);\n}\n\n@media (prefers-color-scheme: dark) {\n  :root:not([data-theme]) {\n    --vd-footer-bg: var(--vd-bg-secondary);\n    --vd-footer-text-color: var(--vd-text-primary);\n    --vd-footer-link-color: var(--vd-text-secondary);\n    --vd-footer-heading-color: var(--vd-text-primary);\n  }\n}\n\n/* Base Footer */\n.vd-footer {\n  padding: var(--vd-footer-padding-y) var(--vd-footer-padding-x);\n  background-color: var(--vd-footer-bg);\n  color: var(--vd-footer-text-color);\n  border-top: 1px solid var(--vd-footer-border-color);\n}\n\n/* Footer Container */\n.vd-footer-container {\n  max-width: var(--vd-container-max-width);\n  margin-left: auto;\n  margin-right: auto;\n  padding-left: var(--vd-container-padding);\n  padding-right: var(--vd-container-padding);\n}\n\n/* Footer Sections */\n.vd-footer-section {\n  margin-bottom: var(--vd-footer-section-spacing);\n}\n\n.vd-footer-section:last-child {\n  margin-bottom: 0;\n}\n\n/* Footer Headings */\n.vd-footer-heading {\n  font-size: var(--vd-font-size-lg);\n  font-weight: var(--vd-font-weight-semibold);\n  color: var(--vd-footer-heading-color);\n  margin-bottom: 1rem;\n  margin-top: 0;\n}\n\n/* Footer Links */\n.vd-footer-link {\n  display: inline-block;\n  color: var(--vd-footer-link-color);\n  text-decoration: none;\n  transition: color 0.2s ease;\n  margin-bottom: 0.5rem;\n}\n\n.vd-footer-link:hover {\n  color: var(--vd-footer-link-hover-color);\n  text-decoration: underline;\n}\n\n.vd-footer-link:focus {\n  outline: 2px solid var(--vd-color-primary);\n  outline-offset: 2px;\n  border-radius: 0.25rem;\n}\n\n/* Footer Lists */\n.vd-footer-list {\n  list-style: none;\n  padding: 0;\n  margin: 0;\n}\n\n.vd-footer-list-item {\n  margin-bottom: 0.5rem;\n}\n\n.vd-footer-list-item:last-child {\n  margin-bottom: 0;\n}\n\n/* Copyright Area */\n.vd-footer-copyright {\n  padding-top: 2rem;\n  margin-top: 2rem;\n  border-top: 1px solid var(--vd-footer-border-color);\n  text-align: center;\n  font-size: var(--vd-font-size-sm);\n  color: var(--vd-text-muted);\n}\n\n.vd-footer-copyright-left {\n  text-align: left;\n}\n\n.vd-footer-copyright-right {\n  text-align: right;\n}\n\n/* Multi-Column Footer Layouts */\n.vd-footer-2col,\n.vd-footer-3col,\n.vd-footer-4col {\n  display: grid;\n  gap: var(--vd-footer-section-spacing);\n}\n\n.vd-footer-2col {\n  grid-template-columns: 1fr;\n}\n\n.vd-footer-3col {\n  grid-template-columns: 1fr;\n}\n\n.vd-footer-4col {\n  grid-template-columns: 1fr;\n}\n\n@media (min-width: 768px) {\n  .vd-footer-2col {\n    grid-template-columns: repeat(2, 1fr);\n  }\n  \n  .vd-footer-3col {\n    grid-template-columns: repeat(3, 1fr);\n  }\n  \n  .vd-footer-4col {\n    grid-template-columns: repeat(4, 1fr);\n  }\n}\n\n/* Footer Variants - Dark */\n.vd-footer-dark {\n  background-color: var(--vd-footer-bg-dark);\n  color: var(--vd-footer-text-color-dark);\n  border-top-color: rgba(255, 255, 255, 0.1);\n}\n\n.vd-footer-dark .vd-footer-heading {\n  color: var(--vd-footer-text-color-dark);\n}\n\n.vd-footer-dark .vd-footer-link {\n  color: rgba(255, 255, 255, 0.7);\n}\n\n.vd-footer-dark .vd-footer-link:hover {\n  color: var(--vd-color-primary-light);\n}\n\n.vd-footer-dark .vd-footer-copyright {\n  border-top-color: rgba(255, 255, 255, 0.1);\n  color: rgba(255, 255, 255, 0.6);\n}\n\n/* Footer Sizes */\n.vd-footer-sm {\n  padding: var(--vd-footer-padding-y-sm) var(--vd-footer-padding-x);\n}\n\n.vd-footer-lg {\n  padding: var(--vd-footer-padding-y-lg) var(--vd-footer-padding-x);\n}\n\n/* Footer with Container */\n.vd-footer .container {\n  max-width: var(--vd-container-max-width);\n}\n\n/* Footer Brand/Logo Area */\n.vd-footer-brand {\n  margin-bottom: 1rem;\n}\n\n.vd-footer-brand img {\n  max-height: 2rem;\n  width: auto;\n}\n\n.vd-footer-brand-text {\n  font-size: var(--vd-font-size-xl);\n  font-weight: var(--vd-font-weight-bold);\n  color: var(--vd-footer-heading-color);\n  text-decoration: none;\n}\n\n.vd-footer-brand-text:hover {\n  text-decoration: none;\n  color: var(--vd-footer-link-hover-color);\n}\n\n/* Footer Social Links */\n.vd-footer-social {\n  display: flex;\n  gap: 1rem;\n  margin-top: 1rem;\n}\n\n.vd-footer-social-link {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 2.5rem;\n  height: 2.5rem;\n  border-radius: 50%;\n  background-color: rgba(0, 0, 0, 0.05);\n  color: var(--vd-footer-link-color);\n  text-decoration: none;\n  transition: all 0.2s ease;\n}\n\n.vd-footer-social-link:hover {\n  background-color: var(--vd-color-primary);\n  color: var(--vd-color-white);\n  transform: translateY(-2px);\n}\n\n.vd-footer-dark .vd-footer-social-link {\n  background-color: rgba(255, 255, 255, 0.1);\n  color: rgba(255, 255, 255, 0.7);\n}\n\n.vd-footer-dark .vd-footer-social-link:hover {\n  background-color: var(--vd-color-primary);\n  color: var(--vd-color-white);\n}\n\n/* Responsive Footer */\n@media (max-width: 767.98px) {\n  .vd-footer-2col,\n  .vd-footer-3col,\n  .vd-footer-4col {\n    grid-template-columns: 1fr;\n  }\n  \n  .vd-footer-copyright-left,\n  .vd-footer-copyright-right {\n    text-align: center;\n  }\n}\n\n/* Made with Kilo Code Section */\n.vd-footer-made-with {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 0.75rem;\n  padding: 1.5rem 0;\n  margin-top: 1.5rem;\n  border-top: 1px solid var(--vd-footer-border-color);\n}\n\n.vd-footer-made-with-text {\n  font-size: var(--vd-font-size-sm);\n  color: var(--vd-text-muted);\n  font-weight: var(--vd-font-weight-medium);\n  letter-spacing: 0.02em;\n}\n\n.vd-footer-kilo-link {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0.375rem;\n  border-radius: 0.5rem;\n  background: rgba(0, 0, 0, 0.04);\n  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n  text-decoration: none;\n}\n\n.vd-footer-kilo-link:hover {\n  background: rgba(0, 0, 0, 0.08);\n  transform: translateY(-2px);\n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\n}\n\n.vd-footer-kilo-link:focus {\n  outline: 2px solid var(--vd-color-primary);\n  outline-offset: 2px;\n}\n\n.vd-footer-kilo-logo {\n  height: 1.75rem;\n  width: auto;\n  display: block;\n  border-radius: 0.25rem;\n}\n\n/* Vertical Separator */\n.vd-footer-separator {\n  width: 1px;\n  height: 1.5rem;\n  background-color: var(--vd-footer-border-color);\n  margin: 0 0.5rem;\n}\n\n/* Buy Me A Coffee Link */\n.vd-footer-bmac-link {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n  text-decoration: none;\n}\n\n.vd-footer-bmac-link:hover {\n  transform: translateY(-2px);\n  filter: brightness(1.05);\n}\n\n.vd-footer-bmac-link:focus {\n  outline: 2px solid var(--vd-color-primary);\n  outline-offset: 2px;\n  border-radius: 0.25rem;\n}\n\n.vd-footer-bmac-logo {\n  height: 2.5rem;\n  width: auto;\n  display: block;\n  border-radius: 0.25rem;\n}\n\n/* Dark theme styles for Kilo Code section */\n[data-theme=\"dark\"] .vd-footer-kilo-link {\n  background: rgba(255, 255, 255, 0.08);\n}\n\n[data-theme=\"dark\"] .vd-footer-kilo-link:hover {\n  background: rgba(255, 255, 255, 0.14);\n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);\n}\n\n@media (prefers-color-scheme: dark) {\n  :root:not([data-theme]) .vd-footer-kilo-link {\n    background: rgba(255, 255, 255, 0.08);\n  }\n  \n  :root:not([data-theme]) .vd-footer-kilo-link:hover {\n    background: rgba(255, 255, 255, 0.14);\n    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);\n  }\n}\n\n/**\n * Vanduo Framework - Breadcrumbs\n * Breadcrumb navigation component\n */\n\n:root {\n  /* Breadcrumb Spacing (Fibonacci) */\n  --vd-breadcrumb-padding-y: 0.5rem;     /* 8px - fib */\n  --vd-breadcrumb-padding-x: 0;\n  --vd-breadcrumb-margin-bottom: 0.8125rem; /* 13px - fib */\n\n  /* Breadcrumb Separator */\n  --vd-breadcrumb-separator: \"/\";\n  --vd-breadcrumb-separator-color: var(--vd-text-muted);\n  --vd-breadcrumb-separator-padding: 0.5rem; /* 8px - fib */\n  \n  /* Breadcrumb Colors */\n  --vd-breadcrumb-bg: transparent;\n  --vd-breadcrumb-link-color: var(--vd-color-primary);\n  --vd-breadcrumb-link-hover-color: var(--vd-color-primary-dark);\n  --vd-breadcrumb-active-color: var(--vd-text-secondary);\n}\n\n/* Dark Theme Overrides - breadcrumbs use CSS variables that already adapt */\n/* No additional overrides needed as --vd-text-secondary and --vd-color-primary update in dark mode */\n\n/* Base Breadcrumbs */\n.vd-breadcrumbs,\n.vd-breadcrumb {\n  display: flex;\n  flex-wrap: wrap;\n  padding: var(--vd-breadcrumb-padding-y) var(--vd-breadcrumb-padding-x);\n  margin-bottom: var(--vd-breadcrumb-margin-bottom);\n  list-style: none;\n  background-color: var(--vd-breadcrumb-bg);\n  border-radius: var(--vd-btn-border-radius);\n}\n\n/* Breadcrumb Item */\n.vd-breadcrumb-item {\n  display: flex;\n  align-items: center;\n}\n\n.vd-breadcrumb-item + .vd-breadcrumb-item {\n  padding-left: var(--vd-breadcrumb-separator-padding);\n}\n\n.vd-breadcrumb-item + .vd-breadcrumb-item::before {\n  content: var(--vd-breadcrumb-separator);\n  display: inline-block;\n  padding-right: var(--vd-breadcrumb-separator-padding);\n  color: var(--vd-breadcrumb-separator-color);\n  font-weight: var(--vd-font-weight-normal);\n}\n\n/* Breadcrumb Link */\n.vd-breadcrumb-link,\n.vd-breadcrumb-item > a {\n  color: var(--vd-breadcrumb-link-color);\n  text-decoration: none;\n  transition: color 0.2s ease;\n}\n\n.vd-breadcrumb-link:hover,\n.vd-breadcrumb-item > a:hover {\n  color: var(--vd-breadcrumb-link-hover-color);\n  text-decoration: underline;\n}\n\n.vd-breadcrumb-link:focus,\n.vd-breadcrumb-item > a:focus {\n  outline: 2px solid var(--vd-color-primary);\n  outline-offset: 2px;\n  border-radius: 0.25rem;\n}\n\n/* Active/Current Breadcrumb Item */\n.vd-breadcrumb-item.active,\n.vd-breadcrumb-current {\n  color: var(--vd-breadcrumb-active-color);\n}\n\n.vd-breadcrumb-item.active > a,\n.vd-breadcrumb-current > a {\n  color: var(--vd-breadcrumb-active-color);\n  pointer-events: none;\n  cursor: default;\n}\n\n.vd-breadcrumb-item.active > a:hover,\n.vd-breadcrumb-current > a:hover {\n  text-decoration: none;\n}\n\n/* Breadcrumb Variants - With Icons */\n.vd-breadcrumb-item > svg,\n.vd-breadcrumb-item > i {\n  margin-right: 0.25rem;\n  vertical-align: middle;\n}\n\n/* Custom Separators */\n.vd-breadcrumb-separator-slash::before {\n  content: \"/\";\n}\n\n.vd-breadcrumb-separator-chevron::before {\n  content: \"›\";\n}\n\n.vd-breadcrumb-separator-arrow::before {\n  content: \"→\";\n}\n\n.vd-breadcrumb-separator-dot::before {\n  content: \"·\";\n}\n\n.vd-breadcrumb-separator-pipe::before {\n  content: \"|\";\n}\n\n/* Breadcrumb Sizes */\n.vd-breadcrumb-sm {\n  font-size: var(--vd-font-size-sm);\n  padding: calc(var(--vd-breadcrumb-padding-y) * 0.75) var(--vd-breadcrumb-padding-x);\n}\n\n.vd-breadcrumb-lg {\n  font-size: var(--vd-font-size-lg);\n  padding: calc(var(--vd-breadcrumb-padding-y) * 1.25) var(--vd-breadcrumb-padding-x);\n}\n\n/* Responsive Behavior */\n@media (max-width: 575.98px) {\n  .vd-breadcrumb-item {\n    font-size: var(--vd-font-size-sm);\n  }\n  \n  .vd-breadcrumb-item + .vd-breadcrumb-item::before {\n    padding-right: calc(var(--vd-breadcrumb-separator-padding) * 0.75);\n    padding-left: calc(var(--vd-breadcrumb-separator-padding) * 0.75);\n  }\n}\n\n\n/**\n * Vanduo Framework - Tooltips\n * Tooltip component for contextual information\n */\n\n:root {\n  /* Tooltip Colors */\n  --vd-tooltip-bg: var(--vd-color-white);\n  --vd-tooltip-bg-light: var(--vd-color-gray-100);\n  --vd-tooltip-bg-dark: var(--vd-color-gray-900);\n  --vd-tooltip-text-color: var(--vd-color-gray-900);\n  --vd-tooltip-text-color-light: var(--vd-color-gray-800);\n  --vd-tooltip-text-color-dark: var(--vd-color-white);\n  \n  /* Tooltip Spacing (Fibonacci pairs: x/y ratio ~ phi) */\n  --vd-tooltip-padding-y: 0.5rem;        /* 8px - fib */\n  --vd-tooltip-padding-x: 0.8125rem;     /* 13px - fib (13/8 ~ phi) */\n  --vd-tooltip-padding-y-sm: 0.3125rem;  /* 5px - fib */\n  --vd-tooltip-padding-x-sm: 0.5rem;     /* 8px - fib (8/5 = 1.6 ~ phi) */\n  --vd-tooltip-padding-y-lg: 0.8125rem;  /* 13px - fib */\n  --vd-tooltip-padding-x-lg: 1.3125rem;  /* 21px - fib (21/13 ~ phi) */\n\n  /* Tooltip Font */\n  --vd-tooltip-font-size: var(--vd-font-size-sm);\n  --vd-tooltip-font-size-sm: var(--vd-font-size-xs);\n  --vd-tooltip-font-size-lg: var(--vd-font-size-base);\n\n  /* Tooltip Arrow (Fibonacci) */\n  --vd-tooltip-arrow-size: 5px;     /* fib */\n  --vd-tooltip-arrow-size-sm: 3px;  /* fib */\n  --vd-tooltip-arrow-size-lg: 8px;  /* fib */\n\n  /* Tooltip Z-index */\n  --vd-tooltip-z-index: 1070;\n\n  /* Tooltip Max Width */\n  --vd-tooltip-max-width: 233px; /* fib */\n}\n\n/* Dark Theme Overrides */\n[data-theme=\"dark\"] {\n  --vd-tooltip-bg: var(--vd-color-gray-900);\n  --vd-tooltip-text-color: var(--vd-color-white);\n}\n\n@media (prefers-color-scheme: dark) {\n  :root:not([data-theme]) {\n    --vd-tooltip-bg: var(--vd-color-gray-900);\n    --vd-tooltip-text-color: var(--vd-color-white);\n  }\n}\n\n/* Base Tooltip */\n.vd-tooltip {\n  position: absolute;\n  z-index: var(--vd-tooltip-z-index);\n  display: block;\n  padding: var(--vd-tooltip-padding-y) var(--vd-tooltip-padding-x);\n  margin: 0;\n  font-family: var(--vd-font-family-sans);\n  font-size: var(--vd-tooltip-font-size);\n  font-weight: var(--vd-font-weight-normal);\n  line-height: var(--vd-line-height-normal);\n  color: var(--vd-tooltip-text-color);\n  text-align: center;\n  white-space: normal;\n  word-wrap: break-word;\n  background-color: var(--vd-tooltip-bg);\n  border-radius: var(--vd-btn-border-radius);\n  box-shadow: var(--vd-shadow-lg);\n  opacity: 0;\n  pointer-events: none;\n  max-width: var(--vd-tooltip-max-width);\n  transition: opacity var(--vd-transition-duration-base) var(--vd-transition-ease);\n}\n\n.vd-tooltip-glass {\n  background: var(--vd-glass-bg-light);\n  border: 1px solid var(--vd-glass-border-light);\n  box-shadow: var(--vd-glass-shadow);\n  color: var(--vd-text-primary);\n  backdrop-filter: blur(var(--vd-glass-blur)) saturate(var(--vd-glass-saturate));\n  -webkit-backdrop-filter: blur(var(--vd-glass-blur)) saturate(var(--vd-glass-saturate));\n}\n\n.vd-tooltip.is-visible {\n  opacity: 1;\n}\n\n/* Tooltip Arrow */\n.vd-tooltip::before {\n  content: '';\n  position: absolute;\n  width: 0;\n  height: 0;\n  border-style: solid;\n}\n\n/* Tooltip Positioning - Top */\n.vd-tooltip-top,\n.vd-tooltip[data-placement=\"top\"] {\n  margin-bottom: var(--vd-tooltip-arrow-size);\n}\n\n.vd-tooltip-top::before,\n.vd-tooltip[data-placement=\"top\"]::before {\n  bottom: calc(var(--vd-tooltip-arrow-size) * -1);\n  left: 50%;\n  transform: translateX(-50%);\n  border-width: var(--vd-tooltip-arrow-size) var(--vd-tooltip-arrow-size) 0;\n  border-color: var(--vd-tooltip-bg) transparent transparent;\n}\n\n/* Tooltip Positioning - Bottom */\n.vd-tooltip-bottom,\n.vd-tooltip[data-placement=\"bottom\"] {\n  margin-top: var(--vd-tooltip-arrow-size);\n}\n\n.vd-tooltip-bottom::before,\n.vd-tooltip[data-placement=\"bottom\"]::before {\n  top: calc(var(--vd-tooltip-arrow-size) * -1);\n  left: 50%;\n  transform: translateX(-50%);\n  border-width: 0 var(--vd-tooltip-arrow-size) var(--vd-tooltip-arrow-size);\n  border-color: transparent transparent var(--vd-tooltip-bg);\n}\n\n/* Tooltip Positioning - Left */\n.vd-tooltip-left,\n.vd-tooltip[data-placement=\"left\"] {\n  margin-right: var(--vd-tooltip-arrow-size);\n}\n\n.vd-tooltip-left::before,\n.vd-tooltip[data-placement=\"left\"]::before {\n  right: calc(var(--vd-tooltip-arrow-size) * -1);\n  top: 50%;\n  transform: translateY(-50%);\n  border-width: var(--vd-tooltip-arrow-size) 0 var(--vd-tooltip-arrow-size) var(--vd-tooltip-arrow-size);\n  border-color: transparent transparent transparent var(--vd-tooltip-bg);\n}\n\n/* Tooltip Positioning - Right */\n.vd-tooltip-right,\n.vd-tooltip[data-placement=\"right\"] {\n  margin-left: var(--vd-tooltip-arrow-size);\n}\n\n.vd-tooltip-right::before,\n.vd-tooltip[data-placement=\"right\"]::before {\n  left: calc(var(--vd-tooltip-arrow-size) * -1);\n  top: 50%;\n  transform: translateY(-50%);\n  border-width: var(--vd-tooltip-arrow-size) var(--vd-tooltip-arrow-size) var(--vd-tooltip-arrow-size) 0;\n  border-color: transparent var(--vd-tooltip-bg) transparent transparent;\n}\n\n.vd-tooltip-glass.vd-tooltip-top::before,\n.vd-tooltip-glass[data-placement=\"top\"]::before {\n  border-color: var(--vd-glass-bg-light) transparent transparent;\n}\n\n.vd-tooltip-glass.vd-tooltip-bottom::before,\n.vd-tooltip-glass[data-placement=\"bottom\"]::before {\n  border-color: transparent transparent var(--vd-glass-bg-light);\n}\n\n.vd-tooltip-glass.vd-tooltip-left::before,\n.vd-tooltip-glass[data-placement=\"left\"]::before {\n  border-color: transparent transparent transparent var(--vd-glass-bg-light);\n}\n\n.vd-tooltip-glass.vd-tooltip-right::before,\n.vd-tooltip-glass[data-placement=\"right\"]::before {\n  border-color: transparent var(--vd-glass-bg-light) transparent transparent;\n}\n\n/* Tooltip Variants - Light */\n.vd-tooltip-light {\n  background-color: var(--vd-tooltip-bg-light);\n  color: var(--vd-tooltip-text-color-light);\n  box-shadow: var(--vd-shadow-md);\n}\n\n.vd-tooltip-light.vd-tooltip-top::before,\n.vd-tooltip-light[data-placement=\"top\"]::before {\n  border-color: var(--vd-tooltip-bg-light) transparent transparent;\n}\n\n.vd-tooltip-light.vd-tooltip-bottom::before,\n.vd-tooltip-light[data-placement=\"bottom\"]::before {\n  border-color: transparent transparent var(--vd-tooltip-bg-light);\n}\n\n.vd-tooltip-light.vd-tooltip-left::before,\n.vd-tooltip-light[data-placement=\"left\"]::before {\n  border-color: transparent transparent transparent var(--vd-tooltip-bg-light);\n}\n\n.vd-tooltip-light.vd-tooltip-right::before,\n.vd-tooltip-light[data-placement=\"right\"]::before {\n  border-color: transparent var(--vd-tooltip-bg-light) transparent transparent;\n}\n\n/* Tooltip Variants - Dark */\n.vd-tooltip-dark {\n  background-color: var(--vd-tooltip-bg-dark);\n  color: var(--vd-tooltip-text-color-dark);\n}\n\n.vd-tooltip-dark.vd-tooltip-top::before,\n.vd-tooltip-dark[data-placement=\"top\"]::before {\n  border-color: var(--vd-tooltip-bg-dark) transparent transparent;\n}\n\n.vd-tooltip-dark.vd-tooltip-bottom::before,\n.vd-tooltip-dark[data-placement=\"bottom\"]::before {\n  border-color: transparent transparent var(--vd-tooltip-bg-dark);\n}\n\n.vd-tooltip-dark.vd-tooltip-left::before,\n.vd-tooltip-dark[data-placement=\"left\"]::before {\n  border-color: transparent transparent transparent var(--vd-tooltip-bg-dark);\n}\n\n.vd-tooltip-dark.vd-tooltip-right::before,\n.vd-tooltip-dark[data-placement=\"right\"]::before {\n  border-color: transparent var(--vd-tooltip-bg-dark) transparent transparent;\n}\n\n/* Tooltip Sizes */\n.vd-tooltip-sm {\n  padding: var(--vd-tooltip-padding-y-sm) var(--vd-tooltip-padding-x-sm);\n  font-size: var(--vd-tooltip-font-size-sm);\n  max-width: 150px;\n}\n\n.vd-tooltip-sm.vd-tooltip-top::before,\n.vd-tooltip-sm[data-placement=\"top\"]::before {\n  border-width: var(--vd-tooltip-arrow-size-sm) var(--vd-tooltip-arrow-size-sm) 0;\n}\n\n.vd-tooltip-sm.vd-tooltip-bottom::before,\n.vd-tooltip-sm[data-placement=\"bottom\"]::before {\n  border-width: 0 var(--vd-tooltip-arrow-size-sm) var(--vd-tooltip-arrow-size-sm);\n}\n\n.vd-tooltip-sm.vd-tooltip-left::before,\n.vd-tooltip-sm[data-placement=\"left\"]::before {\n  border-width: var(--vd-tooltip-arrow-size-sm) 0 var(--vd-tooltip-arrow-size-sm) var(--vd-tooltip-arrow-size-sm);\n}\n\n.vd-tooltip-sm.vd-tooltip-right::before,\n.vd-tooltip-sm[data-placement=\"right\"]::before {\n  border-width: var(--vd-tooltip-arrow-size-sm) var(--vd-tooltip-arrow-size-sm) var(--vd-tooltip-arrow-size-sm) 0;\n}\n\n.vd-tooltip-lg {\n  padding: var(--vd-tooltip-padding-y-lg) var(--vd-tooltip-padding-x-lg);\n  font-size: var(--vd-tooltip-font-size-lg);\n  max-width: 300px;\n}\n\n.vd-tooltip-lg.vd-tooltip-top::before,\n.vd-tooltip-lg[data-placement=\"top\"]::before {\n  border-width: var(--vd-tooltip-arrow-size-lg) var(--vd-tooltip-arrow-size-lg) 0;\n}\n\n.vd-tooltip-lg.vd-tooltip-bottom::before,\n.vd-tooltip-lg[data-placement=\"bottom\"]::before {\n  border-width: 0 var(--vd-tooltip-arrow-size-lg) var(--vd-tooltip-arrow-size-lg);\n}\n\n.vd-tooltip-lg.vd-tooltip-left::before,\n.vd-tooltip-lg[data-placement=\"left\"]::before {\n  border-width: var(--vd-tooltip-arrow-size-lg) 0 var(--vd-tooltip-arrow-size-lg) var(--vd-tooltip-arrow-size-lg);\n}\n\n.vd-tooltip-lg.vd-tooltip-right::before,\n.vd-tooltip-lg[data-placement=\"right\"]::before {\n  border-width: var(--vd-tooltip-arrow-size-lg) var(--vd-tooltip-arrow-size-lg) var(--vd-tooltip-arrow-size-lg) 0;\n}\n\n/* Tooltip with HTML Content */\n.vd-tooltip-html {\n  text-align: left;\n}\n\n/* Tooltip Wrapper (for positioning) */\n.vd-tooltip-wrapper {\n  position: relative;\n  display: inline-block;\n}\n\n\n/**\n * Vanduo Framework - Collapsible\n * Collapsible/Accordion component for expandable content\n */\n\n:root {\n  /* Collapsible Colors */\n  --vd-collapsible-border-color: var(--vd-border-color);\n  --vd-collapsible-bg: var(--vd-color-white);\n  --vd-collapsible-header-bg: var(--vd-bg-secondary);\n  --vd-collapsible-header-bg-hover: var(--vd-bg-secondary);\n  --vd-collapsible-header-bg-active: var(--vd-bg-secondary);\n  --vd-collapsible-focus-ring: 0 0 0 2px var(--vd-input-focus-border-color);\n  \n  /* Collapsible Spacing (Fibonacci) */\n  --vd-collapsible-padding-y: 0.8125rem;    /* 13px - fib */\n  --vd-collapsible-padding-x: 1.3125rem;    /* 21px - fib (21/13 ~ phi) */\n  --vd-collapsible-body-padding: 1.3125rem; /* 21px - fib */\n  \n  /* Collapsible Transitions */\n  --vd-collapsible-transition: height var(--vd-transition-duration-slow) var(--vd-transition-ease),\n                            opacity var(--vd-transition-duration-base) var(--vd-transition-ease);\n}\n\n/* Dark Theme Overrides */\n[data-theme=\"dark\"] {\n  --vd-collapsible-bg: var(--vd-bg-secondary);\n  --vd-collapsible-header-bg: var(--vd-bg-primary);\n  --vd-collapsible-header-bg-hover: var(--vd-bg-primary);\n  --vd-collapsible-header-bg-active: var(--vd-bg-primary);\n}\n\n@media (prefers-color-scheme: dark) {\n  :root:not([data-theme]) {\n    --vd-collapsible-bg: var(--vd-bg-secondary);\n    --vd-collapsible-header-bg: var(--vd-bg-primary);\n    --vd-collapsible-header-bg-hover: var(--vd-bg-primary);\n    --vd-collapsible-header-bg-active: var(--vd-bg-primary);\n  }\n}\n\n/* Base Collapsible Container */\n.vd-collapsible,\n.accordion {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n}\n\n/* Collapsible Item */\n.vd-collapsible-item,\n.accordion-item {\n  border: 1px solid var(--vd-collapsible-border-color);\n  border-radius: var(--vd-btn-border-radius);\n  margin-bottom: 0.5rem;\n  overflow: hidden;\n  background-color: var(--vd-collapsible-bg);\n  position: relative;\n}\n\n.vd-collapsible-item:last-child,\n.accordion-item:last-child {\n  margin-bottom: 0;\n}\n\n/* Collapsible Header */\n.vd-collapsible-header,\n.accordion-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: var(--vd-collapsible-padding-y) var(--vd-collapsible-padding-x);\n  background-color: var(--vd-collapsible-header-bg);\n  cursor: pointer;\n  user-select: none;\n  transition: var(--vd-transition-bg);\n  border: none;\n  -webkit-appearance: none;\n  appearance: none;\n  width: 100%;\n  text-align: left;\n  font-family: var(--vd-font-family-sans);\n  font-size: var(--vd-font-size-base);\n  font-weight: var(--vd-font-weight-medium);\n  color: var(--vd-text-primary);\n}\n\n.vd-collapsible-header:hover,\n.accordion-header:hover {\n  background-color: var(--vd-collapsible-header-bg-hover);\n}\n\n.vd-collapsible-header:focus,\n.vd-collapsible-header:focus-visible,\n.accordion-header:focus,\n.accordion-header:focus-visible {\n  outline: none;\n}\n\n/* Focus ring on the parent item so it follows the outer rounded border */\n.vd-collapsible-item:has(.vd-collapsible-header:focus-visible),\n.vd-collapsible-item:has(.vd-collapsible-trigger:focus-visible),\n.accordion-item:has(.accordion-header:focus-visible),\n.accordion-item:has(.accordion-trigger:focus-visible) {\n  box-shadow: var(--vd-collapsible-focus-ring);\n  z-index: 1;\n}\n\n.vd-collapsible-item.is-open .vd-collapsible-header,\n.accordion-item.is-open .accordion-header {\n  background-color: var(--vd-collapsible-header-bg-active);\n  font-weight: var(--vd-font-weight-semibold);\n}\n\n/* Collapsible Trigger */\n.vd-collapsible-trigger,\n.accordion-trigger {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  width: 100%;\n  font-family: var(--vd-font-family-sans);\n  font-size: var(--vd-font-size-base);\n  font-weight: var(--vd-font-weight-medium);\n  color: var(--vd-text-primary);\n  text-decoration: none;\n  background: none;\n  border: none;\n  -webkit-appearance: none;\n  appearance: none;\n  padding: 0;\n  cursor: pointer;\n}\n\n.vd-collapsible-trigger:focus,\n.vd-collapsible-trigger:focus-visible,\n.accordion-trigger:focus,\n.accordion-trigger:focus-visible {\n  outline: none;\n}\n\n/* Collapsible Icon */\n.vd-collapsible-icon,\n.accordion-icon {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 1.5rem;\n  height: 1.5rem;\n  margin-left: 0.75rem;\n  flex-shrink: 0;\n  transition: transform var(--vd-transition-duration-base) var(--vd-transition-ease);\n}\n\n.vd-collapsible-icon::before,\n.accordion-icon::before {\n  content: '▼';\n  font-size: 0.75rem;\n  color: var(--vd-text-secondary);\n  transition: transform var(--vd-transition-duration-base) var(--vd-transition-ease);\n}\n\n.vd-collapsible-item.is-open .vd-collapsible-icon::before,\n.accordion-item.is-open .accordion-icon::before {\n  transform: rotate(180deg);\n}\n\n/* Collapsible Body */\n.vd-collapsible-body,\n.accordion-body {\n  max-height: 0;\n  overflow: hidden;\n  transition: var(--vd-collapsible-transition);\n  opacity: 0;\n}\n\n.vd-collapsible-item.is-open .vd-collapsible-body,\n.accordion-item.is-open .accordion-body {\n  max-height: 5000px;\n  opacity: 1;\n  padding: var(--vd-collapsible-body-padding);\n  border-top: 1px solid var(--vd-collapsible-border-color);\n}\n\n/* Collapsible Content */\n.vd-collapsible-content,\n.accordion-content {\n  color: var(--vd-text-primary);\n  line-height: var(--vd-line-height-normal);\n}\n\n/* Collapsible States */\n.vd-collapsible-item.is-active,\n.accordion-item.is-active {\n  border-color: var(--vd-color-primary);\n}\n\n.vd-collapsible-item.is-active .vd-collapsible-header,\n.accordion-item.is-active .accordion-header {\n  background-color: var(--vd-color-primary-alpha-10);\n  color: var(--vd-color-primary);\n}\n\n/* Collapsible Variants - Bordered */\n.vd-collapsible-bordered .vd-collapsible-item,\n.accordion-bordered .accordion-item {\n  border: 1px solid var(--vd-collapsible-border-color);\n  border-radius: 0;\n  margin-bottom: -1px;\n}\n\n.vd-collapsible-bordered .vd-collapsible-item:first-child,\n.accordion-bordered .accordion-item:first-child {\n  border-top-left-radius: var(--vd-btn-border-radius);\n  border-top-right-radius: var(--vd-btn-border-radius);\n}\n\n.vd-collapsible-bordered .vd-collapsible-item:last-child,\n.accordion-bordered .accordion-item:last-child {\n  border-bottom-left-radius: var(--vd-btn-border-radius);\n  border-bottom-right-radius: var(--vd-btn-border-radius);\n  margin-bottom: 0;\n}\n\n/* Collapsible Variants - Flush (no borders) */\n.vd-collapsible-flush .vd-collapsible-item,\n.accordion-flush .accordion-item {\n  border: none;\n  border-radius: 0;\n  border-bottom: 1px solid var(--vd-collapsible-border-color);\n  margin-bottom: 0;\n  background-color: transparent;\n  overflow: visible;\n}\n\n.vd-collapsible-flush .vd-collapsible-item:last-child,\n.accordion-flush .accordion-item:last-child {\n  border-bottom: none;\n}\n\n.vd-collapsible-flush .vd-collapsible-header,\n.vd-collapsible-flush .vd-collapsible-trigger,\n.accordion-flush .accordion-header,\n.accordion-flush .accordion-trigger {\n  background-color: transparent;\n}\n\n.vd-collapsible-flush .vd-collapsible-header:hover,\n.vd-collapsible-flush .vd-collapsible-trigger:hover,\n.accordion-flush .accordion-header:hover,\n.accordion-flush .accordion-trigger:hover {\n  border-radius: var(--vd-btn-border-radius);\n}\n\n.vd-collapsible-flush .vd-collapsible-item:has(.vd-collapsible-header:focus-visible),\n.vd-collapsible-flush .vd-collapsible-item:has(.vd-collapsible-trigger:focus-visible),\n.accordion-flush .accordion-item:has(.accordion-header:focus-visible),\n.accordion-flush .accordion-item:has(.accordion-trigger:focus-visible) {\n  box-shadow: none;\n}\n\n.vd-collapsible-flush .vd-collapsible-header:focus-visible,\n.vd-collapsible-flush .vd-collapsible-trigger:focus-visible,\n.accordion-flush .accordion-header:focus-visible,\n.accordion-flush .accordion-trigger:focus-visible {\n  border-radius: var(--vd-btn-border-radius);\n  box-shadow: var(--vd-collapsible-focus-ring);\n  position: relative;\n  z-index: 1;\n}\n\n/* Collapsible Sizes */\n.vd-collapsible-sm .vd-collapsible-header,\n.accordion-sm .accordion-header {\n  padding: calc(var(--vd-collapsible-padding-y) * 0.75) calc(var(--vd-collapsible-padding-x) * 0.75);\n  font-size: var(--vd-font-size-sm);\n}\n\n.vd-collapsible-sm .vd-collapsible-body,\n.accordion-sm .accordion-body {\n  padding: calc(var(--vd-collapsible-body-padding) * 0.75);\n}\n\n.vd-collapsible-lg .vd-collapsible-header,\n.accordion-lg .accordion-header {\n  padding: calc(var(--vd-collapsible-padding-y) * 1.25) calc(var(--vd-collapsible-padding-x) * 1.25);\n  font-size: var(--vd-font-size-lg);\n}\n\n.vd-collapsible-lg .vd-collapsible-body,\n.accordion-lg .accordion-body {\n  padding: calc(var(--vd-collapsible-body-padding) * 1.25);\n}\n\n/* Accordion Mode (single open) */\n.accordion .accordion-item.is-open ~ .accordion-item.is-open .accordion-body {\n  max-height: 0;\n  opacity: 0;\n  padding: 0;\n}\n\n.accordion .accordion-item.is-open ~ .accordion-item.is-open {\n  border-top: 1px solid var(--vd-collapsible-border-color);\n}\n\n/* Responsive Behavior */\n@media (max-width: 575.98px) {\n  .vd-collapsible-header,\n  .accordion-header {\n    padding: calc(var(--vd-collapsible-padding-y) * 0.875) var(--vd-collapsible-padding-x);\n    font-size: var(--vd-font-size-sm);\n  }\n  \n  .vd-collapsible-body,\n  .accordion-body {\n    padding: var(--vd-collapsible-padding-x);\n  }\n}\n\n\n/**\n * Vanduo Framework - Dropdown\n * Dropdown menu component\n */\n\n:root {\n  /* Dropdown Colors */\n  --vd-dropdown-bg: var(--vd-color-white);\n  --vd-dropdown-border-color: var(--vd-border-color);\n  --vd-dropdown-item-color: var(--vd-text-primary);\n  --vd-dropdown-item-hover-bg: var(--vd-bg-secondary);\n  --vd-dropdown-item-hover-color: var(--vd-text-primary);\n  --vd-dropdown-item-active-bg: var(--vd-color-primary-alpha-10);\n  --vd-dropdown-item-active-color: var(--vd-color-primary);\n  --vd-dropdown-item-disabled-color: var(--vd-text-muted);\n  \n  /* Dropdown Spacing (Fibonacci) */\n  --vd-dropdown-padding-y: 0.5rem;          /* 8px - fib */\n  --vd-dropdown-padding-x: 0;\n  --vd-dropdown-item-padding-y: 0.5rem;     /* 8px  - fib */\n  --vd-dropdown-item-padding-x: 0.8125rem;  /* 13px - fib */\n  --vd-dropdown-header-padding-y: 0.5rem;   /* 8px  - fib */\n  --vd-dropdown-header-padding-x: 0.8125rem;/* 13px - fib */\n\n  /* Dropdown Z-index */\n  --vd-dropdown-z-index: 1000;\n\n  /* Dropdown Min Width */\n  --vd-dropdown-min-width: 13rem; /* ~208px, Fibonacci-inspired */\n}\n\n/* Dark Theme Overrides */\n[data-theme=\"dark\"] {\n  --vd-dropdown-bg: var(--vd-bg-secondary);\n  --vd-dropdown-item-hover-bg: var(--vd-bg-primary);\n}\n\n@media (prefers-color-scheme: dark) {\n  :root:not([data-theme]) {\n    --vd-dropdown-bg: var(--vd-bg-secondary);\n    --vd-dropdown-item-hover-bg: var(--vd-bg-primary);\n  }\n}\n\n/* Base Dropdown */\n.vd-dropdown {\n  position: relative;\n  display: inline-block;\n}\n\n/* Dropdown Toggle */\n.vd-dropdown-toggle {\n  display: inline-flex;\n  align-items: center;\n  justify-content: space-between;\n  cursor: pointer;\n  user-select: none;\n}\n\n.vd-dropdown-toggle::after {\n  content: '';\n  display: inline-block;\n  width: 0;\n  height: 0;\n  margin-left: 0.5rem;\n  vertical-align: 0.255em;\n  border-top: 0.3em solid;\n  border-right: 0.3em solid transparent;\n  border-bottom: 0;\n  border-left: 0.3em solid transparent;\n  transition: transform var(--vd-transition-duration-base) var(--vd-transition-ease);\n}\n\n.vd-dropdown.is-open .vd-dropdown-toggle::after {\n  transform: rotate(180deg);\n}\n\n/* Dropdown Menu */\n.vd-dropdown-menu {\n  position: absolute;\n  top: 100%;\n  left: 0;\n  z-index: var(--vd-dropdown-z-index);\n  display: none;\n  min-width: var(--vd-dropdown-min-width);\n  padding: var(--vd-dropdown-padding-y) var(--vd-dropdown-padding-x);\n  margin: 0.125rem 0 0;\n  background-color: var(--vd-dropdown-bg);\n  border: 1px solid var(--vd-dropdown-border-color);\n  border-radius: var(--vd-btn-border-radius);\n  box-shadow: var(--vd-shadow-lg);\n  list-style: none;\n  opacity: 0;\n  transform: translateY(-10px);\n  transition: opacity var(--vd-transition-duration-base) var(--vd-transition-ease),\n              transform var(--vd-transition-duration-base) var(--vd-transition-ease);\n}\n\n.vd-dropdown-glass .vd-dropdown-menu {\n  background: var(--vd-glass-bg-light);\n  border-color: var(--vd-glass-border-light);\n  box-shadow: var(--vd-glass-shadow);\n  backdrop-filter: blur(var(--vd-glass-blur)) saturate(var(--vd-glass-saturate));\n  -webkit-backdrop-filter: blur(var(--vd-glass-blur)) saturate(var(--vd-glass-saturate));\n}\n\n.vd-dropdown-menu.is-open {\n  display: block;\n  opacity: 1;\n  transform: translateY(0);\n}\n\n/* Directional wrappers */\n.vd-dropdown-dropup .vd-dropdown-menu {\n  top: auto;\n  bottom: 100%;\n  margin-top: 0;\n  margin-bottom: 0.125rem;\n  transform: translateY(10px);\n}\n\n.vd-dropdown-dropup .vd-dropdown-menu.is-open {\n  transform: translateY(0);\n}\n\n.vd-dropdown-dropright .vd-dropdown-menu {\n  top: 0;\n  left: 100%;\n  margin-top: 0;\n  margin-left: 0.125rem;\n  transform: translateX(-10px);\n}\n\n.vd-dropdown-dropright .vd-dropdown-menu.is-open {\n  transform: translateX(0);\n}\n\n.vd-dropdown-dropleft .vd-dropdown-menu {\n  top: 0;\n  left: auto;\n  right: 100%;\n  margin-top: 0;\n  margin-right: 0.125rem;\n  transform: translateX(10px);\n}\n\n.vd-dropdown-dropleft .vd-dropdown-menu.is-open {\n  transform: translateX(0);\n}\n\n/* Dropdown Menu Positioning - Top */\n.vd-dropdown-menu-top {\n  top: auto;\n  bottom: 100%;\n  margin-top: 0;\n  margin-bottom: 0.125rem;\n  transform: translateY(10px);\n}\n\n.vd-dropdown-menu-top.is-open {\n  transform: translateY(0);\n}\n\n/* Dropdown Menu Positioning - Right */\n.vd-dropdown-menu-right {\n  left: auto;\n  right: 0;\n}\n\n/* Dropdown Menu Positioning - Left */\n.vd-dropdown-menu-left {\n  left: auto;\n  right: 0;\n}\n\n/* Dropdown Item */\n.vd-dropdown-item {\n  display: block;\n  width: 100%;\n  padding: var(--vd-dropdown-item-padding-y) var(--vd-dropdown-item-padding-x);\n  clear: both;\n  font-weight: var(--vd-font-weight-normal);\n  color: var(--vd-dropdown-item-color);\n  text-align: inherit;\n  text-decoration: none;\n  white-space: nowrap;\n  background-color: transparent;\n  border: 0;\n  cursor: pointer;\n  transition: var(--vd-transition-bg);\n  user-select: none;\n}\n\n.vd-dropdown-item:hover,\n.vd-dropdown-item:focus {\n  color: var(--vd-dropdown-item-hover-color);\n  background-color: var(--vd-dropdown-item-hover-bg);\n  text-decoration: none;\n}\n\n.vd-dropdown-item:focus-visible {\n  outline: 2px solid var(--vd-color-primary);\n  outline-offset: -2px;\n}\n\n.vd-dropdown-item.active,\n.vd-dropdown-item.is-active {\n  color: var(--vd-dropdown-item-active-color);\n  background-color: var(--vd-dropdown-item-active-bg);\n  font-weight: var(--vd-font-weight-medium);\n}\n\n.vd-dropdown-item.disabled,\n.vd-dropdown-item.is-disabled {\n  color: var(--vd-dropdown-item-disabled-color);\n  pointer-events: none;\n  cursor: not-allowed;\n  opacity: 0.6;\n}\n\n/* Dropdown Divider */\n.vd-dropdown-divider {\n  height: 0;\n  margin: 0.5rem 0;\n  overflow: hidden;\n  border-top: 1px solid var(--vd-dropdown-border-color);\n}\n\n/* Dropdown Header */\n.vd-dropdown-header {\n  display: block;\n  padding: var(--vd-dropdown-header-padding-y) var(--vd-dropdown-header-padding-x);\n  margin-bottom: 0;\n  font-size: var(--vd-font-size-sm);\n  font-weight: var(--vd-font-weight-semibold);\n  color: var(--vd-text-muted);\n  white-space: nowrap;\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n}\n\n/* Dropdown Menu Alignment */\n.vd-dropdown-menu-start {\n  left: 0;\n  right: auto;\n}\n\n.vd-dropdown-menu-end {\n  left: auto;\n  right: 0;\n}\n\n/* Dropdown Sizes */\n.vd-dropdown-sm .vd-dropdown-menu {\n  min-width: 8rem;\n  font-size: var(--vd-font-size-sm);\n}\n\n.vd-dropdown-sm .vd-dropdown-item {\n  padding: calc(var(--vd-dropdown-item-padding-y) * 0.75) calc(var(--vd-dropdown-item-padding-x) * 0.75);\n}\n\n.vd-dropdown-lg .vd-dropdown-menu {\n  min-width: 15rem;\n  font-size: var(--vd-font-size-lg);\n}\n\n.vd-dropdown-lg .vd-dropdown-item {\n  padding: calc(var(--vd-dropdown-item-padding-y) * 1.25) calc(var(--vd-dropdown-item-padding-x) * 1.25);\n}\n\n/* Dropdown with Button Toggle */\n.vd-btn + .vd-dropdown-menu,\n.vd-dropdown-toggle.vd-btn + .vd-dropdown-menu {\n  margin-top: 0.125rem;\n}\n\n/* Nested Dropdown (Submenu) */\n.vd-dropdown-submenu {\n  position: relative;\n}\n\n.vd-dropdown-submenu > .vd-dropdown-menu {\n  top: 0;\n  left: 100%;\n  margin-top: 0;\n  margin-left: 0.125rem;\n}\n\n.vd-dropdown-submenu > .vd-dropdown-item::after {\n  content: '';\n  display: inline-block;\n  width: 0;\n  height: 0;\n  margin-left: auto;\n  margin-right: -0.5rem;\n  vertical-align: 0.255em;\n  border-top: 0.3em solid transparent;\n  border-right: 0;\n  border-bottom: 0.3em solid transparent;\n  border-left: 0.3em solid;\n}\n\n/* Responsive Behavior */\n@media (max-width: 575.98px) {\n  .vd-dropdown-menu {\n    min-width: 100%;\n    left: 0 !important;\n    right: 0 !important;\n  }\n}\n\n\n/**\n * Vanduo Framework - Modals\n * Modal dialog component\n */\n\n:root {\n  /* Modal Colors */\n  --vd-modal-bg: var(--vd-color-white);\n  --vd-modal-backdrop-bg: rgba(0, 0, 0, 0.5);\n  --vd-modal-border-color: var(--vd-border-color);\n  \n  /* Modal Spacing (Fibonacci: 21px) */\n  --vd-modal-padding: 1.3125rem;\n  --vd-modal-header-padding: 1.3125rem;\n  --vd-modal-body-padding: 1.3125rem;\n  --vd-modal-footer-padding: 1.3125rem;\n\n  /* Modal Sizes (all Fibonacci numbers) */\n  --vd-modal-width-sm: 233px;   /* fib(13) */\n  --vd-modal-width: 377px;      /* fib(14) */\n  --vd-modal-width-lg: 610px;   /* fib(15) */\n  --vd-modal-width-xl: 987px;   /* fib(16) */\n  \n  /* Modal Z-index */\n  --vd-modal-z-index: 1050;\n  --vd-modal-backdrop-z-index: 1040;\n  \n  /* Modal Transitions */\n  --vd-modal-transition: opacity var(--vd-transition-duration-base) var(--vd-transition-ease);\n  --vd-modal-dialog-transition: transform var(--vd-transition-duration-base) var(--vd-transition-ease);\n}\n\n/* Dark Theme Overrides */\n[data-theme=\"dark\"] {\n  --vd-modal-bg: var(--vd-bg-secondary);\n}\n\n@media (prefers-color-scheme: dark) {\n  :root:not([data-theme]) {\n    --vd-modal-bg: var(--vd-bg-secondary);\n  }\n}\n\n/* Modal Backdrop */\n.vd-modal-backdrop {\n  position: fixed;\n  top: 0;\n  left: 0;\n  z-index: var(--vd-modal-backdrop-z-index);\n  width: 100vw;\n  height: 100vh;\n  background-color: var(--vd-modal-backdrop-bg);\n  opacity: 0;\n  transition: var(--vd-modal-transition);\n  pointer-events: none;\n}\n\n.vd-modal-backdrop.vd-modal-glass-backdrop {\n  backdrop-filter: blur(calc(var(--vd-glass-blur) * 0.5));\n  -webkit-backdrop-filter: blur(calc(var(--vd-glass-blur) * 0.5));\n}\n\n.vd-modal-backdrop.is-visible {\n  opacity: 1;\n  pointer-events: all;\n}\n\n/* Base Modal */\n.vd-modal {\n  position: fixed;\n  top: 0;\n  left: 0;\n  z-index: var(--vd-modal-z-index);\n  display: none;\n  width: 100%;\n  height: 100%;\n  overflow-x: hidden;\n  overflow-y: auto;\n  outline: 0;\n  opacity: 0;\n  transition: var(--vd-modal-transition);\n  --vd-modal-dialog-max-width: var(--vd-modal-width);\n}\n\n.vd-modal.is-open {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  opacity: 1;\n}\n\n/* Modal Dialog */\n.vd-modal-dialog {\n  position: relative;\n  width: min(calc(100% - 3.5rem), var(--vd-modal-dialog-max-width));\n  margin: 1.75rem auto;\n  max-width: var(--vd-modal-dialog-max-width);\n  pointer-events: none;\n  transform: scale(0.95);\n  transition: var(--vd-modal-dialog-transition);\n  z-index: 1060;\n}\n\n.vd-modal.is-open .vd-modal-dialog {\n  transform: scale(1);\n}\n\n/* Modal Content */\n.vd-modal-content {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  pointer-events: auto;\n  background-color: var(--vd-modal-bg);\n  background-clip: padding-box;\n  border: 1px solid var(--vd-modal-border-color);\n  border-radius: var(--vd-btn-border-radius-lg);\n  box-shadow: var(--vd-shadow-2xl);\n  outline: 0;\n}\n\n.vd-modal-glass .vd-modal-content {\n  background: var(--vd-glass-bg-light);\n  border-color: var(--vd-glass-border-light);\n  box-shadow: var(--vd-glass-shadow);\n  backdrop-filter: blur(var(--vd-glass-blur)) saturate(var(--vd-glass-saturate));\n  -webkit-backdrop-filter: blur(var(--vd-glass-blur)) saturate(var(--vd-glass-saturate));\n}\n\n/* Modal Header */\n.vd-modal-header {\n  display: flex;\n  align-items: flex-start;\n  justify-content: space-between;\n  padding: var(--vd-modal-header-padding);\n  border-bottom: 1px solid var(--vd-modal-border-color);\n  border-top-left-radius: calc(var(--vd-btn-border-radius-lg) - 1px);\n  border-top-right-radius: calc(var(--vd-btn-border-radius-lg) - 1px);\n}\n\n.vd-modal-title {\n  margin-bottom: 0;\n  line-height: var(--vd-line-height-normal);\n  font-size: var(--vd-font-size-xl);\n  font-weight: var(--vd-font-weight-semibold);\n  color: var(--vd-text-primary);\n}\n\n/* Modal Close Button */\n.vd-modal-close {\n  padding: 0.5rem;\n  margin: -0.5rem -0.5rem -0.5rem auto;\n  background: transparent;\n  border: 0;\n  border-radius: var(--vd-btn-border-radius);\n  opacity: 0.5;\n  cursor: pointer;\n  font-size: 1.5rem;\n  font-weight: var(--vd-font-weight-bold);\n  line-height: 1;\n  color: var(--vd-text-secondary);\n  text-shadow: 0 1px 0 var(--vd-color-white);\n  transition: var(--vd-transition-opacity);\n  user-select: none;\n}\n\n.vd-modal-close:hover,\n.vd-modal-close:focus {\n  color: var(--vd-text-primary);\n  text-decoration: none;\n  opacity: 0.75;\n  outline: none;\n}\n\n.vd-modal-close:focus {\n  outline: 2px solid var(--vd-input-focus-border-color);\n  outline-offset: 2px;\n}\n\n/* Modal Body */\n.vd-modal-body {\n  position: relative;\n  flex: 1 1 auto;\n  padding: var(--vd-modal-body-padding);\n}\n\n/* Modal Footer */\n.vd-modal-footer {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  justify-content: flex-end;\n  padding: var(--vd-modal-footer-padding);\n  border-top: 1px solid var(--vd-modal-border-color);\n  border-bottom-left-radius: calc(var(--vd-btn-border-radius-lg) - 1px);\n  border-bottom-right-radius: calc(var(--vd-btn-border-radius-lg) - 1px);\n  gap: 0.5rem;\n}\n\n.vd-modal-footer > * {\n  margin: 0;\n}\n\n/* Modal Sizes */\n.vd-modal-dialog.vd-modal-sm,\n.vd-modal-sm .vd-modal-dialog {\n  --vd-modal-dialog-max-width: var(--vd-modal-width-sm);\n}\n\n.vd-modal-dialog.vd-modal-lg,\n.vd-modal-lg .vd-modal-dialog {\n  --vd-modal-dialog-max-width: var(--vd-modal-width-lg);\n}\n\n.vd-modal-dialog.vd-modal-xl,\n.vd-modal-xl .vd-modal-dialog {\n  --vd-modal-dialog-max-width: var(--vd-modal-width-xl);\n}\n\n.vd-modal-fullscreen .vd-modal-dialog {\n  max-width: 100%;\n  width: 100%;\n  height: 100%;\n  margin: 0;\n  border-radius: 0;\n}\n\n.vd-modal-fullscreen .vd-modal-content {\n  height: 100%;\n  border: 0;\n  border-radius: 0;\n}\n\n/* Modal Positioning */\n.vd-modal-top .vd-modal-dialog {\n  margin-top: 0;\n  margin-bottom: auto;\n}\n\n.vd-modal-bottom .vd-modal-dialog {\n  margin-top: auto;\n  margin-bottom: 0;\n}\n\n/* Modal Scrollable */\n.vd-modal-scrollable .vd-modal-body {\n  overflow-y: auto;\n  max-height: calc(100vh - 200px);\n}\n\n/* Modal Centered */\n.vd-modal-centered .vd-modal-dialog {\n  display: flex;\n  align-items: center;\n  min-height: calc(100% - 3.5rem);\n}\n\n/* Responsive Behavior */\n@media (max-width: 575.98px) {\n  .vd-modal-dialog {\n    margin: 0.5rem;\n    width: calc(100% - 1rem);\n    max-width: calc(100% - 1rem);\n  }\n  \n  .vd-modal-fullscreen-sm-down {\n    width: 100vw;\n    max-width: 100vw;\n    height: 100%;\n    margin: 0;\n  }\n  \n  .vd-modal-fullscreen-sm-down .vd-modal-content {\n    height: 100%;\n    border: 0;\n    border-radius: 0;\n  }\n}\n\n/* Modal Animation Variants */\n.vd-modal-fade .vd-modal-dialog {\n  transform: translateY(-50px);\n}\n\n.vd-modal.is-open.vd-modal-fade .vd-modal-dialog {\n  transform: translateY(0);\n}\n\n.vd-modal-zoom .vd-modal-dialog {\n  transform: scale(0.8);\n}\n\n.vd-modal.is-open.vd-modal-zoom .vd-modal-dialog {\n  transform: scale(1);\n}\n\n/* Body Scroll Lock */\n.body-modal-open {\n  overflow: hidden;\n  padding-right: 0;\n}\n\n/**\n * Vanduo Framework - Badges\n * Status indicator badges\n */\n\n:root {\n  /* Badge Padding (x/y ratio ~ phi) */\n  --vd-badge-padding-y: 0.3em;\n  --vd-badge-padding-x: 0.48em;     /* 0.48/0.3 = 1.6 ~ phi */\n  --vd-badge-padding-y-sm: 0.18em;\n  --vd-badge-padding-x-sm: 0.3em;   /* 0.3/0.18 = 1.67 ~ phi */\n  --vd-badge-padding-y-lg: 0.42em;\n  --vd-badge-padding-x-lg: 0.65em;    /* 0.65/0.42 = 1.55 ~ phi */\n  \n  /* Badge Font */\n  --vd-badge-font-size: 0.8125em;\n  --vd-badge-font-size-sm: 0.7em;\n  --vd-badge-font-size-lg: 0.9375em;\n  --vd-badge-font-weight: var(--vd-font-weight-semibold);\n  --vd-badge-line-height: 1;\n  \n  /* Badge Border Radius */\n  --vd-badge-border-radius: var(--vd-btn-border-radius-sm);\n  --vd-badge-pill-border-radius: 50rem;\n}\n\n/* Dark Theme Overrides */\n[data-theme=\"dark\"] {\n  /* Invert light/dark badge colors for visibility */\n}\n\n@media (prefers-color-scheme: dark) {\n  :root:not([data-theme]) {\n    /* Invert light/dark badge colors for visibility */\n  }\n}\n\n/* Dark Theme - Light badge needs different colors */\n[data-theme=\"dark\"] .vd-badge-light {\n  background-color: var(--vd-color-gray-700);\n  color: var(--vd-color-gray-100);\n}\n\n[data-theme=\"dark\"] .vd-badge-outlined.vd-badge-light {\n  color: var(--vd-color-gray-300);\n  border-color: var(--vd-color-gray-500);\n}\n\n@media (prefers-color-scheme: dark) {\n  :root:not([data-theme]) .vd-badge-light {\n    background-color: var(--vd-color-gray-700);\n    color: var(--vd-color-gray-100);\n  }\n\n  :root:not([data-theme]) .vd-badge-outlined.vd-badge-light {\n    color: var(--vd-color-gray-300);\n    border-color: var(--vd-color-gray-500);\n  }\n}\n\n/* Base Badge */\n.vd-badge {\n  display: inline-block;\n  padding: var(--vd-badge-padding-y) var(--vd-badge-padding-x);\n  font-size: var(--vd-badge-font-size);\n  font-weight: var(--vd-badge-font-weight);\n  line-height: var(--vd-badge-line-height);\n  color: var(--vd-color-white);\n  text-align: center;\n  white-space: nowrap;\n  vertical-align: baseline;\n  border-radius: var(--vd-badge-border-radius);\n  background-color: var(--vd-color-secondary);\n}\n\n/* Badge Variants */\n.vd-badge-primary {\n  background-color: var(--vd-color-primary);\n  color: var(--vd-color-white);\n}\n\n.vd-badge-secondary {\n  background-color: var(--vd-color-secondary);\n  color: var(--vd-color-white);\n}\n\n.vd-badge-success {\n  background-color: var(--vd-color-success);\n  color: var(--vd-color-white);\n}\n\n.vd-badge-warning {\n  background-color: var(--vd-color-warning);\n  color: var(--vd-color-gray-900);\n}\n\n.vd-badge-error {\n  background-color: var(--vd-color-error);\n  color: var(--vd-color-white);\n}\n\n.vd-badge-info {\n  background-color: var(--vd-color-info);\n  color: var(--vd-color-white);\n}\n\n.vd-badge-light {\n  background-color: var(--vd-color-gray-100);\n  color: var(--vd-color-gray-900);\n}\n\n.vd-badge-dark {\n  background-color: var(--vd-color-gray-800);\n  color: var(--vd-color-white);\n}\n\n/* Badge Sizes */\n.vd-badge-sm {\n  padding: var(--vd-badge-padding-y-sm) var(--vd-badge-padding-x-sm);\n  font-size: var(--vd-badge-font-size-sm);\n}\n\n.vd-badge-lg {\n  padding: var(--vd-badge-padding-y-lg) var(--vd-badge-padding-x-lg);\n  font-size: var(--vd-badge-font-size-lg);\n}\n\n/* Badge Styles */\n.vd-badge-pill {\n  padding-right: var(--vd-badge-padding-x);\n  padding-left: var(--vd-badge-padding-x);\n  border-radius: var(--vd-badge-pill-border-radius);\n}\n\n.vd-badge-outlined {\n  background-color: transparent;\n  border: 1px solid currentColor;\n}\n\n.vd-badge-outlined.vd-badge-primary {\n  color: var(--vd-color-primary);\n  border-color: var(--vd-color-primary);\n}\n\n.vd-badge-outlined.vd-badge-secondary {\n  color: var(--vd-color-secondary);\n  border-color: var(--vd-color-secondary);\n}\n\n.vd-badge-outlined.vd-badge-success {\n  color: var(--vd-color-success);\n  border-color: var(--vd-color-success);\n}\n\n.vd-badge-outlined.vd-badge-warning {\n  color: var(--vd-color-warning);\n  border-color: var(--vd-color-warning);\n}\n\n.vd-badge-outlined.vd-badge-error {\n  color: var(--vd-color-error);\n  border-color: var(--vd-color-error);\n}\n\n.vd-badge-outlined.vd-badge-info {\n  color: var(--vd-color-info);\n  border-color: var(--vd-color-info);\n}\n\n.vd-badge-outlined.vd-badge-light {\n  color: var(--vd-color-gray-600);\n  border-color: var(--vd-color-gray-300);\n}\n\n.vd-badge-outlined.vd-badge-dark {\n  color: var(--vd-color-gray-800);\n  border-color: var(--vd-color-gray-800);\n}\n\n/* Badge Positioning (for use with buttons, avatars, etc.) */\n.vd-badge-top-right,\n.vd-badge-top-left,\n.vd-badge-bottom-right,\n.vd-badge-bottom-left {\n  position: absolute;\n  z-index: 1;\n  transform: translate(50%, -50%);\n}\n\n.vd-badge-top-right {\n  top: 0;\n  right: 0;\n  transform: translate(50%, -50%);\n}\n\n.vd-badge-top-left {\n  top: 0;\n  left: 0;\n  transform: translate(-50%, -50%);\n}\n\n.vd-badge-bottom-right {\n  bottom: 0;\n  right: 0;\n  transform: translate(50%, 50%);\n}\n\n.vd-badge-bottom-left {\n  bottom: 0;\n  left: 0;\n  transform: translate(-50%, 50%);\n}\n\n/* Badge in Buttons */\n.vd-btn .vd-badge {\n  position: relative;\n  top: -1px;\n}\n\n/* Badge in Headings */\nh1 .vd-badge,\nh2 .vd-badge,\nh3 .vd-badge,\nh4 .vd-badge,\nh5 .vd-badge,\nh6 .vd-badge {\n  font-size: 0.6em;\n  vertical-align: middle;\n}\n\n\n/**\n * Vanduo Framework - Collections\n * List/item collection component\n */\n\n:root {\n  /* Collection Colors */\n  --vd-collection-bg: var(--vd-color-white);\n  --vd-collection-item-bg: var(--vd-color-white);\n  --vd-collection-item-bg-hover: var(--vd-bg-secondary);\n  --vd-collection-item-bg-active: var(--vd-color-primary-alpha-10);\n  --vd-collection-border-color: var(--vd-border-color);\n  \n  /* Collection Spacing (Fibonacci) */\n  --vd-collection-padding-y: 0;\n  --vd-collection-padding-x: 0;\n  --vd-collection-item-padding-y: 0.8125rem;    /* 13px - fib */\n  --vd-collection-item-padding-x: 1.3125rem;    /* 21px - fib */\n  --vd-collection-item-padding-y-sm: 0.5rem;    /* 8px  - fib */\n  --vd-collection-item-padding-x-sm: 0.8125rem; /* 13px - fib */\n  --vd-collection-item-padding-y-lg: 1.3125rem; /* 21px - fib */\n  --vd-collection-item-padding-x-lg: 2.125rem;  /* 34px - fib */\n\n  /* Collection Avatar (Fibonacci) */\n  --vd-collection-avatar-size: 2.125rem;     /* 34px - fib */\n  --vd-collection-avatar-size-sm: 1.3125rem; /* 21px - fib */\n  --vd-collection-avatar-size-lg: 3.4375rem; /* 55px - fib */\n}\n\n/* Dark Theme Overrides */\n[data-theme=\"dark\"] {\n  --vd-collection-bg: var(--vd-bg-secondary);\n  --vd-collection-item-bg: var(--vd-bg-secondary);\n  --vd-collection-item-bg-hover: var(--vd-bg-primary);\n}\n\n@media (prefers-color-scheme: dark) {\n  :root:not([data-theme]) {\n    --vd-collection-bg: var(--vd-bg-secondary);\n    --vd-collection-item-bg: var(--vd-bg-secondary);\n    --vd-collection-item-bg-hover: var(--vd-bg-primary);\n  }\n}\n\n/* Base Collection */\n.vd-collection {\n  display: flex;\n  flex-direction: column;\n  padding: var(--vd-collection-padding-y) var(--vd-collection-padding-x);\n  margin-bottom: 0;\n  list-style: none;\n  background-color: var(--vd-collection-bg);\n}\n\n/* Collection Item */\n.vd-collection-item {\n  display: flex;\n  align-items: center;\n  padding: var(--vd-collection-item-padding-y) var(--vd-collection-item-padding-x);\n  margin-bottom: 0;\n  color: var(--vd-text-primary);\n  text-decoration: none;\n  background-color: var(--vd-collection-item-bg);\n  border-bottom: 1px solid var(--vd-collection-border-color);\n  transition: var(--vd-transition-bg);\n}\n\n.vd-collection-item:last-child {\n  border-bottom: none;\n}\n\n.vd-collection-item:hover {\n  background-color: var(--vd-collection-item-bg-hover);\n  text-decoration: none;\n}\n\n.vd-collection-item.active {\n  background-color: var(--vd-collection-item-bg-active);\n  color: var(--vd-color-primary);\n  font-weight: var(--vd-font-weight-medium);\n}\n\n.vd-collection-item.disabled {\n  opacity: 0.6;\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n/* Collection Avatar */\n.vd-collection-avatar {\n  flex-shrink: 0;\n  width: var(--vd-collection-avatar-size);\n  height: var(--vd-collection-avatar-size);\n  margin-right: 1rem;\n  border-radius: 50%;\n  background-color: var(--vd-bg-secondary);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  overflow: hidden;\n}\n\n.vd-collection-avatar img {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n\n.vd-collection-avatar-icon {\n  font-size: 1.25rem;\n  color: var(--vd-text-secondary);\n}\n\n/* Collection Content */\n.vd-collection-content {\n  flex: 1 1 auto;\n  min-width: 0;\n}\n\n.vd-collection-title {\n  margin: 0 0 0.25rem 0;\n  font-size: var(--vd-font-size-base);\n  font-weight: var(--vd-font-weight-medium);\n  line-height: var(--vd-line-height-normal);\n  color: var(--vd-text-primary);\n}\n\n.vd-collection-item.active .vd-collection-title {\n  color: var(--vd-color-primary);\n}\n\n.vd-collection-text {\n  margin: 0;\n  font-size: var(--vd-font-size-sm);\n  line-height: var(--vd-line-height-normal);\n  color: var(--vd-text-secondary);\n}\n\n.vd-collection-item-secondary {\n  display: flex;\n  flex-direction: column;\n  gap: 0.25rem;\n}\n\n.vd-collection-item-secondary .vd-collection-title {\n  margin-bottom: 0;\n}\n\n/* Collection Action */\n.vd-collection-action {\n  flex-shrink: 0;\n  margin-left: 1rem;\n  display: flex;\n  align-items: center;\n}\n\n/* Collection Divider */\n.vd-collection-divider {\n  height: 0;\n  margin: 0.5rem 0;\n  overflow: hidden;\n  border-top: 1px solid var(--vd-collection-border-color);\n}\n\n/* Collection Header */\n.vd-collection-header {\n  padding: var(--vd-collection-item-padding-y) var(--vd-collection-item-padding-x);\n  margin-bottom: 0;\n  font-size: var(--vd-font-size-sm);\n  font-weight: var(--vd-font-weight-semibold);\n  color: var(--vd-text-muted);\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n  background-color: var(--vd-bg-secondary);\n  border-bottom: 1px solid var(--vd-collection-border-color);\n}\n\n/* Collection Variants */\n.vd-collection-bordered {\n  border: 1px solid var(--vd-collection-border-color);\n  border-radius: var(--vd-btn-border-radius);\n  overflow: hidden;\n}\n\n.vd-collection-bordered .vd-collection-item {\n  border-bottom: 1px solid var(--vd-collection-border-color);\n}\n\n.vd-collection-bordered .vd-collection-item:last-child {\n  border-bottom: none;\n}\n\n.vd-collection-stripped .vd-collection-item:nth-child(odd) {\n  background-color: var(--vd-bg-secondary);\n}\n\n.vd-collection-stripped .vd-collection-item:nth-child(odd):hover {\n  background-color: var(--vd-collection-item-bg-hover);\n}\n\n.vd-collection-hoverable .vd-collection-item {\n  cursor: pointer;\n}\n\n/* Collection Sizes */\n.vd-collection-sm .vd-collection-item {\n  padding: var(--vd-collection-item-padding-y-sm) var(--vd-collection-item-padding-x-sm);\n}\n\n.vd-collection-sm .vd-collection-avatar {\n  width: var(--vd-collection-avatar-size-sm);\n  height: var(--vd-collection-avatar-size-sm);\n}\n\n.vd-collection-sm .vd-collection-title {\n  font-size: var(--vd-font-size-sm);\n}\n\n.vd-collection-sm .vd-collection-text {\n  font-size: var(--vd-font-size-xs);\n}\n\n.vd-collection-lg .vd-collection-item {\n  padding: var(--vd-collection-item-padding-y-lg) var(--vd-collection-item-padding-x-lg);\n}\n\n.vd-collection-lg .vd-collection-avatar {\n  width: var(--vd-collection-avatar-size-lg);\n  height: var(--vd-collection-avatar-size-lg);\n}\n\n.vd-collection-lg .vd-collection-title {\n  font-size: var(--vd-font-size-lg);\n}\n\n.vd-collection-lg .vd-collection-text {\n  font-size: var(--vd-font-size-base);\n}\n\n/* Responsive Behavior */\n@media (max-width: 575.98px) {\n  .vd-collection-item {\n    flex-wrap: wrap;\n  }\n  \n  .vd-collection-action {\n    width: 100%;\n    margin-left: 0;\n    margin-top: 0.5rem;\n    padding-left: calc(var(--vd-collection-avatar-size) + 1rem);\n  }\n}\n\n\n/**\n * Vanduo Framework - Pagination\n * Page navigation component\n */\n\n:root {\n  /* Pagination Colors */\n  --vd-pagination-bg: var(--vd-color-white);\n  --vd-pagination-border-color: var(--vd-border-color);\n  --vd-pagination-link-color: var(--vd-color-primary);\n  --vd-pagination-link-bg: var(--vd-color-white);\n  --vd-pagination-link-bg-hover: var(--vd-bg-secondary);\n  --vd-pagination-link-bg-active: var(--vd-color-primary);\n  --vd-pagination-link-color-active: var(--vd-color-white);\n  --vd-pagination-link-color-disabled: var(--vd-text-muted);\n  \n  /* Pagination Spacing (Fibonacci pairs: x/y ratio ~ phi) */\n  --vd-pagination-padding-y: 0.5rem;        /* 8px  - fib */\n  --vd-pagination-padding-x: 0.8125rem;     /* 13px - fib */\n  --vd-pagination-padding-y-sm: 0.1875rem;  /* 3px  - fib */\n  --vd-pagination-padding-x-sm: 0.3125rem;  /* 5px  - fib */\n  --vd-pagination-padding-y-lg: 0.8125rem;  /* 13px - fib */\n  --vd-pagination-padding-x-lg: 1.3125rem;  /* 21px - fib */\n  \n  /* Pagination Font */\n  --vd-pagination-font-size: var(--vd-font-size-base);\n  --vd-pagination-font-size-sm: var(--vd-font-size-sm);\n  --vd-pagination-font-size-lg: var(--vd-font-size-lg);\n}\n\n/* Dark Theme Overrides */\n[data-theme=\"dark\"] {\n  --vd-pagination-bg: var(--vd-bg-secondary);\n  --vd-pagination-link-bg: var(--vd-bg-secondary);\n  --vd-pagination-link-bg-hover: var(--vd-bg-primary);\n}\n\n@media (prefers-color-scheme: dark) {\n  :root:not([data-theme]) {\n    --vd-pagination-bg: var(--vd-bg-secondary);\n    --vd-pagination-link-bg: var(--vd-bg-secondary);\n    --vd-pagination-link-bg-hover: var(--vd-bg-primary);\n  }\n}\n\n/* Base Pagination */\n.vd-pagination {\n  display: flex;\n  flex-wrap: wrap;\n  padding-left: 0;\n  margin: 0;\n  list-style: none;\n}\n\n/* Pagination Item */\n.vd-pagination-item {\n  display: inline-block;\n  margin: 0 0.125rem;\n}\n\n.vd-pagination-item:first-child {\n  margin-left: 0;\n}\n\n.vd-pagination-item:last-child {\n  margin-right: 0;\n}\n\n/* Pagination Link */\n.vd-pagination-link {\n  position: relative;\n  display: block;\n  padding: var(--vd-pagination-padding-y) var(--vd-pagination-padding-x);\n  font-size: var(--vd-pagination-font-size);\n  line-height: var(--vd-line-height-normal);\n  color: var(--vd-pagination-link-color);\n  text-decoration: none;\n  background-color: var(--vd-pagination-link-bg);\n  border: 1px solid var(--vd-pagination-border-color);\n  border-radius: var(--vd-btn-border-radius);\n  transition: var(--vd-transition-colors);\n  cursor: pointer;\n  user-select: none;\n}\n\n.vd-pagination-link:hover {\n  color: var(--vd-pagination-link-color);\n  background-color: var(--vd-pagination-link-bg-hover);\n  border-color: var(--vd-pagination-border-color);\n  text-decoration: none;\n}\n\n.vd-pagination-link:focus {\n  outline: 0;\n  box-shadow: var(--vd-input-focus-box-shadow);\n  z-index: 1;\n}\n\n/* Pagination Active State */\n.vd-pagination-item.active .vd-pagination-link {\n  z-index: 1;\n  color: var(--vd-pagination-link-color-active);\n  background-color: var(--vd-pagination-link-bg-active);\n  border-color: var(--vd-pagination-link-bg-active);\n  cursor: default;\n}\n\n.vd-pagination-item.active .vd-pagination-link:hover {\n  color: var(--vd-pagination-link-color-active);\n  background-color: var(--vd-pagination-link-bg-active);\n  border-color: var(--vd-pagination-link-bg-active);\n}\n\n/* Pagination Disabled State */\n.vd-pagination-item.disabled .vd-pagination-link {\n  color: var(--vd-pagination-link-color-disabled);\n  pointer-events: none;\n  cursor: not-allowed;\n  background-color: var(--vd-pagination-link-bg);\n  border-color: var(--vd-pagination-border-color);\n  opacity: 0.6;\n}\n\n/* Pagination Previous/Next */\n.vd-pagination-prev,\n.vd-pagination-next {\n  font-weight: var(--vd-font-weight-medium);\n}\n\n.vd-pagination-prev .vd-pagination-link::before {\n  content: '«';\n  margin-right: 0.25rem;\n}\n\n.vd-pagination-next .vd-pagination-link::after {\n  content: '»';\n  margin-left: 0.25rem;\n}\n\n/* Pagination Ellipsis */\n.vd-pagination-ellipsis {\n  padding: var(--vd-pagination-padding-y) var(--vd-pagination-padding-x);\n  color: var(--vd-text-muted);\n  pointer-events: none;\n  cursor: default;\n}\n\n/* Pagination Sizes */\n.vd-pagination-sm .vd-pagination-link {\n  padding: var(--vd-pagination-padding-y-sm) var(--vd-pagination-padding-x-sm);\n  font-size: var(--vd-pagination-font-size-sm);\n}\n\n.vd-pagination-lg .vd-pagination-link {\n  padding: var(--vd-pagination-padding-y-lg) var(--vd-pagination-padding-x-lg);\n  font-size: var(--vd-pagination-font-size-lg);\n}\n\n/* Pagination Alignment */\n.vd-pagination-center {\n  justify-content: center;\n}\n\n.vd-pagination-right {\n  justify-content: flex-end;\n}\n\n/* Responsive Behavior */\n@media (max-width: 575.98px) {\n  .vd-pagination {\n    flex-wrap: wrap;\n    justify-content: center;\n  }\n  \n  .vd-pagination-item {\n    margin: 0.125rem;\n  }\n  \n  .vd-pagination-prev,\n  .vd-pagination-next {\n    width: 100%;\n    text-align: center;\n    margin: 0.5rem 0;\n  }\n}\n\n\n/**\n * Vanduo Framework - Sidenav\n * Side navigation drawer component\n */\n\n:root {\n  /* Sidenav Colors */\n  --vd-sidenav-bg: var(--vd-color-white);\n  --vd-sidenav-overlay-bg: rgba(0, 0, 0, 0.35);\n  --vd-sidenav-border-color: var(--vd-border-color);\n  --vd-sidenav-item-bg-hover: var(--vd-bg-secondary);\n  --vd-sidenav-item-bg-active: var(--vd-color-primary-alpha-10);\n  --vd-sidenav-item-color-active: var(--vd-color-primary);\n  \n  /* Sidenav Dimensions (Fibonacci) */\n  --vd-sidenav-width: 233px;     /* fib */\n  --vd-sidenav-width-sm: 233px;  /* fib */\n  --vd-sidenav-width-lg: 377px;  /* fib */\n\n  /* Sidenav Spacing (Fibonacci) */\n  --vd-sidenav-padding-y: 0.8125rem;      /* 13px - fib */\n  --vd-sidenav-padding-x: 1.3125rem;      /* 21px - fib */\n  --vd-sidenav-item-padding-y: 0.5rem;    /* 8px  - fib */\n  --vd-sidenav-item-padding-x: 0.8125rem; /* 13px - fib */\n  \n  /* Sidenav Z-index */\n  --vd-sidenav-z-index: 1040;\n  --vd-sidenav-overlay-z-index: 1030;\n  \n  /* Sidenav Transitions */\n  --vd-sidenav-transition: transform var(--vd-transition-duration-slow) var(--vd-transition-ease);\n}\n\n/* Dark Theme Overrides */\n[data-theme=\"dark\"] {\n  --vd-sidenav-bg: var(--vd-bg-secondary);\n  --vd-sidenav-item-bg-hover: var(--vd-bg-primary);\n}\n\n@media (prefers-color-scheme: dark) {\n  :root:not([data-theme]) {\n    --vd-sidenav-bg: var(--vd-bg-secondary);\n    --vd-sidenav-item-bg-hover: var(--vd-bg-primary);\n  }\n}\n\n/* Sidenav Overlay */\n.vd-sidenav-overlay {\n  position: fixed;\n  top: 0;\n  left: 0;\n  z-index: var(--vd-sidenav-overlay-z-index);\n  width: 100vw;\n  height: 100vh;\n  background-color: var(--vd-sidenav-overlay-bg);\n  opacity: 0;\n  transition: opacity var(--vd-transition-duration-base) var(--vd-transition-ease);\n  pointer-events: none;\n}\n\n.vd-sidenav-overlay.is-visible {\n  opacity: 1;\n  pointer-events: all;\n}\n\n/* Base Sidenav */\n.vd-sidenav {\n  position: fixed;\n  top: 0;\n  left: 0;\n  z-index: var(--vd-sidenav-z-index);\n  width: var(--vd-sidenav-width);\n  height: 100vh;\n  display: flex;\n  flex-direction: column;\n  background-color: var(--vd-sidenav-bg);\n  box-shadow: var(--vd-shadow-lg);\n  transform: translateX(-100%);\n  transition: var(--vd-sidenav-transition);\n  overflow-y: auto;\n  overflow-x: hidden;\n}\n\n.vd-sidenav.is-open {\n  transform: translateX(0);\n}\n\n/* Sidenav Right */\n.vd-sidenav-right {\n  left: auto;\n  right: 0;\n  transform: translateX(100%);\n}\n\n.vd-sidenav-right.is-open {\n  transform: translateX(0);\n}\n\n/* Sidenav Variants */\n.vd-sidenav-overlay-variant {\n  /* Overlay variant - slides over content */\n}\n\n.vd-sidenav-push {\n  /* Push variant - pushes content */\n}\n\n.vd-sidenav-push.is-open ~ * {\n  margin-left: var(--vd-sidenav-width);\n  transition: margin-left var(--vd-transition-duration-slow) var(--vd-transition-ease);\n}\n\n.vd-sidenav-push.vd-sidenav-right.is-open ~ * {\n  margin-left: 0;\n  margin-right: var(--vd-sidenav-width);\n}\n\n.vd-sidenav-fixed {\n  position: fixed;\n  transform: translateX(0);\n}\n\n.vd-sidenav-fixed.is-open {\n  transform: translateX(0);\n}\n\n/* Sidenav Header */\n.vd-sidenav-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: var(--vd-sidenav-padding-y) var(--vd-sidenav-padding-x);\n  border-bottom: 1px solid var(--vd-sidenav-border-color);\n  flex-shrink: 0;\n}\n\n.vd-sidenav-title {\n  margin: 0;\n  font-size: var(--vd-font-size-lg);\n  font-weight: var(--vd-font-weight-semibold);\n  color: var(--vd-text-primary);\n}\n\n.vd-sidenav-close {\n  padding: 0.5rem;\n  margin: -0.5rem -0.5rem -0.5rem auto;\n  background: transparent;\n  border: 0;\n  border-radius: var(--vd-btn-border-radius);\n  opacity: 0.5;\n  cursor: pointer;\n  font-size: 1.5rem;\n  font-weight: var(--vd-font-weight-bold);\n  line-height: 1;\n  color: var(--vd-text-secondary);\n  transition: var(--vd-transition-opacity);\n}\n\n.vd-sidenav-close:hover,\n.vd-sidenav-close:focus {\n  opacity: 0.75;\n  outline: none;\n}\n\n/* Sidenav Body */\n.vd-sidenav-body {\n  flex: 1 1 auto;\n  padding: var(--vd-sidenav-padding-y) 0;\n  overflow-y: auto;\n  overflow-x: hidden;\n}\n\n/* Sidenav Footer */\n.vd-sidenav-footer {\n  padding: var(--vd-sidenav-padding-y) var(--vd-sidenav-padding-x);\n  border-top: 1px solid var(--vd-sidenav-border-color);\n  flex-shrink: 0;\n}\n\n/* Sidenav Navigation */\n.vd-sidenav-nav {\n  list-style: none;\n  padding: 0;\n  margin: 0;\n}\n\n/* Sidenav Section */\n.vd-sidenav-section {\n  padding: 0.5rem var(--vd-sidenav-padding-x);\n  margin-top: 0.5rem;\n  font-size: var(--vd-font-size-xs);\n  font-weight: var(--vd-font-weight-semibold);\n  color: var(--vd-text-muted);\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n}\n\n.vd-sidenav-section:first-child {\n  margin-top: 0;\n}\n\n/* Sidenav Item */\n.vd-sidenav-item {\n  display: block;\n}\n\n.vd-sidenav-link {\n  display: flex;\n  align-items: center;\n  padding: var(--vd-sidenav-item-padding-y) var(--vd-sidenav-item-padding-x);\n  font-size: var(--vd-font-size-base);\n  font-weight: var(--vd-font-weight-normal);\n  line-height: var(--vd-line-height-normal);\n  color: var(--vd-text-primary);\n  text-decoration: none;\n  transition: var(--vd-transition-bg);\n  cursor: pointer;\n}\n\n.vd-sidenav-link:hover {\n  background-color: var(--vd-sidenav-item-bg-hover);\n  color: var(--vd-text-primary);\n  text-decoration: none;\n}\n\n.vd-sidenav-link:focus {\n  outline: 2px solid var(--vd-input-focus-border-color);\n  outline-offset: -2px;\n}\n\n.vd-sidenav-item.active .vd-sidenav-link {\n  background-color: var(--vd-sidenav-item-bg-active);\n  color: var(--vd-sidenav-item-color-active);\n  font-weight: var(--vd-font-weight-medium);\n}\n\n/* Sidenav Divider */\n.vd-sidenav-divider {\n  height: 0;\n  margin: 0.5rem var(--vd-sidenav-padding-x);\n  overflow: hidden;\n  border-top: 1px solid var(--vd-sidenav-border-color);\n}\n\n/* Sidenav Sizes */\n.vd-sidenav-sm {\n  width: var(--vd-sidenav-width-sm);\n}\n\n.vd-sidenav-sm.vd-sidenav-push.is-open ~ * {\n  margin-left: var(--vd-sidenav-width-sm);\n}\n\n.vd-sidenav-sm.vd-sidenav-push.vd-sidenav-right.is-open ~ * {\n  margin-right: var(--vd-sidenav-width-sm);\n}\n\n.vd-sidenav-lg {\n  width: var(--vd-sidenav-width-lg);\n}\n\n.vd-sidenav-lg.vd-sidenav-push.is-open ~ * {\n  margin-left: var(--vd-sidenav-width-lg);\n}\n\n.vd-sidenav-lg.vd-sidenav-push.vd-sidenav-right.is-open ~ * {\n  margin-right: var(--vd-sidenav-width-lg);\n}\n\n/* ========== Offcanvas Alias ========== */\n\n.vd-offcanvas {\n  position: fixed;\n  top: 0;\n  left: 0;\n  z-index: var(--vd-sidenav-z-index);\n  width: var(--vd-sidenav-width);\n  height: 100vh;\n  display: flex;\n  flex-direction: column;\n  background-color: var(--vd-sidenav-bg);\n  box-shadow: var(--vd-shadow-lg);\n  transform: translateX(-100%);\n  transition: var(--vd-sidenav-transition);\n  overflow-y: auto;\n  overflow-x: hidden;\n}\n\n.vd-offcanvas.is-open {\n  transform: translateX(0) translateY(0);\n}\n\n/* Top direction */\n.vd-sidenav-top,\n.vd-offcanvas-top {\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: auto;\n  width: 100%;\n  height: auto;\n  max-height: 80vh;\n  transform: translateY(-100%);\n}\n\n.vd-sidenav-top.is-open,\n.vd-offcanvas-top.is-open {\n  transform: translateY(0);\n}\n\n/* Bottom direction */\n.vd-sidenav-bottom,\n.vd-offcanvas-bottom {\n  top: auto;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  width: 100%;\n  height: auto;\n  max-height: 80vh;\n  transform: translateY(100%);\n}\n\n.vd-sidenav-bottom.is-open,\n.vd-offcanvas-bottom.is-open {\n  transform: translateY(0);\n}\n\n/* Right alias for offcanvas */\n.vd-offcanvas-right {\n  left: auto;\n  right: 0;\n  transform: translateX(100%);\n}\n\n.vd-offcanvas-right.is-open {\n  transform: translateX(0);\n}\n\n/* Body Scroll Lock */\n.body-sidenav-open {\n  overflow: hidden;\n}\n\n/* Responsive Behavior */\n@media (max-width: 991.98px) {\n  .vd-sidenav {\n    /* On mobile, sidenav is always overlay */\n    position: fixed;\n  }\n  \n  .vd-sidenav-fixed {\n    /* Fixed sidenav becomes overlay on mobile */\n    position: fixed;\n    transform: translateX(-100%);\n  }\n  \n  .vd-sidenav-fixed.vd-sidenav-right {\n    transform: translateX(100%);\n  }\n  \n  .vd-sidenav-fixed.is-open {\n    transform: translateX(0);\n  }\n  \n  .vd-sidenav-push.is-open ~ * {\n    margin-left: 0;\n    margin-right: 0;\n  }\n}\n\n\n/**\n * Vanduo Framework - Preloader Component\n * Legacy preloader aliases and preloader layout helpers.\n *\n * Spinner visuals live in spinner.css. Progress bars live in progress.css.\n */\n\n/* Legacy preloader spinner alias */\n.vd-preloader {\n  display: inline-block;\n  width: var(--vd-spinner-size, 2rem);\n  height: var(--vd-spinner-size, 2rem);\n  border: var(--vd-spinner-border-width, 3px) solid var(--vd-border-color, #e9ecef);\n  border-top-color: var(--vd-spinner-color, var(--vd-color-primary));\n  border-radius: 50%;\n  animation: spinner-rotate var(--vd-spinner-speed, 0.65s) linear infinite;\n}\n\n/* Preloader Sizes */\n.vd-preloader-xs { --vd-spinner-size: 1rem; --vd-spinner-border-width: 2px; }\n.vd-preloader-sm { --vd-spinner-size: 1.5rem; --vd-spinner-border-width: 2px; }\n.vd-preloader-lg { --vd-spinner-size: 3rem; --vd-spinner-border-width: 4px; }\n.vd-preloader-xl { --vd-spinner-size: 4rem; --vd-spinner-border-width: 5px; }\n\n/* Preloader Colors */\n.vd-preloader-primary { --vd-spinner-color: var(--vd-color-primary); }\n.vd-preloader-secondary { --vd-spinner-color: var(--vd-color-secondary); }\n.vd-preloader-success { --vd-spinner-color: var(--vd-color-success); }\n.vd-preloader-warning { --vd-spinner-color: var(--vd-color-warning); }\n.vd-preloader-error { --vd-spinner-color: var(--vd-color-error); }\n.vd-preloader-info { --vd-spinner-color: var(--vd-color-info); }\n.vd-preloader-light { --vd-spinner-color: #fff; }\n.vd-preloader-dark { --vd-spinner-color: var(--vd-text-primary); }\n\n/* Preloader Container */\n.vd-preloader-container {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  min-height: 200px;\n  gap: 1rem;\n}\n\n.vd-preloader-text {\n  color: var(--vd-text-secondary);\n  font-size: var(--vd-font-size-sm);\n}\n\n/* Reduced Motion */\n@media (prefers-reduced-motion: reduce) {\n  .vd-preloader {\n    animation-duration: 1.5s;\n  }\n}\n\n\n/**\n * Vanduo Framework - Alerts\n * Alert and notification components for user feedback\n */\n\n:root {\n  /* Alert Spacing (Fibonacci: 21px/13px, ratio ~ phi) */\n  --vd-alert-padding-x: 1.3125rem;   /* 21px - fib */\n  --vd-alert-padding-y: 0.8125rem;   /* 13px - fib */\n  --vd-alert-border-radius: var(--vd-btn-border-radius);\n  --vd-alert-border-width: 1px;\n\n  /* Alert Colors */\n  --vd-alert-primary-bg: var(--vd-color-primary-alpha-10);\n  --vd-alert-primary-border: var(--vd-color-primary);\n  --vd-alert-primary-text: var(--vd-color-primary-dark);\n\n  --vd-alert-success-bg: var(--vd-color-success-alpha-10);\n  --vd-alert-success-border: var(--vd-color-success);\n  --vd-alert-success-text: var(--vd-color-success-dark);\n\n  --vd-alert-warning-bg: var(--vd-color-warning-alpha-10);\n  --vd-alert-warning-border: var(--vd-color-warning);\n  --vd-alert-warning-text: var(--vd-color-warning-dark);\n\n  --vd-alert-error-bg: var(--vd-color-error-alpha-10);\n  --vd-alert-error-border: var(--vd-color-error);\n  --vd-alert-error-text: var(--vd-color-error-dark);\n\n  --vd-alert-info-bg: var(--vd-color-info-alpha-10);\n  --vd-alert-info-border: var(--vd-color-info);\n  --vd-alert-info-text: var(--vd-color-info-dark);\n}\n\n/* Dark Theme Overrides */\n[data-theme=\"dark\"] {\n  --vd-alert-primary-text: var(--vd-color-primary-light);\n  --vd-alert-success-text: var(--vd-color-success-light);\n  --vd-alert-warning-text: var(--vd-color-warning-light);\n  --vd-alert-error-text: var(--vd-color-error-light);\n  --vd-alert-info-text: var(--vd-color-info-light);\n}\n\n@media (prefers-color-scheme: dark) {\n  :root:not([data-theme]) {\n    --vd-alert-primary-text: var(--vd-color-primary-light);\n    --vd-alert-success-text: var(--vd-color-success-light);\n    --vd-alert-warning-text: var(--vd-color-warning-light);\n    --vd-alert-error-text: var(--vd-color-error-light);\n    --vd-alert-info-text: var(--vd-color-info-light);\n  }\n}\n\n/* Base Alert */\n.vd-alert {\n  position: relative;\n  padding: var(--vd-alert-padding-y) var(--vd-alert-padding-x);\n  margin-bottom: 1rem;\n  border: var(--vd-alert-border-width) solid transparent;\n  border-radius: var(--vd-alert-border-radius);\n  font-size: var(--vd-font-size-base);\n  line-height: var(--vd-line-height-normal);\n}\n\n/* Alert Variants */\n.vd-alert-primary {\n  background-color: var(--vd-alert-primary-bg);\n  border-color: var(--vd-alert-primary-border);\n  color: var(--vd-alert-primary-text);\n}\n\n.vd-alert-success {\n  background-color: var(--vd-alert-success-bg);\n  border-color: var(--vd-alert-success-border);\n  color: var(--vd-alert-success-text);\n}\n\n.vd-alert-warning {\n  background-color: var(--vd-alert-warning-bg);\n  border-color: var(--vd-alert-warning-border);\n  color: var(--vd-alert-warning-text);\n}\n\n.vd-alert-error,\n.vd-alert-danger {\n  background-color: var(--vd-alert-error-bg);\n  border-color: var(--vd-alert-error-border);\n  color: var(--vd-alert-error-text);\n}\n\n.vd-alert-info {\n  background-color: var(--vd-alert-info-bg);\n  border-color: var(--vd-alert-info-border);\n  color: var(--vd-alert-info-text);\n}\n\n/* Alert with Icon */\n.vd-alert-icon {\n  display: flex;\n  align-items: flex-start;\n  gap: 0.75rem;\n}\n\n.vd-alert-icon > svg,\n.vd-alert-icon > .icon {\n  flex-shrink: 0;\n  width: 1.25rem;\n  height: 1.25rem;\n  margin-top: 0.125rem;\n}\n\n/* Alert Title */\n.vd-alert-title {\n  font-weight: var(--vd-font-weight-semibold);\n  margin-bottom: 0.25rem;\n}\n\n/* Alert Content */\n.vd-alert-content {\n  flex: 1;\n}\n\n/* Dismissible Alert */\n.vd-alert-dismissible {\n  padding-right: 3rem;\n}\n\n.vd-alert-close {\n  position: absolute;\n  top: 0;\n  right: 0;\n  padding: var(--vd-alert-padding-y) var(--vd-alert-padding-x);\n  background: transparent;\n  border: none;\n  cursor: pointer;\n  opacity: 0.5;\n  transition: opacity 0.15s ease;\n  color: inherit;\n  font-size: 1.25rem;\n  line-height: 1;\n}\n\n.vd-alert-close:hover {\n  opacity: 1;\n}\n\n.vd-alert-close:focus {\n  outline: 2px solid currentColor;\n  outline-offset: 2px;\n}\n\n/* Alert Link */\n.vd-alert a,\n.vd-alert-link {\n  font-weight: var(--vd-font-weight-semibold);\n  color: inherit;\n  text-decoration: underline;\n}\n\n.vd-alert a:hover,\n.vd-alert-link:hover {\n  text-decoration: none;\n}\n\n/* Solid Variants (filled background) */\n.vd-alert-solid.vd-alert-primary {\n  background-color: var(--vd-color-primary);\n  border-color: var(--vd-color-primary);\n  color: var(--vd-color-white);\n}\n\n.vd-alert-solid.vd-alert-success {\n  background-color: var(--vd-color-success);\n  border-color: var(--vd-color-success);\n  color: var(--vd-color-white);\n}\n\n.vd-alert-solid.vd-alert-warning {\n  background-color: var(--vd-color-warning);\n  border-color: var(--vd-color-warning);\n  color: var(--vd-color-gray-900);\n}\n\n.vd-alert-solid.vd-alert-error,\n.vd-alert-solid.vd-alert-danger {\n  background-color: var(--vd-color-error);\n  border-color: var(--vd-color-error);\n  color: var(--vd-color-white);\n}\n\n.vd-alert-solid.vd-alert-info {\n  background-color: var(--vd-color-info);\n  border-color: var(--vd-color-info);\n  color: var(--vd-color-white);\n}\n\n/* Outline Variants */\n.vd-alert-outline {\n  background-color: transparent;\n}\n\n/* Alert Sizes */\n.vd-alert-sm {\n  padding: 0.3125rem 0.5rem; /* 5px 8px - fib pair */\n  font-size: var(--vd-font-size-sm);\n}\n\n.vd-alert-lg {\n  padding: 1.3125rem 2.125rem; /* 21px 34px - fib pair */\n  font-size: var(--vd-font-size-lg);\n}\n\n/* Alert with Border Left Accent */\n.vd-alert-accent {\n  border-left-width: 4px;\n  border-radius: 0 var(--vd-alert-border-radius) var(--vd-alert-border-radius) 0;\n}\n\n/* Reduced Motion */\n@media (prefers-reduced-motion: reduce) {\n  .vd-alert-close {\n    transition: none;\n  }\n}\n\n/**\n * Vanduo Framework - Chips/Tags\n * Small interactive elements for tags, filters, and selections\n */\n\n:root {\n  /* Chip Sizing (Fibonacci) */\n  --vd-chip-padding-x: 0.8125rem;     /* 13px - fib */\n  --vd-chip-padding-y: 0.3125rem;     /* 5px  - fib */\n  --vd-chip-padding-x-sm: 0.5rem;     /* 8px  - fib */\n  --vd-chip-padding-y-sm: 0.1875rem;  /* 3px  - fib */\n  --vd-chip-padding-x-lg: 1.3125rem;  /* 21px - fib */\n  --vd-chip-padding-y-lg: 0.5rem;     /* 8px  - fib */\n  --vd-chip-border-radius: 9999px;\n  --vd-chip-font-size: var(--vd-font-size-sm);\n  --vd-chip-font-size-sm: var(--vd-font-size-xs);\n  --vd-chip-font-size-lg: var(--vd-font-size-base);\n\n  /* Chip Colors */\n  --vd-chip-bg: var(--vd-bg-secondary);\n  --vd-chip-text: var(--vd-text-primary);\n  --vd-chip-border: var(--vd-border-color);\n}\n\n/* Dark Theme Overrides */\n[data-theme=\"dark\"] {\n  --vd-chip-bg: var(--vd-color-gray-700);\n}\n\n@media (prefers-color-scheme: dark) {\n  :root:not([data-theme]) {\n    --vd-chip-bg: var(--vd-color-gray-700);\n  }\n}\n\n/* Base Chip */\n.vd-chip,\n.tag {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.375rem;\n  padding: var(--vd-chip-padding-y) var(--vd-chip-padding-x);\n  font-size: var(--vd-chip-font-size);\n  font-weight: var(--vd-font-weight-medium);\n  line-height: 1.2;\n  color: var(--vd-chip-text);\n  background-color: var(--vd-chip-bg);\n  border-radius: var(--vd-chip-border-radius);\n  white-space: nowrap;\n  vertical-align: middle;\n  transition: var(--vd-transition-base);\n}\n\n/* Chip Sizes */\n.vd-chip-sm,\n.tag-sm {\n  padding: var(--vd-chip-padding-y-sm) var(--vd-chip-padding-x-sm);\n  font-size: var(--vd-chip-font-size-sm);\n}\n\n.vd-chip-lg,\n.tag-lg {\n  padding: var(--vd-chip-padding-y-lg) var(--vd-chip-padding-x-lg);\n  font-size: var(--vd-chip-font-size-lg);\n}\n\n/* Chip Color Variants */\n.vd-chip-primary,\n.tag-primary {\n  background-color: var(--vd-color-primary);\n  color: var(--vd-color-white);\n}\n\n.vd-chip-secondary,\n.tag-secondary {\n  background-color: var(--vd-color-secondary);\n  color: var(--vd-color-white);\n}\n\n.vd-chip-success,\n.tag-success {\n  background-color: var(--vd-color-success);\n  color: var(--vd-color-white);\n}\n\n.vd-chip-warning,\n.tag-warning {\n  background-color: var(--vd-color-warning);\n  color: var(--vd-color-gray-900);\n}\n\n.vd-chip-error,\n.tag-error,\n.vd-chip-danger,\n.tag-danger {\n  background-color: var(--vd-color-error);\n  color: var(--vd-color-white);\n}\n\n.vd-chip-info,\n.tag-info {\n  background-color: var(--vd-color-info);\n  color: var(--vd-color-white);\n}\n\n/* Outline Variants */\n.vd-chip-outline,\n.tag-outline {\n  background-color: transparent;\n  border: 1px solid var(--vd-chip-border);\n}\n\n.vd-chip-outline.vd-chip-primary,\n.tag-outline.tag-primary {\n  border-color: var(--vd-color-primary);\n  color: var(--vd-color-primary);\n  background-color: transparent;\n}\n\n.vd-chip-outline.vd-chip-success,\n.tag-outline.tag-success {\n  border-color: var(--vd-color-success);\n  color: var(--vd-color-success);\n  background-color: transparent;\n}\n\n.vd-chip-outline.vd-chip-warning,\n.tag-outline.tag-warning {\n  border-color: var(--vd-color-warning);\n  color: var(--vd-color-warning);\n  background-color: transparent;\n}\n\n.vd-chip-outline.vd-chip-error,\n.tag-outline.tag-error {\n  border-color: var(--vd-color-error);\n  color: var(--vd-color-error);\n  background-color: transparent;\n}\n\n.vd-chip-outline.vd-chip-info,\n.tag-outline.tag-info {\n  border-color: var(--vd-color-info);\n  color: var(--vd-color-info);\n  background-color: transparent;\n}\n\n/* Clickable/Interactive Chip */\n.vd-chip-clickable,\n.tag-clickable,\na.vd-chip,\na.tag,\nbutton.vd-chip,\nbutton.tag {\n  cursor: pointer;\n  text-decoration: none;\n  border: none;\n}\n\n.vd-chip-clickable:hover,\n.tag-clickable:hover,\na.vd-chip:hover,\na.tag:hover,\nbutton.vd-chip:hover,\nbutton.tag:hover {\n  filter: brightness(0.9);\n}\n\n.vd-chip-clickable:focus-visible,\n.tag-clickable:focus-visible,\na.vd-chip:focus-visible,\na.tag:focus-visible,\nbutton.vd-chip:focus-visible,\nbutton.tag:focus-visible {\n  outline: 2px solid var(--vd-color-primary);\n  outline-offset: 2px;\n}\n\n/* Dismissible Chip */\n.vd-chip-dismissible,\n.tag-dismissible {\n  padding-right: 0.375rem;\n}\n\n.vd-chip-close,\n.tag-close {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 1rem;\n  height: 1rem;\n  padding: 0;\n  margin-left: 0.125rem;\n  font-size: 0.75rem;\n  line-height: 1;\n  color: inherit;\n  background: transparent;\n  border: none;\n  border-radius: 50%;\n  cursor: pointer;\n  opacity: 0.7;\n  transition: opacity 0.15s ease;\n}\n\n.vd-chip-close:hover,\n.tag-close:hover {\n  opacity: 1;\n}\n\n.vd-chip-close::before,\n.tag-close::before {\n  content: '\\00D7';\n  font-size: 1rem;\n  font-weight: bold;\n}\n\n/* Chip with Avatar/Image */\n.vd-chip-avatar,\n.tag-avatar {\n  padding-left: 0.25rem;\n}\n\n.vd-chip-avatar img,\n.tag-avatar img {\n  width: 1.5rem;\n  height: 1.5rem;\n  border-radius: 50%;\n  object-fit: cover;\n}\n\n.vd-chip-sm.vd-chip-avatar img,\n.tag-sm.tag-avatar img {\n  width: 1.25rem;\n  height: 1.25rem;\n}\n\n.vd-chip-lg.vd-chip-avatar img,\n.tag-lg.tag-avatar img {\n  width: 1.75rem;\n  height: 1.75rem;\n}\n\n/* Chip Group */\n.vd-chip-group,\n.tag-group {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 0.5rem;\n}\n\n/* Reduced Motion */\n@media (prefers-reduced-motion: reduce) {\n  .vd-chip,\n  .tag,\n  .vd-chip-close,\n  .tag-close {\n    transition: none;\n  }\n}\n\n/**\n * Vanduo Framework - Avatar\n * User profile images and placeholders\n */\n\n:root {\n  /* Avatar Sizes (Fibonacci) */\n  --vd-avatar-size-xs: 1.3125rem;  /* 21px - fib */\n  --vd-avatar-size-sm: 2.125rem;   /* 34px - fib */\n  --vd-avatar-size-md: 3.4375rem;  /* 55px - fib */\n  --vd-avatar-size: 3.4375rem;     /* 55px - fib (default / md) */\n  --vd-avatar-size-lg: 5.5625rem;  /* 89px - fib */\n  --vd-avatar-size-xl: 9rem;       /* 144px - fib */\n  --vd-avatar-size-2xl: 14.5625rem;/* 233px - fib */\n\n  /* Avatar Colors */\n  --vd-avatar-bg: var(--vd-color-gray-300);\n  --vd-avatar-text: var(--vd-color-gray-700);\n  --vd-avatar-border: var(--vd-color-white);\n  --vd-avatar-status-online: var(--vd-color-success);\n  --vd-avatar-status-offline: var(--vd-color-gray-400);\n  --vd-avatar-status-busy: var(--vd-color-error);\n  --vd-avatar-status-away: var(--vd-color-warning);\n}\n\n/* Dark Theme Overrides */\n[data-theme=\"dark\"] {\n  --vd-avatar-bg: var(--vd-color-gray-600);\n  --vd-avatar-text: var(--vd-color-gray-200);\n  --vd-avatar-border: var(--vd-color-gray-800);\n}\n\n@media (prefers-color-scheme: dark) {\n  :root:not([data-theme]) {\n    --vd-avatar-bg: var(--vd-color-gray-600);\n    --vd-avatar-text: var(--vd-color-gray-200);\n    --vd-avatar-border: var(--vd-color-gray-800);\n  }\n}\n\n/* Base Avatar */\n.vd-avatar {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--vd-avatar-size);\n  height: var(--vd-avatar-size);\n  border-radius: 50%;\n  background-color: var(--vd-avatar-bg);\n  color: var(--vd-avatar-text);\n  font-weight: var(--vd-font-weight-medium);\n  font-size: calc(var(--vd-avatar-size) * 0.4);\n  line-height: 1;\n  overflow: hidden;\n  flex-shrink: 0;\n  vertical-align: middle;\n}\n\n/* Avatar Image */\n.vd-avatar img {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  border-radius: inherit;\n}\n\n/* Avatar Initials (fallback) */\n.vd-avatar-initials {\n  text-transform: uppercase;\n  user-select: none;\n}\n\n/* Avatar Sizes */\n.vd-avatar-xs {\n  width: var(--vd-avatar-size-xs);\n  height: var(--vd-avatar-size-xs);\n  font-size: calc(var(--vd-avatar-size-xs) * 0.4);\n}\n\n.vd-avatar-sm {\n  width: var(--vd-avatar-size-sm);\n  height: var(--vd-avatar-size-sm);\n  font-size: calc(var(--vd-avatar-size-sm) * 0.4);\n}\n\n.vd-avatar-md {\n  width: var(--vd-avatar-size-md);\n  height: var(--vd-avatar-size-md);\n  font-size: calc(var(--vd-avatar-size-md) * 0.4);\n}\n\n.vd-avatar-lg {\n  width: var(--vd-avatar-size-lg);\n  height: var(--vd-avatar-size-lg);\n  font-size: calc(var(--vd-avatar-size-lg) * 0.4);\n}\n\n.vd-avatar-xl {\n  width: var(--vd-avatar-size-xl);\n  height: var(--vd-avatar-size-xl);\n  font-size: calc(var(--vd-avatar-size-xl) * 0.4);\n}\n\n.vd-avatar-2xl {\n  width: var(--vd-avatar-size-2xl);\n  height: var(--vd-avatar-size-2xl);\n  font-size: calc(var(--vd-avatar-size-2xl) * 0.4);\n}\n\n/* Avatar Shapes */\n.vd-avatar-rounded {\n  border-radius: var(--vd-btn-border-radius);\n}\n\n.vd-avatar-square {\n  border-radius: 0;\n}\n\n/* Avatar Status Indicator */\n.vd-avatar-status {\n  position: absolute;\n  bottom: 0;\n  right: 0;\n  width: 25%;\n  height: 25%;\n  min-width: 0.5rem;\n  min-height: 0.5rem;\n  border-radius: 50%;\n  border: 2px solid var(--vd-avatar-border);\n  background-color: var(--vd-avatar-status-offline);\n}\n\n.vd-avatar.vd-avatar-status-online,\n.vd-avatar.vd-avatar-status-offline,\n.vd-avatar.vd-avatar-status-busy,\n.vd-avatar.vd-avatar-status-away {\n  overflow: visible;\n}\n\n.vd-avatar.vd-avatar-status-online::after,\n.vd-avatar.vd-avatar-status-offline::after,\n.vd-avatar.vd-avatar-status-busy::after,\n.vd-avatar.vd-avatar-status-away::after {\n  content: '';\n  position: absolute;\n  bottom: 2%;\n  right: 2%;\n  width: 25%;\n  height: 25%;\n  min-width: 0.5rem;\n  min-height: 0.5rem;\n  border-radius: 50%;\n  border: 2px solid var(--vd-avatar-border);\n}\n\n.vd-avatar.vd-avatar-status-online::after  { background-color: var(--vd-avatar-status-online); }\n.vd-avatar.vd-avatar-status-offline::after { background-color: var(--vd-avatar-status-offline); }\n.vd-avatar.vd-avatar-status-busy::after    { background-color: var(--vd-avatar-status-busy); }\n.vd-avatar.vd-avatar-status-away::after    { background-color: var(--vd-avatar-status-away); }\n\n/* Avatar with Ring/Border */\n.vd-avatar-ring {\n  box-shadow: 0 0 0 3px var(--vd-avatar-border), 0 0 0 5px var(--vd-color-primary);\n}\n\n.vd-avatar-ring-success {\n  box-shadow: 0 0 0 3px var(--vd-avatar-border), 0 0 0 5px var(--vd-color-success);\n}\n\n.vd-avatar-ring-warning {\n  box-shadow: 0 0 0 3px var(--vd-avatar-border), 0 0 0 5px var(--vd-color-warning);\n}\n\n.vd-avatar-ring-error {\n  box-shadow: 0 0 0 3px var(--vd-avatar-border), 0 0 0 5px var(--vd-color-error);\n}\n\n/* Avatar Group (stacked avatars) */\n.vd-avatar-group {\n  display: inline-flex;\n  flex-direction: row-reverse;\n}\n\n.vd-avatar-group .vd-avatar {\n  border: 2px solid var(--vd-avatar-border);\n  margin-left: -0.75rem;\n}\n\n.vd-avatar-group .vd-avatar:last-child {\n  margin-left: 0;\n}\n\n.vd-avatar-group .vd-avatar:hover {\n  z-index: 1;\n}\n\n/* Avatar Group Sizes */\n.vd-avatar-group-sm .vd-avatar {\n  margin-left: -0.5rem;\n}\n\n.vd-avatar-group-lg .vd-avatar {\n  margin-left: -1rem;\n}\n\n/* Avatar Group with Counter */\n.vd-avatar-group-count {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--vd-avatar-size);\n  height: var(--vd-avatar-size);\n  border-radius: 50%;\n  background-color: var(--vd-color-gray-200);\n  color: var(--vd-text-primary);\n  font-size: var(--vd-font-size-sm);\n  font-weight: var(--vd-font-weight-medium);\n  border: 2px solid var(--vd-avatar-border);\n  margin-left: -0.75rem;\n}\n\n[data-theme=\"dark\"] .vd-avatar-group-count {\n  background-color: var(--vd-color-gray-700);\n}\n\n/* Color Variants */\n.vd-avatar-primary {\n  background-color: var(--vd-color-primary);\n  color: var(--vd-color-white);\n}\n\n.vd-avatar-secondary {\n  background-color: var(--vd-color-secondary);\n  color: var(--vd-color-white);\n}\n\n.vd-avatar-success {\n  background-color: var(--vd-color-success);\n  color: var(--vd-color-white);\n}\n\n.vd-avatar-warning {\n  background-color: var(--vd-color-warning);\n  color: var(--vd-color-gray-900);\n}\n\n.vd-avatar-error {\n  background-color: var(--vd-color-error);\n  color: var(--vd-color-white);\n}\n\n.vd-avatar-info {\n  background-color: var(--vd-color-info);\n  color: var(--vd-color-white);\n}\n\n/* Clickable Avatar */\na.vd-avatar,\nbutton.vd-avatar {\n  cursor: pointer;\n  transition: transform 0.15s ease, box-shadow 0.15s ease;\n}\n\na.vd-avatar:hover,\nbutton.vd-avatar:hover {\n  transform: scale(1.05);\n}\n\na.vd-avatar:focus-visible,\nbutton.vd-avatar:focus-visible {\n  outline: 2px solid var(--vd-color-primary);\n  outline-offset: 2px;\n}\n\n/* Reduced Motion */\n@media (prefers-reduced-motion: reduce) {\n  a.vd-avatar,\n  button.vd-avatar {\n    transition: none;\n  }\n\n  a.vd-avatar:hover,\n  button.vd-avatar:hover {\n    transform: none;\n  }\n}\n\n/**\n * Vanduo Framework - Skeleton\n * Loading placeholder animations\n */\n\n:root {\n  /* Skeleton Colors */\n  --vd-skeleton-bg: var(--vd-color-gray-200);\n  --vd-skeleton-shimmer: var(--vd-color-gray-100);\n  --vd-skeleton-border-radius: var(--vd-btn-border-radius);\n}\n\n/* Dark Theme Overrides */\n[data-theme=\"dark\"] {\n  --vd-skeleton-bg: var(--vd-color-gray-700);\n  --vd-skeleton-shimmer: var(--vd-color-gray-600);\n}\n\n@media (prefers-color-scheme: dark) {\n  :root:not([data-theme]) {\n    --vd-skeleton-bg: var(--vd-color-gray-700);\n    --vd-skeleton-shimmer: var(--vd-color-gray-600);\n  }\n}\n\n/* Base Skeleton */\n.vd-skeleton {\n  position: relative;\n  overflow: hidden;\n  background-color: var(--vd-skeleton-bg);\n  border-radius: var(--vd-skeleton-border-radius);\n}\n\n/* Shimmer Animation */\n.vd-skeleton::after {\n  content: '';\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  transform: translateX(-100%);\n  background: linear-gradient(\n    90deg,\n    transparent,\n    var(--vd-skeleton-shimmer),\n    transparent\n  );\n  animation: skeleton-shimmer 1.5s infinite;\n}\n\n@keyframes skeleton-shimmer {\n  100% {\n    transform: translateX(100%);\n  }\n}\n\n/* Skeleton Text (single line) */\n.vd-skeleton-text {\n  height: 1rem;\n  width: 100%;\n  margin-bottom: 0.5rem;\n}\n\n.vd-skeleton-text:last-child {\n  width: 80%;\n  margin-bottom: 0;\n}\n\n/* Skeleton Text Sizes */\n.vd-skeleton-text-xs { height: 0.75rem; }\n.vd-skeleton-text-sm { height: 0.875rem; }\n.vd-skeleton-text-lg { height: 1.25rem; }\n.vd-skeleton-text-xl { height: 1.5rem; }\n\n/* Skeleton Heading */\n.vd-skeleton-heading {\n  height: 1.5rem;\n  width: 60%;\n  margin-bottom: 1rem;\n}\n\n.vd-skeleton-heading-lg {\n  height: 2rem;\n  width: 50%;\n}\n\n/* Skeleton Circle (for avatars) */\n.vd-skeleton-circle {\n  border-radius: 50%;\n  width: 3rem;\n  height: 3rem;\n}\n\n.vd-skeleton-circle-xs { width: 1.5rem; height: 1.5rem; }\n.vd-skeleton-circle-sm { width: 2rem; height: 2rem; }\n.vd-skeleton-circle-md { width: 2.5rem; height: 2.5rem; }\n.vd-skeleton-circle-lg { width: 4rem; height: 4rem; }\n.vd-skeleton-circle-xl { width: 5rem; height: 5rem; }\n\n/* Skeleton Rectangle (for images/thumbnails) */\n.vd-skeleton-rect {\n  width: 100%;\n  height: 200px;\n}\n\n.vd-skeleton-rect-sm { height: 100px; }\n.vd-skeleton-rect-lg { height: 300px; }\n\n/* Skeleton Button */\n.vd-skeleton-button {\n  height: 2.5rem;\n  width: 6rem;\n  border-radius: var(--vd-btn-border-radius);\n}\n\n.vd-skeleton-button-sm {\n  height: 2rem;\n  width: 4rem;\n}\n\n.vd-skeleton-button-lg {\n  height: 3rem;\n  width: 8rem;\n}\n\n/* Skeleton Card */\n.vd-skeleton-card {\n  padding: 1rem;\n  border-radius: var(--vd-btn-border-radius);\n  border: 1px solid var(--vd-border-color);\n}\n\n/* Skeleton Input */\n.vd-skeleton-input {\n  height: 2.5rem;\n  width: 100%;\n  border-radius: var(--vd-btn-border-radius);\n}\n\n/* Skeleton Paragraph (multiple lines) */\n.vd-skeleton-paragraph {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n}\n\n.vd-skeleton-paragraph .vd-skeleton-text {\n  margin-bottom: 0;\n}\n\n.vd-skeleton-paragraph .vd-skeleton-text:nth-child(1) { width: 100%; }\n.vd-skeleton-paragraph .vd-skeleton-text:nth-child(2) { width: 95%; }\n.vd-skeleton-paragraph .vd-skeleton-text:nth-child(3) { width: 90%; }\n.vd-skeleton-paragraph .vd-skeleton-text:nth-child(4) { width: 70%; }\n\n/* Skeleton List */\n.vd-skeleton-list {\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n}\n\n.vd-skeleton-list-item {\n  display: flex;\n  align-items: center;\n  gap: 1rem;\n}\n\n.vd-skeleton-list-item .vd-skeleton-circle {\n  flex-shrink: 0;\n}\n\n.vd-skeleton-list-item-content {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n}\n\n/* Skeleton Grid */\n.vd-skeleton-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));\n  gap: 1rem;\n}\n\n/* Skeleton Table Row */\n.vd-skeleton-table-row {\n  display: flex;\n  gap: 1rem;\n  padding: 0.75rem 0;\n  border-bottom: 1px solid var(--vd-border-color);\n}\n\n.vd-skeleton-table-row .vd-skeleton-text {\n  margin-bottom: 0;\n}\n\n/* Width Variants */\n.vd-skeleton-w-full { width: 100%; }\n.vd-skeleton-w-3-4 { width: 75%; }\n.vd-skeleton-w-2-3 { width: 66.666667%; }\n.vd-skeleton-w-1-2 { width: 50%; }\n.vd-skeleton-w-1-3 { width: 33.333333%; }\n.vd-skeleton-w-1-4 { width: 25%; }\n\n/* No Animation Variant */\n.vd-skeleton-static::after {\n  display: none;\n}\n\n/* Pulse Animation Variant */\n.vd-skeleton-pulse {\n  animation: skeleton-pulse 1.5s ease-in-out infinite;\n}\n\n.vd-skeleton-pulse::after {\n  display: none;\n}\n\n@keyframes skeleton-pulse {\n  0%, 100% {\n    opacity: 1;\n  }\n  50% {\n    opacity: 0.5;\n  }\n}\n\n/* Reduced Motion */\n@media (prefers-reduced-motion: reduce) {\n  .vd-skeleton::after {\n    animation: none;\n    transform: none;\n    background: transparent;\n  }\n\n  .vd-skeleton-pulse {\n    animation: none;\n  }\n}\n\n/**\n * Vanduo Framework - Tabs\n * Tabbed content navigation component\n */\n\n:root {\n  /* Tab Sizing (Fibonacci pairs: x/y ratio ~ phi) */\n  --vd-tab-padding-x: 1.3125rem;     /* 21px - fib */\n  --vd-tab-padding-y: 0.8125rem;     /* 13px - fib */\n  --vd-tab-padding-x-sm: 0.8125rem;  /* 13px - fib */\n  --vd-tab-padding-y-sm: 0.5rem;     /* 8px  - fib */\n  --vd-tab-padding-x-lg: 2.125rem;   /* 34px - fib */\n  --vd-tab-padding-y-lg: 1.3125rem;  /* 21px - fib */\n  --vd-tab-gap: 0;\n  --vd-tab-border-width: 2px; /* fib(2) */\n\n  /* Tab Colors */\n  --vd-tab-text: var(--vd-text-secondary);\n  --vd-tab-text-hover: var(--vd-text-primary);\n  --vd-tab-text-active: var(--vd-color-primary);\n  --vd-tab-border: var(--vd-border-color);\n  --vd-tab-border-active: var(--vd-color-primary);\n  --vd-tab-bg-hover: var(--vd-bg-secondary);\n}\n\n/* Dark Theme Overrides */\n[data-theme=\"dark\"] {\n  --vd-tab-bg-hover: var(--vd-color-gray-800);\n}\n\n@media (prefers-color-scheme: dark) {\n  :root:not([data-theme]) {\n    --vd-tab-bg-hover: var(--vd-color-gray-800);\n  }\n}\n\n/* Base Tabs Container */\n.vd-tabs {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n}\n\n/* Tab List */\n.vd-tab-list {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--vd-tab-gap);\n  padding: 0;\n  margin: 0;\n  list-style: none;\n  border-bottom: 1px solid var(--vd-tab-border);\n}\n\n/* Tab Item */\n.vd-tab-item {\n  margin-bottom: -1px;\n}\n\n/* Tab Link/Button */\n.vd-tab-link {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.5rem;\n  padding: var(--vd-tab-padding-y) var(--vd-tab-padding-x);\n  font-size: var(--vd-font-size-base);\n  font-weight: var(--vd-font-weight-medium);\n  color: var(--vd-tab-text);\n  text-decoration: none;\n  background: transparent;\n  border: none;\n  border-bottom: var(--vd-tab-border-width) solid transparent;\n  cursor: pointer;\n  transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;\n  white-space: nowrap;\n}\n\n.vd-tab-link:hover {\n  color: var(--vd-tab-text-hover);\n  background-color: var(--vd-tab-bg-hover);\n}\n\n.vd-tab-link:focus-visible {\n  outline: 2px solid var(--vd-color-primary);\n  outline-offset: -2px;\n}\n\n/* Active Tab */\n.vd-tab-link.is-active,\n.vd-tab-item.is-active .vd-tab-link {\n  color: var(--vd-tab-text-active);\n  border-bottom-color: var(--vd-tab-border-active);\n}\n\n/* Disabled Tab */\n.vd-tab-link.disabled,\n.vd-tab-link:disabled,\n.vd-tab-item.disabled .vd-tab-link {\n  color: var(--vd-text-muted);\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n/* Tab Content */\n.vd-tab-content {\n  padding-top: 1rem;\n}\n\n/* Tab Pane */\n.vd-tab-pane {\n  display: none;\n}\n\n.vd-tab-pane.is-active {\n  display: block;\n}\n\n/* Fade Animation */\n.vd-tabs-fade .vd-tab-pane {\n  opacity: 0;\n  transition: opacity 0.15s ease;\n}\n\n.vd-tabs-fade .vd-tab-pane.is-active {\n  opacity: 1;\n}\n\n/* Tab Variants - Boxed */\n.vd-tabs-boxed .vd-tab-list {\n  background-color: var(--vd-bg-secondary);\n  padding: 0.25rem;\n  border-radius: var(--vd-btn-border-radius);\n  border-bottom: none;\n  gap: 0.25rem;\n}\n\n.vd-tabs-boxed .vd-tab-link {\n  border-radius: var(--vd-btn-border-radius);\n  border-bottom: none;\n}\n\n.vd-tabs-boxed .vd-tab-link:hover {\n  background-color: var(--vd-color-gray-200);\n}\n\n.vd-tabs-boxed .vd-tab-link.is-active,\n.vd-tabs-boxed .vd-tab-item.is-active .vd-tab-link {\n  background-color: var(--vd-bg-primary);\n  color: var(--vd-text-primary);\n  box-shadow: var(--vd-shadow-sm);\n}\n\n[data-theme=\"dark\"] .vd-tabs-boxed .vd-tab-link:hover {\n  background-color: var(--vd-color-gray-700);\n}\n\n/* Tab Variants - Pills */\n.vd-tabs-pills .vd-tab-list {\n  border-bottom: none;\n  gap: 0.5rem;\n}\n\n.vd-tabs-pills .vd-tab-link {\n  border-radius: var(--vd-btn-border-radius);\n  border-bottom: none;\n}\n\n.vd-tabs-pills .vd-tab-link.is-active,\n.vd-tabs-pills .vd-tab-item.is-active .vd-tab-link {\n  background-color: var(--vd-color-primary);\n  color: var(--vd-color-white);\n}\n\n/* Tab Variants - Bordered */\n.vd-tabs-bordered .vd-tab-list {\n  border: 1px solid var(--vd-tab-border);\n  border-radius: var(--vd-btn-border-radius) var(--vd-btn-border-radius) 0 0;\n  border-bottom: none;\n}\n\n.vd-tabs-bordered .vd-tab-link {\n  border: 1px solid transparent;\n  border-bottom: none;\n  margin: -1px -1px 0 -1px;\n}\n\n.vd-tabs-bordered .vd-tab-link.is-active,\n.vd-tabs-bordered .vd-tab-item.is-active .vd-tab-link {\n  border-color: var(--vd-tab-border);\n  background-color: var(--vd-bg-primary);\n  border-bottom-color: var(--vd-bg-primary);\n  border-radius: var(--vd-btn-border-radius) var(--vd-btn-border-radius) 0 0;\n}\n\n.vd-tabs-bordered .vd-tab-content {\n  border: 1px solid var(--vd-tab-border);\n  border-top: none;\n  border-radius: 0 0 var(--vd-btn-border-radius) var(--vd-btn-border-radius);\n  padding: 1rem;\n}\n\n/* Tab Variants - Underline Only */\n.vd-tabs-underline .vd-tab-list {\n  border-bottom: 2px solid var(--vd-tab-border);\n}\n\n.vd-tabs-underline .vd-tab-link {\n  margin-bottom: -2px;\n}\n\n/* Tab Sizes */\n.vd-tabs-sm .vd-tab-link {\n  padding: var(--vd-tab-padding-y-sm) var(--vd-tab-padding-x-sm);\n  font-size: var(--vd-font-size-sm);\n}\n\n.vd-tabs-lg .vd-tab-link {\n  padding: var(--vd-tab-padding-y-lg) var(--vd-tab-padding-x-lg);\n  font-size: var(--vd-font-size-lg);\n}\n\n/* Full Width Tabs */\n.vd-tabs-full .vd-tab-list {\n  width: 100%;\n}\n\n.vd-tabs-full .vd-tab-item {\n  flex: 1;\n}\n\n.vd-tabs-full .vd-tab-link {\n  width: 100%;\n  justify-content: center;\n}\n\n/* Centered Tabs */\n.vd-tabs-center .vd-tab-list {\n  justify-content: center;\n}\n\n/* Right Aligned Tabs */\n.vd-tabs-end .vd-tab-list {\n  justify-content: flex-end;\n}\n\n/* Vertical Tabs */\n.vd-tabs-vertical {\n  flex-direction: row;\n}\n\n.vd-tabs-vertical .vd-tab-list {\n  flex-direction: column;\n  border-bottom: none;\n  border-right: 1px solid var(--vd-tab-border);\n  width: auto;\n  flex-shrink: 0;\n}\n\n.vd-tabs-vertical .vd-tab-item {\n  margin-bottom: 0;\n  margin-right: -1px;\n}\n\n.vd-tabs-vertical .vd-tab-link {\n  box-sizing: border-box;\n  width: 100%;\n  border-bottom: none;\n  border-right: var(--vd-tab-border-width) solid transparent;\n  justify-content: flex-start;\n}\n\n.vd-tabs-vertical .vd-tab-link.is-active,\n.vd-tabs-vertical .vd-tab-item.is-active .vd-tab-link {\n  border-bottom-color: transparent;\n  border-right-color: var(--vd-tab-border-active);\n}\n\n.vd-tabs-vertical .vd-tab-content {\n  padding-top: 0;\n  padding-left: 1rem;\n  flex: 1;\n}\n\n/* Tab with Icon */\n.vd-tab-link .icon,\n.vd-tab-link svg {\n  width: 1em;\n  height: 1em;\n}\n\n/* Tab with Badge/Count */\n.vd-tab-badge {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-width: 1.25rem;\n  height: 1.25rem;\n  padding: 0 0.375rem;\n  font-size: 0.75rem;\n  font-weight: var(--vd-font-weight-semibold);\n  line-height: 1;\n  background-color: var(--vd-color-gray-200);\n  border-radius: 9999px;\n}\n\n.vd-tab-link.is-active .vd-tab-badge {\n  background-color: var(--vd-color-primary-alpha-20);\n  color: var(--vd-color-primary);\n}\n\n/* Scrollable Tabs (for many tabs) */\n.vd-tabs-scrollable .vd-tab-list {\n  flex-wrap: nowrap;\n  overflow-x: auto;\n  -webkit-overflow-scrolling: touch;\n  scrollbar-width: none;\n}\n\n.vd-tabs-scrollable .vd-tab-list::-webkit-scrollbar {\n  display: none;\n}\n\n/* Reduced Motion */\n@media (prefers-reduced-motion: reduce) {\n  .vd-tab-link,\n  .vd-tabs-fade .vd-tab-pane {\n    transition: none;\n  }\n}\n\n/**\n * Vanduo Framework - Toast Notifications\n * Popup notifications for user feedback\n */\n\n:root {\n  /* Toast Sizing (Fibonacci) */\n  --vd-toast-width: 377px;             /* fib */\n  --vd-toast-max-width: 90vw;\n  --vd-toast-padding-x: 1.3125rem;     /* 21px - fib */\n  --vd-toast-padding-y: 0.8125rem;     /* 13px - fib */\n  --vd-toast-border-radius: var(--vd-radius-fib-5);\n  --vd-toast-gap: 0.8125rem;           /* 13px - fib */\n\n  /* Toast Colors */\n  --vd-toast-bg: var(--vd-color-white);\n  --vd-toast-text: var(--vd-text-primary);\n  --vd-toast-border: var(--vd-border-color);\n  --vd-toast-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n}\n\n/* Dark Theme Overrides */\n[data-theme=\"dark\"] {\n  --vd-toast-bg: var(--vd-color-gray-800);\n  --vd-toast-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);\n}\n\n@media (prefers-color-scheme: dark) {\n  :root:not([data-theme]) {\n    --vd-toast-bg: var(--vd-color-gray-800);\n    --vd-toast-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);\n  }\n}\n\n/* Toast Container - Positions toasts on screen */\n.vd-toast-container {\n  position: fixed;\n  z-index: 9999;\n  display: flex;\n  flex-direction: column;\n  gap: var(--vd-toast-gap);\n  pointer-events: none;\n  padding: 1rem;\n}\n\n/* Container Positions */\n.vd-toast-container-top-right {\n  top: 0;\n  right: 0;\n  align-items: flex-end;\n}\n\n.vd-toast-container-top-left {\n  top: 0;\n  left: 0;\n  align-items: flex-start;\n}\n\n.vd-toast-container-top-center {\n  top: 0;\n  left: 50%;\n  transform: translateX(-50%);\n  align-items: center;\n}\n\n.vd-toast-container-bottom-right {\n  bottom: 0;\n  right: 0;\n  align-items: flex-end;\n}\n\n.vd-toast-container-bottom-left {\n  bottom: 0;\n  left: 0;\n  align-items: flex-start;\n}\n\n.vd-toast-container-bottom-center {\n  bottom: 0;\n  left: 50%;\n  transform: translateX(-50%);\n  align-items: center;\n}\n\n/* Base Toast */\n.vd-toast {\n  display: flex;\n  align-items: flex-start;\n  gap: 0.75rem;\n  width: var(--vd-toast-width);\n  max-width: var(--vd-toast-max-width);\n  padding: var(--vd-toast-padding-y) var(--vd-toast-padding-x);\n  background-color: var(--vd-toast-bg);\n  color: var(--vd-toast-text);\n  border: 1px solid var(--vd-toast-border);\n  border-radius: var(--vd-toast-border-radius);\n  box-shadow: var(--vd-toast-shadow);\n  pointer-events: auto;\n  opacity: 0;\n  transform: translateX(100%);\n  transition: opacity 0.3s ease, transform 0.3s ease;\n}\n\n.vd-toast-glass {\n  background: var(--vd-glass-bg-light);\n  border-color: var(--vd-glass-border-light);\n  box-shadow: var(--vd-glass-shadow);\n  backdrop-filter: blur(var(--vd-glass-blur)) saturate(var(--vd-glass-saturate));\n  -webkit-backdrop-filter: blur(var(--vd-glass-blur)) saturate(var(--vd-glass-saturate));\n}\n\n/* Toast Visible State */\n.vd-toast.is-visible {\n  opacity: 1;\n  transform: translateX(0);\n}\n\n/* Toast Exiting State */\n.vd-toast.is-exiting {\n  opacity: 0;\n  transform: translateX(100%);\n}\n\n/* Left-side containers animate from left */\n.vd-toast-container-top-left .vd-toast,\n.vd-toast-container-bottom-left .vd-toast {\n  transform: translateX(-100%);\n}\n\n.vd-toast-container-top-left .vd-toast.is-visible,\n.vd-toast-container-bottom-left .vd-toast.is-visible {\n  transform: translateX(0);\n}\n\n.vd-toast-container-top-left .vd-toast.is-exiting,\n.vd-toast-container-bottom-left .vd-toast.is-exiting {\n  transform: translateX(-100%);\n}\n\n/* Center containers animate from top/bottom */\n.vd-toast-container-top-center .vd-toast {\n  transform: translateY(-100%);\n}\n\n.vd-toast-container-top-center .vd-toast.is-visible {\n  transform: translateY(0);\n}\n\n.vd-toast-container-top-center .vd-toast.is-exiting {\n  transform: translateY(-100%);\n}\n\n.vd-toast-container-bottom-center .vd-toast {\n  transform: translateY(100%);\n}\n\n.vd-toast-container-bottom-center .vd-toast.is-visible {\n  transform: translateY(0);\n}\n\n.vd-toast-container-bottom-center .vd-toast.is-exiting {\n  transform: translateY(100%);\n}\n\n/* Toast Icon */\n.vd-toast-icon {\n  flex-shrink: 0;\n  width: 1.25rem;\n  height: 1.25rem;\n  margin-top: 0.125rem;\n}\n\n/* Toast Content */\n.vd-toast-content {\n  flex: 1;\n  min-width: 0;\n}\n\n/* Toast Title */\n.vd-toast-title {\n  font-weight: var(--vd-font-weight-semibold);\n  margin-bottom: 0.25rem;\n}\n\n/* Toast Message */\n.vd-toast-message {\n  font-size: var(--vd-font-size-sm);\n  color: var(--vd-text-secondary);\n}\n\n/* Toast Close Button */\n.vd-toast-close {\n  flex-shrink: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 1.5rem;\n  height: 1.5rem;\n  padding: 0;\n  margin: -0.25rem -0.25rem -0.25rem 0;\n  background: transparent;\n  border: none;\n  border-radius: var(--vd-btn-border-radius);\n  color: var(--vd-text-tertiary);\n  cursor: pointer;\n  opacity: 0.6;\n  transition: opacity 0.15s ease, background-color 0.15s ease;\n}\n\n.vd-toast-close:hover {\n  opacity: 1;\n  background-color: rgba(0, 0, 0, 0.05);\n}\n\n[data-theme=\"dark\"] .vd-toast-close:hover {\n  background-color: rgba(255, 255, 255, 0.1);\n}\n\n.vd-toast-close::before {\n  content: '\\00D7';\n  font-size: 1.25rem;\n  line-height: 1;\n}\n\n/* Toast Color Variants */\n.vd-toast-success {\n  border-left: 4px solid var(--vd-color-success);\n}\n\n.vd-toast-success .vd-toast-icon {\n  color: var(--vd-color-success);\n}\n\n.vd-toast-warning {\n  border-left: 4px solid var(--vd-color-warning);\n}\n\n.vd-toast-warning .vd-toast-icon {\n  color: var(--vd-color-warning);\n}\n\n.vd-toast-error {\n  border-left: 4px solid var(--vd-color-error);\n}\n\n.vd-toast-error .vd-toast-icon {\n  color: var(--vd-color-error);\n}\n\n.vd-toast-info {\n  border-left: 4px solid var(--vd-color-info);\n}\n\n.vd-toast-info .vd-toast-icon {\n  color: var(--vd-color-info);\n}\n\n/* Solid Variants */\n.vd-toast-solid.vd-toast-success {\n  background-color: var(--vd-color-success);\n  border-color: var(--vd-color-success);\n  color: var(--vd-color-white);\n}\n\n.vd-toast-solid.vd-toast-success .vd-toast-message {\n  color: rgba(255, 255, 255, 0.85);\n}\n\n.vd-toast-solid.vd-toast-success .vd-toast-icon {\n  color: var(--vd-color-white);\n}\n\n.vd-toast-solid.vd-toast-warning {\n  background-color: var(--vd-color-warning);\n  border-color: var(--vd-color-warning);\n  color: var(--vd-color-gray-900);\n}\n\n.vd-toast-solid.vd-toast-warning .vd-toast-message {\n  color: rgba(0, 0, 0, 0.7);\n}\n\n.vd-toast-solid.vd-toast-warning .vd-toast-icon {\n  color: var(--vd-color-gray-900);\n}\n\n.vd-toast-solid.vd-toast-error {\n  background-color: var(--vd-color-error);\n  border-color: var(--vd-color-error);\n  color: var(--vd-color-white);\n}\n\n.vd-toast-solid.vd-toast-error .vd-toast-message {\n  color: rgba(255, 255, 255, 0.85);\n}\n\n.vd-toast-solid.vd-toast-error .vd-toast-icon {\n  color: var(--vd-color-white);\n}\n\n.vd-toast-solid.vd-toast-info {\n  background-color: var(--vd-color-info);\n  border-color: var(--vd-color-info);\n  color: var(--vd-color-white);\n}\n\n.vd-toast-solid.vd-toast-info .vd-toast-message {\n  color: rgba(255, 255, 255, 0.85);\n}\n\n.vd-toast-solid.vd-toast-info .vd-toast-icon {\n  color: var(--vd-color-white);\n}\n\n/* Toast Progress Bar (auto-dismiss indicator) */\n.vd-toast-progress {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  height: 3px;\n  background-color: currentColor;\n  opacity: 0.3;\n  border-radius: 0 0 var(--vd-toast-border-radius) var(--vd-toast-border-radius);\n  animation: toast-progress linear forwards;\n}\n\n@keyframes toast-progress {\n  from {\n    width: 100%;\n  }\n  to {\n    width: 0%;\n  }\n}\n\n/* Toast with Progress */\n.vd-toast-with-progress {\n  position: relative;\n  overflow: hidden;\n}\n\n/* Stacked Toasts Animation */\n.vd-toast-container .vd-toast:not(:first-child) {\n  margin-top: 0;\n}\n\n/* Reduced Motion */\n@media (prefers-reduced-motion: reduce) {\n  .vd-toast {\n    transition: opacity 0.15s ease;\n    transform: none !important;\n  }\n\n  .vd-toast.is-visible {\n    transform: none !important;\n  }\n\n  .vd-toast.is-exiting {\n    transform: none !important;\n  }\n\n  .vd-toast-progress {\n    animation: none;\n  }\n}\n\n/**\n * Vanduo Framework - Code Snippet Component\n * Copyable code blocks with tabs and syntax highlighting\n */\n\n:root {\n  /* Code Snippet Sizing - Fibonacci */\n  --vd-code-padding-x: 1.3125rem;        /* 21px - fib */\n  --vd-code-padding-y: 0.8125rem;        /* 13px - fib */\n  --vd-code-border-radius: var(--vd-radius-fib-5, 8px);\n  --vd-code-tab-gap: 0.5rem;             /* 8px - fib */\n  --vd-code-header-height: 2.75rem;      /* 44px - touch target */\n  --vd-code-line-height: 1.618;          /* Golden ratio */\n  --vd-code-font-size: 0.875rem;         /* 14px */\n  \n  /* Code Snippet Colors - Light Mode */\n  --vd-code-bg: var(--vd-color-gray-50, #f8fafc);\n  --vd-code-header-bg: var(--vd-color-gray-100, #f1f5f9);\n  --vd-code-border: var(--vd-border-color, #e2e8f0);\n  --vd-code-text: var(--vd-text-primary, #1e293b);\n  --vd-code-text-muted: var(--vd-text-secondary, #64748b);\n  --vd-code-tab-text: var(--vd-text-secondary, #64748b);\n  --vd-code-tab-active: var(--vd-color-primary, #3b82f6);\n  --vd-code-tab-hover-bg: var(--vd-color-gray-200, #e2e8f0);\n  --vd-code-copy-success: var(--vd-color-success, #22c55e);\n  --vd-code-line-number: var(--vd-text-tertiary, #94a3b8);\n  --vd-code-line-highlight: rgba(59, 130, 246, 0.1);\n  \n  /* Syntax Highlighting Colors - Light Mode */\n  --vd-code-tag: #e11d48;                /* HTML tags - rose */\n  --vd-code-attr: #7c3aed;               /* Attributes - violet */\n  --vd-code-string: #16a34a;             /* Strings - green */\n  --vd-code-comment: #64748b;            /* Comments - slate */\n  --vd-code-selector: #e11d48;           /* CSS selectors - rose */\n  --vd-code-property: #2563eb;           /* CSS properties - blue */\n  --vd-code-value: #16a34a;              /* CSS values - green */\n  --vd-code-unit: #d97706;               /* Units - amber */\n  --vd-code-keyword: #7c3aed;            /* JS keywords - violet */\n  --vd-code-function: #2563eb;           /* JS functions - blue */\n  --vd-code-number: #d97706;             /* Numbers - amber */\n  --vd-code-operator: #64748b;           /* Operators - slate */\n  --vd-code-punctuation: #64748b;        /* Punctuation - slate */\n}\n\n/* Dark Theme Overrides */\n[data-theme=\"dark\"] {\n  --vd-code-bg: var(--vd-color-gray-900, #0f172a);\n  --vd-code-header-bg: var(--vd-color-gray-800, #1e293b);\n  --vd-code-border: var(--vd-color-gray-700, #334155);\n  --vd-code-tab-hover-bg: var(--vd-color-gray-700, #334155);\n  --vd-code-line-highlight: rgba(59, 130, 246, 0.15);\n  \n  /* Syntax Highlighting - Dark Mode */\n  --vd-code-tag: #fb7185;                /* HTML tags - rose */\n  --vd-code-attr: #a78bfa;               /* Attributes - violet */\n  --vd-code-string: #4ade80;             /* Strings - green */\n  --vd-code-comment: #64748b;            /* Comments - slate */\n  --vd-code-selector: #fb7185;           /* CSS selectors - rose */\n  --vd-code-property: #60a5fa;           /* CSS properties - blue */\n  --vd-code-value: #4ade80;              /* CSS values - green */\n  --vd-code-unit: #fbbf24;               /* Units - amber */\n  --vd-code-keyword: #a78bfa;            /* JS keywords - violet */\n  --vd-code-function: #60a5fa;           /* JS functions - blue */\n  --vd-code-number: #fbbf24;             /* Numbers - amber */\n  --vd-code-operator: #94a3b8;           /* Operators - slate */\n  --vd-code-punctuation: #94a3b8;        /* Punctuation - slate */\n}\n\n@media (prefers-color-scheme: dark) {\n  :root:not([data-theme]) {\n    --vd-code-bg: var(--vd-color-gray-900, #0f172a);\n    --vd-code-header-bg: var(--vd-color-gray-800, #1e293b);\n    --vd-code-border: var(--vd-color-gray-700, #334155);\n    --vd-code-tab-hover-bg: var(--vd-color-gray-700, #334155);\n    --vd-code-line-highlight: rgba(59, 130, 246, 0.15);\n    \n    --vd-code-tag: #fb7185;\n    --vd-code-attr: #a78bfa;\n    --vd-code-string: #4ade80;\n    --vd-code-comment: #64748b;\n    --vd-code-selector: #fb7185;\n    --vd-code-property: #60a5fa;\n    --vd-code-value: #4ade80;\n    --vd-code-unit: #fbbf24;\n    --vd-code-keyword: #a78bfa;\n    --vd-code-function: #60a5fa;\n    --vd-code-number: #fbbf24;\n    --vd-code-operator: #94a3b8;\n    --vd-code-punctuation: #94a3b8;\n  }\n}\n\n/* ==========================================================================\n   Base Code Snippet Container\n   ========================================================================== */\n\n.vd-code-snippet {\n  position: relative;\n  margin: 1rem 0;\n  border-radius: var(--vd-code-border-radius);\n  border: 1px solid var(--vd-code-border);\n  background-color: var(--vd-code-bg);\n  overflow: hidden;\n}\n\n/* ==========================================================================\n   Collapsible Toggle Button\n   ========================================================================== */\n\n.vd-code-snippet-toggle {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  width: 100%;\n  padding: var(--vd-code-padding-y) var(--vd-code-padding-x);\n  background-color: var(--vd-code-header-bg);\n  border: none;\n  color: var(--vd-code-text-muted);\n  font-size: var(--vd-code-font-size);\n  font-weight: var(--vd-font-weight-medium, 500);\n  cursor: pointer;\n  transition: color 0.15s ease, background-color 0.15s ease;\n  text-align: left;\n}\n\n.vd-code-snippet-toggle:hover {\n  color: var(--vd-code-text);\n  background-color: var(--vd-code-tab-hover-bg);\n}\n\n.vd-code-snippet-toggle:focus-visible {\n  outline: 2px solid var(--vd-code-tab-active);\n  outline-offset: -2px;\n}\n\n/* Toggle Icon (chevron) */\n.vd-code-snippet-toggle-icon {\n  display: inline-flex;\n  width: 1rem;\n  height: 1rem;\n  transition: transform 0.2s ease;\n}\n\n.vd-code-snippet-toggle-icon::before {\n  content: '';\n  width: 0.5rem;\n  height: 0.5rem;\n  border-right: 2px solid currentColor;\n  border-bottom: 2px solid currentColor;\n  transform: rotate(-45deg);\n  margin: auto;\n}\n\n/* Expanded state */\n.vd-code-snippet[data-expanded=\"true\"] .vd-code-snippet-toggle-icon::before {\n  transform: rotate(45deg);\n}\n\n.vd-code-snippet[data-expanded=\"true\"] .vd-code-snippet-toggle {\n  border-bottom: 1px solid var(--vd-code-border);\n}\n\n/* ==========================================================================\n   Collapsible Content\n   ========================================================================== */\n\n.vd-code-snippet-content {\n  display: none;\n}\n\n.vd-code-snippet-content[data-visible=\"true\"],\n.vd-code-snippet:not([data-collapsible]) .vd-code-snippet-content {\n  display: block;\n}\n\n/* Non-collapsible variant */\n.vd-code-snippet:not([data-collapsible]) .vd-code-snippet-toggle {\n  display: none;\n}\n\n/* ==========================================================================\n   Header with Tabs and Copy Button\n   ========================================================================== */\n\n.vd-code-snippet-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  min-height: var(--vd-code-header-height);\n  padding: 0 var(--vd-code-padding-x);\n  background-color: var(--vd-code-header-bg);\n  border-bottom: 1px solid var(--vd-code-border);\n}\n\n/* ==========================================================================\n   Tabs\n   ========================================================================== */\n\n.vd-code-snippet-tabs {\n  display: flex;\n  gap: var(--vd-code-tab-gap);\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n\n.vd-code-snippet-tab {\n  display: inline-flex;\n  align-items: center;\n  padding: 0.5rem 0.75rem;\n  font-size: var(--vd-code-font-size);\n  font-weight: var(--vd-font-weight-medium, 500);\n  color: var(--vd-code-tab-text);\n  background: transparent;\n  border: none;\n  border-radius: var(--vd-code-border-radius);\n  cursor: pointer;\n  transition: color 0.15s ease, background-color 0.15s ease;\n  white-space: nowrap;\n}\n\n.vd-code-snippet-tab:hover {\n  color: var(--vd-code-text);\n  background-color: var(--vd-code-tab-hover-bg);\n}\n\n.vd-code-snippet-tab:focus-visible {\n  outline: 2px solid var(--vd-code-tab-active);\n  outline-offset: -2px;\n}\n\n.vd-code-snippet-tab.is-active {\n  color: var(--vd-code-tab-active);\n  background-color: var(--vd-code-bg);\n}\n\n/* Language labels */\n.vd-code-snippet-tab[data-lang=\"html\"]::before { content: ''; }\n.vd-code-snippet-tab[data-lang=\"css\"]::before { content: ''; }\n.vd-code-snippet-tab[data-lang=\"js\"]::before { content: ''; }\n\n/* ==========================================================================\n   Copy Button\n   ========================================================================== */\n\n.vd-code-snippet-copy {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.375rem;\n  padding: 0.375rem 0.75rem;\n  font-size: var(--vd-code-font-size);\n  font-weight: var(--vd-font-weight-medium, 500);\n  color: var(--vd-code-tab-text);\n  background: transparent;\n  border: 1px solid var(--vd-code-border);\n  border-radius: var(--vd-code-border-radius);\n  cursor: pointer;\n  transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;\n}\n\n.vd-code-snippet-copy:hover {\n  color: var(--vd-code-text);\n  background-color: var(--vd-code-tab-hover-bg);\n}\n\n.vd-code-snippet-copy:focus-visible {\n  outline: 2px solid var(--vd-code-tab-active);\n  outline-offset: 2px;\n}\n\n/* Copy Icon */\n.vd-code-snippet-copy-icon {\n  display: inline-flex;\n  width: 1rem;\n  height: 1rem;\n}\n\n.vd-code-snippet-copy-icon::before {\n  content: '';\n  width: 100%;\n  height: 100%;\n  background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='13' height='13' rx='2' ry='2'%3E%3C/rect%3E%3Cpath d='M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1'%3E%3C/path%3E%3C/svg%3E\");\n  background-size: contain;\n  background-repeat: no-repeat;\n  background-position: center;\n}\n\n/* Success state */\n.vd-code-snippet-copy.is-copied {\n  color: var(--vd-code-copy-success);\n  border-color: var(--vd-code-copy-success);\n}\n\n.vd-code-snippet-copy.is-copied .vd-code-snippet-copy-icon::before {\n  background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2322c55e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E\");\n}\n\n.vd-code-snippet-copy.is-copied .vd-code-snippet-copy-text::after {\n  content: 'd!';\n  font-size: var(--vd-code-font-size);\n}\n\n.vd-code-snippet-copy.is-copied .vd-code-snippet-copy-text {\n  font-size: 0;\n}\n\n.vd-code-snippet-copy.is-copied .vd-code-snippet-copy-text::before {\n  content: 'Copie';\n  font-size: var(--vd-code-font-size);\n}\n\n/* ==========================================================================\n   Code Body\n   ========================================================================== */\n\n.vd-code-snippet-body {\n  position: relative;\n  overflow: hidden;\n}\n\n/* ==========================================================================\n   Code Panes\n   ========================================================================== */\n\n.vd-code-snippet-pane {\n  display: none;\n  margin: 0;\n  padding: var(--vd-code-padding-y) var(--vd-code-padding-x);\n  background-color: var(--vd-code-bg);\n  overflow-x: auto;\n  -webkit-overflow-scrolling: touch;\n}\n\n.vd-code-snippet-pane.is-active {\n  display: block;\n}\n\n.vd-code-snippet-pane code {\n  display: block;\n  font-family: var(--vd-font-family-mono, 'JetBrains Mono', 'Fira Code', 'Consolas', monospace);\n  font-size: var(--vd-code-font-size);\n  line-height: var(--vd-code-line-height);\n  color: var(--vd-code-text);\n  white-space: pre;\n  tab-size: 2;\n}\n\n/* ==========================================================================\n   Line Numbers (Optional)\n   ========================================================================== */\n\n.vd-code-snippet-pane.has-line-numbers {\n  padding-left: 0;\n}\n\n.vd-code-snippet-pane.has-line-numbers code {\n  display: flex;\n}\n\n.vd-code-snippet-line-numbers {\n  display: flex;\n  flex-direction: column;\n  padding: 0 var(--vd-code-padding-x);\n  margin-right: var(--vd-code-padding-x);\n  border-right: 1px solid var(--vd-code-border);\n  color: var(--vd-code-line-number);\n  text-align: right;\n  user-select: none;\n  flex-shrink: 0;\n}\n\n.vd-code-snippet-line-numbers span {\n  line-height: var(--vd-code-line-height);\n}\n\n.vd-code-snippet-code {\n  flex: 1;\n  overflow-x: auto;\n}\n\n/* Line highlighting */\n.code-line-highlight {\n  display: block;\n  background-color: var(--vd-code-line-highlight);\n  margin: 0 calc(-1 * var(--vd-code-padding-x));\n  padding: 0 var(--vd-code-padding-x);\n}\n\n/* ==========================================================================\n   Syntax Highlighting Classes\n   ========================================================================== */\n\n/* HTML Syntax */\n.code-tag { color: var(--vd-code-tag); }\n.code-attr { color: var(--vd-code-attr); }\n.code-string { color: var(--vd-code-string); }\n.code-comment { color: var(--vd-code-comment); font-style: italic; }\n\n/* CSS Syntax */\n.code-selector { color: var(--vd-code-selector); }\n.code-property { color: var(--vd-code-property); }\n.code-value { color: var(--vd-code-value); }\n.code-unit { color: var(--vd-code-unit); }\n\n/* JavaScript Syntax */\n.code-keyword { color: var(--vd-code-keyword); }\n.code-function { color: var(--vd-code-function); }\n.code-number { color: var(--vd-code-number); }\n.code-operator { color: var(--vd-code-operator); }\n.code-punctuation { color: var(--vd-code-punctuation); }\n\n/* ==========================================================================\n   Single Language Variant (No Tabs)\n   ========================================================================== */\n\n.vd-code-snippet-single .vd-code-snippet-header {\n  justify-content: flex-end;\n}\n\n.vd-code-snippet-single .vd-code-snippet-tabs {\n  display: none;\n}\n\n/* ==========================================================================\n   Inline Variant\n   ========================================================================== */\n\n.vd-code-snippet-inline {\n  display: inline-flex;\n  margin: 0;\n  vertical-align: middle;\n}\n\n.vd-code-snippet-inline .vd-code-snippet-header {\n  display: none;\n}\n\n.vd-code-snippet-inline .vd-code-snippet-pane {\n  display: block;\n  padding: 0.125rem 0.375rem;\n}\n\n.vd-code-snippet-inline .vd-code-snippet-pane code {\n  white-space: nowrap;\n}\n\n/* ==========================================================================\n   Compact Variant\n   ========================================================================== */\n\n.vd-code-snippet-compact .vd-code-snippet-header {\n  min-height: auto;\n  padding: 0.25rem 0.5rem;\n}\n\n.vd-code-snippet-compact .vd-code-snippet-tab {\n  padding: 0.25rem 0.5rem;\n  font-size: 0.75rem;\n}\n\n.vd-code-snippet-compact .vd-code-snippet-copy {\n  padding: 0.25rem 0.5rem;\n  font-size: 0.75rem;\n}\n\n.vd-code-snippet-compact .vd-code-snippet-pane {\n  padding: 0.5rem;\n}\n\n.vd-code-snippet-compact .vd-code-snippet-pane code {\n  font-size: 0.75rem;\n}\n\n/* ==========================================================================\n   Responsive Design\n   ========================================================================== */\n\n@media (max-width: 640px) {\n  .vd-code-snippet-header {\n    flex-wrap: wrap;\n    gap: 0.5rem;\n    padding: 0.5rem;\n  }\n  \n  .vd-code-snippet-tabs {\n    order: 2;\n    width: 100%;\n    overflow-x: auto;\n    -webkit-overflow-scrolling: touch;\n    scrollbar-width: none;\n  }\n  \n  .vd-code-snippet-tabs::-webkit-scrollbar {\n    display: none;\n  }\n  \n  .vd-code-snippet-copy {\n    order: 1;\n    margin-left: auto;\n  }\n  \n  .vd-code-snippet-pane {\n    padding: 0.75rem;\n  }\n  \n  .vd-code-snippet-pane code {\n    font-size: 0.8125rem;\n  }\n}\n\n/* ==========================================================================\n   Print Styles\n   ========================================================================== */\n\n@media print {\n  .vd-code-snippet {\n    break-inside: avoid;\n    border: 1px solid #ccc;\n  }\n  \n  .vd-code-snippet-toggle,\n  .vd-code-snippet-copy {\n    display: none !important;\n  }\n  \n  .vd-code-snippet-content {\n    display: block !important;\n  }\n  \n  .vd-code-snippet-pane {\n    display: block !important;\n    page-break-inside: avoid;\n  }\n  \n  .vd-code-snippet-pane::before {\n    content: attr(data-lang) ':';\n    display: block;\n    font-weight: bold;\n    margin-bottom: 0.5rem;\n    text-transform: uppercase;\n  }\n}\n\n/* ==========================================================================\n   Reduced Motion\n   ========================================================================== */\n\n@media (prefers-reduced-motion: reduce) {\n  .vd-code-snippet-toggle,\n  .vd-code-snippet-toggle-icon,\n  .vd-code-snippet-tab,\n  .vd-code-snippet-copy {\n    transition: none;\n  }\n}\n\n/**\n * Vanduo Framework - Progress Bar Component\n * CSS-only progress bar with variants and sizes\n */\n\n:root {\n  --vd-progress-height: 8px;\n  --vd-progress-bg: var(--vd-bg-tertiary, #e9ecef);\n  --vd-progress-bar-bg: var(--vd-color-primary);\n  --vd-progress-border-radius: var(--vd-radius-fib-5, 5px);\n}\n\n/* Base Progress */\n.vd-progress {\n  display: flex;\n  height: var(--vd-progress-height);\n  overflow: hidden;\n  background-color: var(--vd-progress-bg);\n  border-radius: var(--vd-progress-border-radius);\n}\n\n.vd-progress-bar {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  overflow: hidden;\n  color: #fff;\n  text-align: center;\n  white-space: nowrap;\n  background-color: var(--vd-progress-bar-bg);\n  transition: width 0.4s ease;\n  border-radius: var(--vd-progress-border-radius);\n}\n\n/* Variants */\n.vd-progress-bar.vd-progress-success { background-color: var(--vd-color-success); }\n.vd-progress-bar.vd-progress-warning { background-color: var(--vd-color-warning); }\n.vd-progress-bar.vd-progress-error { background-color: var(--vd-color-error); }\n.vd-progress-bar.vd-progress-info { background-color: var(--vd-color-info); }\n\n/* Sizes */\n.vd-progress-xs { --vd-progress-height: 3px; }\n.vd-progress-sm { --vd-progress-height: 5px; }\n.vd-progress-lg { --vd-progress-height: 13px; }\n.vd-progress-xl { --vd-progress-height: 21px; }\n\n/* Labeled (show text) */\n.vd-progress-xl .vd-progress-bar,\n.vd-progress-lg .vd-progress-bar {\n  font-size: var(--vd-font-size-xs, 0.75rem);\n  line-height: 1;\n}\n\n/* Striped */\n.vd-progress-striped .vd-progress-bar {\n  background-image: linear-gradient(\n    45deg,\n    rgba(255, 255, 255, 0.15) 25%,\n    transparent 25%,\n    transparent 50%,\n    rgba(255, 255, 255, 0.15) 50%,\n    rgba(255, 255, 255, 0.15) 75%,\n    transparent 75%,\n    transparent\n  );\n  background-size: 1rem 1rem;\n}\n\n/* Animated Striped */\n.vd-progress-animated .vd-progress-bar {\n  animation: progress-bar-stripes 1s linear infinite;\n}\n\n@keyframes progress-bar-stripes {\n  from { background-position: 1rem 0; }\n  to { background-position: 0 0; }\n}\n\n/* Indeterminate */\n.vd-progress-indeterminate .vd-progress-bar {\n  width: 30%;\n  animation: progress-indeterminate 1.5s ease-in-out infinite;\n}\n\n@keyframes progress-indeterminate {\n  0% { transform: translateX(-100%); }\n  100% { transform: translateX(400%); }\n}\n\n/* Reduced motion */\n@media (prefers-reduced-motion: reduce) {\n  .vd-progress-animated .vd-progress-bar,\n  .vd-progress-indeterminate .vd-progress-bar {\n    animation: none;\n  }\n}\n\n/* Dark mode */\n[data-theme=\"dark\"] {\n  --vd-progress-bg: var(--vd-bg-tertiary, #2d3748);\n}\n\n@media (prefers-color-scheme: dark) {\n  :root:not([data-theme]) {\n    --vd-progress-bg: var(--vd-bg-tertiary, #2d3748);\n  }\n}\n\n/**\n * Vanduo Framework - Spinner Component\n * Loading indicators with variants and sizes\n */\n\n:root {\n  --vd-spinner-size: 2rem;\n  --vd-spinner-border-width: 3px;\n  --vd-spinner-color: var(--vd-color-primary);\n  --vd-spinner-speed: 0.65s;\n}\n\n/* Border Spinner */\n.vd-spinner {\n  display: inline-block;\n  width: var(--vd-spinner-size);\n  height: var(--vd-spinner-size);\n  border: var(--vd-spinner-border-width) solid var(--vd-border-color, #e9ecef);\n  border-top-color: var(--vd-spinner-color);\n  border-radius: 50%;\n  animation: spinner-rotate var(--vd-spinner-speed) linear infinite;\n}\n\n@keyframes spinner-rotate {\n  to { transform: rotate(360deg); }\n}\n\n/* Dot Spinner */\n.vd-spinner-dots {\n  display: inline-flex;\n  align-items: center;\n  gap: 5px;\n}\n\n.vd-spinner-dots::before,\n.vd-spinner-dots::after,\n.vd-spinner-dots span {\n  content: '';\n  display: block;\n  width: 8px;\n  height: 8px;\n  border-radius: 50%;\n  background-color: var(--vd-spinner-color);\n  animation: spinner-dots-bounce 1.4s ease-in-out infinite both;\n}\n\n.vd-spinner-dots::before {\n  animation-delay: -0.32s;\n}\n\n.vd-spinner-dots span {\n  animation-delay: -0.16s;\n}\n\n@keyframes spinner-dots-bounce {\n  0%, 80%, 100% { transform: scale(0); opacity: 0.5; }\n  40% { transform: scale(1); opacity: 1; }\n}\n\n/* Growing Spinner */\n.vd-spinner-grow {\n  display: inline-block;\n  width: var(--vd-spinner-size);\n  height: var(--vd-spinner-size);\n  background-color: var(--vd-spinner-color);\n  border-radius: 50%;\n  opacity: 0;\n  animation: spinner-grow 0.75s linear infinite;\n}\n\n@keyframes spinner-grow {\n  0% { transform: scale(0); }\n  50% { opacity: 1; }\n}\n\n/* Size Variants */\n.vd-spinner-xs { --vd-spinner-size: 1rem; --vd-spinner-border-width: 2px; }\n.vd-spinner-sm { --vd-spinner-size: 1.5rem; --vd-spinner-border-width: 2px; }\n.vd-spinner-lg { --vd-spinner-size: 3rem; --vd-spinner-border-width: 4px; }\n.vd-spinner-xl { --vd-spinner-size: 4rem; --vd-spinner-border-width: 5px; }\n\n/* Color Variants */\n.vd-spinner-success { --vd-spinner-color: var(--vd-color-success); }\n.vd-spinner-warning { --vd-spinner-color: var(--vd-color-warning); }\n.vd-spinner-error { --vd-spinner-color: var(--vd-color-error); }\n.vd-spinner-info { --vd-spinner-color: var(--vd-color-info); }\n.vd-spinner-light { --vd-spinner-color: #fff; }\n.vd-spinner-dark { --vd-spinner-color: var(--vd-text-primary); }\n\n/* Centering Helper */\n.vd-spinner-center {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  padding: var(--vd-spacing-5, 1rem);\n}\n\n/* Quad-Spinner Loader — signature Vanduo 2x2 grid loader */\n.vd-dynamic-loader {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 4rem 1rem;\n  gap: 1rem;\n}\n\n.vd-dynamic-loader-grid {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 0.75rem;\n  align-items: center;\n  justify-items: center;\n}\n\n.vd-dynamic-loader-grid .vd-spinner {\n  --vd-spinner-size: 1.125rem;\n  --vd-spinner-border-width: 2px;\n  --vd-spinner-speed: 0.9s;\n\n  border-color: var(--vd-border-color, #d9d9d9);\n  border-top-color: var(--vd-spinner-color);\n}\n\n.vd-dynamic-loader-grid .vd-spinner:nth-child(1) {\n  animation-delay: -0.45s;\n}\n\n.vd-dynamic-loader-grid .vd-spinner:nth-child(2) {\n  animation-delay: -0.3s;\n}\n\n.vd-dynamic-loader-grid .vd-spinner:nth-child(3) {\n  animation-delay: -0.15s;\n}\n\n.vd-dynamic-loader-grid .vd-spinner:nth-child(4) {\n  animation-delay: 0s;\n}\n\n.vd-dynamic-loader-text {\n  color: var(--vd-text-muted);\n  font-size: var(--vd-font-size-sm, 0.8125rem);\n}\n\n/* Quad-Spinner overlaying a skeleton card */\n.vd-dynamic-loader-card {\n  position: relative;\n  min-height: 300px;\n  padding: 2rem;\n  overflow: hidden;\n  border-radius: var(--vd-btn-border-radius, 0.5rem);\n  border: 1px solid var(--vd-border-color);\n}\n\n.vd-dynamic-loader-card > .vd-dynamic-loader {\n  position: absolute;\n  inset: 0;\n  padding: 0;\n  background: rgba(255, 255, 255, 0.6);\n  z-index: 1;\n  pointer-events: none;\n}\n\n[data-theme=\"dark\"] .vd-dynamic-loader-card > .vd-dynamic-loader {\n  background: rgba(0, 0, 0, 0.35);\n}\n\n@media (prefers-color-scheme: dark) {\n  :root:not([data-theme]) .vd-dynamic-loader-card > .vd-dynamic-loader {\n    background: rgba(0, 0, 0, 0.35);\n  }\n}\n\n/* Reduced motion */\n@media (prefers-reduced-motion: reduce) {\n  .vd-spinner,\n  .vd-spinner-dots::before,\n  .vd-spinner-dots::after,\n  .vd-spinner-dots span,\n  .vd-spinner-grow {\n    animation-duration: 1.5s;\n  }\n}\n\n/**\n * Vanduo Framework - Button Group Component\n * Toolbar-style button grouping\n */\n\n/* Button Group - Horizontal */\n.vd-btn-group {\n  display: inline-flex;\n  position: relative;\n  vertical-align: middle;\n}\n\n.vd-btn-group>.vd-btn {\n  position: relative;\n  flex: 0 1 auto;\n  margin-bottom: 0;\n}\n\n/* Remove inner border-radius for adjacent buttons */\n.vd-btn-group>.vd-btn:not(:first-child) {\n  border-top-left-radius: 0;\n  border-bottom-left-radius: 0;\n  margin-left: -1px;\n}\n\n.vd-btn-group>.vd-btn:not(:last-child) {\n  border-top-right-radius: 0;\n  border-bottom-right-radius: 0;\n}\n\n/* Ensure z-index for focus/active states */\n.vd-btn-group>.vd-btn:hover,\n.vd-btn-group>.vd-btn:focus,\n.vd-btn-group>.vd-btn:active,\n.vd-btn-group>.vd-btn.is-active {\n  z-index: 1;\n}\n\n/* Button Group - Vertical */\n.vd-btn-group-vertical {\n  display: inline-flex;\n  flex-direction: column;\n  align-items: stretch;\n  justify-content: center;\n}\n\n.vd-btn-group-vertical>.vd-btn {\n  width: 100%;\n  margin-bottom: 0;\n}\n\n.vd-btn-group-vertical>.vd-btn:not(:first-child) {\n  border-top-left-radius: 0;\n  border-top-right-radius: 0;\n  margin-top: -1px;\n}\n\n.vd-btn-group-vertical>.vd-btn:not(:last-child) {\n  border-bottom-left-radius: 0;\n  border-bottom-right-radius: 0;\n}\n\n/* Sizing - inherit from button sizes */\n.vd-btn-group-sm>.vd-btn {\n  font-size: var(--vd-font-size-sm);\n  padding: 0.3125rem 0.625rem;\n}\n\n.vd-btn-group-lg>.vd-btn {\n  font-size: var(--vd-font-size-lg);\n  padding: 0.625rem 1.25rem;\n}\n\n/* Full Width */\n.vd-btn-group-full {\n  display: flex;\n  width: 100%;\n}\n\n.vd-btn-group-full>.vd-btn {\n  flex: 1 1 auto;\n}\n/**\n * Vanduo Framework - Theme Customizer\n * A comprehensive theme customization panel for the navbar\n */\n\n:root {\n  /* Theme Customizer Variables */\n  --vd-customizer-width: 320px;\n  --vd-customizer-padding: 1rem;\n  --vd-customizer-gap: 0.75rem;\n  --vd-customizer-swatch-size: 28px;\n  --vd-customizer-radius-btn-width: 48px;\n  --vd-customizer-bg: var(--vd-bg-primary);\n  --vd-customizer-border: var(--vd-border-color);\n  --vd-customizer-shadow: var(--vd-shadow-lg);\n  --vd-customizer-z-index: 1050;\n}\n\n/* ==========================================================================\n   Dynamic Panel (appended to body)\n   ========================================================================== */\n\nbody > .vd-theme-customizer-panel {\n  position: fixed;\n  /* top is set dynamically by JS based on actual navbar height */\n  top: 55px;\n  right: 0;\n  width: var(--vd-customizer-width);\n  max-height: calc(100vh - 55px);\n  overflow-y: auto;\n  padding: 0; /* Override .vd-navbar-fixed ~ * padding-top rule */\n  background-color: var(--vd-customizer-bg);\n  border: 1px solid var(--vd-customizer-border);\n  border-radius: calc(var(--vd-radius-scale, 0.25) * 1rem);\n  box-shadow: var(--vd-customizer-shadow);\n  z-index: var(--vd-customizer-z-index);\n  opacity: 0;\n  visibility: hidden;\n  transform: translateY(-10px);\n  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;\n}\n\nbody > .vd-theme-customizer-panel.is-open {\n  opacity: 1;\n  visibility: visible;\n  transform: translateY(0);\n}\n\n/* ==========================================================================\n   Dynamic Panel Inner Structure (tc-* classes)\n   ========================================================================== */\n\n.tc-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 0.5rem var(--vd-customizer-padding) 0.75rem;\n  border-bottom: 1px solid var(--vd-border-color);\n}\n\n.tc-title {\n  font-size: var(--vd-font-size-base);\n  font-weight: var(--vd-font-weight-semibold);\n  color: var(--vd-text-primary);\n  margin: 0;\n}\n\n.tc-body {\n  padding: var(--vd-customizer-padding);\n}\n\n.tc-footer {\n  padding: 0.75rem var(--vd-customizer-padding) 0.5rem;\n  border-top: 1px solid var(--vd-border-color);\n}\n\n.tc-section {\n  margin-bottom: 1.25rem;\n}\n\n.tc-section:last-child {\n  margin-bottom: 0;\n}\n\n.tc-label {\n  display: block;\n  margin-bottom: 0.5rem;\n  font-size: var(--vd-font-size-sm);\n  font-weight: var(--vd-font-weight-medium);\n  color: var(--vd-text-primary);\n}\n\n/* Primary Color Grid */\n.tc-color-grid {\n  display: grid;\n  grid-template-columns: repeat(6, 1fr);\n  gap: 0.375rem;\n}\n\n.tc-color-swatch {\n  width: 100%;\n  aspect-ratio: 1;\n  padding: 0;\n  background-color: var(--vd-swatch-color);\n  border: 2px solid transparent;\n  border-radius: calc(var(--vd-radius-scale, 0.25) * 0.5rem);\n  cursor: pointer;\n  transition: all 0.15s ease;\n}\n\n.tc-color-swatch:hover {\n  transform: scale(1.1);\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);\n}\n\n.tc-color-swatch:focus-visible {\n  outline: 2px solid var(--vd-color-primary);\n  outline-offset: 2px;\n}\n\n.tc-color-swatch.is-active {\n  border-color: var(--vd-text-primary);\n  box-shadow: 0 0 0 2px var(--vd-bg-primary);\n}\n\n/* Neutral Color Grid */\n.tc-neutral-grid {\n  display: grid;\n  grid-template-columns: repeat(5, 1fr);\n  gap: 0.375rem;\n}\n\n.tc-neutral-swatch {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 0.25rem;\n  padding: 0.5rem 0.25rem;\n  background: transparent;\n  border: 1px solid var(--vd-border-color);\n  border-radius: calc(var(--vd-radius-scale, 0.25) * 0.5rem);\n  cursor: pointer;\n  transition: all 0.15s ease;\n}\n\n.tc-neutral-swatch::before {\n  content: '';\n  width: 16px;\n  height: 16px;\n  border-radius: 50%;\n  background-color: var(--vd-swatch-color);\n  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);\n}\n\n.tc-neutral-swatch span {\n  font-size: var(--vd-font-size-xs);\n  color: var(--vd-text-primary);\n}\n\n.tc-neutral-swatch:hover {\n  background-color: var(--vd-bg-secondary);\n  border-color: var(--vd-border-color-dark);\n}\n\n.tc-neutral-swatch:focus-visible {\n  outline: 2px solid var(--vd-color-primary);\n  outline-offset: 1px;\n}\n\n.tc-neutral-swatch.is-active {\n  background-color: var(--vd-bg-secondary);\n  border-color: var(--vd-text-primary);\n}\n\n/* Radius Group */\n.tc-radius-group {\n  display: flex;\n  gap: 0;\n}\n\n.tc-radius-btn {\n  flex: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0.5rem 0.25rem;\n  background: transparent;\n  border: 1px solid var(--vd-border-color);\n  color: var(--vd-text-primary);\n  font-size: var(--vd-font-size-xs);\n  font-weight: var(--vd-font-weight-medium);\n  cursor: pointer;\n  transition: all 0.15s ease;\n}\n\n.tc-radius-btn:first-child {\n  border-radius: calc(var(--vd-radius-scale, 0.25) * 0.5rem) 0 0 calc(var(--vd-radius-scale, 0.25) * 0.5rem);\n}\n\n.tc-radius-btn:last-child {\n  border-radius: 0 calc(var(--vd-radius-scale, 0.25) * 0.5rem) calc(var(--vd-radius-scale, 0.25) * 0.5rem) 0;\n}\n\n.tc-radius-btn:not(:first-child) {\n  margin-left: -1px;\n}\n\n.tc-radius-btn:hover {\n  background-color: var(--vd-bg-secondary);\n  z-index: 1;\n}\n\n.tc-radius-btn:focus-visible {\n  outline: 2px solid var(--vd-color-primary);\n  outline-offset: 1px;\n  z-index: 2;\n}\n\n.tc-radius-btn.is-active {\n  background-color: var(--vd-bg-dark);\n  border-color: var(--vd-bg-dark);\n  color: var(--vd-text-inverse);\n  z-index: 1;\n}\n\n/* Palette toggle (Fibonacci default / Open Color optional) */\n.tc-palette-group {\n  display: flex;\n  gap: 0;\n}\n\n.tc-palette-btn {\n  flex: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0.5rem 0.5rem;\n  background: transparent;\n  border: 1px solid var(--vd-border-color);\n  color: var(--vd-text-primary);\n  font-size: var(--vd-font-size-xs);\n  font-weight: var(--vd-font-weight-medium);\n  cursor: pointer;\n  transition: all 0.15s ease;\n}\n\n.tc-palette-btn:first-child {\n  border-radius: calc(var(--vd-radius-scale, 0.25) * 0.5rem) 0 0 calc(var(--vd-radius-scale, 0.25) * 0.5rem);\n}\n\n.tc-palette-btn:last-child {\n  border-radius: 0 calc(var(--vd-radius-scale, 0.25) * 0.5rem) calc(var(--vd-radius-scale, 0.25) * 0.5rem) 0;\n}\n\n.tc-palette-btn:not(:first-child) {\n  margin-left: -1px;\n}\n\n.tc-palette-btn:hover {\n  background-color: var(--vd-bg-secondary);\n  z-index: 1;\n}\n\n.tc-palette-btn:focus-visible {\n  outline: 2px solid var(--vd-color-primary);\n  outline-offset: 1px;\n  z-index: 2;\n}\n\n.tc-palette-btn.is-active {\n  background-color: var(--vd-bg-dark);\n  border-color: var(--vd-bg-dark);\n  color: var(--vd-text-inverse);\n  z-index: 1;\n}\n\n/* Font Select */\n.tc-font-select {\n  width: 100%;\n  padding: 0.5rem 0.75rem;\n  background-color: var(--vd-bg-primary);\n  border: 1px solid var(--vd-border-color);\n  border-radius: calc(var(--vd-radius-scale, 0.25) * 0.5rem);\n  color: var(--vd-text-primary);\n  font-size: var(--vd-font-size-sm);\n  cursor: pointer;\n  transition: border-color 0.15s ease;\n}\n\n.tc-font-select:hover {\n  border-color: var(--vd-border-color-dark);\n}\n\n.tc-font-select:focus {\n  outline: none;\n  border-color: var(--vd-color-primary);\n  box-shadow: 0 0 0 3px var(--vd-color-primary-alpha-10);\n}\n\n/* Mode Group */\n.tc-mode-group {\n  display: flex;\n  gap: 0;\n}\n\n.tc-mode-btn {\n  flex: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 0.375rem;\n  padding: 0.5rem 0.5rem;\n  background: transparent;\n  border: 1px solid var(--vd-border-color);\n  color: var(--vd-text-primary);\n  font-size: var(--vd-font-size-xs);\n  cursor: pointer;\n  transition: all 0.15s ease;\n}\n\n.tc-mode-btn:first-child {\n  border-radius: calc(var(--vd-radius-scale, 0.25) * 0.5rem) 0 0 calc(var(--vd-radius-scale, 0.25) * 0.5rem);\n}\n\n.tc-mode-btn:last-child {\n  border-radius: 0 calc(var(--vd-radius-scale, 0.25) * 0.5rem) calc(var(--vd-radius-scale, 0.25) * 0.5rem) 0;\n}\n\n.tc-mode-btn:not(:first-child) {\n  margin-left: -1px;\n}\n\n.tc-mode-btn:hover {\n  background-color: var(--vd-bg-secondary);\n  z-index: 1;\n}\n\n.tc-mode-btn:focus-visible {\n  outline: 2px solid var(--vd-color-primary);\n  outline-offset: 1px;\n  z-index: 2;\n}\n\n.tc-mode-btn.is-active {\n  background-color: var(--vd-bg-dark);\n  border-color: var(--vd-bg-dark);\n  color: var(--vd-text-inverse);\n  z-index: 1;\n}\n\n.tc-mode-btn i {\n  font-size: 1rem;\n}\n\n/* ==========================================================================\n   Trigger Button\n   ========================================================================== */\n\n.vd-theme-customizer {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n}\n\n.vd-theme-customizer-trigger {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 2.5rem;\n  height: 2.5rem;\n  padding: 0;\n  background: transparent;\n  border: 1px solid var(--vd-border-color);\n  border-radius: var(--vd-btn-border-radius);\n  color: var(--vd-text-primary);\n  cursor: pointer;\n  transition: all 0.2s ease;\n}\n\n.vd-theme-customizer-trigger:hover {\n  background-color: var(--vd-bg-secondary);\n  border-color: var(--vd-color-primary);\n  color: var(--vd-color-primary);\n}\n\n.vd-theme-customizer-trigger:focus-visible {\n  outline: 2px solid var(--vd-color-primary);\n  outline-offset: 2px;\n}\n\n.vd-theme-customizer-trigger i {\n  font-size: 1.25rem;\n}\n\n.vd-theme-customizer-trigger[aria-expanded=\"true\"] {\n  background-color: var(--vd-color-primary-alpha-10);\n  border-color: var(--vd-color-primary);\n  color: var(--vd-color-primary);\n}\n\n/* ==========================================================================\n    Panel\n    ========================================================================== */\n\n.vd-theme-customizer-panel {\n  position: fixed;\n  /* top is set dynamically by JS based on actual navbar height */\n  top: 55px;\n  right: 0;\n  width: var(--vd-customizer-width);\n  max-height: calc(100vh - 55px);\n  overflow-y: auto;\n  padding: 0; /* Override .vd-navbar-fixed ~ * padding-top rule */\n  background-color: var(--vd-customizer-bg);\n  border: 1px solid var(--vd-customizer-border);\n  border-radius: calc(var(--vd-radius-scale, 0.25) * 1rem);\n  box-shadow: var(--vd-customizer-shadow);\n  z-index: var(--vd-customizer-z-index);\n  opacity: 0;\n  visibility: hidden;\n  transform: translateY(-10px);\n  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;\n}\n\n.vd-theme-customizer-panel.is-open {\n  opacity: 1;\n  visibility: visible;\n  transform: translateY(0);\n}\n\n.vd-theme-customizer-panel-inner {\n  padding: var(--vd-customizer-padding);\n}\n\n/* ==========================================================================\n   Sections\n   ========================================================================== */\n\n.customizer-section {\n  margin-bottom: 1.25rem;\n}\n\n.customizer-section:last-child {\n  margin-bottom: 0;\n}\n\n.customizer-section-title {\n  display: flex;\n  align-items: center;\n  gap: 0.375rem;\n  margin-bottom: 0.625rem;\n  font-size: var(--vd-font-size-sm);\n  font-weight: var(--vd-font-weight-medium);\n  color: var(--vd-text-primary);\n}\n\n.customizer-help {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 1rem;\n  height: 1rem;\n  padding: 0;\n  background: transparent;\n  border: none;\n  color: var(--vd-text-muted);\n  cursor: help;\n  font-size: 0.75rem;\n}\n\n.customizer-help:hover {\n  color: var(--vd-text-primary);\n}\n\n/* ==========================================================================\n   Color Swatches (Primary & Neutral)\n   ========================================================================== */\n\n.customizer-colors {\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  gap: 0.375rem;\n}\n\n.customizer-swatch {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  padding: 0.375rem 0.5rem;\n  background: transparent;\n  border: 1px solid var(--vd-border-color);\n  border-radius: var(--vd-btn-border-radius);\n  cursor: pointer;\n  transition: all 0.15s ease;\n  text-align: left;\n}\n\n.customizer-swatch:hover {\n  background-color: var(--vd-bg-secondary);\n  border-color: var(--vd-border-color-dark);\n}\n\n.customizer-swatch:focus-visible {\n  outline: 2px solid var(--vd-color-primary);\n  outline-offset: 1px;\n}\n\n.customizer-swatch.is-active {\n  background-color: var(--vd-bg-secondary);\n  border-color: var(--vd-text-primary);\n}\n\n.customizer-swatch-dot {\n  flex-shrink: 0;\n  width: 12px;\n  height: 12px;\n  border-radius: 50%;\n  background-color: var(--vd-swatch-color);\n  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);\n}\n\n.customizer-swatch-label {\n  font-size: var(--vd-font-size-xs);\n  color: var(--vd-text-primary);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n/* Neutral swatches - 5 columns */\n.customizer-neutral-colors {\n  grid-template-columns: repeat(5, 1fr);\n}\n\n.customizer-neutral-colors .customizer-swatch {\n  flex-direction: column;\n  padding: 0.5rem 0.25rem;\n  text-align: center;\n}\n\n.customizer-neutral-colors .customizer-swatch-dot {\n  width: 16px;\n  height: 16px;\n}\n\n.customizer-neutral-colors .customizer-swatch-label {\n  margin-top: 0.25rem;\n}\n\n/* ==========================================================================\n   Radius Options\n   ========================================================================== */\n\n.customizer-radius {\n  display: flex;\n  gap: 0.25rem;\n}\n\n.customizer-radius-btn {\n  flex: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0.5rem 0.25rem;\n  background: transparent;\n  border: 1px solid var(--vd-border-color);\n  color: var(--vd-text-primary);\n  font-size: var(--vd-font-size-xs);\n  font-weight: var(--vd-font-weight-medium);\n  cursor: pointer;\n  transition: all 0.15s ease;\n}\n\n.customizer-radius-btn:first-child {\n  border-radius: var(--vd-btn-border-radius) 0 0 var(--vd-btn-border-radius);\n}\n\n.customizer-radius-btn:last-child {\n  border-radius: 0 var(--vd-btn-border-radius) var(--vd-btn-border-radius) 0;\n}\n\n.customizer-radius-btn:not(:first-child) {\n  margin-left: -1px;\n}\n\n.customizer-radius-btn:hover {\n  background-color: var(--vd-bg-secondary);\n  z-index: 1;\n}\n\n.customizer-radius-btn:focus-visible {\n  outline: 2px solid var(--vd-color-primary);\n  outline-offset: 1px;\n  z-index: 2;\n}\n\n.customizer-radius-btn.is-active {\n  background-color: var(--vd-bg-dark);\n  border-color: var(--vd-bg-dark);\n  color: var(--vd-text-inverse);\n  z-index: 1;\n}\n\n/* ==========================================================================\n   Font Selector\n   ========================================================================== */\n\n.customizer-font {\n  position: relative;\n}\n\n.customizer-font .vd-input {\n  width: 100%;\n  padding-left: 2rem;\n}\n\n.customizer-font-icon {\n  position: absolute;\n  left: 0.625rem;\n  top: 50%;\n  transform: translateY(-50%);\n  color: var(--vd-text-muted);\n  pointer-events: none;\n}\n\n/* ==========================================================================\n   Color Mode Switcher\n   ========================================================================== */\n\n.customizer-mode {\n  display: flex;\n  gap: 0.25rem;\n}\n\n.customizer-mode-btn {\n  flex: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 0.375rem;\n  padding: 0.5rem 0.5rem;\n  background: transparent;\n  border: 1px solid var(--vd-border-color);\n  color: var(--vd-text-primary);\n  font-size: var(--vd-font-size-xs);\n  cursor: pointer;\n  transition: all 0.15s ease;\n}\n\n.customizer-mode-btn:first-child {\n  border-radius: var(--vd-btn-border-radius) 0 0 var(--vd-btn-border-radius);\n}\n\n.customizer-mode-btn:last-child {\n  border-radius: 0 var(--vd-btn-border-radius) var(--vd-btn-border-radius) 0;\n}\n\n.customizer-mode-btn:not(:first-child) {\n  margin-left: -1px;\n}\n\n.customizer-mode-btn:hover {\n  background-color: var(--vd-bg-secondary);\n  z-index: 1;\n}\n\n.customizer-mode-btn:focus-visible {\n  outline: 2px solid var(--vd-color-primary);\n  outline-offset: 1px;\n  z-index: 2;\n}\n\n.customizer-mode-btn.is-active {\n  background-color: var(--vd-bg-dark);\n  border-color: var(--vd-bg-dark);\n  color: var(--vd-text-inverse);\n  z-index: 1;\n}\n\n.customizer-mode-btn i {\n  font-size: 1rem;\n}\n\n/* ==========================================================================\n   Dark Theme Overrides\n   ========================================================================== */\n\n[data-theme=\"dark\"] {\n  --vd-customizer-bg: var(--vd-bg-primary);\n  --vd-customizer-border: var(--vd-border-color);\n}\n\n[data-theme=\"dark\"] .customizer-swatch-dot,\n[data-theme=\"dark\"] .tc-neutral-swatch::before {\n  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);\n}\n\n[data-theme=\"dark\"] .customizer-radius-btn.is-active,\n[data-theme=\"dark\"] .customizer-mode-btn.is-active,\n[data-theme=\"dark\"] .tc-radius-btn.is-active,\n[data-theme=\"dark\"] .tc-palette-btn.is-active,\n[data-theme=\"dark\"] .tc-mode-btn.is-active {\n  background-color: var(--vd-gray-2);\n  border-color: var(--vd-gray-2);\n  color: var(--vd-gray-9);\n}\n\n@media (prefers-color-scheme: dark) {\n  :root:not([data-theme]) {\n    --vd-customizer-bg: var(--vd-bg-primary);\n    --vd-customizer-border: var(--vd-border-color);\n  }\n\n  :root:not([data-theme]) .customizer-swatch-dot,\n  :root:not([data-theme]) .tc-neutral-swatch::before {\n    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);\n  }\n\n  :root:not([data-theme]) .customizer-radius-btn.is-active,\n  :root:not([data-theme]) .customizer-mode-btn.is-active,\n  :root:not([data-theme]) .tc-radius-btn.is-active,\n  :root:not([data-theme]) .tc-palette-btn.is-active,\n  :root:not([data-theme]) .tc-mode-btn.is-active {\n    background-color: var(--vd-gray-2);\n    border-color: var(--vd-gray-2);\n    color: var(--vd-gray-9);\n  }\n}\n\n/* ==========================================================================\n    Mobile Responsive\n    ========================================================================== */\n\n@media (max-width: 767.98px) {\n  .vd-theme-customizer-panel,\n  body > .vd-theme-customizer-panel {\n    position: fixed;\n    top: 0;\n    right: -100%;\n    bottom: 0;\n    width: 100%;\n    max-width: 320px;\n    max-height: none;\n    border: none;\n    border-left: 1px solid var(--vd-customizer-border);\n    border-radius: 0;\n    transform: none;\n    opacity: 1;\n    transition: right 0.3s ease, visibility 0.3s ease;\n  }\n\n  .vd-theme-customizer-panel.is-open,\n  body > .vd-theme-customizer-panel.is-open {\n    right: 0;\n    transform: none;\n    visibility: visible;\n  }\n\n  .vd-theme-customizer-panel-inner,\n  .tc-body {\n    padding: 1.5rem;\n  }\n\n  .tc-header {\n    padding: 1rem 1.5rem;\n  }\n\n  .tc-footer {\n    padding: 1rem 1.5rem;\n  }\n\n  /* Mobile close button */\n  .customizer-mobile-close {\n    position: absolute;\n    top: 1rem;\n    right: 1rem;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 2rem;\n    height: 2rem;\n    padding: 0;\n    background: transparent;\n    border: 1px solid var(--vd-border-color);\n    border-radius: calc(var(--vd-radius-scale, 0.25) * 0.5rem);\n    color: var(--vd-text-primary);\n    cursor: pointer;\n  }\n\n  .customizer-mobile-close:hover {\n    background-color: var(--vd-bg-secondary);\n  }\n\n  /* Mobile overlay */\n  .vd-theme-customizer-overlay {\n    position: fixed;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    background-color: rgba(0, 0, 0, 0.5);\n    z-index: calc(var(--vd-customizer-z-index) - 1);\n    opacity: 0;\n    visibility: hidden;\n    transition: opacity 0.3s ease, visibility 0.3s ease;\n  }\n\n  .vd-theme-customizer-overlay.is-active {\n    opacity: 1;\n    visibility: visible;\n  }\n}\n\n@media (min-width: 768px) {\n  .customizer-mobile-close {\n    display: none;\n  }\n\n  .vd-theme-customizer-overlay {\n    display: none;\n  }\n}\n\n/* ==========================================================================\n   Scrollbar Styling\n   ========================================================================== */\n\n.vd-theme-customizer-panel::-webkit-scrollbar {\n  width: 6px;\n}\n\n.vd-theme-customizer-panel::-webkit-scrollbar-track {\n  background: transparent;\n}\n\n.vd-theme-customizer-panel::-webkit-scrollbar-thumb {\n  background-color: var(--vd-border-color);\n  border-radius: 3px;\n}\n\n.vd-theme-customizer-panel::-webkit-scrollbar-thumb:hover {\n  background-color: var(--vd-text-muted);\n}\n\n/* ==========================================================================\n   Animation for panel header\n   ========================================================================== */\n\n.customizer-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding-bottom: 0.75rem;\n  margin-bottom: 0.75rem;\n  border-bottom: 1px solid var(--vd-border-color);\n}\n\n.customizer-title {\n  font-size: var(--vd-font-size-base);\n  font-weight: var(--vd-font-weight-semibold);\n  color: var(--vd-text-primary);\n  margin: 0;\n}\n\n.customizer-reset {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.25rem;\n  padding: 0.25rem 0.5rem;\n  background: transparent;\n  border: 1px solid var(--vd-border-color);\n  border-radius: var(--vd-btn-border-radius);\n  color: var(--vd-text-muted);\n  font-size: var(--vd-font-size-xs);\n  cursor: pointer;\n  transition: all 0.15s ease;\n}\n\n.customizer-reset:hover {\n  background-color: var(--vd-bg-secondary);\n  color: var(--vd-text-primary);\n  border-color: var(--vd-border-color-dark);\n}\n\n.customizer-reset:focus-visible {\n  outline: 2px solid var(--vd-color-primary);\n  outline-offset: 1px;\n}\n\n/**\n * Vanduo Framework - Theme Switcher\n * Icon-only menu variant for explicit theme selection\n */\n\n:root {\n  --vd-theme-switcher-menu-bg: var(--vd-color-white);\n  --vd-theme-switcher-menu-border-color: var(--vd-border-color);\n  --vd-theme-switcher-option-hover-bg: var(--vd-bg-secondary);\n  --vd-theme-switcher-option-active-bg: var(--vd-color-primary-alpha-10);\n  --vd-theme-switcher-option-active-color: var(--vd-color-primary);\n  --vd-theme-switcher-z-index: 1000;\n}\n\n[data-theme=\"dark\"] {\n  --vd-theme-switcher-menu-bg: var(--vd-bg-primary);\n  --vd-theme-switcher-option-hover-bg: var(--vd-bg-secondary);\n}\n\n@media (prefers-color-scheme: dark) {\n  :root:not([data-theme]) {\n    --vd-theme-switcher-menu-bg: var(--vd-bg-primary);\n    --vd-theme-switcher-option-hover-bg: var(--vd-bg-secondary);\n  }\n}\n\n.vd-theme-switcher {\n  position: relative;\n  display: inline-block;\n}\n\n.vd-theme-switcher-toggle {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 2.375rem;\n  height: 2.375rem;\n  padding: 0;\n  border: 1px solid var(--vd-border-color);\n  border-radius: var(--vd-btn-border-radius, var(--vd-card-border-radius));\n  background: transparent;\n  color: var(--vd-text-secondary);\n  cursor: pointer;\n  font-size: 1.15rem;\n  line-height: 1;\n  transition: color 0.2s, border-color 0.2s, background 0.2s;\n}\n\n.vd-theme-switcher-toggle:hover,\n.vd-theme-switcher-toggle:focus-visible {\n  color: var(--vd-color-primary);\n  border-color: var(--vd-color-primary);\n  background: var(--vd-color-primary-alpha-10);\n  outline: none;\n}\n\n.vd-theme-switcher-menu {\n  position: absolute;\n  top: calc(100% + 0.375rem);\n  left: 0;\n  z-index: var(--vd-theme-switcher-z-index);\n  display: none;\n  flex-direction: column;\n  gap: 0.25rem;\n  min-width: auto;\n  padding: 0.375rem;\n  margin: 0;\n  background: var(--vd-theme-switcher-menu-bg, #ffffff);\n  border: 1px solid var(--vd-theme-switcher-menu-border-color);\n  border-radius: var(--vd-btn-border-radius, var(--vd-card-border-radius));\n  box-shadow: var(--vd-shadow-lg);\n  list-style: none;\n  isolation: isolate;\n  backdrop-filter: none;\n  -webkit-backdrop-filter: none;\n  visibility: hidden;\n  pointer-events: none;\n  transform: translateY(-6px);\n  transition: visibility var(--vd-transition-duration-base, 0.2s) var(--vd-transition-ease, ease),\n              transform var(--vd-transition-duration-base, 0.2s) var(--vd-transition-ease, ease);\n}\n\n.vd-theme-switcher-menu-end .vd-theme-switcher-menu,\n.vd-theme-switcher.vd-theme-switcher-menu-end .vd-theme-switcher-menu {\n  right: 0;\n  left: auto;\n}\n\n.vd-theme-switcher.is-open .vd-theme-switcher-menu,\n.vd-theme-switcher-menu.is-open {\n  display: flex;\n  visibility: visible;\n  pointer-events: auto;\n  transform: translateY(0);\n}\n\n.vd-theme-switcher-option,\n.vd-theme-switcher-menu [data-theme-value] {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 2.375rem;\n  height: 2.375rem;\n  padding: 0;\n  border: 1px solid transparent;\n  border-radius: var(--vd-btn-border-radius-sm, var(--vd-radius-fib-3));\n  background: transparent;\n  color: var(--vd-text-secondary);\n  cursor: pointer;\n  font-size: 1.15rem;\n  line-height: 1;\n  transition: color 0.2s, background 0.2s, border-color 0.2s;\n}\n\n.vd-theme-switcher-option:hover,\n.vd-theme-switcher-option:focus-visible,\n.vd-theme-switcher-menu [data-theme-value]:hover,\n.vd-theme-switcher-menu [data-theme-value]:focus-visible {\n  color: var(--vd-text-primary);\n  background: var(--vd-theme-switcher-option-hover-bg);\n  outline: none;\n}\n\n.vd-theme-switcher-option.is-active,\n.vd-theme-switcher-menu [data-theme-value].is-active {\n  color: var(--vd-theme-switcher-option-active-color);\n  background: var(--vd-theme-switcher-option-active-bg);\n  border-color: var(--vd-color-primary-alpha-20, transparent);\n}\n\n/**\n * Vanduo Framework - Image Box Component\n * Lightbox-style image enlargement with smooth transitions\n */\n\n:root {\n  /* Image Box Colors */\n  --vd-image-box-backdrop-bg: rgba(0, 0, 0, 0.9);\n  --vd-image-box-backdrop-blur: 8px;\n\n  /* Image Box Transitions (Fibonacci-inspired timing) */\n  --vd-image-box-transition-duration: 0.3s;\n  --vd-image-box-transition-easing: cubic-bezier(0.4, 0, 0.2, 1);\n\n  /* Image Box Z-index */\n  --vd-image-box-z-index: 2000;\n\n  /* Image Box Padding */\n  --vd-image-box-padding: 21px;\n  /* Fibonacci number */\n\n  /* Image Box Scale */\n  --vd-image-box-scale-start: 0.9;\n  --vd-image-box-scale-end: 1;\n\n  /* Image Box Max Size */\n  --vd-image-box-max-width: 50vw;\n  --vd-image-box-max-height: 50vh;\n}\n\n/* Broken Image Handling for Triggers */\n.vd-image-box-trigger {\n  position: relative;\n  min-height: 60px;\n  min-width: 60px;\n  cursor: zoom-in;\n  transition: transform var(--vd-image-box-transition-duration) var(--vd-image-box-transition-easing),\n    box-shadow var(--vd-image-box-transition-duration) var(--vd-image-box-transition-easing);\n}\n\n/* Hide broken image alt text and show styled placeholder */\n.vd-image-box-trigger.is-broken {\n  /* Gradient background for placeholder */\n  background: linear-gradient(135deg,\n      var(--vd-bg-tertiary, rgba(128, 128, 128, 0.1)) 0%,\n      var(--vd-bg-secondary, rgba(128, 128, 128, 0.15)) 100%);\n  border: 1px dashed var(--vd-border-color, rgba(128, 128, 128, 0.3));\n\n  /* Center the icon using background image */\n  background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23888888' viewBox='0 0 256 256'%3E%3Cpath d='M216,40H40A16,16,0,0,0,24,56V200a16,16,0,0,0,16,16H216a16,16,0,0,0,16-16V56A16,16,0,0,0,216,40ZM40,56H216v94.75l-24.29-24.29a16,16,0,0,0-22.63,0L144,151.51l-25.38-25.38a16,16,0,0,0-22.62,0L40,182.12V56Z'/%3E%3Ccircle cx='100' cy='108' r='20'/%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  background-position: center;\n  background-size: 32px 32px;\n\n  /* Hide the broken image icon and alt text */\n  color: transparent;\n  overflow: hidden;\n}\n\n.vd-image-box-trigger:hover {\n  transform: scale(1.02);\n  box-shadow: var(--vd-shadow-lg);\n}\n\n/* Image Box Backdrop */\n.vd-image-box-backdrop {\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100vw;\n  height: 100vh;\n  z-index: var(--vd-image-box-z-index);\n  background-color: var(--vd-image-box-backdrop-bg);\n  backdrop-filter: blur(var(--vd-image-box-backdrop-blur));\n  -webkit-backdrop-filter: blur(var(--vd-image-box-backdrop-blur));\n  opacity: 0;\n  visibility: hidden;\n  transition: opacity var(--vd-image-box-transition-duration) var(--vd-image-box-transition-easing),\n    visibility var(--vd-image-box-transition-duration) var(--vd-image-box-transition-easing);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: var(--vd-image-box-padding);\n}\n\n.vd-image-box-backdrop.is-visible {\n  opacity: 1;\n  visibility: visible;\n}\n\n/* Image Box Container */\n.vd-image-box-container {\n  position: relative;\n  max-width: var(--vd-image-box-max-width);\n  max-height: var(--vd-image-box-max-height);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transform: scale(var(--vd-image-box-scale-start));\n  opacity: 0;\n  transition: transform var(--vd-image-box-transition-duration) var(--vd-image-box-transition-easing),\n    opacity var(--vd-image-box-transition-duration) var(--vd-image-box-transition-easing);\n}\n\n.vd-image-box-backdrop.is-visible .vd-image-box-container {\n  transform: scale(var(--vd-image-box-scale-end));\n  opacity: 1;\n}\n\n/* Image Box Image */\n.vd-image-box-img {\n  max-width: 100%;\n  max-height: 100%;\n  object-fit: contain;\n  border-radius: var(--vd-btn-border-radius);\n  box-shadow: var(--vd-shadow-2xl);\n  cursor: zoom-out;\n  user-select: none;\n  -webkit-user-drag: none;\n}\n\n/* Image Box Close Button (optional) */\n.vd-image-box-close {\n  position: absolute;\n  top: 21px;\n  right: 21px;\n  width: 44px;\n  height: 44px;\n  background: rgba(255, 255, 255, 0.1);\n  border: none;\n  border-radius: 50%;\n  color: var(--vd-color-white);\n  font-size: 24px;\n  line-height: 1;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: background-color var(--vd-transition-duration-fast) var(--vd-transition-ease),\n    transform var(--vd-transition-duration-fast) var(--vd-transition-ease);\n  z-index: calc(var(--vd-image-box-z-index) + 1);\n  opacity: 0;\n  transform: translateY(-10px);\n}\n\n.vd-image-box-backdrop.is-visible .vd-image-box-close {\n  opacity: 1;\n  transform: translateY(0);\n  transition-delay: 0.1s;\n}\n\n.vd-image-box-close:hover {\n  background: rgba(255, 255, 255, 0.2);\n  transform: scale(1.1);\n}\n\n.vd-image-box-close:focus {\n  outline: 2px solid var(--vd-color-primary);\n  outline-offset: 2px;\n}\n\n/* Image Box Caption */\n.vd-image-box-caption {\n  position: absolute;\n  bottom: 21px;\n  left: 50%;\n  transform: translateX(-50%);\n  background: rgba(0, 0, 0, 0.7);\n  color: var(--vd-color-white);\n  padding: 8px 16px;\n  border-radius: var(--vd-btn-border-radius);\n  font-size: var(--vd-font-size-sm);\n  text-align: center;\n  max-width: 80%;\n  opacity: 0;\n  transition: opacity var(--vd-image-box-transition-duration) var(--vd-image-box-transition-easing);\n}\n\n.vd-image-box-backdrop.is-visible .vd-image-box-caption {\n  opacity: 1;\n  transition-delay: 0.15s;\n}\n\n/* Body scroll lock when Image Box is open */\n.body-image-box-open {\n  overflow: hidden;\n  padding-right: var(--vd-scrollbar-width, 0);\n}\n\n/* Reduced Motion Support */\n@media (prefers-reduced-motion: reduce) {\n\n  .vd-image-box-trigger,\n  .vd-image-box-backdrop,\n  .vd-image-box-container,\n  .vd-image-box-close,\n  .vd-image-box-caption {\n    transition: none;\n  }\n\n  .vd-image-box-trigger:hover {\n    transform: none;\n  }\n}\n\n/* Mobile Adjustments */\n@media (max-width: 767.98px) {\n  :root {\n    --vd-image-box-padding: 13px;\n    --vd-image-box-max-width: 90vw;\n    --vd-image-box-max-height: 80vh;\n  }\n\n  .vd-image-box-close {\n    top: 13px;\n    right: 13px;\n    width: 40px;\n    height: 40px;\n    font-size: 20px;\n  }\n}\n\n/* Gallery Grid Support */\n.vd-image-box-gallery {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));\n  gap: 13px;\n  margin-top: 21px;\n}\n\n.vd-image-box-gallery .vd-image-box-trigger {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  aspect-ratio: 4 / 3;\n  transition: transform 0.2s ease, box-shadow 0.2s ease, outline 0.15s ease;\n}\n\n/* Active/selected state for gallery thumbnails */\n.vd-image-box-gallery .vd-image-box-trigger.is-active,\n.vd-image-box-gallery .vd-image-box-trigger[aria-selected=\"true\"] {\n  outline: 3px solid var(--vd-color-primary);\n  outline-offset: 2px;\n  transform: scale(1.05);\n  box-shadow: var(--vd-shadow-lg);\n}\n\n/* Keyboard focus for gallery thumbnails */\n.vd-image-box-gallery .vd-image-box-trigger:focus {\n  outline: 3px solid var(--vd-color-primary);\n  outline-offset: 2px;\n}\n\n/* Portrait orientation gallery item */\n.vd-image-box-gallery .vd-image-box-trigger[data-orientation=\"portrait\"] {\n  aspect-ratio: 3 / 4;\n}\n\n/* Loading State */\n.vd-image-box-trigger.is-loading {\n  background: var(--vd-bg-secondary);\n  animation: image-box-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n}\n\n@keyframes image-box-pulse {\n\n  0%,\n  100% {\n    opacity: 1;\n  }\n\n  50% {\n    opacity: 0.5;\n  }\n}\n\n/**\n * Vanduo Framework - Documentation Search Component\n * Search functionality for documentation pages\n */\n\n:root {\n  /* Search Input */\n  --vd-doc-search-input-bg: var(--vd-input-bg);\n  --vd-doc-search-input-border: var(--vd-input-border-color);\n  --vd-doc-search-input-focus-border: var(--vd-color-primary);\n  --vd-doc-search-input-radius: var(--vd-input-border-radius);\n  --vd-doc-search-input-padding-y: 0.5rem;\n  --vd-doc-search-input-padding-x: 0.75rem;\n  --vd-doc-search-input-padding-left: 30px;\n  \n  /* Search Results */\n  --vd-doc-search-results-bg: var(--vd-card-bg, var(--vd-bg-primary));\n  --vd-doc-search-results-border: var(--vd-border-color);\n  --vd-doc-search-results-shadow: var(--vd-shadow-lg);\n  --vd-doc-search-results-max-height: 400px;\n  --vd-doc-search-results-radius: var(--vd-input-border-radius);\n  \n  /* Result Items */\n  --vd-doc-search-result-padding: 0.75rem 1rem;\n  --vd-doc-search-result-hover-bg: var(--vd-color-primary-alpha-10, rgba(34, 184, 207, 0.1));\n  --vd-doc-search-result-active-bg: var(--vd-color-primary-alpha-20, rgba(34, 184, 207, 0.2));\n  \n  /* Highlight */\n  --vd-doc-search-highlight-bg: var(--vd-color-warning-alpha-30, rgba(250, 176, 5, 0.3));\n  --vd-doc-search-highlight-color: inherit;\n  \n  /* Shortcut Badge */\n  --vd-doc-search-shortcut-bg: var(--vd-bg-secondary);\n  --vd-doc-search-shortcut-border: var(--vd-border-color);\n  --vd-doc-search-shortcut-color: var(--vd-text-muted);\n}\n\n/* Dark Theme Overrides */\n[data-theme=\"dark\"] {\n  --vd-doc-search-results-bg: var(--vd-bg-secondary);\n  --vd-doc-search-shortcut-bg: var(--vd-bg-tertiary);\n}\n\n@media (prefers-color-scheme: dark) {\n  :root:not([data-theme]) {\n    --vd-doc-search-results-bg: var(--vd-bg-secondary);\n    --vd-doc-search-shortcut-bg: var(--vd-bg-tertiary);\n  }\n}\n\n/* ============================================\n   Search Container\n   ============================================ */\n\n.vd-doc-search {\n  position: relative;\n  margin-bottom: 1rem;\n}\n\n/* ============================================\n   Search Input Wrapper\n   ============================================ */\n\n.vd-doc-search-input-wrapper {\n  position: relative;\n  display: flex;\n  align-items: center;\n}\n\n/* Search Icon */\n.vd-doc-search-icon {\n  position: absolute;\n  left: 0.625rem;\n  top: 50%;\n  transform: translateY(-50%);\n  color: var(--vd-text-muted);\n  font-size: 1.125rem;\n  pointer-events: none;\n  z-index: 1;\n  transition: color 0.15s ease;\n}\n\n.vd-doc-search-input:focus ~ .vd-doc-search-icon,\n.vd-doc-search-input-wrapper:focus-within .vd-doc-search-icon {\n  color: var(--vd-color-primary);\n}\n\n/* Search Input - input.vd-doc-search-input matches forms.css specificity so padding overrides base input[type=\"search\"] */\ninput.vd-doc-search-input {\n  width: 100%;\n  padding: var(--vd-input-padding-y) var(--vd-input-padding-x);\n  padding-left: var(--vd-doc-search-input-padding-left);\n  font-family: var(--vd-font-family-sans);\n  font-size: var(--vd-font-size-sm);\n  line-height: var(--vd-line-height-normal);\n  color: var(--vd-text-primary);\n  background-color: var(--vd-doc-search-input-bg);\n  border: 1px solid var(--vd-doc-search-input-border);\n  border-radius: var(--vd-doc-search-input-radius);\n  transition: border-color 0.15s ease, box-shadow 0.15s ease;\n  appearance: none;\n}\n\n.vd-doc-search-input::placeholder {\n  color: var(--vd-text-muted);\n  opacity: 1;\n}\n\n.vd-doc-search-input:focus {\n  outline: none;\n  border-color: var(--vd-doc-search-input-focus-border);\n  box-shadow: 0 0 0 3px var(--vd-color-primary-alpha-20, rgba(34, 184, 207, 0.2));\n}\n\n/* Clear the default search cancel button */\n.vd-doc-search-input::-webkit-search-cancel-button {\n  -webkit-appearance: none;\n  appearance: none;\n}\n\n/* Keyboard Shortcut Badge */\n.vd-doc-search-shortcut {\n  position: absolute;\n  right: var(--vd-doc-search-input-padding-x);\n  top: 50%;\n  transform: translateY(-50%);\n  display: inline-flex;\n  align-items: center;\n  gap: 0.125rem;\n  padding: 0.125rem 0.375rem;\n  font-family: var(--vd-font-family-sans);\n  font-size: var(--vd-font-size-xs);\n  font-weight: var(--vd-font-weight-medium);\n  color: var(--vd-doc-search-shortcut-color);\n  background-color: var(--vd-doc-search-shortcut-bg);\n  border: 1px solid var(--vd-doc-search-shortcut-border);\n  border-radius: 4px;\n  pointer-events: none;\n  user-select: none;\n}\n\n/* Hide shortcut when input has value */\n.vd-doc-search-input:not(:placeholder-shown) ~ .vd-doc-search-shortcut {\n  display: none;\n}\n\n/* ============================================\n   Search Results Dropdown\n   ============================================ */\n\n.vd-doc-search-results {\n  position: absolute;\n  top: 100%;\n  left: 0;\n  right: 0;\n  z-index: 1000;\n  display: none;\n  margin-top: 0.5rem;\n  background-color: var(--vd-doc-search-results-bg);\n  border: 1px solid var(--vd-doc-search-results-border);\n  border-radius: var(--vd-doc-search-results-radius);\n  box-shadow: var(--vd-doc-search-results-shadow);\n  max-height: var(--vd-doc-search-results-max-height);\n  overflow-y: auto;\n  overflow-x: hidden;\n  animation: doc-search-fade-in 0.15s ease;\n}\n\n.vd-doc-search-results.is-open {\n  display: block;\n}\n\n/* Results List */\n.vd-doc-search-results-list {\n  list-style: none;\n  margin: 0;\n  padding: 0.5rem 0;\n}\n\n/* ============================================\n   Search Result Item\n   ============================================ */\n\n.vd-doc-search-result {\n  display: flex;\n  align-items: flex-start;\n  gap: 0.75rem;\n  padding: var(--vd-doc-search-result-padding);\n  cursor: pointer;\n  transition: background-color 0.1s ease;\n  text-decoration: none;\n  color: inherit;\n}\n\n.vd-doc-search-result:hover {\n  background-color: var(--vd-doc-search-result-hover-bg);\n}\n\n.vd-doc-search-result.is-active,\n.vd-doc-search-result:focus {\n  background-color: var(--vd-doc-search-result-active-bg);\n  outline: none;\n}\n\n/* Result Icon */\n.vd-doc-search-result-icon {\n  flex-shrink: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 2rem;\n  height: 2rem;\n  background-color: var(--vd-color-primary-alpha-10, rgba(34, 184, 207, 0.1));\n  border-radius: 6px;\n  color: var(--vd-color-primary);\n  font-size: 1rem;\n}\n\n/* Result Content */\n.vd-doc-search-result-content {\n  flex: 1;\n  min-width: 0;\n}\n\n.vd-doc-search-result-title {\n  font-size: var(--vd-font-size-sm);\n  font-weight: var(--vd-font-weight-medium);\n  color: var(--vd-text-primary);\n  line-height: 1.4;\n  margin-bottom: 0.125rem;\n}\n\n.vd-doc-search-result-category {\n  font-size: var(--vd-font-size-xs);\n  color: var(--vd-text-muted);\n  margin-bottom: 0.25rem;\n}\n\n.vd-doc-search-result-excerpt {\n  font-size: var(--vd-font-size-xs);\n  color: var(--vd-text-secondary);\n  line-height: 1.4;\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n}\n\n/* Highlight matched text */\n.vd-doc-search-result mark,\n.vd-doc-search-highlight {\n  background-color: var(--vd-doc-search-highlight-bg);\n  color: var(--vd-doc-search-highlight-color);\n  padding: 0 0.125rem;\n  border-radius: 2px;\n}\n\n/* ============================================\n   Empty State\n   ============================================ */\n\n.vd-doc-search-empty {\n  padding: 2rem 1rem;\n  text-align: center;\n  color: var(--vd-text-muted);\n}\n\n.vd-doc-search-empty-icon {\n  font-size: 2.5rem;\n  margin-bottom: 0.75rem;\n  opacity: 0.5;\n}\n\n.vd-doc-search-empty-title {\n  font-size: var(--vd-font-size-sm);\n  font-weight: var(--vd-font-weight-medium);\n  color: var(--vd-text-primary);\n  margin-bottom: 0.25rem;\n}\n\n.vd-doc-search-empty-text {\n  font-size: var(--vd-font-size-xs);\n  color: var(--vd-text-muted);\n}\n\n/* ============================================\n   Loading State\n   ============================================ */\n\n.vd-doc-search-loading {\n  padding: 1.5rem 1rem;\n  text-align: center;\n  color: var(--vd-text-muted);\n}\n\n.vd-doc-search-loading-spinner {\n  display: inline-block;\n  width: 1.5rem;\n  height: 1.5rem;\n  border: 2px solid var(--vd-border-color);\n  border-top-color: var(--vd-color-primary);\n  border-radius: 50%;\n  animation: doc-search-spin 0.6s linear infinite;\n}\n\n@keyframes doc-search-spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n\n/* ============================================\n   Footer Hint\n   ============================================ */\n\n.vd-doc-search-footer {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 1rem;\n  padding: 0.5rem 1rem;\n  border-top: 1px solid var(--vd-border-color);\n  font-size: var(--vd-font-size-xs);\n  color: var(--vd-text-muted);\n}\n\n.vd-doc-search-footer kbd {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-width: 1.25rem;\n  height: 1.25rem;\n  padding: 0 0.25rem;\n  font-family: var(--vd-font-family-sans);\n  font-size: 0.625rem;\n  font-weight: var(--vd-font-weight-medium);\n  background-color: var(--vd-doc-search-shortcut-bg);\n  border: 1px solid var(--vd-doc-search-shortcut-border);\n  border-radius: 3px;\n}\n\n.vd-doc-search-footer-item {\n  display: flex;\n  align-items: center;\n  gap: 0.25rem;\n}\n\n/* ============================================\n   Category Icons\n   ============================================ */\n\n.vd-doc-search-result[data-category=\"getting-started\"] .vd-doc-search-result-icon {\n  background-color: var(--vd-color-success-alpha-10, rgba(64, 192, 87, 0.1));\n  color: var(--vd-color-success);\n}\n\n.vd-doc-search-result[data-category=\"core\"] .vd-doc-search-result-icon {\n  background-color: var(--vd-color-info-alpha-10, rgba(34, 139, 230, 0.1));\n  color: var(--vd-color-info);\n}\n\n.vd-doc-search-result[data-category=\"components\"] .vd-doc-search-result-icon {\n  background-color: var(--vd-color-primary-alpha-10, rgba(34, 184, 207, 0.1));\n  color: var(--vd-color-primary);\n}\n\n.vd-doc-search-result[data-category=\"interactive\"] .vd-doc-search-result-icon {\n  background-color: var(--vd-color-warning-alpha-10, rgba(250, 176, 5, 0.1));\n  color: var(--vd-color-warning);\n}\n\n.vd-doc-search-result[data-category=\"data-display\"] .vd-doc-search-result-icon {\n  background-color: var(--vd-color-secondary-alpha-10, rgba(32, 201, 151, 0.1));\n  color: var(--vd-color-secondary);\n}\n\n.vd-doc-search-result[data-category=\"feedback\"] .vd-doc-search-result-icon {\n  background-color: var(--vd-color-error-alpha-10, rgba(250, 82, 82, 0.1));\n  color: var(--vd-color-error);\n}\n\n/* ============================================\n   Sidebar context - sticky search below navbar\n   ============================================ */\n\n.doc-sidebar .vd-doc-search {\n  flex-shrink: 0;\n  position: sticky;\n  top: 70px;\n  z-index: 2;\n  background: var(--vd-bg-primary);\n  padding-top: 0.5rem;\n  padding-bottom: 0.5rem;\n}\n\n/* ============================================\n   Responsive Styles\n   ============================================ */\n\n@media (max-width: 991px) {\n  .vd-doc-search {\n    margin-bottom: 1rem;\n  }\n  \n  .vd-doc-search-results {\n    position: fixed;\n    left: 1rem;\n    right: 1rem;\n    top: auto;\n    max-height: 60vh;\n  }\n  \n  .vd-doc-search-shortcut {\n    display: none;\n  }\n  \n  input.vd-doc-search-input {\n    padding-right: var(--vd-doc-search-input-padding-x);\n    min-height: 44px;\n  }\n  \n  .vd-doc-search-result {\n    padding: 1rem;\n  }\n\n  .doc-sidebar .vd-doc-search {\n    flex-shrink: 0;\n    position: sticky;\n    top: 70px;\n    z-index: 2;\n    background: var(--vd-bg-primary);\n    padding-top: 0.5rem;\n    padding-bottom: 0.5rem;\n  }\n}\n\n@keyframes doc-search-fade-in {\n  from {\n    opacity: 0;\n    transform: translateY(-0.5rem);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n/* Reduced motion */\n@media (prefers-reduced-motion: reduce) {\n  .vd-doc-search-results {\n    animation: none;\n  }\n  \n  .vd-doc-search-loading-spinner {\n    animation-duration: 1.5s;\n  }\n}\n\n/**\n * Vanduo Framework - Draggable Component\n * CSS styles for draggable elements and drop zones\n */\n\n:root {\n  /* Draggable Colors */\n  --vd-draggable-bg: var(--vd-color-white);\n  --vd-draggable-border-color: var(--vd-border-color);\n  --vd-draggable-hover-bg: var(--vd-bg-secondary);\n  --vd-draggable-hover-border-color: var(--vd-color-primary);\n  --vd-draggable-dragging-bg: var(--vd-bg-secondary);\n  --vd-draggable-dragging-border-color: var(--vd-color-primary);\n  --vd-draggable-dragging-shadow: var(--vd-shadow-lg);\n  \n  /* Drop Zone Colors */\n  --vd-drop-zone-bg: var(--vd-color-primary-alpha-5);\n  --vd-drop-zone-border-color: var(--vd-color-primary-alpha-30);\n  --vd-drop-zone-hover-bg: var(--vd-color-primary-alpha-10);\n  --vd-drop-zone-hover-border-color: var(--vd-color-primary);\n  --vd-drop-zone-active-bg: var(--vd-color-primary-alpha-15);\n  --vd-drop-zone-active-border-color: var(--vd-color-primary);\n  \n  /* Spacing */\n  --vd-draggable-padding: 0.8125rem; /* 13px - fib */\n  --vd-draggable-margin: 0.5rem; /* 8px - fib */\n  --vd-drop-zone-padding: 1.3125rem; /* 21px - fib */\n  \n  /* Transitions */\n  --vd-draggable-transition: all var(--vd-transition-duration-base) var(--vd-transition-ease);\n}\n\n/* Dark Theme Overrides */\n[data-theme=\"dark\"] {\n  --vd-draggable-bg: var(--vd-bg-secondary);\n  --vd-draggable-hover-bg: var(--vd-bg-primary);\n  --vd-draggable-dragging-bg: var(--vd-bg-primary);\n  --vd-drop-zone-bg: var(--vd-color-primary-alpha-10);\n  --vd-drop-zone-border-color: var(--vd-color-primary-alpha-40);\n  --vd-drop-zone-hover-bg: var(--vd-color-primary-alpha-15);\n  --vd-drop-zone-active-bg: var(--vd-color-primary-alpha-20);\n}\n\n@media (prefers-color-scheme: dark) {\n  :root:not([data-theme]) {\n    --vd-draggable-bg: var(--vd-bg-secondary);\n    --vd-draggable-hover-bg: var(--vd-bg-primary);\n    --vd-draggable-dragging-bg: var(--vd-bg-primary);\n    --vd-drop-zone-bg: var(--vd-color-primary-alpha-10);\n    --vd-drop-zone-border-color: var(--vd-color-primary-alpha-40);\n    --vd-drop-zone-hover-bg: var(--vd-color-primary-alpha-15);\n    --vd-drop-zone-active-bg: var(--vd-color-primary-alpha-20);\n  }\n}\n\n/* Base Draggable Element */\n.vd-draggable {\n  position: relative;\n  display: inline-block;\n  padding: var(--vd-draggable-padding);\n  margin: var(--vd-draggable-margin);\n  background-color: var(--vd-draggable-bg);\n  background-clip: padding-box;\n  border: 1px solid var(--vd-draggable-border-color);\n  border-radius: var(--vd-btn-border-radius);\n  cursor: grab;\n  user-select: none;\n  transition: var(--vd-draggable-transition);\n  touch-action: none;\n}\n\n.vd-draggable:hover {\n  background-color: var(--vd-draggable-hover-bg);\n  border-color: var(--vd-draggable-hover-border-color);\n}\n\n.vd-draggable:active {\n  cursor: grabbing;\n}\n\n.vd-draggable[draggable=\"true\"] {\n  cursor: grab;\n}\n\n.vd-draggable[draggable=\"true\"]:active {\n  cursor: grabbing;\n}\n\n/* Dragging State */\n.vd-draggable.is-dragging {\n  opacity: 0.7;\n  transform: scale(1.02);\n  background-color: var(--vd-draggable-dragging-bg);\n  border-color: var(--vd-draggable-dragging-border-color);\n  box-shadow: var(--vd-draggable-dragging-shadow);\n  cursor: grabbing;\n  z-index: 1000;\n}\n\n/* Draggable Handle */\n.vd-draggable-handle {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 1.25rem; /* 20px */\n  height: 1.25rem; /* 20px */\n  margin-right: 0.5rem; /* 8px */\n  color: var(--vd-text-muted);\n  cursor: grab;\n  transition: var(--vd-draggable-transition);\n}\n\n.vd-draggable-handle:hover {\n  color: var(--vd-text-primary);\n}\n\n.vd-draggable:active .vd-draggable-handle {\n  cursor: grabbing;\n}\n\n/* Drop Zone */\n.vd-drop-zone {\n  position: relative;\n  min-height: 3rem; /* 48px */\n  padding: var(--vd-drop-zone-padding);\n  margin: var(--vd-draggable-margin);\n  background-color: var(--vd-drop-zone-bg);\n  background-clip: padding-box;\n  border: 2px dashed var(--vd-drop-zone-border-color);\n  border-radius: var(--vd-btn-border-radius);\n  transition: var(--vd-draggable-transition);\n}\n\n.vd-drop-zone:hover {\n  background-color: var(--vd-drop-zone-hover-bg);\n  border-color: var(--vd-drop-zone-hover-border-color);\n}\n\n.vd-drop-zone.is-drag-over {\n  background-color: var(--vd-drop-zone-active-bg);\n  border-color: var(--vd-drop-zone-active-border-color);\n  border-style: solid;\n  transform: scale(1.01);\n}\n\n/* Empty drop zone placeholder */\n.vd-drop-zone:empty::after {\n  content: 'Drag items here';\n  display: block;\n  text-align: center;\n  padding: 1rem;\n  color: var(--vd-text-muted);\n  font-style: italic;\n}\n\n.vd-drop-zone.is-drag-over::before {\n  content: 'Drop here';\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  font-weight: var(--vd-font-weight-medium);\n  color: var(--vd-color-primary);\n  pointer-events: none;\n}\n\n/* Draggable Container */\n.vd-draggable-container {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--vd-draggable-margin);\n  padding: var(--vd-draggable-padding);\n  background-color: var(--vd-bg-secondary);\n  background-clip: padding-box;\n  border: 1px solid var(--vd-border-color);\n  border-radius: var(--vd-btn-border-radius);\n}\n\n.vd-draggable-container.vd-draggable-container-vertical {\n  flex-direction: column;\n  align-items: stretch;\n}\n\n/* Draggable Item */\n.vd-draggable-item {\n  flex: 0 0 auto;\n  min-width: 8rem; /* 128px */\n  padding: var(--vd-draggable-padding);\n  background-color: var(--vd-draggable-bg);\n  background-clip: padding-box;\n  border: 1px solid var(--vd-draggable-border-color);\n  border-radius: var(--vd-btn-border-radius);\n  cursor: grab;\n  user-select: none;\n  touch-action: none;\n  transition: var(--vd-draggable-transition);\n}\n\n.vd-draggable-item:hover {\n  background-color: var(--vd-draggable-hover-bg);\n  border-color: var(--vd-draggable-hover-border-color);\n}\n\n.vd-draggable-item.is-dragging {\n  opacity: 0.7;\n  transform: scale(1.02);\n  background-color: var(--vd-draggable-dragging-bg);\n  border-color: var(--vd-draggable-dragging-border-color);\n  box-shadow: var(--vd-draggable-dragging-shadow);\n  cursor: grabbing;\n  z-index: 1000;\n}\n\n.vd-draggable-item:active {\n  cursor: grabbing;\n}\n\n/* Keyboard-activated grab state (via aria-grabbed) */\n.vd-draggable[aria-grabbed=\"true\"],\n.vd-draggable-item[aria-grabbed=\"true\"] {\n  outline: 2px solid var(--vd-color-primary);\n  outline-offset: 2px;\n  background-color: var(--vd-draggable-dragging-bg);\n  border-color: var(--vd-draggable-dragging-border-color);\n}\n\n/* Drag Feedback */\n.vd-drag-feedback {\n  position: fixed;\n  pointer-events: none;\n  z-index: 9999;\n  opacity: 0.9;\n  transform: none;\n  transition: opacity 0.2s ease;\n}\n\n.vd-drag-feedback.hidden {\n  opacity: 0;\n}\n\n/* Disabled State */\n.vd-draggable.is-disabled,\n.vd-draggable[disabled],\n.vd-draggable-item.is-disabled,\n.vd-draggable-item[disabled] {\n  opacity: 0.6;\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n/* Responsive Behavior */\n@media (max-width: 575.98px) {\n  .vd-draggable-container {\n    padding: 0.5rem; /* 8px */\n  }\n  \n  .vd-draggable-item {\n    min-width: 100%;\n  }\n  \n  .vd-draggable {\n    display: block;\n    margin: 0.5rem 0;\n  }\n  \n  .vd-drop-zone {\n    padding: 1rem; /* 16px */\n    min-height: 2.5rem; /* 40px */\n  }\n}\n\n/* Accessibility */\n.vd-draggable:focus-visible,\n.vd-draggable-item:focus-visible {\n  outline: 2px solid var(--vd-color-primary);\n  outline-offset: 2px;\n}\n\n/* Animation for dropping */\n@keyframes vd-drag-drop {\n  0% {\n    transform: scale(1);\n  }\n  50% {\n    transform: scale(1.05);\n  }\n  100% {\n    transform: scale(1);\n  }\n}\n\n.vd-draggable.is-dropped,\n.vd-draggable-item.is-dropped {\n  animation: vd-drag-drop 0.3s ease;\n}\n\n/* High Contrast / Forced Colors Mode */\n@media (forced-colors: active) {\n  .vd-draggable,\n  .vd-draggable-item {\n    border: 2px solid ButtonText;\n  }\n\n  .vd-draggable.is-dragging,\n  .vd-draggable-item.is-dragging {\n    border-color: Highlight;\n    outline: 2px solid Highlight;\n  }\n\n  .vd-drop-zone {\n    border: 2px dashed ButtonText;\n  }\n\n  .vd-drop-zone.is-drag-over {\n    border-color: Highlight;\n    border-style: solid;\n  }\n\n  .vd-draggable:focus-visible,\n  .vd-draggable-item:focus-visible {\n    outline: 2px solid Highlight;\n  }\n}\n\n/**\n * Vanduo Framework - Flow (Carousel/Slider)\n * Content carousel with slide/fade transitions, touch support\n * Primary: .vd-flow | Alias: .vd-carousel\n */\n\n:root {\n  /* Flow Dimensions */\n  --vd-flow-height: auto;\n  --vd-flow-min-height: 13rem;          /* 208px - fib */\n\n  /* Flow Spacing (Fibonacci) */\n  --vd-flow-padding: 0;\n  --vd-flow-gap: 0;\n  --vd-flow-indicator-size: 0.5rem;     /* 8px - fib */\n  --vd-flow-indicator-gap: 0.5rem;      /* 8px - fib */\n  --vd-flow-control-size: 2.5rem;       /* 40px */\n  --vd-flow-control-offset: 0.8125rem;  /* 13px - fib */\n\n  /* Flow Colors */\n  --vd-flow-bg: var(--vd-bg-primary, #fff);\n  --vd-flow-indicator-bg: rgba(255, 255, 255, 0.5);\n  --vd-flow-indicator-active-bg: #fff;\n  --vd-flow-control-bg: rgba(0, 0, 0, 0.3);\n  --vd-flow-control-hover-bg: rgba(0, 0, 0, 0.5);\n  --vd-flow-control-color: #fff;\n\n  /* Flow Transitions */\n  --vd-flow-transition-duration: 0.5s;\n  --vd-flow-transition-timing: cubic-bezier(0.4, 0, 0.2, 1);\n\n  /* Flow Border */\n  --vd-flow-border-radius: var(--vd-border-radius, 0.5rem);\n\n  /* Flow Z-index */\n  --vd-flow-z-controls: 10;\n  --vd-flow-z-indicators: 10;\n}\n\n/* Dark Theme */\n[data-theme=\"dark\"] {\n  --vd-flow-bg: var(--vd-bg-primary, #1a1a2e);\n  --vd-flow-control-bg: rgba(255, 255, 255, 0.2);\n  --vd-flow-control-hover-bg: rgba(255, 255, 255, 0.35);\n}\n\n@media (prefers-color-scheme: dark) {\n  :root:not([data-theme]) {\n    --vd-flow-bg: var(--vd-bg-primary, #1a1a2e);\n    --vd-flow-control-bg: rgba(255, 255, 255, 0.2);\n    --vd-flow-control-hover-bg: rgba(255, 255, 255, 0.35);\n  }\n}\n\n/* ========== Base ========== */\n\n.vd-flow,\n.vd-carousel {\n  position: relative;\n  overflow: hidden;\n  width: 100%;\n  min-height: var(--vd-flow-min-height);\n  height: var(--vd-flow-height);\n  background-color: var(--vd-flow-bg);\n  border-radius: var(--vd-flow-border-radius);\n}\n\n/* ========== Track ========== */\n\n.vd-flow-track {\n  display: flex;\n  width: 100%;\n  height: 100%;\n  transition: transform var(--vd-flow-transition-duration) var(--vd-flow-transition-timing);\n  will-change: transform;\n}\n\n.vd-flow.is-dragging .vd-flow-track {\n  transition: none;\n  cursor: grabbing;\n}\n\n/* ========== Slides ========== */\n\n.vd-flow-slide {\n  position: relative;\n  flex: 0 0 100%;\n  width: 100%;\n  min-height: var(--vd-flow-min-height);\n  overflow: hidden;\n}\n\n.vd-flow-slide img {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n\n/* Fade transition variant */\n.vd-flow-fade .vd-flow-track {\n  transition: none;\n}\n\n.vd-flow-fade .vd-flow-slide {\n  position: absolute;\n  top: 0;\n  left: 0;\n  opacity: 0;\n  transition: opacity var(--vd-flow-transition-duration) var(--vd-flow-transition-timing);\n  pointer-events: none;\n}\n\n.vd-flow-fade .vd-flow-slide.is-active {\n  opacity: 1;\n  pointer-events: auto;\n  position: relative;\n}\n\n/* ========== Controls ========== */\n\n.vd-flow-prev,\n.vd-flow-next {\n  position: absolute;\n  top: 50%;\n  transform: translateY(-50%);\n  z-index: var(--vd-flow-z-controls);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--vd-flow-control-size);\n  height: var(--vd-flow-control-size);\n  padding: 0;\n  border: none;\n  border-radius: 50%;\n  background: var(--vd-flow-control-bg);\n  color: var(--vd-flow-control-color);\n  font-size: 1.125rem;\n  cursor: pointer;\n  transition: background 0.2s ease, opacity 0.2s ease;\n  opacity: 0;\n}\n\n.vd-flow:hover .vd-flow-prev,\n.vd-flow:hover .vd-flow-next,\n.vd-flow:focus-within .vd-flow-prev,\n.vd-flow:focus-within .vd-flow-next {\n  opacity: 1;\n}\n\n.vd-flow-prev:hover,\n.vd-flow-next:hover {\n  background: var(--vd-flow-control-hover-bg);\n}\n\n.vd-flow-prev:focus-visible,\n.vd-flow-next:focus-visible {\n  outline: 2px solid var(--vd-flow-control-color);\n  outline-offset: 2px;\n}\n\n.vd-flow-prev {\n  left: var(--vd-flow-control-offset);\n}\n\n.vd-flow-next {\n  right: var(--vd-flow-control-offset);\n}\n\n/* ========== Indicators ========== */\n\n.vd-flow-indicators {\n  position: absolute;\n  bottom: 0.8125rem; /* 13px - fib */\n  left: 50%;\n  transform: translateX(-50%);\n  z-index: var(--vd-flow-z-indicators);\n  display: flex;\n  gap: var(--vd-flow-indicator-gap);\n  padding: 0.3125rem 0.5rem; /* 5px 8px - fib */\n  margin: 0;\n  list-style: none;\n  border-radius: 1rem;\n}\n\n.vd-flow-indicator {\n  width: var(--vd-flow-indicator-size);\n  height: var(--vd-flow-indicator-size);\n  padding: 0;\n  border: none;\n  border-radius: 50%;\n  background: var(--vd-flow-indicator-bg);\n  cursor: pointer;\n  transition: background 0.2s ease, transform 0.2s ease;\n}\n\n.vd-flow-indicator:hover {\n  background: rgba(255, 255, 255, 0.75);\n}\n\n.vd-flow-indicator.is-active {\n  background: var(--vd-flow-indicator-active-bg);\n  transform: scale(1.3);\n}\n\n.vd-flow-indicator:focus-visible {\n  outline: 2px solid var(--vd-flow-indicator-active-bg);\n  outline-offset: 2px;\n}\n\n/* ========== Slide Content Overlay ========== */\n\n.vd-flow-caption {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  padding: 1.3125rem 1.3125rem 2.625rem; /* 21px 21px 42px - fib */\n  background: linear-gradient(transparent, rgba(0, 0, 0, 0.6));\n  color: #fff;\n}\n\n.vd-flow-caption h3,\n.vd-flow-caption .vd-flow-title {\n  margin: 0 0 0.3125rem; /* 5px - fib */\n  font-size: 1.25rem;\n  font-weight: 600;\n}\n\n.vd-flow-caption p,\n.vd-flow-caption .vd-flow-description {\n  margin: 0;\n  font-size: 0.875rem;\n  opacity: 0.9;\n}\n\n/* ========== Size Variants ========== */\n\n.vd-flow-compact {\n  --vd-flow-min-height: 8rem;\n  --vd-flow-control-size: 2rem;\n}\n\n.vd-flow-lg {\n  --vd-flow-min-height: 21rem; /* 336px - fib×16 */\n  --vd-flow-control-size: 3rem;\n}\n\n.vd-flow-fullscreen {\n  --vd-flow-min-height: 100vh;\n  --vd-flow-border-radius: 0;\n}\n\n/* ========== Responsive ========== */\n\n@media (max-width: 768px) {\n  .vd-flow-prev,\n  .vd-flow-next {\n    opacity: 1;\n    --vd-flow-control-size: 2rem;\n  }\n\n  .vd-flow-caption {\n    padding: 0.8125rem 0.8125rem 2rem;\n  }\n}\n\n/**\n * Vanduo Framework - Bubble (Popover)\n * Click-triggered rich content popover\n * Primary: .vd-bubble | Alias: .vd-popover\n */\n\n:root {\n  /* Bubble Colors */\n  --vd-bubble-bg: var(--vd-card-bg, #fff);\n  --vd-bubble-text: var(--vd-text-primary, #212529);\n  --vd-bubble-border-color: var(--vd-border-color, #dee2e6);\n  --vd-bubble-shadow: 0 0.5rem 1.3125rem rgba(0, 0, 0, 0.12); /* 8px 21px - fib */\n\n  /* Bubble Spacing (Fibonacci) */\n  --vd-bubble-padding: 0.8125rem; /* 13px - fib */\n  --vd-bubble-header-padding: 0.5rem 0.8125rem; /* 8px 13px */\n  --vd-bubble-arrow-size: 8px; /* fib */\n\n  /* Bubble Sizing */\n  --vd-bubble-max-width: 21rem; /* 336px - fib×16 */\n  --vd-bubble-min-width: 8rem;\n  --vd-bubble-border-radius: var(--vd-border-radius, 0.5rem);\n\n  /* Bubble Z-index */\n  --vd-bubble-z-index: 1060;\n\n  /* Bubble Font */\n  --vd-bubble-font-size: var(--vd-font-size-sm, 0.875rem);\n}\n\n/* Dark Theme */\n[data-theme=\"dark\"] {\n  --vd-bubble-bg: var(--vd-card-bg, #2d2d44);\n  --vd-bubble-border-color: var(--vd-border-color, #3d3d5c);\n  --vd-bubble-shadow: 0 0.5rem 1.3125rem rgba(0, 0, 0, 0.3);\n}\n\n@media (prefers-color-scheme: dark) {\n  :root:not([data-theme]) {\n    --vd-bubble-bg: var(--vd-card-bg, #2d2d44);\n    --vd-bubble-border-color: var(--vd-border-color, #3d3d5c);\n    --vd-bubble-shadow: 0 0.5rem 1.3125rem rgba(0, 0, 0, 0.3);\n  }\n}\n\n/* ========== Base ========== */\n\n.vd-bubble-content,\n.vd-popover-content {\n  position: absolute;\n  z-index: var(--vd-bubble-z-index);\n  max-width: var(--vd-bubble-max-width);\n  min-width: var(--vd-bubble-min-width);\n  background: var(--vd-bubble-bg);\n  color: var(--vd-bubble-text);\n  border: 1px solid var(--vd-bubble-border-color);\n  border-radius: var(--vd-bubble-border-radius);\n  box-shadow: var(--vd-bubble-shadow);\n  font-size: var(--vd-bubble-font-size);\n  opacity: 0;\n  visibility: hidden;\n  transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;\n  transform: scale(0.95);\n  pointer-events: none;\n}\n\n.vd-bubble-content.is-visible,\n.vd-popover-content.is-visible {\n  opacity: 1;\n  visibility: visible;\n  transform: scale(1);\n  pointer-events: auto;\n}\n\n/* ========== Header ========== */\n\n.vd-bubble-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: var(--vd-bubble-header-padding);\n  border-bottom: 1px solid var(--vd-bubble-border-color);\n  font-weight: 600;\n}\n\n/* ========== Body ========== */\n\n.vd-bubble-body {\n  padding: var(--vd-bubble-padding);\n}\n\n/* ========== Close Button ========== */\n\n.vd-bubble-close {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 1.5rem;\n  height: 1.5rem;\n  padding: 0;\n  margin-left: 0.5rem;\n  border: none;\n  border-radius: 50%;\n  background: transparent;\n  color: var(--vd-bubble-text);\n  font-size: 1.125rem;\n  line-height: 1;\n  cursor: pointer;\n  opacity: 0.5;\n  transition: opacity 0.15s ease;\n}\n\n.vd-bubble-close:hover { opacity: 1; }\n\n/* ========== Arrow ========== */\n\n.vd-bubble-content::before,\n.vd-popover-content::before {\n  content: '';\n  position: absolute;\n  width: 0;\n  height: 0;\n  border: var(--vd-bubble-arrow-size) solid transparent;\n}\n\n/* Arrow: top placement (popover below trigger) */\n.vd-bubble-content[data-placement=\"bottom\"]::before {\n  bottom: 100%;\n  left: 50%;\n  transform: translateX(-50%);\n  border-bottom-color: var(--vd-bubble-border-color);\n}\n\n.vd-bubble-content[data-placement=\"top\"]::before {\n  top: 100%;\n  left: 50%;\n  transform: translateX(-50%);\n  border-top-color: var(--vd-bubble-border-color);\n}\n\n.vd-bubble-content[data-placement=\"left\"]::before {\n  left: 100%;\n  top: 50%;\n  transform: translateY(-50%);\n  border-left-color: var(--vd-bubble-border-color);\n}\n\n.vd-bubble-content[data-placement=\"right\"]::before {\n  right: 100%;\n  top: 50%;\n  transform: translateY(-50%);\n  border-right-color: var(--vd-bubble-border-color);\n}\n\n/* ========== Size Variants ========== */\n\n.vd-bubble-sm .vd-bubble-body {\n  --vd-bubble-padding: 0.5rem; /* 8px - fib */\n  --vd-bubble-font-size: var(--vd-font-size-xs, 0.75rem);\n}\n\n.vd-bubble-lg .vd-bubble-body {\n  --vd-bubble-padding: 1.3125rem; /* 21px - fib */\n  --vd-bubble-max-width: 34rem;\n}\n\n/**\n * Vanduo Framework - Popover Component\n * Multi-trigger (click | hover | focus) popover with auto-placement flip.\n * Sibling to .vd-bubble (which is click-only rich HTML); this is the general\n * primitive documented in docs/sections/components/popover.html.\n */\n\n:root {\n  --vd-popover-bg: var(--vd-card-bg, #fff);\n  --vd-popover-text: var(--vd-text-primary, #212529);\n  --vd-popover-border-color: var(--vd-border-color, #dee2e6);\n  --vd-popover-shadow: 0 0.5rem 1.3125rem rgba(0, 0, 0, 0.12);\n  --vd-popover-padding: 0.8125rem;\n  --vd-popover-radius: var(--vd-border-radius, 0.5rem);\n  --vd-popover-max-width: 21rem;\n  --vd-popover-min-width: 8rem;\n  --vd-popover-z-index: 1060;\n  --vd-popover-arrow-size: 8px;\n  --vd-popover-font-size: var(--vd-font-size-sm, 0.875rem);\n}\n\n[data-theme=\"dark\"] {\n  --vd-popover-bg: var(--vd-card-bg, #2d2d44);\n  --vd-popover-border-color: var(--vd-border-color, #3d3d5c);\n  --vd-popover-shadow: 0 0.5rem 1.3125rem rgba(0, 0, 0, 0.3);\n}\n\n@media (prefers-color-scheme: dark) {\n  :root:not([data-theme]) {\n    --vd-popover-bg: var(--vd-card-bg, #2d2d44);\n    --vd-popover-border-color: var(--vd-border-color, #3d3d5c);\n    --vd-popover-shadow: 0 0.5rem 1.3125rem rgba(0, 0, 0, 0.3);\n  }\n}\n\n.vd-popover-panel {\n  position: absolute;\n  z-index: var(--vd-popover-z-index);\n  min-width: var(--vd-popover-min-width);\n  max-width: var(--vd-popover-max-width);\n  padding: var(--vd-popover-padding);\n  background: var(--vd-popover-bg);\n  color: var(--vd-popover-text);\n  border: 1px solid var(--vd-popover-border-color);\n  border-radius: var(--vd-popover-radius);\n  box-shadow: var(--vd-popover-shadow);\n  font-size: var(--vd-popover-font-size);\n  animation: vd-popover-enter 0.18s ease-out;\n}\n\n.vd-popover-panel[hidden] {\n  display: none !important;\n}\n\n.vd-popover-panel::before {\n  content: '';\n  position: absolute;\n  width: 0;\n  height: 0;\n  border: var(--vd-popover-arrow-size) solid transparent;\n}\n\n.vd-popover-panel[data-placement=\"bottom\"]::before {\n  bottom: 100%;\n  left: 50%;\n  transform: translateX(-50%);\n  border-bottom-color: var(--vd-popover-border-color);\n}\n\n.vd-popover-panel[data-placement=\"top\"]::before {\n  top: 100%;\n  left: 50%;\n  transform: translateX(-50%);\n  border-top-color: var(--vd-popover-border-color);\n}\n\n.vd-popover-panel[data-placement=\"left\"]::before {\n  left: 100%;\n  top: 50%;\n  transform: translateY(-50%);\n  border-left-color: var(--vd-popover-border-color);\n}\n\n.vd-popover-panel[data-placement=\"right\"]::before {\n  right: 100%;\n  top: 50%;\n  transform: translateY(-50%);\n  border-right-color: var(--vd-popover-border-color);\n}\n\n.vd-popover-sm { --vd-popover-padding: 0.5rem; --vd-popover-font-size: var(--vd-font-size-xs, 0.75rem); }\n.vd-popover-lg { --vd-popover-padding: 1.3125rem; --vd-popover-max-width: 34rem; }\n\n@keyframes vd-popover-enter {\n  from { opacity: 0; transform: scale(0.96); }\n  to   { opacity: 1; transform: scale(1); }\n}\n/**\n * Vanduo Framework - Waypoint (Scrollspy)\n * Scroll-position-aware navigation highlighting\n * Primary: .vd-waypoint | Alias: .vd-scrollspy\n */\n\n:root {\n  /* Waypoint active indicator */\n  --vd-waypoint-active-color: var(--vd-color-primary, #0d6efd);\n  --vd-waypoint-active-bg: transparent;\n  --vd-waypoint-active-border-width: 2px;\n  --vd-waypoint-transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;\n}\n\n[data-theme=\"dark\"] {\n  --vd-waypoint-active-color: var(--vd-color-primary-light, #6ea8fe);\n}\n\n@media (prefers-color-scheme: dark) {\n  :root:not([data-theme]) {\n    --vd-waypoint-active-color: var(--vd-color-primary-light, #6ea8fe);\n  }\n}\n\n/* ========== Nav Link Active State ========== */\n\n[data-vd-waypoint-nav] a.is-active,\n[data-vd-scrollspy-nav] a.is-active,\n.vd-waypoint-nav a.is-active {\n  color: var(--vd-waypoint-active-color);\n  font-weight: 600;\n  transition: var(--vd-waypoint-transition);\n}\n\n/* Sidebar variant: left border indicator */\n.vd-sidenav [data-vd-waypoint-nav] a.is-active,\n.vd-waypoint-nav.vd-waypoint-border a.is-active {\n  border-left: var(--vd-waypoint-active-border-width) solid var(--vd-waypoint-active-color);\n  padding-left: calc(0.8125rem - var(--vd-waypoint-active-border-width)); /* 13px - border */\n}\n\n/* Pill variant */\n.vd-waypoint-nav.vd-waypoint-pill a.is-active {\n  background-color: var(--vd-waypoint-active-color);\n  color: #fff;\n  border-radius: 1rem;\n  padding: 0.25rem 0.8125rem; /* 4px 13px */\n}\n\n/* Underline variant (for horizontal navs) */\n.vd-waypoint-nav.vd-waypoint-underline a.is-active {\n  border-bottom: var(--vd-waypoint-active-border-width) solid var(--vd-waypoint-active-color);\n}\n\n/* ========== Smooth Scroll Target ========== */\n\n[data-vd-waypoint-section] {\n  scroll-margin-top: 5rem; /* offset for fixed headers */\n}\n\n/**\n * Vanduo Framework - Ripple (Waves Effect)\n * Click-position-based expanding circle animation\n */\n\n:root {\n  --vd-ripple-color: rgba(255, 255, 255, 0.35);\n  --vd-ripple-duration: 0.6s;\n  --vd-ripple-timing: cubic-bezier(0, 0, 0.2, 1);\n}\n\n[data-theme=\"dark\"] {\n  --vd-ripple-color: rgba(255, 255, 255, 0.2);\n}\n\n@media (prefers-color-scheme: dark) {\n  :root:not([data-theme]) {\n    --vd-ripple-color: rgba(255, 255, 255, 0.2);\n  }\n}\n\n/* ========== Base ========== */\n\n.vd-ripple,\n[data-vd-ripple] {\n  position: relative;\n  overflow: hidden;\n  -webkit-tap-highlight-color: transparent;\n}\n\n/* The animated circle */\n.vd-ripple-wave {\n  position: absolute;\n  border-radius: 50%;\n  background: var(--vd-ripple-color);\n  transform: scale(0);\n  animation: vd-ripple-expand var(--vd-ripple-duration) var(--vd-ripple-timing) forwards;\n  pointer-events: none;\n}\n\n@keyframes vd-ripple-expand {\n  to {\n    transform: scale(4);\n    opacity: 0;\n  }\n}\n\n/* ========== Color Variants ========== */\n\n.vd-ripple-dark,\n[data-vd-ripple=\"dark\"] {\n  --vd-ripple-color: rgba(0, 0, 0, 0.15);\n}\n\n.vd-ripple-primary,\n[data-vd-ripple=\"primary\"] {\n  --vd-ripple-color: rgba(13, 110, 253, 0.3);\n}\n\n.vd-ripple-light,\n[data-vd-ripple=\"light\"] {\n  --vd-ripple-color: rgba(255, 255, 255, 0.5);\n}\n\n/**\n * Vanduo Framework - FAB (Floating Action Button)\n * Elevated circular action button with optional fixed positioning and speed-dial menu\n */\n\n:root {\n  /* FAB Dimensions (Fibonacci) */\n  --vd-fab-size: 3.5rem;           /* 56px */\n  --vd-fab-size-sm: 2.5rem;        /* 40px */\n  --vd-fab-size-lg: 4.5rem;        /* 72px */\n  --vd-fab-icon-size: 1.5rem;\n\n  /* FAB Colors */\n  --vd-fab-bg: var(--vd-color-primary, #0d6efd);\n  --vd-fab-color: #fff;\n  --vd-fab-hover-bg: var(--vd-color-primary-dark, #0b5ed7);\n  --vd-fab-shadow: 0 3px 8px rgba(0, 0, 0, 0.25), 0 1px 3px rgba(0, 0, 0, 0.15);\n  --vd-fab-hover-shadow: 0 5px 13px rgba(0, 0, 0, 0.3), 0 2px 5px rgba(0, 0, 0, 0.2);\n\n  /* FAB Position */\n  --vd-fab-offset: 1.3125rem;      /* 21px - fib */\n  --vd-fab-z-index: 1030;\n\n  /* FAB Menu */\n  --vd-fab-menu-gap: 0.8125rem;    /* 13px - fib */\n}\n\n[data-theme=\"dark\"] {\n  --vd-fab-shadow: 0 3px 8px rgba(0, 0, 0, 0.5), 0 1px 3px rgba(0, 0, 0, 0.3);\n  --vd-fab-hover-shadow: 0 5px 13px rgba(0, 0, 0, 0.6), 0 2px 5px rgba(0, 0, 0, 0.35);\n}\n\n@media (prefers-color-scheme: dark) {\n  :root:not([data-theme]) {\n    --vd-fab-shadow: 0 3px 8px rgba(0, 0, 0, 0.5), 0 1px 3px rgba(0, 0, 0, 0.3);\n    --vd-fab-hover-shadow: 0 5px 13px rgba(0, 0, 0, 0.6), 0 2px 5px rgba(0, 0, 0, 0.35);\n  }\n}\n\n/* ========== Base ========== */\n\n.vd-fab {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--vd-fab-size);\n  height: var(--vd-fab-size);\n  padding: 0;\n  border: none;\n  border-radius: 50%;\n  background: var(--vd-fab-bg);\n  color: var(--vd-fab-color);\n  font-size: var(--vd-fab-icon-size);\n  box-shadow: var(--vd-fab-shadow);\n  cursor: pointer;\n  transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;\n}\n\n.vd-fab-glass {\n  background: var(--vd-glass-bg-light);\n  color: var(--vd-text-primary);\n  border: 1px solid var(--vd-glass-border-light);\n  box-shadow: var(--vd-glass-shadow);\n  backdrop-filter: blur(var(--vd-glass-blur)) saturate(var(--vd-glass-saturate));\n  -webkit-backdrop-filter: blur(var(--vd-glass-blur)) saturate(var(--vd-glass-saturate));\n}\n\n.vd-fab:hover {\n  background: var(--vd-fab-hover-bg);\n  box-shadow: var(--vd-fab-hover-shadow);\n  transform: scale(1.05);\n}\n\n.vd-fab-glass:hover {\n  background: var(--vd-glass-bg-light);\n  box-shadow: var(--vd-glass-float-shadow, var(--vd-glass-shadow));\n}\n\n.vd-fab:active {\n  transform: scale(0.95);\n}\n\n.vd-fab:focus-visible {\n  outline: 2px solid var(--vd-fab-bg);\n  outline-offset: 3px;\n}\n\n/* ========== Sizes ========== */\n\n.vd-fab-sm {\n  width: var(--vd-fab-size-sm);\n  height: var(--vd-fab-size-sm);\n  font-size: 1.125rem;\n}\n\n.vd-fab-lg {\n  width: var(--vd-fab-size-lg);\n  height: var(--vd-fab-size-lg);\n  font-size: 2rem;\n}\n\n/* ========== Extended (with label) ========== */\n\n.vd-fab-extended {\n  border-radius: 1.75rem;\n  width: auto;\n  padding: 0 1.3125rem; /* 21px - fib */\n  gap: 0.5rem;\n}\n\n/* ========== Fixed Positioning ========== */\n\n.vd-fab-fixed {\n  position: fixed;\n  bottom: var(--vd-fab-offset);\n  right: var(--vd-fab-offset);\n  z-index: var(--vd-fab-z-index);\n}\n\n/* ========== Position Variants (all include position: fixed) ========== */\n\n.vd-fab-bottom-left {\n  position: fixed;\n  z-index: var(--vd-fab-z-index);\n  bottom: var(--vd-fab-offset);\n  right: auto;\n  left: var(--vd-fab-offset);\n}\n\n.vd-fab-top-right {\n  position: fixed;\n  z-index: var(--vd-fab-z-index);\n  bottom: auto;\n  right: var(--vd-fab-offset);\n  top: var(--vd-fab-offset);\n}\n\n.vd-fab-top-left {\n  position: fixed;\n  z-index: var(--vd-fab-z-index);\n  bottom: auto;\n  right: auto;\n  top: var(--vd-fab-offset);\n  left: var(--vd-fab-offset);\n}\n\n.vd-fab-center {\n  position: fixed;\n  z-index: var(--vd-fab-z-index);\n  bottom: var(--vd-fab-offset);\n  right: 50%;\n  transform: translateX(50%);\n}\n\n.vd-fab-center:hover {\n  transform: translateX(50%) scale(1.05);\n}\n\n/* ========== Color Variants ========== */\n\n.vd-fab-secondary {\n  --vd-fab-bg: var(--vd-color-gray-600, #6c757d);\n  --vd-fab-hover-bg: var(--vd-color-gray-700, #5c636a);\n}\n\n.vd-fab-success {\n  --vd-fab-bg: var(--vd-color-success, #198754);\n  --vd-fab-hover-bg: #157347;\n}\n\n.vd-fab-danger {\n  --vd-fab-bg: var(--vd-color-danger, #dc3545);\n  --vd-fab-hover-bg: #bb2d3b;\n}\n\n/* ========== Speed Dial Menu ========== */\n\n.vd-fab-menu {\n  position: relative;\n  display: inline-flex;\n  flex-direction: column-reverse;\n  align-items: center;\n  gap: var(--vd-fab-menu-gap);\n}\n\n.vd-fab-menu .vd-fab-actions {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: var(--vd-fab-menu-gap);\n  opacity: 0;\n  visibility: hidden;\n  transform: translateY(0.5rem);\n  transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;\n}\n\n.vd-fab-menu.is-open .vd-fab-actions {\n  opacity: 1;\n  visibility: visible;\n  transform: translateY(0);\n}\n\n.vd-fab-menu.vd-fab-fixed {\n  position: fixed;\n  bottom: var(--vd-fab-offset);\n  right: var(--vd-fab-offset);\n  z-index: var(--vd-fab-z-index);\n}\n\n.vd-fab-menu .vd-fab-action {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--vd-fab-size-sm);\n  height: var(--vd-fab-size-sm);\n  border: none;\n  border-radius: 50%;\n  background: var(--vd-fab-bg);\n  color: var(--vd-fab-color);\n  font-size: 1rem;\n  box-shadow: var(--vd-fab-shadow);\n  cursor: pointer;\n  transition: background 0.15s ease, transform 0.15s ease;\n}\n\n.vd-fab-menu .vd-fab-action:hover {\n  transform: scale(1.1);\n  background: var(--vd-fab-hover-bg);\n}\n\n/* Staggered entrance for action buttons */\n.vd-fab-menu.is-open .vd-fab-actions .vd-fab:nth-child(1),\n.vd-fab-menu.is-open .vd-fab-action:nth-child(1) { transition-delay: 0s; }\n.vd-fab-menu.is-open .vd-fab-actions .vd-fab:nth-child(2),\n.vd-fab-menu.is-open .vd-fab-action:nth-child(2) { transition-delay: 0.05s; }\n.vd-fab-menu.is-open .vd-fab-actions .vd-fab:nth-child(3),\n.vd-fab-menu.is-open .vd-fab-action:nth-child(3) { transition-delay: 0.1s; }\n.vd-fab-menu.is-open .vd-fab-actions .vd-fab:nth-child(4),\n.vd-fab-menu.is-open .vd-fab-action:nth-child(4) { transition-delay: 0.15s; }\n\n/**\n * Vanduo Framework - Affix (Sticky)\n * Scroll-aware sticky positioning with is-stuck state\n * Primary: .vd-affix | Alias: .vd-sticky\n */\n\n:root {\n  --vd-affix-top-offset: 0;\n  --vd-affix-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n  --vd-affix-transition: box-shadow 0.2s ease, background-color 0.2s ease;\n  --vd-affix-z-index: 1020;\n}\n\n[data-theme=\"dark\"] {\n  --vd-affix-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);\n}\n\n@media (prefers-color-scheme: dark) {\n  :root:not([data-theme]) {\n    --vd-affix-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);\n  }\n}\n\n/* ========== Base ========== */\n\n.vd-affix,\n.vd-sticky,\n[data-vd-affix] {\n  position: sticky;\n  top: var(--vd-affix-top-offset);\n  transition: var(--vd-affix-transition);\n  z-index: calc(var(--vd-affix-z-index) - 1);\n}\n\n/* ========== Stuck State ========== */\n\n.vd-affix.is-stuck,\n.vd-sticky.is-stuck,\n[data-vd-affix].is-stuck {\n  z-index: var(--vd-affix-z-index);\n  box-shadow: var(--vd-affix-shadow);\n}\n\n/* ========== Variants ========== */\n\n.vd-affix-no-shadow.is-stuck {\n  box-shadow: none;\n}\n\n.vd-affix-bordered.is-stuck {\n  box-shadow: none;\n  border-bottom: 1px solid var(--vd-border-color, #dee2e6);\n}\n\n/**\n * Vanduo Framework - Suggest (Autocomplete)\n * Dropdown suggestion list for text inputs\n * Primary: .vd-suggest | Alias: .vd-autocomplete\n */\n\n:root {\n  /* Suggest Colors */\n  --vd-suggest-bg: var(--vd-card-bg, #fff);\n  --vd-suggest-border-color: var(--vd-border-color, #dee2e6);\n  --vd-suggest-shadow: 0 0.25rem 0.8125rem rgba(0, 0, 0, 0.1); /* 4px 13px - fib */\n  --vd-suggest-item-hover-bg: var(--vd-bg-secondary, #f8f9fa);\n  --vd-suggest-item-active-bg: var(--vd-color-primary, #0d6efd);\n  --vd-suggest-item-active-color: #fff;\n  --vd-suggest-highlight-color: var(--vd-color-primary, #0d6efd);\n\n  /* Suggest Spacing (Fibonacci) */\n  --vd-suggest-padding: 0.3125rem 0; /* 5px - fib */\n  --vd-suggest-item-padding: 0.5rem 0.8125rem; /* 8px 13px - fib */\n  --vd-suggest-max-height: 15rem;\n  --vd-suggest-border-radius: var(--vd-border-radius, 0.5rem);\n\n  /* Suggest Z-index */\n  --vd-suggest-z-index: 1050;\n}\n\n[data-theme=\"dark\"] {\n  --vd-suggest-bg: var(--vd-card-bg, #2d2d44);\n  --vd-suggest-border-color: var(--vd-border-color, #3d3d5c);\n  --vd-suggest-item-hover-bg: var(--vd-bg-primary, #1a1a2e);\n  --vd-suggest-shadow: 0 0.25rem 0.8125rem rgba(0, 0, 0, 0.3);\n}\n\n@media (prefers-color-scheme: dark) {\n  :root:not([data-theme]) {\n    --vd-suggest-bg: var(--vd-card-bg, #2d2d44);\n    --vd-suggest-border-color: var(--vd-border-color, #3d3d5c);\n    --vd-suggest-item-hover-bg: var(--vd-bg-primary, #1a1a2e);\n    --vd-suggest-shadow: 0 0.25rem 0.8125rem rgba(0, 0, 0, 0.3);\n  }\n}\n\n/* ========== Wrapper ========== */\n\n.vd-suggest-wrapper,\n.vd-autocomplete-wrapper {\n  position: relative;\n  display: inline-block;\n  width: 100%;\n}\n\n/* ========== Dropdown List ========== */\n\n.vd-suggest-list {\n  position: absolute;\n  top: 100%;\n  left: 0;\n  right: 0;\n  z-index: var(--vd-suggest-z-index);\n  margin-top: 2px;\n  padding: var(--vd-suggest-padding);\n  max-height: var(--vd-suggest-max-height);\n  overflow-y: auto;\n  background: var(--vd-suggest-bg);\n  border: 1px solid var(--vd-suggest-border-color);\n  border-radius: var(--vd-suggest-border-radius);\n  box-shadow: var(--vd-suggest-shadow);\n  list-style: none;\n  display: none;\n}\n\n.vd-suggest-list.is-open {\n  display: block;\n}\n\n/* ========== Items ========== */\n\n.vd-suggest-item {\n  padding: var(--vd-suggest-item-padding);\n  cursor: pointer;\n  transition: background 0.15s ease;\n  font-size: var(--vd-font-size-base, 1rem);\n}\n\n.vd-suggest-item:hover,\n.vd-suggest-item.is-highlighted {\n  background: var(--vd-suggest-item-hover-bg);\n}\n\n.vd-suggest-item.is-active {\n  background: var(--vd-suggest-item-active-bg);\n  color: var(--vd-suggest-item-active-color);\n}\n\n/* Match highlight */\n.vd-suggest-match {\n  font-weight: 600;\n  color: var(--vd-suggest-highlight-color);\n}\n\n.vd-suggest-item.is-active .vd-suggest-match {\n  color: inherit;\n}\n\n/* ========== No Results ========== */\n\n.vd-suggest-empty {\n  padding: var(--vd-suggest-item-padding);\n  color: var(--vd-text-muted, #6c757d);\n  font-style: italic;\n}\n\n/* ========== Loading ========== */\n\n.vd-suggest-loading {\n  padding: var(--vd-suggest-item-padding);\n  text-align: center;\n  color: var(--vd-text-muted, #6c757d);\n}\n\n/**\n * Vanduo Framework - Datepicker\n * Calendar popup for date selection\n */\n\n:root {\n  /* Datepicker Colors */\n  --vd-dp-bg: var(--vd-card-bg, #fff);\n  --vd-dp-border-color: var(--vd-border-color, #dee2e6);\n  --vd-dp-shadow: 0 0.25rem 0.8125rem rgba(0, 0, 0, 0.12); /* 4px 13px fib */\n  --vd-dp-header-bg: var(--vd-color-primary, #0d6efd);\n  --vd-dp-header-color: #fff;\n  --vd-dp-day-hover-bg: var(--vd-bg-secondary, #f8f9fa);\n  --vd-dp-day-selected-bg: var(--vd-color-primary, #0d6efd);\n  --vd-dp-day-selected-color: #fff;\n  --vd-dp-day-today-color: var(--vd-color-primary, #0d6efd);\n  --vd-dp-day-outside-color: var(--vd-text-muted, #6c757d);\n  --vd-dp-day-disabled-color: var(--vd-text-disabled, #adb5bd);\n\n  /* Datepicker Spacing (Fibonacci) */\n  --vd-dp-padding: 0.5rem;        /* 8px - fib */\n  --vd-dp-cell-size: 2.25rem;     /* 36px */\n  --vd-dp-gap: 2px;\n  --vd-dp-border-radius: var(--vd-border-radius, 0.5rem);\n\n  /* Datepicker Z-index */\n  --vd-dp-z-index: 1055;\n}\n\n[data-theme=\"dark\"] {\n  --vd-dp-bg: var(--vd-card-bg, #2d2d44);\n  --vd-dp-border-color: var(--vd-border-color, #3d3d5c);\n  --vd-dp-day-hover-bg: var(--vd-bg-primary, #1a1a2e);\n  --vd-dp-shadow: 0 0.25rem 0.8125rem rgba(0, 0, 0, 0.3);\n}\n\n@media (prefers-color-scheme: dark) {\n  :root:not([data-theme]) {\n    --vd-dp-bg: var(--vd-card-bg, #2d2d44);\n    --vd-dp-border-color: var(--vd-border-color, #3d3d5c);\n    --vd-dp-day-hover-bg: var(--vd-bg-primary, #1a1a2e);\n    --vd-dp-shadow: 0 0.25rem 0.8125rem rgba(0, 0, 0, 0.3);\n  }\n}\n\n/* ========== Calendar Popup ========== */\n\n.vd-datepicker-popup {\n  position: fixed;\n  top: 0;\n  left: 0;\n  z-index: var(--vd-dp-z-index);\n  background: var(--vd-dp-bg);\n  border: 1px solid var(--vd-dp-border-color);\n  border-radius: var(--vd-dp-border-radius);\n  box-shadow: var(--vd-dp-shadow);\n  padding: var(--vd-dp-padding);\n  display: none;\n  min-width: 17rem;\n}\n\n.vd-datepicker-popup.is-open {\n  display: block;\n}\n\n/* ========== Header ========== */\n\n.vd-datepicker-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 0.3125rem; /* 5px - fib */\n  margin-bottom: 0.3125rem;\n}\n\n.vd-datepicker-title {\n  font-weight: 600;\n  font-size: var(--vd-font-size-base, 1rem);\n  cursor: pointer;\n}\n\n.vd-datepicker-title:hover {\n  color: var(--vd-dp-day-today-color);\n}\n\n.vd-datepicker-prev,\n.vd-datepicker-next {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 1.75rem;\n  height: 1.75rem;\n  padding: 0;\n  border: none;\n  border-radius: 50%;\n  background: transparent;\n  cursor: pointer;\n  font-size: 1rem;\n  color: var(--vd-text-primary, #212529);\n  transition: background 0.15s ease;\n}\n\n.vd-datepicker-prev:hover,\n.vd-datepicker-next:hover {\n  background: var(--vd-dp-day-hover-bg);\n}\n\n/* ========== Calendar grid (weekday row + week rows) ========== */\n\n.vd-datepicker-grid {\n  display: flex;\n  flex-direction: column;\n  gap: var(--vd-dp-gap);\n}\n\n/* ========== Weekday Headers ========== */\n\n.vd-datepicker-weekdays {\n  display: grid;\n  grid-template-columns: repeat(7, 1fr);\n  gap: var(--vd-dp-gap);\n  text-align: center;\n  font-size: 0.75rem;\n  font-weight: 600;\n  color: var(--vd-text-muted, #6c757d);\n  padding-bottom: 0.25rem;\n}\n\n/* ========== Days Grid ========== */\n\n.vd-datepicker-days,\n.vd-datepicker-row {\n  display: grid;\n  grid-template-columns: repeat(7, 1fr);\n  gap: var(--vd-dp-gap);\n}\n\n.vd-datepicker-day {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--vd-dp-cell-size);\n  height: var(--vd-dp-cell-size);\n  border: none;\n  border-radius: 50%;\n  background: transparent;\n  cursor: pointer;\n  font-size: 0.875rem;\n  transition: background 0.15s ease, color 0.15s ease;\n  padding: 0;\n}\n\n.vd-datepicker-day:hover {\n  background: var(--vd-dp-day-hover-bg);\n}\n\n.vd-datepicker-day.is-today {\n  color: var(--vd-dp-day-today-color);\n  font-weight: 700;\n}\n\n.vd-datepicker-day.is-selected {\n  background: var(--vd-dp-day-selected-bg);\n  color: var(--vd-dp-day-selected-color);\n  font-weight: 600;\n}\n\n.vd-datepicker-day.is-outside {\n  color: var(--vd-dp-day-outside-color);\n}\n\n.vd-datepicker-day.is-disabled {\n  color: var(--vd-dp-day-disabled-color);\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n/* ========== Range ========== */\n\n.vd-datepicker-day.is-range-start {\n  border-radius: 50% 0 0 50%;\n  background: var(--vd-dp-day-selected-bg);\n  color: var(--vd-dp-day-selected-color);\n}\n\n.vd-datepicker-day.is-range-end {\n  border-radius: 0 50% 50% 0;\n  background: var(--vd-dp-day-selected-bg);\n  color: var(--vd-dp-day-selected-color);\n}\n\n.vd-datepicker-day.is-in-range {\n  background: rgba(13, 110, 253, 0.1);\n  border-radius: 0;\n}\n\n/* ========== Month/Year Picker ========== */\n\n.vd-datepicker-months,\n.vd-datepicker-years {\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  gap: 0.25rem;\n  padding: 0.25rem;\n}\n\n.vd-datepicker-month-btn,\n.vd-datepicker-year-btn {\n  padding: 0.5rem;\n  border: none;\n  border-radius: var(--vd-dp-border-radius);\n  background: transparent;\n  cursor: pointer;\n  text-align: center;\n  transition: background 0.15s ease;\n}\n\n.vd-datepicker-month-btn:hover,\n.vd-datepicker-year-btn:hover {\n  background: var(--vd-dp-day-hover-bg);\n}\n\n.vd-datepicker-month-btn.is-selected,\n.vd-datepicker-year-btn.is-selected {\n  background: var(--vd-dp-day-selected-bg);\n  color: var(--vd-dp-day-selected-color);\n}\n\n/**\n * Vanduo Framework - Timepicker\n * Dropdown time selection with 12h/24h format\n */\n\n:root {\n  --vd-tp-bg: var(--vd-card-bg, #fff);\n  --vd-tp-border-color: var(--vd-border-color, #dee2e6);\n  --vd-tp-shadow: 0 0.25rem 0.8125rem rgba(0, 0, 0, 0.12);\n  --vd-tp-item-hover-bg: var(--vd-bg-secondary, #f8f9fa);\n  --vd-tp-item-selected-bg: var(--vd-color-primary, #0d6efd);\n  --vd-tp-item-selected-color: #fff;\n  --vd-tp-padding: 0.5rem;\n  --vd-tp-item-padding: 0.3125rem 0.8125rem; /* 5px 13px - fib */\n  --vd-tp-max-height: 15rem;\n  --vd-tp-border-radius: var(--vd-border-radius, 0.5rem);\n  --vd-tp-z-index: 1055;\n}\n\n[data-theme=\"dark\"] {\n  --vd-tp-bg: var(--vd-card-bg, #2d2d44);\n  --vd-tp-border-color: var(--vd-border-color, #3d3d5c);\n  --vd-tp-item-hover-bg: var(--vd-bg-primary, #1a1a2e);\n  --vd-tp-shadow: 0 0.25rem 0.8125rem rgba(0, 0, 0, 0.3);\n}\n\n@media (prefers-color-scheme: dark) {\n  :root:not([data-theme]) {\n    --vd-tp-bg: var(--vd-card-bg, #2d2d44);\n    --vd-tp-border-color: var(--vd-border-color, #3d3d5c);\n    --vd-tp-item-hover-bg: var(--vd-bg-primary, #1a1a2e);\n    --vd-tp-shadow: 0 0.25rem 0.8125rem rgba(0, 0, 0, 0.3);\n  }\n}\n\n/* ========== Popup ========== */\n\n.vd-timepicker-popup {\n  position: fixed;\n  top: 0;\n  left: 0;\n  z-index: var(--vd-tp-z-index);\n  background: var(--vd-tp-bg);\n  border: 1px solid var(--vd-tp-border-color);\n  border-radius: var(--vd-tp-border-radius);\n  box-shadow: var(--vd-tp-shadow);\n  max-height: var(--vd-tp-max-height);\n  overflow-y: auto;\n  display: none;\n  min-width: 8rem;\n}\n\n.vd-timepicker-popup.is-open {\n  display: block;\n}\n\n/* ========== Time Items ========== */\n\n.vd-timepicker-item {\n  padding: var(--vd-tp-item-padding);\n  cursor: pointer;\n  font-size: 0.875rem;\n  text-align: center;\n  transition: background 0.15s ease;\n  font-variant-numeric: tabular-nums;\n}\n\n.vd-timepicker-item:hover {\n  background: var(--vd-tp-item-hover-bg);\n}\n\n.vd-timepicker-item.is-selected {\n  background: var(--vd-tp-item-selected-bg);\n  color: var(--vd-tp-item-selected-color);\n  font-weight: 600;\n}\n\n.vd-timepicker-item.is-disabled {\n  opacity: 0.4;\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n/**\n * Vanduo Framework - Stepper\n * Multi-step progress indicator with states\n */\n\n:root {\n  /* Stepper Colors */\n  --vd-stepper-active-color: var(--vd-color-primary, #0d6efd);\n  --vd-stepper-completed-color: var(--vd-color-success, #198754);\n  --vd-stepper-error-color: var(--vd-color-danger, #dc3545);\n  --vd-stepper-pending-color: var(--vd-color-gray-400, #ced4da);\n  --vd-stepper-text-color: var(--vd-text-primary, #212529);\n  --vd-stepper-line-color: var(--vd-border-color, #dee2e6);\n\n  /* Stepper Dimensions (Fibonacci) */\n  --vd-stepper-circle-size: 2.125rem; /* 34px ~ fib */\n  --vd-stepper-line-width: 2px;\n  --vd-stepper-gap: 0.5rem;          /* 8px - fib */\n  --vd-stepper-connector-gap: 0.8125rem; /* 13px - fib */\n}\n\n[data-theme=\"dark\"] {\n  --vd-stepper-pending-color: var(--vd-color-gray-600, #6c757d);\n  --vd-stepper-line-color: var(--vd-color-gray-600, #6c757d);\n}\n\n@media (prefers-color-scheme: dark) {\n  :root:not([data-theme]) {\n    --vd-stepper-pending-color: var(--vd-color-gray-600, #6c757d);\n    --vd-stepper-line-color: var(--vd-color-gray-600, #6c757d);\n  }\n}\n\n/* ========== Horizontal (default) ========== */\n\n.vd-stepper {\n  display: flex;\n  align-items: flex-start;\n  width: 100%;\n  counter-reset: step;\n}\n\n.vd-stepper-item {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  flex: 1;\n  position: relative;\n  text-align: center;\n}\n\n/* Connector line */\n.vd-stepper-item:not(:last-child)::after {\n  content: '';\n  position: absolute;\n  top: calc(var(--vd-stepper-circle-size) / 2);\n  left: calc(50% + var(--vd-stepper-circle-size) / 2 + var(--vd-stepper-connector-gap));\n  right: calc(-50% + var(--vd-stepper-circle-size) / 2 + var(--vd-stepper-connector-gap));\n  height: var(--vd-stepper-line-width);\n  background: var(--vd-stepper-line-color);\n  z-index: 0;\n}\n\n/* Circle indicator */\n.vd-stepper-circle {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--vd-stepper-circle-size);\n  height: var(--vd-stepper-circle-size);\n  border-radius: 50%;\n  border: var(--vd-stepper-line-width) solid var(--vd-stepper-pending-color);\n  background: var(--vd-bg-primary, #fff);\n  font-weight: 600;\n  font-size: 0.875rem;\n  z-index: 1;\n  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;\n  counter-increment: step;\n}\n\n.vd-stepper-label {\n  margin-top: var(--vd-stepper-gap);\n  font-size: 0.8125rem;\n  font-weight: 500;\n  color: var(--vd-text-muted, #6c757d);\n}\n\n.vd-stepper-description {\n  font-size: 0.75rem;\n  color: var(--vd-text-muted, #6c757d);\n  margin-top: 0.125rem;\n}\n\n/* ========== States ========== */\n\n.vd-stepper-item.is-active .vd-stepper-circle {\n  border-color: var(--vd-stepper-active-color);\n  background: var(--vd-stepper-active-color);\n  color: #fff;\n}\n\n.vd-stepper-item.is-active .vd-stepper-label {\n  color: var(--vd-stepper-active-color);\n  font-weight: 600;\n}\n\n.vd-stepper-item.is-completed .vd-stepper-circle {\n  border-color: var(--vd-stepper-completed-color);\n  background: var(--vd-stepper-completed-color);\n  color: #fff;\n}\n\n.vd-stepper-item.is-completed::after {\n  background: var(--vd-stepper-completed-color);\n}\n\n.vd-stepper-item.is-completed .vd-stepper-label {\n  color: var(--vd-stepper-text-color);\n}\n\n.vd-stepper-item.is-error .vd-stepper-circle {\n  border-color: var(--vd-stepper-error-color);\n  background: var(--vd-stepper-error-color);\n  color: #fff;\n}\n\n.vd-stepper-item.is-error .vd-stepper-label {\n  color: var(--vd-stepper-error-color);\n}\n\n/* ========== Vertical ========== */\n\n.vd-stepper-vertical {\n  flex-direction: column;\n  align-items: flex-start;\n}\n\n.vd-stepper-vertical .vd-stepper-item {\n  flex-direction: row;\n  align-items: flex-start;\n  flex: none;\n  text-align: left;\n  padding-bottom: 1.3125rem; /* 21px - fib */\n}\n\n.vd-stepper-vertical .vd-stepper-item:not(:last-child)::after {\n  top: calc(var(--vd-stepper-circle-size) + var(--vd-stepper-connector-gap));\n  left: calc(var(--vd-stepper-circle-size) / 2);\n  right: auto;\n  bottom: 0;\n  width: var(--vd-stepper-line-width);\n  height: auto;\n}\n\n.vd-stepper-vertical .vd-stepper-label,\n.vd-stepper-vertical .vd-stepper-description {\n  margin-top: 0;\n  margin-left: 0.8125rem; /* 13px - fib */\n}\n\n.vd-stepper-vertical .vd-stepper-content {\n  display: flex;\n  flex-direction: column;\n  margin-left: 0.8125rem;\n}\n\n/* ========== Clickable ========== */\n\n.vd-stepper-clickable .vd-stepper-item {\n  cursor: pointer;\n}\n\n.vd-stepper-clickable .vd-stepper-circle:hover {\n  transform: scale(1.1);\n  transition: transform 0.15s ease;\n}\n\n/**\n * Vanduo Framework - Timeline\n * CSS-only vertical timeline layout\n */\n\n:root {\n  /* Timeline Colors */\n  --vd-timeline-line-color: var(--vd-border-color, #dee2e6);\n  --vd-timeline-marker-bg: var(--vd-color-primary, #0d6efd);\n  --vd-timeline-marker-color: #fff;\n  --vd-timeline-content-bg: var(--vd-card-bg, #fff);\n  --vd-timeline-content-border: var(--vd-border-color, #dee2e6);\n\n  /* Timeline Dimensions (Fibonacci) */\n  --vd-timeline-line-width: 2px;\n  --vd-timeline-marker-size: 0.8125rem; /* 13px - fib */\n  --vd-timeline-marker-size-lg: 2.125rem; /* 34px ~ fib */\n  --vd-timeline-spacing: 1.3125rem;  /* 21px - fib */\n  --vd-timeline-content-padding: 0.8125rem; /* 13px - fib */\n  --vd-timeline-border-radius: var(--vd-border-radius, 0.5rem);\n}\n\n[data-theme=\"dark\"] {\n  --vd-timeline-line-color: var(--vd-color-gray-600, #6c757d);\n  --vd-timeline-content-bg: var(--vd-card-bg, #2d2d44);\n  --vd-timeline-content-border: var(--vd-border-color, #3d3d5c);\n}\n\n@media (prefers-color-scheme: dark) {\n  :root:not([data-theme]) {\n    --vd-timeline-line-color: var(--vd-color-gray-600, #6c757d);\n    --vd-timeline-content-bg: var(--vd-card-bg, #2d2d44);\n    --vd-timeline-content-border: var(--vd-border-color, #3d3d5c);\n  }\n}\n\n/* ========== Base (Vertical Left) ========== */\n\n.vd-timeline {\n  position: relative;\n  padding-left: calc(var(--vd-timeline-marker-size) / 2 + var(--vd-timeline-spacing));\n  list-style: none;\n  margin: 0;\n}\n\n/* Vertical line */\n.vd-timeline::before {\n  content: '';\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: calc(var(--vd-timeline-marker-size) / 2 - var(--vd-timeline-line-width) / 2);\n  width: var(--vd-timeline-line-width);\n  background: var(--vd-timeline-line-color);\n}\n\n/* ========== Item ========== */\n\n.vd-timeline-item {\n  position: relative;\n  padding-bottom: var(--vd-timeline-spacing);\n}\n\n.vd-timeline-item:last-child {\n  padding-bottom: 0;\n}\n\n/* ========== Marker ========== */\n\n.vd-timeline-marker {\n  position: absolute;\n  left: calc(-1 * var(--vd-timeline-spacing) - var(--vd-timeline-marker-size) / 2);\n  top: 0.25rem;\n  width: var(--vd-timeline-marker-size);\n  height: var(--vd-timeline-marker-size);\n  border-radius: 50%;\n  background: var(--vd-timeline-marker-bg);\n  border: 2px solid var(--vd-timeline-content-bg);\n  box-shadow: 0 0 0 2px var(--vd-timeline-marker-bg);\n}\n\n/* Large marker with icon/text */\n.vd-timeline-marker-lg {\n  width: var(--vd-timeline-marker-size-lg);\n  height: var(--vd-timeline-marker-size-lg);\n  left: calc(-1 * var(--vd-timeline-spacing) - var(--vd-timeline-marker-size-lg) / 2);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--vd-timeline-marker-color);\n  font-size: 0.875rem;\n}\n\n/* ========== Content ========== */\n\n.vd-timeline-content {\n  background: var(--vd-timeline-content-bg);\n  border: 1px solid var(--vd-timeline-content-border);\n  border-radius: var(--vd-timeline-border-radius);\n  padding: var(--vd-timeline-content-padding);\n}\n\n.vd-timeline-title {\n  margin: 0 0 0.3125rem; /* 5px - fib */\n  font-weight: 600;\n  font-size: 1rem;\n}\n\n.vd-timeline-date {\n  font-size: 0.75rem;\n  color: var(--vd-text-muted, #6c757d);\n  margin-bottom: 0.3125rem;\n}\n\n.vd-timeline-text {\n  margin: 0;\n  font-size: 0.875rem;\n}\n\n/* ========== Color Variants ========== */\n\n.vd-timeline-item.vd-timeline-success .vd-timeline-marker {\n  background: var(--vd-color-success, #198754);\n  box-shadow: 0 0 0 2px var(--vd-color-success, #198754);\n}\n\n.vd-timeline-item.vd-timeline-warning .vd-timeline-marker {\n  background: var(--vd-color-warning, #ffc107);\n  box-shadow: 0 0 0 2px var(--vd-color-warning, #ffc107);\n}\n\n.vd-timeline-item.vd-timeline-danger .vd-timeline-marker {\n  background: var(--vd-color-danger, #dc3545);\n  box-shadow: 0 0 0 2px var(--vd-color-danger, #dc3545);\n}\n\n/* ========== Alternating Mode ========== */\n\n.vd-timeline-alternating {\n  padding-left: 0;\n}\n\n.vd-timeline-alternating::before {\n  left: 50%;\n  transform: translateX(-50%);\n}\n\n.vd-timeline-alternating .vd-timeline-item {\n  width: 50%;\n  padding-right: var(--vd-timeline-spacing);\n  padding-left: 0;\n}\n\n.vd-timeline-alternating .vd-timeline-item:nth-child(odd) {\n  margin-left: 0;\n  text-align: right;\n}\n\n.vd-timeline-alternating .vd-timeline-item:nth-child(odd) .vd-timeline-marker {\n  left: auto;\n  right: calc(-1 * var(--vd-timeline-marker-size) / 2 - 1px);\n}\n\n.vd-timeline-alternating .vd-timeline-item:nth-child(even) {\n  margin-left: 50%;\n  padding-left: var(--vd-timeline-spacing);\n  padding-right: 0;\n}\n\n.vd-timeline-alternating .vd-timeline-item:nth-child(even) .vd-timeline-marker {\n  left: calc(-1 * var(--vd-timeline-marker-size) / 2 - 1px);\n}\n\n/* ========== Responsive ========== */\n\n@media (max-width: 768px) {\n  .vd-timeline-alternating {\n    padding-left: calc(var(--vd-timeline-marker-size) / 2 + var(--vd-timeline-spacing));\n  }\n\n  .vd-timeline-alternating::before {\n    left: calc(var(--vd-timeline-marker-size) / 2 - var(--vd-timeline-line-width) / 2);\n    transform: none;\n  }\n\n  .vd-timeline-alternating .vd-timeline-item,\n  .vd-timeline-alternating .vd-timeline-item:nth-child(odd),\n  .vd-timeline-alternating .vd-timeline-item:nth-child(even) {\n    width: 100%;\n    margin-left: 0;\n    padding-left: 0;\n    padding-right: 0;\n    text-align: left;\n  }\n\n  .vd-timeline-alternating .vd-timeline-item:nth-child(odd) .vd-timeline-marker,\n  .vd-timeline-alternating .vd-timeline-item:nth-child(even) .vd-timeline-marker {\n    left: calc(-1 * var(--vd-timeline-spacing) - var(--vd-timeline-marker-size) / 2);\n    right: auto;\n  }\n}\n\n/* ========== Animated reveal (opt-in) ========== */\n\n.vd-timeline-animated .vd-timeline-item {\n  opacity: 0;\n  transform: translateY(12px);\n  transition:\n    opacity 0.55s ease,\n    transform 0.55s cubic-bezier(0.2, 0.8, 0.35, 1);\n  transition-delay: var(--vd-timeline-reveal-delay, 0s);\n}\n\n.vd-timeline-animated .vd-timeline-item .vd-timeline-marker {\n  transform: scale(0.4);\n  transform-origin: center center;\n  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);\n  transition-delay: calc(var(--vd-timeline-reveal-delay, 0s) + 0.12s);\n}\n\n.vd-timeline-animated .vd-timeline-item.is-revealed {\n  opacity: 1;\n  transform: none;\n}\n\n.vd-timeline-animated .vd-timeline-item.is-revealed .vd-timeline-marker {\n  transform: scale(1);\n}\n\n/* Alternating + animated: entrance from each side (desktop only; narrow uses base vertical slide) */\n@media (min-width: 769px) {\n  .vd-timeline-alternating.vd-timeline-animated .vd-timeline-item:nth-child(odd):not(.is-revealed) {\n    transform: translate(-12px, 12px);\n  }\n\n  .vd-timeline-alternating.vd-timeline-animated .vd-timeline-item:nth-child(even):not(.is-revealed) {\n    transform: translate(12px, 12px);\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .vd-timeline-animated .vd-timeline-item,\n  .vd-timeline-animated .vd-timeline-item .vd-timeline-marker {\n    opacity: 1;\n    transform: none;\n    transition: none;\n  }\n}\n\n/**\n * Vanduo Framework - Rating\n * Star/icon-based rating input with read-only mode\n */\n\n:root {\n  /* Rating Colors */\n  --vd-rating-active-color: #f59e0b;\n  --vd-rating-inactive-color: var(--vd-color-gray-300, #dee2e6);\n  --vd-rating-hover-color: #fbbf24;\n\n  /* Rating Dimensions (Fibonacci) */\n  --vd-rating-size: 1.3125rem;  /* 21px - fib */\n  --vd-rating-size-sm: 1rem;\n  --vd-rating-size-lg: 2.125rem; /* 34px ~ fib */\n  --vd-rating-gap: 0.125rem;     /* 2px */\n}\n\n[data-theme=\"dark\"] {\n  --vd-rating-inactive-color: var(--vd-color-gray-600, #6c757d);\n}\n\n@media (prefers-color-scheme: dark) {\n  :root:not([data-theme]) {\n    --vd-rating-inactive-color: var(--vd-color-gray-600, #6c757d);\n  }\n}\n\n/* ========== Base ========== */\n\n.vd-rating {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--vd-rating-gap);\n}\n\n.vd-rating-star {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  font-size: var(--vd-rating-size);\n  color: var(--vd-rating-inactive-color);\n  cursor: pointer;\n  transition: color 0.15s ease, transform 0.15s ease;\n  user-select: none;\n  border: none;\n  background: none;\n  padding: 0;\n  line-height: 1;\n}\n\n.vd-rating-star::before {\n  content: '\\2605'; /* filled star */\n}\n\n.vd-rating-star:hover {\n  transform: scale(1.2);\n}\n\n.vd-rating-star.is-active {\n  color: var(--vd-rating-active-color);\n}\n\n.vd-rating-star.is-hovered {\n  color: var(--vd-rating-hover-color);\n}\n\n/* Half-star support */\n.vd-rating-star.is-half {\n  position: relative;\n  color: var(--vd-rating-inactive-color);\n}\n\n.vd-rating-star.is-half::after {\n  content: '\\2605';\n  position: absolute;\n  left: 0;\n  top: 0;\n  width: 50%;\n  overflow: hidden;\n  color: var(--vd-rating-active-color);\n}\n\n/* ========== Read-only ========== */\n\n.vd-rating-readonly .vd-rating-star {\n  cursor: default;\n  pointer-events: none;\n}\n\n.vd-rating-readonly .vd-rating-star:hover {\n  transform: none;\n}\n\n/* ========== Sizes ========== */\n\n.vd-rating-sm .vd-rating-star {\n  font-size: var(--vd-rating-size-sm);\n}\n\n.vd-rating-lg .vd-rating-star {\n  font-size: var(--vd-rating-size-lg);\n}\n\n/* ========== Value Display ========== */\n\n.vd-rating-value {\n  margin-left: 0.5rem;\n  font-size: 0.875rem;\n  font-weight: 600;\n  color: var(--vd-text-primary, #212529);\n}\n\n/**\n * Vanduo Framework - Transfer (Dual-list)\n * Source/target list transfer panel\n */\n\n:root {\n  --vd-transfer-bg: var(--vd-card-bg, #fff);\n  --vd-transfer-border-color: var(--vd-border-color, #dee2e6);\n  --vd-transfer-item-hover-bg: var(--vd-bg-secondary, #f8f9fa);\n  --vd-transfer-item-selected-bg: var(--vd-color-primary-alpha-10, rgba(13, 110, 253, 0.1));\n  --vd-transfer-header-bg: var(--vd-bg-secondary, #f8f9fa);\n  --vd-transfer-padding: 0.5rem;\n  --vd-transfer-list-height: 15rem;\n  --vd-transfer-border-radius: var(--vd-border-radius, 0.5rem);\n  --vd-transfer-gap: 0.8125rem; /* 13px - fib */\n}\n\n[data-theme=\"dark\"] {\n  --vd-transfer-bg: var(--vd-card-bg, #2d2d44);\n  --vd-transfer-border-color: var(--vd-border-color, #3d3d5c);\n  --vd-transfer-item-hover-bg: var(--vd-bg-primary, #1a1a2e);\n  --vd-transfer-header-bg: var(--vd-bg-primary, #1a1a2e);\n}\n\n@media (prefers-color-scheme: dark) {\n  :root:not([data-theme]) {\n    --vd-transfer-bg: var(--vd-card-bg, #2d2d44);\n    --vd-transfer-border-color: var(--vd-border-color, #3d3d5c);\n    --vd-transfer-item-hover-bg: var(--vd-bg-primary, #1a1a2e);\n    --vd-transfer-header-bg: var(--vd-bg-primary, #1a1a2e);\n  }\n}\n\n/* ========== Layout ========== */\n\n.vd-transfer {\n  display: flex;\n  align-items: stretch;\n  gap: var(--vd-transfer-gap);\n}\n\n.vd-transfer-panel {\n  flex: 1;\n  border: 1px solid var(--vd-transfer-border-color);\n  border-radius: var(--vd-transfer-border-radius);\n  background: var(--vd-transfer-bg);\n  display: flex;\n  flex-direction: column;\n  min-width: 10rem;\n}\n\n/* ========== Panel Header ========== */\n\n.vd-transfer-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: var(--vd-transfer-padding) 0.8125rem;\n  background: var(--vd-transfer-header-bg);\n  border-bottom: 1px solid var(--vd-transfer-border-color);\n  border-radius: var(--vd-transfer-border-radius) var(--vd-transfer-border-radius) 0 0;\n  font-size: 0.8125rem;\n  font-weight: 600;\n}\n\n.vd-transfer-count {\n  font-weight: 400;\n  color: var(--vd-text-muted, #6c757d);\n}\n\n/* ========== Search ========== */\n\n.vd-transfer-search {\n  padding: var(--vd-transfer-padding);\n  border-bottom: 1px solid var(--vd-transfer-border-color);\n}\n\n.vd-transfer-search input {\n  width: 100%;\n  padding: 0.3125rem 0.5rem;\n  border: 1px solid var(--vd-transfer-border-color);\n  border-radius: 0.25rem;\n  font-size: 0.8125rem;\n  background: var(--vd-transfer-bg);\n  color: var(--vd-text-primary, #212529);\n}\n\n/* ========== List ========== */\n\n.vd-transfer-list {\n  flex: 1;\n  overflow-y: auto;\n  max-height: var(--vd-transfer-list-height);\n  list-style: none;\n  margin: 0;\n  padding: 0;\n}\n\n.vd-transfer-item {\n  display: flex;\n  align-items: center;\n  padding: 0.3125rem 0.8125rem; /* 5px 13px - fib */\n  cursor: pointer;\n  font-size: 0.875rem;\n  transition: background 0.15s ease;\n  gap: 0.5rem;\n}\n\n.vd-transfer-item:hover {\n  background: var(--vd-transfer-item-hover-bg);\n}\n\n.vd-transfer-item.is-selected {\n  background: var(--vd-transfer-item-selected-bg);\n}\n\n.vd-transfer-item input[type=\"checkbox\"] {\n  margin: 0;\n}\n\n/* ========== Actions ========== */\n\n.vd-transfer-actions {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 0.3125rem; /* 5px - fib */\n}\n\n.vd-transfer-btn {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 2rem;\n  height: 2rem;\n  border: 1px solid var(--vd-transfer-border-color);\n  border-radius: 0.25rem;\n  background: var(--vd-transfer-bg);\n  cursor: pointer;\n  font-size: 0.875rem;\n  transition: background 0.15s ease;\n  padding: 0;\n}\n\n.vd-transfer-btn:hover {\n  background: var(--vd-transfer-item-hover-bg);\n}\n\n.vd-transfer-btn:disabled {\n  opacity: 0.4;\n  cursor: not-allowed;\n}\n\n/* ========== Responsive ========== */\n\n@media (max-width: 576px) {\n  .vd-transfer {\n    flex-direction: column;\n  }\n\n  .vd-transfer-actions {\n    flex-direction: row;\n  }\n}\n\n/**\n * Vanduo Framework - Tree View\n * Hierarchical collapsible tree structure with checkbox selection\n */\n\n:root {\n  --vd-tree-indent: 1.3125rem;     /* 21px - fib */\n  --vd-tree-line-color: var(--vd-border-color, #dee2e6);\n  --vd-tree-line-width: 1px;\n  --vd-tree-item-padding: 0.25rem 0.3125rem; /* 4px 5px */\n  --vd-tree-item-hover-bg: var(--vd-bg-secondary, #f8f9fa);\n  --vd-tree-icon-size: 1rem;\n  --vd-tree-toggle-size: 1.125rem;\n}\n\n[data-theme=\"dark\"] {\n  --vd-tree-line-color: var(--vd-color-gray-600, #6c757d);\n  --vd-tree-item-hover-bg: var(--vd-bg-primary, #1a1a2e);\n}\n\n@media (prefers-color-scheme: dark) {\n  :root:not([data-theme]) {\n    --vd-tree-line-color: var(--vd-color-gray-600, #6c757d);\n    --vd-tree-item-hover-bg: var(--vd-bg-primary, #1a1a2e);\n  }\n}\n\n/* ========== Base ========== */\n\n.vd-tree {\n  list-style: none;\n  padding: 0;\n  margin: 0;\n}\n\n.vd-tree .vd-tree {\n  padding-left: var(--vd-tree-indent);\n}\n\n/* ========== Node ========== */\n\n.vd-tree-node {\n  position: relative;\n}\n\n.vd-tree-node-content {\n  display: flex;\n  align-items: center;\n  gap: 0.3125rem; /* 5px - fib */\n  padding: var(--vd-tree-item-padding);\n  border-radius: 0.25rem;\n  cursor: default;\n  font-size: 0.875rem;\n  transition: background 0.15s ease;\n}\n\n.vd-tree-node-content:hover {\n  background: var(--vd-tree-item-hover-bg);\n}\n\n/* ========== Toggle ========== */\n\n.vd-tree-toggle {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--vd-tree-toggle-size);\n  height: var(--vd-tree-toggle-size);\n  border: none;\n  background: none;\n  padding: 0;\n  cursor: pointer;\n  font-size: 0.625rem;\n  color: var(--vd-text-muted, #6c757d);\n  transition: transform 0.2s ease;\n  flex-shrink: 0;\n}\n\n.vd-tree-toggle::before {\n  content: '\\25B6'; /* right-pointing triangle */\n}\n\n.vd-tree-node.is-open > .vd-tree-node-content .vd-tree-toggle {\n  transform: rotate(90deg);\n}\n\n/* Placeholder for leaf nodes (no children) */\n.vd-tree-toggle-placeholder {\n  width: var(--vd-tree-toggle-size);\n  flex-shrink: 0;\n}\n\n/* ========== Checkbox ========== */\n\n.vd-tree-checkbox {\n  margin: 0;\n  flex-shrink: 0;\n}\n\n/* ========== Icon ========== */\n\n.vd-tree-icon {\n  font-size: var(--vd-tree-icon-size);\n  flex-shrink: 0;\n  color: var(--vd-text-muted, #6c757d);\n}\n\n.vd-tree-node.is-open > .vd-tree-node-content .vd-tree-icon-folder::before {\n  content: '\\1F4C2'; /* open folder */\n}\n\n.vd-tree-icon-folder::before {\n  content: '\\1F4C1'; /* closed folder */\n}\n\n.vd-tree-icon-file::before {\n  content: '\\1F4C4'; /* file */\n}\n\n/* ========== Label ========== */\n\n.vd-tree-label {\n  flex: 1;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.vd-tree-node.is-selected > .vd-tree-node-content .vd-tree-label {\n  font-weight: 600;\n  color: var(--vd-color-primary, #0d6efd);\n}\n\n/* ========== Children Container ========== */\n\n.vd-tree-children {\n  display: none;\n  list-style: none;\n  padding: 0;\n  margin: 0;\n  padding-left: var(--vd-tree-indent);\n}\n\n.vd-tree-node.is-open > .vd-tree-children {\n  display: block;\n}\n\n/* ========== Connection Lines ========== */\n\n.vd-tree-lines .vd-tree-children {\n  position: relative;\n}\n\n.vd-tree-lines .vd-tree-children::before {\n  content: '';\n  position: absolute;\n  top: 0;\n  left: calc(var(--vd-tree-toggle-size) / 2);\n  bottom: 0.75rem;\n  width: var(--vd-tree-line-width);\n  background: var(--vd-tree-line-color);\n}\n\n.vd-tree-lines .vd-tree-children .vd-tree-node::before {\n  content: '';\n  position: absolute;\n  top: 50%;\n  left: calc(var(--vd-tree-toggle-size) / 2 - var(--vd-tree-indent));\n  width: 0.5rem;\n  height: var(--vd-tree-line-width);\n  background: var(--vd-tree-line-color);\n}\n\n/**\n * Vanduo Framework - Spotlight (Feature Discovery)\n * Overlay highlight + tooltip tour system\n */\n\n:root {\n  --vd-spotlight-overlay-bg: rgba(0, 0, 0, 0.5);\n  --vd-spotlight-tooltip-bg: var(--vd-card-bg, #fff);\n  --vd-spotlight-tooltip-color: var(--vd-text-primary, #212529);\n  --vd-spotlight-tooltip-shadow: 0 0.5rem 1.3125rem rgba(0, 0, 0, 0.15);\n  --vd-spotlight-tooltip-padding: 1.3125rem; /* 21px - fib */\n  --vd-spotlight-tooltip-radius: var(--vd-card-border-radius, var(--vd-btn-border-radius-lg, 0.5rem));\n  --vd-spotlight-tooltip-max-width: 21rem; /* 336px - fib×16 */\n  --vd-spotlight-highlight-padding: 0.5rem; /* 8px - fib */\n  /* Match card/modal surfaces so the cutout reads like other rounded UI (not the smaller base button token). */\n  --vd-spotlight-target-radius: var(--vd-card-border-radius, var(--vd-btn-border-radius-lg, var(--vd-btn-border-radius, 0.25rem)));\n  --vd-spotlight-z-index: 1080;\n}\n\n[data-theme=\"dark\"] {\n  --vd-spotlight-tooltip-bg: var(--vd-card-bg, #2d2d44);\n  --vd-spotlight-tooltip-shadow: 0 0.5rem 1.3125rem rgba(0, 0, 0, 0.35);\n}\n\n@media (prefers-color-scheme: dark) {\n  :root:not([data-theme]) {\n    --vd-spotlight-tooltip-bg: var(--vd-card-bg, #2d2d44);\n    --vd-spotlight-tooltip-shadow: 0 0.5rem 1.3125rem rgba(0, 0, 0, 0.35);\n  }\n}\n\n/* ========== Overlay ========== */\n\n.vd-spotlight-overlay {\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100vw;\n  height: 100vh;\n  z-index: var(--vd-spotlight-z-index);\n  pointer-events: auto;\n  transition: opacity 0.3s ease;\n}\n\n/* ========== Tooltip ========== */\n\n.vd-spotlight-tooltip {\n  position: absolute;\n  z-index: calc(var(--vd-spotlight-z-index) + 2);\n  background: var(--vd-spotlight-tooltip-bg);\n  color: var(--vd-spotlight-tooltip-color);\n  padding: var(--vd-spotlight-tooltip-padding);\n  border-radius: var(--vd-spotlight-tooltip-radius);\n  box-shadow: var(--vd-spotlight-tooltip-shadow);\n  max-width: var(--vd-spotlight-tooltip-max-width);\n}\n\n.vd-spotlight-title {\n  margin: 0 0 0.5rem;\n  font-weight: 600;\n  font-size: 1.125rem;\n}\n\n.vd-spotlight-description {\n  margin: 0 0 0.8125rem; /* 13px - fib */\n  font-size: 0.875rem;\n  line-height: 1.5;\n}\n\n/* ========== Footer (nav buttons) ========== */\n\n.vd-spotlight-footer {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 0.5rem;\n}\n\n.vd-spotlight-counter {\n  font-size: 0.75rem;\n  color: var(--vd-text-muted, #6c757d);\n}\n\n.vd-spotlight-actions {\n  display: flex;\n  gap: 0.3125rem; /* 5px - fib */\n}\n\n.vd-spotlight-btn {\n  padding: 0.3125rem 0.8125rem; /* 5px 13px - fib */\n  border: 1px solid var(--vd-border-color, #dee2e6);\n  border-radius: var(--vd-btn-border-radius-sm, 0.25rem);\n  background: transparent;\n  cursor: pointer;\n  font-size: 0.8125rem;\n  transition: background 0.15s ease;\n}\n\n.vd-spotlight-btn:hover {\n  background: var(--vd-bg-secondary, #f8f9fa);\n}\n\n.vd-spotlight-btn-primary {\n  background: var(--vd-color-primary, #0d6efd);\n  color: #fff;\n  border-color: var(--vd-color-primary, #0d6efd);\n}\n\n.vd-spotlight-btn-primary:hover {\n  background: var(--vd-color-primary-dark, #0b5ed7);\n}\n\n/* ========== Highlighted Target ========== */\n\n.vd-spotlight-target {\n  position: relative;\n  z-index: calc(var(--vd-spotlight-z-index) + 1);\n  isolation: isolate;\n  overflow: visible;\n  /* box-shadow cutout follows border-radius; !important wins over consumer utilities (e.g. docs demos) */\n  border-radius: var(--vd-spotlight-target-radius) !important;\n  box-shadow: 0 0 0 var(--vd-spotlight-highlight-padding) rgba(13, 110, 253, 0.25),\n              0 0 0 9999px var(--vd-spotlight-overlay-bg);\n}\n\n\n/* Layer 5: Effects */\n/**\n * Vanduo Framework - Parallax Effects\n * Parallax scroll effects\n */\n\n:root {\n  /* Parallax Settings */\n  --vd-parallax-speed-slow: 0.5;\n  --vd-parallax-speed-medium: 1;\n  --vd-parallax-speed-fast: 1.5;\n}\n\n/* Base Parallax Container */\n.vd-parallax {\n  position: relative;\n  overflow: hidden;\n  width: 100%;\n}\n\n/* Parallax Layer */\n.vd-parallax-layer {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  will-change: transform;\n  backface-visibility: hidden;\n  transform: translateZ(0);\n}\n\n/* Parallax Content */\n.vd-parallax-content {\n  position: relative;\n  z-index: 1;\n}\n\n/* Parallax Speed Variants */\n.vd-parallax-slow {\n  --vd-parallax-speed: var(--vd-parallax-speed-slow);\n}\n\n.vd-parallax-medium {\n  --vd-parallax-speed: var(--vd-parallax-speed-medium);\n}\n\n.vd-parallax-fast {\n  --vd-parallax-speed: var(--vd-parallax-speed-fast);\n}\n\n/* Parallax Direction */\n.vd-parallax-horizontal .vd-parallax-layer {\n  /* Horizontal parallax will be handled by JS */\n}\n\n/* Parallax Image */\n.vd-parallax-image {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  will-change: transform;\n}\n\n/* Parallax Background */\n.vd-parallax-bg {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 120%; /* Extra height for parallax effect */\n  background-size: cover;\n  background-position: center;\n  background-repeat: no-repeat;\n  will-change: transform;\n}\n\n/* Parallax Container Heights (Fibonacci) */\n.vd-parallax-sm {\n  min-height: 377px; /* fib */\n}\n\n.vd-parallax-md {\n  min-height: 610px; /* fib */\n}\n\n.vd-parallax-lg {\n  min-height: 987px; /* fib */\n}\n\n.vd-parallax-full {\n  min-height: 100vh;\n}\n\n/* Reduced Motion Support */\n@media (prefers-reduced-motion: reduce) {\n  .vd-parallax-layer,\n  .vd-parallax-bg,\n  .vd-parallax-image {\n    transform: none !important;\n    will-change: auto;\n  }\n}\n\n/* Mobile Optimization (disable parallax on small screens) */\n@media (max-width: 767.98px) {\n  .vd-parallax-disable-mobile .vd-parallax-layer,\n  .vd-parallax-disable-mobile .vd-parallax-bg,\n  .vd-parallax-disable-mobile .vd-parallax-image {\n    transform: none !important;\n    will-change: auto;\n  }\n}\n\n\n/**\n * Vanduo Framework - Glass Effects\n * Frosted glass utility surfaces and modifiers\n */\n\n:root {\n  --vd-glass-float-shadow: 0 14px 42px rgba(0, 0, 0, 0.2);\n  --vd-glass-float-translate-y: -2px;\n}\n\n.vd-glass,\n.vd-glass-md {\n  position: relative;\n  overflow: hidden;\n  background: var(--vd-glass-bg-light);\n  border: 1px solid var(--vd-glass-border-light);\n  box-shadow: var(--vd-glass-shadow);\n  backdrop-filter: blur(var(--vd-glass-blur)) saturate(var(--vd-glass-saturate));\n  -webkit-backdrop-filter: blur(var(--vd-glass-blur)) saturate(var(--vd-glass-saturate));\n  isolation: isolate;\n}\n\n.vd-glass::before,\n.vd-glass-md::before {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  background: linear-gradient(\n    to bottom,\n    rgba(255, 255, 255, var(--vd-glass-highlight-alpha)) 0%,\n    rgba(255, 255, 255, 0) 45%\n  );\n  pointer-events: none;\n  z-index: 1;\n}\n\n.vd-glass::after,\n.vd-glass-md::after {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.15' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url('effects/%23n')' opacity='0.25'/%3E%3C/svg%3E\");\n  opacity: var(--vd-glass-noise-opacity);\n  pointer-events: none;\n  z-index: 2;\n}\n\n.vd-glass > *,\n.vd-glass-md > * {\n  position: relative;\n  z-index: 3;\n}\n\n.vd-glass-sm {\n  --vd-glass-blur: 6px;\n  --vd-glass-saturate: 1.4;\n  --vd-glass-bg-opacity: 0.55;\n}\n\n.vd-glass-lg {\n  --vd-glass-blur: 20px;\n  --vd-glass-saturate: 2;\n  --vd-glass-bg-opacity: 0.72;\n}\n\n.vd-glass-xl {\n  --vd-glass-blur: 28px;\n  --vd-glass-saturate: 2.2;\n  --vd-glass-bg-opacity: 0.78;\n}\n\n.vd-glass-tinted {\n  background: linear-gradient(\n      135deg,\n      var(--vd-glass-tint, var(--vd-color-primary-alpha-10)) 0%,\n      transparent 70%\n    ),\n    var(--vd-glass-bg-light);\n}\n\n.vd-glass-floating {\n  transition: transform var(--vd-transition-normal), box-shadow var(--vd-transition-normal);\n}\n\n.vd-glass-floating:hover,\n.vd-glass-floating:focus-within {\n  transform: translateY(var(--vd-glass-float-translate-y));\n  box-shadow: var(--vd-glass-float-shadow);\n}\n\n.vd-glass-contrast {\n  --vd-glass-bg-opacity: 0.82;\n  --vd-glass-border-alpha: 0.26;\n}\n\n/* Scroll-activated glass: inactive until .is-glass-active is set by glass.js */\n[data-glass-scroll] {\n  transition:\n    background var(--vd-transition-normal, 0.25s ease),\n    border-color var(--vd-transition-normal, 0.25s ease),\n    box-shadow var(--vd-transition-normal, 0.25s ease),\n    backdrop-filter var(--vd-transition-normal, 0.25s ease);\n}\n\n[data-glass-scroll]:not(.is-glass-active) {\n  background: transparent !important;\n  border-color: transparent !important;\n  box-shadow: none !important;\n  backdrop-filter: none !important;\n  -webkit-backdrop-filter: none !important;\n}\n\n[data-glass-scroll]:not(.is-glass-active)::before,\n[data-glass-scroll]:not(.is-glass-active)::after {\n  opacity: 0;\n}\n\n@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {\n  .vd-glass,\n  .vd-glass-md {\n    background: var(--vd-bg-primary);\n  }\n}\n\n@media (prefers-reduced-transparency: reduce) {\n  .vd-glass,\n  .vd-glass-sm,\n  .vd-glass-md,\n  .vd-glass-lg,\n  .vd-glass-xl {\n    backdrop-filter: none;\n    -webkit-backdrop-filter: none;\n    background: var(--vd-bg-primary);\n    border-color: var(--vd-border-color);\n  }\n\n  .vd-glass::before,\n  .vd-glass::after,\n  .vd-glass-md::before,\n  .vd-glass-md::after {\n    display: none;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .vd-glass-floating {\n    transition: none;\n  }\n\n  .vd-glass-floating:hover,\n  .vd-glass-floating:focus-within {\n    transform: none;\n  }\n}\n\n/**\n * Vanduo Framework - Water Morph Effect\n * Liquid wave content-swap animation on click\n *\n * Usage:\n *   Add `.vd-morph` (or `data-vd-morph`) to any element.\n *   Inside it, place:\n *     .vd-morph-wave     — radial wave layer (auto-created by JS if missing)\n *     .vd-morph-shine    — light-sweep layer (auto-created by JS if missing)\n *     .vd-morph-content.vd-morph-current — visible state\n *     .vd-morph-content.vd-morph-next    — hidden next state\n */\n\n:root {\n  --vd-morph-duration: 0.75s;\n  --vd-morph-easing: cubic-bezier(0.2, 0.8, 0.35, 1);\n  --vd-morph-blur-peak: 11px;\n  --vd-morph-wave-color: var(--vd-color-primary, #3b82f6);\n}\n\n/* ========== Base ========== */\n\n.vd-morph,\n[data-vd-morph] {\n  position: relative;\n  overflow: hidden;\n  cursor: pointer;\n  -webkit-tap-highlight-color: transparent;\n}\n\n/* ========== Wave Layer ========== */\n\n.vd-morph-wave {\n  position: absolute;\n  border-radius: 50%;\n  background:\n    radial-gradient(circle at 32% 28%,\n      color-mix(in srgb, #fff 55%, transparent) 0%,\n      color-mix(in srgb, #fff 18%, transparent) 18%,\n      transparent 38%),\n    radial-gradient(circle at 68% 70%,\n      color-mix(in srgb, #fff 30%, transparent) 0%,\n      transparent 30%),\n    radial-gradient(circle at 50% 50%,\n      color-mix(in srgb, var(--vd-morph-wave-color) 96%, #a8d8ff) 0%,\n      color-mix(in srgb, var(--vd-morph-wave-color) 82%, #7ec8ff) 35%,\n      color-mix(in srgb, var(--vd-morph-wave-color) 70%, #5ba4f5) 65%,\n      color-mix(in srgb, var(--vd-morph-wave-color) 90%, #4478f0) 100%);\n  pointer-events: none;\n  opacity: 0;\n  transform: translate(-50%, -50%);\n  will-change: width, height, opacity, filter;\n}\n\n.vd-morph.is-morphing .vd-morph-wave {\n  animation: vd-morph-expand var(--vd-morph-duration) var(--vd-morph-easing) forwards;\n}\n\n.vd-morph.is-morphing .vd-morph-wave::after {\n  content: '';\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  width: 0;\n  height: 0;\n  border-radius: 50%;\n  background:\n    radial-gradient(circle at 50% 50%,\n      color-mix(in srgb, var(--vd-morph-wave-color) 70%, #b0e0ff) 0%,\n      color-mix(in srgb, var(--vd-morph-wave-color) 50%, #88c0ff) 45%,\n      transparent 80%);\n  transform: translate(-50%, -50%);\n  opacity: 0;\n  animation: vd-morph-expand2 var(--vd-morph-duration) var(--vd-morph-easing) 0.08s forwards;\n}\n\n@keyframes vd-morph-expand {\n  0% {\n    width: 0;\n    height: 0;\n    opacity: 0;\n    filter: blur(0) saturate(2);\n  }\n  6% {\n    opacity: 1;\n    filter: blur(1px) saturate(2.2);\n  }\n  35% {\n    opacity: 0.92;\n    filter: blur(6px) saturate(1.7);\n  }\n  68% {\n    width: 360%;\n    height: 360%;\n    opacity: 0.6;\n    filter: blur(var(--vd-morph-blur-peak)) saturate(1.3);\n  }\n  100% {\n    width: 360%;\n    height: 360%;\n    opacity: 0;\n    filter: blur(7px) saturate(1);\n  }\n}\n\n@keyframes vd-morph-expand2 {\n  0% {\n    width: 0;\n    height: 0;\n    opacity: 0;\n    filter: blur(0);\n  }\n  10% {\n    opacity: 0.7;\n    filter: blur(3px);\n  }\n  60% {\n    width: 280%;\n    height: 280%;\n    opacity: 0.38;\n    filter: blur(14px);\n  }\n  100% {\n    width: 280%;\n    height: 280%;\n    opacity: 0;\n    filter: blur(10px);\n  }\n}\n\n/* ========== Shine Sweep ========== */\n\n.vd-morph-shine {\n  position: absolute;\n  top: 0;\n  left: -110%;\n  width: 80%;\n  height: 100%;\n  background: linear-gradient(\n    105deg,\n    transparent 0%,\n    color-mix(in srgb, #fff 10%, transparent) 35%,\n    color-mix(in srgb, #fff 52%, transparent) 50%,\n    color-mix(in srgb, #fff 10%, transparent) 65%,\n    transparent 100%\n  );\n  pointer-events: none;\n  opacity: 0;\n  transform: skewX(-12deg);\n  will-change: left, opacity;\n}\n\n.vd-morph.is-morphing .vd-morph-shine {\n  animation: vd-morph-shine 0.72s cubic-bezier(0.3, 0.65, 0.5, 1) 0.04s forwards;\n}\n\n@keyframes vd-morph-shine {\n  0% {\n    left: -110%;\n    opacity: 0;\n  }\n  15% {\n    opacity: 0.9;\n  }\n  72% {\n    opacity: 0.4;\n  }\n  100% {\n    left: 130%;\n    opacity: 0;\n  }\n}\n\n/* ========== Content Layers ========== */\n\n.vd-morph-content {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 0.45rem;\n  pointer-events: none;\n  will-change: opacity, transform, filter;\n}\n\n.vd-morph-current {\n  opacity: 1;\n  transform: scale(1) translateY(0);\n  filter: blur(0);\n  z-index: 2;\n  transition:\n    opacity 0.28s cubic-bezier(0.4, 0, 0.6, 1),\n    transform 0.28s cubic-bezier(0.4, 0, 0.6, 1),\n    filter 0.28s ease;\n}\n\n.vd-morph-next {\n  opacity: 0;\n  transform: scale(0.86) translateY(4px);\n  filter: blur(3px);\n  z-index: 1;\n  transition:\n    opacity 0.3s cubic-bezier(0, 0, 0.2, 1),\n    transform 0.3s cubic-bezier(0, 0, 0.2, 1),\n    filter 0.3s ease;\n}\n\n.vd-morph.is-morphing .vd-morph-current {\n  opacity: 0;\n  transform: scale(0.82) translateY(-4px);\n  filter: blur(4px);\n  transition-duration: 0.2s;\n  transition-delay: 0s;\n}\n\n.vd-morph.is-morphing .vd-morph-next {\n  opacity: 1;\n  transform: scale(1) translateY(0);\n  filter: blur(0);\n  transition-duration: 0.3s;\n  transition-delay: 0.25s;\n}\n\n/* ========== Size Variants ========== */\n\n.vd-morph-sm {\n  --vd-morph-duration: 0.5s;\n  --vd-morph-blur-peak: 7px;\n}\n\n.vd-morph-lg {\n  --vd-morph-duration: 1s;\n  --vd-morph-blur-peak: 16px;\n}\n\n/* ========== Accessibility ========== */\n\n@media (prefers-reduced-motion: reduce) {\n  .vd-morph,\n  .vd-morph-content,\n  .vd-morph-wave,\n  .vd-morph-shine {\n    transition: none !important;\n    animation: none !important;\n  }\n}\n\n\n/* Layer 6: Print */\n/**\n * Vanduo Framework - Print Styles\n * Optimized styles for printing\n */\n\n@media print {\n  /* Reset backgrounds and shadows for printing */\n  *,\n  *::before,\n  *::after {\n    background: transparent !important;\n    color: #000 !important;\n    box-shadow: none !important;\n    text-shadow: none !important;\n  }\n\n  /* Links */\n  a,\n  a:visited {\n    text-decoration: underline;\n  }\n\n  a[href]::after {\n    content: \" (\" attr(href) \")\";\n    font-size: 0.8em;\n  }\n\n  a[href^=\"#\"]::after,\n  a[href^=\"javascript:\"]::after {\n    content: \"\";\n  }\n\n  /* Images */\n  img {\n    max-width: 100% !important;\n    page-break-inside: avoid;\n  }\n\n  /* Headings */\n  h1, h2, h3, h4, h5, h6 {\n    page-break-after: avoid;\n    page-break-inside: avoid;\n  }\n\n  /* Paragraphs */\n  p {\n    orphans: 3;\n    widows: 3;\n  }\n\n  /* Tables */\n  table {\n    border-collapse: collapse !important;\n  }\n\n  thead {\n    display: table-header-group;\n  }\n\n  tr {\n    page-break-inside: avoid;\n  }\n\n  /* Hide non-essential UI chrome */\n  .vd-navbar,\n  .vd-navbar-menu,\n  .vd-navbar-toggle,\n  .vd-navbar-overlay,\n  .vd-sidenav,\n  .vd-sidenav-overlay,\n  .vd-modal,\n  .vd-modal-backdrop,\n  .vd-tooltip,\n  .vd-dropdown-menu,\n  .vd-btn-group,\n  .vd-pagination,\n  .skip-link,\n  .vd-d-print-none {\n    display: none !important;\n  }\n\n  /* Show print-only elements */\n  .vd-d-print-block {\n    display: block !important;\n  }\n\n  .vd-d-print-inline {\n    display: inline !important;\n  }\n\n  .vd-d-print-inline-block {\n    display: inline-block !important;\n  }\n\n  /* Container adjustments */\n  .vd-container,\n  .vd-container-responsive {\n    width: 100% !important;\n    max-width: none !important;\n    padding: 0 !important;\n  }\n\n  /* Pre and code blocks */\n  pre,\n  blockquote {\n    border: 1px solid #999;\n    page-break-inside: avoid;\n  }\n\n  pre {\n    white-space: pre-wrap !important;\n  }\n}\n\n"],"names":[]}