:root {
  --color-bg: #f7f6f2;
  --color-fg: #1a1a1a;
  --color-line: #2a2a2a;
  --color-accent: #b03020;
  --color-muted: #777;
  --color-block: #d8d8d8;
  --color-cell-bg: #ffffff;
  --color-cell-border: #2a2a2a;
  --color-num: #333;
  --color-panel-bg: #ffffff;
  --color-panel-border: #ddd;
  --color-input-bg: #ffffff;

  /* Размеры шрифтов: переопределяются классами body.font-* и .fit-a4 */
  --clue-screen-px: 16px;
  --clue-h3-screen-px: 18px;
  --clue-print-pt: 12pt;
  --clue-h3-print-pt: 13pt;
  --grid-letter-print-pt: 11pt;
  --grid-cell-mm: 12mm;
}

body.font-small  { --clue-screen-px: 13px; --clue-h3-screen-px: 15px;
                   --clue-print-pt: 9pt;  --clue-h3-print-pt: 10.5pt;
                   --grid-letter-print-pt: 9pt; }
body.font-medium { /* defaults */ }
body.font-large  { --clue-screen-px: 19px; --clue-h3-screen-px: 22px;
                   --clue-print-pt: 14pt; --clue-h3-print-pt: 16pt;
                   --grid-letter-print-pt: 13pt; }
body.font-xlarge { --clue-screen-px: 22px; --clue-h3-screen-px: 26px;
                   --clue-print-pt: 17pt; --clue-h3-print-pt: 19pt;
                   --grid-letter-print-pt: 15pt; }

/* Уместить на 1 листе: компактные размеры независимо от font-size */
body.fit-a4      { --grid-cell-mm: 9mm;
                   --clue-print-pt: 9pt; --clue-h3-print-pt: 10pt;
                   --grid-letter-print-pt: 9pt; }

/* Тёмная тема — только для экрана; печать всегда на светлом (см. print.css) */
body.theme-dark {
  --color-bg: #1a1d24;
  --color-fg: #e8e8e8;
  --color-line: #4a5060;
  --color-accent: #e84a35;
  --color-muted: #9aa0ac;
  --color-block: #3a3f4a;
  --color-cell-bg: #2a2f3a;
  --color-cell-border: #4a5060;
  --color-num: #b0b6c0;
  --color-panel-bg: #232730;
  --color-panel-border: #3a3f4a;
  --color-input-bg: #2a2f3a;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background: var(--color-bg);
  color: var(--color-fg);
  font: 15px/1.4 system-ui, -apple-system, "Segoe UI", sans-serif;
}

.controls {
  max-width: 980px;
  margin: 0 auto;
  padding: 16px 24px 20px;
  background: var(--color-panel-bg);
  border-bottom: 1px solid var(--color-panel-border);
}

.app-title {
  margin: 0 0 2px;
  font-size: 22px;
  font-weight: 700;
}
.app-sub {
  margin: 0 0 16px;
  color: var(--color-muted);
  font-size: 14px;
}

.ctrl-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

.ctrl-group {
  border: 1px solid var(--color-panel-border);
  border-radius: 4px;
  padding: 8px 12px 10px;
  margin: 0;
}
.ctrl-group legend {
  font-weight: 600;
  font-size: 13px;
  padding: 0 6px;
  color: var(--color-fg);
  opacity: 0.85;
}
.ctrl-group label {
  display: block;
  padding: 3px 0;
  cursor: pointer;
  font-size: 14px;
}

/* Сворачиваемая группа всех настроек: кнопка-аккордеон + блок ctrl-grid */
.btn-toggle-settings {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 600;
  background: var(--color-input-bg);
  color: var(--color-fg);
  border: 1px solid var(--color-panel-border);
  border-radius: 4px;
  cursor: pointer;
  user-select: none;
}
.btn-toggle-settings:hover { filter: brightness(1.05); }
.btn-toggle-settings .caret {
  display: inline-block;
  font-size: 11px;
  transition: transform 0.15s ease;
}
.btn-toggle-settings.expanded .caret { transform: rotate(90deg); }
.ctrl-grid.collapsed { display: none; }
.ctrl-group input[type="radio"],
.ctrl-group input[type="checkbox"] {
  margin-right: 6px;
  transform: scale(1.1);
}

