/* YonSeSearch — YonSe Design System Override
 * This file overrides SearXNG's compiled CSS with the YonSe aesthetic.
 * Loaded after sxng-ltr.min.css / sxng-rtl.min.css
 */

/* === FORCE DARK: YonSe is dark-only. Every theme class gets the dark palette. === */
:root,
:root.theme-auto,
:root.theme-light,
:root.theme-dark,
:root.theme-black {
  color-scheme: dark;
  /* Base */
  --color-base-font: #f0efe6;
  --color-base-font-rgb: 240, 239, 230;
  --color-base-background: #08080c;
  --color-base-background-mobile: #08080c;
  --color-url-font: #c4b5fd;
  --color-url-visited-font: #7c5cbf;
  /* Header */
  --color-header-background: #0f0f16;
  --color-header-border: rgba(255, 255, 255, 0.06);
  /* Footer */
  --color-footer-background: #0f0f16;
  --color-footer-border: rgba(255, 255, 255, 0.06);
  /* Sidebar */
  --color-sidebar-border: rgba(255, 255, 255, 0.06);
  --color-sidebar-font: #f0efe6;
  --color-sidebar-background: #0f0f16;
  /* BackToTop */
  --color-backtotop-font: #f0efe6;
  --color-backtotop-border: rgba(255, 255, 255, 0.06);
  --color-backtotop-background: #0f0f16;
  /* Buttons */
  --color-btn-background: #a78bfa;
  --color-btn-font: #08080c;
  --color-show-btn-background: #15151f;
  --color-show-btn-font: #f0efe6;
  /* Search */
  --color-search-border: rgba(255, 255, 255, 0.06);
  --color-search-shadow: 0 2px 12px rgba(167, 139, 250, 0.08);
  --color-search-background: #0f0f16;
  --color-search-font: #f0efe6;
  --color-search-background-hover: #a78bfa;
  /* Modals */
  --color-error: #f55b5b;
  --color-error-background: #2a1010;
  --color-warning: #f1d561;
  --color-warning-background: #2a2410;
  --color-success: #79f56e;
  --color-success-background: #102a10;
  /* Categories */
  --color-categories-item-selected-font: #a78bfa;
  --color-categories-item-border-selected: #a78bfa;
  /* Autocomplete */
  --color-autocomplete-font: #f0efe6;
  --color-autocomplete-border: rgba(255, 255, 255, 0.06);
  --color-autocomplete-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
  --color-autocomplete-background: #0f0f16;
  --color-autocomplete-background-hover: #15151f;
  /* Answer */
  --color-answer-font: #f0efe6;
  --color-answer-background: #0f0f16;
  /* Key-Value */
  --color-result-keyvalue-col-table: #0f0f16;
  --color-result-keyvalue-odd: #0f0f16;
  --color-result-keyvalue-even: #15151f;
  /* Results */
  --color-result-background: #0f0f16;
  --color-result-border: rgba(255, 255, 255, 0.06);
  --color-result-url-font: #f0efe6;
  --color-result-vim-selected: rgba(167, 139, 250, 0.05);
  --color-result-vim-arrow: #a78bfa;
  --color-result-description-highlight-font: #f0efe6;
  --color-result-link-font: #c4b5fd;
  --color-result-link-font-highlight: #c4b5fd;
  --color-result-link-visited-font: #7c5cbf;
  --color-result-publishdate-font: #6e6e80;
  --color-result-engines-font: #6e6e80;
  --color-result-search-url-border: rgba(255, 255, 255, 0.06);
  --color-result-search-url-font: #f0efe6;
  /* Detail */
  --color-result-detail-font: #f0efe6;
  --color-result-detail-label-font: #6e6e80;
  --color-result-detail-background: #0f0f16;
  --color-result-detail-hr: #3d3d4e;
  --color-result-detail-link: #c4b5fd;
  --color-result-detail-loader-border: rgba(255, 255, 255, 0.1);
  --color-result-detail-loader-borderleft: transparent;
  /* Images */
  --color-result-image-span-font: #6e6e80;
  --color-result-image-span-font-selected: #08080c;
  --color-result-image-background: #08080c;
  /* Settings */
  --color-settings-tr-hover: #15151f;
  --color-settings-engine-description-font: #6e6e80;
  --color-settings-table-group-background: #0a0a10;
  /* Toolkit */
  --color-toolkit-badge-font: #08080c;
  --color-toolkit-badge-background: #a78bfa;
  --color-toolkit-kbd-font: #08080c;
  --color-toolkit-kbd-background: #f0efe6;
  --color-toolkit-dialog-border: rgba(255, 255, 255, 0.06);
  --color-toolkit-dialog-background: #0f0f16;
  --color-toolkit-tabs-label-border: #08080c;
  --color-toolkit-tabs-section-border: rgba(255, 255, 255, 0.06);
  --color-toolkit-select-background: #15151f;
  --color-toolkit-select-border: rgba(255, 255, 255, 0.06);
  --color-toolkit-select-background-hover: #1e1e2a;
  --color-toolkit-input-text-font: #f0efe6;
  --color-toolkit-checkbox-onoff-off-background: #15151f;
  --color-toolkit-checkbox-onoff-on-background: #15151f;
  --color-toolkit-checkbox-onoff-on-mark-background: #a78bfa;
  --color-toolkit-checkbox-onoff-on-mark-color: #08080c;
  --color-toolkit-checkbox-onoff-off-mark-background: #6e6e80;
  --color-toolkit-checkbox-onoff-off-mark-color: #08080c;
  --color-toolkit-checkbox-label-background: #08080c;
  --color-toolkit-checkbox-label-border: rgba(255, 255, 255, 0.06);
  --color-toolkit-checkbox-input-border: #a78bfa;
  --color-toolkit-engine-tooltip-border: rgba(255, 255, 255, 0.06);
  --color-toolkit-engine-tooltip-background: #0f0f16;
  --color-toolkit-loader-border: rgba(255, 255, 255, 0.1);
  --color-toolkit-loader-borderleft: transparent;
  --color-doc-code: #c4b5fd;
  --color-doc-code-background: #15151f;
  --color-bar-chart-primary: #a78bfa;
  --color-bar-chart-secondary: #c4b5fd;
  --color-image-resolution-background: rgba(0, 0, 0, 0.5);
  --color-image-resolution-font: #f0efe6;
  --color-loading-indicator: rgba(167, 139, 250, 0.2);
  --color-loading-indicator-gap: #08080c;
  --color-line-number: #6e6e80;
  --color-favicon-background-color: #15151f;
  --color-favicon-border-color: rgba(255, 255, 255, 0.06);
  --color-accent: #a78bfa;
  --color-categories-item-selected: transparent;
  --color-settings-return-font: #08080c;
  --color-result-keyvalue-table: #0f0f16;
}

/* === Typography === */
html {
  font-family: 'Outfit', sans-serif;
}

body {
  font-family: 'Outfit', sans-serif;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Instrument Serif', serif;
  letter-spacing: -0.02em;
}

::selection {
  background: rgba(167, 139, 250, 0.3);
}

/* === Results Page Header (search_header) === */
#search_header {
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  background: rgba(15, 15, 22, 0.85) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  padding-bottom: 0.8rem !important;
}

/* Categories area in results header — more breathing room */
.search_categories {
  padding: 0.3rem 0 !important;
}

/* === CRITICAL: Homepage — remove header bg/border/blur (fixes the stripe) === */
.index #search,
.index #search_header {
  background: transparent !important;
  border: none !important;
  border-bottom: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  display: block !important;
}

/* Hide search filters on homepage (language, time, safesearch) */
.index .search_filters {
  display: none !important;
}

/* Homepage categories — centered */
.index #categories_container {
  justify-content: center;
}

.index #categories {
  margin-top: 1rem;
}

/* === Search Box === */
.search_box {
  border-radius: 16px !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  background: #0f0f16 !important;
  transition: border-color 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 2px 12px rgba(167, 139, 250, 0.05);
  overflow: hidden;
}

.search_box:focus-within {
  border-color: rgba(167, 139, 250, 0.3) !important;
  box-shadow: 0 4px 24px rgba(167, 139, 250, 0.12);
}

/* Search input — transparent bg so search_box bg shows through */
#q {
  font-family: 'Outfit', sans-serif !important;
  font-weight: 300;
  color: #f0efe6 !important;
  caret-color: #a78bfa;
  background: transparent !important;
}

#q::placeholder {
  color: #3d3d4e;
  font-weight: 300;
}

/* Clear button — transparent */
#clear_search {
  background: transparent !important;
}

/* Search button — accent purple, flush inside the search box */
#send_search {
  background: #a78bfa !important;
  color: #08080c !important;
  border-radius: 0 !important;
  transition: background 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

#send_search:hover {
  background: #c4b5fd !important;
}

/* Homepage search box — center and add subtle glow */
.index .search_box {
  margin: 0 auto;
  max-width: 44rem;
}

.index .search_box:focus-within {
  box-shadow: 0 4px 24px rgba(167, 139, 250, 0.08);
}

/* === Autocomplete Dropdown === */
.autocomplete {
  background: #0f0f16 !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-top: none !important;
  border-radius: 0 0 16px 16px !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
  backdrop-filter: blur(20px);
  font-family: 'Outfit', sans-serif;
}

.autocomplete li {
  color: #f0efe6;
  transition: background 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.autocomplete li:hover,
.autocomplete li.active,
.autocomplete li:focus {
  background: #15151f !important;
}

/* === Category Pills (both checkbox labels AND buttons) === */

/* Container spacing */
#categories_container {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0.6rem 0;
}

.category_checkbox,
.category_button {
  margin-right: 0 !important;
}

/* Checkbox variant (homepage, preferences) */
.category label,
.category_checkbox label {
  font-family: 'Outfit', sans-serif;
  font-size: 0.8rem !important;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 100px !important;
  padding: 8px 18px !important;
  color: #6e6e80;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
}

.category label:hover,
.category_checkbox label:hover {
  border-color: rgba(255, 255, 255, 0.15) !important;
  color: #f0efe6 !important;
  background: #15151f;
}

.category input:checked + label,
.category_checkbox input:checked + label {
  color: #a78bfa !important;
  border-color: #a78bfa !important;
  border-bottom-color: #a78bfa !important;
}

/* Button variant (results page with JS) */
button.category_button {
  font-family: 'Outfit', sans-serif !important;
  font-size: 0.8rem !important;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 100px !important;
  padding: 8px 18px !important;
  color: #6e6e80 !important;
  background: transparent !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
}

button.category_button:hover {
  border-color: rgba(255, 255, 255, 0.15) !important;
  color: #f0efe6 !important;
  background: #15151f !important;
}

button.category_button.selected,
button.category_button:active {
  color: #a78bfa !important;
  border-color: #a78bfa !important;
  background: transparent !important;
}

/* Category icon SVGs — match text color */
.category_checkbox label svg,
button.category_button svg {
  opacity: 0.6;
}

.category_checkbox input:checked + label svg,
button.category_button.selected svg {
  opacity: 1;
}

/* === Homepage Logo === */
.index .logo-wrap {
  margin-bottom: 0.5rem;
  opacity: 0;
  animation: yonse-fadeInUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.05s forwards;
}

/* === Homepage Title === */
.index .title {
  background: none !important;
  margin-bottom: 1.5rem !important;
}

.index h1 {
  font-family: 'Instrument Serif', serif !important;
  font-size: 4em;
  color: #f0efe6 !important;
  letter-spacing: -0.03em;
  opacity: 0;
  animation: yonse-fadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.1s forwards;
}

@keyframes yonse-fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* === Results Cards === */
.result {
  border-radius: 16px !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-left: 1px solid rgba(255, 255, 255, 0.06) !important;
  padding: 1.2rem !important;
  margin-bottom: 0.8rem !important;
  transition: background 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.result:hover {
  background: #15151f !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}

.result h3 {
  font-family: 'Outfit', sans-serif;
  font-weight: 400;
}

.result h3 a {
  color: #c4b5fd !important;
}

.result h3 a:visited {
  color: #7c5cbf !important;
}

.result .url_wrapper .url_o1 {
  color: #6e6e80 !important;
  font-size: 0.8rem;
}

.result .content {
  color: #f0efe6 !important;
  font-weight: 300;
  line-height: 1.6;
}

/* === Wordmark/Logo in header === */
#search_logo svg {
  fill: #a78bfa;
}

#search_logo svg path,
#search_logo svg circle,
#search_logo svg line,
#search_logo svg rect {
  fill: #a78bfa;
  stroke: #a78bfa;
}

/* SVG text elements should be cream, not accent */
#search_logo svg text {
  fill: #f0efe6 !important;
  stroke: none !important;
}

/* === Footer === */
footer {
  background: #0f0f16 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
  font-family: 'Outfit', sans-serif;
  color: #3d3d4e !important;
  font-size: 0.85rem;
}

footer p {
  font-size: 0.85rem;
}

footer a {
  color: #6e6e80 !important;
  transition: color 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

footer a:hover {
  color: #a78bfa !important;
}

/* === Top Navigation Links === */
#links_on_top a {
  color: #6e6e80 !important;
  font-family: 'Outfit', sans-serif;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  transition: color 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

#links_on_top a:hover {
  color: #a78bfa !important;
}

#links_on_top a svg {
  color: inherit;
}

/* === Search Filters (language, time, safesearch) === */
.search_filters {
  gap: 0.5rem;
  padding: 0.5rem 0 !important;
}

