html[data-theme="dark"] .follow {
  background-color: rgba(255, 255, 255, 0.1) !important;
  color: var(--base);

}
.scale-noti:hover{
    transform: scale(1.01);
    background-color:#f9ebff !important; 
    
}
.tin-border{
    background-color:#ffffff38;
}
.unread-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  background-color:var(--lavender);
  border-radius: 50%;
  box-shadow: 0 0 6px rgba(192,128,252,0.3);
  animation: pulseDot 1.6s infinite ease-in-out;
}

@keyframes pulseDot {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.3); opacity: 0.6; }
}

#parent-sidebar .sidebar-menu-area{
    max-height: calc(68vh);
    height: fit-content;
}
.bg-blur{
  background-color:rgba(0,0,0,0.3) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
}

#previewModal,#emModal, #tagModal, #categoryModal ,#descriptionModal, #loading {
  z-index: 1070; /* 2nd modal on top */
}

.modal-radius-outer{
    border-radius:34px;
}
.modal-radius-inner{
    border-radius:30px;
}
.share-title:focus,
.share-title.active {
  border-bottom-color: #c05af4 !important; /* active/focus color */
}

button:disabled,
span[disabled] {
  opacity: 1;           /* default opacity remove */
  color: #fff !important;
  
  cursor: not-allowed;
}

.filter-chip:disabled {
    color: #94a3b8 !important;
    background: rgba(255, 255, 255, 0.5) !important;
    border-color: rgba(220, 224, 219, 0.5) !important;
}

.tag-chip{
    background: #f3e8ff;
    color: #6d28d9;
    border-color: #e9d5ff;
}

.tag-chip-category{
    /*background: #ecfeff;*/
    /*color: #0e7490;*/
    /*border: 1px solid #a5f3fc;*/
    background: #f0fdf4;   /* light green background */
    color: #166534;         /* dark green text */
    border: 1px solid #bbf7d0;  
}

#descriptionPreview {
  max-height: 5rem;           /* limit height */
  overflow: hidden;           /* hide extra text */
  line-height: 1.4;           /* line spacing fix */
  display: block;             /* ensure block layout */
  position: relative;
}
#descriptionPreview::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1.5rem;
  background: linear-gradient(to bottom, transparent, white);
}
.upload-svg-fragment .index-upload-box .image-upload__box .image-upload__boxInner .image-upload__image{
    width:100px !important;
}

.collapse, .alt{
    height:15px;
    opacity: 0.4;
    transition: opacity 0.3s ease;
    
}
.collapse:hover, .logo-wrapper:hover .alt{
    opacity: 1;
}

.tooltip .tooltip-inner {
  margin-left:2.8rem;
  
  padding: 4px 10px !important;  
}


.tooltip .tooltip-arrow {
  display: none !important;
}

/* Mobile hamesha show */
.sidebar-wrapper {
    display: block;
}

/* Desktop */
@media (min-width: 768px) {
    .hide-desktop {
        display: none;
    }
    .show-desktop {
        display: block;
    }
}


#splash {
  position: fixed;
  inset: 0;
  background-color: #fff; /* Bootstrap primary */
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  z-index: 2000;
  color: #fff;
  /* transition: opacity 0.5s ease, visibility 0.5s ease; */
}

body.splash-active {
  overflow: hidden;
}

#pro-cover-img{
      order:1;
  }
  
.thumbnail{
    width: 100%;
    max-width: 814px;     
    max-height: 458px;     
    overflow: hidden;      
    position: relative;
}

.thumbnail img {
  width: 100%;
  height: auto;
  
  background: #000;     /* optional: khali jagah ka background */
}

/*profile top img */

.file-drop-area {
    transition: all 0.2s linear;
}

