/* GRS Image Web — темы светлая и тёмная */
body {
  min-height: 100vh;
  font-family: ui-sans-serif, system-ui, sans-serif, "Segoe UI", Roboto, sans-serif;
  margin: 0;
  line-height: 1.5;
  transition: background-color 0.2s, color 0.2s;
}

/* Тёмная тема (по умолчанию) */
#html-theme.theme-dark .page-body,
#html-theme:not(.theme-light) .page-body { background-color: #111827; color: #f3f4f6; }
#html-theme.theme-dark .page-title,
#html-theme:not(.theme-light) .page-title { color: #fff; }
#html-theme.theme-dark .page-subtitle,
#html-theme:not(.theme-light) .page-subtitle { color: #9ca3af; }
#html-theme.theme-dark .card,
#html-theme:not(.theme-light) .card { background-color: #1f2937; border: 1px solid #374151; }
#html-theme.theme-dark .input-label,
#html-theme:not(.theme-light) .input-label { color: #9ca3af; }
#html-theme.theme-dark .input-area,
#html-theme:not(.theme-light) .input-area { background-color: #1f2937; border: 1px solid #4b5563; color: #f3f4f6; }
#html-theme.theme-dark .btn-secondary,
#html-theme:not(.theme-light) .btn-secondary { background-color: #374151; color: #d1d5db; border: 1px solid #4b5563; }
#html-theme.theme-dark .btn-secondary:hover,
#html-theme:not(.theme-light) .btn-secondary:hover { background-color: #4b5563; }
#html-theme.theme-dark .theme-btn,
#html-theme:not(.theme-light) .theme-btn { background-color: #1f2937; border-color: #4b5563; color: #e5e7eb; }
#html-theme.theme-dark .border-divider,
#html-theme:not(.theme-light) .border-divider { border-color: #374151; }

/* Светлая тема */
#html-theme.theme-light .page-body { background-color: #f9fafb; color: #111827; }
#html-theme.theme-light .page-title { color: #111827; }
#html-theme.theme-light .page-subtitle { color: #6b7280; }
#html-theme.theme-light .card { background-color: #fff; border: 1px solid #e5e7eb; box-shadow: 0 1px 3px rgba(0,0,0,0.06); }
#html-theme.theme-light .input-label { color: #6b7280; }
#html-theme.theme-light .input-area { background-color: #fff; border: 1px solid #d1d5db; color: #111827; }
#html-theme.theme-light .btn-secondary { background-color: #e5e7eb; color: #374151; border: 1px solid #d1d5db; }
#html-theme.theme-light .btn-secondary:hover { background-color: #d1d5db; }
#html-theme.theme-light .theme-btn { background-color: #fff; border-color: #d1d5db; color: #374151; }
#html-theme.theme-light .border-divider { border-color: #e5e7eb; }

#app {
  max-width: 42rem;
  margin-left: auto;
  margin-right: auto;
  padding: 1rem 0.75rem;
}
@media (min-width: 640px) {
  #app { padding: 1.5rem 1.5rem; }
}

header { margin-bottom: 1.5rem; }
header h1 { font-size: 1.25rem; font-weight: 700; margin: 0 0 0.25rem 0; }
@media (min-width: 640px) { header h1 { font-size: 1.5rem; } }
header p { font-size: 0.875rem; margin: 0; }

.card { border-radius: 0.5rem; }

.header-btn {
  transition: background-color 0.15s, color 0.15s;
  border: 1px solid transparent;
}
#html-theme.theme-dark .header-btn,
#html-theme:not(.theme-light) .header-btn {
  background-color: #1f2937;
  border-color: #374151;
  color: #e5e7eb;
}
#html-theme.theme-dark .header-btn:hover,
#html-theme:not(.theme-light) .header-btn:hover {
  background-color: #374151;
}
#html-theme.theme-light .header-btn {
  background-color: #f3f4f6;
  border-color: #d1d5db;
  color: #374151;
}
#html-theme.theme-light .header-btn:hover {
  background-color: #e5e7eb;
}

.btn-primary {
  background-color: #2563eb;
  color: #fff;
}
.btn-primary:hover {
  background-color: #1d4ed8;
}
#html-theme.theme-light .btn-primary:hover {
  background-color: #1e40af;
}

.btn-download {
  text-decoration: none;
  transition: background-color 0.15s, color 0.15s;
}
#html-theme.theme-dark .btn-download,
#html-theme:not(.theme-light) .btn-download {
  background-color: #374151;
  color: #e5e7eb;
}
#html-theme.theme-dark .btn-download:hover,
#html-theme:not(.theme-light) .btn-download:hover {
  background-color: #4b5563;
}
#html-theme.theme-light .btn-download {
  background-color: #e5e7eb;
  color: #374151;
}
#html-theme.theme-light .btn-download:hover {
  background-color: #d1d5db;
}