.search_filters select {
  font-family: 'Outfit', sans-serif;
  font-size: 0.8rem;
  color: #6e6e80 !important;
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 100px !important;
  padding: 6px 16px !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.search_filters select:hover,
.search_filters select:focus {
  color: #f0efe6 !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
}

/* === Page with Header (info, about) === */
.page_with_header {
  max-width: 52rem;
  margin: 2rem auto;
  padding: 0 1.5rem;
}

.page_with_header .logo {
  height: 36px;
  width: auto;
  opacity: 0.9;
  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.page_with_header .logo:hover {
  opacity: 1;
}

/* Info page tabs (ul.tabs variant) */
ul.tabs {
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  padding-left: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin-bottom: 2rem;
}

ul.tabs li {
  display: flex;
}

ul.tabs li a {
  font-family: 'Outfit', sans-serif;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #6e6e80 !important;
  padding: 0.7em 1em;
  border-bottom: 2px solid transparent;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

ul.tabs li a:hover {
  color: #f0efe6 !important;
  border-bottom-color: rgba(255, 255, 255, 0.15);
}

ul.tabs li a.active {
  color: #a78bfa !important;
  border-bottom-color: #a78bfa !important;
}

/* === Info Page Content (markdown rendering) === */
.info-page {
  color: #f0efe6;
  line-height: 1.75;
  font-weight: 300;
}

.info-page h1 {
  font-family: 'Instrument Serif', serif;
  font-size: 2.2rem;
  color: #f0efe6;
  letter-spacing: -0.02em;
  margin: 0 0 1.2rem 0;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.info-page h2 {
  font-family: 'Instrument Serif', serif;
  font-size: 1.5rem;
  color: #f0efe6;
  letter-spacing: -0.01em;
  margin: 2.5rem 0 1rem 0;
}

.info-page h3 {
  font-family: 'Instrument Serif', serif;
  font-size: 1.2rem;
  color: #f0efe6;
  margin: 2rem 0 0.8rem 0;
}

.info-page p {
  color: #f0efe6;
  margin: 0 0 1rem 0;
  font-weight: 300;
}

.info-page a {
  color: #c4b5fd;
  text-decoration: none;
  border-bottom: 1px solid rgba(196, 181, 253, 0.2);
  transition: color 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.info-page a:hover {
  color: #a78bfa;
  border-bottom-color: rgba(167, 139, 250, 0.5);
}

.info-page ul,
.info-page ol {
  padding-left: 1.5rem;
  margin: 0 0 1rem 0;
}

.info-page li {
  margin-bottom: 0.4rem;
  color: #f0efe6;
}

.info-page li::marker {
  color: #3d3d4e;
}

.info-page code {
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 0.875em;
  background: #15151f !important;
  color: #c4b5fd !important;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 6px;
  padding: 0.15em 0.4em;
}

.info-page pre {
  background: #15151f;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  padding: 1rem 1.2rem;
  overflow-x: auto;
  margin: 0 0 1.2rem 0;
}

.info-page pre code {
  background: transparent !important;
  border: none;
  border-radius: 0;
  padding: 0;
  font-size: 0.85rem;
  line-height: 1.6;
}

.info-page blockquote {
  border-left: 3px solid #a78bfa;
  margin: 0 0 1rem 0;
  padding: 0.5rem 1rem;
  background: rgba(167, 139, 250, 0.04);
  border-radius: 0 10px 10px 0;
  color: #6e6e80;
}

.info-page blockquote p {
  color: #6e6e80;
  margin-bottom: 0;
}

.info-page hr {
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  margin: 2rem 0;
}

.info-page table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 1.2rem 0;
}

.info-page th {
  font-family: 'Outfit', sans-serif;
  font-weight: 500;
  text-align: left;
  color: #f0efe6;
  padding: 0.6rem 0.8rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.info-page td {
  padding: 0.5rem 0.8rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  color: #f0efe6;
}

.info-page tr:hover td {
  background: rgba(167, 139, 250, 0.03);
}

/* === Preferences Page === */
.tabs > label {
  font-family: 'Outfit', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.8rem;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.tabs > input:checked + label {
  color: #a78bfa !important;
  border-color: #a78bfa !important;
}

fieldset {
  border-color: rgba(255, 255, 255, 0.06) !important;
  border-radius: 10px;
}

legend {
  font-family: 'Outfit', sans-serif;
  color: #f0efe6;
}

select {
  background: #15151f !important;
  color: #f0efe6 !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 10px !important;
  font-family: 'Outfit', sans-serif;
}

#main_preferences input[type="text"] {
  font-family: 'Outfit', sans-serif;
}

#main_preferences .preferences_back {
  font-family: 'Outfit', sans-serif;
  border-radius: 16px;
}

/* === Pagination === */
#pagination button,
#pagination input[type="submit"],
#pagination input[type="button"] {
  font-family: 'Outfit', sans-serif;
  border-radius: 10px !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: #0f0f16;
  color: #f0efe6;
}

#pagination button:hover,
#pagination input[type="submit"]:hover {
  background: #15151f;
  border-color: rgba(255, 255, 255, 0.12);
  color: #a78bfa;
}

input.page_number_current {
  background: #a78bfa !important;
  color: #08080c !important;
  border-color: #a78bfa !important;
  font-weight: 500;
}

/* === Back to Top === */
#backToTop a {
  background: #0f0f16 !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 50% !important;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  color: #6e6e80;
}

#backToTop a:hover {
  background: #15151f !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: #a78bfa;
}

/* === Infobox === */
#infoboxes .infobox {
  border-radius: 16px !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  background: #0f0f16 !important;
}

/* === Answers Container (elements/answers.html) === */
#answers {
  background: #0f0f16 !important;
  color: #f0efe6 !important;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  padding: 1.2rem !important;
  font-family: 'Outfit', sans-serif;
}

#answers h4.title {
  display: none;
}

#answers span {
  color: #f0efe6;
  font-family: 'Outfit', sans-serif;
  font-weight: 300;
  line-height: 1.6;
}

#answers .answer {
  flex-direction: column;
  display: flex;
  gap: 0.5rem;
}

/* Shared answer-url link across all answer types */
#answers .answer-url {
  color: #a78bfa !important;
  font-family: 'Outfit', sans-serif;
  font-size: 0.8rem;
  font-weight: 400;
  text-decoration: none;
  margin: 8px 10px 4px auto;
  transition: color 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

#answers a.answer-url:hover {
  color: #c4b5fd !important;
}

#answers span.answer-url {
  color: #6e6e80 !important;
}

/* === Weather Answer (answer/weather.html) === */
#answers .weather {
  border: none;
  color: #f0efe6;
}

#answers .weather summary {
  list-style: none;
  display: block;
  cursor: pointer;
}

/* Remove default <details> marker across browsers */
#answers .weather summary::-webkit-details-marker {
  display: none;
}

#answers .weather div.summary {
  background-color: #15151f !important;
  border-radius: 16px;
  margin: 0;
  padding: 0.6rem 1rem;
  color: #f0efe6;
  font-family: 'Outfit', sans-serif;
  font-weight: 400;
  font-size: 0.95rem;
}

#answers .weather table {
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0.1em 0;
  margin-top: 0.6rem;
  margin-bottom: 0.6rem;
  font-size: 0.9rem;
  font-family: 'Outfit', sans-serif;
  color: #f0efe6;
  width: 100%;
}

#answers .weather td {
  text-overflow: ellipsis;
  padding: 0.25rem 0.5rem;
  overflow: hidden;
  color: #f0efe6;
  font-weight: 300;
}

/* Label cells in the weather table (Temperature:, Wind:, etc.) */
#answers .weather td:nth-child(2n) {
  color: #6e6e80;
}

/* Value cells */
#answers .weather td:nth-child(2n+1) {
  color: #f0efe6;
}

/* First column (icon cell) keeps normal color */
#answers .weather td:first-child {
  color: #f0efe6;
}

#answers .weather img.symbol {
  width: 5rem;
  margin: auto;
  display: block;
  border-radius: 8px;
  opacity: 0.9;
}

/* Forecast section (expanded) */
#answers .weather .weather-forecast {
  margin-top: 0.8rem;
  padding-top: 0.8rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

#answers .weather .answer-weather-forecasts {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

#answers .weather .answer-weather-forecasts .summary {
  background-color: #15151f !important;
}

/* === Translations Answer (answer/translations.html) === */
#answers .answer-translations {
  border: none;
  color: #f0efe6;
  font-family: 'Outfit', sans-serif;
}

#answers .answer-translations summary {
  cursor: pointer;
  color: #c4b5fd;
  font-size: 1.1rem;
  font-weight: 400;
  list-style: none;
  padding: 0.4rem 0;
}

#answers .answer-translations summary::-webkit-details-marker {
  display: none;
}

#answers .answer-translations dl {
  margin: 0.8rem 0 0.4rem;
  padding: 0;
}

#answers .answer-translations dt {
  color: #f0efe6;
  font-weight: 400;
  font-size: 1rem;
  padding: 0.6rem 0 0.2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

#answers .answer-translations dt:first-child {
  border-top: none;
}

#answers .answer-translations dd {
  margin: 0;
  padding: 0.2rem 0 0.6rem 1rem;
  color: #f0efe6;
  font-weight: 300;
}

#answers .answer-translations .item-transliteration {
  color: #6e6e80;
  font-style: italic;
  font-size: 0.9rem;
  margin-bottom: 0.4rem;
}

/* Section labels (Examples, Definitions, Synonyms) */
#answers .answer-translations dd > div {
  color: #a78bfa;
  font-size: 0.8rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 0.5rem;
  margin-bottom: 0.25rem;
}

#answers .answer-translations ul {
  margin: 0.2rem 0 0.5rem;
  padding-left: 1.2rem;
  list-style-type: disc;
}

#answers .answer-translations li {
  color: #f0efe6;
  font-weight: 300;
  font-size: 0.9rem;
  line-height: 1.5;
  padding: 0.1rem 0;
}

#answers .answer-translations li::marker {
  color: #6e6e80;
}

/* === Legacy Answer (answer/legacy.html) === */
#answers .answer > span {
  color: #f0efe6;
  font-family: 'Outfit', sans-serif;
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.6;
}

/* === Answers — Mobile === */
@media screen and (max-width: 50em) {
  #answers {
    padding: 1rem !important;
    border-radius: 12px;
  }

  #answers .weather table {
    font-size: 0.8rem;
  }

  #answers .weather img.symbol {
    width: 3.5rem;
  }

  #answers .answer-translations summary {
    font-size: 1rem;
  }
}

/* === Suggestions === */
#suggestions .suggestion {
  border-radius: 100px !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  background: #0f0f16 !important;
  font-family: 'Outfit', sans-serif;
  font-size: 0.8rem;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

#suggestions .suggestion:hover {
  background: #15151f !important;
  border-color: rgba(167, 139, 250, 0.3) !important;
  color: #a78bfa !important;
}

/* === Dialog Errors/Warnings === */
.dialog-error {
  border-radius: 16px;
  border: 1px solid rgba(245, 91, 91, 0.3) !important;
  background: #2a1010 !important;
}

.dialog-warning-block {
  border-radius: 16px;
  border: 1px solid rgba(241, 213, 97, 0.3) !important;
  background: #2a2410 !important;
}

/* === No-Results Empty State (.dialog-error-block) === */
.dialog-error-block {
  border-radius: 16px !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  background: #0f0f16 !important;
  color: #f0efe6 !important;
  padding: 2rem !important;
  text-align: center;
  font-family: 'Outfit', sans-serif;
}

.dialog-error-block strong {
  font-family: 'Instrument Serif', serif;
  font-size: 1.6rem;
  font-weight: 400;
  color: #f0efe6;
  letter-spacing: -0.02em;
  display: block;
  margin-bottom: 0.5rem;
}

.dialog-error-block > p {
  color: #6e6e80;
  font-size: 0.95rem;
  font-weight: 300;
  margin: 0.5rem 0;
}

.dialog-error-block ul {
  text-align: left;
  display: inline-block;
  list-style: none;
  padding: 0;
  margin: 1rem auto 0;
}

.dialog-error-block ul li {
  color: #6e6e80;
  font-size: 0.9rem;
  font-weight: 300;
  line-height: 1.8;
  padding-left: 1.4em;
  position: relative;
}

.dialog-error-block ul li::before {
  content: '\2022';
  color: #a78bfa;
  position: absolute;
  left: 0;
}

.dialog-error-block ul li a {
  color: #a78bfa !important;
  text-decoration: none;
  border-bottom: 1px solid rgba(167, 139, 250, 0.3);
  transition: color 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.dialog-error-block ul li a:hover {
  color: #c4b5fd !important;
  border-bottom-color: #c4b5fd;
}

/* === Cookie Warning (.alert.alert-info) === */
.alert.alert-info {
  border-radius: 16px !important;
  border: 1px solid rgba(167, 139, 250, 0.2) !important;
  background: #0f0f16 !important;
  color: #f0efe6 !important;
  padding: 1.2rem 1.5rem !important;
  font-family: 'Outfit', sans-serif;
  font-weight: 300;
  font-size: 0.9rem;
}

.alert.alert-info .lead {
  font-family: 'Outfit', sans-serif;
  font-weight: 500;
  font-size: 0.95rem;
  color: #a78bfa !important;
}

.alert.alert-info .lead svg {
  fill: #a78bfa;
  vertical-align: -0.15em;
  margin-right: 0.3rem;
}

/* === 404 / Error Pages === */
.center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  text-align: center;
  padding: 2rem 1.5rem;
}

.center h1 {
  font-family: 'Instrument Serif', serif;
  font-size: 3.5rem;
  color: #f0efe6;
  letter-spacing: -0.03em;
  margin-bottom: 0.75rem;
}

.center p {
  font-family: 'Outfit', sans-serif;
  font-size: 1.05rem;
  font-weight: 300;
  color: #6e6e80;
  line-height: 1.6;
}

.center p a {
  color: #a78bfa;
  text-decoration: none;
  border-bottom: 1px solid rgba(167, 139, 250, 0.3);
  transition: color 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.center p a:hover {
  color: #c4b5fd;
  border-bottom-color: #c4b5fd;
}

@media screen and (max-width: 35em) {
  .center h1 {
    font-size: 2.2rem;
  }
}

/* === Scrollbar === */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: #08080c;
}

::-webkit-scrollbar-thumb {
  background: #3d3d4e;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #6e6e80;
}

/* === Select Dropdown Arrow Fix (light arrow on dark bg) === */
@supports ((background-position-x: 100%) and ((appearance: none))) {
  select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='512' height='512' viewBox='0 0 512 512'%3E%3Cpath fill='%23ddd' d='m128 192 128 128 128-128z'/%3E%3C/svg%3E") !important;
  }
}

/* === Smooth Transitions (scoped, not 'all') === */
a, button, .result, .category label, .category_button {
  transition: color 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              background-color 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

input, select, textarea {
  transition: border-color 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* === Reduce Motion === */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  html {
    scroll-behavior: auto;
  }
  .index h1,
  .index .logo-wrap {
    opacity: 1 !important;
    animation: none !important;
  }
}

/* === Image Results Grid === */

/* Grid container — the images-only results page uses flex-wrap */
#main_results div#results.only_template_images #urls {
  gap: 6px;
}

