* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }
  body {
    background: linear-gradient(to bottom right, #000000a9, #0000003a);
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #000000;
    min-height: 100vh;
  }
  h1 {
font-size: 3rem;
margin-top: 30px;
color: transparent; /* اجعل النص شفافًا لإظهار التدرج اللوني */
background: linear-gradient(to right, #ffffff 56.4%, #000000 50%); /* تدرج لوني جزئين */
background-clip: text; /* تطبيق التدرج على النص فقط */
-webkit-background-clip: text; /* دعم لمتصفح Safari */
text-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
letter-spacing: 2px;
}

  h2 {
    font-size: 1rem;
    margin-top: 30px;
    color: transparent;
    background: linear-gradient(to right, #faf7f7 40%, #000000 50%);
    /* اجعل النص شفافًا لإظهار التدرج اللوني */
    background-clip: text; /* تطبيق التدرج على النص فقط */
    -webkit-background-clip: text; /* دعم لمتصفح Safari */
    text-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
    letter-spacing: 2px;
 

  }
  .search-bar {
    display: flex;
    align-items: center;
    margin: 30px 0;
    width: 90%;
    max-width: 600px;
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);

  }
  #youtube-search {
    flex: 1;
    padding: 15px;
    border: none;
    border-radius: 30px 0 0 30px;
    font-size: 1rem;
    outline: none;
    transition: all 0.3s ease;
    font-family: 'Amiri', serif;

  }
  #youtube-search:focus {
    background-color: #ffffff;
    color: #333;
    transform: scale(1.02);
    box-shadow: 0 0 10px #34a853;
  }
  button1 {
font-weight: bold;
padding: 15px 25px;
border: none;
background-color: #000000;
color: rgb(255, 255, 255);
border-radius: 0 30px 30px 0;
font-size: 1rem;
cursor: pointer;
transition: background-color 0.3s ease, transform 0.2s ease;
font-family: 'Amiri', serif;
}

  button1:hover {
    background-color: #5ba7e6;
    transform: scale(1.05);
  }
  #video-list {
    list-style: none;
    padding: 0;
    margin: 20px 0;
    width: 90%;
    max-width: 600px;
    overflow-y: auto;
    max-height: 300px;
  }
  #video-list li {
    background-color: rgba(88, 101, 216, 0.8);
    padding: 15px;
    margin: 8px 0;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.3s ease, transform 0.2s ease;
    text-align: left;
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: 15px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    opacity: 0;
    animation: slideInLeft 0.5s forwards;
  }
  #video-list li:hover {
    background-color: #7bc9e0;
    transform: translateX(10px);
  }
  .thumbnail {
    width: 60px;
    height: 60px;
    border-radius: 8px;
    transition: transform 0.3s ease;
  }
  #youtube-player-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 800px;
    padding: 20px;
    background-color: rgba(30, 30, 30, 0.9);
    border-radius: 10px;
    box-shadow: 0 4px 12px rgb(0, 105, 243);
    margin-bottom: 20px;
  }
  #youtube-player {
    width: 100%;
    max-width: 100%;
    aspect-ratio: 16/9;
    border-radius: 10px;
    overflow: hidden;
  }


  @keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }
  @keyframes fadeInDown {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
  }
  @keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
  }
  @keyframes slideInLeft {
    from { opacity: 0; transform: translateX(-20px); }
    to { opacity: 1; transform: translateX(0); }
  }
  @keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
  }
  
 
  .statistics {
    width: 90%;
    max-width: 600px;
    background-color: rgba(30, 30, 30, 0.9);
    padding: 20px;
    border-radius: 10px;
    margin: 20px 0;
    color: #ffffff;
    text-align: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    font-family: 'Amiri', serif;

  }
  .statistics div {
    margin: 10px 0;
  }
  .statistics span {
    font-weight: bold;
    color: #34a853;
  }

  .ping {
    font-weight: bold;
    transition: color 0.3s ease-in-out;
  }
  .ping.good {
    color: green;
  }
  .ping.medium {
    color: orange;
  }
  .ping.high {
    color: red;
  }
  .ping.error {
    color: gray;
  }
  
  .footer_section1 {
    width: 90%;
    max-width: 600px;
    background-color: rgba(30, 30, 30, 0.9);
    padding: 20px;
    border-radius: 10px;
    margin: 20px 0;
    color: #ffffff;
    text-align: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  }

  .footer_section1 p {
    font-weight: bold;
    color: #34a853;
  }

  .footer_section1 a {
    color: #8098ff;
    margin: 0;
    text-align: center;
  }



  /* قسم الإحصائيات الخاصة بالفيديو */
  #video-stats {
    width: 90%;
    max-width: 600px;
    background-color: rgba(30, 30, 30, 0.9);
    padding: 20px;
    border-radius: 10px;
    margin: 20px 0;
    color: #34a853;
    text-align: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
   font-family: 'Amiri', serif;

  }

  /* قسم التعليقات */
  #video-comments {
    width: 90%;
    max-width: 600px;
    background-color: rgba(50, 50, 50, 0.8);
    padding: 15px;
    border-radius: 8px;
    margin: 20px 0;
    color: #e2e8f0;
    text-align: left;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);

  }
  #video-comments h3 {
    margin-bottom: 10px;
    color: #34a853;
  }
  .comment {
    margin-bottom: 15px;
    padding: 10px;
    background-color: rgba(70, 70, 70, 0.8);
    border-radius: 5px;
    transition: background-color 0.3s ease;
    cursor: pointer;
    font-family: 'Amiri', serif;

  }
  .comment:hover {
    background-color: rgba(100, 100, 100, 0.8);
  }
  .comment-author {
    font-weight: bold;
    color: #34a853;
  }
  .comment-text {
    margin-top: 5px;
    color: #ffffff;
  }
  

  .video-title {
font-size: 20px;
font-weight: bold;
margin-bottom: 15px;
text-align: center;
color: #34a853;
}

