body {
  font-family: 'Roboto', sans-serif;
  margin: 0;
  color: #e0e0e0;
  background-color: #181818;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  font-size: 16px; /* Font size base */
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.25rem; /* Left and Right Padding for small screen*/
}


/* Header Styles */
.header {
  background-color: #212121;
  padding: 0.625rem 0;
  border-bottom: 1px solid #303030;
  position: relative;
  z-index: 100;
}

/*  Flexbox for header container */
.header-container {
display: flex;
align-items: center;
justify-content: space-between; /* Distribute space between items */
flex-wrap: nowrap; /* Prevent wrapping to next line */
gap: 0.3rem; /* Reduced gap */
}
.logo {
display: flex;
  align-items: center;
  color: #fff;
  text-decoration: none;
  margin-right: 0.9375rem;

}

.logo-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 1.875rem;
  height: 1.875rem;
   border-radius: 5px;
  background: linear-gradient(135deg, #64b5f6, #42a5f5);
 box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
 margin-right: 0.5rem;
 transition: transform 0.3s ease;
  position: relative;
  overflow: hidden;

}

.logo-icon i {
   font-size: 1.125rem;
   color: #fff;
}
.logo-pulse {
   position: absolute;
   top: 0;
  left: 0;
   width: 100%;
 height: 100%;
   border-radius: 5px;
   background-color: rgba(255, 255, 255, 0.2);
  opacity: 0;
   animation: pulse-logo 1.5s infinite cubic-bezier(0.66, 0, 0, 1);
}

@keyframes pulse-logo {
  0% {
     transform: scale(1);
      opacity: 0.2;
  }

50% {
      transform: scale(1.2);
    opacity: 0.5;
}

 100% {
   transform: scale(1);
    opacity: 0.2;
   }
}

.logo-icon:hover {
  transform: scale(1.1);
}

