/* Utils */

.sr-only{
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.pointer-events-none{
  pointer-events: none;
}

.pointer-events-auto{
  pointer-events: auto;
}

.visible{
  visibility: visible;
}

.invisible{
  visibility: hidden;
}

.collapse{
  visibility: collapse;
}

.static{
  position: static;
}

.fixed{
  position: fixed;
}

.absolute{
  position: absolute;
}

.relative{
  position: relative;
}

.sticky{
  position: sticky;
}

.inset-0{
  inset: 0px;
}

.\!bottom-0{
  bottom: 0px !important;
}

.\!left-2{
  left: 0.5rem !important;
}

.\!left-4{
  left: 1rem !important;
}

.\!right-auto{
  right: auto !important;
}

.\!top-11{
  top: 2.75rem !important;
}

.-bottom-1{
  bottom: -0.25rem;
}

.-left-\[12vw\]{
  left: -12vw;
}

.-right-36{
  right: -9rem;
}

.-top-3{
  top: -0.75rem;
}

.bottom-0{
  bottom: 0px;
}

.bottom-2{
  bottom: 0.5rem;
}

.bottom-32{
  bottom: 8rem;
}

.bottom-4{
  bottom: 1rem;
}

.bottom-48{
  bottom: 12rem;
}

.bottom-5{
  bottom: 1.25rem;
}

.bottom-64{
  bottom: 16rem;
}

.bottom-8{
  bottom: 2rem;
}

.bottom-80{
  bottom: 20rem;
}

.bottom-96{
  bottom: 24rem;
}

.bottom-\[-220px\]{
  bottom: -220px;
}

.bottom-\[15px\]{
  bottom: 15px;
}

.bottom-\[50px\]{
  bottom: 50px;
}

.bottom-\[70px\]{
  bottom: 70px;
}

.bottom-\[75px\]{
  bottom: 75px;
}

.bottom-\[8px\]{
  bottom: 8px;
}

.left-0{
  left: 0px;
}

.left-0\.5{
  left: 0.125rem;
}

.left-1{
  left: 0.25rem;
}

.left-1\/2{
  left: 50%;
}

.left-10{
  left: 2.5rem;
}

.left-2{
  left: 0.5rem;
}

.left-24{
  left: 6rem;
}

.left-3{
  left: 0.75rem;
}

.left-4{
  left: 1rem;
}

.left-\[-3px\]{
  left: -3px;
}

.left-\[2px\]{
  left: 2px;
}

.left-auto{
  left: auto;
}

.left-full{
  left: 100%;
}

.right-0{
  right: 0px;
}

.right-1{
  right: 0.25rem;
}

.right-2{
  right: 0.5rem;
}

.right-20{
  right: 5rem;
}

.right-3{
  right: 0.75rem;
}

.right-4{
  right: 1rem;
}

.right-5{
  right: 1.25rem;
}

.right-9{
  right: 2.25rem;
}

.right-\[-3px\]{
  right: -3px;
}

.right-\[10px\]{
  right: 10px;
}

.right-\[15px\]{
  right: 15px;
}

.right-\[20px\]{
  right: 20px;
}

.right-\[40px\]{
  right: 40px;
}

.top-0{
  top: 0px;
}

.top-0\.5{
  top: 0.125rem;
}

.top-1{
  top: 0.25rem;
}

.top-1\/2{
  top: 50%;
}

.top-10{
  top: 2.5rem;
}

.top-12{
  top: 3rem;
}

.top-2{
  top: 0.5rem;
}

.top-24{
  top: 6rem;
}

.top-3{
  top: 0.75rem;
}

.top-32{
  top: 8rem;
}

.top-4{
  top: 1rem;
}

.top-5{
  top: 1.25rem;
}

.top-\[-100px\]{
  top: -100px;
}

.top-\[-15px\]{
  top: -15px;
}

.top-\[-20px\]{
  top: -20px;
}

.top-\[-24\%\]{
  top: -24%;
}

.top-\[0px\]{
  top: 0px;
}

.top-\[10px\]{
  top: 10px;
}

.top-\[17px\]{
  top: 17px;
}

.top-\[20px\]{
  top: 20px;
}

.top-\[31\%\]{
  top: 31%;
}

.top-\[450px\]{
  top: 450px;
}

.top-\[50\%\]{
  top: 50%;
}

.top-\[91\.55px\]{
  top: 91.55px;
}

.top-full{
  top: 100%;
}

.top-unset{
  top: unset;
}

.\!z-\[99998\]{
  z-index: 99998 !important;
}

.\!z-\[99999\]{
  z-index: 99999 !important;
}

.-z-\[1\]{
  z-index: -1;
}

.z-0{
  z-index: 0;
}

.z-10{
  z-index: 10;
}

.z-20{
  z-index: 20;
}

.z-30{
  z-index: 30;
}

.z-40{
  z-index: 40;
}

.z-50{
  z-index: 50;
}

.z-\[-1\]{
  z-index: -1;
}

.z-\[-2\]{
  z-index: -2;
}

.z-\[1000\]{
  z-index: 1000;
}

.z-\[1003\]{
  z-index: 1003;
}

.z-\[100\]{
  z-index: 100;
}

.z-\[1\]{
  z-index: 1;
}

.z-\[2\]{
  z-index: 2;
}

.z-\[3\]{
  z-index: 3;
}

.z-\[5\]{
  z-index: 5;
}

.z-\[6\]{
  z-index: 6;
}

.z-\[99\]{
  z-index: 99;
}

.col-span-12{
  grid-column: span 12 / span 12;
}

.col-span-2{
  grid-column: span 2 / span 2;
}

.col-span-3{
  grid-column: span 3 / span 3;
}

.col-span-4{
  grid-column: span 4 / span 4;
}

.col-span-5{
  grid-column: span 5 / span 5;
}

.col-span-6{
  grid-column: span 6 / span 6;
}

.col-span-7{
  grid-column: span 7 / span 7;
}

.col-span-8{
  grid-column: span 8 / span 8;
}

.col-span-9{
  grid-column: span 9 / span 9;
}

.col-span-full{
  grid-column: 1 / -1;
}

.col-start-2{
  grid-column-start: 2;
}

.\!m-0{
  margin: 0px !important;
}

.m-0{
  margin: 0px;
}

.m-auto{
  margin: auto;
}

.\!mx-auto{
  margin-left: auto !important;
  margin-right: auto !important;
}

.-mx-4{
  margin-left: -1rem;
  margin-right: -1rem;
}

.-mx-8{
  margin-left: -2rem;
  margin-right: -2rem;
}

.mx-2{
  margin-left: 0.5rem;
  margin-right: 0.5rem;
}

.mx-4{
  margin-left: 1rem;
  margin-right: 1rem;
}

.mx-8{
  margin-left: 2rem;
  margin-right: 2rem;
}

.mx-auto{
  margin-left: auto;
  margin-right: auto;
}

.my-0{
  margin-top: 0px;
  margin-bottom: 0px;
}

.my-12{
  margin-top: 3rem;
  margin-bottom: 3rem;
}

.my-2{
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

.my-3{
  margin-top: 0.75rem;
  margin-bottom: 0.75rem;
}

.my-4{
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.my-5{
  margin-top: 1.25rem;
  margin-bottom: 1.25rem;
}

.my-6{
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}

.\!mb-2{
  margin-bottom: 0.5rem !important;
}

.-mb-1{
  margin-bottom: -0.25rem;
}

.-mb-2{
  margin-bottom: -0.5rem;
}

.-mb-4{
  margin-bottom: -1rem;
}

.-mr-2{
  margin-right: -0.5rem;
}

.-mt-12{
  margin-top: -3rem;
}

.-mt-8{
  margin-top: -2rem;
}

.mb-0{
  margin-bottom: 0px;
}

.mb-1{
  margin-bottom: 0.25rem;
}

.mb-1\.5{
  margin-bottom: 0.375rem;
}

.mb-10{
  margin-bottom: 2.5rem;
}

.mb-12{
  margin-bottom: 3rem;
}

.mb-16{
  margin-bottom: 4rem;
}

.mb-2{
  margin-bottom: 0.5rem;
}

.mb-20{
  margin-bottom: 5rem;
}

.mb-3{
  margin-bottom: 0.75rem;
}

.mb-4{
  margin-bottom: 1rem;
}

.mb-5{
  margin-bottom: 1.25rem;
}

.mb-6{
  margin-bottom: 1.5rem;
}

.mb-7{
  margin-bottom: 1.75rem;
}

.mb-8{
  margin-bottom: 2rem;
}

.mb-9{
  margin-bottom: 2.25rem;
}

.mb-\[-6px\]{
  margin-bottom: -6px;
}

.mb-\[100px\]{
  margin-bottom: 100px;
}

.mb-\[1px\]{
  margin-bottom: 1px;
}

.mb-\[24px\]{
  margin-bottom: 24px;
}

.mb-\[30px\]{
  margin-bottom: 30px;
}

.mb-\[7px\]{
  margin-bottom: 7px;
}

.me-1{
  margin-inline-end: 0.25rem;
}

.me-2{
  margin-inline-end: 0.5rem;
}

.me-2\.5{
  margin-inline-end: 0.625rem;
}

.me-3{
  margin-inline-end: 0.75rem;
}

.me-\[10px\]{
  margin-inline-end: 10px;
}

.me-\[6px\]{
  margin-inline-end: 6px;
}

.ml-1{
  margin-left: 0.25rem;
}

.ml-2{
  margin-left: 0.5rem;
}

.ml-3{
  margin-left: 0.75rem;
}

.ml-5{
  margin-left: 1.25rem;
}

.ml-6{
  margin-left: 1.5rem;
}

.ml-8{
  margin-left: 2rem;
}

.ml-auto{
  margin-left: auto;
}

.mr-1{
  margin-right: 0.25rem;
}

.mr-2{
  margin-right: 0.5rem;
}

.mr-4{
  margin-right: 1rem;
}

.ms-12{
  margin-inline-start: 3rem;
}

.ms-2{
  margin-inline-start: 0.5rem;
}

.ms-4{
  margin-inline-start: 1rem;
}

.ms-auto{
  margin-inline-start: auto;
}

.mt-0{
  margin-top: 0px;
}

.mt-0\.5{
  margin-top: 0.125rem;
}

.mt-1{
  margin-top: 0.25rem;
}

.mt-10{
  margin-top: 2.5rem;
}

.mt-11{
  margin-top: 2.75rem;
}

.mt-12{
  margin-top: 3rem;
}

.mt-16{
  margin-top: 4rem;
}

.mt-2{
  margin-top: 0.5rem;
}

.mt-2\.5{
  margin-top: 0.625rem;
}

.mt-3{
  margin-top: 0.75rem;
}

.mt-4{
  margin-top: 1rem;
}

.mt-5{
  margin-top: 1.25rem;
}

.mt-6{
  margin-top: 1.5rem;
}

.mt-8{
  margin-top: 2rem;
}

.mt-\[-40px\]{
  margin-top: -40px;
}

.mt-\[300px\]{
  margin-top: 300px;
}

.mt-\[50px\]{
  margin-top: 50px;
}

.mt-auto{
  margin-top: auto;
}

.line-clamp-1{
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

.line-clamp-2{
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.line-clamp-3{
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.line-clamp-4{
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}

.\!block{
  display: block !important;
}

.block{
  display: block;
}

.inline-block{
  display: inline-block;
}

.inline{
  display: inline;
}

.\!flex{
  display: flex !important;
}

.flex{
  display: flex;
}

.inline-flex{
  display: inline-flex;
}

.table{
  display: table;
}

.table-row-group{
  display: table-row-group;
}

.table-row{
  display: table-row;
}

.grid{
  display: grid;
}

.contents{
  display: contents;
}

.hidden{
  display: none;
}

.aspect-\[295\/450\]{
  aspect-ratio: 295/450;
}

.aspect-\[4\/3\]{
  aspect-ratio: 4/3;
}

.aspect-square{
  aspect-ratio: 1 / 1;
}

.size-10{
  width: 2.5rem;
  height: 2.5rem;
}

.size-12{
  width: 3rem;
  height: 3rem;
}

.size-16{
  width: 4rem;
  height: 4rem;
}

.size-2{
  width: 0.5rem;
  height: 0.5rem;
}

.size-2\.5{
  width: 0.625rem;
  height: 0.625rem;
}

.size-32{
  width: 8rem;
  height: 8rem;
}

.size-4{
  width: 1rem;
  height: 1rem;
}

.size-5{
  width: 1.25rem;
  height: 1.25rem;
}

.size-8{
  width: 2rem;
  height: 2rem;
}

.size-9{
  width: 2.25rem;
  height: 2.25rem;
}

.size-full{
  width: 100%;
  height: 100%;
}

.\!h-\[87px\]{
  height: 87px !important;
}

.h-0{
  height: 0px;
}

.h-1{
  height: 0.25rem;
}

.h-1\.5{
  height: 0.375rem;
}

.h-1\/2{
  height: 50%;
}

.h-10{
  height: 2.5rem;
}

.h-11{
  height: 2.75rem;
}

.h-12{
  height: 3rem;
}

.h-14{
  height: 3.5rem;
}

.h-16{
  height: 4rem;
}

.h-2{
  height: 0.5rem;
}

.h-20{
  height: 5rem;
}

.h-24{
  height: 6rem;
}

.h-3{
  height: 0.75rem;
}

.h-3\.5{
  height: 0.875rem;
}

.h-32{
  height: 8rem;
}

.h-4{
  height: 1rem;
}

.h-44{
  height: 11rem;
}

.h-48{
  height: 12rem;
}

.h-5{
  height: 1.25rem;
}

.h-6{
  height: 1.5rem;
}

.h-7{
  height: 1.75rem;
}

.h-72{
  height: 18rem;
}

.h-8{
  height: 2rem;
}

.h-\[150px\]{
  height: 150px;
}

.h-\[16px\]{
  height: 16px;
}

.h-\[180px\]{
  height: 180px;
}

.h-\[18px\]{
  height: 18px;
}

.h-\[200px\]{
  height: 200px;
}

.h-\[207px\]{
  height: 207px;
}

.h-\[20px\]{
  height: 20px;
}

.h-\[300px\]{
  height: 300px;
}

.h-\[38px\]{
  height: 38px;
}

.h-\[400px\]{
  height: 400px;
}

.h-\[45\%\]{
  height: 45%;
}

.h-\[450px\]{
  height: 450px;
}

.h-\[460px\]{
  height: 460px;
}

.h-\[480px\]{
  height: 480px;
}

.h-\[48px\]{
  height: 48px;
}

.h-\[50px\]{
  height: 50px;
}

.h-\[522px\]{
  height: 522px;
}

.h-\[550px\]{
  height: 550px;
}

.h-\[55px\]{
  height: 55px;
}

.h-\[576px\]{
  height: 576px;
}

.h-\[624px\]{
  height: 624px;
}

.h-\[655px\]{
  height: 655px;
}

.h-\[70px\]{
  height: 70px;
}

.h-\[780px\]{
  height: 780px;
}

.h-\[85\%\]{
  height: 85%;
}

.h-auto{
  height: auto;
}

.h-fit{
  height: -moz-fit-content;
  height: fit-content;
}

.h-full{
  height: 100%;
}

.h-screen{
  height: 100vh;
}

.max-h-0{
  max-height: 0px;
}

.max-h-32{
  max-height: 8rem;
}

.max-h-96{
  max-height: 24rem;
}

.max-h-\[300px\]{
  max-height: 300px;
}

.max-h-\[360px\]{
  max-height: 360px;
}

.max-h-\[395px\]{
  max-height: 395px;
}

.max-h-\[500px\]{
  max-height: 500px;
}

.max-h-\[60vh\]{
  max-height: 60vh;
}

.max-h-\[90dvh\]{
  max-height: 90dvh;
}

.max-h-\[calc\(100vh-8rem\)\]{
  max-height: calc(100vh - 8rem);
}

.max-h-full{
  max-height: 100%;
}

.min-h-48{
  min-height: 12rem;
}

.min-h-56{
  min-height: 14rem;
}

.min-h-\[30vh\]{
  min-height: 30vh;
}

.min-h-\[400px\]{
  min-height: 400px;
}

.min-h-\[600px\]{
  min-height: 600px;
}

.min-h-\[70px\]{
  min-height: 70px;
}

.min-h-\[85vh\]{
  min-height: 85vh;
}

.min-h-full{
  min-height: 100%;
}

.min-h-screen{
  min-height: 100vh;
}

.\!w-\[55px\]{
  width: 55px !important;
}

.\!w-\[82px\]{
  width: 82px !important;
}

.\!w-\[84px\]{
  width: 84px !important;
}

.\!w-fit{
  width: -moz-fit-content !important;
  width: fit-content !important;
}

.\!w-max{
  width: -moz-max-content !important;
  width: max-content !important;
}

.w-1{
  width: 0.25rem;
}

.w-1\.5{
  width: 0.375rem;
}

.w-1\/2{
  width: 50%;
}

.w-1\/3{
  width: 33.333333%;
}

.w-10{
  width: 2.5rem;
}

.w-11{
  width: 2.75rem;
}

.w-12{
  width: 3rem;
}

.w-14{
  width: 3.5rem;
}

.w-16{
  width: 4rem;
}

.w-2{
  width: 0.5rem;
}

.w-2\/3{
  width: 66.666667%;
}

.w-20{
  width: 5rem;
}

.w-24{
  width: 6rem;
}

.w-3{
  width: 0.75rem;
}

.w-3\.5{
  width: 0.875rem;
}

.w-32{
  width: 8rem;
}

.w-4{
  width: 1rem;
}

.w-40{
  width: 10rem;
}

.w-5{
  width: 1.25rem;
}

.w-56{
  width: 14rem;
}

.w-6{
  width: 1.5rem;
}

.w-7{
  width: 1.75rem;
}

.w-72{
  width: 18rem;
}

.w-8{
  width: 2rem;
}

.w-80{
  width: 20rem;
}

.w-9{
  width: 2.25rem;
}

.w-\[110px\]{
  width: 110px;
}

.w-\[160px\]{
  width: 160px;
}

.w-\[16px\]{
  width: 16px;
}

.w-\[175px\]{
  width: 175px;
}

.w-\[180px\]{
  width: 180px;
}

.w-\[18px\]{
  width: 18px;
}

.w-\[1px\]{
  width: 1px;
}

.w-\[207px\]{
  width: 207px;
}

.w-\[20px\]{
  width: 20px;
}

.w-\[240px\]{
  width: 240px;
}

.w-\[300px\]{
  width: 300px;
}

.w-\[378px\]{
  width: 378px;
}

.w-\[447px\]{
  width: 447px;
}

.w-\[450px\]{
  width: 450px;
}

.w-\[456px\]{
  width: 456px;
}

.w-\[48\%\]{
  width: 48%;
}

.w-\[480px\]{
  width: 480px;
}

.w-\[48px\]{
  width: 48px;
}

.w-\[50\%\]{
  width: 50%;
}

.w-\[500px\]{
  width: 500px;
}

.w-\[50px\]{
  width: 50px;
}

.w-\[525px\]{
  width: 525px;
}

.w-\[535px\]{
  width: 535px;
}

.w-\[55\%\]{
  width: 55%;
}

.w-\[550px\]{
  width: 550px;
}

.w-\[55px\]{
  width: 55px;
}

.w-\[60\%\]{
  width: 60%;
}

.w-\[60px\]{
  width: 60px;
}

.w-\[61px\]{
  width: 61px;
}

.w-\[630px\]{
  width: 630px;
}

.w-\[70px\]{
  width: 70px;
}

.w-\[80\%\]{
  width: 80%;
}

.w-\[85\%\]{
  width: 85%;
}

.w-auto{
  width: auto;
}

.w-fit{
  width: -moz-fit-content;
  width: fit-content;
}

.w-full{
  width: 100%;
}

.w-px{
  width: 1px;
}

.min-w-0{
  min-width: 0px;
}

.min-w-56{
  min-width: 14rem;
}

.min-w-\[120px\]{
  min-width: 120px;
}

.min-w-\[135px\]{
  min-width: 135px;
}

.min-w-\[210px\]{
  min-width: 210px;
}

.min-w-\[240px\]{
  min-width: 240px;
}

.min-w-\[370px\]{
  min-width: 370px;
}

.min-w-\[90px\]{
  min-width: 90px;
}

.max-w-2xl{
  max-width: 42rem;
}

.max-w-3xl{
  max-width: 48rem;
}

.max-w-4xl{
  max-width: 56rem;
}

.max-w-5xl{
  max-width: 64rem;
}

.max-w-6xl{
  max-width: 72rem;
}

.max-w-7xl{
  max-width: 80rem;
}

.max-w-96{
  max-width: 24rem;
}

.max-w-\[110px\]{
  max-width: 110px;
}

.max-w-\[120px\]{
  max-width: 120px;
}

.max-w-\[1440px\]{
  max-width: 1440px;
}

.max-w-\[235px\]{
  max-width: 235px;
}

.max-w-\[295px\]{
  max-width: 295px;
}

.max-w-\[360px\]{
  max-width: 360px;
}

.max-w-\[40\%\]{
  max-width: 40%;
}

.max-w-\[400px\]{
  max-width: 400px;
}

.max-w-\[45\%\]{
  max-width: 45%;
}

.max-w-\[500px\]{
  max-width: 500px;
}

.max-w-\[550px\]{
  max-width: 550px;
}

.max-w-\[573px\]{
  max-width: 573px;
}

.max-w-\[600px\]{
  max-width: 600px;
}

.max-w-\[640px\]{
  max-width: 640px;
}

.max-w-\[70\%\]{
  max-width: 70%;
}

.max-w-\[700px\]{
  max-width: 700px;
}

.max-w-\[80\%\]{
  max-width: 80%;
}

.max-w-\[924px\]{
  max-width: 924px;
}

.max-w-full{
  max-width: 100%;
}

.max-w-lg{
  max-width: 32rem;
}

.max-w-md{
  max-width: 28rem;
}

.max-w-none{
  max-width: none;
}

.max-w-sm{
  max-width: 24rem;
}

.max-w-xl{
  max-width: 36rem;
}

.max-w-xs{
  max-width: 20rem;
}

.flex-1{
  flex: 1 1 0%;
}

.flex-\[1\.5\]{
  flex: 1.5;
}

.flex-shrink{
  flex-shrink: 1;
}

.flex-shrink-0{
  flex-shrink: 0;
}

.shrink{
  flex-shrink: 1;
}

.shrink-0{
  flex-shrink: 0;
}

.flex-grow{
  flex-grow: 1;
}

.grow{
  flex-grow: 1;
}

.border-collapse{
  border-collapse: collapse;
}

.origin-right{
  transform-origin: right;
}

.-translate-x-1\/2{
  --tw-translate-x: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.-translate-y-1\/2{
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.-translate-y-2{
  --tw-translate-y: -0.5rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.-translate-y-\[10px\]{
  --tw-translate-y: -10px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.translate-x-0{
  --tw-translate-x: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.translate-x-0\.5{
  --tw-translate-x: 0.125rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.translate-x-6{
  --tw-translate-x: 1.5rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.translate-y-0{
  --tw-translate-y: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.translate-y-\[-50\%\]{
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.-rotate-180{
  --tw-rotate: -180deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.scale-110{
  --tw-scale-x: 1.1;
  --tw-scale-y: 1.1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.transform{
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

@keyframes bounce{
  0%, 100%{
    transform: translateY(-25%);
    animation-timing-function: cubic-bezier(0.8,0,1,1);
  }

  50%{
    transform: none;
    animation-timing-function: cubic-bezier(0,0,0.2,1);
  }
}

.animate-bounce{
  animation: bounce 1s infinite;
}

@keyframes pulse{
  50%{
    opacity: .5;
  }
}

.animate-pulse{
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes spin{
  to{
    transform: rotate(360deg);
  }
}

.animate-spin{
  animation: spin 1s linear infinite;
}

.cursor-default{
  cursor: default;
}

.cursor-not-allowed{
  cursor: not-allowed;
}

.cursor-pointer{
  cursor: pointer;
}

.select-none{
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.resize-none{
  resize: none;
}

.resize-y{
  resize: vertical;
}

.resize{
  resize: both;
}

.snap-x{
  scroll-snap-type: x var(--tw-scroll-snap-strictness);
}

.snap-mandatory{
  --tw-scroll-snap-strictness: mandatory;
}

.snap-start{
  scroll-snap-align: start;
}

.list-inside{
  list-style-position: inside;
}

.list-disc{
  list-style-type: disc;
}

.list-none{
  list-style-type: none;
}

.appearance-none{
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

.grid-cols-1{
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

.grid-cols-12{
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

.grid-cols-2{
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid-cols-3{
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid-cols-4{
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.grid-cols-6{
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.grid-cols-8{
  grid-template-columns: repeat(8, minmax(0, 1fr));
}

.grid-cols-\[10rem_1fr_7rem\]{
  grid-template-columns: 10rem 1fr 7rem;
}

.grid-cols-\[47\%_53\%\]{
  grid-template-columns: 47% 53%;
}

.flex-row{
  flex-direction: row;
}

.flex-col{
  flex-direction: column;
}

.flex-col-reverse{
  flex-direction: column-reverse;
}

.flex-wrap{
  flex-wrap: wrap;
}

.content-center{
  align-content: center;
}

.items-start{
  align-items: flex-start;
}

.items-end{
  align-items: flex-end;
}

.items-center{
  align-items: center;
}

.items-baseline{
  align-items: baseline;
}

.justify-start{
  justify-content: flex-start;
}

.justify-end{
  justify-content: flex-end;
}

.justify-center{
  justify-content: center;
}

.justify-between{
  justify-content: space-between;
}

.gap-0{
  gap: 0px;
}

.gap-0\.5{
  gap: 0.125rem;
}

.gap-1{
  gap: 0.25rem;
}

.gap-1\.5{
  gap: 0.375rem;
}

.gap-10{
  gap: 2.5rem;
}

.gap-12{
  gap: 3rem;
}

.gap-2{
  gap: 0.5rem;
}

.gap-2\.5{
  gap: 0.625rem;
}

.gap-24{
  gap: 6rem;
}

.gap-3{
  gap: 0.75rem;
}

.gap-4{
  gap: 1rem;
}

.gap-5{
  gap: 1.25rem;
}

.gap-6{
  gap: 1.5rem;
}

.gap-8{
  gap: 2rem;
}

.gap-\[70px\]{
  gap: 70px;
}

.gap-card-gap{
  gap: calc(15px + (30 - 15) * ((100vw - 320px) / (1920 - 320)));
}

.gap-card-space{
  gap: calc(15px + (17 - 15) * ((100vw - 320px) / (1920 - 320)));
}

.gap-x-12{
  -moz-column-gap: 3rem;
       column-gap: 3rem;
}

.gap-x-2{
  -moz-column-gap: 0.5rem;
       column-gap: 0.5rem;
}

.gap-x-3{
  -moz-column-gap: 0.75rem;
       column-gap: 0.75rem;
}

.gap-x-4{
  -moz-column-gap: 1rem;
       column-gap: 1rem;
}

.gap-x-6{
  -moz-column-gap: 1.5rem;
       column-gap: 1.5rem;
}

.gap-x-7{
  -moz-column-gap: 1.75rem;
       column-gap: 1.75rem;
}

.gap-x-8{
  -moz-column-gap: 2rem;
       column-gap: 2rem;
}

.gap-y-0{
  row-gap: 0px;
}

.gap-y-1{
  row-gap: 0.25rem;
}

.gap-y-10{
  row-gap: 2.5rem;
}

.gap-y-2{
  row-gap: 0.5rem;
}

.gap-y-4{
  row-gap: 1rem;
}

.gap-y-6{
  row-gap: 1.5rem;
}

.gap-y-9{
  row-gap: 2.25rem;
}

.space-x-2 > :not([hidden]) ~ :not([hidden]){
  --tw-space-x-reverse: 0;
  margin-right: calc(0.5rem * var(--tw-space-x-reverse));
  margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
}

.space-x-3 > :not([hidden]) ~ :not([hidden]){
  --tw-space-x-reverse: 0;
  margin-right: calc(0.75rem * var(--tw-space-x-reverse));
  margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse)));
}

.space-y-1 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
}

.space-y-10 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(2.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(2.5rem * var(--tw-space-y-reverse));
}

.space-y-12 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(3rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(3rem * var(--tw-space-y-reverse));
}

.space-y-2 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}

.space-y-3 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
}

.space-y-4 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
}

.space-y-6 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
}

.self-start{
  align-self: flex-start;
}

.self-end{
  align-self: flex-end;
}

.overflow-hidden{
  overflow: hidden;
}

.overflow-visible{
  overflow: visible;
}

.overflow-x-auto{
  overflow-x: auto;
}

.overflow-y-auto{
  overflow-y: auto;
}

.overflow-y-scroll{
  overflow-y: scroll;
}

.scroll-smooth{
  scroll-behavior: smooth;
}

.truncate{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.whitespace-nowrap{
  white-space: nowrap;
}

.text-nowrap{
  text-wrap: nowrap;
}

.text-balance{
  text-wrap: balance;
}

.break-words{
  overflow-wrap: break-word;
}

.\!rounded-2xl{
  border-radius: 1rem !important;
}

.\!rounded-full{
  border-radius: 9999px !important;
}

.\!rounded-md{
  border-radius: 0.375rem !important;
}

.rounded{
  border-radius: 0.25rem;
}

.rounded-2xl{
  border-radius: 1rem;
}

.rounded-3xl{
  border-radius: 1.5rem;
}

.rounded-\[16px\]{
  border-radius: 16px;
}

.rounded-\[19px\]{
  border-radius: 19px;
}

.rounded-\[20px\]{
  border-radius: 20px;
}

.rounded-\[30px\]{
  border-radius: 30px;
}

.rounded-full{
  border-radius: 9999px;
}

.rounded-lg{
  border-radius: 0.5rem;
}

.rounded-md{
  border-radius: 0.375rem;
}

.rounded-sm{
  border-radius: 0.125rem;
}

.rounded-xl{
  border-radius: 0.75rem;
}

.rounded-b-2xl{
  border-bottom-right-radius: 1rem;
  border-bottom-left-radius: 1rem;
}

.rounded-l-2xl{
  border-top-left-radius: 1rem;
  border-bottom-left-radius: 1rem;
}

.rounded-l-\[10px\]{
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}

.rounded-l-none{
  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px;
}

.rounded-r-lg{
  border-top-right-radius: 0.5rem;
  border-bottom-right-radius: 0.5rem;
}

.rounded-r-none{
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
}

.rounded-t-2xl{
  border-top-left-radius: 1rem;
  border-top-right-radius: 1rem;
}

.rounded-t-3xl{
  border-top-left-radius: 1.5rem;
  border-top-right-radius: 1.5rem;
}

.rounded-bl-sm{
  border-bottom-left-radius: 0.125rem;
}

.rounded-br-\[10px\]{
  border-bottom-right-radius: 10px;
}

.rounded-br-sm{
  border-bottom-right-radius: 0.125rem;
}

.rounded-tr-none{
  border-top-right-radius: 0px;
}

.border{
  border-width: 1px;
}

.border-0{
  border-width: 0px;
}

.border-2{
  border-width: 2px;
}

.border-4{
  border-width: 4px;
}

.border-8{
  border-width: 8px;
}

.border-x-2{
  border-left-width: 2px;
  border-right-width: 2px;
}

.border-b{
  border-bottom-width: 1px;
}

.border-b-2{
  border-bottom-width: 2px;
}

.border-l{
  border-left-width: 1px;
}

.border-l-2{
  border-left-width: 2px;
}

.border-l-4{
  border-left-width: 4px;
}

.border-t{
  border-top-width: 1px;
}

.border-t-0{
  border-top-width: 0px;
}

.border-t-2{
  border-top-width: 2px;
}

.border-t-\[1px\]{
  border-top-width: 1px;
}

.border-dashed{
  border-style: dashed;
}

.border-none{
  border-style: none;
}

.\!border-\[\#FA3D72\]{
  --tw-border-opacity: 1 !important;
  border-color: rgb(250 61 114 / var(--tw-border-opacity)) !important;
}

.\!border-lightgray{
  border-color: var(--lightgray) !important;
}

.\!border-lightgraycolor{
  border-color: var(--lightgraycolor) !important;
}

.border-\[\#1a1525\]{
  --tw-border-opacity: 1;
  border-color: rgb(26 21 37 / var(--tw-border-opacity));
}

.border-\[\#2775CA\]{
  --tw-border-opacity: 1;
  border-color: rgb(39 117 202 / var(--tw-border-opacity));
}

.border-\[\#ff1fe5\]{
  --tw-border-opacity: 1;
  border-color: rgb(255 31 229 / var(--tw-border-opacity));
}

.border-\[rgba\(255\2c 255\2c 255\2c 0\.15\)\]{
  border-color: rgba(255,255,255,0.15);
}

.border-\[var\(--grayborder\)\]{
  border-color: var(--grayborder);
}

.border-\[var\(--light-bg\)\]{
  border-color: var(--light-bg);
}

.border-\[var\(--lightgray\)\]{
  border-color: var(--lightgray);
}

.border-amber-500\/20{
  border-color: rgb(245 158 11 / 0.2);
}

.border-amber-700\/40{
  border-color: rgb(180 83 9 / 0.4);
}

.border-black{
  border-color: hsl(var(--black));
}

.border-borderlight{
  border-color: var(--lightgray);
}

.border-dark{
  border-color: var(--dark);
}

.border-emerald-500\/20{
  border-color: rgb(16 185 129 / 0.2);
}

.border-emerald-700\/40{
  border-color: rgb(4 120 87 / 0.4);
}

.border-gray{
  border-color: var(--gray);
}

.border-graycolor{
  border-color: var(--graycolor);
}

.border-green-200{
  --tw-border-opacity: 1;
  border-color: rgb(187 247 208 / var(--tw-border-opacity));
}

.border-green-500\/30{
  border-color: rgb(34 197 94 / 0.3);
}

.border-indigo-500\/20{
  border-color: rgb(99 102 241 / 0.2);
}

.border-indigo-700\/40{
  border-color: rgb(67 56 202 / 0.4);
}

.border-lightBorder{
  border-color: var(--light-border);
}

.border-lightbordergray{
  border-color: var(--lightbordergray);
}

.border-lightcolor{
  border-color: var(--lightcolor);
}

.border-lightgray{
  border-color: var(--lightgray);
}

.border-lightgraycolor{
  border-color: var(--lightgraycolor);
}

.border-pink-500{
  --tw-border-opacity: 1;
  border-color: rgb(236 72 153 / var(--tw-border-opacity));
}

.border-pink-500\/20{
  border-color: rgb(236 72 153 / 0.2);
}

.border-pink-700\/40{
  border-color: rgb(190 24 93 / 0.4);
}

.border-primary{
  border-color: var(--primary);
}

.border-red-200{
  --tw-border-opacity: 1;
  border-color: rgb(254 202 202 / var(--tw-border-opacity));
}

.border-red-500\/30{
  border-color: rgb(239 68 68 / 0.3);
}

.border-red-500\/60{
  border-color: rgb(239 68 68 / 0.6);
}

.border-red-700{
  --tw-border-opacity: 1;
  border-color: rgb(185 28 28 / var(--tw-border-opacity));
}

.border-red-700\/40{
  border-color: rgb(185 28 28 / 0.4);
}

.border-slate-300\/80{
  border-color: rgb(203 213 225 / 0.8);
}

.border-slate-500{
  --tw-border-opacity: 1;
  border-color: rgb(100 116 139 / var(--tw-border-opacity));
}

.border-slate-600{
  --tw-border-opacity: 1;
  border-color: rgb(71 85 105 / var(--tw-border-opacity));
}

.border-slate-700{
  --tw-border-opacity: 1;
  border-color: rgb(51 65 85 / var(--tw-border-opacity));
}

.border-slate-700\/30{
  border-color: rgb(51 65 85 / 0.3);
}

.border-slate-700\/50{
  border-color: rgb(51 65 85 / 0.5);
}

.border-slate-800\/60{
  border-color: rgb(30 41 59 / 0.6);
}

.border-staticLightgray\/20{
  border-color: hsl(var(--static-lightgray) / 0.2);
}

.border-staticLightgray\/30{
  border-color: hsl(var(--static-lightgray) / 0.3);
}

.border-staticWhite{
  border-color: hsl(var(--static-white));
}

.border-transparent{
  border-color: transparent;
}

.border-violet-700\/40{
  border-color: rgb(109 40 217 / 0.4);
}

.border-white{
  border-color: hsl(var(--white));
}

.border-white\/10{
  border-color: hsl(var(--white) / 0.1);
}

.border-white\/20{
  border-color: hsl(var(--white) / 0.2);
}

.border-yellow-200{
  --tw-border-opacity: 1;
  border-color: rgb(254 240 138 / var(--tw-border-opacity));
}

.border-yellow-400{
  --tw-border-opacity: 1;
  border-color: rgb(250 204 21 / var(--tw-border-opacity));
}

.border-t-transparent{
  border-top-color: transparent;
}

.\!bg-\[rgba\(250\2c 61\2c 114\2c 0\.2\)\]{
  background-color: rgba(250,61,114,0.2) !important;
}

.\!bg-dark{
  background-color: var(--dark) !important;
}

.\!bg-staticBlack{
  background-color: hsl(var(--static-black)) !important;
}

.bg-\[\#17803D\]{
  --tw-bg-opacity: 1;
  background-color: rgb(23 128 61 / var(--tw-bg-opacity));
}

.bg-\[\#1DA1F2\]{
  --tw-bg-opacity: 1;
  background-color: rgb(29 161 242 / var(--tw-bg-opacity));
}

.bg-\[\#444\]{
  --tw-bg-opacity: 1;
  background-color: rgb(68 68 68 / var(--tw-bg-opacity));
}

.bg-\[\#FA3D72\]{
  --tw-bg-opacity: 1;
  background-color: rgb(250 61 114 / var(--tw-bg-opacity));
}

.bg-\[\#aa43a757\]{
  background-color: #aa43a757;
}

.bg-\[rgba\(255\2c 255\2c 255\2c 0\.05\)\]{
  background-color: rgba(255,255,255,0.05);
}

.bg-\[var\(--dark\)\]{
  background-color: var(--dark);
}

.bg-\[var\(--grayborder\)\]{
  background-color: var(--grayborder);
}

.bg-\[var\(--light-bg\)\]{
  background-color: var(--light-bg);
}

.bg-\[var\(--lightgray\)\]{
  background-color: var(--lightgray);
}

.bg-amber-100{
  --tw-bg-opacity: 1;
  background-color: rgb(254 243 199 / var(--tw-bg-opacity));
}

.bg-amber-500\/20{
  background-color: rgb(245 158 11 / 0.2);
}

.bg-amber-500\/30{
  background-color: rgb(245 158 11 / 0.3);
}

.bg-amber-600{
  --tw-bg-opacity: 1;
  background-color: rgb(217 119 6 / var(--tw-bg-opacity));
}

.bg-amber-900\/10{
  background-color: rgb(120 53 15 / 0.1);
}

.bg-backgroundDark{
  background-color: var(--background-dark);
}

.bg-bgbody{
  background-color: var(--bgbody);
}

.bg-black{
  background-color: hsl(var(--black));
}

.bg-black\/40{
  background-color: hsl(var(--black) / 0.4);
}

.bg-bodytext{
  background-color: var(--bodytext);
}

.bg-borderlight{
  background-color: var(--lightgray);
}

.bg-cyan-600{
  --tw-bg-opacity: 1;
  background-color: rgb(8 145 178 / var(--tw-bg-opacity));
}

.bg-dark{
  background-color: var(--dark);
}

.bg-darkgray{
  background-color: var(--darkgray);
}

.bg-emerald-500\/20{
  background-color: rgb(16 185 129 / 0.2);
}

.bg-emerald-500\/30{
  background-color: rgb(16 185 129 / 0.3);
}

.bg-emerald-600{
  --tw-bg-opacity: 1;
  background-color: rgb(5 150 105 / var(--tw-bg-opacity));
}

.bg-emerald-900\/10{
  background-color: rgb(6 78 59 / 0.1);
}

.bg-gray{
  background-color: var(--gray);
}

.bg-grayDark{
  background-color: var(--gray-dark);
}

.bg-graylightcolor{
  background-color: var(--graylightcolor);
}

.bg-green-100{
  --tw-bg-opacity: 1;
  background-color: rgb(220 252 231 / var(--tw-bg-opacity));
}

.bg-green-400{
  --tw-bg-opacity: 1;
  background-color: rgb(74 222 128 / var(--tw-bg-opacity));
}

.bg-green-50{
  --tw-bg-opacity: 1;
  background-color: rgb(240 253 244 / var(--tw-bg-opacity));
}

.bg-green-500\/20{
  background-color: rgb(34 197 94 / 0.2);
}

.bg-green-600{
  --tw-bg-opacity: 1;
  background-color: rgb(22 163 74 / var(--tw-bg-opacity));
}

.bg-green-900\/20{
  background-color: rgb(20 83 45 / 0.2);
}

.bg-indigo-500\/30{
  background-color: rgb(99 102 241 / 0.3);
}

.bg-indigo-600{
  --tw-bg-opacity: 1;
  background-color: rgb(79 70 229 / var(--tw-bg-opacity));
}

.bg-indigo-900\/10{
  background-color: rgb(49 46 129 / 0.1);
}

.bg-lightbg{
  background-color: var(--light-bg);
}

.bg-lightgray{
  background-color: var(--lightgray);
}

.bg-lightgraycolor{
  background-color: var(--lightgraycolor);
}

.bg-pink-100{
  --tw-bg-opacity: 1;
  background-color: rgb(252 231 243 / var(--tw-bg-opacity));
}

.bg-pink-500\/30{
  background-color: rgb(236 72 153 / 0.3);
}

.bg-pink-900\/10{
  background-color: rgb(131 24 67 / 0.1);
}

.bg-primary{
  background-color: var(--primary);
}

.bg-purple-600{
  --tw-bg-opacity: 1;
  background-color: rgb(147 51 234 / var(--tw-bg-opacity));
}

.bg-red-100{
  --tw-bg-opacity: 1;
  background-color: rgb(254 226 226 / var(--tw-bg-opacity));
}

.bg-red-50{
  --tw-bg-opacity: 1;
  background-color: rgb(254 242 242 / var(--tw-bg-opacity));
}

.bg-red-500{
  --tw-bg-opacity: 1;
  background-color: rgb(239 68 68 / var(--tw-bg-opacity));
}

.bg-red-500\/20{
  background-color: rgb(239 68 68 / 0.2);
}

.bg-red-600{
  --tw-bg-opacity: 1;
  background-color: rgb(220 38 38 / var(--tw-bg-opacity));
}

.bg-red-900\/10{
  background-color: rgb(127 29 29 / 0.1);
}

.bg-red-900\/20{
  background-color: rgb(127 29 29 / 0.2);
}

.bg-red-900\/30{
  background-color: rgb(127 29 29 / 0.3);
}

.bg-slate-100{
  --tw-bg-opacity: 1;
  background-color: rgb(241 245 249 / var(--tw-bg-opacity));
}

.bg-slate-500\/20{
  background-color: rgb(100 116 139 / 0.2);
}

.bg-slate-600{
  --tw-bg-opacity: 1;
  background-color: rgb(71 85 105 / var(--tw-bg-opacity));
}

.bg-slate-700{
  --tw-bg-opacity: 1;
  background-color: rgb(51 65 85 / var(--tw-bg-opacity));
}

.bg-slate-700\/30{
  background-color: rgb(51 65 85 / 0.3);
}

.bg-slate-700\/50{
  background-color: rgb(51 65 85 / 0.5);
}

.bg-slate-700\/70{
  background-color: rgb(51 65 85 / 0.7);
}

.bg-slate-800{
  --tw-bg-opacity: 1;
  background-color: rgb(30 41 59 / var(--tw-bg-opacity));
}

.bg-slate-800\/50{
  background-color: rgb(30 41 59 / 0.5);
}

.bg-slate-900\/50{
  background-color: rgb(15 23 42 / 0.5);
}

.bg-staticBlack{
  background-color: hsl(var(--static-black));
}

.bg-staticBlack\/20{
  background-color: hsl(var(--static-black) / 0.2);
}

.bg-staticBlack\/45{
  background-color: hsl(var(--static-black) / 0.45);
}

.bg-staticBlack\/50{
  background-color: hsl(var(--static-black) / 0.5);
}

.bg-staticBlack\/70{
  background-color: hsl(var(--static-black) / 0.7);
}

.bg-staticBlack\/95{
  background-color: hsl(var(--static-black) / 0.95);
}

.bg-staticDark{
  background-color: hsl(var(--static-dark));
}

.bg-staticTransparentWhite{
  background-color: var(--static-transparent-white);
}

.bg-staticWhite{
  background-color: hsl(var(--static-white));
}

.bg-staticWhite\/10{
  background-color: hsl(var(--static-white) / 0.1);
}

.bg-success{
  background-color: var(--success);
}

.bg-transparent{
  background-color: transparent;
}

.bg-transparentWhite{
  background-color: var(--transparent-white);
}

.bg-violet-900\/10{
  background-color: rgb(76 29 149 / 0.1);
}

.bg-white{
  background-color: hsl(var(--white));
}

.bg-white\/10{
  background-color: hsl(var(--white) / 0.1);
}

.bg-white\/20{
  background-color: hsl(var(--white) / 0.2);
}

.bg-white\/5{
  background-color: hsl(var(--white) / 0.05);
}

.bg-yellow-50{
  --tw-bg-opacity: 1;
  background-color: rgb(254 252 232 / var(--tw-bg-opacity));
}

.bg-yellow-600{
  --tw-bg-opacity: 1;
  background-color: rgb(202 138 4 / var(--tw-bg-opacity));
}

.bg-opacity-20{
  --tw-bg-opacity: 0.2;
}

.bg-opacity-60{
  --tw-bg-opacity: 0.6;
}

.bg-opacity-80{
  --tw-bg-opacity: 0.8;
}

.bg-opacity-95{
  --tw-bg-opacity: 0.95;
}

.bg-gradient-to-b{
  background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
}

.bg-gradient-to-br{
  background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
}

.bg-gradient-to-r{
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
}

.bg-gradient-to-t{
  background-image: linear-gradient(to top, var(--tw-gradient-stops));
}

.from-\[\#2775CA\]{
  --tw-gradient-from: #2775CA var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(39 117 202 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-\[\#444\]{
  --tw-gradient-from: #444 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(68 68 68 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-\[\#E118D9\]{
  --tw-gradient-from: #E118D9 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(225 24 217 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-\[\#E19C11\]{
  --tw-gradient-from: #E19C11 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(225 156 17 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-\[\#FA3D72\]{
  --tw-gradient-from: #FA3D72 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(250 61 114 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-\[\#f8c877\]{
  --tw-gradient-from: #f8c877 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(248 200 119 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-amber-500{
  --tw-gradient-from: #f59e0b var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(245 158 11 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-amber-600\/30{
  --tw-gradient-from: rgb(217 119 6 / 0.3) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(217 119 6 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-black{
  --tw-gradient-from: hsl(var(--black)) var(--tw-gradient-from-position);
  --tw-gradient-to: hsl(var(--black) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-black\/60{
  --tw-gradient-from: hsl(var(--black) / 0.6) var(--tw-gradient-from-position);
  --tw-gradient-to: hsl(var(--black) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-black\/80{
  --tw-gradient-from: hsl(var(--black) / 0.8) var(--tw-gradient-from-position);
  --tw-gradient-to: hsl(var(--black) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-cyan-500{
  --tw-gradient-from: #06b6d4 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(6 182 212 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-emerald-500{
  --tw-gradient-from: #10b981 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(16 185 129 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-emerald-600\/30{
  --tw-gradient-from: rgb(5 150 105 / 0.3) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(5 150 105 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-indigo-500{
  --tw-gradient-from: #6366f1 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(99 102 241 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-indigo-600\/30{
  --tw-gradient-from: rgb(79 70 229 / 0.3) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(79 70 229 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-pink-400{
  --tw-gradient-from: #f472b6 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(244 114 182 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-pink-500{
  --tw-gradient-from: #ec4899 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(236 72 153 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-pink-600\/30{
  --tw-gradient-from: rgb(219 39 119 / 0.3) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(219 39 119 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-primary{
  --tw-gradient-from: var(--primary) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-red-500{
  --tw-gradient-from: #ef4444 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(239 68 68 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-slate-500{
  --tw-gradient-from: #64748b var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(100 116 139 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-slate-900{
  --tw-gradient-from: #0f172a var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(15 23 42 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-staticBlack{
  --tw-gradient-from: hsl(var(--static-black)) var(--tw-gradient-from-position);
  --tw-gradient-to: hsl(var(--static-black) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-staticBlack\/80{
  --tw-gradient-from: hsl(var(--static-black) / 0.8) var(--tw-gradient-from-position);
  --tw-gradient-to: hsl(var(--static-black) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-staticBlack\/90{
  --tw-gradient-from: hsl(var(--static-black) / 0.9) var(--tw-gradient-from-position);
  --tw-gradient-to: hsl(var(--static-black) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-staticDark\/70{
  --tw-gradient-from: hsl(var(--static-dark) / 0.7) var(--tw-gradient-from-position);
  --tw-gradient-to: hsl(var(--static-dark) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-yellow-500{
  --tw-gradient-from: #eab308 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(234 179 8 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-\[35\%\]{
  --tw-gradient-from-position: 35%;
}

.via-black\/80{
  --tw-gradient-to: hsl(var(--black) / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), hsl(var(--black) / 0.8) var(--tw-gradient-via-position), var(--tw-gradient-to);
}

.via-slate-800{
  --tw-gradient-to: rgb(30 41 59 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #1e293b var(--tw-gradient-via-position), var(--tw-gradient-to);
}

.via-staticBlack\/40{
  --tw-gradient-to: hsl(var(--static-black) / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), hsl(var(--static-black) / 0.4) var(--tw-gradient-via-position), var(--tw-gradient-to);
}

.via-staticBlack\/50{
  --tw-gradient-to: hsl(var(--static-black) / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), hsl(var(--static-black) / 0.5) var(--tw-gradient-via-position), var(--tw-gradient-to);
}

.via-transparent{
  --tw-gradient-to: rgb(0 0 0 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), transparent var(--tw-gradient-via-position), var(--tw-gradient-to);
}

.to-\[\#1a5490\]{
  --tw-gradient-to: #1a5490 var(--tw-gradient-to-position);
}

.to-\[\#E118D9\]{
  --tw-gradient-to: #E118D9 var(--tw-gradient-to-position);
}

.to-\[\#E19C11\]{
  --tw-gradient-to: #E19C11 var(--tw-gradient-to-position);
}

.to-\[\#FF6B9D\]{
  --tw-gradient-to: #FF6B9D var(--tw-gradient-to-position);
}

.to-\[\#feb3f5\]{
  --tw-gradient-to: #feb3f5 var(--tw-gradient-to-position);
}

.to-amber-800\/30{
  --tw-gradient-to: rgb(146 64 14 / 0.3) var(--tw-gradient-to-position);
}

.to-emerald-800\/30{
  --tw-gradient-to: rgb(6 95 70 / 0.3) var(--tw-gradient-to-position);
}

.to-green-600{
  --tw-gradient-to: #16a34a var(--tw-gradient-to-position);
}

.to-indigo-800\/30{
  --tw-gradient-to: rgb(55 48 163 / 0.3) var(--tw-gradient-to-position);
}

.to-orange-600{
  --tw-gradient-to: #ea580c var(--tw-gradient-to-position);
}

.to-pink-500{
  --tw-gradient-to: #ec4899 var(--tw-gradient-to-position);
}

.to-pink-500\/10{
  --tw-gradient-to: rgb(236 72 153 / 0.1) var(--tw-gradient-to-position);
}

.to-pink-800\/30{
  --tw-gradient-to: rgb(157 23 77 / 0.3) var(--tw-gradient-to-position);
}

.to-purple-500{
  --tw-gradient-to: #a855f7 var(--tw-gradient-to-position);
}

.to-purple-600{
  --tw-gradient-to: #9333ea var(--tw-gradient-to-position);
}

.to-rose-600{
  --tw-gradient-to: #e11d48 var(--tw-gradient-to-position);
}

.to-secondary{
  --tw-gradient-to: var(--secondary) var(--tw-gradient-to-position);
}

.to-slate-600{
  --tw-gradient-to: #475569 var(--tw-gradient-to-position);
}

.to-slate-900{
  --tw-gradient-to: #0f172a var(--tw-gradient-to-position);
}

.to-transparent{
  --tw-gradient-to: transparent var(--tw-gradient-to-position);
}

.to-yellow-500{
  --tw-gradient-to: #eab308 var(--tw-gradient-to-position);
}

.\!bg-contain{
  background-size: contain !important;
}

.bg-\[length\:100\%_200\%\]{
  background-size: 100% 200%;
}

.bg-contain{
  background-size: contain;
}

.bg-cover{
  background-size: cover;
}

.bg-clip-text{
  -webkit-background-clip: text;
          background-clip: text;
}

.\!bg-left{
  background-position: left !important;
}

.\!bg-right{
  background-position: right !important;
}

.\!bg-top{
  background-position: top !important;
}

.bg-bottom{
  background-position: bottom;
}

.bg-center{
  background-position: center;
}

.bg-left{
  background-position: left;
}

.bg-no-repeat{
  background-repeat: no-repeat;
}

.fill-black{
  fill: hsl(var(--black));
}

.fill-current{
  fill: currentColor;
}

.fill-primary{
  fill: var(--primary);
}

.fill-secondary{
  fill: var(--secondary);
}

.stroke-\[var\(--dark\)\]{
  stroke: var(--dark);
}

.stroke-\[var\(--grayborder\)\]{
  stroke: var(--grayborder);
}

.stroke-black{
  stroke: hsl(var(--black));
}

.stroke-dark{
  stroke: var(--dark);
}

.stroke-darkgray{
  stroke: var(--darkgray);
}

.stroke-primary{
  stroke: var(--primary);
}

.stroke-secondary{
  stroke: var(--secondary);
}

.stroke-staticBlack{
  stroke: hsl(var(--static-black));
}

.stroke-staticWhite{
  stroke: hsl(var(--static-white));
}

.stroke-white{
  stroke: hsl(var(--white));
}

.object-contain{
  -o-object-fit: contain;
     object-fit: contain;
}

.object-cover{
  -o-object-fit: cover;
     object-fit: cover;
}

.\!object-top{
  -o-object-position: top !important;
     object-position: top !important;
}

.object-bottom{
  -o-object-position: bottom;
     object-position: bottom;
}

.object-center{
  -o-object-position: center;
     object-position: center;
}

.object-top{
  -o-object-position: top;
     object-position: top;
}

.\!p-0{
  padding: 0px !important;
}

.p-0{
  padding: 0px;
}

.p-0\.5{
  padding: 0.125rem;
}

.p-1{
  padding: 0.25rem;
}

.p-1\.5{
  padding: 0.375rem;
}

.p-10{
  padding: 2.5rem;
}

.p-12{
  padding: 3rem;
}

.p-2{
  padding: 0.5rem;
}

.p-2\.5{
  padding: 0.625rem;
}

.p-3{
  padding: 0.75rem;
}

.p-4{
  padding: 1rem;
}

.p-5{
  padding: 1.25rem;
}

.p-6{
  padding: 1.5rem;
}

.p-8{
  padding: 2rem;
}

.p-\[27px\]{
  padding: 27px;
}

.p-\[60px\]{
  padding: 60px;
}

.\!px-0{
  padding-left: 0px !important;
  padding-right: 0px !important;
}

.\!px-10{
  padding-left: 2.5rem !important;
  padding-right: 2.5rem !important;
}

.\!px-\[40px\]{
  padding-left: 40px !important;
  padding-right: 40px !important;
}

.\!py-\[13px\]{
  padding-top: 13px !important;
  padding-bottom: 13px !important;
}

.px-1{
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}

.px-10{
  padding-left: 2.5rem;
  padding-right: 2.5rem;
}

.px-12{
  padding-left: 3rem;
  padding-right: 3rem;
}

.px-2{
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.px-2\.5{
  padding-left: 0.625rem;
  padding-right: 0.625rem;
}

.px-20{
  padding-left: 5rem;
  padding-right: 5rem;
}

.px-3{
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

.px-4{
  padding-left: 1rem;
  padding-right: 1rem;
}

.px-5{
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

.px-6{
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.px-8{
  padding-left: 2rem;
  padding-right: 2rem;
}

.px-\[123px\]{
  padding-left: 123px;
  padding-right: 123px;
}

.px-\[15px\]{
  padding-left: 15px;
  padding-right: 15px;
}

.px-\[20px\]{
  padding-left: 20px;
  padding-right: 20px;
}

.px-\[24px\]{
  padding-left: 24px;
  padding-right: 24px;
}

.px-\[30px\]{
  padding-left: 30px;
  padding-right: 30px;
}

.px-\[40px\]{
  padding-left: 40px;
  padding-right: 40px;
}

.px-\[50px\]{
  padding-left: 50px;
  padding-right: 50px;
}

.px-\[60px\]{
  padding-left: 60px;
  padding-right: 60px;
}

.px-\[72px\]{
  padding-left: 72px;
  padding-right: 72px;
}

.px-\[80px\]{
  padding-left: 80px;
  padding-right: 80px;
}

.px-\[9px\]{
  padding-left: 9px;
  padding-right: 9px;
}

.py-0{
  padding-top: 0px;
  padding-bottom: 0px;
}

.py-0\.5{
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
}

.py-1{
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

.py-1\.5{
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}

.py-10{
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}

.py-12{
  padding-top: 3rem;
  padding-bottom: 3rem;
}

.py-16{
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.py-2{
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.py-2\.5{
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
}

.py-20{
  padding-top: 5rem;
  padding-bottom: 5rem;
}

.py-24{
  padding-top: 6rem;
  padding-bottom: 6rem;
}

.py-3{
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.py-4{
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.py-5{
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}

.py-6{
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}

.py-7{
  padding-top: 1.75rem;
  padding-bottom: 1.75rem;
}

.py-8{
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.py-\[10px\]{
  padding-top: 10px;
  padding-bottom: 10px;
}

.py-\[110px\]{
  padding-top: 110px;
  padding-bottom: 110px;
}

.py-\[11px\]{
  padding-top: 11px;
  padding-bottom: 11px;
}

.py-\[12px\]{
  padding-top: 12px;
  padding-bottom: 12px;
}

.py-\[13px\]{
  padding-top: 13px;
  padding-bottom: 13px;
}

.py-\[15px\]{
  padding-top: 15px;
  padding-bottom: 15px;
}

.py-\[30px\]{
  padding-top: 30px;
  padding-bottom: 30px;
}

.py-\[31px\]{
  padding-top: 31px;
  padding-bottom: 31px;
}

.py-\[37px\]{
  padding-top: 37px;
  padding-bottom: 37px;
}

.py-\[3px\]{
  padding-top: 3px;
  padding-bottom: 3px;
}

.py-\[40px\]{
  padding-top: 40px;
  padding-bottom: 40px;
}

.py-\[42px\]{
  padding-top: 42px;
  padding-bottom: 42px;
}

.py-\[6px\]{
  padding-top: 6px;
  padding-bottom: 6px;
}

.py-\[8px\]{
  padding-top: 8px;
  padding-bottom: 8px;
}

.\!pb-0{
  padding-bottom: 0px !important;
}

.\!pb-5{
  padding-bottom: 1.25rem !important;
}

.\!pl-\[3px\]{
  padding-left: 3px !important;
}

.pb-0{
  padding-bottom: 0px;
}

.pb-10{
  padding-bottom: 2.5rem;
}

.pb-12{
  padding-bottom: 3rem;
}

.pb-16{
  padding-bottom: 4rem;
}

.pb-2{
  padding-bottom: 0.5rem;
}

.pb-20{
  padding-bottom: 5rem;
}

.pb-3{
  padding-bottom: 0.75rem;
}

.pb-4{
  padding-bottom: 1rem;
}

.pb-5{
  padding-bottom: 1.25rem;
}

.pb-6{
  padding-bottom: 1.5rem;
}

.pb-8{
  padding-bottom: 2rem;
}

.pb-\[10px\]{
  padding-bottom: 10px;
}

.pb-\[18px\]{
  padding-bottom: 18px;
}

.pb-\[40px\]{
  padding-bottom: 40px;
}

.pb-\[91px\]{
  padding-bottom: 91px;
}

.pl-1{
  padding-left: 0.25rem;
}

.pl-12{
  padding-left: 3rem;
}

.pl-2{
  padding-left: 0.5rem;
}

.pl-20{
  padding-left: 5rem;
}

.pl-3{
  padding-left: 0.75rem;
}

.pl-5{
  padding-left: 1.25rem;
}

.pl-\[5px\]{
  padding-left: 5px;
}

.pr-2{
  padding-right: 0.5rem;
}

.pr-20{
  padding-right: 5rem;
}

.pr-4{
  padding-right: 1rem;
}

.pr-8{
  padding-right: 2rem;
}

.pr-\[15px\]{
  padding-right: 15px;
}

.ps-\[70px\]{
  padding-inline-start: 70px;
}

.pt-0{
  padding-top: 0px;
}

.pt-1{
  padding-top: 0.25rem;
}

.pt-10{
  padding-top: 2.5rem;
}

.pt-11{
  padding-top: 2.75rem;
}

.pt-12{
  padding-top: 3rem;
}

.pt-2{
  padding-top: 0.5rem;
}

.pt-20{
  padding-top: 5rem;
}

.pt-3{
  padding-top: 0.75rem;
}

.pt-4{
  padding-top: 1rem;
}

.pt-5{
  padding-top: 1.25rem;
}

.pt-6{
  padding-top: 1.5rem;
}

.pt-8{
  padding-top: 2rem;
}

.pt-\[120px\]{
  padding-top: 120px;
}

.pt-\[125px\]{
  padding-top: 125px;
}

.pt-\[24px\]{
  padding-top: 24px;
}

.pt-\[40px\]{
  padding-top: 40px;
}

.pt-\[53px\]{
  padding-top: 53px;
}

.pt-\[94px\]{
  padding-top: 94px;
}

.text-left{
  text-align: left;
}

.text-center{
  text-align: center;
}

.text-right{
  text-align: right;
}

.text-start{
  text-align: start;
}

.align-middle{
  vertical-align: middle;
}

.font-sans{
  font-family: 'Satoshi', sans-serif;
}

.text-2xl{
  font-size: calc(24px + (40 - 24) * ((100vw - 320px) / (1920 - 320)));
  line-height: 1.35;
}

.text-2xs{
  font-size: calc(12px + (12 - 12) * ((100vw - 320px) / (1920 - 320)));
  line-height: 1.35;
  letter-spacing: 1.8px;
}

.text-3xl{
  font-size: calc(40px + (56 - 40) * ((100vw - 320px) / (1920 - 320)));
  line-height: 1.35;
}

.text-3xs{
  font-size: calc(18px + (18 - 18) * ((100vw - 320px) / (1920 - 320)));
  line-height: 1.5;
  letter-spacing: 0.5px;
}

.text-4xl{
  font-size: calc(42px + (58 - 42) * ((100vw - 320px) / (1920 - 320)));
  line-height: 1.35;
}

.text-5xl{
  font-size: 3rem;
  line-height: 1;
}

.text-6xl{
  font-size: 3.75rem;
  line-height: 1;
}

.text-\[10px\]{
  font-size: 10px;
}

.text-\[11px\]{
  font-size: 11px;
}

.text-\[12px\]{
  font-size: 12px;
}

.text-\[13px\]{
  font-size: 13px;
}

.text-\[14px\]{
  font-size: 14px;
}

.text-\[15px\]{
  font-size: 15px;
}

.text-\[16px\]{
  font-size: 16px;
}

.text-\[17px\]{
  font-size: 17px;
}

.text-\[18px\]{
  font-size: 18px;
}

.text-\[19px\]{
  font-size: 19px;
}

.text-\[20px\]{
  font-size: 20px;
}

.text-\[22px\]{
  font-size: 22px;
}

.text-\[24px\]{
  font-size: 24px;
}

.text-\[28px\]{
  font-size: 28px;
}

.text-\[30px\]{
  font-size: 30px;
}

.text-\[32px\]{
  font-size: 32px;
}

.text-\[36px\]{
  font-size: 36px;
}

.text-\[40px\]{
  font-size: 40px;
}

.text-\[44px\]{
  font-size: 44px;
}

.text-\[48px\]{
  font-size: 48px;
}

.text-\[52px\]{
  font-size: 52px;
}

.text-\[56px\]{
  font-size: 56px;
}

.text-\[60px\]{
  font-size: 60px;
}

.text-\[64px\]{
  font-size: 64px;
}

.text-\[72px\]{
  font-size: 72px;
}

.text-\[80px\]{
  font-size: 80px;
}

.text-\[9px\]{
  font-size: 9px;
}

.text-base{
  font-size: calc(18px + (20 - 18) * ((100vw - 320px) / (1920 - 320)));
  line-height: 1.5;
}

.text-body{
  font-size: calc(13px + (14 - 13) * ((100vw - 320px) / (1920 - 320)));
  line-height: 1.35;
}

.text-lg{
  font-size: calc(32px + (32 - 32) * ((100vw - 320px) / (1920 - 320)));
  line-height: 1.35;
}

.text-sm{
  font-size: calc(16px + (18 - 16) * ((100vw - 320px) / (1920 - 320)));
  line-height: 1.5;
}

.text-xl{
  font-size: calc(28px + (36 - 28) * ((100vw - 320px) / (1920 - 320)));
  line-height: 1.35;
}

.text-xs{
  font-size: calc(16px + (16 - 16) * ((100vw - 320px) / (1920 - 320)));
  line-height: 1.35;
}

.font-bold{
  font-weight: 700;
}

.font-extralight{
  font-weight: 200;
}

.font-light{
  font-weight: 300;
}

.font-medium{
  font-weight: 500;
}

.font-normal{
  font-weight: 400;
}

.font-semibold{
  font-weight: 600;
}

.uppercase{
  text-transform: uppercase;
}

.lowercase{
  text-transform: lowercase;
}

.capitalize{
  text-transform: capitalize;
}

.italic{
  font-style: italic;
}

.leading-5{
  line-height: 1.25rem;
}

.leading-6{
  line-height: 1.5rem;
}

.leading-\[1\.1\]{
  line-height: 1.1;
}

.leading-\[1\.25\]{
  line-height: 1.25;
}

.leading-\[1\.5\]{
  line-height: 1.5;
}

.leading-\[19px\]{
  line-height: 19px;
}

.leading-\[24px\]{
  line-height: 24px;
}

.leading-\[27px\]{
  line-height: 27px;
}

.leading-none{
  line-height: 1;
}

.leading-normal{
  line-height: 1.5;
}

.leading-relaxed{
  line-height: 1.625;
}

.leading-snug{
  line-height: 1.375;
}

.leading-tight{
  line-height: 1.25;
}

.\!tracking-\[\.8px\]{
  letter-spacing: .8px !important;
}

.tracking-\[-0\.2px\]{
  letter-spacing: -0.2px;
}

.tracking-\[0\.25em\]{
  letter-spacing: 0.25em;
}

.tracking-\[0\.2em\]{
  letter-spacing: 0.2em;
}

.tracking-\[0\.4px\]{
  letter-spacing: 0.4px;
}

.tracking-\[0\.64px\]{
  letter-spacing: 0.64px;
}

.tracking-normal{
  letter-spacing: 0em;
}

.tracking-tight{
  letter-spacing: -0.025em;
}

.tracking-wide{
  letter-spacing: 0.025em;
}

.tracking-wider{
  letter-spacing: 0.05em;
}

.tracking-widest{
  letter-spacing: 0.1em;
}

.\!text-dark{
  color: var(--dark) !important;
}

.text-\[\#121316\]{
  --tw-text-opacity: 1;
  color: rgb(18 19 22 / var(--tw-text-opacity));
}

.text-\[\#1a1a1a\]{
  --tw-text-opacity: 1;
  color: rgb(26 26 26 / var(--tw-text-opacity));
}

.text-\[\#1a1a1a\]\/60{
  color: rgb(26 26 26 / 0.6);
}

.text-\[\#aaaaaa\]{
  --tw-text-opacity: 1;
  color: rgb(170 170 170 / var(--tw-text-opacity));
}

.text-\[\#fa8b9c\]{
  --tw-text-opacity: 1;
  color: rgb(250 139 156 / var(--tw-text-opacity));
}

.text-\[\#fff\]{
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}

.text-\[\#ffff\]{
  color: #ffff;
}

.text-\[var\(--bodytext\)\]{
  color: var(--bodytext);
}

.text-\[var\(--grayborder\)\]{
  color: var(--grayborder);
}

.text-\[var\(--gre-primary\)\]{
  color: var(--gre-primary);
}

.text-amber-300{
  --tw-text-opacity: 1;
  color: rgb(252 211 77 / var(--tw-text-opacity));
}

.text-amber-400{
  --tw-text-opacity: 1;
  color: rgb(251 191 36 / var(--tw-text-opacity));
}

.text-amber-600{
  --tw-text-opacity: 1;
  color: rgb(217 119 6 / var(--tw-text-opacity));
}

.text-black{
  color: hsl(var(--black));
}

.text-black\/30{
  color: hsl(var(--black) / 0.3);
}

.text-blue{
  color: var(--blue);
}

.text-body{
  color: var(--body);
}

.text-bodytext{
  color: var(--bodytext);
}

.text-cyan-100{
  --tw-text-opacity: 1;
  color: rgb(207 250 254 / var(--tw-text-opacity));
}

.text-cyan-200{
  --tw-text-opacity: 1;
  color: rgb(165 243 252 / var(--tw-text-opacity));
}

.text-dark{
  color: var(--dark);
}

.text-darkgray{
  color: var(--darkgray);
}

.text-emerald-100{
  --tw-text-opacity: 1;
  color: rgb(209 250 229 / var(--tw-text-opacity));
}

.text-emerald-200{
  --tw-text-opacity: 1;
  color: rgb(167 243 208 / var(--tw-text-opacity));
}

.text-emerald-300{
  --tw-text-opacity: 1;
  color: rgb(110 231 183 / var(--tw-text-opacity));
}

.text-emerald-400{
  --tw-text-opacity: 1;
  color: rgb(52 211 153 / var(--tw-text-opacity));
}

.text-gray{
  color: var(--gray);
}

.text-graycolor{
  color: var(--graycolor);
}

.text-graynormal{
  color: var(--body);
}

.text-green-400{
  --tw-text-opacity: 1;
  color: rgb(74 222 128 / var(--tw-text-opacity));
}

.text-green-500{
  --tw-text-opacity: 1;
  color: rgb(34 197 94 / var(--tw-text-opacity));
}

.text-green-600{
  --tw-text-opacity: 1;
  color: rgb(22 163 74 / var(--tw-text-opacity));
}

.text-green-800{
  --tw-text-opacity: 1;
  color: rgb(22 101 52 / var(--tw-text-opacity));
}

.text-indigo-100{
  --tw-text-opacity: 1;
  color: rgb(224 231 255 / var(--tw-text-opacity));
}

.text-indigo-200{
  --tw-text-opacity: 1;
  color: rgb(199 210 254 / var(--tw-text-opacity));
}

.text-indigo-300{
  --tw-text-opacity: 1;
  color: rgb(165 180 252 / var(--tw-text-opacity));
}

.text-indigo-400{
  --tw-text-opacity: 1;
  color: rgb(129 140 248 / var(--tw-text-opacity));
}

.text-indigo-600{
  --tw-text-opacity: 1;
  color: rgb(79 70 229 / var(--tw-text-opacity));
}

.text-inherit{
  color: inherit;
}

.text-lightgray{
  color: var(--lightgray);
}

.text-pink-300{
  --tw-text-opacity: 1;
  color: rgb(249 168 212 / var(--tw-text-opacity));
}

.text-pink-400{
  --tw-text-opacity: 1;
  color: rgb(244 114 182 / var(--tw-text-opacity));
}

.text-pink-500{
  --tw-text-opacity: 1;
  color: rgb(236 72 153 / var(--tw-text-opacity));
}

.text-primary{
  color: var(--primary);
}

.text-purple-500{
  --tw-text-opacity: 1;
  color: rgb(168 85 247 / var(--tw-text-opacity));
}

.text-red-100{
  --tw-text-opacity: 1;
  color: rgb(254 226 226 / var(--tw-text-opacity));
}

.text-red-200{
  --tw-text-opacity: 1;
  color: rgb(254 202 202 / var(--tw-text-opacity));
}

.text-red-300{
  --tw-text-opacity: 1;
  color: rgb(252 165 165 / var(--tw-text-opacity));
}

.text-red-300\/80{
  color: rgb(252 165 165 / 0.8);
}

.text-red-400{
  --tw-text-opacity: 1;
  color: rgb(248 113 113 / var(--tw-text-opacity));
}

.text-red-500{
  --tw-text-opacity: 1;
  color: rgb(239 68 68 / var(--tw-text-opacity));
}

.text-red-600{
  --tw-text-opacity: 1;
  color: rgb(220 38 38 / var(--tw-text-opacity));
}

.text-red-800{
  --tw-text-opacity: 1;
  color: rgb(153 27 27 / var(--tw-text-opacity));
}

.text-skyblue{
  color: var(--sky-blue);
}

.text-slate-200{
  --tw-text-opacity: 1;
  color: rgb(226 232 240 / var(--tw-text-opacity));
}

.text-slate-300{
  --tw-text-opacity: 1;
  color: rgb(203 213 225 / var(--tw-text-opacity));
}

.text-slate-400{
  --tw-text-opacity: 1;
  color: rgb(148 163 184 / var(--tw-text-opacity));
}

.text-slate-500{
  --tw-text-opacity: 1;
  color: rgb(100 116 139 / var(--tw-text-opacity));
}

.text-slate-600{
  --tw-text-opacity: 1;
  color: rgb(71 85 105 / var(--tw-text-opacity));
}

.text-staticBlack{
  color: hsl(var(--static-black));
}

.text-staticDark{
  color: hsl(var(--static-dark));
}

.text-staticLightgray{
  color: hsl(var(--static-lightgray));
}

.text-staticWhite{
  color: hsl(var(--static-white));
}

.text-staticWhite\/30{
  color: hsl(var(--static-white) / 0.3);
}

.text-staticWhite\/40{
  color: hsl(var(--static-white) / 0.4);
}

.text-staticWhite\/60{
  color: hsl(var(--static-white) / 0.6);
}

.text-staticWhite\/70{
  color: hsl(var(--static-white) / 0.7);
}

.text-staticWhite\/80{
  color: hsl(var(--static-white) / 0.8);
}

.text-staticWhite\/90{
  color: hsl(var(--static-white) / 0.9);
}

.text-title{
  color: var(--title);
}

.text-transparent{
  color: transparent;
}

.text-violet-400{
  --tw-text-opacity: 1;
  color: rgb(167 139 250 / var(--tw-text-opacity));
}

.text-warning{
  color: var(--warning);
}

.text-white{
  color: hsl(var(--white));
}

.text-white\/70{
  color: hsl(var(--white) / 0.7);
}

.text-white\/80{
  color: hsl(var(--white) / 0.8);
}

.text-white\/90{
  color: hsl(var(--white) / 0.9);
}

.text-yellow-400{
  --tw-text-opacity: 1;
  color: rgb(250 204 21 / var(--tw-text-opacity));
}

.text-yellow-600{
  --tw-text-opacity: 1;
  color: rgb(202 138 4 / var(--tw-text-opacity));
}

.text-yellow-700{
  --tw-text-opacity: 1;
  color: rgb(161 98 7 / var(--tw-text-opacity));
}

.text-yellow-800{
  --tw-text-opacity: 1;
  color: rgb(133 77 14 / var(--tw-text-opacity));
}

.underline{
  text-decoration-line: underline;
}

.line-through{
  text-decoration-line: line-through;
}

.decoration-staticWhite\/20{
  text-decoration-color: hsl(var(--static-white) / 0.2);
}

.decoration-staticWhite\/30{
  text-decoration-color: hsl(var(--static-white) / 0.3);
}

.decoration-solid{
  text-decoration-style: solid;
}

.underline-offset-4{
  text-underline-offset: 4px;
}

.placeholder-gray::-moz-placeholder{
  color: var(--gray);
}

.placeholder-gray::placeholder{
  color: var(--gray);
}

.placeholder-lightBorder::-moz-placeholder{
  color: var(--light-border);
}

.placeholder-lightBorder::placeholder{
  color: var(--light-border);
}

.placeholder-white::-moz-placeholder{
  color: hsl(var(--white));
}

.placeholder-white::placeholder{
  color: hsl(var(--white));
}

.opacity-0{
  opacity: 0;
}

.opacity-100{
  opacity: 1;
}

.opacity-25{
  opacity: 0.25;
}

.opacity-40{
  opacity: 0.4;
}

.opacity-50{
  opacity: 0.5;
}

.opacity-60{
  opacity: 0.6;
}

.opacity-70{
  opacity: 0.7;
}

.opacity-75{
  opacity: 0.75;
}

.opacity-80{
  opacity: 0.8;
}

.opacity-90{
  opacity: 0.9;
}

.opacity-95{
  opacity: 0.95;
}

.bg-blend-lighten{
  background-blend-mode: lighten;
}

.shadow{
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-2xl{
  --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
  --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[0_0_10px_rgba\(255\2c 233\2c 196\2c 0\.55\)\]{
  --tw-shadow: 0 0 10px rgba(255,233,196,0.55);
  --tw-shadow-colored: 0 0 10px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[0_0_30px_rgba\(224\2c 33\2c 202\2c 0\.59\)\]{
  --tw-shadow: 0 0 30px rgba(224,33,202,0.59);
  --tw-shadow-colored: 0 0 30px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-custom{
  --tw-shadow: 2px 5px 4px 0 rgba(0,0,0,0.25);
  --tw-shadow-colored: 2px 5px 4px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-lg{
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-sm{
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-xl{
  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-cyan-500\/20{
  --tw-shadow-color: rgb(6 182 212 / 0.2);
  --tw-shadow: var(--tw-shadow-colored);
}

.shadow-emerald-500\/20{
  --tw-shadow-color: rgb(16 185 129 / 0.2);
  --tw-shadow: var(--tw-shadow-colored);
}

.shadow-indigo-500\/20{
  --tw-shadow-color: rgb(99 102 241 / 0.2);
  --tw-shadow: var(--tw-shadow-colored);
}

.shadow-red-500\/20{
  --tw-shadow-color: rgb(239 68 68 / 0.2);
  --tw-shadow: var(--tw-shadow-colored);
}

.outline-none{
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.outline{
  outline-style: solid;
}

.ring{
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.ring-1{
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.ring-2{
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.ring-inset{
  --tw-ring-inset: inset;
}

.ring-primary{
  --tw-ring-color: var(--primary);
}

.ring-staticBlack\/10{
  --tw-ring-color: hsl(var(--static-black) / 0.1);
}

.ring-white\/50{
  --tw-ring-color: hsl(var(--white) / 0.5);
}

.blur{
  --tw-blur: blur(8px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.blur-lg{
  --tw-blur: blur(16px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.drop-shadow-xl{
  --tw-drop-shadow: drop-shadow(0 20px 13px rgb(0 0 0 / 0.03)) drop-shadow(0 8px 5px rgb(0 0 0 / 0.08));
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.filter{
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.backdrop-blur{
  --tw-backdrop-blur: blur(8px);
  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
          backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

.backdrop-blur-\[4px\]{
  --tw-backdrop-blur: blur(4px);
  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
          backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

.backdrop-blur-md{
  --tw-backdrop-blur: blur(12px);
  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
          backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

.backdrop-blur-sm{
  --tw-backdrop-blur: blur(4px);
  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
          backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

.backdrop-filter{
  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
          backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

.transition{
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-all{
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-colors{
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-opacity{
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-shadow{
  transition-property: box-shadow;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-transform{
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.delay-\[0s\]{
  transition-delay: 0s;
}

.duration-100{
  transition-duration: 100ms;
}

.duration-1000{
  transition-duration: 1000ms;
}

.duration-150{
  transition-duration: 150ms;
}

.duration-200{
  transition-duration: 200ms;
}

.duration-300{
  transition-duration: 300ms;
}

.duration-500{
  transition-duration: 500ms;
}

.duration-700{
  transition-duration: 700ms;
}

.ease-in{
  transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
}

.ease-in-out{
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.ease-linear{
  transition-timing-function: linear;
}

.ease-out{
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

[dir=rtl] .pl-1{
  padding-left: unset;
  padding-right: 0.25rem;
}

[dir=rtl] .pr-2{
  padding-left: 0.5rem;
  padding-right: unset;
}

[dir=rtl] .pl-2{
  padding-left: unset;
  padding-right: 0.5rem;
}

[dir=rtl] .pl-3{
  padding-left: unset;
  padding-right: 0.75rem;
}

[dir=rtl] .pr-4{
  padding-left: 1rem;
  padding-right: unset;
}

[dir=rtl] .pl-5{
  padding-left: unset;
  padding-right: 1.25rem;
}

[dir=rtl] .pr-8{
  padding-left: 2rem;
  padding-right: unset;
}

[dir=rtl] .pl-12{
  padding-left: unset;
  padding-right: 3rem;
}

[dir=rtl] .pr-20{
  padding-left: 5rem;
  padding-right: unset;
}

[dir=rtl] .pl-20{
  padding-left: unset;
  padding-right: 5rem;
}

[dir=rtl] .pr-0.5{
  padding-left: 0.125rem;
  padding-right: unset;
}

[dir=rtl] .pl-0.5{
  padding-left: unset;
  padding-right: 0.125rem;
}

[dir=rtl] .pr-1.5{
  padding-left: 0.375rem;
  padding-right: unset;
}

[dir=rtl] .pl-1.5{
  padding-left: unset;
  padding-right: 0.375rem;
}

[dir=rtl] .pr-2.5{
  padding-left: 0.625rem;
  padding-right: unset;
}

[dir=rtl] .pl-2.5{
  padding-left: unset;
  padding-right: 0.625rem;
}

[dir=rtl] .pr-3.5{
  padding-left: 0.875rem;
  padding-right: unset;
}

[dir=rtl] .pl-3.5{
  padding-left: unset;
  padding-right: 0.875rem;
}

[dir=rtl] .mr-1{
  margin-left: 0.25rem;
  margin-right: unset;
}

[dir=rtl] .ml-1{
  margin-left: unset;
  margin-right: 0.25rem;
}

[dir=rtl] .mr-2{
  margin-left: 0.5rem;
  margin-right: unset;
}

[dir=rtl] .ml-2{
  margin-left: unset;
  margin-right: 0.5rem;
}

[dir=rtl] .ml-3{
  margin-left: unset;
  margin-right: 0.75rem;
}

[dir=rtl] .mr-4{
  margin-left: 1rem;
  margin-right: unset;
}

[dir=rtl] .ml-5{
  margin-left: unset;
  margin-right: 1.25rem;
}

[dir=rtl] .ml-6{
  margin-left: unset;
  margin-right: 1.5rem;
}

[dir=rtl] .ml-8{
  margin-left: unset;
  margin-right: 2rem;
}

[dir=rtl] .ml-auto{
  margin-left: unset;
  margin-right: auto;
}

[dir=rtl] .mr-0.5{
  margin-left: 0.125rem;
  margin-right: unset;
}

[dir=rtl] .ml-0.5{
  margin-left: unset;
  margin-right: 0.125rem;
}

[dir=rtl] .mr-1.5{
  margin-left: 0.375rem;
  margin-right: unset;
}

[dir=rtl] .ml-1.5{
  margin-left: unset;
  margin-right: 0.375rem;
}

[dir=rtl] .mr-2.5{
  margin-left: 0.625rem;
  margin-right: unset;
}

[dir=rtl] .ml-2.5{
  margin-left: unset;
  margin-right: 0.625rem;
}

[dir=rtl] .mr-3.5{
  margin-left: 0.875rem;
  margin-right: unset;
}

[dir=rtl] .ml-3.5{
  margin-left: unset;
  margin-right: 0.875rem;
}

.line-clamp-1{
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

.line-clamp-2{
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.line-clamp-3{
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.line-clamp-4{
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}

.animate__fadeInDown{
  animation-name: fadeInDown;
}

@keyframes bounce{
  from, 20%, 53%, 80%, to{
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transform: translate3d(0, 0, 0);
  }

  40%, 43%{
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    transform: translate3d(0, -30px, 0);
  }

  70%{
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    transform: translate3d(0, -15px, 0);
  }

  90%{
    transform: translate3d(0, -4px, 0);
  }
}

@keyframes flash{
  from, 50%, to{
    opacity: 1;
  }

  25%, 75%{
    opacity: 0;
  }
}

@keyframes pulse{
  from{
    transform: scale3d(1, 1, 1);
  }

  50%{
    transform: scale3d(1.05, 1.05, 1.05);
  }

  to{
    transform: scale3d(1, 1, 1);
  }
}

@keyframes rubberBand{
  from{
    transform: scale3d(1, 1, 1);
  }

  30%{
    transform: scale3d(1.25, 0.75, 1);
  }

  40%{
    transform: scale3d(0.75, 1.25, 1);
  }

  50%{
    transform: scale3d(1.15, 0.85, 1);
  }

  65%{
    transform: scale3d(0.95, 1.05, 1);
  }

  75%{
    transform: scale3d(1.05, 0.95, 1);
  }

  to{
    transform: scale3d(1, 1, 1);
  }
}

@keyframes shakeX{
  from, to{
    transform: translate3d(0, 0, 0);
  }

  10%, 30%, 50%, 70%, 90%{
    transform: translate3d(-10px, 0, 0);
  }

  20%, 40%, 60%, 80%{
    transform: translate3d(10px, 0, 0);
  }
}

@keyframes shakeY{
  from, to{
    transform: translate3d(0, 0, 0);
  }

  10%, 30%, 50%, 70%, 90%{
    transform: translate3d(0, -10px, 0);
  }

  20%, 40%, 60%, 80%{
    transform: translate3d(0, 10px, 0);
  }
}

@keyframes headShake{
  0%{
    transform: translateX(0);
  }

  6.5%{
    transform: translateX(-6px) rotateY(-9deg);
  }

  18.5%{
    transform: translateX(5px) rotateY(7deg);
  }

  31.5%{
    transform: translateX(-3px) rotateY(-5deg);
  }

  43.5%{
    transform: translateX(2px) rotateY(3deg);
  }

  50%{
    transform: translateX(0);
  }
}

@keyframes swing{
  20%{
    transform: rotate3d(0, 0, 1, 15deg);
  }

  40%{
    transform: rotate3d(0, 0, 1, -10deg);
  }

  60%{
    transform: rotate3d(0, 0, 1, 5deg);
  }

  80%{
    transform: rotate3d(0, 0, 1, -5deg);
  }

  to{
    transform: rotate3d(0, 0, 1, 0deg);
  }
}

@keyframes tada{
  from{
    transform: scale3d(1, 1, 1);
  }

  10%, 20%{
    transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
  }

  30%, 50%, 70%, 90%{
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  }

  40%, 60%, 80%{
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  }

  to{
    transform: scale3d(1, 1, 1);
  }
}

@keyframes wobble{
  from{
    transform: translate3d(0, 0, 0);
  }

  15%{
    transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
  }

  30%{
    transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
  }

  45%{
    transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
  }

  60%{
    transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
  }

  75%{
    transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
  }

  to{
    transform: translate3d(0, 0, 0);
  }
}

@keyframes jello{
  from, 11.1% to{
    transform: translate3d(0, 0, 0);
  }

  22.2%{
    transform: skewX(-12.5deg) skewY(-12.5deg);
  }

  33.3%{
    transform: skewX(6.25deg) skewY(6.25deg);
  }

  44.4%{
    transform: skewX(-3.125deg) skewY(-3.125deg);
  }

  55.5%{
    transform: skewX(1.5625deg) skewY(1.5625deg);
  }

  66.6%{
    transform: skewX(-0.78125deg) skewY(-0.78125deg);
  }

  77.7%{
    transform: skewX(0.390625deg) skewY(0.390625deg);
  }

  88.8%{
    transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
  }
}

@keyframes heartBeat{
  0%{
    transform: scale(1);
  }

  14%{
    transform: scale(1.3);
  }

  28%{
    transform: scale(1);
  }

  42%{
    transform: scale(1.3);
  }

  70%{
    transform: scale(1);
  }
}

@keyframes hinge{
  0%{
    transform-origin: top left;
    animation-timing-function: ease-in-out;
  }

  20%, 60%{
    transform: rotate3d(0, 0, 1, 80deg);
    transform-origin: top left;
    animation-timing-function: ease-in-out;
  }

  40%, 80%{
    transform: rotate3d(0, 0, 1, 60deg);
    transform-origin: top left;
    animation-timing-function: ease-in-out;
  }

  to{
    transform: translate3d(0, 700px, 0);
    opacity: 0;
  }
}

@keyframes jackInTheBox{
  from{
    opacity: 0;
    transform-origin: center bottom;
    transform: scale(0.1) rotate(30deg);
  }

  50%{
    transform: rotate(-10deg);
  }

  70%{
    transform: rotate(3deg);
  }

  to{
    transform: scale(1);
  }
}

@keyframes lightSpeedInLeft{
  from{
    opacity: 0;
    transform: translate3d(100%, 0, 0) skewX(-30deg);
  }

  60%{
    opacity: 1;
    transform: skewX(20deg);
  }

  80%{
    transform: skewX(-5deg);
  }

  to{
    transform: translate3d(0, 0, 0);
  }
}

@keyframes lightSpeedInRight{
  from{
    opacity: 0;
    transform: translate3d(100%, 0, 0) skewX(-30deg);
  }

  60%{
    opacity: 1;
    transform: skewX(20deg);
  }

  80%{
    transform: skewX(-5deg);
  }

  to{
    transform: translate3d(0, 0, 0);
  }
}

@keyframes lightSpeedOutLeft{
  from{
    opacity: 1;
  }

  to{
    opacity: 0;
    transform: translate3d(100%, 0, 0) skewX(30deg);
  }
}

@keyframes lightSpeedOutRight{
  from{
    opacity: 1;
  }

  to{
    opacity: 0;
    transform: translate3d(100%, 0, 0) skewX(30deg);
  }
}

@keyframes flip{
  from{
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg);
    animation-timing-function: ease-out;
  }

  40%{
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
    animation-timing-function: ease-out;
  }

  50%{
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
    animation-timing-function: ease-in;
  }

  80%{
    transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
    animation-timing-function: ease-in;
  }

  to{
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
    animation-timing-function: ease-in;
  }
}

@keyframes flipInX{
  from{
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    animation-timing-function: ease-in;
    opacity: 0;
  }

  40%{
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    animation-timing-function: ease-in;
  }

  60%{
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1;
  }

  80%{
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  }

  to{
    transform: perspective(400px);
  }
}

@keyframes flipInY{
  from{
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    animation-timing-function: ease-in;
    opacity: 0;
  }

  40%{
    transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    animation-timing-function: ease-in;
  }

  60%{
    transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    opacity: 1;
  }

  80%{
    transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
  }

  to{
    transform: perspective(400px);
  }
}

@keyframes flipOutX{
  from{
    transform: perspective(400px);
  }

  30%{
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    opacity: 1;
  }

  to{
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    opacity: 0;
  }
}

@keyframes flipOutY{
  from{
    transform: perspective(400px);
  }

  30%{
    transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
    opacity: 1;
  }

  to{
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    opacity: 0;
  }
}

@keyframes rotateIn{
  from{
    transform-origin: center;
    transform: rotate3d(0, 0, 1, -200deg);
    opacity: 0;
  }

  to{
    transform-origin: center;
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

@keyframes rotateInDownLeft{
  from{
    transform-origin: left bottom;
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }

  to{
    transform-origin: left bottom;
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

@keyframes rotateInDownRight{
  from{
    transform-origin: right bottom;
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }

  to{
    transform-origin: right bottom;
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

@keyframes rotateInUpLeft{
  from{
    transform-origin: left top;
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }

  to{
    transform-origin: left top;
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

@keyframes rotateInUpRight{
  from{
    transform-origin: right bottom;
    transform: rotate3d(0, 0, 1, -90deg);
    opacity: 0;
  }

  to{
    transform-origin: right bottom;
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

@keyframes rotateOut{
  from{
    transform-origin: center;
    opacity: 1;
  }

  to{
    transform-origin: center;
    transform: rotate3d(0, 0, 1, 200deg);
    opacity: 0;
  }
}

@keyframes rotateOutDownLeft{
  from{
    transform-origin: left bottom;
    opacity: 1;
  }

  to{
    transform-origin: left bottom;
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }
}

@keyframes rotateOutDownRight{
  from{
    transform-origin: right bottom;
    opacity: 1;
  }

  to{
    transform-origin: right bottom;
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }
}

@keyframes rotateOutUpLeft{
  from{
    transform-origin: left bottom;
    opacity: 1;
  }

  to{
    transform-origin: left bottom;
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }
}

@keyframes rotateOutUpRight{
  from{
    transform-origin: right bottom;
    opacity: 1;
  }

  to{
    transform-origin: left bottom;
    transform: rotate3d(0, 0, 1, 90deg);
    opacity: 0;
  }
}

@keyframes rollIn{
  from{
    opacity: 0;
    transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
  }

  to{
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes rollOut{
  from{
    opacity: 1;
  }

  to{
    opacity: 0;
    transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
  }
}

@keyframes zoomIn{
  from{
    opacity: 0;
    transform: scale3d(0.3, 0.3, 0.3);
  }

  50%{
    opacity: 1;
  }
}

@keyframes zoomInDown{
  from{
    opacity: 0;
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60%{
    opacity: 1;
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

@keyframes zoomInLeft{
  from{
    opacity: 0;
    transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60%{
    opacity: 1;
    transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

@keyframes zoomInRight{
  from{
    opacity: 0;
    transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60%{
    opacity: 1;
    transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

@keyframes zoomInUp{
  from{
    opacity: 0;
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60%{
    opacity: 1;
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

@keyframes bounceIn{
  from, 20%, 40%, 60%, 80%, to{
    animation-timing-function: ease-in-out;
  }

  0%{
    opacity: 0;
    transform: scale3d(0.3, 0.3, 0.3);
  }

  20%{
    transform: scale3d(1.1, 1.1, 1.1);
  }

  40%{
    transform: scale3d(0.9, 0.9, 0.9);
  }

  60%{
    transform: scale3d(1.03, 1.03, 1.03);
    opacity: 1;
  }

  80%{
    transform: scale3d(0.97, 0.97, 0.97);
  }

  to{
    opacity: 1;
    transform: scale3d(1, 1, 1);
  }
}

@keyframes bounceInDown{
  from, 60%, 75%, 90%, to{
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0%{
    opacity: 0;
    transform: translate3d(0, -3000px, 0);
  }

  60%{
    opacity: 1;
    transform: translate3d(0, 25px, 0);
  }

  75%{
    transform: translate3d(0, -10px, 0);
  }

  90%{
    transform: translate3d(0, 5px, 0);
  }

  to{
    transform: translate3d(0, 0, 0);
  }
}

@keyframes bounceInLeft{
  from, 60%, 75%, 90%, to{
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0%{
    opacity: 0;
    transform: translate3d(-3000px, 0, 0);
  }

  60%{
    opacity: 1;
    transform: translate3d(25px, 0, 0);
  }

  75%{
    transform: translate3d(-10px, 0, 0);
  }

  90%{
    transform: translate3d(5px, 0, 0);
  }

  to{
    transform: translate3d(0, 0, 0);
  }
}

@keyframes bounceInRight{
  from, 60%, 75%, 90%, to{
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0%{
    opacity: 0;
    transform: translate3d(3000px, 0, 0);
  }

  60%{
    opacity: 1;
    transform: translate3d(-25px, 0, 0);
  }

  75%{
    transform: translate3d(10px, 0, 0);
  }

  90%{
    transform: translate3d(-5px, 0, 0);
  }

  to{
    transform: translate3d(0, 0, 0);
  }
}

@keyframes bounceInUp{
  from, 60%, 75%, 90%, to{
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0%{
    opacity: 0;
    transform: translate3d(0, 3000px, 0);
  }

  60%{
    opacity: 1;
    transform: translate3d(0, -20px, 0);
  }

  75%{
    transform: translate3d(0, 10px, 0);
  }

  90%{
    transform: translate3d(0, -5px, 0);
  }

  to{
    transform: translate3d(0, 0, 0);
  }
}

@keyframes bounceOut{
  20%{
    transform: scale3d(0.9, 0.9, 0.9);
  }

  50%, 55%{
    opacity: 1;
    transform: scale3d(1.1, 1.1, 1.1);
  }

  to{
    opacity: 0;
    transform: scale3d(0.3, 0.3, 0.3);
  }
}

@keyframes bounceOutDown{
  20%{
    transform: translate3d(0, 10px, 0);
  }

  40%, 45%{
    opacity: 1;
    transform: translate3d(0, -20px, 0);
  }

  to{
    opacity: 0;
    transform: translate3d(0, 2000px, 0);
  }
}

@keyframes bounceOutLeft{
  20%{
    opacity: 1;
    transform: translate3d(20px, 0, 0);
  }

  to{
    opacity: 0;
    transform: translate3d(-2000px, 0, 0);
  }
}

@keyframes bounceOutRight{
  20%{
    opacity: 1;
    transform: translate3d(-20px, 0, 0);
  }

  to{
    opacity: 0;
    transform: translate3d(2000px, 0, 0);
  }
}

@keyframes bounceOutUp{
  20%{
    transform: translate3d(0, -10px, 0);
  }

  40%, 45%{
    opacity: 1;
    transform: translate3d(0, 20px, 0);
  }

  to{
    opacity: 0;
    transform: translate3d(0, -2000px, 0);
  }
}

@keyframes zoomOut{
  from{
    opacity: 1;
  }

  50%{
    opacity: 0;
    transform: scale3d(0.3, 0.3, 0.3);
  }

  to{
    opacity: 0;
  }
}

@keyframes zoomOutDown{
  40%{
    opacity: 1;
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  to{
    opacity: 0;
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
    transform-origin: center bottom;
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

@keyframes zoomOutLeft{
  40%{
    opacity: 1;
    transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
  }

  to{
    opacity: 0;
    transform: scale(0.1) translate3d(-2000px, 0, 0);
    transform-origin: left center;
  }
}

@keyframes zoomOutRight{
  40%{
    opacity: 1;
    transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
  }

  to{
    opacity: 0;
    transform: scale(0.1) translate3d(2000px, 0, 0);
    transform-origin: right center;
  }
}

@keyframes zoomOutUp{
  40%{
    opacity: 1;
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  to{
    opacity: 0;
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
    transform-origin: center bottom;
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

@keyframes slideInDown{
  from{
    transform: translate3d(0, -100%, 0);
    visibility: visible;
  }

  to{
    transform: translate3d(0, 0, 0);
  }
}

@keyframes slideInLeft{
  from{
    transform: translate3d(-100%, 0, 0);
    visibility: visible;
  }

  to{
    transform: translate3d(0, 0, 0);
  }
}

@keyframes slideInRight{
  from{
    transform: translate3d(100%, 0, 0);
    visibility: visible;
  }

  to{
    transform: translate3d(0, 0, 0);
  }
}

@keyframes slideInUp{
  from{
    transform: translate3d(0, 100%, 0);
    visibility: visible;
  }

  to{
    transform: translate3d(0, 0, 0);
  }
}

@keyframes slideOutDown{
  from{
    transform: translate3d(0, 0, 0);
  }

  to{
    visibility: hidden;
    transform: translate3d(0, 100%, 0);
  }
}

@keyframes slideOutLeft{
  from{
    transform: translate3d(0, 0, 0);
  }

  to{
    visibility: hidden;
    transform: translate3d(-100%, 0, 0);
  }
}

@keyframes slideOutRight{
  from{
    transform: translate3d(0, 0, 0);
  }

  to{
    visibility: hidden;
    transform: translate3d(100%, 0, 0);
  }
}

@keyframes slideOutUp{
  from{
    transform: translate3d(0, 0, 0);
  }

  to{
    visibility: hidden;
    transform: translate3d(0, -100%, 0);
  }
}

@keyframes fadeIn{
  from{
    opacity: 0;
  }

  to{
    opacity: 1;
  }
}

@keyframes fadeInDown{
  from{
    opacity: 0;
    transform: translate3d(0, -100%, 0);
  }

  to{
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInDownBig{
  from{
    opacity: 0;
    transform: translate3d(0, -2000px, 0);
  }

  to{
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInLeft{
  from{
    opacity: 0;
    transform: translate3d(-100%, 0, 0);
  }

  to{
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInLeftBig{
  from{
    opacity: 0;
    transform: translate3d(-2000px, 0, 0);
  }

  to{
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInRight{
  from{
    opacity: 0;
    transform: translate3d(100%, 0, 0);
  }

  to{
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInRightBig{
  from{
    opacity: 0;
    transform: translate3d(2000px, 0, 0);
  }

  to{
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInTopLeft{
  from{
    opacity: 0;
    transform: translate3d(-100%, -100%, 0);
  }

  to{
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInTopRight{
  from{
    opacity: 0;
    transform: translate3d(100%, -100%, 0);
  }

  to{
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInBottomLeft{
  from{
    opacity: 0;
    transform: translate3d(-100%, 100%, 0);
  }

  to{
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInBottomRight{
  from{
    opacity: 0;
    transform: translate3d(100%, 100%, 0);
  }

  to{
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInUp{
  from{
    opacity: 0;
    transform: translate3d(0, 100%, 0);
  }

  to{
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInUpBig{
  from{
    opacity: 0;
    transform: translate3d(0, 2000px, 0);
  }

  to{
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeOut{
  from{
    opacity: 1;
  }

  to{
    opacity: 0;
  }
}

@keyframes fadeOutDown{
  from{
    opacity: 1;
  }

  to{
    opacity: 0;
    transform: translate3d(0, 100%, 0);
  }
}

@keyframes fadeOutDownBig{
  from{
    opacity: 1;
  }

  to{
    opacity: 0;
    transform: translate3d(0, 2000px, 0);
  }
}

@keyframes fadeOutLeft{
  from{
    opacity: 1;
  }

  to{
    opacity: 0;
    transform: translate3d(-100%, 0, 0);
  }
}

@keyframes fadeOutLeftBig{
  from{
    opacity: 1;
  }

  to{
    opacity: 0;
    transform: translate3d(-2000px, 0, 0);
  }
}

@keyframes fadeOutRight{
  from{
    opacity: 1;
  }

  to{
    opacity: 0;
    transform: translate3d(100%, 0, 0);
  }
}

@keyframes fadeOutRightBig{
  from{
    opacity: 1;
  }

  to{
    opacity: 0;
    transform: translate3d(2000px, 0, 0);
  }
}

@keyframes fadeOutUp{
  from{
    opacity: 1;
  }

  to{
    opacity: 0;
    transform: translate3d(0, -100%, 0);
  }
}

@keyframes fadeOutUpBig{
  from{
    opacity: 1;
  }

  to{
    opacity: 0;
    transform: translate3d(0, -2000px, 0);
  }
}

@keyframes fadeOutTopLeft{
  from{
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }

  to{
    opacity: 0;
    transform: translate3d(-100%, -100%, 0);
  }
}

@keyframes fadeOutTopRight{
  from{
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }

  to{
    opacity: 0;
    transform: translate3d(100%, -100%, 0);
  }
}

@keyframes fadeOutBottomLeft{
  from{
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }

  to{
    opacity: 0;
    transform: translate3d(-100%, 100%, 0);
  }
}

@keyframes fadeOutBottomRight{
  from{
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }

  to{
    opacity: 0;
    transform: translate3d(100%, 100%, 0);
  }
}

@keyframes backInDown{
  0%{
    opacity: 0.7;
    transform: translateY(-1200px) scale(0.7);
  }

  80%{
    opacity: 0.7;
    transform: translateY(0px) scale(0.7);
  }

  100%{
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes backInUp{
  0%{
    opacity: 0.7;
    transform: translateY(1200px) scale(0.7);
  }

  80%{
    opacity: 0.7;
    transform: translateY(0px) scale(0.7);
  }

  100%{
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes backInLeft{
  0%{
    opacity: 0.7;
    transform: translateX(-2000px) scale(0.7);
  }

  80%{
    opacity: 0.7;
    transform: translateX(0px) scale(0.7);
  }

  100%{
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes backInRight{
  0%{
    opacity: 0.7;
    transform: translateX(2000px) scale(0.7);
  }

  80%{
    opacity: 0.7;
    transform: translateY(0px) scale(0.7);
  }

  100%{
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes backOutDown{
  0%{
    opacity: 1;
    transform: scale(1);
  }

  80%{
    opacity: 0.7;
    transform: translateY(0px) scale(0.7);
  }

  100%{
    opacity: 0.7;
    transform: translateY(700px) scale(0.7);
  }
}

@keyframes backOutUp{
  0%{
    opacity: 1;
    transform: scale(1);
  }

  80%{
    opacity: 0.7;
    transform: translateY(0px) scale(0.7);
  }

  100%{
    opacity: 0.7;
    transform: translateY(-700px) scale(0.7);
  }
}

@keyframes backOutLeft{
  0%{
    opacity: 1;
    transform: scale(1);
  }

  80%{
    opacity: 0.7;
    transform: translateX(-2000px) scale(0.7);
  }

  100%{
    opacity: 0.7;
    transform: translateY(-700px) scale(0.7);
  }
}

@keyframes backOutRight{
  0%{
    opacity: 1;
    transform: scale(1);
  }

  80%{
    opacity: 0.7;
    transform: translateY(0px) scale(0.7);
  }

  100%{
    opacity: 0.7;
    transform: translateX(2000px) scale(0.7);
  }
}

.text-gradent-light{
  background: var(--gradient-2, linear-gradient(265deg, #FFB2FC 0%, #F8CA6D 98.56%));
  display: inline-flex;
  width: -moz-fit-content;
  width: fit-content;
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

.lock-container .text-gradent-light{
  color: white;
}

.text-gradent-light-shadow{
  background: var(--gradient-2, linear-gradient(265deg, #FFB2FC 0%, #F8CA6D 98.56%));
  display: inline-flex;
  width: -moz-fit-content;
  width: fit-content;
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

.lock-container .text-gradent-light-shadow{
  color: white;
}

.text-gradent-light-shadow{
  text-shadow: 1px 3px 4.5px rgb(255 178 252 / 0.4);
}

.text-gradent-light-shadow:is(.dark *){
  text-shadow: 1px 3px 4.5px rgb(255 178 252 / 0.5);
}

.text-gradent-light-shadow-dark{
  background: var(--gradient-2, linear-gradient(265deg, #FFB2FC 0%, #F8CA6D 98.56%));
  display: inline-flex;
  width: -moz-fit-content;
  width: fit-content;
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

.lock-container .text-gradent-light-shadow-dark{
  color: white;
}

.text-gradent-light-shadow-dark{
  text-shadow: 1px 3px 1px rgb(0 0 0 / 0.2);
}

.text-gradent-light-shadow-dark:is(.dark *){
  text-shadow: 1px 3px 4.5px rgb(0 0 0 / 0.2);
}

.home-page-card-bottom-fade{
  height: 30% !important;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, #44444496 100%);
}

/*=====================
 Variables CSS
==========================*/

:root {
  --static-black: 0 0% 0%;
  --static-dark: 225 10% 8%;
  --static-white: 0 0% 100%;
  --static-lightgray: 225 6% 87%;
  --static-transparent-white: rgba(255, 255, 255, 0.3);
  --dark: #121316;
  --white: 0 0% 100%;
  --black: 0 0% 0%;
  --bodytext: #555555;
  --gre-primary: #FF36F7;
  --gre-secondary: #FFBA2F;
  --warning-light:#FFC859;
  --primary: #FA3D72;
  --secondary: #880C83;
  --light-bg: #F2F3F5;
  --blue: #3D57DA;
  --lightbluecolor:#797de9;
  --sky-blue: #009FFF;
  --light-blue: #C6DAF7;
  --lightgray: #DBDCDF;
  --background-dark:#000206 ;
  --transparent-white: rgba(255, 255, 255, 0.3);
  --transparent-light:#ffffff1a;
  --gray-dark:#888888;
  --graycolor: #AAAAAA;
  --grayborder:#cccccc;
  --lightcolor:#DADADA;
  --lightgraycolor:#e7e7e8;
  --overlay-bg:#DCDCDC;
  --gray: #AAAAAA;
  --graylightcolor:rgba(118, 118, 128, 0.12);
  --lightbordergray:rgba(128,128,128,0.55);
  --success: green;
  --warning : var(--gre-secondary);
  --dark-bg: #1C1C1C;
  --darkgray: #666666;
  --body: #121316;
  --bgbody: #F2F3F5;
  --chat-border: #eeeeee;
  --title: #161616;
  --brown:#866259;
  --modal-text:#dce4ec;
  --modal-label:#738398;
  --light-border:#C8CBD0;
  --border-light:#F0F1F4;
  --dark-shadow: rgba(0, 0, 0, 0.6);
  --purple-light:rgba(225, 24, 217, 1);
  --orange-lignt:rgba(225, 156, 17, 1);
}

:root.dark {
  --white: 0 0% 0%;
  --black: 0 0% 100%;
  --body: #F0F1F4;
  --bgbody : #121316;
  --dark: #eeeeee;
  --transparent-white: rgba(0, 0, 0, 0.3);
  /*--dark-shadow: rgba(255, 255, 255, 0.6);*/
  --overlay-bg: #000000;
  --lightgray: #2a2a2a;
  --lightgraycolor: #000206;
  --bodytext: #AAAAAA;
  --chat-border: #303030;
  --title: #a0a0a0;
  --light-bg: #1d1d1d;
}

:root.dark .price-details img{
  filter: brightness(0) invert(1);
}

:root.dark textarea,:root.dark select,:root.dark input[type="text"]{
  background-color: hsl(var(--white));
}

:root.dark .fg-emoji-list li a{
  background-color: hsl(var(--black));
}

:root.dark .fg-emoji-picker-category-title {
  border-bottom: 1px solid #3a3a3a;
}

:root.dark .select2-container--default .select2-selection--multiple,:root.dark .select2-dropdown,:root.dark .chat-inputs input{
  background-color: #000;
}

:root.dark .select2-container--default .select2-results__option[aria-selected=true] {
  background-color: #2a2a2a;
}

:root.dark .select2-container--default .select2-selection--multiple .select2-selection__choice {
  background-color: #2a2a2a;
}

:root.dark .message-receiver .message-content .content .msg{
  color: #fff;
}

:root.dark .block.shadow-white:before {
  background: linear-gradient(180deg, rgb(255 255 255 / 0%) 0%, #121316 100%);
}

:root.dark .lower-item-opacity > div:first-child {
  border: 1px solid #ffffff33;
}

/* Base css */

/* ! tailwindcss v3.4.3 | MIT License | https://tailwindcss.com */

/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

*,
::before,
::after {
  box-sizing: border-box;
  /* 1 */
  border-width: 0;
  /* 2 */
  border-style: solid;
  /* 2 */
  border-color: currentColor;
  /* 2 */
}

::before,
::after {
  --tw-content: '';
}

/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/

html,
:host {
  line-height: 1.5;
  /* 1 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
  -moz-tab-size: 4;
  /* 3 */
  -o-tab-size: 4;
     tab-size: 4;
  /* 3 */
  font-family: 'Satoshi', sans-serif;
  /* 4 */
  font-feature-settings: normal;
  /* 5 */
  font-variation-settings: normal;
  /* 6 */
  -webkit-tap-highlight-color: transparent;
  /* 7 */
}

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/

body {
  margin: 0;
  /* 1 */
  line-height: inherit;
  /* 2 */
}

/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/

hr {
  height: 0;
  /* 1 */
  color: inherit;
  /* 2 */
  border-top-width: 1px;
  /* 3 */
}

/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

/*
Remove the default font size and weight for headings.
*/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/*
Reset links to optimize for opt-in styling instead of opt-out.
*/

a {
  color: inherit;
  text-decoration: inherit;
}

/*
Add the correct font weight in Edge and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  /* 1 */
  font-feature-settings: normal;
  /* 2 */
  font-variation-settings: normal;
  /* 3 */
  font-size: 1em;
  /* 4 */
}

/*
Add the correct font size in all browsers.
*/

small {
  font-size: 80%;
}

/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/

table {
  text-indent: 0;
  /* 1 */
  border-color: inherit;
  /* 2 */
  border-collapse: collapse;
  /* 3 */
}

/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  /* 1 */
  font-feature-settings: inherit;
  /* 1 */
  font-variation-settings: inherit;
  /* 1 */
  font-size: 100%;
  /* 1 */
  font-weight: inherit;
  /* 1 */
  line-height: inherit;
  /* 1 */
  letter-spacing: inherit;
  /* 1 */
  color: inherit;
  /* 1 */
  margin: 0;
  /* 2 */
  padding: 0;
  /* 3 */
}

/*
Remove the inheritance of text transform in Edge and Firefox.
*/

button,
select {
  text-transform: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button;
  /* 1 */
  background-color: transparent;
  /* 2 */
  background-image: none;
  /* 2 */
}

/*
Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
  outline: auto;
}

/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

:-moz-ui-invalid {
  box-shadow: none;
}

/*
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
  vertical-align: baseline;
}

/*
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
  -webkit-appearance: textfield;
  /* 1 */
  outline-offset: -2px;
  /* 2 */
}

/*
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/

::-webkit-file-upload-button {
  -webkit-appearance: button;
  /* 1 */
  font: inherit;
  /* 2 */
}

/*
Add the correct display in Chrome and Safari.
*/

summary {
  display: list-item;
}

/*
Removes the default spacing and border for appropriate elements.
*/

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
Reset default styling for dialogs.
*/

dialog {
  padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/

input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}

input::placeholder,
textarea::placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}

/*
Set the default cursor for buttons.
*/

button,
[role="button"] {
  cursor: pointer;
}

/*
Make sure disabled buttons don't get the pointer cursor.
*/

:disabled {
  cursor: default;
}

/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block;
  /* 1 */
  vertical-align: middle;
  /* 2 */
}

/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

img,
video {
  max-width: 100%;
  height: auto;
}

/* Make elements with the HTML hidden attribute stay hidden by default */

[hidden] {
  display: none;
}

* {
  scroll-behavior: smooth;
}

*:after,
    *:before{
  margin: 0px;
  padding: 0px;
}

input:focus, select:focus, textarea:focus {
  outline: none;
  box-shadow: none;
}

::-moz-placeholder {
  color: inherit;
  opacity: 1;
}

::placeholder {
  color: inherit;
  opacity: 1;
}

*::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

*::-webkit-scrollbar-track {
  border-radius: 6px;
  background-color: transparent;
}

*::-webkit-scrollbar-thumb {
  background: var(--dark-bg);
  border-radius: 6px;
}

/* Chrome, Safari, Edge, Opera */

input::-webkit-outer-spin-button,
  input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */

input[type='number'] {
  -moz-appearance: textfield;
}

.no-scrollbar::-webkit-scrollbar {
  display: none;
}

.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

body,
  html {
  background-color: var(--bgbody);
  color: var(--body);
}

body {
  display: flex;
  flex-direction: column;
  /* height: 100dvh */
}

h1,
  .h1{
  font-size: calc(42px + (58 - 42) * ((100vw - 320px) / (1920 - 320)));
  line-height: 1.35;
}

h2,
  .h2{
  font-size: calc(40px + (56 - 40) * ((100vw - 320px) / (1920 - 320)));
  line-height: 1.35;
}

h3,
  .h3{
  font-size: calc(24px + (40 - 24) * ((100vw - 320px) / (1920 - 320)));
  line-height: 1.35;
}

h4,
  .h4{
  font-size: calc(28px + (36 - 28) * ((100vw - 320px) / (1920 - 320)));
  line-height: 1.35;
}

h5,
  .h5{
  font-size: calc(32px + (32 - 32) * ((100vw - 320px) / (1920 - 320)));
  line-height: 1.35;
}

h6,
  .h6{
  font-size: calc(18px + (20 - 18) * ((100vw - 320px) / (1920 - 320)));
  line-height: 1.5;
}

p{
  font-size: calc(16px + (16 - 16) * ((100vw - 320px) / (1920 - 320)));
  line-height: 1.35;
}

a{
  font-size: calc(12px + (12 - 12) * ((100vw - 320px) / (1920 - 320)));
  line-height: 1.35;
  letter-spacing: 1.8px;
}

span{
  font-size: calc(16px + (18 - 16) * ((100vw - 320px) / (1920 - 320)));
  line-height: 1.5;
}

li{
  font-size: calc(18px + (18 - 18) * ((100vw - 320px) / (1920 - 320)));
  line-height: 1.5;
  letter-spacing: 0.5px;
}

input:focus{
  outline: 2px solid transparent;
  outline-offset: 2px;
}

*, ::before, ::after{
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

::backdrop{
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

/*=====================
    Basic Reset CSS
  ==========================*/

.rounded-5{
  border-radius: 5px;
}

#m-library-scroll-container::-webkit-scrollbar {
  display: none;
}

#s-library-scroll-container::-webkit-scrollbar {
  display: none;
}

/*=====================
    Header CSS
 ==========================*/

/*=====================
  Card CSS
  ==========================*/

/*=====================
    Typography CSS
  ==========================*/

.lower-item-opacity > div:first-child  {
  opacity: 0.5;
  background-color: rgba(0, 0, 0, 0.08);
}

.btn-grediant{
  background-image: linear-gradient(to right, var(--gre-secondary), var(--gre-primary),var(--gre-secondary), var(--gre-primary));
  background-size: 300% 100%;
  transition: all .4s ease-in-out;
}

.btn-grediant:hover{
  background-position: 50% 0;
  transition: all .4s ease-in-out;
}

.btn-grediant-invert{
  background-image: linear-gradient(to right, var(--gre-primary), var(--gre-secondary),var(--gre-primary), var(--gre-secondary));
  background-size: 300% 100%;
  transition: all .4s ease-in-out;
}

.btn-grediant-invert:hover{
  background-position: 50% 0;
  transition: all .4s ease-in-out;
}

.btn-grediant-outline{
  position: relative;
}

.btn-grediant-outline::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50px;
  padding: 2px;
  background:linear-gradient(to right, var(--gre-primary), var(--gre-secondary),var(--gre-primary), var(--gre-secondary));
  -webkit-mask:
             linear-gradient(#fff 0 0) content-box,
             linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

.grediant-border:before{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 25px;
  padding: 2px;
  background: linear-gradient(to right, var(--gre-primary), var(--gre-secondary), var(--gre-primary), var(--gre-secondary));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

.gradient-primary{
  background-image: linear-gradient(to right, var(--gre-secondary), var(--gre-primary));
}

.gradient-secondary{
  background-image: linear-gradient(to right, var(--gre-primary), var(--gre-secondary));
}

.text-gradient{
  background: linear-gradient(to right, var(--gre-secondary), var(--gre-primary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.block:before{
  box-shadow: inset 0px -200px 100px -13px var(--dark-shadow);
  transition: all 0.3s ease;
  border-radius: 16px;
  top: 0;
  width: 100%;
  bottom: 0;
  left: 0;
  z-index: 1;
}

.block.shadow-white:before{
  border-radius: 0;
  box-shadow: none;
  background: linear-gradient(180deg, rgb(255 255 255 / 0%) 0%, #F2F3F5 100%);
}

.block.shadow-light:before{
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(68, 68, 68, 0.00) 0%, #444 100%);
}

.border-gradient::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50px;
  padding: 2px;
  background:linear-gradient(to right, var(--gre-secondary), var(--gre-primary));
  -webkit-mask:
     linear-gradient(#fff 0 0) content-box,
     linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

.border-gradient-light::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 15px;
  padding: 4px;
  background: linear-gradient(to right, var(--gre-secondary), var(--gre-primary));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask:
     linear-gradient(#fff 0 0) content-box,
     linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

.border-gradient-ligh:hover:before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 15px;
  padding: 4px;
  background: linear-gradient(to right, var(--gre-secondary), var(--gre-primary));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask:
     linear-gradient(#fff 0 0) content-box,
     linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

.border-gradient-model::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 12px;
  padding: 5px;
  z-index: 200;
  background: linear-gradient(to right, var(--gre-secondary), var(--gre-primary));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask:
     linear-gradient(#fff 0 0) content-box,
     linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

.bg-whitelight{
  background-color:  rgba(242, 243, 245, 0.90);
}

.lock-container{
  --tw-backdrop-blur: blur(12px);
  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
          backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
  border-radius: 16px;
}

.lock-container .text-transparent{
  color: white;
}

.slider-overlay:before{
  content: '';
  width: 100%;
  height: 100%;
  z-index: 1;
  position: absolute;
  top: 0;
  background-color: var(--overlay-bg);
  opacity: 0.4;
  border-radius: 1rem;
}

.swiper-slide-active:before{
  display: none;
}

.forYouSlider:after,
.forYouSlider:before{
  content: '';
  width: 200px;
  height: 100%;
  z-index: 9;
  position: absolute;
  top: 0;
}

.forYouSlider:after{
  left: 0;
  box-shadow: inset 200px -11px 49px -57px rgba(0,0,0,1);
}

.forYouSlider:before{
  right: 0;
  box-shadow: inset -200px -52px 34px -81px rgb(0 0 0);
}

.image-overlay:before{
  content: '';
  width: 100%;
  height: 100%;
  z-index: 1;
  position: absolute;
  top: 0;
  background-color: var(--gray-dark);
  opacity: 0.5;
  border-radius: 1rem;
}

.lock-div{
  background-color: rgba(242, 243, 245, 0.55);
  --tw-backdrop-blur: blur(12px);
  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
          backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
  border-radius: 16px;
  visibility: hidden;
}

.subscribe-lock-container .lock-div{
  visibility: visible;
}

.page-body{
  min-height: 100vh;
}

.color-scheme-dark{
  color-scheme: dark;
}

.text-ellip{
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.chevron-right,
.chevron-left {
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  position: relative;
}

.chevron-right {
  border-left: 10px solid #000;
  /* Change color here */
}

.chevron-left {
  border-right: 10px solid #000;
  /* Change color here */
}

.arrow {
  display: flex;
  justify-content: center;
  position: relative;
}

.arrow::before {
  content: "";
  position: absolute;
  top: -10px;
  left: -6px;
  transform: rotate(-45deg);
  border: solid #000000;
  border-width: 2px 0px 0px 2px;
  padding: 10px;
}

.arrow.right-side::before{
  transform: rotate(135deg);
  right: -6px;
  left: auto;
}

.swiper.forYouSlider .swiper-button-next, .swiper.forYouSlider .swiper-button-prev {
  background-color: white !important;
}

.border-gradient-hover {
  position: relative;
  border: 0;
  /* No initial border */
}

.border-gradient-hover:hover {
  box-shadow: 0 0 0 3px var(--dark);
}

.border-white-light {
  box-shadow: 0 0 0 3px var(--dark);
}

/*  */

.honeyBotSlider .swiper-wrapper .swiper-slide-prev,
  .honeyBotSlider .swiper-wrapper .swiper-slide-next {
  filter: blur(3px) brightness(0.9);
  opacity: 0.8;
  transition: all 0.3s ease;
}

/* Active slide styling */

.honeyBotSlider .swiper-wrapper .swiper-slide-active {
  filter: none;
  opacity: 1;
  z-index: 1;
}

/* Optional: Darken blurred slides more */

.honeyBotSlider .swiper-wrapper .swiper-slide-prev::after,
  .honeyBotSlider .swiper-wrapper .swiper-slide-next::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.4);
  border-radius: 1rem;
}

.honeyBotSlider:after{
  left: -4px !important;
  top: -2px !important;
  filter: blur(3px) brightness(0.9);
  opacity: 0.8;
  /* box-shadow: none !important; */
  box-shadow: inset 0 0 60px 30px rgba(0, 0, 0, 0.45);
}

.honeyBotSlider:before{
  right: -4px !important;
  top: -2px !important;
  filter: blur(3px) brightness(0.9);
  opacity: 0.8;
  /* box-shadow: none !important; */
  box-shadow: inset 0 0 60px 30px rgba(0, 0, 0, 0.45);
}

.porn-landing-page .go-top {
  display: none !important;
}

/*!* Componant *!*/

.\!container{
  width: 100% !important;
}

.container{
  width: 100%;
}

@media (min-width: 991px){
  .\!container{
    max-width: 991px !important;
  }

  .container{
    max-width: 991px;
  }
}

.label{
  display: flex;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  align-items: center;
  justify-content: space-between;
  padding-left: 0.25rem;
  padding-right: 0.25rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

@media (max-width: 767px) {
  .swap-out>.label {
    justify-content: center;
  }
}

@media (max-width: 640px) {
  .common.label.right-side-bottom-bar-btns {
    gap: 5px;
    padding-left: 0;
  }
}

.\!select{
  display: inline-flex;
  height: 3rem;
  min-height: 3rem;
  flex-shrink: 0;
  cursor: pointer;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border-radius: 0.5rem;
  border-width: 1px;
  border-color: var(--primary);
  background-repeat: no-repeat;
  padding-left: 1rem;
  padding-right: 2.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 2;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-duration: 200ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

[dir=rtl] .\!select{
  padding-left: unset;
  padding-right: 1rem;
  padding-left: 2.5rem;
  padding-right: unset;
}

.select{
  display: inline-flex;
  height: 3rem;
  min-height: 3rem;
  flex-shrink: 0;
  cursor: pointer;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border-radius: 0.5rem;
  border-width: 1px;
  border-color: var(--primary);
  background-repeat: no-repeat;
  padding-left: 1rem;
  padding-right: 2.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 2;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-duration: 200ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

[dir=rtl] .select{
  padding-left: unset;
  padding-right: 1rem;
  padding-left: 2.5rem;
  padding-right: unset;
}

.landing-header .navigation.show{
  border-radius: 1rem;
}

a.block.text-center.w-full.generate-link.overflow-hidden.group.landing-header .navigation.show.hover\:-bg-white.drop-shadow-xl {
  animation: fadeIn .5s linear;
}

@media (max-width: 875px){
  .landing-header .navigation.show{
    visibility: visible;
    top: -23px;
    background-color: hsl(var(--white));
    opacity: 1;
  }
}

.landing-header .navigation.\!show{
  border-radius: 1rem;
}

a.block.text-center.w-full.generate-link.overflow-hidden.group.landing-header .navigation.\!show.hover\:-bg-white.drop-shadow-xl {
  animation: fadeIn .5s linear;
}

@media (max-width: 875px){
  .landing-header .navigation.\!show{
    visibility: visible;
    top: -23px;
    background-color: hsl(var(--white));
    opacity: 1;
  }
}

.\!container{
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 1650px;
  padding-left: 30px;
  padding-right: 30px;
}

@media screen and (max-width:675px) {
  .common-que>div:hover .\!container,
    .common-que>div.active .\!container {
    display: block;
  }
}

a.block.text-center.\!container.generate-link.overflow-hidden.group.rounded-2xl.hover\:-bg-white.drop-shadow-xl {
  animation: fadeIn .5s linear;
}

@media (max-width: 1599px){
  .\!container{
    max-width: 1399px;
  }
}

@media (max-width: 1499px){
  .\!container{
    max-width: 1299px;
  }
}

@media (max-width: 1399px){
  .\!container{
    max-width: 1199px;
  }
}

@media (max-width: 991px){
  .\!container{
    padding-left: 20px;
    padding-right: 20px;
  }
}

.container{
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 1650px;
  padding-left: 30px;
  padding-right: 30px;
}

@media screen and (max-width:675px) {
  .common-que>div:hover .container,
    .common-que>div.active .container {
    display: block;
  }
}

a.block.text-center.container.generate-link.overflow-hidden.group.rounded-2xl.hover\:-bg-white.drop-shadow-xl {
  animation: fadeIn .5s linear;
}

@media (max-width: 1599px){
  .container{
    max-width: 1399px;
  }
}

@media (max-width: 1499px){
  .container{
    max-width: 1299px;
  }
}

@media (max-width: 1399px){
  .container{
    max-width: 1199px;
  }
}

@media (max-width: 991px){
  .container{
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* badges */

.badges{
  border-radius: 9999px;
  border-width: 0px;
  padding-top: 6px;
  padding-bottom: 6px;
  padding-left: 8px;
  padding-right: 8px;
}

.\!badge{
  height: auto;
  width: auto;
  gap: 0.25rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  font-size: calc(16px + (16 - 16) * ((100vw - 320px) / (1920 - 320)));
  line-height: 1.1;
}

.badge{
  height: auto;
  width: auto;
  gap: 0.25rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  font-size: calc(16px + (16 - 16) * ((100vw - 320px) / (1920 - 320)));
  line-height: 1.1;
}

.badge-xs{
  padding-left: 0.375rem;
  padding-right: 0.375rem;
  padding-top: 0.25rem;
  padding-bottom: 3px;
  font-size: 10px;
}

.badge-md{
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 7px;
  padding-bottom: 7px;
  font-size: calc(16px + (16 - 16) * ((100vw - 320px) / (1920 - 320)));
  line-height: 1.1;
}

/* ===== SECTION 1: MAIN CONTAINER ===== */

.control-buttons-wrapper {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
  flex-wrap: wrap;
  justify-content: flex-start;
}

.tags-navigation-wrapper {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.5rem;
}

/* ===== SECTION 2: TAG CONTAINER ===== */

.tags-container {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.375rem;
  align-items: center;
  justify-content: flex-start;
  max-width: 100%;
  overflow: hidden;
  transition: all 0.3s ease;
  padding-left: 0;
  padding-right: 0;
}

.tags-container.show-all {
  flex-wrap: wrap;
}

.tags-container.single-row {
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: thin;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

/* ===== SECTION 3: CATEGORY DIVIDERS ===== */

.category-divider.hidden {
  display: none;
}

/* ===== SECTION 4: SHOW MORE BUTTON ===== */

.show-more-btn {
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  font-weight: 500;
  font-size: 0.75rem;
  cursor: pointer;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.125rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  flex-shrink: 0;
  min-height: 36px;
  max-height: 36px;
  background: hsl(var(--white));
  color: hsl(var(--black));
  border: 1px solid var(--lightbordergray);
}

.show-more-btn:hover {
  background: linear-gradient(135deg, var(--gre-primary) 0%, var(--gre-secondary) 100%);
  color: white;
  border: 1px solid transparent;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.show-more-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
  transition: left 0.5s;
}

.show-more-btn:hover::before {
  left: 100%;
}

.show-more-btn svg {
  transition: transform 0.3s ease;
}

.show-more-btn.expanded svg {
  transform: rotate(180deg);
}

/* ===== SECTION 5: TAG FILTER BUTTON BASE STYLING ===== */

.tag-filter {
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  font-weight: 500;
  font-size: 0.75rem;
  cursor: pointer;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  flex-shrink: 0;
  min-height: 36px;
  max-height: 36px;
  background: hsl(var(--white));
  color: hsl(var(--black));
  border: 1px solid var(--lightbordergray);
}

.tag-filter.hidden {
  display: none;
}

/* Shimmer effect on hover */

.tag-filter::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
  transition: left 0.5s;
}

.tag-filter:hover::before {
  left: 100%;
}

/* ===== SECTION 6: ALL BOTS BUTTON (SAME SIZE AS TAGS) ===== */

.tag-filter.all-bots {
  background: hsl(var(--white));
  color: hsl(var(--black));
  border: 1px solid var(--lightbordergray);
  padding: 0.5rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 500;
  border-radius: 0.5rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  min-height: 36px;
  max-height: 36px;
}

.tag-filter.all-bots.active {
  background: hsl(var(--white));
  color: hsl(var(--black));
  border: 1px solid var(--lightbordergray);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.tag-filter.all-bots:not(.active) {
  opacity: 0.6;
}

.tag-filter.all-bots:not(.active):hover {
  background: linear-gradient(135deg, var(--gre-primary) 0%, var(--gre-secondary) 100%);
  color: white;
  border: 1px solid transparent;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  opacity: 1;
}

/* Control internal spacing for All Bots button content */

.tag-filter.all-bots span {
  gap: 0.25rem !important;
}

.tag-filter.all-bots svg {
  width: 0.75rem !important;
  height: 0.75rem !important;
}

/* ===== SECTION 7: CATEGORY FILTER BUTTONS ===== */

.category-buttons {
  display: flex;
  gap: 0.375rem;
  align-items: center;
  flex-wrap: wrap;
}

.category-filter {
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  font-weight: 500;
  font-size: 0.75rem;
  cursor: pointer;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  flex-shrink: 0;
  min-height: 36px;
  max-height: 36px;
  background: var(--lightgray);
  color: hsl(var(--black));
  border: 1px solid var(--lightbordergray);
}

.category-filter:hover {
  background: linear-gradient(135deg, var(--gre-primary) 0%, var(--gre-secondary) 100%);
  color: white;
  border: 1px solid transparent;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.category-filter.active {
  background: linear-gradient(135deg, var(--gre-primary) 0%, var(--gre-secondary) 100%);
  color: white;
  border: 1px solid transparent;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.category-filter::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
  transition: left 0.5s;
}

.category-filter:hover::before {
  left: 100%;
}

/* ===== SECTION 8: TAGS WITHOUT COLOR CODING ===== */

@media (hover: hover) {
  .tag-filter:not(.all-bots):hover {
    background: linear-gradient(135deg, var(--gre-primary) 0%, var(--gre-secondary) 100%);
    color: white;
    border: 1px solid transparent;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  }
}

.tag-filter:not(.all-bots).active {
  background: linear-gradient(135deg, var(--gre-primary) 0%, var(--gre-secondary) 100%);
  color: white;
  border: 1px solid transparent;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* Enhanced active state for multiple selection */

.tag-filter.active {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* ===== SECTION 9: MOBILE RESPONSIVE ADJUSTMENTS ===== */

@media (max-width: 640px) {
  .control-buttons-wrapper {
    margin-bottom: 0.5rem;
    gap: 0.25rem;
    justify-content: flex-start;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 0.25rem;
  }

  .category-buttons {
    gap: 0.25rem;
    flex-wrap: nowrap;
    display: flex;
  }

  .tag-filter,
  .tag-filter.all-bots,
  .category-filter,
  .show-more-btn {
    font-size: 0.8rem !important;
    padding: 0.375rem 0.5rem !important;
    min-height: 40px !important;
    line-height: 1.2 !important;
    border-radius: 0.375rem !important;
    flex-shrink: 0;
    white-space: nowrap;
  }

  .show-more-btn {
    flex-shrink: 0;
  }

  .tags-container {
    gap: 0.25rem;
    padding-left: 0;
    padding-right: 0;
    flex-wrap: nowrap;
    overflow-x: hidden;
  }

  .tags-container.show-all {
    flex-wrap: wrap;
    overflow-x: visible;
  }

  .tags-navigation-wrapper {
    justify-content: flex-start;
    align-items: center;
    gap: 0.25rem;
    padding: 0;
  }

  .category-divider {
    display: none;
  }

  .tag-filter svg {
    width: 12px;
    height: 12px;
  }

  .show-more-btn svg {
    width: 10px;
    height: 10px;
  }

  /* Fix touch device hover states */

  .tag-filter:not(.active):not(:focus) {
    background: hsl(var(--white)) !important;
    color: hsl(var(--black)) !important;
    border: 1px solid var(--lightbordergray) !important;
    transform: none !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
  }

  .category-filter:not(.active):not(:focus) {
    background: var(--lightgray) !important;
    color: hsl(var(--black)) !important;
    border: 1px solid var(--lightbordergray) !important;
    transform: none !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
  }

  .show-more-btn:not(:focus) {
    background: hsl(var(--white)) !important;
    color: hsl(var(--black)) !important;
    border: 1px solid var(--lightbordergray) !important;
    transform: none !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
  }
}

/* ===== SECTION 9: ANIMATION STATES ===== */

.tag-filter:active {
  transform: scale(0.98);
}

.tag-filter.loading {
  opacity: 0.7;
  cursor: not-allowed;
}

.tag-filter.loading::before {
  animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
  0% {
    left: -100%;
  }

  100% {
    left: 100%;
  }
}

/* ===== SECTION 10: ACCESSIBILITY ===== */

.tag-filter:focus {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
}

.tag-filter:focus:not(:focus-visible) {
  outline: none;
}

.show-more-btn:focus {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
}

.show-more-btn:focus:not(:focus-visible) {
  outline: none;
}

/* ===== SECTION 11: DARK MODE SUPPORT ===== */

.dark .tag-filter:not(.active):not(:hover) {
  background: hsl(var(--dark)) !important;
  color: hsl(var(--black)) !important;
  border-color: var(--lightbordergray) !important;
}

.dark .show-more-btn:not(:hover) {
  background: hsl(var(--dark)) !important;
  color: hsl(var(--black)) !important;
  border-color: var(--lightbordergray) !important;
}

.dark .category-filter:not(.active):not(:hover) {
  background: var(--lightgray) !important;
  color: hsl(var(--black)) !important;
  border-color: var(--lightbordergray) !important;
}

.dark .tag-filter.all-bots:not(:hover) {
  background: hsl(var(--dark)) !important;
  color: hsl(var(--black)) !important;
  border-color: var(--lightbordergray) !important;
}

.dark .tag-filter.all-bots.active {
  background: hsl(var(--dark)) !important;
  color: hsl(var(--black)) !important;
  border-color: var(--lightbordergray) !important;
  opacity: 1 !important;
}

.dark .category-divider {
  background: linear-gradient(to bottom, transparent, var(--lightbordergray), transparent);
}

/* ===== SECTION 9b: HOME TAGS HORIZONTAL SCROLL ARROWS ===== */

#home-tags-wrapper {
  position: relative;
}

/* Hide native scrollbar on the chip rail — arrows are the affordance instead */

#home-tags-container {
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-behavior: smooth;
}

#home-tags-container::-webkit-scrollbar {
  display: none;
}

.home-tags-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 9999px;
  background-color: var(--light-bg);
  color: hsl(var(--black));
  border: 1px solid var(--lightbordergray);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  cursor: pointer;
  font-size: 0.875rem;
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.home-tags-arrow:hover {
  transform: translateY(-50%) scale(1.05);
}

.home-tags-arrow.hidden {
  display: none;
}

.home-tags-arrow--left {
  left: -6px;
}

.home-tags-arrow--right {
  right: -6px;
}

/* Soft fade on the rail edges when arrows are showing, to hint at more content */

#home-tags-wrapper::before,
  #home-tags-wrapper::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 32px;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.15s ease;
}

#home-tags-wrapper::before {
  left: 0;
  background: linear-gradient(to right, var(--bgbody), transparent);
}

#home-tags-wrapper::after {
  right: 0;
  background: linear-gradient(to left, var(--bgbody), transparent);
}

#home-tags-wrapper:has(.home-tags-arrow--left:not(.hidden))::before,
  #home-tags-wrapper:has(.home-tags-arrow--right:not(.hidden))::after {
  opacity: 1;
}

/* On small screens make the arrows a touch smaller */

@media (max-width: 640px) {
  .home-tags-arrow {
    width: 24px;
    height: 24px;
  }
}

/* ===== SECTION 10: HOME FILTER DROPDOWNS (Sort / Kinks) ===== */

.home-dropdown {
  position: relative;
}

.home-dropdown > summary {
  list-style: none;
  cursor: pointer;
}

.home-dropdown > summary::-webkit-details-marker {
  display: none;
}

.home-dropdown-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  font-size: 0.8rem;
  font-weight: 500;
  /* var(--light-bg) = #F2F3F5 light / #1d1d1d dark — matches surfaces elsewhere */
  background-color: var(--light-bg);
  color: hsl(var(--black));
  border: 1px solid var(--lightbordergray);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  min-height: 36px;
  transition: all 0.2s ease;
}

.home-dropdown-trigger:hover {
  border-color: var(--gre-primary);
}

.home-dropdown[open] > summary .home-dropdown-trigger {
  border-color: var(--gre-primary);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.home-dropdown-label {
  color: hsl(var(--black) / 0.6);
  font-weight: 400;
}

.home-dropdown-value {
  color: hsl(var(--black));
  font-weight: 600;
}

.home-dropdown[open] .home-dropdown-trigger i {
  transform: rotate(180deg);
}

.home-dropdown-trigger i {
  font-size: 0.75rem;
  transition: transform 0.2s ease;
}

.home-dropdown-panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 30;
  min-width: 180px;
  padding: 0.375rem;
  background-color: var(--light-bg);
  border: 1px solid var(--lightbordergray);
  border-radius: 0.5rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.home-dropdown-panel--grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  min-width: 0;
  width: -moz-max-content;
  width: max-content;
  max-width: min(calc(100vw - 2rem), 360px);
  gap: 0.25rem;
}

.home-dropdown-item {
  text-align: left;
  padding: 0.5rem 0.625rem;
  border-radius: 0.375rem;
  font-size: 0.8rem;
  font-weight: 500;
  color: hsl(var(--black));
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
  white-space: nowrap;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (hover: hover) {
  .home-dropdown-item:hover {
    background: linear-gradient(135deg, var(--gre-primary) 0%, var(--gre-secondary) 100%);
    color: white;
  }
}

.home-dropdown-item:focus-visible {
  outline: 2px solid var(--gre-primary);
  outline-offset: 1px;
}

.home-dropdown-item.active {
  background: linear-gradient(135deg, var(--gre-primary) 0%, var(--gre-secondary) 100%);
  color: white;
}

/* Dark-mode tweaks: --light-bg and hsl(var(--black)) already flip via design tokens.
     We only need a stronger shadow so the panel reads as lifted against the dark page. */

.dark .home-dropdown-panel {
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.55);
}

/* Mobile: trigger shrinks slightly; the wide (Kinks) panel detaches from the
     trigger and centers horizontally within the page so it can't overflow
     either edge regardless of where the trigger sits. */

@media (max-width: 640px) {
  .home-dropdown-trigger {
    font-size: 0.8rem;
    padding: 0.375rem 0.5rem;
    min-height: 40px;
    line-height: 1.2;
    border-radius: 0.375rem;
  }

  .home-dropdown-value,
    .home-dropdown-label {
    font-weight: 500;
    font-size: 0.8rem;
  }

  /* Kinks panel spans the filter row width on mobile so it can't overflow
       the viewport regardless of where the trigger sits. */

  #home-dropdown-row {
    position: relative;
  }

  .home-dropdown[data-kind="kinks"] {
    position: static;
  }

  .home-dropdown[data-kind="kinks"] .home-dropdown-panel {
    left: 0;
    right: 0;
    width: auto;
    max-width: none;
  }

  .home-dropdown-panel--grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: auto;
  }
}

/* ===== SECTION 11: EMPTY-STATE "CREATE YOUR OWN CHARACTER" CARD ===== */

.empty-state-create-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: min(100%, 380px);
  min-height: 260px;
  padding: 2.5rem 1.5rem;
  border-radius: 1rem;
  overflow: hidden;
  text-align: center;
  text-decoration: none;
  /* Solid deep-purple card matching the OurDream-style mockup:
       lighter purple top-left fading to near-black bottom-right. */
  background: radial-gradient(ellipse at 25% 20%, #4A0F4D 0%, #2A0A2C 70%, #1A0518 100%);
  border: 1px solid color-mix(in srgb, var(--gre-primary) 18%, transparent);
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.35);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.empty-state-create-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 40px color-mix(in srgb, var(--gre-primary) 25%, transparent);
}

.empty-state-create-card__lead {
  position: relative;
  z-index: 1;
  color: color-mix(in srgb, hsl(var(--static-white)) 70%, transparent);
  font-size: 0.875rem;
  font-weight: 500;
  margin-bottom: 0.75rem;
}

.empty-state-create-card__title {
  position: relative;
  z-index: 1;
  color: hsl(var(--static-white));
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 1.5rem;
}

.empty-state-create-card__cta {
  position: relative;
  z-index: 1;
  display: inline-block;
  padding: 1.5px;
  border-radius: 9999px;
  /* Brand gradient border: gre-secondary (orange #FFBA2F) → gre-primary (pink #FF36F7) */
  background: linear-gradient(90deg, var(--gre-secondary) 0%, var(--gre-primary) 100%);
}

.empty-state-create-card__cta-inner {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.625rem 1.25rem;
  border-radius: 9999px;
  /* Slight darken over the card's purple gradient so the rim gradient stands out
       while the card's lighter→darker tone still reads through the button. */
  background: rgba(20, 4, 22, 0.55);
  color: hsl(var(--static-white));
  font-size: 0.875rem;
  font-weight: 500;
}

.empty-state-create-card__sparkle {
  position: absolute;
  background: var(--gre-primary);
  border-radius: 50%;
  opacity: 0.85;
  filter: blur(0.3px);
}

.empty-state-create-card__sparkle--1 {
  top: 14%;
  left: 12%;
  width: 6px;
  height: 6px;
}

.empty-state-create-card__sparkle--2 {
  top: 22%;
  right: 18%;
  width: 5px;
  height: 5px;
  opacity: 0.7;
}

.empty-state-create-card__sparkle--3 {
  top: 46%;
  left: 10%;
  width: 3px;
  height: 3px;
  opacity: 0.6;
}

.empty-state-create-card__sparkle--4 {
  bottom: 28%;
  right: 14%;
  width: 4px;
  height: 4px;
  opacity: 0.7;
}

.empty-state-create-card__sparkle--5 {
  bottom: 14%;
  left: 22%;
  width: 5px;
  height: 5px;
  opacity: 0.8;
}

.empty-state-create-card__sparkle--6 {
  top: 34%;
  right: 32%;
  width: 3px;
  height: 3px;
  opacity: 0.55;
}

.left-sidebar-aside{
  z-index: 3;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 1000ms;
}

.dark .choose-item .left-sidebar-aside {
  filter: brightness(0) invert(1);
}

.left-sidebar-aside.left-hide-show-sidebar{
  left: 0px !important;
}

.category-divider.right-sidebar-hide-logo-show {
  display: none;
}

.tag-filter.right-sidebar-hide-logo-show {
  display: none;
}

.home-tags-arrow.right-sidebar-hide-logo-show {
  display: none;
}

.ch2-section--custom-add.right-sidebar-hide-logo-show {
  display: none;
}

.ch2-advanced__panel.right-sidebar-hide-logo-show {
  display: none;
}

.right-sidebar-hide-logo-show{
  display: none;
}

.gi-helper-preset.right-sidebar-hide-logo-show {
  display: none;
}

.vip-price-toggle.right-sidebar-hide-logo-show {
  opacity: 0;
  pointer-events: none;
}

.promo-code-button-content.right-sidebar-hide-logo-show {
  display: none;
}

.promo-code-input-container.right-sidebar-hide-logo-show {
  display: none;
}

.promo-code-apply-link.right-sidebar-hide-logo-show {
  display: none;
}

.gv-toggle-meta.right-sidebar-hide-logo-show {
  display: none;
}

.best-choice .right-sidebar-hide-logo-show.hide::before {
  box-shadow: none;
  background-image: linear-gradient(to bottom, rgba(18, 19, 22, 0) 40%, rgba(18, 19, 22, 0.6) 90%);
}

.right-sidebar-hide-logo-show.hide{
  display: block;
}

:root.dark .right-sidebar-hide-logo-show.hide.shadow-white:before {
  background: linear-gradient(180deg, rgb(255 255 255 / 0%) 0%, #121316 100%);
}

.right-sidebar-hide-logo-show.hide:before{
  box-shadow: inset 0px -200px 100px -13px var(--dark-shadow);
  transition: all 0.3s ease;
  border-radius: 16px;
  top: 0;
  width: 100%;
  bottom: 0;
  left: 0;
  z-index: 1;
}

.right-sidebar-hide-logo-show.hide.shadow-white:before{
  border-radius: 0;
  box-shadow: none;
  background: linear-gradient(180deg, rgb(255 255 255 / 0%) 0%, #F2F3F5 100%);
}

.right-sidebar-hide-logo-show.hide.shadow-light:before{
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(68, 68, 68, 0.00) 0%, #444 100%);
}

.tab-content-wrap .right-sidebar-hide-logo-show.hide:before {
  border-radius: 0.5rem;
}

a.right-sidebar-hide-logo-show.hide.text-center.w-full.generate-link.overflow-hidden.group.rounded-2xl.hover\:-bg-white.drop-shadow-xl {
  animation: fadeIn .5s linear;
}

.best-choice .left-sidebar-hide-logo-show.hide::before {
  box-shadow: none;
  background-image: linear-gradient(to bottom, rgba(18, 19, 22, 0) 40%, rgba(18, 19, 22, 0.6) 90%);
}

.left-sidebar-hide-logo-show.hide{
  display: block;
}

:root.dark .left-sidebar-hide-logo-show.hide.shadow-white:before {
  background: linear-gradient(180deg, rgb(255 255 255 / 0%) 0%, #121316 100%);
}

.left-sidebar-hide-logo-show.hide:before{
  box-shadow: inset 0px -200px 100px -13px var(--dark-shadow);
  transition: all 0.3s ease;
  border-radius: 16px;
  top: 0;
  width: 100%;
  bottom: 0;
  left: 0;
  z-index: 1;
}

.left-sidebar-hide-logo-show.hide.shadow-white:before{
  border-radius: 0;
  box-shadow: none;
  background: linear-gradient(180deg, rgb(255 255 255 / 0%) 0%, #F2F3F5 100%);
}

.left-sidebar-hide-logo-show.hide.shadow-light:before{
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(68, 68, 68, 0.00) 0%, #444 100%);
}

.tab-content-wrap .left-sidebar-hide-logo-show.hide:before {
  border-radius: 0.5rem;
}

a.left-sidebar-hide-logo-show.hide.text-center.w-full.generate-link.overflow-hidden.group.rounded-2xl.hover\:-bg-white.drop-shadow-xl {
  animation: fadeIn .5s linear;
}

@media (max-width: 991px){
  .best-choice .left-sidebar-hide-logo-show .left-sidebar-toggle-btn::before {
    box-shadow: none;
    background-image: linear-gradient(to bottom, rgba(18, 19, 22, 0) 40%, rgba(18, 19, 22, 0.6) 90%);
  }

  .left-sidebar-hide-logo-show .left-sidebar-toggle-btn{
    display: block;
  }
}

.chat-story .avatar{
  border-width: 2px;
  border-style: dashed;
  border-color: var(--primary);
}

.recent-online{
  border-width: 2px;
  border-color: var(--title);
}

.recent-offline{
  border-width: 2px;
  border-color: var(--secondary);
}

.message{
  margin-bottom: 30px;
  display: flex;
  gap: 0.5rem;
}

@media (max-width: 767px) {
  .swap-out>.message {
    justify-content: center;
  }
}

@media (max-width: 640px) {
  .common.message.right-side-bottom-bar-btns {
    gap: 5px;
    padding-left: 0;
  }
}

.message .message-box {
  width: 50%;
}

.message .message-box .message-content{
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}

@media (max-width: 767px) {
  .swap-out>.message .message-box .message-content {
    justify-content: center;
  }
}

@media (max-width: 640px) {
  .common.message .message-box .message-content.right-side-bottom-bar-btns {
    gap: 5px;
    padding-left: 0;
  }
}

@media (max-width: 575px){
  .message .message-box .message-content{
    position: relative;
  }
}

.best-choice .message .message-box .message-content .timer::before {
  box-shadow: none;
  background-image: linear-gradient(to bottom, rgba(18, 19, 22, 0) 40%, rgba(18, 19, 22, 0.6) 90%);
}

.message .message-box .message-content .timer{
  display: block;
  text-align: right;
  font-size: 10px;
  font-weight: 400;
  color: var(--grayborder);
}

:root.dark .message .message-box .message-content .timer.shadow-white:before {
  background: linear-gradient(180deg, rgb(255 255 255 / 0%) 0%, #121316 100%);
}

.message .message-box .message-content .timer:before{
  box-shadow: inset 0px -200px 100px -13px var(--dark-shadow);
  transition: all 0.3s ease;
  border-radius: 16px;
  top: 0;
  width: 100%;
  bottom: 0;
  left: 0;
  z-index: 1;
}

.message .message-box .message-content .timer.shadow-white:before{
  border-radius: 0;
  box-shadow: none;
  background: linear-gradient(180deg, rgb(255 255 255 / 0%) 0%, #F2F3F5 100%);
}

.message .message-box .message-content .timer.shadow-light:before{
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(68, 68, 68, 0.00) 0%, #444 100%);
}

.tab-content-wrap .message .message-box .message-content .timer:before {
  border-radius: 0.5rem;
}

a.message .message-box .message-content .timer.text-center.w-full.generate-link.overflow-hidden.group.rounded-2xl.hover\:-bg-white.drop-shadow-xl {
  animation: fadeIn .5s linear;
}

.message .message-box .message-content .sender-receiver-name{
  margin-bottom: 0.25rem;
  font-size: 14px;
  font-weight: 700;
  line-height: 19px;
}

.message .message-box .message-content .content{
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.message .message-box .message-content .content .msg{
  width: -moz-fit-content;
  width: fit-content;
  font-size: 14px;
  font-weight: 400;
  line-height: 19px;
  color: var(--title);
}

.message .message-box .message-content .content .msg img + span {
  float: none;
  display: block;
  text-align: right;
  padding-top: 8px;
}

.message-sender{
  justify-content: flex-start;
}

.message-sender .message-content{
  justify-content: flex-start;
}

.message-sender .message-content .sender-receiver-name{
  font-size: 12px;
}

.message-sender .message-content .timer {
  /* @apply -translate-y-[10px]; */
}

.message-sender .message-content .content{
  display: flex;
  align-items: center;
  gap: 1rem;
}

@media (max-width: 767px) {
  .swap-out>.message-sender .message-content .content {
    justify-content: center;
  }
}

@media (max-width: 640px) {
  .common.message-sender .message-content .content.right-side-bottom-bar-btns {
    gap: 5px;
    padding-left: 0;
  }
}

.message-sender .message-content .content {
  border-radius: 0px 10px 10px 10px;
  background: linear-gradient(265deg, rgba(225, 24, 217, 0.25) 0%, rgba(225, 156, 17, 0.25) 100%);
}

.message-sender .message-content .content .msg{
  color: var(--bodytext);
}

.message-receiver{
  justify-content: flex-end;
}

.message-receiver .message-content{
  justify-content: flex-end;
}

@media (max-width: 575px){
  .message-receiver .message-content{
    flex-direction: column-reverse;
    align-items: flex-end !important;
  }
}

.message-receiver .message-content .content{
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-end;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  border-top-right-radius: 0px;
  border-bottom-right-radius: 10px;
  background-color: var(--lightgray);
}

.chat-main.active .tabs .message-receiver .message-content .content {
  display: none;
}

@media (max-width: 767px) {
  .swap-out>.message-receiver .message-content .content {
    justify-content: center;
  }
}

@media (max-width: 640px) {
  .common.message-receiver .message-content .content.right-side-bottom-bar-btns {
    gap: 5px;
    padding-left: 0;
  }
}

.message-receiver .message-content .content .msg{
  color: hsl(var(--white));
}

@media (max-width: 575px){
  .message-receiver .message-content .content .content-detail{
    right: 50px !important;
    left: unset !important;
  }
}

.emoji-picker-insert input:focus:not([tabindex^="-"]){
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.emoji-picker-insert .emoji-btn{
  position: relative;
}

.emoji-picker-insert .emoji-btn::after{
  --tw-content: '';
  content: var(--tw-content);
}

@media (max-width: 767px) {
  /* Community CTA button - smaller on mobile */

  /* Community CTA container - move up on mobile to avoid overlapping text/tags */

  /* Bot profile picture - smaller on mobile */

  /* Adjust bottom padding for mobile safe area */

  .video-feed-item .emoji-picker-insert .emoji-btn.bottom-0:after {
    padding-bottom: max(1.25rem, env(safe-area-inset-bottom));
  }
}

@media (prefers-contrast: high) {
  .video-feed-item .emoji-picker-insert .emoji-btn.bottom-0:after {
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 1) 0%,
        rgba(0, 0, 0, 0.9) 40%,
        rgba(0, 0, 0, 0.5) 70%,
        transparent 100%
      );
  }
}

@media (max-width: 767px) and (orientation: landscape) {
  .video-feed-item .emoji-picker-insert .emoji-btn.bottom-0:after {
    padding: 1rem 1.5rem 1rem;
  }

  /* Community CTA button - no size override in landscape */
}

.emoji-picker-insert .emoji-btn:after{
  position: absolute;
  top: 50%;
  left: 100%;
  height: 1.75rem;
  width: 1px;
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  background-color: var(--lightgray);
}

@media (max-width: 767px) {
  /* Community CTA button - smaller on mobile */

  /* Community CTA container - move up on mobile to avoid overlapping text/tags */

  /* Bot profile picture - smaller on mobile */

  /* Adjust bottom padding for mobile safe area */

  .video-feed-item .emoji-picker-insert .fg-emoji-container.bottom-0 {
    padding-bottom: max(1.25rem, env(safe-area-inset-bottom));
  }
}

@media (prefers-contrast: high) {
  .video-feed-item .emoji-picker-insert .fg-emoji-container.bottom-0 {
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 1) 0%,
        rgba(0, 0, 0, 0.9) 40%,
        rgba(0, 0, 0, 0.5) 70%,
        transparent 100%
      );
  }
}

@media (max-width: 767px) and (orientation: landscape) {
  .video-feed-item .emoji-picker-insert .fg-emoji-container.bottom-0 {
    padding: 1rem 1.5rem 1rem;
  }

  /* Community CTA button - no size override in landscape */
}

.emoji-picker-insert .fg-emoji-container{
  position: absolute;
  top: unset;
  bottom: 75px;
  left: 1rem !important;
  border-width: 1px;
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.emoji-picker-insert .fg-emoji-container:is(.dark *){
  background-color: hsl(var(--static-black));
}

.dark .message-sender .message-content .content {
  background: linear-gradient(265deg, rgba(225, 24, 217, 0.95) 0%, rgba(225, 156, 17, 0.95) 100%);
}

.dark .message-sender .message-content .content .msg{
  color: var(--dark);
}

.dark .message-sender .message-content .content .timer{
  color: var(--dark) !important;
}

.msg-img-wrapper {
  display: inline-block;
  padding: 8px;
  border-radius: 12px;
  background: linear-gradient(265deg, rgba(225, 24, 217, 0.25) 0%, rgba(225, 156, 17, 0.25) 100%);
}

.dark .msg-img-wrapper {
  background: linear-gradient(265deg, rgba(225, 24, 217, 0.95) 0%, rgba(225, 156, 17, 0.95) 100%);
}

/* Add this new rule */

@media (max-width: 767px) {
  #person_lists {
    padding-bottom: 260px;
    /* This accounts for the bottom navigation bar and browser UI */
  }
}

.\!checkbox{
  position: relative;
}

.checkbox{
  position: relative;
}

.category-divider.\!checkbox input {
  display: none;
}

.tag-filter.\!checkbox input {
  display: none;
}

.home-tags-arrow.\!checkbox input {
  display: none;
}

.ch2-section--custom-add.\!checkbox input {
  display: none;
}

.ch2-advanced__panel.\!checkbox input {
  display: none;
}

.\!checkbox input{
  display: none;
}

.gi-helper-preset.\!checkbox input {
  display: none;
}

.vip-price-toggle.\!checkbox input {
  opacity: 0;
  pointer-events: none;
}

.promo-code-button-content.\!checkbox input {
  display: none;
}

.promo-code-input-container.\!checkbox input {
  display: none;
}

.promo-code-apply-link.\!checkbox input {
  display: none;
}

.gv-toggle-meta.\!checkbox input {
  display: none;
}

.category-divider.checkbox input {
  display: none;
}

.tag-filter.checkbox input {
  display: none;
}

.home-tags-arrow.checkbox input {
  display: none;
}

.ch2-section--custom-add.checkbox input {
  display: none;
}

.ch2-advanced__panel.checkbox input {
  display: none;
}

.checkbox input{
  display: none;
}

.gi-helper-preset.checkbox input {
  display: none;
}

.vip-price-toggle.checkbox input {
  opacity: 0;
  pointer-events: none;
}

.promo-code-button-content.checkbox input {
  display: none;
}

.promo-code-input-container.checkbox input {
  display: none;
}

.promo-code-apply-link.checkbox input {
  display: none;
}

.gv-toggle-meta.checkbox input {
  display: none;
}

@media (max-width: 767px) {
  /* Community CTA button - smaller on mobile */

  /* Community CTA container - move up on mobile to avoid overlapping text/tags */

  /* Bot profile picture - smaller on mobile */

  /* Adjust bottom padding for mobile safe area */

  .video-feed-item .checkbox-indicator.bottom-0 {
    padding-bottom: max(1.25rem, env(safe-area-inset-bottom));
  }
}

@media (prefers-contrast: high) {
  .video-feed-item .checkbox-indicator.bottom-0 {
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 1) 0%,
        rgba(0, 0, 0, 0.9) 40%,
        rgba(0, 0, 0, 0.5) 70%,
        transparent 100%
      );
  }
}

@media (max-width: 767px) and (orientation: landscape) {
  .video-feed-item .checkbox-indicator.bottom-0 {
    padding: 1rem 1.5rem 1rem;
  }

  /* Community CTA button - no size override in landscape */
}

.checkbox-indicator{
  position: absolute;
  inset: 0px;
  display: flex;
  height: 100%;
  width: 100%;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  border-width: 1px;
  border-color: var(--content);
  background-color: hsl(var(--white));
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
}

@media screen and (max-width:675px) {
  .common-que>div:hover .checkbox-indicator,
    .common-que>div.active .checkbox-indicator {
    display: block;
  }
}

.dark .basicSlider .checkbox-indicator,
.dark .basicSlider .checkbox-indicator {
  background-color: hsl(var(--black));
  color: hsl(var(--white));
}

.dark .choose-item .checkbox-indicator {
  filter: brightness(0) invert(1);
}

@media (max-width: 767px) {
  .swap-out>.checkbox-indicator {
    justify-content: center;
  }
}

@media (max-width: 640px) {
  .common.checkbox-indicator.right-side-bottom-bar-btns {
    gap: 5px;
    padding-left: 0;
  }
}

a.block.text-center.checkbox-indicator.generate-link.overflow-hidden.group.rounded-2xl.hover\:-bg-white.drop-shadow-xl {
  animation: fadeIn .5s linear;
}

.checkbox-indicator svg{
  height: 80%;
  width: 80%;
  stroke: hsl(var(--white));
}

.\!checkbox input:checked ~ .checkbox-indicator{
  border-color: var(--primary);
  background-color: var(--primary);
}

.checkbox input:checked ~ .checkbox-indicator{
  border-color: var(--primary);
  background-color: var(--primary);
}

input[type='radio'] {
  accent-color: #808080;
  accent-color: var(--gray);
}

.primary input[type='radio'] {
  accent-color: #63d5be;
  border-width: 1px;
  border-color: var(--gray);
}

.danger input[type='radio'] {
  accent-color: #f1523d;
}

.warning input[type='radio'] {
  accent-color: #feb858;
}

.dark input[type='radio'] {
  accent-color: #072448;
}

.info input[type='radio'] {
  accent-color: #b52af6;
}

.\!checkbox{
  position: relative;
}

.checkbox{
  position: relative;
}

.category-divider.\!checkbox input {
  display: none;
}

.tag-filter.\!checkbox input {
  display: none;
}

.home-tags-arrow.\!checkbox input {
  display: none;
}

.ch2-section--custom-add.\!checkbox input {
  display: none;
}

.ch2-advanced__panel.\!checkbox input {
  display: none;
}

.\!checkbox input{
  display: none;
}

.gi-helper-preset.\!checkbox input {
  display: none;
}

.vip-price-toggle.\!checkbox input {
  opacity: 0;
  pointer-events: none;
}

.promo-code-button-content.\!checkbox input {
  display: none;
}

.promo-code-input-container.\!checkbox input {
  display: none;
}

.promo-code-apply-link.\!checkbox input {
  display: none;
}

.gv-toggle-meta.\!checkbox input {
  display: none;
}

.category-divider.checkbox input {
  display: none;
}

.tag-filter.checkbox input {
  display: none;
}

.home-tags-arrow.checkbox input {
  display: none;
}

.ch2-section--custom-add.checkbox input {
  display: none;
}

.ch2-advanced__panel.checkbox input {
  display: none;
}

.checkbox input{
  display: none;
}

.gi-helper-preset.checkbox input {
  display: none;
}

.vip-price-toggle.checkbox input {
  opacity: 0;
  pointer-events: none;
}

.promo-code-button-content.checkbox input {
  display: none;
}

.promo-code-input-container.checkbox input {
  display: none;
}

.promo-code-apply-link.checkbox input {
  display: none;
}

.gv-toggle-meta.checkbox input {
  display: none;
}

@media (max-width: 767px) {
  /* Community CTA button - smaller on mobile */

  /* Community CTA container - move up on mobile to avoid overlapping text/tags */

  /* Bot profile picture - smaller on mobile */

  /* Adjust bottom padding for mobile safe area */

  .video-feed-item .checkbox-indicator.bottom-0 {
    padding-bottom: max(1.25rem, env(safe-area-inset-bottom));
  }
}

@media (prefers-contrast: high) {
  .video-feed-item .checkbox-indicator.bottom-0 {
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 1) 0%,
        rgba(0, 0, 0, 0.9) 40%,
        rgba(0, 0, 0, 0.5) 70%,
        transparent 100%
      );
  }
}

@media (max-width: 767px) and (orientation: landscape) {
  .video-feed-item .checkbox-indicator.bottom-0 {
    padding: 1rem 1.5rem 1rem;
  }

  /* Community CTA button - no size override in landscape */
}

.checkbox-indicator{
  position: absolute;
  inset: 0px;
  display: flex;
  height: 100%;
  width: 100%;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  border-width: 1px;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
}

@media screen and (max-width:675px) {
  .common-que>div:hover .checkbox-indicator,
    .common-que>div.active .checkbox-indicator {
    display: block;
  }
}

.dark .choose-item .checkbox-indicator {
  filter: brightness(0) invert(1);
}

@media (max-width: 767px) {
  .swap-out>.checkbox-indicator {
    justify-content: center;
  }
}

@media (max-width: 640px) {
  .common.checkbox-indicator.right-side-bottom-bar-btns {
    gap: 5px;
    padding-left: 0;
  }
}

a.block.text-center.checkbox-indicator.generate-link.overflow-hidden.group.rounded-2xl.hover\:-bg-white.drop-shadow-xl {
  animation: fadeIn .5s linear;
}

.checkbox-indicator svg{
  height: 80%;
  width: 80%;
  stroke: hsl(var(--white));
}

.dropdown{
  position: relative;
  display: inline-block;
  width: -moz-fit-content;
  width: fit-content;
}

@media (max-width: 767px) {
  /* Community CTA button - smaller on mobile */

  /* Community CTA container - move up on mobile to avoid overlapping text/tags */

  /* Bot profile picture - smaller on mobile */

  /* Adjust bottom padding for mobile safe area */

  .video-feed-item .dropdown .dropdown-menu.bottom-0 {
    padding-bottom: max(1.25rem, env(safe-area-inset-bottom));
  }
}

@media (prefers-contrast: high) {
  .video-feed-item .dropdown .dropdown-menu.bottom-0 {
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 1) 0%,
        rgba(0, 0, 0, 0.9) 40%,
        rgba(0, 0, 0, 0.5) 70%,
        transparent 100%
      );
  }
}

@media (max-width: 767px) and (orientation: landscape) {
  .video-feed-item .dropdown .dropdown-menu.bottom-0 {
    padding: 1rem 1.5rem 1rem;
  }

  /* Community CTA button - no size override in landscape */
}

.dropdown .dropdown-menu{
  visibility: hidden;
  position: absolute;
  top: 0px;
  right: 0px;
  z-index: 3;
  width: 100%;
  min-width: -moz-max-content;
  min-width: max-content;
  border-radius: 1rem;
  background-color: hsl(var(--white));
  opacity: 0;
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  transition-property: opacity,top;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
}

@media screen and (max-width:675px) {
  .common-que>div:hover .dropdown .dropdown-menu,
    .common-que>div.active .dropdown .dropdown-menu {
    display: block;
  }
}

.dark .basicSlider .dropdown .dropdown-menu,
.dark .basicSlider .dropdown .dropdown-menu {
  background-color: hsl(var(--black));
  color: hsl(var(--white));
}

a.block.text-center.w-full.generate-link.overflow-hidden.group.dropdown .dropdown-menu.hover\:-bg-white.drop-shadow-xl {
  animation: fadeIn .5s linear;
}

a.block.text-center.dropdown .dropdown-menu.generate-link.overflow-hidden.group.rounded-2xl.hover\:-bg-white.drop-shadow-xl {
  animation: fadeIn .5s linear;
}

.dropdown .dropdown-menu:where([dir="ltr"], [dir="ltr"] *){
  right: 0px;
}

.dropdown .dropdown-menu:where([dir="rtl"], [dir="rtl"] *){
  left: 0px;
}

.dropdown .dropdown-menu > ul{
  display: flex;
  flex-direction: column;
}

@media (max-width: 767px) {
  .swap-out>.dropdown .dropdown-menu > ul {
    justify-content: center;
  }
}

@media (max-width: 640px) {
  .common.dropdown .dropdown-menu > ul.right-side-bottom-bar-btns {
    gap: 5px;
    padding-left: 0;
  }
}

.dropdown .dropdown-menu > ul > li a{
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
}

.dark .choose-item .dropdown .dropdown-menu > ul > li a {
  filter: brightness(0) invert(1);
}

.dropdown .dropdown-menu > ul > li:hover > a{
  color: var(--primary);
}

.dropdown .dropdown-menu.dropdown-sub-menu{
  right: unset;
  left: 20px;
  --tw-translate-x: 100%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.group:hover .dropdown .dropdown-menu.dropdown-sub-menu{
  top: -60%;
}

.dropdown.show .dropdown-menu{
  visibility: visible;
  top: 35px;
  opacity: 1;
}

.gi-prompt-tooltip.dropdown.show .dropdown-menu {
  display: block;
}

.gv-prompt-tooltip.dropdown.show .dropdown-menu {
  display: block;
}

.dropdown.\!show .dropdown-menu{
  visibility: visible;
  top: 35px;
  opacity: 1;
}

.gi-prompt-tooltip.dropdown.\!show .dropdown-menu {
  display: block;
}

.gv-prompt-tooltip.dropdown.\!show .dropdown-menu {
  display: block;
}

.dropdown.dropdown-top .dropdown-menu{
  left: 0px;
  top: unset;
  bottom: 100%;
}

.dropdown.dropdown-left .dropdown-menu{
  right: 100%;
  top: 0px;
  height: -moz-fit-content;
  height: fit-content;
}

.dropdown.dropdown-right .dropdown-menu{
  left: 100%;
  top: 0px;
}

.tabs .dropdown .dropdown-menu{
  padding: 0.5rem;
}

.tabs .dropdown .dropdown-menu ul{
  gap: 0px;
}

.theme-form .textarea{
  border-width: 1px;
  border-color: var(--lightgray);
  background-color: hsl(var(--white));
  padding-top: 11px;
  padding-bottom: 11px;
  padding-left: 18px;
  padding-right: 12px;
  font-size: calc(16px + (16 - 16) * ((100vw - 320px) / (1920 - 320)));
  line-height: 1.35;
  font-weight: 600;
  color: var(--title);
  border-radius: 5px;
}

.dark .basicSlider .theme-form .textarea,
.dark .basicSlider .theme-form .textarea {
  background-color: hsl(var(--black));
  color: hsl(var(--white));
}

.theme-form .social{
  display: flex;
  justify-content: center;
  gap: 0.5rem;
}

@media (max-width: 767px) {
  .swap-out>.theme-form .social {
    justify-content: center;
  }
}

@media (max-width: 640px) {
  .common.theme-form .social.right-side-bottom-bar-btns {
    gap: 5px;
    padding-left: 0;
  }
}

.theme-form .social .btn{
  border-radius: 0px;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  padding-left: 1rem;
  padding-right: 1rem;
  font-size: calc(16px + (16 - 16) * ((100vw - 320px) / (1920 - 320)));
  line-height: 1.35;
  color: var(--primary);
}

.theme-form .social .\!btn{
  border-radius: 0px;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  padding-left: 1rem;
  padding-right: 1rem;
  font-size: calc(16px + (16 - 16) * ((100vw - 320px) / (1920 - 320)));
  line-height: 1.35;
  color: var(--primary);
}

.theme-form .social img{
  height: 1.5rem;
  width: 1.5rem;
}

.modal-main input[type='checkbox'] {
  display: none;
}

.category-divider.modal-main .modal-overlay {
  display: none;
}

.tag-filter.modal-main .modal-overlay {
  display: none;
}

.home-tags-arrow.modal-main .modal-overlay {
  display: none;
}

.ch2-section--custom-add.modal-main .modal-overlay {
  display: none;
}

.ch2-advanced__panel.modal-main .modal-overlay {
  display: none;
}

.modal-main .modal-overlay{
  position: fixed;
  top: 0px;
  left: 0px;
  z-index: 100;
  display: none;
  height: 100%;
  width: 100%;
  background-color: var(--dark);
  opacity: 0.4;
}

@media screen and (max-width:675px) {
  .common-que>div:hover .modal-main .modal-overlay,
    .common-que>div.active .modal-main .modal-overlay {
    display: block;
  }
}

a.block.text-center.modal-main .modal-overlay.generate-link.overflow-hidden.group.rounded-2xl.hover\:-bg-white.drop-shadow-xl {
  animation: fadeIn .5s linear;
}

.gi-helper-preset.modal-main .modal-overlay {
  display: none;
}

.vip-price-toggle.modal-main .modal-overlay {
  opacity: 0;
  pointer-events: none;
}

.promo-code-button-content.modal-main .modal-overlay {
  display: none;
}

.promo-code-input-container.modal-main .modal-overlay {
  display: none;
}

.promo-code-apply-link.modal-main .modal-overlay {
  display: none;
}

.gv-toggle-meta.modal-main .modal-overlay {
  display: none;
}

.category-divider.modal-main .modal-overlay-blur {
  display: none;
}

.tag-filter.modal-main .modal-overlay-blur {
  display: none;
}

.home-tags-arrow.modal-main .modal-overlay-blur {
  display: none;
}

.ch2-section--custom-add.modal-main .modal-overlay-blur {
  display: none;
}

.ch2-advanced__panel.modal-main .modal-overlay-blur {
  display: none;
}

.modal-main .modal-overlay-blur{
  position: fixed;
  top: 0px;
  left: 0px;
  z-index: 100;
  display: none;
  height: 100%;
  width: 100%;
  background-color: hsl(var(--static-black) / 0.5);
  --tw-backdrop-blur: blur(12px);
  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
          backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

@media screen and (max-width:675px) {
  .common-que>div:hover .modal-main .modal-overlay-blur,
    .common-que>div.active .modal-main .modal-overlay-blur {
    display: block;
  }
}

a.block.text-center.modal-main .modal-overlay-blur.generate-link.overflow-hidden.group.rounded-2xl.hover\:-bg-white.drop-shadow-xl {
  animation: fadeIn .5s linear;
}

.gi-helper-preset.modal-main .modal-overlay-blur {
  display: none;
}

.vip-price-toggle.modal-main .modal-overlay-blur {
  opacity: 0;
  pointer-events: none;
}

.promo-code-button-content.modal-main .modal-overlay-blur {
  display: none;
}

.promo-code-input-container.modal-main .modal-overlay-blur {
  display: none;
}

.promo-code-apply-link.modal-main .modal-overlay-blur {
  display: none;
}

.gv-toggle-meta.modal-main .modal-overlay-blur {
  display: none;
}

.category-divider.modal-main .modal {
  display: none;
}

.tag-filter.modal-main .modal {
  display: none;
}

.home-tags-arrow.modal-main .modal {
  display: none;
}

.ch2-section--custom-add.modal-main .modal {
  display: none;
}

.ch2-advanced__panel.modal-main .modal {
  display: none;
}

.modal-main .modal{
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 100;
  margin: auto;
  display: none;
  --tw-translate-y: -50%;
  --tw-translate-x: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  border-radius: 0.25rem;
  border-color: var(--dark);
  background-color: hsl(var(--white));
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

.dark .basicSlider .modal-main .modal,
.dark .basicSlider .modal-main .modal {
  background-color: hsl(var(--black));
  color: hsl(var(--white));
}

.gi-helper-preset.modal-main .modal {
  display: none;
}

.vip-price-toggle.modal-main .modal {
  opacity: 0;
  pointer-events: none;
}

.promo-code-button-content.modal-main .modal {
  display: none;
}

.promo-code-input-container.modal-main .modal {
  display: none;
}

.promo-code-apply-link.modal-main .modal {
  display: none;
}

.gv-toggle-meta.modal-main .modal {
  display: none;
}

.category-divider.modal-main .\!modal {
  display: none;
}

.tag-filter.modal-main .\!modal {
  display: none;
}

.home-tags-arrow.modal-main .\!modal {
  display: none;
}

.ch2-section--custom-add.modal-main .\!modal {
  display: none;
}

.ch2-advanced__panel.modal-main .\!modal {
  display: none;
}

.modal-main .\!modal{
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 100;
  margin: auto;
  display: none;
  --tw-translate-y: -50%;
  --tw-translate-x: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  border-radius: 0.25rem;
  border-color: var(--dark);
  background-color: hsl(var(--white));
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

.dark .basicSlider .modal-main .\!modal,
.dark .basicSlider .modal-main .\!modal {
  background-color: hsl(var(--black));
  color: hsl(var(--white));
}

.gi-helper-preset.modal-main .\!modal {
  display: none;
}

.vip-price-toggle.modal-main .\!modal {
  opacity: 0;
  pointer-events: none;
}

.promo-code-button-content.modal-main .\!modal {
  display: none;
}

.promo-code-input-container.modal-main .\!modal {
  display: none;
}

.promo-code-apply-link.modal-main .\!modal {
  display: none;
}

.gv-toggle-meta.modal-main .\!modal {
  display: none;
}

.modal-main .modal.modal-center{
  top: 50%;
  left: 50%;
  --tw-translate-y: -50%;
  --tw-translate-x: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.modal-main .\!modal.modal-center{
  top: 50%;
  left: 50%;
  --tw-translate-y: -50%;
  --tw-translate-x: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.modal-main .modal.modal-top-left{
  top: 0%;
  left: 0%;
  --tw-translate-x: -0px;
  --tw-translate-y: -0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.modal-main .\!modal.modal-top-left{
  top: 0%;
  left: 0%;
  --tw-translate-x: -0px;
  --tw-translate-y: -0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.modal-main .modal.modal-top-center{
  top: 0%;
  left: 50%;
  --tw-translate-x: -50%;
  --tw-translate-y: -0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.modal-main .\!modal.modal-top-center{
  top: 0%;
  left: 50%;
  --tw-translate-x: -50%;
  --tw-translate-y: -0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.modal-main .modal.modal-top-right{
  top: 0%;
  right: 0%;
  left: unset;
  --tw-translate-x: -0px;
  --tw-translate-y: -0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.modal-main .\!modal.modal-top-right{
  top: 0%;
  right: 0%;
  left: unset;
  --tw-translate-x: -0px;
  --tw-translate-y: -0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.modal-main .modal.modal-bottom-left{
  bottom: 0%;
  top: unset;
  left: 0%;
  --tw-translate-x: -0px;
  --tw-translate-y: -0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.modal-main .\!modal.modal-bottom-left{
  bottom: 0%;
  top: unset;
  left: 0%;
  --tw-translate-x: -0px;
  --tw-translate-y: -0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.modal-main .modal.modal-bottom-center{
  bottom: 0%;
  top: unset;
  left: 50%;
  --tw-translate-x: -50%;
  --tw-translate-y: -0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.modal-main .\!modal.modal-bottom-center{
  bottom: 0%;
  top: unset;
  left: 50%;
  --tw-translate-x: -50%;
  --tw-translate-y: -0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.modal-main .modal.modal-bottom-right{
  bottom: 0%;
  top: unset;
  right: 0%;
  left: unset;
  --tw-translate-x: -0px;
  --tw-translate-y: -0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.modal-main .\!modal.modal-bottom-right{
  bottom: 0%;
  top: unset;
  right: 0%;
  left: unset;
  --tw-translate-x: -0px;
  --tw-translate-y: -0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.modal-main .modal .modal-header{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0.75rem;
}

@media (max-width: 767px) {
  .swap-out>.modal-main .modal .modal-header {
    justify-content: center;
  }
}

@media (max-width: 640px) {
  .common.modal-main .modal .modal-header.right-side-bottom-bar-btns {
    gap: 5px;
    padding-left: 0;
  }
}

.modal-main .\!modal .modal-header{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0.75rem;
}

@media (max-width: 767px) {
  .swap-out>.modal-main .\!modal .modal-header {
    justify-content: center;
  }
}

@media (max-width: 640px) {
  .common.modal-main .\!modal .modal-header.right-side-bottom-bar-btns {
    gap: 5px;
    padding-left: 0;
  }
}

.modal-main .modal .modal-header h3{
  font-size: calc(32px + (32 - 32) * ((100vw - 320px) / (1920 - 320)));
  line-height: 1.35;
  font-weight: 700;
}

@media (max-width: 1599px){
  .modal-main .modal .modal-header h3{
    font-size: calc(18px + (20 - 18) * ((100vw - 320px) / (1920 - 320)));
    line-height: 1.5;
  }
}

.modal-main .\!modal .modal-header h3{
  font-size: calc(32px + (32 - 32) * ((100vw - 320px) / (1920 - 320)));
  line-height: 1.35;
  font-weight: 700;
}

@media (max-width: 1599px){
  .modal-main .\!modal .modal-header h3{
    font-size: calc(18px + (20 - 18) * ((100vw - 320px) / (1920 - 320)));
    line-height: 1.5;
  }
}

.modal-main .modal .modal-header label{
  cursor: pointer;
  font-size: calc(16px + (16 - 16) * ((100vw - 320px) / (1920 - 320)));
  line-height: 1.35;
}

.modal-main .\!modal .modal-header label{
  cursor: pointer;
  font-size: calc(16px + (16 - 16) * ((100vw - 320px) / (1920 - 320)));
  line-height: 1.35;
}

.modal-main .modal .modal-body{
  margin: 0px;
  padding: 0.75rem;
}

.modal-main .\!modal .modal-body{
  margin: 0px;
  padding: 0.75rem;
}

.modal-main .modal .modal-body.modal-content-scroll{
  left: 0px;
  right: 0px;
  width: auto;
  overflow: auto;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  height: 300px;
}

@media (max-width: 500px) {
  .modal-main .modal .modal-body.modal-content-scroll {
    height: 230px;
  }
}

.modal-main .\!modal .modal-body.modal-content-scroll{
  left: 0px;
  right: 0px;
  width: auto;
  overflow: auto;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  height: 300px;
}

@media (max-width: 500px) {
  .modal-main .\!modal .modal-body.modal-content-scroll {
    height: 230px;
  }
}

.modal-main .modal .modal-footer{
  margin: 0px;
  border-top-width: 1px;
  border-color: var(--lightgray);
  padding: 0.75rem;
  text-align: end;
}

.modal-main .\!modal .modal-footer{
  margin: 0px;
  border-top-width: 1px;
  border-color: var(--lightgray);
  padding: 0.75rem;
  text-align: end;
}

.modal-main .theme-form input[type='checkbox'] {
  display: block;
}

.button-label{
  display: inline-block;
  width: -moz-fit-content;
  width: fit-content;
  cursor: pointer;
  border-radius: 0.25rem;
  padding: 0.5rem;
  font-size: calc(16px + (16 - 16) * ((100vw - 320px) / (1920 - 320)));
  line-height: 1.35;
  font-weight: 700;
  color: hsl(var(--white));
}

/* Consent Modal Specific Styles */

.best-choice #consentModal::before {
  box-shadow: none;
  background-image: linear-gradient(to bottom, rgba(18, 19, 22, 0) 40%, rgba(18, 19, 22, 0.6) 90%);
}

#consentModal{
  display: block;
}

:root.dark #consentModal.shadow-white:before {
  background: linear-gradient(180deg, rgb(255 255 255 / 0%) 0%, #121316 100%);
}

#consentModal:before{
  box-shadow: inset 0px -200px 100px -13px var(--dark-shadow);
  transition: all 0.3s ease;
  border-radius: 16px;
  top: 0;
  width: 100%;
  bottom: 0;
  left: 0;
  z-index: 1;
}

#consentModal.shadow-white:before{
  border-radius: 0;
  box-shadow: none;
  background: linear-gradient(180deg, rgb(255 255 255 / 0%) 0%, #F2F3F5 100%);
}

#consentModal.shadow-light:before{
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(68, 68, 68, 0.00) 0%, #444 100%);
}

.tab-content-wrap #consentModal:before {
  border-radius: 0.5rem;
}

a#consentModal.text-center.w-full.generate-link.overflow-hidden.group.rounded-2xl.hover\:-bg-white.drop-shadow-xl {
  animation: fadeIn .5s linear;
}

/* Hide the checkbox toggle */

#consentModal input[type="checkbox"] {
  display: none;
}

#consentModal .consent-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  z-index: 9999;
  display: none;
}

#consentModal .consent-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 10000;
}

#consentModal .consent-card {
  background-color: rgba(0, 0, 0, 0.9);
  border-radius: 16px;
  border: 1px solid white;
  max-width: 400px;
  margin: 0 16px;
  padding: 32px;
  text-align: center;
  color: white;
}

#consentModal .consent-title {
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 16px;
  color: white;
}

#consentModal .consent-text {
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 32px;
  color: white;
}

#consentModal .consent-buttons {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

#consentModal .consent-btn-yes {
  width: 100%;
  background-color: white;
  color: black;
  border: none;
  border-radius: 9999px;
  padding: 12px 24px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
}

#consentModal .consent-btn-yes:hover {
  background-color: #f3f4f6;
}

#consentModal .consent-btn-no {
  width: 100%;
  background-color: transparent;
  color: #ef4444;
  border: 1px solid white;
  border-radius: 9999px;
  padding: 12px 24px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
}

#consentModal .consent-btn-no:hover {
  background-color: white;
  color: #ef4444;
}

/* Show overlay and modal when checkbox is checked */

#consentModal input[type="checkbox"]:checked ~ .consent-overlay {
  display: block !important;
}

#consentModal input[type="checkbox"]:checked ~ .consent-modal {
  display: flex !important;
}

/* CBPT Modal Specific Styles */

#cbpt-modal .modal-overlay{
  z-index: 1000;
  background-color: hsl(var(--black));
  --tw-bg-opacity: 0.5;
}

#cbpt-modal .\!modal{
  z-index: 1001;
}

#cbpt-modal .modal{
  z-index: 1001;
}

#cbpt-modal .modal-content{
  position: relative;
  z-index: 1002;
}

#cbpt-modal #cbpt-pay-other-card{
  position: relative;
  z-index: 1003;
  border-width: 1px;
  border-color: var(--lightgray);
  color: var(--bodytext);
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

#cbpt-modal #cbpt-pay-other-card:hover{
  background-color: var(--lightgray);
}

#cbpt-modal #cbpt-pay-now{
  position: relative;
  z-index: 1003;
}

.swap{
  position: relative;
  display: inline-grid;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  place-content: center;
}

.swap.swap-rotate .swap-off{
  --tw-rotate: 0deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.swap.swap-rotate .swap-on{
  --tw-rotate: 180deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.swap>*{
  grid-column-start: 1;
  grid-row-start: 1;
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.swap input{
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

.swap .swap-on,
    .swap .swap-indeterminate,
    .swap input:indeterminate~.swap-on{
  opacity: 0;
}

.swap input:checked~.swap-off,
    .swap.swap-active .swap-off,
    .swap input:indeterminate~.swap-off{
  opacity: 0;
}

.swap input:checked~.swap-on,
    .swap-active .swap-on,
    .swap input:indeterminate~.swap-indeterminate{
  opacity: 1;
}

.tab{
  position: relative;
  cursor: pointer;
  padding-top: 0px;
  padding-bottom: 0px;
  padding-left: 0.25rem;
  padding-right: 0.25rem;
  font-size: calc(16px + (16 - 16) * ((100vw - 320px) / (1920 - 320)));
  line-height: 1.35;
  font-weight: 600;
  color: var(--dark);
}

.tab-active{
  color: var(--primary);
}

.tab-active svg{
  stroke: var(--primary);
}

.tabs{
  display: flex;
  gap: 0.25rem;
}

@media (max-width: 767px) {
  .swap-out>.tabs {
    justify-content: center;
  }
}

@media (max-width: 640px) {
  .common.tabs.right-side-bottom-bar-btns {
    gap: 5px;
    padding-left: 0;
  }
}

.tabs .tab-links .tab{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
}

@media (max-width: 767px) {
  .swap-out>.tabs .tab-links .tab {
    justify-content: center;
  }
}

@media (max-width: 640px) {
  .common.tabs .tab-links .tab.right-side-bottom-bar-btns {
    gap: 5px;
    padding-left: 0;
  }
}

.tabs .tab-links .tab.tabs-bordered{
  border-bottom-width: 2px;
  padding-top: 1rem;
  padding-bottom: 1rem;
  padding-left: 2rem;
  padding-right: 2rem;
  font-size: calc(16px + (16 - 16) * ((100vw - 320px) / (1920 - 320)));
  line-height: 1.35;
  font-weight: 400;
  color: var(--graycolor);
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.dark .choose-item .tabs .tab-links .tab.tabs-bordered {
  filter: brightness(0) invert(1);
}

.tabs .tab-links .tab.tabs-bordered.tab-active{
  border-bottom-width: 2px;
  border-color: var(--dark);
  font-size: calc(16px + (16 - 16) * ((100vw - 320px) / (1920 - 320)));
  line-height: 1.35;
  font-weight: 400;
  color: var(--dark);
}

.tabs .tab-links .tab.tabs-bordered.tabs-bordered-bg:hover{
  border-bottom-width: 2px;
  border-color: var(--primary);
  background-color: var(--primary);
  color: var(--primary);
}

.tabs .tab-links .tab.tabs-bordered.tabs-bordered-bg.tab-active{
  background-color: var(--primary);
}

.tabs .tab-links .tab.tabs-boxed{
  border-radius: 0.5rem;
  padding: 0.5rem;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 500ms;
  background-color: transparent;
}

.tabs .tab-links .tab.tabs-boxed:hover{
  background-color: var(--dark);
  color: hsl(var(--white));
}

.tabs .tab-links .tab.tabs-boxed.tab-active{
  border-radius: 0.5rem;
  background-color: hsl(var(--black));
  --tw-bg-opacity: 0.7;
  color: hsl(var(--white));
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
  transition-duration: 500ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.tabs .tab-links .tab.tabs-boxed.tab-active:hover{
  background-color: hsl(var(--black));
}

.tabs .tab-links .tab.tabs-verical{
  border-right-width: 1px;
  border-color: var(--lightgray);
  padding: 0.5rem;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.dark .choose-item .tabs .tab-links .tab.tabs-verical {
  filter: brightness(0) invert(1);
}

@media (max-width: 575px){
  .tabs .tab-links .tab.tabs-verical{
    border-right-width: 0px;
    border-bottom-width: 1px;
  }
}

.tabs .tab-links .tab.tabs-verical.tab-active{
  border-right-width: 2px;
  border-color: var(--primary);
  color: var(--primary);
}

@media (max-width: 575px){
  .tabs .tab-links .tab.tabs-verical.tab-active{
    border-right-width: 0px;
    border-bottom-width: 2px;
  }
}

.tabs-content{
  z-index: 0;
}

.category-divider.tabs-content .tab-pan {
  display: none;
}

.tag-filter.tabs-content .tab-pan {
  display: none;
}

.home-tags-arrow.tabs-content .tab-pan {
  display: none;
}

.ch2-section--custom-add.tabs-content .tab-pan {
  display: none;
}

.ch2-advanced__panel.tabs-content .tab-pan {
  display: none;
}

.tabs-content .tab-pan{
  margin-top: -1px;
  display: none;
  border-width: 1px;
  border-color: var(--lightgray);
  padding-left: 16px;
  padding-right: 16px;
  padding-bottom: 16px;
  padding-top: 17px;
  text-align: start;
  border-radius: 5px;
}

.gi-helper-preset.tabs-content .tab-pan {
  display: none;
}

.vip-price-toggle.tabs-content .tab-pan {
  opacity: 0;
  pointer-events: none;
}

.promo-code-button-content.tabs-content .tab-pan {
  display: none;
}

.promo-code-input-container.tabs-content .tab-pan {
  display: none;
}

.promo-code-apply-link.tabs-content .tab-pan {
  display: none;
}

.gv-toggle-meta.tabs-content .tab-pan {
  display: none;
}

.best-choice .tabs-content .tab-pan.active::before {
  box-shadow: none;
  background-image: linear-gradient(to bottom, rgba(18, 19, 22, 0) 40%, rgba(18, 19, 22, 0.6) 90%);
}

.tabs-content .tab-pan.active{
  display: block;
}

:root.dark .tabs-content .tab-pan.active.shadow-white:before {
  background: linear-gradient(180deg, rgb(255 255 255 / 0%) 0%, #121316 100%);
}

.tabs-content .tab-pan.active:before{
  box-shadow: inset 0px -200px 100px -13px var(--dark-shadow);
  transition: all 0.3s ease;
  border-radius: 16px;
  top: 0;
  width: 100%;
  bottom: 0;
  left: 0;
  z-index: 1;
}

.tabs-content .tab-pan.active.shadow-white:before{
  border-radius: 0;
  box-shadow: none;
  background: linear-gradient(180deg, rgb(255 255 255 / 0%) 0%, #F2F3F5 100%);
}

.tabs-content .tab-pan.active.shadow-light:before{
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(68, 68, 68, 0.00) 0%, #444 100%);
}

.tab-content-wrap .tabs-content .tab-pan.active:before {
  border-radius: 0.5rem;
}

a.tabs-content .tab-pan.active.text-center.w-full.generate-link.overflow-hidden.group.rounded-2xl.hover\:-bg-white.drop-shadow-xl {
  animation: fadeIn .5s linear;
}

.tabs-content .tab-pan.fade{
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.tabs-content .tab-pan.show{
  opacity: 1;
}

.tabs-content .tab-pan.\!show{
  opacity: 1;
}

.tabs-content.tabs-content-px-0 .tab-pan{
  padding-left: 0px;
  padding-right: 0px;
}

.tabs-content .copyParent code{
  font-size: 12px;
}

.my-honeybots-tab li a{
  border-bottom-width: 2px;
  border-color: transparent;
}

.my-honeybots-tab li a.active{
  border-color: hsl(var(--black));
  color: hsl(var(--black));
}

.category-divider.tab-pane {
  display: none;
}

.tag-filter.tab-pane {
  display: none;
}

.home-tags-arrow.tab-pane {
  display: none;
}

.ch2-section--custom-add.tab-pane {
  display: none;
}

.ch2-advanced__panel.tab-pane {
  display: none;
}

.tab-pane{
  display: none;
}

.gi-helper-preset.tab-pane {
  display: none;
}

.vip-price-toggle.tab-pane {
  opacity: 0;
  pointer-events: none;
}

.promo-code-button-content.tab-pane {
  display: none;
}

.promo-code-input-container.tab-pane {
  display: none;
}

.promo-code-apply-link.tab-pane {
  display: none;
}

.gv-toggle-meta.tab-pane {
  display: none;
}

.tab-pane {
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

.best-choice .tab-pane.active::before {
  box-shadow: none;
  background-image: linear-gradient(to bottom, rgba(18, 19, 22, 0) 40%, rgba(18, 19, 22, 0.6) 90%);
}

.tab-pane.active{
  display: block;
}

:root.dark .tab-pane.active.shadow-white:before {
  background: linear-gradient(180deg, rgb(255 255 255 / 0%) 0%, #121316 100%);
}

.tab-pane.active:before{
  box-shadow: inset 0px -200px 100px -13px var(--dark-shadow);
  transition: all 0.3s ease;
  border-radius: 16px;
  top: 0;
  width: 100%;
  bottom: 0;
  left: 0;
  z-index: 1;
}

.tab-pane.active.shadow-white:before{
  border-radius: 0;
  box-shadow: none;
  background: linear-gradient(180deg, rgb(255 255 255 / 0%) 0%, #F2F3F5 100%);
}

.tab-pane.active.shadow-light:before{
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(68, 68, 68, 0.00) 0%, #444 100%);
}

.tab-content-wrap .tab-pane.active:before {
  border-radius: 0.5rem;
}

a.tab-pane.active.text-center.w-full.generate-link.overflow-hidden.group.rounded-2xl.hover\:-bg-white.drop-shadow-xl {
  animation: fadeIn .5s linear;
}

.tab-pane.active {
  opacity: 1;
}

/* START TOOLTIP STYLES */

[data-tooltip-title]{
  position: relative;
  display: inline-block;
  text-align: center;
}

a.block[data-tooltip-title].w-full.generate-link.overflow-hidden.group.rounded-2xl.hover\:-bg-white.drop-shadow-xl {
  animation: fadeIn .5s linear;
}

/* Applies to all tooltips */

.category-divider[data-tooltip-title]::before,.category-divider
  [data-tooltip-title]::after {
  display: none;
}

.tag-filter[data-tooltip-title]::before,.tag-filter
  [data-tooltip-title]::after {
  display: none;
}

.home-tags-arrow[data-tooltip-title]::before,.home-tags-arrow
  [data-tooltip-title]::after {
  display: none;
}

.ch2-section--custom-add[data-tooltip-title]::before,.ch2-section--custom-add
  [data-tooltip-title]::after {
  display: none;
}

.ch2-advanced__panel[data-tooltip-title]::before,.ch2-advanced__panel
  [data-tooltip-title]::after {
  display: none;
}

@media (max-width: 767px) {
  /* Community CTA button - smaller on mobile */

  /* Community CTA container - move up on mobile to avoid overlapping text/tags */

  /* Bot profile picture - smaller on mobile */

  /* Adjust bottom padding for mobile safe area */

  .video-feed-item [data-tooltip-title].bottom-0::before,.video-feed-item 
  [data-tooltip-title].bottom-0::after {
    padding-bottom: max(1.25rem, env(safe-area-inset-bottom));
  }
}

@media (prefers-contrast: high) {
  .video-feed-item [data-tooltip-title].bottom-0::before,.video-feed-item 
  [data-tooltip-title].bottom-0::after {
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 1) 0%,
        rgba(0, 0, 0, 0.9) 40%,
        rgba(0, 0, 0, 0.5) 70%,
        transparent 100%
      );
  }
}

@media (max-width: 767px) and (orientation: landscape) {
  .video-feed-item [data-tooltip-title].bottom-0::before,.video-feed-item 
  [data-tooltip-title].bottom-0::after {
    padding: 1rem 1.5rem 1rem;
  }

  /* Community CTA button - no size override in landscape */
}

[data-tooltip-title]::before,
  [data-tooltip-title]::after{
  position: absolute;
  display: none;
  font-size: calc(16px + (16 - 16) * ((100vw - 320px) / (1920 - 320)));
  line-height: 1;
  opacity: 0;
}

.gi-helper-preset[data-tooltip-title]::before,.gi-helper-preset
  [data-tooltip-title]::after {
  display: none;
}

.vip-price-toggle[data-tooltip-title]::before,.vip-price-toggle
  [data-tooltip-title]::after {
  opacity: 0;
  pointer-events: none;
}

.promo-code-button-content[data-tooltip-title]::before,.promo-code-button-content
  [data-tooltip-title]::after {
  display: none;
}

.promo-code-input-container[data-tooltip-title]::before,.promo-code-input-container
  [data-tooltip-title]::after {
  display: none;
}

.promo-code-apply-link[data-tooltip-title]::before,.promo-code-apply-link
  [data-tooltip-title]::after {
  display: none;
}

.gv-toggle-meta[data-tooltip-title]::before,.gv-toggle-meta
  [data-tooltip-title]::after {
  display: none;
}

[data-tooltip-title]::before {
  content: '';
  border-width: 4px;
  border-style: solid;
  border-color: transparent;
}

[data-tooltip-title]::after {
  content: attr(data-tooltip-title);
  min-width: -moz-min-content;
  min-width: min-content;
  max-width: 20rem;
  white-space: nowrap;
  border-radius: 0.25rem;
  border-color: var(--primary);
  background-color: hsl(var(--white));
  padding: 0.5rem;
  font-family: 'Satoshi', sans-serif;
  color: var(--title);
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.dark .basicSlider [data-tooltip-title]::after,
.dark .basicSlider [data-tooltip-title]::after {
  background-color: hsl(var(--black));
  color: hsl(var(--white));
}

/* Make the tooltips respond to hover */

.best-choice [data-tooltip-title]:hover::before::before,.best-choice 
  [data-tooltip-title]:hover::after::before {
  box-shadow: none;
  background-image: linear-gradient(to bottom, rgba(18, 19, 22, 0) 40%, rgba(18, 19, 22, 0.6) 90%);
}

[data-tooltip-title]:hover::before,
  [data-tooltip-title]:hover::after{
  display: block;
}

:root.dark [data-tooltip-title]:hover.shadow-white::before:before,:root.dark 
  [data-tooltip-title]:hover.shadow-white::after:before {
  background: linear-gradient(180deg, rgb(255 255 255 / 0%) 0%, #121316 100%);
}

[data-tooltip-title]:hover::before:before,
  [data-tooltip-title]:hover::after:before{
  box-shadow: inset 0px -200px 100px -13px var(--dark-shadow);
  transition: all 0.3s ease;
  border-radius: 16px;
  top: 0;
  width: 100%;
  bottom: 0;
  left: 0;
  z-index: 1;
}

[data-tooltip-title]:hover.shadow-white::before:before,
  [data-tooltip-title]:hover.shadow-white::after:before{
  border-radius: 0;
  box-shadow: none;
  background: linear-gradient(180deg, rgb(255 255 255 / 0%) 0%, #F2F3F5 100%);
}

[data-tooltip-title]:hover.shadow-light::before:before,
  [data-tooltip-title]:hover.shadow-light::after:before{
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(68, 68, 68, 0.00) 0%, #444 100%);
}

.tab-content-wrap [data-tooltip-title]:hover::before:before,.tab-content-wrap 
  [data-tooltip-title]:hover::after:before {
  border-radius: 0.5rem;
}

a[data-tooltip-title]:hover.text-center.w-full.generate-link.overflow-hidden.group.rounded-2xl.hover\:-bg-white.drop-shadow-xl::before,a
  [data-tooltip-title]:hover.text-center.w-full.generate-link.overflow-hidden.group.rounded-2xl.hover\:-bg-white.drop-shadow-xl::after {
  animation: fadeIn .5s linear;
}

/* don't show empty tooltips */

.category-divider[data-tooltip-title='']::before,.category-divider
  [data-tooltip-title='']::after {
  display: none;
}

.tag-filter[data-tooltip-title='']::before,.tag-filter
  [data-tooltip-title='']::after {
  display: none;
}

.home-tags-arrow[data-tooltip-title='']::before,.home-tags-arrow
  [data-tooltip-title='']::after {
  display: none;
}

.ch2-section--custom-add[data-tooltip-title='']::before,.ch2-section--custom-add
  [data-tooltip-title='']::after {
  display: none;
}

.ch2-advanced__panel[data-tooltip-title='']::before,.ch2-advanced__panel
  [data-tooltip-title='']::after {
  display: none;
}

[data-tooltip-title='']::before,
  [data-tooltip-title='']::after{
  display: none;
}

.gi-helper-preset[data-tooltip-title='']::before,.gi-helper-preset
  [data-tooltip-title='']::after {
  display: none;
}

.vip-price-toggle[data-tooltip-title='']::before,.vip-price-toggle
  [data-tooltip-title='']::after {
  opacity: 0;
  pointer-events: none;
}

.promo-code-button-content[data-tooltip-title='']::before,.promo-code-button-content
  [data-tooltip-title='']::after {
  display: none;
}

.promo-code-input-container[data-tooltip-title='']::before,.promo-code-input-container
  [data-tooltip-title='']::after {
  display: none;
}

.promo-code-apply-link[data-tooltip-title='']::before,.promo-code-apply-link
  [data-tooltip-title='']::after {
  display: none;
}

.gv-toggle-meta[data-tooltip-title='']::before,.gv-toggle-meta
  [data-tooltip-title='']::after {
  display: none;
}

/* FLOW: TOP */

[data-tooltip-title]:not([data-flow])::before,
  [data-tooltip-title][data-flow^='top']::before{
  left: 50%;
  bottom: 100%;
  border-bottom-width: 0px;
  border-color: var(--lightgray);
}

[data-tooltip-title]:not([data-flow])::after,
  [data-tooltip-title][data-flow^='top']::after{
  bottom: calc(100% + 5px);
  left: 0px;
  right: 0px;
  border-width: 1px;
  border-color: var(--lightgray);
}

/* FLOW: BOTTOM */

[data-tooltip-title][data-flow^='bottom']::before{
  left: 50%;
  top: 100%;
  border-bottom-width: 0px;
  border-color: var(--lightgray);
}

[data-tooltip-title][data-flow^='bottom']::after{
  top: calc(100% + 5px);
  left: 0px;
  right: 0px;
  border-width: 1px;
  border-color: var(--lightgray);
}

/* FLOW: LEFT */

[data-tooltip-title][data-flow^='left']::before{
  top: 50%;
  left: calc(0em - 5px);
  border-right-width: 0px;
  border-color: var(--lightgray);
}

[data-tooltip-title][data-flow^='left']::after{
  top: 15%;
  right: calc(100% + 5px);
  z-index: 10;
  border-width: 1px;
  border-color: var(--lightgray);
}

/* FLOW: RIGHT */

[data-tooltip-title][data-flow^='right']::before{
  top: 50%;
  right: calc(0em - 5px);
  border-left-width: 0px;
  border-color: var(--lightgray);
}

[data-tooltip-title][data-flow^='right']::after{
  top: 15%;
  left: calc(100% + 5px);
  z-index: 10;
  border-width: 1px;
  border-color: var(--lightgray);
}

/* KEYFRAMES */

@keyframes tooltips-vert {
  to {
    opacity: 0.9;
    transition: all 0.5s ease-out;
  }
}

@keyframes tooltips-horz {
  to {
    opacity: 0.9;
    transition: all 0.5s ease-out;
  }
}

/* FX All The Things */

[data-tooltip-title]:not([data-flow]):hover::before,
  [data-tooltip-title]:not([data-flow]):hover::after,
  [data-tooltip-title][data-flow^='top']:hover::before,
  [data-tooltip-title][data-flow^='top']:hover::after,
  [data-tooltip-title][data-flow^='bottom']:hover::before,
  [data-tooltip-title][data-flow^='bottom']:hover::after {
  animation: tooltips-vert 300ms ease-out forwards;
}

[data-tooltip-title][data-flow^='left']:hover::before,
  [data-tooltip-title][data-flow^='left']:hover::after,
  [data-tooltip-title][data-flow^='right']:hover::before,
  [data-tooltip-title][data-flow^='right']:hover::after {
  animation: tooltips-horz 300ms ease-out forwards;
}

.accordionItemHeading{
  margin-bottom: 0.5rem;
  width: 100%;
  cursor: pointer;
  border-radius: 0.25rem;
  padding: 0.75rem;
  font-size: calc(16px + (18 - 16) * ((100vw - 320px) / (1920 - 320)));
  line-height: 1.5;
  font-weight: 700;
  color: hsl(var(--white));
}

@media screen and (max-width:675px) {
  .common-que>div:hover .accordionItemHeading,
    .common-que>div.active .accordionItemHeading {
    display: block;
  }
}

a.block.text-center.accordionItemHeading.generate-link.overflow-hidden.group.rounded-2xl.hover\:-bg-white.drop-shadow-xl {
  animation: fadeIn .5s linear;
}

.close .accordionItemContent {
  transition: height 2s ease-in-out;
}

.best-choice .close .accordionItemContent::before {
  box-shadow: none;
  background-image: linear-gradient(to bottom, rgba(18, 19, 22, 0) 40%, rgba(18, 19, 22, 0.6) 90%);
}

.close .accordionItemContent{
  float: left;
  display: block;
  height: 0px;
  --tw-scale-y: 0;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  transition-delay: 100ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

:root.dark .close .accordionItemContent.shadow-white:before {
  background: linear-gradient(180deg, rgb(255 255 255 / 0%) 0%, #121316 100%);
}

.close .accordionItemContent:before{
  box-shadow: inset 0px -200px 100px -13px var(--dark-shadow);
  transition: all 0.3s ease;
  border-radius: 16px;
  top: 0;
  width: 100%;
  bottom: 0;
  left: 0;
  z-index: 1;
}

.close .accordionItemContent.shadow-white:before{
  border-radius: 0;
  box-shadow: none;
  background: linear-gradient(180deg, rgb(255 255 255 / 0%) 0%, #F2F3F5 100%);
}

.close .accordionItemContent.shadow-light:before{
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(68, 68, 68, 0.00) 0%, #444 100%);
}

.tab-content-wrap .close .accordionItemContent:before {
  border-radius: 0.5rem;
}

a.close .accordionItemContent.text-center.w-full.generate-link.overflow-hidden.group.rounded-2xl.hover\:-bg-white.drop-shadow-xl {
  animation: fadeIn .5s linear;
}

.best-choice .\!open .accordionItemContent::before {
  box-shadow: none;
  background-image: linear-gradient(to bottom, rgba(18, 19, 22, 0) 40%, rgba(18, 19, 22, 0.6) 90%);
}

.\!open .accordionItemContent{
  margin-bottom: 0.5rem;
  display: block;
  width: 100%;
  transform-origin: top;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
  transition-delay: 100ms;
  transition-duration: 300ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

:root.dark .\!open .accordionItemContent.shadow-white:before {
  background: linear-gradient(180deg, rgb(255 255 255 / 0%) 0%, #121316 100%);
}

.\!open .accordionItemContent:before{
  box-shadow: inset 0px -200px 100px -13px var(--dark-shadow);
  transition: all 0.3s ease;
  border-radius: 16px;
  top: 0;
  width: 100%;
  bottom: 0;
  left: 0;
  z-index: 1;
}

.\!open .accordionItemContent.shadow-white:before{
  border-radius: 0;
  box-shadow: none;
  background: linear-gradient(180deg, rgb(255 255 255 / 0%) 0%, #F2F3F5 100%);
}

.\!open .accordionItemContent.shadow-light:before{
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(68, 68, 68, 0.00) 0%, #444 100%);
}

@media screen and (max-width:675px) {
  .common-que>div:hover .\!open .accordionItemContent,
    .common-que>div.active .\!open .accordionItemContent {
    display: block;
  }
}

.tab-content-wrap .\!open .accordionItemContent:before {
  border-radius: 0.5rem;
}

a.block.text-center.\!open .accordionItemContent.generate-link.overflow-hidden.group.rounded-2xl.hover\:-bg-white.drop-shadow-xl {
  animation: fadeIn .5s linear;
}

a.\!open .accordionItemContent.text-center.w-full.generate-link.overflow-hidden.group.rounded-2xl.hover\:-bg-white.drop-shadow-xl {
  animation: fadeIn .5s linear;
}

.best-choice .open .accordionItemContent::before {
  box-shadow: none;
  background-image: linear-gradient(to bottom, rgba(18, 19, 22, 0) 40%, rgba(18, 19, 22, 0.6) 90%);
}

.open .accordionItemContent{
  margin-bottom: 0.5rem;
  display: block;
  width: 100%;
  transform-origin: top;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
  transition-delay: 100ms;
  transition-duration: 300ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

:root.dark .open .accordionItemContent.shadow-white:before {
  background: linear-gradient(180deg, rgb(255 255 255 / 0%) 0%, #121316 100%);
}

.open .accordionItemContent:before{
  box-shadow: inset 0px -200px 100px -13px var(--dark-shadow);
  transition: all 0.3s ease;
  border-radius: 16px;
  top: 0;
  width: 100%;
  bottom: 0;
  left: 0;
  z-index: 1;
}

.open .accordionItemContent.shadow-white:before{
  border-radius: 0;
  box-shadow: none;
  background: linear-gradient(180deg, rgb(255 255 255 / 0%) 0%, #F2F3F5 100%);
}

.open .accordionItemContent.shadow-light:before{
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(68, 68, 68, 0.00) 0%, #444 100%);
}

@media screen and (max-width:675px) {
  .common-que>div:hover .open .accordionItemContent,
    .common-que>div.active .open .accordionItemContent {
    display: block;
  }
}

.tab-content-wrap .open .accordionItemContent:before {
  border-radius: 0.5rem;
}

a.block.text-center.open .accordionItemContent.generate-link.overflow-hidden.group.rounded-2xl.hover\:-bg-white.drop-shadow-xl {
  animation: fadeIn .5s linear;
}

a.open .accordionItemContent.text-center.w-full.generate-link.overflow-hidden.group.rounded-2xl.hover\:-bg-white.drop-shadow-xl {
  animation: fadeIn .5s linear;
}

.\!open .accordionItemHeading{
  margin: 0px;
  border-top-right-radius: 0.25rem;
  border-top-left-radius: 0.25rem;
  border-bottom-right-radius: 0px;
  border-bottom-left-radius: 0px;
  color: hsl(var(--white));
}

.open .accordionItemHeading{
  margin: 0px;
  border-top-right-radius: 0.25rem;
  border-top-left-radius: 0.25rem;
  border-bottom-right-radius: 0px;
  border-bottom-left-radius: 0px;
  color: hsl(var(--white));
}

.accordionWrapper.flush .accordionItemHeading{
  border-radius: 0px;
  font-weight: 700;
  color: var(--title);
  background-color: transparent;
}

.accordionWrapper.flush .accordionItemContent,
            .accordionWrapper.flush .accordionItemHeading{
  border-left-width: 0px;
  border-right-width: 0px;
  border-top-width: 0px;
  border-bottom-width: 1px;
}

.accordionWrapper.default .open .accordionItemHeading{
  color: var(--title);
}

.accordionWrapper.default .\!open .accordionItemHeading{
  color: var(--title);
}

.accordionWrapper.default .accordionItem.open .collapse-icon svg{
  stroke: var(--dark);
}

.accordionWrapper.default .accordionItem.\!open .collapse-icon svg{
  stroke: var(--dark);
}

.accordionWrapper .accordionItem .collapse-icon{
  display: inline-block;
}

.accordionWrapper .accordionItem.open svg{
  stroke: hsl(var(--white));
}

.accordionWrapper .accordionItem.\!open svg{
  stroke: hsl(var(--white));
}

.accordionWrapper .accordionItem.open .collapse-icon svg{
  --tw-rotate: 180deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  stroke: hsl(var(--white));
}

.accordionWrapper .accordionItem.\!open .collapse-icon svg{
  --tw-rotate: 180deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  stroke: hsl(var(--white));
}

.accordionWrapper .accordionItem.open .collapse-icon i{
  display: inline-block;
  --tw-rotate: 180deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.accordionWrapper .accordionItem.\!open .collapse-icon i{
  display: inline-block;
  --tw-rotate: 180deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

/* faq css start */

.supportAccordion .accordionItem {
  /* @apply relative border border-bgbody rounded-[14px] py-8 px-10; */
  position: relative;
  border-radius: 14px;
  border-width: 1px;
  border-color: var(--bgbody);
}

.supportAccordion .accordionItem.open::after {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  background-image: linear-gradient(to right, var(--gre-secondary), var(--gre-primary));
  top: 0;
  opacity: 0.1;
  border-radius: 14px;
}

.supportAccordion .accordionItem.\!open::after {
  content: '' !important;
  width: 100% !important;
  height: 100% !important;
  position: absolute !important;
  background-image: linear-gradient(to right, var(--gre-secondary), var(--gre-primary)) !important;
  top: 0 !important;
  opacity: 0.1 !important;
  border-radius: 14px !important;
}

.supportAccordion .accordionItem.open{
  position: relative;
  margin-top: 1rem;
  border-radius: 14px;
}

.supportAccordion .accordionItem.open::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 2px;
  background:linear-gradient(to right, var(--gre-secondary), var(--gre-primary));
  -webkit-mask:
     linear-gradient(#fff 0 0) content-box,
     linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  content: var(--tw-content);
  border-radius: 14px;
}

.supportAccordion .accordionItem.\!open{
  position: relative;
  margin-top: 1rem;
  border-radius: 14px;
}

.supportAccordion .accordionItem.\!open::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 2px;
  background:linear-gradient(to right, var(--gre-secondary), var(--gre-primary));
  -webkit-mask:
     linear-gradient(#fff 0 0) content-box,
     linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  content: var(--tw-content);
  border-radius: 14px;
}

.supportAccordion .accordionItem .collapse-icon{
  display: inline-block;
}

.supportAccordion .accordionItem.open .collapse-icon{
  display: flex !important;
  height: 50px;
  width: 50px;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background-color: var(--primary);
  padding: 0.5rem;
  font-size: calc(16px + (16 - 16) * ((100vw - 320px) / (1920 - 320)));
  line-height: 1.35;
}

.supportAccordion .accordionItem.\!open .collapse-icon{
  display: flex !important;
  height: 50px;
  width: 50px;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background-color: var(--primary);
  padding: 0.5rem;
  font-size: calc(16px + (16 - 16) * ((100vw - 320px) / (1920 - 320)));
  line-height: 1.35;
}

.supportAccordion .accordionItem.open .collapse-icon i{
  display: inline-block;
  --tw-rotate: 90deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  color: hsl(var(--white));
}

.supportAccordion .accordionItem.\!open .collapse-icon i{
  display: inline-block;
  --tw-rotate: 90deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  color: hsl(var(--white));
}

.supportAccordion .accordionItem.close .collapse-icon{
  display: flex !important;
  height: 50px;
  width: 50px;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background-color: hsl(var(--white));
  padding: 0.5rem;
  font-size: calc(16px + (16 - 16) * ((100vw - 320px) / (1920 - 320)));
  line-height: 1.35;
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.dark .basicSlider .supportAccordion .accordionItem.close .collapse-icon,
.dark .basicSlider .supportAccordion .accordionItem.close .collapse-icon {
  background-color: hsl(var(--black));
  color: hsl(var(--white));
}

.supportAccordion .accordionItem.close .collapse-icon i{
  display: inline-block;
  --tw-rotate: 0deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  color: var(--primary);
}

.supportAccordion .accordionItem.close{
  margin-top: 1rem;
}

/* faq css end */

/* divider css start */

.divider{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

@media (max-width: 767px) {
  .swap-out>.divider {
    justify-content: center;
  }
}

@media (max-width: 640px) {
  .common.divider.right-side-bottom-bar-btns {
    gap: 5px;
    padding-left: 0;
  }
}

.divider::before{
  --tw-content: '';
  content: var(--tw-content);
}

.divider::after{
  --tw-content: '';
  content: var(--tw-content);
}

.divider:before,
        .divider:after{
  height: 1px;
  width: 100%;
  background-color: hsl(var(--static-black));
}

@media screen and (max-width:675px) {
  .common-que>div:hover .divider:before,
    .common-que>div.active .divider:before,.common-que>div:hover 
        .divider:after,
    .common-que>div.active 
        .divider:after {
    display: block;
  }
}

a.block.text-center.divider.generate-link.overflow-hidden.group.rounded-2xl.hover\:-bg-white.drop-shadow-xl:before,a.block.text-center
        .divider.generate-link.overflow-hidden.group.rounded-2xl.hover\:-bg-white.drop-shadow-xl:after {
  animation: fadeIn .5s linear;
}

/* login modal divider override */

#login-modal .divider:before,
        #login-modal .divider:after{
  background-color: hsl(var(--static-white));
}

/* signup modal divider override */

#signup-modal .divider:before,
        #signup-modal .divider:after{
  background-color: hsl(var(--static-white));
}

.swiper{
  position: relative;
  z-index: 1;
  margin-left: auto;
  margin-right: auto;
  list-style-type: none;
  overflow: hidden;
  padding: 0px;
}

a.block.text-center.w-full.generate-link.swiper.group.rounded-2xl.hover\:-bg-white.drop-shadow-xl {
  animation: fadeIn .5s linear;
}

[dir='rtl'] .swiper {
  direction: ltr;
}

.swiper .swiper-wrapper{
  position: relative;
  z-index: 1;
  box-sizing: content-box;
  display: flex;
  height: 100%;
  width: 100%;
  flex: none;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

@media screen and (max-width:675px) {
  .common-que>div:hover .swiper .swiper-wrapper,
    .common-que>div.active .swiper .swiper-wrapper {
    display: block;
  }
}

@media (max-width: 767px) {
  .swap-out>.swiper .swiper-wrapper {
    justify-content: center;
  }
}

@media (max-width: 640px) {
  .common.swiper .swiper-wrapper.right-side-bottom-bar-btns {
    gap: 5px;
    padding-left: 0;
  }
}

a.block.text-center.swiper .swiper-wrapper.generate-link.overflow-hidden.group.rounded-2xl.hover\:-bg-white.drop-shadow-xl {
  animation: fadeIn .5s linear;
}

.swiper .swiper-wrapper .swiper-slide{
  position: relative;
  height: 100%;
  flex-shrink: 0;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

@media (max-width: 767px) {
  /* Community CTA button - smaller on mobile */

  /* Community CTA container - move up on mobile to avoid overlapping text/tags */

  /* Bot profile picture - smaller on mobile */

  /* Adjust bottom padding for mobile safe area */

  .video-feed-item .swiper.forYouSlider .swiper-button-next.bottom-0,.video-feed-item 
            .swiper.forYouSlider .swiper-button-prev.bottom-0 {
    padding-bottom: max(1.25rem, env(safe-area-inset-bottom));
  }
}

@media (prefers-contrast: high) {
  .video-feed-item .swiper.forYouSlider .swiper-button-next.bottom-0,.video-feed-item 
            .swiper.forYouSlider .swiper-button-prev.bottom-0 {
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 1) 0%,
        rgba(0, 0, 0, 0.9) 40%,
        rgba(0, 0, 0, 0.5) 70%,
        transparent 100%
      );
  }
}

@media (max-width: 767px) and (orientation: landscape) {
  .video-feed-item .swiper.forYouSlider .swiper-button-next.bottom-0,.video-feed-item 
            .swiper.forYouSlider .swiper-button-prev.bottom-0 {
    padding: 1rem 1.5rem 1rem;
  }

  /* Community CTA button - no size override in landscape */
}

.video-feed-locked-card .swiper.forYouSlider .swiper-button-next.h-20,.video-feed-locked-card 
            .swiper.forYouSlider .swiper-button-prev.h-20 {
  animation: lockPulse 2s ease-in-out infinite;
}

.video-feed-locked-card .w-20.swiper.forYouSlider .swiper-button-next,.video-feed-locked-card .w-20
            .swiper.forYouSlider .swiper-button-prev {
  animation: lockPulse 2s ease-in-out infinite;
}

@media (max-width: 767px) {
  .video-feed-locked-card .swiper.forYouSlider .swiper-button-next.h-20,.video-feed-locked-card 
            .swiper.forYouSlider .swiper-button-prev.h-20 {
    width: 4rem;
    height: 4rem;
  }

  /* Home button on locked card - mobile positioning */

  .video-feed-locked-card .w-20.swiper.forYouSlider .swiper-button-next,.video-feed-locked-card .w-20
            .swiper.forYouSlider .swiper-button-prev {
    width: 4rem;
    height: 4rem;
  }

  /* Home button on locked card - mobile positioning */
}

@media (prefers-reduced-motion: reduce) {
  .video-feed-locked-card .swiper.forYouSlider .swiper-button-next.h-20,.video-feed-locked-card 
            .swiper.forYouSlider .swiper-button-prev.h-20 {
    animation: none;
  }

  .video-feed-locked-card .w-20.swiper.forYouSlider .swiper-button-next,.video-feed-locked-card .w-20
            .swiper.forYouSlider .swiper-button-prev {
    animation: none;
  }
}

.swiper.forYouSlider .swiper-button-next,
            .swiper.forYouSlider .swiper-button-prev{
  position: absolute;
  top: 50%;
  z-index: 10;
  display: flex;
  height: 5rem;
  width: 5rem;
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  cursor: pointer;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background-color: hsl(var(--white));
  --tw-bg-opacity: 1;
}

.dark .basicSlider .swiper.forYouSlider .swiper-button-next,
.dark .basicSlider .swiper.forYouSlider .swiper-button-next,.dark .basicSlider 
            .swiper.forYouSlider .swiper-button-prev,
.dark .basicSlider 
            .swiper.forYouSlider .swiper-button-prev {
  background-color: hsl(var(--black));
  color: hsl(var(--white));
}

@media (max-width: 767px) {
  .swap-out>.swiper.forYouSlider .swiper-button-next,.swap-out>
            .swiper.forYouSlider .swiper-button-prev {
    justify-content: center;
  }
}

@media (max-width: 640px) {
  .common.swiper.forYouSlider .swiper-button-next.right-side-bottom-bar-btns,.common
            .swiper.forYouSlider .swiper-button-prev.right-side-bottom-bar-btns {
    gap: 5px;
    padding-left: 0;
  }
}

@media (max-width: 675px){
  .swiper.forYouSlider .swiper-button-next,
            .swiper.forYouSlider .swiper-button-prev{
    height: 4rem;
    width: 4rem;
  }
}

.swiper.forYouSlider .swiper-button-next.swiper-button-disabled, .swiper.forYouSlider .swiper-button-prev.swiper-button-disabled{
  pointer-events: none;
  cursor: auto;
  opacity: 0.35;
}

.swiper.forYouSlider .swiper-button-prev{
  left: 0.75rem;
  right: 0px;
}

.swiper.forYouSlider .swiper-button-next{
  right: 0.75rem;
  left: unset;
}

/* Hide Swiper's auto-generated SVG icons, use custom icon font instead */

.category-divider.swiper.gallerySlider .swiper-button-next svg,.category-divider .swiper.gallerySlider .swiper-button-prev svg {
  display: none;
}

.tag-filter.swiper.gallerySlider .swiper-button-next svg,.tag-filter .swiper.gallerySlider .swiper-button-prev svg {
  display: none;
}

.home-tags-arrow.swiper.gallerySlider .swiper-button-next svg,.home-tags-arrow .swiper.gallerySlider .swiper-button-prev svg {
  display: none;
}

.ch2-section--custom-add.swiper.gallerySlider .swiper-button-next svg,.ch2-section--custom-add .swiper.gallerySlider .swiper-button-prev svg {
  display: none;
}

.ch2-advanced__panel.swiper.gallerySlider .swiper-button-next svg,.ch2-advanced__panel .swiper.gallerySlider .swiper-button-prev svg {
  display: none;
}

.swiper.gallerySlider .swiper-button-next svg, .swiper.gallerySlider .swiper-button-prev svg{
  display: none;
}

.gi-helper-preset.swiper.gallerySlider .swiper-button-next svg,.gi-helper-preset .swiper.gallerySlider .swiper-button-prev svg {
  display: none;
}

.vip-price-toggle.swiper.gallerySlider .swiper-button-next svg,.vip-price-toggle .swiper.gallerySlider .swiper-button-prev svg {
  opacity: 0;
  pointer-events: none;
}

.promo-code-button-content.swiper.gallerySlider .swiper-button-next svg,.promo-code-button-content .swiper.gallerySlider .swiper-button-prev svg {
  display: none;
}

.promo-code-input-container.swiper.gallerySlider .swiper-button-next svg,.promo-code-input-container .swiper.gallerySlider .swiper-button-prev svg {
  display: none;
}

.promo-code-apply-link.swiper.gallerySlider .swiper-button-next svg,.promo-code-apply-link .swiper.gallerySlider .swiper-button-prev svg {
  display: none;
}

.gv-toggle-meta.swiper.gallerySlider .swiper-button-next svg,.gv-toggle-meta .swiper.gallerySlider .swiper-button-prev svg {
  display: none;
}

.swiper .swiper-pagination{
  left: 50%;
  --tw-translate-x: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  white-space: nowrap;
  text-align: center;
  font-size: calc(16px + (16 - 16) * ((100vw - 320px) / (1920 - 320)));
  line-height: 1.35;
  font-weight: 600;
  color: var(--primary);
}

a.block.swiper .swiper-pagination.w-full.generate-link.overflow-hidden.group.rounded-2xl.hover\:-bg-white.drop-shadow-xl {
  animation: fadeIn .5s linear;
}

.swiper .swiper-pagination.fraction-custom .swiper-pagination-bullet{
  margin-left: 0.25rem;
  margin-right: 0.25rem;
  margin-top: 0px;
  margin-bottom: 0px;
  display: inline-flex;
  height: 1.25rem;
  width: 1.25rem;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  border-width: 1px;
  border-color: var(--secondary);
  --tw-bg-opacity: 1;
  font-size: calc(16px + (16 - 16) * ((100vw - 320px) / (1920 - 320)));
  line-height: 1;
  color: var(--secondary);
  opacity: 0.6;
  background-color: transparent;
}

.swiper .swiper-pagination.fraction-custom .swiper-pagination-bullet.swiper-pagination-bullet-active{
  background-color: var(--secondary);
  color: hsl(var(--white));
  opacity: 1;
}

.swiper.sliderPagination .swiper-pagination, .swiper.sliderLazyLoading .swiper-pagination{
  left: 50%;
  --tw-translate-x: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  white-space: nowrap;
  text-align: center;
  font-size: calc(16px + (16 - 16) * ((100vw - 320px) / (1920 - 320)));
  line-height: 1.35;
  font-weight: 600;
  color: var(--primary);
}

a.block.swiper.sliderPagination .swiper-pagination.w-full.generate-link.overflow-hidden.group.rounded-2xl.hover\:-bg-white.drop-shadow-xl,a.block .swiper.sliderLazyLoading .swiper-pagination.w-full.generate-link.overflow-hidden.group.rounded-2xl.hover\:-bg-white.drop-shadow-xl {
  animation: fadeIn .5s linear;
}

.swiper.sliderPagination .swiper-pagination .swiper-pagination-bullet, .swiper.sliderLazyLoading .swiper-pagination .swiper-pagination-bullet{
  margin-top: 0px;
  margin-bottom: 0px;
  margin-left: 0.25rem;
  margin-right: 0.25rem;
  display: inline-block;
  height: 0.5rem;
  width: 0.5rem;
  cursor: auto;
  border-radius: 9999px;
  background-color: var(--primary);
  opacity: 0.2;
}

.swiper.sliderPagination .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active, .swiper.sliderLazyLoading .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active{
  background-color: var(--primary);
  opacity: 1;
}

.swiper.sliderThumbnail{
  margin-top: 10px;
}

.swiper.sliderLazyLoading .swiper-pagination .swiper-pagination-bullet{
  cursor: pointer;
}

@media (max-width: 575px){
  .mood-selector-modal .modal-header{
    padding-top: 0.5rem !important;
  }
}

@media (max-width: 991px){
  .landing-page-seo-header{
    text-align: center;
  }

  .landing-page-seo-header h1 {
    font-size: 36px;
    line-height: 1.35;
  }
}

.hero-wrapper.bg-img-large {
  background-image: url('/static/images/landing-page-seo/landing-page-bg-large.png');
}

.hero-wrapper.bg-img-tablet {
  background-image: url('/static/images/landing-page-seo/landing-page-bg-tablet.png');
}

@media (max-width: 575px){
  .hero-wrapper .image-wrapper{
    max-height: 16rem;
  }
}

/* Dark theme hero wrapper for Nexorie template */

.hero-wrapper-dark {
  background-image: url('/static/images/landing-page-seo/landing-page-bg-large.png');
  background-color: transparent;
}

@media (max-width: 575px){
  .hero-wrapper-dark .image-wrapper{
    max-height: 16rem;
  }
}

@media (max-width: 991px) {
  .hero-wrapper-dark {
    background-image: url('/static/images/landing-page-seo/landing-page-bg-tablet.png');
  }
}

.background-image-ff {
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 70%, rgba(0, 0, 0, 0));
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 70%, rgba(0, 0, 0, 0));
}

.background-image-ff.bg-img-large {
  background-image: url('/static/images/landing-page-seo/landing-section-bg-large1.png');
}

.background-image-ff.bg-img-tablet {
  background-image: url('/static/images/landing-page-seo/landing-section-bg-tablet.png');
}

.landing-section-wrapper .feature-box {
  box-shadow: 2px 2px 4px 0 rgba(136, 136, 136, 0.15);
}

.feature-box.active{
  background-color: var(--dark);
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
}

.feature-box.active h3{
  color: hsl(var(--white));
}

.feature-box.active p{
  color: hsl(var(--white));
}

.best-choice .block::before {
  box-shadow: none;
  background-image: linear-gradient(to bottom, rgba(18, 19, 22, 0) 40%, rgba(18, 19, 22, 0.6) 90%);
}

.best-choice .\!block::before {
  box-shadow: none !important;
  background-image: linear-gradient(to bottom, rgba(18, 19, 22, 0) 40%, rgba(18, 19, 22, 0.6) 90%) !important;
}

.best-choice {
  background-image: linear-gradient(290deg, #FFFFFF 0%, rgba(254, 236, 239, 0.78) 78%);
}

.how-it-works {
  background-image: linear-gradient(249deg, #FFFFFF 0%, rgba(254, 236, 239, 0.78) 78%);
}

.how-it-works .process-box {
  border: 1px solid #e7e8eb;
}

.faqs-section {
  border: 0px solid #e7e8eb;
}

.faqs-section .accordionItem{
  margin-top: 0px !important;
}

@media (max-width: 991px){
  .faqs-section .accordionItem{
    margin-top: 0.75rem !important;
  }
}

.faqs-section .accordionItem .collapse-icon{
  min-height: 50px;
  min-width: 50px;
}

.breadcrumb-nav{
  font-size: 14px;
  font-weight: 300;
  color: var(--bodytext);
}

.breadcrumb-nav a,
    .breadcrumb-nav span{
  font-size: 14px;
  font-weight: 300;
}

/* =====================
       Nexorie-Style Gradients (Dark Black Theme)
       ===================== */

.nexorie-gradient-1 {
  background: linear-gradient(180deg, #0A0A0A 0%, #1A1A1A 100%);
}

.nexorie-gradient-2 {
  background: linear-gradient(180deg, #1A1A1A 0%, #0F0F0F 100%);
}

.nexorie-gradient-3 {
  background: linear-gradient(180deg, #0F0F0F 0%, #1E1E1E 100%);
}

.nexorie-gradient-4 {
  background: linear-gradient(180deg, #000000, #d3c5c7);
}

.section-overlap {
  margin-top: -100px;
  padding-top: 100px;
}

.section-rounded-bottom{
  border-bottom-right-radius: 30px;
  border-bottom-left-radius: 30px;
}

@media (max-width: 991px){
  .section-rounded-bottom{
    border-bottom-right-radius: 70px;
    border-bottom-left-radius: 70px;
  }
}

.text-steel-light {
  color: #D8DAE5;
}

/* =====================
       Advantage Card (Glassmorphism)
       ===================== */

/* =====================
       Bento Grid Layout
       ===================== */

.bento-grid{
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

@media (max-width: 767px) {
  .swap-out>.bento-grid {
    justify-content: center;
  }
}

@media (max-width: 640px) {
  .common.bento-grid.right-side-bottom-bar-btns {
    gap: 5px;
    padding-left: 0;
  }
}

.bento-card{
  border-radius: 1.5rem;
  padding: 1.5rem;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
}

.dark .choose-item .bento-card {
  filter: brightness(0) invert(1);
}

.bento-card:hover {
  transform: translateY(-4px);
}

/* Large featured card - spans full height on left */

.bento-card-large {
  min-height: 450px;
  width: 400px;
  flex-shrink: 0;
  padding: 0px;
}

@media (max-width: 991px){
  .bento-card-large{
    min-height: 350px;
    width: 100%;
  }
}

/* Beige/cream background cards */

.bento-card-beige {
  background-color: #d2c4c6;
  min-height: 180px;
}

/* Light/white background cards */

/* Image background cards */

.bento-card-image {
  min-height: 180px;
  min-width: 200px;
  padding: 0px;
}

@media (max-width: 991px){
  .bento-card-image{
    min-width: 100%;
  }
}

/* Dark gradient cards */

.bento-card.gradient-dark {
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f0f23 100%);
  min-height: 180px;
}

/* Badge styling */

/* =====================
       Image Placeholder (for dev)
       ===================== */

/* =====================
       Floating Glass Header
       ===================== */

.floating-header{
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
}

.dark .choose-item .floating-header {
  filter: brightness(0) invert(1);
}

.floating-header:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.3);
}

/* =====================
       CMS Header Card Section (Figma Design)
       ===================== */

/* =====================
       Carousel Styles
       ===================== */

.carousel-nav-btn.prev{
  left: 1rem;
}

.carousel-nav-btn.next{
  right: 1rem;
}

.carousel-dot.active{
  width: 1.5rem;
  background-color: var(--primary);
}

/* =====================
       Card Carousel with Side Previews
       ===================== */

.card-carousel-container{
  position: relative;
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
}

@media screen and (max-width:675px) {
  .common-que>div:hover .card-carousel-container,
    .common-que>div.active .card-carousel-container {
    display: block;
  }
}

@media (max-width: 767px) {
  .swap-out>.card-carousel-container {
    justify-content: center;
  }
}

@media (max-width: 640px) {
  .common.card-carousel-container.right-side-bottom-bar-btns {
    gap: 5px;
    padding-left: 0;
  }
}

a.block.text-center.card-carousel-container.generate-link.overflow-hidden.group.rounded-2xl.hover\:-bg-white.drop-shadow-xl {
  animation: fadeIn .5s linear;
}

.card-carousel-container {
  min-height: 580px;
}

.card-carousel-track{
  position: relative;
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
}

@media screen and (max-width:675px) {
  .common-que>div:hover .card-carousel-track,
    .common-que>div.active .card-carousel-track {
    display: block;
  }
}

@media (max-width: 767px) {
  .swap-out>.card-carousel-track {
    justify-content: center;
  }
}

@media (max-width: 640px) {
  .common.card-carousel-track.right-side-bottom-bar-btns {
    gap: 5px;
    padding-left: 0;
  }
}

a.block.text-center.card-carousel-track.generate-link.overflow-hidden.group.rounded-2xl.hover\:-bg-white.drop-shadow-xl {
  animation: fadeIn .5s linear;
}

.card-carousel-track {
  height: 550px;
  cursor: grab;
}

.card-carousel-track:active {
  cursor: grabbing;
}

/* Navigation Arrows */

@media (max-width: 767px) {
  /* Community CTA button - smaller on mobile */

  /* Community CTA container - move up on mobile to avoid overlapping text/tags */

  /* Bot profile picture - smaller on mobile */

  /* Adjust bottom padding for mobile safe area */

  .video-feed-item .carousel-arrow.bottom-0 {
    padding-bottom: max(1.25rem, env(safe-area-inset-bottom));
  }
}

@media (prefers-contrast: high) {
  .video-feed-item .carousel-arrow.bottom-0 {
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 1) 0%,
        rgba(0, 0, 0, 0.9) 40%,
        rgba(0, 0, 0, 0.5) 70%,
        transparent 100%
      );
  }
}

@media (max-width: 767px) and (orientation: landscape) {
  .video-feed-item .carousel-arrow.bottom-0 {
    padding: 1rem 1.5rem 1rem;
  }

  /* Community CTA button - no size override in landscape */
}

.carousel-arrow{
  position: absolute;
  z-index: 20;
  display: flex;
  height: 3.5rem;
  width: 3.5rem;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  color: hsl(var(--static-black));
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

.dark .choose-item .carousel-arrow {
  filter: brightness(0) invert(1);
}

@media (max-width: 767px) {
  .swap-out>.carousel-arrow {
    justify-content: center;
  }
}

@media (max-width: 640px) {
  .common.carousel-arrow.right-side-bottom-bar-btns {
    gap: 5px;
    padding-left: 0;
  }
}

.carousel-arrow {
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  top: 50%;
  transform: translateY(-50%);
}

.carousel-arrow:hover {
  transform: translateY(-50%) scale(1.1);
  background: white;
}

.carousel-arrow:active {
  transform: translateY(-50%) scale(0.95);
}

.carousel-arrow-left {
  left: 20px;
}

.carousel-arrow-right {
  right: 20px;
}

/* Carousel Cards */

@media (max-width: 767px) {
  /* Community CTA button - smaller on mobile */

  /* Community CTA container - move up on mobile to avoid overlapping text/tags */

  /* Bot profile picture - smaller on mobile */

  /* Adjust bottom padding for mobile safe area */

  .video-feed-item .carousel-card.bottom-0 {
    padding-bottom: max(1.25rem, env(safe-area-inset-bottom));
  }
}

@media (prefers-contrast: high) {
  .video-feed-item .carousel-card.bottom-0 {
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 1) 0%,
        rgba(0, 0, 0, 0.9) 40%,
        rgba(0, 0, 0, 0.5) 70%,
        transparent 100%
      );
  }
}

@media (max-width: 767px) and (orientation: landscape) {
  .video-feed-item .carousel-card.bottom-0 {
    padding: 1rem 1.5rem 1rem;
  }

  /* Community CTA button - no size override in landscape */
}

.carousel-card{
  position: absolute;
  overflow: hidden;
  border-radius: 1rem;
}

a.block.text-center.w-full.generate-link.overflow-hidden.group.carousel-card.hover\:-bg-white.drop-shadow-xl {
  animation: fadeIn .5s linear;
}

a.block.text-center.w-full.generate-link.carousel-card.group.rounded-2xl.hover\:-bg-white.drop-shadow-xl {
  animation: fadeIn .5s linear;
}

.carousel-card {
  width: 300px;
  height: 500px;
  will-change: transform, opacity;
  -moz-user-select: none;
       user-select: none;
  -webkit-user-select: none;
}

.carousel-card-inner{
  position: relative;
  height: 100%;
  width: 100%;
}

@media screen and (max-width:675px) {
  .common-que>div:hover .carousel-card-inner,
    .common-que>div.active .carousel-card-inner {
    display: block;
  }
}

a.block.text-center.carousel-card-inner.generate-link.overflow-hidden.group.rounded-2xl.hover\:-bg-white.drop-shadow-xl {
  animation: fadeIn .5s linear;
}

.carousel-card-image{
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: top;
     object-position: top;
}

@media screen and (max-width:675px) {
  .common-que>div:hover .carousel-card-image,
    .common-que>div.active .carousel-card-image {
    display: block;
  }
}

a.block.text-center.carousel-card-image.generate-link.overflow-hidden.group.rounded-2xl.hover\:-bg-white.drop-shadow-xl {
  animation: fadeIn .5s linear;
}

.carousel-card-image {
  pointer-events: none;
}

@media (max-width: 767px) {
  /* Community CTA button - smaller on mobile */

  /* Community CTA container - move up on mobile to avoid overlapping text/tags */

  /* Bot profile picture - smaller on mobile */

  /* Adjust bottom padding for mobile safe area */

  .video-feed-item .carousel-card-overlay.bottom-0 {
    padding-bottom: max(1.25rem, env(safe-area-inset-bottom));
  }
}

@media (prefers-contrast: high) {
  .video-feed-item .carousel-card-overlay.bottom-0 {
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 1) 0%,
        rgba(0, 0, 0, 0.9) 40%,
        rgba(0, 0, 0, 0.5) 70%,
        transparent 100%
      );
  }
}

@media (max-width: 767px) and (orientation: landscape) {
  .video-feed-item .carousel-card-overlay.bottom-0 {
    padding: 1rem 1.5rem 1rem;
  }

  /* Community CTA button - no size override in landscape */
}

.carousel-card-overlay{
  position: absolute;
  inset: 0px;
  background: linear-gradient(180deg, transparent 60%, rgba(0, 0, 0, 0.85) 100%);
  pointer-events: none;
}

/* Card Info */

@media (max-width: 767px) {
  /* Community CTA button - smaller on mobile */

  /* Community CTA container - move up on mobile to avoid overlapping text/tags */

  /* Bot profile picture - smaller on mobile */

  /* Adjust bottom padding for mobile safe area */

  .video-feed-item .carousel-card-info.bottom-0 {
    padding-bottom: max(1.25rem, env(safe-area-inset-bottom));
  }

  /* Community CTA button - smaller on mobile */

  /* Community CTA container - move up on mobile to avoid overlapping text/tags */

  /* Bot profile picture - smaller on mobile */

  /* Adjust bottom padding for mobile safe area */

  .video-feed-item .absolute.carousel-card-info {
    padding-bottom: max(1.25rem, env(safe-area-inset-bottom));
  }
}

@media (prefers-contrast: high) {
  .video-feed-item .carousel-card-info.bottom-0 {
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 1) 0%,
        rgba(0, 0, 0, 0.9) 40%,
        rgba(0, 0, 0, 0.5) 70%,
        transparent 100%
      );
  }

  .video-feed-item .absolute.carousel-card-info {
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 1) 0%,
        rgba(0, 0, 0, 0.9) 40%,
        rgba(0, 0, 0, 0.5) 70%,
        transparent 100%
      );
  }
}

@media (max-width: 767px) and (orientation: landscape) {
  .video-feed-item .carousel-card-info.bottom-0 {
    padding: 1rem 1.5rem 1rem;
  }

  /* Community CTA button - no size override in landscape */

  .video-feed-item .absolute.carousel-card-info {
    padding: 1rem 1.5rem 1rem;
  }

  /* Community CTA button - no size override in landscape */
}

.carousel-card-info{
  position: absolute;
  bottom: 0px;
  left: 0px;
  right: 0px;
  padding: 1.25rem;
  text-align: center;
}

a.block.carousel-card-info.w-full.generate-link.overflow-hidden.group.rounded-2xl.hover\:-bg-white.drop-shadow-xl {
  animation: fadeIn .5s linear;
}

.carousel-card-name{
  margin-bottom: 0.75rem;
  font-size: calc(28px + (36 - 28) * ((100vw - 320px) / (1920 - 320)));
  line-height: 1.35;
  font-weight: 600;
  color: hsl(var(--static-white));
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.carousel-card-btn{
  display: inline-block;
  border-radius: 0.5rem;
  padding-left: 2rem;
  padding-right: 2rem;
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
  font-size: calc(16px + (18 - 16) * ((100vw - 320px) / (1920 - 320)));
  line-height: 1.5;
  font-weight: 500;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.dark .choose-item .carousel-card-btn {
  filter: brightness(0) invert(1);
}

.carousel-card-btn {
  background: rgba(255, 255, 255, 0.95);
  color: #1a1a1a;
}

.carousel-card-btn:hover {
  background: white;
  transform: scale(1.05);
}

/* Side cards - blur and dim effect */

.carousel-card.prev,
    .carousel-card.next {
  filter: blur(2px);
  pointer-events: auto;
  cursor: pointer;
}

.carousel-card.prev::after,
    .carousel-card.next::after {
  content: '';
}

@media (max-width: 767px) {
  /* Community CTA button - smaller on mobile */

  /* Community CTA container - move up on mobile to avoid overlapping text/tags */

  /* Bot profile picture - smaller on mobile */

  /* Adjust bottom padding for mobile safe area */

  .video-feed-item .carousel-card.prev.bottom-0::after,.video-feed-item 
    .carousel-card.next.bottom-0::after {
    padding-bottom: max(1.25rem, env(safe-area-inset-bottom));
  }
}

@media (prefers-contrast: high) {
  .video-feed-item .carousel-card.prev.bottom-0::after,.video-feed-item 
    .carousel-card.next.bottom-0::after {
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 1) 0%,
        rgba(0, 0, 0, 0.9) 40%,
        rgba(0, 0, 0, 0.5) 70%,
        transparent 100%
      );
  }
}

@media (max-width: 767px) and (orientation: landscape) {
  .video-feed-item .carousel-card.prev.bottom-0::after,.video-feed-item 
    .carousel-card.next.bottom-0::after {
    padding: 1rem 1.5rem 1rem;
  }

  /* Community CTA button - no size override in landscape */
}

.carousel-card.prev::after,
    .carousel-card.next::after{
  position: absolute;
  inset: 0px;
  background: rgba(0, 0, 0, 0.3);
  pointer-events: none;
}

.carousel-card.prev:hover,
    .carousel-card.next:hover {
  filter: blur(1px);
}

.carousel-card.prev:hover::after,
    .carousel-card.next:hover::after {
  background: rgba(0, 0, 0, 0.15);
}

/* Active card - clear and prominent */

.carousel-card.active {
  filter: none;
  cursor: default;
}

.carousel-card.active::after {
  display: none;
}

/* Far cards - hidden */

.carousel-card.far-prev,
    .carousel-card.far-next {
  pointer-events: none;
}

/* Action Buttons (X and Heart) */

.carousel-action-btn{
  display: flex;
  height: 4rem;
  width: 4rem;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

.dark .choose-item .carousel-action-btn {
  filter: brightness(0) invert(1);
}

@media (max-width: 767px) {
  .swap-out>.carousel-action-btn {
    justify-content: center;
  }
}

@media (max-width: 640px) {
  .common.carousel-action-btn.right-side-bottom-bar-btns {
    gap: 5px;
    padding-left: 0;
  }
}

.carousel-action-btn {
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.carousel-action-btn:hover {
  transform: scale(1.15);
}

.carousel-action-btn:active {
  transform: scale(0.95);
}

.carousel-action-nope {
  background: rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  border: 2px solid rgba(239, 68, 68, 0.5);
  color: #ef4444;
}

.carousel-action-nope:hover {
  background: rgba(239, 68, 68, 0.2);
  border-color: #ef4444;
}

.carousel-action-like {
  background: rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  border: 2px solid rgba(34, 197, 94, 0.5);
  color: #22c55e;
}

.carousel-action-like:hover {
  background: rgba(34, 197, 94, 0.2);
  border-color: #22c55e;
}

/* Responsive adjustments */

@media (max-width: 991px) {
  .card-carousel-container {
    min-height: 520px;
  }

  .card-carousel-track {
    height: 480px;
  }

  .carousel-card {
    width: 260px;
    height: 430px;
  }

  .carousel-arrow{
    height: 3rem;
    width: 3rem;
  }

  .carousel-arrow-left {
    left: 10px;
  }

  .carousel-arrow-right {
    right: 10px;
  }

  .carousel-card-name{
    font-size: calc(32px + (32 - 32) * ((100vw - 320px) / (1920 - 320)));
    line-height: 1.35;
  }

  .carousel-card-btn{
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    font-size: calc(16px + (18 - 16) * ((100vw - 320px) / (1920 - 320)));
    line-height: 1.5;
  }

  .chat-main.active .tabs .carousel-card-btn {
    padding: 0 10px;
  }
}

@media (max-width: 640px) {
  .card-carousel-container {
    min-height: 480px;
  }

  .card-carousel-track {
    height: 440px;
  }

  .carousel-card {
    width: 240px;
    height: 400px;
  }

  @media (max-width: 767px) {
    .video-feed-locked-card .carousel-arrow.h-10 {
      width: 2rem;
      height: 2rem;
    }

    /* Home button on locked card - mobile positioning */

    .video-feed-locked-card .w-10.carousel-arrow {
      width: 2rem;
      height: 2rem;
    }

    /* Home button on locked card - mobile positioning */
  }

  .carousel-arrow{
    height: 2.5rem;
    width: 2.5rem;
  }

  .carousel-arrow-left {
    left: 5px;
  }

  .carousel-arrow-right {
    right: 5px;
  }

  /* Hide side cards on small screens */

  .carousel-card.prev,
        .carousel-card.next {
    opacity: 0.3;
  }
}

/* =====================
       Floating Glass Content Card
       ===================== */

.glass-content-card{
  border-radius: 1.5rem;
  padding: 2.5rem;
}

@media (max-width: 991px){
  .glass-content-card{
    padding: 2rem;
  }
}

@media (max-width: 575px){
  .glass-content-card{
    padding: 1.5rem;
  }
}

.glass-content-card {
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow:
            0 8px 32px rgba(0, 0, 0, 0.3),
            inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.glass-content-card:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.18);
}

/* =====================
       Feature Card Glass Overlay (Best Choice Section)
       ===================== */

@media (max-width: 767px) {
  /* Community CTA button - smaller on mobile */

  /* Community CTA container - move up on mobile to avoid overlapping text/tags */

  /* Bot profile picture - smaller on mobile */

  /* Adjust bottom padding for mobile safe area */

  .video-feed-item .feature-glass-card .feature-glass-overlay.bottom-0 {
    padding-bottom: max(1.25rem, env(safe-area-inset-bottom));
  }

  /* Community CTA button - smaller on mobile */

  /* Community CTA container - move up on mobile to avoid overlapping text/tags */

  /* Bot profile picture - smaller on mobile */

  /* Adjust bottom padding for mobile safe area */

  .video-feed-item .absolute.feature-glass-card .feature-glass-overlay {
    padding-bottom: max(1.25rem, env(safe-area-inset-bottom));
  }
}

@media (prefers-contrast: high) {
  .video-feed-item .feature-glass-card .feature-glass-overlay.bottom-0 {
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 1) 0%,
        rgba(0, 0, 0, 0.9) 40%,
        rgba(0, 0, 0, 0.5) 70%,
        transparent 100%
      );
  }

  .video-feed-item .absolute.feature-glass-card .feature-glass-overlay {
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 1) 0%,
        rgba(0, 0, 0, 0.9) 40%,
        rgba(0, 0, 0, 0.5) 70%,
        transparent 100%
      );
  }
}

@media (max-width: 767px) and (orientation: landscape) {
  .video-feed-item .feature-glass-card .feature-glass-overlay.bottom-0 {
    padding: 1rem 1.5rem 1rem;
  }

  /* Community CTA button - no size override in landscape */

  .video-feed-item .absolute.feature-glass-card .feature-glass-overlay {
    padding: 1rem 1.5rem 1rem;
  }

  /* Community CTA button - no size override in landscape */
}

.feature-glass-card .feature-glass-overlay{
  position: absolute;
  bottom: 0px;
  left: 0px;
  right: 0px;
  overflow: hidden;
  border-bottom-right-radius: 1.5rem;
  border-bottom-left-radius: 1.5rem;
  padding: 1.5rem;
}

a.block.text-center.w-full.generate-link.feature-glass-card .feature-glass-overlay.group.rounded-2xl.hover\:-bg-white.drop-shadow-xl {
  animation: fadeIn .5s linear;
}

.feature-glass-card .feature-glass-overlay {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  height: 160px;
  transition: height 0.4s ease-out;
  z-index: 5;
}

.feature-glass-card:hover .feature-glass-overlay {
  height: auto;
  max-height: 80%;
}

.feature-glass-card .feature-glass-overlay h3{
  margin-bottom: 0.5rem;
  font-weight: 600;
  line-height: 1.25;
  color: hsl(var(--static-white));
  font-size: 22px;
}

.feature-glass-card .feature-glass-overlay p {
  color: #D8DAE5;
  line-height: 1.625;
  font-size: 15px;
  /* Remove line-clamp on hover via JS or let it show naturally */
}

/* On hover, remove the line clamp to show full text */

.feature-glass-card:hover .feature-glass-overlay p {
  -webkit-line-clamp: unset;
  line-clamp: unset;
  display: block;
}

@media (max-width: 991px) {
  .feature-glass-card .feature-glass-overlay {
    height: 150px;
  }

  .feature-glass-card .feature-glass-overlay h3 {
    font-size: 20px;
  }
}

.create-honey2 {
  position: relative;
  /* Joi-style scale: the wizard is authored against a 10px unit.
     * Setting font-size: 10px here + using `em` everywhere below keeps the
     * scale local — the site navbar (which uses `rem`) is unaffected. */
  font-size: 10px;
  --ch2-radius-xs: 1.2em;
  --ch2-radius-m: 2em;
  --ch2-radius-xl: 4em;
  --ch2-gap-s: 0.4em;
  --ch2-gap-m: 0.8em;
  --ch2-gap-l: 1.2em;
  --ch2-gap-xl: 2em;
  --ch2-bg: #0f0f0f;
  --ch2-surface: #1a1a1a;
  --ch2-border: #303030;
  --ch2-text: #ffffff;
  --ch2-text-muted: #858585;
  --ch2-white-xxs: rgba(255, 255, 255, 0.08);
  --ch2-white-xs: rgba(255, 255, 255, 0.1);
  --ch2-white-s: rgba(255, 255, 255, 0.12);
  /* Map Joi accent to Honeybot primary */
  --ch2-accent: var(--primary);
  /* Honeybot brand gradient — used to circle selected chips, tiles, swatches,
     * and voice cards. Matches --gre-primary / --gre-secondary in variables.css. */
  --ch2-sel-gradient: linear-gradient(to right, #FF36F7, #FFBA2F);
  --ch2-sel-glow: 0 0 0 1px rgba(255, 54, 247, 0.25);
  /* Site navbar height — set dynamically by the wizard script so the
     * wrapper fills the remaining viewport (0 on mobile where it's hidden). */
  --ch2-topnav: 0px;
  /* Effective wizard height. JS overrides this with the live
     * `window.visualViewport.height` when the iOS soft keyboard opens, so the
     * whole wizard frame (header + stage + footer) shrinks to the area above
     * the keyboard. Default = 100% of the fixed `inset:0` body, which iOS sizes
     * to the true visible viewport (see the body note above) — `100dvh` here
     * over-resolves on iOS Safari 26 and made the wizard taller than the screen,
     * pushing the footer + bottom of the scroll stage off-screen so steps could
     * no longer scroll. */
  --ch2-app-h: 100%;
  font-family: 'Outfit', 'Inter', sans-serif;
  background: var(--ch2-bg);
  color: var(--ch2-text);
  height: calc(var(--ch2-app-h) - var(--ch2-topnav));
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ---------- Header ---------- */

.create-honey2__header {
  flex: 0 0 auto;
  z-index: 10;
  background: var(--ch2-bg);
  padding: 1.2em 2em 0.8em;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1em;
  border-bottom: 1px solid transparent;
}

.create-honey2__back {
  width: 4em;
  height: 4em;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--ch2-white-xs);
  border: none;
  color: var(--ch2-text);
  cursor: pointer;
  transition: background-color 0.2s;
}

.create-honey2__back:hover {
  background: var(--ch2-white-s);
}

.create-honey2__back:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Close affordance — mobile only. Takes the 3rd grid column so the title
   * stays centered. Desktop hides it (users exit via the site navbar). */

.create-honey2__close {
  display: none;
  grid-column: 3;
  width: 4em;
  height: 4em;
  border-radius: 999px;
  align-items: center;
  justify-content: center;
  background: var(--ch2-white-xs);
  border: none;
  color: var(--ch2-text);
  cursor: pointer;
  transition: background-color 0.2s;
}

.create-honey2__close:hover {
  background: var(--ch2-white-s);
}

@media (max-width: 767px) {
  .create-honey2__close {
    display: inline-flex;
  }
}

.create-honey2__title {
  grid-column: 2;
  font-size: 1.8em;
  font-weight: 600;
  text-align: center;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 0;
}

.create-honey2__progress {
  grid-column: 1 / -1;
  grid-row: 2;
  display: flex;
  gap: 0.4em;
  padding: 0.6em 0 0;
}

.create-honey2__dot {
  flex: 1;
  height: 1.2em;
  display: flex;
  align-items: center;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
}

.create-honey2__dot[disabled] {
  cursor: default;
}

.create-honey2__dot > span {
  flex: 1;
  height: 3px;
  border-radius: 2px;
  background: var(--ch2-white-xs);
  transition: height 0.2s, background-color 0.2s;
}

.create-honey2__dot.is-done > span,
  .create-honey2__dot.is-current > span {
  background: var(--ch2-text);
}

.create-honey2__dot.is-done:hover > span {
  height: 1em;
}

/* ---------- Stage ---------- */

.create-honey2__stage {
  flex: 1 1 auto;
  min-height: 0;
  /* Wide enough to fit 5 chips per row (e.g. hair styles) and the voice
     * step's 3-column card grid without needing per-step overrides. */
  max-width: 880px;
  width: 100%;
  margin: 0 auto;
  /* Bottom padding reserves room for the overlaid footer so the last tiles
     * can scroll fully into view above Back/Next instead of being hidden by them.
     * The reserve is driven by `--ch2-footer-h` — the footer's REAL measured
     * height (set by JS on every step swap + resize), plus a small gap. Hardcoded
     * `em` reserves drifted on iOS 26 (taller safe-area + two-row footer) and the
     * last option row ended up hidden behind Back/Next with no way to scroll to
     * it. The `9em` fallback covers the no-JS / pre-measure first paint. */
  padding: 1.6em 2em var(--ch2-footer-reserve, 9em);
  display: flex;
  flex-direction: column;
  gap: 1.6em;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
}

.create-honey2__stage::-webkit-scrollbar {
  width: 0;
}

/* Mobile: the overlaid footer can grow to TWO rows — once the user has
   * reached a review screen, a full-width Resume/Regenerate button stacks above
   * the Back/Next row. That two-row stack (4.4em + 0.8em gap + 4.4em buttons +
   * 2.8em footer padding ≈ 12.4em) plus the iOS home-indicator safe area is
   * taller than the old 11em reserve, so the last content row (final
   * orientation tiles, the 5th personality slider, the Regenerate button on the
   * review screens) was hidden behind the footer with no way to scroll to it.
   * Reserve the single-row footer height + safe-area by default. When the
   * Regenerate/Resume button is active (`.ch2-resume-active`, set by JS) the
   * footer grows to TWO rows, so reserve extra breathing room then — and only
   * then — so the bottom of the content scrolls comfortably clear of the pink
   * Regenerate button. Also lift the footer's own buttons above the home
   * indicator. */

@media (max-width: 575px) {
  .create-honey2__stage {
    /* JS measures the footer (incl. safe-area + two-row state) and sets
       * --ch2-footer-reserve = footerHeight + 2em gap. Fallbacks keep the old
       * behaviour before JS runs / if it's disabled. */
    padding-bottom: var(--ch2-footer-reserve, calc(13em + env(safe-area-inset-bottom, 0px)));
  }

  .ch2-resume-active .create-honey2__stage {
    padding-bottom: var(--ch2-footer-reserve, calc(20em + env(safe-area-inset-bottom, 0px)));
  }

  .create-honey2__footer {
    padding-bottom: calc(1.6em + env(safe-area-inset-bottom, 0px));
  }
}

.ch2-step {
  display: flex;
  flex-direction: column;
  gap: 1.6em;
}

.ch2-section {
  display: flex;
  flex-direction: column;
  gap: 1em;
}

.ch2-label {
  text-align: center;
  font-size: 1.4em;
  line-height: 2em;
  font-weight: 500;
  color: var(--ch2-text);
  margin: 0;
}

.ch2-label--small {
  font-size: 1.2em;
  opacity: 0.7;
}

.ch2-hint {
  text-align: center;
  font-size: 1.2em;
  color: var(--ch2-text-muted);
  margin: 0;
}

/* ---------- Chip (text button) ---------- */

.ch2-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 1.6em;
  min-height: 4em;
  border-radius: var(--ch2-radius-xl);
  background: var(--ch2-white-xs);
  color: var(--ch2-text);
  border: 2px solid transparent;
  font: inherit;
  font-size: 1.3em;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s;
  white-space: nowrap;
}

.ch2-chip:hover {
  background: var(--ch2-white-s);
}

.ch2-chip {
  position: relative;
}

.ch2-chip.is-selected {
  background: var(--ch2-white-s);
  border-color: transparent;
}

.ch2-chip.is-selected::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 2px;
  background: var(--ch2-sel-gradient);
  -webkit-mask:
      linear-gradient(#000 0 0) content-box,
      linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.ch2-chip--ghost {
  background: transparent;
  border-color: var(--ch2-border);
  color: var(--ch2-text-muted);
}

.ch2-chip--ghost:hover {
  color: var(--ch2-text);
  border-color: var(--ch2-text);
}

.ch2-chip--custom {
  border-style: dashed;
}

.ch2-chip__x {
  font-size: 1.6em;
  line-height: 1;
  opacity: 0.8;
}

.ch2-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ch2-gap-l);
  justify-content: center;
}

/* ---------- Photo tile ---------- */

.ch2-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0;
  background: var(--ch2-surface);
  border: 2px solid var(--ch2-bg);
  border-radius: var(--ch2-radius-m);
  overflow: hidden;
  cursor: pointer;
  color: var(--ch2-text);
  transition: box-shadow 0.2s, border-color 0.2s;
}

.ch2-tile:hover:not(.is-selected) {
  box-shadow: 0 0 0 2px var(--ch2-white-xs);
}

.ch2-tile:focus-visible:not(.is-selected) {
  outline: none;
  border-color: transparent;
  box-shadow: 0 0 0 3px var(--ch2-accent);
}

.ch2-tile.is-selected {
  /* Keep the existing border transparent — the gradient ring is painted by
     * an ::after overlay that honours `border-radius`. `border-image` would
     * flatten the corners. */
  border-color: transparent;
  box-shadow: var(--ch2-sel-glow);
}

.ch2-tile.is-selected::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 3px;
  background: var(--ch2-sel-gradient);
  -webkit-mask:
      linear-gradient(#000 0 0) content-box,
      linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: 2;
}

.ch2-tile--tall  {
  aspect-ratio: 2 / 3;
}

.ch2-tile--wide  {
  aspect-ratio: 1;
}

.ch2-tile--square {
  aspect-ratio: 1;
}

.ch2-tile--small {
  width: 15em;
  flex: 0 0 auto;
}

.ch2-tile__img {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #2a1a2e 0%, #1a1a2e 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2em;
  color: var(--ch2-text-muted);
  letter-spacing: 0.04em;
}

.ch2-tile__img::before {
  content: attr(data-ch2-placeholder);
}

/* Inline-SVG tile artwork (orientation symbols, etc.). The wrapping span keeps
   * the dark gradient; the inner <svg> is centered, sized to ~60% of tile height,
   * and inherits text color via stroke="currentColor". */

/* Selection check — plain white feather icon (no circle background),
   * right-aligned. Matches the my-honeybot-gallery polyline shape. */

.ch2-tile__check {
  position: absolute;
  top: 0.8em;
  right: 0.8em;
  width: 24px;
  height: 24px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 24px 24px;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6));
  opacity: 0;
  transition: opacity 0.15s;
  z-index: 1;
  pointer-events: none;
}

.ch2-tile.is-selected .ch2-tile__check {
  opacity: 1;
}

.ch2-tile__label {
  position: relative;
  z-index: 1;
  padding: 0.6em 0.8em;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.75));
  font-size: 1.2em;
  font-weight: 500;
  text-align: center;
}

/* Tile images (real <img> inside .ch2-tile__img). Anchor the crop to the top
   * of the source so portrait subjects keep the face visible when the tile
   * aspect-ratio differs from the source (e.g. tall portrait → square tile). */

.ch2-tile__img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center top;
     object-position: center top;
}

.ch2-tile__img--media {
  overflow: hidden;
}

.ch2-tile__img--media::before {
  content: none;
}

/* Video tile: video autoplays behind the poster (V1 parity). Poster is the
   * first paint so we don't show a blank box while the mp4 buffers; once the
   * video is decoding the poster fades out and the looping video takes over.
   * Same top-anchored crop as still tiles so the face stays visible. */

.ch2-tile__poster,
  .ch2-tile__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center top;
     object-position: center top;
  transition: opacity 0.2s ease;
}

/* Opt-out for tiles with no face (e.g. the dice "Random" render): re-center
   * the crop so the subject sits in the middle of the tile instead of pinned
   * to the top edge. Apply on the .ch2-tile__img wrapper or the <img> itself. */

.ch2-tile__img--centered img,
  .ch2-tile__poster--centered,
  .ch2-tile__video--centered {
  -o-object-position: center;
     object-position: center;
}

.ch2-tile--video .ch2-tile__video {
  opacity: 1;
  pointer-events: none;
}

/* ---------- Grid ---------- */

.ch2-grid {
  display: grid;
  gap: 1em;
  width: 100%;
  justify-content: center;
}

.ch2-grid--2 {
  grid-template-columns: repeat(2, 1fr);
}

/* mobile default */

.ch2-grid--4 {
  grid-template-columns: repeat(2, minmax(0, 150px));
}

@media (min-width: 768px) {
  .ch2-grid--2 {
    grid-template-columns: repeat(2, minmax(0, 280px));
  }

  .ch2-grid--3 {
    grid-template-columns: repeat(3, minmax(0, 200px));
  }

  .ch2-grid--4 {
    grid-template-columns: repeat(4, minmax(0, 150px));
    gap: 2.4em;
  }

  .ch2-grid--5 {
    grid-template-columns: repeat(5, minmax(0, 130px));
    gap: 1.8em;
  }

  .ch2-tile--tall  {
    aspect-ratio: 2 / 3;
  }

  .ch2-tile--wide  {
    aspect-ratio: 3 / 2;
  }
}

/* ---------- Horizontal scroll (body step, eye color, etc.) ---------- */

.ch2-scroll {
  display: flex;
  gap: 1.6em;
  padding: 3px 2em;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  margin-inline: -2em;
  /* let the fade mask reach the viewport edge */
  /* `safe center` centers when content fits, falls back to start when it
     * overflows so the first item never gets clipped off the left edge. */
  justify-content: safe center;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 3em calc(100% - 3em), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 3em calc(100% - 3em), transparent);
  cursor: grab;
}

.ch2-scroll::-webkit-scrollbar {
  display: none;
}

/* Inside arrow wrapper, scroll fills remaining space and drops the negative margin. */

.ch2-scroll-wrap .ch2-scroll {
  flex: 1;
  min-width: 0;
  margin-inline: 0;
}

/* Mobile: collapse carousels into a wrapping row so the page scrolls
   * vertically instead of horizontally. Personality (step 5) keeps its
   * horizontal carousel because the video tiles are authored for it. */

@media (max-width: 767px) {
  [data-ch2-step]:not([data-ch2-step="5"]) .ch2-scroll {
    flex-wrap: wrap;
    overflow-x: visible;
    overflow-y: visible;
    justify-content: center;
    cursor: default;
    gap: var(--ch2-gap-l);
    padding: 3px 0;
    margin-inline: 0;
    -webkit-mask-image: none;
    mask-image: none;
  }

  [data-ch2-step]:not([data-ch2-step="5"]) .ch2-scroll > .ch2-tile--small {
    width: calc(50% - (var(--ch2-gap-l) / 2));
    max-width: none;
  }
}

/* Scroll wrapper with left/right arrow buttons. */

.ch2-scroll-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

/* Desktop: horizontal-scroll carousel. Mobile (<=767px): collapse into a
   * 2-column vertical grid so the user isn't forced to swipe inside a
   * section that already lives in a scrollable stage. */

@media (max-width: 767px) {
  .ch2-scroll-wrap--mobile-grid .ch2-scroll-arrow {
    display: none;
  }

  /* Specificity boost: the generic `[data-ch2-step]:not(...) .ch2-scroll`
     * rule above outranks a single-class selector, so we need an attribute
     * selector here too to actually take effect. */

  [data-ch2-step] .ch2-scroll-wrap--mobile-grid .ch2-scroll {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1em;
    overflow: visible;
    margin-inline: 0;
    padding: 3px 0;
    -webkit-mask-image: none;
    mask-image: none;
    cursor: auto;
  }

  [data-ch2-step] .ch2-scroll-wrap--mobile-grid .ch2-scroll > .ch2-tile--small {
    width: auto;
    max-width: none;
  }
}

.ch2-scroll-arrow {
  flex: 0 0 auto;
  width: 3.6em;
  height: 3.6em;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--ch2-white-xs);
  border: 1px solid var(--ch2-border);
  color: var(--ch2-text);
  cursor: pointer;
  transition: background-color 0.2s, opacity 0.2s;
  z-index: 2;
}

.ch2-scroll-arrow:hover {
  background: var(--ch2-white-s);
}

.ch2-scroll-arrow.is-hidden {
  opacity: 0;
  pointer-events: none;
}

/* On mobile, hide arrows — swipe is natural. */

@media (max-width: 767px) {
  .ch2-scroll-arrow {
    display: none;
  }

  /* Step 5 (personality) keeps arrow affordances on mobile so users
     * realise the row scrolls — sliders sit just below, no room to scroll
     * through tiles by accident. Arrows overlay the carousel edges so they
     * don't steal width from the tiles. */

  .ch2-step[data-ch2-step="5"] .ch2-scroll-arrow {
    display: inline-flex;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 3.2em;
    height: 3.2em;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 3;
  }

  .ch2-step[data-ch2-step="5"] .ch2-scroll-arrow--left {
    left: 0.4em;
  }

  .ch2-step[data-ch2-step="5"] .ch2-scroll-arrow--right {
    right: 0.4em;
  }
}

/* ---------- Color swatch ---------- */

.ch2-swatch-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8em;
  justify-content: center;
}

.ch2-swatch.is-selected {
  border-color: transparent;
}

.ch2-swatch.is-selected::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 2px;
  background: var(--ch2-sel-gradient);
  -webkit-mask:
      linear-gradient(#000 0 0) content-box,
      linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* ---------- Input (text / search) ---------- */

.ch2-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
  max-width: 420px;
  margin: 0 auto;
  width: 100%;
}

.ch2-input-wrap__icon {
  position: absolute;
  left: 1.2em;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ch2-text-muted);
  pointer-events: none;
  display: inline-flex;
}

.ch2-input-wrap__action {
  position: absolute;
  right: 0.6em;
  top: 50%;
  transform: translateY(-50%);
  width: 3.2em;
  height: 3.2em;
  border-radius: 999px;
  background: var(--ch2-white-xs);
  color: var(--ch2-text);
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.ch2-input-wrap__action:hover {
  background: var(--ch2-white-s);
}

.ch2-input {
  width: 100%;
  height: 4.4em;
  padding: 0 4.8em 0 3.6em;
  border-radius: var(--ch2-radius-xs);
  background: var(--ch2-white-xxs);
  border: 1px solid var(--ch2-border);
  color: var(--ch2-text);
  font: inherit;
  font-size: 1.4em;
  outline: none;
  transition: border-color 0.2s, background-color 0.2s;
}

.ch2-input::-moz-placeholder {
  color: var(--ch2-text-muted);
}

.ch2-input::placeholder {
  color: var(--ch2-text-muted);
}

.ch2-input:focus {
  border-color: var(--ch2-text);
  background: var(--ch2-surface);
}

.ch2-input-wrap--search .ch2-input {
  padding-right: 1.2em;
}

/* Inline input row (age): compact input matching chip size. */

.ch2-input-wrap--inline {
  max-width: none;
  width: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 1.2em;
  position: relative;
}

/* [hidden] must win over `display: flex` on the wrap. */

.ch2-input-wrap[hidden] {
  display: none;
}

.ch2-input--number {
  width: 6em;
  height: auto;
  padding: 0 1em;
  text-align: center;
  font-size: 1.3em;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  min-height: 4em;
  border-radius: var(--ch2-radius-xl);
  background: var(--ch2-white-xs);
  border: 2px solid transparent;
  position: relative;
  z-index: 1;
}

.ch2-input--number:focus {
  outline: none;
}

/* Gradient ring painted by the wrapper's ::after so only the border circles
   * the input — the input's own background stays a solid surface fill. Same
   * mask-composite trick as .ch2-tile.is-selected::after. */

.ch2-input-wrap--inline:focus-within::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--ch2-radius-xl);
  padding: 2px;
  background: var(--ch2-sel-gradient);
  -webkit-mask:
      linear-gradient(#000 0 0) content-box,
      linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: 2;
}

.ch2-input--number::-webkit-inner-spin-button,
  .ch2-input--number::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.ch2-input--number {
  -moz-appearance: textfield;
}

/* Centered section for the step-0 random-selection link. */

.ch2-section--center {
  align-items: center;
  text-align: center;
}

.ch2-section--custom-add {
  margin-top: 1.6em;
}

.ch2-section--custom-add.hidden {
  display: none;
}

/* Mobile: vertically center step-0 (design approach tiles + random link)
   * inside the stage so the two selection boxes sit lower on the screen
   * instead of hugging the top under the header. */

@media (max-width: 767px) {
  .ch2-step[data-ch2-step="0"] {
    margin-top: auto;
    margin-bottom: auto;
  }
}

/* Plain underlined link button (step 0 "Or try a random selection"). */

.ch2-link-btn {
  background: none;
  border: none;
  color: var(--ch2-text-muted);
  font: inherit;
  font-size: 1.3em;
  text-decoration: underline;
  cursor: pointer;
  padding: 0.6em 1em;
}

.ch2-link-btn:hover {
  color: var(--ch2-text);
}

/* "Start over" affordance shown on step 0 when a previous session was
   * restored from localStorage. Sits below the Random link. */

.ch2-reset-wrap {
  margin-top: 0.4em;
  gap: 0.4em;
}

/* `.ch2-section` sets `display: flex`, which has higher specificity than
   * the UA `[hidden] { display: none }` rule, so the wrap leaks visible on
   * fresh sessions. Force it back to none whenever the `hidden` attribute
   * is present (initial paint + after clicking "Start over"). */

.ch2-reset-wrap[hidden] {
  display: none;
}

.ch2-reset__hint {
  font-size: 1.2em;
  color: var(--ch2-text-muted);
  margin: 0;
}

.ch2-reset-btn {
  color: var(--ch2-accent);
  font-weight: 600;
}

.ch2-reset-btn:hover {
  color: var(--ch2-accent);
  opacity: 0.85;
}

/* ---------- Sliders ---------- */

.ch2-sliders {
  display: flex;
  flex-direction: column;
  gap: 1.6em;
  max-width: 420px;
  margin: 0 auto;
  width: 100%;
}

.ch2-slider-row {
  display: grid;
  grid-template-columns: 8em 1fr 8em;
  align-items: center;
  gap: 1em;
  font-size: 1em;
  color: var(--ch2-text);
}

.ch2-slider-row__min {
  text-align: right;
}

.ch2-slider-row__max {
  text-align: left;
}

.ch2-slider {
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  width: 100%;
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(
      to right,
      var(--ch2-text) 0%,
      var(--ch2-text) var(--ch2-slider-pct, 50%),
      var(--ch2-white-s) var(--ch2-slider-pct, 50%),
      var(--ch2-white-s) 100%
    );
  outline: none;
}

.ch2-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 4px;
  background: #f1f1f1;
  border: 4px solid #1a1a1a;
  cursor: pointer;
}

.ch2-slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  background: #f1f1f1;
  border: 4px solid #1a1a1a;
  cursor: pointer;
}

/* ---------- Example preview block (chat style) ---------- */

.ch2-example {
  border: 1px solid var(--ch2-border);
  border-radius: var(--ch2-radius-m);
  padding: 1.6em;
  display: flex;
  flex-direction: column;
  gap: 0.8em;
}

.ch2-example__label {
  font-size: 1.1em;
  color: var(--ch2-text-muted);
  margin: 0;
  letter-spacing: 0.04em;
}

.ch2-example__q,
  .ch2-example__a {
  margin: 0;
  font-size: 1.4em;
  line-height: 2em;
}

.ch2-example__q {
  color: var(--ch2-text);
}

.ch2-example__a {
  color: var(--ch2-text-muted);
}

/* Chat-style step: render the example as a real two-bubble exchange so it
     reads as a conversation, not a text input. Bubble colors mirror the React
     chat app (user = pink gradient, bot = translucent grey). */

.ch2-example--chat {
  border: none;
  padding: 0.4em 0;
  gap: 1em;
}

.ch2-example--chat .ch2-example__q,
  .ch2-example--chat .ch2-example__a {
  font-size: 1.3em;
  line-height: 1.5em;
  max-width: 85%;
  width: -moz-fit-content;
  width: fit-content;
  padding: 0.7em 0.9em;
  border-radius: var(--ch2-radius-xs);
  color: #ffffff;
}

/* User prompt — right-aligned pink gradient, squared top-right corner */

.ch2-example--chat .ch2-example__q {
  align-self: flex-end;
  margin-inline-start: auto;
  border-top-right-radius: 0.3em;
  background: linear-gradient(91deg, #9f9f9f76 0.09%, #d65aa9 106.7%);
}

/* Bot reply — left-aligned translucent grey, squared top-left corner */

.ch2-example--chat .ch2-example__a {
  align-self: flex-start;
  border-top-left-radius: 0.3em;
  background: rgba(61, 61, 61, 0.5);
}

/* ---------- Recap ---------- */

.ch2-recap {
  display: flex;
  flex-direction: column;
  gap: 2em;
  align-items: center;
}

/* `align-items: center` would otherwise shrink-wrap child sections to their
   * intrinsic width, which breaks the horizontal-scroll layout on the gallery
   * Position picker — the scroll container needs to know its clip width to
   * decide overflow and to paint the edge fade mask. Force full width so the
   * scroll-wrap sits inside the stage's 880px max-width like every other step. */

.ch2-recap > .ch2-section {
  width: 100%;
}

.ch2-recap__progress {
  font-size: 1.6em;
  font-weight: 600;
  margin: 0;
}

.ch2-recap__body {
  display: flex;
  flex-direction: column;
  gap: 2em;
  width: 100%;
  max-width: 560px;
}

@media (min-width: 768px) {
  .ch2-recap__body {
    flex-direction: row;
    align-items: stretch;
  }
}

.ch2-recap__preview {
  width: 100%;
  max-width: 240px;
  margin: 0 auto;
  /* Aspect comes from the tile variant (ch2-tile--tall = 2/3) so the recap
     * preview matches the portrait thumbs used everywhere else in the wizard. */
}

.ch2-recap__info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1.6em;
  justify-content: center;
}

.ch2-recap__row {
  display: flex;
  flex-direction: column;
  gap: 0.4em;
}

.ch2-recap__row-label {
  font-size: 1.2em;
  color: var(--ch2-text-muted);
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.ch2-recap__row-value {
  font-size: 1.4em;
  line-height: 2em;
  color: var(--ch2-text);
  margin: 0;
}

/* ---------- Footer CTA ---------- */

.create-honey2__footer {
  /* Overlaid on the stage (not in flex flow) so the tile grid scrolls
     * underneath the Back/Next buttons. Stage has bottom padding to make
     * room for the last tiles to fully clear the buttons. */
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1.2em 2em 1.6em;
  display: flex;
  justify-content: center;
  background: transparent;
  pointer-events: none;
  z-index: 20;
}

.create-honey2__footer > * {
  pointer-events: auto;
}

.create-honey2__footer-stack {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.8em;
  width: 100%;
  max-width: 720px;
}

.create-honey2__footer-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1em;
  width: 100%;
}

/* Resume / Regenerate shortcut: only shown once the user has reached the
   * face/body review screens at least once this session. Lets them jump
   * straight back to the cached image instead of walking the wizard. */

.create-honey2__resume {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 4.4em;
  padding: 0 3.2em;
  border-radius: var(--ch2-radius-xl);
  background: var(--ch2-accent);
  color: var(--ch2-bg);
  border: none;
  font: inherit;
  font-size: 1.5em;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(250, 61, 114, 0.35);
  transition: transform 0.15s, box-shadow 0.15s, filter 0.15s;
}

.create-honey2__resume:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 28px rgba(250, 61, 114, 0.5);
  filter: brightness(1.05);
}

.create-honey2__resume[hidden] {
  display: none;
}

/* Back sits to the left of the main CTA on every viewport. The header Back
   * stays visible on desktop too, but having one in the footer keeps the
   * primary navigation (Back / Next) within thumb reach of the CTA. */

.create-honey2__footer-back {
  display: inline-flex;
  flex: 0 0 auto;
  padding: 0 3.2em;
  min-height: 4.4em;
  border-radius: var(--ch2-radius-xl);
  align-items: center;
  justify-content: center;
  /* Solid fill — the footer now sits over scrolling tiles, so a translucent
     * white wash would show the content behind through the Back pill. */
  background: var(--ch2-surface);
  border: 1px solid var(--ch2-border);
  color: var(--ch2-text);
  font: inherit;
  font-size: 1.5em;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  min-width: 20em;
  max-width: 420px;
  transition: background-color 0.2s;
}

.create-honey2__footer-back:hover {
  background: #232323;
}

.create-honey2__footer-back:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.create-honey2__next {
  padding: 0 3.2em;
  min-height: 4.4em;
  border-radius: var(--ch2-radius-xl);
  background: var(--ch2-text);
  color: var(--ch2-bg);
  border: none;
  font: inherit;
  font-size: 1.5em;
  font-weight: 600;
  cursor: pointer;
  min-width: 20em;
  max-width: 420px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.45);
  transition: transform 0.15s, box-shadow 0.15s;
}

.create-honey2__next:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.55);
}

/* Mobile: show footer Back + shrink Next so both fit the viewport. Back and
   * Next share the row 50/50 (equal size). Hide the header Back so there's a
   * single back affordance sitting next to Next. */

@media (max-width: 767px) {
  .create-honey2__footer-back {
    display: inline-flex;
    flex: 1 1 0;
    min-width: 0;
    padding: 0 1.6em;
    font-size: 1.5em;
  }

  .create-honey2__back {
    display: none;
  }

  .create-honey2__next {
    flex: 1 1 0;
    min-width: 0;
    padding: 0 1.6em;
    min-height: 4.4em;
    font-size: 1.5em;
  }

  /* Soft keyboard open (text field focused): hide the Back/Next footer so it
     * doesn't overlay the text area being typed into. JS toggles .ch2-kb-open
     * on the wizard root in sync with the keyboard-height adjustment. */

  .create-honey2.ch2-kb-open .create-honey2__footer {
    display: none;
  }
}

/* ---------- Gallery picker (step 0, path=gallery) ---------- */

.ch2-gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.8em;
  width: 100%;
}

@media (min-width: 768px) {
  .ch2-gallery-grid {
    grid-template-columns: repeat(3, minmax(0, 180px));
    gap: 1.2em;
    justify-content: center;
  }
}

.ch2-gallery-skeleton {
  aspect-ratio: 2 / 3;
  border-radius: var(--ch2-radius-m);
  background: linear-gradient(90deg, var(--ch2-white-xxs), var(--ch2-white-s), var(--ch2-white-xxs));
  background-size: 200% 100%;
  animation: ch2-skel 1.4s ease-in-out infinite;
}

@keyframes ch2-skel {
  0%   {
    background-position: 200% 0;
  }

  100% {
    background-position: -200% 0;
  }
}

.ch2-gallery-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6em;
  margin-top: 1.2em;
}

.ch2-chip--load {
  align-self: center;
}

.ch2-gallery-empty {
  color: var(--ch2-text-muted);
  font-size: 1.2em;
  margin: 0;
}

.ch2-recap__preview--gallery .ch2-tile__img {
  background: transparent;
}

/* ===========================================================================
   * Step 10 — voice picker + share toggle
   * ========================================================================= */

.ch2-step--voice {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ch2-gap-l);
}

.ch2-voice-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--ch2-gap-m);
  width: 100%;
  max-width: 90rem;
  padding: 0 var(--ch2-gap-l);
}

@media (max-width: 768px) {
  .ch2-voice-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 480px) {
  .ch2-voice-grid {
    grid-template-columns: 1fr;
  }
}

.ch2-voice-card {
  display: flex;
  flex-direction: column;
  gap: 0.6em;
  padding: 1em 1.2em;
  background: var(--ch2-surface);
  border: 2px solid var(--ch2-border);
  border-radius: var(--ch2-radius-m);
  color: var(--ch2-text);
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease;
  text-align: left;
  overflow: hidden;
  min-width: 0;
}

.ch2-voice-card:hover {
  border-color: var(--ch2-white-s);
}

.ch2-voice-card {
  position: relative;
}

.ch2-voice-card.is-selected {
  border-color: transparent;
}

.ch2-voice-card.is-selected::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 2px;
  background: var(--ch2-sel-gradient);
  -webkit-mask:
      linear-gradient(#000 0 0) content-box,
      linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.ch2-voice-card.is-selected .ch2-voice-check {
  color: var(--ch2-accent);
  border-color: var(--ch2-accent);
}

.ch2-voice-card.is-playing .ch2-voice-play {
  background: var(--ch2-accent);
  color: var(--ch2-bg);
}

.ch2-voice-card__row {
  display: flex;
  align-items: center;
  gap: 0.6em;
  min-width: 0;
}

.ch2-voice-card__name {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 1.2em;
  font-weight: 500;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ch2-voice-play {
  width: 2.2em;
  height: 2.2em;
  border-radius: 999px;
  background: var(--ch2-white-xs);
  color: var(--ch2-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  transition: background 0.18s ease, color 0.18s ease;
}

.ch2-voice-check {
  width: 1.6em;
  height: 1.6em;
  border-radius: 0.4em;
  border: 2px solid var(--ch2-border);
  color: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  margin-left: auto;
  transition: color 0.18s ease, border-color 0.18s ease;
}

.ch2-voice-waveform {
  display: flex;
  align-items: flex-end;
  gap: 0.2em;
  height: 1.8em;
  opacity: 0.4;
}

.ch2-voice-waveform__bar {
  flex: 1;
  background: var(--ch2-text-muted);
  border-radius: 999px;
  height: 30%;
}

.ch2-voice-card.is-playing .ch2-voice-waveform {
  opacity: 1;
}

.ch2-voice-card.is-playing .ch2-voice-waveform__bar {
  background: var(--ch2-accent);
  animation: ch2-voice-wave 0.9s ease-in-out infinite;
}

.ch2-voice-card.is-playing .ch2-voice-waveform__bar:nth-child(2n) {
  animation-delay: 0.1s;
}

.ch2-voice-card.is-playing .ch2-voice-waveform__bar:nth-child(3n) {
  animation-delay: 0.2s;
}

.ch2-voice-card.is-playing .ch2-voice-waveform__bar:nth-child(5n) {
  animation-delay: 0.3s;
}

@keyframes ch2-voice-wave {
  0%, 100% {
    height: 30%;
  }

  50% {
    height: 100%;
  }
}

.ch2-share {
  display: inline-flex;
  align-items: center;
  gap: 0.8em;
  padding: 1em 1.6em;
  border: 1px solid var(--ch2-border);
  border-radius: var(--ch2-radius-xl);
  color: var(--ch2-text);
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  transition: border-color 0.18s ease, background 0.18s ease;
}

.ch2-share:hover {
  border-color: var(--ch2-white-s);
}

.ch2-share__input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.ch2-share__check {
  width: 1.8em;
  height: 1.8em;
  border-radius: 0.4em;
  border: 2px solid var(--ch2-border);
  color: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.ch2-share__input:checked ~ .ch2-share__check {
  color: var(--ch2-bg);
  background: var(--ch2-accent);
  border-color: var(--ch2-accent);
}

.ch2-share__label {
  font-size: 1.4em;
  font-weight: 500;
}

/* Locked variant — free users see this in place of the checkbox; tapping
   * navigates to /pricing/ instead of toggling. */

.ch2-share--locked {
  text-decoration: none;
  align-items: center;
  gap: 1em;
  background: color-mix(in oklab, var(--ch2-accent) 8%, transparent);
  border-color: color-mix(in oklab, var(--ch2-accent) 35%, var(--ch2-border));
}

.ch2-share--locked:hover {
  border-color: var(--ch2-accent);
  background: color-mix(in oklab, var(--ch2-accent) 14%, transparent);
}

.ch2-share__check--locked {
  color: var(--ch2-accent);
  border-color: color-mix(in oklab, var(--ch2-accent) 60%, var(--ch2-border));
  background: transparent;
}

.ch2-share__copy {
  display: inline-flex;
  flex-direction: column;
  gap: 0.2em;
  line-height: 1.2;
}

.ch2-share__upsell {
  font-size: 1.15em;
  font-weight: 500;
  color: var(--ch2-accent);
}

/* ===========================================================================
   * Face / body review screens (swapped in by createBotFlow)
   * ========================================================================= */

.ch2-step--review {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ch2-gap-l);
  padding: var(--ch2-gap-l);
}

.ch2-step__title {
  font-size: 2em;
  font-weight: 600;
  text-align: center;
  margin: 0;
}

.ch2-step__subtitle {
  color: var(--ch2-text-muted);
  text-align: center;
  margin: 0;
  font-size: 1.4em;
}

.ch2-review__frame {
  position: relative;
  width: 100%;
  max-width: 36em;
  aspect-ratio: 3 / 4;
  border-radius: var(--ch2-radius-m);
  overflow: hidden;
  background: var(--ch2-surface);
  border: 2px solid var(--ch2-accent);
}

/* Mobile: cap the frame height so the image AND the Regenerate/Edit row land
   * above the fold without scrolling. The frame keeps its 3:4 aspect ratio.
   * Budget: 100dvh minus the header/progress (~10em), the review title +
   * gaps (~6em), the Regenerate/Edit row (~5em) and the overlaid two-row
   * footer + safe area (~14em) ≈ 35em of chrome, so cap the frame at the
   * remaining viewport height.
   *
   * Drive the size from HEIGHT (not width) here: the frame is a column flex
   * item, and the earlier `width: auto` + `margin-inline: auto` made it
   * shrink-to-fit its content. While an image is generating the image is
   * `display:none` and the only child (the loader) is `position:absolute`, so
   * content width collapsed to 0 — taking `aspect-ratio` height to 0 with it
   * and making the loader vanish ("image disappears on Regenerate"). Setting a
   * definite `height` lets `aspect-ratio` derive the width even with no
   * in-flow content, so the loader always has a box to fill. */

@media (max-width: 575px) {
  .ch2-review__frame {
    margin-inline: auto;
    height: min(calc(100dvh - 35em), calc(36em * 4 / 3));
    width: auto;
    max-width: 100%;
  }
}

.ch2-review__loader {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1em;
  color: var(--ch2-text);
  background: var(--ch2-bg);
}

.ch2-review__loader-label {
  font-size: 1.4em;
  color: var(--ch2-text);
  font-weight: 500;
}

.ch2-review__loader-percent {
  font-size: 2.4em;
  font-weight: 700;
  color: var(--ch2-text);
  line-height: 1;
}

.ch2-review__loader[hidden] {
  display: none;
}

.ch2-review__img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center top;
     object-position: center top;
}

.ch2-review__img[hidden] {
  display: none;
}

/* Safety-filter rejection: swap to a friendly illustration instead of the
     broken-image placeholder. Padded + contained so the asset shows in full
     rather than being cropped like a portrait. */

.ch2-review__img.ch2-review__img--blocked {
  -o-object-fit: contain;
     object-fit: contain;
  -o-object-position: center center;
     object-position: center center;
  background: var(--ch2-bg);
  padding: 1.5em;
}

.ch2-review__final-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.8em;
  background: rgba(0, 0, 0, 0.6);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  color: var(--ch2-text);
  z-index: 5;
}

.ch2-review__final-overlay[hidden] {
  display: none;
}

.ch2-review__spinner {
  animation: ch2-spin 1s linear infinite;
  color: var(--ch2-accent);
}

.ch2-review__final-label {
  font-size: 1.4em;
  font-weight: 500;
}

@keyframes ch2-spin {
  to {
    transform: rotate(360deg);
  }
}

.ch2-review__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ch2-gap-m);
  width: 100%;
  max-width: 28em;
}

.ch2-btn {
  width: 100%;
  min-height: 4.4em;
  padding: 0 1.6em;
  border-radius: var(--ch2-radius-xl);
  font-size: 1.4em;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  cursor: pointer;
  border: 1px solid transparent;
  transition: opacity 0.18s ease, background 0.18s ease, color 0.18s ease;
}

.ch2-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.ch2-btn--regen {
  background: transparent;
  color: var(--ch2-text);
  border-color: var(--ch2-border);
}

.ch2-btn--regen:hover:not(:disabled) {
  background: var(--ch2-white-xs);
}

.ch2-btn--primary {
  background: var(--ch2-text);
  color: var(--ch2-bg);
}

.ch2-btn--ghost {
  background: transparent;
  color: var(--ch2-text);
  border-color: var(--ch2-border);
}

.ch2-btn__badge {
  background: var(--ch2-white-xs);
  padding: 0.2em 0.6em;
  border-radius: 999px;
  font-size: 0.85em;
  font-weight: 500;
}

.ch2-btn__badge.is-paid {
  background: #f59e0b;
  color: var(--ch2-bg);
  display: inline-flex;
  align-items: center;
  gap: 0.25em;
}

.ch2-btn__badge-icon {
  width: 1.1em;
  height: 1.1em;
  flex-shrink: 0;
  display: inline-block;
  vertical-align: middle;
}

/* ---------- Per-phase extra-prompt edit affordance (review screens) ---- */

/* Regenerate + Edit share the row 50/50 — same min-height, font, padding
   * inherited from `.ch2-btn`. */

.ch2-review__actions-row {
  display: flex;
  align-items: stretch;
  gap: 0.8em;
  width: 100%;
}

.ch2-review__actions-row > .ch2-btn {
  flex: 1 1 0;
  width: auto;
  min-width: 0;
  min-height: 3.4em;
  font-size: 1.25em;
}

.ch2-btn--edit {
  background: transparent;
  color: var(--ch2-text);
  border-color: var(--ch2-border);
  position: relative;
}

.ch2-btn--edit:hover:not(:disabled) {
  background: var(--ch2-white-xs);
}

.ch2-btn--edit[hidden] {
  display: none;
}

/* Filled dot in the top-right corner when the user has saved a non-empty
   * extra prompt for this phase — gives a quiet visual cue that an edit is
   * active without re-opening the modal. */

.ch2-btn--has-extra::after {
  content: '';
  position: absolute;
  top: 0.5em;
  right: 0.5em;
  width: 0.7em;
  height: 0.7em;
  border-radius: 999px;
  background: var(--ch2-accent);
  box-shadow: 0 0 0 2px var(--ch2-bg);
}

/* ---------- Shared edit-prompt modal (face + body review) -------------- */

.ch2-modal {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.6em;
}

.ch2-modal[hidden] {
  display: none;
}

.ch2-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
  -webkit-backdrop-filter: blur(2px);
          backdrop-filter: blur(2px);
}

.ch2-modal__content {
  position: relative;
  width: 90%;
  max-width: 480px;
  max-height: 80dvh;
  display: flex;
  flex-direction: column;
  background: var(--ch2-bg);
  color: var(--ch2-text);
  border: 1px solid var(--ch2-border);
  border-radius: var(--ch2-radius-xl);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
  overflow: hidden;
}

.ch2-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8em;
  padding: 1.4em 1.6em 0.8em;
  border-bottom: 1px solid var(--ch2-border);
}

.ch2-modal__title {
  margin: 0;
  font-size: 1.6em;
  font-weight: 600;
  line-height: 1.3;
}

.ch2-modal__close {
  background: transparent;
  border: none;
  color: var(--ch2-text-muted);
  cursor: pointer;
  padding: 0.4em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  transition: background 0.18s ease, color 0.18s ease;
}

.ch2-modal__close:hover {
  background: var(--ch2-white-xs);
  color: var(--ch2-text);
}

.ch2-modal__body {
  padding: 1.2em 1.6em;
  overflow-y: auto;
  flex: 1 1 auto;
}

.ch2-modal__hint {
  margin: 0 0 0.8em;
  font-size: 1.3em;
  line-height: 1.4;
  color: var(--ch2-text-muted);
}

.ch2-modal__textarea {
  width: 100%;
  min-height: 6.5em;
  padding: 0.8em 1em;
  background: var(--ch2-white-xs);
  color: var(--ch2-text);
  border: 1px solid var(--ch2-border);
  border-radius: var(--ch2-radius-m);
  font: inherit;
  font-size: 1.4em;
  line-height: 1.45;
  resize: vertical;
}

.ch2-modal__textarea:focus {
  outline: none;
  border-color: var(--ch2-accent);
  box-shadow: 0 0 0 2px rgba(250, 61, 114, 0.25);
}

.ch2-modal__counter {
  margin-top: 0.4em;
  font-size: 1.2em;
  text-align: right;
  color: var(--ch2-text-muted);
  line-height: 1;
}

.ch2-modal__counter.is-warning {
  color: #f59e0b;
}

.ch2-modal__counter.is-danger {
  color: #ef4444;
  font-weight: 600;
}

.ch2-modal__error {
  margin-top: 0.8em;
  padding: 0.6em 0.8em;
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.4);
  border-radius: var(--ch2-radius-m);
  color: #f87171;
  font-size: 1.3em;
  line-height: 1.4;
}

.ch2-modal__footer {
  display: flex;
  gap: 0.8em;
  padding: 1em 1.6em 1.4em;
  border-top: 1px solid var(--ch2-border);
}

.ch2-modal__btn {
  flex: 1 1 0;
  min-height: 4em;
  font-size: 1.4em;
}

/* Lock body scroll while the prompt modal is open (mobile keyboard can
   * otherwise scroll the wizard underneath). */

body.ch2-modal-open {
  overflow: hidden;
}

/* ===========================================================================
   * Field error + transient toast (input protection feedback)
   * ========================================================================= */

.ch2-char-counter {
  display: block;
  margin-top: 0.4em;
  font-size: 1.2em;
  text-align: right;
  line-height: 1;
}

/* The boolean `hidden` attribute must beat the component-layer `display: block`
   * above; without `!important` the component rule wins (same specificity, later
   * source order). Used by the name counter on step 6 to stay invisible until
   * the user crosses NAME_COUNTER_THRESHOLD. */

.ch2-char-counter[hidden] {
  display: none !important;
}

/* Name counter sits directly under the input, right-aligned with the dice
   * shuffle button (which sits at `right: 0.6em` of the 420px input wrap). The
   * counter inherits the same 420px-max + auto margins so it shares the wrap's
   * horizontal alignment, then nudges its right edge to the dice's column. */

[data-ch2-name-counter] {
  max-width: 420px;
  width: 100%;
  margin: 0 auto;
  text-align: right;
  padding-right: 0.6em;
}

.ch2-field-error {
  margin-top: 0.6em;
  color: #f87171;
  font-size: 1.5em;
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
}

/* Inside the inline age wrapper, place error to the right instead of below. */

.ch2-input-wrap--inline .ch2-field-error {
  margin-top: 0;
  font-size: 1.6em;
  white-space: nowrap;
}

.ch2-input.is-invalid,
  input.is-invalid {
  border-color: #ef4444 !important;
  box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.25);
}

.ch2-toast {
  position: fixed;
  top: 2rem;
  left: 50%;
  transform: translateX(-50%) translateY(-2rem);
  padding: 1.2rem 2rem;
  min-width: 280px;
  max-width: 90vw;
  background: #2a2a2a;
  color: var(--ch2-text);
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-radius: 1.2rem;
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 1.4;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease, transform 0.22s ease;
  z-index: 200;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.06);
}

/* ---------- Advanced collapsible (step 8 background story) ---------- */

.ch2-advanced {
  margin-top: 2em;
}

.ch2-advanced__toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  background: none;
  border: none;
  color: var(--ch2-text-muted);
  font: inherit;
  font-size: 1.3em;
  cursor: pointer;
  padding: 0.4em 0;
}

.ch2-advanced__toggle:hover {
  color: var(--ch2-text);
}

.ch2-advanced__chevron {
  display: inline-block;
  transition: transform 0.18s ease;
}

.ch2-advanced__toggle.is-open .ch2-advanced__chevron {
  transform: rotate(180deg);
}

.ch2-advanced__panel {
  margin-top: 1em;
}

.ch2-advanced__panel.hidden {
  display: none;
}

.ch2-label--sub {
  font-size: 1.2em;
  margin-bottom: 0.6em;
  color: var(--ch2-text-muted);
}

/* Textarea variant of .ch2-input — drops the single-line-input sizing
     (fixed height, icon/action padding, centered 420px wrap) so the field
     fills its panel and reads as a multi-line block. */

.ch2-advanced__panel .ch2-input-wrap {
  max-width: none;
  margin: 0;
  display: block;
}

.ch2-input--textarea {
  display: block;
  width: 100%;
  height: auto;
  min-height: 8em;
  padding: 1em 1.2em;
  line-height: 1.4;
  resize: vertical;
  font-family: inherit;
}

/* iOS Safari auto-zooms into any focused form field whose computed font-size
   * is below 16px. The wizard's 10px-base + em-everywhere scale produces 13–14px
   * text on inputs (.ch2-input = 1.4em, --number = 1.3em, --textarea inherits),
   * which triggers the unwanted zoom on every focus. Bump inputs to a hard 16px
   * on mobile only — desktop sizing is unchanged so the visual scale stays
   * identical to design. Using `font-size` in px (not em) intentionally so the
   * 10px parent doesn't scale it back down. */

@media (max-width: 767px) {
  .ch2-input,
    .ch2-input--number,
    .ch2-input--textarea {
    font-size: 16px;
  }
}

.ch2-advanced__meta {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1em;
  margin-top: 0.6em;
}

.ch2-advanced__notice {
  font-size: 1.1em;
  color: var(--ch2-text-muted);
  line-height: 1.35;
  margin: 0;
  flex: 1 1 auto;
}

.ch2-advanced__meta .ch2-char-counter {
  margin-top: 0;
  flex: 0 0 auto;
  white-space: nowrap;
}

.ch2-toast.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.ch2-toast--moderation {
  max-width: 46rem;
  padding: 1.4rem 2rem;
  border-color: rgba(250, 61, 114, 0.55);
  background: #2a1a1f;
}

.ch2-toast--error {
  max-width: 46rem;
  padding: 1.3rem 2rem;
  border-color: rgba(239, 68, 68, 0.55);
  background: #2a1a1a;
}

/* ---------- Admin debug FAB (test body generation) ------------------- */

/* Floating action button visible only to staff/superuser. Triggers a
   * face→body generation against the v1 endpoint using the current URL
   * selections, then shows the body image in a modal for visual QA. */

.ch2-debug-fab {
  position: fixed;
  right: 1.6rem;
  bottom: 9rem;
  z-index: 250;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.9em 1.2em;
  background: #f59e0b;
  color: #1a1207;
  border: 2px solid rgba(0, 0, 0, 0.25);
  border-radius: 999px;
  font: inherit;
  font-size: 1.25em;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.45);
  transition: transform 0.12s ease, box-shadow 0.12s ease, opacity 0.12s ease;
}

.ch2-debug-fab:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.55);
}

.ch2-debug-fab:disabled {
  opacity: 0.6;
  cursor: progress;
}

@media (max-width: 575px) {
  .ch2-debug-fab {
    bottom: 11rem;
    right: 1.2rem;
    font-size: 1.15em;
    padding: 0.7em 1em;
  }

  .ch2-debug-fab span {
    display: none;
  }
}

.ch2-debug-modal .ch2-modal__content {
  max-width: 560px;
}

.ch2-debug-modal__image-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 2 / 3;
  background: var(--ch2-white-xs);
  border-radius: 0.8em;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ch2-debug-modal__loader {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8em;
  color: var(--ch2-text-muted);
  font-size: 1.2em;
  text-align: center;
  padding: 1em;
}

.ch2-debug-modal__loader[hidden] {
  display: none;
}

.ch2-debug-modal__img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  display: block;
}

.ch2-debug-modal__img[hidden] {
  display: none;
}

/* ===== SECTION 1: PAGE & CONTAINER STYLES ===== */

.video-feed-page {
  position: relative;
  width: 100%;
  /* Account for navbar height (typically 80px) */
  height: calc(100vh - 80px);
  overflow: hidden;
  background: #000;
}

.video-feed-container {
  width: 100%;
  height: calc(100vh - 80px);
  overflow-y: scroll;
  overflow-x: hidden;
  scroll-behavior: smooth;
  /* CSS Scroll Snap - TikTok-style vertical snapping */
  scroll-snap-type: y mandatory;
  /* Hide scrollbar but keep functionality */
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.video-feed-container::-webkit-scrollbar {
  display: none;
}

/* ===== SECTION 2: SCROLL SNAP BEHAVIOR ===== */

.video-feed-item {
  /* Each video takes available viewport height (minus navbar) */
  width: 100%;
  height: calc(100vh - 80px);
  min-height: calc(100vh - 80px);
  /* Snap alignment */
  scroll-snap-align: start;
  scroll-snap-stop: always;
  /* Layout */
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  /* Smooth transitions */
  transition: opacity 0.3s ease;
}

/* ===== SECTION 3: VIDEO PLAYER STYLES ===== */

/* Poster image as CSS background (hidden when video is playing) */

.video-poster {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 1;
  /* Above black background, below video */
  transition: opacity 0.3s ease;
}

/* Hide poster when video is playing */

.video-feed-item.video-playing .video-poster {
  opacity: 0;
  pointer-events: none;
}

.video-feed-item video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  background: transparent;
  /* Transparent so poster shows through */
  z-index: 2;
  /* Above poster */
}

/* Video playing state */

.video-feed-item.video-playing video {
  background: transparent;
}

/* ===== SECTION 4: VIDEO PLAYER CONTROLS ===== */

/* Play/Pause button overlay */

.play-button-overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  pointer-events: none;
  z-index: 5;
  transition: background 0.3s ease;
}

.play-button-overlay svg {
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.8));
  pointer-events: none;
}

/* Show play button when paused */

.video-feed-item.paused .play-button-overlay {
  background: rgba(0, 0, 0, 0.3);
}

.video-feed-item.paused .play-button-overlay svg {
  opacity: 0.9;
}

/* Hover effect on play button */

.video-feed-item:hover .play-button-overlay svg {
  transform: scale(1.05);
}

/* Audio feedback overlay (shown when toggling sound) */

.audio-feedback-overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.5);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  z-index: 30;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.audio-feedback-overlay svg {
  filter: drop-shadow(0 4px 16px rgba(0, 0, 0, 0.9));
  animation: audioFeedbackPulse 0.3s ease-out;
}

@keyframes audioFeedbackPulse {
  0% {
    transform: scale(0.8);
    opacity: 0;
  }

  50% {
    transform: scale(1.1);
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* ===== SECTION 5: OVERLAYS & INFO ===== */

/* Video info gradient overlay at bottom */

.video-feed-item .video-info-overlay {
  background: linear-gradient(
      to top,
      rgba(0, 0, 0, 0.95) 0%,
      rgba(0, 0, 0, 0.7) 40%,
      rgba(0, 0, 0, 0.3) 70%,
      transparent 100%
    );
  z-index: 10;
  pointer-events: none;
}

/* Video info toggle button (collapse/expand) - styled like other side buttons */

.video-info-toggle {
  pointer-events: auto;
  z-index: 20;
  transition: all 0.2s ease;
}

.video-info-toggle:hover {
  transform: scale(1.1);
}

.video-info-toggle:active {
  transform: scale(0.95);
}

/* Arrow rotation when collapsed (pointing up to show "expand") */

.video-info-toggle.collapsed svg {
  transform: rotate(180deg);
}

/* Collapsible content wrapper */

.video-info-content {
  max-height: 200px;
  overflow: hidden;
  transition: max-height 0.3s ease, opacity 0.3s ease;
}

.video-info-content.collapsed {
  max-height: 0;
  opacity: 0;
}

/* Hide gradient overlay when content is collapsed */

.video-info-overlay:has(.video-info-content.collapsed) {
  background: transparent !important;
}

/* Bot name */

.video-feed-item:not(.video-feed-funnel-card) h3 {
  color: white;
  font-weight: bold;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
  letter-spacing: 0.01em;
}

/* Description text */

.video-feed-item:not(.video-feed-funnel-card) p {
  color: #e5e7eb;
  /* gray-200 equivalent */
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
  line-height: 1.4;
}

/* ===== SECTION 6: BUTTONS & INTERACTIVE ELEMENTS ===== */

/* Mute/Unmute button */

.mute-button {
  pointer-events: auto;
  z-index: 20;
  transition: all 0.2s ease;
}

.mute-button:hover {
  transform: scale(1.1);
}

.mute-button:active {
  transform: scale(0.95);
}

/* Chat button */

.chat-button {
  pointer-events: auto;
  z-index: 20;
  transition: all 0.2s ease;
}

.chat-button:hover {
  transform: scale(1.1);
}

.chat-button:active {
  transform: scale(0.95);
}

/* Share button */

.share-button {
  pointer-events: auto;
  z-index: 20;
  transition: all 0.2s ease;
}

.share-button:hover {
  transform: scale(1.1);
}

.share-button:active {
  transform: scale(0.95);
}

/* Community CTA Button (Gradient button for community videos) */

.community-cta-button {
  pointer-events: auto;
  z-index: 20;
  max-width: 90%;
  /* Prevent button from extending beyond video edges */
  text-align: center;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
  /* Override Tailwind padding */
  padding: 8px 32px !important;
  font-size: 1rem !important;
}

/* Home button (Both Mobile and Desktop) */

.home-button {
  pointer-events: auto;
  z-index: 20;
  transition: all 0.2s ease;
  display: flex;
  /* Visible on both mobile and desktop */
}

.home-button:hover {
  transform: scale(1.1);
}

.home-button:active {
  transform: scale(0.95);
}

/* Like button */

.like-button {
  pointer-events: auto;
  z-index: 20;
  transition: all 0.2s ease;
}

.like-button:hover {
  transform: scale(1.1);
}

.like-button:active {
  transform: scale(0.95);
}

/* Like icon animation */

.like-icon {
  transition: all 0.2s ease;
}

/* Like count */

.like-count {
  pointer-events: none;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
  position: absolute;
  bottom: 23rem;
  right: 1rem;
  z-index: 10;
  width: 3rem;
  /* w-12 */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Shared video badge */

.shared-badge {
  pointer-events: none;
  z-index: 15;
  animation: sharedBadgePulse 2s ease-in-out infinite, sharedBadgeFadeOut 1s ease-out 5s forwards;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

@keyframes sharedBadgePulse {
  0%, 100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.05);
  }
}

@keyframes sharedBadgeFadeOut {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    pointer-events: none;
  }
}

/* Share toast notification */

.share-toast {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  transform-origin: center top;
}

@keyframes toastSlideDown {
  0% {
    opacity: 0;
    transform: translate(-50%, -20px) scale(0.95);
  }

  100% {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
  }
}

@keyframes toastSlideUp {
  0% {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -20px) scale(0.95);
  }
}

/* Bot name link */

.bot-name-link {
  pointer-events: auto;
  cursor: pointer;
}

/* Bot profile picture (circle with gradient border) */

.bot-profile-pic {
  display: block;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  border: 2px solid transparent;
  background: linear-gradient(#000, #000) padding-box,
                linear-gradient(135deg, #E19C11 0%, #E118D9 100%) border-box;
}

.bot-name-link:hover .bot-profile-pic {
  transform: scale(1.05);
  box-shadow: 0 6px 16px rgba(225, 24, 217, 0.4),
                0 0 20px rgba(225, 156, 17, 0.3);
}

/* Tag bubbles (now clickable buttons) */

.video-feed-item .tag-filter-button {
  background: rgba(255, 255, 255, 0.15);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: all 0.2s ease;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  pointer-events: auto;
  cursor: pointer;
}

.video-feed-item .tag-filter-button:hover {
  background: rgba(255, 255, 255, 0.25);
  border-color: rgba(255, 255, 255, 0.3);
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.video-feed-item .tag-filter-button:active {
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* ===== SECTION 7: ANIMATIONS & TRANSITIONS ===== */

/* Fade in animation for new videos */

.video-feed-item {
  animation: fadeIn 0.4s ease-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* Loading indicator */

#video-feed-loading {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }

  50% {
    opacity: 0.6;
  }
}

/* Smooth scroll behavior */

@supports (scroll-behavior: smooth) {
  .video-feed-container {
    scroll-behavior: smooth;
  }
}

/* ===== SECTION 8: RESPONSIVE DESIGN ===== */

/* Mobile optimizations */

@media (max-width: 767px) {
  .video-feed-item:not(.video-feed-funnel-card) h3 {
    font-size: 1.125rem;
  }

  .video-feed-item:not(.video-feed-funnel-card) p {
    font-size: 0.875rem;
  }

  .play-button-overlay svg {
    width: 4rem;
    height: 4rem;
  }

  .share-button {
    width: 3rem;
    height: 3rem;
    bottom: 8rem;
    right: 1rem;
  }

  .share-button svg {
    width: 1.5rem;
    height: 1.5rem;
  }

  .mute-button {
    width: 3rem;
    height: 3rem;
    bottom: 12rem;
    right: 1rem;
  }

  .mute-button svg {
    width: 1.5rem;
    height: 1.5rem;
  }

  .chat-button {
    width: 3rem;
    height: 3rem;
    bottom: 16rem;
    right: 1rem;
  }

  .chat-button svg {
    width: 1.5rem;
    height: 1.5rem;
  }

  .home-button {
    width: 3rem;
    height: 3rem;
    bottom: 24rem;
    right: 1rem;
  }

  .home-button svg {
    width: 1.5rem;
    height: 1.5rem;
  }

  .like-button {
    width: 3rem;
    height: 3rem;
    bottom: 20rem;
    right: 1rem;
  }

  .like-button svg {
    width: 1.5rem;
    height: 1.5rem;
  }

  .like-count {
    bottom: 22.5rem;
    right: 1rem;
    width: 3rem;
    /* Match button width for centering */
  }

  /* Community CTA button - smaller on mobile */

  .community-cta-button {
    font-size: 0.75rem !important;
    white-space: nowrap;
    padding: 4px 12px !important;
  }

  /* Community CTA container - move up on mobile to avoid overlapping text/tags */

  .community-cta-container {
    bottom: 6rem !important;
  }

  /* Bot profile picture - smaller on mobile */

  .bot-profile-pic {
    width: 2.5rem;
    height: 2.5rem;
  }

  /* Adjust bottom padding for mobile safe area */

  .video-feed-item .absolute.bottom-0 {
    padding-bottom: max(1.25rem, env(safe-area-inset-bottom));
  }

   {
    font-size: 0.875rem !important;
    height: 1.5rem !important;
    bottom: 22.5rem !important;
    right: 1rem !important;
    width: 3rem !important;
    /* Match button width for centering */
  }

  /* Community CTA button - smaller on mobile */

   {
    font-size: 0.75rem !important;
    white-space: nowrap !important;
    padding: 4px 12px !important;
  }

  /* Community CTA container - move up on mobile to avoid overlapping text/tags */

   {
    bottom: 6rem !important;
  }

  /* Bot profile picture - smaller on mobile */

   {
    width: 2.5rem !important;
    height: 2.5rem !important;
  }

  /* Adjust bottom padding for mobile safe area */

  .video-feed-item .absolute.\!bottom-0 {
    padding-bottom: max(1.25rem, env(safe-area-inset-bottom)) !important;
  }
}

/* Tablet adjustments */

@media (min-width: 768px) and (max-width: 1023px) {
  .video-feed-item:not(.video-feed-funnel-card) h3 {
    font-size: 1.25rem;
  }

  .play-button-overlay svg {
    width: 5rem;
    height: 5rem;
  }
}

/* Desktop - limit video width to 9:16 portrait aspect ratio */

@media (min-width: 1024px) {
  .video-feed-page {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .video-feed-container {
    /* 9:16 aspect ratio: width = height * 9/16 = height * 0.5625 */
    /* Height is calc(100vh - 80px), so width = calc((100vh - 80px) * 0.5625) */
    width: calc((100vh - 80px) * 0.5625);
    max-width: min(calc((100vh - 80px) * 0.5625), 600px);
    margin: 0 auto;
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    border-right: 1px solid rgba(255, 255, 255, 0.1);
  }

  /* More padding between heart icon and home icon on desktop */

  .home-button {
    bottom: 25.5rem;
    /* Increased from 24rem (bottom-96) for more spacing */
  }
}

/* ===== SECTION 9: ACCESSIBILITY ===== */

/* Focus states for keyboard navigation */

.video-feed-item:focus-visible {
  outline: 3px solid #E118D9;
  outline-offset: -3px;
}

.mute-button:focus-visible {
  outline: 2px solid #E118D9;
  outline-offset: 2px;
}

.chat-button:focus-visible {
  outline: 2px solid #E118D9;
  outline-offset: 2px;
}

.share-button:focus-visible {
  outline: 2px solid #E118D9;
  outline-offset: 2px;
}

.like-button:focus-visible {
  outline: 2px solid #E118D9;
  outline-offset: 2px;
}

.bot-name-link:focus-visible {
  outline: 2px solid #E118D9;
  outline-offset: 2px;
  border-radius: 4px;
}

.community-cta-button:focus-visible {
  outline: 2px solid #E118D9;
  outline-offset: 2px;
}

/* High contrast mode support */

@media (prefers-contrast: high) {
  .video-feed-item .absolute.bottom-0 {
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 1) 0%,
        rgba(0, 0, 0, 0.9) 40%,
        rgba(0, 0, 0, 0.5) 70%,
        transparent 100%
      );
  }

  .video-feed-item .absolute.\!bottom-0 {
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 1) 0%,
        rgba(0, 0, 0, 0.9) 40%,
        rgba(0, 0, 0, 0.5) 70%,
        transparent 100%
      ) !important;
  }
}

/* Reduced motion support */

@media (prefers-reduced-motion: reduce) {
  .video-feed-container {
    scroll-behavior: auto;
  }

  .video-feed-item,
    .play-button-overlay svg,
    .mute-button,
    .chat-button,
    .share-button,
    .like-button,
    .like-icon,
    .bot-name-link,
    .community-cta-button,
    .video-feed-item span[class*="px-"] {
    transition: none;
    animation: none;
  }

  .video-feed-item:hover .play-button-overlay svg,
    .mute-button:hover,
    .chat-button:hover,
    .share-button:hover,
    .like-button:hover,
    .community-cta-button:hover,
    .video-feed-item span[class*="px-"]:hover {
    transform: none;
  }
}

/* ===== SECTION 10: UTILITY CLASSES ===== */

/* Text truncation */

.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* iOS Safari specific fixes */

@supports (-webkit-touch-callout: none) {
  .video-feed-page {
    /* Fix for iOS viewport height issues - account for navbar */
    height: calc(-webkit-fill-available - 80px);
  }

  .video-feed-item {
    /* Fix for iOS viewport height issues - account for navbar */
    height: calc(-webkit-fill-available - 80px);
  }

  .video-feed-container {
    height: calc(-webkit-fill-available - 80px);
  }
}

/* Landscape orientation on mobile */

@media (max-width: 767px) and (orientation: landscape) {
  .video-feed-item .absolute.bottom-0 {
    padding: 1rem 1.5rem 1rem;
  }

  .video-feed-item:not(.video-feed-funnel-card) h3 {
    font-size: 1rem;
  }

  .video-feed-item:not(.video-feed-funnel-card) p {
    font-size: 0.75rem;
  }

  .share-button {
    width: 2rem;
    height: 2rem;
    bottom: 6rem;
  }

  .share-button svg {
    width: 1rem;
    height: 1rem;
  }

  .mute-button {
    width: 2rem;
    height: 2rem;
    bottom: 9rem;
  }

  .mute-button svg {
    width: 1rem;
    height: 1rem;
  }

  .chat-button {
    width: 2rem;
    height: 2rem;
    bottom: 12rem;
  }

  .chat-button svg {
    width: 1rem;
    height: 1rem;
  }

  .like-button {
    width: 2rem;
    height: 2rem;
    bottom: 15rem;
  }

  .like-button svg {
    width: 1rem;
    height: 1rem;
  }

  .like-count {
    bottom: 16.5rem;
  }

  /* Community CTA button - no size override in landscape */

  .video-feed-item .absolute.\!bottom-0 {
    padding: 1rem 1.5rem 1rem !important;
  }

   {
    font-size: 0.75rem !important;
    width: 1rem !important;
    height: 1rem !important;
    bottom: 16.5rem !important;
  }

  /* Community CTA button - no size override in landscape */
}

/* ===== SECTION 11: TAG SEARCH FUNCTIONALITY ===== */

/* Tag search button (top-left on each video) */

.tag-search-button {
  pointer-events: auto;
  z-index: 20;
  transition: all 0.2s ease;
}

.tag-search-button:hover {
  transform: scale(1.1);
}

.tag-search-button:active {
  transform: scale(0.95);
}

/* Inline tag search bar */

#inline-tag-search {
  animation: slideDown 0.2s ease-out;
  /* Desktop: Center horizontally on screen, position near top */
  left: 50%;
  transform: translateX(-50%);
  top: 5rem;
}

@keyframes slideDown {
  from {
    transform: translateX(-50%) translateY(-10px);
    opacity: 0;
  }

  to {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
  }
}

/* Available tags list scrollbar */

#available-tags-list::-webkit-scrollbar {
  width: 6px;
}

#available-tags-list::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 3px;
}

#available-tags-list::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 3px;
}

#available-tags-list::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3);
}

/* Mobile responsive for tag search */

@media (max-width: 767px) {
  .tag-search-button {
    width: 3rem;
    height: 3rem;
    top: 1rem;
    right: 1rem;
  }

  .tag-search-button svg {
    width: 1.5rem;
    height: 1.5rem;
  }

  #inline-tag-search {
    width: calc(100vw - 2rem);
    left: 50%;
    transform: translateX(-50%);
    top: 1rem;
    /* Higher on video with small margin */
  }
}

/* Landscape orientation on mobile for tag search button */

@media (max-width: 767px) and (orientation: landscape) {
  .tag-search-button {
    width: 2rem;
    height: 2rem;
    top: 0.5rem;
    right: 0.5rem;
  }

  .tag-search-button svg {
    width: 1rem;
    height: 1rem;
  }

  #inline-tag-search {
    top: 0.5rem;
    /* Higher on video with small margin in landscape */
    left: 50%;
    transform: translateX(-50%);
    width: calc(100vw - 1rem);
  }
}

/* Reduced motion for tag search */

@media (prefers-reduced-motion: reduce) {
  #inline-tag-search,
    .tag-search-button {
    animation: none;
    transition: none;
  }

  .tag-search-button:hover {
    transform: none;
  }
}

/* ===== SECTION 12: MOBILE-ONLY NAVBAR AUTO-HIDE ===== */

/* Mobile only: Full viewport height + fixed navbar */

@media (max-width: 768px) {
  /* Completely hide navbar on mobile video feed pages */

  /* Desktop users will still see the navbar normally */

  body:has(.video-feed-page) .header-sticky {
    display: none !important;
  }

  .video-feed-page {
    height: 100vh;
    height: 100dvh;
    /* Modern browsers: handles dynamic address bar natively */
    height: calc(var(--vh, 1vh) * 100);
    /* Android JS fallback for older browsers */
  }

  .video-feed-container {
    height: 100vh;
    height: 100dvh;
    height: calc(var(--vh, 1vh) * 100);
  }

  .video-feed-item {
    height: 100vh;
    height: 100dvh;
    height: calc(var(--vh, 1vh) * 100);
    min-height: 100vh;
    min-height: 100dvh;
    min-height: calc(var(--vh, 1vh) * 100);
  }

  /* iOS Safari specific fixes for mobile - overrides Android fix */

  @supports (-webkit-touch-callout: none) {
    .video-feed-page {
      height: -webkit-fill-available !important;
    }

    .video-feed-container {
      height: -webkit-fill-available !important;
    }

    .video-feed-item {
      height: -webkit-fill-available !important;
      min-height: -webkit-fill-available !important;
    }
  }
}

/* Navbar transition for auto-hide functionality */

.header-sticky {
  transition: transform 0.3s ease;
}

/* ===== SECTION 13: SCROLL CONTROL ARROWS (DESKTOP ONLY) ===== */

/* Container for scroll arrows */

.scroll-arrows {
  position: fixed;
  right: 2rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 25;
  display: none;
  /* Hidden by default */
  flex-direction: column;
  gap: 1.5rem;
  pointer-events: none;
}

/* Base scroll arrow button styles */

.scroll-arrow {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: linear-gradient(135deg, #E118D9 0%, #FFB800 100%);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  pointer-events: auto;
  opacity: 0.7;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

.scroll-arrow svg {
  width: 1.5rem;
  height: 1.5rem;
  color: white;
  stroke-width: 3;
}

/* Hover state */

.scroll-arrow:hover {
  opacity: 1;
  transform: scale(1.1);
  box-shadow: 0 6px 20px rgba(225, 24, 217, 0.6);
}

/* Active state */

.scroll-arrow:active {
  transform: scale(0.95);
}

/* Disabled state */

.scroll-arrow:disabled {
  opacity: 0.3;
  cursor: not-allowed;
  pointer-events: none;
}

/* Loading spinner state for down arrow (next video loading) */

.scroll-arrow-down.loading {
  pointer-events: none;
  cursor: default;
}

.scroll-arrow-down.loading svg {
  display: none;
}

.scroll-arrow-down.loading::after {
  content: '';
  width: 1.5rem;
  height: 1.5rem;
  border: 3px solid rgba(255, 255, 255, 0.3);
  border-top-color: white;
  border-radius: 50%;
  animation: arrow-spin 0.8s linear infinite;
}

@keyframes arrow-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Focus state for accessibility */

.scroll-arrow:focus-visible {
  outline: 2px solid #E118D9;
  outline-offset: 3px;
}

/* Position adjustments for individual arrows */

.scroll-arrow-up {
  margin-bottom: 0.5rem;
}

.scroll-arrow-down {
  margin-top: 0.5rem;
}

/* Desktop only - show and position outside video container */

@media (min-width: 1024px) {
  .scroll-arrows {
    /* Show arrows on desktop only */
    display: flex;
    /* Position arrows far to the right, outside the centered video container */
    /* Calculate: (viewport width - video container width) / 2 - arrow button width - margin */
    right: calc((100vw - min(calc((100vh - 80px) * 0.5625), 600px)) / 2 - 5rem);
  }
}

/* Reduced motion support */

@media (prefers-reduced-motion: reduce) {
  .scroll-arrow {
    transition: opacity 0.2s ease;
  }

  .scroll-arrow:hover,
    .scroll-arrow:active {
    transform: none;
  }
}

/* ===== SECTION 14: SHIMMER LOADING EFFECT ===== */

/* Shimmer loading effect for video posters during load */

.video-feed-item.video-loading::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 6;
  /* Above video but below UI controls */
  pointer-events: none;
  /* Dark tint base so poster shows through + animated shimmer highlight */
  background:
      linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.2) 50%,
        transparent 100%
      ),
      rgba(0, 0, 0, 0.3);
  background-size: 200% 100%, 100% 100%;
  background-position: -200% 0, 0 0;
  animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
  0% {
    background-position: -200% 0, 0 0;
  }

  100% {
    background-position: 200% 0, 0 0;
  }
}

/* Respect reduced motion preference for shimmer */

@media (prefers-reduced-motion: reduce) {
  .video-feed-item.video-loading::before {
    animation: none;
    background: rgba(255, 255, 255, 0.08);
  }
}

/* ===== SECTION 15: ADVERTISEMENT CTA BUTTON ===== */

/* Advertisement CTA button (bottom center, gradient pill) */

.ad-cta-button {
  pointer-events: auto;
  z-index: 20;
  max-width: 90%;
  /* Prevent button from extending beyond video edges */
  text-align: center;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
  /* Match community-cta-button sizing */
  padding: 8px 32px !important;
  font-size: 1rem !important;
}

.ad-cta-button:hover {
  filter: brightness(1.1);
}

.ad-cta-button:active {
  filter: brightness(0.95);
}

.ad-cta-button:focus-visible {
  outline: 2px solid #E118D9;
  outline-offset: 2px;
}

/* Mobile adjustments for ad button - match community-cta-button */

@media (max-width: 767px) {
  .ad-cta-button {
    font-size: 0.75rem !important;
    white-space: nowrap;
    padding: 4px 12px !important;
  }

  /* Ad CTA container - move up on mobile to avoid overlapping text/tags */

  .ad-cta-container {
    bottom: 3.5rem !important;
  }
}

/* Reduced motion support */

@media (prefers-reduced-motion: reduce) {
  .ad-cta-button {
    transition: none;
  }

  .ad-cta-button:hover,
    .ad-cta-button:active {
    transform: none;
    filter: none;
  }
}

/* ===== SECTION 16: LOCKED VIDEO CARDS ===== */

/* Register custom property for border animation */

@property --border-angle {
  syntax: '<angle>';

  inherits: false;

  initial-value: 0deg;
}

/* Locked card placeholder in video feed */

.video-feed-locked-card {
  background: linear-gradient(180deg,
      rgba(17, 17, 27, 0.98) 0%,
      rgba(30, 30, 46, 0.95) 50%,
      rgba(17, 17, 27, 0.98) 100%
    );
}

/* Shiny border overlay */

.video-feed-locked-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border: 4px solid transparent;
  border-radius: 0.75rem;
  background: conic-gradient(
      from var(--border-angle, 0deg),
      #FF36F7,
      #FFBA2F,
      #FF36F7,
      #FFBA2F,
      #FF36F7
    ) border-box;
  -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
          mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  animation: rotateBorder 3s linear infinite;
  pointer-events: none;
  z-index: 50;
}

@keyframes rotateBorder {
  to {
    --border-angle: 360deg;
  }
}

/* Lock icon container */

.video-feed-locked-card .w-20.h-20 {
  animation: lockPulse 2s ease-in-out infinite;
}

@keyframes lockPulse {
  0%, 100% {
    box-shadow: 0 0 20px rgba(225, 24, 217, 0.4),
                  0 0 40px rgba(255, 184, 0, 0.2);
  }

  50% {
    box-shadow: 0 0 30px rgba(225, 24, 217, 0.6),
                  0 0 60px rgba(255, 184, 0, 0.4);
  }
}

/* Unlock single video button */

.unlock-single-video-btn {
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(225, 24, 217, 0.3);
  pointer-events: auto;
  position: relative;
  z-index: 60;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.unlock-single-video-btn:hover {
  box-shadow: 0 6px 25px rgba(225, 24, 217, 0.5);
}

.unlock-single-video-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none !important;
}

/* Unlock all videos button */

.unlock-all-videos-btn {
  transition: all 0.3s ease;
  background-color: hsl(var(--static-dark));
  color: hsl(var(--static-white));
  pointer-events: auto;
  position: relative;
  z-index: 60;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* Share to unlock button */

.share-to-unlock-btn {
  pointer-events: auto;
  position: relative;
  z-index: 60;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.unlock-all-videos-btn:hover {
  background-color: #374151;
  /* gray-700 */
}

.unlock-all-videos-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none !important;
}

/* Mobile adjustments for locked cards */

@media (max-width: 767px) {
  .video-feed-locked-card .w-20.h-20 {
    width: 4rem;
    height: 4rem;
  }

  .video-feed-locked-card .w-10.h-10 {
    width: 2rem;
    height: 2rem;
  }

  .video-feed-locked-card h3 {
    font-size: 1.125rem;
  }

  .video-feed-locked-card p {
    font-size: 0.75rem;
  }

  .unlock-single-video-btn,
    .unlock-all-videos-btn {
    font-size: 0.75rem;
    padding: 0.625rem 1rem;
  }

  /* Home button on locked card - mobile positioning */

  .video-feed-locked-card .home-button {
    bottom: 24rem;
    right: 1rem;
    width: 3rem;
    height: 3rem;
  }

  .video-feed-locked-card .home-button svg {
    width: 1.5rem;
    height: 1.5rem;
  }
}

/* Reduced motion for locked cards */

@media (prefers-reduced-motion: reduce) {
  .video-feed-locked-card::before {
    animation: none;
    background: linear-gradient(135deg, #FF36F7, #FFBA2F) border-box;
  }

  .video-feed-locked-card .w-20.h-20 {
    animation: none;
  }

  .unlock-single-video-btn,
    .unlock-all-videos-btn {
    transition: opacity 0.2s ease;
  }

  .unlock-single-video-btn:hover,
    .unlock-all-videos-btn:hover {
    transform: none;
  }
}

/* Focus states for unlock buttons */

.unlock-single-video-btn:focus-visible,
  .unlock-all-videos-btn:focus-visible {
  outline: 2px solid #E118D9;
  outline-offset: 2px;
}

.posthog-badge {
  position: absolute;
  top: 4px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 50;
  background: hsl(var(--static-black) / 0.85);
  color: hsl(var(--static-white));
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
  pointer-events: none;
  white-space: nowrap;
  display: none;
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
  line-height: 1.4;
}

body.posthog-overlay-active .posthog-badge {
  display: block;
}

#posthog-overlay-toggle.active {
  opacity: 1;
}

#posthog-overlay-toggle.active svg {
  stroke: var(--primary, #FA3D72);
}

@media screen and (min-width:991px){
  .chat-main.active .togg-wrapper{
    margin-right: 10px;
    display: block;
  }

  .chat-main.active .search-box{
    padding-left: 77px;
  }

  .chat-main.active .search-box i{
    left: 1.8rem;
  }
}

@media screen and (max-width:991px) and (min-width:876px) {
  .landing-header .btn-grediant-outline{
    padding: 0;
    border: none;
  }

  .landing-header .btn-grediant-outline:before{
    display: none;
  }
}

@media screen and (max-width:991px) {
  .chat-main.active .chat-left{
    width: 65px !important;
  }

  .chat-main.active .chat-right{
    width: calc(100% - 65px) !important;
  }

  .gallery li {
    width: calc(25% - 4px) !important;
  }

  .content-creator-section {
    background-image: unset !important;
  }

  .bg-img-popup.bg-top{
    background-position: top right !important;
  }

  {
    width: 65px !important;
    width: calc(100% - 65px) !important;
    width: calc(25% - 4px) !important;
    background-image: unset !important;
  }

  .bg-img-popup.\!bg-top{
    background-position: top right !important;
  }
}

@media screen and (max-width:768px) {
  .chat-right .show-plan{
    text-align: left;
  }

  .chat-right .show-plan .hover-overlay{
    left: 0;
    bottom: 40px;
    width: 100vw;
    right: 0;
    position: fixed;
    top: unset;
    visibility: visible;
    padding-bottom: 0;
    box-shadow: none;
  }

  .message .message-box {
    width: 100%;
  }

  .active-toggle .toggle-text {
    display: block;
    z-index: 10;
    position: fixed;
    background-color: hsl(var(--white));
    bottom: 0;
    padding: 15px;
    width: 100%;
    text-align: center;
    border-radius: 15px 15px 0 0;
  }
}

@media screen and (max-width:875px) {
  .subscribe-container .wall-item:nth-of-type(1n+9) {
    display: none;
  }

  .wall-img-preview .wall-item:only-child {
    width: 100% !important;
  }

  .content-creator-section.background-image {
    display: none !important;
  }
}

@media screen and (max-width:575px) {
  .landing-header .navigation.show {
    top: 7px !important;
  }

  .gallery li {
    width: calc(33.33% - 4px) !important;
  }

  .forYouSlider:after {
    left: -40px !important;
  }

  .forYouSlider:before {
    right: -40px !important;
  }

  .content-creator-section {
    background-image: unset !important;
  }

  .landing-header .navigation.\!show {
    top: 7px !important;
  }

   {
    width: calc(33.33% - 4px) !important;
    left: -40px !important;
    right: -40px !important;
    background-image: unset !important;
  }
}

/*=====================
    Avatar CSS
  ==========================*/

.indicator {
  position: relative;
  max-width: -moz-fit-content;
  max-width: fit-content;
}

.avatar {
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 9999px;
}

.wall-img-preview .wall-item {
  float: left;
  padding: 8px;
}

.wall-img-preview .wall-item:first-child:nth-last-child(2),
.wall-img-preview .wall-item:first-child:nth-last-child(2)~div {
  width: 50%;
}

.wall-img-preview .wall-item:first-child:nth-last-child(10),
.wall-img-preview .wall-item:first-child:nth-last-child(10)~div:not(:last-child),
.wall-img-preview .wall-item:first-child:nth-last-child(11)~div:nth-last-of-type(-n+3),
.wall-img-preview .wall-item:first-child:nth-last-child(3),
.wall-img-preview .wall-item:first-child:nth-last-child(3)~div,
.wall-img-preview .wall-item:first-child:nth-last-child(4),
.wall-img-preview .wall-item:first-child:nth-last-child(4)~div:not(:last-child),
.wall-img-preview .wall-item:first-child:nth-last-child(5),
.wall-img-preview .wall-item:first-child:nth-last-child(5)~div:not(:nth-last-of-type(-n+2)),
.wall-img-preview .wall-item:first-child:nth-last-child(6),
.wall-img-preview .wall-item:first-child:nth-last-child(6)~div,
.wall-img-preview .wall-item:first-child:nth-last-child(7)~div:nth-last-of-type(-n+3),
.wall-img-preview .wall-item:first-child:nth-last-child(9),
.wall-img-preview .wall-item:first-child:nth-last-child(9)~div {
  width: 33.333333%;
}

.wall-img-preview .wall-item:first-child:nth-last-child(5)~div:nth-last-of-type(-n+2) {
  width: 50%;
}

.wall-img-preview .wall-item:first-child:nth-last-child(11),
.wall-img-preview .wall-item:first-child:nth-last-child(11)~div:not(:nth-last-of-type(-n+3)),
.wall-img-preview .wall-item:first-child:nth-last-child(12),
.wall-img-preview .wall-item:first-child:nth-last-child(12)~div,
.wall-img-preview .wall-item:first-child:nth-last-child(7),
.wall-img-preview .wall-item:first-child:nth-last-child(7)~div:not(:nth-last-of-type(-n+3)),
.wall-img-preview .wall-item:first-child:nth-last-child(8),
.wall-img-preview .wall-item:first-child:nth-last-child(8)~div {
  width: 25%;
}

.wall-img-preview .wall-item:first-child:nth-last-child(10)~div:nth-child(10),
.wall-img-preview .wall-item:first-child:nth-last-child(4)~div:nth-child(4),
.wall-img-preview .wall-item:only-child {
  width: 100%;
}

/*=====================
  Badges CSS
  ==========================*/

@keyframes heartbeat {
  0%, 40%, 100% {
    transform: scale(1);
  }

  10% {
    transform: scale(1.25);
  }

  20% {
    transform: scale(1);
  }

  30% {
    transform: scale(1.25);
  }
}

.heartbeat {
  animation: heartbeat 1.4s ease-in-out infinite;
  transform-origin: center;
  transform-box: fill-box;
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  .heartbeat {
    animation: none;
  }
}

/* Bots Tag Navigation Styles */

/***********************
 * Tag navigation bar for bots page
 * Seamless integration with page styling
 ***********************/

/*=====================
    Chat App CSS
  ==========================*/

.msg_main {
  box-shadow: 0px 2.328px 25.61px 0px rgba(114, 92, 193, 0.15), 0px -4.074px 13.387px 0px rgba(0, 0, 0, 0.02);
}

.msg_main .tab-pan .active {
  background-color: var(--lightgray);
}

.category-divider.toggle-speaker.active .normal-show {
  display: none;
}

.tag-filter.toggle-speaker.active .normal-show {
  display: none;
}

.home-tags-arrow.toggle-speaker.active .normal-show {
  display: none;
}

.ch2-section--custom-add.toggle-speaker.active .normal-show {
  display: none;
}

.ch2-advanced__panel.toggle-speaker.active .normal-show {
  display: none;
}

.toggle-speaker.active .normal-show{
  display: none;
}

.gi-helper-preset.toggle-speaker.active .normal-show {
  display: none;
}

.vip-price-toggle.toggle-speaker.active .normal-show {
  opacity: 0;
  pointer-events: none;
}

.promo-code-button-content.toggle-speaker.active .normal-show {
  display: none;
}

.promo-code-input-container.toggle-speaker.active .normal-show {
  display: none;
}

.promo-code-apply-link.toggle-speaker.active .normal-show {
  display: none;
}

.gv-toggle-meta.toggle-speaker.active .normal-show {
  display: none;
}

.best-choice .toggle-speaker.active .active-show::before {
  box-shadow: none;
  background-image: linear-gradient(to bottom, rgba(18, 19, 22, 0) 40%, rgba(18, 19, 22, 0.6) 90%);
}

.toggle-speaker.active .active-show{
  display: block;
}

:root.dark .toggle-speaker.active .active-show.shadow-white:before {
  background: linear-gradient(180deg, rgb(255 255 255 / 0%) 0%, #121316 100%);
}

.toggle-speaker.active .active-show:before{
  box-shadow: inset 0px -200px 100px -13px var(--dark-shadow);
  transition: all 0.3s ease;
  border-radius: 16px;
  top: 0;
  width: 100%;
  bottom: 0;
  left: 0;
  z-index: 1;
}

.toggle-speaker.active .active-show.shadow-white:before{
  border-radius: 0;
  box-shadow: none;
  background: linear-gradient(180deg, rgb(255 255 255 / 0%) 0%, #F2F3F5 100%);
}

.toggle-speaker.active .active-show.shadow-light:before{
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(68, 68, 68, 0.00) 0%, #444 100%);
}

.tab-content-wrap .toggle-speaker.active .active-show:before {
  border-radius: 0.5rem;
}

a.toggle-speaker.active .active-show.text-center.w-full.generate-link.overflow-hidden.group.rounded-2xl.hover\:-bg-white.drop-shadow-xl {
  animation: fadeIn .5s linear;
}

.gallery li {
  width: calc(20% - 4px);
  display: inline-block;
}

.gallery-active .gallery_item svg {
  opacity: 1 !important;
}

.gallery-active .gallery {
  display: block;
}

.chat_item {
  display: none;
}

.gallery-active .chat-inputs {
  display: none;
}

.gallery-active .chat_item {
  display: flex;
}

.gallery-active .gallery_item {
  display: none;
}

.chat-right.show {
  display: block !important;
}

.chat-main.active .search-box.active {
  min-width: 200px;
  background-color: hsl(var(--white));
}

.chat-main.active .chat-left {
  width: 100px;
}

.chat-main.active .chat-right {
  width: calc(100% - 100px);
}

.chat-main.active .tabs .px-6 {
  padding: 0 10px;
}

.chat-main.active .tabs .uppercase {
  display: none;
}

.chat-main.active .tabs .items-end {
  display: none;
}

.chat-main.active .tabs h4,
    .chat-main.active .tabs span {
  display: none;
}

.chat-main.active .tabs .active {
  background-color: transparent !important;
}

.chat-main.active .sidebar-btn {
  transform: rotate(180deg);
  margin-left: 7px;
  transition: all 0.3s ease;
}

.active-toggle .toggle-icon:before {
  height: 100vh;
  width: 100vw;
  bottom: 0;
  position: fixed;
  background-color: rgba(6, 6, 6, 0.37);
  padding: 20px;
  content: "";
  z-index: 9;
  left: 0;
}

.toggle-speaker.active svg {
  opacity: 1;
}

#fg-emoji-picker-move {
  display: none !important;
}

.fg-emoji-nav ul li li:nth-child(9) {
  display: none !important;
}

.msg.active {
  background-color: transparent !important;
  min-height: 45px;
  min-width: 120px;
}

@media (min-width: 768px) {
  .msg.active {
    padding: 0 12px !important;
  }
}

.msg textarea {
  overflow-y: auto;
  position: absolute;
  top: -30px;
  right: -12px;
  -ms-overflow-style: none;
  /* Hides scrollbar in Internet Explorer and Edge */
  scrollbar-width: none;
  /* Hides scrollbar in Firefox */
  min-width: 120px;
  min-height: 45px;
}

.msg textarea::-webkit-scrollbar {
  display: none;
  /* Hides scrollbar in Chrome, Safari, and Opera */
}

.msg.active .msg-content {
  opacity: 0;
  visibility: hidden;
}

.message-receiver .message-content .content.active {
  background-color: transparent;
  min-width: 120px;
}

.message-receiver .message-content .content.active .msg-content {
  opacity: 0;
}

.audio-pause-button {
  opacity: 0;
  visibility: hidden;
}

.audio-loading {
  opacity: 0;
  visibility: hidden;
}

.audio-controls.active .speak-button {
  opacity: 0;
  visibility: hidden;
}

.audio-controls.isLoading {
  border: none;
}

.audio-controls.isLoading .speak-button {
  opacity: 0;
  visibility: hidden;
}

.audio-controls.active .audio-pause-button {
  opacity: 1;
  visibility: visible;
}

.audio-controls.isLoading .audio-loading {
  opacity: 1;
  visibility: visible;
}

.chat-call-me-btn:hover #paint0_linear_5322_13970 .stop1 {
  stop-color: #fff;
}

.chat-call-me-btn:hover #paint0_linear_5322_13970 .stop2 {
  stop-color: #fff;
}

.chat-main-div {
  background: linear-gradient(212deg, #fcfcfc 11.7%, #fde1ed 88.3%);
}

.gallery-area {
  background: linear-gradient(212deg, #fcfcfc 11.7%, #fde1ed 88.3%);
}

.chat-tips-card {
  transform: translateX(-100%);
  transition: transform 0.5s ease;
}

.chat-tips-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 120px;
  background: linear-gradient(265deg, rgba(225, 24, 217, 0.95) 0%, rgba(225, 156, 17, 0.95) 100%);
  z-index: -1;
  border-radius: 12px 12px 0 0;
}

.chat-tips-card.slide-in-left {
  transform: translateX(0);
}

.chat-tips-card.slide-out-left {
  transform: translateX(-100%);
}

.dark .gallery-area {
  background: #000;
}

.dark .chat-tips-card{
  background-color: var(--dark);
}

.dark .chat-main-div {
  background: #000;
}

.dark .msg-edit-button{
  background-color: var(--lightgray);
}

.dark .audio-controls .stroke-secondary{
  stroke: var(--dark);
}

.dark .audio-controls .fill-secondary{
  fill: var(--dark);
}

.dark .gallery-icon{
  color: var(--dark);
}

.dark .ci-Paper_Plane{
  color: var(--dark);
}

.dark .ci-Add_Plus_Circle{
  color: var(--dark);
}

.dark .senario-icon{
  fill: var(--dark);
}

.mask-icon-dark {
  display: none;
}

.dark .mask-icon-dark {
  display: block;
}

.dark .mask-icon {
  display: none;
}

.audio-controls {
  background: rgba(136, 12, 131, 0.15);
}

/* Default state for the stopwatch toggle */

.toggle-custom-icon .active-show {
  display: none;
  /* Hide the active icon by default */
}

.toggle-custom-icon .normal-show {
  display: block;
  /* Show the normal icon by default */
  /* Or use 'inline-block' or 'inline' depending on your layout needs */
}

/* State when the toggle is active */

.toggle-custom-icon.active .normal-show {
  display: none;
  /* Hide the normal icon when active */
}

.toggle-custom-icon.active .active-show {
  display: block;
  /* Show the active icon when active */
  /* Or use 'inline-block' or 'inline' */
}

.msg i {
  font-style: italic;
}

/*=====================
  Dropdown CSS
==========================*/

/*=====================
    Form CSS
  ==========================*/

.errorlist {
  /* This is for the error messages in the login page "The email address and/or password you specified are not correct." */
  color: red;
}

/*=====================
  Modal CSS
  ==========================*/

/*=====================
  Swap CSS
  ==========================*/

/*=====================
    tab CSS
  ==========================*/

.border-b-05 {
  border-bottom-width: 0.5px ;
}

/*=====================
  Tooltip CSS
  ==========================*/

.signUpForm .form-header .stepIndicator {
  width: 100%;
  max-width: 184px;
  display: flex;
  align-items: start;
  opacity: 0.5;
  text-align: start;
}

.signUpForm .form-header .stepIndicator.finish,
.signUpForm .form-header .stepIndicator.active {
  opacity: 1;
}

.signUpForm .form-header .stepIndicator::after {
  content: "";
  position: absolute;
  top: 24px;
  width: 100%;
  height: 1px;
  background-color: #DDDDDD;
}

.signUpForm .form-header .stepIndicator:last-child:after {
  display: none;
}

.signUpForm .invalid {
  border: 2px solid #ffaba5;
}

.signUpForm .step {
  display: none;
}

/*=====================
  Collapse CSS
  ==========================*/

.modal-main.gradient-primary:before {
  box-shadow: inset 0px -120px 130px -60px rgb(255 255 255);
  transition: all 0.3s ease;
  height: 57%;
  top: 0;
  width: 100%;
  left: 0;
  z-index: 0;
}

.price-badge {
  width: -moz-max-content;
  width: max-content;
  font-size: 14px;
  left: 0;
  right: 0;
  margin: 0 auto;
  top: -16px;
  line-height: 1.35;
  letter-spacing: 1.8px;
}

.profile-card .like-star {
  top: 10px;
  left: 10px;
}

.profile-card .close-profile {
  top: 15px;
  right: 15px;
}

.profile-details {
  display: flex;
  flex-wrap: wrap;
}

.profile-details li {
  width: 50%;
  display: flex;
  align-items: center;
}

.profile-details li .custom-icon {
  height: 26px;
  margin-bottom: -9px;
}

.profile-details .bottom-details {
  border-top: 1px solid var(--bodytext);
}

/* divider css end  */

/* sign-up css start  */

span.show:after {
  content: "";
  position: absolute;
  height: 18px;
  width: 2px;
  display: inline-block;
  background-color: var(--light-border);
  right: 26px;
  border-radius: 5px;
  transform: rotate(150deg);
  top: 15px;
}

/* sign-up css end */

/* select2 css start */

.select2-container {
  max-width: 100%;
}

.select2-container .select2-selection--multiple {
  border: 1px solid var(--lightgraycolor);
  padding: 0.75rem;
  line-height: 0.5;
}

.select2-container .select2-search--inline .select2-search__field {
  margin-top: 0;
}

.select2-results__option:before {
  content: "";
  display: inline-block;
  position: relative;
  height: 20px;
  width: 20px;
  border: 2px solid #e9e9e9;
  border-radius: 4px;
  background-color: hsl(var(--white));
  margin-right: 20px;
  vertical-align: middle;
}

.select2-results__option[aria-selected=true]:before {
  font-family: coolicons;
  content: "\e976";
  color: hsl(var(--white));
  background-color: hsl(var(--blue));
  border: 0;
  display: inline-block;
  padding-left: 2px;
  line-height: 20px;
}

.select2-results__option:hover {
  background-color: var(--lightbluecolor) !important;
}

.select2-container--default .select2-results__option[aria-selected=true] {
  background-color: hsl(var(--white));
  color: var(--dark);
}

/* select2 css ends */

/*new update*/

.logo-shadow {
  filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
}

.chat-sidebar li:hover .delete_icon svg {
  opacity: 1 !important;
}

.bottom-navbar a.active i {
  color: var(--primary);
}

.line-hover::after {
  content: '';
  width: 1px;
  height: 1px;
  position: absolute;
  bottom: -4px;
  background-color: var(--dark);
  left: 0;
  transition: all 0.5s ease-in;
}

a:hover::after {
  width: 100%;
}

.bg-right:before {
  border-radius: 1000px;
  opacity: 0.5;
  background: linear-gradient(221deg, rgba(255, 186, 47, 0.50) 23.11%, rgb(255 210 249) 50%, rgba(255, 54, 247, 0.00) 70%);
  position: absolute;
  right: -42px;
  top: 142px;
  width: 255px;
  height: 265px;
}

.bg-right:after {
  content: "";
  opacity: 0.5;
  width: 630px;
  height: 630px;
  position: absolute;
  left: 0;
  right: 0;
  top: 30%;
  margin: 0 auto;
  border-radius: 100%;
  background: conic-gradient(from 225deg at 50% 50%, #FFBA2F 0deg, #FF36F7 360deg);
  filter: blur(80px);
}

.bg-left:before {
  border-radius: 1000px;
  background: linear-gradient(221deg, rgb(255 204 248) 45%, rgb(237 202 133 / 50%) 60%, rgba(255, 54, 247, 0.00) 80%);
  position: absolute;
  left: -120px;
  top: 50%;
  width: 465px;
  height: 482px;
  transform: rotate(-135deg);
}

.typed-cursor {
  font-size: 56px;
}

/* responsive css */

@media screen and (max-width:875px) {
  .blog-container .col-span-4:nth-of-type(1n+9) {
    display: none;
  }
}

@media screen and (max-width:575px) {
  .basicSlider .swiper-wrapper {
    flex-direction: column;
  }

  .basicSlider .swiper-wrapper li {
    width: 100%;
  }
}

@media screen and (max-width:675px) {
  .blog-container .col-span-4:nth-of-type(1n+7) {
    display: none;
  }

  .common-que>div:hover .w-full,
    .common-que>div.active .w-full {
    display: block;
  }
}

.delete-icon {
  margin-right: 20px;
  padding-right: 20px;
  border-right: 1px solid var(--overlay-bg);
}

.delete-icon i {
  border: 1px solid var(--overlay-bg);
}

.hover-overlay {
  visibility: hidden;
}

.show-tooltip:hover .hover-overlay {
  visibility: visible;
}

.edit_profile .info_input input,
        .edit_profile .info_input .edit-btn {
  display: block;
}

.edit_profile .info_input .form-sm {
  display: none;
}

.edit_profile .info_input .open .form-sm {
  display: block;
}

.edit_profile .info_input .open >input,
            .edit_profile .info_input .open .edit-btn {
  display: none;
}

.border-top-1 {
  border-top: 1px solid var(--chat-border);
}

/*new update 22-7-24*/

.h-\[calc\(100vh-132px\)\] {
  height: calc(100vh - 132px);
}

.bg-transparent {
  background-color: transparent !important;
}

span.vjs-icon-placeholder {
  line-height: inherit !important;
}

.video-js {
  width: 250px !important;
  height: auto !important;
}

.video-js.video-chat {
  height: 200px !important;
}

.video-js .vjs-big-play-button {
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
}

.modal-main .modal.modal-md {
  width: 90%;
}

@media (min-width: 992px) {
  .modal-main .modal.modal-lg {
    width: 800px;
  }
}

@media (min-width: 576px) {
  .modal-main .modal.modal-md {
    width: 500px;
  }
}

.message:last-child {
  margin-bottom: 12px;
}

.modal-main .modal {
  z-index: 9999;
}

.modal-main .modal-overlay {
  z-index: 9999;
}

.forYouSlider:after {
  left: 0;
  box-shadow: inset 200px -11px 49px -57px var(--bgbody);
}

.forYouSlider:before {
  right: 0;
  box-shadow: inset -200px -52px 34px -81px var(--bgbody);
}

@media screen and (max-width: 575px) {
  .forYouSlider:before,
    .forYouSlider:after {
    display: none
  }

  .swiper.forYouSlider .swiper-button-next,
    .swiper.forYouSlider .swiper-button-prev {
    height: 2rem;
    width: 2rem;
  }

  .arrow.right-side::before {
    right: -4px;
  }

  .arrow::before {
    top: -4px;
    left: -6px;
    padding: 4px;
  }
}

.profile-card {
  transform: translateX(-100%);
  transition: transform 0.5s ease;
}

.profile-card.slide-in-left {
  transform: translateX(0);
}

.profile-card.slide-out-left {
  transform: translateX(-100%);
}

.h-\[calc\(100vh-76px\)\] {
  height: calc(100vh - 76px);
}

.max-h-\[calc\(100vh-240px\)\] {
  max-height: calc(100vh - 240px);
}

.p-0 {
  padding: 0px !important;
}

.px-0 {
  padding-left: 0px !important;
  padding-right: 0px !important;
}

@media screen and (max-width: 991px) {
  .lg\:text-\[32px\] {
    font-size: 32px;
  }

  .lg\:pr-0 {
    padding-right: 0px !important;
  }

  .lg\:max-h-\[calc\(100vh-185px\)\] {
    max-height: calc(100vh - 185px);
  }

  .lg\:max-h-\[calc\(100vh-220px\)\] {
    max-height: calc(100vh - 220px);
  }
}

.dark .basicSlider .bg-white,
.dark .basicSlider .bg-white {
  background-color: hsl(var(--black));
  color: hsl(var(--white));
}

@media (max-width: 768px) {
  .tap-top {
    bottom: 90px;
  }
}

@media (max-width: 479px) {
  .xs\:hidden {
    display: none;
  }
}

.dot {
  animation: wave 1s linear infinite;
  animation-delay: -0.9s;
  display: inline-block;
}

.dot.two {
  animation-delay: -0.7s;
}

.dot:nth-child(3) {
  animation-delay: -0.6s;
}

@keyframes wave {
  0%,
    60%,
    100% {
    transform: initial;
  }

  30% {
    transform: translateY(-10px);
  }
}

.dropdown .dropdown-menu {
  min-width: -webkit-max-content
}

.best-deal-tag {
  position: absolute;
  top: -20px;
  left: 40%;
}

.h-\[calc\(100\%-60px\)\] {
  height: calc(100% - 60px);
}

.gallery-nav-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: absolute;
  top: 50%;
  z-index: 9;
  width: 100%;
}

.gallery-nav-btn .swiper-button-next,
.gallery-nav-btn .swiper-button-prev {
  height: 40px;
  width: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: white;
  color: black;
  border-radius: 50%;
}

/* Hide default Swiper navigation icons */

.gallery-nav-btn .swiper-button-next::after,
.gallery-nav-btn .swiper-button-prev::after {
  content: none;
  display: none;
}

/* Ensure custom icons are visible */

.gallery-nav-btn .swiper-button-next i,
.gallery-nav-btn .swiper-button-prev i {
  display: block;
  font-size: 20px;
}

.gradient-dark {
  background: #121316;
  position: relative;
  z-index: 1;
}

.gradient-dark:after {
  content: '';
  position: absolute;
  height: 260px;
  width: 260px;
  left: -60px;
  background-color: rgba(225, 24, 217, 0.9);
  filter: blur(140px);
  border-radius: 50%;
  bottom: -60px;
  z-index: -1;
}

.gradient-dark::before {
  content: '';
  position: absolute;
  height: 260px;
  width: 260px;
  right: -60px;
  background-color: rgba(118, 126, 32, 0.9);
  filter: blur(140px);
  border-radius: 50%;
  top: -60px;
  z-index: -1;
}

.ml-auto {
  margin-left: auto;
}

.h-\[530px\] {
  height: 530px;
}

[dir=rtl] .ml-auto {
  margin-left: unset;
  margin-right: auto;
}

.mob-img {
  display: none !important;
}

.start-btn-icon {
  top: 20px;
  right: 20px;
}

.generate-img-col .generate-link::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background: transparent;
  height: 30%;
  box-shadow: none;
}

.generate-img-col .generate-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background: linear-gradient(180deg, rgba(68, 68, 68, 0) 0%, #444444 100%);
  height: 30%;
  box-shadow: none;
}

.left_sidebar {
  position: fixed;
  box-shadow: 4px 0px 8px 0px #0000001A;
  background-color: var(--bgbody);
  height: 100vh;
  width: 320px;
  top: 0;
  overflow: auto;
  padding: 5px 8px 80px 8px;
  transition: 0.3s all;
  left: -320px;
  z-index: 88;
}

@media (max-width: 767px) {
  .left_sidebar {
    width: 100%;
    left: -100%;
  }
}

.left_sidebar_show,
.left_sidebar-show {
  left: 0;
}

.sub-menu-toggle-close {
  height: 40px;
  width: 40px;
  border: 1px solid var(--lightbordergray);
  border-radius: 4px;
}

.left-sidebar-li a {
  font-size: 18px;
  letter-spacing: 0;
  padding: 20px;
  transition: 0.3s all;
  border-radius: 4px;
  color: hsl(var(--black)) !important;
}

.left-sidebar-li a:hover {
  background-color: var(--lightgray);
}

.left-sidebar-li svg {
  margin-right: 12px;
  width: 24px;
}

.left-sidebar-ul>li:last-child {
  margin-bottom: 120px;
}

.dark .notification-toggle svg path {
  stroke: #fff;
}

.dark-font-color {
  color: var(--black);
}

.notification-active {
  position: absolute;
  height: 8px;
  width: 8px;
  background-color: #FF0000;
  border-radius: 50%;
  top: 0;
  right: 0;
  animation: notificationPulse 2s infinite;
}

@keyframes notificationPulse {
  0% {
    transform: scale(1);
    opacity: 1;
    box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.7);
  }

  50% {
    transform: scale(1.3);
    opacity: 0.7;
    box-shadow: 0 0 0 5px rgba(255, 0, 0, 0);
  }

  100% {
    transform: scale(1);
    opacity: 1;
    box-shadow: 0 0 0 0 rgba(255, 0, 0, 0);
  }
}

@keyframes fadeOut {
  0% {
    opacity: 1;
    transform: translateX(0);
  }

  100% {
    opacity: 0;
    transform: translateX(20px);
  }
}

.notification-bar {
  position: fixed;
  top: 0;
  right: -100%;
  height: 100vh;
  width: 100%;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 89;
}

.notification-bar-show {
  right: 0;
}

.notification-bar-inner {
  height: 100vh;
  width: 100%;
}

.notification-bg {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.4);
}

.notification-wrap {
  background-color: var(--bgbody);
  margin-left: auto;
  height: 100vh;
  width: 320px;
  position: relative;
  overflow: auto;
  z-index: 89;
}

.notifications-titles .title {
  font-size: 24px;
}

.notifications-item {
}

.notifications-profile {
  width: 32px;
  min-width: 32px;
}

.notifications-content {
  flex: 1;
  padding-left: 8px;
}

.notifications-profile img {
  width: 32px;
  height: 32px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 50%;
}

.notifications-content-title p {
  font-size: 14px;
  line-height: 1.3;
}

.notifications-content-title span {
  font-size: 12px;
  color: #555555;
  white-space: nowrap;
}

.notifications-content p {
  margin-top: 4px;
}

.notifications-item {
  animation: fadeInRight 0.5s ease-out;
}

@keyframes fadeInRight {
  0% {
    opacity: 0;
    transform: translateX(20px);
  }

  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Add a subtle highlight effect for new notifications */

.notifications-item.new {
  animation: highlightNew 2s ease-out;
}

@keyframes highlightNew {
  0% {
    background-color: rgba(255, 54, 247, 0.1);
  }

  100% {
    background-color: transparent;
  }
}

.link-type-btn {
  color: #FA3D72;
  font-size: 14px;
  text-decoration: underline;
}

.clear-all-btn {
  padding: 10px 4px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

.feature-img-col {
  width: 276px;
}

.video-play_btn {
  height: 94px;
  width: 94px;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
}

.feature-video-col {
  transform: rotateZ(-6deg) translateX(17px);
  height: 350px;
  width: 258px;
}

.generate-image-hero {
  background-position: top right;
  padding-top: 40px;
  padding-bottom: 40px;
  background-repeat: no-repeat;
  background-size: cover;
}

.generate-image-tab {
  opacity: 0.5;
  border-bottom: 2px solid transparent;
}

.active-generate-tab {
  opacity: 1;
  border-color: #000;
}

.dark .active-generate-tab {
  border-color: #fff;
}

.generate-left-side {
  width: 50%;
  padding-right: 10px;
}

@media (min-width: 1201px) {
  .generate-left-side {
    position: sticky;
    top: 6rem;
    align-self: flex-start;
  }
}

.generate-right-side {
  width: 50%;
}

@media (min-width: 768px) {
  .generate-right-side {
    height: calc(100dvh - 100px);
    overflow-y: auto;
  }
}

.h-\[300px\] {
  height: 300px;
}

.tab-content-wrap .block:before {
  border-radius: 0.5rem;
}

.right-side-part-1 {
  background: linear-gradient(265.49deg, rgba(225, 24, 217, 0.11) 0%, rgba(225, 156, 17, 0.11) 100%);
  border: 1px solid #E118D9;
}

.swap-out {
  padding: 20px;
  overflow: hidden;
  background-position: top left;
  background-repeat: no-repeat;
  background-size: cover;
  z-index: 1;
}

.swap-out:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: linear-gradient(265.49deg, rgba(225, 24, 217, 0.11) 0%, rgba(225, 156, 17, 0.11) 100%);
  z-index: -1;
}

.swap-out img {
  height: 80px;
  width: 80px;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: top center;
     object-position: top center;
  border: 4px solid #E118D9;
  border-radius: 50%;
}

.swap-out span {
  padding-left: 10px;
}

/* Desktop bot section next to main tabs */

#desktop-bot-selected {
  padding: 8px 16px;
  flex-shrink: 0;
  width: auto;
  min-width: -moz-fit-content;
  min-width: fit-content;
}

#desktop-bot-selected img {
  height: 50px;
  width: 50px;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: top center;
     object-position: top center;
  border: 3px solid #E118D9;
  border-radius: 50%;
}

#desktop-bot-selected span {
  padding-left: 10px;
  font-size: 14px;
}

#desktop-bot-selected button {
  font-size: 13px;
  padding: 6px 12px;
}

.choose-options-btn span {
  height: 70px;
  width: 70px;
  border-radius: 50%;
  border: 4px solid #fff;
  margin-right: -25px;
  z-index: 1;
}

.round-option-item {
  min-width: 64px;
}

.round-option-item input , .round-option-item-pricing input {
  position: absolute;
  height: 0;
  width: 0;
  overflow: hidden;
  visibility: hidden;
}

.round-option-item .round-option-img, .round-option-item-pricing .round-option-img {
  height: 64px;
  width: 64px;
  border-radius: 50%;
  border-width: 1px;
  border-style: solid;
  overflow: hidden;
  transition: .1s all;
  margin-inline: auto;
}

.your-option-item .round-option-img img {
  max-width: 65%;
  max-height: 55%;
}

#existing-rouned-option-list .round-option-img img {
  max-width: 65%;
  max-height: 55%;
}

.round-option-item .round-option-img-2>img , .round-option-item-pricing  .round-option-img-2>img{
  height: 100% !important;
  width: 100% !important;
  -o-object-fit: cover !important;
     object-fit: cover !important;
}

.round-option-img span {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.round-option-list {
  gap: 25px;
}

.round-option-list-pricing {
  gap: 15px;
}

.round-option-item p , .round-option-item-pricing p {
  font-size: 14px;
}

.round-option-item input:checked+label , .round-option-item-pricing input:checked+label {
  cursor: pointer;
}

.round-option-item input:checked+label .round-option-img, .round-option-item-pricing input:checked+label .round-option-img {
  outline: 3px solid #FF36F7;
  background: linear-gradient(265.49deg, rgba(225, 24, 217, 0.11) 0%, rgba(225, 156, 17, 0.11) 100%);
}

.round-option-item input+label>p, .round-option-item-pricing input+label>p {
  opacity: 0.6;
}

.round-option-item input:checked+label p, .round-option-item-pricing input:checked+label {
  opacity: 1;
  font-weight: 500;
}

.round-option-item input.active+label .round-option-img span , .round-option-item-pricing input.active+label .round-option-img span {
  display: block;
}

.round-option-item input.active+label .round-option-img>img , .round-option-item-pricing input.active+label .round-option-img>img {
  opacity: 0.5;
}

.round-option-item input.active+label p , .round-option-item-pricing input.active+label p  {
  opacity: 0.5;
}

.option-btn-list {
  gap: 10px;
}

.option-btn-list .button-option-item input {
  position: absolute;
  height: 0;
  width: 0;
  overflow: hidden;
  visibility: hidden;
}

.option-btn-list .button-option-item label {
  color: #555555;
  padding: 4px 14px;
  font-size: 14px;
}

.dark .option-btn-list .button-option-item label {
  color: #e0e0e0;
}

.option-btn-list .button-option-item input:checked+label {
  outline: 2px solid #FF36F7;
  background: linear-gradient(265.49deg, rgba(225, 24, 217, 0.11) 0%, rgba(225, 156, 17, 0.11) 100%);
}

.right-side-bottom-bar-btns button {
  padding: 15px;
}

.right-side-bottom-bar {
  padding: 15px;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
}

.square-option-item input {
  position: absolute;
  height: 0;
  width: 0;
  overflow: hidden;
  visibility: hidden;
}

.square-option-item p {
  position: absolute;
  width: calc(100% - 40px);
  height: 40px;
  bottom: 1px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  text-align: center;
  border-radius: 100px;
  border: 1px solid rgba(0, 0, 0, 0.4);
  background-color: rgba(0, 0, 0, 0.3);
  color: #fff;
  padding: 0 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  font-size: 12px;
  font-weight: 400;
}

.square-option-item p span {
  display: block;
  font-size: 10px;
  font-weight: 300;
  width: 100%;
  line-height: 1;
  margin-top: -11px;
}

.square-option-item label {
  height: 100%;
  border-width: 1px;
  border-style: solid;
  transition: 0.1s all;
  overflow: hidden;
}

.square-option-item input:checked+label {
  outline: 4px solid #FF36F7;
  background: linear-gradient(265.49deg, rgba(225, 24, 217, 0.11) 0%, rgba(225, 156, 17, 0.11) 100%);
}

.square-option-list {
  /* margin-left: -10px;
    margin-right: -10px; */
}

.square-option-item {
  width: 25%;
  padding: 10px;
}

.square-option-item img {
  margin: 0 auto;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}

.tab-content-wrap-inner {
  display: none;
}

.tab-content-wrap-inner.show {
  display: block;
}

.honeybots-switch input {
  height: 0;
  width: 0;
  opacity: 0;
  overflow: hidden;
}

.honeybots-switch label {
  position: relative;
  width: 60px;
  height: 30px;
  display: inline-block;
  background: var(--dark);
  border-radius: 30px;
  cursor: pointer;
  transition: all 0.3s;
  -moz-transition: all 0.3s;
  -webkit-transition: all 0.3s;
}

.honeybots-switch label:after {
  content: "";
  position: absolute;
  left: 3px;
  top: 3px;
  width: 24px;
  height: 24px;
  background: hsl(var(--white));
  border-radius: 50%;
}

.honeybots-switch input:checked+span+label {
  background-image: linear-gradient(to right, var(--gre-secondary), var(--gre-primary));
}

.honeybots-switch input:checked+span+label:after {
  left: auto;
  right: 3px;
}

.honeybots-switch input+span+label+span {
  background: linear-gradient(to right, var(--gre-secondary), var(--gre-primary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  opacity: 0.5;
}

.honeybots-switch input:checked+span+label+span {
  opacity: 1;
}

.honeybots-switch input:checked+span {
  opacity: 0.6;
}

.generate-img-col {
  cursor: pointer;
}

.create-new .generate-img {
  filter: blur(10px);
}

.no-token .generate-img {
  filter: blur(10px) !important;
}

.right-side-bottom-bar-2 {
  /* padding: 40px 20px; */
  position: absolute;
  z-index: 9999;
  width: 100%;
  max-width: 570px;
  /* min-height: 500px; */
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: linear-gradient(90deg, rgba(255, 186, 47, 1) 0%, rgba(255, 54, 247, 1) 100%);
}

.right-side-bottom-bar-2-wrap {
  padding: 20px 30px;
  background-color: #fff;
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.2);
}

.sorry-text {
  font-size: 32px;
}

.promo-text {
  font-size: 28px;
}

.right-side-bottom-bar-2 img {
  display: block;
  max-width: 330px;
  margin-top: -50px;
}

.square-option-item label.fulfill-img>img {
  -o-object-fit: cover;
     object-fit: cover;
}

.square-option-item label.fulfill-bottom>img {
  -o-object-position: bottom center;
     object-position: bottom center;
}

.square-option-item label.fulfill-center>img {
  -o-object-position: center;
     object-position: center;
}

.choose-item img {
  height: 48px !important;
  -o-object-fit: contain;
     object-fit: contain;
  width: 100%;
}

.color-btn {
  padding: 6px 14px;
  border: 1px solid #CCCCCC;
}

.cloth-color-list-wrap label {
  font-size: 14px;
}

.dark .choose-item .transition-all {
  filter: brightness(0) invert(1);
}

.round-option-list-wrap {
  position: relative;
}

.cloth-color-item input {
  height: 0;
  width: 0;
  overflow: hidden;
  visibility: hidden;
  position: absolute;
}

.cloth-color-item input:checked+label {
  outline: 2px solid #FF36F7;
}

.cloth-color-list-wrap {
  padding: 10px 0;
}

.checkbox-col {
  width: 4%;
}

.name-col {
  width: 40%;
}

.date-created-col {
  width: 15%;
}

.image-col {
  width: 10%;
}

.video-col {
  width: 10%;
}

.step {
  display: none;
}

.step.active {
  display: block;
}

.anyway-pop-up,
.disclaimer-pop-up,
.start-over-pop-up,
.error-overlay-pop-up {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 10px;
  width: 450px;
  padding: 30px;
  background-color: hsl(var(--white));
  border: 1px solid #bbb;
  z-index: 152;
}

.anyway-chechbox label .anyway-chechbox-style {
  height: 22px;
  width: 22px;
  border: 1px solid hsl(var(--black));
  border-radius: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.anyway-chechbox label .anyway-chechbox-style svg {
  opacity: 0;
}

.anyway-chechbox input:checked+label .anyway-chechbox-style svg {
  opacity: 1;
}

.anyway-chechbox input {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  width: 0;
  height: 0;
}

.create-new-form-active-option {
  color: #e1941d;
  font-weight: 500;
}

.generate-image-btn {
  max-width: 480px;
  width: 92%;
}

.disabled-part::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  opacity: 0.6;
  z-index: 2;
}

.mobile-hero-section {
  display: none;
}

.mobile-tab-btn {
  border-bottom: 1px solid transparent;
}

.mobile-tab-btn span {
  border: 1px solid #ccc;
  background-color: #eee;
  height: 24px;
  width: 24px;
  border-radius: 50%;
}

.mobile-tab-btn.active {
  border-color: #000;
  background: linear-gradient(to right, #FFBA2F, #FF36F7);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.mobile-tab-btn.active span {
  border: 1px solid #000;
  background-color: #000;
}

.mobile-tab-btn.active span svg * {
  fill: #fff;
}

.mobile-tab {
  display: none;
}

.disabled-input {
  cursor: no-drop;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.page-title,
.page-title * {
  line-height: 0.9;
}

.generate-image-btn {
  color: #fff !important;
}

.generate-image-btn span span {
  border-color: #fff;
}

.dark .disabled-part::after {
  opacity: 0.1;
}

.right-side-bottom-bar-2-wrap p.mt-2 {
  font-size: 20px;
}

.popup-active {
  min-height: 100vh;
  overflow: hidden;
}

.popup-active::before {
  content: '';
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 140;
  position: fixed;
}

.popup-active .generate-left-side {
  z-index: 151;
}

.option-list-container {
  max-height: calc(86dvh - 35px);
  overflow-y: auto;
  overflow-x: hidden;
  padding-bottom: 100px;
}

.option-list-container-2 {
  max-height: calc(86dvh - 35px);
  overflow-y: auto;
  overflow-x: hidden;
  padding-bottom: 100px;
}

@media (min-width: 768px) {
  .option-list-container {
    padding-bottom: 320px;
  }

  .option-list-container-2 {
    max-height: calc(86dvh - 125px);
    padding-bottom: 200px;
  }
}

.form-bottom-bar {
  position: absolute;
  bottom: 8px;
  left: 0;
  width: 100%;
  z-index: 9;
  text-align: center;
}

.choose-option-btn-list {
  padding: 4px;
}

@media (max-width: 1200px) {
  .feature-col {
    grid-column: span 12 / span 12;
  }

  .generate-img-col {
    grid-column: span 4 / span 4;
  }

  .generate-left-side {
    width: 100%;
    padding-right: 0;
  }

  .generate-right-side {
    width: 100%;
    padding: 20px 0 0 0;
  }

  .cloth-color-list-wrap {
    flex-wrap: nowrap;
    overflow: auto;
    padding: 10px;
  }

  .cloth-color-list-wrap label {
    white-space: nowrap;
    font-size: 14px;
  }

  .right-side-bottom-bar-btns button {
    border: none;
    background-color: transparent;
  }

  .generate-image-hero:after {
    content: '';
    position: absolute;
    height: 195px;
    width: 205px;
    left: 50%;
    background: linear-gradient(90deg, rgba(255, 186, 47, 1) 0%, rgba(255, 54, 247, 1) 100%);
    filter: blur(60px);
    border-radius: 50%;
    transform: translateX(-50%);
    bottom: -165px;
    z-index: -1;
  }

  .round-option-list-wrap::after {
    content: '';
    position: absolute;
    width: 60px;
    height: 100%;
    right: -1px;
    top: 0;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
    pointer-events: none;
    z-index: 1;
  }

  .dark .round-option-list-wrap::after {
    content: '';
    position: absolute;
    width: 60px;
    height: 100%;
    right: 0;
    top: 0;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 1) 100%);
    pointer-events: none;
    z-index: 1;
  }

  #existing-rouned-option-list {
    padding-right: 40px !important;
  }

  #existing-rouned-option-list::after {
    content: '';
    position: absolute;
    width: 60px;
    height: 100%;
    right: -1px;
    top: 0;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
    pointer-events: none;
    z-index: 1;
  }

  .dark #existing-rouned-option-list::after {
    content: '';
    position: absolute;
    width: 60px;
    height: 100%;
    right: 0;
    top: 0;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 1) 100%);
    pointer-events: none;
    z-index: 1;
  }

  #m-appearance-option-list {
    padding-right: 40px;
  }
}

@media (max-width: 991px) {
  .generate-img-col {
    grid-column: span 6 / span 6;
  }
}

@media (max-width: 767px) {
  .mob-img {
    display: block !important;
  }

  .desktop-img {
    display: none !important;
  }

  .feature-col .mob-img {
    width: 100%;
  }

  .feature-col .flex-1 {
    padding-bottom: 0;
  }

  .feature-img-col {
    width: 100%;
  }

  .generate-img-col {
    grid-column: span 12 / span 12;
  }

  .notification-wrap {
    width: 100%;
  }

  .feature-col {
    flex-wrap: wrap;
  }

  .feature-video-col {
    overflow-y: hidden;
    margin-top: 20px;
    transform: rotate(-5deg) translate(-15px, 24px);
    min-width: calc(100% + 32px);
    height: 50vh;
  }

  .feature-video-col video {
    width: 100%;
  }

  .landing-header .sub-menu-toggle {
    display: none;
  }

  .sub-menu-toggle-bottom i {
    font-size: 26px;
  }

  .generate-image-hero {
    background-position: top left;
  }

  .round-option-item p , .round-option-item-pricing p {
    font-size: 14px;
  }

  .round-option-list {
    gap: 16px;
    /* overflow: auto; */
    flex-wrap: nowrap;
    padding: 4px 0 0 4px;
    margin-top: 0;
  }

  .round-option-item .round-option-img img , .round-option-item-pricing .round-option-img img {
    -o-object-fit: contain;
       object-fit: contain;
  }

  .option-btn-list {
    gap: 8px;
    overflow: auto;
    margin: 0;
    padding-bottom: 4px;
  }

  .option-btn-list .button-option-item label {
    padding: 4px 13px;
  }

  .right-side-bottom-bar-btns button {
    padding: 2px 20px;
  }

  .square-option-item {
    padding: 8px;
  }

  #choose-from-existing-form .square-option-list {
    padding-bottom: 70px;
  }

  .square-option-list {
    margin: 0;
    overflow: auto;
    padding-bottom: 120px;
  }

  .option-clothing-option.option-btn-list {
    height: unset;
  }

  .square-option-item {
    min-width: 145px;
    width: auto;
  }

  .square-option-item p {
    width: calc(100% - 50px);
    bottom: 2px;
    padding: 0 2px;
    font-size: 12px;
    height: 30px;
  }

  .square-option-item p.inner-span {
    height: 30px;
  }

  .square-option-item p.inner-span span {
    font-size: 9px;
    margin-top: -6px;
  }

  .square-option-item input:checked+label {
    outline: 2px solid #FF36F7;
  }

  .generate-image-hero {
    padding-bottom: 100px !important;
    z-index: 1;
    overflow: hidden;
  }

  .choose-position-hidden-item,
    .option-position-hidden-item {
    display: block !important;
  }

  #choose-position-option-show,
    #option-position-show {
    display: none !important;
  }

  .anyway-pop-up,
    .disclaimer-pop-up,
    .start-over-pop-up,
    .error-overlay-pop-up {
    width: calc(100% - 40px);
    z-index: 151;
  }

  .choose-options-btn {
    display: none;
  }

  .option-section {
    padding-top: 0;
  }

  .mobile-hero-section {
    display: block;
  }

  .mobile-hero-section h2,
    .mobile-hero-section h2 span {
    font-size: 30px;
  }

  .generate-image-tabs-list {
    margin-bottom: 10px;
  }

  .choose-appearance-any-option,
    .choose-your-option-any-option {
    padding: 2px 15px;
    margin-left: 0;
  }

  .choose-appearance-any-option span,
    .choose-your-option-any-option span {
    font-size: 14px;
  }

  .choose-appearance-any-option img,
    .choose-your-option-any-option img {
    max-width: 16px !important;
  }

  .form-bottom-bar .disclaimer-btn {
    margin-top: 0;
  }

  .mobile-tab-content {
    display: none !important;
    border-top: 0;
  }

  .mobile-tab-content.active {
    display: block !important;
  }

  .mobile-tab {
    display: flex;
  }

  .mobile-tab-btn.mobile-options-btn.active span svg * {
    fill: unset;
    stroke: #fff;
  }

  .disclaimer-btn {
    display: none;
  }

  .option-section {
    padding-bottom: 0;
  }

  #choose-from-existing-form .round-option-list {
    margin: 0;
  }

  #choose-from-existing-form .choose-options-btn {
    display: flex;
  }

  .swap-out {
    margin: 0;
    display: block;
    padding: 10px;
  }

  .swap-out>.flex {
    justify-content: center;
  }

  .swap-out>button {
    margin: 10px auto 0 auto;
    display: block;
    padding-top: 4px;
    padding-bottom: 4px;
  }

  .swap-out img {
    height: 60px;
    width: 60px;
    border-width: 2px;
  }

  .generate-left-side .generate-img-col {
    padding: 0 5px;
    margin-bottom: 10px;
  }

  .choose-options-btn span {
    height: 50px;
    width: 50px;
  }

  .choose-options-btn span svg {
    width: 30px;
  }

  .choose-options-btn .btn-grediant {
    padding: 4px 15px 4px 30px;
  }

  .choose-bot-list {
    padding-top: 10px;
  }

  .generate-right-side {
    padding: 10px;
    border-radius: 10px;
    height: auto;
    overflow-y: visible;
  }

  .create-new .generate-img {
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
  }

  .regenerate-btn {
    font-size: 14px;
    padding: 6px 16px;
  }

  .regenerate-btn svg {
    height: 16px;
    width: 16px;
  }

  .start-over-btn-line {
    display: none;
  }

  .create-new-form-menu-wrap {
  }

  .create-new-form-menu-btn.active::after {
    height: 100vh;
    width: 100vw;
    bottom: 0;
    position: fixed;
    background-color: rgba(6, 6, 6, 0.37);
    padding: 20px;
    content: "";
    z-index: 9999;
    left: 0;
  }

  .form-menu-wrap {
    position: fixed;
    bottom: 0;
    padding: 60px 10px;
    z-index: 99999;
    width: 100%;
    left: 0;
    justify-content: center;
    border-radius: 10px 10px 0 0;
    display: none;
    border-top: 1px solid #2c2a2a;
  }

  .form-menu-wrap.active {
    display: flex;
  }

  .right-side-bottom-bar-2-wrap {
    padding: 20px 15px;
  }

  .sorry-text {
    font-size: 24px;
  }

  .promo-text {
    display: none;
  }

  .right-side-bottom-bar-2-wrap p.mt-2 {
    font-size: 20px;
    margin-bottom: 10px;
  }

  .right-side-bottom-bar-2 img {
    max-width: 180px;
    margin-top: -30px;
  }
}

@media (max-width: 500px) {
  .feature-video-col {
    transform: rotate(-5deg) translate(-15px, 16px);
  }

  .h-\[300px\] {
    height: 230px;
  }

  .right-side-bottom-bar-2 {
    padding: 20px;
  }

  .square-option-item {
    width: 50% !important;
  }

  .generate-right-side {
    height: auto;
  }
}

@keyframes slideInRight {
  0% {
    transform: translateX(100%);
    opacity: 0.5;
  }

  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideInLeft {
  0% {
    transform: translateX(-100%);
    opacity: 0.5;
  }

  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

.appearance-square-option-list.active {
  animation: slideInLeft 0.5s linear forwards;
}

.appearance-square-option-list.active-two {
  animation: slideInRight 0.5s linear forwards;
}

@media (min-width: 1200px) {
  .generate-left-side .square-option-item {
    min-width: 130px;
  }

  @keyframes topBottomSlide {
    0% {
      transform: translateY(100%);
      opacity: 0.3;
    }

    100% {
      transform: translateY(0);
      opacity: 1;
    }
  }

  .appearance-square-option-list.active {
    animation: topBottomSlide 0.5s linear forwards;
  }

  .appearance-square-option-list.active-two {
    animation: topBottomSlide 0.5s linear forwards;
  }
}

.like-img-button.liked {
  background-color: var(--dark);
}

.dark .like-img-button.liked svg path {
  stroke: #121316;
}

.like-img-button.liked svg path {
  stroke: #fff;
}

.dislike-img-button.disliked {
  background-color: var(--dark);
}

.dislike-img-button.disliked svg path {
  stroke: #fff;
}

.dark .dislike-img-button.disliked svg path {
  stroke: #121316;
}

.download-btn:disabled,
.like-img-button:disabled,
.dislike-img-button:disabled,
.start-over-btn:disabled {
  opacity: .5;
  cursor: no-drop;
}

.generate-img.generating {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  pointer-events: none;
}

@media (max-width: 1399px) {
  .chat-tips-card {
    transition: all 0.3s ease;
    transform: translate(-50%, -50%) !important;
    visibility: hidden;
    opacity: 0;
    bottom: auto !important;
    top: 50% !important;
    left: 50% !important;
    z-index: 11111;
    max-width: 400px;
    width: calc(100% - 40px);
  }

  .chat-tips-card.slide-in-left {
    visibility: visible;
    opacity: 1;
  }

  .chat-tips-card.slide-out-left {
    visibility: hidden;
    opacity: 0;
  }
}

@media (min-width: 1400px) {
  .chat-tips-card {
    z-index: 111;
    transform: translateX(-100%);
  }

  .chat-tips-card.slide-in-left {
    transform: translateX(0);
  }

  .chat-tips-card.slide-out-left {
    transform: translateX(-100%);
  }
}

/* new css */

.appearance-list-group {
  flex: 1;
}

.select-appearance-list,
.appearance-list-group,
#option-2,
#choose-menu-options,
#choose-menu-appearance {
  display: none;
}

.select-appearance-list.show,
.appearance-list-group.show,
#option-2.show {
  /* animation: fadeIn .3s linear forwards; */
  display: block;
}

#choose-menu-options.show,
#choose-menu-appearance.show {
  animation: fadeIn .3s linear forwards;
  display: flex;
}

.choose-options-btn {
  opacity: .5;
}

.choose-options-btn.active {
  opacity: 1;
}

/* #create-new-form ::-webkit-scrollbar {
    width: 5px !important;
    height: 5px;
}

#create-new-form ::-webkit-scrollbar-track {
    border-radius: 6px;
    background-color: #00000000;
}

.dark #create-new-form ::-webkit-scrollbar-track {
    background-color: #ffffff00;
}

#create-new-form ::-webkit-scrollbar-thumb {
    background: #E7E8EB;
    border-radius: 6px;
    padding-right: 10px;
    margin-right: 10px;
}

.dark #create-new-form ::-webkit-scrollbar-thumb {
    background: #E7E8EB40;
}

#create-new-form .round-option-list::-webkit-scrollbar-thumb {
    background: #E7E8EB;
}

.dark #create-new-form .round-option-list::-webkit-scrollbar-thumb {
    background: #E7E8EB40;
}

#choose-from-existing-form ::-webkit-scrollbar {
    width: 5px !important;
    height: 5px;
}

#choose-from-existing-form ::-webkit-scrollbar-track {
    border-radius: 6px;
    background-color: #00000000;
}

.dark #choose-from-existing-form ::-webkit-scrollbar-track {
    background-color: #ffffff00;
}

#choose-from-existing-form ::-webkit-scrollbar-thumb {
    background: #E7E8EB;
    border-radius: 6px;
    padding-right: 10px;
    margin-right: 10px;
}

.dark #choose-from-existing-form ::-webkit-scrollbar-thumb {
    background: #E7E8EB40;
}

#choose-from-existing-form .round-option-list::-webkit-scrollbar-thumb {
    background: #E7E8EB;
} */

@media (min-width: 768px) {
  #choose-from-existing-form .choose-clothing-option {
    max-height: 45dvh;
  }
}

/* .dark #choose-from-existing-form .round-option-list::-webkit-scrollbar-thumb {
    background: #E7E8EB40;
} */

.your-btn-list,
.choose-option-btn-list {
  animation: fadeIn .3s linear forwards;
}

#m-appearance-option-list .left-arrow,
#m-appearance-option-list .right-arrow {
  animation: fadeIn .3s linear forwards;
}

/* new css */

.disabled-option {
  opacity: 0.5;
  cursor: not-allowed;
}

/* mun 03-14 start */

.gradient-border::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  background: linear-gradient(to right, var(--gre-secondary), var(--gre-primary));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  content: var(--tw-content);
  border-radius: 14px;
}

.new-modal-btn:hover {
  box-shadow: 0px 0px 0.73px 0px #FB6A93,

        0px 0px 1.45px 0px #FB6A93,

        0px 0px 5.09px 0px #FB6A93,

        0px 0px 10.18px 0px #FB6A93,

        0px 0px 16.5px 0px #FB6A93,

        0px 0px 20.1px -7px #FADAE3;
}

.new-token-modal {
  background-image: linear-gradient(180deg, rgba(242, 243, 245, 0) 49%, rgba(242, 243, 245, 0.4) 100%);
}

.new-token-modal.hide-linear-gradient-on-desktop {
  background-image: none;
}

@media (max-width: 991px) {
  .new-token-modal.hide-linear-gradient-on-desktop {
    background-image: linear-gradient(180deg, rgba(242, 243, 245, 0) 49%, rgba(242, 243, 245, 0.4) 100%)
  }
}

input[type='radio']:checked ~ .token-item {
  border-color: transparent;
}

input[type='radio']:checked ~ .token-item::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  background: linear-gradient(to right, var(--gre-secondary), var(--gre-primary));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  content: var(--tw-content);
  border-radius: 9999px;
  transition: all .1s linear;
}

/* Hide scrollbar for all browsers */

.no-scrollbar::-webkit-scrollbar {
  display: none;
  /* Chrome, Safari, Edge */
}

.no-scrollbar {
  scrollbar-width: none;
  /* Firefox */
  -ms-overflow-style: none;
  /* IE and Edge */
}

@media (max-width: 640px) {
  .common.flex.right-side-bottom-bar-btns {
    gap: 5px !important;
    padding-left: 0 !important;
  }
}

/* ===== PROMPT SECTION STYLES ===== */

/* Textarea with lighter scrollbar */

.option-prompt-option .option-textarea::-webkit-scrollbar {
  width: 6px;
}

.option-prompt-option .option-textarea::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
}

.option-prompt-option .option-textarea::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.4);
  border-radius: 3px;
}

.option-prompt-option .option-textarea::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.6);
}

/* Firefox scrollbar */

.option-prompt-option .option-textarea {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.4) rgba(255, 255, 255, 0.1);
}

/* Category tabs styling */

.prompt-category-tab {
  border: 1px solid var(--gray);
  color: var(--bodytext);
  background: transparent;
  transition: all 0.2s ease;
}

.prompt-category-tab:hover {
  border-color: var(--lightgray);
}

.prompt-category-tab.active {
  background: linear-gradient(to right, var(--gre-secondary), var(--gre-primary));
  border: none;
  color: white;
}

/* Prompt buttons hover state */

.prompt-buttons button[data-prompt]:hover {
  border-color: var(--lightgray);
  background: rgba(255, 255, 255, 0.05);
}

/* Horizontal scrollbar for prompt buttons */

.prompt-buttons::-webkit-scrollbar {
  height: 6px;
}

.prompt-buttons::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
}

.prompt-buttons::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.4);
  border-radius: 3px;
}

.prompt-buttons::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.6);
}

/* Firefox scrollbar for prompt buttons */

.prompt-buttons {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.4) rgba(255, 255, 255, 0.1);
}

/* Scroll arrows styling */

.prompt-scroll-arrow {
  opacity: 0.8;
  transition: opacity 0.2s ease;
}

.prompt-scroll-arrow:hover {
  opacity: 1;
}

/* Expand toggle button */

.prompt-expand-toggle {
  opacity: 0.6;
  transition: opacity 0.2s ease;
}

.prompt-expand-toggle:hover {
  opacity: 1;
}

/* Mobile: fixed-height prompt textarea, no expand/collapse toggle */

@media (max-width: 767px) {
  .prompt-expand-toggle {
    display: none !important;
  }

  .option-prompt-option .option-textarea,
    .choose-prompt-option .option-textarea {
    height: 120px !important;
    min-height: 120px !important;
    max-height: 120px !important;
    resize: none !important;
    overflow-y: auto !important;
  }
}

/* Round option list (category icons) scrollbar - lighter color */

.round-option-list::-webkit-scrollbar {
  height: 6px;
}

.round-option-list::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 3px;
}

.round-option-list::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.4);
  border-radius: 3px;
}

.round-option-list::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.6);
}

/* Firefox scrollbar for round option list */

.round-option-list {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.4) rgba(255, 255, 255, 0.15);
}

/*=====================
    Swiper Slider CSS
 ==========================*/

/*=====================
  Mood Selector CSS
==========================*/

.best-choice .my-honeybot-item.selected .m-gradient-border::before {
  box-shadow: none;
  background-image: linear-gradient(to bottom, rgba(18, 19, 22, 0) 40%, rgba(18, 19, 22, 0.6) 90%);
}

.my-honeybot-item.selected .m-gradient-border{
  display: block;
}

:root.dark .my-honeybot-item.selected .m-gradient-border.shadow-white:before {
  background: linear-gradient(180deg, rgb(255 255 255 / 0%) 0%, #121316 100%);
}

.my-honeybot-item.selected .m-gradient-border:before{
  box-shadow: inset 0px -200px 100px -13px var(--dark-shadow);
  transition: all 0.3s ease;
  border-radius: 16px;
  top: 0;
  width: 100%;
  bottom: 0;
  left: 0;
  z-index: 1;
}

.my-honeybot-item.selected .m-gradient-border.shadow-white:before{
  border-radius: 0;
  box-shadow: none;
  background: linear-gradient(180deg, rgb(255 255 255 / 0%) 0%, #F2F3F5 100%);
}

.my-honeybot-item.selected .m-gradient-border.shadow-light:before{
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(68, 68, 68, 0.00) 0%, #444 100%);
}

.tab-content-wrap .my-honeybot-item.selected .m-gradient-border:before {
  border-radius: 0.5rem;
}

a.my-honeybot-item.selected .m-gradient-border.text-center.w-full.generate-link.overflow-hidden.group.rounded-2xl.hover\:-bg-white.drop-shadow-xl {
  animation: fadeIn .5s linear;
}

.my-honeybot-sidebar.hide {
  max-width: -moz-fit-content;
  max-width: fit-content;
}

.category-divider.my-honeybot-sidebar.hide .hide-on-collapse {
  display: none;
}

.tag-filter.my-honeybot-sidebar.hide .hide-on-collapse {
  display: none;
}

.home-tags-arrow.my-honeybot-sidebar.hide .hide-on-collapse {
  display: none;
}

.ch2-section--custom-add.my-honeybot-sidebar.hide .hide-on-collapse {
  display: none;
}

.ch2-advanced__panel.my-honeybot-sidebar.hide .hide-on-collapse {
  display: none;
}

.my-honeybot-sidebar.hide .hide-on-collapse{
  display: none;
}

.gi-helper-preset.my-honeybot-sidebar.hide .hide-on-collapse {
  display: none;
}

.vip-price-toggle.my-honeybot-sidebar.hide .hide-on-collapse {
  opacity: 0;
  pointer-events: none;
}

.promo-code-button-content.my-honeybot-sidebar.hide .hide-on-collapse {
  display: none;
}

.promo-code-input-container.my-honeybot-sidebar.hide .hide-on-collapse {
  display: none;
}

.promo-code-apply-link.my-honeybot-sidebar.hide .hide-on-collapse {
  display: none;
}

.gv-toggle-meta.my-honeybot-sidebar.hide .hide-on-collapse {
  display: none;
}

.my-honeybot-sidebar-toggler.active svg{
  --tw-rotate: 180deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

@media (max-width: 575px) {
  .my-honeybot-sidebar.mobile-open {
    z-index: 999;
    visibility: visible;
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    opacity: 1;
  }

  .gi-prompt-tooltip.my-honeybot-sidebar.mobile-open {
    display: block;
  }

  .gv-prompt-tooltip.my-honeybot-sidebar.mobile-open {
    display: block;
  }
}

.my-honeybot-sidebar.tablet-open{
  visibility: visible;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  opacity: 1;
}

.gi-prompt-tooltip.my-honeybot-sidebar.tablet-open {
  display: block;
}

.gv-prompt-tooltip.my-honeybot-sidebar.tablet-open {
  display: block;
}

.hide-sidebar-on-mobile.active svg {
  transform: rotate(180deg);
}

@media (min-width: 575px) {
  @media (max-width: 991px) {
    .toggle-div-on-tablet {
      transition: max-height 0.5s ease-in-out;
      max-height: 400px;
    }

    .toggle-div-on-tablet.open {
      overflow: hidden;
      max-height: 0;
    }
  }
}

/* ===== My Gallery: Grid ===== */

.mh-gallery-grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px;
}

@media (min-width: 640px) {
  .mh-gallery-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 768px) {
  .mh-gallery-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (min-width: 1280px) {
  .mh-gallery-grid {
    grid-template-columns: repeat(5, 1fr);
  }
}

/* ===== My Gallery: Animate Button ===== */

.mh-grid-animate-btn {
  position: absolute;
  bottom: 8px;
  left: 44px;
  z-index: 5;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.6);
  border: none;
  border-radius: 6px;
  color: white;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s, background 0.2s;
  text-decoration: none;
}

.mh-grid-animate-btn:hover {
  background: rgba(0, 0, 0, 0.85);
}

.gv-grid-item:hover .mh-grid-animate-btn {
  opacity: 1;
}

.mh-grid-animate-btn svg {
  width: 16px;
  height: 16px;
}

/* ===== My Gallery: Edit Button ===== */

.mh-grid-edit-btn {
  position: absolute;
  bottom: 8px;
  left: 80px;
  z-index: 5;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.6);
  border: none;
  border-radius: 6px;
  color: white;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s, background 0.2s;
  text-decoration: none;
}

.mh-grid-edit-btn:hover {
  background: rgba(0, 0, 0, 0.85);
}

.gv-grid-item:hover .mh-grid-edit-btn {
  opacity: 1;
}

.mh-grid-edit-btn svg {
  width: 16px;
  height: 16px;
}

/* ===== My Gallery: Upscale Button ===== */

.mh-grid-upscale-btn {
  position: absolute;
  bottom: 8px;
  left: 116px;
  z-index: 5;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.6);
  border: none;
  border-radius: 6px;
  color: white;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s, background 0.2s;
  text-decoration: none;
}

.mh-grid-upscale-btn:hover {
  background: rgba(0, 0, 0, 0.85);
}

.gv-grid-item:hover .mh-grid-upscale-btn {
  opacity: 1;
}

.mh-grid-upscale-btn svg {
  width: 16px;
  height: 16px;
}

/* Touch devices: always show action buttons */

@media (hover: none) {
  .mh-grid-animate-btn,
    .mh-grid-edit-btn,
    .mh-grid-upscale-btn {
    opacity: 0.7;
  }
}

/* ===== My Gallery: Edit Loading Overlay ===== */

.mh-edit-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  z-index: 10;
  border-radius: inherit;
}

.mh-edit-spinner {
  width: 36px;
  height: 36px;
  border: 3px solid rgba(255, 255, 255, 0.15);
  border-top-color: rgba(255, 255, 255, 0.7);
  border-radius: 50%;
  animation: gv-spin 0.8s linear infinite;
}

.mh-edit-label {
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.7);
  letter-spacing: 0.05em;
}

.mh-edit-notify {
  font-size: 0.90rem;
  color: rgba(255, 255, 255, 0.5);
  text-align: center;
  line-height: 1.4;
  max-width: 85%;
  margin-top: 0.25rem;
}

/* ===== Multiselect: Gallery Header ===== */

.mh-gallery-header {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.mh-gallery-header-top {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

@media (max-width: 640px) {
  .mh-gallery-header {
    gap: 0.75rem;
  }

  .mh-gallery-header-top {
    width: 100%;
    justify-content: space-between;
  }
}

@media (min-width: 641px) {
  .mh-gallery-header {
    flex-wrap: nowrap;
  }

  .mh-select-toggle-btn {
    margin-left: auto;
  }
}

/* ===== Multiselect: Toggle Button ===== */

.mh-select-toggle-btn {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  border: none;
  font-size: 0.75rem;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.2s;
  background: rgba(0, 0, 0, 0.06);
  color: #555;
}

.dark .mh-select-toggle-btn {
  background: var(--transparent-light);
  color: var(--lightcolor);
}

.mh-select-toggle-btn:hover {
  background: rgba(0, 0, 0, 0.1);
}

.dark .mh-select-toggle-btn:hover {
  background: rgba(24, 24, 27, 0.6);
}

.mh-select-toggle-btn svg {
  width: 1rem;
  height: 1rem;
}

.mh-select-toggle-btn.active {
  background-image: linear-gradient(to right, var(--gre-secondary), var(--gre-primary), var(--gre-secondary), var(--gre-primary));
  background-size: 300% 100%;
  color: hsl(var(--static-white));
  font-weight: 500;
}

.mh-select-toggle-btn.active svg {
  color: hsl(var(--static-white));
}

/* ===== Multiselect: Checkbox Overlay ===== */

.mh-select-checkbox {
  display: none;
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 15;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.8);
  background: rgba(0, 0, 0, 0.3);
  align-items: center;
  justify-content: center;
  pointer-events: none;
  transition: all 0.15s ease;
}

.mh-select-checkbox svg {
  display: none;
  color: white;
}

body.mh-select-mode .mh-select-checkbox {
  display: flex;
}

.gv-grid-item.mh-selected .mh-select-checkbox {
  background: linear-gradient(135deg, var(--gre-secondary), var(--gre-primary));
  border-color: transparent;
}

.gv-grid-item.mh-selected .mh-select-checkbox svg {
  display: block;
}

/* Dim overlay on items in select mode */

body.mh-select-mode .gv-grid-item::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.1);
  pointer-events: none;
  z-index: 6;
  transition: background 0.15s;
  border-radius: inherit;
}

body.mh-select-mode .gv-grid-item.mh-selected::after {
  background: rgba(225, 24, 217, 0.08);
  box-shadow: inset 0 0 0 2px rgba(225, 24, 217, 0.6);
}

/* ===== Multiselect: Hide Individual Action Buttons ===== */

body.mh-select-mode .gv-grid-delete-btn,
body.mh-select-mode .gv-grid-download-btn,
body.mh-select-mode .mh-grid-animate-btn,
body.mh-select-mode .mh-grid-edit-btn,
body.mh-select-mode .mh-grid-upscale-btn,
body.mh-select-mode .gv-grid-fullscreen-btn,
body.mh-select-mode .gv-grid-play-icon,
body.mh-select-mode .gv-grid-audio-icon {
  display: none !important;
}

/* ===== Multiselect: Floating Action Bar ===== */

.mh-select-bar {
  position: fixed;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10000;
  animation: mh-select-bar-slide-up 0.25s ease-out;
}

@keyframes mh-select-bar-slide-up {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(1rem);
  }

  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

.mh-select-bar-inner {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  background: hsl(var(--white));
  border: 1px solid var(--lightgray);
  border-radius: 0.75rem;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}

.mh-select-bar-count {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--title);
  padding: 0 0.5rem;
  white-space: nowrap;
}

.mh-select-bar-actions {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.mh-select-bar-btn {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 0.75rem;
  background: none;
  border: none;
  border-radius: 0.375rem;
  color: var(--graycolor);
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}

.mh-select-bar-btn:hover {
  background: var(--transparent-light);
  color: var(--body);
}

.mh-select-bar-btn svg {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

.mh-select-bar-btn-primary {
  background-image: linear-gradient(to right, var(--gre-secondary), var(--gre-primary));
  color: hsl(var(--static-white));
}

.mh-select-bar-btn-primary:hover {
  opacity: 0.9;
  background-image: linear-gradient(to right, var(--gre-secondary), var(--gre-primary));
  color: hsl(var(--static-white));
}

.mh-select-bar-btn-danger {
  color: #ef4444;
}

.mh-select-bar-btn-danger:hover {
  background: rgba(239, 68, 68, 0.1);
  color: #dc2626;
}

.mh-select-bar-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* ===== Multiselect: Mobile Responsive ===== */

@media (max-width: 640px) {
  .mh-select-bar {
    left: 0.5rem;
    right: 0.5rem;
    transform: none;
    bottom: 5rem;
  }

  @keyframes mh-select-bar-slide-up {
    from {
      opacity: 0;
      transform: translateY(1rem);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .mh-select-bar-inner {
    width: 100%;
    flex-wrap: nowrap;
    gap: 0;
    padding: 0.375rem 0.5rem;
  }

  .mh-select-bar-count {
    font-size: 0.75rem;
    padding: 0 0.25rem;
    flex-shrink: 0;
  }

  .mh-select-bar-actions {
    flex: 1;
    justify-content: space-evenly;
  }

  .mh-select-bar-btn span {
    display: none;
  }

  .mh-select-bar-btn {
    padding: 0.625rem;
  }
}

/*=====================
  Landing Page SEO CSS
==========================*/

.section-overlap {
  margin-top: -20px;
  padding-top: 20px;
}

a.block.text-center.w-full.generate-link.overflow-hidden.group.rounded-2xl.hover\:-bg-white.drop-shadow-xl {
  animation: fadeIn .5s linear;
}

/* ===========================================================================
 * Create Your Honeybot — v2 (Joi-style wizard)
 * ---------------------------------------------------------------------------
 * Scoped to .create-honey2. Uses CSS custom properties for Joi-style tokens
 * mapped onto Honeybot's brand palette. All rules go through the
 * component layer; no inline styles in templates.
 *
 * Token source: docs/features/joi_extraction/DESIGN_TOKENS.md
 * Component source: docs/features/joi_extraction/key_component_rules.css
 * =========================================================================== */

html:has(body.create-your-honeybot2-page),
body.create-your-honeybot2-page {
  /* Full-screen wizard — lock the body AND html to the viewport so only the
   * stage scrolls. Both must be locked: when the iOS soft keyboard opens,
   * Safari can scroll the document up and expose the html background unless
   * html itself is fixed-height with overflow hidden. Same dark fill as the
   * wizard prevents any white flash if it does shift one frame.
   *
   * Height note: the body below is `position: fixed; inset: 0`, and `inset: 0`
   * is sized by iOS to the *visible* viewport reliably. We must NOT also set
   * `height: 100dvh` on the fixed body — iOS Safari 26 resolves `dvh` on a
   * fixed element to the URL-bar-HIDDEN (large) viewport even while the URL bar
   * is showing, making the body taller than the screen, pushing the wizard's
   * absolute footer and the bottom of the scroll stage below the fold (steps
   * stopped scrolling after the iOS update). html keeps `100dvh` since it isn't
   * positioned and resolves correctly. */
  overflow: hidden;
  background: #0f0f0f;
  overscroll-behavior: none;
}

html:has(body.create-your-honeybot2-page) {
  height: 100dvh;
}

/* The site-wide reset.css applies `scroll-behavior: smooth` to every element
 * (`* { scroll-behavior: smooth }`). On iOS, that turns the browser's native
 * auto-scroll-to-focused-input into a slow tween, making the input appear to
 * slide down from the top as the keyboard opens. Force `auto` everywhere
 * inside the wizard — including html (which is a scroll container too) and
 * descendants — so focus → in-place, no smooth descent. */

html:has(body.create-your-honeybot2-page),
body.create-your-honeybot2-page,
body.create-your-honeybot2-page * {
  scroll-behavior: auto !important;
}

body.create-your-honeybot2-page {
  /* Pin the body so iOS can't scroll it up under the keyboard. position: fixed
   * + inset:0 keeps the document anchored regardless of the visual viewport AND
   * gives it a definite height equal to the visible viewport (iOS sizes a
   * fixed inset:0 box to the real visible area, unlike `100dvh`). The
   * `.create-honey2` height chain reads `100%` of this. */
  position: fixed;
  inset: 0;
  height: auto;
}

/* Mobile: hide site chrome entirely so the wizard owns the full viewport. */

@media (max-width: 767px) {
  body.create-your-honeybot2-page .header-sticky,
  body.create-your-honeybot2-page .bottom-navbar,
  body.create-your-honeybot2-page .page-footer {
    display: none !important;
  }

  /* iOS auto-zooms into any focused form control whose computed font-size is
   * < 16px, and does NOT reliably zoom back out on blur — which permanently
   * shifts the fixed-position wizard layout. The wizard authors against a 10px
   * base + `em`, so every input lands at ~13-14px and trips the zoom. Force the
   * computed size to 16px on mobile for all wizard form controls to suppress
   * the zoom entirely. Outside the `@layer components` block on purpose so this
   * wins over the em-based `font-size` rules without needing `!important`. */

  .create-honey2 input,
  .create-honey2 textarea,
  .create-honey2 select {
    font-size: 16px;
  }
}

/* Generate Image V2 Page Styles */

/* Modal-based selection pattern, mirrored from gen-video.css */

/* Uses Honeybot CSS variables from variables.css */

/* ===== Page Layout: Side-by-side on Desktop ===== */

.gi-page-layout {
  display: flex;
  flex-direction: column;
}

@media (min-width: 1024px) {
  body:has(.gi-section) {
    overflow: hidden;
    height: 100vh;
    height: 100dvh;
  }

  .gi-section {
    display: flex;
    flex-direction: column;
    height: calc(100vh - var(--gv-header-offset, 56px));
    height: calc(100dvh - var(--gv-header-offset, 56px));
    overflow: hidden;
    padding-bottom: 0;
  }

  .gi-section > .container {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
  }

  .gi-section .generate-image-tabs-list {
    flex-shrink: 0;
  }

  .gi-page-layout {
    flex-direction: row;
    align-items: stretch;
    justify-content: center;
    gap: 2rem;
    flex: 1;
    min-height: 0;
  }

  .gi-content-container {
    flex: 1;
    min-width: 0;
    align-items: center;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .gi-page-layout > .generate-right-side {
    flex: 1;
    min-width: 0;
    max-width: none;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 8rem;
  }

  .gi-filter-section {
    flex: 1;
    min-width: 0;
    max-width: none;
    margin-top: 0;
    margin-left: 0;
    margin-right: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 8rem;
  }

  .gi-page-layout .gi-image-grid {
    grid-template-columns: repeat(2, 1fr);
    max-width: none;
  }

  .gi-content-wrapper {
    max-width: none;
  }
}

@media (min-width: 1280px) {
  .gi-page-layout .gi-image-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ===== Mobile / tablet (<1024px): fix iOS Safari touch-scroll ===== */

/* ROOT CAUSE: the global `body { display:flex; flex-direction:column }`
   (base/typography.css) + a `min-height:100vh/100dvh` makes a long, overflowing
   page unscrollable by touch on iOS Safari. The page is geometrically scrollable
   (desktop + programmatic scroll reach the bottom) but finger-drag does nothing,
   and content can be clipped above the viewport so the top tabs / close icon are
   unreachable. This is the documented iOS flexbox + viewport-height scroll bug
   (see webkit / css-tricks). The gen-video page avoids it because `.gv-section`
   carries `min-h-screen`; the gi-section had no min-height.
   FIX: on this page, take the body OUT of the flex context and let it scroll as a
   normal block document. `!important` guarantees we beat the global `body{flex}`.
   `-webkit-fill-available` gives iOS a correct min-height without the 100vh
   toolbar bug. Targets the `gi-page` body class (set via {% block body_class %})
   so it also works on iOS < 15.4 (no `:has()` support); `:has()` kept as fallback.
   Scoped to <1024px so the desktop locked/internal-scroll layout above is untouched. */

@media (max-width: 1023px) {
  body.gi-page,
    body:has(.gi-section) {
    display: block !important;
    min-height: 100vh;
    min-height: -webkit-fill-available;
    min-height: 100dvh;
    height: auto !important;
    overflow: visible !important;
    /* Kill sideways drift/slack: nothing on this page should ever pan
           horizontally. `clip` (unlike `hidden`) doesn't turn the body into a
           scroll container, so the native document scroller stays intact. */
    overflow-x: clip !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: none;
  }

  /* The page section must not impose its own height/overflow on mobile so the
       document is the single, native scroller. */

  body.gi-page .gi-section,
    body:has(.gi-section) .gi-section {
    height: auto !important;
    min-height: 100vh;
    min-height: -webkit-fill-available;
    overflow: visible !important;
  }

  /* Modal-open scroll lock. The `overflow: visible !important` above defeats
       both `body.gi-helper-open { overflow: hidden }` and the inline
       `body.style.overflow = 'hidden'` the modal JS sets, so without this the
       page keeps scrolling (and rubber-banding) underneath every modal on
       mobile — visible as drift through the translucent backdrop. iOS also
       ignores `overflow: hidden` for touch scroll, so the lock uses
       `position: fixed` + a JS-set negative `top` (scroll offset preserved and
       restored on unlock by `lockBodyScroll()`/`unlockBodyScroll()` in
       generate-image-script.js). Must out-specify the rule above. */

  body.gi-page.gi-scroll-lock,
    body:has(.gi-section).gi-scroll-lock {
    position: fixed !important;
    left: 0;
    right: 0;
    width: 100%;
    overflow: hidden !important;
  }
}

/* Content Container */

.gi-content-container {
  padding: 0.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.gi-content-wrapper {
  width: 100%;
  max-width: 50rem;
  padding: 0 0.5rem;
}

@media (max-height: 920px) {
  .gi-content-wrapper {
    max-width: 40rem;
  }
}

@media (max-height: 840px) {
  .gi-content-wrapper {
    max-width: 32rem;
  }
}

/* ===== Selection Grid ===== */

.gi-selection-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}

/* ===== Select Box ===== */

.gi-select-box {
  position: relative;
  background: hsl(var(--white));
  border: 1px dashed var(--gray);
  border-radius: 0.5rem;
  cursor: pointer;
  transition: all 0.2s;
  overflow: hidden;
  aspect-ratio: 3/4;
}

.gi-select-box:hover {
  border-color: var(--graycolor);
  background: var(--light-bg);
}

.gi-select-box:focus {
  outline: none;
  border-color: var(--purple-light);
  box-shadow: 0 0 0 2px rgba(225, 24, 217, 0.2);
}

/* Purple outline = the only visual signal that the box has a selection */

.gi-select-box.has-selection {
  border-color: var(--purple-light);
  border-style: solid;
  box-shadow: 0 0 0 2px rgba(225, 24, 217, 0.2);
}

/* ===== Box Close Button ===== */

.gi-box-close {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  width: 1.5rem;
  height: 1.5rem;
  display: none;
  align-items: center;
  justify-content: center;
  background: var(--dark-shadow);
  border: none;
  border-radius: 50%;
  color: hsl(var(--static-white));
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s;
  z-index: 10;
}

.gi-select-box.has-selection .gi-box-close {
  display: flex;
}

.gi-select-box.has-selection:hover .gi-box-close {
  opacity: 1;
}

.gi-box-close:hover {
  background: rgba(0, 0, 0, 0.8);
}

.gi-box-close svg {
  width: 0.75rem;
  height: 0.75rem;
}

/* ===== Box Selection Checkmark ===== */

/* Shown only when the box has a selection — a large centered check signals
   that options for this part of the image are locked in. */

.gi-box-check {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 3.5rem;
  height: 3.5rem;
  display: none;
  align-items: center;
  justify-content: center;
  background: var(--primary);
  border-radius: 50%;
  color: hsl(var(--static-white));
  z-index: 10;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}

.gi-select-box.has-selection .gi-box-check {
  display: flex;
}

.gi-box-check svg {
  width: 2rem;
  height: 2rem;
}

/* ===== Box Placeholder ===== */

.gi-box-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 1rem;
  text-align: center;
}

.gi-box-placeholder svg {
  width: 1.5rem;
  height: 1.5rem;
  color: var(--gray);
  margin-bottom: 0.5rem;
}

.gi-box-placeholder .gi-gradient-icon {
  width: 3rem;
  height: 3rem;
  color: unset;
}

/* Placeholder image — fills the box; labels overlay on top */

.gi-box-placeholder {
  position: relative;
  overflow: hidden;
  border-radius: inherit;
  padding: 0;
  height: 100%;
  width: 100%;
}

.gi-box-placeholder-img,
.gi-box-placeholder-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  z-index: 0;
}

.gi-box-placeholder-video {
  z-index: 1;
  pointer-events: none;
  /* iOS Safari lets accelerated video paint past a rounded `overflow:hidden`
       ancestor while scrolling (corner/edge bleed). Rounding the video itself
       and promoting it to its own layer keeps it inside the box. */
  border-radius: inherit;
  transform: translateZ(0);
}

/* Selected-bot portrait in the Appearance box — keep the face in frame. */

.gi-box-placeholder-bot {
  -o-object-position: top;
     object-position: top;
}

.gi-box-placeholder-fallback {
  z-index: 0;
}

.gi-box-placeholder .gi-box-label,
.gi-box-placeholder .gi-box-sublabel {
  position: relative;
  z-index: 1;
  color: var(--staticWhite, #fff);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}

.gi-box-placeholder .gi-box-label {
  margin-top: auto;
  padding: 0.5rem 0.75rem 0;
  font-weight: 600;
}

.gi-box-placeholder .gi-box-sublabel {
  padding: 0 0.75rem 0.5rem;
  margin-bottom: 0.25rem;
}

/* Appearance box has solid purple border (primary/required) */

.gi-appearance-box {
  border-color: var(--purple-light);
  border-style: solid;
}

.gi-box-label {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--title);
}

.gi-box-sublabel {
  font-size: 0.75rem;
  color: var(--gray);
  margin-top: 0.125rem;
}

/* Placeholder stays visible even when something is selected — the only
   visual cue is the purple .has-selection border on .gi-select-box itself. */

/* ===== Box Summary (thumbnail grid inside box) ===== */

.gi-box-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  padding: 0.375rem;
  width: 100%;
  height: 100%;
  align-content: flex-start;
}

.gi-box-summary-item {
  position: relative;
  width: calc(33.333% - 2px);
  aspect-ratio: 1;
  border-radius: 0.25rem;
  overflow: hidden;
  background: var(--lightgray);
}

.gi-box-summary-item.gi-box-summary-portrait {
  aspect-ratio: 2/3;
}

.gi-box-summary-item img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.gi-box-summary-label {
  position: absolute;
  bottom: 1px;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 8px);
  padding: 2px 4px;
  font-size: 0.75rem;
  font-weight: 400;
  text-align: center;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(0, 0, 0, 0.4);
  border-radius: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  z-index: 1;
  line-height: 1.4;
}

@media (max-width: 991px) {
  .gi-box-summary-label {
    display: none;
  }
}

/* Text-only summary items (for items with no images like emotions, scenes) */

.gi-box-summary-text {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  padding: 0.375rem;
  width: 100%;
  height: 100%;
  align-content: center;
  justify-content: center;
}

.gi-box-summary-tag {
  font-size: 0.625rem;
  background: var(--light-bg);
  border: 1px solid var(--lightgray);
  border-radius: 0.25rem;
  padding: 0.125rem 0.375rem;
  color: var(--body);
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Bot selected state (full image in box with name overlay) */

.gi-box-bot-image {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: top;
     object-position: top;
}

.gi-box-bot-name {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0.5rem;
  background: linear-gradient(transparent, var(--dark-shadow));
  font-size: 0.875rem;
  font-weight: 500;
  color: hsl(var(--static-white));
  text-align: center;
}

/* ===== Modal System ===== */

.gi-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 100;
}

.gi-modal.active {
  display: flex;
  align-items: center;
  justify-content: center;
}

.gi-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.8);
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
}

.gi-modal-content {
  position: relative;
  width: 90%;
  max-width: 600px;
  height: 80vh;
  background: hsl(var(--white));
  border: 1px solid var(--lightgray);
  border-radius: 0.75rem;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.gi-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--lightgray);
  flex-shrink: 0;
}

.gi-modal-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  height: 2.5rem;
  padding: 0 1rem;
  background: var(--transparent-light, rgba(255, 255, 255, 0.08));
  border: 1px solid var(--lightgray, #2a2a2a);
  border-radius: 9999px;
  color: var(--body);
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.gi-modal-back:hover {
  background: rgba(255, 255, 255, 0.14);
  color: var(--body);
}

.gi-modal-back svg {
  width: 1.1rem;
  height: 1.1rem;
}

.gi-modal-title,
.gi-subcategory-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--title);
  margin: 0;
  flex: 1;
  text-align: center;
}

.gi-modal-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  background: none;
  border: none;
  border-radius: 0.375rem;
  color: var(--graycolor);
  cursor: pointer;
  transition: all 0.2s;
}

.gi-modal-close:hover {
  background: var(--transparent-light);
  color: var(--body);
}

.gi-modal-close svg {
  width: 1.25rem;
  height: 1.25rem;
}

/* Header actions group (Reset + close) on the right of Level 1 modal headers */

.gi-modal-header-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.gi-modal-reset {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  height: 2rem;
  padding: 0 0.85rem;
  background: var(--transparent-light, rgba(255, 255, 255, 0.08));
  border: 1px solid var(--lightgray);
  border-radius: 9999px;
  color: var(--body);
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.gi-modal-reset:hover {
  background: rgba(255, 255, 255, 0.14);
  color: var(--body);
}

.gi-modal-reset svg {
  width: 1rem;
  height: 1rem;
}

/* Done button (Level 1 header + Level 2 multi-select) — explicit confirm
   affordance, shown when there is at least one selection. White-on-black like
   the Create CTA; the pink/primary tint is reserved for badges, checkmarks and
   negative actions. */

.gi-modal-done,
.gi-subcategory-done {
  display: inline-flex;
  align-items: center;
  height: 2rem;
  padding: 0 1.1rem;
  background: hsl(var(--static-white));
  border: 1px solid hsl(var(--static-white));
  border-radius: 9999px;
  color: hsl(var(--static-black));
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.2s, transform 0.1s;
}

/* Light mode: the modal surface is white — invert the pill so it stays visible. */

:root:not(.dark) .gi-modal-done,
:root:not(.dark) .gi-subcategory-done {
  background: hsl(var(--static-black));
  border-color: hsl(var(--static-black));
  color: hsl(var(--static-white));
}

.gi-modal-done:hover,
.gi-subcategory-done:hover {
  opacity: 0.9;
}

.gi-modal-done:active,
.gi-subcategory-done:active {
  transform: scale(0.97);
}

.gi-modal-done[hidden],
.gi-subcategory-done[hidden] {
  display: none;
}

/* Dice button (Level 1 header) — random selection for the whole model.
   Uses the dice image art ("Choose for me" icon), no chrome. */

.gi-modal-dice {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  transition: transform 0.2s;
}

.gi-modal-dice:hover {
  transform: rotate(-12deg) scale(1.08);
}

.gi-modal-dice:active {
  transform: rotate(-12deg) scale(0.96);
}

.gi-modal-dice img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 0.4rem;
  pointer-events: none;
  /* The source dice art has a very dark maroon background; brighten it so the
       small header icon reads clearly. */
  filter: brightness(1.55) contrast(1.05);
}

.gi-modal-dice:hover img {
  filter: brightness(1.75) contrast(1.05);
}

/* Multi-select count badge ("n/MAX") next to the Level-2 title. */

.gi-subcategory-count {
  display: inline-block;
  margin-left: 0.5rem;
  padding: 0.1rem 0.5rem;
  background: var(--transparent-light, rgba(255, 255, 255, 0.08));
  border: 1px solid var(--lightgray);
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--body);
  vertical-align: middle;
}

/* Helper line under the Level-2 item grid for multi-select categories. */

.gi-multiselect-hint {
  flex-shrink: 0;
  margin: 0;
  padding: 0.5rem 1.25rem 0.85rem;
  text-align: center;
  font-size: 0.8rem;
  color: var(--gray);
}

.gi-modal-body {
  flex: 1;
  overflow-y: auto;
  /* Don't chain scroll to the page when the body hits its bounds. */
  overscroll-behavior: contain;
  padding: 0.75rem 1.25rem 1rem;
}

/* ===== Modal Tabs (Gallery / Honeybot / Create New) ===== */

.gi-modal-tabs {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem 0.25rem;
  flex-shrink: 0;
}

/* "OR" separator between the two appearance tabs — signals the two are
   mutually exclusive paths, not both. */

.gi-modal-tabs-or {
  flex: 0 0 auto;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: hsl(var(--static-white));
  text-transform: uppercase;
}

/* Light mode: the modal surface is white, so the fixed-white OR would vanish. */

:root:not(.dark) .gi-modal-tabs-or {
  color: hsl(var(--static-black));
}

.gi-modal-tab {
  flex: 1;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 600;
  background: transparent;
  border: 1px solid var(--lightgray);
  border-radius: 0.375rem;
  color: var(--graycolor);
  cursor: pointer;
  transition: all 0.2s;
  text-align: center;
}

.gi-modal-tab:hover {
  border-color: var(--graycolor);
  color: var(--body);
}

.gi-modal-tab.active {
  background: var(--graycolor);
  color: white;
  border-color: transparent;
}

/* ===== Category Grid (Level 1 modal) ===== */

.gi-category-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
}

.gi-category-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem;
  background: var(--light-bg);
  border: 1px solid var(--lightgray);
  border-radius: 0.5rem;
  cursor: pointer;
  transition: all 0.2s;
  text-align: center;
}

.gi-category-item:hover {
  border-color: var(--graycolor);
  transform: translateY(-1px);
}

.gi-category-item.selected {
  border-color: var(--purple-light);
  box-shadow: 0 0 0 2px rgba(225, 24, 217, 0.2);
  position: relative;
}

.gi-category-item.selected::after {
  content: '';
  position: absolute;
  top: 6px;
  right: 6px;
  width: 20px;
  height: 20px;
  background: var(--purple-light);
  border-radius: 50%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
  background-size: 12px;
  background-repeat: no-repeat;
  background-position: center;
  z-index: 2;
}

.gi-category-item-icon {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 0.375rem;
  overflow: hidden;
  background: var(--lightgray);
  position: relative;
}

/* Two-selection crossfade slideshow: each pick shows for 4s, loops.
   Total cycle is 8s; each layer is visible 4s then fades over ~0.4s. */

.gi-category-item-icon--slideshow {
  overflow: hidden;
}

.gi-category-item-icon--slideshow .gi-category-item-icon-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center top;
     object-position: center top;
  border-radius: 0.375rem;
  animation: gi-category-icon-slide 8s ease-in-out infinite;
}

.gi-category-item-icon--slideshow .gi-category-item-icon-slide--a {
  animation-delay: 0s;
}

.gi-category-item-icon--slideshow .gi-category-item-icon-slide--b {
  animation-delay: -4s;
}

@keyframes gi-category-icon-slide {
  0%, 45% {
    opacity: 1;
  }

  50%, 95% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.gi-category-item-icon img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center top;
     object-position: center top;
  border-radius: 0.375rem;
}

.gi-category-item-info {
  text-align: center;
  min-width: 0;
}

.gi-category-item-name {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--title);
}

/* Blocked category (mutual exclusion: position <-> fetish) */

.gi-category-item.gi-category-blocked {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

.gi-category-blocked-badge {
  font-size: 0.6875rem;
  color: #ef4444;
  font-weight: 500;
}

/* Premium-locked category (free user) */

.gi-category-item.gi-category-premium-locked {
  opacity: 0.5;
  cursor: not-allowed;
}

/* At selection limit — dim unselected items */

.gi-modal-item.gi-at-limit,
.gi-modal-btn-item.gi-at-limit {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

.gi-category-item .gi-premium-badge {
  position: static;
  display: inline-block;
}

.gi-category-item-arrow {
  display: none;
}

/* ===== Subcategory Modal Grid (Level 2) ===== */

.gi-modal-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
}

@media (max-width: 480px) {
  .gi-modal-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .gi-category-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
  }
}

.gi-modal-item {
  display: flex;
  flex-direction: column;
  background: var(--light-bg);
  border: 1px solid var(--lightgray);
  border-radius: 0.5rem;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
}

.gi-modal-item:hover {
  border-color: var(--graycolor);
  transform: translateY(-2px);
}

.gi-modal-item.selected {
  border-color: var(--purple-light);
  box-shadow: 0 0 0 2px rgba(225, 24, 217, 0.2);
}

/* Checkmark overlay for selected items */

.gi-modal-item.selected::after {
  content: '';
  position: absolute;
  top: 6px;
  right: 6px;
  width: 20px;
  height: 20px;
  background: var(--purple-light);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
  background-size: 12px;
  background-repeat: no-repeat;
  background-position: center;
  z-index: 2;
}

.gi-modal-item-image {
  position: relative;
  aspect-ratio: 1;
  background-size: cover;
  background-position: center top;
  background-color: var(--light-bg);
}

/* Portrait aspect ratio for categories with portrait images */

.gi-modal-grid-portrait .gi-modal-item-image {
  aspect-ratio: 2/3;
}

.gi-modal-item-name {
  padding: 0.5rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--body);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Bot items in modal */

.gi-modal-bot-item {
  position: relative;
}

.gi-modal-bot-item .gi-modal-item-image {
  aspect-ratio: 3/4;
}

.gi-modal-bot-item .gi-modal-item-name {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.6));
  padding: 1rem 0.5rem 0.5rem;
  color: hsl(var(--static-white));
}

/* Gallery image items in modal */

.gi-modal-gallery-item .gi-modal-item-image {
  aspect-ratio: 3/4;
}

/* ===== Button-style items (emotions, scenes, accessories) ===== */

.gi-modal-btn-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.gi-modal-btn-item {
  padding: 0.5rem 1rem;
  background: var(--light-bg);
  border: 1px solid var(--lightgray);
  border-radius: 9999px;
  cursor: pointer;
  transition: all 0.2s;
  font-size: 0.875rem;
  color: var(--body);
  white-space: nowrap;
}

.gi-modal-btn-item:hover {
  border-color: var(--graycolor);
}

.gi-modal-btn-item.selected {
  background-image: linear-gradient(to right, var(--gre-secondary), var(--gre-primary), var(--gre-secondary), var(--gre-primary));
  background-size: 300% 100%;
  color: hsl(var(--static-white));
  border-color: transparent;
}

/* ===== Color Picker (clothing colors) ===== */

.gi-color-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding-bottom: 0.75rem;
  margin-bottom: 0.75rem;
  border-bottom: 1px solid var(--lightgray);
}

.gi-color-swatch {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  border: 2px solid var(--lightgray);
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
}

.gi-color-swatch:hover {
  transform: scale(1.1);
}

.gi-color-swatch.selected {
  border-color: var(--purple-light);
  box-shadow: 0 0 0 2px rgba(225, 24, 217, 0.3);
}

.gi-color-swatch.selected::after {
  content: '';
  position: absolute;
  inset: 2px;
  border-radius: 50%;
  border: 2px solid hsl(var(--white));
}

/* ===== Premium Lock ===== */

.gi-modal-item.locked {
  opacity: 0.5;
  cursor: not-allowed;
}

.gi-modal-item.locked:hover {
  transform: none;
  border-color: var(--lightgray);
}

.gi-premium-badge {
  position: absolute;
  top: 6px;
  right: 6px;
  font-size: 0.6rem;
  background: #ef4444;
  color: hsl(var(--static-white));
  padding: 2px 6px;
  border-radius: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  z-index: 2;
}

/* ===== Custom Prompt ===== */

.gi-custom-prompt {
  grid-column: 1 / -1;
  min-height: 0;
}

.gi-prompt-box {
  position: relative;
  display: flex;
  flex-direction: column;
  background: hsl(var(--white));
  border: 1px dashed var(--gray);
  border-radius: 0.5rem;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}

.gi-prompt-box:hover {
  background: var(--light-bg);
}

.gi-prompt-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.gi-prompt-placeholder svg {
  width: 1rem;
  height: 1rem;
  color: var(--gray);
  margin-bottom: 0.5rem;
}

.gi-prompt-placeholder .title {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--title);
}

.gi-prompt-sublabel {
  font-size: 0.75rem;
  color: var(--gray);
}

.gi-prompt-box.expanded {
  border-style: solid;
  border-color: var(--purple-light);
  background: var(--light-bg);
  /* Still a button — the whole box always opens the prompt-helper modal. */
  cursor: pointer;
}

.gi-prompt-box.expanded .gi-prompt-placeholder {
  display: none;
}

.gi-prompt-textarea {
  width: 100%;
  /* Read-only preview of the prompt: editing happens in the helper modal.
       Fixed height — long prompts scroll inside the box instead of growing it.
       Tap/click bubbles up to the box (which opens the modal); a scroll
       gesture just scrolls; readonly keeps the mobile keyboard closed. */
  height: 80px;
  resize: none;
  overflow-y: auto;
  cursor: pointer;
  background: transparent;
  border: none;
  border-radius: 0.5rem;
  /* Right padding leaves room for the reset (×) button in the top-right. */
  padding: 0.75rem 3rem 0.75rem 0.75rem;
  color: var(--body);
  font-size: 1rem;
  font-family: inherit;
  line-height: 1.4;
  outline: none;
  box-sizing: border-box;
}

/* Explicit (higher-specificity) re-enable: an earlier iteration shipped
   `pointer-events: none` on the preview textarea; this guarantees scrolling
   works even against a stale compiled bundle. */

.gi-prompt-box .gi-prompt-textarea {
  pointer-events: auto;
}

.gi-prompt-textarea::-moz-placeholder {
  color: var(--gray);
}

.gi-prompt-textarea::placeholder {
  color: var(--gray);
}

.gi-prompt-error {
  font-size: 0.75rem;
  color: #ef4444;
  padding: 0.25rem 0.75rem 0.5rem;
}

.gi-prompt-box.invalid .gi-prompt-textarea {
  border-color: #ef4444;
}

/* Prompt blocked when position or fetish selected */

.gi-prompt-box.gi-prompt-blocked {
  opacity: 0.5;
  pointer-events: none;
}

.gi-prompt-blocked-msg {
  font-size: 0.75rem;
  color: var(--gray);
  text-align: center;
  padding: 0.375rem 0.75rem 0.5rem;
  margin: 0;
}

/* Prompt Info Button */

.gi-prompt-info-btn {
  position: absolute;
  top: -0.625rem;
  right: -0.625rem;
  width: 1.25rem;
  height: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: hsl(var(--white));
  box-shadow: 0 0 0 2px hsl(var(--white));
  border: none;
  color: var(--gray);
  cursor: pointer;
  padding: 0;
  z-index: 5;
  transition: color 0.2s;
  border-radius: 50%;
}

.gi-prompt-info-btn:hover {
  color: var(--purple-light);
}

.gi-prompt-info-btn svg {
  width: 1rem;
  height: 1rem;
}

/* Prompt Tooltip */

.gi-prompt-tooltip {
  display: none;
  position: absolute;
  top: 1rem;
  right: 0.25rem;
  width: 16rem;
  background: hsl(var(--white));
  border: 1px solid var(--lightgray);
  border-radius: 0.5rem;
  padding: 0.75rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 20;
  font-size: 0.6875rem;
  line-height: 1.4;
  color: var(--body);
}

.gi-prompt-tooltip.visible {
  display: block;
}

@media (hover: hover) and (pointer: fine) {
  .gi-prompt-info-btn:hover + .gi-prompt-tooltip,
    .gi-prompt-tooltip:hover {
    display: block;
  }
}

.gi-prompt-tooltip-title {
  font-weight: 600;
  font-size: 0.875rem;
  margin-bottom: 0.375rem;
  color: var(--title);
}

.gi-prompt-tooltip ul {
  list-style: disc;
  padding-left: 1rem;
  margin: 0 0 0.5rem 0;
}

.gi-prompt-tooltip ul li {
  font-size: 0.875rem !important;
  line-height: 1.4 !important;
  margin-bottom: 0.25rem;
}

.gi-prompt-tooltip-warning {
  margin: 0;
  padding-top: 0.375rem;
  border-top: 1px solid var(--lightgray);
  color: var(--gray);
  font-style: italic;
  font-size: 0.875rem;
}

/* ===== Bottom Controls ===== */

.gi-bottom-controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.gi-generate-btn {
  flex: 1;
  padding: 0.625rem 1rem;
  background-image: linear-gradient(to right, var(--gre-secondary), var(--gre-primary));
  border: none;
  border-radius: 0.375rem;
  color: hsl(var(--static-white));
  font-size: 0.875rem;
  font-weight: 500;
  cursor: not-allowed;
  opacity: 0.5;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gi-wand-icon {
  margin-right: 0.625rem;
  flex-shrink: 0;
}

.gi-generate-btn:not(:disabled) {
  cursor: pointer;
  opacity: 1;
}

.gi-generate-btn:not(:disabled):hover {
  opacity: 0.9;
}

a.gi-generate-btn {
  text-decoration: none;
  gap: 0.5rem;
}

.gi-try-free-badge,
.gi-free-badge {
  border: 1px solid hsl(var(--static-white));
  border-radius: 9999px;
  padding: 0.125rem 0.5rem;
  font-size: 0.75rem;
  white-space: nowrap;
}

/* ===== Progress Bar on Generate Button ===== */

.gi-generate-btn.gi-progress-active {
  position: relative;
  overflow: hidden;
  background: var(--purple-light) !important;
  background-image: none !important;
  opacity: 1 !important;
}

.gi-generate-btn.gi-progress-active::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: var(--progress, 0%);
  background: linear-gradient(to right, var(--gre-secondary), var(--gre-primary));
  border-radius: inherit;
  transition: width 0.3s ease-out;
  z-index: 0;
}

.gi-generate-btn.gi-progress-complete::before {
  transition: width 0.4s ease-in;
}

.gi-btn-content {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  /* The label must never wrap ("Generate / Image" on two lines next to the
       Try-for-free badge on mobile). */
  white-space: nowrap;
}

/* Small phones: drop the wand icon to save width so the Generate label
   (+ Try-for-free badge for anon) and the Start-over button always share
   one row. */

@media (max-width: 575px) {
  .gi-generate-btn .gi-wand-icon {
    display: none;
  }

  .gi-bottom-controls {
    flex-wrap: nowrap;
  }

  .gi-bottom-controls .gi-generate-btn {
    flex: 1 1 auto;
    min-width: 0;
  }

  a.gi-generate-btn {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }

  a.gi-generate-btn .gi-free-badge {
    font-size: 0.6875rem;
    padding: 0.125rem 0.375rem;
  }
}

/* ===== Start Over Button ===== */

.gi-start-over-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.375rem;
  height: 2.375rem;
  background: hsl(var(--static-white));
  border: none;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.2s;
  flex-shrink: 0;
}

.gi-start-over-btn:hover {
  opacity: 0.8;
}

.gi-start-over-btn:active {
  transform: scale(0.95);
}

.gi-start-over-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

.gi-start-over-btn svg {
  width: 1.125rem;
  height: 1.125rem;
  flex-shrink: 0;
}

/* ===== Start Over Popup ===== */

.gi-start-over-popup {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gi-start-over-popup-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
}

.gi-start-over-popup-content {
  position: relative;
  width: 90%;
  max-width: 400px;
  padding: 1.75rem;
  background: hsl(var(--white));
  border: 1px solid var(--lightgray);
  border-radius: 0.75rem;
  text-align: center;
}

.gi-start-over-popup-close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  background: none;
  border: none;
  border-radius: 0.375rem;
  color: var(--graycolor);
  cursor: pointer;
  transition: all 0.2s;
}

.gi-start-over-popup-close:hover {
  background: var(--transparent-light);
  color: var(--body);
}

.gi-start-over-popup-close svg {
  width: 1rem;
  height: 1rem;
}

/* ===== Generate Anyway Popup ===== */

.gi-anyway-popup {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gi-anyway-popup-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
}

.gi-anyway-popup-content {
  position: relative;
  width: 90%;
  max-width: 400px;
  padding: 1.75rem;
  background: hsl(var(--white));
  border: 1px solid var(--lightgray);
  border-radius: 0.75rem;
  text-align: center;
}

.gi-anyway-popup-close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  background: none;
  border: none;
  border-radius: 0.375rem;
  color: var(--graycolor);
  cursor: pointer;
  font-size: 1.25rem;
  line-height: 1;
  transition: all 0.2s;
}

.gi-anyway-popup-close:hover {
  background: var(--transparent-light);
  color: var(--body);
}

/* ===== Disclaimer Popup ===== */

.gi-disclaimer-popup {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gi-disclaimer-popup-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
}

.gi-disclaimer-popup-content {
  position: relative;
  width: 90%;
  max-width: 400px;
  padding: 1.75rem;
  background: hsl(var(--white));
  border: 1px solid var(--lightgray);
  border-radius: 0.75rem;
  text-align: center;
}

.gi-disclaimer-popup-close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  background: none;
  border: none;
  border-radius: 0.375rem;
  color: var(--graycolor);
  cursor: pointer;
  font-size: 1.25rem;
  line-height: 1;
  transition: all 0.2s;
}

.gi-disclaimer-popup-close:hover {
  background: var(--transparent-light);
  color: var(--body);
}

/* ===== Disclaimer Trigger Button ===== */

.gi-disclaimer-btn {
  display: block;
  margin: 0.5rem auto 0;
  background: none;
  border: none;
  color: var(--graycolor);
  font-size: 0.8125rem;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
  transition: color 0.2s;
}

.gi-disclaimer-btn:hover {
  color: var(--body);
}

/* ===== Filter/Gallery Section ===== */

.gi-filter-section {
  width: 100%;
  max-width: 80rem;
  margin-top: 0.5rem;
}

.gi-image-grid {
  width: 100%;
  max-width: 80rem;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3px;
  padding: 0 3px;
}

.gi-image-grid > div {
  aspect-ratio: 3/4;
  overflow: hidden;
  position: relative;
  border-radius: 0.375rem;
}

@media (min-width: 640px) {
  .gi-image-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 768px) {
  .gi-image-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (min-width: 1280px) {
  .gi-image-grid {
    grid-template-columns: repeat(5, 1fr);
  }
}

/* ===== Notification Toast ===== */

.gi-notification {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.5rem;
  background: var(--lightgray);
  border-radius: 0.75rem;
  border: 1px solid var(--lightgray);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
  z-index: 9999;
  opacity: 0;
  transform: translateY(1rem);
  transition: all 0.3s ease;
}

.gi-notification.active {
  opacity: 1;
  transform: translateY(0);
}

/* ===== Lightbox ===== */

.gi-lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  height: 100vh;
  height: 100dvh;
  width: 100vw;
  overflow: hidden;
}

.gi-lightbox.active {
  display: flex;
}

.gi-lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.95);
  margin: -50px;
  padding: 50px;
}

.gi-lightbox-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 210;
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  border-radius: 50%;
  color: white;
  cursor: pointer;
  transition: background 0.2s;
}

.gi-lightbox-close:hover {
  background: rgba(255, 255, 255, 0.2);
}

.gi-lightbox-close svg {
  width: 1.5rem;
  height: 1.5rem;
}

.gi-lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 210;
  width: 3rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  border-radius: 50%;
  color: white;
  cursor: pointer;
  transition: background 0.2s, opacity 0.2s;
}

.gi-lightbox-nav:hover {
  background: rgba(255, 255, 255, 0.25);
}

.gi-lightbox-nav svg {
  width: 1.5rem;
  height: 1.5rem;
}

.gi-lightbox-prev {
  left: 1rem;
}

.gi-lightbox-next {
  right: 1rem;
}

@media (max-width: 768px) {
  .gi-lightbox-nav {
    display: none;
  }
}

.gi-lightbox-content {
  position: relative;
  z-index: 205;
  max-width: 90vw;
  max-height: 85vh;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.gi-lightbox-content img {
  max-width: 90vw;
  max-height: 85vh;
  -o-object-fit: contain;
     object-fit: contain;
  border-radius: 0.5rem;
  pointer-events: auto;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  -webkit-user-drag: none;
}

.gi-lightbox-counter {
  position: absolute;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 210;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.875rem;
  font-weight: 500;
  background: rgba(0, 0, 0, 0.5);
  padding: 0.25rem 0.75rem;
  border-radius: 1rem;
}

.gi-lightbox-download {
  position: absolute;
  bottom: 1.5rem;
  right: 1rem;
  z-index: 210;
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  border-radius: 50%;
  color: white;
  cursor: pointer;
  transition: background 0.2s;
}

.gi-lightbox-download:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* ===== Delete Modal ===== */

.gi-delete-modal {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gi-delete-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
}

.gi-delete-modal-card {
  position: relative;
  width: 90%;
  max-width: 400px;
  padding: 1.75rem;
  background: hsl(var(--white));
  border: 1px solid var(--lightgray);
  border-radius: 0.75rem;
  text-align: center;
}

.gi-delete-modal-close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  background: none;
  border: none;
  border-radius: 0.375rem;
  color: var(--graycolor);
  cursor: pointer;
  font-size: 1.25rem;
  line-height: 1;
  transition: all 0.2s;
}

.gi-delete-modal-close:hover {
  background: var(--transparent-light);
  color: var(--body);
}

/* ===== Gallery Item Controls ===== */

.gi-grid-item {
  aspect-ratio: 3/4;
  border-radius: 0.375rem;
  background: var(--lightgray);
  overflow: hidden;
  position: relative;
  cursor: pointer;
}

.gi-grid-media {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}

.gi-grid-delete-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 5;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.2);
  border: none;
  border-radius: 50%;
  color: white;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s, background 0.2s;
}

.gi-grid-delete-btn:hover {
  background: rgba(0, 0, 0, 0.8);
}

.gi-grid-item:hover .gi-grid-delete-btn {
  opacity: 1;
}

.gi-grid-download-btn {
  position: absolute;
  bottom: 8px;
  left: 8px;
  z-index: 5;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.6);
  border: none;
  border-radius: 6px;
  color: white;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s, background 0.2s;
}

.gi-grid-download-btn:hover {
  background: rgba(0, 0, 0, 0.85);
}

.gi-grid-item:hover .gi-grid-download-btn {
  opacity: 1;
}

.gi-grid-download-btn svg {
  width: 16px;
  height: 16px;
}

/* Touch devices: always show controls */

@media (hover: none) {
  .gi-grid-delete-btn,
    .gi-grid-download-btn,
    .gi-select-box.has-selection .gi-box-close {
    opacity: 0.7;
  }
}

/* ===== Skeleton / Shimmer ===== */

.gi-gallery-skeleton {
  position: relative;
  overflow: hidden;
  border-radius: 0.375rem;
  background: var(--lightgray);
}

.gi-gallery-skeleton::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.08) 50%, transparent 100%);
  background-size: 200% 100%;
  animation: gi-shimmer 1.5s infinite;
}

@keyframes gi-shimmer {
  0% {
    background-position: -200% 0;
  }

  100% {
    background-position: 200% 0;
  }
}

.gi-gallery-loaded .gi-gallery-skeleton:not(#gi-gallery-loading) {
  display: none;
}

/* ===== Spinner ===== */

.gi-spinner {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: hsl(var(--static-white));
  border-radius: 50%;
  animation: gi-spin 0.8s linear infinite;
  margin-right: 0.5rem;
}

@keyframes gi-spin {
  to {
    transform: rotate(360deg);
  }
}

/* ===== Generating Placeholder (single gallery slot) ===== */

.gi-generating-placeholder {
  pointer-events: none;
  overflow: hidden;
  background: var(--lightgray);
}

.gi-generating-placeholder img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: top;
     object-position: top;
}

.gi-generating-placeholder .gi-blur-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  z-index: 2;
}

.gi-generating-placeholder .gi-placeholder-spinner {
  width: 36px;
  height: 36px;
  border: 3px solid rgba(255, 255, 255, 0.15);
  border-top-color: rgba(255, 255, 255, 0.7);
  border-radius: 50%;
  animation: gi-spin 0.8s linear infinite;
}

.gi-generating-placeholder .gi-placeholder-label {
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.7);
  letter-spacing: 0.05em;
}

.gi-generating-placeholder .gi-placeholder-notify {
  font-size: 0.90rem;
  color: rgba(255, 255, 255, 0.5);
  text-align: center;
  line-height: 1.4;
  max-width: 85%;
  margin-top: 0.25rem;
}

/* ===== Mobile Adjustments ===== */

@media (max-width: 767px) {
  /* Hide Gallery/Honeybot top tabs on mobile (they live inside the modal) */

  .gi-desktop-tabs {
    display: none;
  }
}

@media (max-width: 480px) {
  .gi-box-placeholder {
    padding: 0.5rem;
  }

  .gi-box-placeholder svg {
    width: 1.25rem;
    height: 1.25rem;
    margin-bottom: 0.25rem;
  }

  .gi-box-placeholder .gi-gradient-icon {
    width: 2rem;
    height: 2rem;
  }

  .gi-box-label {
    font-size: 0.8125rem;
  }

  .gi-bottom-controls {
    flex-wrap: wrap;
  }

  .gi-bottom-controls .gi-generate-btn {
    order: 1;
    flex: 1 1 calc(100% - 3rem);
  }

  .gi-bottom-controls .gi-start-over-btn {
    order: 2;
  }

  .gi-notification {
    left: 2rem;
    right: 2rem;
    bottom: 1rem;
  }
}

/* ===== Level 2 Modal (stacks on top of Level 1) ===== */

.gi-modal-level2 {
  z-index: 110;
}

/* ===== Empty state ===== */

.gi-modal-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 2rem;
  color: var(--graycolor);
}

.gi-modal-empty p {
  margin-bottom: 0.5rem;
}

/* ===== Load More in modal ===== */

.gi-modal-load-more {
  grid-column: 1 / -1;
  padding: 0.75rem 1.5rem;
  background-image: linear-gradient(to right, var(--gre-secondary), var(--gre-primary), var(--gre-secondary), var(--gre-primary));
  background-size: 300% 100%;
  border: none;
  border-radius: 0.375rem;
  color: hsl(var(--static-white));
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.4s ease-in-out;
  margin-top: 0.5rem;
}

.gi-modal-load-more:hover {
  background-position: 50% 0;
}

/* ===== Modal Skeleton ===== */

.gi-modal-skeleton {
  position: relative;
  background: var(--lightgray);
  border-radius: 0.5rem;
  min-height: 120px;
  aspect-ratio: 1;
}

.gi-modal-skeleton::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.08) 50%, transparent 100%);
  background-size: 200% 100%;
  animation: gi-shimmer 1.5s infinite;
}

@media (prefers-reduced-motion: reduce) {
  .gi-gallery-skeleton::before,
    .gi-modal-skeleton::before {
    animation: none;
    background: rgba(255, 255, 255, 0.04);
  }
}

/* ============================================================
   Prompt Helper modal (custom-prompt presets)
   The whole .gi-prompt-box is the open-modal button (data-gi-open-helper);
   there is no separate helper button anymore.
   ============================================================ */

.gi-prompt-reset-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  color: var(--body);
  background: var(--light-bg);
  border: 1px solid var(--lightgray);
  cursor: pointer;
  transition: background 0.2s ease, transform 0.1s ease;
  z-index: 2;
}

.gi-prompt-reset-btn:hover {
  background: var(--lightgraycolor);
}

.gi-prompt-reset-btn:active {
  transform: scale(0.92);
}

.gi-prompt-reset-btn[hidden] {
  display: none;
}

.gi-prompt-box {
  position: relative;
}

body.gi-helper-open {
  overflow: hidden;
}

.gi-helper-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: stretch;
  justify-content: center;
}

.gi-helper-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
}

.gi-helper-content {
  position: relative;
  width: 100%;
  max-width: 1100px;
  margin: auto;
  background: var(--bgbody);
  border: 1px solid var(--lightgray);
  border-radius: 16px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  max-height: 95vh;
  height: 95vh;
}

.gi-helper-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  border-bottom: 1px solid var(--lightgray);
  flex-shrink: 0;
}

.gi-helper-header h3 {
  font-size: 1.125rem;
  font-weight: 600;
  margin: 0;
  color: var(--body);
}

.gi-helper-close {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  color: var(--body);
  background: transparent;
  border: 0;
  cursor: pointer;
  transition: background 0.2s ease;
}

.gi-helper-close:hover {
  background: var(--transparent-light);
}

.dark .gi-helper-close:hover {
  background: rgba(255, 255, 255, 0.08);
}

.gi-helper-body {
  padding: 20px 24px 24px;
  overflow-y: auto;
  overscroll-behavior: contain;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.gi-helper-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--body);
}

.gi-helper-hint {
  font-size: 0.75rem;
  color: var(--bodytext);
  margin: 0;
}

.gi-helper-textarea {
  width: 100%;
  min-height: 220px;
  padding: 14px 16px;
  border-radius: 10px;
  border: 1px solid var(--lightgray);
  background: var(--light-bg);
  color: var(--body);
  font-family: inherit;
  /* Never below 16px: iOS Safari auto-zooms the page when focusing any
       input with a smaller font, which leaves the layout zoomed/drifting. */
  font-size: 1rem;
  line-height: 1.5;
  resize: vertical;
  outline: none;
  transition: border-color 0.2s ease;
}

.gi-helper-textarea:focus {
  border-color: var(--purple-light);
}

.gi-helper-counter {
  text-align: right;
  font-size: 0.7rem;
  color: var(--bodytext);
  margin-top: -8px;
}

.gi-helper-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 6px;
}

.gi-helper-tab {
  /* Flex-center the label with line-height:1 — Satoshi's asymmetric
       ascent/descent + fractional default leading (0.8rem → 19.2px) made the
       text ride ~1px (2–3 device px on 3× phones) above the pill's center. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  padding: 9px 14px;
  border-radius: 9999px;
  font-size: 0.8rem;
  color: var(--bodytext);
  background: transparent;
  border: 1px solid var(--lightgray);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.gi-helper-tab:hover {
  background: var(--light-bg);
}

.gi-helper-tab.active {
  background: linear-gradient(135deg, #E118D9, #E19C11);
  color: hsl(var(--static-white));
  border-color: transparent;
}

.gi-helper-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.gi-helper-preset {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  padding: 11px 14px;
  border-radius: 8px;
  font-size: 0.85rem;
  color: var(--body);
  background: transparent;
  border: 1px solid var(--lightgray);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.gi-helper-preset:hover {
  background: rgba(225, 24, 217, 0.08);
  border-color: var(--purple-light);
  color: var(--body);
}

.gi-helper-preset.hidden {
  display: none;
}

.gi-helper-footer {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  padding: 14px 24px;
  border-top: 1px solid var(--lightgray);
  flex-shrink: 0;
}

.gi-helper-ok {
  min-width: 120px;
  padding: 10px 24px;
  border-radius: 9999px;
  font-size: 0.875rem;
  font-weight: 600;
  color: hsl(var(--static-white));
  background: linear-gradient(135deg, #E118D9, #E19C11);
  border: 0;
  cursor: pointer;
  transition: opacity 0.2s ease, transform 0.1s ease;
}

.gi-helper-ok:hover {
  opacity: 0.92;
}

.gi-helper-ok:active {
  transform: scale(0.97);
}

.gi-helper-reset {
  min-width: 120px;
  padding: 10px 24px;
  border-radius: 9999px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--body);
  background: var(--light-bg);
  border: 1px solid var(--lightgray);
  cursor: pointer;
  transition: background 0.2s ease, transform 0.1s ease;
}

.gi-helper-reset:hover {
  background: var(--lightgraycolor);
}

.gi-helper-reset:active {
  transform: scale(0.97);
}

@media (max-width: 768px) {
  .gi-helper-modal {
    /* Reserve a bit of breathing room top + bottom so iOS browser
           chrome / home-bar can't cover the header or footer. The modal
           content itself fills this padded area. Slightly more padding
           on top so the modal doesn't read as flush against the URL bar. */
    padding: 24px 12px calc(12px + env(safe-area-inset-bottom, 0px));
    padding-top: calc(24px + env(safe-area-inset-top, 0px));
  }

  .gi-helper-content {
    max-width: 100%;
    margin: 0;
    border-radius: 14px;
    /* Use the dynamic viewport height so iOS Safari / Chrome shrink
           the modal when the URL bar / toolbar is shown. Subtract the
           top + bottom padding (24px combined plus safe-area insets) so
           the header / footer always stay inside the visible viewport. */
    height: auto;
    max-height: calc(100vh - 36px);
    max-height: calc(100dvh - 36px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  }

  .gi-helper-header {
    padding: 12px 16px;
  }

  .gi-helper-body {
    padding: 16px;
  }

  .gi-helper-footer {
    /* Modal-level padding already accounts for the bottom safe-area
           inset, so the footer just gets normal padding. */
    padding: 12px 16px;
  }

  .gi-helper-ok,
    .gi-helper-reset {
    flex: 1;
    min-width: 0;
    padding: 10px 16px;
  }

  .gi-helper-textarea {
    min-height: 180px;
  }

  .gi-prompt-reset-btn {
    top: 10px;
    right: 10px;
  }

  .gi-prompt-textarea {
    padding-right: 3rem;
  }
}

/* Very small phones: tighten padding so the footer / reset / OK never get
   crowded out by the iOS toolbar. */

@media (max-width: 380px) {
  .gi-helper-header {
    padding: 10px 12px;
  }

  .gi-helper-header h3 {
    font-size: 1rem;
  }

  .gi-helper-body {
    padding: 12px;
    gap: 10px;
  }

  /* font-size stays 1rem (16px) — smaller triggers the iOS focus auto-zoom. */

  .gi-helper-textarea {
    min-height: 140px;
    padding: 10px 12px;
  }

  .gi-helper-footer {
    padding: 10px 12px;
  }

  .gi-helper-ok,
    .gi-helper-reset {
    font-size: 0.8rem;
    padding: 9px 12px;
  }

  .gi-helper-tab {
    padding: 7px 10px;
    font-size: 0.75rem;
  }

  .gi-helper-preset {
    padding: 8px 10px;
    font-size: 0.78rem;
  }
}

/* Mobile-only: tabs + presets become single horizontal scroll rows so the
   modal doesn't grow tall enough to push the textarea / footer off-screen.
   They also move ABOVE the textarea: when the iOS keyboard opens it covers
   the bottom half of the modal, so the preset propositions must sit at the
   top to stay visible. */

@media (max-width: 768px) {
  .gi-helper-tabs {
    order: 1;
  }

  .gi-helper-presets {
    order: 2;
  }

  .gi-helper-label {
    order: 3;
  }

  .gi-helper-textarea {
    order: 4;
  }

  .gi-helper-counter {
    order: 5;
  }

  .gi-helper-tabs,
    .gi-helper-presets {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin: 0 -16px;
    padding-left: 16px;
    padding-right: 16px;
    scroll-snap-type: x proximity;
  }

  .gi-helper-tabs {
    padding-top: 6px;
    padding-bottom: 2px;
  }

  .gi-helper-presets {
    padding-top: 2px;
    padding-bottom: 6px;
  }

  .gi-helper-tabs::-webkit-scrollbar,
    .gi-helper-presets::-webkit-scrollbar {
    display: none;
  }

  .gi-helper-tab,
    .gi-helper-preset {
    flex: 0 0 auto;
    scroll-snap-align: start;
  }
}

/* ===== Honeybot tab filter bar (Appearance modal) ===== */

/* Sticky to the modal-body's top edge: negative offsets cancel the body's
   0.75rem 1.25rem padding so the bar spans full modal width and fully
   covers bots scrolling underneath. Background matches `.gi-modal-content`. */

.gi-bot-filter-bar {
  position: sticky;
  top: -0.75rem;
  z-index: 3;
  background: hsl(var(--white));
  padding: 0.75rem 1.25rem;
  margin: -0.75rem -1.25rem 0.5rem;
  border-bottom: 1px solid var(--lightgray);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.gi-bot-search {
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--lightgray);
  border-radius: 0.375rem;
  background: transparent;
  color: var(--body);
  font-size: 0.875rem;
}

.gi-bot-search:focus {
  outline: none;
  border-color: var(--primary);
}

/* 16px floor on mobile — sub-16px inputs trigger the iOS focus auto-zoom. */

@media (max-width: 1023px) {
  .gi-bot-search {
    font-size: 1rem;
  }
}

.gi-bot-chip-row {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  gap: 0.375rem;
  padding-bottom: 0.25rem;
  /* Firefox: thin thumb, no track color (transparent) */
  scrollbar-width: thin;
  scrollbar-color: var(--lightgray) transparent;
}

/* WebKit: hide the track entirely, show only the thumb */

.gi-bot-chip-row::-webkit-scrollbar {
  height: 4px;
  background: transparent;
}

.gi-bot-chip-row::-webkit-scrollbar-track {
  background: transparent;
}

.gi-bot-chip-row::-webkit-scrollbar-thumb {
  background: var(--lightgray);
  border-radius: 2px;
}

.gi-bot-chip {
  flex: 0 0 auto;
  padding: 0.3rem 0.75rem;
  border: 1px solid var(--lightgray);
  border-radius: 999px;
  background: transparent;
  color: var(--body);
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.gi-bot-chip:hover {
  border-color: var(--primary);
}

.gi-bot-chip.active {
  background-image: linear-gradient(to right, var(--gre-secondary), var(--gre-primary));
  border-color: transparent;
  color: hsl(var(--static-white));
}

/* IntersectionObserver sentinel — invisible, takes full grid row */

.gi-bot-sentinel {
  grid-column: 1 / -1;
  height: 1px;
}

/* Empty-state when filters return no bots */

.gi-bot-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 2rem 1rem;
  color: var(--graycolor);
  font-size: 0.875rem;
}

/* ===== Mobile: keep the modal title visible (inline header row) ===== */

@media (max-width: 575px) {
  /* Tighten the header but keep it as a normal flex row so the title shows. */

  .gi-modal-header {
    padding: 0.75rem 0.85rem;
    gap: 0.5rem;
  }

  /* Title stays visible; truncate if it would overflow the row. */

  .gi-modal-header h3,
    .gi-modal-title,
    .gi-subcategory-title {
    font-size: 1rem;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Compact the action controls so the title keeps room on narrow screens. */

  .gi-modal-reset {
    padding: 0 0.6rem;
    font-size: 0.8rem;
  }

  .gi-modal-done {
    padding: 0 0.7rem;
    font-size: 0.8rem;
  }

  .gi-modal-header-actions {
    gap: 0.35rem;
  }

  .gi-modal-back {
    height: 2rem;
    padding: 0 0.6rem;
    font-size: 0.8rem;
  }
}

/* Video Feed - TikTok Style */

/***********************
 * Video Feed – TikTok-Style Vertical Scroll
 * -----------------------------------
 * Full-screen vertical video feed with snap scrolling and autoplay.
 * Inspired by TikTok, Instagram Reels, and YouTube Shorts.
 *
 * SECTION INDEX
 * 1. Page & Container Styles
 * 2. Scroll Snap Behavior
 * 3. Video Item Styles
 * 4. Video Player Controls
 * 5. Overlays & Info
 * 6. Buttons & Interactive Elements
 * 7. Animations & Transitions
 * 8. Responsive Design
 * 9. Accessibility
 *
 ***********************/

/*=====================
 Pricing Components CSS
==========================*/

/* Desktop Price Typography */

.text-price-large-desktop {
  font-size: 60px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: -0.011em;
  font-family: 'Satoshi', sans-serif;
}

.text-price-small-desktop {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: -0.011em;
  font-family: 'Satoshi', sans-serif;
}

/* Mobile Price Typography (already in tailwind config but adding here for consistency) */

.text-price-large-mobile {
  font-size: 36px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.011em;
  font-family: 'Satoshi', sans-serif;
}

.text-price-small-mobile {
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.011em;
  font-family: 'Satoshi', sans-serif;
}

/* Price Container Layouts */

.price-container-desktop {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 3px;
}

.price-display-desktop {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 2px;
  margin: 0 auto;
}

.price-cents-container-desktop {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  margin-top: 18px;
}

.price-month-text-desktop {
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.011em;
  text-align: right;
  font-family: 'Satoshi', sans-serif;
}

/* Mobile Price Container Layouts */

.price-container-mobile {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.125rem;
  /* 2px */
}

.price-cents-container-mobile {
  display: flex;
  flex-direction: column;
}

/* Responsive Price Utilities */

@media (max-width: 991px) {
  .hide-on-mobile {
    display: none !important;
  }

  .show-on-mobile {
    display: block !important;
  }
}

@media (min-width: 992px) {
  .hide-on-desktop {
    display: none !important;
  }

  .show-on-desktop {
    display: block !important;
  }
}

/* Price Animation Utilities */

.price-transition {
  transition: all 0.2s ease-in-out;
}

/* VIP Toggle Specific Styles */

.vip-price-toggle {
  transition: opacity 0.3s ease-in-out;
}

.vip-price-toggle.hidden {
  opacity: 0;
  pointer-events: none;
}

/* VIP Mobile Toggle Styles */

#vip-billing-toggle-mobile + label {
  background: var(--dark);
  /* Dark background when unchecked, matching .honeybots-switch */
  transition: all 0.3s;
  -moz-transition: all 0.3s;
  -webkit-transition: all 0.3s;
}

#vip-billing-toggle-mobile:checked + label {
  background-image: linear-gradient(to right, var(--gre-secondary), var(--gre-primary));
}

#vip-billing-toggle-mobile + label span {
  background: hsl(var(--white));
  /* White toggle circle, matching .honeybots-switch */
  transition: transform 0.2s ease;
}

#vip-billing-toggle-mobile:checked + label span {
  transform: translateX(16px);
  /* Move toggle circle to the right (w-8 - w-3 = 20px - 4px = 16px) */
}

/* Platinum, Gold, and Basic Mobile Toggle Styles */

#platinum-billing-toggle-mobile + label,
#gold-billing-toggle-mobile + label,
#basic-billing-toggle-mobile + label {
  background: var(--dark);
  transition: all 0.3s;
  -moz-transition: all 0.3s;
  -webkit-transition: all 0.3s;
}

#platinum-billing-toggle-mobile:checked + label,
#gold-billing-toggle-mobile:checked + label,
#basic-billing-toggle-mobile:checked + label {
  background-image: linear-gradient(to right, var(--gre-secondary), var(--gre-primary));
}

#platinum-billing-toggle-mobile + label span,
#gold-billing-toggle-mobile + label span,
#basic-billing-toggle-mobile + label span {
  background: hsl(var(--white));
  transition: transform 0.2s ease;
}

#platinum-billing-toggle-mobile:checked + label span,
#gold-billing-toggle-mobile:checked + label span,
#basic-billing-toggle-mobile:checked + label span {
  transform: translateX(16px);
}

/* Strikethrough Price Positioning */

.price-strikethrough-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 8px;
}

.price-strikethrough-text {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.011em;
  text-align: center;
  text-decoration: line-through;
  font-family: 'Satoshi', sans-serif;
}

/* Yearly Text Brightness States */

.yearly-text-dim {
  opacity: 0.5;
  transition: opacity 0.3s ease-in-out;
}

.yearly-text-bright {
  opacity: 1;
  transition: opacity 0.3s ease-in-out;
}

/* Accordion Styles for Mobile Subscription Cards */

.accordion-container {
  width: 100%;
}

.accordion-header {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.accordion-header:hover {
  opacity: 0.7;
}

.accordion-header:active {
  opacity: 0.9;
}

.accordion-chevron {
  flex-shrink: 0;
  transition: transform 0.3s ease;
}

.accordion-content {
  max-height: 500px;
  overflow: hidden;
  transition: max-height 0.3s ease, opacity 0.3s ease;
  opacity: 1;
}

.accordion-content.accordion-collapsed {
  max-height: 0;
  opacity: 0;
}

.accordion-inner {
  /* Inner padding for accordion content */
}

/* Ensure accordion doesn't interfere with card click */

.accordion-container * {
  pointer-events: auto;
}

/* Promo Code Toggle Button Styles */

.promo-code-toggle-btn {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 7px 16px;
  gap: 8px;
  width: 136px;
  height: 31px;
  background: var(--lightbordergray);
  border-radius: 17px;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
  flex: none;
  position: relative;
}

.promo-code-toggle-btn:hover {
  background: rgba(128, 128, 128, 0.7);
}

.promo-code-button-content {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 8px;
  transition: opacity 0.2s ease;
}

.promo-code-button-content.hidden {
  display: none;
}

.promo-code-icon {
  width: 17px;
  height: 17px;
  position: relative;
  flex: none;
  order: 0;
  flex-grow: 0;
}

.promo-code-icon svg {
  width: 17px;
  height: 17px;
}

.promo-code-text {
  font-family: 'Satoshi', sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 14px;
  line-height: 150%;
  letter-spacing: -0.011em;
  color: hsl(var(--black));
  flex: none;
  order: 1;
  flex-grow: 0;
  white-space: nowrap;
}

:root.dark .promo-code-text {
  color: var(--graycolor);
}

.promo-code-svg-stroke {
  stroke: hsl(var(--black));
}

:root.dark .promo-code-svg-stroke {
  stroke: var(--graycolor);
}

/* Promo Code Input Container */

.promo-code-input-container {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
}

.promo-code-input-container.hidden {
  display: none;
}

.promo-code-input {
  width: 100% !important;
  height: 100% !important;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  font-family: 'Satoshi', sans-serif !important;
  font-style: normal !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  line-height: 150% !important;
  letter-spacing: -0.011em !important;
  color: hsl(var(--black)) !important;
  text-align: center !important;
  padding: 0 8px !important;
  box-shadow: none !important;
}

:root.dark .promo-code-input {
  color: var(--graycolor) !important;
}

.promo-code-input::-moz-placeholder {
  color: hsl(var(--black)) !important;
  opacity: 0.5 !important;
}

.promo-code-input::placeholder {
  color: hsl(var(--black)) !important;
  opacity: 0.5 !important;
}

:root.dark .promo-code-input::-moz-placeholder {
  color: var(--graycolor) !important;
  opacity: 0.7 !important;
}

:root.dark .promo-code-input::placeholder {
  color: var(--graycolor) !important;
  opacity: 0.7 !important;
}

/* Promo Code Apply Link */

.promo-code-apply-link {
  font-family: 'Satoshi', sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 14px;
  line-height: 150%;
  letter-spacing: -0.011em;
  color: hsl(var(--black));
  text-decoration: underline;
  cursor: pointer;
  margin-top: 8px;
  display: block;
  text-align: center;
  transition: opacity 0.2s ease;
}

.promo-code-apply-link:hover {
  opacity: 0.8;
}

.promo-code-apply-link.hidden {
  display: none;
}

/* Promo Code Toggle Container */

.promo-code-toggle-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* Premium Benefits Section Styles */

.premium-benefits-hidden {
  display: none;
  opacity: 0;
}

#premium-benefits-section {
  animation: fadeInUp 0.5s ease-out forwards;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Promo Code NAUGHTY State Styles */

.promo-code-naughty {
  font-weight: 700 !important;
  color: #FF1493 !important;
  /* Deep Pink for "naughty" vibe */
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  cursor: not-allowed !important;
  -webkit-user-select: none !important;
     -moz-user-select: none !important;
          user-select: none !important;
  animation: naughtyPulse 2s ease-in-out infinite;
}

:root.dark .promo-code-naughty {
  color: #FF69B4 !important;
  /* Hot Pink for dark mode */
}

@keyframes naughtyPulse {
  0%, 100% {
    opacity: 1;
  }

  50% {
    opacity: 0.7;
  }
}

/* Promo Code Toggle Button when promotion is active */

.promo-code-toggle-btn:has(.promo-code-naughty) {
  background: linear-gradient(135deg, rgba(255, 20, 147, 0.1) 0%, rgba(255, 105, 180, 0.1) 100%);
  border: 1.5px solid #FF1493;
  cursor: default;
  width: 136px;
}

:root.dark .promo-code-toggle-btn:has(.promo-code-naughty) {
  background: linear-gradient(135deg, rgba(255, 105, 180, 0.15) 0%, rgba(255, 20, 147, 0.15) 100%);
  border: 1.5px solid #FF69B4;
}

.promo-code-toggle-btn:has(.promo-code-naughty):hover {
  background: linear-gradient(135deg, rgba(255, 20, 147, 0.15) 0%, rgba(255, 105, 180, 0.15) 100%);
}

/* Disabled Apply Link Styling */

.promo-code-disabled {
  font-family: 'Satoshi', sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 12px;
  line-height: 150%;
  letter-spacing: -0.011em;
  color: #22c55e !important;
  /* Green to indicate active promotion */
  text-decoration: none;
  cursor: default;
  margin-top: 8px;
  display: block;
  text-align: center;
  opacity: 0.8;
}

:root.dark .promo-code-disabled {
  color: #4ade80 !important;
  /* Lighter green for dark mode */
}

/* Account Page Styles */

.account-page {
  min-height: 100vh;
  background: linear-gradient(180deg, #0a0a0b 0%, #111113 100%);
  padding-bottom: 80px;
}

.account-container {
  max-width: 680px;
  margin: 0 auto;
  padding: 0 20px;
}

.account-header {
  padding: 40px 0 32px;
  text-align: center;
}

.account-header h1 {
  font-size: 28px;
  font-weight: 700;
  color: #fff;
  margin: 0;
}

/* Account Cards */

.account-card {
  background: linear-gradient(135deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.02) 100%);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 20px;
  padding: 24px;
  margin-bottom: 16px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow:
        0 8px 32px rgba(0,0,0,0.3),
        inset 0 1px 0 rgba(255,255,255,0.1),
        inset 0 -1px 0 rgba(0,0,0,0.1);
  position: relative;
  overflow: hidden;
}

.account-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
}

.account-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.account-card-header h2 {
  font-size: 18px;
  font-weight: 600;
  color: #fff;
  margin: 0;
}

.account-card-header .card-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}

.card-icon-pink {
  background: linear-gradient(135deg, rgba(250,61,114,0.2) 0%, rgba(136,12,131,0.2) 100%);
  color: #FA3D72;
}

.card-icon-gold {
  background: linear-gradient(135deg, rgba(255,186,47,0.2) 0%, rgba(248,202,109,0.2) 100%);
  color: #FFBA2F;
}

.card-icon-blue {
  background: linear-gradient(135deg, rgba(61,87,218,0.2) 0%, rgba(0,159,255,0.2) 100%);
  color: #3D57DA;
}

.card-icon-red {
  background: linear-gradient(135deg, rgba(239,68,68,0.2) 0%, rgba(220,38,38,0.2) 100%);
  color: #EF4444;
}

.account-card-subtitle {
  font-size: 13px;
  color: #9ca3af;
  margin-top: 4px;
}

/* Profile Section */

.profile-row {
  display: flex;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.profile-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.profile-row:first-child {
  padding-top: 0;
}

.profile-label {
  font-size: 13px;
  color: #888;
  width: 100px;
  flex-shrink: 0;
}

.profile-value {
  flex: 1;
  font-size: 14px;
  color: #fff;
}

.profile-edit-btn {
  padding: 6px 12px;
  font-size: 12px;
  color: #888;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
}

.profile-edit-btn:hover {
  background: rgba(255,255,255,0.1);
  color: #fff;
}

/* Subscription Banner */

.subscription-banner {
  background: linear-gradient(135deg, rgba(250,61,114,0.15) 0%, rgba(136,12,131,0.15) 100%);
  border: 1px solid rgba(250,61,114,0.2);
  border-radius: 12px;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.subscription-banner-vip {
  background: linear-gradient(135deg, rgba(255,186,47,0.15) 0%, rgba(248,202,109,0.15) 100%);
  border: 1px solid rgba(255,186,47,0.2);
}

.subscription-banner-trial {
  background: linear-gradient(135deg, rgba(16,185,129,0.15) 0%, rgba(16,185,129,0.1) 100%);
  border: 1px solid rgba(16,185,129,0.25);
}

.subscription-banner-free {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
}

.subscription-banner-free .subscription-text,
.subscription-banner-free .subscription-subtext {
  color: #9ca3af;
}

.subscription-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.subscription-icon {
  font-size: 20px;
}

.subscription-text {
  font-size: 14px;
  font-weight: 500;
  color: #fff;
}

.subscription-subtext {
  font-size: 12px;
  color: #888;
  margin-top: 2px;
}

/* Media Info Row */

.media-info-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 24px;
  padding: 16px 20px;
  background: rgba(0,0,0,0.2);
  border-radius: 12px;
  margin-bottom: 16px;
}

.media-info-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #fff;
}

.media-info-item i {
  font-size: 16px;
  color: #888;
}

.media-info-item span:first-of-type {
  color: #aaa;
}

.media-info-value {
  font-weight: 600;
  color: #fff;
}

@media (max-width: 500px) {
  .media-info-row {
    gap: 12px 20px;
  }

  .media-info-item {
    font-size: 12px;
  }
}

/* Token Display */

.token-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

@media (max-width: 500px) {
  .token-grid {
    grid-template-columns: 1fr;
  }
}

.token-grid .token-item {
  background: rgba(255,255,255,0.03);
  border-radius: 9999px;
  padding: 14px 16px;
}

.token-label {
  font-size: 12px;
  color: #fff;
  margin-bottom: 6px;
}

.token-value {
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 8px;
}

.token-value-infinite {
  background: linear-gradient(90deg, #FFB2FC 0%, #F8CA6D 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.token-icon {
  width: 24px;
  height: 28px;
  -o-object-fit: contain;
     object-fit: contain;
}

.token-hint {
  font-size: 11px;
  font-weight: 400;
  color: #6b6b73;
  margin-left: 4px;
}

.subscription-svg-icon {
  width: 20px;
  height: 20px;
  color: #FFBA2F;
}

/* Coupon Badge */

.coupon-badge {
  position: absolute;
  top: 16px;
  right: 16px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  font-size: 11px;
  font-weight: 600;
  color: #111;
  background: linear-gradient(135deg, #FFBA2F 0%, #F8CA6D 100%);
  border: none;
  border-radius: 20px;
  text-decoration: none;
  transition: all 0.2s;
  flex-shrink: 0;
  z-index: 10;
  box-shadow: 0 2px 8px rgba(255,186,47,0.3);
}

.coupon-badge:hover {
  background: linear-gradient(135deg, #FFD700 0%, #FFBA2F 100%);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(255,186,47,0.4);
  color: #111;
}

.coupon-badge i {
  font-size: 14px;
}

@media (max-width: 500px) {
  .coupon-badge {
    position: relative;
    top: auto;
    right: auto;
    margin-bottom: 12px;
    width: 100%;
    justify-content: center;
  }
}

/* Cancel Subscription Accordion */

.cancel-sub-trigger {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 14px;
  margin-top: 20px;
  font-size: 14px;
  font-weight: 500;
  color: rgba(239,68,68,0.6);
  background: transparent;
  border: 1px solid rgba(239,68,68,0.15);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s;
}

.cancel-sub-trigger:hover {
  color: #EF4444;
  background: rgba(239,68,68,0.05);
  border-color: rgba(239,68,68,0.25);
}

.cancel-sub-trigger.active {
  color: #EF4444;
  border-color: rgba(239,68,68,0.3);
}

.cancel-sub-trigger i {
  transition: transform 0.2s;
}

.cancel-sub-trigger.active i {
  transform: rotate(180deg);
}

.cancel-sub-accordion {
  display: none;
  background: rgba(239,68,68,0.03);
  border: 1px solid rgba(239,68,68,0.15);
  border-radius: 10px;
  padding: 20px;
  margin-top: 12px;
  animation: slideDown 0.2s ease-out;
}

.cancel-sub-accordion.active {
  display: block;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.cancel-sub-title {
  font-size: 14px;
  font-weight: 600;
  color: #EF4444;
  margin-bottom: 16px;
}

.cancel-reason-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  margin-bottom: 8px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
}

.cancel-reason-option:hover {
  background: rgba(255,255,255,0.06);
  border-color: rgba(239,68,68,0.2);
}

.cancel-reason-option.selected {
  background: rgba(239,68,68,0.1);
  border-color: rgba(239,68,68,0.3);
}

.cancel-reason-radio {
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255,255,255,0.2);
  border-radius: 50%;
  flex-shrink: 0;
  position: relative;
  transition: all 0.2s;
}

.cancel-reason-option.selected .cancel-reason-radio {
  border-color: #EF4444;
}

.cancel-reason-option.selected .cancel-reason-radio::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 8px;
  height: 8px;
  background: #EF4444;
  border-radius: 50%;
}

.cancel-reason-text {
  font-size: 13px;
  color: #ccc;
  flex: 1;
}

.cancel-reason-option.selected .cancel-reason-text {
  color: #fff;
}

.cancel-other-input {
  display: none;
  margin-top: 12px;
}

.cancel-other-input.active {
  display: block;
}

.cancel-other-input textarea {
  width: 100%;
  padding: 12px 14px;
  font-size: 13px;
  color: #fff;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  resize: vertical;
  min-height: 80px;
}

.cancel-other-input textarea:focus {
  outline: none;
  border-color: rgba(239,68,68,0.4);
}

.cancel-other-input textarea::-moz-placeholder {
  color: #666;
}

.cancel-other-input textarea::placeholder {
  color: #666;
}

.cancel-other-char-count {
  text-align: right;
  font-size: 11px;
  color: #666;
  margin-top: 4px;
}

.cancel-submit-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin-top: 16px;
  padding: 14px;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(135deg, #EF4444 0%, #DC2626 100%);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
  opacity: 0.5;
  pointer-events: none;
}

.cancel-submit-btn.enabled {
  opacity: 1;
  pointer-events: auto;
}

.cancel-submit-btn.enabled:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 24px -4px rgba(239,68,68,0.4);
}

/* Settings Rows */

.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  cursor: pointer;
  transition: all 0.2s;
}

.settings-row:hover {
  background: rgba(255,255,255,0.02);
  margin: 0 -24px;
  padding: 16px 24px;
  border-radius: 8px;
}

.settings-row:last-child {
  border-bottom: none;
}

.settings-row-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.settings-row-title {
  font-size: 14px;
  font-weight: 500;
  color: #fff;
}

.settings-row-subtitle {
  font-size: 12px;
  color: #6b6b73;
}

.settings-row-arrow {
  color: #4a4a52;
  font-size: 18px;
}

/* Language Selector */

.language-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.language-btn {
  padding: 10px 20px;
  font-size: 13px;
  font-weight: 500;
  color: #888;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
}

.language-btn:hover {
  background: rgba(255,255,255,0.08);
  color: #fff;
}

.language-btn.active {
  background: linear-gradient(135deg, #FA3D72 0%, #880C83 100%);
  border-color: transparent;
  color: #fff;
}

/* Account Page Buttons */

.account-page .btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(135deg, #FA3D72 0%, #880C83 100%);
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s;
  text-decoration: none;
}

.account-page .btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 24px -4px rgba(250,61,114,0.4);
}

.account-page .btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  font-size: 14px;
  font-weight: 500;
  color: #fff;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s;
  text-decoration: none;
}

.account-page .btn-secondary:hover {
  background: rgba(255,255,255,0.1);
}

.account-page .btn-danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(135deg, #EF4444 0%, #DC2626 100%);
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s;
  width: 100%;
  text-decoration: none;
}

.account-page .btn-danger:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 24px -4px rgba(239,68,68,0.4);
}

.account-page .btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  font-size: 14px;
  font-weight: 500;
  color: #888;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s;
  text-decoration: none;
}

.account-page .btn-outline:hover {
  background: rgba(255,255,255,0.05);
  color: #fff;
  border-color: rgba(255,255,255,0.2);
}

/* Support Card */

.support-cta {
  background: linear-gradient(135deg, rgba(61,87,218,0.15) 0%, rgba(0,159,255,0.15) 100%);
  border: 1px solid rgba(61,87,218,0.2);
  border-radius: 12px;
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  text-decoration: none;
  transition: all 0.2s;
}

.support-cta:hover {
  background: linear-gradient(135deg, rgba(61,87,218,0.2) 0%, rgba(0,159,255,0.2) 100%);
  transform: translateY(-1px);
}

.support-cta-content {
  display: flex;
  align-items: center;
  gap: 14px;
}

.support-cta-icon {
  width: 44px;
  height: 44px;
  background: rgba(61,87,218,0.2);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: #3D57DA;
}

.support-cta-text h3 {
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  margin: 0 0 2px;
}

.support-cta-text p {
  font-size: 12px;
  color: #9ca3af;
  margin: 0;
}

.support-cta-arrow {
  color: #4a4a52;
  font-size: 20px;
}

.founder-cta-badge {
  display: inline-block;
  background: rgba(255, 255, 255, 0.08);
  color: #cbd5e1;
  border: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  margin-bottom: 6px;
  line-height: 1;
}

.support-buttons {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

@media (max-width: 500px) {
  .support-buttons {
    grid-template-columns: 1fr;
  }
}

/* Danger Zone */

.danger-zone {
  border-color: rgba(239,68,68,0.25);
  background: linear-gradient(135deg, rgba(239,68,68,0.1) 0%, rgba(239,68,68,0.03) 100%);
  box-shadow:
        0 8px 32px rgba(239,68,68,0.15),
        inset 0 1px 0 rgba(239,68,68,0.15),
        inset 0 -1px 0 rgba(0,0,0,0.1);
}

.danger-zone::before {
  background: linear-gradient(90deg, transparent, rgba(239,68,68,0.3), transparent);
}

.danger-zone .account-card-header h2 {
  color: #EF4444;
}

/* Usage Grid */

.usage-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-top: 16px;
}

@media (max-width: 500px) {
  .usage-grid {
    grid-template-columns: 1fr;
  }
}

.usage-item {
  background: rgba(255,255,255,0.03);
  border-radius: 8px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.usage-item-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #888;
}

.usage-item-label i {
  font-size: 14px;
  color: #6b6b73;
}

.usage-item-value {
  font-size: 13px;
  font-weight: 600;
  color: #fff;
}

.usage-item-value .remaining {
  color: #FA3D72;
}

/* Profile Icon Selector */

.profile-icon-display {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  overflow: hidden;
  cursor: pointer;
  position: relative;
  border: 2px solid rgba(255,255,255,0.1);
  transition: all 0.2s;
  flex-shrink: 0;
}

.profile-icon-display:hover {
  border-color: #FA3D72;
  transform: scale(1.05);
}

.profile-icon-display img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.profile-icon-display .edit-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s;
}

.profile-icon-display:hover .edit-overlay {
  opacity: 1;
}

.edit-overlay i {
  color: #fff;
  font-size: 18px;
}

.profile-icon-selector {
  display: none;
  margin-top: 16px;
  padding: 16px;
  background: rgba(0,0,0,0.3);
  border-radius: 12px;
}

.profile-icon-selector.active {
  display: block;
}

.profile-icon-selector-title {
  font-size: 13px;
  color: #888;
  margin-bottom: 12px;
}

.profile-icon-grid {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.profile-icon-option {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  overflow: hidden;
  cursor: pointer;
  border: 2px solid transparent;
  transition: all 0.2s;
  opacity: 0.6;
}

.profile-icon-option:hover {
  opacity: 1;
  transform: scale(1.1);
}

.profile-icon-option.selected {
  border-color: #FA3D72;
  opacity: 1;
  box-shadow: 0 0 12px rgba(250,61,114,0.4);
}

.profile-icon-option img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

/* Edit Form Inline */

.edit-form-inline {
  display: none;
  margin-top: 12px;
  padding: 16px;
  background: rgba(0,0,0,0.3);
  border-radius: 10px;
}

.edit-form-inline.active {
  display: block;
}

.edit-form-inline input,
.edit-form-inline select {
  width: 100%;
  padding: 12px 14px;
  font-size: 14px;
  color: #fff;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  margin-bottom: 12px;
}

.edit-form-inline input:focus,
.edit-form-inline select:focus {
  outline: none;
  border-color: #FA3D72;
}

.edit-form-inline select option {
  background: #1c1c21;
  color: #fff;
}

.edit-form-buttons {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.edit-form-buttons button {
  padding: 8px 16px;
  font-size: 13px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
}

.edit-form-buttons .cancel-btn {
  color: #888;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.1);
}

.edit-form-buttons .cancel-btn:hover {
  background: rgba(255,255,255,0.05);
  color: #fff;
}

.edit-form-buttons .save-btn {
  color: #fff;
  background: linear-gradient(135deg, #FA3D72 0%, #880C83 100%);
  border: none;
}

.edit-form-buttons .save-btn:hover {
  box-shadow: 0 4px 12px -2px rgba(250,61,114,0.4);
}

/* Sign Out Button */

.signout-btn {
  width: 100%;
  padding: 14px;
  font-size: 14px;
  font-weight: 500;
  color: #888;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s;
  text-align: center;
  display: block;
  text-decoration: none;
  margin-top: 8px;
}

.signout-btn:hover {
  background: rgba(255,255,255,0.08);
  color: #fff;
}

/* Delete Modal */

.delete-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.8);
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
}

.delete-modal-overlay.active {
  display: flex;
}

.delete-modal {
  background: linear-gradient(180deg, #1c1c21 0%, #141417 100%);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 20px;
  padding: 32px;
  max-width: 420px;
  width: 100%;
  text-align: center;
}

.delete-modal-icon {
  width: 56px;
  height: 56px;
  background: rgba(239,68,68,0.15);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  font-size: 24px;
  color: #EF4444;
}

.delete-modal h3 {
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 12px;
}

.delete-modal p {
  font-size: 14px;
  color: #6b6b73;
  line-height: 1.6;
  margin: 0 0 24px;
}

.delete-modal-buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ===== Global Toast Notification ===== */

.global-toast {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.5rem;
  background: var(--darkgray);
  border-radius: 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
  z-index: 9999;
  opacity: 0;
  transform: translateY(1rem);
  transition: all 0.3s ease;
  max-width: 400px;
}

.global-toast.active {
  opacity: 1;
  transform: translateY(0);
}

.global-toast-message {
  color: hsl(var(--static-white));
  font-size: 0.9rem;
}

.global-toast-close {
  background: none;
  border: none;
  color: var(--graycolor);
  font-size: 1.25rem;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  transition: color 0.2s;
  flex-shrink: 0;
}

.global-toast-close:hover {
  color: hsl(var(--static-white));
}

.global-toast-success {
  border-color: var(--purple-light);
}

.global-toast-success::before {
  content: '✓';
  color: var(--purple-light);
  font-size: 1.25rem;
  font-weight: bold;
}

.global-toast-error {
  border-color: #ef4444;
}

.global-toast-error::before {
  content: '✕';
  color: #ef4444;
  font-size: 1.25rem;
  font-weight: bold;
}

.global-toast-info {
  border-color: var(--orange-lignt);
}

.global-toast-info::before {
  content: 'ℹ';
  color: var(--orange-lignt);
  font-size: 1.25rem;
  font-weight: bold;
}

.global-toast-warning {
  border-color: #f59e0b;
}

.global-toast-warning::before {
  content: '⚠';
  color: #f59e0b;
  font-size: 1.25rem;
  font-weight: bold;
}

@media (max-width: 480px) {
  .global-toast {
    left: 2rem;
    right: 2rem;
    bottom: 1rem;
    max-width: calc(100vw - 4rem);
  }
}

/* Gen Video Page Styles */

/* Uses Honeybot CSS variables from variables.css */

/* Sidebar */

.gv-sidebar {
  position: fixed;
  left: 0;
  top: 56px;
  width: 12rem;
  height: calc(100vh - 56px);
  background: hsl(var(--white));
  border-right: 1px solid var(--lightgray);
  z-index: 25;
  display: none;
}

@media (min-width: 768px) {
  .gv-sidebar {
    display: flex;
    flex-direction: column;
  }

  .gv-main-content {
    margin-left: 12rem;
  }
}

.gv-sidebar-content {
  padding: 0.5rem;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.gv-sidebar-menu {
  padding: 0.5rem 1rem 1rem;
}

.gv-sidebar-link {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-size: 0.875rem;
  padding: 0.375rem 0.75rem;
  border-radius: 0.375rem;
  transition: all 0.2s;
  text-decoration: none;
  color: var(--graycolor);
  height: 2.25rem;
}

.gv-sidebar-link:hover {
  color: var(--body);
  background: var(--transparent-light);
}

.gv-sidebar-link.active {
  color: var(--purple-light);
  background: rgba(225, 24, 217, 0.1);
}

.gv-sidebar-link svg {
  width: 1.25rem;
  height: 1.25rem;
}

.gv-sidebar-divider {
  height: 1px;
  background: var(--lightgray);
  margin: 0.5rem 0;
}

.gv-sidebar-footer {
  margin-top: auto;
  padding: 1rem;
}

.gv-sidebar-footer-link {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-size: 0.75rem;
  padding: 0.375rem 0.75rem;
  border-radius: 0.375rem;
  border: 1px solid var(--lightgray);
  color: var(--graycolor);
  text-decoration: none;
  height: 2.25rem;
  margin-bottom: 0.5rem;
  transition: all 0.2s;
}

.gv-sidebar-footer-link:hover {
  color: var(--lightcolor);
  background: var(--transparent-light);
}

.gv-sidebar-footer-link svg {
  width: 1rem;
  height: 1rem;
}

.gv-sidebar-legal {
  font-size: 0.625rem;
  color: var(--darkgray);
  text-transform: uppercase;
  line-height: 1.4;
}

.gv-sidebar-legal a {
  color: var(--gray);
  text-decoration: none;
}

.gv-sidebar-legal a:hover {
  color: var(--lightcolor);
}

/* Header */

.gv-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 56px;
  background: hsl(var(--white));
  border-bottom: 1px solid var(--lightgray);
  z-index: 40;
  display: flex;
  align-items: center;
  padding: 0 0.5rem;
}

@media (min-width: 768px) {
  .gv-header {
    padding: 0 1rem;
  }
}

.gv-header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.gv-header-left {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.gv-menu-btn {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.625rem 0.75rem;
  background: none;
  border: none;
  cursor: pointer;
}

.gv-menu-btn span {
  display: block;
  height: 2px;
  width: 1.25rem;
  border-radius: 2px;
  background: linear-gradient(to right, var(--gre-secondary), var(--gre-primary));
}

.gv-logo {
  height: 40px;
  width: auto;
}

/* Main Content */

.gv-main-content {
  padding-top: 56px;
  min-height: 100vh;
}

/* Page Title */

.gv-page-title {
  text-align: center;
  padding: 0.75rem 0.5rem 0.25rem;
  font-size: clamp(22px, min(6vw, 44px), 52px);
  font-weight: 900;
}

.gv-page-title .white {
  color: var(--title);
}

.gv-page-title .gradient {
  background: linear-gradient(to right, var(--gre-secondary), var(--gre-primary), var(--gre-secondary));
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gv-shimmer 8s infinite linear;
}

@keyframes gv-shimmer {
  0% {
    background-position: 0% center;
  }

  100% {
    background-position: 200% center;
  }
}

/* Content Container */

.gv-content-container {
  padding: 0.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.gv-content-wrapper {
  width: 100%;
  max-width: 32rem;
  padding: 0 0.5rem;
}

/* ===== Page Layout: Side-by-side on Desktop ===== */

.gv-page-layout {
  display: flex;
  flex-direction: column;
}

/* Style Gallery/Honeybot tab buttons on mobile — no underline, gray text */

@media (max-width: 1023px) {
  .gv-section .generate-image-tab-link[data-tabFilter] {
    border-bottom: none;
    opacity: 1;
    color: var(--graycolor);
  }

  .gv-section .generate-image-tab-link[data-tabFilter].active-generate-tab {
    color: var(--graycolor);
  }
}

@media (min-width: 1024px) {
  /* Lock page scroll — only columns scroll */

  body:has(.gv-section) {
    overflow: hidden;
    height: 100vh;
  }

  .gv-section {
    display: flex;
    flex-direction: column;
    height: calc(100vh - var(--gv-header-offset, 56px));
    overflow: hidden;
    padding-bottom: 0;
  }

  .gv-section > .container {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
  }

  /* Tabs stay fixed at top — no flex-shrink */

  .gv-section .generate-image-tabs-list {
    flex-shrink: 0;
  }

  .gv-page-layout {
    flex-direction: row;
    align-items: stretch;
    justify-content: center;
    gap: 2rem;
    flex: 1;
    min-height: 0;
  }

  /* Selector panel: scrolls independently if content is tall */

  .gv-content-container {
    flex: 1;
    min-width: 0;
    align-items: center;
    overflow-y: auto;
  }

  /* Gallery: scrolls independently */

  .gv-filter-section {
    flex: 1;
    min-width: 0;
    max-width: none;
    margin-top: 0;
    margin-left: 0;
    margin-right: 0;
    overflow-y: auto;
    padding-bottom: 8rem;
  }

  /* Gallery columns: 2 in side-by-side mode */

  .gv-page-layout .gv-image-grid {
    grid-template-columns: repeat(2, 1fr);
    max-width: none;
  }

  /* Let selector panel content fill the available 50% width */

  .gv-content-wrapper {
    max-width: none;
  }
}

@media (min-width: 1280px) {
  .gv-page-layout .gv-image-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ── Video Mode Toggle (Instant / Custom) ── */

/* ── Mode Toggle (pill-shaped sliding switch) ── */

.gv-mode-toggle {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 0.75rem;
  width: 100%;
}

.gv-toggle-track {
  display: flex;
  position: relative;
  width: 100%;
  background: rgba(0, 0, 0, 0.15);
  border-radius: 9999px;
  padding: 4px;
}

.dark .gv-toggle-track {
  background: rgba(255, 255, 255, 0.08);
}

/* Index-driven sliding pill: width = 1/N of the track, position = index * width.
   --gv-mode-count (N) and --gv-mode-index are set inline on .gv-toggle-track and
   updated by gen-video-script.js on mode change. Defaults keep the legacy
   2-position behaviour if the vars are ever absent. */

.gv-toggle-slider {
  position: absolute;
  top: 4px;
  left: 4px;
  /* The track has 4px padding, so the usable inner width is (100% - 8px) and
       each of the N button slots is exactly (100% - 8px)/N. The pill matches one
       slot and steps by exactly one slot per index — translateX(100%) is one
       slot since it's relative to the pill's own width. No fudge factors, so the
       spacing is even across any N (the 3-mode drift came from a +4px hack). */
  width: calc((100% - 8px) / var(--gv-mode-count, 2));
  height: calc(100% - 8px);
  border-radius: 9999px;
  background: linear-gradient(135deg, #f59e0b, #e118d9);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  transform: translateX(calc(var(--gv-mode-index, 0) * 100%));
  z-index: 0;
}

/* Legacy fallback: if JS still toggles .gv-slider-right (2-mode users), keep it
   working by mapping it to index 1. */

.gv-toggle-track.gv-slider-right {
  --gv-mode-index: 1;
}

.gv-mode-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.5rem 0.875rem;
  border-radius: 9999px;
  border: none;
  background: transparent;
  cursor: pointer;
  transition: color 0.2s;
  position: relative;
  z-index: 1;
  color: var(--graycolor);
  font-size: 0.875rem;
}

.gv-mode-btn.active {
  color: #fff;
}

.gv-mode-btn svg {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

.gv-mode-btn.active svg {
  color: #fff;
}

.gv-mode-btn-label {
  font-weight: 600;
  font-size: 0.875rem;
}

/* "Video" half of the Instant label — inherits the label's font so it reads as
   one word on desktop (it's hidden on mobile, leaving just "Instant"). */

.gv-instant-word {
  font-weight: inherit;
  font-size: inherit;
}

/* Meta info below toggle */

.gv-toggle-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 0.5rem;
  font-size: 16px !important;
  color: var(--graycolor);
  transition: opacity 0.2s;
}

.gv-toggle-meta.hidden {
  display: none;
}

.gv-mode-btn-badge {
  font-weight: 700;
  color: #FF36F7;
  font-size: 16px !important;
}

.gv-mode-btn-disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

.gv-toggle-info {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 16px !important;
}

.gv-toggle-info-lock svg {
  opacity: 0.6;
}

/* Instant mode info bar */

.gv-instant-info {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  background: rgba(245, 158, 11, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.2);
  margin-bottom: 0.75rem;
  font-size: 0.75rem;
  color: #b45309;
}

.gv-instant-info svg {
  color: #f59e0b;
  flex-shrink: 0;
}

.dark .gv-instant-info {
  color: #fbbf24;
  background: rgba(245, 158, 11, 0.12);
}

/* ── Instant Mode Constraints ── */

.gv-instant-mode .gv-scene-tabs {
  display: none;
}

/* Outfit wrap + custom prompt: block interaction in instant mode */

.gv-instant-mode .gv-outfit-wrap,
.gv-instant-mode .gv-custom-prompt {
  position: relative;
  pointer-events: none;
  cursor: not-allowed;
}

/* Fade the inner box (border + content) uniformly — note text sits outside */

.gv-instant-mode .gv-outfit-wrap .gv-outfit-box,
.gv-instant-mode .gv-custom-prompt .gv-prompt-box {
  opacity: 0.3;
}

.gv-instant-note {
  display: none;
}

.gv-instant-mode .gv-instant-note {
  display: block;
  text-align: center;
  font-size: 0.75rem;
  color: var(--graycolor);
  padding: 0.25rem;
  z-index: 2;
}

.gv-try-custom-link {
  display: block;
  color: hsl(var(--black));
  text-decoration: underline;
  cursor: pointer;
  pointer-events: auto;
  margin-top: 0.25rem;
  font-weight: 400;
}

.gv-instant-mode .gv-duration-btn[data-duration="10"],
.gv-instant-mode .gv-audio-btn {
  opacity: 0.4;
  pointer-events: none;
}

/* ── Movie Mode (two-box reference/prompt pane) ── */

/* The pane renders inside .gv-content-wrapper for staff but stays hidden until
   Movie mode is active. In Movie mode we hide the Advanced selection grid (the
   pane's two boxes replace it) but keep the scene tabs on top. */

.r2v-pane {
  display: none;
}

.gv-content-wrapper.gv-mode-movie .gv-selection-grid {
  display: none;
}

.gv-content-wrapper.gv-mode-movie .r2v-pane {
  display: block;
}

/* Movie uses the shared bottom-left duration selector (keep it visible) but no
   audio toggle. Resolution + ratio are fixed (720P portrait) so no selectors. */

.gv-content-wrapper.gv-mode-movie .gv-audio-btn {
  display: none;
}

/* The 15s duration is HappyHorse/Movie-only — hidden in Instant/Advanced. */

.gv-duration-btn-movie {
  display: none;
}

.gv-content-wrapper.gv-mode-movie .gv-duration-btn-movie {
  display: inline-flex;
}

/* Scene Tabs */

.gv-scene-tabs {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

/* Base scene tab — pill shape, non-active uses border style */

.gv-scene-tab {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 1.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  border-radius: 9999px;
  border: 1px solid #cccccc;
  cursor: pointer;
  background: transparent;
  color: #555555;
  transition: all 0.3s ease-in-out;
}

.dark .gv-scene-tab {
  color: #e0e0e0;
  border-color: #555555;
}

/* Active tab keeps gradient pill style */

.gv-scene-tab.active {
  background-image: linear-gradient(to right, var(--gre-secondary), var(--gre-primary), var(--gre-secondary), var(--gre-primary));
  background-size: 300% 100%;
  color: hsl(var(--static-white));
  border: none;
  opacity: 1;
}

.gv-scene-tab.active:hover {
  background-position: 50% 0;
}

/* Non-active hover */

.gv-scene-tab:not(.active):hover {
  border-color: #FF36F7;
  color: #FF36F7;
}

.dark .gv-scene-tab:not(.active):hover {
  border-color: #FF36F7;
  color: #FF36F7;
}

/* Scene remove button (X) */

.gv-scene-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 1rem;
  margin-left: 0.25rem;
  border-radius: 50%;
  font-size: 0.875rem;
  font-weight: bold;
  line-height: 1;
  opacity: 0.6;
  transition: all 0.2s;
}

.gv-scene-tab:not(.active) .gv-scene-remove:hover {
  opacity: 1;
  background: rgba(0, 0, 0, 0.1);
}

.gv-scene-tab.active .gv-scene-remove:hover {
  opacity: 1;
  background: rgba(255, 255, 255, 0.3);
}

/* Add scene — plain text, no pill */

.gv-add-scene {
  background: none !important;
  background-image: none !important;
  border: none !important;
  border-radius: 0;
  padding: 0.25rem 0.5rem;
  color: #555555;
  font-weight: 600;
  opacity: 0.7;
}

.dark .gv-add-scene {
  color: #e0e0e0;
}

.gv-add-scene:hover {
  opacity: 1;
  color: #FF36F7;
}

.gv-add-scene.gv-add-scene-disabled {
  opacity: 0.3;
  pointer-events: none;
  cursor: not-allowed;
}

.gv-add-scene svg {
  width: 0.875rem;
  height: 0.875rem;
}

/* Mobile: shorten "Scene 1" → "1" when 3+ scenes */

@media (max-width: 480px) {
  .gv-scene-tabs[data-scene-count="3"] .gv-scene-label,
    .gv-scene-tabs[data-scene-count="4"] .gv-scene-label,
    .gv-scene-tabs[data-scene-count="5"] .gv-scene-label {
    display: none;
  }

  .gv-scene-tabs[data-scene-count="3"] .gv-scene-tab:not(.gv-add-scene),
    .gv-scene-tabs[data-scene-count="4"] .gv-scene-tab:not(.gv-add-scene),
    .gv-scene-tabs[data-scene-count="5"] .gv-scene-tab:not(.gv-add-scene) {
    padding: 0.5rem 1rem;
  }
}

/* Selection Grid */

.gv-selection-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
}

/* Outfit wrapper — transparent grid item that passes sizing to inner box */

.gv-outfit-wrap {
  position: relative;
  min-height: 0;
}

.gv-outfit-wrap .gv-outfit-box {
  height: 100%;
}

/* Select Box (Character, Action, Background, Outfit) */

.gv-select-box {
  position: relative;
  background: hsl(var(--white));
  border: 1px dashed var(--gray);
  border-radius: 0.5rem;
  cursor: pointer;
  transition: all 0.2s;
  overflow: hidden;
  min-height: 0;
}

.gv-select-box:hover {
  border-color: var(--graycolor);
  background: var(--light-bg);
}

.gv-select-box:focus {
  outline: none;
  border-color: var(--purple-light);
  box-shadow: 0 0 0 2px rgba(225, 24, 217, 0.2);
}

/* Character box spans both rows on the left, keeping its original tall shape */

.gv-character-box {
  grid-row: span 2;
  aspect-ratio: 5/6;
  border-color: var(--purple-light);
  border-style: solid;
}

/* Taller character box on desktop with tall viewport */

@media (min-width: 1024px) and (min-height: 930px) {
  .gv-character-box {
    aspect-ratio: 2/3;
  }
}

/* Taller character box on desktop with tall viewport */

@media (min-width: 1024px) and (min-height: 980px) {
  .gv-character-box {
    aspect-ratio: 3/5;
  }

  /* Restore center alignment — taller ratio has enough vertical room */

  .gv-select-box .gv-box-content {
    background-position: center !important;
    align-items: center !important;
  }

  .gv-chain-slide {
    background-position: center;
  }
}

/* Tallest tier — only on very tall desktop viewports */

@media (min-width: 1024px) and (min-height: 1080px) {
  .gv-character-box {
    aspect-ratio: 5/9;
  }
}

/* Close button on boxes - hidden by default, shown when has selection */

.gv-box-close {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  width: 1.5rem;
  height: 1.5rem;
  display: none;
  align-items: center;
  justify-content: center;
  background: var(--dark-shadow);
  border: none;
  border-radius: 50%;
  color: hsl(var(--static-white));
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s;
  z-index: 10;
}

.gv-select-box.has-selection .gv-box-close {
  display: flex;
}

.gv-select-box.has-selection:hover .gv-box-close {
  opacity: 1;
}

.gv-box-close:hover {
  background: rgba(0, 0, 0, 0.8);
}

.gv-box-close svg {
  width: 0.75rem;
  height: 0.75rem;
}

/* Box placeholder content */

.gv-box-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 1rem;
  text-align: center;
}

.gv-box-placeholder svg {
  width: 1.5rem;
  height: 1.5rem;
  color: var(--gray);
  margin-bottom: 0.5rem;
}

.gv-box-placeholder .gv-gradient-icon {
  width: 3rem;
  height: 3rem;
  color: unset;
}

.gv-box-label {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--title);
}

.gv-box-sublabel {
  font-size: 0.75rem;
  color: var(--gray);
  margin-top: 0.125rem;
}

.gv-box-sublabel.gv-required {
  color: var(--purple-light);
}

/* Box with selected content */

.gv-select-box.has-content .gv-box-placeholder {
  display: none;
}

.gv-box-content {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.gv-box-name {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0.5rem;
  background: linear-gradient(transparent, var(--dark-shadow));
  font-size: 0.875rem;
  font-weight: 500;
  color: hsl(var(--static-white));
  text-align: center;
}

/* Bottom Controls */

.gv-bottom-controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

/* Duration Selector */

.gv-duration-selector {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  background: hsl(var(--white));
  border: 1px solid var(--lightgray);
  border-radius: 0.375rem;
  padding: 0.25rem;
}

.gv-duration-btn {
  padding: 0.375rem 0.75rem;
  background: transparent;
  border: none;
  border-radius: 0.25rem;
  color: var(--graycolor);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.gv-duration-btn:hover {
  color: var(--body);
  background: var(--transparent-light);
}

.gv-duration-btn.active {
  background-image: linear-gradient(to right, var(--gre-secondary), var(--gre-primary), var(--gre-secondary), var(--gre-primary));
  background-size: 300% 100%;
  color: hsl(var(--static-white));
}

/* Audio Toggle Button - matches duration selector height */

.gv-audio-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  /* Match duration selector: container padding (0.25rem) + button padding (0.375rem) */
  padding: 0.5rem 0.625rem;
  background: hsl(var(--white));
  border: 1px solid var(--lightgray);
  border-radius: 0.375rem;
  color: var(--graycolor);
  cursor: pointer;
  transition: all 0.2s;
}

.gv-audio-btn:hover {
  color: var(--body);
  border-color: var(--graycolor);
}

.gv-audio-btn.active {
  background-image: linear-gradient(to right, var(--gre-secondary), var(--gre-primary), var(--gre-secondary), var(--gre-primary));
  background-size: 300% 100%;
  border-color: var(--purple-light);
  color: hsl(var(--static-white));
}

.gv-audio-btn svg {
  /* Height matches duration button inner height: 0.375rem top + line-height + 0.375rem bottom */
  width: 1.25rem;
  height: calc(0.875rem + 0.75rem);
}

/* Disabled state for mutual exclusivity (action vs 10s/audio) */

.gv-duration-btn.disabled,
.gv-audio-btn.disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

/* Hidden state — used for 10s/20s when an action is selected */

.gv-duration-btn.gv-duration-hidden {
  display: none;
}

.gv-select-box.disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

/* When note is shown, move opacity to placeholder only so the note stays fully visible */

.gv-select-box.disabled.has-gallery-char {
  opacity: 1;
}

.gv-select-box.disabled.has-gallery-char .gv-box-placeholder {
  opacity: 0.4;
}

.gv-select-box.disabled:hover {
  border-color: var(--gray);
  background: hsl(var(--white));
}

/* Note shown inside outfit box when disabled due to gallery image/video selection */

.gv-box-disabled-note {
  display: none;
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  right: 0.5rem;
  font-size: 0.75rem;
  font-style: italic;
  color: #ef4444;
  text-align: center;
}

.gv-outfit-box.has-gallery-char .gv-box-disabled-note:not(.gv-restricted-note) {
  display: block;
}

/* Restricted action: outfit box and custom prompt disabled */

.gv-outfit-box.has-restricted-action .gv-restricted-note {
  display: block;
}

.gv-outfit-box.has-restricted-action .gv-box-placeholder {
  opacity: 0.4;
}

.gv-custom-prompt.disabled .gv-prompt-box {
  opacity: 0.4;
  pointer-events: none;
  cursor: not-allowed;
}

.gv-custom-prompt.has-restricted-action {
  position: relative;
  pointer-events: none;
}

.gv-custom-prompt.has-restricted-action .gv-prompt-box {
  opacity: 0.4;
}

.gv-custom-prompt .gv-restricted-note {
  display: none;
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  right: 0.5rem;
  font-size: 0.75rem;
  font-style: italic;
  color: #ef4444;
  text-align: center;
  z-index: 1;
}

.gv-custom-prompt.has-restricted-action .gv-restricted-note {
  display: block;
}

.gv-action-required-btn {
  flex: 1;
  padding: 0.625rem 1rem;
  background-image: linear-gradient(to right, var(--gre-secondary), var(--gre-primary));
  border: none;
  border-radius: 0.375rem;
  color: hsl(var(--static-white));
  font-size: 0.875rem;
  font-weight: 500;
  cursor: not-allowed;
  opacity: 0.5;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  gap: 0.375rem;
}

.gv-wand-icon {
  margin-right: 0.625rem;
  flex-shrink: 0;
}

.gv-action-required-btn:not(:disabled) {
  background: linear-gradient(to right, var(--gre-secondary), var(--gre-primary));
  cursor: pointer;
  opacity: 1;
}

.gv-action-required-btn:not(:disabled):hover {
  opacity: 0.9;
}

a.gv-action-required-btn {
  text-decoration: none;
  gap: 0.5rem;
}

.gv-try-free-badge {
  border: 1px solid hsl(var(--static-white));
  border-radius: 9999px;
  padding: 0.125rem 0.5rem;
  font-size: 0.75rem;
  white-space: nowrap;
}

.gv-cost-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  border: 1px solid hsl(var(--static-white));
  border-radius: 9999px;
  padding: 0.125rem 0.5rem;
  font-size: 0.75rem;
  white-space: nowrap;
  margin-left: 0.5rem;
}

.gv-cost-badge img {
  vertical-align: middle;
}

/* ===== Progress Bar on Generate Button ===== */

.gv-action-required-btn.gv-progress-active {
  position: relative;
  overflow: hidden;
  background: var(--purple-light) !important;
  background-image: none !important;
  opacity: 1 !important;
}

.gv-action-required-btn.gv-progress-active::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: var(--progress, 0%);
  background: linear-gradient(to right, var(--gre-secondary), var(--gre-primary));
  border-radius: inherit;
  transition: width 0.3s ease-out;
  z-index: 0;
}

.gv-action-required-btn.gv-progress-complete::before {
  transition: width 0.4s ease-in;
}

.gv-btn-content {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
}

/* Staff-only Test Image button */

.gv-test-image-btn {
  padding: 0.625rem 0.75rem;
  background: transparent;
  border: 1px solid hsl(var(--static-white) / 0.3);
  border-radius: 0.375rem;
  color: hsl(var(--static-white));
  font-size: 0.8rem;
  font-weight: 500;
  cursor: not-allowed;
  opacity: 0.4;
  display: flex;
  align-items: center;
  gap: 0.375rem;
  white-space: nowrap;
}

.gv-test-image-btn:not(:disabled) {
  cursor: pointer;
  opacity: 1;
  border-color: #f59e0b;
  color: #f59e0b;
}

.gv-test-image-btn:not(:disabled):hover {
  background: rgba(245, 158, 11, 0.1);
}

/* Skeleton Loaders */

.gv-skeleton {
  position: relative;
  overflow: hidden;
  border-radius: 0.375rem;
  background: var(--lightgray);
}

.gv-skeleton::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, var(--transparent-light), transparent);
  background-size: 200% 100%;
  animation: gv-shimmer-bg 1.5s infinite;
}

@keyframes gv-shimmer-bg {
  0% {
    background-position: 200% 0;
  }

  100% {
    background-position: -200% 0;
  }
}

/* Top Controls */

.gv-top-controls {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.gv-top-controls .gv-skeleton:first-child {
  flex: 1;
  height: 3rem;
}

.gv-top-controls .gv-skeleton:last-child {
  width: 7rem;
  height: 3rem;
}

/* Image Grid Skeleton */

.gv-image-grid-skeleton {
  display: flex;
  gap: 0.375rem;
}

.gv-image-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.gv-image-col .gv-skeleton:nth-child(1) {
  aspect-ratio: 3/4;
}

.gv-image-col .gv-skeleton:nth-child(2) {
  aspect-ratio: 4/3;
}

.gv-image-col:nth-child(2) .gv-skeleton:nth-child(1) {
  aspect-ratio: 4/5;
}

.gv-image-col:nth-child(2) .gv-skeleton:nth-child(2) {
  flex: 1;
  aspect-ratio: 16/9;
}

/* Custom Prompt Box */

.gv-custom-prompt {
  grid-column: span 2;
  min-height: 0;
}

.gv-prompt-box {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: hsl(var(--white));
  border: 1px dashed var(--gray);
  border-radius: 0.5rem;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}

.gv-prompt-box:hover {
  background: var(--light-bg);
}

.gv-prompt-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  flex: 1;
}

.gv-prompt-placeholder svg {
  width: 1rem;
  height: 1rem;
  color: var(--gray);
  margin-bottom: 0.5rem;
}

.gv-prompt-placeholder .title {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--title);
}

.gv-prompt-placeholder .gv-prompt-sublabel {
  font-size: 0.75rem;
  color: var(--gray);
}

.gv-prompt-box.expanded {
  border-style: solid;
  border-color: var(--purple-light);
  background: var(--light-bg);
  cursor: default;
}

.gv-prompt-box.expanded .gv-prompt-placeholder {
  display: none;
}

.gv-prompt-textarea {
  width: 100%;
  min-height: 0;
  flex: 1;
  resize: none;
  background: transparent;
  border: none;
  border-radius: 0.5rem;
  padding: 0.75rem;
  color: var(--body);
  font-size: 1rem;
  font-family: inherit;
  line-height: 1.4;
  outline: none;
  box-sizing: border-box;
}

.gv-prompt-textarea::-moz-placeholder {
  color: var(--gray);
}

.gv-prompt-textarea::placeholder {
  color: var(--gray);
}

.gv-prompt-error {
  font-size: 0.75rem;
  color: #ef4444;
  padding: 0.25rem 0.75rem 0.5rem;
}

/* Red border on invalid textarea */

.gv-prompt-box.invalid .gv-prompt-textarea {
  border-color: #ef4444;
}

/* Prompt Info Icon */

.gv-prompt-info-btn {
  position: absolute;
  top: -0.625rem;
  right: -0.625rem;
  width: 1.25rem;
  height: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: hsl(var(--white));
  box-shadow: 0 0 0 2px hsl(var(--white));
  border: none;
  color: var(--gray);
  cursor: pointer;
  padding: 0;
  z-index: 5;
  transition: color 0.2s;
  border-radius: 50%;
}

.gv-prompt-info-btn:hover {
  color: var(--purple-light);
}

.gv-prompt-info-btn svg {
  width: 1rem;
  height: 1rem;
}

/* Prompt Tooltip */

.gv-prompt-tooltip {
  display: none;
  position: absolute;
  top: 1rem;
  right: 0.25rem;
  width: 16rem;
  background: hsl(var(--white));
  border: 1px solid var(--lightgray);
  border-radius: 0.5rem;
  padding: 0.75rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 20;
  font-size: 0.6875rem;
  line-height: 1.4;
  color: var(--body);
}

.gv-prompt-tooltip.visible {
  display: block;
}

/* Desktop: show tooltip on hover */

@media (hover: hover) and (pointer: fine) {
  .gv-prompt-info-btn:hover + .gv-prompt-tooltip,
    .gv-prompt-tooltip:hover {
    display: block;
  }
}

.gv-prompt-tooltip-title {
  font-weight: 600;
  font-size: 0.875rem;
  margin-bottom: 0.375rem;
  color: var(--title);
}

.gv-prompt-tooltip ul {
  list-style: disc;
  padding-left: 1rem;
  margin: 0 0 0.5rem 0;
}

.gv-prompt-tooltip ul li {
  font-size: 0.875rem !important;
  line-height: 1.4 !important;
  letter-spacing: normal !important;
  margin-bottom: 0.25rem;
}

.gv-prompt-tooltip-warning {
  margin: 0;
  padding-top: 0.375rem;
  border-top: 1px solid var(--lightgray);
  color: var(--gray);
  font-style: italic;
  font-size: 0.875rem;
}

/* Mobile: smaller tooltip text */

@media (max-width: 480px) {
  .gv-prompt-tooltip {
    font-size: 0.8125rem;
  }

  .gv-prompt-tooltip ul li {
    font-size: 0.8125rem !important;
  }

  .gv-prompt-tooltip-title {
    font-size: 0.8125rem;
  }

  .gv-prompt-tooltip-warning {
    font-size: 0.8125rem;
  }
}

/* Prompt Presets — horizontal scroll row of pre-registered prompts */

.gv-prompt-presets {
  display: flex;
  gap: 0.375rem;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--gray) transparent;
  padding: 0.5rem 0.5rem 0.5rem;
  margin-top: auto;
  border-top: 1px solid var(--lightgray);
  flex-shrink: 0;
}

.gv-prompt-presets::-webkit-scrollbar {
  height: 4px;
  background: transparent;
}

.gv-prompt-presets::-webkit-scrollbar-track {
  background: transparent;
  border: none;
  box-shadow: none;
}

.gv-prompt-presets::-webkit-scrollbar-thumb {
  background: var(--gray);
  border-radius: 2px;
}

.gv-prompt-presets::-webkit-scrollbar-thumb:hover {
  background: var(--purple-light);
}

.gv-prompt-preset {
  flex: 0 0 auto;
  padding: 0.25rem 0.625rem;
  background: hsl(var(--white));
  border: 1px solid var(--lightgray);
  border-radius: 9999px;
  color: var(--body);
  font-size: 0.75rem;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.gv-prompt-preset:hover {
  background: var(--purple-light);
  border-color: var(--purple-light);
  color: hsl(var(--static-white));
}

/* Hide presets when textarea has any characters */

.gv-prompt-box.has-text .gv-prompt-presets {
  display: none;
}

/* Hide presets in restricted/disabled states */

.gv-custom-prompt.disabled .gv-prompt-presets,
.gv-custom-prompt.has-restricted-action .gv-prompt-presets,
.gv-instant-mode .gv-custom-prompt .gv-prompt-presets {
  display: none;
}

/* Audio-incompatible action selected: hide audio-flavoured presets only.
   The row stays visible so non-audio presets (none today, but
   forward-compatible) can still appear. Mirrors the prompt → action guard. */

.gv-prompt-box.has-audio-incompatible-action .gv-prompt-preset[data-audio="true"] {
  display: none;
}

/* Inline clear-text button in the prompt box. Sits in the textarea's
   top-right corner; toggled to display:flex by JS when text is present. */

.gv-prompt-clear-btn {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  border: 0;
  border-radius: 9999px;
  background: var(--lightgray);
  color: var(--body);
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  line-height: 0;
  z-index: 2;
  transition: background 0.15s, color 0.15s;
}

.gv-prompt-clear-btn:hover {
  background: var(--purple-light);
  color: hsl(var(--static-white));
}

/* Advanced Settings */

.gv-advanced-settings {
  width: 100%;
  margin-top: 0.5rem;
}

.gv-settings-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0.5rem 0.75rem;
  background: hsl(var(--white));
  border: 1px solid var(--lightgray);
  border-radius: 0.375rem;
  color: var(--title);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s;
}

.gv-settings-btn:hover {
  background: var(--light-bg);
}

.gv-settings-btn-left {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.gv-settings-btn .new-badge {
  background: rgba(59, 130, 246, 0.2);
  color: var(--lightbluecolor);
  padding: 0.125rem 0.375rem;
  border-radius: 0.25rem;
  font-size: 0.75rem;
}

.gv-settings-btn svg {
  width: 1rem;
  height: 1rem;
  color: var(--graycolor);
}

/* Filter Tabs */

.gv-filter-section {
  width: 100%;
  max-width: 80rem;
  margin-top: 1.25rem;
}

.gv-filter-row {
  display: flex;
  align-items: center;
  padding: 0.5rem;
}

.gv-filter-tabs {
  display: flex;
  gap: 0.625rem;
  overflow-x: auto;
}

@media (max-width: 1023px) {
  .gv-filter-row {
    justify-content: center;
  }
}

.gv-filter-tab {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  border: none;
  font-size: 0.75rem;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.2s;
  background: none;
}

.gv-filter-tab.active {
  background-image: linear-gradient(to right, var(--gre-secondary), var(--gre-primary), var(--gre-secondary), var(--gre-primary));
  background-size: 300% 100%;
  color: hsl(var(--static-white));
  font-weight: 500;
  transition: all 0.4s ease-in-out;
}

.gv-filter-tab:not(.active) {
  background: rgba(0, 0, 0, 0.06);
  color: #555;
}

.dark .gv-filter-tab:not(.active) {
  background: var(--transparent-light);
  color: var(--lightcolor);
}

.gv-filter-tab:not(.active):hover {
  background: rgba(0, 0, 0, 0.1);
}

.dark .gv-filter-tab:not(.active):hover {
  background: rgba(24, 24, 27, 0.6);
}

.gv-filter-tab svg {
  width: 1rem;
  height: 1rem;
}

.gv-filter-tab.active svg {
  color: hsl(var(--static-white));
}

.gv-filter-tab:not(.active) svg {
  color: #666;
}

.dark .gv-filter-tab:not(.active) svg {
  color: var(--graycolor);
}

.gv-filter-actions {
  display: flex;
  align-items: center;
  margin-left: auto;
}

.gv-filter-action-btn {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 0.75rem;
  background: none;
  border: none;
  border-radius: 0.375rem;
  color: var(--graycolor);
  font-size: 0.875rem;
  cursor: pointer;
  transition: all 0.2s;
}

.gv-filter-action-btn:hover {
  background: var(--transparent-light);
  color: var(--body);
}

.gv-filter-action-btn svg {
  width: 1rem;
  height: 1rem;
}

.gv-filter-action-btn span {
  display: none;
}

@media (min-width: 640px) {
  .gv-filter-action-btn span {
    display: inline;
  }
}

/* Image Grid */

.gv-image-grid {
  width: 100%;
  max-width: 80rem;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3px;
  padding: 0 3px;
}

@media (min-width: 640px) {
  .gv-image-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 768px) {
  .gv-image-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (min-width: 1280px) {
  .gv-image-grid {
    grid-template-columns: repeat(5, 1fr);
  }
}

.gv-grid-item {
  aspect-ratio: 3/4;
  border-radius: 0.375rem;
  background: var(--lightgray);
  overflow: hidden;
  position: relative;
  cursor: pointer;
}

/* Shimmer loading effect for skeleton loaders while gallery loads */

.gv-gallery-skeleton::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.08) 50%,
        transparent 100%
    );
  background-size: 200% 100%;
  animation: gv-gallery-shimmer 1.5s infinite;
}

@keyframes gv-gallery-shimmer {
  0% {
    background-position: -200% 0;
  }

  100% {
    background-position: 200% 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gv-gallery-skeleton::before,
    .gv-modal-skeleton::before {
    animation: none;
    background: rgba(255, 255, 255, 0.04);
  }
}

/* Hide placeholder skeletons once gallery is loaded, but keep the loading indicator visible */

.gv-gallery-loaded .gv-gallery-skeleton:not(#full-gallery-loading) {
  display: none;
}

.gv-grid-media {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}

.gv-grid-video:hover video {
  opacity: 0.85;
}

.gv-grid-play-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 48px;
  height: 48px;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  transition: opacity 0.2s;
  z-index: 2;
  opacity: 1;
}

.gv-grid-play-icon svg {
  width: 20px;
  height: 20px;
  color: white;
  margin-left: 3px;
  flex-shrink: 0;
}

.gv-grid-video.playing .gv-grid-play-icon {
  opacity: 0;
}

.gv-grid-label {
  position: absolute;
  top: 8px;
  left: 8px;
  background: rgba(0, 0, 0, 0.6);
  color: white;
  font-size: 0.625rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  z-index: 2;
  pointer-events: none;
}

/* Audio toggle button for videos with sound — click to unmute one at a time */

.gv-grid-audio-icon {
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(0, 0, 0, 0.6);
  color: white;
  padding: 4px 6px;
  border-radius: 4px;
  z-index: 3;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, color 0.15s ease;
}

.gv-grid-audio-icon:hover {
  background: rgba(0, 0, 0, 0.85);
}

.gv-grid-audio-icon.active {
  background: var(--primary);
  color: hsl(var(--static-white));
}

.gv-grid-audio-icon svg {
  width: 14px;
  height: 14px;
}

/* Show the speaker-on icon when audio is active, the muted-speaker icon otherwise */

.gv-grid-audio-icon .gv-audio-on,
.gv-grid-audio-icon .gv-audio-off {
  display: none;
}

.gv-grid-audio-icon.active .gv-audio-on {
  display: block;
}

.gv-grid-audio-icon.muted .gv-audio-off {
  display: block;
}

/* Ensure grid image items also use absolute positioning */

.gv-grid-image {
  display: block;
}

/* Bottom Navigation (Mobile) */

.gv-bottom-nav {
  display: block;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: hsl(var(--white));
  border-top: 1px solid var(--lightgray);
  padding: 0.5rem 1rem;
  padding-bottom: calc(0.5rem + env(safe-area-inset-bottom));
  z-index: 40;
}

@media (min-width: 768px) {
  .gv-bottom-nav {
    display: none;
  }
}

.gv-bottom-nav ul {
  display: flex;
  justify-content: space-around;
  list-style: none;
  margin: 0;
  padding: 0;
}

.gv-bottom-nav li {
  flex: 1;
}

.gv-bottom-nav a {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: var(--graycolor);
  transition: color 0.2s;
}

.gv-bottom-nav a:hover {
  color: var(--lightcolor);
}

.gv-bottom-nav a.active {
  color: var(--purple-light);
}

.gv-bottom-nav svg {
  width: 1.25rem;
  height: 1.25rem;
  margin-bottom: 0.25rem;
}

.gv-bottom-nav span {
  font-size: 0.75rem;
  font-weight: 700;
}

/* Modal Styles */

.gv-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 100;
}

.gv-modal.active {
  display: flex;
  align-items: center;
  justify-content: center;
}

.gv-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.8);
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
}

.gv-modal-content {
  position: relative;
  width: 90%;
  max-width: 600px;
  height: 80vh;
  background: hsl(var(--white));
  border: 1px solid var(--lightgray);
  border-radius: 0.75rem;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.gv-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--lightgray);
}

.gv-modal-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--title);
  margin: 0;
}

.gv-modal-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  background: none;
  border: none;
  border-radius: 0.375rem;
  color: var(--graycolor);
  cursor: pointer;
  transition: all 0.2s;
}

.gv-modal-close:hover {
  background: var(--transparent-light);
  color: var(--body);
}

.gv-modal-close svg {
  width: 1.25rem;
  height: 1.25rem;
}

.gv-modal-search {
  padding: 0.75rem 1.25rem;
  border-bottom: 1px solid var(--lightgray);
}

.gv-modal-search-input {
  width: 100%;
  padding: 0.625rem 1rem;
  background: var(--light-bg);
  border: 1px solid var(--lightgray);
  border-radius: 0.375rem;
  color: var(--body);
  font-size: 1rem;
}

.gv-modal-search-input::-moz-placeholder {
  color: var(--graycolor);
}

.gv-modal-search-input::placeholder {
  color: var(--graycolor);
}

.gv-modal-search-input:focus {
  outline: none;
  border-color: var(--purple-light);
}

.gv-modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 0.5rem 1.25rem 1rem;
}

.gv-modal-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
}

@media (max-width: 480px) {
  .gv-modal-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.gv-modal-item {
  display: flex;
  flex-direction: column;
  background: var(--light-bg);
  border: 1px solid var(--lightgray);
  border-radius: 0.5rem;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.2s;
}

.gv-modal-item:hover {
  border-color: var(--graycolor);
  transform: translateY(-2px);
}

.gv-modal-item-image {
  position: relative;
  aspect-ratio: 1;
  background-size: cover;
  background-position: center;
  background-color: var(--light-bg);
}

/* Action items use portrait aspect ratio */

.gv-modal-action-item .gv-modal-item-image {
  aspect-ratio: 3/4;
}

/* Outfit items use portrait aspect ratio */

.gv-modal-outfit-item .gv-modal-item-image {
  aspect-ratio: 3/4;
}

/* Gallery image items use portrait aspect ratio */

.gv-modal-image-item .gv-modal-item-image {
  aspect-ratio: 3/4;
}

.gv-modal-item-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  font-weight: bold;
  color: var(--graycolor);
  background: var(--light-bg);
}

.gv-modal-item-name {
  padding: 0.5rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--body);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gv-modal-loading {
  grid-column: 1 / -1;
  text-align: center;
  padding: 2rem;
  color: var(--graycolor);
}

/* Settings Group in Modal */

.gv-settings-group {
  margin-bottom: 1rem;
}

.gv-settings-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--title);
  margin-bottom: 0.5rem;
}

.gv-settings-select {
  width: 100%;
  padding: 0.625rem 1rem;
  background: var(--light-bg);
  border: 1px solid var(--lightgray);
  border-radius: 0.375rem;
  color: var(--body);
  font-size: 1rem;
  cursor: pointer;
}

.gv-settings-select:focus {
  outline: none;
  border-color: var(--purple-light);
}

/* Box content placeholder */

.gv-box-content-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(135deg, var(--gre-secondary), var(--gre-primary));
  font-size: 2rem;
  font-weight: bold;
  color: hsl(var(--static-white));
}

/* ===== Notification Toast ===== */

.gv-notification {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.5rem;
  background: var(--lightgray);
  border-radius: 0.75rem;
  border: 1px solid var(--lightgray);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
  z-index: 9999;
  opacity: 0;
  transform: translateY(1rem);
  transition: all 0.3s ease;
}

.gv-notification.active {
  opacity: 1;
  transform: translateY(0);
}

.gv-notification-message {
  color: var(--body);
  font-size: 0.9rem;
}

.gv-notification-close {
  background: none;
  border: none;
  color: var(--graycolor);
  font-size: 1.25rem;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  transition: color 0.2s;
}

.gv-notification-close:hover {
  color: hsl(var(--static-white));
}

/* Notification types */

.gv-notification-success {
  border-color: var(--purple-light);
}

.gv-notification-success::before {
  content: '✓';
  color: var(--purple-light);
  font-size: 1.25rem;
  font-weight: bold;
}

.gv-notification-error {
  border-color: #ef4444;
}

.gv-notification-error::before {
  content: '✕';
  color: #ef4444;
  font-size: 1.25rem;
  font-weight: bold;
}

.gv-notification-info {
  border-color: var(--orange-lignt);
}

.gv-notification-info::before {
  content: 'ℹ';
  color: var(--orange-lignt);
  font-size: 1.25rem;
  font-weight: bold;
}

.gv-notification-warning {
  border-color: #f59e0b;
}

.gv-notification-warning::before {
  content: '⚠';
  color: #f59e0b;
  font-size: 1.25rem;
  font-weight: bold;
}

/* ===== Loading Spinner ===== */

.gv-spinner {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: hsl(var(--static-white));
  border-radius: 50%;
  animation: gv-spin 0.8s linear infinite;
  margin-right: 0.5rem;
}

@keyframes gv-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Button loading state */

.gv-action-required-btn:disabled .gv-spinner {
  border-color: rgba(255, 255, 255, 0.2);
  border-top-color: rgba(255, 255, 255, 0.5);
}

/* Mobile notification positioning */

@media (max-width: 480px) {
  .gv-notification {
    left: 2rem;
    right: 2rem;
    bottom: 1rem;
  }
}

/* Bot item styling in modal - name overlay on image */

.gv-modal-bot-item {
  position: relative;
}

.gv-modal-bot-item .gv-modal-item-image {
  aspect-ratio: 3/4;
}

.gv-modal-bot-item .gv-modal-item-name {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.6));
  padding: 1rem 0.5rem 0.5rem;
  color: hsl(var(--static-white));
}

/* Empty state styling for modal */

.gv-modal-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 2rem;
  color: var(--graycolor);
}

.gv-modal-empty p {
  margin-bottom: 0.5rem;
}

.gv-modal-empty-link {
  display: inline-block;
  margin-top: 0.75rem;
  padding: 0.5rem 1rem;
  background-image: linear-gradient(to right, var(--gre-secondary), var(--gre-primary), var(--gre-secondary), var(--gre-primary));
  background-size: 300% 100%;
  color: hsl(var(--static-white));
  text-decoration: none;
  border-radius: 0.375rem;
  font-size: 0.875rem;
  transition: all 0.4s ease-in-out;
}

.gv-modal-empty-link:hover {
  background-position: 50% 0;
}

.gv-modal-empty-subtitle {
  font-size: 0.875rem;
  color: var(--graycolor);
  margin-top: 0.25rem;
}

/* Empty state styling for gallery grid */

.gv-grid-empty {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 3rem 1rem;
  min-height: 300px;
  color: var(--graycolor);
}

.gv-empty-logo {
  width: 80px;
  height: 80px;
  margin-bottom: 1rem;
  opacity: 0.7;
}

.gv-grid-empty p {
  font-size: 0.95rem;
  max-width: 300px;
  line-height: 1.5;
}

/* Modal skeleton loading state */

.gv-modal-skeleton {
  position: relative;
  background: var(--lightgray);
  border-radius: 0.5rem;
  min-height: 120px;
  aspect-ratio: 1;
}

.gv-modal-skeleton::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.08) 50%,
        transparent 100%
    );
  background-size: 200% 100%;
  animation: gv-gallery-shimmer 1.5s infinite;
}

/* Load More button for pagination */

.gv-load-more-btn {
  grid-column: 1 / -1;
  padding: 0.75rem 1.5rem;
  background-image: linear-gradient(to right, var(--gre-secondary), var(--gre-primary), var(--gre-secondary), var(--gre-primary));
  background-size: 300% 100%;
  border: none;
  border-radius: 0.375rem;
  color: hsl(var(--static-white));
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.4s ease-in-out;
  margin-top: 0.5rem;
}

.gv-load-more-btn:hover {
  background-position: 50% 0;
}

/* Premium badges and indicators */

.gv-premium-badge {
  font-size: 0.6rem;
  background: #ef4444;
  color: hsl(var(--static-white));
  padding: 2px 6px;
  border-radius: 10px;
  margin-left: 4px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.gv-audio-btn .gv-premium-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  margin-left: 0;
}

.gv-audio-btn {
  position: relative;
}

/* Premium / chain cost badge on action box */

.gv-box-premium-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  font-size: 0.6rem;
  background: #ef4444;
  color: hsl(var(--static-white));
  padding: 2px 6px;
  border-radius: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 2px;
}

/* Premium badge on individual action cards in modal */

.gv-action-premium-badge {
  position: absolute;
  top: 6px;
  right: 6px;
  font-size: 0.6rem;
  background: #ef4444;
  color: hsl(var(--static-white));
  padding: 2px 6px;
  border-radius: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  z-index: 2;
}

/* Chain duration badge on action cards (top-left) */

.gv-chain-cost-badge {
  position: absolute;
  top: 6px;
  left: 6px;
  font-size: 0.6rem;
  background: #8b5cf6;
  color: hsl(var(--static-white));
  padding: 2px 6px;
  border-radius: 10px;
  font-weight: 600;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 2px;
}

.gv-chain-item {
  border: 1px solid rgba(139, 92, 246, 0.3);
}

/* ===== Chain Action Slideshow (JS-driven swipe) ===== */

.gv-chain-slideshow {
  position: relative;
  overflow: hidden;
}

/* All slides stacked, waiting off-screen right by default */

.gv-chain-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: top center;
  transform: translateX(100%);
  transition: transform 0.4s ease-in-out;
  will-change: transform;
}

/* Active slide is visible */

.gv-chain-slide.active {
  transform: translateX(0);
}

/* Exiting slide moves off-screen left */

.gv-chain-slide.exit {
  transform: translateX(-100%);
}

/* Keep badges above slides */

.gv-chain-slideshow .gv-chain-cost-badge,
.gv-chain-slideshow .gv-fast-badge {
  z-index: 3;
}

/* Fast generation badge on pool-available action cards */

.gv-fast-badge {
  position: absolute;
  top: 6px;
  right: 6px;
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: hsl(var(--static-white));
  padding: 3px 5px;
  border-radius: 10px;
  z-index: 2;
  display: flex;
  align-items: center;
}

.gv-fast-badge svg {
  width: 10px;
  height: 10px;
  fill: currentColor;
}

/* Fast-gen bolt badge on selected action box (top-left) */

.gv-box-fast-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: white;
  padding: 3px 5px;
  border-radius: 10px;
  z-index: 2;
}

.gv-box-fast-badge svg {
  width: 10px;
  height: 10px;
}

/* Inline pill indicators rendered inside the Generate button, on the same
   row as the label and cost badge. Replaces the old .gv-premium-indicator /
   .gv-fast-gen-indicator / .gv-chain-indicator banners. */

.gv-action-required-btn-label {
  position: relative;
  z-index: 1;
}

/* The button now uses `gap` for spacing — neutralize the legacy explicit
   margins on its direct children so spacing is uniform. */

.gv-action-required-btn > .gv-wand-icon {
  margin-right: 0;
}

.gv-action-required-btn > .gv-cost-badge {
  margin-left: 0;
}

.gv-btn-pill {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.1875rem;
  padding: 0 0.4375rem;
  height: 1.25rem;
  border-radius: 9999px;
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1;
  background: rgba(255, 255, 255, 0.22);
  color: hsl(var(--static-white));
  white-space: nowrap;
  flex-shrink: 0;
}

.gv-btn-pill[hidden] {
  display: none;
}

.gv-btn-pill svg {
  flex-shrink: 0;
}

.gv-btn-pill strong {
  font-weight: 700;
}

/* Compact further on narrow screens so the row never wraps. */

@media (max-width: 480px) {
  .gv-btn-pill {
    font-size: 0.625rem;
    padding: 0 0.375rem;
    height: 1.125rem;
    gap: 0.125rem;
  }

  .gv-btn-pill svg {
    width: 9px;
    height: 9px;
  }
}

/* Mobile-only colored indicators that sit next to the duration selector.
   Hidden on desktop (the in-button pills cover that case). */

.gv-mobile-indicators {
  display: none;
}

.gv-mobile-indicator {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0 0.5rem;
  height: calc(0.75rem + 0.75rem + 2px);
  /* match .gv-duration-selector height */
  border-radius: 0.375rem;
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1;
  border: 1px solid currentColor;
  white-space: nowrap;
  flex-shrink: 0;
}

.gv-mobile-indicator[hidden] {
  display: none;
}

.gv-mobile-indicator svg {
  flex-shrink: 0;
}

/* Color variants — match the original removed banners. */

.gv-mobile-indicator-premium {
  background: rgba(239, 68, 68, 0.12);
  color: #ef4444;
}

.gv-mobile-indicator-chain {
  background: rgba(139, 92, 246, 0.12);
  color: #8b5cf6;
}

.gv-mobile-indicator-fast {
  background: rgba(245, 158, 11, 0.12);
  color: #f59e0b;
}

/* Mobile: show the colored indicators next to the duration selector,
   hide the in-button pills so the button stays clean. */

@media (max-width: 480px) {
  .gv-mobile-indicators {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex: 1 1 auto;
    flex-wrap: wrap;
    order: 2;
  }

  .gv-action-required-btn .gv-btn-pill {
    display: none !important;
  }
}

/* Video loading state for newly generated videos */

.gv-grid-video.gv-video-loading .gv-grid-play-icon {
  display: none;
}

.gv-grid-video.gv-video-loading::after {
  content: '';
  position: absolute;
  top: calc(50% - 16px);
  left: calc(50% - 16px);
  width: 32px;
  height: 32px;
  border: 3px solid rgba(255, 255, 255, 0.3);
  border-top-color: white;
  border-radius: 50%;
  animation: gv-spin 0.8s linear infinite;
  z-index: 3;
}

.gv-grid-video.gv-video-loading {
  pointer-events: none;
}

/* Generating placeholder — shows blurred character image while video generates */

.gv-generating-placeholder {
  pointer-events: none;
  overflow: hidden;
  background: var(--lightgray);
}

.gv-generating-placeholder img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: top;
     object-position: top;
}

.gv-generating-placeholder .gv-blur-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  z-index: 2;
}

.gv-generating-placeholder .gv-placeholder-spinner {
  width: 36px;
  height: 36px;
  border: 3px solid rgba(255, 255, 255, 0.15);
  border-top-color: rgba(255, 255, 255, 0.7);
  border-radius: 50%;
  animation: gv-spin 0.8s linear infinite;
}

.gv-generating-placeholder .gv-placeholder-label {
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.7);
  letter-spacing: 0.05em;
}

.gv-generating-placeholder .gv-placeholder-notify {
  font-size: 0.90rem;
  color: rgba(255, 255, 255, 0.5);
  text-align: center;
  line-height: 1.4;
  max-width: 85%;
  margin-top: 0.25rem;
}

/* Video error state */

.gv-grid-video.gv-video-error .gv-grid-play-icon {
  display: none;
}

.gv-grid-video.gv-video-error::after {
  content: '!';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 32px;
  height: 32px;
  background: rgba(239, 68, 68, 0.8);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: bold;
  font-size: 1.25rem;
  z-index: 3;
}

/* ===== Video Extension: Filter Buttons ===== */

.gv-modal-filter-container {
  display: flex;
  gap: 0.5rem;
  padding: 0.75rem 1rem 0.5rem;
}

.gv-modal-filter-btn {
  padding: 0.5rem 0.75rem;
  font-size: 0.75rem;
  background: transparent;
  border: none;
  border-radius: 1rem;
  color: var(--bodytext);
  cursor: pointer;
  transition: all 0.2s;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.gv-modal-filter-btn:hover {
  color: var(--body);
}

.gv-modal-filter-btn.active {
  background-image: linear-gradient(to right, var(--gre-secondary), var(--gre-primary), var(--gre-secondary), var(--gre-primary));
  background-size: 300% 100%;
  color: white;
}

/* ===== Mode Toggle (Bots/Gallery) inside Character Modal ===== */

.gv-modal-mode-toggle {
  display: flex;
  gap: 0.25rem;
  padding: 0.75rem 1.25rem 0.25rem;
}

.gv-modal-mode-btn {
  flex: 1;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 600;
  background: transparent;
  border: 1px solid var(--lightgray);
  border-radius: 0.375rem;
  color: var(--graycolor);
  cursor: pointer;
  transition: all 0.2s;
  text-align: center;
}

.gv-modal-mode-btn:hover {
  border-color: var(--graycolor);
  color: var(--body);
}

.gv-modal-mode-btn.active {
  background: var(--graycolor);
  color: white;
  border-color: transparent;
}

/* ===== Bot Tag Filter Row in Character Modal ===== */

.gv-modal-tag-filter-container {
  position: relative;
  display: flex;
  gap: 0.5rem;
  padding: 0.5rem 0;
  margin: 0 0.25rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.gv-modal-tag-filter-container::-webkit-scrollbar {
  display: none;
}

/* Tag scroll arrows */

.gv-tag-arrow {
  position: sticky;
  top: 0;
  height: 100%;
  min-width: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
  flex-shrink: 0;
}

.gv-tag-left-arrow {
  left: 0;
  background: linear-gradient(to right, hsl(var(--white)) 60%, transparent);
  padding-right: 0.5rem;
}

.gv-tag-right-arrow {
  right: 0;
  background: linear-gradient(to left, hsl(var(--white)) 60%, transparent);
  padding-left: 0.5rem;
}

.gv-modal-tag-btn {
  padding: 0.5rem 0.75rem;
  font-size: 0.75rem;
  background: transparent;
  border: none;
  border-radius: 1rem;
  color: var(--bodytext);
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
  flex-shrink: 0;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.gv-modal-tag-btn:hover {
  color: var(--body);
}

.gv-modal-tag-btn.active {
  background: var(--graycolor);
  color: white;
}

/* ===== Video Extension: Video Items in Gallery Modal ===== */

.gv-modal-video-item {
  position: relative;
  cursor: pointer;
  aspect-ratio: 3/4;
  border-radius: 0.5rem;
  overflow: hidden;
}

.gv-modal-item-video-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 0.5rem;
  overflow: hidden;
}

.gv-modal-item-video-wrapper video {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.gv-modal-video-play-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 32px;
  height: 32px;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  pointer-events: none;
  transition: opacity 0.2s;
}

.gv-modal-video-play-icon svg {
  width: 14px;
  height: 14px;
}

.gv-modal-video-item:hover .gv-modal-video-play-icon {
  opacity: 0;
}

/* "Extend video" label */

.gv-extend-label {
  position: absolute;
  bottom: 8px;
  left: 8px;
  background: linear-gradient(135deg, var(--gre-secondary), var(--gre-primary));
  color: white;
  font-size: 0.65rem;
  font-weight: 600;
  padding: 3px 6px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  z-index: 2;
}

/* ===== Lightbox / Fullscreen Viewer ===== */

.gv-lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  /* iOS Safari: use dvh to account for dynamic toolbar */
  height: 100vh;
  height: 100dvh;
  width: 100vw;
  overflow: hidden;
}

.gv-lightbox.active {
  display: flex;
}

.gv-lightbox-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.95);
}

.gv-lightbox-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 210;
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  border-radius: 50%;
  color: white;
  cursor: pointer;
  transition: background 0.2s;
}

.gv-lightbox-close:hover {
  background: rgba(255, 255, 255, 0.2);
}

.gv-lightbox-close svg {
  width: 1.5rem;
  height: 1.5rem;
}

/* Navigation arrows */

.gv-lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 210;
  width: 3rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  border-radius: 50%;
  color: white;
  cursor: pointer;
  transition: background 0.2s, opacity 0.2s;
}

.gv-lightbox-nav:hover {
  background: rgba(255, 255, 255, 0.25);
}

.gv-lightbox-nav svg {
  width: 1.5rem;
  height: 1.5rem;
}

.gv-lightbox-prev {
  left: 1rem;
}

.gv-lightbox-next {
  right: 1rem;
}

/* Hide arrows on mobile (swipe only) */

@media (max-width: 768px) {
  .gv-lightbox-nav {
    display: none;
  }
}

/* Content area */

.gv-lightbox-content {
  position: relative;
  z-index: 205;
  max-width: 90vw;
  max-height: 85vh;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.gv-lightbox-content img,
.gv-lightbox-content video {
  max-width: 90vw;
  max-height: 85vh;
  -o-object-fit: contain;
     object-fit: contain;
  border-radius: 0.5rem;
  pointer-events: auto;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  -webkit-user-drag: none;
}

.gv-lightbox-content video {
  background: black;
}

/* Counter */

.gv-lightbox-counter {
  position: absolute;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 210;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.875rem;
  font-weight: 500;
  background: rgba(0, 0, 0, 0.5);
  padding: 0.25rem 0.75rem;
  border-radius: 1rem;
}

/* ===== Fullscreen Icon on Video Grid Items ===== */

.gv-grid-fullscreen-btn {
  position: absolute;
  bottom: 8px;
  right: 8px;
  z-index: 5;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.6);
  border: none;
  border-radius: 6px;
  color: white;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s;
}

.gv-grid-fullscreen-btn svg {
  width: 16px;
  height: 16px;
}

/* Show on hover (desktop) */

.gv-grid-video:hover .gv-grid-fullscreen-btn {
  opacity: 1;
}

/* On mobile phones, hide fullscreen button (tap opens lightbox directly) */

@media (max-width: 768px) {
  .gv-grid-fullscreen-btn {
    display: none;
  }
}

/* On tablets (touch, wider than phone), show at reduced opacity */

@media (hover: none) and (min-width: 769px) {
  .gv-grid-fullscreen-btn {
    opacity: 0.7;
  }
}

/* Mobile: wrap generate + refresh below duration/audio */

@media (max-width: 480px) {
  .gv-bottom-controls {
    flex-wrap: wrap;
  }

  .gv-bottom-controls .gv-duration-selector {
    order: 1;
  }

  .gv-bottom-controls .gv-mobile-indicators {
    order: 2;
  }

  .gv-bottom-controls .gv-audio-btn {
    order: 3;
  }

  .gv-bottom-controls .gv-action-required-btn {
    order: 10;
    flex: 1 1 calc(100% - 3rem);
  }

  .gv-bottom-controls .gv-start-over-btn {
    order: 11;
  }
}

/* Mobile: compact selection grid boxes */

@media (max-width: 480px) {
  .gv-selection-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr minmax(10rem, auto);
  }

  .gv-outfit-wrap {
    display: none;
  }

  .gv-action-box {
    grid-row: span 2;
  }

  .gv-character-box {
    aspect-ratio: 3/5;
  }

  .gv-box-placeholder {
    padding: 0.5rem;
  }

  .gv-box-placeholder svg {
    width: 1.25rem;
    height: 1.25rem;
    margin-bottom: 0.25rem;
  }

  .gv-box-placeholder .gv-gradient-icon {
    width: 2.5rem;
    height: 2.5rem;
  }

  .gv-box-label {
    font-size: 0.8125rem;
  }

  .gv-outfit-box.has-gallery-char .gv-box-placeholder svg {
    opacity: 0.15;
  }

  /* Restore center alignment — 4/5 ratio has enough vertical room */

  .gv-select-box .gv-box-content {
    background-position: center !important;
    align-items: center !important;
  }

  .gv-chain-slide {
    background-position: center;
  }
}

.gv-pro-suffix {
  font-size: inherit;
  font-weight: inherit;
}

/* Mobile: hide "(Pro)" suffix and lock info from toggle */

@media (max-width: 991px) {
  .gv-pro-suffix,
    .gv-instant-word {
    display: none;
  }

  .gv-toggle-info-lock {
    display: none;
  }

  /* Drop the Advanced tab's icon on mobile so the label centers cleanly. */

  .gv-mode-btn-custom svg {
    display: none;
  }
}

/* ===== Start Over Button ===== */

.gv-start-over-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.375rem;
  height: 2.375rem;
  background: hsl(var(--static-white));
  border: none;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.2s;
  flex-shrink: 0;
}

.gv-start-over-btn:hover {
  opacity: 0.8;
}

.gv-start-over-btn:active {
  transform: scale(0.95);
}

.gv-start-over-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

.gv-start-over-btn svg {
  width: 1.125rem;
  height: 1.125rem;
  flex-shrink: 0;
}

/* ===== Start Over Popup ===== */

.gv-start-over-popup {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gv-start-over-popup-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
}

.gv-start-over-popup-content {
  position: relative;
  width: 90%;
  max-width: 400px;
  padding: 1.75rem;
  background: hsl(var(--white));
  border: 1px solid var(--lightgray);
  border-radius: 0.75rem;
  text-align: center;
}

.gv-start-over-popup-close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  background: none;
  border: none;
  border-radius: 0.375rem;
  color: var(--graycolor);
  cursor: pointer;
  transition: all 0.2s;
}

.gv-start-over-popup-close:hover {
  background: var(--transparent-light);
  color: var(--body);
}

.gv-start-over-popup-close svg {
  width: 1rem;
  height: 1rem;
}

/* ===== Gallery Item Controls (Delete, Download, View) ===== */

/* Delete button — top-right corner */

.gv-grid-delete-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 5;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.2);
  border: none;
  border-radius: 50%;
  color: white;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s, background 0.2s;
}

.gv-grid-delete-btn:hover {
  background: rgba(0, 0, 0, 0.8);
}

.gv-grid-item:hover .gv-grid-delete-btn {
  opacity: 1;
}

/* Shift delete button down when audio icon is present */

.gv-grid-video[data-has-audio="true"] .gv-grid-delete-btn {
  top: 34px;
}

/* Download button — bottom-left corner */

.gv-grid-download-btn {
  position: absolute;
  bottom: 8px;
  left: 8px;
  z-index: 5;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.6);
  border: none;
  border-radius: 6px;
  color: white;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s, background 0.2s;
}

.gv-grid-download-btn:hover {
  background: rgba(0, 0, 0, 0.85);
}

.gv-grid-item:hover .gv-grid-download-btn {
  opacity: 1;
}

.gv-grid-download-btn svg {
  width: 16px;
  height: 16px;
}

/* Rating buttons — stacked vertically above the fullscreen button (bottom-right) */

.gv-grid-rating-btns {
  position: absolute;
  bottom: 44px;
  right: 8px;
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 4px;
  opacity: 0;
  transition: opacity 0.2s;
}

.gv-grid-item:hover .gv-grid-rating-btns {
  opacity: 1;
}

.gv-grid-like-btn,
.gv-grid-dislike-btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.6);
  border: none;
  border-radius: 6px;
  color: white;
  cursor: pointer;
  transition: opacity 0.2s, background 0.2s, color 0.2s;
}

.gv-grid-like-btn:hover {
  color: #4ade80;
  background: rgba(0, 0, 0, 0.85);
}

.gv-grid-dislike-btn:hover {
  color: #f87171;
  background: rgba(0, 0, 0, 0.85);
}

.gv-grid-like-btn.active {
  color: #4ade80;
  background: rgba(0, 0, 0, 0.85);
}

.gv-grid-dislike-btn.active {
  color: #f87171;
  background: rgba(0, 0, 0, 0.85);
}

/* On touch devices, always show controls at reduced opacity */

@media (hover: none) {
  .gv-grid-delete-btn,
    .gv-grid-download-btn,
    .gv-grid-rating-btns,
    .gv-select-box.has-selection .gv-box-close {
    opacity: 0.7;
  }
}

/* ===== Delete Confirmation Modal ===== */

.gv-delete-modal {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gv-delete-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
}

.gv-delete-modal-card {
  position: relative;
  width: 90%;
  max-width: 400px;
  padding: 1.75rem;
  background: hsl(var(--white));
  border: 1px solid var(--lightgray);
  border-radius: 0.75rem;
  text-align: center;
}

.gv-delete-modal-close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  background: none;
  border: none;
  border-radius: 0.375rem;
  color: var(--graycolor);
  cursor: pointer;
  font-size: 1.25rem;
  line-height: 1;
  transition: all 0.2s;
}

.gv-delete-modal-close:hover {
  background: var(--transparent-light);
  color: var(--body);
}

.gv-delete-modal-actions {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 1.25rem;
}

.gv-delete-modal-cancel,
.gv-delete-modal-confirm {
  padding: 0.5rem 1.5rem;
  border-radius: 0.5rem;
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  min-width: 6rem;
  border: none;
}

.gv-delete-modal-cancel {
  background: transparent;
  border: 1px solid var(--lightgray);
  color: var(--body);
}

.gv-delete-modal-cancel:hover {
  background: var(--transparent-light);
}

.gv-delete-modal-confirm {
  background: #dc2626;
  color: #fff;
}

.gv-delete-modal-confirm:hover {
  background: #b91c1c;
}

.gv-delete-modal-confirm:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ─── First Generation Info Modal ─── */

.gv-firstgen-modal {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gv-firstgen-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
}

.gv-firstgen-modal-card {
  position: relative;
  width: 90%;
  max-width: 580px;
  padding: 1.75rem;
  background: hsl(var(--white));
  border: 1px solid var(--lightgray);
  border-radius: 0.75rem;
  text-align: center;
}

.gv-firstgen-modal-close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  background: none;
  border: none;
  border-radius: 0.375rem;
  color: var(--graycolor);
  cursor: pointer;
  font-size: 1.25rem;
  line-height: 1;
  transition: all 0.2s;
  z-index: 1;
}

.gv-firstgen-modal-close:hover {
  background: var(--transparent-light);
  color: var(--body);
}

.gv-firstgen-modal-card h2 {
  font-size: 1.375rem;
  font-weight: 700;
  color: hsl(var(--black));
  margin: 0 0 1rem;
  line-height: 1.4;
}

.gv-firstgen-modal-card p {
  font-size: 0.875rem;
  color: var(--graycolor);
  margin: 0 0 1.5rem;
  line-height: 1.5;
}

.gv-firstgen-modal-choices {
  display: flex;
  gap: 1rem;
}

.gv-firstgen-modal-choice {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  text-decoration: none;
  border-radius: 0.5rem;
  transition: transform 0.2s;
}

.gv-firstgen-modal-choice:hover {
  transform: translateY(-2px);
}

.gv-firstgen-modal-video-wrap {
  width: 100%;
  aspect-ratio: 3/4;
  border-radius: 0.5rem;
  overflow: hidden;
  background: var(--light-bg);
}

.gv-firstgen-modal-video-wrap video {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.gv-firstgen-modal-btn {
  display: block;
  padding: 0.625rem 1rem;
  border-radius: 0.375rem;
  font-size: 0.875rem;
  font-weight: 500;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: opacity 0.2s;
}

.gv-firstgen-modal-btn-primary {
  background-image: linear-gradient(to right, var(--gre-secondary), var(--gre-primary));
  color: hsl(var(--static-white));
  border: none;
}

.gv-firstgen-modal-btn-primary:hover {
  opacity: 0.9;
}

.gv-firstgen-modal-btn-secondary {
  background: transparent;
  border: 1px solid var(--lightgray);
  color: var(--body);
}

.gv-firstgen-modal-btn-secondary:hover {
  background: var(--transparent-light);
  border-color: var(--graycolor);
}

@media (max-width: 480px) {
  .gv-firstgen-modal-choices {
    gap: 0.5rem;
  }

  .gv-firstgen-modal-video-wrap {
    aspect-ratio: 3/4;
  }

  .gv-firstgen-modal-btn {
    font-size: 0.75rem;
    padding: 0.5rem 0.5rem;
  }
}

/* ===== Video Tile - Thumbnail-First Pattern ===== */

.video-tile {
  position: relative;
  overflow: hidden;
}

.video-tile-video {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.video-tile-thumb {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.video-tile-thumb-img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.video-tile-overlay {
  position: relative;
  z-index: 2;
}

/* HappyHorse Reference-to-Video (Beta) — the Movie tab's inline two-box pane on
   the Generate Video page (references box + prompt box), plus the picker modal.
   Self-contained r2v- prefix. Colors via project CSS variables only. */

/* The inline pane (shown only in Movie mode — see gen-video.css box-swap). */

.r2v-pane {
  width: 100%;
}

.r2v-badge {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #fff;
  background: var(--primary);
  border-radius: 999px;
  padding: 0.1rem 0.45rem;
  vertical-align: middle;
}

.r2v-help {
  color: var(--bodytext);
  font-size: 0.85rem;
  margin-bottom: 0.85rem;
}

.r2v-help code {
  background: var(--lightgray);
  border-radius: 4px;
  padding: 0.05rem 0.3rem;
  font-size: 0.78rem;
}

/* ── The two horizontal boxes — built on .gv-select-box for visual parity with
   the other tabs, adapted to a wide auto-height rectangle. ── */

.r2v-box.gv-select-box {
  display: block;
  cursor: default;
  padding: 0.85rem 1rem;
  margin-bottom: 0.85rem;
  min-height: 0;
}

/* The refs box is clickable (opens the picker); keep the pointer + hover. */

.r2v-box-refs.gv-select-box {
  cursor: pointer;
}

.r2v-box-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.6rem;
}

.r2v-box-title {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--title);
}

.r2v-empty {
  color: var(--bodytext);
  font-size: 0.82rem;
  align-self: center;
}

/* Top box: references shown as a horizontal, wrapping row of thumbnails with
   the "Add reference" button leading. */

.r2v-selected {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.6rem;
  min-height: 5.5rem;
}

/* Category group inside the selected area (Characters / Objects / Location). */

.r2v-group-title {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--bodytext);
  margin-bottom: 0.4rem;
}

.r2v-group-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

/* Selected thumbnail: colored ring + colored corner number, no text caption.
   The ring/number color matches this image's prompt pill (set inline in JS). */

.r2v-chip {
  position: relative;
  width: 84px;
  height: 84px;
  border-radius: 10px;
  overflow: hidden;
  border: 3px solid var(--primary);
}

.r2v-chip-img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}

/* Colored corner number (matches the prompt pill + ring). */

.r2v-chip-badge {
  position: absolute;
  left: 0;
  top: 0;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  font-size: 0.66rem;
  font-weight: 800;
  line-height: 18px;
  text-align: center;
  color: #fff;
  background: var(--primary);
  border-bottom-right-radius: 8px;
}

.r2v-add-count {
  font-weight: 600;
  opacity: 0.85;
}

.r2v-chip-remove {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 20px;
  height: 20px;
  line-height: 18px;
  text-align: center;
  border-radius: 999px;
  background: #000;
  color: #fff;
  font-size: 14px;
  cursor: pointer;
}

.r2v-label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--title);
  margin-bottom: 0.35rem;
}

.r2v-select {
  width: 100%;
  border: 1px solid var(--lightgray);
  border-radius: 10px;
  background: var(--bgbody);
  color: var(--title);
  padding: 0.6rem 0.75rem;
  font-size: 0.9rem;
}

/* ── Token prompt editor ──────────────────────────────────────────────────
   contenteditable region mixing draggable colored pills + free text. */

.r2v-prompt-editor {
  width: 100%;
  min-height: 4.5rem;
  border: none;
  background: transparent;
  color: var(--title);
  padding: 0;
  /* Free text the user types between pills is shown larger so it stands out
       from the colored pills (pills keep their own smaller font-size below). */
  font-size: 1.05rem;
  line-height: 2.3;
  /* room for pills + gap on wrapped lines */
  outline: none;
  cursor: text;
}

.r2v-prompt-editor.is-empty::before {
  content: attr(data-placeholder);
  color: var(--bodytext);
  opacity: 0.7;
  pointer-events: none;
}

/* A reference pill — colored to match its image (bg/shadow set inline in JS). */

.r2v-pill {
  position: relative;
  /* anchor for the variant dropdown menu */
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  vertical-align: middle;
  /* Wider gap between tags makes them easier to grab, drag, and type between. */
  margin: 0 0.45rem 0.35rem 0;
  padding: 0.18rem 0.5rem 0.18rem 0.32rem;
  border-radius: 999px;
  background: var(--primary);
  color: #fff;
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
  cursor: grab;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

/* Object pills with a phrasing dropdown show the caret + label as clickable. */

.r2v-pill-text {
  cursor: pointer;
}

/* Caret sits between the number and the verb label, bigger so it reads as a
   clear "tap to change the action" control. */

.r2v-pill-caret {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  margin: 0 0.05rem 0 -0.05rem;
  font-size: 0.95rem;
  line-height: 1;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.22);
  opacity: 0.95;
  cursor: pointer;
}

.r2v-pill-caret:hover {
  opacity: 1;
  background: rgba(0, 0, 0, 0.38);
}

/* Inline free-text editing of a pill label (the "Custom text…" option). */

.r2v-pill-text-editing {
  outline: none;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 4px;
  padding: 0 0.2rem;
  min-width: 2ch;
  cursor: text;
}

/* Phrasing dropdown — appended to <body> with fixed positioning (set in JS) so
   it escapes the prompt box bounds and is never clipped. Uses the project's
   standard dropdown surface (white in light mode, near-black in dark) for proper
   contrast — the old var(--darkgray) #666 surface read as muddy and low-contrast
   against the colored pills. */

.r2v-variant-menu {
  z-index: 3000;
  min-width: 13rem;
  max-width: 20rem;
  padding: 0.3rem;
  background: hsl(var(--white));
  border: 1px solid var(--lightgray);
  border-radius: 0.6rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  white-space: normal;
  cursor: default;
}

.r2v-variant-opt {
  text-align: left;
  padding: 0.45rem 0.6rem;
  border: none;
  background: transparent;
  color: var(--title);
  font-size: 0.85rem;
  font-weight: 500;
  border-radius: 0.4rem;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.r2v-variant-opt:hover {
  background: var(--lightgraycolor);
  color: var(--title);
}

.r2v-variant-opt.active {
  background-image: linear-gradient(to right, var(--gre-secondary), var(--gre-primary));
  color: hsl(var(--static-white));
  font-weight: 700;
}

.r2v-variant-opt.active:hover {
  color: hsl(var(--static-white));
}

.r2v-variant-custom {
  border-top: 1px solid var(--lightgray);
  margin-top: 0.15rem;
  padding-top: 0.5rem;
  color: var(--primary);
}

.r2v-variant-custom:hover {
  color: var(--primary);
}

.r2v-pill.dragging {
  opacity: 0.4;
  cursor: grabbing;
}

/* Thin insertion caret shown while dragging — marks where the pill will land.
   Inline so it sits in text flow; near-zero width so showing it barely reflows. */

.r2v-drop-marker {
  display: inline-block;
  width: 2px;
  height: 1.1em;
  margin: 0 1px;
  vertical-align: middle;
  background: var(--primary);
  border-radius: 1px;
  animation: r2v-marker-blink 0.7s steps(2, start) infinite;
}

@keyframes r2v-marker-blink {
  to {
    opacity: 0.3;
  }
}

.r2v-pill-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 3px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.28);
  color: #fff;
  font-size: 0.62rem;
  font-weight: 800;
}

.r2v-pill-x {
  margin-left: 0.1rem;
  font-size: 0.85rem;
  line-height: 1;
  opacity: 0.85;
  cursor: pointer;
}

.r2v-pill-x:hover {
  opacity: 1;
}

.r2v-counter {
  text-align: right;
  font-size: 0.72rem;
  color: var(--bodytext);
  margin: 0.25rem 0 0.85rem;
}

.r2v-counter .over {
  color: var(--primary);
  font-weight: 700;
}

.r2v-settings {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.r2v-generate {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: var(--primary);
  color: #fff;
  font-weight: 700;
  border-radius: 12px;
  padding: 0.8rem 1rem;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.r2v-generate:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.r2v-generate-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: #fff;
  border-radius: 999px;
  animation: r2v-spin 0.8s linear infinite;
}

@keyframes r2v-spin {
  to {
    transform: rotate(360deg);
  }
}

.r2v-cost-note {
  text-align: center;
  font-size: 0.72rem;
  color: var(--bodytext);
  margin-top: 0.6rem;
}

/* ── Picker modal ── */

.r2v-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

/* The [hidden] attribute must win over display:flex above. */

.r2v-modal[hidden] {
  display: none !important;
}

.r2v-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
}

.r2v-modal-content {
  position: relative;
  width: 100%;
  max-width: 720px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  background: var(--bgbody);
  border-radius: 16px;
  overflow: hidden;
}

.r2v-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--lightgray);
}

.r2v-modal-title {
  font-weight: 700;
  color: var(--title);
  margin: 0;
}

.r2v-modal-close {
  color: var(--bodytext);
  cursor: pointer;
  /* ≥44x44 tap target on mobile; the SVG icon stays small inside it. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
}

/* Picker header: title on its own full-width line, the "x/9 selected" count
   right-aligned beneath it, and the close button pinned to the top-right. */

.r2v-picker-head {
  display: block;
  position: relative;
  padding-right: 3rem;
  /* room for the absolute 44px close button */
}

.r2v-picker-head .r2v-modal-title {
  display: block;
  width: 100%;
}

.r2v-picker-head .r2v-picker-count {
  display: block;
  margin: 0.35rem 0 0;
  text-align: right;
}

.r2v-picker-head .r2v-modal-close {
  position: absolute;
  /* offset by the button's own padding so the icon still sits in the corner */
  top: 0.35rem;
  right: 0.75rem;
}

/* Picker modal is taller and uses a fixed header / scroll body / footer. */

.r2v-picker-content {
  max-width: 860px;
  max-height: 88vh;
}

.r2v-picker-count {
  margin-left: auto;
  margin-right: 0.75rem;
  font-size: 0.78rem;
  color: var(--bodytext);
}

/* Tabs */

/* Category selector (Characters / Objects / Location) */

.r2v-cats {
  display: flex;
  gap: 0.5rem;
  padding: 0.85rem 1.25rem;
  border-bottom: 1px solid var(--lightgray);
}

.r2v-cat {
  flex: 1 1 0;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: 1px solid var(--lightgray);
  background: var(--lightgraycolor);
  border-radius: 10px;
  padding: 0.55rem 0.5rem;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--title);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.r2v-cat:hover {
  border-color: var(--primary);
}

.r2v-cat.active {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

.r2v-cat-count {
  min-width: 18px;
  height: 18px;
  line-height: 18px;
  padding: 0 4px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.18);
  font-size: 0.7rem;
}

.r2v-cat.active .r2v-cat-count {
  background: rgba(255, 255, 255, 0.25);
}

.r2v-picker-tabs {
  display: flex;
  gap: 0.25rem;
  padding: 0.75rem 1.25rem 0;
  border-bottom: 1px solid var(--lightgray);
}

.r2v-tab {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 0.5rem 0.9rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--bodytext);
  cursor: pointer;
}

.r2v-tab.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
}

/* Tag bar (bots tab) */

.r2v-tagbar {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.4rem;
  padding: 0.6rem 1.25rem;
  overflow-x: auto;
  border-bottom: 1px solid var(--lightgray);
  scrollbar-width: thin;
}

.r2v-tag {
  flex: 0 0 auto;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: 1px solid var(--lightgray);
  background: var(--lightgray);
  border-radius: 999px;
  padding: 0.35rem 0.85rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--title);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.r2v-tag:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.r2v-tag.active {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

/* Scrollable item area */

.r2v-picker-scroll {
  flex: 1 1 auto;
  overflow-y: auto;
  min-height: 0;
}

.r2v-modal-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.6rem;
  padding: 1rem 1.25rem;
}

.r2v-picker-status {
  padding: 1rem 1.25rem 1.5rem;
  text-align: center;
  color: var(--bodytext);
  font-size: 0.85rem;
}

.r2v-picker-sentinel {
  height: 1px;
}

/* Selectable cell (image or bot) */

.r2v-cell {
  position: relative;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: 2px solid transparent;
  background: var(--lightgraycolor);
  border-radius: 10px;
  overflow: hidden;
  padding: 0;
  cursor: pointer;
  aspect-ratio: 1 / 1;
}

.r2v-cell-img {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
}

.r2v-cell.selected {
  border-color: var(--primary);
}

/* Order number shown on selected cells (matches [Image N]) */

.r2v-cell-order {
  position: absolute;
  top: 5px;
  right: 5px;
  min-width: 22px;
  height: 22px;
  line-height: 22px;
  padding: 0 4px;
  text-align: center;
  border-radius: 999px;
  background: var(--primary);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.r2v-cell.selected .r2v-cell-order {
  opacity: 1;
}

.r2v-cell-name {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  font-size: 0.65rem;
  font-weight: 600;
  text-align: center;
  color: #fff;
  background: rgba(0, 0, 0, 0.55);
  padding: 0.15rem 0.2rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Footer */

.r2v-picker-foot {
  padding: 0.85rem 1.25rem;
  border-top: 1px solid var(--lightgray);
  text-align: right;
}

.r2v-picker-done {
  background: var(--primary);
  color: #fff;
  font-weight: 700;
  border-radius: 10px;
  padding: 0.55rem 1.4rem;
  cursor: pointer;
}

.r2v-field {
  min-width: 0;
}

/* ── Synthetic action cards (Random / Create your own) + inline create form ── */

.r2v-cell-action {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  border: 2px dashed var(--lightgray);
  background: var(--lightgraycolor);
  color: var(--primary);
}

.r2v-cell-action:hover {
  border-color: var(--primary);
}

.r2v-cell-action-icon {
  display: inline-flex;
  color: var(--primary);
}

/* Action cards put their label inline (not the absolute overlay used on images) */

.r2v-cell-action .r2v-cell-name {
  position: static;
  background: transparent;
  color: var(--title);
  font-size: 0.72rem;
  white-space: normal;
  padding: 0 0.3rem;
}

/* Inline "Create your own" form replaces the Create card in-grid. It spans the
   full grid width so the textarea is usable, and breaks the 1:1 aspect. */

.r2v-create-form {
  grid-column: 1 / -1;
  aspect-ratio: auto;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.75rem;
  background: var(--bgbody);
  border: 1px solid var(--primary);
  cursor: default;
}

.r2v-create-input {
  width: 100%;
  border: 1px solid var(--lightgray);
  border-radius: 8px;
  background: var(--bgbody);
  color: var(--title);
  padding: 0.5rem 0.6rem;
  font-size: 0.85rem;
  resize: vertical;
}

.r2v-create-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}

.r2v-create-cancel,
.r2v-create-go {
  border-radius: 8px;
  padding: 0.4rem 0.9rem;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
}

.r2v-create-cancel {
  background: transparent;
  border: 1px solid var(--lightgray);
  color: var(--bodytext);
}

.r2v-create-go {
  background: var(--primary);
  border: 1px solid var(--primary);
  color: #fff;
}

.r2v-create-go:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.r2v-create-status {
  font-size: 0.78rem;
  color: var(--bodytext);
  text-align: center;
}

@media (max-width: 575px) {
  .r2v-settings {
    grid-template-columns: 1fr;
  }

  .r2v-modal-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Selected references inside the box: 3 thumbnails per row on mobile.
       Switch the per-category row to a 3-col grid and let chips fill the cell
       (square via aspect-ratio) so they shrink to fit regardless of box width. */

  .r2v-group-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.45rem;
  }

  .r2v-chip {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
  }
}

/* Fallback toast — only used if the shared gen-video / global toast isn't
   loaded yet. We never use a native browser alert() in the R2V flow. */

.r2v-toast {
  position: fixed;
  left: 50%;
  bottom: 1.5rem;
  transform: translateX(-50%);
  z-index: 2000;
  max-width: 90vw;
  padding: 0.75rem 1.1rem;
  border-radius: 0.6rem;
  background: var(--darkgray);
  color: hsl(var(--static-white));
  font-size: 0.9rem;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
}

.r2v-toast-error {
  background: var(--primary);
}

.r2v-toast-success {
  background: #16a34a;
}

/* ===== Bot Page Gallery ===== */

/* Remove max-width cap so the grid fills the container on large screens */

.subscribe-lock-container .gv-image-grid {
  max-width: none;
  padding: 0;
}

/* Lock overlay within gv-grid-item context */

.bp-lock-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.3);
  z-index: 3;
}

/* Locked item: disable cursor pointer (no lightbox) */

.bp-locked {
  cursor: default;
}

/* Blur image within locked item */

.bp-locked .gv-grid-media {
  filter: blur(20px);
  transform: scale(1.1);
}

/* Unlock button inside lock overlay */

.bp-unlock-btn {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.625rem 1.25rem;
  border-radius: 9999px;
  border: none;
  font-size: 0.875rem;
  cursor: pointer;
  color: hsl(var(--static-white));
  background-image: linear-gradient(to right, var(--gre-secondary), var(--gre-primary));
  transition: opacity 0.2s;
  z-index: 4;
}

.bp-unlock-btn:hover {
  opacity: 0.9;
}

.bp-unlock-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.bp-unlock-btn img {
  width: 1.25rem;
  height: 1.25rem;
}

/* Smaller unlock button on mobile */

@media (max-width: 575px) {
  .bp-unlock-btn {
    padding: 0.35rem 0.75rem;
    font-size: 0.65rem;
    gap: 0.2rem;
  }

  .bp-unlock-btn svg {
    width: 12px;
    height: 12px;
  }

  .bp-unlock-btn img {
    width: 1rem;
    height: 1rem;
  }
}

/* ===== Bot Card - Mobile Info Toggle ===== */

/* Collapsible content wrapper */

.bot-info-content {
  max-height: 200px;
  overflow: hidden;
  transition: max-height 0.3s ease, opacity 0.3s ease;
}

.bot-info-content.collapsed {
  max-height: 0;
  opacity: 0;
}

/* Arrow rotation when collapsed (pointing up = "expand") */

.bot-info-toggle.collapsed svg {
  transform: rotate(180deg);
}

/* Hide gradient overlay when collapsed */

.bot-info-gradient.collapsed {
  opacity: 0;
  transition: opacity 0.3s ease;
}

/*=====================
    Partner Page CSS
  ==========================*/

/* ---- Page Header ---- */

.partner-page-header {
  padding-bottom: 8px;
}

/* ---- Labels ---- */

.partner-label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--bodytext);
  margin-bottom: 8px;
}

/* ---- Inputs ---- */

.partner-input {
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.partner-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(250, 61, 114, 0.08);
  outline: none;
}

/* ---- Select ---- */

.partner-select {
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8.825a.5.5 0 0 1-.354-.146L2.11 5.143a.5.5 0 1 1 .707-.707L6 7.618l3.182-3.182a.5.5 0 1 1 .707.707L6.354 8.68A.5.5 0 0 1 6 8.825z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px;
  padding-right: 36px;
}

.partner-select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(250, 61, 114, 0.08);
  outline: none;
}

/* ---- URL Input Group ---- */

.partner-url-group {
  display: flex;
}

.partner-url-prefix {
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
  font-size: 13px;
  color: var(--graycolor);
  background: var(--light-bg);
  border: 1px solid var(--lightgraycolor);
  border-right: 0;
  border-radius: 8px 0 0 8px;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  white-space: nowrap;
}

/* ---- Section Cards ---- */

.partner-section-card {
  border: 1px solid var(--lightgraycolor);
  border-radius: 14px;
  padding: 28px 28px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  background: transparent;
}

.partner-section-card:focus-within {
  border-color: rgba(250, 61, 114, 0.15);
  box-shadow: 0 2px 12px rgba(250, 61, 114, 0.04);
}

.partner-section-card.has-errors {
  border-color: #ef4444;
  box-shadow: 0 2px 12px rgba(239, 68, 68, 0.06);
}

@media (max-width: 575px) {
  .partner-section-card {
    padding: 20px 16px;
  }

  /* Prevent iOS auto-zoom on input focus (triggers at font-size < 16px) */

  .partner-section-card input,
    .partner-section-card select,
    .partner-section-card textarea {
    font-size: 16px;
  }
}

/* ---- Section Header ---- */

.partner-section-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 22px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--lightgraycolor);
}

/* ---- Numbered Badge ---- */

.partner-section-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background-image: linear-gradient(135deg, var(--gre-secondary), var(--gre-primary));
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  flex-shrink: 0;
}

/* ---- Divider between dynamic sections ---- */

.partner-divider {
  height: 1px;
  background: var(--lightgraycolor);
  margin-bottom: 20px;
}

/* ---- Submit Area ---- */

.partner-submit-area {
  margin-top: 32px;
  text-align: center;
  padding: 24px 0 0;
}

.partner-submit-btn {
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.partner-submit-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(250, 61, 114, 0.3);
}

.partner-submit-btn:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(250, 61, 114, 0.2);
}

.partner-submit-btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

/* ---- Helper Note ---- */

.partner-helper-note {
  background: rgba(250, 61, 114, 0.04);
  border-left: 3px solid var(--primary);
  border-radius: 0 8px 8px 0;
  padding: 12px 16px;
}

/* ---- Error Summary ---- */

.partner-error-summary {
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 16px;
}

/* ---- Dynamic Fields Animation ---- */

.partner-dynamic-fields {
  animation: partnerFadeIn 0.25s ease;
}

@keyframes partnerFadeIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---- Checkbox Labels ---- */

.partner-checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid var(--lightgraycolor);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
  font-size: 13px;
}

.partner-checkbox-label:hover {
  border-color: rgba(250, 61, 114, 0.3);
  background: rgba(250, 61, 114, 0.02);
}

.partner-checkbox-label input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--primary);
  flex-shrink: 0;
}

.partner-checkbox-label.checked {
  border-color: var(--primary);
  background: rgba(250, 61, 114, 0.04);
}

/* ---- Textarea ---- */

.partner-textarea {
  min-height: 80px;
  max-height: 250px;
}

/* ── Bot Admin Tool ──────────────────────────────────────────────────
 * Two-pane layout (left: bot list rail, right: media grid) used by:
 *   - bot-admin-tool.html
 *   - edit-bot-admin-tool.html (form variant)
 *   - bot-add-media.html (form variant)
 */

.ba-page {
  padding: 16px 24px 96px;
  max-width: 1600px;
  margin: 0 auto;
}

.ba-layout {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 20px;
  min-height: calc(100vh - 160px);
}

@media (max-width: 991px) {
  .ba-layout {
    grid-template-columns: 1fr;
  }
}

/* ── Left rail: bot list ─────────────────────────────────────────── */

.ba-rail {
  background: var(--ba-panel-bg, #fff);
  border: 1px solid var(--chat-border, #e5e5e5);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: sticky;
  top: 80px;
  align-self: start;
  max-height: calc(100vh - 100px);
}

.ba-rail__search {
  padding: 12px;
  border-bottom: 1px solid var(--chat-border, #e5e5e5);
}

.ba-rail__filters {
  padding: 10px 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  border-bottom: 1px solid var(--chat-border, #e5e5e5);
}

.ba-rail__list {
  overflow-y: auto;
  flex: 1;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ba-rail__placeholder,
.ba-pane__placeholder {
  padding: 24px;
  text-align: center;
  color: var(--bodytext, #9a9a9a);
  font-size: 14px;
}

.ba-bot-card {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  border-radius: 10px;
  background: transparent;
  border: 1px solid transparent;
  text-align: left;
  cursor: pointer;
  width: 100%;
  transition: background 120ms ease, border-color 120ms ease;
}

.ba-bot-card:hover {
  background: rgba(0, 0, 0, 0.04);
}

.ba-bot-card.is-active {
  background: rgba(250, 61, 114, 0.08);
  border-color: #FA3D72;
}

.ba-bot-card__avatar {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  overflow: hidden;
  flex-shrink: 0;
  background: #eee;
  display: grid;
  place-items: center;
}

.ba-bot-card__avatar img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.ba-bot-card__initials {
  font-weight: 700;
  color: #666;
  font-size: 18px;
}

.ba-bot-card__body {
  min-width: 0;
  flex: 1;
}

.ba-bot-card__name {
  font-weight: 600;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ba-bot-card__meta {
  display: flex;
  gap: 10px;
  align-items: center;
  font-size: 12px;
  color: var(--bodytext, #6b6b6b);
  margin-top: 2px;
}

.ba-count {
  display: inline-flex;
  gap: 4px;
  align-items: center;
}

.ba-status {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 6px;
  border-radius: 999px;
  font-weight: 700;
}

.ba-status--published {
  background: rgba(22, 163, 74, 0.1);
  color: #16a34a;
}

.ba-status--draft {
  background: rgba(156, 163, 175, 0.1);
  color: #6b7280;
}

.ba-status--private {
  background: rgba(244, 63, 94, 0.1);
  color: #f43f5e;
}

.ba-status--clone {
  background: rgba(14, 165, 233, 0.1);
  color: #0ea5e9;
}

.ba-status--creation,
.ba-status--creation_shared,
.ba-status--creation_free {
  background: rgba(168, 85, 247, 0.1);
  color: #a855f7;
}

/* ── Right pane: media grid ──────────────────────────────────────── */

.ba-pane {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.ba-filters {
  padding: 14px;
  background: var(--ba-panel-bg, #fff);
  border: 1px solid var(--chat-border, #e5e5e5);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ba-filters__bot {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 32px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--chat-border, #e5e5e5);
}

.ba-filters__bot img {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  -o-object-fit: cover;
     object-fit: cover;
}

.ba-filters__bot strong {
  font-size: 16px;
  font-weight: 700;
}

.ba-filters__bot .ba-pane__placeholder {
  padding: 0;
  color: var(--bodytext, #9a9a9a);
  font-size: 14px;
}

.ba-filters__row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: end;
}

/* The HTML5 `hidden` attribute must win over our display: flex above. */

.ba-filters__row[hidden] {
  display: none;
}

.ba-filters__row--main {
  align-items: center;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  margin-bottom: 6px;
}

.ba-filters__more-toggle {
  margin-left: auto;
}

.ba-field--voice {
  min-width: 220px;
  position: relative;
  margin: 0;
  display: inline-flex;
  align-items: center;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 8px;
}

.ba-field--voice .ba-field__input {
  padding: 4px 10px;
  height: 32px;
  line-height: 1.2;
  flex: 1 1 auto;
  min-width: 0;
}

.ba-voice-status {
  font-size: 11px;
  color: var(--bodytext, #9a9a9a);
  opacity: 0.85;
  line-height: 14px;
  white-space: nowrap;
}

.ba-voice-status:empty {
  display: none;
}

.ba-voice-preview {
  height: 32px;
  padding: 0 10px;
  line-height: 1;
  flex: 0 0 auto;
}

.ba-voice-preview:disabled {
  opacity: 0.6;
  cursor: progress;
}

.ba-filters__notice {
  padding: 8px 12px;
  background: #fef3c7;
  color: #92400e;
  border-radius: 8px;
  font-size: 13px;
}

.ba-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 140px;
}

.ba-field--grow {
  flex: 1;
  min-width: 200px;
}

.ba-field--search {
  flex-direction: row;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  border: 1px solid var(--chat-border, #e5e5e5);
  border-radius: 8px;
  background: #fff;
}

.ba-field--search .ba-field__input {
  border: none;
  padding: 10px 0;
  background: transparent;
}

.ba-field__label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--bodytext, #6b6b6b);
  font-weight: 600;
}

.ba-field__input {
  padding: 8px 10px;
  border: 1px solid var(--chat-border, #e5e5e5);
  border-radius: 8px;
  font-size: 14px;
  background: #fff;
  color: inherit;
}

.ba-field__input:focus {
  outline: none;
  border-color: #FA3D72;
  box-shadow: 0 0 0 3px rgba(250, 61, 114, 0.15);
}

.ba-pills {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  background: rgba(0, 0, 0, 0.04);
  border-radius: 10px;
}

.ba-pill {
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  background: transparent;
  border: none;
  cursor: pointer;
  color: inherit;
}

.ba-pill:hover {
  background: rgba(0, 0, 0, 0.06);
}

.ba-pill.is-active {
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
  font-weight: 600;
}

.ba-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: var(--ba-panel-bg, #fff);
  border: 1px solid var(--chat-border, #e5e5e5);
  border-radius: 12px;
  flex-wrap: wrap;
  position: sticky;
  top: 96px;
  z-index: 50;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.dark .ba-toolbar {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.ba-toolbar__left,
.ba-toolbar__right {
  display: flex;
  gap: 10px;
  align-items: center;
}

.ba-toolbar__count {
  font-size: 13px;
  color: var(--bodytext, #6b6b6b);
}

.ba-selectall {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  font-size: 13px;
  cursor: pointer;
}

.ba-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  border: 1px solid var(--chat-border, #e5e5e5);
  background: #fff;
  color: #111;
  cursor: pointer;
  text-decoration: none;
}

.ba-btn:hover:not(:disabled) {
  background: #f8f8f8;
}

.ba-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.ba-btn--primary {
  background: #111;
  color: #fff;
  border-color: #111;
}

.ba-btn--primary:hover:not(:disabled) {
  background: #000;
}

.ba-btn--danger {
  background: #f43f5e;
  color: #fff;
  border-color: #f43f5e;
}

.ba-btn--danger:hover:not(:disabled) {
  background: #e11d48;
}

.ba-btn--ghost {
  background: transparent;
  border-color: transparent;
}

.ba-btn--ghost:hover:not(:disabled) {
  background: rgba(0, 0, 0, 0.05);
}

.ba-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
  padding: 14px;
  background: var(--ba-panel-bg, #fff);
  border: 1px solid var(--chat-border, #e5e5e5);
  border-radius: 12px;
  min-height: 300px;
  align-content: start;
}

/* Ctrl/Cmd held over the grid → paint-select armed */

.ba-grid--drag-armed,
.ba-grid--drag-armed .ba-tile,
.ba-grid--drag-armed .ba-tile__media {
  cursor: crosshair !important;
}

.ba-grid--drag-armed .ba-tile {
  outline: 1px dashed rgba(250, 61, 114, 0.5);
  outline-offset: -1px;
}

.ba-tile {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: 10px;
  overflow: hidden;
  background: #f3f3f3;
}

.ba-tile__media {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
}

.ba-tile__media img,
.ba-tile__media video {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}

.ba-tile.is-selected {
  outline: 3px solid #FA3D72;
  outline-offset: -3px;
}

.ba-tile__select {
  position: absolute;
  top: 6px;
  left: 6px;
  z-index: 2;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.9);
  display: grid;
  place-items: center;
  cursor: pointer;
}

.ba-tile__checkbox {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

.ba-tile__checkmark {
  display: none;
  color: #16a34a;
}

.ba-tile__checkbox:checked ~ .ba-tile__checkmark {
  display: grid;
  place-items: center;
}

.ba-tile__badge {
  position: absolute;
  bottom: 6px;
  right: 6px;
  padding: 2px 6px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.ba-tile__badge--public {
  background: rgba(22, 163, 74, 0.9);
  color: #fff;
}

.ba-tile__badge--private {
  background: rgba(244, 63, 94, 0.9);
  color: #fff;
}

.ba-tile__badge--video {
  top: 6px;
  right: 6px;
  bottom: auto;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  width: 22px;
  height: 22px;
  padding: 0;
  display: grid;
  place-items: center;
}

.ba-tile__tags {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 6px;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.7));
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  max-height: 50%;
  overflow: hidden;
  pointer-events: none;
}

.ba-tile__tag {
  font-size: 9px;
  padding: 1px 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  color: #111;
  font-weight: 600;
  white-space: nowrap;
}

.ba-tile__tag--more {
  background: rgba(250, 61, 114, 0.9);
  color: #fff;
}

.ba-sentinel {
  grid-column: 1 / -1;
  display: grid;
  place-items: center;
  padding: 20px;
}

.ba-sentinel--bots {
  padding: 12px;
}

.ba-sentinel__spinner {
  width: 24px;
  height: 24px;
  border: 3px solid #e5e5e5;
  border-top-color: #FA3D72;
  border-radius: 50%;
  animation: ba-spin 800ms linear infinite;
}

@keyframes ba-spin {
  to {
    transform: rotate(360deg);
  }
}

.ba-empty {
  padding: 40px 20px;
  text-align: center;
  color: var(--bodytext, #6b6b6b);
  grid-column: 1 / -1;
}

.ba-empty--media p {
  margin: 0 0 12px;
}

.ba-confirm {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: grid;
  place-items: center;
  z-index: 1000;
}

.ba-confirm[hidden] {
  display: none;
}

/* ── Edit-media modal (HTMX-loaded form) ─────────────────────────── */

.ba-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: grid;
  place-items: center;
  z-index: 1100;
  padding: 24px;
  overflow-y: auto;
}

.ba-modal[hidden] {
  display: none;
}

.ba-modal__dialog {
  background: var(--ba-panel-bg, #fff);
  border-radius: 14px;
  width: 100%;
  max-width: 720px;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
  position: relative;
}

.ba-modal__loading {
  padding: 60px 20px;
  text-align: center;
  color: var(--bodytext, #6b6b6b);
}

.ba-modal__loading .ba-sentinel__spinner {
  margin: 0 auto 12px;
}

.ba-modal__close {
  margin-left: auto;
  background: transparent;
  border: 1px solid var(--chat-border, #e5e5e5);
  border-radius: 8px;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  cursor: pointer;
  color: inherit;
  flex-shrink: 0;
}

.ba-modal__close:hover {
  background: rgba(0, 0, 0, 0.05);
}

.ba-form--modal {
  border: none;
  border-radius: 0;
  max-width: none;
  margin: 0;
  box-shadow: none;
  background: transparent;
}

.ba-form--modal .ba-form__header {
  align-items: flex-start;
}

@media (max-width: 575px) {
  .ba-modal {
    padding: 0;
  }

  .ba-modal__dialog {
    border-radius: 0;
    max-height: 100vh;
    height: 100vh;
  }
}

.ba-confirm__dialog {
  background: #fff;
  border-radius: 12px;
  padding: 24px;
  max-width: 420px;
  width: calc(100% - 32px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

.ba-confirm__title {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 700;
}

.ba-confirm__body {
  margin: 0 0 20px;
  color: var(--bodytext, #6b6b6b);
  font-size: 14px;
}

.ba-confirm__actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

/* ── Persistent Qwen pod status strip ────────────────────────────── */

.ba-pod-strip {
  margin-top: 10px;
  padding: 8px 14px;
  background: #fff8e6;
  border: 1px solid #f0d98c;
  border-radius: 10px;
  font-size: 12px;
  color: #5a4700;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.ba-pod-strip[hidden] {
  display: none;
}

.ba-pod-strip__sep {
  color: #b59b47;
}

.ba-pod-strip__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #b0b0b0;
  display: inline-block;
}

.ba-pod-strip__dot--provisioning {
  background: #d4a017;
}

.ba-pod-strip__dot--booting {
  background: #d4a017;
  animation: ba-spin 2s linear infinite;
}

.ba-pod-strip__dot--ready {
  background: #2e8b57;
}

.ba-pod-strip__dot--failed {
  background: #c0392b;
}

/* ── Qwen retag progress banner ──────────────────────────────────── */

.ba-tag-progress {
  margin-top: 10px;
  padding: 12px 14px;
  background: #f6f9ff;
  border: 1px solid #cfdcff;
  border-radius: 10px;
  font-size: 13px;
  color: #1c2e4a;
}

.ba-tag-progress[hidden] {
  display: none;
}

.ba-tag-progress__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.ba-tag-progress__counts {
  margin-left: auto;
  display: inline-flex;
  gap: 6px;
  align-items: center;
  font-variant-numeric: tabular-nums;
}

.ba-tag-progress__sep {
  color: #8893a8;
}

.ba-tag-progress__current {
  margin-top: 6px;
  font-size: 12px;
  color: #495a7a;
  word-break: break-all;
}

.ba-tag-progress__errors {
  margin-top: 8px;
  padding: 8px;
  background: #fff3f3;
  border: 1px solid #ffc9c9;
  border-radius: 8px;
  font-size: 12px;
  color: #8a1f1f;
  max-height: 160px;
  overflow-y: auto;
}

.ba-tag-progress__errors[hidden] {
  display: none;
}

.ba-tag-progress__errors ul {
  margin: 0;
  padding-left: 18px;
}

.ba-tag-progress--done {
  background: #f1fbf4;
  border-color: #b9e6c4;
  color: #11523d;
}

.ba-tag-progress--failed {
  background: #fff3f3;
  border-color: #ffc9c9;
  color: #8a1f1f;
}

/* ── Form pages (edit, add-media) ────────────────────────────────── */

.ba-form {
  max-width: 720px;
  margin: 0 auto;
  padding: 24px;
  background: var(--ba-panel-bg, #fff);
  border: 1px solid var(--chat-border, #e5e5e5);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.ba-form__header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--chat-border, #e5e5e5);
}

.ba-form__header img {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  -o-object-fit: cover;
     object-fit: cover;
}

.ba-form__preview {
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(0, 0, 0, 0.03);
  border-radius: 10px;
}

.ba-form__preview img,
.ba-form__preview video {
  max-width: 100%;
  max-height: 360px;
  border-radius: 8px;
}

.ba-form__upload {
  display: block;
  padding: 40px 20px;
  border: 2px dashed var(--chat-border, #e5e5e5);
  border-radius: 10px;
  text-align: center;
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease;
}

.ba-form__upload:hover {
  border-color: #FA3D72;
  background: rgba(250, 61, 114, 0.03);
}

.ba-form__upload input[type="file"] {
  position: absolute;
  left: -9999px;
}

.ba-form__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px;
  min-height: 44px;
  border: 1px solid var(--chat-border, #e5e5e5);
  border-radius: 8px;
  background: #fff;
}

.ba-form__tags .ba-tag-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(250, 61, 114, 0.1);
  color: #FA3D72;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.ba-form__tags .ba-tag-chip::after {
  content: '×';
  font-size: 14px;
  line-height: 1;
}

.ba-form__tag-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

.ba-form__tag-suggestions .ba-tag-chip {
  background: rgba(0, 0, 0, 0.05);
  color: #555;
}

.ba-form__tag-suggestions .ba-tag-chip::after {
  content: '+';
}

/* Grouped Qwen structured_tags editor */

.ba-form__hint {
  font-size: 12px;
  color: #777;
  margin: 4px 0 10px;
  line-height: 1.4;
}

.ba-form__categories {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ba-form__category {
  padding: 10px 12px;
  border: 1px solid var(--chat-border, #e5e5e5);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.02);
}

.ba-form__category-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #555;
}

.ba-form__category-head strong {
  font-weight: 700;
}

.ba-form__category-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: rgba(250, 61, 114, 0.12);
  color: #FA3D72;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}

.ba-form__category .ba-form__tags {
  background: #fff;
}

.ba-form__category .ba-form__tag-suggestions {
  margin-top: 8px;
}

.ba-form__actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  padding-top: 14px;
  border-top: 1px solid var(--chat-border, #e5e5e5);
}

.ba-form__checkbox {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  cursor: pointer;
  font-size: 14px;
}

/* ── Dark mode ───────────────────────────────────────────────────── */

.dark .ba-rail,
.dark .ba-pane__header,
.dark .ba-filters,
.dark .ba-toolbar,
.dark .ba-grid,
.dark .ba-form {
  background: #1a1a1a;
  border-color: #2a2a2a;
}

.dark .ba-field__input,
.dark .ba-field--search,
.dark .ba-form__tags {
  background: #0f0f0f;
  border-color: #2a2a2a;
  color: #fff;
}

.dark .ba-btn {
  background: #0f0f0f;
  border-color: #2a2a2a;
  color: #fff;
}

.dark .ba-btn:hover:not(:disabled) {
  background: #1f1f1f;
}

.dark .ba-btn--primary {
  background: #fff;
  color: #111;
  border-color: #fff;
}

.dark .ba-pills {
  background: rgba(255, 255, 255, 0.06);
}

.dark .ba-pill.is-active {
  background: #0f0f0f;
}

.dark .ba-bot-card:hover {
  background: rgba(255, 255, 255, 0.04);
}

.dark .ba-bot-card.is-active {
  background: rgba(250, 61, 114, 0.12);
}

.dark .ba-confirm__dialog {
  background: #1a1a1a;
  color: #fff;
}

.dark .ba-modal__dialog {
  background: #1a1a1a;
  color: #fff;
}

.dark .ba-modal__close {
  border-color: #2a2a2a;
}

.dark .ba-modal__close:hover {
  background: rgba(255, 255, 255, 0.05);
}

.dark .ba-tile__tag {
  background: rgba(0, 0, 0, 0.85);
  color: #fff;
}

.dark .ba-form__upload:hover {
  background: rgba(250, 61, 114, 0.06);
}

.dark .ba-form__preview {
  background: rgba(255, 255, 255, 0.03);
}

.dark .ba-form__hint {
  color: #888;
}

.dark .ba-form__category {
  background: rgba(255, 255, 255, 0.03);
  border-color: #2a2a2a;
}

.dark .ba-form__category-head {
  color: #aaa;
}

.dark .ba-form__category .ba-form__tags {
  background: #0f0f0f;
}

/*
 * Home Order Tool — visual drag-and-drop editor for the homepage bots-grid
 * order (Bot.display_order). Staff page /bot-admin-tool/home-order/.
 * Shares the .ba-* admin chrome (nav, modal, fields); .ho-* is page-specific.
 */

.ho-wrap {
  max-width: 1600px;
  margin: 0 auto;
  padding: 8px 0 0;
}

/* ── Header ─────────────────────────────────────────────────────────── */

.ho-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.ho-title {
  font-size: 20px;
  font-weight: 600;
  color: var(--title, #1a1a1a);
}

.ho-subtitle {
  margin-top: 4px;
  max-width: 720px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--bodytext, #6b6b6b);
}

.ho-head__stats {
  flex-shrink: 0;
  font-size: 13px;
  color: var(--bodytext, #6b6b6b);
  white-space: nowrap;
}

.ho-head__stats #ho-placed-count {
  font-weight: 700;
  color: var(--primary, #fa3d72);
}

.ho-head__dot {
  margin: 0 6px;
  opacity: 0.5;
}

/* ── Grid ──────────────────────────────────────────────────────────── */

.ho-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
}

.ho-grid__placeholder {
  grid-column: 1 / -1;
  padding: 48px;
  text-align: center;
  color: var(--bodytext, #9a9a9a);
}

/* ── Card ──────────────────────────────────────────────────────────── */

.ho-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 10px 10px;
  border: 1px solid var(--chat-border, #e5e5e5);
  border-radius: 12px;
  background: var(--ba-panel-bg, #fff);
  cursor: grab;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  transition: box-shadow 120ms ease, border-color 120ms ease, transform 120ms ease;
}

.ho-card:hover {
  border-color: var(--primary, #fa3d72);
}

.ho-card:active {
  cursor: grabbing;
}

.ho-card--ghost {
  opacity: 0.4;
}

.ho-card--chosen {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}

.ho-card__pos {
  position: absolute;
  top: 6px;
  left: 6px;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--primary, #fa3d72);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}

.ho-card__remove {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  font-size: 12px;
  line-height: 1;
  opacity: 0;
  transition: opacity 120ms ease, background 120ms ease;
}

.ho-card:hover .ho-card__remove {
  opacity: 1;
}

.ho-card__remove:hover {
  background: var(--primary, #fa3d72);
}

.ho-card__avatar {
  width: 88px;
  height: 88px;
  border-radius: 10px;
  overflow: hidden;
  background: #eee;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 8px;
}

.ho-card__avatar img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.ho-card__initials {
  font-size: 28px;
  font-weight: 700;
  color: var(--bodytext, #9a9a9a);
}

.ho-card__name {
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  color: var(--title, #1a1a1a);
  line-height: 1.25;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.ho-card__status {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
}

.ho-card__status--published {
  background: rgba(22, 163, 74, 0.1);
  color: #16a34a;
}

.ho-card__status--creation_shared {
  background: rgba(168, 85, 247, 0.1);
  color: #a855f7;
}

/* ── Add card (persistent, last) ───────────────────────────────────── */

.ho-card--add {
  justify-content: center;
  border-style: dashed;
  border-width: 2px;
  background: transparent;
  cursor: pointer;
  min-height: 168px;
  color: var(--bodytext, #9a9a9a);
}

.ho-card--add:hover {
  border-color: var(--primary, #fa3d72);
  color: var(--primary, #fa3d72);
}

.ho-card--add__plus {
  font-size: 32px;
  font-weight: 300;
  line-height: 1;
}

.ho-card--add__label {
  font-size: 12px;
  font-weight: 600;
}

.ho-sentinel {
  height: 1px;
}

/* ── Save bar ──────────────────────────────────────────────────────── */

.ho-savebar {
  position: sticky;
  bottom: 0;
  margin-top: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 16px;
  border: 1px solid var(--chat-border, #e5e5e5);
  border-radius: 12px;
  background: var(--ba-panel-bg, #fff);
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.06);
}

.ho-savebar__status {
  font-size: 13px;
  color: var(--bodytext, #6b6b6b);
}

.ho-savebar__status.is-dirty {
  color: var(--primary, #fa3d72);
  font-weight: 600;
}

.ho-savebar__actions {
  display: flex;
  gap: 8px;
}

.ho-btn {
  padding: 8px 18px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  transition: background 120ms ease, opacity 120ms ease;
}

.ho-btn--primary {
  background: var(--primary, #fa3d72);
  color: #fff;
}

.ho-btn--primary:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.ho-btn--ghost {
  background: transparent;
  border: 1px solid var(--chat-border, #e5e5e5);
  color: var(--bodytext, #6b6b6b);
}

.ho-btn--ghost:hover {
  background: rgba(0, 0, 0, 0.04);
}

/* ── Picker modal ──────────────────────────────────────────────────── */

.ho-picker__dialog {
  width: min(560px, 92vw);
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  padding: 16px;
}

.ho-picker__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.ho-picker__title {
  font-size: 16px;
  font-weight: 600;
  color: var(--title, #1a1a1a);
}

.ho-picker__close {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  color: var(--bodytext, #6b6b6b);
}

.ho-picker__close:hover {
  background: rgba(0, 0, 0, 0.06);
}

.ho-picker__search {
  margin-bottom: 10px;
}

/* Horizontal-scroll quick-filter tag chips (scrollbar hidden) */

.ho-tags {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  overflow-y: hidden;
  margin-bottom: 10px;
  -webkit-overflow-scrolling: touch;
  /* Hide the scrollbar visually while keeping horizontal scroll. */
  scrollbar-width: none;
  /* Firefox */
  -ms-overflow-style: none;
  /* old Edge/IE */
}

.ho-tags::-webkit-scrollbar {
  display: none;
  height: 0;
}

/* Chrome/Safari */

.ho-tag {
  flex: 0 0 auto;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid var(--chat-border, #e5e5e5);
  background: transparent;
  color: var(--bodytext, #6b6b6b);
  font-size: 12px;
  line-height: 1.4;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}

.ho-tag:hover {
  border-color: var(--primary, #fa3d72);
  color: var(--primary, #fa3d72);
}

.ho-tag.is-active {
  background: var(--primary, #fa3d72);
  border-color: var(--primary, #fa3d72);
  color: #fff;
}

.ho-picker__results {
  overflow-y: auto;
  flex: 1;
}

.ho-picker__hint {
  padding: 24px;
  text-align: center;
  font-size: 13px;
  color: var(--bodytext, #9a9a9a);
}

.ho-result {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px;
  border-radius: 10px;
  text-align: left;
  transition: background 120ms ease;
}

.ho-result:hover {
  background: rgba(0, 0, 0, 0.04);
}

.ho-result.is-added {
  opacity: 0.55;
  cursor: default;
}

.ho-result__avatar {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 8px;
  overflow: hidden;
  background: #eee;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ho-result__avatar img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.ho-result__initials {
  font-weight: 700;
  color: var(--bodytext, #9a9a9a);
}

.ho-result__name {
  flex: 1;
  font-size: 14px;
  font-weight: 600;
  color: var(--title, #1a1a1a);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ho-result__status {
  font-size: 11px;
  color: var(--bodytext, #9a9a9a);
}

.ho-result__action {
  font-size: 12px;
  font-weight: 700;
  color: var(--primary, #fa3d72);
  flex-shrink: 0;
}

.ho-result.is-added .ho-result__action {
  color: var(--bodytext, #9a9a9a);
}

/* ── Dark mode ─────────────────────────────────────────────────────── */

.dark .ho-card,
.dark .ho-savebar,
.dark .ho-picker__dialog {
  background: var(--ba-panel-bg, #1a1a1a);
  border-color: var(--chat-border, #333);
}

.dark .ho-card__avatar,
.dark .ho-result__avatar {
  background: #2a2a2a;
}

.dark .ho-tag {
  border-color: var(--chat-border, #333);
}

.dark .ho-btn--ghost:hover,
.dark .ho-result:hover {
  background: rgba(255, 255, 255, 0.06);
}

/* ── Responsive ────────────────────────────────────────────────────── */

@media (max-width: 575px) {
  .ho-grid {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  }

  .ho-head {
    flex-direction: column;
  }

  .ho-card__avatar {
    width: 72px;
    height: 72px;
  }
}

/* Voice Management staff tool — sibling to bot-admin.css.
   Uses the project's CSS variables (var(--primary), var(--lightbg), etc.)
   and Tailwind theme colors. No raw hex/rgb. */

.vm-page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1.5rem 1.25rem 4rem;
  color: var(--bodytext);
}

.vm-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--lightgray);
}

.vm-header__title h1 {
  font-size: 1.6rem;
  font-weight: 700;
  margin: 0;
  color: var(--title);
}

.vm-header__subtitle {
  margin: 0.25rem 0 0;
  color: var(--bodytext);
  opacity: 0.75;
  font-size: 0.9rem;
}

.vm-link {
  color: var(--primary);
  text-decoration: none;
  font-weight: 500;
}

.vm-link:hover {
  text-decoration: underline;
}

/* ── Provider status pills ─────────────────────────────────────────── */

.vm-providers {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}

.vm-provider {
  flex: 0 0 auto;
}

.vm-provider__pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  background: var(--lightbg);
  border: 1px solid var(--lightgray);
  font-size: 0.85rem;
  font-weight: 500;
}

.vm-provider__dot {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 999px;
  background: var(--lightgray);
  flex: 0 0 auto;
}

.vm-provider__pill--active .vm-provider__dot {
  background: #22c55e;
}

.vm-provider__pill--error .vm-provider__dot {
  background: #ef4444;
}

.vm-provider__pill--pending .vm-provider__dot {
  background: #f59e0b;
}

.vm-provider__state {
  text-transform: uppercase;
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  opacity: 0.75;
}

.vm-provider__usage {
  font-size: 0.75rem;
  opacity: 0.85;
  padding-left: 0.4rem;
  border-left: 1px solid rgba(255, 255, 255, 0.15);
  margin-left: 0.1rem;
}

.vm-provider__usage small {
  opacity: 0.6;
  margin-left: 0.2rem;
}

.vm-provider__refresh {
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
  padding: 0 0.25rem;
  font-size: 0.9rem;
  opacity: 0.6;
}

.vm-provider__refresh:hover {
  opacity: 1;
}

.vm-provider__loading {
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  background: var(--lightbg);
  color: var(--bodytext);
  opacity: 0.6;
  font-size: 0.85rem;
}

/* ── Section + table ───────────────────────────────────────────────── */

.vm-section {
  background: var(--lightbg);
  border: 1px solid var(--lightgray);
  border-radius: 0.75rem;
  padding: 1rem 1.25rem 1.25rem;
}

.vm-section__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}

.vm-section__head h2 {
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0;
  color: var(--title);
}

.vm-table-wrap {
  overflow-x: auto;
}

.vm-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.vm-table thead th {
  text-align: left;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--lightgray);
  font-weight: 600;
  color: var(--title);
  background: transparent;
  white-space: nowrap;
}

.vm-table tbody td {
  padding: 0.65rem 0.75rem;
  border-bottom: 1px solid var(--lightgray);
  vertical-align: middle;
}

.vm-row--inactive {
  opacity: 0.5;
}

.vm-cell-name__desc {
  font-size: 0.75rem;
  opacity: 0.7;
  margin-top: 0.15rem;
}

.vm-cell-actions {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.vm-th-actions {
  text-align: right;
}

.vm-empty {
  text-align: center;
  padding: 2rem 1rem !important;
  opacity: 0.7;
}

.vm-code {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.78rem;
  background: var(--darkbg, transparent);
  padding: 0.1rem 0.4rem;
  border-radius: 0.25rem;
  border: 1px solid var(--lightgray);
}

/* ── Status indicators inside table ──────────────────────────────── */

.vm-status {
  font-size: 0.78rem;
  font-weight: 500;
}

.vm-status--active {
  color: #16a34a;
}

.vm-status--retired {
  color: #b91c1c;
}

.vm-status--error {
  color: #b91c1c;
}

.vm-status--unknown {
  opacity: 0.5;
}

.vm-badge {
  display: inline-block;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  background: var(--primary);
  color: var(--staticWhite, #fff);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
}

/* ── Buttons ───────────────────────────────────────────────────────── */

.vm-btn {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: 1px solid transparent;
  background: transparent;
  padding: 0.4rem 0.85rem;
  border-radius: 0.5rem;
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  line-height: 1;
  transition: background 0.15s ease, border-color 0.15s ease;
  min-height: 32px;
}

.vm-btn:disabled {
  opacity: 0.5;
  cursor: wait;
}

.vm-btn--primary {
  background: var(--primary);
  color: var(--staticWhite, #fff);
}

.vm-btn--primary:hover:not(:disabled) {
  filter: brightness(1.05);
}

.vm-btn--ghost {
  border-color: var(--lightgray);
  color: var(--bodytext);
}

.vm-btn--ghost:hover:not(:disabled) {
  background: var(--lightgray);
}

.vm-btn--danger {
  border-color: #ef4444;
  color: #b91c1c;
}

.vm-btn--danger:hover:not(:disabled) {
  background: #fee2e2;
}

/* ── Modal ─────────────────────────────────────────────────────────── */

.vm-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}

.vm-modal[hidden] {
  display: none;
}

.vm-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  z-index: 1;
}

/* Force a solid color so the table behind doesn't bleed through translucent
   dark-mode CSS variables. Light/dark variants both opaque. */

.vm-modal__dialog {
  position: relative;
  z-index: 2;
  background: #1a1a1a;
  color: #f5f5f5;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0.75rem;
  padding: 1.5rem;
  width: min(560px, 92vw);
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55);
}

html:not(.dark) .vm-modal__dialog {
  background: #ffffff;
  color: #111111;
  border-color: rgba(0, 0, 0, 0.08);
}

.vm-modal__close {
  position: absolute;
  top: 0.5rem;
  right: 0.75rem;
  background: transparent;
  border: 0;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  color: var(--bodytext);
  opacity: 0.6;
}

.vm-modal__close:hover {
  opacity: 1;
}

.vm-modal__loading {
  padding: 2rem;
  text-align: center;
  opacity: 0.7;
}

/* ── Form ──────────────────────────────────────────────────────────── */

.vm-form__title {
  margin: 0 0 1rem;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--title);
}

.vm-form__row {
  margin-bottom: 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.vm-form__row--inline {
  flex-direction: row;
  gap: 1.25rem;
  align-items: center;
}

.vm-form__row label {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--title);
}

.vm-input {
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--lightgray);
  border-radius: 0.4rem;
  background: var(--lightbg);
  color: var(--bodytext);
  font-size: 0.875rem;
  min-height: 38px;
}

.vm-input--mono {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

.vm-input--range {
  padding: 0;
  min-height: 28px;
}

.vm-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  cursor: pointer;
}

.vm-form__hint {
  font-size: 0.72rem;
  opacity: 0.7;
  margin: 0;
}

.vm-form__errors,
.vm-form__row .errorlist {
  color: #b91c1c;
  font-size: 0.78rem;
  margin: 0.2rem 0 0;
  list-style: none;
  padding: 0;
}

.vm-form__actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 1rem;
  border-top: 1px solid var(--lightgray);
  padding-top: 1rem;
}

/* ── Mobile (≤ 768px = md) ─────────────────────────────────────────── */

@media (max-width: 768px) {
  .vm-page {
    padding: 1rem 0.75rem 3rem;
  }

  .vm-table {
    font-size: 0.8rem;
  }

  .vm-table thead th, .vm-table tbody td {
    padding: 0.5rem 0.5rem;
  }

  .vm-cell-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .vm-cell-actions .vm-btn {
    min-height: 44px;
  }

  /* touch target */
}

/* ── Sub-nav between bot-admin-tool and voice-management-tool ────── */

.ba-toolbar-nav {
  display: flex;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--lightgray);
  background: var(--lightbg);
}

.ba-toolbar-nav__link {
  padding: 0.4rem 0.85rem;
  border-radius: 0.4rem;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--bodytext);
  text-decoration: none;
  border: 1px solid transparent;
}

.ba-toolbar-nav__link:hover {
  background: var(--lightgray);
}

.ba-toolbar-nav__link.is-active {
  background: var(--primary);
  color: var(--staticWhite, #fff);
}

/* ── Bot edit page voice picker (used outside the management tool) ── */

.vm-voice-picker {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
}

.vm-voice-picker select {
  flex: 1 1 auto;
  min-width: 200px;
}

.vm-voice-picker__preview {
  flex: 0 0 auto;
}

/* Promo Video staff tool — sibling to bot-admin.css and voice-management.css.
   Reuses gen-video gallery classes (.gv-image-grid, .gv-grid-item,
   .gv-grid-video, .gv-grid-media, .gv-gallery-skeleton, .gv-grid-empty)
   from components/gen-video.css for the source-video grid. This file
   only adds page chrome (header, stepper, toolbar, mode table, audio
   pool, progress bar) and a few promo-specific overlays (audio badge,
   selection ring, lasso-armed cursor). */

.pv-page {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 1.5rem 1.25rem 4rem;
  color: var(--bodytext);
}

.pv-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--lightgray);
}

.pv-header__title h1 {
  font-size: 1.6rem;
  font-weight: 700;
  margin: 0;
  color: var(--title);
}

.pv-header__subtitle {
  margin: 0.25rem 0 0;
  color: var(--bodytext);
  opacity: 0.75;
  font-size: 0.9rem;
}

.pv-header__nav {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.pv-link {
  color: var(--primary);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.9rem;
}

.pv-link:hover {
  text-decoration: underline;
}

/* ── Stepper ────────────────────────────────────────────────── */

.pv-stepper {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
  flex-wrap: wrap;
}

.pv-step-btn {
  background: var(--light-bg);
  color: var(--title);
  border: 1px solid var(--lightgray);
  border-radius: 0.375rem;
  padding: 0.4rem 0.9rem;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 500;
}

.pv-step-btn.is-active {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}

.pv-step {
  display: none;
}

.pv-step.is-active {
  display: block;
}

/* ── Section card ───────────────────────────────────────────── */

.pv-section {
  background: var(--light-bg);
  border: 1px solid var(--lightgray);
  border-radius: 0.5rem;
  padding: 1.25rem;
  margin-bottom: 1.25rem;
  color: var(--bodytext);
}

.pv-section h3 {
  margin-top: 0;
  color: var(--title);
  font-size: 1.05rem;
  font-weight: 600;
  border-bottom: 1px solid var(--lightgray);
  padding-bottom: 0.5rem;
}

.pv-section h4 {
  color: var(--title);
  font-weight: 600;
  margin: 0 0 0.5rem;
}

.pv-section__footer {
  margin-top: 1rem;
  text-align: right;
}

.pv-section__footer--split {
  display: flex;
  justify-content: space-between;
}

.pv-hint {
  font-size: 0.85rem;
  color: var(--bodytext);
  opacity: 0.8;
}

/* ── Sticky filter bar (step 1) ──────────────────────────────
   Pinned at the top so the "Next: pick audio" button stays
   reachable as the lazy-loaded grid grows below it. */

.pv-sticky-bar {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--light-bg);
  margin: -1.25rem -1.25rem 0;
  padding: 1.25rem 1.25rem 0.75rem;
  border-bottom: 1px solid var(--lightgray);
  margin-bottom: 1rem;
}

.pv-sticky-bar h3 {
  margin-top: 0;
}

/* ── Toolbar ────────────────────────────────────────────────── */

.pv-toolbar {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 0.75rem;
}

.pv-toolbar .pv-count {
  margin-left: auto;
  font-weight: 600;
  color: var(--primary);
}

.pv-toolbar .pv-count.over {
  color: #c1272d;
}

.pv-toolbar .pv-count.warn {
  color: #b85;
}

.pv-label {
  color: var(--title);
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.pv-input,
.pv-select {
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--lightgray);
  border-radius: 0.375rem;
  background: #fff;
  color: var(--title);
  font-size: 0.9rem;
  min-width: 11rem;
}

:root.dark .pv-input,
:root.dark .pv-select,
.dark .pv-input,
.dark .pv-select {
  background: #1a1a1a;
  color: #e7e7e8;
  border-color: #2a2a2a;
}

/* ── Buttons ────────────────────────────────────────────────── */

.pv-btn {
  padding: 0.5rem 1rem;
  border-radius: 0.375rem;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none;
  display: inline-block;
  line-height: 1.2;
}

.pv-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.pv-btn--primary {
  background: var(--primary);
  color: #fff;
  border: 1px solid var(--primary);
}

.pv-btn--primary:hover {
  opacity: 0.9;
}

.pv-btn--secondary {
  background: var(--light-bg);
  color: var(--title);
  border: 1px solid var(--lightgray);
}

.pv-btn--secondary:hover {
  background: var(--lightgraycolor);
}

.pv-btn--danger {
  background: #c1272d;
  color: #fff;
  border: 1px solid #c1272d;
}

.pv-btn--danger:hover {
  opacity: 0.9;
}

/* ── Source-video grid: lean on .gv-image-grid + .gv-grid-item from
      gen-video.css. Only add the bits the gallery doesn't have:
      lasso-armed cursor, selected ring, audio badge, meta strip. */

.pv-source-grid.lasso-armed {
  cursor: crosshair;
}

.gv-grid-item.is-selected {
  box-shadow: 0 0 0 2px var(--primary), inset 0 0 0 2px var(--primary);
  border-radius: 0.375rem;
}

.pv-tile-meta {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to top, rgba(0,0,0,.75), transparent);
  color: #fff;
  font-size: 0.72rem;
  padding: 0.25rem 0.4rem;
  pointer-events: none;
  z-index: 3;
}

.pv-tile-audio {
  position: absolute;
  top: 0.4rem;
  right: 0.4rem;
  background: rgba(0,0,0,.6);
  color: #fff;
  font-size: 0.7rem;
  padding: 0.1rem 0.4rem;
  border-radius: 0.25rem;
  pointer-events: none;
  z-index: 3;
}

.pv-tile-no-audio {
  background: rgba(120,120,120,.6);
}

/* Selection-order badge (top-left, opposite the audio badge). */

.pv-order-badge {
  position: absolute;
  top: 0.4rem;
  left: 0.4rem;
  min-width: 1.4rem;
  height: 1.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--primary);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
  border-radius: 999px;
  padding: 0 0.35rem;
  pointer-events: none;
  z-index: 4;
  box-shadow: 0 1px 3px rgba(0,0,0,.4);
}

/* ── Multi-select transitions (reuses the radio-group look) ──── */

.pv-checkbox-group {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.pv-checkbox-group label {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.6rem;
  border: 1px solid var(--lightgray);
  border-radius: 0.375rem;
  background: var(--light-bg);
  cursor: pointer;
}

:root.dark .pv-checkbox-group label,
.dark .pv-checkbox-group label {
  background: #1a1a1a;
  color: #e7e7e8;
  border-color: #2a2a2a;
}

/* ── Audio playlist (ordered, draggable) ────────────────────── */

.pv-track-list {
  list-style: none;
  margin: 0.5rem 0 1rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  max-width: 540px;
}

.pv-track-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--lightgray);
  border-radius: 0.375rem;
  background: var(--light-bg);
}

:root.dark .pv-track-item,
.dark .pv-track-item {
  background: #1a1a1a;
  border-color: #2a2a2a;
}

.pv-track-handle {
  cursor: grab;
  color: var(--bodytext);
  opacity: 0.6;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.pv-track-label {
  flex: 1;
  font-size: 0.9rem;
}

.pv-track-remove {
  border: 1px solid var(--lightgray);
  background: transparent;
  color: #c1272d;
  border-radius: 0.25rem;
  padding: 0 0.4rem;
  cursor: pointer;
}

/* ── Per-clip audio mode table ──────────────────────────────── */

.pv-mode-table {
  width: 100%;
  border-collapse: collapse;
  color: var(--bodytext);
  font-size: 0.9rem;
}

.pv-mode-table th, .pv-mode-table td {
  border: 1px solid var(--lightgray);
  padding: 0.5rem;
  text-align: left;
}

.pv-mode-table th {
  background: var(--lightgraycolor);
  color: var(--title);
  font-weight: 600;
}

.pv-mode-handle {
  cursor: grab;
  color: var(--bodytext);
  opacity: 0.6;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  font-size: 1.1rem;
}

.pv-mode-order {
  font-weight: 600;
  text-align: center;
}

.pv-mode-delete {
  border: 1px solid var(--lightgray);
  background: transparent;
  color: #c1272d;
  border-radius: 0.25rem;
  padding: 0.1rem 0.4rem;
  cursor: pointer;
  font-size: 0.95rem;
}

.pv-mode-table tr.sortable-ghost {
  opacity: 0.4;
}

.pv-mode-thumb {
  width: 60px;
  height: 100px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 0.25rem;
  background: #000;
}

/* ── Radio group ───────────────────────────────────────────── */

.pv-radio-group {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.pv-radio-group label {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.6rem;
  background: #fff;
  color: var(--title);
  border: 1px solid var(--lightgray);
  border-radius: 0.25rem;
  cursor: pointer;
  font-size: 0.85rem;
}

:root.dark .pv-radio-group label,
.dark .pv-radio-group label {
  background: #1a1a1a;
  color: #e7e7e8;
  border-color: #2a2a2a;
}

/* ── Progress bar ──────────────────────────────────────────── */

.pv-progress {
  background: var(--lightgraycolor);
  border-radius: 0.25rem;
  overflow: hidden;
  height: 1.4rem;
  margin: 0.75rem 0;
}

.pv-progress-bar {
  background: var(--primary);
  color: #fff;
  height: 100%;
  line-height: 1.4rem;
  padding-left: 0.5rem;
  transition: width 0.3s ease;
  font-size: 0.85rem;
  white-space: nowrap;
}

.pv-result-video {
  max-width: 360px;
  aspect-ratio: 9 / 16;
  background: #000;
  border-radius: 0.5rem;
}

.pv-error {
  background: #fdecea;
  border: 1px solid #c1272d;
  color: #7a1a1f;
  padding: 0.75rem;
  border-radius: 0.375rem;
  margin: 0.75rem 0;
}

/* ── Promo pool grid ───────────────────────────────────────── */

.ppool-page {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 1.5rem 1.25rem 4rem;
  color: var(--bodytext);
}

.ppool-toolbar {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

.ppool-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.875rem;
}

.ppool-tile {
  background: var(--light-bg);
  color: var(--bodytext);
  border: 1px solid var(--lightgray);
  border-radius: 0.5rem;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.ppool-tile.is-selected {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px var(--primary);
}

.ppool-tile video {
  width: 100%;
  aspect-ratio: 9 / 16;
  -o-object-fit: cover;
     object-fit: cover;
  background: #000;
  cursor: pointer;
}

.ppool-placeholder {
  width: 100%;
  aspect-ratio: 9 / 16;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1rem;
  text-align: center;
  cursor: pointer;
  background: #1a1a1a;
  color: #ccc;
}

.ppool-placeholder--failed {
  background: #2a1010;
  color: #ff8a8a;
}

.ppool-placeholder--pending {
  background: #1a1a2a;
  color: #cfd2ff;
}

.ppool-placeholder--processing {
  background: #1a201a;
  color: #b8e3b8;
}

.ppool-placeholder__label {
  font-weight: 600;
  font-size: 0.9rem;
}

.ppool-placeholder__msg {
  font-size: 0.75rem;
  opacity: 0.85;
  word-break: break-word;
}

.ppool-tile-meta {
  padding: 0.5rem 0.625rem;
  font-size: 0.85rem;
  color: var(--title);
}

.ppool-tile-meta strong {
  color: var(--title);
}

.ppool-tile-actions {
  padding: 0.4rem 0.625rem 0.625rem;
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.ppool-tile-actions button,
.ppool-tile-actions a {
  padding: 0.25rem 0.625rem;
  font-size: 0.8rem;
  border-radius: 0.25rem;
  cursor: pointer;
  border: 1px solid var(--lightgray);
  background: #fff;
  color: var(--title);
  text-decoration: none;
}

:root.dark .ppool-tile-actions button,
:root.dark .ppool-tile-actions a,
.dark .ppool-tile-actions button,
.dark .ppool-tile-actions a {
  background: #1a1a1a;
  color: #e7e7e8;
  border-color: #2a2a2a;
}

.ppool-tile-actions .ppool-publish {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}

.ppool-tile-actions .ppool-delete {
  background: #c1272d;
  color: #fff;
  border-color: #c1272d;
}

.ppool-tile-actions button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.ppool-status {
  display: inline-block;
  padding: 1px 0.5rem;
  border-radius: 0.625rem;
  font-size: 0.7rem;
  font-weight: 600;
}

.ppool-status.pending, .ppool-status.processing {
  background: #ffe9b3;
  color: #5a3d00;
}

.ppool-status.review {
  background: #d8eaff;
  color: #0f2244;
}

.ppool-status.approved {
  background: #d4edda;
  color: #155724;
}

.ppool-status.failed, .ppool-status.rejected {
  background: #f8d7da;
  color: #721c24;
}

.ppool-progress {
  margin: 0.4rem 0;
  height: 0.375rem;
  background: var(--lightgraycolor);
  border-radius: 0.2rem;
  overflow: hidden;
}

.ppool-progress-bar {
  height: 100%;
  background: var(--primary);
  transition: width 0.3s;
}

.ppool-empty {
  text-align: center;
  color: var(--bodytext);
  padding: 3rem;
  font-style: italic;
}

/* ── Audio pool ────────────────────────────────────────────── */

.audio-page {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 1.5rem 1.25rem 4rem;
  color: var(--bodytext);
}

.audio-toolbar {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  flex-wrap: wrap;
  padding: 1rem;
  background: var(--light-bg);
  border: 1px solid var(--lightgray);
  border-radius: 0.5rem;
  margin-bottom: 1rem;
  color: var(--title);
}

.audio-table {
  width: 100%;
  border-collapse: collapse;
  color: var(--bodytext);
  font-size: 0.9rem;
}

.audio-table th, .audio-table td {
  padding: 0.6rem 0.75rem;
  border-bottom: 1px solid var(--lightgray);
  text-align: left;
  vertical-align: middle;
}

.audio-table th {
  background: var(--lightgraycolor);
  color: var(--title);
  font-weight: 600;
}

.audio-table audio {
  width: 280px;
}

.audio-actions button {
  padding: 0.25rem 0.75rem;
  font-size: 0.85rem;
  border: 1px solid #c1272d;
  background: #fff;
  color: #c1272d;
  border-radius: 0.25rem;
  cursor: pointer;
}

.audio-actions button:hover {
  background: #c1272d;
  color: #fff;
}

.audio-empty {
  text-align: center;
  padding: 2.5rem;
  color: var(--bodytext);
  font-style: italic;
}

.audio-upload-progress {
  font-size: 0.85rem;
  color: var(--bodytext);
}

.audio-upload-progress.error {
  color: #c1272d;
}

.audio-upload-progress.ok {
  color: var(--primary);
}

kbd {
  background: var(--lightgraycolor);
  border: 1px solid var(--lightgray);
  border-radius: 0.2rem;
  padding: 0.05rem 0.35rem;
  font-size: 0.85em;
  color: var(--title);
}

/* ── SFX column in the builder ───────────────────────────────────── */

.pv-sfx-cell {
  white-space: nowrap;
}

.pv-sfx-cell select {
  max-width: 220px;
}

.pv-sfx-remove {
  margin-left: 6px;
  padding: 0.1rem 0.5rem;
  font-size: 0.95rem;
  line-height: 1;
  border: 1px solid var(--lightgray);
  background: transparent;
  color: var(--bodytext);
  border-radius: 0.25rem;
  cursor: pointer;
}

.pv-sfx-remove:hover {
  border-color: var(--primary);
  color: var(--primary);
}

/* SFX-library row inline-edit feedback */

.audio-table input[type=text],
.audio-table input[type=number] {
  padding: 0.2rem 0.4rem;
  border: 1px solid var(--lightgray);
  border-radius: 0.25rem;
  background: var(--lightbg);
  color: var(--title);
  width: 140px;
}

.audio-table .field-saved {
  outline: 2px solid var(--primary);
}

.audio-table .field-error {
  outline: 2px solid #c1272d;
}

/* ── Promo-pool: Edit SFX modal ──────────────────────────────────── */

.ppool-edit-sfx {
  padding: 0.25rem 0.75rem;
  font-size: 0.85rem;
  border: 1px solid var(--lightgray);
  background: transparent;
  color: var(--title);
  border-radius: 0.25rem;
  cursor: pointer;
}

.ppool-edit-sfx:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.ppool-sfx-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.ppool-sfx-modal {
  background: var(--lightbg);
  color: var(--title);
  border-radius: 0.5rem;
  width: min(720px, 92vw);
  max-height: 86vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.ppool-sfx-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--lightgray);
}

.ppool-sfx-modal__header h3 {
  margin: 0;
  font-size: 1.05rem;
}

.ppool-sfx-close {
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 1.1rem;
  color: var(--bodytext);
}

.ppool-sfx-modal__body {
  padding: 0.85rem 1rem;
  overflow: auto;
}

.ppool-sfx-modal__footer {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
  padding: 0.75rem 1rem;
  border-top: 1px solid var(--lightgray);
}

.ppool-sfx-list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.ppool-sfx-row {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  padding: 0.5rem;
  border: 1px solid var(--lightgray);
  border-radius: 0.35rem;
}

.ppool-sfx-row__left {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 200px;
}

.ppool-sfx-row__left img {
  width: 56px;
  height: 96px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 0.25rem;
  background: var(--lightgraycolor);
}

.ppool-sfx-row__scene {
  font-size: 0.85rem;
  color: var(--bodytext);
}

.ppool-sfx-row__right {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  flex: 1;
}

.ppool-sfx-row__played {
  font-size: 0.9rem;
  flex-basis: 100%;
}

.ppool-sfx-row__remove {
  padding: 0.2rem 0.55rem;
  font-size: 0.85rem;
  border: 1px solid var(--lightgray);
  background: transparent;
  color: var(--bodytext);
  border-radius: 0.25rem;
  cursor: pointer;
}

.ppool-sfx-row__remove:hover:not(:disabled) {
  border-color: var(--primary);
  color: var(--primary);
}

.ppool-sfx-row__remove:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.ppool-sfx-error {
  color: #c1272d;
}

/* PostHog analytics overlay — staff-only heatmap badges on tracked elements */

/* Badge styles inside @layer so they integrate with Tailwind component order */

/*
 * Floating panel — outside @layer so Tailwind never purges it.
 * These classes are created dynamically by posthog-overlay.js.
 */

.ph-panel {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 9999;
  width: 320px;
  background: hsl(var(--static-black) / 0.92);
  color: hsl(var(--static-white));
  border-radius: 12px;
  padding: 16px;
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
  font-size: 13px;
  font-weight: 400;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  display: none;
  font-family: 'Satoshi', sans-serif;
}

body.posthog-overlay-active .ph-panel {
  display: block;
}

.ph-panel-title {
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ph-panel-title svg {
  width: 16px;
  height: 16px;
  stroke: hsl(var(--static-white));
  opacity: 0.5;
}

.ph-panel-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.ph-panel-label {
  font-size: 12px;
  opacity: 0.7;
  flex-shrink: 0;
}

.ph-panel-select,
.ph-panel-input {
  background: hsl(var(--static-white) / 0.1);
  color: hsl(var(--static-white));
  border: 1px solid hsl(var(--static-white) / 0.15);
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 12px;
  font-family: 'Satoshi', sans-serif;
  outline: none;
}

.ph-panel-select:focus,
.ph-panel-input:focus {
  border-color: var(--primary, #FA3D72);
}

.ph-panel-input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1);
  cursor: pointer;
}

.ph-panel-select option {
  background: #1c1c1c;
  color: #fff;
}

.ph-panel-divider {
  border: none;
  border-top: 1px solid hsl(var(--static-white) / 0.1);
  margin: 10px 0;
}

.ph-panel-stat {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  margin-bottom: 4px;
}

.ph-panel-stat-value {
  font-weight: 700;
  color: var(--primary, #FA3D72);
}

.ph-panel-btn {
  width: 100%;
  padding: 6px 12px;
  background: var(--primary, #FA3D72);
  color: hsl(var(--static-white));
  border: none;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  font-family: 'Satoshi', sans-serif;
  cursor: pointer;
  margin-top: 6px;
  transition: opacity 0.2s;
}

.ph-panel-btn:hover {
  opacity: 0.85;
}

.ph-panel-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.ph-panel-loading {
  text-align: center;
  padding: 8px 0;
  font-size: 12px;
  opacity: 0.6;
}

/* ── PostHog Analytics Dashboard ─────────────────────────────────────
 * Two-pane layout (left: filter sidebar, right: results table).
 * Staff-only page at /analytics/
 */

.phd-page {
  padding: 32px 24px 96px;
  width: 100%;
  max-width: none;
  margin: 0;
}

.phd-page__header {
  margin-bottom: 20px;
}

.phd-page__title {
  font-size: 28px;
  font-weight: 700;
  margin: 0;
}

.phd-page__subtitle {
  margin: 4px 0 0;
  color: var(--bodytext, #6b6b6b);
  font-size: 14px;
}

.phd-layout {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 20px;
  min-height: calc(100vh - 240px);
  width: 100%;
}

@media (max-width: 991px) {
  .phd-layout {
    grid-template-columns: 1fr;
  }
}

/* ── Filter sidebar ─────────────────────────────────────────────── */

.phd-filters {
  background: var(--ba-panel-bg, #fff);
  border: 1px solid var(--chat-border, #e5e5e5);
  border-radius: 12px;
  padding: 16px;
  position: sticky;
  top: 80px;
  align-self: start;
  max-height: calc(100vh - 100px);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.phd-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.phd-label {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--bodytext, #6b6b6b);
}

.phd-hint {
  font-size: 11px;
  color: var(--graycolor, #aaa);
}

.phd-divider {
  border: none;
  border-top: 1px solid var(--chat-border, #e5e5e5);
  margin: 4px 0;
}

/* Pills (date range) */

.phd-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.phd-pill {
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid var(--chat-border, #e5e5e5);
  background: transparent;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
}

.phd-pill:hover {
  background: rgba(0, 0, 0, 0.04);
}

.phd-pill.is-active {
  background: rgba(250, 61, 114, 0.12);
  border-color: var(--primary, #FA3D72);
  color: var(--primary, #FA3D72);
  font-weight: 600;
}

/* Custom date range inputs */

.phd-date-custom {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
}

.phd-date-sep {
  font-size: 12px;
  color: var(--graycolor, #aaa);
}

/* Inputs & selects */

.phd-input,
.phd-select,
.phd-textarea {
  padding: 6px 10px;
  border: 1px solid var(--chat-border, #e5e5e5);
  border-radius: 8px;
  font-size: 13px;
  background: var(--ba-panel-bg, #fff);
  color: inherit;
  width: 100%;
  box-sizing: border-box;
}

.phd-input:focus,
.phd-select:focus,
.phd-textarea:focus {
  outline: none;
  border-color: var(--primary, #FA3D72);
  box-shadow: 0 0 0 2px rgba(250, 61, 114, 0.15);
}

.phd-input--sm,
.phd-select--sm {
  padding: 4px 6px;
  font-size: 12px;
  width: auto;
  flex: 1;
}

.phd-textarea {
  resize: vertical;
  font-family: monospace;
  font-size: 12px;
}

/* Checkboxes */

.phd-checkboxes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
}

.phd-checkbox-label {
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}

/* Property filter rows */

.phd-prop-row {
  display: flex;
  gap: 4px;
  align-items: center;
  margin-bottom: 4px;
}

/* Buttons */

.phd-btn {
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid var(--chat-border, #e5e5e5);
  background: transparent;
  font-size: 13px;
  cursor: pointer;
  transition: background 120ms ease;
}

.phd-btn:hover {
  background: rgba(0, 0, 0, 0.04);
}

.phd-btn--primary {
  background: var(--primary, #FA3D72);
  color: #fff;
  border-color: var(--primary, #FA3D72);
  font-weight: 600;
}

.phd-btn--primary:hover {
  background: #e0355f;
}

.phd-btn--primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.phd-btn--sm {
  padding: 3px 8px;
  font-size: 12px;
}

.phd-btn--danger {
  color: #e74c3c;
  border-color: #e74c3c;
}

.phd-btn--danger:hover {
  background: rgba(231, 76, 60, 0.08);
}

/* ── Results area ───────────────────────────────────────────────── */

.phd-results {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  flex: 1;
}

.phd-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--bodytext, #6b6b6b);
  padding: 8px 12px;
  background: var(--ba-panel-bg, #fff);
  border: 1px solid var(--chat-border, #e5e5e5);
  border-radius: 8px;
}

.phd-summary-sep {
  color: var(--graycolor, #aaa);
}

.phd-ml-auto {
  margin-left: auto;
}

/* Query preview */

.phd-query-pre {
  background: var(--dark-bg, #1c1c1c);
  color: #e0e0e0;
  padding: 12px;
  border-radius: 8px;
  font-size: 12px;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-word;
}

/* Loading */

.phd-loading {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 24px;
  justify-content: center;
  font-size: 14px;
  color: var(--bodytext, #6b6b6b);
}

.phd-spinner {
  width: 20px;
  height: 20px;
  border: 3px solid var(--chat-border, #e5e5e5);
  border-top-color: var(--primary, #FA3D72);
  border-radius: 50%;
  animation: phd-spin 0.7s linear infinite;
}

@keyframes phd-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Alerts */

.phd-alert {
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 13px;
}

.phd-alert--warn {
  background: rgba(255, 200, 89, 0.15);
  border: 1px solid var(--warning-light, #FFC859);
  color: #8a6d00;
}

.phd-alert--error {
  background: rgba(231, 76, 60, 0.1);
  border: 1px solid #e74c3c;
  color: #c0392b;
}

.phd-placeholder {
  padding: 40px 20px;
  text-align: center;
  color: var(--bodytext, #9a9a9a);
  font-size: 14px;
}

/* ── Data table ─────────────────────────────────────────────────── */

.phd-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--chat-border, #e5e5e5);
  border-radius: 10px;
  background: var(--ba-panel-bg, #fff);
}

.phd-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.phd-th {
  position: sticky;
  top: 0;
  background: var(--light-bg, #f2f3f5);
  padding: 8px 12px;
  text-align: left;
  font-weight: 600;
  font-size: 12px;
  white-space: nowrap;
  border-bottom: 2px solid var(--chat-border, #e5e5e5);
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.phd-th:hover {
  background: #e8e9eb;
}

.phd-td {
  padding: 6px 12px;
  border-bottom: 1px solid var(--chat-border, #e5e5e5);
  white-space: nowrap;
}

.phd-table tbody tr:hover {
  background: rgba(0, 0, 0, 0.02);
}

.phd-table tbody tr:last-child .phd-td {
  border-bottom: none;
}

/* ── Tabs ───────────────────────────────────────────────────────── */

.phd-tabs {
  display: flex;
  gap: 0;
  margin-bottom: 20px;
  border-bottom: 2px solid var(--chat-border, #e5e5e5);
}

.phd-tab {
  padding: 10px 24px;
  border: none;
  background: none;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  color: var(--bodytext, #6b6b6b);
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: color 120ms ease, border-color 120ms ease;
}

.phd-tab:hover {
  color: var(--primary, #FA3D72);
}

.phd-tab.is-active {
  color: var(--primary, #FA3D72);
  border-bottom-color: var(--primary, #FA3D72);
  font-weight: 600;
}

.phd-tab-panel {
  display: none;
}

.phd-tab-panel.is-active {
  display: block;
}

/* ── Modal Analyzer ─────────────────────────────────────────────── */

.phd-modal-controls {
  display: flex;
  gap: 16px;
  align-items: flex-end;
  flex-wrap: wrap;
  margin-bottom: 20px;
  padding: 16px;
  background: var(--ba-panel-bg, #fff);
  border: 1px solid var(--chat-border, #e5e5e5);
  border-radius: 12px;
}

.phd-modal-controls .phd-field {
  min-width: 160px;
}

.phd-modal-controls .phd-select {
  min-width: 200px;
}

/* Modal visual card */

.phd-modal-card {
  background: var(--ba-panel-bg, #fff);
  border: 1px solid var(--chat-border, #e5e5e5);
  border-radius: 12px;
  overflow: hidden;
  flex: 1;
  min-width: 0;
}

.phd-modal-card__header {
  padding: 20px 24px;
  border-bottom: 1px solid var(--chat-border, #e5e5e5);
}

.phd-modal-card__title {
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 6px;
}

.phd-modal-card__meta {
  display: flex;
  gap: 16px;
  align-items: center;
  font-size: 13px;
}

.phd-modal-card__shown {
  font-weight: 600;
  color: var(--primary, #FA3D72);
  font-size: 16px;
}

.phd-modal-card__event {
  color: var(--bodytext, #6b6b6b);
  font-family: monospace;
  font-size: 12px;
}

/* Bar chart rows */

.phd-modal-card__bars {
  padding: 20px 24px;
}

.phd-bar-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.phd-bar-label {
  width: 180px;
  flex-shrink: 0;
  font-size: 13px;
  font-weight: 500;
  text-align: right;
}

.phd-bar-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
}

.phd-bar {
  height: 28px;
  border-radius: 6px;
  transition: width 400ms ease;
  min-width: 4px;
}

.phd-bar--action {
  background: var(--primary, #FA3D72);
}

.phd-bar--noaction {
  background: var(--graycolor, #aaa);
  opacity: 0.5;
}

.phd-bar-stat {
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}

/* Event details */

.phd-modal-card__details {
  padding: 12px 24px 20px;
  border-top: 1px solid var(--chat-border, #e5e5e5);
}

/* ── Modal results row (preview + card side by side) ────────────── */

.phd-modal-row {
  display: flex;
  gap: 24px;
  align-items: flex-start;
}

@media (max-width: 991px) {
  .phd-modal-row {
    flex-direction: column;
  }
}

/* ── Wireframe preview ──────────────────────────────────────────── */

.phd-preview {
  flex-shrink: 0;
  width: 340px;
}

.phd-preview__inner {
  position: relative;
  border: 1px solid rgba(250, 61, 114, 0.3);
  border-radius: 16px;
  padding: 28px 20px 20px;
  background: linear-gradient(135deg, rgba(250, 61, 114, 0.06), rgba(136, 12, 131, 0.06));
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.phd-preview__close {
  position: absolute;
  top: 10px;
  right: 14px;
  font-size: 20px;
  color: var(--graycolor, #aaa);
  cursor: default;
  line-height: 1;
}

.phd-preview__title {
  font-size: 17px;
  font-weight: 700;
  text-align: center;
  line-height: 1.3;
}

.phd-preview__meta {
  display: flex;
  justify-content: center;
  gap: 10px;
  align-items: center;
}

.phd-preview__price {
  font-size: 18px;
  font-weight: 700;
  color: var(--primary, #FA3D72);
}

.phd-preview__timer {
  font-size: 13px;
  font-weight: 600;
  background: rgba(250, 61, 114, 0.12);
  padding: 2px 8px;
  border-radius: 4px;
  color: var(--primary, #FA3D72);
}

.phd-preview__subtitle {
  font-size: 12px;
  text-align: center;
  color: var(--bodytext, #6b6b6b);
  line-height: 1.4;
}

.phd-preview__benefits {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 10px;
  background: rgba(255, 186, 47, 0.08);
  border-radius: 8px;
}

.phd-preview__benefit {
  font-size: 12px;
  font-weight: 500;
  color: #b8860b;
}

.phd-preview__benefit::before {
  content: "\2713 ";
  color: #b8860b;
}

.phd-preview__btn {
  position: relative;
  text-align: center;
  padding: 10px 16px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  cursor: default;
}

.phd-preview__btn--primary {
  background: var(--primary, #FA3D72);
  color: #fff;
}

.phd-preview__btn--secondary {
  background: transparent;
  border: 1px solid var(--chat-border, #e5e5e5);
  color: var(--bodytext, #6b6b6b);
  font-size: 12px;
}

.phd-preview__btn-pct {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 11px;
  font-weight: 700;
  background: rgba(0, 0, 0, 0.3);
  color: #fff;
  padding: 2px 6px;
  border-radius: 4px;
}

.phd-preview__btn--secondary .phd-preview__btn-pct {
  background: rgba(0, 0, 0, 0.15);
  color: inherit;
}

.phd-preview__footer {
  font-size: 10px;
  text-align: center;
  color: var(--graycolor, #aaa);
}

/* ── Dark mode for preview ──────────────────────────────────────── */

.dark .phd-preview__inner {
  background: linear-gradient(135deg, rgba(250, 61, 114, 0.08), rgba(136, 12, 131, 0.08));
  border-color: rgba(250, 61, 114, 0.2);
}

.dark .phd-preview__benefit {
  color: #e6b800;
}

.dark .phd-preview__benefit::before {
  color: #e6b800;
}

.dark .phd-preview__benefits {
  background: rgba(255, 186, 47, 0.06);
}

.dark .phd-preview__btn--secondary {
  border-color: rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.6);
}

/* ── Dark mode ──────────────────────────────────────────────────── */

.dark .phd-filters,
.dark .phd-summary,
.dark .phd-table-wrap {
  background: var(--background-dark, #000206);
  border-color: rgba(255, 255, 255, 0.1);
}

.dark .phd-pill {
  border-color: rgba(255, 255, 255, 0.15);
}

.dark .phd-pill:hover {
  background: rgba(255, 255, 255, 0.06);
}

.dark .phd-pill.is-active {
  background: rgba(250, 61, 114, 0.2);
}

.dark .phd-input,
.dark .phd-select,
.dark .phd-textarea {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
  color: #e0e0e0;
}

.dark .phd-btn {
  border-color: rgba(255, 255, 255, 0.15);
}

.dark .phd-btn:hover {
  background: rgba(255, 255, 255, 0.06);
}

.dark .phd-th {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
}

.dark .phd-th:hover {
  background: rgba(255, 255, 255, 0.08);
}

.dark .phd-td {
  border-color: rgba(255, 255, 255, 0.06);
}

.dark .phd-table tbody tr:hover {
  background: rgba(255, 255, 255, 0.03);
}

.dark .phd-alert--warn {
  background: rgba(255, 200, 89, 0.1);
  color: #FFC859;
}

.dark .phd-alert--error {
  background: rgba(231, 76, 60, 0.1);
  color: #e74c3c;
}

.dark .phd-divider {
  border-color: rgba(255, 255, 255, 0.08);
}

.dark .phd-tabs {
  border-color: rgba(255, 255, 255, 0.1);
}

.dark .phd-modal-controls,
.dark .phd-modal-card {
  background: var(--background-dark, #000206);
  border-color: rgba(255, 255, 255, 0.1);
}

.dark .phd-modal-card__header {
  border-color: rgba(255, 255, 255, 0.08);
}

.dark .phd-modal-card__details {
  border-color: rgba(255, 255, 255, 0.08);
}

/* === Top Honeybots Accordion Gallery === */

/*
 * Slow ambient shimmer for skeleton state. Sits as a ::before underneath
 * the thumbnail <img> on every card (desktop panel + mobile card). 4.5s
 * cycle is slow enough to read as ambient movement, not "loading…". 4%
 * white highlight ≈ 5% perceived contrast on the dark base.
 *
 * Once the <img> decodes it covers the pseudo-element via object-fit:cover,
 * so the shimmer continues running invisibly at near-zero cost (transform
 * animations are GPU-composited, no paint).
 */

@keyframes thb-skeleton-shimmer {
  0%   {
    transform: translateX(-100%);
  }

  100% {
    transform: translateX(100%);
  }
}

/* Desktop Accordion — fixed height, contain prevents CLS on hover */

.top-honeybots-accordion {
  display: flex;
  gap: 5px;
  height: 400px;
  overflow: hidden;
  border-radius: 16px;
  box-shadow: 0 0 10px rgba(225, 24, 217, 0.2),
                0 0 20px rgba(225, 24, 217, 0.1),
                0 0 6px rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(235, 130, 230, 0.18);
  contain: strict;
  content-visibility: auto;
  contain-intrinsic-size: auto 400px;
}

.thb-panel {
  flex: 0.45 1 0%;
  min-width: 0;
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  transition: flex 0.45s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: flex;
  contain: layout style paint;
  /* Skeleton base — dark brand-tinted gradient. Reads as intentional
       composition during the brief window before the thumbnail <img>
       loads. The ::before below adds a slow shimmer band on top. */
  background: linear-gradient(160deg, #1a0d24 0%, #2d1438 50%, #1a0d24 100%);
}

.thb-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
        110deg,
        transparent 0%,
        transparent 40%,
        rgba(255, 255, 255, 0.04) 50%,
        transparent 60%,
        transparent 100%
    );
  transform: translateX(-100%);
  animation: thb-skeleton-shimmer 4.5s linear infinite;
  pointer-events: none;
}

.thb-panel--active {
  flex: 3.5 1 0%;
}

/* Collapsed thumbnail (9:16 portrait) — visible when collapsed */

.thb-panel__thumb-collapsed {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center top;
     object-position: center top;
  filter: brightness(0.4);
  transition: opacity 0.4s ease;
}

.thb-panel--active .thb-panel__thumb-collapsed {
  opacity: 0;
}

/* Expanded thumbnail (16:9 landscape) — visible when expanded, stays under video */

.thb-panel__thumb-expanded {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center top;
     object-position: center top;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.thb-panel--active .thb-panel__thumb-expanded {
  opacity: 1;
}

/* Video layer — fades in on top of expanded thumbnail */

.thb-panel__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center top;
     object-position: center top;
  opacity: 0;
  transition: opacity 0.4s ease;
}

/* Dark gradient overlay */

.thb-panel__overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 25%;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.85));
  z-index: 1;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

/* Sound button */

.thb-panel__sound-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, #FF36F7, #FFBA2F);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  border-radius: 50%;
  display: none;
  align-items: center;
  justify-content: center;
  border: none;
  color: #fff;
  z-index: 5;
  cursor: pointer;
  transition: opacity 0.2s ease;
  padding: 0;
}

.thb-panel__sound-btn:hover {
  opacity: 0.85;
}

/* Sound wave bar animation */

@keyframes thb-wave-bounce {
  0%, 100% {
    transform: scaleY(1);
  }

  50% {
    transform: scaleY(0.4);
  }
}

.thb-wave-bar {
  transform-origin: center;
  animation: thb-wave-bounce 0.8s ease-in-out infinite;
}

.thb-panel--active .thb-panel__sound-btn {
  display: flex;
  opacity: 0.85;
}

/* Click link overlay */

.thb-panel__link {
  position: absolute;
  inset: 0;
  z-index: 3;
}

/* === Expanded panel info === */

.thb-panel__info-expanded {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20px 16px;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  gap: 10px;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.thb-panel--active .thb-panel__info-expanded {
  opacity: 1;
  visibility: visible;
}

.thb-panel__rank-expanded {
  font-size: 74px;
  font-weight: 900;
  line-height: 0.8;
  font-style: italic;
  background: linear-gradient(135deg, #FF36F7, #FFBA2F);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  opacity: 0.25;
}

.thb-panel__name-expanded {
  color: #fff;
  font-size: 16px;
  font-weight: 700;
}

.thb-panel__favs {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 2px;
  font-size: 11px;
  font-weight: 600;
}

/* Tagline CTA — delayed fade-in when video plays */

.thb-panel__tagline {
  margin-left: auto;
  color: rgba(255, 255, 255, 0.7);
  font-size: 13px;
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0.3px;
  opacity: 0;
  transition: opacity 0.6s ease;
  padding-bottom: 4px;
}

.thb-panel__tagline--visible {
  opacity: 1;
}

/* === Collapsed panel info === */

.thb-panel__info-collapsed {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 12px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  z-index: 2;
  pointer-events: none;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.thb-panel--active .thb-panel__info-collapsed {
  opacity: 0;
  visibility: hidden;
}

.thb-panel__rank-collapsed {
  font-size: 36px;
  font-weight: 900;
  line-height: 1;
  font-style: italic;
  background: linear-gradient(135deg, #FF36F7, #FFBA2F);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  opacity: 0.8;
}

.thb-panel__name-collapsed {
  color: rgba(255, 255, 255, 0.6);
  font-size: 10px;
  font-weight: 600;
  writing-mode: vertical-lr;
  transform: rotate(180deg);
  max-height: 80px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  letter-spacing: 1px;
}

/* === Mobile Carousel === */

/*
 * 9:16 portrait cards. All cards autoplay (muted) when scrolled into view via
 * IntersectionObserver. The active state is a tap-driven affordance:
 *   - 1st tap → mark card --active (sound button appears top-right;
 *               unmutes if global sound is on)
 *   - 2nd tap on active card → navigate to chat (.thb-mobile-card__link is
 *               only clickable while --active)
 */

.thb-mobile-card {
  width: 175px;
  aspect-ratio: 9/16;
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  display: block;
  flex-shrink: 0;
  cursor: pointer;
  /* Active state telegraphs "stage 1 → tap again to chat" via a brand ring +
       subtle outer glow. Box-shadow is a 1px gradient mimic (used because
       border eats into the 175px width and shifts layout). */
  box-shadow: 0 0 0 0 rgba(255, 54, 247, 0);
  transition: box-shadow 0.25s ease;
  /* Skeleton base — dark brand-tinted gradient + slow shimmer via ::before.
       Fills the card while the lazy thumbnail <img> is fetching (typical
       200-800ms on first visit / cold CDN). The <img> at inset:0 covers it
       once decoded; no removal logic needed. */
  background: linear-gradient(160deg, #1a0d24 0%, #2d1438 50%, #1a0d24 100%);
}

.thb-mobile-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
        110deg,
        transparent 0%,
        transparent 40%,
        rgba(255, 255, 255, 0.04) 50%,
        transparent 60%,
        transparent 100%
    );
  transform: translateX(-100%);
  animation: thb-skeleton-shimmer 4.5s linear infinite;
  pointer-events: none;
}

/* Respect users who've requested reduced motion — skeleton stays as the
   static dark gradient, no shimmer. */

@media (prefers-reduced-motion: reduce) {
  .thb-panel::before,
    .thb-mobile-card::before {
    animation: none;
  }
}

.thb-mobile-card--active {
  box-shadow:
        0 0 0 2px #FF36F7,
        0 0 16px rgba(255, 54, 247, 0.35);
}

.thb-mobile-card__img {
  /* Permanent fallback layer — sits absolutely beneath the video so any
       time the video can't paint (slow network, stall, decode error,
       bfcache restore, autoplay block) the thumbnail shows through. The
       video covers it via object-fit:cover when playing. JS never touches
       this element's opacity — source order alone gives video > image. */
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center top;
     object-position: center top;
}

.thb-mobile-card__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center top;
     object-position: center top;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.thb-mobile-card__video--playing {
  opacity: 1;
}

.thb-mobile-card__overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50%;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
  pointer-events: none;
}

/* Sound toggle (top-right, visible only when card is --active) */

.thb-mobile-card__sound-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 40px;
  height: 40px;
  /* Soft dark backdrop with blur isolates the button from busy video frames
       (faces, light backgrounds) so the gradient icon stays readable. */
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 50%;
  display: none;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #fff;
  z-index: 5;
  cursor: pointer;
  padding: 0;
  transition: background 0.2s ease;
}

.thb-mobile-card__sound-btn:hover,
.thb-mobile-card__sound-btn:active {
  background: rgba(0, 0, 0, 0.75);
}

.thb-mobile-card--active .thb-mobile-card__sound-btn {
  display: flex;
}

.thb-mobile-card__info {
  position: absolute;
  bottom: 12px;
  left: 12px;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  gap: 6px;
}

.thb-mobile-card__rank {
  font-size: 52px;
  font-weight: 900;
  line-height: 0.8;
  font-style: italic;
  background: linear-gradient(135deg, #FF36F7, #FFBA2F);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  /* On mobile the card is small and the number competes with video frames —
       higher opacity + a beefier drop-shadow keeps the gradient legible. */
  opacity: 0.85;
  /* Stacked drop-shadows: a tight dark halo for contrast against bright
       frames + a softer ambient shadow for depth. drop-shadow works on
       gradient-clipped text where text-shadow doesn't. */
  filter:
        drop-shadow(0 1px 2px rgba(0, 0, 0, 0.85))
        drop-shadow(0 2px 6px rgba(0, 0, 0, 0.5));
}

.thb-mobile-card__name {
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  padding-bottom: 2px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
}

/* Chat link — covers the card so the 2nd tap on an active card navigates. */

.thb-mobile-card__link {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: none;
}

.thb-mobile-card--active .thb-mobile-card__link {
  display: block;
}

.top-honeybots-mobile-scroll {
  position: relative;
}

/*
 * Right-edge fade — strongest cue that the carousel keeps going.
 * Sits above the scroll container, blocks no taps (pointer-events:none),
 * and uses the body bg token so it works in both themes.
 */

.thb-mobile-edge-fade {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 32px;
  pointer-events: none;
  background: linear-gradient(to right, transparent, var(--bgbody));
  z-index: 1;
}

/*
 * "NEW" badge — pink pill in the top-left corner of a gallery card.
 * Uses the shared svg/new_badge.html partial (same one as bot-card).
 * z-index sits above overlays/info but below the sound toggle (z:5),
 * which is in the opposite corner anyway.
 *
 * Desktop: hidden in the narrow collapsed state (badge crowds the card),
 * fades in only when the panel is expanded/active. Mobile: always visible.
 */

.thb-panel__new-badge,
.thb-mobile-card__new-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 4;
  pointer-events: none;
}

.thb-panel__new-badge {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.thb-panel--active .thb-panel__new-badge {
  opacity: 1;
}

/* === Responsive === */

@media (max-width: 1199px) {
  .top-honeybots-accordion {
    height: 360px;
  }
}

@media (max-width: 991px) {
  .top-honeybots-accordion {
    height: 320px;
  }
}

/* Public SEO gallery — /gallery/ and /gallery/tag/<slug>/.
   All colors come from project CSS variables / Tailwind names defined in
   utils/variables.css + tailwind.config.js. No raw hex. */

.public-gallery {
  width: 100%;
  max-width: 1440px;
  /* This is a flex item inside the site shell. Without an explicit width +
       min-width:0 it sizes to its max-content, which the single-line scrolling
       tag row (overflow-x:auto) inflates past the viewport on mobile — pushing
       the whole gallery wider than the screen. Pinning to 100% + min-width:0
       lets the row scroll inside the container instead of widening it. */
  min-width: 0;
  margin: 0 auto;
  padding: 32px 24px 80px;
  color: var(--bodytext);
}

@media (max-width: 768px) {
  .public-gallery {
    padding: 16px 12px 64px;
  }
}

/* ── Header ────────────────────────────────────────────────────── */

.public-gallery-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  margin-bottom: 24px;
}

.public-gallery-title {
  font-weight: 700;
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.15;
  color: var(--title);
  margin: 0;
}

.public-gallery-subtitle {
  font-size: clamp(14px, 1.5vw, 17px);
  color: var(--bodytext);
  max-width: 640px;
  margin: 0;
}

.public-gallery-best-link {
  margin: 4px 0 0;
  font-size: 14px;
}

.public-gallery-best-link a {
  color: var(--primary);
  text-decoration: none;
  font-weight: 600;
}

.public-gallery-best-link a:hover {
  text-decoration: underline;
}

.public-gallery-breadcrumb {
  font-size: 13px;
  color: var(--bodytext);
  display: inline-flex;
  gap: 8px;
  align-items: center;
  margin: 0;
}

.public-gallery-breadcrumb a {
  color: var(--primary);
  text-decoration: none;
}

.public-gallery-breadcrumb a:hover {
  text-decoration: underline;
}

/* ── Search ────────────────────────────────────────────────────── */

.public-gallery-search {
  position: relative;
  display: flex;
  width: 100%;
  max-width: 560px;
  margin-top: 4px;
}

.public-gallery-search input[type="search"] {
  flex: 1;
  height: 48px;
  padding: 0 56px 0 20px;
  border-radius: 999px;
  border: 1px solid var(--lightgray);
  background: var(--light-bg);
  color: var(--bodytext);
  font-size: 15px;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.public-gallery-search input[type="search"]:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(250, 61, 114, 0.18);
}

.public-gallery-search-btn {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 0;
  background: var(--primary);
  color: hsl(var(--static-white));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: filter 0.15s ease, transform 0.05s ease;
}

.public-gallery-search-btn:hover {
  filter: brightness(1.08);
}

.public-gallery-search-btn:active {
  transform: translateY(-50%) scale(0.96);
}

/* ── Pill bars ─────────────────────────────────────────────────── */

[x-cloak] {
  display: none !important;
}

.public-gallery-filters {
  margin: 16px 0 8px;
}

.public-gallery-pills-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 8px;
  align-items: center;
}

/* "More filters" bar holds only the toggle button. On desktop it sits inline
   after the wrapped main row; on mobile it becomes a full-width row under the
   single scrolling tag line (see mobile media query). */

.public-gallery-filters-bar {
  display: flex;
  margin-top: 8px;
}

/* Desktop: the overflow main tags live in the wrapped main row, so the panel's
   duplicate "Tags" group is hidden. On mobile they relocate into the panel. */

.public-gallery-pills-row-overflow {
  display: none;
}

.public-gallery-filters-extra {
  margin-top: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--lightgray);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.public-gallery-pills-row-lora,
.public-gallery-pills-row-style,
.public-gallery-pills-row-mine {
  align-items: center;
}

.public-gallery-pills-mini-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--bodytext);
  opacity: 0.6;
  margin-right: 4px;
}

.public-gallery-pill {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--lightgray);
  background: transparent;
  color: var(--bodytext);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
  white-space: nowrap;
  cursor: pointer;
}

.public-gallery-pill:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.public-gallery-pill-active {
  background: var(--primary);
  border-color: var(--primary);
  color: hsl(var(--static-white));
}

.public-gallery-pill-active:hover {
  color: hsl(var(--static-white));
  filter: brightness(1.05);
}

.public-gallery-pill-more {
  border-style: dashed;
  color: var(--primary);
  font-weight: 600;
}

.public-gallery-pill-lora {
  border-color: var(--secondary);
  color: var(--secondary);
}

.public-gallery-pill-lora:hover {
  border-color: var(--secondary);
  color: hsl(var(--static-white));
  background: var(--secondary);
}

.public-gallery-pill-lora.public-gallery-pill-active {
  background: var(--secondary);
  border-color: var(--secondary);
  color: hsl(var(--static-white));
}

/* "My reactions" toggle — personal view, uses the primary brand colour. */

.public-gallery-pill-mine {
  border-color: var(--primary);
  color: var(--primary);
}

.public-gallery-pill-mine:hover {
  border-color: var(--primary);
  color: hsl(var(--static-white));
  background: var(--primary);
}

.public-gallery-pill-mine.public-gallery-pill-active {
  background: var(--primary);
  border-color: var(--primary);
  color: hsl(var(--static-white));
}

.public-gallery-pill-style {
  border-style: dashed;
}

/* ── Mobile: one scrolling tag line + "More filters" for the rest ──
   On phones the 20-tag wrapped grid ate ~200px before the first image. We
   collapse the main row to a single horizontally-scrollable line showing only
   the first few brand-safe tags; everything else folds into the always-visible
   "More filters" panel. Desktop layout above is untouched. */

@media (max-width: 768px) {
  .public-gallery-filters {
    margin: 12px 0 6px;
  }

  /* Single line, swipe horizontally. Hide the scrollbar but keep momentum
       scroll on iOS; fade the right edge to hint there's more off-screen. */

  .public-gallery-pills-row-main {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 6px;
    padding-bottom: 2px;
    /* room so the last visible pill isn't clipped by the edge fade */
    scroll-padding-right: 24px;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
  }

  .public-gallery-pills-row-main::-webkit-scrollbar {
    display: none;
  }

  .public-gallery-pills-row-main .public-gallery-pill {
    flex: 0 0 auto;
  }

  /* Taller tap targets on touch (charter: ≥44px). Applies to every pill on
       mobile — the scrolling line and the panel groups. */

  .public-gallery-pill {
    padding-top: 10px;
    padding-bottom: 10px;
    font-size: 14px;
  }

  /* The tags beyond the first few are pulled out of the scrolling line and
       shown inside the "More filters" panel instead (relocated, not duplicated
       — the panel's -overflow group renders them). */

  .public-gallery-pill-overflow {
    display: none;
  }

  /* Reveal the relocated tags group inside the panel on mobile. */

  .public-gallery-pills-row-overflow {
    display: flex;
  }

  /* Full-width "More filters" toggle under the scrolling line. */

  .public-gallery-filters-bar {
    margin-top: 8px;
  }

  .public-gallery-filters-bar .public-gallery-pill-more {
    width: 100%;
    justify-content: center;
    padding: 9px 12px;
  }

  /* Mobile filter panel rows wrap normally (they're behind a tap). */

  .public-gallery-filters-extra .public-gallery-pills-row {
    flex-wrap: wrap;
  }

  /* Source toggle (All/Bots/New) relocated into the panel by JS on mobile:
       give it its own row above the tag groups, left-aligned. */

  .public-gallery-source-toggle-in-panel {
    align-self: flex-start;
    margin-bottom: 2px;
  }

  /* Drop "Trending" on mobile so the sort bar (now Newest + Most Liked) and
       the Safe / 18+ toggle fit together on one row. */

  .public-gallery-sort-btn-trending {
    display: none;
  }

  .public-gallery-controls {
    flex-wrap: nowrap;
  }
}

/* ── Sort selector ─────────────────────────────────────────────── */

.public-gallery-sort {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border-radius: 999px;
  background: var(--light-bg);
  border: 1px solid var(--lightgray);
  margin: 12px 0 4px;
}

.public-gallery-sort-btn {
  padding: 6px 14px;
  border-radius: 999px;
  color: var(--bodytext);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.12s ease, color 0.12s ease;
}

.public-gallery-sort-btn:hover {
  color: var(--primary);
}

.public-gallery-sort-btn-active {
  background: var(--primary);
  color: hsl(var(--static-white));
}

.public-gallery-sort-btn-active:hover {
  color: hsl(var(--static-white));
}

/* ── Grid ──────────────────────────────────────────────────────── */

.public-gallery-grid-wrap {
  margin-top: 16px;
}

.public-gallery-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

@media (max-width: 991px) {
  .public-gallery-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .public-gallery-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }
}

@media (max-width: 575px) {
  .public-gallery-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ── Card ──────────────────────────────────────────────────────── */

.public-gallery-card {
  position: relative;
  margin: 0;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: 14px;
  background: var(--light-bg);
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.public-gallery-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}

.public-gallery-img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: top;
     object-position: top;
  display: block;
  transition: transform 0.4s ease;
}

.public-gallery-card:hover .public-gallery-img {
  transform: scale(1.04);
}

.public-gallery-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: rgba(0, 0, 0, 0.55);
  color: hsl(var(--static-white));
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  z-index: 2;
  max-width: calc(100% - 16px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.public-gallery-badge-new {
  background: var(--gre-secondary);
  color: hsl(var(--static-black));
}

/* Info button (top-right of each card) → full detail page. Separate from the
   image link (which opens the lightbox). Always present, subtle until hover. */

.public-gallery-card-info {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.45);
  color: hsl(var(--static-white));
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  text-decoration: none;
  opacity: 0.75;
  transition: opacity 0.12s ease, background 0.12s ease, transform 0.05s ease;
}

.public-gallery-card:hover .public-gallery-card-info {
  opacity: 1;
}

.public-gallery-card-info:hover {
  background: var(--primary);
  opacity: 1;
}

.public-gallery-card-info:active {
  transform: scale(0.94);
}

/* Bottom gradient improves legibility under the reaction strip + CTA without
   needing a hover overlay. Always present, decorative only. */

.public-gallery-card::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 60px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0));
  pointer-events: none;
  z-index: 1;
}

/* Dual CTA row — hidden on every screen size. The CTAs live only in the
   lightbox and on the detail page; on-card they added clutter with no
   touch affordance, so they no longer render on the card at any width. */

.public-gallery-card-ctas {
  display: none;
}

.public-gallery-card-cta {
  flex: 1 1 0;
  min-width: 0;
  padding: 7px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: filter 0.1s ease, background 0.12s ease, color 0.12s ease;
}

.public-gallery-card-cta-primary {
  background: var(--primary);
  color: hsl(var(--static-white));
}

.public-gallery-card-cta-secondary {
  background: var(--transparent-white);
  color: hsl(var(--static-white));
  border: 1px solid hsl(var(--static-white));
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
}

.public-gallery-card-cta:hover {
  filter: brightness(1.08);
}

/* ── Spliced clothes-remover scratch card ──────────────────────────
   A scratch-to-reveal card injected into the unfiltered feed at positions
   4, 12, 20, … It reuses the .cr-card mechanic (already aspect-ratio 3/4, so it
   drops straight into a grid cell) with gallery-specific chrome: a corner badge
   + a CTA linking to /clothes-remover/. */

.public-gallery-scratch {
  position: relative;
  min-width: 0;
}

/* Match the gallery card's resting state (the .cr-card default carries a heavier
   standalone-page shadow + dark placeholder; align it with the grid). */

.cr-card--gallery {
  border-radius: 14px;
  box-shadow: none;
  background: var(--light-bg);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.cr-card--gallery:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}

.public-gallery-scratch-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 3;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: hsl(var(--static-white));
  background: linear-gradient(to right, var(--gre-secondary), var(--gre-primary));
  pointer-events: none;
}

/* Once the user STARTS scratching a card, clear its overlay chrome (the badge —
   the hint is already cleared by clothes-remover.js via .cr-card--scratched)
   so nothing covers the image they're uncovering. */

.cr-card--scratched .public-gallery-scratch-badge {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
}

/* ── Source toggle + controls row ──────────────────────────────── */

.public-gallery-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}

.public-gallery-source-toggle {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border-radius: 999px;
  background: var(--light-bg);
  border: 1px solid var(--lightgray);
  margin: 12px 0 4px;
}

.public-gallery-source-btn {
  padding: 6px 16px;
  border-radius: 999px;
  color: var(--bodytext);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.12s ease, color 0.12s ease;
}

.public-gallery-source-btn:hover {
  color: var(--primary);
}

.public-gallery-source-btn-active {
  background: var(--primary);
  color: hsl(var(--static-white));
}

.public-gallery-source-btn-active:hover {
  color: hsl(var(--static-white));
}

/* Safe / 18+ content toggle — same pill shape as the source toggle. */

.public-gallery-explicit-toggle {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border-radius: 999px;
  background: var(--light-bg);
  border: 1px solid var(--lightgray);
  margin: 12px 0 4px;
}

.public-gallery-explicit-btn {
  padding: 6px 16px;
  border-radius: 999px;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: var(--bodytext);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.12s ease, color 0.12s ease;
}

.public-gallery-explicit-btn:hover {
  color: var(--primary);
}

.public-gallery-explicit-btn-active {
  background: var(--primary);
  color: hsl(var(--static-white));
}

.public-gallery-explicit-btn-active:hover {
  color: hsl(var(--static-white));
}

/* The 18+ option, when active, uses the secondary brand color to read as a
   distinct "adult" state. */

.public-gallery-explicit-btn-adult.public-gallery-explicit-btn-active {
  background: var(--secondary);
}

/* Lightbox dual CTA — static (not hover-revealed); full-width row. */

.public-gallery-lightbox-ctas {
  position: static;
  opacity: 1;
  transform: none;
  pointer-events: auto;
  margin-top: 8px;
}

.public-gallery-lightbox-ctas .public-gallery-card-cta[hidden] {
  display: none;
}

/* ── Skeleton sentinel ─────────────────────────────────────────── */

.public-gallery-skeleton {
  grid-column: 1 / -1;
  height: 1px;
  pointer-events: none;
}

/* ── Empty state ───────────────────────────────────────────────── */

.public-gallery-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 56px 16px;
  border: 1px dashed var(--lightgray);
  border-radius: 16px;
}

.public-gallery-empty-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--title);
  margin: 0 0 6px;
}

.public-gallery-empty-sub {
  font-size: 14px;
  color: var(--bodytext);
  margin: 0;
}

.public-gallery-empty-sub a {
  color: var(--primary);
  font-weight: 600;
  text-decoration: none;
}

.public-gallery-empty-sub a:hover {
  text-decoration: underline;
}

/* ── Lightbox ──────────────────────────────────────────────────── */

/* Full-viewport fixed overlay. z-index 200 > sticky navbar (100). The whole
   surface acts as the dismiss zone; .data-no-dismiss elements (figure, top bar,
   bottom bar, nav buttons) stop the click from reaching the backdrop. */

.public-gallery-lightbox {
  position: fixed;
  inset: 0;
  /* Explicit viewport height so the flex children below have a definite
       height to resolve their % / flex:1 against. Without this, a fixed box
       with only inset:0 gives children an indefinite height and a large image
       overflows the viewport (iOS especially). dvh tracks the dynamic toolbar
       so it stays correct as Safari's chrome collapses. */
  height: 100vh;
  height: 100dvh;
  max-height: 100vh;
  max-height: 100dvh;
  background: rgba(0, 0, 0, 0.94);
  z-index: 200;
  display: none;
  flex-direction: column;
  overflow: hidden;
}

.public-gallery-lightbox[data-open="true"] {
  display: flex;
}

/* Stage area fills the space between the top edge and the bottom bar. The
   figure sits centred inside it. Clicks on the empty space around the figure
   bubble up to the lightbox click handler, which closes. */

.public-gallery-lightbox-stage {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  /* Clip rather than scroll: the image is sized to fit, so nothing should
       overflow — but if it ever does, never expose a scrollbar. */
  overflow: hidden;
  padding: 56px 64px 8px;
}

.public-gallery-lightbox-figure {
  position: relative;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  /* Take the stage's full height so the image's height: 100% resolves against
       a definite value (the stage clamps the stage height via flex:1 + min-height:0). */
  height: 100%;
}

.public-gallery-lightbox-img {
  /* Height drives the fit: the image always uses the full vertical space of
       the stage, width scales proportionally. max-width caps a very wide
       landscape image so it can't overflow sideways (object-fit then letterboxes
       the leftover width). This makes portrait images — the common case — as
       tall as the viewport allows instead of being width-limited. */
  height: 100%;
  width: auto;
  max-width: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  border-radius: 12px;
  display: block;
}

/* Bottom action bar: caption + reactions + info/share, all on one row at
   desktop, wrapped on mobile. Sticks to the bottom of the viewport.

   On large screens the chrome is constrained to a portrait-phone-width column
   (--lightbox-col) centred under the image, so the CTAs/caption/reactions don't
   stretch edge-to-edge. The dark bar background still spans full width to anchor
   the bottom of the viewport; only the *content* is column-capped. */

.public-gallery-lightbox {
  --lightbox-col: 480px;
}

.public-gallery-lightbox-bar {
  flex: 0 0 auto;
  background: rgba(0, 0, 0, 0.6);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  color: hsl(var(--static-white));
  padding: 12px 20px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Centre + cap every content block in the bar to the portrait column. */

.public-gallery-lightbox-bar > * {
  width: 100%;
  max-width: var(--lightbox-col);
  margin-inline: auto;
}

.public-gallery-lightbox-caption {
  /* margin-block only — do NOT reset margin-inline, or it overrides the
       `margin-inline: auto` from `.public-gallery-lightbox-bar > *` and the
       caption escapes the centred column to the full-width left. */
  margin-block: 0;
  color: hsl(var(--static-white));
  font-size: 13px;
  line-height: 1.4;
  opacity: 0.9;
  /* Centre the prompt text within the column so it lines up with the centred
       CTAs below (the block itself is capped to --lightbox-col + auto margins
       by the .public-gallery-lightbox-bar > * rule). */
  text-align: center;
  max-height: 2.8em;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.public-gallery-lightbox-caption:empty {
  display: none;
}

.public-gallery-lightbox-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.public-gallery-lightbox-actions-right {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  position: relative;
  flex-shrink: 0;
}

.public-gallery-lightbox-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 0;
  background: rgba(255, 255, 255, 0.1);
  color: hsl(var(--static-white));
  border-radius: 999px;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.12s ease, transform 0.05s ease;
}

.public-gallery-lightbox-icon-btn:hover {
  background: rgba(255, 255, 255, 0.2);
}

.public-gallery-lightbox-icon-btn:active {
  transform: scale(0.94);
}

.public-gallery-lightbox-icon-btn[aria-expanded="true"] {
  background: var(--primary);
}

/* inline-flex above overrides the default [hidden] display:none, so re-assert
   it for the expand link (hidden when the active card has no detail URL). */

.public-gallery-lightbox-icon-btn[hidden] {
  display: none;
}

/* Share popover — one Share button toggles a menu holding download + copy +
   social. Anchored to the share button, opens upward (the action bar sits at
   the bottom of the viewport). */

.public-gallery-share {
  position: relative;
  display: inline-flex;
}

.public-gallery-share-menu {
  position: absolute;
  bottom: calc(100% + 8px);
  right: 0;
  z-index: 5;
  display: flex;
  flex-direction: row;
  gap: 4px;
  padding: 6px;
  background: hsl(var(--static-black));
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
}

.public-gallery-share-menu[hidden] {
  display: none;
}

/* Icon-only square button. Download + copy stay neutral (white); social
   targets paint their own brand color via the --network modifiers below. */

.public-gallery-share-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 0;
  background: rgba(255, 255, 255, 0.08);
  color: hsl(var(--static-white));
  text-decoration: none;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.12s ease, transform 0.05s ease;
}

.public-gallery-share-item:hover {
  background: rgba(255, 255, 255, 0.18);
}

.public-gallery-share-item:active {
  transform: scale(0.94);
}

.public-gallery-share-item svg {
  flex-shrink: 0;
}

/* Official brand colors for the social share icons. Brand logo colors are a
   deliberate exception to the no-raw-hex rule — they're fixed platform
   identities, not theme tokens, and must match each platform exactly. X has no
   single brand color, so it keeps the neutral white treatment. */

.public-gallery-share-item--reddit {
  color: #FF4500;
}

.public-gallery-share-item--facebook {
  color: #1877F2;
}

.public-gallery-share-item--reddit:hover,
.public-gallery-share-item--facebook:hover,
.public-gallery-share-item--twitter:hover {
  background: rgba(255, 255, 255, 0.22);
}

/* Info dropdown — sits inside the bottom bar, expands above the action row. */

.public-gallery-lightbox-info {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 10px;
  padding: 10px 12px;
  color: hsl(var(--static-white));
  font-size: 13px;
  line-height: 1.5;
  max-height: 30vh;
  overflow-y: auto;
}

.public-gallery-lightbox-info-text {
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
}

/* Physique tag chips — always-visible row under the lightbox caption, in
   place of the old generic "AI-generated image" label. Populated from the
   active card's data-tags by public-gallery.js. */

.public-gallery-lightbox-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  /* match the centred caption + CTAs */
  gap: 6px;
  max-height: 4.4em;
  /* ~2 rows of chips, then scroll — keeps the bar compact */
  overflow-y: auto;
}

.public-gallery-lightbox-tags[hidden] {
  display: none;
}

.public-gallery-lightbox-tag {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: hsl(var(--static-white));
  font-size: 12px;
  line-height: 1.2;
  text-transform: capitalize;
  white-space: nowrap;
}

/* Reactions inside the lightbox — flat chips on the dark bar.
   Overrides the on-card absolute layout from .public-gallery-reactions. */

.public-gallery-lightbox .public-gallery-lightbox-reactions {
  position: static;
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  text-shadow: none;
  overflow: visible;
}

.public-gallery-lightbox .public-gallery-lightbox-reactions .public-gallery-reaction {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.18);
  padding: 6px 10px;
  border-radius: 999px;
  color: hsl(var(--static-white));
  font-size: 13px;
  gap: 5px;
}

.public-gallery-lightbox .public-gallery-lightbox-reactions .public-gallery-reaction-emoji {
  font-size: 14px;
}

.public-gallery-lightbox .public-gallery-lightbox-reactions .public-gallery-reaction-count {
  font-size: 12px;
}

.public-gallery-lightbox .public-gallery-lightbox-reactions .public-gallery-reaction:hover {
  background: rgba(255, 255, 255, 0.2);
  opacity: 1;
}

.public-gallery-lightbox .public-gallery-lightbox-reactions .public-gallery-reaction.is-active {
  background: var(--primary);
  border-color: var(--primary);
  color: hsl(var(--static-white));
}

.public-gallery-lightbox .public-gallery-lightbox-reactions .public-gallery-reaction.is-active .public-gallery-reaction-count {
  color: hsl(var(--static-white));
}

.public-gallery-share-toast {
  position: absolute;
  top: -34px;
  right: 0;
  /* Above the share menu (z-index:5) so the "Link copied!" chip never
       renders behind the action buttons / open popover. */
  z-index: 10;
  background: var(--primary);
  color: hsl(var(--static-white));
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  pointer-events: none;
}

/* Optional CTA inside a toast (e.g. "Get tokens →" on no_tokens). The toast
   itself stays click-through; the link must not. */

.public-gallery-share-toast-link {
  pointer-events: auto;
  margin-left: 6px;
  color: hsl(var(--static-white));
  text-decoration: underline;
  font-weight: 700;
}

/* Mobile tightening: smaller padding, compact chip sizes, reduced top/bottom
   chrome. Action row wraps so reactions + icons can stack on a second line. */

@media (max-width: 575px) {
  .public-gallery-lightbox-stage {
    padding: 52px 8px 4px;
  }

  .public-gallery-lightbox-bar {
    padding: 10px 12px 12px;
    gap: 8px;
  }

  .public-gallery-lightbox-caption {
    font-size: 12px;
    -webkit-line-clamp: 2;
  }

  .public-gallery-lightbox-icon-btn {
    width: 32px;
    height: 32px;
  }

  .public-gallery-lightbox .public-gallery-lightbox-reactions .public-gallery-reaction {
    padding: 5px 8px;
    font-size: 12px;
  }

  .public-gallery-lightbox .public-gallery-lightbox-reactions .public-gallery-reaction-emoji {
    font-size: 13px;
  }
}

/* ── Card link wrapper ─────────────────────────────────────────── */

.public-gallery-card-link {
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
  color: inherit;
}

/* Reaction strip: Civitai-style. Tiny emoji + count, no chip background,
   sitting flush on the bottom-left of every card. Always visible. */

.public-gallery-reactions {
  position: absolute;
  bottom: 6px;
  left: 8px;
  right: 8px;
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  z-index: 3;
  overflow: hidden;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
}

.public-gallery-reaction {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 0;
  border: 0;
  background: transparent;
  color: hsl(var(--static-white));
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
  transition: transform 0.05s ease, opacity 0.12s ease;
}

.public-gallery-reaction:hover {
  opacity: 0.85;
}

.public-gallery-reaction:active {
  transform: scale(0.94);
}

/* Local "I reacted" state — purely visual, no backend. JS toggles the class
   on click and bumps the count by ±1. */

.public-gallery-reaction.is-active {
  color: var(--primary);
}

.public-gallery-reaction.is-active .public-gallery-reaction-count {
  color: var(--primary);
}

.public-gallery-reaction-emoji {
  font-size: 11px;
  line-height: 1;
}

.public-gallery-reaction-count {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  font-size: 11px;
  line-height: 1;
}

@media (max-width: 768px) {
  .public-gallery-reactions {
    gap: 6px;
    bottom: 4px;
  }

  .public-gallery-reaction,
    .public-gallery-reaction-emoji,
    .public-gallery-reaction-count {
    font-size: 10px;
  }
}

/* ── Detail page ───────────────────────────────────────────────── */

.public-gallery-detail {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr);
  gap: 28px;
  margin-top: 16px;
  /* Don't let the image column stretch to match a tall meta column. */
  align-items: start;
}

@media (max-width: 768px) {
  .public-gallery-detail {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

.public-gallery-detail-figure {
  position: relative;
  margin: 0;
  border-radius: 14px;
  overflow: hidden;
  background: var(--light-bg);
  /* Center the (capped) image; portrait images no longer stretch the column
       to full width and blow up the page height. */
  display: flex;
  align-items: flex-start;
  justify-content: center;
  /* Cap the figure so a tall portrait fits above the fold. The 200px
       allowance covers the navbar (~92px) + page padding (32px) + breadcrumb
       header (~50px) + breathing room, so the image bottom never crosses the
       viewport edge on desktop. dvh tracks the mobile toolbar. */
  max-height: calc(100vh - 200px);
  max-height: calc(100dvh - 200px);
}

/* Shrink-wraps the rendered image so the edit/nudify buttons anchor to the
   image's own top-right corner — anchored to the (full-width) figure they
   float in the empty space beside a portrait image. */

.public-gallery-detail-imgwrap {
  position: relative;
  display: inline-flex;
  max-width: 100%;
}

.public-gallery-detail-img {
  max-width: 100%;
  max-height: calc(100vh - 200px);
  max-height: calc(100dvh - 200px);
  width: auto;
  height: auto;
  display: block;
  -o-object-fit: contain;
     object-fit: contain;
}

/* Prev/next arrows over the detail image — mirrors the lightbox chevrons so
   the standalone SSR page isn't a navigation dead-end. */

.public-gallery-detail-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.45);
  color: hsl(var(--static-white));
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  text-decoration: none;
  transition: background 0.12s ease, transform 0.05s ease;
}

.public-gallery-detail-prev {
  left: 12px;
}

.public-gallery-detail-next {
  right: 12px;
}

.public-gallery-detail-nav:hover {
  background: var(--primary);
}

.public-gallery-detail-prev:active,
.public-gallery-detail-next:active {
  transform: translateY(-50%) scale(0.94);
}

@media (max-width: 768px) {
  /* Single-column on mobile: the meta panel stacks below, so cap the image
       smaller (55dvh) so the image + its primary CTA are visible without a
       long scroll. */

  .public-gallery-detail-figure,
    .public-gallery-detail-img {
    max-height: 55vh;
    max-height: 55dvh;
  }

  .public-gallery-detail-nav {
    width: 38px;
    height: 38px;
  }

  .public-gallery-detail-prev {
    left: 6px;
  }

  .public-gallery-detail-next {
    right: 6px;
  }
}

.public-gallery-detail-meta {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.public-gallery-detail-title {
  font-size: clamp(20px, 2.4vw, 26px);
  font-weight: 700;
  color: var(--title);
  margin: 0;
}

/* Prompt row: description text + inline copy button. */

.public-gallery-detail-prompt {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.public-gallery-detail-description {
  margin: 0;
  color: var(--bodytext);
  font-size: 14px;
  line-height: 1.55;
  white-space: pre-wrap;
  flex: 1 1 auto;
  min-width: 0;
}

.public-gallery-detail-copy-prompt {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin-top: -2px;
  border: 1px solid var(--lightgray);
  background: var(--light-bg);
  color: var(--bodytext);
  border-radius: 8px;
  cursor: pointer;
  transition: color 0.12s ease, border-color 0.12s ease, transform 0.05s ease;
}

.public-gallery-detail-copy-prompt:hover {
  color: var(--primary);
  border-color: var(--primary);
}

.public-gallery-detail-copy-prompt:active {
  transform: scale(0.94);
}

.public-gallery-detail-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.public-gallery-detail-tag {
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--light-bg);
  border: 1px solid var(--lightgray);
  color: var(--bodytext);
  font-size: 11px;
}

.public-gallery-detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.public-gallery-detail-cta {
  flex: 1 1 auto;
  display: inline-block;
  padding: 12px 24px;
  border-radius: 999px;
  font-weight: 600;
  text-decoration: none;
  text-align: center;
  transition: filter 0.12s ease, background 0.12s ease, color 0.12s ease;
}

.public-gallery-detail-cta-primary {
  background: var(--primary);
  color: hsl(var(--static-white));
}

.public-gallery-detail-cta-secondary {
  background: transparent;
  color: var(--primary);
  border: 1px solid var(--primary);
}

.public-gallery-detail-cta-secondary:hover {
  background: var(--primary);
  color: hsl(var(--static-white));
}

.public-gallery-detail-cta:hover {
  filter: brightness(1.08);
}

.public-gallery-detail-reactions {
  margin-top: 4px;
}

/* On the detail page the reaction strip lives on a light background, so
   override the absolute positioning + dark chip styling used on the card. */

.public-gallery-detail-reactions .public-gallery-reactions {
  position: static;
  flex-wrap: wrap;
  gap: 6px;
}

.public-gallery-detail-reactions .public-gallery-reaction {
  background: var(--light-bg);
  color: var(--bodytext);
  border: 1px solid var(--lightgray);
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
  padding: 5px 10px;
  font-size: 12px;
}

.public-gallery-detail-reactions .public-gallery-reaction:hover {
  background: var(--light-bg);
  border-color: var(--primary);
  color: var(--primary);
}

.public-gallery-detail-reactions .public-gallery-reaction-emoji {
  font-size: 14px;
}

/* Share button on the detail page lives on a LIGHT background, so re-skin the
   icon button (the shared .public-gallery-lightbox-icon-btn is white-on-dark)
   and open its popover downward (it's not in a bottom action bar here). */

.public-gallery-detail-share {
  margin-top: 4px;
  align-self: flex-start;
}

.public-gallery-detail-share .public-gallery-lightbox-icon-btn {
  background: var(--light-bg);
  border: 1px solid var(--lightgray);
  color: var(--bodytext);
}

.public-gallery-detail-share .public-gallery-lightbox-icon-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--light-bg);
}

.public-gallery-detail-share .public-gallery-lightbox-icon-btn[aria-expanded="true"] {
  background: var(--primary);
  border-color: var(--primary);
  color: hsl(var(--static-white));
}

.public-gallery-detail-share .public-gallery-share-menu {
  bottom: auto;
  top: calc(100% + 8px);
  left: 0;
  right: auto;
}

/* High-contrast chrome buttons. Close in top-right, prev/next centred on the
   left/right edges of the stage. All three are large touch targets (44px). */

.public-gallery-lightbox-close,
.public-gallery-lightbox-nav {
  position: absolute;
  border: 0;
  background: rgba(255, 255, 255, 0.16);
  color: hsl(var(--static-white));
  border-radius: 999px;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.05s ease;
  z-index: 2;
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
}

.public-gallery-lightbox-close {
  top: 14px;
  right: 14px;
}

/* Sit the chevrons just outside the centred image column rather than at the
   far viewport edges. A portrait image at full stage height is ~640px wide, so
   anchoring ~360px from centre lands the arrows close to the image edge on wide
   screens. max(14px, …) clamps them to the viewport edge on narrower screens so
   they never push off-screen. */

.public-gallery-lightbox-prev {
  top: 50%;
  left: max(14px, calc(50% - 360px));
  transform: translateY(-50%);
}

.public-gallery-lightbox-next {
  top: 50%;
  right: max(14px, calc(50% - 360px));
  transform: translateY(-50%);
}

.public-gallery-lightbox-close:hover,
.public-gallery-lightbox-nav:hover {
  background: rgba(255, 255, 255, 0.3);
}

.public-gallery-lightbox-close:active,
.public-gallery-lightbox-nav:active {
  transform: scale(0.94);
}

.public-gallery-lightbox-prev:active,
.public-gallery-lightbox-next:active {
  transform: translateY(-50%) scale(0.94);
}

@media (max-width: 575px) {
  .public-gallery-lightbox-close,
    .public-gallery-lightbox-nav {
    width: 38px;
    height: 38px;
  }

  .public-gallery-lightbox-close {
    top: 10px;
    right: 10px;
  }

  .public-gallery-lightbox-prev {
    left: 6px;
  }

  .public-gallery-lightbox-next {
    right: 6px;
  }
}

/* Anonymous gate — fills the stage area so it's the focal point rather than a
   small chip on a sea of black. */

.public-gallery-lightbox-gate {
  background: var(--light-bg);
  color: var(--bodytext);
  padding: 40px 32px;
  border-radius: 16px;
  text-align: center;
  max-width: 420px;
  width: 100%;
}

.public-gallery-lightbox-gate-title {
  font-size: clamp(18px, 2.2vw, 22px);
  font-weight: 700;
  color: var(--title);
  margin: 0 0 8px;
}

.public-gallery-lightbox-gate-sub {
  font-size: 14px;
  margin: 0 0 20px;
}

.public-gallery-lightbox-gate-cta {
  display: inline-block;
  padding: 12px 26px;
  border-radius: 999px;
  background: var(--primary);
  color: hsl(var(--static-white));
  font-weight: 600;
  text-decoration: none;
  transition: filter 0.15s ease;
}

.public-gallery-lightbox-gate-cta:hover {
  filter: brightness(1.08);
}

/* sr-only utility (fallback if not already defined globally) */

.public-gallery .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── Image actions (Edit + Remove clothes) ──────────────────────────────────
   Top-right button cluster over the lightbox figure and the detail figure.
   Both run on the active image and save only the result to the user's gallery.
   public-gallery.js routes anonymous clicks to the signup modal. */

.public-gallery-img-actions {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 5;
  display: inline-flex;
  gap: 6px;
}

.public-gallery-img-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.5);
  color: hsl(var(--static-white));
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  cursor: pointer;
  transition: background 0.12s ease, transform 0.05s ease;
}

.public-gallery-img-action:hover {
  background: var(--primary);
}

.public-gallery-img-action:active {
  transform: scale(0.94);
}

/* The detail figure clips overflow (rounded corners), so anchor the actions
   inside the padding. On the lightbox the figure has no clip. */

.public-gallery-detail-figure .public-gallery-img-actions {
  top: 12px;
  right: 12px;
}

/* ── Broken-image placeholder ───────────────────────────────────────────────
   Applied by public-gallery.js when an image fails even after the watermark
   retry. Hides the raw alt text and shows a quiet branded label instead. */

.public-gallery-img-broken {
  opacity: 0;
}

.public-gallery-card-broken .public-gallery-card-link {
  position: relative;
}

.public-gallery-card-broken .public-gallery-card-link::after {
  content: "Image unavailable";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--bodytext);
  background: var(--light-bg);
}

/* ── Anonymous 18+ tag-page banner ──────────────────────────────────────────
   Shown on explicit (LoRA) tag landings to logged-out visitors, whose feed is
   force-filtered to safe content — without it the page is a near-empty
   dead-end with no explanation. The CTA reuses the explicit-locked click
   route (signup modal). */

.public-gallery-explicit-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 16px;
  margin: 14px auto 0;
  max-width: 640px;
  padding: 12px 18px;
  border: 1px solid var(--lightgray);
  border-radius: 12px;
  background: var(--light-bg);
}

.public-gallery-explicit-banner-text {
  margin: 0;
  font-size: 14px;
  color: var(--bodytext);
}

.public-gallery-explicit-banner-cta {
  border: 0;
  border-radius: 999px;
  padding: 9px 18px;
  background: var(--primary);
  color: hsl(var(--static-white));
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: filter 0.12s ease, transform 0.05s ease;
}

.public-gallery-explicit-banner-cta:hover {
  filter: brightness(1.08);
}

.public-gallery-explicit-banner-cta:active {
  transform: scale(0.97);
}

@media (max-width: 768px) {
  .public-gallery-img-action {
    width: 40px;
    height: 40px;
  }
}

/* ── Public-gallery edit modal ──────────────────────────────────────────────
   Shared by the lightbox and the SSR detail page. Hidden until .is-open. */

.public-gallery-edit-modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.public-gallery-edit-modal.is-open {
  display: flex;
}

.public-gallery-edit-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
}

.public-gallery-edit-modal-card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 460px;
  max-height: calc(100dvh - 40px);
  overflow-y: auto;
  background: var(--light-bg);
  color: var(--bodytext);
  border-radius: 16px;
  padding: 28px 22px 22px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}

.public-gallery-edit-modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--bodytext);
  cursor: pointer;
  transition: background 0.12s ease;
}

.public-gallery-edit-modal-close:hover {
  background: rgba(0, 0, 0, 0.08);
}

.public-gallery-edit-modal-preview-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 14px;
}

.public-gallery-edit-modal-preview {
  width: 96px;
  aspect-ratio: 3 / 4;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 10px;
}

.public-gallery-edit-modal-title {
  text-align: center;
  margin: 0 0 14px;
  font-size: 18px;
  font-weight: 600;
}

.public-gallery-edit-modal-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-bottom: 14px;
}

.public-gallery-edit-preset {
  padding: 7px 14px;
  border: 1px solid var(--lightgray);
  border-radius: 999px;
  background: transparent;
  color: var(--bodytext);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease, transform 0.05s ease;
}

.public-gallery-edit-preset:hover {
  background: rgba(0, 0, 0, 0.06);
}

.public-gallery-edit-preset:active {
  transform: scale(0.97);
}

.public-gallery-edit-preset.is-active {
  border-color: var(--primary);
  background: var(--primary);
  color: hsl(var(--static-white));
}

.public-gallery-edit-modal-textarea {
  width: 100%;
  border: 1px solid var(--lightgray);
  border-radius: 10px;
  padding: 12px;
  font-size: 14px;
  resize: none;
  background: hsl(var(--static-white));
  color: var(--bodytext);
}

.public-gallery-edit-modal-textarea:focus {
  outline: none;
  border-color: var(--primary);
}

.public-gallery-edit-modal-error {
  color: var(--primary);
  font-size: 12px;
  margin: 6px 0 0;
}

.public-gallery-edit-modal-submit {
  width: 100%;
  margin-top: 16px;
  padding: 13px;
  border: 0;
  border-radius: 10px;
  background: var(--primary);
  color: hsl(var(--static-white));
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: filter 0.12s ease, transform 0.05s ease;
}

.public-gallery-edit-modal-submit:hover {
  filter: brightness(1.06);
}

.public-gallery-edit-modal-submit:active {
  transform: scale(0.99);
}

.public-gallery-edit-modal-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 16px;
  font-size: 13px;
  color: var(--bodytext);
}

/* The explicit display rules above (flex on the loading row) override the
   default [hidden] display:none, so re-assert it — otherwise the loading row
   (and any other display-styled element) shows even while hidden. */

.public-gallery-edit-modal [hidden] {
  display: none;
}

.public-gallery-edit-modal-spinner {
  width: 18px;
  height: 18px;
  border: 2px solid var(--lightgray);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: public-gallery-edit-spin 0.8s linear infinite;
}

@keyframes public-gallery-edit-spin {
  to {
    transform: rotate(360deg);
  }
}

/* ── Top-center generation banner ───────────────────────────────────────────
   Large, unmissable progress indicator pinned to the top-center of the viewport
   while an edit/nudify runs, then flips to a success state. Replaces the small
   corner toast. Driven by public-gallery.js (.is-visible toggles the entrance). */

.public-gallery-gen-banner {
  position: fixed;
  top: 18px;
  left: 50%;
  transform: translateX(-50%) translateY(-16px);
  z-index: 1400;
  width: min(92vw, 440px);
  background: rgba(20, 20, 24, 0.92);
  color: hsl(var(--static-white));
  border-radius: 16px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45);
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
}

.public-gallery-gen-banner.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

.public-gallery-gen-banner-inner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
}

.public-gallery-gen-banner-state[hidden] {
  display: none;
}

.public-gallery-gen-banner-state {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
}

.public-gallery-gen-banner-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.public-gallery-gen-banner-title {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
}

.public-gallery-gen-banner-sub {
  font-size: 12.5px;
  line-height: 1.35;
  opacity: 0.8;
}

/* Orbit spinner — a dot circling a ring, reads clearly as "working". */

.public-gallery-gen-orbit {
  position: relative;
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.18);
  animation: public-gallery-gen-orbit-spin 1.1s linear infinite;
}

.public-gallery-gen-orbit-dot {
  position: absolute;
  top: -4px;
  left: 50%;
  width: 8px;
  height: 8px;
  margin-left: -4px;
  border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 0 10px 1px var(--primary);
}

@keyframes public-gallery-gen-orbit-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Animated indeterminate progress bar along the bottom of the banner. */

.public-gallery-gen-banner-bar {
  position: relative;
  height: 4px;
  width: 100%;
  background: rgba(255, 255, 255, 0.12);
  overflow: hidden;
}

.public-gallery-gen-banner-bar-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 40%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--gre-primary), var(--gre-secondary));
  animation: public-gallery-gen-bar-slide 1.3s ease-in-out infinite;
}

@keyframes public-gallery-gen-bar-slide {
  0%   {
    left: -40%;
  }

  100% {
    left: 100%;
  }
}

/* Success state — green check + a CTA to the gallery. The bar is hidden in this
   state (done), so collapse it. */

.public-gallery-gen-banner.is-done .public-gallery-gen-banner-bar {
  display: none;
}

.public-gallery-gen-check {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(46, 204, 113, 0.18);
  color: #2ecc71;
}

.public-gallery-gen-banner-cta {
  flex-shrink: 0;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--primary);
  color: hsl(var(--static-white));
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: filter 0.12s ease, transform 0.05s ease;
}

.public-gallery-gen-banner-cta:hover {
  filter: brightness(1.08);
}

.public-gallery-gen-banner-cta:active {
  transform: scale(0.97);
}

@media (max-width: 768px) {
  .public-gallery-gen-banner {
    top: 10px;
    width: 94vw;
  }

  .public-gallery-gen-banner-inner {
    padding: 13px 14px;
    gap: 11px;
  }

  .public-gallery-gen-banner-title {
    font-size: 14px;
  }
}

/* Respect reduced-motion: freeze the spinner + bar (still visible, just static). */

@media (prefers-reduced-motion: reduce) {
  .public-gallery-gen-orbit,
    .public-gallery-gen-banner-bar-fill {
    animation: none;
  }

  .public-gallery-gen-banner-bar-fill {
    left: 0;
    width: 100%;
  }
}

/* Freshly-generated card prepended live (no reload) after an edit/nudify. A
   brief entrance + ring highlight draws the eye to the new image at the top of
   the grid. */

.public-gallery-card-fresh {
  animation: public-gallery-card-fresh-in 0.45s ease both;
}

.public-gallery-card-fresh::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 0 3px var(--primary);
  opacity: 0;
  pointer-events: none;
  animation: public-gallery-card-fresh-ring 2.4s ease forwards;
}

@keyframes public-gallery-card-fresh-in {
  from {
    opacity: 0;
    transform: scale(0.94);
  }

  to   {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes public-gallery-card-fresh-ring {
  0%   {
    opacity: 0;
  }

  15%  {
    opacity: 1;
  }

  70%  {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .public-gallery-card-fresh,
    .public-gallery-card-fresh::after {
    animation: none;
  }
}

/* ===========================================================
   Creator Pages — Phase 1 UI scaffolding
   Used by: /creators, /creator/<handle>, /creator/apply,
            /dashboard/creator
   =========================================================== */

/* ----- Shared chips / pills ----- */

.cp-pill{
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  border-radius: 9999px;
  border-width: 1px;
  border-color: var(--lightgray);
  background-color: var(--light-bg);
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  font-size: 12px;
  font-size: calc(13px + (14 - 13) * ((100vw - 320px) / (1920 - 320)));
  line-height: 1.35;
  font-weight: 500;
  color: var(--body);
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

.cp-pill:hover{
  border-color: var(--primary);
  color: var(--primary);
}

.cp-pill.is-active{
  border-color: var(--primary);
  background-color: var(--primary);
  color: hsl(var(--static-white));
}

.cp-pill.is-active:hover{
  color: hsl(var(--static-white));
}

.cp-pill--niche{
  cursor: pointer;
}

.cp-badge-verified{
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  border-radius: 9999px;
  background-color: var(--blue);
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
  font-size: 11px;
  font-weight: 600;
  color: hsl(var(--static-white));
}

.cp-badge-feature{
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  border-radius: 9999px;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
  font-size: 11px;
  font-weight: 600;
  background: linear-gradient(90deg, #E118D9 0%, #E19C11 100%);
  color: #fff;
}

.cp-badge-token{
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  border-radius: 0.375rem;
  background-color: hsl(var(--static-dark));
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  font-size: 12px;
  font-weight: 600;
  color: hsl(var(--static-white));
}

.cp-badge-token img{
  height: 0.875rem;
  width: 0.875rem;
}

/* ----- Browse page ----- */

.cp-browse-hero{
  position: relative;
  width: 100%;
  overflow: hidden;
}

@media screen and (max-width:675px) {
  .common-que>div:hover .cp-browse-hero,
    .common-que>div.active .cp-browse-hero {
    display: block;
  }
}

a.block.text-center.cp-browse-hero.generate-link.overflow-hidden.group.rounded-2xl.hover\:-bg-white.drop-shadow-xl {
  animation: fadeIn .5s linear;
}

a.block.text-center.w-full.generate-link.cp-browse-hero.group.rounded-2xl.hover\:-bg-white.drop-shadow-xl {
  animation: fadeIn .5s linear;
}

.cp-browse-hero {
  background:
    radial-gradient(1200px 400px at 20% 0%, rgba(250, 61, 114, 0.18), transparent 60%),
    radial-gradient(900px 400px at 90% 100%, rgba(136, 12, 131, 0.22), transparent 60%),
    linear-gradient(180deg, var(--background-dark) 0%, var(--dark-bg) 100%);
}

.cp-search{
  position: relative;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 42rem;
}

@media screen and (max-width:675px) {
  .common-que>div:hover .cp-search,
    .common-que>div.active .cp-search {
    display: block;
  }
}

a.block.text-center.cp-search.generate-link.overflow-hidden.group.rounded-2xl.hover\:-bg-white.drop-shadow-xl {
  animation: fadeIn .5s linear;
}

.cp-search input{
  width: 100%;
  border-radius: 0.75rem;
  border-width: 1px;
  border-color: transparent;
  background-color: var(--static-transparent-white);
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  padding-left: 3rem;
  padding-right: 1rem;
  font-size: 15px;
  font-weight: 500;
  color: hsl(var(--static-white));
}

[dir=rtl] .cp-search input{
  padding-left: 1rem;
  padding-right: unset;
  padding-left: unset;
  padding-right: 3rem;
}

@media screen and (max-width:675px) {
  .common-que>div:hover .cp-search input,
    .common-que>div.active .cp-search input {
    display: block;
  }
}

a.block.text-center.cp-search input.generate-link.overflow-hidden.group.rounded-2xl.hover\:-bg-white.drop-shadow-xl {
  animation: fadeIn .5s linear;
}

.cp-search input::-moz-placeholder{
  color: hsl(var(--static-lightgray));
}

.cp-search input::placeholder{
  color: hsl(var(--static-lightgray));
}

.cp-search input:focus{
  border-color: var(--primary);
  outline: 2px solid transparent;
  outline-offset: 2px;
}

@media (max-width: 767px) {
  /* Community CTA button - smaller on mobile */

  /* Community CTA container - move up on mobile to avoid overlapping text/tags */

  /* Bot profile picture - smaller on mobile */

  /* Adjust bottom padding for mobile safe area */

  .video-feed-item .cp-search-icon.bottom-0 {
    padding-bottom: max(1.25rem, env(safe-area-inset-bottom));
  }
}

@media (prefers-contrast: high) {
  .video-feed-item .cp-search-icon.bottom-0 {
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 1) 0%,
        rgba(0, 0, 0, 0.9) 40%,
        rgba(0, 0, 0, 0.5) 70%,
        transparent 100%
      );
  }
}

@media (max-width: 767px) and (orientation: landscape) {
  .video-feed-item .cp-search-icon.bottom-0 {
    padding: 1rem 1.5rem 1rem;
  }

  /* Community CTA button - no size override in landscape */
}

.cp-search-icon{
  position: absolute;
  top: 50%;
  left: 1rem;
  height: 1.25rem;
  width: 1.25rem;
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  color: hsl(var(--static-lightgray));
}

.cp-filter-bar{
  margin-top: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

@media (max-width: 767px) {
  .swap-out>.cp-filter-bar {
    justify-content: center;
  }
}

@media (max-width: 640px) {
  .common.cp-filter-bar.right-side-bottom-bar-btns {
    gap: 5px;
    padding-left: 0;
  }
}

.cp-creator-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
}

@media (max-width: 991px){
  .cp-creator-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 575px){
  .cp-creator-grid{
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 1rem;
  }
}

.cp-creator-card{
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 1rem;
  border-width: 1px;
  border-color: var(--lightgray);
  background-color: var(--light-bg);
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

.dark .choose-item .cp-creator-card {
  filter: brightness(0) invert(1);
}

@media (max-width: 767px) {
  .swap-out>.cp-creator-card {
    justify-content: center;
  }
}

@media (max-width: 640px) {
  .common.cp-creator-card.right-side-bottom-bar-btns {
    gap: 5px;
    padding-left: 0;
  }
}

a.block.text-center.w-full.generate-link.overflow-hidden.group.cp-creator-card.hover\:-bg-white.drop-shadow-xl {
  animation: fadeIn .5s linear;
}

a.block.text-center.w-full.generate-link.cp-creator-card.group.rounded-2xl.hover\:-bg-white.drop-shadow-xl {
  animation: fadeIn .5s linear;
}

.cp-creator-card:hover{
  --tw-translate-y: -0.125rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  border-color: var(--primary);
  --tw-shadow: 2px 5px 4px 0 rgba(0,0,0,0.25);
  --tw-shadow-colored: 2px 5px 4px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.cp-creator-card__banner{
  position: relative;
  height: 8rem;
  width: 100%;
  overflow: hidden;
  background-color: var(--dark-bg);
}

@media screen and (max-width:675px) {
  .common-que>div:hover .cp-creator-card__banner,
    .common-que>div.active .cp-creator-card__banner {
    display: block;
  }
}

a.block.text-center.cp-creator-card__banner.generate-link.overflow-hidden.group.rounded-2xl.hover\:-bg-white.drop-shadow-xl {
  animation: fadeIn .5s linear;
}

a.block.text-center.w-full.generate-link.cp-creator-card__banner.group.rounded-2xl.hover\:-bg-white.drop-shadow-xl {
  animation: fadeIn .5s linear;
}

@media (max-width: 575px){
  .cp-creator-card__banner{
    height: 7rem;
  }
}

.cp-creator-card__banner img{
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

@media screen and (max-width:675px) {
  .common-que>div:hover .cp-creator-card__banner img,
    .common-que>div.active .cp-creator-card__banner img {
    display: block;
  }
}

a.block.text-center.cp-creator-card__banner img.generate-link.overflow-hidden.group.rounded-2xl.hover\:-bg-white.drop-shadow-xl {
  animation: fadeIn .5s linear;
}

@media (max-width: 767px) {
  /* Community CTA button - smaller on mobile */

  /* Community CTA container - move up on mobile to avoid overlapping text/tags */

  /* Bot profile picture - smaller on mobile */

  /* Adjust bottom padding for mobile safe area */

  .video-feed-item .cp-creator-card__avatar.bottom-0 {
    padding-bottom: max(1.25rem, env(safe-area-inset-bottom));
  }
}

@media (prefers-contrast: high) {
  .video-feed-item .cp-creator-card__avatar.bottom-0 {
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 1) 0%,
        rgba(0, 0, 0, 0.9) 40%,
        rgba(0, 0, 0, 0.5) 70%,
        transparent 100%
      );
  }
}

@media (max-width: 767px) and (orientation: landscape) {
  .video-feed-item .cp-creator-card__avatar.bottom-0 {
    padding: 1rem 1.5rem 1rem;
  }

  /* Community CTA button - no size override in landscape */
}

.cp-creator-card__avatar{
  position: absolute;
  bottom: -1.75rem;
  left: 1.25rem;
  height: 3.5rem;
  width: 3.5rem;
  overflow: hidden;
  border-radius: 9999px;
  border-width: 4px;
  border-color: var(--light-bg);
  background-color: var(--dark-bg);
}

a.block.text-center.w-full.generate-link.cp-creator-card__avatar.group.rounded-2xl.hover\:-bg-white.drop-shadow-xl {
  animation: fadeIn .5s linear;
}

.cp-creator-card__avatar img{
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

@media screen and (max-width:675px) {
  .common-que>div:hover .cp-creator-card__avatar img,
    .common-que>div.active .cp-creator-card__avatar img {
    display: block;
  }
}

a.block.text-center.cp-creator-card__avatar img.generate-link.overflow-hidden.group.rounded-2xl.hover\:-bg-white.drop-shadow-xl {
  animation: fadeIn .5s linear;
}

.cp-creator-card__body{
  display: flex;
  flex-grow: 1;
  flex-direction: column;
  gap: 0.75rem;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  padding-top: 2.5rem;
  padding-bottom: 1.25rem;
}

@media (max-width: 767px) {
  .swap-out>.cp-creator-card__body {
    justify-content: center;
  }
}

@media (max-width: 640px) {
  .common.cp-creator-card__body.right-side-bottom-bar-btns {
    gap: 5px;
    padding-left: 0;
  }
}

.cp-creator-card__name{
  margin: 0px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--title);
}

.cp-creator-card__handle{
  font-size: 13px;
  color: var(--darkgray);
}

.cp-creator-card__bio {
  margin: 0px;
  font-size: 13px;
  color: var(--bodytext);
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.cp-creator-card__stats{
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 12px;
  color: var(--darkgray);
}

@media (max-width: 767px) {
  .swap-out>.cp-creator-card__stats {
    justify-content: center;
  }
}

@media (max-width: 640px) {
  .common.cp-creator-card__stats.right-side-bottom-bar-btns {
    gap: 5px;
    padding-left: 0;
  }
}

.cp-creator-card__stats strong{
  font-weight: 600;
  color: var(--title);
}

.cp-creator-card__cta{
  margin-top: 0.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 0.5rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  font-size: 13px;
  font-weight: 600;
  background: linear-gradient(90deg, #E118D9 0%, #E19C11 100%);
  color: #fff;
}

.cp-empty{
  grid-column: 1 / -1;
  padding-top: 4rem;
  padding-bottom: 4rem;
  text-align: center;
  font-size: 14px;
  color: var(--darkgray);
}

a.block.cp-empty.w-full.generate-link.overflow-hidden.group.rounded-2xl.hover\:-bg-white.drop-shadow-xl {
  animation: fadeIn .5s linear;
}

/* ----- Profile page ----- */

.cp-profile-banner{
  position: relative;
  width: 100%;
  overflow: hidden;
  background-color: var(--dark-bg);
}

@media screen and (max-width:675px) {
  .common-que>div:hover .cp-profile-banner,
    .common-que>div.active .cp-profile-banner {
    display: block;
  }
}

a.block.text-center.cp-profile-banner.generate-link.overflow-hidden.group.rounded-2xl.hover\:-bg-white.drop-shadow-xl {
  animation: fadeIn .5s linear;
}

a.block.text-center.w-full.generate-link.cp-profile-banner.group.rounded-2xl.hover\:-bg-white.drop-shadow-xl {
  animation: fadeIn .5s linear;
}

.cp-profile-banner {
  aspect-ratio: 4 / 1;
  max-height: 280px;
  min-height: 160px;
}

@media (max-width: 575px) {
  .cp-profile-banner {
    aspect-ratio: 3 / 1;
    min-height: 140px;
  }
}

.cp-profile-banner img{
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

@media screen and (max-width:675px) {
  .common-que>div:hover .cp-profile-banner img,
    .common-que>div.active .cp-profile-banner img {
    display: block;
  }
}

a.block.text-center.cp-profile-banner img.generate-link.overflow-hidden.group.rounded-2xl.hover\:-bg-white.drop-shadow-xl {
  animation: fadeIn .5s linear;
}

.cp-profile-banner img {
  -o-object-position: center 35%;
     object-position: center 35%;
}

.cp-profile-banner::after {
  content: "";
}

@media (max-width: 767px) {
  /* Community CTA button - smaller on mobile */

  /* Community CTA container - move up on mobile to avoid overlapping text/tags */

  /* Bot profile picture - smaller on mobile */

  /* Adjust bottom padding for mobile safe area */

  .video-feed-item .cp-profile-banner.bottom-0::after {
    padding-bottom: max(1.25rem, env(safe-area-inset-bottom));
  }
}

@media (prefers-contrast: high) {
  .video-feed-item .cp-profile-banner.bottom-0::after {
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 1) 0%,
        rgba(0, 0, 0, 0.9) 40%,
        rgba(0, 0, 0, 0.5) 70%,
        transparent 100%
      );
  }
}

@media (max-width: 767px) and (orientation: landscape) {
  .video-feed-item .cp-profile-banner.bottom-0::after {
    padding: 1rem 1.5rem 1rem;
  }

  /* Community CTA button - no size override in landscape */
}

.cp-profile-banner::after{
  pointer-events: none;
  position: absolute;
  inset: 0px;
  background: linear-gradient(180deg, rgba(0,0,0,0.05) 40%, rgba(0,0,0,0.75) 100%);
}

.cp-profile-header{
  position: relative;
  z-index: 10;
  margin-top: -4rem;
  display: flex;
  align-items: flex-end;
  gap: 1.5rem;
}

.chat-main.active .tabs .cp-profile-header {
  display: none;
}

@media (max-width: 767px) {
  .swap-out>.cp-profile-header {
    justify-content: center;
  }
}

@media (max-width: 640px) {
  .common.cp-profile-header.right-side-bottom-bar-btns {
    gap: 5px;
    padding-left: 0;
  }
}

@media (max-width: 768px){
  .cp-profile-header{
    margin-top: -3rem;
  }
}

@media (max-width: 575px){
  .cp-profile-header{
    margin-top: -2.5rem;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }
}

.cp-profile-avatar{
  height: 8rem;
  width: 8rem;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: 9999px;
  border-width: 4px;
  border-color: var(--bgbody);
  background-color: var(--dark-bg);
}

a.block.text-center.w-full.generate-link.cp-profile-avatar.group.rounded-2xl.hover\:-bg-white.drop-shadow-xl {
  animation: fadeIn .5s linear;
}

@media (max-width: 575px){
  .cp-profile-avatar{
    height: 6rem;
    width: 6rem;
  }
}

.cp-profile-avatar img{
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

@media screen and (max-width:675px) {
  .common-que>div:hover .cp-profile-avatar img,
    .common-que>div.active .cp-profile-avatar img {
    display: block;
  }
}

a.block.text-center.cp-profile-avatar img.generate-link.overflow-hidden.group.rounded-2xl.hover\:-bg-white.drop-shadow-xl {
  animation: fadeIn .5s linear;
}

.cp-profile-identity{
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding-bottom: 0.5rem;
}

@media (max-width: 767px) {
  .swap-out>.cp-profile-identity {
    justify-content: center;
  }
}

@media (max-width: 640px) {
  .common.cp-profile-identity.right-side-bottom-bar-btns {
    gap: 5px;
    padding-left: 0;
  }
}

.cp-profile-name{
  margin: 0px;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--title);
}

.cp-profile-handle{
  font-size: 14px;
  color: var(--darkgray);
}

.cp-profile-meta{
  margin-top: 0.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.right-side-bottom-bar-2-wrap p.cp-profile-meta {
  font-size: 20px;
}

@media (max-width: 767px) {
  .swap-out>.cp-profile-meta {
    justify-content: center;
  }

  .right-side-bottom-bar-2-wrap p.cp-profile-meta {
    font-size: 20px;
    margin-bottom: 10px;
  }
}

@media (max-width: 640px) {
  .common.cp-profile-meta.right-side-bottom-bar-btns {
    gap: 5px;
    padding-left: 0;
  }
}

.cp-profile-bio{
  margin-top: 1.5rem;
  max-width: 48rem;
  font-size: 14px;
  color: var(--bodytext);
}

.cp-stats-row{
  margin-top: 2rem;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  border-radius: 1rem;
  border-width: 1px;
  border-color: var(--lightgray);
  background-color: var(--light-bg);
  padding: 1.25rem;
}

a.block.text-center.w-full.generate-link.overflow-hidden.group.cp-stats-row.hover\:-bg-white.drop-shadow-xl {
  animation: fadeIn .5s linear;
}

@media (max-width: 575px){
  .cp-stats-row{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.cp-stat{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
}

@media (max-width: 767px) {
  .swap-out>.cp-stat {
    justify-content: center;
  }
}

@media (max-width: 640px) {
  .common.cp-stat.right-side-bottom-bar-btns {
    gap: 5px;
    padding-left: 0;
  }
}

.cp-stat__value{
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  color: var(--title);
}

@media (max-width: 575px){
  .cp-stat__value{
    font-size: 18px;
  }
}

.cp-stat__label{
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.025em;
  color: var(--darkgray);
}

.chat-main.active .tabs .cp-stat__label {
  display: none;
}

.cp-cta-row{
  margin-top: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

@media (max-width: 767px) {
  .swap-out>.cp-cta-row {
    justify-content: center;
  }
}

@media (max-width: 640px) {
  .common.cp-cta-row.right-side-bottom-bar-btns {
    gap: 5px;
    padding-left: 0;
  }
}

.cp-btn-primary{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 0.75rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  font-size: 14px;
  font-weight: 600;
  background: linear-gradient(90deg, #E118D9 0%, #E19C11 100%);
  color: #fff;
}

.cp-btn-primary:hover {
  filter: brightness(1.05);
}

.cp-btn-secondary{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 0.75rem;
  border-width: 2px;
  border-color: var(--primary);
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  font-size: 14px;
  font-weight: 600;
  color: var(--primary);
  background-color: transparent;
}

.cp-btn-secondary:hover{
  background-color: var(--primary);
  color: hsl(var(--static-white));
}

.cp-btn-ghost{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 0.75rem;
  border-width: 1px;
  border-color: var(--lightgray);
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  padding-left: 1rem;
  padding-right: 1rem;
  font-size: 14px;
  font-size: calc(13px + (14 - 13) * ((100vw - 320px) / (1920 - 320)));
  line-height: 1.35;
  font-weight: 500;
  color: var(--body);
  background-color: transparent;
}

.cp-btn-ghost:hover{
  border-color: var(--primary);
  color: var(--primary);
}

.cp-tabs{
  margin-top: 2.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  overflow-x: auto;
  border-bottom-width: 1px;
  border-color: var(--lightgray);
}

@media (max-width: 767px) {
  .swap-out>.cp-tabs {
    justify-content: center;
  }
}

@media (max-width: 640px) {
  .common.cp-tabs.right-side-bottom-bar-btns {
    gap: 5px;
    padding-left: 0;
  }
}

.cp-tab{
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  white-space: nowrap;
  border-bottom-width: 2px;
  border-color: transparent;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  font-size: 14px;
  font-weight: 500;
  color: var(--darkgray);
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

.cp-tab:hover{
  color: var(--primary);
}

.cp-tab.is-active{
  border-color: var(--primary);
  color: var(--title);
}

.cp-tab__count{
  border-radius: 9999px;
  background-color: var(--lightgray);
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
  font-size: 11px;
  color: var(--darkgray);
}

.cp-content-grid{
  margin-top: 2rem;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
}

@media (max-width: 768px){
  .cp-content-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 575px){
  .cp-content-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
  }
}

@media (max-width: 425px){
  .cp-content-grid{
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
}

.cp-content-card{
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 1rem;
  border-width: 1px;
  border-color: var(--lightgray);
  background-color: var(--light-bg);
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

.dark .choose-item .cp-content-card {
  filter: brightness(0) invert(1);
}

@media (max-width: 767px) {
  .swap-out>.cp-content-card {
    justify-content: center;
  }
}

@media (max-width: 640px) {
  .common.cp-content-card.right-side-bottom-bar-btns {
    gap: 5px;
    padding-left: 0;
  }
}

a.block.text-center.w-full.generate-link.overflow-hidden.group.cp-content-card.hover\:-bg-white.drop-shadow-xl {
  animation: fadeIn .5s linear;
}

a.block.text-center.w-full.generate-link.cp-content-card.group.rounded-2xl.hover\:-bg-white.drop-shadow-xl {
  animation: fadeIn .5s linear;
}

.cp-content-card:hover{
  --tw-translate-y: -0.125rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.cp-content-card__media{
  position: relative;
  width: 100%;
  overflow: hidden;
  background-color: var(--dark-bg);
}

@media screen and (max-width:675px) {
  .common-que>div:hover .cp-content-card__media,
    .common-que>div.active .cp-content-card__media {
    display: block;
  }
}

a.block.text-center.cp-content-card__media.generate-link.overflow-hidden.group.rounded-2xl.hover\:-bg-white.drop-shadow-xl {
  animation: fadeIn .5s linear;
}

a.block.text-center.w-full.generate-link.cp-content-card__media.group.rounded-2xl.hover\:-bg-white.drop-shadow-xl {
  animation: fadeIn .5s linear;
}

.cp-content-card__media {
  aspect-ratio: 4 / 5;
}

.cp-content-card__media img{
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
}

@media screen and (max-width:675px) {
  .common-que>div:hover .cp-content-card__media img,
    .common-que>div.active .cp-content-card__media img {
    display: block;
  }
}

a.block.text-center.cp-content-card__media img.generate-link.overflow-hidden.group.rounded-2xl.hover\:-bg-white.drop-shadow-xl {
  animation: fadeIn .5s linear;
}

.cp-content-card:hover .cp-content-card__media img {
  transform: scale(1.03);
}

.cp-content-card__media--locked img {
  filter: blur(18px) brightness(0.6);
  transform: scale(1.1);
}

@media (max-width: 767px) {
  /* Community CTA button - smaller on mobile */

  /* Community CTA container - move up on mobile to avoid overlapping text/tags */

  /* Bot profile picture - smaller on mobile */

  /* Adjust bottom padding for mobile safe area */

  .video-feed-item .cp-content-card__lock-overlay.bottom-0 {
    padding-bottom: max(1.25rem, env(safe-area-inset-bottom));
  }
}

@media (prefers-contrast: high) {
  .video-feed-item .cp-content-card__lock-overlay.bottom-0 {
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 1) 0%,
        rgba(0, 0, 0, 0.9) 40%,
        rgba(0, 0, 0, 0.5) 70%,
        transparent 100%
      );
  }
}

@media (max-width: 767px) and (orientation: landscape) {
  .video-feed-item .cp-content-card__lock-overlay.bottom-0 {
    padding: 1rem 1.5rem 1rem;
  }

  /* Community CTA button - no size override in landscape */
}

.cp-content-card__lock-overlay{
  position: absolute;
  inset: 0px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  text-align: center;
  color: hsl(var(--static-white));
}

@media (max-width: 767px) {
  .swap-out>.cp-content-card__lock-overlay {
    justify-content: center;
  }
}

@media (max-width: 640px) {
  .common.cp-content-card__lock-overlay.right-side-bottom-bar-btns {
    gap: 5px;
    padding-left: 0;
  }
}

a.block.cp-content-card__lock-overlay.w-full.generate-link.overflow-hidden.group.rounded-2xl.hover\:-bg-white.drop-shadow-xl {
  animation: fadeIn .5s linear;
}

.cp-content-card__lock-overlay {
  background: rgba(0, 0, 0, 0.45);
}

.cp-content-card__lock-overlay svg{
  height: 1.75rem;
  width: 1.75rem;
  opacity: 0.9;
}

.cp-content-card__lock-overlay p{
  margin: 0px;
  font-size: 13px;
  font-weight: 600;
}

@media (max-width: 767px) {
  /* Community CTA button - smaller on mobile */

  /* Community CTA container - move up on mobile to avoid overlapping text/tags */

  /* Bot profile picture - smaller on mobile */

  /* Adjust bottom padding for mobile safe area */

  .video-feed-item .cp-content-card__chip.bottom-0 {
    padding-bottom: max(1.25rem, env(safe-area-inset-bottom));
  }
}

@media (prefers-contrast: high) {
  .video-feed-item .cp-content-card__chip.bottom-0 {
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 1) 0%,
        rgba(0, 0, 0, 0.9) 40%,
        rgba(0, 0, 0, 0.5) 70%,
        transparent 100%
      );
  }
}

@media (max-width: 767px) and (orientation: landscape) {
  .video-feed-item .cp-content-card__chip.bottom-0 {
    padding: 1rem 1.5rem 1rem;
  }

  /* Community CTA button - no size override in landscape */
}

.cp-content-card__chip{
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  border-radius: 0.375rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.025em;
}

.chat-main.active .tabs .cp-content-card__chip {
  display: none;
}

.cp-content-card__chip--free{
  background-color: var(--success);
  color: hsl(var(--static-white));
}

.cp-content-card__chip--sub{
  background-color: var(--blue);
  color: hsl(var(--static-white));
}

.cp-content-card__chip--ppv    {
  background: linear-gradient(90deg, #E118D9 0%, #E19C11 100%);
  color: #fff;
}

@media (max-width: 767px) {
  /* Community CTA button - smaller on mobile */

  /* Community CTA container - move up on mobile to avoid overlapping text/tags */

  /* Bot profile picture - smaller on mobile */

  /* Adjust bottom padding for mobile safe area */

  .video-feed-item .cp-content-card__type-chip.bottom-0 {
    padding-bottom: max(1.25rem, env(safe-area-inset-bottom));
  }
}

@media (prefers-contrast: high) {
  .video-feed-item .cp-content-card__type-chip.bottom-0 {
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 1) 0%,
        rgba(0, 0, 0, 0.9) 40%,
        rgba(0, 0, 0, 0.5) 70%,
        transparent 100%
      );
  }
}

@media (max-width: 767px) and (orientation: landscape) {
  .video-feed-item .cp-content-card__type-chip.bottom-0 {
    padding: 1rem 1.5rem 1rem;
  }

  /* Community CTA button - no size override in landscape */
}

.cp-content-card__type-chip{
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  border-radius: 0.375rem;
  background-color: hsl(var(--static-dark));
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.025em;
  color: hsl(var(--static-white));
}

.chat-main.active .tabs .cp-content-card__type-chip {
  display: none;
}

.cp-content-card__body{
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  padding: 1rem;
}

@media (max-width: 767px) {
  .swap-out>.cp-content-card__body {
    justify-content: center;
  }
}

@media (max-width: 640px) {
  .common.cp-content-card__body.right-side-bottom-bar-btns {
    gap: 5px;
    padding-left: 0;
  }
}

.cp-content-card__title{
  margin: 0px;
  font-size: 14px;
  font-weight: 600;
  color: var(--title);
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

.cp-content-card__caption {
  margin: 0px;
  font-size: 12px;
  color: var(--bodytext);
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.cp-content-card__footer{
  margin-top: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  color: var(--darkgray);
}

.right-side-bottom-bar-2-wrap p.cp-content-card__footer {
  font-size: 20px;
}

@media (max-width: 767px) {
  .swap-out>.cp-content-card__footer {
    justify-content: center;
  }

  .right-side-bottom-bar-2-wrap p.cp-content-card__footer {
    font-size: 20px;
    margin-bottom: 10px;
  }
}

@media (max-width: 640px) {
  .common.cp-content-card__footer.right-side-bottom-bar-btns {
    gap: 5px;
    padding-left: 0;
  }
}

.cp-content-card__like{
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

/* "Post" cards (no media) */

.cp-content-card--post {
  border-left: 3px solid var(--primary);
}

.cp-content-card--post .cp-content-card__media {
  display: none;
}

.cp-content-card--post .cp-content-card__body{
  gap: 0.5rem;
  padding: 1.25rem;
}

.cp-content-card--post .cp-content-card__title {
  font-size: 15px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.cp-content-card--post .cp-content-card__caption{
  font-size: 13px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}

.cp-content-card--post::before {
  content: "POST";
  margin-inline-start: 1.25rem;
  margin-top: 1.25rem;
  display: inline-block;
  align-self: flex-start;
  border-radius: 0.375rem;
  background-color: var(--primary);
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.025em;
  color: hsl(var(--static-white));
}

.chat-main.active .tabs .cp-content-card--post::before {
  display: none;
}

/* Sentinel */

.cp-sentinel{
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}

@media (max-width: 767px) {
  .swap-out>.cp-sentinel {
    justify-content: center;
  }
}

@media (max-width: 640px) {
  .common.cp-sentinel.right-side-bottom-bar-btns {
    gap: 5px;
    padding-left: 0;
  }
}

.cp-sentinel__spinner{
  height: 1.5rem;
  width: 1.5rem;
}

@keyframes spin{
  to{
    transform: rotate(360deg);
  }
}

.cp-sentinel__spinner{
  animation: spin 1s linear infinite;
  border-radius: 9999px;
  border-width: 2px;
  border-color: var(--lightgray);
  border-top-color: var(--primary);
}

/* ----- Apply form ----- */

.cp-apply-shell{
  margin-left: auto;
  margin-right: auto;
  max-width: 48rem;
  padding-top: 3rem;
  padding-bottom: 3rem;
}

@media (max-width: 575px){
  .cp-apply-shell{
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }
}

.cp-apply-card{
  border-radius: 1rem;
  border-width: 1px;
  border-color: var(--lightgray);
  background-color: var(--light-bg);
  padding: 2rem;
}

a.block.text-center.w-full.generate-link.overflow-hidden.group.cp-apply-card.hover\:-bg-white.drop-shadow-xl {
  animation: fadeIn .5s linear;
}

@media (max-width: 575px){
  .cp-apply-card{
    padding: 1.25rem;
  }
}

.best-choice .cp-form-label::before {
  box-shadow: none;
  background-image: linear-gradient(to bottom, rgba(18, 19, 22, 0) 40%, rgba(18, 19, 22, 0.6) 90%);
}

.cp-form-label{
  margin-bottom: 0.5rem;
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--title);
}

:root.dark .cp-form-label.shadow-white:before {
  background: linear-gradient(180deg, rgb(255 255 255 / 0%) 0%, #121316 100%);
}

.cp-form-label:before{
  box-shadow: inset 0px -200px 100px -13px var(--dark-shadow);
  transition: all 0.3s ease;
  border-radius: 16px;
  top: 0;
  width: 100%;
  bottom: 0;
  left: 0;
  z-index: 1;
}

.cp-form-label.shadow-white:before{
  border-radius: 0;
  box-shadow: none;
  background: linear-gradient(180deg, rgb(255 255 255 / 0%) 0%, #F2F3F5 100%);
}

.cp-form-label.shadow-light:before{
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(68, 68, 68, 0.00) 0%, #444 100%);
}

.tab-content-wrap .cp-form-label:before {
  border-radius: 0.5rem;
}

a.cp-form-label.text-center.w-full.generate-link.overflow-hidden.group.rounded-2xl.hover\:-bg-white.drop-shadow-xl {
  animation: fadeIn .5s linear;
}

.best-choice .cp-form-help::before {
  box-shadow: none;
  background-image: linear-gradient(to bottom, rgba(18, 19, 22, 0) 40%, rgba(18, 19, 22, 0.6) 90%);
}

.cp-form-help{
  margin-top: 0.25rem;
  display: block;
  font-size: 12px;
  color: var(--darkgray);
}

:root.dark .cp-form-help.shadow-white:before {
  background: linear-gradient(180deg, rgb(255 255 255 / 0%) 0%, #121316 100%);
}

.cp-form-help:before{
  box-shadow: inset 0px -200px 100px -13px var(--dark-shadow);
  transition: all 0.3s ease;
  border-radius: 16px;
  top: 0;
  width: 100%;
  bottom: 0;
  left: 0;
  z-index: 1;
}

.cp-form-help.shadow-white:before{
  border-radius: 0;
  box-shadow: none;
  background: linear-gradient(180deg, rgb(255 255 255 / 0%) 0%, #F2F3F5 100%);
}

.cp-form-help.shadow-light:before{
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(68, 68, 68, 0.00) 0%, #444 100%);
}

.tab-content-wrap .cp-form-help:before {
  border-radius: 0.5rem;
}

a.cp-form-help.text-center.w-full.generate-link.overflow-hidden.group.rounded-2xl.hover\:-bg-white.drop-shadow-xl {
  animation: fadeIn .5s linear;
}

.cp-form-input,
.cp-form-textarea{
  width: 100%;
  border-radius: 0.75rem;
  border-width: 1px;
  border-color: var(--lightgray);
  background-color: var(--bgbody);
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  font-size: calc(13px + (14 - 13) * ((100vw - 320px) / (1920 - 320)));
  line-height: 1.35;
  font-size: 14px;
  color: var(--body);
}

@media screen and (max-width:675px) {
  .common-que>div:hover .cp-form-input,
    .common-que>div.active .cp-form-input,.common-que>div:hover 
.cp-form-textarea,
    .common-que>div.active 
.cp-form-textarea {
    display: block;
  }
}

a.block.text-center.cp-form-input.generate-link.overflow-hidden.group.rounded-2xl.hover\:-bg-white.drop-shadow-xl,a.block.text-center
.cp-form-textarea.generate-link.overflow-hidden.group.rounded-2xl.hover\:-bg-white.drop-shadow-xl {
  animation: fadeIn .5s linear;
}

.cp-form-input::-moz-placeholder, .cp-form-textarea::-moz-placeholder{
  color: var(--darkgray);
}

.cp-form-input::placeholder,
.cp-form-textarea::placeholder{
  color: var(--darkgray);
}

.cp-form-input:focus,
.cp-form-textarea:focus{
  border-color: var(--primary);
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.cp-form-textarea{
  min-height: 120px;
  resize: vertical;
}

.cp-form-tag-grid{
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

@media (max-width: 767px) {
  .swap-out>.cp-form-tag-grid {
    justify-content: center;
  }
}

@media (max-width: 640px) {
  .common.cp-form-tag-grid.right-side-bottom-bar-btns {
    gap: 5px;
    padding-left: 0;
  }
}

.cp-form-tag-grid input[type="checkbox"]{
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.public-gallery .cp-form-tag-grid input[type="checkbox"] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.cp-form-tag-grid label{
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  border-radius: 9999px;
  border-width: 1px;
  border-color: var(--lightgray);
  background-color: var(--light-bg);
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  font-size: 12px;
  font-size: calc(13px + (14 - 13) * ((100vw - 320px) / (1920 - 320)));
  line-height: 1.35;
  font-weight: 500;
  color: var(--body);
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

.cp-form-tag-grid label:hover{
  border-color: var(--primary);
  color: var(--primary);
}

.cp-form-tag-grid label.is-active{
  border-color: var(--primary);
  background-color: var(--primary);
  color: hsl(var(--static-white));
}

.cp-form-tag-grid label.is-active:hover{
  color: hsl(var(--static-white));
}

.ba-bot-card.cp-form-tag-grid input[type="checkbox"]:checked + label {
  background: rgba(250, 61, 114, 0.08);
  border-color: #FA3D72;
}

.ba-pill.cp-form-tag-grid input[type="checkbox"]:checked + label {
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
  font-weight: 600;
}

.dark .ba-pill.cp-form-tag-grid input[type="checkbox"]:checked + label {
  background: #0f0f0f;
}

.dark .ba-bot-card.cp-form-tag-grid input[type="checkbox"]:checked + label {
  background: rgba(250, 61, 114, 0.12);
}

.ho-tag.cp-form-tag-grid input[type="checkbox"]:checked + label {
  background: var(--primary, #fa3d72);
  border-color: var(--primary, #fa3d72);
  color: #fff;
}

.ba-toolbar-nav__link.cp-form-tag-grid input[type="checkbox"]:checked + label {
  background: var(--primary);
  color: var(--staticWhite, #fff);
}

.pv-step-btn.cp-form-tag-grid input[type="checkbox"]:checked + label {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}

.pv-step.cp-form-tag-grid input[type="checkbox"]:checked + label {
  display: block;
}

.phd-pill.cp-form-tag-grid input[type="checkbox"]:checked + label {
  background: rgba(250, 61, 114, 0.12);
  border-color: var(--primary, #FA3D72);
  color: var(--primary, #FA3D72);
  font-weight: 600;
}

.phd-tab.cp-form-tag-grid input[type="checkbox"]:checked + label {
  color: var(--primary, #FA3D72);
  border-bottom-color: var(--primary, #FA3D72);
  font-weight: 600;
}

.phd-tab-panel.cp-form-tag-grid input[type="checkbox"]:checked + label {
  display: block;
}

.dark .phd-pill.cp-form-tag-grid input[type="checkbox"]:checked + label {
  background: rgba(250, 61, 114, 0.2);
}

.public-gallery-lightbox .public-gallery-lightbox-reactions .public-gallery-reaction.cp-form-tag-grid input[type="checkbox"]:checked + label {
  background: var(--primary);
  border-color: var(--primary);
  color: hsl(var(--static-white));
}

.public-gallery-lightbox .public-gallery-lightbox-reactions .public-gallery-reaction.cp-form-tag-grid input[type="checkbox"]:checked + label .public-gallery-reaction-count {
  color: hsl(var(--static-white));
}

.public-gallery-reaction.cp-form-tag-grid input[type="checkbox"]:checked + label {
  color: var(--primary);
}

.public-gallery-reaction.cp-form-tag-grid input[type="checkbox"]:checked + label .public-gallery-reaction-count {
  color: var(--primary);
}

.public-gallery-edit-preset.cp-form-tag-grid input[type="checkbox"]:checked + label {
  border-color: var(--primary);
  background: var(--primary);
  color: hsl(var(--static-white));
}

.cp-pill.cp-form-tag-grid input[type="checkbox"]:checked + label{
  border-color: var(--primary);
  background-color: var(--primary);
  color: hsl(var(--static-white));
}

.cp-pill.cp-form-tag-grid input[type="checkbox"]:checked + label:hover{
  color: hsl(var(--static-white));
}

.cp-tab.cp-form-tag-grid input[type="checkbox"]:checked + label{
  border-color: var(--primary);
  color: var(--title);
}

.cr-tag-pill.cp-form-tag-grid input[type="checkbox"]:checked + label {
  background: linear-gradient(to right, var(--gre-secondary), var(--gre-primary));
}

.cp-toast-success{
  margin-bottom: 1.5rem;
  border-radius: 0.75rem;
  border-width: 1px;
  border-color: var(--success);
  padding: 1rem;
  font-size: 14px;
  font-weight: 500;
  color: var(--success);
  background-color: rgba(0, 128, 0, 0.08);
}

/* ----- Dashboard ----- */

.cp-dashboard-grid{
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 1.5rem;
}

@media (max-width: 575px){
  .cp-dashboard-grid{
    gap: 0.75rem;
  }
}

.cp-metric-card{
  grid-column: span 3 / span 3;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  border-radius: 1rem;
  border-width: 1px;
  border-color: var(--lightgray);
  background-color: var(--light-bg);
  padding: 1.25rem;
}

@media (max-width: 767px) {
  .swap-out>.cp-metric-card {
    justify-content: center;
  }
}

@media (max-width: 640px) {
  .common.cp-metric-card.right-side-bottom-bar-btns {
    gap: 5px;
    padding-left: 0;
  }
}

a.block.text-center.w-full.generate-link.overflow-hidden.group.cp-metric-card.hover\:-bg-white.drop-shadow-xl {
  animation: fadeIn .5s linear;
}

@media (max-width: 991px){
  .cp-metric-card{
    grid-column: span 6 / span 6;
  }
}

@media (max-width: 575px){
  .cp-metric-card{
    grid-column: span 12 / span 12;
  }
}

.cp-metric-card__label{
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.025em;
  color: var(--darkgray);
}

.chat-main.active .tabs .cp-metric-card__label {
  display: none;
}

.cp-metric-card__value{
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
  color: var(--title);
}

@media (max-width: 767px) {
  .swap-out>.cp-metric-card__value {
    justify-content: center;
  }
}

@media (max-width: 640px) {
  .common.cp-metric-card__value.right-side-bottom-bar-btns {
    gap: 5px;
    padding-left: 0;
  }
}

.cp-metric-card__value img{
  height: 1.25rem;
  width: 1.25rem;
}

.cp-metric-card__delta{
  font-size: 12px;
  font-weight: 600;
}

.cp-metric-card__delta--up{
  color: var(--success);
}

.cp-metric-card__delta--down{
  color: var(--danger);
}

.cp-panel{
  border-radius: 1rem;
  border-width: 1px;
  border-color: var(--lightgray);
  background-color: var(--light-bg);
  padding: 1.5rem;
}

a.block.text-center.w-full.generate-link.overflow-hidden.group.cp-panel.hover\:-bg-white.drop-shadow-xl {
  animation: fadeIn .5s linear;
}

@media (max-width: 575px){
  .cp-panel{
    padding: 1rem;
  }
}

.cp-panel__title{
  margin: 0px;
  margin-bottom: 1rem;
  font-size: 16px;
  font-weight: 700;
  color: var(--title);
}

.cp-chart-placeholder{
  position: relative;
  display: flex;
  height: 16rem;
  width: 100%;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 0.75rem;
  border-width: 1px;
  border-style: dashed;
  border-color: var(--lightgray);
  background-color: var(--bgbody);
  font-size: 13px;
  color: var(--darkgray);
}

@media screen and (max-width:675px) {
  .common-que>div:hover .cp-chart-placeholder,
    .common-que>div.active .cp-chart-placeholder {
    display: block;
  }
}

@media (max-width: 767px) {
  .swap-out>.cp-chart-placeholder {
    justify-content: center;
  }
}

@media (max-width: 640px) {
  .common.cp-chart-placeholder.right-side-bottom-bar-btns {
    gap: 5px;
    padding-left: 0;
  }
}

a.block.text-center.cp-chart-placeholder.generate-link.overflow-hidden.group.rounded-2xl.hover\:-bg-white.drop-shadow-xl {
  animation: fadeIn .5s linear;
}

a.block.text-center.w-full.generate-link.cp-chart-placeholder.group.rounded-2xl.hover\:-bg-white.drop-shadow-xl {
  animation: fadeIn .5s linear;
}

.cp-bar-chart{
  display: flex;
  height: 100%;
  width: 100%;
  align-items: flex-end;
  gap: 0.5rem;
  padding: 1rem;
}

.chat-main.active .tabs .cp-bar-chart {
  display: none;
}

@media screen and (max-width:675px) {
  .common-que>div:hover .cp-bar-chart,
    .common-que>div.active .cp-bar-chart {
    display: block;
  }
}

@media (max-width: 767px) {
  .swap-out>.cp-bar-chart {
    justify-content: center;
  }
}

@media (max-width: 640px) {
  .common.cp-bar-chart.right-side-bottom-bar-btns {
    gap: 5px;
    padding-left: 0;
  }
}

a.block.text-center.cp-bar-chart.generate-link.overflow-hidden.group.rounded-2xl.hover\:-bg-white.drop-shadow-xl {
  animation: fadeIn .5s linear;
}

.cp-bar{
  flex: 1 1 0%;
  border-top-left-radius: 0.375rem;
  border-top-right-radius: 0.375rem;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
}

.dark .choose-item .cp-bar {
  filter: brightness(0) invert(1);
}

@media (max-width: 767px) {
  .feature-col .cp-bar {
    padding-bottom: 0;
  }
}

.cp-bar {
  background: linear-gradient(180deg, #E118D9 0%, #E19C11 100%);
  min-height: 4px;
}

.cp-revenue-breakdown{
  margin-top: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.right-side-bottom-bar-2-wrap p.cp-revenue-breakdown {
  font-size: 20px;
}

@media (max-width: 767px) {
  .swap-out>.cp-revenue-breakdown {
    justify-content: center;
  }

  .right-side-bottom-bar-2-wrap p.cp-revenue-breakdown {
    font-size: 20px;
    margin-bottom: 10px;
  }
}

@media (max-width: 640px) {
  .common.cp-revenue-breakdown.right-side-bottom-bar-btns {
    gap: 5px;
    padding-left: 0;
  }
}

.cp-revenue-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  font-size: calc(13px + (14 - 13) * ((100vw - 320px) / (1920 - 320)));
  line-height: 1.35;
  color: var(--body);
}

@media (max-width: 767px) {
  .swap-out>.cp-revenue-row {
    justify-content: center;
  }
}

@media (max-width: 640px) {
  .common.cp-revenue-row.right-side-bottom-bar-btns {
    gap: 5px;
    padding-left: 0;
  }
}

.cp-revenue-row .bar{
  margin-left: 0.75rem;
  margin-right: 0.75rem;
  height: 0.5rem;
  flex-grow: 1;
  overflow: hidden;
  border-radius: 9999px;
  background-color: var(--lightgray);
}

a.block.text-center.w-full.generate-link.cp-revenue-row .bar.group.rounded-2xl.hover\:-bg-white.drop-shadow-xl {
  animation: fadeIn .5s linear;
}

.best-choice .cp-revenue-row .bar > span::before {
  box-shadow: none;
  background-image: linear-gradient(to bottom, rgba(18, 19, 22, 0) 40%, rgba(18, 19, 22, 0.6) 90%);
}

.cp-revenue-row .bar > span{
  display: block;
  height: 100%;
}

:root.dark .cp-revenue-row .bar > span.shadow-white:before {
  background: linear-gradient(180deg, rgb(255 255 255 / 0%) 0%, #121316 100%);
}

.cp-revenue-row .bar > span:before{
  box-shadow: inset 0px -200px 100px -13px var(--dark-shadow);
  transition: all 0.3s ease;
  border-radius: 16px;
  top: 0;
  width: 100%;
  bottom: 0;
  left: 0;
  z-index: 1;
}

.cp-revenue-row .bar > span.shadow-white:before{
  border-radius: 0;
  box-shadow: none;
  background: linear-gradient(180deg, rgb(255 255 255 / 0%) 0%, #F2F3F5 100%);
}

.cp-revenue-row .bar > span.shadow-light:before{
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(68, 68, 68, 0.00) 0%, #444 100%);
}

.tab-content-wrap .cp-revenue-row .bar > span:before {
  border-radius: 0.5rem;
}

a.cp-revenue-row .bar > span.text-center.w-full.generate-link.overflow-hidden.group.rounded-2xl.hover\:-bg-white.drop-shadow-xl {
  animation: fadeIn .5s linear;
}

.cp-revenue-row .bar > span {
  background: linear-gradient(90deg, #E118D9 0%, #E19C11 100%);
}

.cp-notifs-list{
  display: flex;
  flex-direction: column;
}

.cp-notifs-list > :not([hidden]) ~ :not([hidden]){
  --tw-divide-y-reverse: 0;
  border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
  border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
  border-color: var(--lightgray);
}

@media (max-width: 767px) {
  .swap-out>.cp-notifs-list {
    justify-content: center;
  }
}

@media (max-width: 640px) {
  .common.cp-notifs-list.right-side-bottom-bar-btns {
    gap: 5px;
    padding-left: 0;
  }
}

.cp-notif{
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  font-size: 13px;
  font-size: calc(13px + (14 - 13) * ((100vw - 320px) / (1920 - 320)));
  line-height: 1.35;
  color: var(--body);
}

@media (max-width: 767px) {
  .swap-out>.cp-notif {
    justify-content: center;
  }
}

@media (max-width: 640px) {
  .common.cp-notif.right-side-bottom-bar-btns {
    gap: 5px;
    padding-left: 0;
  }
}

.cp-notif__icon{
  display: flex;
  height: 2.25rem;
  width: 2.25rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  border-width: 1px;
  border-color: var(--lightgray);
  background-color: var(--bgbody);
  color: var(--primary);
}

@media (max-width: 767px) {
  .swap-out>.cp-notif__icon {
    justify-content: center;
  }
}

@media (max-width: 640px) {
  .common.cp-notif__icon.right-side-bottom-bar-btns {
    gap: 5px;
    padding-left: 0;
  }
}

.cp-notif__time{
  margin-left: auto;
  white-space: nowrap;
  font-size: 11px;
  color: var(--darkgray);
}

[dir=rtl] .cp-notif__time{
  margin-left: unset;
  margin-right: auto;
}

.cp-notif__time {
  margin-left: auto;
}

[dir=rtl] .cp-notif__time {
  margin-left: unset;
  margin-right: auto;
}

.cp-top-table{
  width: 100%;
}

@media screen and (max-width:675px) {
  .common-que>div:hover .cp-top-table,
    .common-que>div.active .cp-top-table {
    display: block;
  }
}

a.block.text-center.cp-top-table.generate-link.overflow-hidden.group.rounded-2xl.hover\:-bg-white.drop-shadow-xl {
  animation: fadeIn .5s linear;
}

.cp-top-table th{
  border-bottom-width: 1px;
  border-color: var(--lightgray);
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.025em;
  color: var(--darkgray);
}

.chat-main.active .tabs .cp-top-table th {
  display: none;
}

.cp-top-table td{
  border-bottom-width: 1px;
  border-color: var(--lightgray);
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  font-size: 13px;
  font-size: calc(13px + (14 - 13) * ((100vw - 320px) / (1920 - 320)));
  line-height: 1.35;
  color: var(--body);
}

.cp-top-table td:last-child, .cp-top-table th:last-child{
  text-align: right;
}

.cp-coming-soon-banner{
  margin-bottom: 1.5rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 0.375rem;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-size: 12px;
  font-weight: 600;
  color: var(--warning);
  background-color: rgba(255, 186, 47, 0.15);
}

/* ----- Placeholder modal ----- */

.category-divider.cp-placeholder-modal {
  display: none;
}

.tag-filter.cp-placeholder-modal {
  display: none;
}

.home-tags-arrow.cp-placeholder-modal {
  display: none;
}

.ch2-section--custom-add.cp-placeholder-modal {
  display: none;
}

.ch2-advanced__panel.cp-placeholder-modal {
  display: none;
}

.cp-placeholder-modal{
  position: fixed;
  inset: 0px;
  z-index: 50;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.gi-helper-preset.cp-placeholder-modal {
  display: none;
}

.vip-price-toggle.cp-placeholder-modal {
  opacity: 0;
  pointer-events: none;
}

.promo-code-button-content.cp-placeholder-modal {
  display: none;
}

.promo-code-input-container.cp-placeholder-modal {
  display: none;
}

.promo-code-apply-link.cp-placeholder-modal {
  display: none;
}

.gv-toggle-meta.cp-placeholder-modal {
  display: none;
}

.cp-placeholder-modal {
  background: rgba(0, 0, 0, 0.6);
}

.cp-placeholder-modal.is-open{
  display: flex;
}

@media (max-width: 767px) {
  .swap-out>.cp-placeholder-modal.is-open {
    justify-content: center;
  }
}

@media (max-width: 640px) {
  .common.cp-placeholder-modal.is-open.right-side-bottom-bar-btns {
    gap: 5px;
    padding-left: 0;
  }
}

.cp-placeholder-modal__card{
  width: 100%;
  max-width: 28rem;
  border-radius: 1rem;
  border-width: 1px;
  border-color: var(--lightgray);
  background-color: var(--bgbody);
  padding: 1.5rem;
  text-align: center;
}

@media screen and (max-width:675px) {
  .common-que>div:hover .cp-placeholder-modal__card,
    .common-que>div.active .cp-placeholder-modal__card {
    display: block;
  }
}

a.block.text-center.cp-placeholder-modal__card.generate-link.overflow-hidden.group.rounded-2xl.hover\:-bg-white.drop-shadow-xl {
  animation: fadeIn .5s linear;
}

a.block.text-center.w-full.generate-link.overflow-hidden.group.cp-placeholder-modal__card.hover\:-bg-white.drop-shadow-xl {
  animation: fadeIn .5s linear;
}

a.block.cp-placeholder-modal__card.w-full.generate-link.overflow-hidden.group.rounded-2xl.hover\:-bg-white.drop-shadow-xl {
  animation: fadeIn .5s linear;
}

.cp-placeholder-modal__title{
  margin: 0px;
  margin-bottom: 0.5rem;
  font-size: 20px;
  font-weight: 700;
  color: var(--title);
}

.cp-placeholder-modal__body{
  margin-bottom: 1.25rem;
  font-size: 14px;
  color: var(--bodytext);
}

/* /clothes-remover/ scratch-to-reveal landing page. */

/* --- hero --- */

.cr-hero {
  background: linear-gradient(180deg, rgba(255, 54, 247, 0.05) 0%, transparent 100%);
}

.cr-hero-title {
  color: var(--title);
  font-weight: 700;
}

.dark .cr-hero-title {
  color: #ffffff;
}

.cr-hero-accent {
  /* Site brand gradient text (--gre-secondary -> --gre-primary), matching
   * the .text-gradient utility used on the Generate Image / Gen Video heroes.
   * Must inherit the parent h1 font-size, so we override the global
   * `span { font-size }` reset in typography.css and avoid .text-gradent-light
   * (a button-text utility that hard-sets a small size + inline-flex). */
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  background: linear-gradient(to right, var(--gre-secondary), var(--gre-primary));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.cr-hero-subtitle {
  color: var(--bodytext);
  font-size: 15px;
  line-height: 1.5;
}

.dark .cr-hero-subtitle {
  color: #cccccc;
}

/* --- staff bar --- */

.cr-staff-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 20px;
  padding: 10px 14px;
  background: #ffffff;
  border: 1px dashed var(--primary);
  border-radius: 10px;
}

.dark .cr-staff-bar {
  background: #1c1c1c;
}

.cr-staff-badge {
  display: inline-block;
  padding: 2px 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--primary);
  background: rgba(250, 61, 114, 0.12);
  border-radius: 999px;
}

.cr-staff-btn {
  padding: 6px 14px;
  font-size: 14px;
  font-weight: 600;
  color: #ffffff;
  background: var(--primary);
  border-radius: 8px;
}

.cr-staff-btn:hover {
  opacity: 0.9;
}

/* --- SEO content (how-it-works + FAQ) --- */

.cr-seo-h2 {
  color: var(--title);
  font-weight: 700;
  margin: 28px 0 12px;
}

.dark .cr-seo-h2 {
  color: #ffffff;
}

.cr-seo-p {
  color: var(--bodytext);
  font-size: 15px;
  line-height: 1.6;
  margin-bottom: 14px;
}

.dark .cr-seo-p {
  color: #cccccc;
}

.cr-faq {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cr-faq-item {
  border: 1px solid var(--lightgray);
  border-radius: 10px;
  padding: 12px 16px;
}

.cr-faq-q {
  cursor: pointer;
  font-weight: 600;
  color: var(--title);
  list-style: none;
}

.cr-faq-q::-webkit-details-marker {
  display: none;
}

.cr-faq-q::after {
  content: "+";
  float: right;
  color: var(--primary);
  font-weight: 700;
}

.cr-faq-item[open] .cr-faq-q::after {
  content: "−";
}

.dark .cr-faq-q {
  color: #ffffff;
}

.cr-faq-a {
  margin: 10px 0 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--bodytext);
}

.dark .cr-faq-a {
  color: #cccccc;
}

/* --- staff "Preview as user" mode ---
 * When active, hide all staff chrome so the page renders as a normal user sees
 * it, and reveal the normal-user "Undress more" bar. The toggle button itself
 * stays visible so staff can switch back. */

.cr-preview-only {
  display: none;
}

/* shown only in preview mode */

.cr-preview-user .cr-preview-only {
  display: flex;
}

.cr-preview-user .cr-staff-overlay {
  display: none !important;
}

.cr-preview-user .cr-staff-only {
  display: none !important;
}

.cr-preview-user .cr-staff-badge {
  display: none;
}

.cr-preview-user .cr-card-unpublished {
  outline: none;
}

.cr-preview-user .cr-staff-bar {
  border-style: solid;
  border-color: var(--lightgray);
}

.cr-preview-toggle {
  margin-left: auto;
}

/* --- logged-in user "Undress more" bar --- */

.cr-undress-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0 0 20px;
}

.cr-undress-cta {
  padding: 8px 18px;
  font-size: 14px;
  font-weight: 700;
  color: #ffffff;
  border-radius: 999px;
  background: linear-gradient(to right, var(--gre-secondary), var(--gre-primary));
}

.cr-undress-cta:hover {
  opacity: 0.92;
}

.cr-undress-hint {
  font-size: 13px;
  color: var(--bodytext);
}

.dark .cr-undress-hint {
  color: #cccccc;
}

/* --- grid --- */

.cr-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

@media (max-width: 1200px) {
  .cr-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
  }
}

@media (max-width: 991px) {
  .cr-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }
}

@media (max-width: 575px) {
  .cr-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

.cr-card {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  background: #1c1c1c;
  /* dark placeholder while images load */
  aspect-ratio: 3 / 4;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.cr-card-unpublished {
  outline: 2px dashed var(--gre-secondary);
}

/* --- anon reveal-budget lock overlay --- */

.cr-locked-overlay {
  position: absolute;
  inset: 0;
  z-index: 5;
  /* above canvas + cursor */
  display: none;
  /* shown only when card is locked */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 18px;
  text-align: center;
  color: #ffffff;
  background: rgba(0, 0, 0, 0.72);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
}

.cr-card-locked .cr-canvas {
  pointer-events: none;
}

.cr-card-locked .cr-locked-overlay {
  display: flex;
}

.cr-locked-title {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
}

.cr-locked-text {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: #dddddd;
}

.cr-locked-btn {
  margin-top: 6px;
  padding: 8px 18px;
  font-size: 14px;
  font-weight: 700;
  color: #ffffff;
  border-radius: 999px;
  background: linear-gradient(to right, var(--gre-secondary), var(--gre-primary));
}

.cr-locked-btn:hover {
  opacity: 0.92;
}

.cr-canvas-wrap {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.cr-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  pointer-events: none;
}

/* Flash-of-nudity prevention:
 *  - Until JS has painted the canvas, the nude <img> is invisible and the
 *    clothed <img> is shown on top. So the very first thing the user sees
 *    is always the clothed version (no naked-flash on reload).
 *  - When JS finishes painting, it adds .cr-card--ready to the card:
 *    the clothed cover fades out and the canvas (which now holds the
 *    clothed image as scratch-off pixels) takes over.
 */

.cr-img-nude {
  visibility: hidden;
}

.cr-card--ready .cr-img-nude {
  visibility: visible;
}

.cr-img-clothed {
  z-index: 1;
  /* sit above the canvas while loading */
  transition: opacity 120ms ease-out;
}

.cr-card--ready .cr-img-clothed {
  opacity: 0;
  pointer-events: none;
}

.cr-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* pan-y lets a vertical swipe scroll the page natively (so the grid stays
     usable on mobile), while horizontal movement is delivered to our handlers
     for scratching. The JS adds an axis intent-lock on top: a touch only
     starts scratching once the gesture reads as horizontal. */
  touch-action: pan-y;
  cursor: none;
  /* hide native cursor; we draw our own */
}

.cr-card-empty {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #aaaaaa;
  font-size: 14px;
  background: repeating-linear-gradient(45deg,
    #1c1c1c, #1c1c1c 8px,
    #2a2a2a 8px, #2a2a2a 16px);
}

/* Custom brush-size cursor. Pinned to the wrap's top-left so that
 * `transform: translate(x, y)` from JS positions the cursor's CENTER at
 * canvas-local (x, y). The translate uses -50% / -50% to recenter. */

.cr-brush-cursor {
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  /* override any stale -38px margin from old builds */
  width: 76px;
  /* 2 * BRUSH_RADIUS in JS (38) */
  height: 76px;
  border: 2px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45), inset 0 0 0 1px rgba(0, 0, 0, 0.45);
  border-radius: 50%;
  pointer-events: none;
  z-index: 3;
  opacity: 0;
  transition: opacity 120ms;
  will-change: transform;
}

.cr-brush-cursor.is-visible {
  opacity: 1;
}

/* --- First-card scratch tutorial hint (animated hand + coin) ---
 * Teaches the scratch gesture to first-time visitors. Rendered only on the
 * first card (server-side `is_first`), sits above the canvas but below the
 * brush cursor (z 3) and locked overlay (z 5), and never captures pointer
 * events. Shown only once the canvas has painted (.cr-card--ready); hidden
 * once the visitor scratches any card (body.cr-tutorial-done) and never shown
 * over the budget-locked overlay (.cr-card-locked). */

/* Translucent "un-scratched" sheen over the first card's image while the hint
 * plays — a moving diagonal highlight band that reads as a scratch-off coating.
 * Full-bleed, never captures pointer events, clears the moment the hint is
 * dismissed or the card locks. */

.cr-scratch-hint__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  transition: opacity 220ms ease-out;
  background:
    linear-gradient(115deg,
      rgba(255, 255, 255, 0) 38%,
      rgba(255, 255, 255, 0.22) 50%,
      rgba(255, 255, 255, 0) 62%),
    rgba(20, 20, 24, 0.18);
  background-size: 260% 100%, auto;
  background-repeat: no-repeat;
  animation: cr-scratch-sheen 1.6s ease-in-out infinite;
}

.cr-card--ready .cr-scratch-hint__overlay {
  opacity: 1;
}

.cr-card-locked .cr-scratch-hint__overlay,
body.cr-tutorial-done .cr-scratch-hint__overlay {
  opacity: 0;
  animation: none;
}

.cr-scratch-hint {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  transition: opacity 200ms ease-out;
  text-align: center;
}

/* Reveal only after the card has painted, and only before first scratch. */

.cr-card--ready .cr-scratch-hint {
  opacity: 1;
}

.cr-card-locked .cr-scratch-hint,
body.cr-tutorial-done .cr-scratch-hint {
  opacity: 0;
}

/* Once hidden (dismissed or budget-locked), stop the sweep so the compositor
   isn't repainting an invisible element forever. */

.cr-card-locked .cr-scratch-hint__hand,
.cr-card-locked .cr-scratch-hint__trace,
body.cr-tutorial-done .cr-scratch-hint__hand,
body.cr-tutorial-done .cr-scratch-hint__trace {
  animation: none;
  opacity: 0;
}

/* --- Persistent hints (gallery scratch cards) ---------------------------
 * On the standalone /clothes-remover/ page the hint shows on the first card
 * only and is dismissed for the whole page on first scratch (body.cr-tutorial-
 * done). Gallery scratch cards are scattered among regular images, so EVERY
 * gallery card carries a `--persistent` hint that must IGNORE the global
 * dismissal and instead disappear only when ITS OWN card is scratched
 * (.cr-card--scratched, set per-card by clothes-remover.js). Override the
 * global-dismissal rules above (same specificity, later in source) back to
 * visible, then re-hide per-card / when budget-locked. */

.cr-card--ready body.cr-tutorial-done .cr-scratch-hint--persistent,
body.cr-tutorial-done .cr-card--ready .cr-scratch-hint--persistent,
.cr-card--ready .cr-scratch-hint--persistent {
  opacity: 1;
}

.cr-card--ready body.cr-tutorial-done .cr-scratch-hint__overlay--persistent,
body.cr-tutorial-done .cr-card--ready .cr-scratch-hint__overlay--persistent,
.cr-card--ready .cr-scratch-hint__overlay--persistent {
  opacity: 1;
  animation: cr-scratch-sheen 1.6s ease-in-out infinite;
}

/* Per-card dismissal + budget lock must beat every "show" rule above, including
 * the 3-class `body.cr-tutorial-done .cr-card--ready …` variant — so qualify the
 * card with .cr-card to push specificity to 0-3-0 and keep them later in source. */

.cr-card.cr-card--scratched .cr-scratch-hint--persistent,
.cr-card.cr-card-locked .cr-scratch-hint--persistent,
.cr-card.cr-card--scratched .cr-scratch-hint__overlay--persistent,
.cr-card.cr-card-locked .cr-scratch-hint__overlay--persistent {
  opacity: 0;
  animation: none;
}

.cr-card.cr-card--scratched .cr-scratch-hint__hand,
.cr-card.cr-card--scratched .cr-scratch-hint__trace {
  animation: none;
  opacity: 0;
}

.cr-scratch-hint__hand {
  display: block;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.55));
  animation: cr-scratch-sweep 1.1s ease-in-out infinite alternate;
}

/* Hand silhouette: flat white fill, black outline (black & white). */

.cr-scratch-hint__handfill {
  fill: #ffffff;
  stroke: #111111;
  stroke-width: 3;
  stroke-linejoin: round;
}

/* Coin held at the writing tip — yellow. */

.cr-scratch-hint__coin {
  fill: var(--gresecondary, #FFBA2F);
  stroke: #111111;
  stroke-width: 3;
}

.cr-scratch-hint__coin-ring {
  fill: none;
  stroke: rgba(0, 0, 0, 0.4);
  stroke-width: 2.4;
}

/* Scratch trace — the rough mark the coin leaves as it sweeps. Uses the
 * grunge-banner SVG as a mask so the streak has a real torn/scratched edge;
 * tinted white via background-color. It "draws on" (scales out from the left)
 * as the hand moves right and clears on the return, looping with the sweep.
 * The SVG is a static asset (cached once) — masked, NOT inlined into the HTML. */

.cr-scratch-hint__trace {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 84px;
  height: 33px;
  /* keep the 700×277 grunge aspect (~2.5:1) undistorted */
  margin-left: -64px;
  /* sit just under the coin at the lower-left fingertip */
  margin-top: 8px;
  pointer-events: none;
  background-color: rgba(255, 255, 255, 0.92);
  -webkit-mask: url("/static/images/clothes-remover/scratch-grunge.svg") left center / 100% 100% no-repeat;
  mask: url("/static/images/clothes-remover/scratch-grunge.svg") left center / 100% 100% no-repeat;
  mix-blend-mode: overlay;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.35));
  transform-origin: left center;
  animation: cr-scratch-trace 1.1s ease-in-out infinite alternate;
}

.cr-scratch-hint__label {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.95);
  background: rgba(0, 0, 0, 0.45);
  padding: 4px 10px;
  border-radius: 999px;
}

@keyframes cr-scratch-sweep {
  from {
    transform: translateX(-28px) rotate(-7deg);
  }

  to   {
    transform: translateX(28px) rotate(7deg);
  }
}

/* Diagonal highlight band sweeping across the sheen, in step with the hand. */

@keyframes cr-scratch-sheen {
  from {
    background-position: 130% 0, 0 0;
  }

  to   {
    background-position: -30% 0, 0 0;
  }
}

/* Trace: the streak "draws on" (scales out from the left) as the hand sweeps
   right, and retracts on the return — so the mark always trails the coin. */

@keyframes cr-scratch-trace {
  from {
    transform: scaleX(0.15);
    opacity: 0;
  }

  18%  {
    opacity: 0.9;
  }

  to   {
    transform: scaleX(1);
    opacity: 0.95;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cr-scratch-hint__hand,
  .cr-scratch-hint__overlay,
  .cr-scratch-hint__trace {
    animation: none;
  }
}

/* --- staff overlay (sits above canvas to capture clicks) --- */

.cr-staff-overlay {
  position: absolute;
  top: 8px;
  left: 8px;
  right: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  z-index: 4;
  pointer-events: none;
}

.cr-staff-overlay > * {
  pointer-events: auto;
}

.cr-pick-btn,
.cr-staff-toggle,
.cr-staff-delete {
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 600;
  color: #ffffff;
  background: rgba(0, 0, 0, 0.65);
  border-radius: 6px;
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
}

.cr-pick-btn:hover {
  background: var(--primary);
}

.cr-staff-delete {
  color: var(--gre-secondary);
}

.cr-staff-toggle {
  font-size: 14px;
  padding: 4px 8px;
}

/* Publish/unpublish toggle. Shares the overlay button base; published state
 * goes green, unpublished stays neutral (the card outline already flags it). */

.cr-publish-btn {
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 600;
  color: #ffffff;
  background: rgba(0, 0, 0, 0.65);
  border-radius: 6px;
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
}

.cr-publish-btn:hover {
  background: var(--primary);
}

/* Promote a user's undress pair to a global public pair. */

.cr-makepublic-btn {
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 700;
  color: #ffffff;
  background: linear-gradient(to right, var(--gre-secondary), var(--gre-primary));
  border-radius: 6px;
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
}

.cr-makepublic-btn:hover {
  opacity: 0.92;
}

.cr-publish-btn.is-published {
  background: rgba(34, 197, 94, 0.85);
  /* green = live */
}

.cr-publish-btn.is-published:hover {
  background: rgba(34, 197, 94, 1);
}

.cr-staff-meta {
  margin-left: auto;
  padding: 3px 8px;
  font-size: 11px;
  color: #ffffff;
  background: rgba(0, 0, 0, 0.65);
  border-radius: 6px;
}

/* --- modal --- */

.cr-modal {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.cr-modal[hidden] {
  display: none;
}

.cr-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.78);
}

.cr-modal-body {
  position: relative;
  width: 100%;
  max-width: 920px;
  max-height: 86vh;
  overflow-y: auto;
  /* Reaching the end of the modal scroller must not scroll the page behind it. */
  overscroll-behavior: contain;
  background: #1c1c1c;
  color: #ffffff;
  border-radius: 14px;
  padding: 18px;
}

/* --- picker --- */

.cr-picker-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.cr-picker-header h3 {
  color: #ffffff;
  font-size: 16px;
  font-weight: 600;
  margin: 0;
}

.cr-picker-close {
  color: #ffffff;
  font-size: 18px;
  padding: 4px 10px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
}

.cr-picker-search {
  margin-bottom: 14px;
}

.cr-picker-search input[type="text"] {
  width: 100%;
  padding: 10px 14px;
  /* ≥16px: iOS Safari force-zooms the page when focusing inputs below 16px. */
  font-size: 16px;
  color: #ffffff;
  background: #0f0f0f;
  border: 1px solid #333333;
  border-radius: 8px;
}

.cr-picker-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

@media (max-width: 768px) {
  .cr-picker-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 425px) {
  .cr-picker-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.cr-picker-thumb {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: 8px;
  overflow: hidden;
  background: #0f0f0f;
  cursor: pointer;
}

.cr-picker-thumb img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.cr-picker-thumb:hover {
  outline: 2px solid var(--primary);
}

.cr-picker-id {
  position: absolute;
  left: 4px;
  bottom: 4px;
  padding: 2px 6px;
  font-size: 10px;
  color: #ffffff;
  background: rgba(0, 0, 0, 0.65);
  border-radius: 4px;
}

/* --- undress modal: tag filter pills (single horizontal-scroll row) --- */

.cr-tag-rail {
  position: relative;
  margin-bottom: 14px;
}

.cr-tag-pills {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  overflow-x: auto;
  overflow-y: hidden;
  /* keep the page/modal from rubber-banding when the row hits its scroll end */
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  /* Hide the native scrollbar (same pattern as the home/bots tag rail in
     bots-tag-navigation.css) — the row stays swipe/drag/wheel-scrollable. */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.cr-tag-pills::-webkit-scrollbar {
  display: none;
}

/* Edge arrows — affordance that the row scrolls. JS toggles is-scrollable on
   the rail (any overflow at all) and at-start / at-end (which edge is reached)
   so the relevant arrow + its fade hide when there's nothing more that way. */

.cr-tag-arrow {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 2;
  display: none;
  align-items: center;
  justify-content: center;
  width: 30px;
  font-size: 20px;
  line-height: 1;
  color: #ffffff;
  background: #1c1c1c;
  /* matches modal-body bg so it reads as a fade */
}

.cr-tag-arrow--prev {
  left: 0;
  padding-right: 8px;
  border-radius: 8px 0 0 8px;
  background: linear-gradient(to right, #1c1c1c 60%, rgba(28, 28, 28, 0));
}

.cr-tag-arrow--next {
  right: 0;
  padding-left: 8px;
  border-radius: 0 8px 8px 0;
  background: linear-gradient(to left, #1c1c1c 60%, rgba(28, 28, 28, 0));
}

.cr-tag-arrow:hover {
  color: var(--gre-primary);
}

/* Next arrow shows by default (the row starts at scrollLeft 0 with more to the
   right, and it's the affordance that the rail scrolls) — JS hides it once the
   end is reached or if there's no overflow at all. The prev arrow is the
   opposite: hidden at the start, shown by JS once scrolled away from it. */

.cr-tag-arrow--next {
  display: flex;
}

.cr-tag-rail.at-end .cr-tag-arrow--next,
.cr-tag-rail:not(.is-scrollable) .cr-tag-arrow--next {
  display: none;
}

.cr-tag-rail.is-scrollable:not(.at-start) .cr-tag-arrow--prev {
  display: flex;
}

.cr-tag-pill {
  flex: 0 0 auto;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 600;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  white-space: nowrap;
}

.cr-tag-pill:hover {
  background: rgba(255, 255, 255, 0.16);
}

.cr-tag-pill.is-active {
  background: linear-gradient(to right, var(--gre-secondary), var(--gre-primary));
}

/* --- undress modal: multi-select state --- */

.cr-undress-thumb {
  cursor: pointer;
}

.cr-undress-thumb.is-selected {
  outline: 3px solid var(--gre-primary);
  outline-offset: -3px;
}

.cr-undress-check {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 22px;
  height: 22px;
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  color: #ffffff;
  border-radius: 50%;
  background: linear-gradient(to right, var(--gre-secondary), var(--gre-primary));
}

.cr-undress-thumb.is-selected .cr-undress-check {
  display: flex;
}

/* --- undress modal: sticky confirm footer --- */

.cr-undress-footer {
  position: sticky;
  /* Pin flush to the modal-body's bottom edge. The body has 18px padding, so
     sticking at bottom:0 left an 18px strip below the bar where the grid's last
     row bled through; -18px sinks the bar into that padding so it covers it. */
  bottom: -18px;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 14px -18px -18px;
  /* bleed to the modal-body edges */
  padding: 14px 18px;
  background: #161616;
  border-top: 1px solid #333333;
}

.cr-undress-footer[hidden] {
  display: none;
}

/* While a batch is running, collapse the whole selection surface (search, tag
   pills, grid, pagination and the sticky confirm bar) so only the result /
   processing partial in #cr-undress-stage is shown. */

.cr-undress--running .cr-picker-search,
.cr-undress--running .cr-tag-pills,
.cr-undress--running .cr-undress-grid,
.cr-undress--running .cr-picker-pagination,
.cr-undress--running .cr-undress-footer {
  display: none;
}

.cr-undress-selcount {
  font-size: 13px;
  color: #cccccc;
}

.cr-undress-confirm {
  margin-left: auto;
  padding: 9px 20px;
  font-size: 14px;
  font-weight: 700;
  color: #ffffff;
  border-radius: 999px;
  background: linear-gradient(to right, var(--gre-secondary), var(--gre-primary));
}

.cr-undress-confirm:hover {
  opacity: 0.92;
}

.cr-undress-confirm:disabled {
  opacity: 0.5;
  cursor: default;
}

/* Undress thumbnail action tag: instant (brand) vs generate (neutral). */

.cr-undress-tag {
  position: absolute;
  left: 4px;
  bottom: 4px;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 700;
  color: #ffffff;
  background: rgba(0, 0, 0, 0.7);
  border-radius: 999px;
}

.cr-undress-tag.is-instant {
  background: linear-gradient(to right, var(--gre-secondary), var(--gre-primary));
}

.cr-picker-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 16px;
  color: #cccccc;
  font-size: 13px;
}

.cr-picker-pagination button {
  padding: 6px 12px;
  font-weight: 600;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 6px;
}

.cr-picker-pagination button:hover {
  background: var(--primary);
}

/* --- staff AI nudify --- */

.cr-staff-btn-accent {
  background: linear-gradient(to right, var(--gre-secondary), var(--gre-primary));
}

.cr-nudify-hint {
  font-size: 13px;
  line-height: 1.5;
  margin: 0 0 14px;
}

.cr-nudify-upload {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.cr-nudify-upload-label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: #cccccc;
}

.cr-nudify-upload-label input[type="file"] {
  color: #ffffff;
  font-size: 13px;
}

.cr-picker-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 16px 0;
  color: #888888;
  font-size: 12px;
}

.cr-picker-divider::before,
.cr-picker-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #333333;
}

.cr-nudify-processing,
.cr-nudify-done,
.cr-nudify-error {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  margin: 12px 0;
  border-radius: 10px;
  background: #0f0f0f;
  font-size: 14px;
}

.cr-nudify-error {
  background: rgba(250, 61, 114, 0.12);
}

.cr-nudify-done {
  background: rgba(255, 186, 47, 0.12);
}

.cr-nudify-processing-thumb {
  width: 44px;
  height: 44px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 6px;
}

.cr-nudify-spinner {
  width: 22px;
  height: 22px;
  border: 3px solid rgba(255, 255, 255, 0.2);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: cr-nudify-spin 0.8s linear infinite;
}

@keyframes cr-nudify-spin {
  to {
    transform: rotate(360deg);
  }
}

/* --- disclaimer (NCII / fictional-character notice) --- */

.cr-disclaimer-link {
  margin-top: 24px;
  text-align: center;
}

.cr-disclaimer-trigger {
  /* inline-flex + min-height keep the visual size small while giving the
     button a ≥44px tap target on touch devices. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
  padding: 0 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--bodytext);
  text-decoration: underline;
  text-underline-offset: 2px;
  background: transparent;
  cursor: pointer;
}

.cr-disclaimer-trigger:hover {
  color: var(--primary);
}

/* Reuses .cr-modal + .cr-modal-backdrop for the overlay; only the card is bespoke. */

.cr-disclaimer-card {
  position: relative;
  width: 100%;
  max-width: 520px;
  max-height: 86vh;
  overflow-y: auto;
  background: #1c1c1c;
  color: #ffffff;
  border-radius: 14px;
  padding: 28px 24px 24px;
}

.cr-disclaimer-x {
  position: absolute;
  top: 12px;
  right: 14px;
  font-size: 22px;
  line-height: 1;
  color: rgba(255, 255, 255, 0.7);
  background: transparent;
  cursor: pointer;
}

.cr-disclaimer-x:hover {
  color: #ffffff;
}

.cr-disclaimer-heading {
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 14px;
  color: #ffffff;
}

.cr-disclaimer-text {
  font-size: 14px;
  line-height: 1.65;
  color: #cccccc;
  margin-bottom: 12px;
}

.cr-disclaimer-text:last-child {
  margin-bottom: 0;
}

.cr-disclaimer-policy-link {
  color: var(--primary);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Utils */

@media (max-width: 767px) {
  /* Community CTA button - smaller on mobile */

  /* Community CTA container - move up on mobile to avoid overlapping text/tags */

  /* Bot profile picture - smaller on mobile */

  /* Adjust bottom padding for mobile safe area */

  .video-feed-item .before\:absolute.bottom-0::before {
    content: var(--tw-content);
    padding-bottom: max(1.25rem, env(safe-area-inset-bottom));
  }
}

@media (prefers-contrast: high) {
  .video-feed-item .before\:absolute.bottom-0::before {
    content: var(--tw-content);
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 1) 0%,
        rgba(0, 0, 0, 0.9) 40%,
        rgba(0, 0, 0, 0.5) 70%,
        transparent 100%
      );
  }
}

@media (max-width: 767px) and (orientation: landscape) {
  .video-feed-item .before\:absolute.bottom-0::before {
    content: var(--tw-content);
    padding: 1rem 1.5rem 1rem;
  }

  /* Community CTA button - no size override in landscape */
}

.after\:hidden.category-divider::after {
  content: var(--tw-content);
  display: none;
}

.after\:hidden.tag-filter::after {
  content: var(--tw-content);
  display: none;
}

.after\:hidden.home-tags-arrow::after {
  content: var(--tw-content);
  display: none;
}

.after\:hidden.ch2-section--custom-add::after {
  content: var(--tw-content);
  display: none;
}

.after\:hidden.ch2-advanced__panel::after {
  content: var(--tw-content);
  display: none;
}

@media (max-width: 767px) {
  /* Community CTA button - smaller on mobile */

  /* Community CTA container - move up on mobile to avoid overlapping text/tags */

  /* Bot profile picture - smaller on mobile */

  /* Adjust bottom padding for mobile safe area */

  .video-feed-item .after\:absolute.bottom-0::after {
    content: var(--tw-content);
    padding-bottom: max(1.25rem, env(safe-area-inset-bottom));
  }
}

@media (prefers-contrast: high) {
  .video-feed-item .after\:absolute.bottom-0::after {
    content: var(--tw-content);
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 1) 0%,
        rgba(0, 0, 0, 0.9) 40%,
        rgba(0, 0, 0, 0.5) 70%,
        transparent 100%
      );
  }
}

@media (max-width: 767px) and (orientation: landscape) {
  .video-feed-item .after\:absolute.bottom-0::after {
    content: var(--tw-content);
    padding: 1rem 1.5rem 1rem;
  }

  /* Community CTA button - no size override in landscape */
}

@media (max-width: 767px) {
  /* Community CTA button - smaller on mobile */

  /* Community CTA container - move up on mobile to avoid overlapping text/tags */

  /* Bot profile picture - smaller on mobile */

  /* Adjust bottom padding for mobile safe area */

  .video-feed-item .checked\:after\:absolute:checked.bottom-0::after {
    content: var(--tw-content);
    padding-bottom: max(1.25rem, env(safe-area-inset-bottom));
  }
}

@media (prefers-contrast: high) {
  .video-feed-item .checked\:after\:absolute:checked.bottom-0::after {
    content: var(--tw-content);
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 1) 0%,
        rgba(0, 0, 0, 0.9) 40%,
        rgba(0, 0, 0, 0.5) 70%,
        transparent 100%
      );
  }
}

@media (max-width: 767px) and (orientation: landscape) {
  .video-feed-item .checked\:after\:absolute:checked.bottom-0::after {
    content: var(--tw-content);
    padding: 1rem 1.5rem 1rem;
  }

  /* Community CTA button - no size override in landscape */
}

.best-choice .peer:checked ~ .peer-checked\:block::before {
  box-shadow: none;
  background-image: linear-gradient(to bottom, rgba(18, 19, 22, 0) 40%, rgba(18, 19, 22, 0.6) 90%);
}

.dark\:hidden:is(.dark *).category-divider {
  display: none;
}

.dark\:hidden:is(.dark *).tag-filter {
  display: none;
}

.dark\:hidden:is(.dark *).home-tags-arrow {
  display: none;
}

.best-choice .dark\:block:is(.dark *)::before {
  box-shadow: none;
  background-image: linear-gradient(to bottom, rgba(18, 19, 22, 0) 40%, rgba(18, 19, 22, 0.6) 90%);
}

.dark\:hidden:is(.dark *).ch2-section--custom-add {
  display: none;
}

.dark\:hidden:is(.dark *).ch2-advanced__panel {
  display: none;
}

@media (max-width: 991px){
  .lg\:\!hidden.category-divider {
    display: none !important;
  }

  .lg\:hidden.category-divider {
    display: none;
  }

  .lg\:\!hidden.tag-filter {
    display: none !important;
  }

  .lg\:hidden.tag-filter {
    display: none;
  }

  .lg\:\!hidden.home-tags-arrow {
    display: none !important;
  }

  .lg\:hidden.home-tags-arrow {
    display: none;
  }

  .lg\:bg-img-tablet.hero-wrapper {
    background-image: url('/static/images/landing-page-seo/landing-page-bg-tablet.png');
  }

  .lg\:bg-img-tablet.background-image-ff {
    background-image: url('/static/images/landing-page-seo/landing-section-bg-tablet.png');
  }

  .best-choice .lg\:block::before {
    box-shadow: none;
    background-image: linear-gradient(to bottom, rgba(18, 19, 22, 0) 40%, rgba(18, 19, 22, 0.6) 90%);
  }

  .lg\:\!hidden.ch2-section--custom-add {
    display: none !important;
  }

  .lg\:hidden.ch2-section--custom-add {
    display: none;
  }

  .lg\:\!hidden.ch2-advanced__panel {
    display: none !important;
  }

  .lg\:hidden.ch2-advanced__panel {
    display: none;
  }

  @media (max-width: 767px) {
    /* Community CTA button - smaller on mobile */

    /* Community CTA container - move up on mobile to avoid overlapping text/tags */

    /* Bot profile picture - smaller on mobile */

    /* Adjust bottom padding for mobile safe area */

    .video-feed-item .lg\:absolute.bottom-0 {
      padding-bottom: max(1.25rem, env(safe-area-inset-bottom));
    }
  }

  @media (prefers-contrast: high) {
    .video-feed-item .lg\:absolute.bottom-0 {
      background: linear-gradient(
        to top,
        rgba(0, 0, 0, 1) 0%,
        rgba(0, 0, 0, 0.9) 40%,
        rgba(0, 0, 0, 0.5) 70%,
        transparent 100%
      );
    }
  }

  @media (max-width: 767px) and (orientation: landscape) {
    .video-feed-item .lg\:absolute.bottom-0 {
      padding: 1rem 1.5rem 1rem;
    }

    /* Community CTA button - no size override in landscape */
  }
}

@media (max-width: 875px){
  .\32lg\:hidden.category-divider {
    display: none;
  }

  .\32lg\:hidden.tag-filter {
    display: none;
  }

  .\32lg\:hidden.home-tags-arrow {
    display: none;
  }

  .best-choice .\32lg\:block::before {
    box-shadow: none;
    background-image: linear-gradient(to bottom, rgba(18, 19, 22, 0) 40%, rgba(18, 19, 22, 0.6) 90%);
  }

  .\32lg\:hidden.ch2-section--custom-add {
    display: none;
  }

  .\32lg\:hidden.ch2-advanced__panel {
    display: none;
  }

  @media (max-width: 767px) {
    /* Community CTA button - smaller on mobile */

    /* Community CTA container - move up on mobile to avoid overlapping text/tags */

    /* Bot profile picture - smaller on mobile */

    /* Adjust bottom padding for mobile safe area */

    .video-feed-item .\32lg\:absolute.bottom-0 {
      padding-bottom: max(1.25rem, env(safe-area-inset-bottom));
    }
  }

  @media (prefers-contrast: high) {
    .video-feed-item .\32lg\:absolute.bottom-0 {
      background: linear-gradient(
        to top,
        rgba(0, 0, 0, 1) 0%,
        rgba(0, 0, 0, 0.9) 40%,
        rgba(0, 0, 0, 0.5) 70%,
        transparent 100%
      );
    }
  }

  @media (max-width: 767px) and (orientation: landscape) {
    .video-feed-item .\32lg\:absolute.bottom-0 {
      padding: 1rem 1.5rem 1rem;
    }

    /* Community CTA button - no size override in landscape */
  }

  @media screen and (max-width:991px) {
    .\32lg\:\!bg-top.bg-img-popup{
      background-position: top right !important;
    }
  }
}

@media (max-width: 768px){
  .md\:hidden.category-divider {
    display: none;
  }

  .md\:hidden.tag-filter {
    display: none;
  }

  .md\:hidden.home-tags-arrow {
    display: none;
  }

  .best-choice .md\:block::before {
    box-shadow: none;
    background-image: linear-gradient(to bottom, rgba(18, 19, 22, 0) 40%, rgba(18, 19, 22, 0.6) 90%);
  }

  .md\:hidden.ch2-section--custom-add {
    display: none;
  }

  .md\:hidden.ch2-advanced__panel {
    display: none;
  }
}

@media (max-width: 675px){
  .\32md\:hidden.category-divider {
    display: none;
  }

  .\32md\:hidden.tag-filter {
    display: none;
  }

  .\32md\:hidden.home-tags-arrow {
    display: none;
  }

  .best-choice .\32md\:block::before {
    box-shadow: none;
    background-image: linear-gradient(to bottom, rgba(18, 19, 22, 0) 40%, rgba(18, 19, 22, 0.6) 90%);
  }

  .\32md\:hidden.ch2-section--custom-add {
    display: none;
  }

  .\32md\:hidden.ch2-advanced__panel {
    display: none;
  }
}

@media (max-width: 575px){
  .sm\:hidden.category-divider {
    display: none;
  }

  .sm\:hidden.tag-filter {
    display: none;
  }

  .sm\:hidden.home-tags-arrow {
    display: none;
  }

  .best-choice .sm\:block::before {
    box-shadow: none;
    background-image: linear-gradient(to bottom, rgba(18, 19, 22, 0) 40%, rgba(18, 19, 22, 0.6) 90%);
  }

  .sm\:hidden.ch2-section--custom-add {
    display: none;
  }

  .sm\:hidden.ch2-advanced__panel {
    display: none;
  }

  @media (max-width: 767px) {
    /* Community CTA button - smaller on mobile */

    /* Community CTA container - move up on mobile to avoid overlapping text/tags */

    /* Bot profile picture - smaller on mobile */

    /* Adjust bottom padding for mobile safe area */

    .video-feed-item .sm\:bottom-0.absolute {
      padding-bottom: max(1.25rem, env(safe-area-inset-bottom));
    }
  }

  @media (prefers-contrast: high) {
    .video-feed-item .sm\:bottom-0.absolute {
      background: linear-gradient(
        to top,
        rgba(0, 0, 0, 1) 0%,
        rgba(0, 0, 0, 0.9) 40%,
        rgba(0, 0, 0, 0.5) 70%,
        transparent 100%
      );
    }
  }

  .sm\:line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  @media (max-width: 767px) and (orientation: landscape) {
    .video-feed-item .sm\:bottom-0.absolute {
      padding: 1rem 1.5rem 1rem;
    }

    /* Community CTA button - no size override in landscape */
  }

  @media (max-width: 767px) {
    .video-feed-locked-card .sm\:w-10.h-10 {
      width: 2rem;
      height: 2rem;
    }

    /* Home button on locked card - mobile positioning */

    .video-feed-locked-card .sm\:h-10.w-10 {
      width: 2rem;
      height: 2rem;
    }

    /* Home button on locked card - mobile positioning */
  }
}

@media (max-width: 425px){
  .\32sm\:hidden.category-divider {
    display: none;
  }

  .\32sm\:hidden.tag-filter {
    display: none;
  }

  .\32sm\:hidden.home-tags-arrow {
    display: none;
  }

  .\32sm\:hidden.ch2-section--custom-add {
    display: none;
  }

  .\32sm\:hidden.ch2-advanced__panel {
    display: none;
  }
}

.\*\:ml-\[-20px\] > *{
  margin-left: -20px;
}

.\*\:size-10 > *{
  width: 2.5rem;
  height: 2.5rem;
}

.\*\:size-full > *{
  width: 100%;
  height: 100%;
}

.\*\:\!h-full > *{
  height: 100% !important;
}

.\*\:h-full > *{
  height: 100%;
}

.\*\:min-h-\[51px\] > *{
  min-height: 51px;
}

.\*\:w-\[80\%\] > *{
  width: 80%;
}

.\*\:overflow-hidden > *{
  overflow: hidden;
}

.\*\:rounded-2xl > *{
  border-radius: 1rem;
}

.\*\:rounded-full > *{
  border-radius: 9999px;
}

.\*\:border > *{
  border-width: 1px;
}

.\*\:border-staticWhite > *{
  border-color: hsl(var(--static-white));
}

.\*\:bg-staticDark > *{
  background-color: hsl(var(--static-dark));
}

.\*\:bg-white > *{
  background-color: hsl(var(--white));
}

.\*\:text-\[38px\] > *{
  font-size: 38px;
}

.\*\:text-\[48px\] > *{
  font-size: 48px;
}

.placeholder\:text-black\/30::-moz-placeholder{
  color: hsl(var(--black) / 0.3);
}

.placeholder\:text-black\/30::placeholder{
  color: hsl(var(--black) / 0.3);
}

.before\:absolute::before{
  content: var(--tw-content);
  position: absolute;
}

.before\:top-0::before{
  content: var(--tw-content);
  top: 0px;
}

.before\:h-\[100\%\]::before{
  content: var(--tw-content);
  height: 100%;
}

.before\:h-full::before{
  content: var(--tw-content);
  height: 100%;
}

.before\:w-full::before{
  content: var(--tw-content);
  width: 100%;
}

.before\:\!rounded-lg::before{
  content: var(--tw-content);
  border-radius: 0.5rem !important;
}

.after\:absolute::after{
  content: var(--tw-content);
  position: absolute;
}

.after\:left-\[24px\]::after{
  content: var(--tw-content);
  left: 24px;
}

.after\:top-\[23px\]::after{
  content: var(--tw-content);
  top: 23px;
}

.after\:z-0::after{
  content: var(--tw-content);
  z-index: 0;
}

.after\:hidden::after{
  content: var(--tw-content);
  display: none;
}

.after\:h-full::after{
  content: var(--tw-content);
  height: 100%;
}

.after\:w-\[2px\]::after{
  content: var(--tw-content);
  width: 2px;
}

.after\:bg-staticWhite::after{
  content: var(--tw-content);
  background-color: hsl(var(--static-white));
}

.after\:content-\[\'\'\]::after{
  --tw-content: '';
  content: var(--tw-content);
}

.after\:\!\[background\:transparent\]::after{
  content: var(--tw-content);
  background: transparent !important;
}

.first\:rounded-tl-none:first-child{
  border-top-left-radius: 0px;
}

.checked\:bg-dark:checked{
  background-color: var(--dark);
}

.checked\:bg-transparent:checked{
  background-color: transparent;
}

.checked\:after\:absolute:checked::after{
  content: var(--tw-content);
  position: absolute;
}

.checked\:after\:left-\[4px\]:checked::after{
  content: var(--tw-content);
  left: 4px;
}

.checked\:after\:top-\[0px\]:checked::after{
  content: var(--tw-content);
  top: 0px;
}

.checked\:after\:h-\[10px\]:checked::after{
  content: var(--tw-content);
  height: 10px;
}

.checked\:after\:w-\[5px\]:checked::after{
  content: var(--tw-content);
  width: 5px;
}

.checked\:after\:rotate-45:checked::after{
  content: var(--tw-content);
  --tw-rotate: 45deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.checked\:after\:border-b-2:checked::after{
  content: var(--tw-content);
  border-bottom-width: 2px;
}

.checked\:after\:border-r-2:checked::after{
  content: var(--tw-content);
  border-right-width: 2px;
}

.checked\:after\:border-dark:checked::after{
  content: var(--tw-content);
  border-color: var(--dark);
}

.checked\:after\:content-\[\'\'\]:checked::after{
  --tw-content: '';
  content: var(--tw-content);
}

.focus-within\:outline-none:focus-within{
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.hover\:-translate-y-1:hover{
  --tw-translate-y: -0.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.hover\:-translate-y-2:hover{
  --tw-translate-y: -0.5rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.hover\:-translate-y-3:hover{
  --tw-translate-y: -0.75rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.hover\:scale-105:hover{
  --tw-scale-x: 1.05;
  --tw-scale-y: 1.05;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.hover\:scale-110:hover{
  --tw-scale-x: 1.1;
  --tw-scale-y: 1.1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.hover\:scale-\[1\.02\]:hover{
  --tw-scale-x: 1.02;
  --tw-scale-y: 1.02;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.hover\:transform:hover{
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.hover\:border-\[rgba\(255\2c 255\2c 255\2c 0\.3\)\]:hover{
  border-color: rgba(255,255,255,0.3);
}

.hover\:border-primary:hover{
  border-color: var(--primary);
}

.hover\:border-opacity-80:hover{
  --tw-border-opacity: 0.8;
}

.hover\:bg-\[\#0088cc\]:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(0 136 204 / var(--tw-bg-opacity));
}

.hover\:bg-\[\#1877F2\]:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(24 119 242 / var(--tw-bg-opacity));
}

.hover\:bg-\[\#1DA1F2\]:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(29 161 242 / var(--tw-bg-opacity));
}

.hover\:bg-\[\#25D366\]:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(37 211 102 / var(--tw-bg-opacity));
}

.hover\:bg-\[\#FF36F7\]:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(255 54 247 / var(--tw-bg-opacity));
}

.hover\:bg-\[\#FF4500\]:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(255 69 0 / var(--tw-bg-opacity));
}

.hover\:bg-amber-700:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(180 83 9 / var(--tw-bg-opacity));
}

.hover\:bg-black\/10:hover{
  background-color: hsl(var(--black) / 0.1);
}

.hover\:bg-black\/80:hover{
  background-color: hsl(var(--black) / 0.8);
}

.hover\:bg-cyan-700:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(14 116 144 / var(--tw-bg-opacity));
}

.hover\:bg-dark:hover{
  background-color: var(--dark);
}

.hover\:bg-emerald-700:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(4 120 87 / var(--tw-bg-opacity));
}

.hover\:bg-gray:hover{
  background-color: var(--gray);
}

.hover\:bg-green-700:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(21 128 61 / var(--tw-bg-opacity));
}

.hover\:bg-indigo-700:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(67 56 202 / var(--tw-bg-opacity));
}

.hover\:bg-lightgray:hover{
  background-color: var(--lightgray);
}

.hover\:bg-pink-200\/90:hover{
  background-color: rgb(251 207 232 / 0.9);
}

.hover\:bg-primary:hover{
  background-color: var(--primary);
}

.hover\:bg-purple-700:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(126 34 206 / var(--tw-bg-opacity));
}

.hover\:bg-red-700:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(185 28 28 / var(--tw-bg-opacity));
}

.hover\:bg-slate-500:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(100 116 139 / var(--tw-bg-opacity));
}

.hover\:bg-slate-600:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(71 85 105 / var(--tw-bg-opacity));
}

.hover\:bg-slate-700\/20:hover{
  background-color: rgb(51 65 85 / 0.2);
}

.hover\:bg-slate-700\/30:hover{
  background-color: rgb(51 65 85 / 0.3);
}

.hover\:bg-staticBlack\/80:hover{
  background-color: hsl(var(--static-black) / 0.8);
}

.hover\:bg-staticLightgray:hover{
  background-color: hsl(var(--static-lightgray));
}

.hover\:bg-staticWhite\/80:hover{
  background-color: hsl(var(--static-white) / 0.8);
}

.hover\:bg-white:hover{
  background-color: hsl(var(--white));
}

.hover\:bg-white\/10:hover{
  background-color: hsl(var(--white) / 0.1);
}

.hover\:bg-white\/15:hover{
  background-color: hsl(var(--white) / 0.15);
}

.hover\:bg-white\/5:hover{
  background-color: hsl(var(--white) / 0.05);
}

.hover\:bg-white\/80:hover{
  background-color: hsl(var(--white) / 0.8);
}

.hover\:bg-opacity-100:hover{
  --tw-bg-opacity: 1;
}

.hover\:bg-opacity-90:hover{
  --tw-bg-opacity: 0.9;
}

.hover\:bg-gradient-to-r:hover{
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
}

.hover\:from-purple-500:hover{
  --tw-gradient-from: #a855f7 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(168 85 247 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.hover\:to-pink-500:hover{
  --tw-gradient-to: #ec4899 var(--tw-gradient-to-position);
}

.hover\:font-medium:hover{
  font-weight: 500;
}

.hover\:text-dark:hover{
  color: var(--dark);
}

.hover\:text-indigo-300:hover{
  --tw-text-opacity: 1;
  color: rgb(165 180 252 / var(--tw-text-opacity));
}

.hover\:text-pink-300:hover{
  --tw-text-opacity: 1;
  color: rgb(249 168 212 / var(--tw-text-opacity));
}

.hover\:text-primary:hover{
  color: var(--primary);
}

.hover\:text-red-700:hover{
  --tw-text-opacity: 1;
  color: rgb(185 28 28 / var(--tw-text-opacity));
}

.hover\:text-staticWhite:hover{
  color: hsl(var(--static-white));
}

.hover\:text-white:hover{
  color: hsl(var(--white));
}

.hover\:underline:hover{
  text-decoration-line: underline;
}

.hover\:no-underline:hover{
  text-decoration-line: none;
}

.hover\:decoration-staticWhite\/60:hover{
  text-decoration-color: hsl(var(--static-white) / 0.6);
}

.hover\:opacity-70:hover{
  opacity: 0.7;
}

.hover\:opacity-80:hover{
  opacity: 0.8;
}

.hover\:opacity-90:hover{
  opacity: 0.9;
}

.hover\:shadow-2xl:hover{
  --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
  --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.hover\:shadow-\[0_0_20px_rgba\(255\2c 87\2c 87\2c 0\.6\)\]:hover{
  --tw-shadow: 0 0 20px rgba(255,87,87,0.6);
  --tw-shadow-colored: 0 0 20px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.hover\:shadow-\[0_25px_50px_-12px_rgba\(0\2c 0\2c 0\2c 0\.5\)\]:hover{
  --tw-shadow: 0 25px 50px -12px rgba(0,0,0,0.5);
  --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.hover\:shadow-lg:hover{
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.hover\:shadow-xl:hover{
  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.hover\:brightness-125:hover{
  --tw-brightness: brightness(1.25);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.focus\:border-indigo-500:focus{
  --tw-border-opacity: 1;
  border-color: rgb(99 102 241 / var(--tw-border-opacity));
}

.focus\:border-pink-500:focus{
  --tw-border-opacity: 1;
  border-color: rgb(236 72 153 / var(--tw-border-opacity));
}

.focus\:border-primary:focus{
  border-color: var(--primary);
}

.focus\:outline-none:focus{
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.focus\:ring-1:focus{
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus\:ring-2:focus{
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus\:ring-inset:focus{
  --tw-ring-inset: inset;
}

.focus\:ring-\[\#FA3D72\]:focus{
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(250 61 114 / var(--tw-ring-opacity));
}

.focus\:ring-indigo-500:focus{
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(99 102 241 / var(--tw-ring-opacity));
}

.focus\:ring-indigo-600:focus{
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(79 70 229 / var(--tw-ring-opacity));
}

.focus\:ring-opacity-50:focus{
  --tw-ring-opacity: 0.5;
}

.focus-visible\:outline:focus-visible{
  outline-style: solid;
}

.focus-visible\:outline-2:focus-visible{
  outline-width: 2px;
}

.focus-visible\:outline-offset-2:focus-visible{
  outline-offset: 2px;
}

.focus-visible\:ring-\[3px\]:focus-visible{
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.active\:translate-y-0:active{
  --tw-translate-y: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.active\:scale-95:active{
  --tw-scale-x: .95;
  --tw-scale-y: .95;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.active\:scale-\[98\%\]:active{
  --tw-scale-x: 98%;
  --tw-scale-y: 98%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.active\:scale-\[99\%\]:active{
  --tw-scale-x: 99%;
  --tw-scale-y: 99%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.active\:bg-\[\#D62D5A\]:active{
  --tw-bg-opacity: 1;
  background-color: rgb(214 45 90 / var(--tw-bg-opacity));
}

.active\:shadow-none:active{
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.disabled\:pointer-events-none:disabled{
  pointer-events: none;
}

.disabled\:cursor-not-allowed:disabled{
  cursor: not-allowed;
}

.disabled\:border-\[var\(--grayborder\)\]:disabled{
  border-color: var(--grayborder);
}

.disabled\:bg-\[\#F8A5C2\]:disabled{
  --tw-bg-opacity: 1;
  background-color: rgb(248 165 194 / var(--tw-bg-opacity));
}

.disabled\:stroke-\[var\(--grayborder\)\]:disabled{
  stroke: var(--grayborder);
}

.disabled\:opacity-50:disabled{
  opacity: 0.5;
}

.disabled\:opacity-70:disabled{
  opacity: 0.7;
}

.group:hover .group-hover\:visible{
  visibility: visible;
}

.group:hover .group-hover\:invisible{
  visibility: hidden;
}

.group:hover .group-hover\:line-clamp-none{
  overflow: visible;
  display: block;
  -webkit-box-orient: horizontal;
  -webkit-line-clamp: none;
}

.group:hover .group-hover\:translate-x-1{
  --tw-translate-x: 0.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.group:hover .group-hover\:scale-105{
  --tw-scale-x: 1.05;
  --tw-scale-y: 1.05;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.group:hover .group-hover\:scale-110{
  --tw-scale-x: 1.1;
  --tw-scale-y: 1.1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.group:hover .group-hover\:gap-3{
  gap: 0.75rem;
}

.group:hover .group-hover\:text-\[\#FA3D72\]{
  --tw-text-opacity: 1;
  color: rgb(250 61 114 / var(--tw-text-opacity));
}

.group:hover .group-hover\:text-primary{
  color: var(--primary);
}

.group:hover .group-hover\:decoration-\[\#FA3D72\]{
  text-decoration-color: #FA3D72;
}

.group:hover .group-hover\:opacity-0{
  opacity: 0;
}

.group:hover .group-hover\:opacity-100{
  opacity: 1;
}

.group:hover .group-hover\:opacity-30{
  opacity: 0.3;
}

.group:hover .group-hover\:line-clamp-none{
  -webkit-line-clamp: unset;
}

.peer:checked ~ .peer-checked\:block{
  display: block;
}

.peer:checked ~ .peer-checked\:\!border-primary{
  border-color: var(--primary) !important;
}

.dark\:block:is(.dark *){
  display: block;
}

.dark\:hidden:is(.dark *){
  display: none;
}

.dark\:border-staticWhite\/20:is(.dark *){
  border-color: hsl(var(--static-white) / 0.2);
}

.dark\:bg-bgbody:is(.dark *){
  background-color: var(--bgbody);
}

.dark\:bg-black:is(.dark *){
  background-color: hsl(var(--black));
}

.dark\:bg-body:is(.dark *){
  background-color: var(--body);
}

.dark\:bg-darkbg:is(.dark *){
  background-color: var(--dark-bg);
}

.dark\:bg-lightgray:is(.dark *){
  background-color: var(--lightgray);
}

.dark\:bg-staticWhite\/\[0\.08\]:is(.dark *){
  background-color: hsl(var(--static-white) / 0.08);
}

.dark\:stroke-white:is(.dark *){
  stroke: hsl(var(--white));
}

.dark\:text-slate-300:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(203 213 225 / var(--tw-text-opacity));
}

.dark\:text-white:is(.dark *){
  color: hsl(var(--white));
}

.dark\:shadow-\[0_0_30px_rgba\(224\2c 33\2c 202\2c 0\.39\)\]:is(.dark *){
  --tw-shadow: 0 0 30px rgba(224,33,202,0.39);
  --tw-shadow-colored: 0 0 30px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.dark\:ring-staticWhite\/10:is(.dark *){
  --tw-ring-color: hsl(var(--static-white) / 0.1);
}

.dark\:\[color-scheme\:dark\]:is(.dark *){
  color-scheme: dark;
}

.dark\:hover\:bg-black\/90:hover:is(.dark *){
  background-color: hsl(var(--black) / 0.9);
}

.dark\:hover\:bg-staticWhite\/90:hover:is(.dark *){
  background-color: hsl(var(--static-white) / 0.9);
}

@media (max-width: 1799px){
  .\36xl\:mb-\[15px\]{
    margin-bottom: 15px;
  }
}

@media (max-width: 1699px){
  .\35xl\:mb-\[24px\]{
    margin-bottom: 24px;
  }
}

@media (max-width: 1599px){
  .\34xl\:mb-0{
    margin-bottom: 0px;
  }

  .\34xl\:mb-\[5px\]{
    margin-bottom: 5px;
  }

  .\34xl\:h-\[500px\]{
    height: 500px;
  }
}

@media (max-width: 1499px){
  .\33xl\:top-32{
    top: 8rem;
  }

  .\33xl\:col-span-5{
    grid-column: span 5 / span 5;
  }

  .\33xl\:col-span-7{
    grid-column: span 7 / span 7;
  }

  .\33xl\:mb-\[10px\]{
    margin-bottom: 10px;
  }

  .\33xl\:w-\[45\%\]{
    width: 45%;
  }

  .\33xl\:w-\[55\%\]{
    width: 55%;
  }
}

@media (max-width: 1399px){
  .\32xl\:col-span-5{
    grid-column: span 5 / span 5;
  }

  .\32xl\:col-span-6{
    grid-column: span 6 / span 6;
  }

  .\32xl\:col-span-7{
    grid-column: span 7 / span 7;
  }

  .\32xl\:col-span-8{
    grid-column: span 8 / span 8;
  }

  .\32xl\:mb-8{
    margin-bottom: 2rem;
  }

  .\32xl\:mb-\[7px\]{
    margin-bottom: 7px;
  }

  .\32xl\:max-w-\[70\%\]{
    max-width: 70%;
  }

  .\32xl\:max-w-\[80\%\]{
    max-width: 80%;
  }

  .\32xl\:text-\[22px\]{
    font-size: 22px;
  }
}

@media (max-width: 1300px){
  .\31xl\:w-\[332px\]{
    width: 332px;
  }

  .\31xl\:text-\[42px\]{
    font-size: 42px;
  }
}

@media (max-width: 1199px){
  .xl\:top-\[73px\]{
    top: 73px;
  }

  .xl\:col-span-12{
    grid-column: span 12 / span 12;
  }

  .xl\:col-span-4{
    grid-column: span 4 / span 4;
  }

  .xl\:m-auto{
    margin: auto;
  }

  .xl\:w-\[100px\]{
    width: 100px;
  }

  .xl\:w-\[120px\]{
    width: 120px;
  }

  .xl\:w-\[60px\]{
    width: 60px;
  }

  .xl\:items-center{
    align-items: center;
  }

  .xl\:gap-\[15px\]{
    gap: 15px;
  }

  .xl\:px-10{
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }

  .xl\:px-\[30px\]{
    padding-left: 30px;
    padding-right: 30px;
  }

  .xl\:py-2{
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }

  .xl\:ps-0{
    padding-inline-start: 0px;
  }

  .xl\:text-center{
    text-align: center;
  }

  .xl\:text-\[24px\]{
    font-size: 24px;
  }
}

@media (max-width: 1095px){
  .xl3\:text-\[32px\]{
    font-size: 32px;
  }

  .xl3\:text-\[8px\]{
    font-size: 8px;
  }
}

@media (max-width: 991px){
  .lg\:static{
    position: static;
  }

  .lg\:absolute{
    position: absolute;
  }

  .lg\:sticky{
    position: sticky;
  }

  .lg\:inset-0{
    inset: 0px;
  }

  .lg\:top-3{
    top: 0.75rem;
  }

  .lg\:top-\[73px\]{
    top: 73px;
  }

  .lg\:z-40{
    z-index: 40;
  }

  .lg\:col-span-1{
    grid-column: span 1 / span 1;
  }

  .lg\:col-span-12{
    grid-column: span 12 / span 12;
  }

  .lg\:col-span-4{
    grid-column: span 4 / span 4;
  }

  .lg\:col-span-7{
    grid-column: span 7 / span 7;
  }

  .lg\:m-auto{
    margin: auto;
  }

  .lg\:mx-auto{
    margin-left: auto;
    margin-right: auto;
  }

  .lg\:mb-2{
    margin-bottom: 0.5rem;
  }

  .lg\:mb-4{
    margin-bottom: 1rem;
  }

  .lg\:mb-5{
    margin-bottom: 1.25rem;
  }

  .lg\:mb-6{
    margin-bottom: 1.5rem;
  }

  .lg\:mb-7{
    margin-bottom: 1.75rem;
  }

  .lg\:mt-0{
    margin-top: 0px;
  }

  .lg\:mt-10{
    margin-top: 2.5rem;
  }

  .lg\:mt-3{
    margin-top: 0.75rem;
  }

  .lg\:mt-4{
    margin-top: 1rem;
  }

  .lg\:mt-6{
    margin-top: 1.5rem;
  }

  .lg\:mt-8{
    margin-top: 2rem;
  }

  .lg\:block{
    display: block;
  }

  .lg\:flex{
    display: flex;
  }

  .lg\:\!hidden{
    display: none !important;
  }

  .lg\:hidden{
    display: none;
  }

  .lg\:h-\[155px\]{
    height: 155px;
  }

  .lg\:h-\[400px\]{
    height: 400px;
  }

  .lg\:h-auto{
    height: auto;
  }

  .lg\:min-h-\[500px\]{
    min-height: 500px;
  }

  .lg\:min-h-\[70vh\]{
    min-height: 70vh;
  }

  .lg\:w-1\/3{
    width: 33.333333%;
  }

  .lg\:w-2\/3{
    width: 66.666667%;
  }

  .lg\:w-\[120px\]{
    width: 120px;
  }

  .lg\:w-\[155px\]{
    width: 155px;
  }

  .lg\:w-full{
    width: 100%;
  }

  .lg\:max-w-\[410px\]{
    max-width: 410px;
  }

  .lg\:max-w-\[416px\]{
    max-width: 416px;
  }

  .lg\:max-w-full{
    max-width: 100%;
  }

  .lg\:max-w-none{
    max-width: none;
  }

  .lg\:grid-cols-1{
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }

  .lg\:grid-cols-2{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lg\:grid-cols-3{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .lg\:grid-cols-4{
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .lg\:grid-cols-5{
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .lg\:flex-row{
    flex-direction: row;
  }

  .lg\:flex-col{
    flex-direction: column;
  }

  .lg\:\!items-center{
    align-items: center !important;
  }

  .lg\:\!justify-center{
    justify-content: center !important;
  }

  .lg\:justify-center{
    justify-content: center;
  }

  .lg\:gap-0{
    gap: 0px;
  }

  .lg\:gap-3{
    gap: 0.75rem;
  }

  .lg\:gap-4{
    gap: 1rem;
  }

  .lg\:gap-5{
    gap: 1.25rem;
  }

  .lg\:gap-8{
    gap: 2rem;
  }

  .lg\:gap-y-8{
    row-gap: 2rem;
  }

  .lg\:rounded-r-2xl{
    border-top-right-radius: 1rem;
    border-bottom-right-radius: 1rem;
  }

  .lg\:bg-\[var\(--bgbody\)\]{
    background-color: var(--bgbody);
  }

  .lg\:p-4{
    padding: 1rem;
  }

  .lg\:p-5{
    padding: 1.25rem;
  }

  .lg\:p-6{
    padding: 1.5rem;
  }

  .lg\:p-8{
    padding: 2rem;
  }

  .lg\:\!px-4{
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  .lg\:px-0{
    padding-left: 0px;
    padding-right: 0px;
  }

  .lg\:px-3{
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  .lg\:px-4{
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .lg\:px-6{
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .lg\:px-8{
    padding-left: 2rem;
    padding-right: 2rem;
  }

  .lg\:py-0{
    padding-top: 0px;
    padding-bottom: 0px;
  }

  .lg\:py-10{
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }

  .lg\:py-12{
    padding-top: 3rem;
    padding-bottom: 3rem;
  }

  .lg\:py-16{
    padding-top: 4rem;
    padding-bottom: 4rem;
  }

  .lg\:py-2{
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }

  .lg\:py-20{
    padding-top: 5rem;
    padding-bottom: 5rem;
  }

  .lg\:py-8{
    padding-top: 2rem;
    padding-bottom: 2rem;
  }

  .lg\:pb-4{
    padding-bottom: 1rem;
  }

  .lg\:pb-6{
    padding-bottom: 1.5rem;
  }

  .lg\:pl-10{
    padding-left: 2.5rem;
  }

  .lg\:pr-10{
    padding-right: 2.5rem;
  }

  .lg\:pt-16{
    padding-top: 4rem;
  }

  .lg\:pt-2{
    padding-top: 0.5rem;
  }

  .lg\:pt-4{
    padding-top: 1rem;
  }

  .lg\:pt-6{
    padding-top: 1.5rem;
  }

  .lg\:pt-\[100px\]{
    padding-top: 100px;
  }

  .lg\:text-center{
    text-align: center;
  }

  .lg\:text-2xl{
    font-size: calc(24px + (40 - 24) * ((100vw - 320px) / (1920 - 320)));
    line-height: 1.35;
  }

  .lg\:text-3xl{
    font-size: calc(40px + (56 - 40) * ((100vw - 320px) / (1920 - 320)));
    line-height: 1.35;
  }

  .lg\:text-\[12px\]{
    font-size: 12px;
  }

  .lg\:text-\[13px\]{
    font-size: 13px;
  }

  .lg\:text-\[14px\]{
    font-size: 14px;
  }

  .lg\:text-\[16px\]{
    font-size: 16px;
  }

  .lg\:text-\[17px\]{
    font-size: 17px;
  }

  .lg\:text-\[18px\]{
    font-size: 18px;
  }

  .lg\:text-\[20px\]{
    font-size: 20px;
  }

  .lg\:text-\[22px\]{
    font-size: 22px;
  }

  .lg\:text-\[24px\]{
    font-size: 24px;
  }

  .lg\:text-\[26px\]{
    font-size: 26px;
  }

  .lg\:text-\[28px\]{
    font-size: 28px;
  }

  .lg\:text-\[30px\]{
    font-size: 30px;
  }

  .lg\:text-\[32px\]{
    font-size: 32px;
  }

  .lg\:text-\[36px\]{
    font-size: 36px;
  }

  .lg\:text-\[40px\]{
    font-size: 40px;
  }

  .lg\:text-base{
    font-size: calc(18px + (20 - 18) * ((100vw - 320px) / (1920 - 320)));
    line-height: 1.5;
  }

  .lg\:text-lg{
    font-size: calc(32px + (32 - 32) * ((100vw - 320px) / (1920 - 320)));
    line-height: 1.35;
  }

  .lg\:text-xl{
    font-size: calc(28px + (36 - 28) * ((100vw - 320px) / (1920 - 320)));
    line-height: 1.35;
  }

  .lg\:text-staticWhite{
    color: hsl(var(--static-white));
  }

  [dir=rtl] .lg\:pr-10{
    padding-left: 2.5rem;
    padding-right: unset;
  }

  [dir=rtl] .lg\:pl-10{
    padding-left: unset;
    padding-right: 2.5rem;
  }

  .lg\:\*\:w-full > *{
    width: 100%;
  }

  .lg\:\*\:text-2xl > *{
    font-size: calc(24px + (40 - 24) * ((100vw - 320px) / (1920 - 320)));
    line-height: 1.35;
  }
}

@media (max-width: 875px){
  .\32lg\:invisible{
    visibility: hidden;
  }

  .\32lg\:static{
    position: static;
  }

  .\32lg\:absolute{
    position: absolute;
  }

  .\32lg\:left-0{
    left: 0px;
  }

  .\32lg\:right-auto{
    right: auto;
  }

  .\32lg\:top-\[-100px\]{
    top: -100px;
  }

  .\32lg\:order-1{
    order: 1;
  }

  .\32lg\:col-span-12{
    grid-column: span 12 / span 12;
  }

  .\32lg\:col-span-6{
    grid-column: span 6 / span 6;
  }

  .\32lg\:mx-10{
    margin-left: 2.5rem;
    margin-right: 2.5rem;
  }

  .\32lg\:mb-0{
    margin-bottom: 0px;
  }

  .\32lg\:mr-2{
    margin-right: 0.5rem;
  }

  .\32lg\:mt-10{
    margin-top: 2.5rem;
  }

  .\32lg\:mt-\[10px\]{
    margin-top: 10px;
  }

  .\32lg\:block{
    display: block;
  }

  .\32lg\:hidden{
    display: none;
  }

  .\32lg\:h-5{
    height: 1.25rem;
  }

  .\32lg\:h-\[400px\]{
    height: 400px;
  }

  .\32lg\:h-\[640px\]{
    height: 640px;
  }

  .\32lg\:w-5{
    width: 1.25rem;
  }

  .\32lg\:w-\[150px\]{
    width: 150px;
  }

  .\32lg\:w-\[332px\]{
    width: 332px;
  }

  .\32lg\:w-\[400px\]{
    width: 400px;
  }

  .\32lg\:w-\[450px\]{
    width: 450px;
  }

  .\32lg\:w-\[52\%\]{
    width: 52%;
  }

  .\32lg\:w-\[62\%\]{
    width: 62%;
  }

  .\32lg\:w-full{
    width: 100%;
  }

  .\32lg\:min-w-\[310px\]{
    min-width: 310px;
  }

  .\32lg\:max-w-full{
    max-width: 100%;
  }

  .\32lg\:translate-y-20{
    --tw-translate-y: 5rem;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }

  .\32lg\:flex-col{
    flex-direction: column;
  }

  .\32lg\:items-center{
    align-items: center;
  }

  .\32lg\:items-baseline{
    align-items: baseline;
  }

  .\32lg\:gap-0{
    gap: 0px;
  }

  .\32lg\:\!bg-center{
    background-position: center !important;
  }

  .\32lg\:\!bg-top{
    background-position: top !important;
  }

  .\32lg\:p-0{
    padding: 0px;
  }

  .\32lg\:p-4{
    padding: 1rem;
  }

  .\32lg\:p-5{
    padding: 1.25rem;
  }

  .\32lg\:px-0{
    padding-left: 0px;
    padding-right: 0px;
  }

  .\32lg\:px-10{
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }

  .\32lg\:px-4{
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .\32lg\:px-8{
    padding-left: 2rem;
    padding-right: 2rem;
  }

  .\32lg\:py-10{
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }

  .\32lg\:py-20{
    padding-top: 5rem;
    padding-bottom: 5rem;
  }

  .\32lg\:py-\[33px\]{
    padding-top: 33px;
    padding-bottom: 33px;
  }

  .\32lg\:pb-0{
    padding-bottom: 0px;
  }

  .\32lg\:pb-10{
    padding-bottom: 2.5rem;
  }

  .\32lg\:pt-6{
    padding-top: 1.5rem;
  }

  .\32lg\:pt-\[117px\]{
    padding-top: 117px;
  }

  .\32lg\:text-center{
    text-align: center;
  }

  .\32lg\:text-\[12px\]{
    font-size: 12px;
  }

  .\32lg\:text-\[14px\]{
    font-size: 14px;
  }

  .\32lg\:text-\[24px\]{
    font-size: 24px;
  }

  .\32lg\:opacity-0{
    opacity: 0;
  }

  .\32lg\:transition-all{
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
  }

  .\32lg\:duration-\[0\.5s\]{
    transition-duration: 0.5s;
  }

  .\32lg\:ease-out{
    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
  }

  [dir=rtl] .\32lg\:mr-2{
    margin-left: 0.5rem;
    margin-right: unset;
  }

  [dir=rtl] .\32lg\:mr-2.5{
    margin-left: 0.625rem;
    margin-right: unset;
  }
}

@media (max-width: 768px){
  .md\:\!fixed{
    position: fixed !important;
  }

  .md\:relative{
    position: relative;
  }

  .md\:\!inset-0{
    inset: 0px !important;
  }

  .md\:left-0{
    left: 0px;
  }

  .md\:right-\[15px\]{
    right: 15px;
  }

  .md\:top-\[10px\]{
    top: 10px;
  }

  .md\:\!z-\[99999\]{
    z-index: 99999 !important;
  }

  .md\:z-\[9999\]{
    z-index: 9999;
  }

  .md\:order-2{
    order: 2;
  }

  .md\:order-last{
    order: 9999;
  }

  .md\:col-span-12{
    grid-column: span 12 / span 12;
  }

  .md\:col-start-1{
    grid-column-start: 1;
  }

  .md\:mx-auto{
    margin-left: auto;
    margin-right: auto;
  }

  .md\:my-\[100px\]{
    margin-top: 100px;
    margin-bottom: 100px;
  }

  .md\:-mt-6{
    margin-top: -1.5rem;
  }

  .md\:mb-0{
    margin-bottom: 0px;
  }

  .md\:mb-3{
    margin-bottom: 0.75rem;
  }

  .md\:mb-\[-2px\]{
    margin-bottom: -2px;
  }

  .md\:mb-\[100px\]{
    margin-bottom: 100px;
  }

  .md\:mt-0{
    margin-top: 0px;
  }

  .md\:mt-2{
    margin-top: 0.5rem;
  }

  .md\:mt-3{
    margin-top: 0.75rem;
  }

  .md\:mt-6{
    margin-top: 1.5rem;
  }

  .md\:block{
    display: block;
  }

  .md\:flex{
    display: flex;
  }

  .md\:hidden{
    display: none;
  }

  .md\:aspect-video{
    aspect-ratio: 16 / 9;
  }

  .md\:h-fit{
    height: -moz-fit-content;
    height: fit-content;
  }

  .md\:h-full{
    height: 100%;
  }

  .md\:min-h-\[56px\]{
    min-height: 56px;
  }

  .md\:w-\[55\%\]{
    width: 55%;
  }

  .md\:w-\[65\%\]{
    width: 65%;
  }

  .md\:w-\[70\%\]{
    width: 70%;
  }

  .md\:w-\[80\%\]{
    width: 80%;
  }

  .md\:w-full{
    width: 100%;
  }

  .md\:\!max-w-\[330px\]{
    max-width: 330px !important;
  }

  .md\:\!max-w-none{
    max-width: none !important;
  }

  .md\:max-w-2xl{
    max-width: 42rem;
  }

  .md\:max-w-\[95\%\]{
    max-width: 95%;
  }

  .md\:max-w-lg{
    max-width: 32rem;
  }

  .md\:\!translate-x-0{
    --tw-translate-x: 0px !important;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) !important;
  }

  .md\:\!translate-y-0{
    --tw-translate-y: 0px !important;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) !important;
  }

  .md\:grid-cols-1{
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }

  .md\:grid-cols-2{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .md\:grid-cols-3{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .md\:grid-cols-4{
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .md\:flex-row{
    flex-direction: row;
  }

  .md\:flex-col{
    flex-direction: column;
  }

  .md\:items-end{
    align-items: flex-end;
  }

  .md\:\!items-center{
    align-items: center !important;
  }

  .md\:items-center{
    align-items: center;
  }

  .md\:items-stretch{
    align-items: stretch;
  }

  .md\:\!justify-center{
    justify-content: center !important;
  }

  .md\:justify-center{
    justify-content: center;
  }

  .md\:gap-2{
    gap: 0.5rem;
  }

  .md\:gap-3{
    gap: 0.75rem;
  }

  .md\:gap-6{
    gap: 1.5rem;
  }

  .md\:gap-8{
    gap: 2rem;
  }

  .md\:gap-card-gap{
    gap: calc(15px + (30 - 15) * ((100vw - 320px) / (1920 - 320)));
  }

  .md\:overflow-hidden{
    overflow: hidden;
  }

  .md\:\!rounded-none{
    border-radius: 0px !important;
  }

  .md\:rounded-2xl{
    border-radius: 1rem;
  }

  .md\:bg-transparent{
    background-color: transparent;
  }

  .md\:p-2{
    padding: 0.5rem;
  }

  .md\:p-4{
    padding: 1rem;
  }

  .md\:p-6{
    padding: 1.5rem;
  }

  .md\:\!px-0{
    padding-left: 0px !important;
    padding-right: 0px !important;
  }

  .md\:px-0{
    padding-left: 0px;
    padding-right: 0px;
  }

  .md\:px-4{
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .md\:px-6{
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .md\:py-0{
    padding-top: 0px;
    padding-bottom: 0px;
  }

  .md\:py-2{
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }

  .md\:py-4{
    padding-top: 1rem;
    padding-bottom: 1rem;
  }

  .md\:py-6{
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }

  .md\:pb-8{
    padding-bottom: 2rem;
  }

  .md\:pb-\[10\%\]{
    padding-bottom: 10%;
  }

  .md\:pr-0{
    padding-right: 0px;
  }

  .md\:pt-0{
    padding-top: 0px;
  }

  .md\:pt-3{
    padding-top: 0.75rem;
  }

  .md\:text-center{
    text-align: center;
  }

  .md\:\!text-base{
    font-size: calc(18px + (20 - 18) * ((100vw - 320px) / (1920 - 320))) !important;
    line-height: 1.5 !important;
  }

  .md\:text-2xl{
    font-size: calc(24px + (40 - 24) * ((100vw - 320px) / (1920 - 320)));
    line-height: 1.35;
  }

  .md\:text-3xl{
    font-size: calc(40px + (56 - 40) * ((100vw - 320px) / (1920 - 320)));
    line-height: 1.35;
  }

  .md\:text-4xl{
    font-size: calc(42px + (58 - 42) * ((100vw - 320px) / (1920 - 320)));
    line-height: 1.35;
  }

  .md\:text-5xl{
    font-size: 3rem;
    line-height: 1;
  }

  .md\:text-\[13px\]{
    font-size: 13px;
  }

  .md\:text-\[15px\]{
    font-size: 15px;
  }

  .md\:text-\[16px\]{
    font-size: 16px;
  }

  .md\:text-\[18px\]{
    font-size: 18px;
  }

  .md\:text-\[20px\]{
    font-size: 20px;
  }

  .md\:text-\[22px\]{
    font-size: 22px;
  }

  .md\:text-\[24px\]{
    font-size: 24px;
  }

  .md\:text-\[30px\]{
    font-size: 30px;
  }

  .md\:text-\[40px\]{
    font-size: 40px;
  }

  .md\:text-base{
    font-size: calc(18px + (20 - 18) * ((100vw - 320px) / (1920 - 320)));
    line-height: 1.5;
  }

  .md\:text-xs{
    font-size: calc(16px + (16 - 16) * ((100vw - 320px) / (1920 - 320)));
    line-height: 1.35;
  }

  .md\:tracking-tighter{
    letter-spacing: -0.05em;
  }

  [dir=rtl] .md\:pr-0{
    padding-left: 0px;
    padding-right: unset;
  }

  [dir=rtl] .md\:pr-0.5{
    padding-left: 0.125rem;
    padding-right: unset;
  }

  .md\:\*\:w-full > *{
    width: 100%;
  }

  .md\:\*\:text-\[24px\] > *{
    font-size: 24px;
  }
}

@media (max-width: 675px){
  .\32md\:static{
    position: static;
  }

  .\32md\:top-\[49px\]{
    top: 49px;
  }

  .\32md\:order-1{
    order: 1;
  }

  .\32md\:col-span-12{
    grid-column: span 12 / span 12;
  }

  .\32md\:col-span-6{
    grid-column: span 6 / span 6;
  }

  .\32md\:-mx-2{
    margin-left: -0.5rem;
    margin-right: -0.5rem;
  }

  .\32md\:my-0{
    margin-top: 0px;
    margin-bottom: 0px;
  }

  .\32md\:mb-10{
    margin-bottom: 2.5rem;
  }

  .\32md\:mb-6{
    margin-bottom: 1.5rem;
  }

  .\32md\:mt-0{
    margin-top: 0px;
  }

  .\32md\:mt-10{
    margin-top: 2.5rem;
  }

  .\32md\:mt-12{
    margin-top: 3rem;
  }

  .\32md\:mt-2{
    margin-top: 0.5rem;
  }

  .\32md\:mt-8{
    margin-top: 2rem;
  }

  .\32md\:block{
    display: block;
  }

  .\32md\:inline-block{
    display: inline-block;
  }

  .\32md\:inline{
    display: inline;
  }

  .\32md\:flex{
    display: flex;
  }

  .\32md\:hidden{
    display: none;
  }

  .\32md\:h-\[380px\]{
    height: 380px;
  }

  .\32md\:h-\[400px\]{
    height: 400px;
  }

  .\32md\:h-\[600px\]{
    height: 600px;
  }

  .\32md\:h-full{
    height: 100%;
  }

  .\32md\:w-\[300px\]{
    width: 300px;
  }

  .\32md\:w-\[36px\]{
    width: 36px;
  }

  .\32md\:w-\[400px\]{
    width: 400px;
  }

  .\32md\:w-\[545px\]{
    width: 545px;
  }

  .\32md\:w-full{
    width: 100%;
  }

  .\32md\:max-w-\[100\%\]{
    max-width: 100%;
  }

  .\32md\:max-w-full{
    max-width: 100%;
  }

  .\32md\:flex-wrap{
    flex-wrap: wrap;
  }

  .\32md\:justify-center{
    justify-content: center;
  }

  .\32md\:gap-4{
    gap: 1rem;
  }

  .\32md\:overflow-hidden{
    overflow: hidden;
  }

  .\32md\:bg-bgbody{
    background-color: var(--bgbody);
  }

  .\32md\:p-3{
    padding: 0.75rem;
  }

  .\32md\:px-1{
    padding-left: 0.25rem;
    padding-right: 0.25rem;
  }

  .\32md\:px-2{
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }

  .\32md\:px-3{
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  .\32md\:px-4{
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .\32md\:px-6{
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .\32md\:py-0{
    padding-top: 0px;
    padding-bottom: 0px;
  }

  .\32md\:py-1{
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
  }

  .\32md\:py-10{
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }

  .\32md\:py-3{
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
  }

  .\32md\:py-4{
    padding-top: 1rem;
    padding-bottom: 1rem;
  }

  .\32md\:py-6{
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }

  .\32md\:pl-0{
    padding-left: 0px;
  }

  .\32md\:pr-0{
    padding-right: 0px;
  }

  .\32md\:text-center{
    text-align: center;
  }

  .\32md\:text-start{
    text-align: start;
  }

  .\32md\:text-3xs{
    font-size: calc(18px + (18 - 18) * ((100vw - 320px) / (1920 - 320)));
    line-height: 1.5;
    letter-spacing: 0.5px;
  }

  .\32md\:text-\[11px\]{
    font-size: 11px;
  }

  .\32md\:text-\[14px\]{
    font-size: 14px;
  }

  .\32md\:text-\[16px\]{
    font-size: 16px;
  }

  .\32md\:text-\[18px\]{
    font-size: 18px;
  }

  .\32md\:text-\[20px\]{
    font-size: 20px;
  }

  .\32md\:text-\[22px\]{
    font-size: 22px;
  }

  .\32md\:text-\[24px\]{
    font-size: 24px;
  }

  .\32md\:text-\[30px\]{
    font-size: 30px;
  }

  .\32md\:text-\[32px\]{
    font-size: 32px;
  }

  .\32md\:text-\[40px\]{
    font-size: 40px;
  }

  .\32md\:leading-7{
    line-height: 1.75rem;
  }

  .\32md\:text-staticWhite{
    color: hsl(var(--static-white));
  }

  .\32md\:opacity-70{
    opacity: 0.7;
  }

  .\32md\:shadow-\[0_0_10px_rgba\(224\2c 33\2c 202\2c 0\.59\)\]{
    --tw-shadow: 0 0 10px rgba(224,33,202,0.59);
    --tw-shadow-colored: 0 0 10px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  }

  [dir=rtl] .\32md\:pr-0{
    padding-left: 0px;
    padding-right: unset;
  }

  [dir=rtl] .\32md\:pl-0{
    padding-left: unset;
    padding-right: 0px;
  }

  [dir=rtl] .\32md\:pr-0.5{
    padding-left: 0.125rem;
    padding-right: unset;
  }

  [dir=rtl] .\32md\:pl-0.5{
    padding-left: unset;
    padding-right: 0.125rem;
  }

  .\32md\:dark\:shadow-\[0_0_10px_rgba\(224\2c 33\2c 202\2c 0\.39\)\]:is(.dark *){
    --tw-shadow: 0 0 10px rgba(224,33,202,0.39);
    --tw-shadow-colored: 0 0 10px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  }
}

@media (max-width: 575px){
  .sm\:invisible{
    visibility: hidden;
  }

  .sm\:fixed{
    position: fixed;
  }

  .sm\:relative{
    position: relative;
  }

  .sm\:\!right-\[50px\]{
    right: 50px !important;
  }

  .sm\:bottom-0{
    bottom: 0px;
  }

  .sm\:bottom-10{
    bottom: 2.5rem;
  }

  .sm\:bottom-\[7px\]{
    bottom: 7px;
  }

  .sm\:left-0{
    left: 0px;
  }

  .sm\:right-0{
    right: 0px;
  }

  .sm\:right-\[1\%\]{
    right: 1%;
  }

  .sm\:right-\[16px\]{
    right: 16px;
  }

  .sm\:right-\[8px\]{
    right: 8px;
  }

  .sm\:top-0{
    top: 0px;
  }

  .sm\:top-\[-40px\]{
    top: -40px;
  }

  .sm\:top-\[-70px\]{
    top: -70px;
  }

  .sm\:top-\[75px\]{
    top: 75px;
  }

  .sm\:z-30{
    z-index: 30;
  }

  .sm\:col-span-12{
    grid-column: span 12 / span 12;
  }

  .sm\:col-span-8{
    grid-column: span 8 / span 8;
  }

  .sm\:m-0{
    margin: 0px;
  }

  .sm\:-mx-6{
    margin-left: -1.5rem;
    margin-right: -1.5rem;
  }

  .sm\:-mt-6{
    margin-top: -1.5rem;
  }

  .sm\:mb-0{
    margin-bottom: 0px;
  }

  .sm\:mb-2{
    margin-bottom: 0.5rem;
  }

  .sm\:mb-3{
    margin-bottom: 0.75rem;
  }

  .sm\:mb-4{
    margin-bottom: 1rem;
  }

  .sm\:mb-5{
    margin-bottom: 1.25rem;
  }

  .sm\:mb-6{
    margin-bottom: 1.5rem;
  }

  .sm\:mb-8{
    margin-bottom: 2rem;
  }

  .sm\:mb-9{
    margin-bottom: 2.25rem;
  }

  .sm\:mb-\[200px\]{
    margin-bottom: 200px;
  }

  .sm\:me-0{
    margin-inline-end: 0px;
  }

  .sm\:me-0\.5{
    margin-inline-end: 0.125rem;
  }

  .sm\:mr-6{
    margin-right: 1.5rem;
  }

  .sm\:mt-0{
    margin-top: 0px;
  }

  .sm\:mt-2{
    margin-top: 0.5rem;
  }

  .sm\:mt-4{
    margin-top: 1rem;
  }

  .sm\:mt-5{
    margin-top: 1.25rem;
  }

  .sm\:mt-6{
    margin-top: 1.5rem;
  }

  .sm\:mt-8{
    margin-top: 2rem;
  }

  .sm\:mt-\[-50px\]{
    margin-top: -50px;
  }

  .sm\:mt-\[100px\]{
    margin-top: 100px;
  }

  .sm\:line-clamp-2{
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .sm\:block{
    display: block;
  }

  .sm\:inline{
    display: inline;
  }

  .sm\:flex{
    display: flex;
  }

  .sm\:hidden{
    display: none;
  }

  .sm\:size-12{
    width: 3rem;
    height: 3rem;
  }

  .sm\:size-28{
    width: 7rem;
    height: 7rem;
  }

  .sm\:h-10{
    height: 2.5rem;
  }

  .sm\:h-40{
    height: 10rem;
  }

  .sm\:h-\[250px\]{
    height: 250px;
  }

  .sm\:h-\[280px\]{
    height: 280px;
  }

  .sm\:h-\[348px\]{
    height: 348px;
  }

  .sm\:h-\[400px\]{
    height: 400px;
  }

  .sm\:h-\[512px\]{
    height: 512px;
  }

  .sm\:h-\[600px\]{
    height: 600px;
  }

  .sm\:h-full{
    height: 100%;
  }

  .sm\:w-10{
    width: 2.5rem;
  }

  .sm\:w-16{
    width: 4rem;
  }

  .sm\:w-24{
    width: 6rem;
  }

  .sm\:w-32{
    width: 8rem;
  }

  .sm\:w-6{
    width: 1.5rem;
  }

  .sm\:w-\[200px\]{
    width: 200px;
  }

  .sm\:w-\[250px\]{
    width: 250px;
  }

  .sm\:w-\[260px\]{
    width: 260px;
  }

  .sm\:w-\[329px\]{
    width: 329px;
  }

  .sm\:w-\[87\.5px\]{
    width: 87.5px;
  }

  .sm\:w-\[95\%\]{
    width: 95%;
  }

  .sm\:w-auto{
    width: auto;
  }

  .sm\:w-full{
    width: 100%;
  }

  .sm\:w-min{
    width: -moz-min-content;
    width: min-content;
  }

  .sm\:min-w-\[160px\]{
    min-width: 160px;
  }

  .sm\:max-w-\[95\%\]{
    max-width: 95%;
  }

  .sm\:max-w-sm{
    max-width: 24rem;
  }

  .sm\:translate-y-16{
    --tw-translate-y: 4rem;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }

  .sm\:scale-90{
    --tw-scale-x: .9;
    --tw-scale-y: .9;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }

  .sm\:grid-cols-1{
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }

  .sm\:grid-cols-2{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sm\:grid-cols-\[1fr\]{
    grid-template-columns: 1fr;
  }

  .sm\:flex-row{
    flex-direction: row;
  }

  .sm\:flex-col{
    flex-direction: column;
  }

  .sm\:flex-col-reverse{
    flex-direction: column-reverse;
  }

  .sm\:flex-wrap{
    flex-wrap: wrap;
  }

  .sm\:\!items-end{
    align-items: flex-end !important;
  }

  .sm\:justify-center{
    justify-content: center;
  }

  .sm\:gap-1{
    gap: 0.25rem;
  }

  .sm\:gap-2{
    gap: 0.5rem;
  }

  .sm\:gap-3{
    gap: 0.75rem;
  }

  .sm\:gap-4{
    gap: 1rem;
  }

  .sm\:gap-6{
    gap: 1.5rem;
  }

  .sm\:gap-x-4{
    -moz-column-gap: 1rem;
         column-gap: 1rem;
  }

  .sm\:gap-y-1{
    row-gap: 0.25rem;
  }

  .sm\:gap-y-4{
    row-gap: 1rem;
  }

  .sm\:gap-y-8{
    row-gap: 2rem;
  }

  .sm\:overflow-y-auto{
    overflow-y: auto;
  }

  .sm\:rounded-2xl{
    border-radius: 1rem;
  }

  .sm\:bg-white{
    background-color: hsl(var(--white));
  }

  .sm\:bg-left{
    background-position: left;
  }

  .sm\:p-3{
    padding: 0.75rem;
  }

  .sm\:p-4{
    padding: 1rem;
  }

  .sm\:p-6{
    padding: 1.5rem;
  }

  .sm\:p-\[20px\]{
    padding: 20px;
  }

  .sm\:\!px-0{
    padding-left: 0px !important;
    padding-right: 0px !important;
  }

  .sm\:\!px-\[20px\]{
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  .sm\:\!py-\[10px\]{
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }

  .sm\:px-0{
    padding-left: 0px;
    padding-right: 0px;
  }

  .sm\:px-2{
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }

  .sm\:px-3{
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  .sm\:px-4{
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .sm\:px-5{
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }

  .sm\:px-6{
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .sm\:px-8{
    padding-left: 2rem;
    padding-right: 2rem;
  }

  .sm\:px-\[20px\]{
    padding-left: 20px;
    padding-right: 20px;
  }

  .sm\:px-\[25px\]{
    padding-left: 25px;
    padding-right: 25px;
  }

  .sm\:py-0{
    padding-top: 0px;
    padding-bottom: 0px;
  }

  .sm\:py-10{
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }

  .sm\:py-12{
    padding-top: 3rem;
    padding-bottom: 3rem;
  }

  .sm\:py-2{
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }

  .sm\:py-2\.5{
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
  }

  .sm\:py-3{
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
  }

  .sm\:py-32{
    padding-top: 8rem;
    padding-bottom: 8rem;
  }

  .sm\:py-4{
    padding-top: 1rem;
    padding-bottom: 1rem;
  }

  .sm\:py-6{
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }

  .sm\:py-8{
    padding-top: 2rem;
    padding-bottom: 2rem;
  }

  .sm\:py-\[20px\]{
    padding-top: 20px;
    padding-bottom: 20px;
  }

  .sm\:py-\[21px\]{
    padding-top: 21px;
    padding-bottom: 21px;
  }

  .sm\:pb-2{
    padding-bottom: 0.5rem;
  }

  .sm\:pb-6{
    padding-bottom: 1.5rem;
  }

  .sm\:pb-\[85px\]{
    padding-bottom: 85px;
  }

  .sm\:pl-0{
    padding-left: 0px;
  }

  .sm\:pl-8{
    padding-left: 2rem;
  }

  .sm\:pr-0{
    padding-right: 0px;
  }

  .sm\:pt-10{
    padding-top: 2.5rem;
  }

  .sm\:pt-5{
    padding-top: 1.25rem;
  }

  .sm\:pt-8{
    padding-top: 2rem;
  }

  .sm\:pt-9{
    padding-top: 2.25rem;
  }

  .sm\:pt-\[80px\]{
    padding-top: 80px;
  }

  .sm\:text-left{
    text-align: left;
  }

  .sm\:text-center{
    text-align: center;
  }

  .sm\:text-justify{
    text-align: justify;
  }

  .sm\:text-2xl{
    font-size: calc(24px + (40 - 24) * ((100vw - 320px) / (1920 - 320)));
    line-height: 1.35;
  }

  .sm\:text-2xs{
    font-size: calc(12px + (12 - 12) * ((100vw - 320px) / (1920 - 320)));
    line-height: 1.35;
    letter-spacing: 1.8px;
  }

  .sm\:text-\[10px\]{
    font-size: 10px;
  }

  .sm\:text-\[11px\]{
    font-size: 11px;
  }

  .sm\:text-\[12px\]{
    font-size: 12px;
  }

  .sm\:text-\[15px\]{
    font-size: 15px;
  }

  .sm\:text-\[16px\]{
    font-size: 16px;
  }

  .sm\:text-\[17px\]{
    font-size: 17px;
  }

  .sm\:text-\[20px\]{
    font-size: 20px;
  }

  .sm\:text-\[24px\]{
    font-size: 24px;
  }

  .sm\:text-\[26px\]{
    font-size: 26px;
  }

  .sm\:text-\[28px\]{
    font-size: 28px;
  }

  .sm\:text-\[32px\]{
    font-size: 32px;
  }

  .sm\:text-\[36px\]{
    font-size: 36px;
  }

  .sm\:text-\[40px\]{
    font-size: 40px;
  }

  .sm\:text-\[48px\]{
    font-size: 48px;
  }

  .sm\:text-base{
    font-size: calc(18px + (20 - 18) * ((100vw - 320px) / (1920 - 320)));
    line-height: 1.5;
  }

  .sm\:text-sm{
    font-size: calc(16px + (18 - 16) * ((100vw - 320px) / (1920 - 320)));
    line-height: 1.5;
  }

  .sm\:text-xl{
    font-size: calc(28px + (36 - 28) * ((100vw - 320px) / (1920 - 320)));
    line-height: 1.35;
  }

  .sm\:text-xs{
    font-size: calc(16px + (16 - 16) * ((100vw - 320px) / (1920 - 320)));
    line-height: 1.35;
  }

  .sm\:font-medium{
    font-weight: 500;
  }

  .sm\:font-normal{
    font-weight: 400;
  }

  .sm\:leading-6{
    line-height: 1.5rem;
  }

  .sm\:opacity-0{
    opacity: 0;
  }

  .sm\:transition-all{
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
  }

  .sm\:duration-300{
    transition-duration: 300ms;
  }

  [dir=rtl] .sm\:pr-0{
    padding-left: 0px;
    padding-right: unset;
  }

  [dir=rtl] .sm\:pl-0{
    padding-left: unset;
    padding-right: 0px;
  }

  [dir=rtl] .sm\:pl-8{
    padding-left: unset;
    padding-right: 2rem;
  }

  [dir=rtl] .sm\:pr-0.5{
    padding-left: 0.125rem;
    padding-right: unset;
  }

  [dir=rtl] .sm\:pl-0.5{
    padding-left: unset;
    padding-right: 0.125rem;
  }

  [dir=rtl] .sm\:mr-6{
    margin-left: 1.5rem;
    margin-right: unset;
  }

  .sm\:line-clamp-2{
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
}

@media (max-width: 510px){
  .xlsm\:h-\[480px\]{
    height: 480px;
  }
}

@media (max-width: 470px){
  .\31sm\:h-\[445px\]{
    height: 445px;
  }
}

@media (max-width: 425px){
  .\32sm\:-mb-\[155px\]{
    margin-bottom: -155px;
  }

  .\32sm\:ml-0{
    margin-left: 0px;
  }

  .\32sm\:mt-1{
    margin-top: 0.25rem;
  }

  .\32sm\:mt-\[-90px\]{
    margin-top: -90px;
  }

  .\32sm\:hidden{
    display: none;
  }

  .\32sm\:h-\[140px\]{
    height: 140px;
  }

  .\32sm\:h-\[418px\]{
    height: 418px;
  }

  .\32sm\:h-\[41px\]{
    height: 41px;
  }

  .\32sm\:w-full{
    width: 100%;
  }

  .\32sm\:flex-col{
    flex-direction: column;
  }

  .\32sm\:items-start{
    align-items: flex-start;
  }

  .\32sm\:\!px-\[10px\]{
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .\32sm\:\!py-\[8px\]{
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }

  .\32sm\:text-\[20px\]{
    font-size: 20px;
  }

  .\32sm\:text-\[22px\]{
    font-size: 22px;
  }

  [dir=rtl] .\32sm\:ml-0{
    margin-left: unset;
    margin-right: 0px;
  }

  [dir=rtl] .\32sm\:ml-0.5{
    margin-left: unset;
    margin-right: 0.125rem;
  }
}

@media (max-width: 390px){
  .\32xsm\:h-\[390px\]{
    height: 390px;
  }
}

@media (max-width: 360px){
  .\33sm\:top-\[-15px\]{
    top: -15px;
  }

  .\33sm\:top-\[-30px\]{
    top: -30px;
  }

  .\33sm\:top-\[-60px\]{
    top: -60px;
  }

  .\33sm\:top-\[-80px\]{
    top: -80px;
  }

  .\33sm\:py-\[2px\]{
    padding-top: 2px;
    padding-bottom: 2px;
  }
}

.\[\&_\:first-child\]\:ml-0 :first-child{
  margin-left: 0px;
}

[dir=rtl] .\[\&_\:first-child\]\:ml-0 :first-child{
  margin-left: unset;
  margin-right: 0px;
}

[dir=rtl] .\[\&_\:first-child\]\:ml-0 :first-child.5{
  margin-left: unset;
  margin-right: 0.125rem;
}

.\[\&_svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-4 svg:not([class*='size-']){
  width: 1rem;
  height: 1rem;
}

.\[\&_svg\]\:pointer-events-none svg{
  pointer-events: none;
}

.\[\&_svg\]\:shrink-0 svg{
  flex-shrink: 0;
}