.stat-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 15px;
border: 1px solid #ddd;
border-radius: 8px;
margin-bottom: 10px;
background-color: #f9f9f9;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.stat-item:last-child {
margin-bottom: 0;
}

.stat-label {
font-weight: bold;
font-size: 14px;
color: #555;
}

.stat-value {
font-size: 16px;
font-weight: bold;
color: #007bff;
}










#video-list {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 15px;
}

#video-list li {
display: flex;
flex-direction: column;
align-items: center;
width: 200px;
background-color: rgba(248, 246, 246, 0.9);
border-radius: 10px;
overflow: hidden;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
cursor: pointer;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}

#video-list li:hover {
transform: scale(1.05);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.5);
}

.thumbnail {
width: 100%;
height: auto;
}

.video-info {
padding: 10px;
color: #ffffff;
text-align: center;
}

.video-info h3 {
font-size: 1rem;
font-weight: bold;
margin-bottom: 5px;
color: #34a853;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

.video-info p {
font-size: 0.9rem;
color: #bbb;
margin: 0;
}




/* الشريط بالكامل */
::-webkit-scrollbar {
width: 10px; /* عرض الشريط */
}

/* الخلفية */
::-webkit-scrollbar-track {
background: #333; /* لون الخلفية الداكنة */
border-radius: 10px; /* زوايا مستديرة */
}

/* المقبض (Thumb) */
::-webkit-scrollbar-thumb {
background: linear-gradient(45deg, #4caf50, #2196f3); /* تدرج لوني يتناسب مع الألوان الداكنة */
border-radius: 10px; /* زوايا مستديرة */
border: 2px solid #111; /* إطار داكن للمقبض */
}

/* عند التحويم */
::-webkit-scrollbar-thumb:hover {
background: linear-gradient(45deg, #2196f3, #f44336); /* تغيير اللون عند التحويم */
}

/* عند التمرير النشط */
::-webkit-scrollbar-thumb:active {
background: #4caf50; /* لون ثابت عند الضغط */
}
















/* تعديل الزر ليكون في أعلى اليمين */
.switch {
position: fixed; /* يجعل الزر ثابتًا في الزاوية العليا اليمنى */
top: 10px; /* المسافة من الأعلى */
right: 10px; /* المسافة من اليمين */
z-index: 1000; /* التأكد من أن الزر يظهر فوق المحتوى */
display: inline-block;
width: 60px;
height: 34px;
}

.switch #input {
opacity: 0;
width: 0;
height: 0;
}

.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #2196f3;
-webkit-transition: 0.4s;
transition: 0.4s;
z-index: 0;
overflow: hidden;
}

.sun-moon {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: yellow;
-webkit-transition: 0.4s;
transition: 0.4s;
}

#input:checked + .slider {
background-color: black;
}