.file-drop-area.active {
    outline: 2px dashed  #C253F9; /* Lavender / Red highlight */
    outline-offset: -6px; /* ensures outline fits inside border */
}
.file-preview img,
.file-preview video {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 8px;
}
.follow:hover {
  background-color: #C253F91A;
  color: #c05af4;
  /*border-color: #e6f5ff;*/
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.hover-dark:hover {
  background-color: var(--lavender) !important;
  color: #fff;
    
}
  
.figma {
  color: #f1327a;
}
.Design {
  min-width: 300px;
  min-height: 550px;
}
#externalPreviewArea img{
    width:100%;
    height:49px;
    object-fit:cover;
}
/* new design */
.new {
    position: relative;
    width: 40px;
    height: 22px;
    margin-left: 8px;
    /* background: #5d5d5d; */
    border-radius: 11px;
    overflow: hidden;
}
.new:before {
    /* background: -webkit-gradient(linear, left top, left bottom, from(#262626), to(#1D1C1E)); */
    /* background: linear-gradient(#8a8a8a, #686868); */
    border-radius: 11px;
}
.new:before, .new:after {
    content: "";
    position: absolute;
    inset: 0;
}
.new__stroke {
    position: absolute;
    top: 0;
    left: 0;
    width: 32px;
    height: 32px;
    background: var(--lavender);
    border-radius: 50%;
    offset-path: path("M11 1H29C35 1 39 5 39 11C39 17 35 21 29 21H11C5 21 1 17 1 11C1 5 5 1 11 1Z");
    -webkit-animation: new-stroke 4s linear infinite;
    animation: new-stroke 4s linear infinite;
}
html[data-theme="dark"] .new__stroke  {
  background-color: var(--lavender) !important;

}
.new__inner {
    position: absolute;
    inset: 1px;
    z-index: 2;
    border-radius: 10px;
    overflow: hidden;
}
 .new:after {
    inset: 1px;
    /* background: #1D1C1E; */
    background-color: var(--base);
    border-radius: 10px;
}
.new:before, .header .new:after {
    content: "";
    position: absolute;
    inset: 0;
}
.new__inner span{
position: absolute;
        top: 0;
        left: 0;
        min-width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 2px;
        font-size: 10px;
        font-weight: 500;
        color: white;
        &:nth-child(1) {
          animation: new-text-1 4s linear infinite; }
        &:nth-child(2) {
          animation: new-text-2 4s linear infinite; } } 
.new__inner span:nth-child(1) {
    -webkit-animation: new-text-1 4s linear infinite;
    animation: new-text-1 4s linear infinite;
}

@keyframes new-stroke {
  0% {
    offset-distance: 100%; }
  100% {
    offset-distance: 0%; } }

@keyframes new-text-1 {
  0% {
    transform: translateX(0); }
  100% {
    transform: translateX(-100%); } }

@keyframes new-text-2 {
  0% {
    transform: translateX(100%); }
  100% {
    transform: translateX(0%); } }



/* end of new  */

.like-animate {
  animation: pop 0.3s ease;
}

@keyframes pop {
  0%   { transform: scale(.2); }
  50%  { transform: scale(1.4); }
  100% { transform: scale(1); }
}

/* Sparkle / Burst */
.burst {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 80px;
  height: 80px;
  background: radial-gradient(circle, #ff3e83 20%, transparent 70%);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0);
  pointer-events: none;
  border-radius: 50%;
  z-index: -1;
}

.burst-animate {
  animation: burst 0.4s ease-out;
}

@keyframes burst {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(0.2);
  }
  80% {
    opacity: 0.6;
    transform: translate(-50%, -50%) scale(1.5);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(2);
  }
}
.like-btn.liked svg path {
  fill: #f1327a;
  stroke: #f1327a;
}

/* index post design */

/* button effect*/
.ti-btn:hover:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(194, 83, 249, 0.15);
    border-color: rgba(194, 83, 249, 0.3);
}
.get:hover{
    border:4px solid var(--netural-900);
}
.ti-btn {
      position: relative;
      overflow: hidden;
    }

    .ripple {
      position: absolute;
      width: 20px;
      height: 20px;
      background: var(--base);
      border-radius: 50%;
      transform: scale(0);
      animation: ripple-animation 0.6s linear;
      pointer-events: none;
    }

    @keyframes ripple-animation {
      to {
        transform: scale(10);
        opacity: 0;
      }
    }
    
/*end button effect*/
.post {
  max-width: 723px;
  /*height: 100%;*/
  max-height: 503px;
  position: relative;
}

/* =========== Typing effect =============  */

