body {
      margin: 0;
      font-family: sans-serif;
      background: linear-gradient(to bottom, #000000, #1a002d);
      color: #f0f0f0;
    }

    #navbar {
      background: #000000dd;
      padding: 1rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      box-shadow: 0 0 12px 12px #5a009966;
      backdrop-filter: blur(10px);
      position: fixed;
      top: 0;
      right: 0;
      left: 0;
      z-index: 1000;
    }

    #logo {
      font-size: 1.2rem;
    }

    #sidebar-toggle {
      background: none;
      border: none;
      font-size: 1.6rem;
      color: #d8cfff;
      cursor: pointer;
      display: none;
    }

    #sidebar {
      position: fixed;
      top: 84px;
      right: 0;
      width: 220px;
      height: 100vh;
      background: #0a0012f2;
      padding: 1rem;
      box-shadow: -2px 0 12px #6e00cc88;
      transition: right 0.3s ease;
      z-index: 1100;
    }

    #sidebar a {
      display: block;
      padding: 0.8rem 1rem;
      text-decoration: none;
      color: #f0f0f0;
      border-radius: 8px;
      margin-bottom: 0.5rem;
    }

    #sidebar a:hover {
      background-color: rgba(255, 255, 255, 0.1);
    }

    #main-content {
      padding: 6rem 1.5rem 2rem 1.5rem;
      margin-right: 220px; /* اضافه کردن فاصله سمت راست */
    }


    @media (max-width: 768px) {
      #sidebar-toggle {
        display: block;
      }

      #sidebar {
        right: -240px;
      }

      #sidebar.open {
        right: 0;
      }

      #main-content {
        padding-top: 7rem;
        margin-right: 0; /* حذف margin-right در موبایل */
      }

      #navbar {
        position: fixed;
      }

      #logo {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        font-size: 1.2rem;
      }

      #sidebar-toggle {
        display: block;
        order: 2; /* در انتهای فلکس قرار گیرد */
        margin-right: 0px; /* دکمه به سمت راست هل داده شود */
      }
    }


#account-info {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255, 255, 255, 0.05);
  padding: 0.5rem 1rem;
  border-radius: 12px;
  box-shadow: 0 0 10px #5a009955;
  backdrop-filter: blur(8px);
}

#account-info #username {
  font-size: 0.95rem;
  color: #f0f0f0;
  display: flex;
  align-items: center;
  gap: 6px;
}

#account-info #username i {
  color: #bb86fc;
  font-size: 1.2rem;
}

/* دکمه‌های ورود/خروج */
#account-info button {
  background: linear-gradient(145deg, #1a002d, #000000);
  border: none;
  padding: 0.3rem 0.3rem;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: inset -1px -1px 4px #ffffff10, inset 1px 1px 4px #5a009966;
}

#account-info button:hover {
  transform: scale(1.1);
  background: linear-gradient(145deg, #000000, #1a002d);
  box-shadow: 0 0 10px #9f56ff80;
}

/* آیکون‌های دکمه */
#account-info button i {
  color: #d8cfff;
  font-size: 1.2rem;
}

/* آیکون خروج قرمز مایل به صورتی */
#logout-btn i {
  color: #ff9e9e;
}

/* آیکون ورود سبز روشن */
#login-btn i {
  color: #a8ffb0;
}









.theme-toggle {
  background: transparent;
  border: none;
  color: #f0f0f0;
  font-size: 18px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0.5rem 1rem;
  cursor: pointer;
  width: 100%;
  text-align: right;
  margin-top: 1rem;
  transition: background 0.3s;
}

.theme-toggle:hover {
  background: rgba(255, 255, 255, 0.1);
}

.theme-toggle span {
  pointer-events: none;
}







/* تغییر تم به روشن */

/* تم روشن */
body[data-theme="light"] {
  background: linear-gradient(to bottom, #ffffff, #f1eaff);
  color: #222222;
}

body[data-theme="light"] #navbar {
  background: #ffffffcc;
  box-shadow: 0 0 12px 12px #bda8ff66;
}

body[data-theme="light"] #logo {
  color: #222;
}

body[data-theme="light"] #sidebar {
  background: #f5f0ff;
  box-shadow: -2px 0 12px #bbaaff88;
}

body[data-theme="light"] #sidebar a {
  color: #222;
}

body[data-theme="light"] #sidebar a:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

body[data-theme="light"] #account-info {
  background: rgba(0, 0, 0, 0.05);
  box-shadow: 0 0 10px #b49eff55;
}

body[data-theme="light"] #account-info #username {
  color: #222;
}

body[data-theme="light"] #account-info #username i {
  color: #6f2dfc;
}

body[data-theme="light"] #account-info button {
  background: linear-gradient(145deg, #f1eaff, #ffffff);
  box-shadow: inset -1px -1px 4px #ffffff88, inset 1px 1px 4px #b49eff66;
}

body[data-theme="light"] #account-info button:hover {
  background: linear-gradient(145deg, #ffffff, #f1eaff);
  box-shadow: 0 0 10px #caaaff80;
}

body[data-theme="light"] #account-info button i {
  color: #6e00cc;
}

body[data-theme="light"] #logout-btn i {
  color: #cc4444;
}

body[data-theme="light"] #login-btn i {
  color: #44aa66;
}

body[data-theme="light"] .theme-toggle {
  color: #222;
}

body[data-theme="light"] .theme-toggle:hover {
  background: rgba(0, 0, 0, 0.05);
}