/* Each image card in the grid */
.result-images {
  border-radius: 10px !important;
  border: none !important;
  overflow: hidden;
  background: #0f0f16 !important;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.result-images:hover {
  transform: scale(1.03);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
  z-index: 2;
}

/* Thumbnail image */
.result-images img.image_thumbnail {
  background: #08080c !important;
  border: none !important;
  border-radius: 0;
}

/* Resolution badge overlay (bottom-right of thumbnail) */
.result-images .image_resolution {
  background: rgba(8, 8, 12, 0.75) !important;
  color: #f0efe6 !important;
  font-family: 'Outfit', sans-serif;
  font-size: 0.75rem;
  font-weight: 400;
  padding: 0.25rem 0.5rem;
  border-top-left-radius: 8px;
  border-bottom-right-radius: 0;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Title and source overlays below thumbnail */
.result-images span.title {
  color: #f0efe6 !important;
  font-family: 'Outfit', sans-serif;
  font-size: 0.8rem;
  font-weight: 300;
}

.result-images span.source {
  color: #6e6e80 !important;
  font-family: 'Outfit', sans-serif;
  font-size: 0.65rem;
  font-weight: 300;
}

/* Selected image card (keyboard nav / click) */
article.result-images[data-vim-selected] {
  background: #a78bfa !important;
  border-radius: 10px;
}

article.result-images[data-vim-selected] span.title,
article.result-images[data-vim-selected] span.source {
  color: #08080c !important;
}

/* === Image Detail Panel (opens when clicking an image) === */

#results.image-detail-open article.result-images[data-vim-selected] .detail {
  background: #0f0f16 !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 16px 0 0 0;
  box-shadow: -4px 0 32px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

/* Detail panel — full-size image area */
#results.image-detail-open article.result-images[data-vim-selected] .detail a.result-images-source img {
  background: #08080c !important;
  border-radius: 10px;
  border: none !important;
}

/* Detail panel — metadata labels area */
#results.image-detail-open article.result-images[data-vim-selected] .detail .result-images-labels {
  color: #f0efe6 !important;
}

#results.image-detail-open article.result-images[data-vim-selected] .detail .result-images-labels h4 {
  font-family: 'Outfit', sans-serif;
  font-weight: 400;
  color: #f0efe6;
  font-size: 1rem;
}

#results.image-detail-open article.result-images[data-vim-selected] .detail .result-images-labels p {
  color: #6e6e80 !important;
  font-family: 'Outfit', sans-serif;
  font-weight: 300;
}

#results.image-detail-open article.result-images[data-vim-selected] .detail .result-images-labels p span {
  color: #f0efe6;
  font-weight: 400;
}

#results.image-detail-open article.result-images[data-vim-selected] .detail .result-images-labels hr {
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-bottom: none;
}

/* Detail panel — links */
#results.image-detail-open article.result-images[data-vim-selected] .detail .result-images-labels a,
#results.image-detail-open article.result-images[data-vim-selected] .detail .result-images-labels a:visited {
  color: #c4b5fd !important;
}

#results.image-detail-open article.result-images[data-vim-selected] .detail .result-images-labels a:hover {
  color: #a78bfa !important;
}

/* Hoverable content/url overflow reveal — match panel bg */
#results.image-detail-open article.result-images[data-vim-selected] .detail .result-images-labels p.result-content:hover,
#results.image-detail-open article.result-images[data-vim-selected] .detail .result-images-labels p.result-url:hover {
  background: #0f0f16 !important;
}

/* Detail panel — close / prev / next navigation buttons */
#results.image-detail-open article.result-images[data-vim-selected] .detail a.result-detail-close,
#results.image-detail-open article.result-images[data-vim-selected] .detail a.result-detail-close:visited,
#results.image-detail-open article.result-images[data-vim-selected] .detail a.result-detail-close:active,
#results.image-detail-open article.result-images[data-vim-selected] .detail a.result-detail-previous,
#results.image-detail-open article.result-images[data-vim-selected] .detail a.result-detail-previous:visited,
#results.image-detail-open article.result-images[data-vim-selected] .detail a.result-detail-previous:active,
#results.image-detail-open article.result-images[data-vim-selected] .detail a.result-detail-next,
#results.image-detail-open article.result-images[data-vim-selected] .detail a.result-detail-next:visited,
#results.image-detail-open article.result-images[data-vim-selected] .detail a.result-detail-next:active {
  color: #f0efe6 !important;
  background: #15151f !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 50%;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

#results.image-detail-open article.result-images[data-vim-selected] .detail a.result-detail-close:hover,
#results.image-detail-open article.result-images[data-vim-selected] .detail a.result-detail-previous:hover,
#results.image-detail-open article.result-images[data-vim-selected] .detail a.result-detail-next:hover {
  background: #a78bfa !important;
  color: #08080c !important;
  border-color: #a78bfa !important;
  filter: none !important;
}

/* Detail panel — loading spinner (accent leading edge, consistent with generic .loader) */
#results.image-detail-open article.result-images[data-vim-selected] .detail .loader {
  border-top-color: rgba(167, 139, 250, 0.2) !important;
  border-right-color: rgba(167, 139, 250, 0.2) !important;
  border-bottom-color: rgba(167, 139, 250, 0.2) !important;
  border-left-color: #a78bfa !important;
}

/* === Image Results — Mixed results page (template_group_images) === */
.template_group_images {
  gap: 6px;
}

/* ==========================================================================
   MOBILE RESPONSIVE -- YonSe Design System
   SearXNG breakpoints: @tablet 79.75em, @phone 50em, @small-phone 35em,
                         @ultra-small-phone 20rem
   YonSe breakpoints:   50em (800px), 35em (560px)
   ========================================================================== */

/* ---------------------------------------------------------------------------
   TABLET -- max-width: 79.75em (1276px)
   SearXNG collapses sidebar under results, hides nav text, switches
   grid layout. We align our overrides.
   --------------------------------------------------------------------------- */
@media screen and (max-width: 79.75em) {

  /* Search header -- tighten padding for narrower viewport */
  #search_header {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  /* Sidebar -- now stacked below results; keep YonSe card styling */
  #sidebar .infobox {
    border-radius: 16px !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    background: #0f0f16 !important;
    padding: 1rem;
  }

  #sidebar .infobox img {
    border-radius: 10px;
  }

  /* Info page -- tighter padding on tablets */
  .page_with_header {
    padding: 0 1rem;
  }

  .info-page h1 {
    font-size: 1.8rem;
  }

  .info-page h2 {
    font-size: 1.3rem;
  }

  /* Image detail panel -- fullscreen overlay on tablet */
  #results.image-detail-open article.result-images[data-vim-selected] .detail {
    border-radius: 0 !important;
    box-shadow: none;
  }
}

/* ---------------------------------------------------------------------------
   PHONE -- max-width: 50em (800px)
   SearXNG: search box goes fullscreen on focus, categories span full width,
   results get card layout, sidebar stacks, numbered pagination hidden,
   image row height shrinks.
   --------------------------------------------------------------------------- */
@media screen and (max-width: 50em) {

  /* --- Homepage --- */
  .index .logo-wrap svg {
    width: 60px;
    height: 60px;
  }

  .index h1 {
    font-size: 2.5em;
  }

  /* --- Search box fullscreen on focus ---
     SearXNG sets border-radius: 0 and position: absolute on focus.
     We must kill our rounded corners and shadows to match. */
  #search_view:focus-within .search_box {
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
    overflow: visible;
  }

  #search_view:focus-within #send_search {
    border-radius: 0 !important;
  }

  #search_view:focus-within #q {
    border-radius: 0 !important;
  }

  #search_view:focus-within #clear_search {
    border-radius: 0 !important;
  }

  /* Autocomplete dropdown -- kill radius when search is fullscreen */
  #search_view:focus-within .autocomplete,
  #search_view:focus-within .autocomplete.open {
    border-radius: 0 !important;
    max-width: 100%;
    border-left: none !important;
    border-right: none !important;
  }

  /* --- Search header --- */
  #search_header {
    padding-bottom: 0.5rem !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }

  /* --- Categories -- horizontal scroll + touch-friendly targets ---
     SearXNG enables overflow:scroll on tablet+touch (search.less:271-289).
     We enforce horizontal scroll and ensure 44px min touch targets. */
  #categories {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
  }

  #categories::-webkit-scrollbar {
    display: none;
  }

  #categories_container {
    flex-wrap: nowrap;
    gap: 0.4rem;
    width: max-content;
  }

  .category_checkbox label,
  button.category_button {
    font-size: 0.75rem !important;
    padding: 10px 16px !important; /* yields ~44px total height */
    white-space: nowrap;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* --- Results cards -- adjust for full-width mobile layout --- */
  .result {
    border-radius: 12px !important;
    padding: 1rem !important;
    margin-left: 2% !important;
    margin-right: 2% !important;
  }

  .result h3 {
    font-size: 1.05rem;
  }

  .result .content {
    font-size: 0.88rem;
    line-height: 1.5;
  }

  .result .url_wrapper {
    font-size: 0.85rem;
  }

  /* Vim-selected result -- rounded on mobile */
  article[data-vim-selected] {
    border-radius: 12px !important;
  }

  /* --- Sidebar on mobile -- card styling below results --- */
  #sidebar {
    margin: 0.5rem 2% !important;
    padding: 0;
  }

  #sidebar .infobox {
    border-radius: 12px !important;
    padding: 1rem;
  }

  .sidebar-collapsible {
    border-color: rgba(255, 255, 255, 0.06);
  }

  /* --- Pagination -- touch-friendly buttons --- */
  #pagination {
    margin: 1.5rem 1rem 0 1rem !important;
  }

  #pagination button,
  #pagination input[type="submit"],
  #pagination input[type="button"] {
    min-height: 44px;
    min-width: 44px;
    padding: 0.6rem 1.2rem;
    font-size: 0.9rem;
  }

  /* --- Footer -- stack and center on mobile --- */
  footer {
    padding: 1.5rem 1rem !important;
    font-size: 0.8rem;
  }

  footer p {
    font-size: 0.8rem;
    line-height: 1.6;
  }

  /* --- Top navigation links -- touch targets --- */
  #links_on_top a {
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
  }

  /* --- Answers box --- */
  #answers {
    border-radius: 12px;
    margin: 0.5rem 2%;
  }

  /* --- Suggestions -- touch-friendly --- */
  #suggestions .suggestion {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1rem;
  }

  /* --- Image results -- smaller row height, no hover scale on touch --- */
  .result-images {
    border-radius: 8px !important;
  }

  .result-images:hover {
    transform: none;
    box-shadow: none;
  }

  /* --- Image detail panel -- fullscreen on phone --- */
  #results.image-detail-open article.result-images[data-vim-selected] .detail {
    border-radius: 0 !important;
    padding: 1rem !important;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  /* Image detail nav buttons -- 44px touch targets */
  #results.image-detail-open article.result-images[data-vim-selected] .detail a.result-detail-close,
  #results.image-detail-open article.result-images[data-vim-selected] .detail a.result-detail-previous,
  #results.image-detail-open article.result-images[data-vim-selected] .detail a.result-detail-next {
    width: 2.75rem !important;
    height: 2.75rem !important;
    min-width: 44px;
    min-height: 44px;
  }

  #results.image-detail-open article.result-images[data-vim-selected] .detail a.result-detail-close span,
  #results.image-detail-open article.result-images[data-vim-selected] .detail a.result-detail-previous span,
  #results.image-detail-open article.result-images[data-vim-selected] .detail a.result-detail-next span {
    width: 2.75rem;
    height: 2.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* --- Video thumbnails -- full width on mobile --- */
  .result-videos a.thumbnail_link img.thumbnail {
    width: 100% !important;
    max-width: 100%;
  }

  /* --- Search filters (language, time, safesearch) -- scrollable row --- */
  .search_filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0.5rem 0.5rem !important;
    gap: 0.4rem;
  }

  .search_filters select {
    min-height: 44px;
    font-size: 0.75rem !important;
    padding: 8px 12px !important;
    white-space: nowrap;
    flex-shrink: 0;
  }

  /* --- Preferences page -- prevent legend overflow --- */
  #main_preferences legend {
    float: none !important;
    width: 100% !important;
    margin-bottom: 0.5rem;
  }

  #main_preferences .value {
    float: none !important;
    width: 100% !important;
  }

  #main_preferences .value select {
    width: 100%;
  }

  #main_preferences .description {
    float: none !important;
    width: 100% !important;
    padding-top: 0.5rem;
  }

  #main_preferences fieldset {
    padding: 0.5rem;
  }

  /* --- Tabs on mobile -- full-width stacking --- */
  .tabs > label {
    width: 100%;
    text-align: center;
    padding: 0.8rem;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* --- Dialog modals -- don't overflow viewport --- */
  .dialog-modal {
    width: calc(100% - 2rem) !important;
    max-width: 100%;
    left: 1rem !important;
    right: 1rem !important;
    transform: translate(0, -50%) !important;
  }

  /* --- Back to Top -- ensure 44px target (hidden by SearXNG on tablet,
     but shown on phone via only_template_images) --- */
  #backToTop a {
    width: 44px;
    height: 44px;
  }
}

/* ---------------------------------------------------------------------------
   SMALL PHONE -- max-width: 35em (560px)
   Further size reductions. Everything must remain usable with touch.
   --------------------------------------------------------------------------- */
