/* Базові налаштування */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Nunito", sans-serif;
}

body {
  background-color: #1e1e24; /* Темний фон під Roblox Studio */
  color: #ffffff;
}

/* Контейнер всього додатку */
.app-container {
  display: flex;
  height: 100vh;
  overflow: hidden;
}

/* Бокова панель */
.sidebar {
  width: 280px;
  background-color: #2b2b36;
  border-right: 4px solid #3a3a48;
  display: flex;
  flex-direction: column;
}

.logo {
  padding: 20px;
  background-color: #ff3366; /* Яскравий акцент */
  text-align: center;
  border-bottom: 4px solid #cc0033;
}

.logo h2 {
  font-size: 24px;
  font-weight: 900;
  letter-spacing: 1px;
  text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.3);
}

.task-list {
  flex-grow: 1;
  overflow-y: auto;
  padding: 20px 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.task-link {
  text-decoration: none;
  color: #b0b0c0;
  padding: 6px 20px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 16px;
  transition: all 0.2s ease;
  border: 2px solid transparent;
}

.task-link:hover {
  background-color: #3a3a48;
  color: #ffffff;
  transform: translateX(5px);
}

/* Активне посилання */
.task-link.active {
  background-color: #4facfe;
  color: #ffffff;
  border-color: #00f2fe;
  box-shadow: 0 4px 15px rgba(79, 172, 254, 0.4);
}

/* Головний контент */
.main-content {
  flex-grow: 1;
  padding: 40px;
  position: relative; /* Важливо для позиціонування оверлею */
  overflow-y: auto;
  background-image: radial-gradient(#3a3a48 1px, transparent 1px);
  background-size: 20px 20px; /* Цікавий фон у крапочку */
}

.content-box {
  background-color: #2b2b36;
  max-width: 900px;
  margin: 0 auto;
  padding: 40px;
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  border: 2px solid #3a3a48;
}

.content-box h1 {
  color: #4facfe;
  margin-bottom: 20px;
  font-size: 32px;
}

.content-box p {
  font-size: 18px;
  line-height: 1.6;
  color: #dcdcdc;
  margin-bottom: 20px;
}

.code-placeholder {
  background-color: #1a1a20;
  padding: 20px;
  border-radius: 10px;
  border-left: 5px solid #ff3366;
  color: #a0a0b0;
}

/* === ОВЕРЛЕЙ БЛОКУВАННЯ (Заглушка) === */
.lock-overlay {
  display: none; /* Сховано за замовчуванням */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(30, 30, 36, 0.85);
  backdrop-filter: blur(8px);
  z-index: 10;
  align-items: center;
  justify-content: center;
}

/* Показуємо оверлей, якщо main має клас 'locked' */
.main-content.locked .lock-overlay {
  display: flex;
}

.lock-card {
  background: linear-gradient(145deg, #2b2b36, #3a3a48);
  padding: 50px 40px;
  border-radius: 24px;
  text-align: center;
  border: 3px solid #ff3366;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
  max-width: 500px;
  animation: popIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.lock-icon {
  font-size: 64px;
  margin-bottom: 20px;
  animation: shake 2s infinite ease-in-out;
}

.lock-card h2 {
  color: #ffffff;
  margin-bottom: 15px;
  font-size: 26px;
}

.lock-card p {
  color: #b0b0c0;
  font-size: 18px;
}

.lock-card strong {
  color: #ff3366;
  font-size: 22px;
  display: block;
  margin-top: 10px;
}

/* Анімації для дитячої живості */
@keyframes popIn {
  0% {
    transform: scale(0.8);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes shake {
  0%,
  100% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(-10deg);
  }
  75% {
    transform: rotate(10deg);
  }
}

/* Скроллбар */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: #1e1e24;
}
::-webkit-scrollbar-thumb {
  background: #4facfe;
  border-radius: 4px;
}

/* --- Стилі для сторінки завдань --- */

/* Список кроків завдання */
.task-steps {
  margin: 15px 0 30px 25px;
  color: #dcdcdc;
  font-size: 18px;
  line-height: 1.8;
}

.task-steps li {
  margin-bottom: 10px;
}

.task-steps li::marker {
  color: #4facfe;
  font-weight: bold;
}

/* Інформаційні блоки (дедлайн та телеграм) */
.info-box {
  padding: 20px;
  border-radius: 15px;
  margin-bottom: 25px;
  font-size: 18px;
  display: flex;
  align-items: center;
  gap: 15px;
}

/* Блок дедлайну (жовтий/помаранчевий акцент) */
.deadline-box {
  background-color: rgba(255, 170, 0, 0.1);
  border: 2px solid #ffaa00;
  color: #ffd000;
}

/* Блок Telegram (синій акцент) */
.telegram-box {
  background-color: rgba(0, 136, 204, 0.1);
  border: 2px solid #0088cc;
  color: #e0f2fe;
  margin-top: 30px;
}

.telegram-box strong {
  color: #00aaff;
  font-size: 20px;
}

.tg-icon {
  font-size: 40px;
  animation: bounce 2s infinite;
}

@keyframes bounce {
  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-10px);
  }
  60% {
    transform: translateY(-5px);
  }
}
/*h1 */
/* --- Нові стилі для Завдання 1 --- */

/* Блок заборони (червоний акцент) */
.warning-box {
  background-color: rgba(255, 51, 102, 0.1);
  border: 2px solid #ff3366;
  color: #ffb3c6;
}

.warning-box strong {
  color: #ff3366;
  font-size: 20px;
}

.warning-box .icon {
  font-size: 40px;
}

/* Блок зі стікером персонажа */
.sticker-box {
  display: flex;
  align-items: center;
  background: linear-gradient(135deg, #4facfe22, #00f2fe22);
  border-radius: 20px;
  padding: 15px 25px;
  margin: 30px 0;
  border: 2px dashed #4facfe;
  gap: 20px;
}

.sticker-text {
  font-size: 18px;
  color: #e0f2fe;
}

.sticker-text strong {
  color: #4facfe;
  font-size: 22px;
  letter-spacing: 1px;
}

/* CSS-малюнок персонажа (Дівчинка, темне каре, жовта футболка, синій комбінезон) */
.character-sticker {
  position: relative;
  width: 70px;
  height: 70px;
  background-color: #ffd166; /* Жовта футболка */
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  border: 3px solid #118ab2; /* Синій комбінезон (акцент) */
  flex-shrink: 0;
}

.char-hair {
  position: absolute;
  top: -5px;
  width: 76px;
  height: 40px;
  background-color: #2b2d42; /* Темне волосся */
  border-radius: 40px 40px 10px 10px;
  z-index: 1;
}

.char-face {
  position: relative;
  z-index: 2;
  font-size: 30px;
  margin-top: 10px;
}
/* === СЛАЙДЕР === */
.slider-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 25px 0;
}

.slider-container {
  width: 90%; /* Робимо широким, як дві старі картинки разом */
  height: 220px; /* Залишаємо висоту майже незмінною */
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  background-color: #1a1a20; /* Темний фон під картинкою */
  border: 3px solid transparent;
  transition:
    border-color 0.3s ease,
    box-shadow 0.3s ease;
}

.slider-container:hover {
  border-color: #4facfe;
  box-shadow: 0 10px 20px rgba(79, 172, 254, 0.4);
}

.slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* ВАЖЛИВО: картинка більше НЕ обрізається, а повністю вписується! */
  opacity: 0;
  transition:
    opacity 0.5s ease-in-out,
    transform 0.3s ease;
  cursor: zoom-in; /* Курсор лупи для розуміння, що можна клікнути */
}

.slide.active {
  opacity: 1;
  z-index: 1;
}

.slide.active:hover {
  transform: scale(1.02); /* Легкий зум при наведенні для анімації */
}

/* Кнопки під слайдером */
.slider-controls {
  margin-top: 10px;
  display: flex;
  gap: 15px;
}

.slider-btn {
  /* Яскравий градієнт замість нудного сірого фону */
  background: linear-gradient(135deg, #4facfe, #00f2fe);
  color: #ffffff;
  border: none; /* Прибираємо стару рамку */
  border-radius: 50%;
  width: 20px; /* Робимо трохи більшими */
  height: 20px;
  font-size: 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Пружна анімація */
  box-shadow: 0 5px 15px rgba(0, 242, 254, 0.3); /* М'яка тінь-світіння */
  /* Робимо емодзі стрілок більш акуратними */
  padding-bottom: 3px;
  padding-right: 1px;
}

/* Ефект при наведенні */
.slider-btn:hover {
  transform: scale(1.15) rotate(-5deg); /* Кнопка збільшується і трохи нахиляється */
  box-shadow: 0 10px 25px rgba(0, 242, 254, 0.6); /* Світіння стає яскравішим */
  background: linear-gradient(
    135deg,
    #ff3366,
    #ff5757
  ); /* Зміна кольору на акцентний червоний при наведенні */
}

/* Ефект при натисканні */
.slider-btn:active {
  transform: scale(0.95);
}

/* === МОДАЛЬНЕ ВІКНО (LIGHTBOX) === */
.lightbox {
  display: none; /* Сховано за замовчуванням */
  position: fixed;
  z-index: 1000; /* Поверх усього */
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.9); /* Темний фон (бекдроп) */
  backdrop-filter: blur(5px); /* Розмиття фону */
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* Клас для відкриття через JS */
.lightbox.active {
  display: flex;
  opacity: 1;
}

/* Саме зображення в модалці */
.lightbox-content {
  max-width: 90%;
  max-height: 85vh;
  border-radius: 8px;
  box-shadow: 0 0 30px rgba(255, 255, 255, 0.1);
  animation: zoomIn 0.3s ease;
}

/* Хрестик закриття */
.close-btn {
  position: absolute;
  top: 20px;
  right: 40px;
  color: #f1f1f1;
  font-size: 50px;
  font-weight: bold;
  cursor: pointer;
  transition: color 0.2s;
  line-height: 1;
  z-index: 1001;
}

.close-btn:hover {
  color: #ff3366;
}

/* Анімація появи картинки */
@keyframes zoomIn {
  from {
    transform: scale(0.8);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

/* Адаптивність для мобільних (картинки стануть одна під одною) */
@media (max-width: 768px) {
  .gallery {
    flex-direction: column;
  }
  .gallery-img {
    width: 100%;
    margin-bottom: 10px;
  }
}
/* Блок дозволу Тулбоксу (Зелений акцент) */
.toolbox-box {
  background-color: rgba(0, 255, 136, 0.1);
  border: 2px solid #00ff88;
  color: #ccffee;
  margin-bottom: 30px;
}

.toolbox-box strong {
  color: #00ff88;
  font-size: 20px;
}

.toolbox-box .icon {
  font-size: 40px;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
/* === ІНТЕРАКТИВНА ГРА (LEARNING APPS) === */
.interactive-task {
  background: linear-gradient(180deg, #2b2b36 0%, #1e1e24 100%);
  border: 3px dashed #8a2be2; /* Фіолетовий акцент для гри */
  border-radius: 20px;
  padding: 30px;
  margin: 40px 0;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.interactive-task h3 {
  color: #b070ff; /* Світло-фіолетовий */
  margin-bottom: 10px;
  font-size: 26px;
  text-shadow: 0 2px 10px rgba(138, 43, 226, 0.4);
}

.interactive-task p {
  margin-bottom: 25px;
  font-size: 18px;
}

/* Обгортка для iframe */
.iframe-wrapper {
  position: relative;
  width: 100%;
  height: 500px; /* Висота, як ти й просив */
  border-radius: 15px;
  overflow: hidden; /* Важливо: обрізає гострі кути самого iframe */
  border: 4px solid #3a3a48; /* Темна рамка під стиль Roblox Studio */
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
  background-color: #1a1a20; /* Фон, поки гра вантажиться */
}

/* Сам iframe */
.iframe-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none; /* Прибираємо стандартну потворну рамку */
}

/* Адаптивність: на телефонах робимо гру трохи меншою по висоті */
@media (max-width: 768px) {
  .iframe-wrapper {
    height: 400px;
  }
  .interactive-task {
    padding: 20px;
  }
}
/* --- Стилі для кнопки копіювання коду --- */
.code-placeholder {
  position: relative; /* Важливо для позиціонування кнопки */
  /* ... твої існуючі стилі (background-color, padding і т.д.) залишаються тут ... */
}

.copy-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  background-color: #3a3a48;
  color: #dcdcdc;
  border: 1px solid #4facfe;
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  font-weight: bold;
  transition: all 0.2s;
}

.copy-btn:hover {
  background-color: #4facfe;
  color: #ffffff;
}

.copy-btn.success {
  background-color: #00ff88;
  border-color: #00ff88;
  color: #1e1e24;
}
/* Додаємо відступ знизу для контейнера з кодом */
.code-placeholder {
  margin-bottom: 40px;
}

/* Стилізація головного заголовка завдання */
.task-title {
  font-size: 22px;
  color: #ffaa00; /* Яскравий жовто-помаранчевий акцент */
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 2px dashed #3a3a48;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* --- Стилі для підказок (спойлерів) --- */
.hints-wrapper {
  margin: 25px 0;
  background-color: rgba(43, 43, 54, 0.5);
  padding: 20px;
  border-radius: 12px;
  border: 2px dashed #4facfe;
}

.hints-wrapper h4 {
  color: #4facfe;
  margin-bottom: 15px;
  font-size: 18px;
}

.hint-item {
  margin-bottom: 10px;
  background-color: #1e1e24;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #3a3a48;
}

/* Вигляд кнопки спойлера */
.hint-item summary {
  padding: 12px 15px;
  font-weight: bold;
  cursor: pointer;
  color: #dcdcdc;
  background-color: #3a3a48;
  transition:
    background-color 0.2s,
    color 0.2s;
  list-style: none; /* Прибираємо стандартний трикутник браузера */
}

.hint-item summary::-webkit-details-marker {
  display: none; /* Для старих браузерів */
}

/* Кастомний трикутник */
.hint-item summary::before {
  content: "▶";
  display: inline-block;
  margin-right: 10px;
  color: #4facfe;
  font-size: 14px;
  transition: transform 0.2s;
}

/* Поворот трикутника при відкритті */
.hint-item[open] summary::before {
  transform: rotate(90deg);
}

.hint-item summary:hover {
  background-color: #4facfe;
  color: #ffffff;
}

.hint-item summary:hover::before {
  color: #ffffff;
}

/* Вміст підказки */
.hint-item p {
  padding: 15px;
  margin: 0;
  border-top: 1px solid #3a3a48;
  font-size: 16px;
  color: #dcdcdc;
}
/* --- Стилі для клікабельного інлайн-коду --- */
code.inline-copy {
  background-color: #2b2b36;
  color: #ffaa00; /* Яскравий помаранчевий колір для синтаксису */
  font-family: "Courier New", Courier, monospace;
  font-size: 15px;
  font-weight: bold;
  padding: 4px 8px;
  margin: 0 2px;
  border-radius: 6px;
  border: 1px solid #3a3a48;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-block; /* Щоб рамка не ламалася */
}

code.inline-copy:hover {
  background-color: #3a3a48;
  border-color: #4facfe;
  color: #4facfe;
  box-shadow: 0 0 10px rgba(79, 172, 254, 0.3);
}

/* Стан після успішного копіювання */
code.inline-copy.copied {
  background-color: #00ff88;
  color: #1e1e24;
  border-color: #00ff88;
  box-shadow: 0 0 10px rgba(0, 255, 136, 0.4);
}
/* === ПІДСВІЧУВАННЯ СИНТАКСИСУ (Roblox Studio) === */
#lua-code {
  color: #e2e2ec; /* Базовий колір тексту (наприклад, для wall) */
  font-family: "Courier New", Courier, monospace;
  font-size: 16px;
  line-height: 1.5;
}

.lua-keyword {
  color: #f86d7c;
} /* Червоно-кораловий (local, function) */
.lua-object {
  color: #82aaff;
} /* Синій (script.Parent) */
.lua-func {
  color: #82aaff;
} /* Синій (wait, print) */

.lua-bool {
  color: #ffc777;
  font-weight: bold;
} /* Жовтий жирний (false, true) */

/* ==========================================================================
   СТИЛІ ДЛЯ ДЗ №8 (Код, Інтерактив, Підказки)
   ========================================================================== */

/* --- Головний контейнер для коду (Термінал-стиль) --- */
.code-placeholder {
  position: relative;
  background-color: #18181f; /* Глибокий темний фон */
  padding: 24px 20px 24px 24px;
  border-radius: 12px;
  margin-bottom: 40px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  border-left: 6px solid #4facfe; /* Яскравий синій акцент зліва */
}

.code-placeholder pre {
  margin: 0;
  overflow-x: auto; /* Додає скрол, якщо код задовгий */
}

/* --- Кнопка копіювання головного коду --- */
.copy-btn {
  position: absolute;
  top: 15px;
  right: 15px;
  background-color: rgba(255, 255, 255, 0.05); /* Напівпрозорий фон */
  color: #dcdcdc;
  border: 1px solid #4a4a5a;
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s;
}

.copy-btn:hover {
  background-color: rgba(255, 255, 255, 0.15);
  color: #ffffff;
  border-color: #7a7a8a;
}

.copy-btn.success {
  background-color: #00ff88; /* Зелений при успіху */
  color: #18181f;
  border-color: #00ff88;
  font-weight: bold;
}

/* === ПІДСВІЧУВАННЯ СИНТАКСИСУ (Roblox Studio) === */

.lua-object {
  color: #82aaff;
} /* Синій (script.Parent) */
.lua-func {
  color: #82aaff;
} /* Синій (wait, print, Vector3.new) */

.lua-string {
  color: #c3e88d;
} /* Зелений ("Grey", "Міст...") */
.lua-vec {
  color: #c3e88d;
  font-weight: bold;
} /* Велика Vector3.new */

/* --- Розподільник секцій (hr.divider) --- */
.divider {
  border: 0;
  height: 2px;
  background: linear-gradient(to right, transparent, #3a3a48, transparent);
  margin: 40px 0;
}

/* --- Клікабельний інлайн-код (code.inline-copy) --- */
code.inline-copy {
  background-color: #2b2b36;
  color: #ffaa00; /* Помаранчевий колір синтаксису */
  font-family: "Courier New", Courier, monospace;
  font-size: 15px;
  font-weight: bold;
  padding: 4px 8px;
  margin: 0 2px;
  border-radius: 6px;
  border: 1px solid #3a3a48;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-block;
}

code.inline-copy:hover {
  background-color: #3a3a48;
  border-color: #4facfe;
  color: #4facfe;
  box-shadow: 0 0 10px rgba(79, 172, 254, 0.3);
}

/* Стан після успішного інлайн-копіювання */
code.inline-copy.copied {
  background-color: #00ff88;
  color: #1e1e24;
  border-color: #00ff88;
  box-shadow: 0 0 10px rgba(0, 255, 136, 0.4);
}

/* --- Стилі для підказок (details + summary) --- */
.hint-item {
  margin-bottom: 10px;
  background-color: #1e1e24;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #3a3a48;
}

.hint-item summary {
  padding: 12px 15px;
  font-weight: bold;
  cursor: pointer;
  color: #dcdcdc;
  background-color: #3a3a48;
  list-style: none; /* Прибираємо трикутник */
  transition: background-color 0.2s;
}

.hint-item summary::-webkit-details-marker {
  display: none;
}

/* Кастомний трикутник ▶ */
.hint-item summary::before {
  content: "▶";
  display: inline-block;
  margin-right: 10px;
  color: #4facfe;
  font-size: 14px;
  transition: transform 0.2s;
}

/* Поворот трикутника при відкритті */
.hint-item[open] summary::before {
  transform: rotate(90deg);
}

.hint-item summary:hover {
  background-color: #4facfe;
  color: #ffffff;
}

.hint-item p {
  padding: 15px;
  margin: 0;
  border-top: 1px solid #3a3a48;
  font-size: 16px;
  color: #dcdcdc;
}
/* ==========================================================================
   СТИЛІ ДЛЯ ДЗ №8 (Код, Інтерактив, Підказки)
   ========================================================================== */

/* --- Головний контейнер для коду (Термінал-стиль) --- */
.code-placeholder {
  position: relative;
  background-color: #18181f; /* Глибокий темний фон */
  padding: 24px 20px 24px 24px;
  border-radius: 12px;
  margin-bottom: 40px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  border-left: 6px solid #4facfe; /* Яскравий синій акцент зліва */
}

.code-placeholder pre {
  margin: 0;
  overflow-x: auto; /* Додає скрол, якщо код задовгий */
}

.code-placeholder code {
  font-family: "Courier New", Courier, monospace;
  font-size: 16px;
  color: #e2e2ec; /* Базовий колір тексту (наприклад, для bridge) */
  line-height: 1.6;
}

/* === ПІДСВІЧУВАННЯ СИНТАКСИСУ (Roblox Studio) === */
.lua-keyword {
  color: #f86d7c;
} /* Червоно-кораловий (local, wait) */
.lua-object {
  color: #82aaff;
} /* Синій (script.Parent) */
.lua-func {
  color: #82aaff;
} /* Синій (wait, print, Vector3.new) */

.lua-string {
  color: #c3e88d;
} /* Зелений ("Grey", "Міст...") */
.lua-vec {
  color: #c3e88d;
  font-weight: bold;
} /* Велика Vector3.new */

/* --- Розподільник секцій (hr.divider) --- */
.divider {
  border: 0;
  height: 2px;
  background: linear-gradient(to right, transparent, #3a3a48, transparent);
  margin: 40px 0;
}

/* --- Клікабельний інлайн-код (code.inline-copy) --- */
code.inline-copy {
  background-color: #2b2b36;
  color: #ffaa00; /* Помаранчевий колір синтаксису */
  font-family: "Courier New", Courier, monospace;
  font-size: 15px;
  font-weight: bold;
  padding: 4px 8px;
  margin: 0 2px;
  border-radius: 6px;
  border: 1px solid #3a3a48;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-block;
}

code.inline-copy:hover {
  background-color: #3a3a48;
  border-color: #4facfe;
  color: #4facfe;
  box-shadow: 0 0 10px rgba(79, 172, 254, 0.3);
}

/* Стан після успішного інлайн-копіювання */
code.inline-copy.copied {
  background-color: #00ff88;
  color: #1e1e24;
  border-color: #00ff88;
  box-shadow: 0 0 10px rgba(0, 255, 136, 0.4);
}

/* --- Стилі для підказок (details + summary) --- */
.hint-item {
  margin-bottom: 10px;
  background-color: #1e1e24;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #3a3a48;
}

.hint-item summary {
  padding: 12px 15px;
  font-weight: bold;
  cursor: pointer;
  color: #dcdcdc;
  background-color: #3a3a48;
  list-style: none; /* Прибираємо трикутник */
  transition: background-color 0.2s;
}

.hint-item summary::-webkit-details-marker {
  display: none;
}

/* Кастомний трикутник ▶ */
.hint-item summary::before {
  content: "▶";
  display: inline-block;
  margin-right: 10px;
  color: #4facfe;
  font-size: 14px;
  transition: transform 0.2s;
}

/* Поворот трикутника при відкритті */
.hint-item[open] summary::before {
  transform: rotate(90deg);
}

.hint-item summary:hover {
  background-color: #4facfe;
  color: #ffffff;
}

.hint-item p {
  padding: 15px;
  margin: 0;
  border-top: 1px solid #3a3a48;
  font-size: 16px;
  color: #dcdcdc;
}
/* ==========================================================================
   СТИЛІ ДЛЯ ДЗ №8 (Код, Інтерактив, Підказки)
   ========================================================================== */

/* --- Головний контейнер для коду (Термінал-стиль) --- */
.code-placeholder {
  position: relative;
  background-color: #18181f; /* Глибокий темний фон */
  padding: 24px 20px 24px 24px;
  border-radius: 12px;
  margin-bottom: 40px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  border-left: 6px solid #4facfe; /* Яскравий синій акцент зліва */
}

.code-placeholder pre {
  margin: 0;
  overflow-x: auto; /* Додає скрол, якщо код задовгий */
}

/* === ПІДСВІЧУВАННЯ СИНТАКСИСУ (Roblox Studio) === */
.lua-keyword {
  color: #f86d7c;
} /* Червоно-кораловий (local, wait) */
.lua-object {
  color: #82aaff;
} /* Синій (script.Parent) */
.lua-func {
  color: #82aaff;
} /* Синій (wait, print, Vector3.new) */

.lua-string {
  color: #c3e88d;
} /* Зелений ("Grey", "Міст...") */
.lua-vec {
  color: #c3e88d;
  font-weight: bold;
} /* Велика Vector3.new */

/* --- Розподільник секцій (hr.divider) --- */
.divider {
  border: 0;
  height: 2px;
  background: linear-gradient(to right, transparent, #3a3a48, transparent);
  margin: 40px 0;
}

/* --- Клікабельний інлайн-код (code.inline-copy) --- */
code.inline-copy {
  background-color: #2b2b36;
  color: #ffaa00; /* Помаранчевий колір синтаксису */
  font-family: "Courier New", Courier, monospace;
  font-size: 15px;
  font-weight: bold;
  padding: 4px 8px;
  margin: 0 2px;
  border-radius: 6px;
  border: 1px solid #3a3a48;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-block;
}

code.inline-copy:hover {
  background-color: #3a3a48;
  border-color: #4facfe;
  color: #4facfe;
  box-shadow: 0 0 10px rgba(79, 172, 254, 0.3);
}

/* Стан після успішного інлайн-копіювання */
code.inline-copy.copied {
  background-color: #00ff88;
  color: #1e1e24;
  border-color: #00ff88;
  box-shadow: 0 0 10px rgba(0, 255, 136, 0.4);
}

/* --- Стилі для підказок (details + summary) --- */
.hint-item {
  margin-bottom: 10px;
  background-color: #1e1e24;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #3a3a48;
}

.hint-item summary {
  padding: 12px 15px;
  font-weight: bold;
  cursor: pointer;
  color: #dcdcdc;
  background-color: #3a3a48;
  list-style: none; /* Прибираємо трикутник */
  transition: background-color 0.2s;
}

.hint-item summary::-webkit-details-marker {
  display: none;
}

/* Кастомний трикутник ▶ */
.hint-item summary::before {
  content: "▶";
  display: inline-block;
  margin-right: 10px;
  color: #4facfe;
  font-size: 14px;
  transition: transform 0.2s;
}

/* Поворот трикутника при відкритті */
.hint-item[open] summary::before {
  transform: rotate(90deg);
}

.hint-item summary:hover {
  background-color: #4facfe;
  color: #ffffff;
}

.hint-item p {
  padding: 15px;
  margin: 0;
  border-top: 1px solid #3a3a48;
  font-size: 16px;
  color: #dcdcdc;
}

/* ==========================================================================
   ПІДСВІЧУВАННЯ СИНТАКСИСУ (Reusable Classes)
   Додай це у свій style.css ОДИН РАЗ, щоб код на сайті мав кольори
   ========================================================================== */

/* Кольори підібрані максимально близько до Roblox Studio (темна тема) */
.lua-keyword {
  color: #f86d7c;
} /* Червоно-кораловий (local, wait) */
.lua-object {
  color: #82aaff;
} /* Синій (script.Parent) */
.lua-func {
  color: #82aaff;
} /* Синій (wait, print) */
.lua-prop {
  color: #82aaff;
} /* Синій (BrickColor, Size) */
.lua-num {
  color: #ffc777;
} /* Жовтий (5, 2, 4, 1, 20) */
.lua-string {
  color: #c3e88d;
} /* Зелений ("Grey", "Міст...") */
.lua-vec {
  color: #c3e88d;
  font-weight: bold;
} /* Велика Vector3.new */
/* --- Спеціальний стиль для виноски у ДЗ №8 --- */
.info-box.footnote-box {
  margin-top: 20px;
  background-color: rgba(79, 172, 254, 0.1); /* Дуже прозорий синій фонок */
  border: 2px dashed #4facfe; /* Пунктирна синя рамка */
  color: #4facfe; /* Синій колір тексту */
  font-style: italic; /* Курсив для виділення */
}