#input:focus + .slider {
box-shadow: 0 0 1px #2196f3;
}

#input:checked + .slider .sun-moon {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
background-color: white;

}

.moon-dot {
opacity: 0;
transition: 0.4s;
fill: gray;
}

#input:checked + .slider .sun-moon .moon-dot {
opacity: 1;
}

.slider.round {
border-radius: 34px;
}

.slider.round .sun-moon {
border-radius: 50%;
}

#moon-dot-1 {
left: 10px;
top: 3px;
position: absolute;
width: 6px;
height: 6px;
z-index: 4;
}

#moon-dot-2 {
left: 2px;
top: 10px;
position: absolute;
width: 10px;
height: 10px;
z-index: 4;
}

#moon-dot-3 {
left: 16px;
top: 18px;
position: absolute;
width: 3px;
height: 3px;
z-index: 4;
}

#light-ray-1 {
left: -8px;
top: -8px;
position: absolute;
width: 43px;
height: 43px;
z-index: -1;
fill: white;
opacity: 10%;
}

#light-ray-2 {
left: -50%;
top: -50%;
position: absolute;
width: 55px;
height: 55px;
z-index: -1;
fill: white;
opacity: 10%;
}

#light-ray-3 {
left: -18px;
top: -18px;
position: absolute;
width: 60px;
height: 60px;
z-index: -1;
fill: white;
opacity: 10%;
}

.cloud-light {
position: absolute;
fill: #eee;

}

.cloud-dark {
position: absolute;
fill: #ccc;

}

#cloud-1 {
left: 30px;
top: 15px;
width: 40px;
}

#cloud-2 {
left: 44px;
top: 10px;
width: 20px;
}

#cloud-3 {
left: 18px;
top: 24px;
width: 30px;
}

#cloud-4 {
left: 36px;
top: 18px;
width: 40px;
}

#cloud-5 {
left: 48px;
top: 14px;
width: 20px;
}

#cloud-6 {
left: 22px;
top: 26px;
width: 30px;
}

@keyframes cloud-move {
0% {
  transform: translateX(0px);
}

40% {
  transform: translateX(4px);
}

80% {
  transform: translateX(-4px);
}

100% {
  transform: translateX(0px);
}
}

.stars {
transform: translateY(-32px);
opacity: 0;
transition: 0.4s;
}

.star {
fill: white;
position: absolute;
-webkit-transition: 0.4s;
transition: 0.4s;
}

#input:checked + .slider .stars {
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
opacity: 1;
}

#star-1 {
width: 20px;
top: 2px;
left: 3px;
}

#star-2 {
width: 6px;
top: 16px;
left: 3px;
}

#star-3 {
width: 12px;
top: 20px;
left: 10px;
}

#star-4 {
width: 18px;
top: 0px;
left: 18px;
}

@keyframes star-twinkle {
0% {
  transform: scale(1);
}

40% {
  transform: scale(1.2);
}

80% {
  transform: scale(0.8);
}

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




.content {
text-align: center;
padding: 50px;
}

.switch {
position: fixed;
top: 10px;
right: 10px;
z-index: 1000;
display: inline-block;
width: 60px;
height: 34px;
}

.switch #input {
opacity: 0;
width: 0;
height: 0;
}

.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #2196f3;
transition: 0.4s;
z-index: 0;
overflow: hidden;
}

.sun-moon {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: yellow;
transition: 0.4s;
}

/* عندما يكون الزر في وضع "مفعل" (تم التبديل للوضع اليلي) */
#input:checked + .slider {
background-color: #333;
}

#input:checked + .slider .sun-moon {
transform: translateX(26px);
background-color: #fff;
}



/* الوضع الدائري للزر */
.slider.round {
border-radius: 34px;
}

