body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  margin: 0;
  background: var(--tg-theme-secondary-bg-color, #f0f2f5);
  color: var(--tg-theme-text-color, #000);
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  overflow: hidden;
}

.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.page {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  transition: transform 0.2s ease, opacity 0.2s ease;
  z-index: 1;
  overflow: auto;
}

.home {
  z-index: 0;
  position: relative;
  display: block;
}

.home.box{
  position: relative;
  width: 100%;
  height: 15%;
}

.app, .profile, .search, .myapp, .notification {
  display: none;
  z-index: 2;
}

.app{
  background: var(--tg-theme-secondary-bg-color, #f0f2f5);
}
.myappmanage{
  background: var(--tg-theme-secondary-bg-color, #f0f2f5);
}
.notification{
  background: var(--tg-theme-secondary-bg-color, #f0f2f5);
}
.search{
  background: var(--tg-theme-secondary-bg-color, #f0f2f5);
}
.profile{
  background: var(--tg-theme-secondary-bg-color, #f0f2f5);
}

.material-icons{
  font-size: 30px;
}

.home-header{
  width: 90%;
  margin: auto;
  height: 120px;
  display: flex;
  justify-content: space-between;
  align-items: end;
}

.home-header img{
  width: 35px;
  border-radius: 50%;
}

.home-header.material-icons{
  font-size: 30px;
}

.categories {
  display: flex;
  margin-top: 20px;
  overflow-x: scroll;
  font-size: 14px;
  font-family: 'roboto';
  margin-left: 20px;
  white-space: nowrap; /* Prevent categories from wrapping */
}

.category {
  position: relative; /* Needed for pseudo-element positioning */
  padding: 10px 20px;
  border-bottom: 2px solid var(--tg-theme-section-separator-color, #ccc);
  transition: color 0.3s ease; /* Smooth color transition */
}

.category.active {
  color: var(--tg-theme-accent-text-color, #0088cc);
  border-bottom: none; /* Remove default border */
  font-weight: bold;
}

.category.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: var(--tg-theme-accent-text-color, #0088cc);
  transition: transform 0.3s ease-in-out; /* Smooth sliding effect */
}

.scroll-1{
  display: flex;
  overflow-x: scroll;
  margin-top: 20px;
  margin-bottom: 10px;
  margin-left: 20px;
  white-space: nowrap;
  overflow-y: hidden;
}

.product{
  min-width: 90px;
  height: 90px;
  position: relative;
  border-radius: 10px;
  background: var(--tg-theme-bg-color, #ccc);
  margin-right: 20px;
  margin-bottom: 40px;
}

.product img{
  width: 100%;
  height: 100%;
  border-radius: 10px;
}

.product-info {
  position: absolute;
  width: 90px;
  height: 40px;
  bottom: -50px;
  font-size: 11px;
  display: flex;
  text-align: center;
  justify-content: center;
  color: var(--tg-theme-text-color);
  white-space: normal; /* Allows text to wrap to the next line */
  overflow-wrap: break-word; /* Breaks long words to fit within the width */
  word-break: break-word; /* Alternative for broader browser support */
  line-height: 0.9em;
}

.events{
  display: flex;
  overflow-x: scroll;
  margin-top: 10px;
  margin-bottom: 20px;
  margin-left: 20px;
  white-space: nowrap;
  overflow-y: visible;
}

.event{
  min-width: 95%;
  height: 200px;
  border-radius: 10px;
  margin-right: 20px;
  overflow: hidden;
  display: flex;
  align-items: center;
  background: var(--tg-theme-bg-color, #ccc);
}

.event img{
  width: 100%;
}

.sponsors{
  display: flex;
  overflow-x: scroll;
  padding-top: 10px;
  padding-bottom: 10px;
  margin-left: 20px;
  white-space: nowrap;
  overflow-y: visible;
  border-top: 2px solid var(--tg-theme-section-separator-color, #aaa);
  border-bottom: 2px solid var(--tg-theme-section-separator-color, #aaa);
}

.sponsor{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  overflow: hidden;
  height: 60px;
  border-radius: 5px;
}

.sponsor img{
  height: 60px;
  width: 60px;
  border-radius: 5px;
}

.sponsor-info{
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-left: 10px;
}

.sponsor-info .name{
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  font-size: 18px;
  font-weight: bold;
  width: 90%;
  overflow: hidden;
}

.sponsor-info .type{
  font-size: 16px;
  line-height: 0.8em;
  color: var(--tg-theme-section-hint-color, #aaa);
}

.sponsor-info .traction{
  display: flex;
  align-items: center;
  color: var(--tg-theme-section-hint-color, #aaa);
}

.sponsor-info .traction .material-icons{
  font-size: 16px;
}

.app .box{
  display: flex;
  width: 90%;
  margin: auto;
  padding-top: 90px;
  justify-content: space-between;
}

.app .box img{
  height: 100px;
  width: 100px;
  border-radius: 10px;
}

.appinfo{
  width: 100%;
  margin-left: 20px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.appinfo .appname{
  width: 100%;
  overflow: hidden;
  font-size: 22px;
  font-family: serif;
  font-weight: bold;
}

.appinfo .apptype{
  color: var(--tg-theme-section-hint-color, #aaa);
}

.appinfo .apptrust{
  font-size: 15px;
  display: flex;
  align-items: center;
  color: var(--tg-theme-accent-text-color, #0088cc);
}

.appinfo .apptrust .material-icons{
  font-size: 15px;
  color: var(--tg-theme-accent-text-color, #0088cc);
}

.app .joinbtn{
  width: 90%;
  margin: auto;
  border-radius: 10px;
  background: var(--tg-theme-button-color, #0088cc);
  height: 50px;
  display: flex;
  justify-content: center;
  margin-top: 20px;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  font-size: 18px;
  font-weight: bold;
  color: var(--tg-theme-button-text-color, #fff);
  align-items: center;
}

.appachieve{
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
  margin-bottom: 10px;
}

.achievement{
  width: 25%;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--tg-theme-section-hint-color, #aaa);
}

.achievement .material-icons{
  font-size: 20px;
  color: var(--tg-theme-section-hint-color, #aaa);
}

.appcontent{
  display: flex;
  overflow-x: scroll;
  padding-top: 10px;
  padding-bottom: 10px;
  margin-left: 20px;
  white-space: nowrap;
}

.content{
  min-width: 100px;
  height: 180px;
  border-radius: 10px;
  margin-right: 20px;
  background: var(--tg-theme-bg-color, #fff);
}

.applabel{
  font-size: 20px;
  font-weight: bold;
  padding-top: 10px;
  color: var(--tg-theme-section-header-text-color, #aaa);
  margin-left: 20px;
}

.appabout{
  width: 90%;
  margin: auto;
  color: var(--tg-theme-section-hint-color, #aaa);
  margin-bottom: 20px;
}

.appratehint{
  font-size: 12px;
  color: var(--tg-theme-subtitle-text-color, #ccc);
  width: 90%;
  margin-bottom: 8px;
  margin: auto;
}

.appratestars{
  display: flex;
  width: 100%;
  align-items: center;
  height: 60px;
  font-size: 24px;
  justify-content: space-between;
}

.appratestar{
  width: 20%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.apprates{
  margin-top: 20px;
}

.apprate{
  width: 90%;
  padding-top: 10px;
  padding-bottom: 10px;
  display: flex;
  flex-direction: column;
  margin: auto;
  border-bottom: 2px solid var(--tg-theme-section-separator-color, #aaa);
}

.rater{
  display: flex;
  width: 100%;
  justify-content: space-between;
}

.rater img{
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.raterinfo{
  width: 90%;
  display: flex;
  padding-left: 10px;
  flex-direction: column;
}

.ratername{
  font-size: 16px;
  font-weight: bold;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

.ratetime{
  font-size: 12px;
  color: var(--tg-theme-subtitle-text-color, #aaa);
}

.reviewtext{
  margin-top: 0px;
  padding-left: 50px;
  color: var(--tg-theme-text-color, #000);
  font-size: 14px;
  margin-bottom: 5px;
}

.appsimillars{
  display: flex;
  overflow-x: scroll;
  padding-top: 10px;
  padding-bottom: 10px;
  margin-left: 20px;
  white-space: nowrap;
}

.profilepic{
  width: 80px;
  height: 80px;
  border-radius: 50%;
  margin-top: 70px;
}

.profilename{
  width: 100%;
  display: flex;
  align-items: center;
  font-size: 18px;
  font-weight: bold;
  justify-content: center;
}

.profileusername{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 30px;
  color: var(--tg-theme-section-hint-color, #aaa);
}

.profilelabel{
  font-size: 20px;
  font-weight: bold;
  display: flex;
  width: 90%;
  margin: auto;
  margin-top: 20px;
  justify-content: space-between;
  align-items: center;
  text-align: center;
  color: var(--tg-theme-section-header-text-color, #aaa);
}

.myapps{
  width: 90%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: auto;
  margin-top: 10px;
  background: var(--tg-theme-bg-color, #fff);
  border-radius: 10px;
}

.blanktext{
  color: var(--tg-theme-subtitle-text-color, #ccc);
  text-align: center;
}

.myapp{
  width: 100%;
  display: flex;
  align-items: center;
  height: 60px;
  border-radius: 10px;
}

.myapp img{
  width: 40px;
  height: 40px;
  border-radius: 10px;
  margin-right: 10px;
  margin-left: 10px;
}

.myapp .myappinfo{
  width: 100%;
  display: flex;
  height: 40px;
  padding-top: 10px;
  padding-bottom: 10px;
  justify-content: space-between;
  border-bottom: 2px solid var(--tg-theme-section-separator-color, #aaa);
}

.myappinfo i{
  display: flex; 
  height: 40px; 
  align-items: center; 
  font-size: 30px; 
  padding-right: 20px; 
  color: var(--tg-theme-section-hint-color, #aaa);
}

.myappname{
  font-size: 17px;
  font-weight: bold;
}

.myapptype{
  font-size: 14px;
  color: var(--tg-theme-section-hint-color, #aaa);
}

.mybadges{
  width: 90%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: auto;
  margin-top: 10px;
  background: var(--tg-theme-bg-color, #fff);
  border-radius: 10px;
}

.appmanageinfo{
  width: 90%;
  margin: auto;
  margin-top: 90px;
  display: flex;
  align-items: center;
}

.appmanageinfo img{
  width: 70px;
  height: 70px;
  border-radius: 10px;
}

.myappinfoname{
  font-size: 24px;
  font-weight: bold;
  line-height: 0.9em;
}

.myappinfousername{
  font-size: 17px;
  color: var(--tg-theme-section-hint-color, #aaa);
  margin-bottom: 2px;
}

.myappinfostatics{
  display: flex;
  font-size: 14px;
  color: var(--tg-theme-section-hint-color, #aaa);
}

.myappinfostatics .material-icons{
  font-size: 14px;
}

.myapplikes{
  margin-right: 10px;
  display: flex;
  align-items: center;
}

.myapprates{
  margin-right: 10px;
  display: flex;
  align-items: center;
}

.myapptrust{
  margin-right: 10px;
  display: flex;
  align-items: center;
}

.myappcontents{
  display: flex;
  overflow-x: scroll;
  padding-top: 10px;
  padding-bottom: 10px;
  margin-left: 20px;
  white-space: nowrap;
}

.myappcontent{
  min-width: 100px;
  height: 180px;
  border-radius: 10px;
  margin-right: 20px;
  background: var(--tg-theme-bg-color, #fff);
}