.text-typing {
  white-space: nowrap;
  overflow: hidden;
  border-right: 2px solid var(--lavender);
  width: 0;
 
  animation: typing 6s steps(40, end) forwards, blink 0.7s step-end infinite;
  animation-delay: 0s;
  animation-iteration-count: infinite;
  animation-fill-mode: forwards;
  /*font-family: monospace;*/
  display: inline-block;
}

@keyframes typing {
  0%   { width: 0; }
  40%  { width: 68%; }
  60%  { width: 68%; }
  80%  { width: 0; }
  100% { width: 0; }
}

@keyframes blink {
  50% { border-color: transparent; }
}
/* ===================== */

/* hover img change */
.img-hover {
  position: relative;
}

.default-img,
.hover-img {
  position: absolute;
  top: 0;
  left: 0;
  transition: opacity 0.5s ease-in-out;
}

.default-img {
  opacity: 1;
  z-index: 1;
}

.hover-img {
  opacity: 0;
  z-index: 2;
}

/* On hover */
.img-hover:hover .default-img {
  opacity: 0;
}

.img-hover:hover .hover-img {
  opacity: 1;
}

.form-select {
  background-position: right .8rem center; /* pehle .75rem tha */
}

/* details page img */
.image-upload__boxInner{
  width:100%;
  max-height: 658px;
  border-radius:.5rem;

  
}
.image-upload__boxInner .image-upload__image{
  width: 100%;
  height:100%;
  object-fit: contain;
  padding: 1rem;
    
  border-radius: .6rem;

}


/*gradient hover */
.gradient-btn {
      display: inline-block;
      
      /*color: #fff;*/
      border: none;
      border-radius: 8px;
      cursor: pointer;
      /* Default: black */
      /*background-color: #000;*/
      background-size: 300% 300%;
      transition: background 0.6s ease;
    }

    /* Hover: gradient + animation */
    .gradient-btn:hover {
        color: #fff;
      background-image: linear-gradient(
        117.09deg,
        rgb(34, 40, 52) -5%,
        rgb(106, 87, 227) 10%,
        rgb(205, 116, 221) 50%,
        rgb(106, 87, 227) 90%,
        rgb(34, 40, 52) 105%
      );
      animation: gradientMove 3s linear infinite;
    }

    @keyframes gradientMove {
      0% { background-position: 10% 50%; }
      50% { background-position: 90% 50%; }
      100% { background-position: 10% 50%; }
    }
    
    
/*  share modal */
.share{
  max-width: 730px;
  /*height: 19rem;*/
}

.share-icon:hover{
  background-color: #efedfe !important;
  color:#C253F9 !important;
}
.share-icon{
  transition: background-color 0.3s ease;
}
.share-icon:hover span svg{ 
    color:#C253F9;
}

.upload-modal{
    height:100%;
    justify-content:end;
    
}
.sidebararea:hover::-webkit-scrollbar-thumb {
  background-color: var(--neutral-200);
}

.sidebararea::-webkit-scrollbar {
  width: 6px;
  background-color: var(--white);
}

.sidebararea::-webkit-scrollbar-thumb {
  background-color: var(--white);
}

.custom-card {
  width: 100%;
  /* max-width: 373px; */
  height: auto;
  /*aspect-ratio: 375 / 285;*/
  border-radius: 8px;
  overflow: hidden;
  position: relative;

  border-radius: 0.8rem;
}
.custom-card .card-body img {
  width: 100%;
  height: 100%;
  aspect-ratio: 70 / 39;
  object-fit: contain;
  background-color: rgb(228, 228, 228);
}
.custom-card a {
  width: 100%;
  min-height: 87%;
  max-height: 89%;
  position: absolute;
  opacity: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.custom-card:hover a {
  opacity: 100%;
  background-color: rgba(224, 224, 224, 0.583);
}

.customs-card .card-body:hover #fig-icon, .customs-card .card-body:hover #Title{
  opacity: 100;
}
#fig-icon{
  position: absolute;
  top: .5rem;
  right: 0.5rem;
  opacity: 0;
}
#Title{
  max-width: 220px;
  position: absolute;
  bottom: 0rem;
  left: 1rem;
  opacity: 0;
}

/* tabs dsign */
.tabs a {
  font-size: 12px;
}
.tags{
  height: 5rem;
}
.scrolls::-webkit-scrollbar {
  height: 4px;
}