@media screen and (max-width: 35em) {

  /* --- Homepage --- */
  .index .logo-wrap svg {
    width: 50px;
    height: 50px;
  }

  .index h1 {
    font-size: 2em;
  }

  /* --- Categories -- keep 44px targets, tighter horizontal padding --- */
  .category_checkbox label,
  button.category_button {
    font-size: 0.7rem !important;
    padding: 10px 12px !important; /* still ~44px height */
    min-height: 44px;
  }

  /* --- Results -- compact cards --- */
  .result {
    padding: 0.8rem !important;
    margin-left: 1.5% !important;
    margin-right: 1.5% !important;
    border-radius: 10px !important;
  }

  .result h3 {
    font-size: 1rem;
  }

  .result h3 a {
    font-size: 1rem !important;
  }

  .result .content {
    font-size: 0.85rem;
  }

  .result .url_wrapper {
    font-size: 0.8rem;
  }

  /* --- Sidebar --- */
  #sidebar .infobox {
    border-radius: 10px !important;
    padding: 0.8rem;
  }

  /* --- Footer -- smaller text --- */
  footer {
    font-size: 0.75rem;
    padding: 1rem 0.75rem !important;
  }

  footer p {
    font-size: 0.75rem;
  }

  /* --- Image results -- tighter grid --- */
  #main_results div#results.only_template_images #urls {
    gap: 4px;
  }

  .result-images {
    border-radius: 6px !important;
  }

  .result-images span.title {
    font-size: 0.7rem;
  }

  .result-images span.source {
    font-size: 0.6rem;
  }

  /* --- Pagination -- compact --- */
  #pagination button,
  #pagination input[type="submit"],
  #pagination input[type="button"] {
    min-height: 44px;
    padding: 0.5rem 0.8rem;
    font-size: 0.85rem;
  }

  /* --- Preferences -- single column layout --- */
  #main_preferences .category {
    margin-right: 0.3rem;
    margin-bottom: 0.25rem;
  }

  #main_preferences .category label {
    font-size: 0.75rem;
    padding: 0.3rem 0.6rem;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  #main_preferences table.table_engines th,
  #main_preferences table.table_engines td {
    padding: 0.5rem 0.25rem;
    font-size: 0.8rem;
  }

  /* --- Info page -- phone sizing --- */
  .page_with_header {
    margin: 1rem auto;
    padding: 0 0.75rem;
  }

  .page_with_header .logo {
    height: 28px;
  }

  .info-page h1 {
    font-size: 1.5rem;
  }

  .info-page h2 {
    font-size: 1.15rem;
  }

  .info-page pre {
    padding: 0.75rem;
    border-radius: 8px;
  }

  /* --- Tabs -- smaller on phone --- */
  .tabs > label,
  ul.tabs li a {
    font-size: 0.75rem;
    padding: 0.7rem 0.5rem;
    min-height: 44px;
  }

  /* --- Dialog -- edge-to-edge --- */
  .dialog-error,
  .dialog-warning-block {
    border-radius: 10px;
    margin: 0.5rem;
  }
}

/* ---------------------------------------------------------------------------
   ULTRA-SMALL PHONE -- max-width: 20rem (320px)
   SearXNG hides the search logo. We compact further.
   --------------------------------------------------------------------------- */
@media screen and (max-width: 20rem) {

  .index h1 {
    font-size: 1.6em;
  }

  .index .logo-wrap svg {
    width: 40px;
    height: 40px;
  }

  /* Categories -- minimal padding, rely on scroll */
  .category_checkbox label,
  button.category_button {
    font-size: 0.65rem !important;
    padding: 10px 10px !important;
    min-height: 44px;
  }

  .result {
    padding: 0.6rem !important;
    border-radius: 8px !important;
  }

  .result h3 {
    font-size: 0.95rem;
  }
}

/* ---------------------------------------------------------------------------
   TOUCH DEVICE -- ensure hover effects don't stick on mobile
   --------------------------------------------------------------------------- */
@media (hover: none) and (pointer: coarse) {

  /* Disable hover scale on image cards (causes jitter on touch) */
  .result-images:hover {
    transform: none !important;
    box-shadow: none !important;
  }

  /* Disable hover elevations that feel wrong on touch */
  .result:hover {
    background: var(--color-result-background) !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
  }

  /* Autocomplete -- no hover bg (selection is via tap) */
  .autocomplete li:hover {
    background: transparent !important;
  }

  /* Category pills -- no hover state stuck after tap */
  .category_checkbox label:hover,
  button.category_button:hover {
    border-color: rgba(255, 255, 255, 0.08) !important;
    color: #6e6e80 !important;
    background: transparent !important;
  }

  /* Keep selected state visible */
  .category input:checked + label:hover,
  .category_checkbox input:checked + label:hover,
  button.category_button.selected:hover {
    color: #a78bfa !important;
    border-color: #a78bfa !important;
  }
}

/* ---------------------------------------------------------------------------
   LANDSCAPE PHONE -- short viewport
   When phone is landscape, the fullscreen search overlay and image detail
   panel need to account for limited vertical space.
   --------------------------------------------------------------------------- */
@media screen and (max-width: 50em) and (max-height: 30em) {

  /* Homepage -- reduce top margin in landscape */
  #main_index {
    margin-top: 2em !important;
  }

  .index h1 {
    font-size: 1.8em;
  }

  /* Image detail -- use all vertical space */
  #results.image-detail-open article.result-images[data-vim-selected] .detail {
    padding: 0.5rem !important;
  }

  #results.image-detail-open article.result-images[data-vim-selected] .detail a.result-images-source img {
    max-height: calc(100vh - 8rem) !important;
  }
}


/* ================================================================
   ENGINE STATS PAGE
   ================================================================ */

/* --- Page heading --- */
#main_stats h1 {
  font-family: 'Instrument Serif', serif;
  color: #f0efe6;
  font-size: 2.2rem;
  letter-spacing: -0.02em;
  margin-bottom: 1.5rem;
}

#main_stats h1 a {
  color: #a78bfa;
  text-decoration: none;
}

#main_stats h1 a:hover {
  color: #c4b5fd;
}

#main_stats h2 {
  font-family: 'Instrument Serif', serif;
  color: #f0efe6;
  font-size: 1.5rem;
  margin-top: 2rem;
  margin-bottom: 1rem;
}

/* --- Stats table --- */
.engine-stats {
  width: 100%;
  border-spacing: 0;
  border-collapse: separate;
  border-radius: 16px;
  overflow: hidden;
  background: #0f0f16;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

/* Header row */
.engine-stats tr:first-child th {
  background: #15151f;
  color: #6e6e80;
  font-family: 'Outfit', sans-serif;
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  white-space: nowrap;
}

.engine-stats tr:first-child th a {
  color: #6e6e80;
  text-decoration: none;
  transition: color 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.engine-stats tr:first-child th a:hover {
  color: #a78bfa;
}

/* Sort indicator icon */
.engine-stats tr:first-child th svg {
  vertical-align: middle;
  color: #a78bfa;
}

/* Data rows */
.engine-stats tr td {
  padding: 0.6rem 1rem;
  color: #f0efe6;
  font-family: 'Outfit', sans-serif;
  font-weight: 300;
  font-size: 0.9rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  vertical-align: middle;
}

/* Alternating row colors */
.engine-stats tr:nth-child(even) td {
  background: rgba(255, 255, 255, 0.015);
}

.engine-stats tr:nth-child(odd) td {
  background: transparent;
}

/* Row hover */
.engine-stats tr:hover td {
  background: rgba(167, 139, 250, 0.04);
}

/* Last row — no bottom border */
.engine-stats tr:last-child td {
  border-bottom: none;
}

/* Engine name link */
.engine-stats .engine-name a {
  color: #c4b5fd;
  text-decoration: none;
  transition: color 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.engine-stats .engine-name a:hover {
  color: #a78bfa;
}

/* Score column */
.engine-stats .engine-score {
  text-align: right;
  color: #f0efe6;
}

/* Reliability column */
.engine-stats .engine-reliability {
  text-align: right;
  color: #6e6e80;
  font-variant-numeric: tabular-nums;
}

/* --- Bar charts --- */
.bar-chart-value {
  color: #f0efe6;
  font-family: 'Outfit', sans-serif;
  font-weight: 400;
  font-size: 0.85rem;
  text-align: right;
  width: 3em;
  padding-right: 0.5rem;
  display: inline-block;
}

.bar-chart-graph {
  width: calc(100% - 5rem);
  display: inline-block;
  vertical-align: middle;
}

.bar-chart-bar {
  border-color: #a78bfa;
  border-radius: 3px;
  background: rgba(167, 139, 250, 0.15);
}

.bar-chart-serie1 {
  border-color: #a78bfa;
  border-radius: 3px 0 0 3px;
  background: rgba(167, 139, 250, 0.15);
}

.bar-chart-serie2 {
  border-color: #c4b5fd;
  border-radius: 0 3px 3px 0;
  background: rgba(196, 181, 253, 0.1);
}

/* --- Engine tooltip (hover detail on response-time cell) --- */
.engine-tooltip {
  background: #15151f !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  padding: 0.6rem 1rem;
  font-size: 0.82rem;
  color: #f0efe6;
}

.engine-stats table.engine-tooltip td,
.engine-stats table.engine-tooltip th {
  padding: 0.25rem 0.5rem;
  font-family: 'Outfit', sans-serif;
  font-weight: 300;
  color: #f0efe6;
  border: none;
  background: transparent !important;
}

.engine-stats table.engine-tooltip tr:first-child th {
  background: transparent;
  color: #6e6e80;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.engine-stats table.engine-tooltip tr th[scope="col"]:first-child {
  color: #a78bfa;
}

/* --- Engine errors section --- */
.engine-errors {
  margin-top: 2.5rem;
}

.engine-errors h2 {
  font-family: 'Instrument Serif', serif;
  color: #f0efe6;
  font-size: 1.4rem;
  margin-bottom: 1rem;
}

table.engine-error {
  width: 100%;
  max-width: 1280px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  overflow: hidden;
  border-spacing: 0;
  border-collapse: collapse;
  background: #0f0f16;
  margin: 0.75rem 0 2rem;
}

table.engine-error tr th,
table.engine-error tr td {
  padding: 0.5rem 0.75rem;
  font-family: 'Outfit', sans-serif;
  font-weight: 300;
  font-size: 0.85rem;
  color: #f0efe6;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

table.engine-error tr th {
  color: #6e6e80;
  font-weight: 400;
  white-space: nowrap;
  width: 10rem;
}

table.engine-error tr th.engine-error-type {
  color: #6e6e80;
}

table.engine-error tr td.engine-error-type {
  color: #f0efe6;
}

table.engine-error tr:last-child th,
table.engine-error tr:last-child td {
  border-bottom: none;
}

/* Error log parameters */
.engine-errors span.log_parameters {
  display: inline-block;
  background: #15151f;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 6px;
  padding: 0.15rem 0.5rem;
  margin: 0.15rem 0.25rem;
  font-size: 0.8rem;
  color: #c4b5fd;
  font-family: monospace;
}

/* --- Stacked bar chart (response-time detail view) --- */
.stacked-bar-chart {
  padding-left: 4rem;
}

.stacked-bar-chart-value {
  color: #f0efe6;
  font-family: 'Outfit', sans-serif;
  font-weight: 400;
  font-size: 0.85rem;
}

.stacked-bar-chart-median {
  background: #a78bfa;
  border-color: rgba(167, 139, 250, 0.9);
}

.stacked-bar-chart-rate80 {
  border-color: rgba(167, 139, 250, 0.3);
}

.stacked-bar-chart-rate95 {
  border-bottom-color: rgba(167, 139, 250, 0.5);
}

.stacked-bar-chart-rate100 {
  border-left-color: rgba(167, 139, 250, 0.9);
}

/* --- Stats page responsive --- */
@media screen and (max-width: 50em) {
  .engine-stats {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 10px;
  }

  .engine-stats .engine-name {
    min-width: 10rem;
  }

  #main_stats h1 {
    font-size: 1.6rem;
  }

  table.engine-error {
    border-radius: 8px;
  }
}

@media screen and (max-width: 35em) {
  .engine-stats tr td,
  .engine-stats tr:first-child th {
    padding: 0.5rem 0.6rem;
    font-size: 0.8rem;
  }

  #main_stats h1 {
    font-size: 1.3rem;
  }
}

/* === Back to Top — container overrides === */
#backToTop {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  position: fixed !important;
  bottom: 2rem !important;
  right: 1.5rem !important;
  left: auto !important;
  z-index: 1000;
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px);
  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

#results.scrolling #backToTop {
  opacity: 1;
  pointer-events: all;
  transform: translateY(0);
}

/* === Generic loader — YonSe accent spinner === */
.loader {
  border-top-color: rgba(167, 139, 250, 0.2) !important;
  border-right-color: rgba(167, 139, 250, 0.2) !important;
  border-bottom-color: rgba(167, 139, 250, 0.2) !important;
  border-left-color: #a78bfa !important;
}

/* === Infinite scroll — loading state in pagination area === */
#pagination .loader {
  margin: 2rem auto !important;
  border-top-color: rgba(167, 139, 250, 0.15) !important;
  border-right-color: rgba(167, 139, 250, 0.15) !important;
  border-bottom-color: rgba(167, 139, 250, 0.15) !important;
  border-left-color: #a78bfa !important;
}

#pagination .dialog-error {
  background: #15151f !important;
  color: #f55b5b !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 12px !important;
  padding: 1rem 1.5rem !important;
  text-align: center;
}

/* ================================================================
   RTL (Right-to-Left) LAYOUT SUPPORT
   ================================================================
   Activated when base.html renders dir="rtl" on <html>.
   Uses CSS logical properties where possible; falls back to
   physical overrides scoped under [dir="rtl"] where logical
   properties cannot replace the rule (e.g. asymmetric border-radius,
   box-shadow offsets, positioned elements).
   ================================================================ */

/* --- 1. Category pills: clear hardcoded margin-right --- */
[dir="rtl"] .category_checkbox,
[dir="rtl"] .category_button {
  margin-right: unset !important;
  margin-left: 0 !important;
}

/* --- 2. Result cards: mirror the border-left override to border-right --- */
[dir="rtl"] .result {
  border-left: none !important;
  border-right: 1px solid rgba(255, 255, 255, 0.06) !important;
}

/* --- 3. Info page lists: use logical padding --- */
[dir="rtl"] .info-page ul,
[dir="rtl"] .info-page ol {
  padding-left: 0;
  padding-inline-start: 1.5rem;
}

/* --- 4. Info page table headers: logical text alignment --- */
[dir="rtl"] .info-page th {
  text-align: right;
}

/* --- 5. Blockquote: flip border and radius for RTL --- */
[dir="rtl"] .info-page blockquote {
  border-left: none;
  border-right: 3px solid #a78bfa;
  border-radius: 10px 0 0 10px;
}

/* --- 6. Tabs list: logical padding --- */
[dir="rtl"] ul.tabs {
  padding-left: unset;
  padding-inline-start: 0;
}

/* --- 7. Dialog error list items: flip bullet position --- */
[dir="rtl"] .dialog-error-block ul li {
  padding-left: 0;
  padding-inline-start: 1.4em;
}