.slider.round .sun-moon {
border-radius: 50%;
}





/* أسلوب الوضع الليلي */
body.dark-mode {
background-color: #121212; /* خلفية داكنة */
color: #ffffff; /* نص باللون الأبيض */
}

body.dark-mode h1,
body.dark-mode h2 {
color: #ffffffbb;
}

body.dark-mode .search-bar,
body.dark-mode #video-list li,
body.dark-mode .statistics,
body.dark-mode .footer_section1,
body.dark-mode #video-stats,
body.dark-mode #video-comments {
background-color: rgba(30, 30, 30, 0.9); /* خلفية داكنة مع شفافية */
}

body.dark-mode button,
body.dark-mode .slider {
background-color: #333; /* خلفية الأزرار داكنة */
color: #fff;
}

body.dark-mode button1 {
background-color: #333;
}

body.dark-mode .switch #input:checked + .slider {
background-color: #555; /* تغيير لون الشريط في الوضع الليلي */
}

body.dark-mode .ping.good {
color: #34a853; /* اللون الأخضر للإشعارات الجيدة */
}

body.dark-mode .ping.medium {
color: #ffa500; /* اللون البرتقالي للإشعارات المتوسطة */
}

body.dark-mode .ping.high {
color: #ea4335; /* اللون الأحمر للإشعارات العالية */
}

body.dark-mode .ping.error {
color: #aaa; /* اللون الرمادي للإشعارات الخطأ */
}

/* إضافة تأثيرات للزر عند التحويم في الوضع الليلي */
body.dark-mode button:hover {
background-color: #5ba7e6;
transform: scale(1.05);
}

body.dark-mode .sun-moon {
background-color: white; /* تغيير لون الشمس أو القمر عند التبديل */
}

body.dark-mode .thumbnail {
border: 1px solid #555; /* إضافة إطار رقيق حول الصورة المصغرة */
}

body.dark-mode #video-list li:hover {
background-color: #555; /* تغيير اللون عند التحويم */
}

body.dark-mode .footer_section1 a {
color: #8098ff; /* تغيير اللون في روابط الفوتر */
}

body.dark-mode #video-comments .comment {
background-color: rgba(70, 70, 70, 0.8); /* تغيير خلفية التعليقات */
}

body.dark-mode #video-comments .comment:hover {
background-color: rgba(100, 100, 100, 0.8); /* تأثير التحويم في الوضع الليلي */
}

/* تغيير التدرج اللوني في شريط التمرير */
body.dark-mode ::-webkit-scrollbar-thumb {
background: linear-gradient(45deg, #34a853, #4285f4); /* التدرج اللوني في شريط التمرير */
}

body.dark-mode ::-webkit-scrollbar-thumb:hover {
background: linear-gradient(45deg, #4285f4, #ea4335); /* التدرج عند التحويم */
}

/* الوضع الدائري للزر */
body.dark-mode .slider.round .sun-moon {
background-color: #fff;
border-radius: 50%;
}

/* حالة النجوم في الوضع الليلي */
body.dark-mode .stars {
opacity: 1; /* جعل النجوم مرئية */
}

/* التأثيرات على الأيقونات */
body.dark-mode .star {
fill: white;
}

body.dark-mode .search-bar {
background-color: #333; /* لون خلفية شريط البحث في الوضع الليلي */
}

body.dark-mode #youtube-search {
background-color: #444; /* لون الخلفية داخل حقل البحث في الوضع الليلي */
color: #fff; /* تغيير لون النص داخل حقل البحث إلى اللون الأبيض */
}

body.dark-mode #youtube-search:focus {
background-color: #555; /* تغيير اللون عند التركيز داخل حقل البحث */
color: #fff;
}


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

.image-in-text {
display: inline-block;
width: 100px; /* عرض الصورة */
height: 100px; /* ارتفاع الصورة */
background-image: url('dexster.ico'); /* المسار إلى الصورة */
background-size: cover; /* تغطي الصورة العنصر */
background-position: center; /* مركز الصورة داخل العنصر */
margin: 0 5px; /* المسافة حول الصورة */
vertical-align: middle; /* محاذاة الصورة مع النص */
}