.scrolls::-webkit-scrollbar-track {
  background-color: rgb(217, 224, 225);
  border-radius: 12px;
  visibility: hidden;
}

.scrolls::-webkit-scrollbar-thumb {
  background-color: rgb(146, 147, 146);
  border-radius: 12px;
  visibility: hidden;
}

.scrolls::-webkit-scrollbar-thumb:hover {
  background-color: rgb(100, 100, 100); /* Darker on hover */
  min-width: 28px !important; /* Increase width on hover */
  visibility: visible;
  min-height: 2px !important; /* Maintain the scrollbar height */
}

.group {
    aspect-ratio: 16 / 9;
    /*min-height:384px ;*/
    
}
.group img {
  height: 100%;
  width: 100%;
  object-fit: contain;
}
.group:hover .target {
  opacity: 10;
  background-color: rgba(224, 224, 224, 0.583);
}
.target {
  opacity: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.figma-border {
  padding: 0.5625rem 0.75rem;
  font-size: 1rem;
  font-weight: 500;
  border: 1px solid;
  color: #f1327a;
  border-image: linear-gradient(to-top, #f1327a, #f1327a45, #f1327a);
  border-image-slice: 1;
}

/* search  categories */
.z-sticky {
  position: sticky;
  top: 4.5rem;
  z-index: 4;
}

/* details page img */
.page{
  width: 100%;
  /*height: 658px !important;*/
 
}
.page img{
 width:100%;
 height:100%;
 object-fit: contain !important;
}

.cover{
  position: relative;
}
.cover:hover .uploadBtn{
  opacity: 100;
}

/* cover profile   */
.uploadBtn {
  padding: 0.5rem 1.2rem;
  right: 0;
  border-top-left-radius: 1rem;
  display: flex;
  position: absolute;
  justify-content: space-between;
  bottom: 0;
  opacity: 0;

}

.btn-quote {
    padding: 2px;
    position: relative;
    overflow: hidden;
    display: inline-block;
    font-size: 1.25rem;
    border-radius: 2rem;
}
text-hover-pink{
    color:var(--lavender);
}

.btn-quote:hover{
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.btn-quote:before {
    content: " ";
    position: absolute;
    top: 0;
    left: 0;
    width: 200%;
    height: 100%;
    /*background: linear-gradient(22deg, #ffffff1d, #f1327a , #ffffff1d );*/
    background: linear-gradient(90deg, rgb(243, 202, 77) 0%, rgb(255, 152, 154) 42.88%, rgb(203, 171, 255) 94.62%);
    background-size: 50% 100%;
    border-radius: 2rem;
}

.btn-quote:focus:before,.btn-quote:hover:before {
    animation: gradientAni .75s linear infinite
}
#btn-quote:before{
    animation: gradientAni .75s linear infinite
}
@keyframes gradientAni {
    to {
        transform: translateX(-50%)
    }
}

.btn-quote span {
    display: block;
    position: relative;
    padding: 0.5rem 1rem;
    font-weight: 500;
    z-index: 2;
    
}
/* Profile  */
.profile-wrapper {
        position: relative;
       
}
.glass{
  width: 7rem;
  height: 7rem;
  padding: .7rem;
  background-color: rgba(255, 255, 255, 0.451);
  /*margin-top: -8rem;*/
  border-radius: 50% ;

}

.glass img{
  /*width: 20rem;*/
  /*height: 20rem;*/
width:100%;
height:100%;
  object-fit:cover;
  border-radius: 50%;
}

.glass .coverPro{
    width: 100%;
    height: 100%;
    border-radius: 50%;
}
.top-img{
  width: 100%;
  height: 200px;
  overflow: hidden;
}
.top-img img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  
}



#uploadProfile {
        width: 7rem;
        height: 100%;
        position: absolute;
        background-color: rgba(255, 255, 255, 0.457);
        border-radius: 50%;
        padding: 8px;
        display:flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease;
        top: -0rem;
        left:0;
}

.profile-wrapper:hover #uploadProfile {
    opacity: 1;
    visibility: visible;

}
.tab-pane:not(.active) {
    display: none !important;
  }
