/* Basic Reset & Body */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Merriweather', serif; /* Default font */
  background-color: #f4f7f6;
  color: #333;
  display: flex;
  justify-content: center;
  align-items: flex-start; /* Align to top */
  min-height: 100vh;
  padding-top: 30px; /* Adjust top padding */
  padding-bottom: 30px;
}

.app-container {
  background-color: #fff;
  padding: 30px 40px;
  border-radius: 8px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  text-align: center;
  max-width: 650px; /* Slightly wider */
  width: 90%;
}

h1, h2 {
  margin-bottom: 25px;
  color: #2a3d45;
   font-family: 'Roboto Slab', serif; /* Heading font */
}

/* Utility */
.hidden {
  display: none !important; /* Force hide */
}

.centered-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px; /* Space between elements in the section */
  width: 100%;
  margin-bottom: 20px; /* Add space below sections */
}

/* Buttons */
.btn {
  display: inline-block;
  padding: 12px 25px;
  background-color: #5c80bc; /* Primary blue */
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 1rem;
  transition: background-color 0.2s ease, transform 0.1s ease;
  text-decoration: none; /* For label styled as button */
  text-align: center;
   font-family: 'Roboto Slab', serif; /* Button font */
}

.btn:hover:not(:disabled) {
  background-color: #4a679a; /* Darker blue */
}

.btn:active:not(:disabled) {
  transform: scale(0.98);
}

.btn:disabled {
  background-color: #cccccc;
  cursor: not-allowed;
  opacity: 0.7;
}

.btn-secondary {
  background-color: #6c757d; /* Gray */
}
.btn-secondary:hover:not(:disabled) {
  background-color: #5a6268; /* Darker gray */
}

/* File Loader */
#file-loader p {
  margin-bottom: 10px;
  color: #555;
}

#file-name-display {
  font-style: italic;
  color: #777;
  min-height: 1.2em; /* Reserve space */
}

/* Mode Selector */
.mode-buttons {
  display: flex;
  flex-wrap: wrap; /* Allow buttons to wrap on smaller screens */
  justify-content: center;
  gap: 10px; /* Adjust gap */
  margin-bottom: 15px; /* Space before back button */
}

/* --- Font Classes --- */
.font-caveat { font-family: 'Caveat', cursive; font-size: 2.2rem; }
.font-indie { font-family: 'Indie Flower', cursive; font-size: 2rem; }
.font-merriweather { font-family: 'Merriweather', serif; font-size: 1.6rem; }
.font-roboto-slab { font-family: 'Roboto Slab', serif; font-size: 1.7rem; }
.font-rubik-mono { font-family: 'Rubik Mono One', monospace; font-size: 1.5rem; } /* Monospace looks like print */

/* Card Area */
.card-container {
  width: 90%; /* Make responsive */
  max-width: 400px; /* Max width */
  height: 220px; /* Adjust height as needed */
  perspective: 1000px; /* Vanishing point for 3D */
  margin-bottom: 20px;
}

.card {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.6s;
}

/* Only allow clicking to flip if NOT in quiz mode */
.card:not(.quiz-active) {
    cursor: pointer;
}

.card.is-flipped {
  transform: rotateY(180deg);
}

.card-face {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden; /* Hide the back of the element when facing away */
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  text-align: center;
  overflow-wrap: break-word; /* Wrap long words */
  line-height: 1.4; /* Improve readability */
}

.card-front {
  background-color: #e9f1f7; /* Light blue */
  color: #333;
}

.card-front .variable-font {
   /* Base size - specific font classes will override */
   font-size: 1.6rem;
}


.card-back {
  background-color: #d1e0eb; /* Slightly darker blue */
  color: #222;
  transform: rotateY(180deg);
  font-size: 1.5rem; /* Font size for back */
}

#card-area .instructions {
  color: #666;
  font-size: 0.9em;
  margin-top: -15px; /* Pull closer */
  margin-bottom: 15px;
}

