@charset "UTF-8";

:root {
  --bg: #f5f7f8;
  --bg-soft: #eef3f4;
  --card: #ffffff;
  --card2: #f7faf9;
  --text: #17201f;
  --muted: #647674;
  --accent: #0b7285;
  --accent-strong: #075766;
  --accent-soft: rgba(11, 114, 133, .12);
  --line: rgba(23, 32, 31, .12);
  --shadow: 0 14px 34px rgba(20, 35, 39, .10);
  --radius: 10px;
  --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

html,
body {
  min-height: 100%;
  color-scheme: light;
}

body {
  font-family: var(--font-sans) !important;
  line-height: 1.5;
  letter-spacing: 0;
  color: var(--text);
  background-color: var(--bg);
  background-image: linear-gradient(135deg, #f7f9fa 0%, #edf3f4 48%, #f9faf7 100%) !important;
  background-attachment: fixed;
}

.wrap {
  max-width: 1120px;
}

h1,
h2,
.page-title,
.title {
  color: var(--text) !important;
  font-family: var(--font-sans) !important;
  font-weight: 760;
  letter-spacing: 0;
}

h1,
.page-title {
  font-size: clamp(1.45rem, 1.1rem + 1vw, 2rem) !important;
}

a {
  color: var(--accent) !important;
  text-decoration-thickness: .08em;
  text-underline-offset: .2em;
}

a:hover {
  color: var(--accent-strong) !important;
}

.sub,
.subtitle,
.muted,
.path,
.score,
.empty,
.foot,
.pill,
.kpi .label,
thead th,
td.k,
.k,
.modal__title,
.hint {
  color: var(--muted) !important;
}

form.search-box,
.search,
.card,
.result-item,
.mode,
#imgPopup .popup-content,
.modal__panel {
  background: linear-gradient(180deg, var(--card), var(--card2)) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow) !important;
  backdrop-filter: none !important;
}

form.search-box,
.search {
  padding: 18px !important;
}

form.search-box input[type="text"],
.search input {
  background: #ffffff !important;
  border: 1px solid #cbd9d7 !important;
  border-radius: 8px !important;
  color: var(--text) !important;
  font-family: var(--font-sans) !important;
  font-size: 1rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8);
}

form.search-box input[type="text"]::placeholder,
.search input::placeholder {
  color: #7b8c8a !important;
}

form.search-box input[type="text"]:focus,
.search input:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--accent-soft) !important;
  outline: none;
}

button,
form.search-box button,
.search button,
a.btn,
.modal__btn {
  background: var(--accent) !important;
  border: 1px solid var(--accent) !important;
  border-radius: 8px !important;
  color: #ffffff !important;
  font-family: var(--font-sans) !important;
  font-weight: 700;
  box-shadow: 0 8px 18px rgba(11, 114, 133, .18);
}

button:hover,
form.search-box button:hover,
.search button:hover,
a.btn:hover,
.modal__btn:hover {
  background: var(--accent-strong) !important;
  border-color: var(--accent-strong) !important;
  color: #ffffff !important;
}

a.btn.secondary {
  background: #f0f5f5 !important;
  border-color: #cbd9d7 !important;
  color: var(--accent-strong) !important;
  box-shadow: none;
}

a.btn.secondary:hover {
  background: #e5eeee !important;
  color: var(--accent-strong) !important;
}

.fields {
  background: #f4f8f8;
  border: 1px solid #dce7e5 !important;
  border-radius: 8px;
  padding: 12px !important;
}

.fields label,
.field-label,
.field-value,
td,
.v,
.results-info,
.hint li {
  color: var(--text) !important;
}

.fields input[type="checkbox"] {
  accent-color: var(--accent) !important;
}

table {
  color: var(--text);
}

thead th,
th {
  background: #eef5f4 !important;
  border-color: #dce7e5 !important;
}

td,
tbody td,
th {
  border-color: #e3ebea !important;
}

tbody tr:hover,
tr:hover td {
  background: #f3f8f7 !important;
}

.result-thumb,
.thumb,
.hero {
  background: #eef3f4 !important;
  border: 1px solid #d6e1df !important;
  border-radius: 8px !important;
}

.chip,
.pill,
.tag,
.pagination a,
.pagination span {
  background: #f2f7f7 !important;
  border: 1px solid #d7e4e2 !important;
  border-radius: 999px !important;
  color: var(--muted) !important;
}

.pagination .current,
.pagination .active {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #ffffff !important;
}

mark {
  background: #ffe08a !important;
  color: #1f2933 !important;
}

#imgPopup,
.modal {
  background: rgba(9, 18, 20, .72) !important;
}

.modal__top {
  background: #f1f6f6 !important;
  border-bottom: 1px solid #dce7e5 !important;
}

.modal__frame {
  background: #ffffff !important;
}

#openInNewTab {
  color: var(--accent) !important;
}

.popup-close {
  color: var(--text) !important;
}

body > center > a[style] {
  background: var(--accent) !important;
  color: #ffffff !important;
  font-family: var(--font-sans) !important;
  box-shadow: 0 8px 18px rgba(11, 114, 133, .22);
}

.top h1[style] {
  color: var(--text) !important;
}

hr[style] {
  border-top-color: #dce7e5 !important;
}

span[style*="#B39792"] {
  color: var(--accent-strong) !important;
}

@media (max-width: 768px) {
  body {
    background-attachment: scroll;
  }

  .wrap {
    padding-inline: 16px;
  }
}