.ctrl-packs {
  grid-column: 1 / -1;  /* паки занимают всю ширину при необходимости */
}
.packs-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
}
.pack-item {
  display: flex;
  flex-direction: column;
  padding: 4px 0;
  cursor: pointer;
  flex: 1 1 240px;
}
.pack-item-name {
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.pack-item-desc {
  font-size: 12px;
  color: var(--color-muted);
  margin: 0 0 0 24px;
  line-height: 1.3;
}
.pack-count {
  font-size: 12px;
  color: var(--color-muted);
  margin-left: auto;
}
.pack-badge {
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 3px;
  background: var(--color-accent);
  color: #fff;
  font-weight: 600;
  letter-spacing: 0.5px;
}
.pack-delete {
  padding: 0 6px;
  font-size: 14px;
  line-height: 1;
  background: transparent;
  border: 1px solid var(--color-panel-border);
  color: var(--color-muted);
  margin-left: 4px;
  cursor: pointer;
}
.pack-delete:hover {
  background: var(--color-accent);
  color: #fff;
  border-color: var(--color-accent);
}
.pack-item-user {
  border-left: 2px solid var(--color-accent);
  padding-left: 6px;
  margin-left: -8px;
}
.packs-upload {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed var(--color-panel-border);
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}
.upload-pack-status {
  font-size: 12px;
}
.upload-pack-status.ok { color: #2a7a2a; }
.upload-pack-status.err { color: var(--color-accent); }
.status-muted { color: var(--color-muted); font-size: 13px; }

.ctrl-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}

button {
  padding: 8px 16px;
  font-size: 14px;
  background: var(--color-input-bg);
  color: var(--color-fg);
  border: 1px solid var(--color-line);
  border-radius: 4px;
  cursor: pointer;
  font-family: inherit;
}
button:hover { filter: brightness(1.1); }
button:active { filter: brightness(0.9); }

.btn-primary {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #fff;
  font-weight: 600;
}
.btn-primary:hover { background: #8e2519; border-color: #8e2519; }

.btn-subtle {
  font-size: 13px;
  opacity: 0.75;
  border-color: var(--color-panel-border);
}
.btn-subtle:hover { opacity: 1; }

.status {
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--color-muted);
}

main {
  max-width: 980px;
  margin: 24px auto;
  padding: 0 24px 60px;
}

.puzzle-title {
  text-align: center;
  margin: 0 0 18px;
  font-size: 18px;
  font-weight: 600;
}

.grid-container {
  display: flex;
  justify-content: center;
  margin-bottom: 24px;
}

.grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-size, 13), var(--cell-size, 36px));
  grid-template-rows: repeat(var(--grid-size, 13), var(--cell-size, 36px));
  border: 2px solid var(--color-cell-border);
  background: var(--color-cell-bg);
}

.cell {
  position: relative;
  width: var(--cell-size, 36px);
  height: var(--cell-size, 36px);
  border: 1px solid var(--color-cell-border);
  background: var(--color-cell-bg);
  color: var(--color-fg);
  display: flex;
  align-items: center;
  justify-content: center;
  font: 600 18px/1 "Times New Roman", serif;
  text-transform: uppercase;
  overflow: hidden;
}
.cell.block {
  background: var(--color-block);
}
.cell:not(.block) {
  cursor: pointer;
}
.cell .num {
  position: absolute;
  top: 1px;
  left: 2px;
  font: 400 9px/1 system-ui, sans-serif;
  color: var(--color-num);
}
.cell .ans {
  display: none;
  user-select: none;
}
.show-answers .cell .ans { display: block; }
.show-answers .cell.block .ans { display: none; }

/* Пользовательский ввод: показывается всегда (если есть userInput),
   но при включенном «Показать ответы» уступает место правильному ответу. */