.card-controls {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-top: 10px;
}


/* --- Quiz Styles --- */
.quiz-options {
  display: flex;
  flex-direction: column; /* Stack options vertically */
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: 450px; /* Limit width of options */
  margin-top: 5px; /* Space below card */
  margin-bottom: 15px;
}

.quiz-option-btn {
  width: 100%; /* Make buttons take full width */
  padding: 10px 15px;
  font-size: 1rem;
  background-color: #e0e0e0; /* Default gray */
  color: #333;
  border: 1px solid #ccc;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.quiz-option-btn:hover:not(:disabled) {
  background-color: #d4d4d4;
  border-color: #bbb;
}

.quiz-option-btn.correct {
    background-color: #90ee90; /* Light green */
    color: #115e11;
    border-color: #5dbb5d;
}

.quiz-option-btn.incorrect {
    background-color: #ffcccb; /* Light red */
    color: #a31410;
    border-color: #f38986;
}

.quiz-option-btn:disabled {
    opacity: 0.8;
    cursor: default;
}

.quiz-feedback {
    font-weight: bold;
    margin-top: -5px;
    min-height: 1.2em; /* Reserve space */
}

.quiz-feedback.correct {
    color: green;
}

.quiz-feedback.incorrect {
    color: red;
}

/* --- Quiz Results Styles --- */
#quiz-results-area {
    text-align: left; /* Align text left */
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 5px;
    background-color: #f9f9f9;
}
#quiz-results-area h2, #quiz-results-area h3 {
    text-align: center;
    margin-bottom: 15px;
}
#quiz-results-area p {
    text-align: center;
    font-size: 1.2rem;
    margin-bottom: 20px;
}
#incorrect-answers-list {
    list-style: none; /* Remove default bullets */
    padding-left: 0;
    margin-bottom: 20px;
}
#incorrect-answers-list li {
    background-color: #fff;
    padding: 8px 12px;
    border: 1px solid #eee;
    border-radius: 4px;
    margin-bottom: 8px;
    font-size: 0.95rem;
}
#incorrect-answers-list li .orig { font-weight: bold; }
#incorrect-answers-list li .trans { font-style: italic; color: #555; }


/* --- Dictionary View Styles --- */
.dictionary-table-container {
    width: 100%;
    max-height: 400px; /* Limit height and allow scrolling */
    overflow-y: auto; /* Add vertical scroll if needed */
    border: 1px solid #ccc;
    margin-bottom: 15px;
}

#dictionary-table {
    width: 100%;
    border-collapse: collapse; /* Merge borders */
}

#dictionary-table th,
#dictionary-table td {
    border: 1px solid #ddd;
    padding: 10px 12px;
    text-align: left;
}

#dictionary-table th {
    background-color: #e9f1f7; /* Light blue header */
    color: #333;
    position: sticky; /* Make header sticky */
    top: 0; /* Stick to the top of the container */
    z-index: 1;
}

#dictionary-table tbody tr:nth-child(even) {
    background-color: #f9f9f9; /* Zebra striping */
}

#dictionary-table tbody tr:hover {
    background-color: #f1f1f1; /* Highlight on hover */
}

/* Добавьте этот код в конец вашего файла style.css */

/* --- Dictionary View Styles --- */
#dictionary-view-section {
  width: 100%; /* Занять всю ширину контейнера */
  /* Можно добавить padding, если нужно */
}

/* Контейнер для таблицы, чтобы сделать ее прокручиваемой */
.dictionary-table-container {
  width: 100%;
  max-height: 400px; /* Ограничение высоты, появится скролл */
  overflow-y: auto;  /* Вертикальный скролл при необходимости */
  border: 1px solid #ccc;
  margin-bottom: 20px; /* Отступ снизу */
  border-radius: 5px; /* Небольшое скругление */
}

#dictionary-table {
  width: 100%;
  border-collapse: collapse; /* Схлопывание границ ячеек */
}

