html {
  font-size: 10px;
  font-family: Source Sans, sans-serif;
  background-color: rgb(191, 229, 177);
  margin: 0;
  padding: 0;
}
h1 {
  font-size: 35px;
  text-align: center;
  margin: 0px 5px 0px 5px;
  padding: 10px 0;
  color: #062f56;
  text-shadow: 1px 1px 1px rgb(109, 32, 32);
}
h2 {
  font-size: 30px;
  text-align: center;
  color: rgba(0, 159, 31, 0.94);
}
h3 {
  font-size: 25px;
  text-align: center;
  color: rgba(159, 0, 141, 0.94);
  margin: 0;
  
}
h4 {
  font-size: 20px;
  text-align: center;
  color: black;
  margin: 0;
}
h5 {
  font-size: 25px;
  text-align: left;
  color: black;
  margin: 10px;
}
p {
  font-size: 20px;
  line-height: 1;
  letter-spacing: 0px;
  margin: 10px;
  text-align: justify;
  text-indent: 40px; /* Отступ первой строки в пикселах */
}
li:hover {
  background: #4b0f7b;
}

/* решта твоїх стилів (збережені) */
.main {
  position: absolute;
  width: auto;
  left: 5px;
  right: 5px;
  margin: 5px;
  padding: 5px;
  background-color: rgb(142, 246, 213);
  border: 3px solid rgb(243, 75, 75);
  border-radius: 10px;
}
.image-align {
  text-align: center;
  margin: 20px;
}
.note {
    font-size:20px;
    color:#e42424;
    text-align: justify; /* Вирівнювання за шириною */
    margin-bottom:6px
}
.grid {
    display:grid;
    gap:12px;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr))
}
label {
    display:block;
    margin:6px 0;
    font-size:15px
}
.days {
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    align-items:center}
.days label {
    display:inline-flex;
    gap:6px;
    align-items:center
}
textarea#topicsInput{width:100%;height:180px;font-size:14px;padding:8px;box-sizing:border-box;resize:vertical}
.controls{margin-top:10px;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
button{padding:8px 12px;cursor:pointer;border-radius:6px;border:1px solid rgba(0,0,0,.12);background:#fff}
.btn-danger{background:#e74c3c;color:#fff;border-color:#c0392b}
.btn-ghost{background:transparent;border:1px solid rgba(0,0,0,.08)}
#msg{color:#a94442;font-weight:600;margin-left:8px}
table, th, td {
  border: 1px solid black;
}
/* таблиця */
.table-wrap{overflow-x:auto;margin-top:12px}
table{width:100%;border-collapse:collapse;font-size:15px}
th,td{border:1px solid #000;padding:6px;text-align:left}
th{background:#f4f4f4}
td:nth-child(1), th:nth-child(1){width:60px;text-align:center}
td:nth-child(2), th:nth-child(2){width:120px;text-align:center}
td[contenteditable="true"]{background:#fffbe6}

/* пояснення форматів */
.explain{font-size:15px;color:#555;margin-top:6px}

footer {
  text-align: center;
  padding: 15px;
  background: #8eaef5;
  color: rgb(255, 0, 0);
  margin-top: 20px;
  border-radius: 10px;
  font-size: 20px;
}
/* Кнопка "вгору" — стилі */
#scrollTopBtn {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 9999;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background-color: #8eaef5;
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity .25s ease, transform .25s ease, visibility .25s;
  pointer-events: none; /* блокуємо клики, коли невидима */
}
#scrollTopBtn.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}
#scrollTopBtn:hover { background-color: #4b0f7b; }

/* Кнопка відкриття посилання поряд з темою */
.open-link{
  border: none;
  background: transparent;
  cursor: pointer;
  margin-left: 8px;
  font-size: 16px;
  padding: 0;
  vertical-align: middle;
}
.open-link:focus{
  outline: 2px solid #8eaef5;
  border-radius: 3px;
}

/* === Меню === */
nav {
  background: #8eaef5;
}
/* базова стрічка меню */
ul {
  font-size: 2rem;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
}
/* пункт меню */
ul li {
  position: relative;
}
/* посилання */
ul li a {
  display: block;
  padding: 1.2rem;
  color: rgb(255, 0, 0);
  text-decoration: none;
}
/* підменю — за замовчуванням приховане */
ul li ul.dropdown {
  display: none;
  position: absolute;
  background: #8eaef5;
  top: 100%;
  left: 0;
  width: 220px;
  z-index: 1000;
  flex-direction: column;
  box-shadow: 0 4px 8px rgba(0,0,0,0.08);
}
/* поки що правило для JS-імітації відкриття */
ul li.show > ul.dropdown {
  display: flex;
  flex-direction: column;
}

/* hover-показ підменю — тільки на десктопі (min-width: 769px) */
@media (min-width: 769px) {
  ul li:hover > ul.dropdown {
    display: flex;
    flex-direction: column;
  }
  .menu-toggle { display: none; } /* ховаємо бургер на великих екранах */
}

/* Бургер-кнопка */
.menu-toggle {
  display: none;
  background: #8eaef5;
  color: rgb(255, 0, 0);
  font-size: 2.4rem;
  border: none;
  padding: 1rem;
  cursor: pointer;
}

/* мобільні правила */
@media (max-width: 768px) {
  ul {
    display: none;            /* ховаємо горизонтальне меню — буде показуватись при клацанні бургеру */
    flex-direction: column;
    width: 100%;
  }
  ul.show {
    display: flex;
  }
  .menu-toggle {
    display: block;
    width: 100%;
    text-align: left;
  }
  ul li { width: 100%; }
  /* робимо підменю статичним у потоці для мобільного (вкладено як вертикальний список) */
  ul li ul.dropdown {
    position: static;
    width: 100%;
    box-shadow: none;
  }
  h1 {
    font-size: 20px; /* наприклад, 25px замість 35px */
  }
  h2 {
    font-size: 20px; /* наприклад, 25px замість 35px */
  }
  h3 {
    font-size: 15px; /* наприклад, 25px замість 35px */
  }
  h4 {
    font-size: 15px; /* наприклад, 25px замість 35px */
  }
  h5 {
    font-size: 15px; /* наприклад, 25px замість 35px */
  }
  p {
    font-size: 15px;
  }
  footer {
    font-size: 15px;
  }
  .note {
    font-size: 15px;
  }
  table {
    font-size: 15px;
    height: 15px; /* задаємо фіксовану висоту */
  }
  td {
    font-size: 15px;
    height: 15px; /* задаємо фіксовану висоту */
  }
}