.cell .user-letter {
  font-weight: 700;
  color: #1a4a8a;
  user-select: none;
  pointer-events: none;
}
.show-answers .cell .user-letter { display: none; }
body.theme-dark .cell .user-letter { color: #6cb4ff; }

/* Активная клетка (cursor) и подсветка слова */
.cell.solve-active {
  outline: 2px solid var(--color-accent);
  outline-offset: -2px;
  z-index: 1;
}
.cell.solve-highlight {
  background: #fff7e6;
}
body.theme-dark .cell.solve-highlight {
  background: #3a3520;
}

/* Результат проверки */
.cell.solve-error .user-letter { color: #c01010; }
.cell.solve-correct .user-letter { color: #2a7a2a; }
body.theme-dark .cell.solve-error .user-letter { color: #ff6060; }
body.theme-dark .cell.solve-correct .user-letter { color: #5cd05c; }

.clues-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  font-size: var(--clue-screen-px);
}
.clues-container h3 {
  margin: 0 0 8px;
  font-size: var(--clue-h3-screen-px);
  font-weight: 700;
}
.clues-container ol {
  padding-left: 26px;
  margin: 0 0 12px;
}
.clues-container li {
  margin-bottom: 6px;
  line-height: 1.4;
}

.answer-key {
  display: none;
  margin-top: 36px;
  padding-top: 20px;
  border-top: 1px dashed #999;
}
.answer-key h3 {
  text-align: center;
  margin: 0 0 16px;
  font-size: 16px;
  font-weight: 600;
}
.answer-key.visible { display: block; }

.error-msg {
  text-align: center;
  padding: 24px;
  background: #fde9e6;
  border: 1px solid var(--color-accent);
  border-radius: 4px;
  color: #6a1810;
}

/* Баннер «просмотр из истории» */
.history-banner {
  display: none;
  margin: 0 0 12px;
  padding: 8px 14px;
  background: #fff7e6;
  border: 1px solid #d4a23a;
  border-radius: 4px;
  font-size: 14px;
  color: #6a4a10;
  text-align: center;
}
.history-banner.visible { display: block; }
.history-banner button {
  margin-left: 12px;
  padding: 3px 10px;
  font-size: 13px;
}

/* Панель истории под main */
.history-panel {
  max-width: 980px;
  margin: 32px auto 60px;
  padding: 0 24px;
}
.history-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 12px;
}
.history-title {
  font-size: 17px;
  font-weight: 700;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}
.history-count {
  font-weight: normal;
  color: var(--color-muted);
  font-size: 14px;
}
.history-buttons {
  display: flex;
  gap: 8px;
}
.history-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: none;
  max-height: 360px;
  overflow-y: auto;
  border: 1px solid #ddd;
  border-radius: 4px;
  background: white;
}
.history-list.visible { display: block; }
.history-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid #eee;
  cursor: pointer;
  background: white;
  transition: background 0.1s;
}
.history-item:last-child { border-bottom: none; }
.history-item:hover { background: #f5f3ee; }
.history-item.current {
  background: #fdf3f0;
  border-left: 3px solid var(--color-accent);
  padding-left: 11px;
}
.history-item-main {
  flex: 1;
  min-width: 0;
}
.history-item-title {
  font-weight: 600;
  font-size: 14px;
  color: var(--color-fg);
}
.history-item-meta {
  font-size: 12px;
  color: var(--color-muted);
  margin-top: 2px;
}
.history-item-delete {
  background: transparent;
  border: 1px solid #ddd;
  color: #999;
  padding: 3px 8px;
  font-size: 12px;
  border-radius: 3px;
  cursor: pointer;
}
.history-item-delete:hover {
  background: #fde9e6;
  color: var(--color-accent);
  border-color: var(--color-accent);
}

@media print {
  .history-panel { display: none !important; }
  .history-banner { display: none !important; }
  .editor-panel { display: none !important; }
}

/* ===== Редактор корпусов (CMS режим) ===== */

.editor-panel {
  display: none;
  max-width: 1400px;
  margin: 0 auto;
  padding: 16px 24px 60px;
}
body.mode-editor .editor-panel { display: block; }
body.mode-editor .controls,
body.mode-editor main,
body.mode-editor .history-panel { display: none; }

.editor-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--color-panel-border);
}
.editor-toolbar select,
.editor-toolbar input[type="text"] {
  padding: 6px 10px;
  font-size: 14px;
  font-family: inherit;
  background: var(--color-input-bg);
  color: var(--color-fg);
  border: 1px solid var(--color-panel-border);
  border-radius: 4px;
}
.editor-toolbar .editor-toolbar-spacer { flex: 1; }
.editor-toolbar .editor-readonly-tag {
  font-size: 12px;
  padding: 2px 8px;
  background: var(--color-block);
  color: var(--color-fg);
  border-radius: 3px;
  opacity: 0.7;
}