.button {
cursor: pointer;
padding: 1em;
font-size: 1em;
width: 7em;
aspect-ratio: 1/0.25;
color: white;
background: #212121;
background-size: cover;
background-blend-mode: overlay;
border-radius: 0.5em;
outline: 0.1em solid #353535;
border: 0;
box-shadow: 0 0 1em 1em rgba(0, 0, 0, 0.1);
transition: all 0.3s ease-in-out;
position: relative;
}
.button:disabled {
background-color: #cccccc; /* Disabled button color */
cursor: not-allowed;
}

.button:hover {
transform: scale(1.1);
box-shadow: 0 0 1em 0.45em rgba(0, 0, 0, 0.1);
background: linear-gradient(45deg, #212121, #252525);
background: radial-gradient(
  circle at bottom,
  rgba(50, 100, 180, 0.5) 10%,
  #212121 70%
);
outline: 0;
}




      .buttons-container {
          display: flex; /* يخلينا نعرض الأزرار جنب بعض */
          justify-content: center; /* محاذاة الأزرار في المنتصف */
          gap: 10px; /* مسافة بين الأزرار */
      }

.icon {
fill: white;
width: 1em;
aspect-ratio: 1;
top: 0;
left: 0;
margin: auto;
transform: translate(-35%, 10%);
}


.modal {
          display: none;
          position: fixed;
          z-index: 1;
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
          overflow: auto;
          background-color: rgb(0,0,0);
          background-color: rgba(0,0,0,0.4);
          padding-top: 60px;
      }

      .modal-content {
          background-color: #fff;
          margin: 5% auto;
          padding: 20px;
          border: 1px solid #888;
          width: 80%;
          height: 80%;
      }

      .close {
          color: #aaa;
          float: right;
          font-size: 28px;
          font-weight: bold;
      }

      .close:hover,
      .close:focus {
          color: black;
          text-decoration: none;
          cursor: pointer;
      }















/* From Uiverse.io by milegelu */ 
.button {
--bezier: cubic-bezier(0.22, 0.61, 0.36, 1);
--edge-light: hsla(0, 0%, 50%, 0.8);
--text-light: rgba(255, 255, 255, 0.4);
--back-color: 240, 40%;

cursor: pointer;
padding: 0.7em 1em;
border-radius: 0.5em;
min-height: 2.4em;
min-width: 9em;
display: flex;
align-items: center;
gap: 0.5em;

font-size: 18px;
letter-spacing: 0.05em;
line-height: 1;
font-weight: bold;

background: linear-gradient(
  140deg,
  hsla(var(--back-color), 50%, 1) min(2em, 20%),
  hsla(var(--back-color), 50%, 0.6) min(8em, 100%)
);
color: hsla(0, 0%, 90%);
border: 0;
box-shadow: inset 0.4px 1px 4px var(--edge-light);

transition: all 0.1s var(--bezier);
}

.button:hover {
--edge-light: hsla(0, 0%, 50%, 1);
text-shadow: 0px 0px 10px var(--text-light);
box-shadow: inset 0.4px 1px 4px var(--edge-light),
  2px 4px 8px hsla(0, 0%, 0%, 0.295);
transform: scale(1.1);
}

.button:active {
--text-light: rgba(255, 255, 255, 1);

background: linear-gradient(
  140deg,
  hsla(var(--back-color), 50%, 1) min(2em, 20%),
  hsla(var(--back-color), 50%, 0.6) min(8em, 100%)
);
box-shadow: inset 0.4px 1px 8px var(--edge-light),
  0px 0px 8px hsla(var(--back-color), 50%, 0.6);
text-shadow: 0px 0px 20px var(--text-light);
color: hsla(0, 0%, 100%, 1);
letter-spacing: 0.1em;
transform: scale(1);
}

/* إعدادات الميديا ريسبونسيف */
@media (max-width: 768px) {
h1 {
  font-size: 2rem;
}
h2 {
  font-size: 0.9rem;
}

#video-list li {
  width: 100%;
}

}

@media (max-width: 480px) {
h1 {
  font-size: 1.5rem;
}
h2 {
  font-size: 0.8rem;
}


#video-list li {
  width: 100%;
  padding: 12px;
}

}