.logo-text {
 font-size: 1.25rem;
  font-weight: 700;
   text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

/* Category navigation - DESKTOP. */
.desktop-categories {
    display: flex;  /* Use for desktop and tablets. */
 gap: 0.3rem;       /* Spacing  buttons */
margin-left: 0;
     flex-grow: 0;     /* NOT grow and  space.*/
   justify-content: flex-start;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;  /* Smooth for  IOS*/
 padding-bottom: 0.3125rem;
 white-space: nowrap; /*Prevent wrap category buttons to  new line. Keep it inline*/

}
 /*  categories navigation. Flexible */
 .categories {
     /* display: flex; -> No display here: handled in  Media Queries */
 gap: 0.3rem;/* Reduced gap for small screen */
  margin-left: 0;
  flex-grow: 0;  /* Prevent growing */
 justify-content: flex-start;
overflow-x: auto;  /* Enable scrolling */
 -webkit-overflow-scrolling: touch; /* For smooth scrolling on iOS */
padding-bottom: 0.3125rem;
   white-space: nowrap; /* Prevent button wrapping within .categories */
}

.category-button {
background: none;
 border: none;
 color: #9e9e9e;
 font-size: 0.875rem;
 cursor: pointer;
padding: 0.375rem 0.5rem;
border-radius: 3px;
 transition: color 0.3s ease, background-color: 0.3s ease;
white-space: nowrap;
}

.category-button.active {
color: #fff;
  background-color: #37474f;
}

.category-button:hover {
 color: #fff;
background-color: #424242;
}

/*  Search Box */
.search-box {
 display: flex;
margin-left: auto;  /* Push to right, but be flexible */
 margin-right: 0;
border: 1px solid #424242;
 border-radius: 3px;
 overflow: hidden;
width: auto;/*  Width Flexible */
 flex-grow: 1;    /*Allow grow limited max-width   */
 max-width: 15.625rem;
order: 3; /* Position after categories in flex order */
}
.search-box input[type="text"] {
  background-color: #303030;
border: none;
padding: 0.375rem 0.5rem;
 color: #e0e0e0;
  font-size: 0.875rem;
 width: 100%; /*Fill container */
}
.search-box input[type="text"]:focus {
outline: none;
 border-color: #64b5f6;
}

.search-button {
   background-color: #37474f;
 border: none;
   padding: 0 0.5rem;
 cursor: pointer;
 color: #e0e0e0;
font-size: 0.9375rem;
  display: flex;
align-items: center;
 justify-content: center;
}
.auth-buttons,
.user-profile {
 display: flex;
 align-items: center;
   gap: 0.375rem;
 margin-left: 0.625rem;
 order: 4;/* Position to very right  */
 white-space: nowrap; /* Keep items in one line */
}
.auth-buttons .auth-button,
.user-profile .refill-balance-button,
.user-profile .token-balance {
background: none;
 border: 1px solid #9e9e9e;
  color: #e0e0e0;
 padding: 0.3125rem 0.4375rem;
   border-radius: 3px;
  cursor: pointer;
  font-size: 0.8125rem;
transition: color: 0.3s ease, border-color: 0.3s ease, background-color: 0.3s ease;
}

.auth-buttons .auth-button:hover,
.user-profile .refill-balance-button:hover {
color: #fff;
 border-color: #fff;
 background-color: #424242;
}

.user-profile .token-balance {
  background-color: #388e3c;
 border: none;
 font-weight: bold;
}

.user-profile .token-balance i {
   margin-right: 0.1875rem;
 font-size: 0.75rem;
}

.profile-button,
.notification-button {
  background-color: transparent;
  border: none;
  cursor: pointer;
  color: #e0e0e0;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative; /* Make the button a positioning context */
}

/*  notification. Unread styles */
.notification-unread {
  position: absolute;
  top: -2px; /* Adjust as needed */
  right: -2px; /* Adjust as needed */
  width: 8px; /* Adjust size */
  height: 8px;
  border-radius: 50%;
  background-color: red;
  display: block; /* Show by Default; it might have been hidden initially*/

}

/* Hero Section Styles */
.hero {
padding: 0.9375rem 0;
}

.hero-container {
display: flex;
  flex-direction: column;
gap: 0.625rem;
}
.hero-banner {
 display: flex;
 flex-direction: column; /* Stack items vertically */
background-color: #212121;
border-radius: 5px;
 overflow: hidden;
flex: 1;
 min-width: 0;
}

/* BELOW: Styles Changed for making TEXT visible and image setting: cover on background all resolutions */
.hero-banner {
position: relative; /* For positioning  content */
overflow: hidden;    /* Hide */
border-radius: 5px;/* set */
}

/* set styles . Stretched on full banner container (parent) */
.hero-banner img {
width: 100%;
height: 100%;
object-fit: cover;  /* VERY MPORTANT! set full image cover, stretched  image.  */
position: absolute;  /* aboslute positioned */
 top: 0;          /* Top/Right/Bottom/Left set  Image stretches out FULL parent conainer. Full stretching out*/
left: 0;
right:0;
bottom:0;
display: block;    /* */
z-index: 1;        /* to make Image (background BEHIND )*/

}
/* content Text  (h2+ p+ a (button)) */
.hero-banner .banner-content {
position: relative; /* banner-content now RELATIVE positioned.*/
  z-index: 2;    /* content z-index set =2; Content Visible now */
  color: white;       /* set */
  text-align: center;
background-color: rgba(0, 0, 0, 0.6); /* Black at 60% */
width: 100%;       /* Width */
box-sizing: border-box;  /* Box */
display:flex;            /* set Flex for aligning */
flex-direction:column;/*column; */

/* Increased padding.  This pushes content *inwards*. */
  padding: 60px 15px;

  /* Ensure alignment and centering */
 align-items: center;
  justify-content: center;

}


/*  for hero text padding */
@media (max-width: 480px) {
  .hero-banner .banner-content {
      padding: 1.9375rem;
      text-align: center; /*  mobile text alignment - added/ centered ALL content (Mobile: centered.   ) */
   }

 /* Add mobile-specific font-size overrides *inside* media query */
    .hero-banner .banner-content h2 {
      font-size: 1.2rem;  /* Mobile Smaller */
    }
    .hero-banner .banner-content p {
     font-size: 0.9rem; /*Smaller for Mobile   */
  }
}


.banner-content h2 {
  color: #fff;
  margin-top: 0;
   margin-bottom: 0.5rem;
  font-weight: 700;
    font-size: 2rem;
}

.banner-content p {
  color: #9e9e9e;
 line-height: 1.2;
 margin-bottom: 0.625rem;
font-size: 1.1rem;
}

.hero-banner-button {
  /* align-self: flex-start;    remove/ do NOT NEED align */
  /* Added Styles centering text, mobile centered text   + set Margin */
  align-self: center;/* changed: center */
   margin-top: auto;        /* */
margin-bottom: auto;   /* Auto Set . Spacing and  at center vertically.   push spacing */
}

/* Swiper JS for .hero-banner. Added: Container/wrapper */
.swiper {
width: 100%;
}

.swiper-slide {
display: flex;
justify-content: center; /* Horizontally center the content within each slide */
align-items: center;     /* Vertically center if needed */

}


/* .swiper pagination  style*/
.swiper-pagination-bullet {
background: #999; /* Default bullet color (inactive)*/
}
.swiper-pagination-bullet-active {
 background: #eee;  /*  color Active */
}
.swiper-slide .hero-banner {
 /* Ensure that hero-banner content will be correct and visible inside swiper*/
  display: flex;/*Use flex*/
flex-direction: row;  /*default style =  row for all screens */
  width: 100%;
 border-radius: 5px;  /*rounded*/

}


/* Mobile.  Change flex direction on the Vertical . Less screen Width */
@media (max-width: 768px) {  /*Media Q Breakpoint when needed change position */
  .swiper-slide .hero-banner {
    flex-direction: column; /* Swiper Flex Column at  Mobile */
 }
.swiper-slide .hero-banner {
        flex-direction: column;/* change flex dir: column on the less screens */
        align-items: center;  /* horizontal center the content if image + text is  in column */
    }

 /* Swiper content text + button on  SMALL screen fix: */
     .swiper-slide .banner-content{
           padding: 15px;    /* Increased. to make space content from */
          text-align: center;   /* Alignment CENTER; content*/
           width: 100%;        /* to full container width banner  */

    }

   .swiper-slide .banner-content .hero-banner-button {
             /* Align: Button at Center; added text-align + added  property */
            align-self: center;  /* To  center */
    }
 }
 .swiper-slide .banner-content {
        padding: 10px;
     /* Remove max-width and let content decide width.   */
     width: 100%; /* Ensure takes full container for layout correctly.*/

   }

/* Main Content Styles */
.main-content {
 padding: 0.625rem 0 0.9375rem 0;
 flex: 1;
}

.main-container {
padding: 0.625rem 0;
}
.section-header {
display: flex;
justify-content: space-between;
align-items: center;
 margin-bottom: 0.625rem;
padding-bottom: 0.3125rem;
 border-bottom: 1px solid #303030;
 padding-left: 1.25rem;  /* Left */
  padding-right: 1.25rem;  /* Right*/
}

.section-header h2 {
color: #fff;
font-size: 1.125rem;
margin: 0;
font-weight: 700;
}

.tabs {
 display: flex;
 gap: 0.3125rem;
}
.tab-button {
background: none;
 border: none;
color: #9e9e9e;
padding: 0.25rem 0.5rem;
 border-radius: 3px;
  cursor: pointer;
font-size: 0.8125rem;
transition: background-color: 0.3s ease, color: 0.3s ease;
 white-space: nowrap;
}
.tab-button.active {
color: #fff;
  background-color: #37474f;
}
.tab-button:hover {
  color: #fff;
  background-color: #424242;
}
.grid {
  display: grid;
 grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
 gap: 1.25rem;
padding: 0 1.25rem;  /* padding */
}

/* padding grid container  large screens */
@media (min-width: 576px) {
 .grid {
    padding-left: 0;
     padding-right: 0;
  }
}
.card {
 background-color: #212121;
  border-radius: 5px;
overflow: hidden;
display: flex;
  flex-direction: column;
transition: transform 0.2s ease-in-out;
position: relative;
}
.card:hover {
  transform: scale(1.02);
 box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
}

.card-link {
  display: block;
 text-decoration: none;
color: inherit;  /* Inherit  color */
height: 100%; /*  link fills  card */
}
.card-logo {
width: 100%;
  height: 4.375rem;
object-fit: contain;
 display: block;
 border-bottom: 1px solid #303030;
display: flex;
justify-content: center;
align-items: center;
  background-color: #212121;
 padding: 0;
 padding: 0;
}
.card-logo>img {
max-width: 100%;  /* full width */
max-height: 100%; /* full height*/
 object-fit: contain;  /*  object-fit: cover;  */
 display: block;
border: none;
padding: 0;
  margin: 0 auto;
}
.нейросеть-card .card-logo>img {
object-fit: cover;
/* 'contain' depeneds  logo */
width: 100%;
height: 100%;
border: none; /* Remove borders*/
border-radius: 0;  /* No */
}

/* Increase logo  cards  */
.нейросеть-card .card-logo {
height: 8rem;  /* Height increased*/
object-fit: contain;
  background-color: #303030;
  padding: 0;
border: none;
  border-radius: 0;
overflow: hidden;
}
.маркет-card .card-logo {
height: 6rem;  /*  market cards */
}

.video-card .card-preview,
.игра-card .card-logo,
.данные-card .card-logo {
width: 100%;
height: 6.25rem;
object-fit: cover;
 border-bottom: 1px solid #303030;
}

.article-card .card-preview {
width: 100%;
height: 8.75rem;
object-fit: cover;
 border-bottom: 1px solid #303030;
}

.card-info {
padding: 0.9375rem;
display: flex;
 flex-direction: column;
flex-grow: 1;
align-items: flex-start;
}

/* padding  card-info small */
@media (max-width: 576px) {
  .card-info {
   padding-left: 15px;  /* padding */
    padding-right: 15px;  /* padding*/
}
}


.card-info h3 {
color: #fff;
margin-top: 0;
margin-bottom: 0.25rem;
  font-size: 0.875rem;
font-weight: 700;
line-height: 1.2;
text-align: left;
}

.card-category,
.video-author,
.video-views,
.article-author,
.article-date,
.card-price {
 color: #9e9e9e;
 font-size: 0.75rem;
  margin-bottom: 0.375rem;
text-align: left;
}
.card-price {
font-weight: bold;
  color: #fff;
}

.rating {
  display: flex;
 align-items: center;
 color: #ffca28;
font-size: 0.75rem;
 margin-top: 0;  /* Reset */
 margin-bottom: 0.1875rem;
align-self: start;  /* Align   start  */
}

.rating i {
margin-right: 0.125rem;
 font-size: 0.75rem;
}
.card-tag {
  position: absolute;
 top: 0.3125rem;
  right: 0.3125rem;
color: #fff;
font-size: 0.625rem;
font-weight: bold;
 padding: 0.125rem 0.3125rem;
  border-radius: 3px;
}

.free-tag {
 background-color: #4caf50;
}

.paid-tag {
background-color: #f44336;
}

.card-tags {
 display: flex;
 flex-wrap: wrap;
  gap: 0.25rem;
margin-top: 0.375rem;
}

.card-tags .tag {
  background-color: #37474f;
color: #fff;
  font-size: 0.6875rem;
  padding: 0.125rem 0.375rem;
 border-radius: 5px;
white-space: nowrap;
}
.card-button-container {
  width: 100%;
display: flex;
justify-content: flex-start;
padding-left: 0.9375rem;
 padding-right: 0.9375rem;
 box-sizing: border-box;
margin-top: 0.375rem;
margin-bottom: 0.625rem;
}

.button {
border: none;
padding: 0.375rem 0.625rem;
  border-radius: 5px;
cursor: pointer;
text-align: center;
  display: block;
width: auto;
box-sizing: border-box;
  font-size: 0.875rem;
 transition: background-color: 0.3s ease, color: 0.3s ease;
margin-top: 0;
}
.primary-button {
 background-color: #1976d2;
color: #fff;
}
.secondary-button {
 background-color: #424242;
color: #fff;
}
.primary-button:hover {
  background-color: #1565c0;
}

.secondary-button:hover {
  background-color: #546e7a;
}

/* Footer Styles */
.footer {
  background-color: #212121;
padding: 0.625rem 0;
border-top: 1px solid #303030;
 position: relative;
 z-index: 10;
 margin-top: auto;
}

.footer-container {
 display: flex;
justify-content: space-between;
  align-items: center;
 flex-wrap: wrap;
gap: 0.625rem;
padding: 0 0.9375rem;
}
.footer p {
color: #9e9e9e;
font-size: 0.6875rem;
 margin: 0.25rem 0;
 order: 1;
  flex-basis: 100%;
  text-align: center;
}

.footer-nav {
display: flex;
 gap: 0.5rem;
 margin-left: 0;
order: 2;
 justify-content: center;
  flex-basis: 100%;
flex-wrap: wrap;
}

.footer-nav a {
color: #9e9e9e;
 text-decoration: none;
 font-size: 0.6875rem;
 transition: color 0.3s ease;
 white-space: nowrap;
margin: 0.25rem;
}
.footer-nav a:hover {
color: #fff;
}
.social-icons {
display: flex;
gap: 0.3125rem;
 order: 3;
 justify-content: center;
  flex-basis: 100%;
 margin-top: 0.625rem;
}

.social-icons.expanded {
 justify-content: flex-start;
}
.social-icon-link {
color: #9e9e9e;
 font-size: 0.875rem;
transition: color 0.3s ease;
display: flex;
  align-items: center;
  justify-content: center;
  width: 1.4375rem;
 height: 1.4375rem;
 border-radius: 50%;
background-color: #303030;
}

.social-icon-link:hover {
 color: #fff;
background-color: #424242;
}
.recommendation-section {
margin-top: 0.625rem;
width: 100%; /*  width */
  box-sizing: border-box; /* padding border*/
}
.recommendation-section h2 {
 color: #fff;
  font-size: 1rem;
 margin-bottom: 0.5rem;
 font-weight: 700;
padding-left: 1.25rem;
  padding-right: 1.25rem;
  text-align: left; /* Align */
}

.upload-game-section,
.upload-article-section,
.upload-video-section,
.upload-user-section {
 background-color: #212121;
 padding: 0.9375rem;
  border-radius: 5px;
  margin-top: 0.9375rem;  /*Margin Top*/
margin-bottom: 1.25rem; /*Bottom-Desktop version  not changing styles: margin added small screens*/
color: #9e9e9e;
font-size: 0.75rem;
  line-height: 1.4;
display: flex;
flex-direction: column;
  box-sizing: border-box;
 width: auto;
 word-wrap: break-word;  /* Wrap */

}

.upload-game-section .upload-info-box h2,
.upload-article-section .upload-info-box h2,
.upload-video-section .upload-info-box h2,
.upload-user-section .upload-info-box h2 {
  color: #fff;
font-size: 1rem;
margin-top: 0;
margin-bottom: 0.5rem;
 text-align: center;
}

.upload-info-box {
text-align: center;
}
.upload-game-section ul,
.upload-article-section ol {
margin-top: 0.3125rem;
 margin-bottom: 0.375rem;
  padding-left: 0.75rem;
}
.upload-game-section a,
.upload-article-section a,
.upload-video-section a,
.upload-user-section a {
color: #64b5f6;
text-decoration: none;
transition: color 0.3s ease;
}

.upload-game-section a:hover,
.upload-article-section a:hover,
.upload-video-section a:hover,
.upload-user-section a:hover {
color: #81d4fa;
}
/* Modal Styles */
.modal {
 display: none;
position: fixed;
z-index: 1000;
  left: 0;
top: 0;
 width: 100%;
  height: 100%;
overflow: auto;
background-color: rgba(0, 0, 0, 0.8);
}
.modal-content {
 background-color: #212121;
  margin: 10vh auto;
  padding: 0.9375rem;
  border: 1px solid #303030;
  width: 90%;
  max-width: 18.75rem;
  border-radius: 5px;
position: relative;
}
.close-button {
  color: #ccc;
 position: absolute;
top: 0.1875rem;
 right: 0.3125rem;
font-size: 1.125rem;
font-weight: bold;
cursor: pointer;
}
.close-button:hover,
.close-button:focus {
 color: #fff;
text-decoration: none;
cursor: pointer;
}
.modal-content h2 {
  color: #fff;
  text-align: center;
  margin-bottom: 0.625rem;
   font-size: 1rem;
}

.auth-options {
 display: flex;
  flex-direction: column;
  gap: 0.3125rem;
 margin-bottom: 0.625rem;
}
.auth-option-button {
 background-color: #37474f;
  color: #fff;
  border: none;
 padding: 0.4375rem 0.5625rem;
  border-radius: 3px;
  cursor: pointer;
 font-size: 0.8125rem;
  display: flex;
    align-items: center;
  justify-content: center;
  transition: background-color: 0.3s ease;
}
.auth-option-button:hover {
 background-color: #4f5b62;
}

.auth-option-button i {
margin-right: 0.3125rem;
}

.auth-form {
display: flex;
 flex-direction: column;
gap: 0.5rem;
}

.auth-form input[type="email"],
.auth-form input[type="password"] {
  background-color: #303030;
border: none;
padding: 0.4375rem 0.5625rem;
border-radius: 3px;
color: #e0e0e0;
font-size: 0.75rem;
}

.auth-form input[type="email"]::placeholder,
.auth-form input[type="password"]::placeholder {
 color: #9e9e9e;
}
.auth-form button[type="submit"] {
 padding: 0.4375rem 0.5625rem;
  font-size: 0.8125rem;
}
.form-links {
display: flex;
justify-content: space-between;
  margin-top: 0.3125rem;
font-size: 0.6875rem;
  color: #9e9e9e;
}
.form-links a {
 color: #64b5f6;
 text-decoration: none;
 transition: color 0.3s ease;
}

.form-links a:hover {
 color: #81d4fa;
}

/* Refill Modal Styles */
.refill-modal-content {
 max-width: 22rem; /* Slightly wider */
}

.refill-modal-content h2 {
  margin-bottom: 1rem;
}

.refill-options {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.refill-amount-input {
  display: flex;
  flex-direction: column;
}

.refill-amount-input label {
  color: #fff;
  margin-bottom: 0.3rem;
  font-size: 0.875rem;
}

.refill-amount-input input[type="number"] {
  background-color: #303030;
  border: none;
  padding: 0.5rem 0.6rem;
  border-radius: 3px;
  color: #e0e0e0;
  font-size: 0.875rem;
  width: 100%;
  box-sizing: border-box;
}

.refill-amount-input input[type="number"]:focus {
  outline: none;
  border-color: #64b5f6;
  box-shadow: 0 0 0 2px rgba(100, 181, 246, 0.5);
}
.refill-price {
  color: #fff;
  font-size: 1rem;
  font-weight: bold;
  text-align: center;
  margin-bottom: 0.5rem;
}
.refill-price i {
  font-size: 0.9rem;
  margin-left: 0.2rem;
}

.refill-payment-button {
  padding: 0.5rem 0.75rem;
  font-size: 0.9rem;
}

/* Header large screens. Mobile First Completed*/
.menu-toggle {
    display: none; /* Initially hide on larger screens */
  background: none;
  border: none;
font-size: 1.25rem;
  color: white;
   cursor: pointer;
padding: 0.25rem;
}
.sidebar {
display: none;  /* Hidden by default on large screens*/
  position: fixed; /* Fixed positioning*/
 top: 0;        /*  from the top*/
left: -15.625rem;   /* Off-screen to left*/
 width: 15.625rem;     /* Fixed width of  */
height: 100%;
background-color: #212121; /* Color Dark  */
  overflow-y: auto;   /* Enable  scrolling if content overflow */
  z-index: 1000;
   transition: left 0.3s ease;    /* Smooth */
}

.sidebar.open {
left: 0; /* Moves to VISIBLE on screen. */
}

/*  for 'x' button in  sidebar */
.close-menu {
   position: absolute;    /*  in sidebar */
    top: 0.625rem;        /* Positioning 'x' on top Right little margin */
   right: 0.625rem;
font-size: 1.5rem;    /* Size*/
color: white;
    background: none;
   border: none;
   cursor: pointer;  /* pointer */
 padding: 0.3125rem; /*Added: PAdding all*/
}
.sidebar .categories{
    /* Inside the Sidebar now. Block by Flex*/
  flex-direction: column; /*   items Vertically.*/
  align-items: stretch; /*   full width . */
  padding-top: 3.125rem;     /* some Space From TOP after close menu button */
}
 .sidebar .category-button {
      text-align: left;  /* Alignment  to  left.*/
   width: 100%;
   padding: 0.625rem 0.9375rem; /*  padding for items*/
     margin: 0;           /* Remove the gap between buttons*/
     border-radius: 0;      /* Remove border-radius in mobile sidebar */
     border: none;
     display: block;
}

 /* removing Active Style button when inside mobile view (sidebar) */
  .sidebar .category-button.active{
      background-color: transparent; /* Set transparent for removing default Active state design of mobile view button  */
      color: #fff;  /* Ensure active text is white */
   }

  .sidebar .category-button:hover{
      /*  Hover styles. Important: set  Styles inside mobile(sidebar). */
     background-color:#424242
}

/* Media Queries for larger screens */
@media (min-width: 576px) {
  body {
      font-size: 18px;
  }

  .container {
      padding: 0 20px;
  }

  .header {
      padding: 15px 0;
  }
.menu-toggle{
        display: none;  /* Hide  desktop and Tablets (because desktop+ tablets will see DESKTOP default menu  without */
 }
   .sidebar{
        display: none;   /* Do NOT DISPLAY: Sidebar hidden Large screens */
}

   /*  categories Visible. Displayed Again on larger screen resolutions. (because will resolution got large, we dont use  */
    .desktop-categories{
        display: flex !important;  /* Because: We Hided Categories.  category block on the SMALL SCREENS. NOW LARGE and should  VISIBLE again */
     }

  /*   Make all header parts on larger screens occupy  space */
 .header-container {
   flex-wrap: nowrap;  /* Ensure items stay in one line. Very important!*/
    align-items: center; /* Vertical */
   justify-content: space-between;
  }

   .logo {
      margin-right: 15px;
     order: 1;/* set Order 1 */

  }
    .logo-icon {
       width: 35px;
      height: 35px;
    }
  .logo-icon i {
     font-size: 20px;
   }
    .logo-text {
        font-size: 22px;
 }
  .categories {
   flex-direction: row; /* back Row*/
     justify-content: flex-start;
      overflow-x: visible;  /* Disable */
       padding-bottom: 0;
     margin-bottom: 0;
       order: 2;  /* Set position 2 order*/
        margin-right: auto;  /* push categories to left (but  space) after LOGO.*/
  }

  .category-button {
   font-size: 15px;
     padding: 8px 10px;
}
 /* Search + auth to right.  Added margin between search/auth  */
  .search-box {
      max-width: 300px;
     margin-left: auto; /* Push  to right. Auto */
       order: 3;   /* position: Order 3*/
}
 .search-box input[type="text"] {
     padding: 8px 10px;
     font-size: 15px;
  }

 .search-button {
  padding: 0 10px;
       font-size: 16px;
  }
   .user-section{
        /* new block for flex auth / profile to work alignment*/
       margin-left:1rem; /* added margin for separation between SEARCH + User section(auth /profile)*/
    order: 4;    /* set to position Order:4; Very important) */
    }
   .auth-buttons,
.user-profile {
      gap: 8px;
   margin-left: 0; /*  Reset the margin  Large */
   }
 .auth-buttons .auth-button,
 .user-profile .refill-balance-button,
   .user-profile .token-balance {
      padding: 6px 8px;
     font-size: 14px;
 }
.profile-button,
  .notification-button {
     font-size: 18px;
}
 .hero {
    padding: 20px 0;
}
 /* hero-container set to ROW. Hero becomes flexible */
 .hero-container {
   flex-direction: row;/* Change to  Row (side-by-side */
       gap: 15px;  /* space */
}
/* ALL Screen: Large dekstop / tablets correct swiper  */
  .swiper-slide .hero-banner {
      flex-direction: row;
      align-items: center;
      width: 100%; /* Ensure full width */
  }

  .swiper-slide .banner-content {
      width: 100%; /* Occupy full width of the slide */
      text-align: center;
      align-items: center;
      justify-content: center;
      padding: 60px 15px;
      box-sizing: border-box; /* Include padding in width */
  }
   /* desktop Button Large screen centered */
      .swiper-slide .banner-content .hero-banner-button {
         align-self: center;/* Button now Centered */
        margin-top: auto;    /*Margin -  Push + Vertically   center  */
         margin-bottom:auto; /*  Push and Vertically centered Large Screen   at the center with pushing with auto*/
   }

   /* REMOVED all PAragraph large/ Small size settings: REMOVED settings inside the large + mobile and moved alll to settings on default value */

  .main-content {
    padding: 10px 0 20px 0;
     }
      .section-header {
        margin-bottom: 12px;
        padding-bottom: 6px;
        padding-left: 0; /* No more. we have already added paddings on small screens */
    padding-right: 0;
    }
  .section-header h2 {
    font-size: 20px;
  }
  
  .tabs {
   gap: 6px;
  }
  .tab-button {
   padding: 5px 10px;
   font-size: 14px;
  }
  
  .grid {
  grid-template-columns: repeat(auto-fill, minmax(185px, 1fr));
       gap: 12px;
     padding: 0;
   }
  
   .card-logo {
       height: 80px;
      padding: 0;
  }
  /* cards.  */
  .нейросеть-card .card-logo {
   height: 8rem;
   }
  
  .маркет-card .card-logo {
  height: 6rem;
    }
  
  .video-card .card-preview,
   .игра-card .card-logo,
  .данные-card .card-logo {
    height: 120px;
  }
  
  .article-card .card-preview {
   height: 160px;
  }
  
  .card-info {
    padding: 12px;
  }
  
   .card-info h3 {
      font-size: 16px;
       margin-bottom: 5px;
  }
  
  .card-category,
   .video-author,
  .video-views,
   .article-author,
    .article-date {
      font-size: 13px;
        margin-bottom: 8px;
    }
  .rating {
    font-size: 13px;
    margin-bottom: 5px;
  }
  
  .rating i {
   font-size: 13px;
  }
  .card-tag {
       top: 8px;
    right: 8px;
  font-size: 11px;
    padding: 3px 6px;
  }
  
  .card-tags {
   gap: 5px;
     margin-top: 8px;
  }
  .card-tags .tag {
      font-size: 12px;
       padding: 3px 8px;
  }
  .card-button-container {
    padding-left: 12px;
  padding-right: 12px;
    margin-top: 8px;
       margin-bottom: 12px;
  }
  
  .button {
  padding: 8px 12px;
  font-size: 15px;
  }
  .footer {
     padding: 10px 0;
  }
  .footer-container {
    flex-wrap: nowrap;
   padding: 0 20px;
  }
  
   .footer p {
      font-size: 12px;
       margin: 0;
   flex-basis: auto;
        text-align: left;
   }
  
  .footer-nav {
    gap: 10px;
    justify-content: flex-start;
     flex-basis: auto;
     flex-wrap: nowrap;
  }
  .footer-nav a {
      font-size: 12px;
    margin: 0;
  }
  
   .social-icons {
  gap: 8px;
      justify-content: flex-start;
   flex-basis: auto;
  margin-top: 0;
  }
   .social-icons.expanded {
      justify-content: flex-start;
   }
  
  .social-icon-link {
    font-size: 16px;
  }
  
  .recommendation-section {
      margin-top: 15px;
  }
  
  .recommendation-section h2 {
       font-size: 18px;
  margin-bottom: 12px;
   }
  
  .main-container .card-section:not(:last-child) {
    margin-bottom: 0.625rem;
   }
  /* automatically .removed */
  .main-content>.container>section.popular-section,
    .main-content>.container>section.video-section,
   .main-content>.container>section.game-section,
  .main-content>.container>section.data-section,
  .main-content>.container>section.article-section {
        margin-bottom:0;
  }
  
   .upload-game-section,
   .upload-article-section,
    .upload-video-section,
  .upload-user-section {
  padding: 15px 20px;
  margin-top: 15px;
    margin-left: 0;
   margin-right: 0;
    font-size: 13px;
       line-height: 1.4;
    border-radius: 5px;
   background-color: #212121;
  }
  .upload-game-section .upload-info-box h2,
  .upload-article-section .upload-info-box h2,
  .upload-video-section .upload-info-box h2,
  .upload-user-section .upload-info-box h2 {
  font-size: 18px;
  margin-top: 0;
  margin-bottom: 10px;
     text-align: center;
  }
  .upload-game-section .upload-info-box p,
  .upload-article-section .upload-info-box p,
  .upload-video-section .upload-info-box p,
  .upload-user-section .upload-info-box p {
  text-align: center;
  }
  
   .upload-game-section ul,
  .upload-article-section ol {
    margin-top: 6px;
      margin-bottom: 8px;
    padding-left: 15px;
  }
  }
  
  /* Mobile and small screen styles */
@media (max-width: 575px) {
 .header-container {
     flex-wrap: nowrap; /* Prevent wrapping */
     align-items: center;
     justify-content: space-between;
 }

 .logo {
     display: none; /* Hide the logo */
 }

 .menu-toggle {
     display: block;
     order: 1; /* Place the menu toggle first */
 }
.desktop-categories {
     display: none; /* Correctly hide desktop categories */
 }

 .search-box {
     order: 2;      /* Search box second */
   flex: 1 0 40%;   /* Grow and take some,  but limit width*/
  max-width: 150px;
   }
.search-box input[type="text"]{
  font-size:0.7rem
}
.search-button{
     font-size:0.7rem /*   smaller button. icon*/
    }
 .user-section {
   order: 3;    /*right */
   flex: 0 1 auto;  /* do not grow.    available space */
    /* added min-width  Prevent shrunking */
       min-width: fit-content;  /* fit  its content */

   margin-left:auto /* push other flex*/
   }

.auth-buttons, .user-profile {
/* added to make all. fit.*/
  justify-content: flex-end;  /* buttons . to RIGHT  */
  gap: 0.2rem;          /*  Smaller */
   display:flex;
  align-items: center;
      }
  
 /* smaller; set  smaller all */
.auth-buttons .auth-button, .user-profile .refill-balance-button,.user-profile .token-balance, .profile-button, .notification-button{
   font-size:0.65rem;   /*make */
    padding:0.2rem 0.3rem; /*added Padding and smaller paddings. correct show*/
      }

.user-profile .token-balance i{
       font-size:0.5rem  /* Fa.   */
}
/* buttons- Profile/  Notification size little  large of button*/
.profile-button, .notification-button{
      font-size:0.8rem
 }
/* added position notfication little close. Correct show; without overlap*/
.notification-button{
  margin-left:0.2rem; /*added  little */
   position:relative;    /* make container for position  notification (red unread mark; set Absolute/ ) */
  }
.notification-unread {
  top: -2px;      /* Adjusted position */
  right: -2px;     /* Adjusted position */
  width: 6px;       /* Smaller size  */
 height: 6px;
}

  .sidebar {
  display: block; /* Display sidebar on smaller screens */
  }

   .grid {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
       gap: 8px;
    padding-left: 10px;   /* Left Padding*/
    padding-right: 10px;  /* Right Padding*/
 }

   .modal-content {
      margin-top: 5vh auto;
 }
   .section-header {
   padding-left: 10px;
    padding-right: 10px;
 }

 .section-header h2 {
    font-size: 1rem;/* Decreasing   Small  */
 }
 .recommendation-section h2 {
      font-size: 0.9rem;   /* Smaller*/
     padding-left: 10px;   /* Padding apply here  */
   padding-right: 10px;
  }

 .main-content>.container>section.popular-section, .main-content>.container>section.video-section, .main-content>.container>section.game-section, .main-content>.container>section.data-section, .main-content>.container>section.article-section {
          margin-bottom:0.5rem;
     }
  .upload-game-section,
 .upload-article-section,
  .upload-video-section,
 .upload-user-section {
    padding-left: 10px;   /*Left */
   margin-left: 10px;   /* Left */
     margin-right: 10px;
  margin-bottom:15px
  }
/* removed / replaced styles */

 .hero-banner {
     flex-direction: column; /* Column */
 }
 .hero-banner img {
   max-width: 100%;
  width: 100%;
 }

 .hero-banner .banner-content {
    width: 100%;  /* to Make */
 }
 .hero-banner {
     flex-direction: column;  /*Vertical. */
    text-align: center; /* Center-align text on mobile */
 }

 .hero-banner img {
     order: 1;
 }
 .hero-banner .banner-content {
  order: 2;  /* place  */
 }
  .swiper-slide .banner-content .hero-banner-button{
      /* centered hero content on the small displays: BUTTON  centered  now*/
        align-self: center;
    }

 }

 /*  smallest. Max width. */
 @media (max-width: 320px) {
 body {
      font-size: 12px;
 }
 .grid {
       grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
 }
 }