body {

  font-family: 'Verdana', sans-serif;

  background-color: transparent;

  margin: 0;

  padding: 20px;

  color: #003366;

}



.wrapper {

  max-width: 800px;

  margin: auto;

  background: #ffffff;

  padding: 30px;

  border-radius: 12px;

  box-shadow: 0 0 15px rgba(0, 51, 102, 0.2);

}



h1 {

  text-align: center;

  color: #0055aa;

  margin-bottom: 10px;

}



.status {

  text-align: center;

  font-size: 1.2em;

  margin-bottom: 20px;

}



.hidden {

  display: none;

}



.skeleton {

  background-color: #dbe9ff;

  border-radius: 8px;

  box-shadow: 0 0 10px rgba(0, 51, 102, 0.1);

  height: 20px;

  margin: 10px auto;

  animation: pulse 1.5s infinite ease-in-out;

}



.skeleton-time { width: 50%; }

.skeleton-lesson { width: 70%; }

.skeleton-countdown { width: 60%; }



@keyframes pulse {

  0%, 100% { opacity: 0.6; }

  50% { opacity: 1; }

}



.fade-in {

  opacity: 0;

  animation: fadeIn 0.6s forwards;

}



@keyframes fadeIn {

  to { opacity: 1; }

}



table {

  width: 100%;

  border-collapse: collapse;

  margin-top: 20px;

}



th, td {

  padding: 12px;

  border: 1px solid #cce0ff;

  text-align: center;

}



thead {

  background-color: #0055aa;

  color: white;

}



tbody tr:nth-child(even) {

  background-color: #f2f9ff;

}



tbody tr:hover {

  background-color: #d9ecff;

}



.highlight {

  background-color: #ffebcc !important;

  font-weight: bold;

}



/* Mobile styles */

@media (max-width: 600px) {

  .wrapper {

    padding: 20px;

    border-radius: 8px;

  }



  h1 {

    font-size: 1.5em;

  }



  .status {

    font-size: 1em;

  }



  table th, table td {

    padding: 8px;

    font-size: 0.9em;

  }



  .skeleton {

    height: 16px;

  }

}



/* Tablet styles */

@media (max-width: 900px) {

  .wrapper {

    padding: 25px;

  }



  h1 {

    font-size: 1.8em;

  }



  .status {

    font-size: 1.1em;

  }



  table th, table td {

    padding: 10px;

    font-size: 1em;

  }

}