.ref-input { color: inherit; }
.ref-input::file-selector-button { transition: background-color 0.15s, color 0.15s; cursor: pointer; }
#html-theme.theme-dark .ref-input,
#html-theme:not(.theme-light) .ref-input { color: #d1d5db; }
#html-theme.theme-dark .ref-input::file-selector-button,
#html-theme:not(.theme-light) .ref-input::file-selector-button { background-color: #374151; color: #e5e7eb; }
#html-theme.theme-dark .ref-input:hover::file-selector-button,
#html-theme:not(.theme-light) .ref-input:hover::file-selector-button { background-color: #4b5563; }
#html-theme.theme-light .ref-input { color: #111827; }
#html-theme.theme-light .ref-input::file-selector-button { background-color: #e5e7eb; color: #374151; }
#html-theme.theme-light .ref-input:hover::file-selector-button { background-color: #d1d5db; }

.footer-text { color: inherit; }
#html-theme.theme-dark .footer-text,
#html-theme:not(.theme-light) .footer-text { color: #9ca3af; }
#html-theme.theme-light .footer-text { color: #6b7280; }
.footer-link { text-decoration: none; }
#html-theme.theme-dark .footer-link,
#html-theme:not(.theme-light) .footer-link { color: #60a5fa; }
#html-theme.theme-dark .footer-link:hover,
#html-theme:not(.theme-light) .footer-link:hover { text-decoration: underline; }
#html-theme.theme-light .footer-link { color: #2563eb; }
#html-theme.theme-light .footer-link:hover { text-decoration: underline; }

/* Попап истории */
.popup-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  background-color: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 2rem 1rem;
  overflow-y: auto;
}
.popup-overlay.hidden { display: none !important; }

.popup-card {
  border-radius: 0.75rem;
  padding: 1.5rem;
  width: 100%;
  max-width: 28rem;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
}
#html-theme.theme-dark .popup-card,
#html-theme:not(.theme-light) .popup-card { background-color: #1f2937; border: 1px solid #374151; }
#html-theme.theme-light .popup-card { background-color: #fff; border: 1px solid #e5e7eb; }

.history-list {
  max-height: 60vh;
}
.history-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem;
  border-radius: 0.5rem;
}
#html-theme.theme-dark .history-item,
#html-theme:not(.theme-light) .history-item { background-color: #111827; border: 1px solid #374151; }
#html-theme.theme-light .history-item { background-color: #f3f4f6; border: 1px solid #e5e7eb; }
.history-item img {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 0.375rem;
  flex-shrink: 0;
}
.history-item-info { min-width: 0; }
.history-item-prompt {
  margin: 0;
  opacity: 0.9;
}
#html-theme.theme-dark .history-item-prompt,
#html-theme:not(.theme-light) .history-item-prompt { color: #9ca3af; }
#html-theme.theme-light .history-item-prompt { color: #6b7280; }
.history-item-actions { flex-shrink: 0; display: flex; align-items: center; gap: 0.5rem; }
.history-copy-prompt-btn {
  padding: 0.375rem 0.75rem;
  border-radius: 0.5rem;
  font-size: 0.8125rem;
  border: none;
  cursor: pointer;
  transition: background-color 0.15s;
}
#html-theme.theme-dark .history-copy-prompt-btn,
#html-theme:not(.theme-light) .history-copy-prompt-btn { background-color: #374151; color: #e5e7eb; }
#html-theme.theme-dark .history-copy-prompt-btn:hover,
#html-theme:not(.theme-light) .history-copy-prompt-btn:hover { background-color: #4b5563; }
#html-theme.theme-light .history-copy-prompt-btn { background-color: #e5e7eb; color: #374151; }
#html-theme.theme-light .history-copy-prompt-btn:hover { background-color: #d1d5db; }
.history-item a.download-btn {
  padding: 0.375rem 0.75rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  text-decoration: none;
  transition: background-color 0.15s;
}
#html-theme.theme-dark .history-item a.download-btn,
#html-theme:not(.theme-light) .history-item a.download-btn { background-color: #374151; color: #e5e7eb; }
#html-theme.theme-dark .history-item a.download-btn:hover,
#html-theme:not(.theme-light) .history-item a.download-btn:hover { background-color: #4b5563; }
#html-theme.theme-light .history-item a.download-btn { background-color: #e5e7eb; color: #374151; }
#html-theme.theme-light .history-item a.download-btn:hover { background-color: #d1d5db; }