[dir="rtl"] .dialog-error-block ul li::before {
  left: auto;
  right: 0;
}

/* --- 8. Dialog error list: flip text alignment --- */
[dir="rtl"] .dialog-error-block ul {
  text-align: right;
}

/* --- 9. Alert lead icon: flip margin --- */
[dir="rtl"] .alert.alert-info .lead svg {
  margin-right: 0;
  margin-inline-end: 0.3rem;
}

/* --- 10. Image resolution badge: flip corner radius --- */
[dir="rtl"] .result-images .image_resolution {
  border-top-left-radius: 0;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

/* --- 11. Image detail panel: mirror shadow and border-radius --- */
[dir="rtl"] #results.image-detail-open article.result-images[data-vim-selected] .detail {
  border-radius: 0 16px 0 0;
  box-shadow: 4px 0 32px rgba(0, 0, 0, 0.5);
}

/* --- 12. Loader spinner: flip accent leading edge for RTL --- */
[dir="rtl"] #results.image-detail-open article.result-images[data-vim-selected] .detail .loader {
  border-left-color: rgba(167, 139, 250, 0.2) !important;
  border-right-color: #a78bfa !important;
}

[dir="rtl"] .loader {
  border-left-color: rgba(167, 139, 250, 0.2) !important;
  border-right-color: #a78bfa !important;
}

/* --- 13. Bar chart values: use logical alignment and padding --- */
[dir="rtl"] .bar-chart-value {
  text-align: left;
  padding-right: 0;
  padding-inline-start: 0.5rem;
}

/* --- 14. Bar chart series: flip radius for RTL stacking direction --- */
[dir="rtl"] .bar-chart-serie1 {
  border-radius: 0 3px 3px 0;
}

[dir="rtl"] .bar-chart-serie2 {
  border-radius: 3px 0 0 3px;
}

/* --- 15. Stacked bar chart: flip the left padding --- */
[dir="rtl"] .stacked-bar-chart {
  padding-left: 0;
  padding-inline-start: 4rem;
}

/* --- 16. Stacked bar chart rate100: flip border side --- */
[dir="rtl"] .stacked-bar-chart-rate100 {
  border-left-color: transparent;
  border-right-color: rgba(167, 139, 250, 0.9);
}

/* --- 17. Engine stats columns: text-align start (logical) --- */
[dir="rtl"] .engine-stats .engine-score,
[dir="rtl"] .engine-stats .engine-reliability {
  text-align: left;
}

/* --- 18. Search button: flush to left side in RTL --- */
[dir="rtl"] #send_search {
  border-radius: 0 !important;
}

/* --- 19. Autocomplete dropdown: flip corner radius --- */
[dir="rtl"] .autocomplete {
  border-radius: 0 0 16px 16px !important;
}

/* --- 20. Suggestions input: logical text alignment --- */
[dir="rtl"] #suggestions input,
[dir="rtl"] #infoboxes input {
  text-align: right;
}

/* --- 21. Category checkbox SVG icon: flip padding side --- */
[dir="rtl"] .category_checkbox label svg,
[dir="rtl"] button.category_button svg {
  padding-right: 0;
  padding-inline-end: 0.2rem;
}

/* --- 22. Search view (results page): flip padding --- */
[dir="rtl"] #search_view {
  padding: 0.5rem 0 0 2.8rem;
}

[dir="rtl"] body.results_endpoint #search_view {
  padding: 0.5rem 0 0 2.8rem;
}

/* =====================================================================
   ACCESSIBILITY — Focus States & Keyboard Navigation
   YonSe Design System
   ===================================================================== */

/* --- Skip Navigation Link ---
   Visually hidden until focused; lets keyboard users jump past nav.       */
.skip-nav {
  position: absolute;
  top: -100%;
  left: 1rem;
  z-index: 100000;
  padding: 0.75rem 1.5rem;
  background: #a78bfa;
  color: #08080c;
  font-family: 'Outfit', sans-serif;
  font-weight: 500;
  font-size: 0.9rem;
  border-radius: 0 0 10px 10px;
  text-decoration: none;
  transition: top 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.skip-nav:focus {
  top: 0;
  outline: none;
}

/* --- Global Focus Ring ---
   Uses :focus-visible so rings appear ONLY during keyboard navigation.
   The ring is an accent-colored outline+shadow so it respects border-radius. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
summary:focus-visible {
  outline: 2px solid #a78bfa !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px rgba(167, 139, 250, 0.25) !important;
  transition: outline-color 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Remove the ring on mouse/pointer focus — keeps UI clean for clickers */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
input:focus:not(:focus-visible),
select:focus:not(:focus-visible),
textarea:focus:not(:focus-visible),
[tabindex]:focus:not(:focus-visible),
summary:focus:not(:focus-visible) {
  outline: none !important;
  box-shadow: none !important;
}

/* --- Search Input (#q) ---
   Upstream strips outline. The parent search_box glows on focus-within,
   so suppress the redundant ring on the input itself.                     */
#q:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

/* Reinforce the search_box glow when focused */
.search_box:focus-within {
  border-color: rgba(167, 139, 250, 0.4) !important;
  box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.15),
              0 4px 24px rgba(167, 139, 250, 0.12) !important;
}

/* --- Search Button (#send_search) --- */
#send_search:focus-visible {
  outline: 2px solid #f0efe6 !important;
  outline-offset: -2px !important;
  box-shadow: 0 0 0 4px rgba(167, 139, 250, 0.3) !important;
}

/* --- Clear Button (#clear_search) --- */
#clear_search:focus-visible {
  outline: 2px solid #a78bfa !important;
  outline-offset: 2px !important;
}

/* --- Category Pills (checkbox labels & buttons) --- */
.category_checkbox input:focus-visible + label {
  outline: 2px solid #a78bfa !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px rgba(167, 139, 250, 0.2) !important;
  color: #f0efe6 !important;
}

button.category_button:focus-visible {
  outline: 2px solid #a78bfa !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px rgba(167, 139, 250, 0.2) !important;
  color: #f0efe6 !important;
}

/* --- Filter Selects (language, time range, safesearch) --- */
.search_filters select:focus-visible {
  outline: 2px solid #a78bfa !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px rgba(167, 139, 250, 0.2) !important;
  color: #f0efe6 !important;
  border-color: #a78bfa !important;
}

/* --- Preferences Page selects/inputs --- */
#main_preferences select:focus-visible,
#main_preferences input:focus-visible {
  outline: 2px solid #a78bfa !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.15) !important;
}

/* Preference tab labels */
.tabs > input:focus-visible + label {
  outline: 2px solid #a78bfa !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px rgba(167, 139, 250, 0.2) !important;
}

/* --- Result Cards — Link Focus --- */
.result h3 a:focus-visible {
  outline: 2px solid #a78bfa !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px rgba(167, 139, 250, 0.15) !important;
  border-radius: 4px;
}

/* --- Vim-Mode Selected Result ---
   Ensure the vim-selected background uses the design token.              */
.result[data-vim-selected] {
  background: var(--color-result-vim-selected, rgba(167, 139, 250, 0.05)) !important;
  border-color: rgba(167, 139, 250, 0.2) !important;
}

/* When a link inside a vim-selected result has focus, show a tighter ring */
.result[data-vim-selected] h3 a:focus-visible,
.result[data-vim-selected] a:focus-visible {
  outline: 2px solid #a78bfa !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px rgba(167, 139, 250, 0.2) !important;
  border-radius: 4px;
}

/* --- Pagination --- */
#pagination button:focus-visible,
#pagination input[type="submit"]:focus-visible,
#pagination input[type="button"]:focus-visible {
  outline: 2px solid #a78bfa !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px rgba(167, 139, 250, 0.2) !important;
  color: #a78bfa;
}

/* --- Back To Top --- */
#backToTop a:focus-visible {
  outline: 2px solid #a78bfa !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px rgba(167, 139, 250, 0.2) !important;
  color: #a78bfa;
}

/* --- Top Navigation Links --- */
#links_on_top a:focus-visible {
  outline: 2px solid #a78bfa !important;
  outline-offset: 4px !important;
  color: #a78bfa !important;
}

/* --- Footer Links --- */
footer a:focus-visible {
  outline: 2px solid #a78bfa !important;
  outline-offset: 2px !important;
  color: #a78bfa !important;
}

/* --- Suggestions --- */
#suggestions .suggestion:focus-visible {
  outline: 2px solid #a78bfa !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px rgba(167, 139, 250, 0.2) !important;
  border-color: rgba(167, 139, 250, 0.3) !important;
  color: #a78bfa !important;
}

/* --- Autocomplete Items --- */
.autocomplete li:focus-visible {
  background: #15151f !important;
  outline: 2px solid #a78bfa !important;
  outline-offset: -2px !important;
}

/* --- Image Detail Nav Buttons --- */
#results.image-detail-open article.result-images[data-vim-selected] .detail a.result-detail-close:focus-visible,
#results.image-detail-open article.result-images[data-vim-selected] .detail a.result-detail-previous:focus-visible,
#results.image-detail-open article.result-images[data-vim-selected] .detail a.result-detail-next:focus-visible {
  outline: 2px solid #a78bfa !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px rgba(167, 139, 250, 0.3) !important;
  background: #a78bfa !important;
  color: #08080c !important;
}

/* --- Infobox Links --- */
#infoboxes .infobox a:focus-visible {
  outline: 2px solid #a78bfa !important;
  outline-offset: 2px !important;
}

/* --- Dialog Close Buttons --- */
.dialog-error .close:focus-visible,
.dialog-modal .close:focus-visible {
  outline: 2px solid #a78bfa !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px rgba(167, 139, 250, 0.25) !important;
}

/* --- Checkbox Toggle (on/off switches in preferences) --- */
.onoff input:focus-visible + label,
.checkbox input:focus-visible + label {
  outline: 2px solid #a78bfa !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px rgba(167, 139, 250, 0.2) !important;
}

/* --- ARIA State Styling --- */
[aria-expanded="true"] {
  border-color: rgba(167, 139, 250, 0.3) !important;
}

[aria-current="page"],
[aria-selected="true"] {
  color: #a78bfa !important;
  border-color: #a78bfa !important;
}

/* --- Contrast Fix: Muted Text ---
   Bump #6e6e80 to #8a8a9a for WCAG AA on #08080c background (~4.7:1). */
.result .url_wrapper .url_o1,
.result-images span.source,
.result .engines,
.result .publishdate {
  color: #8a8a9a !important;
}

/* Visited link contrast fix: bump #7c5cbf to #9070d4 (~5.1:1 on dark) */
.result h3 a:visited {
  color: #9070d4 !important;
}

/* --- Reduced Motion: include focus transitions --- */
@media (prefers-reduced-motion: reduce) {
  a:focus-visible,
  button:focus-visible,
  input:focus-visible,
  select:focus-visible,
  textarea:focus-visible,
  [tabindex]:focus-visible {
    transition: none !important;
  }
}

/* ==========================================================================
   THEME SAFETY NET — Force dark regardless of OS preference or theme class
   YonSe Design System is DARK-ONLY. These rules plug gaps where the compiled
   SearXNG CSS gates dark-mode assets behind @media (prefers-color-scheme: dark)
   or theme-specific selectors that do not fire under theme-auto + OS-light
   or theme-light.
   ========================================================================== */

/* --- Select dropdown arrow: always use light arrow for dark background ---
   The compiled CSS only swaps to the dark-bg SVG inside
   @media (prefers-color-scheme: dark) { html.theme-auto select ... }
   When OS is light, theme-auto selects get the dark-arrow-on-light-bg SVG,
   which is invisible on YonSe's dark background. Force it unconditionally. */
html.theme-auto select,
html.theme-light select,
html.theme-dark select,
html.theme-black select {
  background-image: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0A%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22512%22%20height%3D%22512%22%20viewBox%3D%220%200%20512%20512%22%3E%0A%3Cg%3E%3Cpolygon%20fill%3D%22%23ddd%22%20points%3D%22128%2C192%20256%2C320%20384%2C192%22%2F%3E%3C%2Fg%3E%0A%3C%2Fsvg%3E") !important;
}

/* --- Code syntax highlighting: force dark pygments tokens unconditionally ---
   The compiled CSS only applies dark code tokens to theme-auto inside
   @media (prefers-color-scheme: dark), and to theme-dark explicitly.
   theme-light and theme-black are not covered. theme-auto + OS-light is
   not covered. Override the key token colors here for all modes. */
.code-highlight pre {
  line-height: 125%;
  color: #f0efe6;
  background: #15151f;
}

.code-highlight td.linenos .normal,
.code-highlight span.linenos {
  color: #6e6e80;
  background-color: transparent;
}

.code-highlight td.linenos .special,
.code-highlight span.linenos.special {
  color: #c4b5fd;
  background-color: rgba(255, 255, 255, 0.06);
}