#dictionary-table th,
#dictionary-table td {
  border: 1px solid #ddd;
  padding: 10px 12px; /* Внутренние отступы ячеек */
  text-align: left;   /* Выравнивание текста по левому краю */
  vertical-align: middle; /* Вертикальное выравнивание по центру */
  font-size: 0.95rem; /* Немного уменьшим шрифт в таблице */
}

#dictionary-table th {
  background-color: #e9f1f7; /* Светло-голубой фон заголовка */
  color: #333;
  position: sticky;   /* "Прилипающий" заголовок */
  top: 0;             /* Прилипать к верху контейнера */
  z-index: 1;         /* Заголовок поверх контента при скролле */
  font-weight: bold;
}

/* Zebra striping для строк таблицы */
#dictionary-table tbody tr:nth-child(even) {
  background-color: #f9f9f9;
}

/* Подсветка строки при наведении */
#dictionary-table tbody tr:hover {
  background-color: #f1f1f1;
}

/* Стили для колонки с кнопками действий */
#dictionary-table td:last-child {
  text-align: center; /* Центрируем кнопки */
  white-space: nowrap; /* Запрещаем перенос кнопок */
  width: 80px; /* Фиксированная ширина для кнопок */
}

/* Стили для самих кнопок действий */
#dictionary-table .action-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px 5px; /* Маленькие отступы */
  font-size: 1.2rem; /* Размер иконок (если используете emoji) */
  margin: 0 3px;    /* Небольшой отступ между кнопками */
  color: #555;      /* Цвет иконок по умолчанию */
  transition: color 0.2s ease, transform 0.1s ease;
  vertical-align: middle; /* Выравнивание по центру строки */
}

#dictionary-table .action-btn:hover {
  opacity: 0.8; /* Небольшая прозрачность при наведении */
}

#dictionary-table .edit-btn:hover {
  color: #007bff; /* Синий цвет при наведении на "Редактировать" */
}

#dictionary-table .delete-btn:hover {
  color: #dc3545; /* Красный цвет при наведении на "Удалить" */
}

#dictionary-table .action-btn:active {
  transform: scale(0.95); /* Эффект нажатия */
}


/* --- Форма добавления нового слова --- */
#add-word-form { /* Используйте ID вашего контейнера формы */
  display: flex;
  flex-wrap: wrap; /* Разрешить перенос на маленьких экранах */
  gap: 10px;       /* Расстояние между элементами формы */
  align-items: center; /* Выравнивание по вертикали */
  justify-content: center; /* Центрирование по горизонтали */
  margin-top: 20px;  /* Отступ сверху от таблицы */
  padding: 15px;
  border: 1px dashed #ccc; /* Пунктирная рамка для визуального разделения */
  border-radius: 5px;
}

#add-word-form input[type="text"] {
  padding: 8px 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 1rem;
  flex-grow: 1; /* Позволить инпутам растягиваться */
  min-width: 150px; /* Мин. ширина инпута перед переносом */
}

/* Стили для кнопки добавления (если у нее свой ID) */
#add-word-btn {
  /* Использует .btn стили, можно добавить flex-shrink */
  flex-shrink: 0; /* Не сжимать кнопку */
}

/* Опционально: Заголовок для секции добавления */
#add-word-form h3 {
  width: 100%; /* Занять всю ширину */
  text-align: center;
  margin-bottom: 10px;
  color: #444;
  font-size: 1.1rem;
  font-weight: 600; /* Сделать пожирнее */
}

/* Стили для кнопки "Назад к выбору режима" в режиме словаря */
#back-to-modes-dict-btn { /* Убедитесь, что у кнопки есть этот ID */
  margin-top: 25px; /* Отступ сверху */
}

/* Уточнение для ячейки с сообщением "Словарь пуст" */
#dictionary-table td[colspan="3"] {
  text-align: center !important; /* Переопределяем выравнивание */
  font-style: italic;
  color: #777;
  padding: 20px;
}