.search-wrapper {
        border: 1px solid #ccc;
        border-radius: 20px;
        transition: border-color 0.3s ease;
}
.search-wrapper:hover {
    border-color: #c05af4 ; 
}
.search-wrapper:focus-within {
    border-color: #c05af457 ; 
}
    
.customs-card {
  width: 100%;
  /* max-width: 373px; */
  height: auto;
  /*aspect-ratio: 375 / 241; */
  border-radius: 8px;
  overflow: hidden;
  border-radius: 0.8rem;
}
.customs-card .card-body{
  position: relative;
}

.customs-card .card-body img{
  width: 100%;
  height: 100%;    
  aspect-ratio: 70 / 39;
  object-fit:contain;
  overflow: hidden;
}
.customs-card .card-body:hover a{
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  left: 0;
  transition: opacity 300ms ease;
  bottom: 0;
  opacity: 1;
  /* background-image: linear-gradient( #d6d6d62c 75%, #94949441 25%); */
  background-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 62%, rgba(0, 0, 0, 0.00345888) 63.94%, rgba(0, 0, 0, 0.014204) 65.89%, rgba(0, 0, 0, 0.0326639) 67.83%, rgba(0, 0, 0, 0.0589645) 69.78%, rgba(0, 0, 0, 0.0927099) 71.72%, rgba(0, 0, 0, 0.132754) 73.67%, rgba(0, 0, 0, 0.177076) 75.61%, rgba(0, 0, 0, 0.222924) 77.56%, rgba(0, 0, 0, 0.267246) 79.5%, rgba(0, 0, 0, 0.30729) 81.44%, rgba(0, 0, 0, 0.341035) 83.39%, rgba(0, 0, 0, 0.367336) 85.33%, rgba(0, 0, 0, 0.385796) 87.28%, rgba(0, 0, 0, 0.396541) 89.22%, rgba(0, 0, 0, 0.4) 91.17%);

}

.social{
  position: relative;
}


.social-icons{
  position: absolute;
  top: -225px;
  right: 0rem;
  width: 2.5rem;
  height: 16rem;
  transform: scale(0);
  transition: all 0.5s ease;

}

.social:hover .social-icons{
  transform: scale(1);

}
/* edit profile */
.edit input {
  width: 24.25rem;
  height: 2.7rem;
  background-color: var(--neutral-50);
  border: 1px solid var(--neutral-50);
  border-radius: 2rem;
  -webkit-border-radius: 2rem;
  -moz-border-radius: 2rem;
  -ms-border-radius: 2rem;
  -o-border-radius: 2rem;
  padding-block: 0.3125rem;
  padding-inline-start: 1.25rem;
  padding-inline-end: 2.7rem;
  color: var(--text-primary-light);
}


.edit input:focus {
  border: 1px solid var(--input-form-light);
  border-color:#f1327a4f;
}
.edit input:hover {
    border-color: #f1327a4f ; 
}
@media (min-width: 1400px) {
  .monthly {
    width: 393px;
    margin-right: 0.7rem;
  }
  .sidebar-menu li a {
    font-size: 0.9rem;
  }
  .mx{
    margin: 0 1rem;
  }
}

.gradient-border {
  background: linear-gradient(to right, #F1327A, #1380EC1A);
  padding: 2px; 
  border-radius: 2rem;
  display: inline-block;
}
.box{
  background: white;
  border-radius: 50%;
  
}

.notify{
    top: -2px;
    right: -7px;
    
}
.fade-out {
    opacity: 0;
    transition: opacity 0.5s ease-out;
}

/*upload animation btn*/
.blur-gradient {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 500;
  margin-right: 11px;
  font-size: 14px;
  width: fit-content;
  border-radius: 40px;
  transition: 150ms ease-out;
  background: rgb(255, 255, 255);
  gap: 6px;
}

.blur-gradient::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -1.5px;
  border-radius: 40px;
  background: linear-gradient(
    90deg,
    rgb(243, 202, 77) 0%,
    rgb(255, 152, 154) 42.88%,
    rgb(203, 171, 255) 94.62%
  );
}

