:root {
  --lightmode_text_main: #40404f;
  --darkmode_text_main: #a0bad3;
  --lightmode_background_main: #ffffe6;
  --darkmode_background_main: #11151d;
  --lightmode_input_border: #9dcadc;
  --darkmode_input_border: #447ed0;
}
@font-face {
  font-family: FragmentMono;
  src: url('/assets/fonts/FragmentMono-Regular.woff2') format('woff2');
  font-display: swap;
}
body, .content {
  font-family: FragmentMono, Consolas, 'DejaVu Sans Mono', 'Courier New', monospace;
  font-size: 18px;
  line-height: 1.55;
}
body.light-mode {
  --text: var(--lightmode_text_main);
  --page: var(--lightmode_background_main);
  --card: #ffffe6;
  --frame: var(--lightmode_input_border);
  --metadata: #7a7768;
  --input: #fff;
  --placeholder: #8a8a8a;
  --link: #0b5ea8;
  --footer: #61563f;
  color-scheme: light;
}
body.dark-mode {
  --text: var(--darkmode_text_main);
  --page: var(--darkmode_background_main);
  --card: #161d28;
  --frame: var(--darkmode_input_border);
  --metadata: #6f8ba6;
  --input: #273747;
  --placeholder: #a0bad3;
  --link: #3aa8ff;
  --footer: #3d3526;
  color-scheme: dark;
}
body { color: var(--text); background: var(--page); }
::-moz-selection { color: #fff; background: #447ed0; -webkit-text-fill-color: #fff; }
::selection { color: #fff; background: #447ed0; -webkit-text-fill-color: #fff; }
h1, h2, h3 { font-weight: bold; }
h1 { font-size: 26px; }
h2 { font-size: 24px; }
h3 { font-size: 22px; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--frame); outline-offset: 2px; }
.content { min-height: calc(100vh - 56px); }
.search-section > .col-md-12 { padding-inline: 28px; }
.search-box {
  border: 4px solid var(--frame);
  background: var(--input);
  color: var(--text);
  font: inherit;
  border-radius: 0;
  margin-bottom: 8px;
  min-height: 52px;
}
.search-box:focus {
  color: var(--text);
  background: var(--input);
  border-color: var(--frame);
  box-shadow: none;
}
.search-box::placeholder { color: var(--placeholder); opacity: 1; }
.search-toolbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  min-height: 30px;
}
.search-summary {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}
.apptype-option {
  flex: 0 0 auto;
  color: var(--text);
  background: none;
  border: 0;
  padding: 2px 0 2px 8px;
  font: inherit;
  font-size: 13px;
  line-height: 1.5;
  white-space: nowrap;
  cursor: pointer;
}
.apptype-option:hover { text-decoration: underline; text-underline-offset: 3px; }
#apptypes-area { margin: 8px 0 0 15px; }
[hidden] { display: none !important; }
.nowrappo { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; padding-block: 4px; }
.nowrappo input { flex-shrink: 0; accent-color: var(--frame); }
.nowrappo label { cursor: pointer; }
.only-filter {
  display: none;
  border: 0;
  border-radius: 0;
  background: #9dcadc;
  color: #1f2b33;
  padding: 2px 7px;
  font: inherit;
  font-size: 11px;
  line-height: 1.35;
  max-width: 100%;
  cursor: pointer;
}
.dark-mode .only-filter { background: #447ed0; color: #fff; }
.nowrappo:hover .only-filter,
.nowrappo:focus-within .only-filter { display: inline-block; }
#result-count { flex: 0 0 auto; font-size: 13px; min-height: 1.5em; margin: 2px 0; }
#result-count.is-loading::after { content: ' █'; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.active-filters {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
}
.filter-tag {
  border: 0;
  border-radius: 0;
  background: #9dcadc;
  color: #1f2b33;
  padding: 2px 7px;
  font: inherit;
  font-size: 12px;
  line-height: 1.35;
  cursor: pointer;
}
.dark-mode .filter-tag { background: #447ed0; color: #fff; }
.filter-tag .tag-remove { margin-left: 4px; }
.reset-filters {
  border: 0;
  background: transparent;
  color: var(--link);
  padding: 2px 0;
  font: inherit;
  font-size: 12px;
  line-height: 1.35;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.box-container { width: 100%; min-height: 220px; height: auto; }
.item { display: flex; width: 100%; min-width: 0; text-decoration: none; color: var(--text); }
.item:hover { color: var(--text); }
.box {
  display: flex;
  border: 5px solid var(--frame);
  background: var(--card);
  transition: transform .08s steps(2), box-shadow .08s steps(2);
}
.box-inside {
  width: 100%;
  min-height: 215px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 10px;
  background: var(--card);
}
.item:hover .box, .item:focus-visible .box {
  box-shadow: 6px 6px 0 var(--frame);
  transform: translate(-2px, -2px);
}
.item:active .box { box-shadow: none; transform: translate(2px, 2px); }
.box-inside .app-info { position: static; margin-top: auto; }
.box-inside .w-100 { min-width: 0; }
.box-inside img[width="50"] { max-width: none; object-fit: contain; }
.item-title { font-size: 20px; overflow-wrap: anywhere; }
.item-desc {
  font-size: 17px;
  line-height: 1.4;
  margin-bottom: 0;
  height: auto;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}
p.item-version { color: var(--metadata); font-size: 13px; margin: 0; overflow-wrap: anywhere; }
#view-more {
  background: #9dcadc;
  color: #1f2b33;
  border: 0;
  border-radius: 0;
  width: 250px;
  max-width: 100%;
  min-height: 44px;
  padding: 8px 16px;
  transition: transform .08s steps(2), box-shadow .08s steps(2);
}
#view-more:hover:not(:disabled) { box-shadow: 4px 4px 0 #6ba3bb; transform: translate(-2px, -2px); }
#view-more:active:not(:disabled) { box-shadow: none; transform: translate(2px, 2px); }
#view-more:disabled { cursor: wait; }
.btn-view-more { font-size: 16px; }
.toggle-mode1, .toggle-mode2 {
  background: transparent;
  border: 0;
  padding: 2px;
  line-height: 0;
  min-width: 44px;
  min-height: 44px;
}
.toggle-mode1 { position: absolute; right: 20px; top: 20px; z-index: 1; }
#icon-mode1, #icon-mode2 { width: 30px; height: 30px; }
.about-section img { max-width: 100%; height: auto; }
.about-section { border-top: 2px solid #d8cfa8; }
.dark-mode .about-section { border-top-color: #243040; }
.about-section a { color: var(--link); text-decoration: underline; text-underline-offset: 4px; }
.about-section a:hover { text-decoration-thickness: 2px; }
.footer { background: var(--footer); color: #e6e6e6; padding-block: 16px; min-height: 120px; }
.footer-content, .footer p, .footer small, .footer a { font-size: 13px; }
.footer-heading { font-size: 16px; }
.footer a { color: #c4dfeb; }
.footer :focus-visible { outline-color: #9dcadc; }
.empty-results { width: 100%; padding: 20px 12px; }
.clear-filters {
  color: var(--link);
  background: transparent;
  border: 0;
  padding: 0;
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 4px;
}
@media (max-width: 576px) {
  #cat { max-width: 62%; height: auto; margin-block: 24px !important; }
  .toggle-mode1 { top: 12px; right: 12px; }
  .row.p-5 { padding: 1.5rem !important; }
  .search-box { font-size: 16px; }
  .search-toolbar { gap: 8px; }
  .search-summary { gap: 5px; }
  .search-section > .col-md-12 { padding-inline: 16px; }
  .results-container { padding-inline: 0; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .item:hover .box, .item:focus-visible .box { transform: none; }
}