.editor-pack-meta {
  display: grid;
  grid-template-columns: 1fr 2fr auto;
  gap: 12px;
  margin-bottom: 14px;
  align-items: center;
}
.editor-pack-meta label {
  font-size: 12px;
  color: var(--color-muted);
  display: block;
  margin-bottom: 2px;
}
.editor-pack-meta input[type="text"] {
  width: 100%;
  padding: 6px 10px;
  font-size: 14px;
  font-family: inherit;
  background: var(--color-input-bg);
  color: var(--color-fg);
  border: 1px solid var(--color-panel-border);
  border-radius: 4px;
}
.editor-pack-meta .pack-id-readonly {
  font-family: monospace;
  font-size: 13px;
  color: var(--color-muted);
}

.editor-stats {
  font-size: 13px;
  color: var(--color-muted);
  margin-bottom: 8px;
}
.editor-stats .err { color: var(--color-accent); font-weight: 600; }

.editor-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--color-panel-border);
  border-radius: 4px;
  background: var(--color-panel-bg);
}
.editor-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.editor-table thead th {
  position: sticky;
  top: 0;
  background: var(--color-panel-bg);
  border-bottom: 2px solid var(--color-panel-border);
  text-align: left;
  font-weight: 600;
  padding: 8px 6px;
  font-size: 12px;
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.editor-table td {
  border-bottom: 1px solid var(--color-panel-border);
  padding: 0;
  vertical-align: top;
}
.editor-table tr:hover td { background: rgba(176, 48, 32, 0.04); }
.editor-table tr.invalid { background: rgba(176, 48, 32, 0.08); }
.editor-table tr.invalid:hover td { background: rgba(176, 48, 32, 0.12); }

.editor-table input,
.editor-table textarea,
.editor-table select {
  width: 100%;
  padding: 6px 8px;
  border: none;
  background: transparent;
  color: var(--color-fg);
  font: inherit;
  font-size: 13px;
  resize: none;
  display: block;
}
.editor-table input:focus,
.editor-table textarea:focus,
.editor-table select:focus {
  outline: 2px solid var(--color-accent);
  background: var(--color-input-bg);
}
.editor-table td { vertical-align: top; }
.editor-table .col-word input { font-weight: 600; text-transform: uppercase; }
.editor-table .col-actions { width: 36px; text-align: center; padding: 4px; vertical-align: middle; }
.editor-table .col-diff,
.editor-table .col-theme { width: 100px; vertical-align: middle; }
.editor-table .col-len { width: 36px; text-align: center; padding: 8px 4px; color: var(--color-muted); font-size: 12px; vertical-align: middle; }
.editor-table textarea {
  min-height: 28px;
  line-height: 1.35;
  overflow: hidden;
  word-wrap: break-word;
  white-space: pre-wrap;
}
/* Современный браузер: textarea растёт по содержимому без JS. */
@supports (field-sizing: content) {
  .editor-table textarea { field-sizing: content; }
}

.editor-row-delete {
  background: transparent;
  border: 1px solid var(--color-panel-border);
  color: var(--color-muted);
  font-size: 14px;
  padding: 2px 6px;
  cursor: pointer;
  border-radius: 3px;
}
.editor-row-delete:hover {
  background: var(--color-accent);
  color: #fff;
  border-color: var(--color-accent);
}
.editor-cell-error {
  color: var(--color-accent);
  font-size: 11px;
  padding: 0 8px 4px;
  background: rgba(176, 48, 32, 0.05);
}

.editor-add-row {
  display: block;
  width: 100%;
  padding: 10px;
  background: var(--color-panel-bg);
  border: 1px dashed var(--color-panel-border);
  border-radius: 4px;
  color: var(--color-muted);
  cursor: pointer;
  font-size: 14px;
  margin-top: 8px;
}
.editor-add-row:hover {
  background: rgba(176, 48, 32, 0.05);
  color: var(--color-accent);
  border-color: var(--color-accent);
}

.editor-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--color-panel-border);
}
.editor-footer-status {
  font-size: 13px;
  margin-left: 12px;
}
.editor-footer-status.ok { color: #2a7a2a; }
.editor-footer-status.err { color: var(--color-accent); }

.editor-readonly .editor-table input,
.editor-readonly .editor-table textarea,
.editor-readonly .editor-table select { pointer-events: none; opacity: 0.85; }
.editor-readonly .editor-row-delete,
.editor-readonly .editor-add-row,
.editor-readonly .editor-pack-meta input { display: none; }