.blur-gradient::after {
  content: "";
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  z-index: -1;
  height: 100%;
  width: 100%;
  transform: scale(0.9) translateZ(0px);
  filter: blur(10px);
  background: linear-gradient(
      to left,
      rgb(255, 87, 112),
      rgb(228, 66, 141),
      rgb(196, 45, 168),
      rgb(158, 22, 195),
      rgb(101, 1, 222),
      rgb(158, 22, 195),
      rgb(196, 45, 168),
      rgb(228, 66, 141),
      rgb(255, 87, 112)
    )
    0% 0% / 200% 200%;
  animation: 1.25s linear 0s infinite normal none running shake;
}


@keyframes shake {
  0% {
    background-position: 0% 50%; }
  100% {
    background-position: 200% 50%; }
}
body.profile-page {
    background-color: #fff;  /* desired color */
}

/*tab bounce    */
.indicator {
    position: absolute;
    top: 6px;
    height: 45px;
    background: #efedfe !important;
    border-radius: 18px;
    transition: width 0.6s cubic-bezier(.68,-0.55,.27,1.55),
                left 0.6s cubic-bezier(.68,-0.55,.27,1.55);
    
}

.img-overlay{
     opacity: 0;
}

.thumbnail:hover .img-overlay{
     opacity: 1;
     background: #0000009c;
     transition: opacity 0.3s ease;
}


/* Common styles for all cover images */
#coverContainer img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 20px;
    transition: all 0.3s ease;
}

.thumbnail video {
    width: 100%;
    height: 100%;
    object-fit: cover; /* video ko container me fit kare */
    border-radius: 20px; /* same as images */
}

/* 16:9 ratio */
.ratio-16-9 {
    aspect-ratio: 16 / 9;
}

/* 4:5 ratio */
.ratio-4-5 {
    aspect-ratio: 4 / 5;
}

/* 4:3 ratio */
.ratio-4-3 {
    aspect-ratio: 4 / 3;
}

/* 9:16 ratio */
.ratio-9-16 {
    aspect-ratio: 9 / 16;
}

/* Optional: cover overlay adjustments */
#coverContainer .img-overlay {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    inset: 0;
    border-radius: 20px;
    background: rgba(0, 0, 0, 0.4);
    transition: background 0.3s ease;
}

#coverContainer:hover .img-overlay {
    background: rgba(0, 0, 0, 0.25);
}



/*btn effect */

/*Editer style - Professional Typography */

.ql-editor::before {
  font-size: 14px !important;
  color: var(--text-secondary-light);
  padding-top: .6rem;
}

/* Headings - Professional Hierarchy */
.ql-editor h1 {
    font-size: 1.875rem !important;      /* 30px */
    font-weight: 700 !important;
    color: var(--text-primary-light) !important;
    line-height: 1.3 !important;
    margin-top: 1.5rem !important;
    margin-bottom: 1rem !important;
}

.ql-editor h2 {
    font-size: 1.5rem !important;        /* 24px */
    font-weight: 600 !important;
    color: var(--text-primary-light) !important;
    line-height: 1.4 !important;
    margin-top: 1.25rem !important;
    margin-bottom: 0.875rem !important;
}

.ql-editor h3 {
    font-size: 1.25rem !important;       /* 20px */
    font-weight: 600 !important;
    color: var(--text-primary-light) !important;
    line-height: 1.4 !important;
    margin-top: 1rem !important;
    margin-bottom: 0.75rem !important;
}

.ql-editor h4 {
    font-size: 1.125rem !important;      /* 18px */
    font-weight: 600 !important;
    color: var(--text-primary-light) !important;
    line-height: 1.5 !important;
    margin-top: 0.875rem !important;
    margin-bottom: 0.625rem !important;
}

.ql-editor h5 {
    font-size: 1rem !important;          /* 16px */
    font-weight: 600 !important;
    color: var(--text-primary-light) !important;
    line-height: 1.5 !important;
    margin-top: 0.75rem !important;
    margin-bottom: 0.5rem !important;
}

.ql-editor h6 {
    font-size: 0.875rem !important;      /* 14px */
    font-weight: 600 !important;
    color: var(--text-primary-light) !important;
    line-height: 1.5 !important;
    margin-top: 0.625rem !important;
    margin-bottom: 0.5rem !important;
}

/* Paragraphs */
.ql-editor p {
    font-size: var(--font-md) !important;  /* 16px */
    color: var(--neutral-600) !important;
    line-height: 1.7 !important;
    margin-bottom: 1rem !important;
}