/* Страница «Ссылки» */
.link-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem;
  border-radius: 0.5rem;
}
#html-theme.theme-dark .link-item,
#html-theme:not(.theme-light) .link-item { background-color: #111827; border: 1px solid #374151; }
#html-theme.theme-light .link-item { background-color: #f3f4f6; border: 1px solid #e5e7eb; }
.link-item img { border-radius: 0.375rem; }
.link-copy-btn {
  padding: 0.375rem 0.75rem;
  border-radius: 0.5rem;
  font-size: 0.8125rem;
  border: none;
  cursor: pointer;
  transition: background-color 0.15s;
}
#html-theme.theme-dark .link-copy-btn,
#html-theme:not(.theme-light) .link-copy-btn { background-color: #374151; color: #e5e7eb; }
#html-theme.theme-dark .link-copy-btn:hover,
#html-theme:not(.theme-light) .link-copy-btn:hover { background-color: #4b5563; }
#html-theme.theme-light .link-copy-btn { background-color: #e5e7eb; color: #374151; }
#html-theme.theme-light .link-copy-btn:hover { background-color: #d1d5db; }
.link-delete-btn {
  padding: 0.375rem 0.75rem;
  border-radius: 0.5rem;
  font-size: 0.8125rem;
  border: none;
  cursor: pointer;
  background-color: #dc2626;
  color: #fff;
  transition: background-color 0.15s;
}
.link-delete-btn:hover { background-color: #b91c1c; }

.facts-carousel {
  min-height: 3rem;
}
#fact-text {
  line-height: 1.4;
}
#html-theme.theme-dark #fact-text,
#html-theme:not(.theme-light) #fact-text { color: #d1d5db; }
#html-theme.theme-light #fact-text { color: #4b5563; }

.loading-gif {
  max-width: 280px;
  height: auto;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

footer {
  border-top-width: 1px;
  border-top-style: solid;
}
#html-theme.theme-dark footer,
#html-theme:not(.theme-light) footer { border-color: #374151; color: #9ca3af; }
#html-theme.theme-light footer { border-color: #e5e7eb; color: #6b7280; }

.result-preview-bg { min-height: 80px; }
#html-theme.theme-dark .result-preview-bg,
#html-theme:not(.theme-light) .result-preview-bg { background-color: #1f2937; }
#html-theme.theme-light .result-preview-bg { background-color: #f3f4f6; }

.popup-close-btn { transition: background-color 0.15s; }
#html-theme.theme-dark .popup-close-btn:hover,
#html-theme:not(.theme-light) .popup-close-btn:hover { background-color: #374151; }
#html-theme.theme-light .popup-close-btn:hover { background-color: #e5e7eb; }

/* Превью референсов */
.ref-preview-wrap {
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  border-radius: 0.5rem;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
#html-theme.theme-dark .ref-preview-wrap,
#html-theme:not(.theme-light) .ref-preview-wrap { background-color: #374151; }
#html-theme.theme-light .ref-preview-wrap { background-color: #e5e7eb; }
.ref-preview-wrap .ref-preview {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ref-preview-wrap .ref-preview.hidden { display: none; }
.ref-preview-placeholder {
  font-size: 1.5rem;
  opacity: 0.6;
}
.ref-preview-placeholder.hidden { display: none; }
.ref-remove {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border: none;
  border-radius: 0.375rem;
  cursor: pointer;
  font-size: 1.25rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.15s, color 0.15s;
}
#html-theme.theme-dark .ref-remove,
#html-theme:not(.theme-light) .ref-remove {
  background-color: #374151;
  color: #e5e7eb;
}
#html-theme.theme-dark .ref-remove:hover,
#html-theme:not(.theme-light) .ref-remove:hover {
  background-color: #ef4444;
  color: #fff;
}
#html-theme.theme-light .ref-remove {
  background-color: #e5e7eb;
  color: #374151;
}
#html-theme.theme-light .ref-remove:hover {
  background-color: #ef4444;
  color: #fff;
}

.facts-nav { transition: background-color 0.15s; }
#html-theme.theme-dark .facts-nav,
#html-theme:not(.theme-light) .facts-nav { background-color: #374151; color: #d1d5db; }
#html-theme.theme-dark .facts-nav:hover,
#html-theme:not(.theme-light) .facts-nav:hover { background-color: #4b5563; }
#html-theme.theme-light .facts-nav { background-color: #e5e7eb; color: #374151; }
#html-theme.theme-light .facts-nav:hover { background-color: #d1d5db; }