/* Pygments dark token palette — override vanilla light tokens */
.code-highlight .hll { background-color: #15151f }
.code-highlight .c { color: #6e6e80; font-style: italic }  /* Comment */
.code-highlight .k { color: #c4b5fd; font-weight: bold }   /* Keyword */
.code-highlight .o { color: #f0efe6 }                       /* Operator */
.code-highlight .cm { color: #6e6e80; font-style: italic }  /* Comment.Multiline */
.code-highlight .cp { color: #a78bfa }                       /* Comment.Preproc */
.code-highlight .c1 { color: #6e6e80; font-style: italic }  /* Comment.Single */
.code-highlight .cs { color: #6e6e80; font-style: italic }  /* Comment.Special */
.code-highlight .gd { color: #f55b5b }                       /* Generic.Deleted */
.code-highlight .gi { color: #79f56e }                       /* Generic.Inserted */
.code-highlight .ge { font-style: italic }                   /* Generic.Emph */
.code-highlight .gs { font-weight: bold }                    /* Generic.Strong */
.code-highlight .kc { color: #c4b5fd; font-weight: bold }   /* Keyword.Constant */
.code-highlight .kd { color: #c4b5fd; font-weight: bold }   /* Keyword.Declaration */
.code-highlight .kn { color: #c4b5fd; font-weight: bold }   /* Keyword.Namespace */
.code-highlight .kp { color: #c4b5fd }                       /* Keyword.Pseudo */
.code-highlight .kr { color: #c4b5fd; font-weight: bold }   /* Keyword.Reserved */
.code-highlight .kt { color: #a78bfa }                       /* Keyword.Type */
.code-highlight .m { color: #a78bfa }                        /* Literal.Number */
.code-highlight .s { color: #79f56e }                        /* Literal.String */
.code-highlight .na { color: #c4b5fd }                       /* Name.Attribute */
.code-highlight .nb { color: #f0efe6 }                       /* Name.Builtin */
.code-highlight .nc { color: #a78bfa; font-weight: bold }   /* Name.Class */
.code-highlight .no { color: #c4b5fd }                       /* Name.Constant */
.code-highlight .nd { color: #a78bfa }                       /* Name.Decorator */
.code-highlight .ni { color: #f0efe6; font-weight: bold }   /* Name.Entity */
.code-highlight .ne { color: #f55b5b }                       /* Name.Exception */
.code-highlight .nf { color: #a78bfa }                       /* Name.Function */
.code-highlight .nl { color: #c4b5fd }                       /* Name.Label */
.code-highlight .nn { color: #c4b5fd }                       /* Name.Namespace */
.code-highlight .nt { color: #c4b5fd; font-weight: bold }   /* Name.Tag */
.code-highlight .nv { color: #f0efe6 }                       /* Name.Variable */
.code-highlight .ow { color: #c4b5fd; font-weight: bold }   /* Operator.Word */
.code-highlight .w { color: #3d3d4e }                        /* Text.Whitespace */
.code-highlight .mb { color: #a78bfa }                       /* Literal.Number.Bin */
.code-highlight .mf { color: #a78bfa }                       /* Literal.Number.Float */
.code-highlight .mh { color: #a78bfa }                       /* Literal.Number.Hex */
.code-highlight .mi { color: #a78bfa }                       /* Literal.Number.Integer */
.code-highlight .mo { color: #a78bfa }                       /* Literal.Number.Oct */
.code-highlight .sa { color: #79f56e }                       /* Literal.String.Affix */
.code-highlight .sb { color: #79f56e }                       /* Literal.String.Backtick */
.code-highlight .sc { color: #79f56e }                       /* Literal.String.Char */
.code-highlight .dl { color: #79f56e }                       /* Literal.String.Delimiter */
.code-highlight .sd { color: #6e6e80; font-style: italic }  /* Literal.String.Doc */
.code-highlight .s2 { color: #79f56e }                       /* Literal.String.Double */
.code-highlight .se { color: #a78bfa }                       /* Literal.String.Escape */
.code-highlight .sh { color: #79f56e }                       /* Literal.String.Heredoc */
.code-highlight .si { color: #a78bfa }                       /* Literal.String.Interpol */
.code-highlight .sx { color: #79f56e }                       /* Literal.String.Other */
.code-highlight .sr { color: #c4b5fd }                       /* Literal.String.Regex */
.code-highlight .s1 { color: #79f56e }                       /* Literal.String.Single */
.code-highlight .ss { color: #c4b5fd }                       /* Literal.String.Symbol */
.code-highlight .bp { color: #6e6e80 }                       /* Name.Builtin.Pseudo */
.code-highlight .fm { color: #a78bfa }                       /* Name.Function.Magic */
.code-highlight .vc { color: #f0efe6 }                       /* Name.Variable.Class */
.code-highlight .vg { color: #f0efe6 }                       /* Name.Variable.Global */
.code-highlight .vi { color: #f0efe6 }                       /* Name.Variable.Instance */
.code-highlight .vm { color: #f0efe6 }                       /* Name.Variable.Magic */
.code-highlight .il { color: #a78bfa }                       /* Literal.Number.Integer.Long */
.code-highlight .err { color: inherit; border: none; background: none }

/* ================================================================
   LESS CONFLICT OVERRIDES
   These rules win specificity battles against compiled search.less
   and index.less that would otherwise break the YonSe design.
   ================================================================ */

/* --- Conflict #1: Tablet breakpoint (79.75em) gap ---
   LESS search.less and index.less emit rules at max-width: 79.75em
   that yonsesearch.css previously did not address.
   The compiled LESS shrinks #categories font-size to 90% and
   resets #search_header padding at this breakpoint.                */

@media screen and (max-width: 79.75em) {
  #search_header {
    padding-bottom: 0.8rem !important;
  }

  #categories {
    font-size: 100% !important;
  }

  /* index.less compiles div.title h1 { font-size: 2.5em } here.
     Keep the homepage title large until the 50em phone breakpoint. */
  .index h1 {
    font-size: 4em !important;
  }
}

/* --- Conflict #2: Harden category pill letter-spacing ---
   LESS compiles letter-spacing: 0.08em; the CSS sets 0.06em
   without !important.  Source order saves us today, but adding
   !important prevents future breakage if load order ever changes. */

.category label,
.category_checkbox label {
  letter-spacing: 0.06em !important;
}

button.category_button {
  letter-spacing: 0.06em !important;
}

/* --- Conflict #3: Phone search overlay full border ---
   LESS search.less compiles:
     #search_view:focus-within .search_box {
       border-bottom: 1px solid var(--color-search-border);
       border-radius: 0; box-shadow: none;
     }
   Our global .search_box rule uses border !important which
   defeats the LESS border-bottom-only intent.  On phones,
   the full-screen overlay needs only a bottom border.         */

@media screen and (max-width: 50em) {
  #search_view:focus-within .search_box {
    border: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    box-shadow: none !important;
  }

  #search_view:focus-within .search_box * {
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }
}

/* =====================================================================
   RESULT TYPES — YonSe Design System Overrides
   The compiled sxng-ltr.min.css was not rebuilt from the updated LESS
   sources, so none of the YonSe result-type styling (font-family,
   backgrounds, borders, colors, radius) is present in the compiled CSS.
   These rules compensate for every missing piece.
   ===================================================================== */

/* === Key-Value Result Type ===
   LESS source: result_types/keyvalue.less
   Compiled CSS only has: caption bg-var, col-key width, table bg-var,
   tr odd/even bg-vars, th/td padding.
   Missing: font-family, text colors, table border/radius, th accent
   color, caption radius/color, col-key label color.                     */

#main_results .result-keyvalue {
  font-family: 'Outfit', sans-serif;
  color: #f0efe6;
}

#main_results .result-keyvalue caption {
  padding: 0.8rem 0.75rem;
  font-style: italic;
  color: #6e6e80;
  font-size: 0.9em;
  background-color: var(--color-result-keyvalue-col-table);
  border-radius: 0 0 10px 10px;
}

#main_results .result-keyvalue .col-key {
  color: #6e6e80;
  font-weight: 500;
}

#main_results .result-keyvalue table {
  word-break: break-all;
  table-layout: fixed;
  width: 100%;
  background-color: var(--color-result-keyvalue-col-table);
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  overflow: hidden;
}

#main_results .result-keyvalue th {
  padding: 0.5rem 0.75rem;
  color: #a78bfa;
  font-weight: 600;
  text-align: left;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

#main_results .result-keyvalue td {
  padding: 0.5rem 0.75rem;
}

/* === Code Highlight Container ===
   LESS source: result_types/code.less  code-highlight-sxng() mixin
   Compiled CSS has ZERO container styling  only token colors exist.
   Missing: background, border, border-radius, padding, base color,
   pre overflow/margin/padding, linenos user-select, .err reset.         */

.code-highlight {
  background: #15151f !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 10px !important;
  padding: 0.75rem 1rem !important;
  color: #f0efe6 !important;
  font-size: 0.85rem;
  overflow: hidden;
}

.code-highlight pre {
  overflow: auto;
  margin: 0;
  padding: 0 0 0.75rem 0;
}

.code-highlight .linenos {
  user-select: none;
  cursor: default;
  margin-right: 8px;
  text-align: right;
}

/* Codelines wrapper  tighten padding vs compiled default (1rem 0 0) */
.codelines {
  padding: 0 !important;
}

/* === File Result Type ===
   LESS source: result_types/file.less
   Compiled CSS only has: border (var), border-radius 10px, margin,
   video aspect-ratio + width + padding, audio width + padding.
   Missing: font-family, background, transition, hover state,
   video bg + margin + radius, audio margin + radius.                    */

#main_results .result-file {
  font-family: 'Outfit', sans-serif;
  background: var(--color-result-background);
  padding: 1rem;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

#main_results .result-file:hover {
  background: #15151f;
  border-color: rgba(255, 255, 255, 0.12);
}

#main_results .result-file video {
  margin-top: 0.75rem;
  border-radius: 10px;
  background: #08080c;
}

#main_results .result-file audio {
  margin-top: 0.75rem;
  border-radius: 10px;
}

/* === Paper / Academic Result Type ===
   LESS source: result_types/paper.less
   Compiled CSS has: attributes table layout, span font-size, min-width,
   comments break-word/margin/padding/italic/line-height.
   Missing: font-family on all elements, attributes bg/border/radius,
   SWAPPED label/value colors (compiled has span:first-child as
   --color-base-font instead of muted), comments bg/border-left/radius/
   color, content line-height.                                           */

.result-paper {
  font-family: 'Outfit', sans-serif;
}

.result-paper .attributes {
  margin-top: 0.5rem;
  padding: 0.6rem 0.75rem;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
}

.result-paper .attributes div span {
  font-family: 'Outfit', sans-serif;
  font-size: 0.85rem;
  letter-spacing: 0.01em;
}

/* Label column  fix the SWAPPED color from compiled CSS
   Compiled: color: var(--color-base-font)  should be muted */
.result-paper .attributes div span:first-child {
  color: #6e6e80 !important;
  font-weight: 500;
}

/* Value column  fix the SWAPPED color from compiled CSS
   Compiled: color: var(--color-result-publishdate-font)  should be text */
.result-paper .attributes div span:nth-child(2) {
  color: #f0efe6 !important;
}

.result-paper .attributes div span time {
  font-size: 0.85rem;
  color: #6e6e80;
}

.result-paper .content {
  margin-top: 0.5rem;
  font-size: 0.9rem;
  line-height: 1.5;
  color: #f0efe6;
}

.result-paper .comments {
  font-family: 'Outfit', sans-serif;
  font-size: 0.85rem;
  margin: 0.5rem 0 0 0;
  padding: 0.5rem 0.75rem;
  overflow-wrap: break-word;
  line-height: 1.45;
  font-style: italic;
  color: #6e6e80;
  background: rgba(255, 255, 255, 0.02);
  border-left: 2px solid #a78bfa;
  border-radius: 6px;
}

/* Paper attributes  mobile stacked layout */
@media screen and (max-width: 50em) {
  .result-paper .attributes {
    padding: 0.5rem 0.6rem;
  }

  .result-paper .attributes div span:first-child {
    font-weight: 600;
  }
}

/* ================================================================
   RSS FEED PAGE
   Note: RSS styling is handled via inline <style> in rss.xsl because
   the RSS page shares bare element selectors (html, body, article, h3)
   that would conflict with the main search page layout if placed here.
   ================================================================ */

/* ================================================================
   AGENT-COMPILED FIXES — Result Types, Sidebar, Preferences, etc.
   ================================================================ */

/* === Category SVG Icon Fix (base CSS hides them) === */
.category svg,
.category_checkbox label svg,
button.category_button svg {
  display: inline !important;
  width: 1em;
  height: 1em;
  flex-shrink: 0;
}
.category_checkbox input { display: none; }
.category_checkbox label,
.category label {
  display: inline-flex !important;
  align-items: center;
  gap: 0.35em;
  background: transparent;
}
button.category_button {
  display: inline-flex !important;
  align-items: center;
  gap: 0.35em;
}

/* === Autocomplete: Search box radius fix === */
.search_box { position: relative; }
.search_box:has(.autocomplete.open) {
  border-radius: 16px 16px 0 0 !important;
  border-bottom-color: transparent !important;
}
.autocomplete { width: 100% !important; max-width: 100% !important; left: 0; top: 100%; }
.autocomplete li.no-item-found {
  color: #6e6e80; cursor: default; font-style: italic;
  border-left: none !important; text-align: center; padding: 1rem 1.2rem;
}
.autocomplete li.no-item-found:hover { background: transparent !important; }

/* === Default Result Card: Missing Elements === */
.result .url_wrapper .url_o2 { color: #3d3d4e; font-size: 0.8rem; }
.result .published_date, .result .result_length, .result .result_views, .result .result_author {
  font-family: 'Outfit', sans-serif; font-size: 0.8em; color: #6e6e80;
}
.result .engines { font-family: 'Outfit', sans-serif; color: #6e6e80; }
.result .engines span { font-size: 0.75rem; color: #3d3d4e; }
.result .cache_link, .result .proxyfied_link {
  font-family: 'Outfit', sans-serif; color: #3d3d4e;
  transition: color 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.result .cache_link:hover, .result .proxyfied_link:hover { color: #a78bfa; }
.result .altlink a {
  font-family: 'Outfit', sans-serif; font-size: 0.85rem;
  background: #15151f; color: #f0efe6;
  border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 10px;
  padding: 6px 14px; transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.result .altlink a:hover { background: #a78bfa; color: #08080c; border-color: #a78bfa; }
.result a.thumbnail_link img.thumbnail {
  border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.06);
  transition: border-color 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.result a.thumbnail_link:hover img.thumbnail { border-color: rgba(255, 255, 255, 0.12); }
.result .embedded-content iframe, .result .audio-control audio {
  border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.06); background: #08080c;
}

/* === Video Results === */
.result-videos a.thumbnail_link {
  border-radius: 10px; overflow: hidden; display: block; position: relative;
}
.result-videos a.thumbnail_link img.thumbnail {
  border-radius: 10px; display: block; object-fit: cover;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.result-videos a.thumbnail_link:hover img.thumbnail { transform: scale(1.03); }
.result-videos a.thumbnail_link .thumbnail_length {
  background: rgba(8, 8, 12, 0.75); backdrop-filter: blur(8px);
  color: #f0efe6; font-family: 'Outfit', sans-serif; font-size: 0.75rem;
  padding: 0.2rem 0.5rem; border-radius: 6px;
  position: absolute; bottom: 6px; right: 6px;
}
.result-videos .altlink a {
  border-radius: 100px !important; padding: 6px 16px !important;
}
.result-videos .embedded-video { border-radius: 10px; overflow: hidden; }
.result-videos .embedded-video iframe { border-radius: 10px; border: none; }

/* === Map Results === */
.result-map table { border-collapse: separate; border-spacing: 0 0.35rem; font-size: 0.9em; }
.result-map table th {
  color: #6e6e80; font-weight: 400; font-family: 'Outfit', sans-serif;
  vertical-align: top; text-align: left; padding: 0.25rem 1rem 0.25rem 0;
}
.result-map table td { color: #f0efe6; vertical-align: top; padding: 0.25rem 0; }
.result-map table td a.text-info { color: #c4b5fd !important; text-decoration: none; }
.result-map table td a.text-info:hover { color: #a78bfa !important; }
a.btn-collapse {
  display: inline-flex; align-items: center; gap: 0.4em;
  font-family: 'Outfit', sans-serif; font-size: 0.8rem; color: #6e6e80 !important;
  border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 100px;
  padding: 6px 16px; margin-top: 0.5rem; text-decoration: none; cursor: pointer;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
a.btn-collapse:hover { color: #f0efe6 !important; border-color: rgba(255, 255, 255, 0.15); background: #15151f; }
.osm-map-box {
  border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.06); overflow: hidden;
  --ol-background-color: #15151f; --ol-foreground-color: #f0efe6;
  --ol-subtle-foreground-color: #6e6e80; --ol-brand-color: #a78bfa;
  --ol-partial-background-color: rgba(15, 15, 22, 0.75);
}
.osm-map-box .ol-control button {
  background-color: #15151f; color: #f0efe6;
  border-radius: 6px; border: 1px solid rgba(255, 255, 255, 0.06);
}
.osm-map-box .ol-control button:hover { background-color: #1e1e2a; color: #a78bfa; }

/* === Product Results === */
.result-products a.thumbnail_link img.thumbnail {
  border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.06);
  object-fit: contain; background: #15151f;
}
.result-products .result_price {
  color: #a78bfa; font-family: 'Outfit', sans-serif; font-size: 1.3em; font-weight: 500;
}
.result-products .result_shipping, .result-products .result_source_country {
  display: inline-block; color: #6e6e80; font-family: 'Outfit', sans-serif; font-size: 0.78rem;
  background: #15151f; border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 100px; padding: 2px 10px; margin: 0.2rem 0.4rem 0.2rem 0;
}

/* === Package Results === */
.result-packages .attributes {
  background: #15151f; border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 16px; padding: 1rem 1.2rem; margin-top: 0.8rem;
  display: flex; flex-direction: column; gap: 0.5rem;
}
.result-packages .attributes div { display: flex; align-items: baseline; gap: 0.6rem; }
.result-packages .attributes div span:first-child {
  color: #6e6e80; font-size: 0.85rem; min-width: 7rem; flex-shrink: 0;
}
.result-packages .attributes div span:nth-child(2) { color: #f0efe6; font-size: 0.9rem; }
.result-packages .result_package_name code {
  font-size: 0.85rem; background: #0f0f16; color: #c4b5fd;
  padding: 0.15em 0.5em; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.06);
}
.result-packages .result_version strong { color: #a78bfa; font-weight: 500; }
.result-packages .result_license a, .result-packages .result_project span:nth-child(2) a {
  color: #c4b5fd !important; text-decoration: none;
}

/* === Torrent Results === */
.result-torrent .stat {
  display: flex; align-items: center; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.4rem !important;
}
.result-torrent .badge {
  border-radius: 8px; padding: 2px 8px; font-family: 'Outfit', sans-serif; font-size: 0.8rem;
}
.result-torrent .stat .badge:first-of-type { background: rgba(121, 245, 110, 0.15); color: #79f56e; }
.result-torrent .stat .ionicon:first-of-type { color: #79f56e; }
.result-torrent .stat .badge:nth-of-type(2) { background: rgba(245, 91, 91, 0.15); color: #f55b5b; }
.result-torrent .stat .ionicon:nth-of-type(2) { color: #f55b5b; }
.result-torrent .stat:last-of-type .badge { background: #15151f; color: #f0efe6; }
.result-torrent .altlink a {
  border-radius: 10px !important; padding: 6px 14px !important;
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.result-torrent .altlink a.magnetlink .ionicon { color: #a78bfa; }

/* === Infobox Expanded === */
#infoboxes .infobox { padding: 1.2rem !important; font-family: 'Outfit', sans-serif; }
#infoboxes .infobox h2 { font-family: 'Instrument Serif', serif; font-weight: 400; letter-spacing: -0.02em; }
#infoboxes .infobox img { border-radius: 10px; margin-bottom: 0.8em; }
#infoboxes .infobox p { font-weight: 300; line-height: 1.6; }
#infoboxes .infobox .attributes dt { color: #6e6e80; font-weight: 400; }
#infoboxes .infobox .urls { border-top: 1px solid rgba(255, 255, 255, 0.06); margin-top: 0.8em; padding-top: 0.8em; }
#infoboxes .infobox .url a { color: #c4b5fd !important; transition: color 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
#infoboxes .infobox .url a:hover { color: #a78bfa !important; }
#infoboxes .infobox .relatedTopics { border-top: 1px solid rgba(255, 255, 255, 0.06); margin-top: 0.8em; padding-top: 0.8em; }
#infoboxes .infobox .relatedTopics input[type="submit"] {
  font-family: 'Outfit', sans-serif; font-size: 0.8rem; color: #6e6e80;
  background: transparent; border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 100px; padding: 6px 14px; cursor: pointer;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
#infoboxes .infobox .relatedTopics input[type="submit"]:hover {
  color: #a78bfa; border-color: rgba(167, 139, 250, 0.3); background: #15151f;
}

/* === Corrections ("Try searching for:") === */
#corrections {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem;
  margin: 0 0 1rem; padding: 0.75rem 1rem;
  background: #0f0f16; border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 16px;
}
#corrections h4 { font-family: 'Outfit', sans-serif; font-size: 0.85rem; font-weight: 400; color: #6e6e80; margin: 0; }
#corrections input[type="submit"] {
  font-family: 'Outfit', sans-serif; font-size: 0.8rem; color: #c4b5fd !important;
  background: transparent !important; border: 1px solid rgba(167, 139, 250, 0.2) !important;
  border-radius: 100px !important; padding: 8px 18px !important; cursor: pointer;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
#corrections input[type="submit"]:hover {
  background: #15151f !important; border-color: rgba(167, 139, 250, 0.4) !important; color: #a78bfa !important;
}

/* === Sidebar Container === */
#sidebar { background: #0f0f16; border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 16px; padding: 1.2rem; font-family: 'Outfit', sans-serif; }
#result_count { font-family: 'Outfit', sans-serif; font-size: 0.75rem; color: #6e6e80; margin: 0 0 0.5rem; }
#result_count small { font-size: inherit; }
.sidebar-collapsible { border-top: 1px solid rgba(255, 255, 255, 0.06) !important; padding-bottom: 0.75rem; }
.sidebar-collapsible > summary.title {
  font-family: 'Outfit', sans-serif; font-size: 0.75rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.08em; color: #6e6e80;
  background: transparent !important; padding: 0.8rem 0 0.5rem; cursor: pointer;
  list-style: none; transition: color 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.sidebar-collapsible > summary.title:hover { color: #f0efe6; }
.sidebar-collapsible > summary.title::-webkit-details-marker { display: none; }
.sidebar-collapsible > summary.title::marker { content: ''; }
#sidebar-end-collapsible { border-bottom: none !important; display: none; }

/* Sidebar: Engine Stats */
.engine-stats { width: 100%; border-spacing: 0; border-collapse: collapse; }
.engine-stats tr td { border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important; padding: 0.4rem 0.25rem; font-size: 0.85rem; }
.engine-stats tr:last-child td { border-bottom: none !important; }
.engine-stats .engine-name a { color: #c4b5fd !important; text-decoration: none; font-weight: 400; }
.engine-stats .engine-name a:hover { color: #a78bfa !important; }
.engine-stats .response-error { color: #f55b5b !important; font-size: 0.8rem; }

/* Sidebar: Search URL */
.selectable_url {
  background: #15151f !important; border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 10px !important; padding: 0.6rem !important; height: auto !important; overflow-x: auto;
}
.selectable_url pre { font-size: 0.75rem !important; color: #6e6e80; word-break: break-all; white-space: pre-wrap; margin: 0 !important; }
#search_url button#copy_url {
  font-family: 'Outfit', sans-serif; font-size: 0.75rem;
  background: #15151f !important; color: #f0efe6 !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important; border-radius: 10px !important;
  padding: 0.35rem 0.75rem !important; cursor: pointer;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
#search_url button#copy_url:hover { background: #a78bfa !important; color: #08080c !important; }

/* Sidebar: API Format Links */
#apis .wrapper { display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 0.25rem 0; }
#apis input[type="submit"] {
  font-family: 'Outfit', sans-serif !important; font-size: 0.8rem !important;
  text-transform: uppercase; letter-spacing: 0.06em;
  background: #15151f !important; color: #f0efe6 !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important; border-radius: 10px !important;
  padding: 0.4rem 0.9rem !important; cursor: pointer;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
#apis input[type="submit"]:hover { background: #a78bfa !important; color: #08080c !important; }

/* === Dialog / Modal System === */
.dialog-modal {
  background: #0f0f16 !important; border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 16px; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5); z-index: 5000;
  font-family: 'Outfit', sans-serif;
  animation: yonse-dialogIn 0.25s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.dialog-modal::backdrop {
  background: rgba(8, 8, 12, 0.7); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  animation: yonse-backdropIn 0.3s cubic-bezier(0.4, 0, 0.2, 1) both;
}
@keyframes yonse-dialogIn {
  from { opacity: 0; transform: translate(-50%, -50%) scale(0.95); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@keyframes yonse-backdropIn { from { opacity: 0; } to { opacity: 1; } }
.dialog-error .close, .dialog-warning .close, .dialog-modal .close {
  color: inherit; opacity: 0.6; cursor: pointer; border-radius: 8px;
  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.dialog-error .close:hover, .dialog-warning .close:hover, .dialog-modal .close:hover { opacity: 1; }

/* === Toolkit: Badges, Kbd, Engine Tooltip === */
.badge {
  font-family: 'Outfit', sans-serif; font-size: 0.75rem; font-weight: 600;
  letter-spacing: 0.02em; padding: 2px 8px; border-radius: 100px;
}
kbd {
  font-family: 'Outfit', sans-serif; font-size: 0.8rem; padding: 2px 6px;
  border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 6px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.engine-tooltip {
  font-family: 'Outfit', sans-serif; backdrop-filter: blur(12px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3); border-radius: 10px;
}
input.checkbox-onoff[type="checkbox"] { transition: background 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
input.checkbox-onoff[type="checkbox"]::before { transition: left 0.3s cubic-bezier(0.16, 1, 0.3, 1); }

/* === Embedded Content (iframes) === */
.embedded-content iframe, .embedded-video iframe {
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 10px !important; background: #0f0f16 !important;
  transition: border-color 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.embedded-content iframe:hover, .embedded-video iframe:hover {
  border-color: rgba(167, 139, 250, 0.25) !important;
}

/* === Weather Widget === */
#answers .weather { font-family: 'Outfit', sans-serif; }
#answers .weather div.summary {
  border-radius: 10px !important; border: 1px solid rgba(255, 255, 255, 0.06);
  transition: background 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
#answers .weather table { font-size: 0.85rem; }
#answers .weather td { padding: 0.35rem 0.6rem; }
#answers .weather .title { color: #6e6e80; font-weight: 500; }
#answers .weather img.symbol {
  width: 4.5rem; filter: drop-shadow(0 2px 8px rgba(167, 139, 250, 0.12));
}
#answers .weather .weather-forecast {
  margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid rgba(255, 255, 255, 0.06);
}

/* === InfiniteScroll Plugin Fixes === */
#urls > hr { border: none; border-top: 1px solid rgba(255, 255, 255, 0.06); margin: 1.5rem 0; }
#pagination .dialog-error { border-radius: 16px !important; font-family: 'Outfit', sans-serif; padding: 1rem 1.2rem !important; }

/* === Preferences Page (comprehensive) === */
#main_preferences fieldset { border: none; border-bottom: 1px solid rgba(255, 255, 255, 0.06); border-radius: 0; padding: 0.8rem 0; }
#main_preferences legend { font-family: 'Outfit', sans-serif; font-weight: 400; color: #f0efe6; font-size: 0.95rem; }
#main_preferences .description { color: #6e6e80; font-size: 0.85rem; line-height: 1.5; }
#main_preferences select {
  font-family: 'Outfit', sans-serif; font-size: 0.9rem; color: #f0efe6 !important;
  background: #15151f !important; border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 10px !important; padding: 0.4rem 2rem 0.4rem 0.6rem;
  transition: border-color 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
#main_preferences select:hover, #main_preferences select:focus {
  background-color: #1e1e2a !important; border-color: rgba(255, 255, 255, 0.12) !important; outline: none;
}
#main_preferences select option { background: #15151f; color: #f0efe6; }
#main_preferences input[type="text"] {
  font-family: 'Outfit', sans-serif; color: #f0efe6 !important;
  background: #15151f !important; border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 10px !important; padding: 0.4rem 0.6rem;
}
#main_preferences input[type="text"]:focus {
  background-color: #1e1e2a !important; border-color: rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 0 0 2px rgba(167, 139, 250, 0.15); outline: none;
}
#main_preferences .checkbox-onoff[type="checkbox"]:checked:before { background: #a78bfa !important; color: #08080c !important; }
#main_preferences .checkbox-onoff[type="checkbox"]:before { background: #6e6e80 !important; color: #08080c !important; }
#main_preferences table.table_engines { width: 100%; border-collapse: collapse; font-family: 'Outfit', sans-serif; font-size: 0.85rem; }
#main_preferences table.table_engines tr:first-child th {
  font-weight: 500; color: #6e6e80; text-transform: uppercase; letter-spacing: 0.05em;
  font-size: 0.75rem; padding: 0.6rem 0.5rem; border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
#main_preferences table.table_engines td, #main_preferences table.table_engines th { padding: 0.5rem; color: #f0efe6; }
#main_preferences table.striped tr { border-bottom: 1px solid rgba(255, 255, 255, 0.04); transition: background-color 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
#main_preferences table.striped tr:hover { background: #15151f !important; }
#main_preferences table.table_engines tr.pref-group th { background: #0a0a10 !important; color: #6e6e80; text-transform: uppercase; }
#main_preferences .bang { background: #15151f; color: #c4b5fd; border: none; border-radius: 6px; padding: 0.15rem 0.4rem; font-size: 0.8rem; }
#main_preferences input[type="submit"] {
  font-family: 'Outfit', sans-serif; font-weight: 500; color: #08080c !important;
  background: #a78bfa !important; border: none !important; border-radius: 100px !important;
  padding: 0.7rem 2.5rem; cursor: pointer;
  transition: background-color 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
#main_preferences input[type="submit"]:hover { background: #c4b5fd !important; }
#main_preferences .preferences_back a { color: #f0efe6 !important; transition: color 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
#main_preferences .preferences_back a:hover { color: #a78bfa !important; }
#main_preferences .selectable_url pre { color: #c4b5fd; font-size: 0.8rem; word-break: break-all; white-space: pre-wrap; user-select: all; }
#main_preferences #copy-hash {
  font-family: 'Outfit', sans-serif; color: #08080c !important;
  background: #a78bfa !important; border: none !important; border-radius: 10px !important;
  padding: 0.5rem 1rem; cursor: pointer;
}
#main_preferences #copy-hash:hover { background: #c4b5fd !important; }
#main_preferences td.success { color: #79f56e; }
#main_preferences td.warning { color: #f1d561; }
#main_preferences td.danger { color: #f55b5b; }

/* === Search Filters — Expanded === */
.search_filters select {
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  height: auto !important; cursor: pointer; outline: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='512' height='512' viewBox='0 0 512 512'%3E%3Cpath fill='%236e6e80' d='m128 192 128 128 128-128z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important; background-position: right 10px center !important; background-size: 12px !important;
}
.search_filters select:focus-visible {
  border-color: rgba(167, 139, 250, 0.4) !important; box-shadow: 0 0 0 2px rgba(167, 139, 250, 0.15);
}
.search_filters select option { background: #15151f; color: #f0efe6; }

/* === Search Header: Logo sizing === */
#search_logo svg { width: 36px; height: 36px; }

/* === Global select option fix === */
select option { background-color: #15151f; color: #f0efe6; font-family: 'Outfit', sans-serif; }
select:focus { outline: none; border-color: #a78bfa !important; box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.15); }

/* === Info page list marker fix === */
.info-page li::marker { color: #6e6e80; }
.info-page h3 { font-family: 'Outfit', sans-serif; font-weight: 600; }
.info-page table { border-radius: 10px; overflow: hidden; }

/* === Bar chart solid fills (not faint) === */
.bar-chart-bar { background: #a78bfa; border: none; border-radius: 3px; box-shadow: 0 0 8px rgba(167, 139, 250, 0.15); }
.bar-chart-serie1 { background: #a78bfa; border: none; border-radius: 3px; }
.bar-chart-serie2 { background: #c4b5fd; border: none; border-radius: 3px; }

/* === Mobile sidebar card treatment === */
@media screen and (max-width: 50em) {
  #sidebar { background: transparent; border: none; border-radius: 0; padding: 0 0.5rem; }
  .sidebar-collapsible { background: #0f0f16; border: 1px solid rgba(255, 255, 255, 0.06) !important; border-radius: 10px; padding: 0.75rem 1rem; margin-bottom: 0.5rem; }
  .result-packages .attributes { padding: 0.8rem 1rem; }
  .result-packages .attributes div { flex-direction: column; gap: 0.15rem; }
  .result-packages .attributes div span:first-child { min-width: unset; }
  #search_view:focus-within .autocomplete.open { border-radius: 0 !important; box-shadow: none !important; }
}

/* ================================================================
   PRINT STYLES
   Reset YonSe dark theme to light for readable printouts.
   Hides decorative/interactive UI; shows results cleanly.
   ================================================================ */
@media print {

  /* --- Override CSS custom properties to light palette --- */
  :root,
  :root.theme-auto,
  :root.theme-dark,
  :root.theme-black {
    --color-base-font: #1a1a1a;
    --color-base-font-rgb: 26, 26, 26;
    --color-base-background: #ffffff;
    --color-base-background-mobile: #ffffff;
    --color-url-font: #1a0dab;
    --color-url-visited-font: #681da8;
    --color-header-background: #ffffff;
    --color-header-border: #d0d0d0;
    --color-footer-background: #ffffff;
    --color-footer-border: #d0d0d0;
    --color-sidebar-border: #d0d0d0;
    --color-sidebar-font: #1a1a1a;
    --color-sidebar-background: #ffffff;
    --color-result-background: #ffffff;
    --color-result-border: #d0d0d0;
    --color-result-url-font: #006621;
    --color-result-link-font: #1a0dab;
    --color-result-link-font-highlight: #1a0dab;
    --color-result-link-visited-font: #681da8;
    --color-result-description-highlight-font: #1a1a1a;
    --color-result-publishdate-font: #70757a;
    --color-result-engines-font: #70757a;
    --color-search-background: #ffffff;
    --color-search-font: #1a1a1a;
    --color-search-border: #d0d0d0;
    --color-autocomplete-background: #ffffff;
    --color-autocomplete-font: #1a1a1a;
    --color-answer-font: #1a1a1a;
    --color-answer-background: #f5f5f5;
  }

  /* --- White background, black text on html/body --- */
  html, body {
    background: #ffffff !important;
    color: #1a1a1a !important;
  }

  /* --- Hide decorative overlays (film grain + cursor glow) --- */
  body::after {
    display: none !important;
  }

  #cursor-glow {
    display: none !important;
  }

  /* --- Hide navigation, footer, and interactive UI --- */
  #links_on_top,
  footer,
  #backToTop,
  #send_search,
  #clear_search,
  .search_filters,
  .search_categories,
  #categories_container,
  .autocomplete,
  #suggestions,
  #pagination,
  .skip-nav,
  .dialog-warning-block,
  .alert.alert-info {
    display: none !important;
  }

  /* --- Search header: minimal, no effects --- */
  #search_header {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-bottom: 1px solid #d0d0d0 !important;
    box-shadow: none !important;
    padding: 0.5rem 0 !important;
  }

  .search_box {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    border-radius: 0 !important;
  }

  #q {
    color: #1a1a1a !important;
    font-size: 1.1rem;
    font-weight: 500;
  }

  /* --- Results: clean list on white --- */
  .result {
    background: #ffffff !important;
    border: none !important;
    border-bottom: 1px solid #e0e0e0 !important;
    border-left: none !important;
    border-right: none !important;
    border-radius: 0 !important;
    padding: 0.8rem 0 !important;
    margin-bottom: 0 !important;
    page-break-inside: avoid;
  }

  .result:hover {
    background: #ffffff !important;
    border-color: #e0e0e0 !important;
  }

  .result h3 a,
  .result h3 a:visited {
    color: #1a0dab !important;
    text-decoration: underline;
  }

  .result .url_wrapper .url_o1 {
    color: #006621 !important;
  }

  .result .content {
    color: #4d5156 !important;
  }

  /* --- General links --- */
  a { color: #1a0dab !important; }
  a:visited { color: #681da8 !important; }

  /* --- Infobox --- */
  #infoboxes .infobox {
    background: #f5f5f5 !important;
    border: 1px solid #d0d0d0 !important;
    color: #1a1a1a !important;
  }

  /* --- Answers --- */
  #answers {
    background: #f5f5f5 !important;
    border: 1px solid #d0d0d0 !important;
    color: #1a1a1a !important;
  }

  /* --- Info pages (about, etc.) --- */
  .info-page,
  .info-page h1, .info-page h2, .info-page h3,
  .info-page p, .info-page li, .info-page td, .info-page th {
    color: #1a1a1a !important;
  }

  .info-page a { color: #1a0dab !important; }

  .info-page code {
    background: #f0f0f0 !important;
    color: #333333 !important;
    border-color: #cccccc !important;
  }

  .info-page pre {
    background: #f0f0f0 !important;
    border-color: #cccccc !important;
  }

  .info-page blockquote {
    border-left-color: #999999 !important;
    background: #f5f5f5 !important;
    color: #555555 !important;
  }

  .info-page blockquote p {
    color: #555555 !important;
  }

  .info-page hr {
    border-top-color: #d0d0d0 !important;
  }

  /* --- Logo: dark for contrast on paper --- */
  #search_logo svg,
  #search_logo svg path,
  #search_logo svg circle,
  #search_logo svg line,
  #search_logo svg rect {
    fill: #1a1a1a !important;
    stroke: #1a1a1a !important;
  }

  #search_logo svg text {
    fill: #1a1a1a !important;
  }

  /* --- Image results: no hover transforms --- */
  .result-images {
    background: #f5f5f5 !important;
    box-shadow: none !important;
  }

  .result-images:hover {
    transform: none !important;
    box-shadow: none !important;
  }

  .result-images span.title { color: #1a1a1a !important; }
  .result-images span.source { color: #70757a !important; }

  /* --- Error/dialog boxes --- */
  .dialog-error {
    background: #fff5f5 !important;
    border-color: #cc0000 !important;
    color: #1a1a1a !important;
  }

  .dialog-error-block {
    background: #f5f5f5 !important;
    border-color: #d0d0d0 !important;
    color: #1a1a1a !important;
  }

  .dialog-error-block strong { color: #1a1a1a !important; }
  .dialog-error-block > p { color: #555555 !important; }
  .dialog-error-block ul li { color: #555555 !important; }
  .dialog-error-block ul li::before { color: #999999 !important; }

  /* --- Engine stats page --- */
  .engine-stats {
    background: #ffffff !important;
    border-color: #d0d0d0 !important;
  }

  .engine-stats tr:first-child th {
    background: #f5f5f5 !important;
    color: #555555 !important;
    border-bottom-color: #d0d0d0 !important;
  }

  .engine-stats tr:first-child th a { color: #555555 !important; }

  .engine-stats tr td {
    color: #1a1a1a !important;
    border-bottom-color: #e0e0e0 !important;
  }

  .engine-stats tr:nth-child(even) td { background: #fafafa !important; }
  .engine-stats tr:nth-child(odd) td { background: #ffffff !important; }
  .engine-stats tr:hover td { background: inherit !important; }

  .engine-stats .engine-name a { color: #1a0dab !important; }

  table.engine-error {
    background: #ffffff !important;
    border-color: #d0d0d0 !important;
  }

  table.engine-error tr th,
  table.engine-error tr td {
    color: #1a1a1a !important;
    border-bottom-color: #e0e0e0 !important;
  }

  #main_stats h1, #main_stats h2 { color: #1a1a1a !important; }
  #main_stats h1 a { color: #1a0dab !important; }

  /* --- Code blocks: light background for print --- */
  .code-highlight {
    background: #f0f0f0 !important;
    border-color: #cccccc !important;
    color: #1a1a1a !important;
  }

  .code-highlight pre {
    background: #f0f0f0 !important;
    color: #1a1a1a !important;
  }

  .code-highlight .c, .code-highlight .cm,
  .code-highlight .c1, .code-highlight .cs,
  .code-highlight .sd { color: #6a737d !important; }

  .code-highlight .k, .code-highlight .kc, .code-highlight .kd,
  .code-highlight .kn, .code-highlight .kr, .code-highlight .ow {
    color: #d73a49 !important;
  }

  .code-highlight .s, .code-highlight .s1, .code-highlight .s2,
  .code-highlight .sb, .code-highlight .sc, .code-highlight .sh,
  .code-highlight .sx, .code-highlight .sa, .code-highlight .dl {
    color: #032f62 !important;
  }

  .code-highlight .m, .code-highlight .mb, .code-highlight .mf,
  .code-highlight .mh, .code-highlight .mi, .code-highlight .mo,
  .code-highlight .il { color: #005cc5 !important; }

  .code-highlight .nc, .code-highlight .nd, .code-highlight .nf,
  .code-highlight .fm, .code-highlight .kt {
    color: #6f42c1 !important;
  }

  .code-highlight .na, .code-highlight .nl, .code-highlight .nn,
  .code-highlight .no, .code-highlight .nt, .code-highlight .ss,
  .code-highlight .sr, .code-highlight .kp {
    color: #22863a !important;
  }

  /* --- Result types: key-value, paper, file --- */
  #main_results .result-keyvalue,
  #main_results .result-keyvalue table,
  #main_results .result-keyvalue td {
    color: #1a1a1a !important;
    background: #ffffff !important;
    border-color: #d0d0d0 !important;
  }

  #main_results .result-keyvalue th { color: #333333 !important; }
  #main_results .result-keyvalue .col-key { color: #555555 !important; }
  #main_results .result-keyvalue caption { color: #70757a !important; background: #f5f5f5 !important; }

  .result-paper .attributes {
    background: #f5f5f5 !important;
    border-color: #d0d0d0 !important;
  }

  .result-paper .attributes div span:first-child { color: #555555 !important; }
  .result-paper .attributes div span:nth-child(2) { color: #1a1a1a !important; }
  .result-paper .content { color: #4d5156 !important; }

  .result-paper .comments {
    color: #555555 !important;
    background: #f5f5f5 !important;
    border-left-color: #999999 !important;
  }

  #main_results .result-file {
    background: #ffffff !important;
  }

  #main_results .result-file:hover {
    background: #ffffff !important;
  }

  /* --- Preferences page --- */
  select {
    background: #ffffff !important;
    color: #1a1a1a !important;
    border-color: #cccccc !important;
  }

  /* --- Tabs --- */
  ul.tabs { border-bottom-color: #d0d0d0 !important; }

  ul.tabs li a,
  ul.tabs li a.active {
    color: #1a1a1a !important;
    border-bottom-color: transparent !important;
  }

  .tabs > label,
  .tabs > input:checked + label {
    color: #1a1a1a !important;
  }

  /* --- Homepage: force elements visible (they use opacity animation) --- */
  .index h1,
  .index .logo-wrap {
    opacity: 1 !important;
    animation: none !important;
  }

  .index h1 { color: #1a1a1a !important; }

  /* --- Selection highlight: clear for print --- */
  ::selection {
    background: transparent;
    color: inherit;
  }

  /* --- Disable all transitions and animations --- */
  *, *::before, *::after {
    transition: none !important;
    animation: none !important;
  }

  /* --- Hide scrollbar artifacts --- */
  ::-webkit-scrollbar { display: none; }
}