/* Strong/Bold Text - Moderate Weight */
.ql-editor strong {
    font-weight: 600 !important;
    color: var(--text-primary-light) !important;
}

/* Ordered Lists - Shows Numbers */
.ql-editor ol {
    font-size: var(--font-md) !important;  /* 16px */
    color: var(--neutral-600) !important;
    line-height: 1.7 !important;
    margin-left: 1.5rem !important;
    margin-bottom: 1rem !important;
    padding-left: 0.5rem !important;
    list-style-type: decimal !important;
    list-style-position: outside !important;
}

.ql-editor ol li {
    display: list-item !important;
    padding-left: 0.5rem !important;
    margin-bottom: 0.5rem !important;
}

/* Unordered Lists - Shows Bullets */
.ql-editor ul {
    font-size: var(--font-md) !important;  /* 16px */
    color: var(--neutral-600) !important;
    line-height: 0.5 !important;
    margin-left: 1.5rem !important;
    margin-bottom: 1rem !important;
    padding-left: 0.5rem !important;
    list-style-type: disc !important;
    list-style-position: outside !important;
}

.ql-editor ul li {
    display: list-item !important;
    padding-left: 0.5rem !important;
    margin-bottom: 0.5rem !important;
}

/* Nested Lists */
.ql-editor ol ol,
.ql-editor ul ul {
    margin-top: 0.5rem !important;
    margin-bottom: 0.5rem !important;
}

.ql-editor ol ul,
.ql-editor ul ol {
    margin-top: 0.5rem !important;
    margin-bottom: 0.5rem !important;
}

/* Quill Size Classes */
.ql-editor .ql-size-large {
    font-size: 1.25rem !important;       /* 20px */
    color: var(--text-primary-light) !important;
}

.ql-editor .ql-size-small {
    font-size: 0.875rem !important;      /* 14px */
}

.ql-editor .ql-size-huge {
    font-size: 1.75rem !important;       /* 28px */
    color: var(--text-primary-light) !important;
}

#hoverText {
    background: linear-gradient(to left, rgb(255, 87, 112), rgb(228, 66, 141), rgb(196, 45, 168), rgb(158, 22, 195), rgb(101, 1, 222), rgb(158, 22, 195), rgb(196, 45, 168), rgb(228, 66, 141), rgb(255, 87, 112)) 0% 0% / 200% 200%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 600;
}

/* Figmaas Filter Chips Component */

.figmaas-filter-chips-container {
    display: flex;
    align-items: center;
    gap: 12px;
    overflow-x: auto;
    overflow-y: visible;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 4px 0;
}

.figmaas-filter-chips-container::-webkit-scrollbar {
    display: none;
}

.filter-label {
    color: #111827;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    margin: 0;
}

.filter-chips-wrapper {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    padding: 4px 0;
}

.filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 20px;
    border-radius: 9999px;
    font-size:12px;
    font-weight: 400;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
    user-select: none;
    position: relative;
    overflow: hidden;
    
    /* Glassy inactive state */
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(220, 224, 219, 0.5);
    color: #374151;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.filter-chip::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 9999px;
    padding: 1px;
    background: linear-gradient(135deg, rgba(194, 83, 249, 0.1), rgba(194, 83, 249, 0.05));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.filter-chip:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(194, 83, 249, 0.15);
    border-color: rgba(194, 83, 249, 0.3);
}

.filter-chip:hover::before {
    opacity: 1;
}

/* Active state with gradient */

.filter-chip.active {
    background: linear-gradient(135deg, #c253f9 0%, #a641d4 100%) !important;
    color: #ffffff !important;
    border-color: transparent;
    box-shadow: 0 4px 16px rgba(194, 83, 249, 0.35),
                0 0 0 1px rgba(255, 255, 255, 0.1) inset !important;
    font-weight: 600;
}

.filter-chip.active::before {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.05));
    opacity: 1;
}

.filter-chip.active:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 6px 20px rgba(194, 83, 249, 0.4),
                0 0 0 1px rgba(255, 255, 255, 0.2) inset;
}

.filter-chip:active {
    transform: translateY(0) scale(0.98);
}

.chip-icon {
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

.filter-chip.active .chip-icon {
    transform: rotate(360deg);
}