/* =========================================================================
   Monerica — Cyber Terminal Theme
   Drop-in CSS replacement. No JS, no markup changes. Keeps all functionality.
   ========================================================================= */

:root {
  /* Palette — IDE-like dark grays, same orange/cyan accents */
  --bg-base: #131313;
  --bg-deep: #0f0f0f;
  --bg-panel: #181818;
  --bg-panel-2: #1c1c1c;
  --bg-card: #1d1d1d;
  --bg-card-2: #222222;
  --bg-overlay: rgba(18, 18, 18, 0.92);
  --bg-overlay-focus: rgba(22, 22, 22, 0.96);

  --fg: #ffffff;
  --fg-muted: rgba(255, 255, 255, 0.72);
  --fg-dim: rgba(255, 255, 255, 0.50);

  --border: rgba(255, 255, 255, 0.10);
  --border-strong: rgba(255, 255, 255, 0.22);
  --border-divider: rgba(255, 255, 255, 0.06);

  /* Accents */
  --orange: #ff6600;
  --orange-bright: #ff8533;
  --orange-soft: rgba(255, 102, 0, 0.16);
  --orange-mid: rgba(255, 102, 0, 0.32);
  --orange-glow: rgba(255, 102, 0, 0.55);
  --orange-neon: 0 0 10px rgba(255, 102, 0, 0.55), 0 0 22px rgba(255, 102, 0, 0.28);

  --cyan: #00d8ff;
  --cyan-hover: #66e8ff;
  --cyan-soft: rgba(0, 216, 255, 0.16);
  --cyan-glow: rgba(0, 216, 255, 0.55);
  --cyan-neon: 0 0 8px rgba(0, 216, 255, 0.50), 0 0 18px rgba(0, 216, 255, 0.25);

  --green: #18ff6d;
  --blue: #2aa8ff;
  --red: #ff4d4d;

  /* Geometry — sharper, more cyber */
  --sidebar-w: 220px;
  --ticker-h: 48px;
  --ticker-speed: 70s;
  --fade-l: 34px;
  --fade-r: 2px;
  --lead-in: 42px;

  --radius-xs: 3px;
  --radius-sm: 5px;
  --radius: 8px;
  --radius-lg: 12px;
  --radius-pill: 999px;

  --ui-h: 32px;
  --ui-input-max: 520px;

  /* Button systems */
  --ui-btn-bg: #0a0a0a;
  --ui-btn-bg2: #141414;
  --ui-btn-border: rgba(255, 255, 255, 0.22);
  --ui-primary-1: #18ff6d;
  --ui-primary-2: #05200f;
  --ui-primary-border: rgba(24, 255, 109, 0.80);
  --ui-primary-border-hover: rgba(24, 255, 109, 0.98);
  --ui-primary-glow: rgba(24, 255, 109, 0.28);
  --ui-info-1: #2aa8ff;
  --ui-info-2: #061a33;
  --ui-info-border: rgba(42, 168, 255, 0.78);
  --ui-info-border-hover: rgba(42, 168, 255, 0.96);
  --ui-info-glow: rgba(42, 168, 255, 0.22);

  --sponsor-accent: #ff6600;

  /* Fonts — mono-forward for cyber feel */
  --font-mono: "JetBrains Mono", "Fira Code", "IBM Plex Mono", "SF Mono", Consolas, Menlo, Monaco, "Courier New", monospace;
  --font-sans: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* =========================================================================
   Reset & base
   ========================================================================= */

*, *::before, *::after { box-sizing: border-box; }

html {
  overflow-y: scroll !important;
  scroll-behavior: smooth;
  height: auto !important;
}

body {
  margin: 0;
  padding: 0;
  max-width: 100%;
  min-height: 100vh;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  position: relative;
  background-color: var(--bg-base);
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.012) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.012) 1px, transparent 1px);
  background-size: 48px 48px, 48px 48px;
  background-position: -1px -1px, -1px -1px;
  background-attachment: fixed;
  color: var(--fg);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Scanline overlay removed for cleaner IDE-like reading surface */
body::before { content: none; }
body::after { content: none; }

::selection { background: var(--orange); color: #050505; text-shadow: none; }
::-moz-selection { background: var(--orange); color: #050505; }

/* =========================================================================
   Typography
   ========================================================================= */

h1, h3, h4 { margin: 0; padding: 0; }
h2, h3 { margin-bottom: 0; padding-bottom: 0; }
h3, h4 { margin-bottom: 5px; }

h1 {
  margin-bottom: 5px;
  font-size: 2.5rem;
  letter-spacing: -0.01em;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
}
h1.home, h4.home { text-align: center; }

h2, h3 {
  color: var(--fg);
  letter-spacing: 0.02em;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85);
}

p { margin-top: 0; margin-bottom: 5px; }
p.intro { font-size: 0.9rem; text-align: justify; line-height: 1.55; color: #c8c8c8; }
p.centered-text { text-align: center; margin-bottom: 0; font-size: 14px; }

/* "Last update" gets terminal styling */
p.last_update {
  margin: 0;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  color: var(--fg-muted);
}
p.last_update::before {
  content: "[ ";
  color: var(--orange);
}
p.last_update::after {
  content: " ]";
  color: var(--orange);
}

p.text-inline { display: inline; }

/* Monospace for all numeric/data content */
.small-font,
.rs-avg,
.rating-text,
.rating-pct,
.rating-num,
.rs-count,
.rating-count-link,
.breadcrumb,
.page-link,
ul.newest_items li ul li p.small-font {
  font-family: var(--font-mono);
}

.small-font {
  font-size: 12px;
  letter-spacing: 0.03em;
}

del { text-decoration: line-through; text-decoration-color: var(--red); }
span.bold { font-weight: 600; }

/* Links */
a {
  color: var(--cyan);
  text-decoration: none;
  transition: color 0.12s ease, text-shadow 0.12s ease;
}
a:hover {
  color: var(--cyan-hover);
  text-decoration: underline;
}
a:active { color: var(--orange); }
a.btn { text-decoration: none; }
a.text-margin { margin: 5px; }

/* External link arrow */
a.external-link { display: inline-block; }
a.external-link::after {
  content: "\2197";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 0.85em;
  height: 0.85em;
  font-size: 1.25em;
  font-weight: bold;
  line-height: 1;
  transform: translateY(-0.04em);
  margin-left: 0.18em;
  border: 1px solid currentColor;
  border-radius: 0;
  vertical-align: middle;
  box-sizing: content-box;
  font-family: Arial;
  transition: color 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}
a.external-link:hover::after {
  color: var(--cyan-hover);
  border-color: var(--cyan-hover);
  box-shadow: 0 0 6px rgba(0, 216, 255, 0.55);
}
a.external-link:active::after { color: var(--orange); border-color: var(--orange); }

li p { margin: 0; margin-left: -20px; }

/* =========================================================================
   Tables
   ========================================================================= */

.table-wrapper {
  display: block;
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: rgba(0, 0, 0, 0.25);
}
.table-wrapper table {
  width: 100%;
  min-width: auto;
  border-collapse: separate;
  border-spacing: 0;
  margin: 0 !important;
}
.table-wrapper th,
.table-wrapper td {
  padding: 8px 10px !important;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
  white-space: nowrap;
}
.table-wrapper thead th {
  background: rgba(255, 255, 255, 0.025);
  border-bottom: 1px solid var(--border-strong);
  color: var(--orange-bright);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.78rem;
}
.table-wrapper tbody tr:last-child td {
  border-bottom: 0;
}
.table td { padding: 8px 10px; }
table tbody tr:nth-child(even) {
  background-color: rgba(255, 255, 255, 0.025);
  color: var(--fg);
}
.right { text-align: right; }

.directory-entry-details { margin-bottom: 150px; }
.form-check { margin-bottom: 5px; margin-top: 5px; }

/* =========================================================================
   Sponsor cards (homepage main row) — chamfered, glowing
   ========================================================================= */

/* Bare .sponsor-card (e.g. inside a table cell on profile pages) — minimal treatment, just highlight the name */
.sponsor-card {
  display: inline;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: var(--orange-bright);
  font-weight: 600;
}

/* Heavy card styling ONLY applies inside the sponsors grid (homepage/category page) */
section.sponsors .sponsor-card,
.sponsors-grid .sponsor-card {
  --accent: var(--sponsor-accent, #ff6600);
  --bg: var(--bg-card);
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  min-width: 180px;
  max-width: 240px;
  min-height: 200px;
  box-sizing: border-box;
  text-align: left;
  padding: 12px 10px;
  border-radius: 10px;
  border: 2px solid var(--accent);
  background: var(--bg-card);
  color: var(--fg);
  font-weight: normal;
  overflow: hidden;
  transition: box-shadow 0.18s ease, transform 0.15s ease, border-color 0.15s ease;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.30);
}

section.sponsors .sponsor-card:hover,
section.sponsors .sponsor-card:focus-within,
.sponsors-grid .sponsor-card:hover,
.sponsors-grid .sponsor-card:focus-within {
  border-color: var(--orange-bright);
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.30),
    0 0 0 1px rgba(255, 102, 0, 0.45),
    0 0 22px rgba(255, 102, 0, 0.40),
    0 0 48px rgba(255, 102, 0, 0.18);
  transform: translateY(-2px);
}

section.sponsors .sponsor-card:hover,
section.sponsors .sponsor-card:focus-within,
.sponsors-grid .sponsor-card:hover,
.sponsors-grid .sponsor-card:focus-within {
  border-color: var(--orange-bright);
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.30),
    0 0 0 1px rgba(255, 102, 0, 0.45),
    0 0 22px rgba(255, 102, 0, 0.40),
    0 0 48px rgba(255, 102, 0, 0.18);
  transform: translateY(-2px);
}

/* Sponsored inline section (in lists) */
.sponsored-section {
  position: relative;
  background-color: var(--bg-card-2);
  border: 2px solid var(--orange);
  border-radius: var(--radius);
  padding: 12px;
  transition: box-shadow 0.18s ease, border-color 0.15s ease;
}
.sponsored-section:hover,
.sponsored-section:focus-within {
  border-color: var(--orange-bright);
  box-shadow:
    0 0 0 1px rgba(255, 102, 0, 0.30),
    0 0 16px rgba(255, 102, 0, 0.22),
    0 0 34px rgba(255, 102, 0, 0.10);
}
.sponsored-section::before { content: none; }
.sponsored-section ul.blank_list_item { font-size: 18px; }
.sponsored-section a { font-weight: 600; }
.sponsored-section p { margin: 0; padding-bottom: 0; }
.sponsored-section ul { list-style: none; margin: 2px 0 4px; padding-left: 5px; }
.sponsored-section li { margin-bottom: 9px; }
.sponsored-section > p:nth-child(1) > b:nth-child(1) {
  font-family: var(--font-mono);
  font-size: 11px;
  font-style: normal;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #888;
  margin-left: 2px;
}

li.sponsored {
  background-color: var(--bg-card-2);
  border: 2px solid var(--orange);
  padding: 8px 10px;
  margin: 3px 0;
  font-size: 18px;
  border-radius: var(--radius);
  margin-left: -25px;
  transition: box-shadow 0.18s ease, border-color 0.15s ease;
}
li.sponsored:hover,
li.sponsored:focus-within {
  border-color: var(--orange-bright);
  box-shadow:
    0 0 0 1px rgba(255, 102, 0, 0.30),
    0 0 16px rgba(255, 102, 0, 0.22),
    0 0 34px rgba(255, 102, 0, 0.10);
}
li.sponsored p { margin-left: 0; }

.category-sponsored-listing,
.sub-category-sponsored-listing {
  font-style: normal;
  font-weight: 600;
  padding-top: 0;
  margin-top: auto;
}

.legend p {
  color: var(--fg);
  margin: 3px 0;
  font-size: 14px;
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
}

.adspace-full p {
  font-size: 18px;
  color: var(--orange);
  margin: 3px 0;
}

/* =========================================================================
   Banner & layout containers
   ========================================================================= */

div#banner {
  text-align: center;
  position: absolute;
  top: 0;
  left: 0;
  color: #fff;
  font-weight: 700;
  background: var(--orange);
  width: 100%;
  padding: 6px 0;
  font-size: 14px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  box-sizing: border-box;
  border-bottom: 1px solid rgba(0, 0, 0, 0.6);
}
div#banner-content { margin: 0 auto; max-width: 1000px; padding: 0 10px; }
div#main-content { padding-top: 5px; margin-left: 10px; margin-right: 10px; }

pre.payment-response,
pre.pgp-key {
  font-family: var(--font-mono);
  white-space: break-spaces;
  font-size: 13px;
  max-height: 200px;
  overflow: auto;
  max-width: min(100%, calc(100vw - 30px));
  word-wrap: anywhere;
  opacity: 0.7;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid var(--border-strong);
  border-left: 2px solid var(--orange);
  border-radius: var(--radius-xs);
  padding: 8px 10px;
}
pre.pgp-key { max-height: 100px; }

#donate p { font-size: 14px; }

.top-container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  max-width: 100%;
  margin: 0 0 0.5rem;
}
.top-container img { width: 333px; height: auto; max-width: 100%; }
.text-block { margin-left: 20px; flex: 1; max-width: 100%; }
.top-container p { text-align: justify; font-size: 14px; }

.top-section {
  flex: 1 1 0;
  margin: 0;
  padding: 0.25rem 0.5rem;
  text-align: center;
}

@media (max-width: 576px) {
  .top-container { flex-direction: column; gap: 0.25rem; }
  .top-section { padding: 0.15rem 0; font-size: 0.9rem; }
}

@media (max-width: 768px) {
  div#banner { padding: 8px 5px; font-size: 14px; }
  div#main-content { padding-top: 5px; }
  div#banner-content { font-size: 14px; }
  .top-container { flex-direction: column; }
  .text-block { margin-left: 0; padding: 0 10px; }
  .top-container img { width: 100%; max-width: 333px; }
}

.top-container-left-column { flex: 0 0 38.2%; text-align: center; }
.top-container-right-column {
  flex: 1;
  padding: 0 10px;
  text-align: justify;
  border-radius: 8px;
  box-sizing: border-box;
  overflow-wrap: break-word;
}
@media (max-width: 768px) {
  .top-container-left-column,
  .top-container-right-column { flex: 0 0 auto; width: 100%; }
}

/* =========================================================================
   CSS-only toggles
   ========================================================================= */

.hidden { display: none; }
:checked + .hidden { display: block; }

ul#categories_list { list-style-type: none; margin: 0; padding: 0; }
ul#categories_list li label { font-size: 20px; font-weight: 600; padding-right: 15px; }
ul#categories_list li input[type="checkbox"] { display: none; }

#toggleImageCheckbox { display: none; }
#toggleImage { display: none; }
#toggleImageCheckbox:checked ~ #toggleImage { display: block; }

ul.blank_list_item li { list-style-type: none; }
.blank_list_item li { margin-bottom: 10px; }

label.expansion_item { cursor: pointer; padding-right: 5px; }

.multi-line-text {
  word-break: break-word;
  overflow-wrap: anywhere;
  white-space: normal;
  display: inline;
}

/* =========================================================================
   Footer
   ========================================================================= */

footer {
  margin-top: 30px;
  padding: 10px;
  border-top: 1px solid var(--border);
}

.site-footer {
  margin-top: 2rem;
  border-top: 1px solid var(--orange-mid);
  padding-top: 1rem;
  text-align: center;
}

.footer-nav { margin: 0; padding: 0; list-style: none; }
.footer-nav a { margin: 0 0.5rem; }
.footer-nav a:hover { text-decoration: underline; }

/* =========================================================================
   Breadcrumbs — terminal path style
   ========================================================================= */

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  padding: 6px 10px;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--border);
  border-left: 2px solid var(--orange);
  border-radius: var(--radius-xs);
}
.breadcrumb::before {
  content: "~/";
  color: var(--orange);
  margin-right: 6px;
  font-weight: 700;
}
.breadcrumb-item { display: inline-block; font-size: 0.85rem; }
.breadcrumb-item + .breadcrumb-item::before {
  content: "/";
  padding: 0 6px;
  color: var(--orange);
  opacity: 0.7;
}
.breadcrumb-item.active { color: var(--fg-dim); }
.breadcrumb-item a:hover { text-decoration: underline; }
ol.breadcrumb { padding-left: 10px; }

/* =========================================================================
   Sponsors section grid
   ========================================================================= */

section.sponsors {
  margin: 1rem auto;
  padding: 0 1rem;
  text-align: center;
}

section.sponsors > h2.section-title,
.sponsor-sections h2.section-title {
  display: inline-block;
  position: relative;
  font-family: var(--font-mono);
  font-size: 1.25rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--orange-bright) !important;
  margin: 0 auto 1.25rem;
  padding: 4px 18px;
  text-align: center !important;
  text-shadow: none !important;
}
section.sponsors > h2.section-title::before,
.sponsor-sections h2.section-title::before {
  content: "[ ";
  color: var(--orange);
  opacity: 0.7;
}
section.sponsors > h2.section-title::after,
.sponsor-sections h2.section-title::after {
  content: " ]";
  color: var(--orange);
  opacity: 0.7;
}

section.sponsors ul.blank_list_item {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem;
  margin: 0 auto 1.5rem;
  padding: 0;
  list-style: none;
}
section.sponsors ul.blank_list_item > li {
  flex: 1 1 220px;
  max-width: 220px;
  min-width: 160px;
  background: var(--bg-card-2);
  border: 1px solid var(--orange);
  border-radius: var(--radius);
  padding: 1rem;
  box-sizing: border-box;
  text-align: left;
  position: relative;
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.5),
    0 0 14px rgba(255, 102, 0, 0.10);
}
/* Corner bracket accents on sponsor list items */
section.sponsors ul.blank_list_item > li::before,
section.sponsors ul.blank_list_item > li::after {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  border: 2px solid var(--orange);
  pointer-events: none;
}
section.sponsors ul.blank_list_item > li::before {
  top: -2px;
  left: -2px;
  border-right: 0;
  border-bottom: 0;
}
section.sponsors ul.blank_list_item > li::after {
  bottom: -2px;
  right: -2px;
  border-left: 0;
  border-top: 0;
}
section.sponsors ul.blank_list_item > li p { margin: 0 0 0.5rem; padding: 0; }
section.sponsors ul.blank_list_item > li label.expansion_item {
  cursor: pointer;
  padding-right: 0.5rem;
}
section.sponsors ul.blank_list_item > li .hidden {
  margin-top: 0.5rem;
  padding-left: 1rem;
  font-size: 0.85rem;
  line-height: 1.35;
}

.create-sponsored-listing {
  text-align: right;
  font-size: 0.8rem;
  margin-top: 0;
  margin-bottom: -8px;
}
.create-sponsored-listing .app-link:hover { text-decoration: underline; }

@media (max-width: 600px) {
  section.sponsors ul.blank_list_item { gap: 1rem; }
  section.sponsors ul.blank_list_item > li { flex: 1 1 90%; max-width: none; }
}

.logo { display: block; margin: 0 auto 0.5rem; max-height: 80px; }

div.centered { text-align: center; }
.main-content-centered { max-width: 75rem; margin: 0 auto; padding: 1rem; }

/* Sponsor card (5-card homepage row) content */
.sponsor-card p {
  font-size: 0.88rem;
  margin-bottom: 0.5rem;
  line-height: 1.45;
}
.sponsor-card .sponsor-desc a { font-size: 0.88rem; }
.sponsor-card ul { padding-left: 25px; padding-right: 5px; }
.sponsor-card ul li { list-style-type: none; }

.sponsors-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
}

.sponsor-links {
  line-height: 1.4;
  height: 1.4em !important;
  overflow: hidden !important;
  white-space: nowrap;
  margin-bottom: 0.5em;
}
.sponsor-links a {
  transition: none !important;
  display: inline-block;
}

.sponsor-desc { margin: 5px; margin-top: 0 !important; }

/* Sponsor header */
.sponsor-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.sponsor-header-left { display: flex; align-items: center; min-width: 0; }
.sponsor-header-right { display: flex; align-items: center; flex: 0 0 auto; }
.sponsor-header .title {
  overflow: visible;
  white-space: normal;
  word-break: break-word;
  line-height: 1.15;
}
.sponsor-card a b,
section.sponsors .sponsor-card a b {
  font-size: 18px;
  display: inline-block;
  line-height: 1.15;
}
section.sponsors .sponsor-card .sponsor-header,
.sponsor-header.sponsor-header--start {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  text-align: left;
}
section.sponsors .sponsor-card .sponsor-header .status,
.sponsor-header.sponsor-header--start .status { flex-shrink: 0; }
section.sponsors .sponsor-card .sponsor-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.sponsor-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 8px 0 0;
  gap: 6px;
  padding-right: 0;
}
.sponsor-rating {
  flex: 0 1 auto;
  min-width: 0;
  padding-left: 0;
  white-space: nowrap;
  line-height: 1;
  overflow: visible;
}
.sponsor-rating .rating-wrapper {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  flex-wrap: nowrap;
  padding-bottom: 0;
}
.sponsor-rating .rating-text,
.sponsor-rating .rating-count-link {
  font-size: 11px !important;
  line-height: 1;
}
.sponsor-card .rating-wrapper .stars,
section.sponsors .sponsor-card .rating-wrapper .stars {
  font-size: 11px;
  letter-spacing: 0.5px;
}

.sponsor-flag {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
}
.sponsor-card .country-flag-right,
section.sponsors .sponsor-card .country-flag-right {
  margin: 0 !important;
  max-height: 11px;
  flex-shrink: 0;
}

/* Description clamp only inside the sponsors grid */
section.sponsors .sponsor-card .sponsor-desc,
.sponsors-grid .sponsor-card .sponsor-desc {
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  line-clamp: 5;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 8px 2px 0 !important;
  font-size: 0.85rem;
  line-height: 1.4;
}

section.sponsors .sponsors-grid {
  align-items: stretch;
}
section.sponsors .sponsor-card .sponsor-desc,
.sponsors-grid .sponsor-card .sponsor-desc {
  margin-top: 6px !important;
}

.sponsor-links-center { text-align: left; white-space: nowrap; margin: 0; }
.sponsor-links-center a { font-size: 0.85em; }

.rating-count-link { text-decoration: none; font-size: 0.85em; }
.rating-count-link:hover { text-decoration: underline; }

/* =========================================================================
   Sponsor sections (category listings)
   ========================================================================= */

.sponsor-sections {
  display: block !important;
  margin: 2rem 0;
  font-size: 20px;
}
.sponsor-sections > section { width: 100%; margin-bottom: 2rem; }

.sponsor-sections .category-name,
.sponsor-sections .subcategory-name {
  display: block;
  font-weight: 600;
  color: var(--fg);
  margin: 1rem 0 0.5rem;
  letter-spacing: 0.02em;
}

.sponsor-sections ul.blank_list_item a { font-weight: 600; }
.sponsor-sections ul.blank_list_item {
  list-style: none;
  margin: 0;
  padding: 0 0 5px;
}
.sponsor-sections ul.blank_list_item > li {
  margin: 0.5rem 0;
  padding-left: 2rem;
}
.sponsor-sections .status { color: var(--orange) !important; }

.status { padding: 0 2px; }
.country-flag {
  padding-left: 0;
  max-height: 14px;
  vertical-align: middle;
}
.blank_list_item .country-flag,
.sponsor-sections .country-flag { padding-left: 5px; }
.country-flag-right { margin-right: 5px; }

/* =========================================================================
   Tags
   ========================================================================= */

.tag-list { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.tag-item {
  background: #f0f0f0;
  padding: 0.3rem 0.6rem;
  border-radius: var(--radius-sm);
  color: #333;
}
.tag-item:hover { background: #e0e0e0; }

.tag-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin: 8px 0 0;
}
.tag-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  line-height: 1.2;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  transition: border-color 0.12s, background-color 0.12s, color 0.12s, box-shadow 0.12s;
}
.tag-pill:hover {
  border-color: var(--orange);
  background: var(--orange-soft);
  color: #fff;
  box-shadow: 0 0 8px rgba(255, 102, 0, 0.35);
}
.tag-pill input { margin: 0; accent-color: var(--orange); }

/* =========================================================================
   Search results & pagination
   ========================================================================= */

.search-form {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  flex-wrap: nowrap;
}

.search-btn,
.btn-info.search-btn { min-height: 25px; }
.search-btn {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  padding: 5px 14px;
  border-radius: var(--radius);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

ul.search-results { list-style: none; margin: 0; padding: 0; }
ul.search-results li.search-result-item {
  margin-bottom: 1.5rem;
  padding-left: 1rem;
  border-left: 2px solid var(--border-strong);
  list-style: none;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
ul.search-results li.search-result-item:hover {
  border-left-color: var(--orange);
  box-shadow: -4px 0 14px -4px rgba(255, 102, 0, 0.45);
}
ul.search-results li.search-result-item p { margin: 0.3em 0; }
ul.search-results li.sponsored {
  margin-left: 0;
  border-left: 2px solid var(--orange);
  font-size: 16px;
}

.review-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  padding: 0 18px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1;
  background: linear-gradient(180deg, #1a7eff, #0b5ed7);
  color: #fff;
  border: 1px solid rgba(13, 110, 253, 0.7);
  cursor: pointer;
  text-decoration: none;
  transition: filter 0.15s, box-shadow 0.15s, transform 0.06s;
}
.review-btn:hover,
.review-btn:focus {
  filter: brightness(1.10);
  box-shadow:
    0 0 0 1px rgba(13, 110, 253, 0.4),
    0 0 16px rgba(13, 110, 253, 0.55);
  text-decoration: none;
}
.review-btn:active { transform: translateY(1px); }

/* "Leave a review" — the full-size review-btn (Reply buttons carry .btn-sm).
   Make it clearly an action so users notice they can post a review. */
.review-btn:not(.btn-sm) {
  height: 34px;
  width: auto;
  padding: 0 16px;
  font-size: 12px;
  letter-spacing: 0.06em;
  margin-top: 8px;
  background: linear-gradient(180deg, var(--orange-bright), var(--orange));
  border: 1px solid var(--orange-bright);
  color: #fff;
  box-shadow:
    0 0 0 1px rgba(255, 102, 0, 0.25),
    0 0 10px rgba(255, 102, 0, 0.18);
}
.review-btn:not(.btn-sm)::before {
  content: "\270E";          /* pencil glyph */
  margin-right: 7px;
  font-size: 13px;
  line-height: 1;
}
.review-btn:not(.btn-sm):hover,
.review-btn:not(.btn-sm):focus {
  filter: brightness(1.08);
  box-shadow:
    0 0 0 1px rgba(255, 102, 0, 0.45),
    0 0 20px rgba(255, 102, 0, 0.45),
    0 0 40px rgba(255, 102, 0, 0.20);
}

.pagination {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  list-style: none;
  padding: 0;
  margin: 1rem 0;
  justify-content: center;
}
.pagination .page-item { margin: 0; }
.pagination .page-link {
  padding: 0.45rem 0.75rem;
  border-radius: var(--radius-xs);
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--border-strong);
  display: block;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  background: rgba(0, 0, 0, 0.4);
  transition: color 0.12s, background-color 0.12s, border-color 0.12s, box-shadow 0.12s, transform 0.08s;
}
.pagination .page-link:hover,
.pagination .page-link:focus,
.pagination .page-link:focus-visible {
  color: var(--orange) !important;
  background-color: var(--orange-soft) !important;
  border-color: var(--orange-glow) !important;
  text-decoration: none !important;
  box-shadow:
    0 0 0 1px rgba(255, 102, 0, 0.30),
    0 0 14px rgba(255, 102, 0, 0.25) !important;
  outline: none !important;
}
.pagination .page-item.active .page-link {
  background-color: rgba(255, 102, 0, 0.22) !important;
  border-color: var(--orange) !important;
  color: #fff !important;
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.55),
    0 0 14px rgba(255, 102, 0, 0.28) !important;
}
.page-item.disabled .page-link,
.page-link[aria-disabled="true"],
.page-link[tabindex="-1"] {
  color: var(--fg-dim) !important;
  background: transparent !important;
  border-color: var(--border) !important;
  box-shadow: none !important;
  cursor: not-allowed !important;
}

/* =========================================================================
   Sidebar — terminal style
   ========================================================================= */

@media (max-width: 768px) {
  .sidebar { display: none; }
  .mobile-nav { display: block; }
  .main { margin-left: 0; padding: 1rem; }
}
@media (min-width: 769px) {
  .sidebar { display: block; }
  .mobile-nav { display: none; }
  .main { margin-left: 220px; padding: 1.5rem; }
}

.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: var(--sidebar-w);
  background: var(--bg-panel);
  overflow-y: auto;
  border-right: 1px solid var(--border);
}
.sidebar ul { margin: 0; padding: 0; list-style: none; }
.sidebar a {
  display: block;
  padding: 5px 10px 5px 22px !important;
  line-height: 1.2 !important;
  color: #ddd;
  text-decoration: none;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.02em;
  position: relative;
  transition: background-color 0.12s, color 0.12s, box-shadow 0.12s, padding-left 0.12s;
}
.sidebar a:hover {
  background: var(--orange-soft) !important;
  color: var(--orange-bright) !important;
  padding-left: 26px !important;
}
.sidebar a:hover::before {
  content: ">";
  position: absolute;
  left: 10px;
  color: var(--orange);
  font-weight: 700;
}
.sidebar .active > a,
.sidebar ul li.category-item > a.active {
  background: rgba(255, 102, 0, 0.22) !important;
  color: var(--orange-bright) !important;
  box-shadow: inset 3px 0 0 var(--orange) !important;
}
.sidebar .active > a::before,
.sidebar ul li.category-item > a.active::before {
  content: ">";
  position: absolute;
  left: 10px;
  color: var(--orange);
  font-weight: 700;
}

.sidebar ul li.category-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.sidebar ul li.category-item > a { flex: 1; }
.sidebar ul li.category-item > a:hover {
  background: var(--orange-soft) !important;
  color: var(--orange-bright) !important;
}

.sidebar .expander {
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  margin: 0 4px 0 6px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid var(--border-strong) !important;
  background: rgba(0, 0, 0, 0.4) !important;
  border-radius: 4px !important;
  font-size: 0 !important;
  line-height: 0 !important;
  color: transparent !important;
  user-select: none !important;
  cursor: pointer !important;
  transition: border-color 0.12s, background 0.12s;
}
.sidebar .expander::before {
  content: "+";
  font-size: 12px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  color: var(--orange) !important;
  font-family: var(--font-mono);
}
.sidebar li.category-item:has(.hidden-toggle:checked) .expander {
  border-color: var(--orange) !important;
  background: var(--orange-soft) !important;
}
.sidebar li.category-item:has(.hidden-toggle:checked) .expander::before {
  content: "-";
}
.sidebar .expander:hover {
  border-color: var(--orange) !important;
  background: var(--orange-soft) !important;
}

.hidden-toggle { display: none; }
.sidebar .hidden {
  display: none;
  width: 100%;
  margin: 0;
  padding: 0;
}
.hidden-toggle:checked + .hidden {
  display: block;
  margin-left: 1.7em;
  border-left: 1px dashed var(--orange-mid);
  padding-left: 4px !important;
}

.sidebar ul li.category-item .hidden ul li { margin: 1px 0 !important; }
.sidebar ul li.category-item .hidden ul li a {
  font-size: 12px !important;
  padding: 3px 10px 3px 18px !important;
  line-height: 1.2 !important;
  border-radius: 2px !important;
  color: #bbb;
  transition: background-color 0.12s, color 0.12s, box-shadow 0.12s;
}
.sidebar ul li.category-item .hidden ul li a:hover {
  background: rgba(255, 102, 0, 0.18) !important;
  color: var(--orange-bright) !important;
  box-shadow: inset 2px 0 0 var(--orange) !important;
}
.sidebar ul li.category-item .hidden ul li a.active {
  background: rgba(255, 102, 0, 0.28) !important;
  color: var(--orange-bright) !important;
  box-shadow: inset 3px 0 0 var(--orange) !important;
}

.sidebar .logo-container {
  text-align: center;
  border-bottom: 1px solid var(--border);
  padding: 16px 0 14px;
  background: transparent;
  position: relative;
}
.sidebar .logo-container::after { content: none; }
.sidebar .logo-container a {
  display: inline-block;
  padding: 4px !important;
  border-radius: 6px;
  transition: transform 0.15s ease;
}
.sidebar .logo-container a:hover {
  background: transparent !important;
  padding-left: 4px !important;
  transform: scale(1.04);
}
.sidebar .logo-container a:hover::before { content: none !important; }
.sidebar .logo-container img {
  max-width: 100px;
  height: auto;
  display: inline-block;
  filter: none;
  transition: filter 0.18s ease;
}
.sidebar .logo-container a:hover img {
  filter:
    brightness(1.20)
    contrast(1.10)
    drop-shadow(0 0 8px rgba(255, 255, 255, 0.30));
}
.sidebar .logo-container a:hover { background: transparent !important; }

li.category-item ul { font-size: 13px; }

/* Search box in nav */
.nav-search-wrap {
  padding: 6px 10px;
  margin: 0 0 0.5rem 0;
  width: 100%;
  border-bottom: 1px solid var(--border);
}
.nav-search-form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  width: 100%;
}
.nav-search-input {
  flex: 1 1 100%;
  width: 100%;
  min-width: 0;
  height: 28px;
  font-size: 12px;
  padding: 0.15rem 0.6rem;
  background: var(--bg-overlay) !important;
  color: var(--fg) !important;
  border: 1px solid var(--border-strong) !important;
  border-radius: 6px !important;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.65) !important;
  outline: none !important;
  caret-color: var(--orange) !important;
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
}
.nav-search-input::placeholder { color: var(--fg-dim) !important; }
.nav-search-input:focus {
  background: var(--bg-overlay-focus) !important;
  border-color: var(--orange) !important;
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.50),
    0 0 0 2px rgba(255, 102, 0, 0.20) !important;
}
.nav-search-btn,
.nav-filter-btn,
.sidebar a.nav-search-btn,
.sidebar a.nav-filter-btn,
.sidebar .nav-search-btn,
.sidebar .nav-filter-btn {
  flex: 1 1 calc(50% - 0.2rem) !important;
  min-width: 0;
  width: auto;
  height: 26px !important;
  min-height: 26px !important;
  padding: 0 0.6rem !important;
  margin: 0 !important;
  font-size: 11px !important;
  line-height: 26px !important;
  border-radius: 6px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  vertical-align: middle !important;
  box-sizing: border-box !important;
  font-family: var(--font-sans) !important;
}

/* Cancel sidebar's category-link hover behavior on these buttons */
.sidebar .nav-search-btn:hover,
.sidebar .nav-filter-btn:hover,
.sidebar a.nav-search-btn:hover,
.sidebar a.nav-filter-btn:hover {
  padding-left: 0.6rem !important;
  background: linear-gradient(180deg, var(--ui-info-1), var(--ui-info-2)) !important;
  color: #fff !important;
}
.sidebar a.nav-search-btn:hover {
  background: linear-gradient(180deg, var(--ui-primary-1), var(--ui-primary-2)) !important;
  color: #052010 !important;
}
.sidebar .nav-search-btn:hover::before,
.sidebar .nav-filter-btn:hover::before,
.sidebar a.nav-search-btn:hover::before,
.sidebar a.nav-filter-btn:hover::before {
  content: none !important;
  display: none !important;
}

.nav-bottom-links {
  margin-top: 0.5rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--orange-mid);
}

/* =========================================================================
   Mobile nav (details/summary)
   ========================================================================= */

.mobile-nav { background: var(--bg-panel); color: var(--fg); display: none; }

@media (max-width: 768px) { .mobile-nav { display: block; } }

.mobile-nav summary {
  padding: 1rem;
  font-size: 1rem;
  cursor: pointer;
  background: #161616;
  list-style: none;
  border-bottom: 1px solid var(--orange-mid);
}
.mobile-nav ul { margin: 0; padding: 0 1rem; list-style: none; }
.mobile-nav li a {
  display: block;
  padding: 0.5rem 0;
  color: #eee;
  text-decoration: none;
  font-family: var(--font-mono);
  font-size: 14px;
  transition: background-color 0.12s ease;
}
.mobile-nav li a:hover { background: rgba(255, 255, 255, 0.05); }
.mobile-nav details[open] > summary > a {
  background-color: rgba(255, 102, 0, 0.26);
  color: var(--orange-bright);
  font-weight: 600;
}
.mobile-nav a.active {
  background-color: rgba(255, 102, 0, 0.26);
  color: var(--orange-bright);
  font-weight: 600;
}

@media (max-width: 768px) {
  :root { --mobile-nav-h: 56px; }
  details.mobile-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 99999;
    margin: 0;
    background: rgba(0, 0, 0, 0.94);
    border-bottom: 1px solid var(--orange-mid);
    box-shadow: 0 4px 18px rgba(255, 102, 0, 0.10);
    backdrop-filter: blur(10px) saturate(160%);
    -webkit-backdrop-filter: blur(10px) saturate(160%);
  }
  body {
    padding-top: calc(var(--mobile-nav-h) + env(safe-area-inset-top, 0px)) !important;
  }
  #main-content { padding-top: 0 !important; }

  details.mobile-nav > summary {
    height: var(--mobile-nav-h);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1rem;
    cursor: pointer;
    color: #fff;
    font-weight: 700;
    user-select: none;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }
  details.mobile-nav > summary::-webkit-details-marker { display: none; }
  details.mobile-nav > summary::marker { content: ""; }

  details.mobile-nav[open] { bottom: 0; border-bottom: none; }
  details.mobile-nav[open] > ul {
    margin: 0;
    padding: 0.5rem 1rem calc(1rem + env(safe-area-inset-bottom, 0px));
    height: calc(100dvh - var(--mobile-nav-h));
    max-height: none;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y;
  }
  @supports not (height: 100dvh) {
    details.mobile-nav[open] > ul { height: calc(100vh - var(--mobile-nav-h)); }
  }
  @supports selector(body:has(details[open])) {
    body:has(details.mobile-nav[open]) { overflow: hidden; }
  }

  details.mobile-nav {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    padding-bottom: 0 !important;
  }
  details.mobile-nav[open] {
    height: 100vh !important;
    height: 100dvh !important;
    max-height: 100vh !important;
    max-height: 100dvh !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    padding-bottom: 0 !important;
  }
  details.mobile-nav[open] > summary.mobile-nav-summary,
  details.mobile-nav[open] > .nav-search-wrap { flex: 0 0 auto !important; }
  details.mobile-nav[open] > ul {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y;
    padding-bottom: calc(env(safe-area-inset-bottom) + 6rem) !important;
  }

  details.mobile-nav > ul {
    padding: 0.6rem 0.85rem 1rem !important;
    list-style: none !important;
  }
  details.mobile-nav li ul {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }
  details.mobile-nav li.category-item {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    text-align: left !important;
  }
  details.mobile-nav li.category-item > .expander {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    margin: 0 10px 0 0 !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid var(--border-strong) !important;
    background: rgba(0, 0, 0, 0.4) !important;
    border-radius: 2px !important;
    font-size: 0 !important;
    line-height: 0 !important;
    color: transparent !important;
    user-select: none !important;
    cursor: pointer !important;
    position: relative;
  }
  details.mobile-nav li.category-item > .expander::before {
    content: "+";
    font-size: 16px !important;
    font-weight: 800 !important;
    color: var(--orange) !important;
    font-family: var(--font-mono);
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  details.mobile-nav li.category-item:has(> input[type="checkbox"]:checked) .expander {
    border-color: var(--orange) !important;
    background: var(--orange-soft) !important;
  }
  details.mobile-nav li.category-item:has(> input[type="checkbox"]:checked) .expander::before {
    content: "-" !important;
  }
  details.mobile-nav li.category-item > .expander:hover {
    border-color: var(--orange) !important;
    background: var(--orange-soft) !important;
  }
  details.mobile-nav li.category-item > a {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    display: block !important;
    padding: 11px 16px !important;
    margin: 4px 6px 4px 0 !important;
    border-radius: 4px !important;
    color: #eee !important;
    text-decoration: none !important;
    line-height: 1.15 !important;
    background: transparent !important;
    font-family: var(--font-mono);
  }
  details.mobile-nav li.category-item > a.active {
    background: rgba(255, 102, 0, 0.28) !important;
    color: var(--orange-bright) !important;
    font-weight: 600 !important;
    box-shadow: inset 4px 0 0 var(--orange) !important;
  }
  details.mobile-nav li.category-item > a:hover {
    background: var(--orange-soft) !important;
    color: var(--orange-bright) !important;
  }
  details.mobile-nav .hidden {
    width: 100% !important;
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  details.mobile-nav .hidden-toggle:checked + .hidden {
    display: block !important;
    margin-left: 28px !important;
    border-left: 1px dashed var(--orange-mid);
    padding-left: 8px !important;
  }
  details.mobile-nav li.category-item .hidden a {
    display: block !important;
    padding: 10px 16px !important;
    margin: 3px 6px 3px 0 !important;
    border-radius: 4px !important;
    color: #ddd !important;
    text-decoration: none !important;
    line-height: 1.15 !important;
  }
  details.mobile-nav li.category-item .hidden a:hover {
    background: rgba(255, 102, 0, 0.20) !important;
    color: var(--orange-bright) !important;
    box-shadow: inset 3px 0 0 var(--orange) !important;
  }
  details.mobile-nav li.category-item .hidden a.active {
    background: rgba(255, 102, 0, 0.30) !important;
    color: var(--orange-bright) !important;
    font-weight: 600 !important;
    box-shadow: inset 4px 0 0 var(--orange) !important;
  }

  .mobile-nav a.active,
  .mobile-nav details[open] > summary > a,
  details.mobile-nav a.active,
  details.mobile-nav details[open] > summary > a {
    background: transparent !important;
    background-color: transparent !important;
    color: #fff !important;
    font-weight: inherit !important;
    box-shadow: none !important;
  }
  details.mobile-nav > ul {
    padding: 0.6rem 0.9rem 1rem !important;
    margin: 0 !important;
    list-style: none !important;
  }
  details.mobile-nav li a {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    text-decoration: none !important;
    color: #eee !important;
    padding: 11px 16px !important;
    border-radius: 4px !important;
    margin: 4px 0 !important;
  }
  details.mobile-nav li a.active {
    background: rgba(255, 102, 0, 0.28) !important;
    box-shadow: inset 4px 0 0 var(--orange) !important;
    color: var(--orange-bright) !important;
    font-weight: 600 !important;
  }
  details.mobile-nav li a:hover {
    background: var(--orange-soft) !important;
    color: var(--orange-bright) !important;
  }
  details.mobile-nav li.category-item .hidden a.active {
    background: rgba(255, 102, 0, 0.32) !important;
    box-shadow: inset 4px 0 0 var(--orange) !important;
  }

  .mobile-nav .nav-search-wrap {
    padding: 0.25rem 0.85rem 0.5rem;
    margin: 0;
  }
  .mobile-nav .nav-search-form { gap: 0.5rem; }
  .mobile-nav .nav-search-input {
    height: 34px;
    font-size: 14px;
    padding: 0 12px;
  }
  .mobile-nav .nav-search-btn,
  .mobile-nav .nav-filter-btn {
    height: 32px;
    padding: 0 12px;
    font-size: 13px;
    border-radius: 4px;
  }
}

/* =========================================================================
   Main content layout
   ========================================================================= */

.main { padding: 1rem; }
.content-wrapper { max-width: 1125px; margin: 0 auto; padding: 0 1rem; }

#main-content .main { max-width: 62%; margin: 0 auto; }

@media (max-width: 768px) {
  #main-content .main { max-width: 100%; margin: 0; }
}

@media (min-width: 769px) {
  .mobile-nav { display: none !important; }
  .sidebar {
    position: fixed !important;
    top: 0;
    left: 0;
    bottom: 0;
    width: var(--sidebar-w) !important;
    overflow-y: auto;
  }
  #main-content { margin-left: var(--sidebar-w) !important; padding: 0 !important; }
  #main-content .main {
    max-width: 75rem;
    margin: 0 auto;
    padding: 1.5rem;
    width: auto !important;
  }
}

@media (max-width: 768px) {
  .mobile-nav { display: block !important; }
  .sidebar { display: none !important; }
  #main-content { margin-left: 0 !important; }
  #main-content .main {
    max-width: 100% !important;
    margin: 0 !important;
    padding: 1rem !important;
  }
}

.site-logo-top-right {
  position: absolute;
  top: 12px;
  right: 12px;
  height: 42px;
  width: auto;
  max-width: 140px;
  opacity: 0.9;
}

.page-header-bar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.page-title { margin: 0; line-height: 1.05; flex: 1 1 auto; min-width: 0; }
.site-logo-link { flex: 0 0 auto; display: inline-block; }
.site-logo { display: block; height: auto; max-width: 120px; }

@media (max-width: 600px) { .site-logo { max-width: 78px; } }
@media (max-width: 768px) {
  .site-logo-top-right { height: 32px; top: 8px; right: 8px; }
}

/* =========================================================================
   Sponsor ticker — terminal scroll
   ========================================================================= */

@media (min-width: 992px) {
  nav.sidebar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    width: var(--sidebar-w) !important;
    height: 100vh !important;
    margin: 0 !important;
    padding-top: 0 !important;
  }
  #main-content {
    margin-left: var(--sidebar-w) !important;
    padding-top: var(--ticker-h) !important;
  }
  .sponsor-ticker {
    display: block !important;
    position: fixed !important;
    top: 0 !important;
    left: var(--sidebar-w) !important;
    right: 0 !important;
    height: var(--ticker-h) !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 1000;
    background: rgba(22, 22, 22, 0.94);
    border-bottom: 1px solid var(--border);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    overflow: hidden;
  }
}

@media (max-width: 991.98px) {
  .sponsor-ticker { display: none !important; }
  #main-content { margin-left: 0 !important; padding-top: 0 !important; }
}

.sponsor-ticker__row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  height: 100%;
  box-sizing: border-box;
  padding: 0.55rem 0 0.55rem 0.9rem;
  font-family: var(--font-mono);
}
.sponsor-ticker__label {
  font-weight: 800;
  white-space: nowrap;
  opacity: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 0.78rem;
  color: var(--orange);
  text-shadow: none;
}
.sponsor-ticker__label::before { content: "> "; opacity: 0.7; }

.sponsor-ticker__viewport {
  flex: 1;
  overflow: hidden;
  padding-left: var(--lead-in);
  mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 var(--fade-l),
    #000 calc(100% - var(--fade-r)),
    transparent 100%
  );
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 var(--fade-l),
    #000 calc(100% - var(--fade-r)),
    transparent 100%
  );
}
.sponsor-ticker__track {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  width: max-content;
  will-change: transform;
  animation: sponsorTicker var(--ticker-speed) linear infinite !important;
  animation-play-state: running !important;
}
.sponsor-ticker__set {
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  padding-right: 2rem;
  flex: 0 0 auto;
}
.sponsor-ticker__sep {
  opacity: 0.4;
  color: var(--orange);
  user-select: none;
}
.sponsor-ticker__viewport:hover .sponsor-ticker__track,
.sponsor-ticker__track:hover { animation-play-state: paused !important; }
.sponsor-ticker__viewport:focus-within:not(:hover) .sponsor-ticker__track {
  animation-play-state: running !important;
}

.sponsor-ticker a {
  display: inline-block;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 2px 10px;
  border-radius: var(--radius-xs);
  text-decoration: none;
  transition: background-color 0.12s, color 0.12s, box-shadow 0.12s;
}
.sponsor-ticker a:hover,
.sponsor-ticker a:focus-visible {
  color: #fff !important;
  background: var(--orange);
  box-shadow: 0 0 0 1px var(--orange);
  outline: none;
  text-decoration: none;
}
.sponsor-ticker a:focus-visible {
  outline: 2px solid rgba(255, 102, 0, 0.9);
  outline-offset: 2px;
}

@keyframes sponsorTicker {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .sponsor-ticker__track { animation: none !important; }
}

@media (max-width: 768px) { body { padding-top: 0 !important; } }

@media (max-width: 768px) {
  details.mobile-nav ~ #main-content {
    padding-top: calc(var(--mobile-nav-h) + env(safe-area-inset-top, 0px)) !important;
  }
  details.mobile-nav ~ #main-content .main { padding-top: 1rem !important; }
}

@media (min-width: 769px) {
  #main-content { margin-left: 0 !important; }
  .sidebar ~ #main-content { margin-left: var(--sidebar-w) !important; }
}

/* =========================================================================
   Subcategory headings
   ========================================================================= */

.subcat-heading {
  margin: 1.5rem 0 0.5rem;
  font-family: var(--font-mono);
  font-size: 1.1rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--orange-mid);
  padding-bottom: 0.35rem;
  color: var(--orange-bright);
}
.subcat-heading::before {
  content: "// ";
  color: var(--orange);
  opacity: 0.7;
}

h2.section-title,
h2.subcat-heading {
  color: var(--orange-bright);
  letter-spacing: 0.04em;
  text-shadow: none;
  filter: none;
}

h2.section-title.sponsor-section-title {
  display: block;
  width: 100%;
  text-align: center !important;
  color: var(--orange);
}

/* =========================================================================
   Rating stars & summary
   ========================================================================= */

.rating-wrapper {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  white-space: nowrap;
  padding-bottom: 4px;
  max-width: 100%;
}

/* In sponsor cards specifically, keep rating + flag tight and on one line */
.sponsor-card .rating-wrapper,
section.sponsors .sponsor-card .rating-wrapper {
  flex-wrap: nowrap;
  min-width: 0;
}
.sponsor-card .rating-wrapper .rating-text,
.sponsor-card .rating-wrapper .rating-count-link,
section.sponsors .sponsor-card .rating-wrapper .rating-text,
section.sponsors .sponsor-card .rating-wrapper .rating-count-link {
  font-size: 0.8em;
}
.sponsor-card .country-flag,
section.sponsors .sponsor-card .country-flag {
  flex-shrink: 0;
  margin-right: 0;
  margin-left: auto;
}
.stars {
  position: relative;
  display: inline-block;
  font-size: 16px;
  line-height: 1;
  letter-spacing: 2px;
  vertical-align: middle;
  color: #4a4a4a;
  font-family: inherit;
}
.stars::before { content: "★★★★★"; }
.stars-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  overflow: hidden;
  white-space: nowrap;
  color: var(--orange);
  text-shadow: none;
}
.stars-fill::before { content: "★★★★★"; }
.rating-text {
  font-weight: 600;
  opacity: 0.95;
  font-size: 16px;
  line-height: 1;
  letter-spacing: 0.04em;
}
.text-muted { font-size: small; }

.rating-summary {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 18px;
  align-items: center;
  max-width: 820px;
  margin: 6px 0 14px;
}
.rs-left { text-align: left; }
.rs-avg {
  font-size: 48px;
  line-height: 1;
  font-weight: 700;
  color: #ffffff;
  margin: 0;
  letter-spacing: -0.02em;
  text-shadow: none;
}
.rs-stars { margin-top: 6px; }
.rs-count {
  margin-top: 6px;
  font-size: 13px;
  color: var(--fg-muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.rating-row {
  display: grid;
  grid-template-columns: 18px 1fr 44px;
  gap: 10px;
  align-items: center;
  margin: 4px 0;
}
.rating-num {
  font-size: 14px;
  font-weight: 600;
  color: #cfd6dd;
  line-height: 1;
  text-align: right;
}
.rating-track {
  height: 8px;
  width: 100%;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border);
  border-radius: 0;
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.4);
}
.rating-fill {
  height: 100%;
  width: 0%;
  background: var(--orange);
  border-radius: 0;
  box-shadow: none;
}
.rating-pct {
  font-size: 13px;
  color: var(--fg-muted);
  text-align: right;
  line-height: 1;
}

@media (max-width: 520px) {
  .rating-summary { grid-template-columns: 1fr; }
  .rs-left { display: flex; align-items: center; gap: 14px; }
  .rs-avg { font-size: 44px; }
  .rs-count { margin-top: 0; }
}

.reply-item { padding: 10px 0; }
.reply-item:not(:last-child) {
  border-bottom: 1px solid rgba(160, 170, 180, 0.40);
}
.reply-body { margin-top: 2px; }
.reply-meta { margin-top: 8px; }

/* =========================================================================
   Forms — search, filters
   ========================================================================= */

.input-width,
.form-control.input-width {
  width: min(var(--ui-input-max), 100%) !important;
  max-width: var(--ui-input-max) !important;
}

.main-content-centered form.form-inline {
  max-width: 640px;
  margin: 0 auto;
}

.search-form input[type="search"].form-control,
.search-form input[type="text"].form-control {
  height: var(--ui-h) !important;
  padding: 0 14px !important;
  line-height: 1 !important;
  background: var(--bg-overlay) !important;
  color: var(--fg) !important;
  border: 1px solid var(--border-strong) !important;
  border-radius: var(--radius) !important;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.65);
  outline: none !important;
  caret-color: var(--orange);
  transition: border-color 0.15s, box-shadow 0.15s, background-color 0.15s;
  flex: 1 1 auto;
  min-width: 140px;
  max-width: var(--ui-input-max);
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
}
.search-form input[type="search"].form-control::placeholder,
.search-form input[type="text"].form-control::placeholder {
  color: var(--fg-dim);
}
.search-form input[type="search"].form-control:focus,
.search-form input[type="text"].form-control:focus {
  background: var(--bg-overlay-focus) !important;
  border-color: var(--orange) !important;
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.50),
    0 0 0 2px rgba(255, 102, 0, 0.20) !important;
}

.search-form .search-btn,
.search-form .btn.search-btn {
  height: var(--ui-h) !important;
  min-height: var(--ui-h) !important;
  padding: 0 14px !important;
  line-height: 1 !important;
  border-radius: var(--radius) !important;
  white-space: nowrap;
  flex: 0 0 auto;
}

@media (max-width: 480px) {
  :root { --ui-h: 34px; }
  .search-form { gap: 8px; }
  .search-form input[type="search"].form-control,
  .search-form input[type="text"].form-control {
    min-width: 120px;
    max-width: none;
  }
  .search-form .search-btn,
  .search-form .btn.search-btn { padding: 0 10px !important; }
}

.ui-select-wrap {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  min-width: 280px;
  max-width: 100%;
}
.ui-select {
  height: var(--ui-h) !important;
  line-height: 1 !important;
  font-size: 14px !important;
  width: 100%;
  padding: 0 44px 0 12px !important;
  border-radius: var(--radius) !important;
  background: var(--bg-overlay) !important;
  color: var(--fg) !important;
  border: 1px solid var(--border-strong) !important;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.65);
  outline: none !important;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s, background-color 0.15s;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 20 20'%3E%3Cpath fill='%23ff6600' d='M5.5 7.5 10 12l4.5-4.5 1.4 1.4L10 14.8 4.1 8.9z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 14px 14px;
  font-family: var(--font-mono);
}
.ui-select-wrap:focus-within .ui-select {
  background: var(--bg-overlay-focus) !important;
  border-color: var(--orange-glow) !important;
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.70),
    0 0 0 1px rgba(255, 102, 0, 0.40),
    0 0 14px rgba(255, 102, 0, 0.40),
    0 0 24px rgba(255, 102, 0, 0.20) !important;
}
@media (max-width: 650px) {
  .ui-select-wrap { min-width: 100%; }
}
.ui-select.select-fit {
  width: auto;
  min-width: 180px;
  max-width: min(var(--ui-input-max), 100%);
  display: inline-block;
}

/* =========================================================================
   Buttons — sharper, more glow
   ========================================================================= */

.btn,
button.btn,
a.btn {
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid var(--ui-btn-border) !important;
  background: linear-gradient(180deg, var(--ui-btn-bg), var(--ui-btn-bg2)) !important;
  color: #fff !important;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 13px;
  text-decoration: none !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 6px 14px;
  min-height: 34px;
  border-radius: var(--radius);
  cursor: pointer;
  user-select: none;
  position: relative;
  transition: filter 0.12s, border-color 0.12s, box-shadow 0.12s, transform 0.06s;
}
.btn:hover,
button.btn:hover,
a.btn:hover {
  border-color: var(--orange-glow) !important;
  filter: brightness(1.10);
  box-shadow: 0 0 14px rgba(255, 102, 0, 0.25);
}
.btn:active,
button.btn:active,
a.btn:active { transform: translateY(1px); }
.btn:focus,
.btn:focus-visible,
button.btn:focus,
button.btn:focus-visible,
a.btn:focus,
a.btn:focus-visible {
  outline: none !important;
  border-color: var(--orange-glow) !important;
  box-shadow:
    0 0 0 1px rgba(255, 102, 0, 0.45),
    0 0 14px rgba(255, 102, 0, 0.28),
    0 0 24px rgba(255, 102, 0, 0.12) !important;
}

.btn-primary {
  background: linear-gradient(180deg, var(--ui-primary-1), var(--ui-primary-2)) !important;
  border-color: var(--ui-primary-border) !important;
  color: #052010 !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.55),
    inset 0 0 0 2px rgba(24, 255, 109, 0.10),
    0 0 14px rgba(24, 255, 109, 0.25),
    0 10px 22px rgba(0, 0, 0, 0.45) !important;
}
.btn-primary:hover {
  border-color: var(--ui-primary-border-hover) !important;
  filter: brightness(1.10) saturate(1.12);
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.55),
    inset 0 0 0 2px rgba(24, 255, 109, 0.20),
    0 0 0 1px rgba(24, 255, 109, 0.28),
    0 0 18px var(--ui-primary-glow),
    0 10px 22px rgba(0, 0, 0, 0.45) !important;
}

.btn-info {
  background: linear-gradient(180deg, var(--ui-info-1), var(--ui-info-2)) !important;
  border-color: var(--ui-info-border) !important;
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.55),
    inset 0 0 0 2px rgba(42, 168, 255, 0.10),
    0 0 14px rgba(42, 168, 255, 0.22),
    0 10px 22px rgba(0, 0, 0, 0.45) !important;
}
.btn-info:hover {
  border-color: var(--ui-info-border-hover) !important;
  filter: brightness(1.12) saturate(1.12);
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.55),
    inset 0 0 0 2px rgba(42, 168, 255, 0.18),
    0 0 0 1px rgba(42, 168, 255, 0.22),
    0 0 18px var(--ui-info-glow),
    0 10px 22px rgba(0, 0, 0, 0.45) !important;
}

.btn-sm {
  min-height: 28px !important;
  padding: 4px 10px !important;
  border-radius: 2px !important;
  font-size: 12px !important;
}

.btn:disabled,
button.btn:disabled,
a.btn.disabled,
.btn.disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}

/* Unclassed buttons / submit inputs (e.g. admin logout) — match secondary btn look */
button[type="submit"]:not(.btn),
button:not(.btn):not(.review-btn):not(.expander):not(summary),
input[type="submit"]:not(.btn),
input[type="button"]:not(.btn) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  padding: 0 16px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--fg);
  background: var(--bg-card-2);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, box-shadow 0.15s, transform 0.06s;
}
button[type="submit"]:not(.btn):hover,
button:not(.btn):not(.review-btn):not(.expander):not(summary):hover,
input[type="submit"]:not(.btn):hover,
input[type="button"]:not(.btn):hover {
  color: var(--orange-bright);
  border-color: var(--orange);
  box-shadow: 0 0 0 1px rgba(255, 102, 0, 0.30), 0 0 12px rgba(255, 102, 0, 0.18);
}
button[type="submit"]:not(.btn):active,
input[type="submit"]:not(.btn):active,
input[type="button"]:not(.btn):active {
  transform: translateY(1px);
}
button[type="submit"]:not(.btn):focus,
button[type="submit"]:not(.btn):focus-visible,
input[type="submit"]:not(.btn):focus,
input[type="button"]:not(.btn):focus {
  outline: none;
  border-color: var(--orange);
  box-shadow:
    0 0 0 2px rgba(255, 102, 0, 0.22);
}

button[type="submit"].btn-cta,
a.btn-cta {
  background: linear-gradient(180deg, var(--ui-primary-1), var(--ui-primary-2)) !important;
  border: 0 !important;
}

/* =========================================================================
   Generic form (non ui-form)
   ========================================================================= */

.form-group { margin: 0 0 14px; }
.form-group label {
  display: block;
  margin: 0 0 6px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.85rem;
  color: var(--fg-muted);
}

.text-danger,
.alert-danger { color: var(--red); }

.main-content-centered form:not(.ui-form) .form-control,
.main-content-centered form:not(.ui-form) select:not(.ui-select):not(.ui-control),
.main-content-centered form:not(.ui-form) textarea {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  border-radius: var(--radius);
  background: rgba(0, 0, 0, 0.55);
  color: var(--fg);
  border: 1px solid var(--border-strong);
  outline: none;
  padding: 10px 12px;
  font-size: 16px;
  line-height: 1.25;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2) inset;
  transition: border-color 0.15s, box-shadow 0.15s;
  font-family: var(--font-sans);
}
.main-content-centered form:not(.ui-form) .form-control.input-width,
.main-content-centered form:not(.ui-form) textarea.input-width {
  width: min(var(--ui-input-max), 100%) !important;
  max-width: var(--ui-input-max) !important;
}
.main-content-centered form:not(.ui-form) select:not(.ui-select):not(.ui-control) {
  height: 44px !important;
  min-height: 44px !important;
  max-height: 44px !important;
  appearance: none;
  -webkit-appearance: none;
  padding-right: 44px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 20 20'%3E%3Cpath fill='%23ff6600' d='M5.5 7.5 10 12l4.5-4.5 1.4 1.4L10 14.8 4.1 8.9z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 14px 14px;
}
.main-content-centered form:not(.ui-form) select.select-fit {
  width: auto !important;
  min-width: 180px;
  max-width: min(var(--ui-input-max), 100%);
  display: inline-block;
}
.main-content-centered form:not(.ui-form) textarea {
  min-height: 96px;
  resize: vertical;
  font-family: var(--font-sans);
}
.main-content-centered form:not(.ui-form) .form-control:focus,
.main-content-centered form:not(.ui-form) select:not(.ui-select):not(.ui-control):focus,
.main-content-centered form:not(.ui-form) textarea:focus {
  border-color: var(--orange-glow);
  box-shadow:
    0 0 0 3px rgba(255, 102, 0, 0.20),
    0 0 14px rgba(255, 102, 0, 0.18),
    0 0 0 1px rgba(0, 0, 0, 0.2) inset;
}

.ui-checks .ui-check input[type="checkbox"],
.ui-checks .ui-check input[type="radio"] {
  accent-color: var(--orange);
  -webkit-appearance: auto;
  appearance: auto;
}

/* =========================================================================
   Filter form / fieldsets
   ========================================================================= */

form.filter-form.ui-form .ui-fieldset {
  background-color: var(--bg-card-2);
  border: 1px solid var(--orange) !important;
  border-radius: var(--radius) !important;
  padding: 14px 14px 12px !important;
}

form.filter-form.ui-form .ui-legend {
  display: inline-block;
  padding: 2px 12px !important;
  border-radius: var(--radius-xs);
  color: var(--orange-bright) !important;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid var(--orange);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.78rem;
  font-family: var(--font-mono);
}

.ui-form { color: var(--fg); }

.ui-fieldset {
  border: 1px solid var(--border-strong) !important;
  border-radius: var(--radius) !important;
  padding: 12px !important;
  margin: 0 0 12px !important;
  background: rgba(20, 20, 20, 0.5);
}

.ui-legend {
  padding: 0 8px !important;
  color: var(--fg);
  font-weight: 700;
  letter-spacing: 0.04em;
}

.ui-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  align-items: center;
  margin-top: 6px;
}
.ui-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  cursor: pointer;
  user-select: none;
  color: var(--fg);
}
.ui-form input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--orange);
}
.ui-form input[type="checkbox"]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(255, 102, 0, 0.40);
  border-radius: 2px;
}

/* =========================================================================
   HR dividers
   ========================================================================= */

hr {
  border: 0;
  height: 1px;
  margin: 14px 0;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 102, 0, 0.20),
    rgba(255, 102, 0, 0.20),
    transparent
  );
  opacity: 0.95;
}
.sponsor-card hr,
.sponsored-section hr,
.ui-fieldset hr {
  margin: 12px 0;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 102, 0, 0.40),
    rgba(255, 102, 0, 0.40),
    transparent
  );
}
hr.hr-accent {
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--orange),
    rgba(255, 102, 0, 0.30),
    var(--orange),
    transparent
  );
}
hr.hr-tight { margin: 8px 0; }

/* =========================================================================
   Lists
   ========================================================================= */

ul.list-unstyled { padding-left: 0; margin-left: 15px; }
.list-unstyled li { list-style: none; padding-bottom: 15px; }

/* =========================================================================
   Badges
   ========================================================================= */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.72rem;
  line-height: 1.1;
  padding: 0.22rem 0.55rem;
  border-radius: var(--radius-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  border: 1px solid transparent;
  font-family: var(--font-mono);
}
.badge.bg-success {
  background: rgba(25, 135, 84, 0.20);
  color: #4ade80;
  border-color: rgba(25, 135, 84, 0.55);
  box-shadow: 0 0 8px rgba(25, 135, 84, 0.20);
}
.badge.bg-warning {
  background: rgba(255, 193, 7, 0.20);
  color: #ffc107;
  border-color: rgba(255, 193, 7, 0.55);
}
.badge.bg-info {
  background: rgba(13, 110, 253, 0.22);
  color: #6ea8ff;
  border-color: rgba(13, 110, 253, 0.55);
}
.bg-success {
  display: inline-block;
  font-size: 0.72rem;
  padding: 0.18rem 0.45rem;
  line-height: 1.1;
  border-radius: var(--radius-xs);
  font-weight: 600;
  background: #198754;
  color: #fff;
}
.bg-orange { background-color: #fd7e14 !important; }
.warning-color { color: var(--red) !important; }

.review-tags { display: inline; margin-left: 0.25rem; }
.review-tags .badge {
  margin: 0 0.15em;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.22rem 0.5rem;
}
.review-tags .badge:hover { filter: brightness(1.10); }
.review-tags .badge.badge-dot::before {
  content: "";
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.9;
  box-shadow: 0 0 6px currentColor;
}

/* =========================================================================
   Misc
   ========================================================================= */

.search-top-align { float: right; }
.clear-both { clear: both; }
.orange-text { color: var(--orange); }

.demo-filler {
  height: 140vh;
  margin-top: 1rem;
  border-radius: var(--radius);
  background: repeating-linear-gradient(
    0deg,
    rgba(255, 255, 255, 0.03),
    rgba(255, 255, 255, 0.03) 12px,
    rgba(255, 255, 255, 0.015) 12px,
    rgba(255, 255, 255, 0.015) 24px
  );
}

/* Mobile nav home button */
.mobile-nav-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
}
.mobile-nav-summary::-webkit-details-marker { display: none; }
.mobile-nav-summary::marker { content: ""; }
.mobile-nav-home {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  border-radius: var(--radius);
  line-height: 0;
  text-decoration: none;
  transition: background-color 0.12s;
}
.mobile-nav-home:hover { background: var(--orange-soft); }
.mobile-nav-home-logo {
  display: block;
  width: 28px;
  height: 28px;
  object-fit: contain;
}

/* =============================================================================
   Directory Filter — card grid redesign (2026-05-31)
   Append to your main stylesheet (2026-05-28_3.css) or load as a 2nd <link>.
   Reuses existing theme tokens: --orange, --green, --bg-card, --border, etc.
   ============================================================================= */

:root {
  --filter-sidebar-w: 230px;
  --card-min: 300px;
  --card-gap: 12px;
}

/* ---- Full-bleed shell: use the entire viewport width like kycnot.me ---- */
.main-content-wide {
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 1rem clamp(12px, 1.5vw, 24px) 2rem;
}
.filter-shell { width: 100%; }

/* ---- Two-column layout: sidebar + results ---- */
.filter-layout {
  display: grid;
  grid-template-columns: var(--filter-sidebar-w) minmax(0, 1fr);
  gap: clamp(16px, 2vw, 28px);
  align-items: start;
  margin-top: 0.5rem;
}

/* =========================================================================
   Sidebar
   ========================================================================= */
.filter-sidebar {
  position: sticky;
  top: 12px;
  align-self: start;
  max-height: calc(100vh - 24px);
  overflow-y: auto;
  overflow-x: hidden;            /* never show a horizontal scrollbar */
  background: var(--bg-panel, #181818);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg, 12px);
  padding: 14px;
  scrollbar-width: thin;
  box-sizing: border-box;
}
/* every child stays within the sidebar width */
.filter-sidebar * { box-sizing: border-box; max-width: 100%; }
/* fieldsets default to min-inline-size:min-content, which refuses to shrink
   below their content's intrinsic width (e.g. the search box) and causes the
   horizontal scrollbar. Force them to be allowed to shrink. */
.filter-sidebar .ui-fieldset {
  min-width: 0;
  min-inline-size: 0;
  background: rgba(10, 10, 10, 0.35);
}
.filter-sidebar .ui-fieldset:last-of-type { margin-bottom: 0 !important; }
.filter-sidebar .ui-legend { white-space: nowrap; }

.filter-sidebar-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-divider);
}
.filter-sidebar-title {
  font-family: var(--font-mono);
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  font-size: 0.85rem;
  color: var(--orange);
}

/* Stacked (vertical) checkboxes for the narrow sidebar */
.ui-checks-stack { flex-direction: column; gap: 8px; align-items: stretch; }

/* Tags: show the first 6, expand to the rest via a pure-CSS toggle (no scroll). */
.dir-tags { flex-direction: column; gap: 8px; align-items: stretch; }
.dir-tags .ui-check:nth-child(n+7) { display: none; }
#show-all-tags:checked ~ .dir-tags .ui-check { display: inline-flex; }

.dir-tags-toggle { position: absolute; width: 0; height: 0; opacity: 0; pointer-events: none; }
.dir-tags-more {
  display: inline-block;
  margin-top: 10px;
  cursor: pointer;
  user-select: none;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--cyan);
}
.dir-tags-more::before { content: "+ Show all tags"; }
#show-all-tags:checked ~ .dir-tags-more::before { content: "\2212 Show fewer"; }
.dir-tags-more:hover { color: var(--cyan-hover); text-decoration: underline; }

/* Full-width selects inside the sidebar */
.filter-sidebar .ui-select-wrap { min-width: 0; width: 100%; }
.filter-sidebar select.ui-select,
.filter-sidebar select.select-fit { width: 100%; max-width: 100%; min-width: 0; }

/* Guarantee the custom dropdown caret shows (some browsers/overrides drop the
   theme's background-image arrow; re-assert it here with !important). */
.filter-sidebar select.ui-select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 36px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 20 20'%3E%3Cpath fill='%23ff6600' d='M5.5 7.5 10 12l4.5-4.5 1.4 1.4L10 14.8 4.1 8.9z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  background-size: 13px 13px !important;
}

.filter-actions { margin-top: 14px; }
.filter-actions .btn-cta { width: 100%; justify-content: center; }

/* Sidebar search box — must shrink to fit the column (size="1" + min-width:0). */
.dir-search-input {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  height: 30px;
  padding: 0 10px;
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  color: var(--fg);
  background: var(--bg-overlay, rgba(18,18,18,0.92));
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm, 5px);
  outline: none;
  caret-color: var(--orange);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.55);
  -webkit-appearance: none;
  appearance: none;
}
/* hide the native search "clear" control that can overflow the small box */
.dir-search-input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.dir-search-input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
.dir-search-input::placeholder { color: var(--fg-dim); }
.dir-search-input:focus {
  border-color: var(--orange);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.5), 0 0 0 2px rgba(255,102,0,0.20);
}

/* Active-search chip in the results bar */
.results-search-chip {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--orange);
  background: var(--orange-soft);
  border: 1px solid var(--orange-mid);
  border-radius: var(--radius-pill, 999px);
  padding: 2px 10px;
  text-decoration: none;
  white-space: nowrap;
}
.results-search-chip:hover { color: var(--orange-bright); border-color: var(--orange); text-decoration: none; }

/* =========================================================================
   Results column header bar
   ========================================================================= */
.filter-results { min-width: 0; }

.results-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0 0 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-divider);
}
.results-count {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--fg);
}
.results-page {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--fg-dim);
}
/* No-JS toggle: the hidden checkbox carries the open/closed state; the
   <label class="filter-toggle"> flips it, and a :checked sibling selector
   (see the media query below) reveals the sidebar. No script required. */
.filter-open-toggle { position: absolute; width: 0; height: 0; opacity: 0; pointer-events: none; }

.filter-toggle {
  display: none;                 /* shown only on small screens */
  align-items: center;
  margin-left: auto;
  height: var(--ui-h, 32px);
  padding: 0 14px;
  border-radius: var(--radius-pill, 999px);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--orange);
  background: var(--orange-soft);
  border: 1px solid var(--orange-mid);
  cursor: pointer;
  user-select: none;
}
#filter-open:checked ~ .filter-results .filter-toggle { color: var(--fg); background: rgba(255,255,255,0.06); }

.results-empty {
  padding: 2rem 1rem;
  text-align: center;
  color: var(--fg-muted);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-lg, 12px);
}

/* =========================================================================
   Card grid
   ========================================================================= */
:root {
  --card-height: 296px;   /* every card is exactly this tall */
}
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--card-min), 1fr));
  grid-auto-rows: var(--card-height);   /* uniform row height across the whole grid */
  gap: var(--card-gap);
  align-items: stretch;
}

/* Each card exposes a single --accent (solid) + --accent-rgb (triple). Status
   classes override them. The border, the resting ring, AND the hover glow all
   read these vars, so the hover effect is identical in mechanism for every
   card — sponsored, verified, admitted, whatever — and can never be clobbered
   by a competing :hover rule. */
.dir-card {
  --accent: var(--border-strong);
  --accent-rgb: 255, 102, 0;     /* default glow = orange */
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 13px 11px;
  height: 100%;            /* fill the fixed grid row */
  overflow: hidden;        /* clip any content beyond the fixed height */
  background: var(--bg-card, #1d1d1d);
  border: 1px solid var(--border);
  border-radius: var(--radius, 8px);
  transition: border-color 0.14s ease, box-shadow 0.14s ease, transform 0.08s ease;
}

/* Resting status accent: coloured border + faint ring. */
.dir-card.is-verified     { --accent: var(--green); --accent-rgb: 24, 255, 109; }
.dir-card.is-admitted     { --accent: var(--blue);  --accent-rgb: 42, 168, 255; }
.dir-card.is-questionable { --accent: var(--red);   --accent-rgb: 255, 77, 77; }
.dir-card.is-scam         { --accent: var(--red);   --accent-rgb: 255, 77, 77; }

.dir-card.is-verified,
.dir-card.is-admitted,
.dir-card.is-questionable,
.dir-card.is-scam {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0.18);
}
.dir-card.is-scam { opacity: 0.72; }

/* HOVER — one rule, every card. Strong, clearly visible coloured glow that
   uses the card's own --accent-rgb (orange by default, green for verified,
   etc.). Because it's a single selector at the same specificity applied to all
   cards, nothing overrides it. */
.dir-card:hover {
  border-color: var(--accent);
  box-shadow:
    0 0 0 1px rgba(var(--accent-rgb), 0.55),
    0 0 18px -2px rgba(var(--accent-rgb), 0.55),
    0 10px 28px -10px rgba(var(--accent-rgb), 0.6);
  transform: translateY(-2px);
}

/* Sponsored ring drawn as a pseudo-element so it NEVER competes with the
   box-shadow hover glow. The card keeps its status colour + status hover glow,
   and also shows this orange inner ring + the SPONSORED badge. */
.dir-card.is-featured::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 3px rgba(255, 102, 0, 0.55);
  pointer-events: none;
  z-index: 1;
}

/* The theme stylesheet applies an entrance animation / opacity reveal to
   sponsor elements (the network-independent ~0.5s "pop-in" of sponsored cards
   in the grid is a CSS animation, not a load delay). The grid's sponsored
   cards are matching that rule. Kill ONLY the inherited animation so they
   render in place immediately — without disturbing the hover lift (transform)
   or the scam-dimming (opacity), which are intentional. */
.card-grid .dir-card.is-featured {
  animation: none !important;
}
.card-grid .dir-card.is-featured:not(.is-scam) {
  opacity: 1 !important;
}

/* Sponsored badge — now sits inline in the title row (under the name on wrap),
   not absolutely positioned over the score chip. */
.dir-badge-featured {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--orange);
  background: var(--orange-soft);
  border: 1px solid var(--orange-mid);
  padding: 2px 7px;
  border-radius: var(--radius-pill, 999px);
  line-height: 1.4;
}

/* header: title + score chip */
.dir-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.dir-title-wrap {
  display: flex;
  flex-direction: column;   /* name row, then the Sponsored badge underneath */
  align-items: flex-start;
  gap: 5px;
  min-width: 0;
  padding-right: 4px;
}
.dir-name-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}
.dir-status-icon { font-size: 1rem; line-height: 1; }
.dir-name {
  font-weight: 700;
  font-size: 1.04rem;       /* slightly bigger than before */
  letter-spacing: 0.01em;
  word-break: break-word;
}
.dir-name:hover { text-decoration: underline; text-underline-offset: 2px; }
.dir-card.is-verified .dir-name { color: var(--green); }
.dir-card.is-admitted .dir-name { color: var(--blue); }
.dir-card.is-questionable .dir-name { color: var(--red); }
.dir-name.is-scam-name { color: var(--fg-dim); }
/* Explicit dimensions (not just max-height) so the browser reserves the flag's
   box BEFORE the image downloads. With no width/height, each <img> is a
   zero-size box until the PNG loads, then it grows and everything reflows —
   that's the "snap into place after load" glitch. Flag PNGs are 4:3. */
.dir-title-wrap .country-flag {
  width: 18px;
  height: 13px;
  object-fit: contain;
  vertical-align: middle;
}

/* score chip (top-right) */
.dir-score {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: var(--radius, 8px);
  background: linear-gradient(160deg, rgba(255, 102, 0, 0.22), rgba(255, 102, 0, 0.06));
  border: 1px solid var(--orange-mid);
}
.dir-score.is-none {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--border);
}
.dir-score-num {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1;
  color: var(--orange);
}
.dir-score.is-none .dir-score-num { color: var(--fg-dim); }

/* rating row under the title */
.dir-rating-link { text-decoration: none; display: inline-flex; }
.dir-rating-link:hover .rating-count { text-decoration: underline; }
.dir-rating-link .rating-wrapper { padding-bottom: 0; }
.dir-rating-link .rating-count { font-size: 0.78rem; color: var(--fg-dim); }

/* breadcrumb / category chips */
.dir-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 6px;
  font-size: 0.78rem;
}
.dir-chip {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  color: var(--cyan);
  text-decoration: none;
  padding: 2px 8px;
  border-radius: var(--radius-pill, 999px);
  border: 1px solid var(--border);
  background: rgba(0, 216, 255, 0.06);
}
.dir-chip:hover { color: var(--cyan-hover); border-color: var(--cyan-glow); text-decoration: none; }
.dir-chip-sep { color: var(--fg-dim); }

/* meta chips (founded / location / processor) — single clipped row */
.dir-meta {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  overflow: hidden;
  max-height: 22px;
}
.dir-meta-chip {
  flex: 0 0 auto;
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--fg-muted);
  padding: 2px 7px;
  border-radius: var(--radius-sm, 5px);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-divider);
}

/* description — clamp to keep cards even height */
.dir-desc {
  margin: 2px 0 0;
  font-size: 0.82rem;
  line-height: 1.4;
  color: var(--fg-muted);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.dir-note {
  margin: 0;
  font-size: 0.78rem;
  font-style: italic;
  color: var(--fg-dim);
  display: -webkit-box;
  -webkit-line-clamp: 2;      /* truncate at the nearest line, keep cards even */
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.dir-note .dir-note-label { font-style: normal; font-weight: 600; }
.dir-note.is-warning { color: var(--red); }
.dir-note.is-warning .dir-note-label { color: var(--red); }

/* Footer link buttons — pinned to the bottom; uniform fixed-width buttons that
   pack left and wrap cleanly. Every "Website"/"Tor"/"I2P"/"Details" button is
   the same size across all cards, so they line up column-to-column when counts
   match and never leave a lone stretched button on its own row. */
.dir-card-foot {
  display: flex;
  flex-wrap: wrap;
  flex-shrink: 0;            /* never compress the action row */
  gap: 6px;
  margin-top: auto;          /* pushes the row to the bottom */
  padding-top: 10px;
  border-top: 1px solid var(--border-divider);
}
.dir-link-btn {
  flex: 0 0 auto;
  min-width: 66px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-decoration: none;
  padding: 5px 12px;
  border-radius: var(--radius-pill, 999px);
  color: var(--fg);
  background: var(--ui-btn-bg2, #141414);
  border: 1px solid var(--border-strong);
  transition: color 0.12s, border-color 0.12s, background-color 0.12s, box-shadow 0.12s;
}
.dir-link-btn:hover {
  color: var(--orange);
  border-color: var(--orange-glow);
  background: var(--orange-soft);
  text-decoration: none;
  box-shadow: 0 0 10px -2px rgba(255, 102, 0, 0.4);
}
.dir-link-tor:hover { color: var(--cyan); border-color: var(--cyan-glow); background: var(--cyan-soft); box-shadow: 0 0 10px -2px var(--cyan-glow); }

/* Drawer backdrop + close button: hidden on desktop, enabled in the mobile
   media query below. The backdrop and close are both <label for="filter-open">,
   so tapping either toggles the same checkbox that the Filters button drives. */
.filter-backdrop { display: none; }
.filter-drawer-close {
  display: none;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin-left: 8px;
  border-radius: var(--radius-sm, 5px);
  border: 1px solid var(--border-strong);
  background: rgba(0, 0, 0, 0.4);
  color: var(--fg-muted);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  user-select: none;
  flex: 0 0 auto;
}
.filter-drawer-close:hover {
  color: var(--orange);
  border-color: var(--orange-glow);
  background: var(--orange-soft);
}

/* =========================================================================
   Responsive: turn the sidebar into a slide-in drawer on small screens.
   On mobile the filters used to render BELOW the results (order: 2), so you
   had to scroll to the bottom to reach them. Instead, the "Filters" button now
   opens an off-canvas drawer that slides in from the left over the content,
   with a tap-to-close backdrop. Pure CSS via the #filter-open checkbox hack.
   ========================================================================= */
@media (max-width: 900px) {
  .filter-layout { grid-template-columns: 1fr; }

  .filter-toggle { display: inline-flex; align-items: center; }

  /* Drawer: fixed, full-height, parked off-canvas to the left until opened. */
  .filter-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: min(86vw, 340px);
    height: 100dvh;
    max-height: 100dvh;
    margin: 0;
    border-radius: 0;
    border-top: 0;
    border-bottom: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    z-index: 1001;
    transform: translateX(-100%);
    transition: transform 0.24s ease;
    box-shadow: 8px 0 40px rgba(0, 0, 0, 0.55);
  }
  #filter-open:checked ~ .filter-sidebar { transform: translateX(0); }

  /* Backdrop: a full-screen label that closes the drawer when tapped. */
  .filter-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(0, 0, 0, 0.55);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    cursor: pointer;
  }
  #filter-open:checked ~ .filter-backdrop { display: block; }

  /* Close (×) button shown only inside the mobile drawer. */
  .filter-drawer-close { display: inline-flex; }
}

/* Lock background scroll while the drawer is open (modern browsers). */
@supports selector(body:has(*)) {
  @media (max-width: 900px) {
    body:has(#filter-open:checked) { overflow: hidden; }
  }
}

@media (max-width: 480px) {
  :root { --card-min: 100%; }
  .card-grid { grid-auto-rows: auto; }   /* single column: size to content */
  .dir-card { height: auto; }
  .main-content-wide { padding-left: 10px; padding-right: 10px; }
}

/* =========================================================================
   Main Sponsors block on the FILTER page
   -------------------------------------------------------------------------
   The filter page is full-bleed (.main-content-wide = 100% width), but the
   homepage renders the sponsors inside a ~75rem content column. Left
   unconstrained, the same .sponsors-grid stretches its 5 cards far wider here
   than on the homepage. Cap the sponsors section to the homepage's column
   width and pin each card to its natural size so both pages look identical.
   Scoped to .main-content-wide so the homepage is unaffected.
   ========================================================================= */
.main-content-wide section.sponsors {
  max-width: 75rem;
  margin-left: auto;
  margin-right: auto;
}
/* Use an explicit grid instead of a growing flexbox. Flexbox with flex-grow
   resolves widths in a second layout pass, which is what makes the cards
   visibly "snap" into place a beat after the page paints. CSS grid computes
   the final column widths in one pass, so there's no settling/jump. Five equal
   columns matches the 5-slot Main Sponsors layout; it collapses responsively. */
.main-content-wide .sponsors-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1rem;
  justify-content: center;
  align-items: stretch;
}
.main-content-wide .sponsors-grid .sponsor-card {
  flex: none;          /* override the theme's flex: 1 1 0 growing behavior */
  width: 100%;
  max-width: none;
  min-width: 0;
  margin: 0;
}
@media (max-width: 1100px) {
  .main-content-wide .sponsors-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 760px) {
  .main-content-wide .sponsors-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .main-content-wide .sponsors-grid { grid-template-columns: 1fr; }
}

/* Sponsor-card flags: same reflow fix. The theme renders these with no
   width/height, so reserve their box explicitly. Scoped to the filter page. */
.main-content-wide .sponsor-card .country-flag {
  width: 18px;
  height: 13px;
  object-fit: contain;
  vertical-align: middle;
}

/* =============================================================================
   Monerica — Directory Filter card & sidebar refinements (2026-06-02)
   -----------------------------------------------------------------------------
   APPEND this AFTER the "Directory Filter — card grid redesign (2026-05-31)"
   block in your main stylesheet. It deliberately overrides those rules (same
   selectors, later position = wins). Then re-minify, OR load it as a 2nd
   <link> placed after your existing min.css.

   What it changes:
   • Status (verified / admitted / questionable / scam) is shown ONLY by the
     LEFT edge ribbon colour + the icon by the name. No more full coloured
     border or status ring.
   • Sponsored is shown ONLY by an orange bar along the TOP edge. The old orange
     inset ring (which overlapped the green status colour) is gone, so orange
     and green never fight.
   • Listing names are ALWAYS blue (link colour) — never green/blue/red.
   • The filter sidebar is more compact (smaller text/checkboxes/spacing) so it
     fits without scrolling on short screens.
   • Fewer tags shown by default (5, then "Show all tags").
   ============================================================================= */

/* -----------------------------------------------------------------------------
   1. Card: neutral box. Status = a single LEFT ribbon. Sponsored = TOP bar.
   ----------------------------------------------------------------------------- */
.dir-card {
  --accent: var(--border-strong);   /* default (no status) = grey */
  --accent-rgb: 255, 102, 0;        /* default glow */
  border: 1px solid var(--border);  /* uniform neutral border on all 4 sides */
  border-radius: var(--radius, 8px);
  overflow: hidden;                  /* clips the edge ribbons cleanly */
}

/* Neutralise the old full-border + faint ring treatment per status. */
.dir-card.is-verified,
.dir-card.is-admitted,
.dir-card.is-questionable,
.dir-card.is-scam {
  border-color: var(--border);
  box-shadow: none;
}

/* Status colours now feed ONLY the left ribbon + the hover glow. */
.dir-card.is-verified     { --accent: var(--green); --accent-rgb: 24, 255, 109; }
.dir-card.is-admitted     { --accent: var(--blue);  --accent-rgb: 42, 168, 255; }
.dir-card.is-questionable { --accent: var(--red);   --accent-rgb: 255, 77, 77; }
.dir-card.is-scam         { --accent: var(--red);   --accent-rgb: 255, 77, 77; }

/* LEFT status ribbon — replaces the coloured border. One side, every card. */
.dir-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 4px;
  background: var(--accent);
  z-index: 2;
  pointer-events: none;
}

/* TOP orange bar = sponsored. Repurposes the old ::after (was an inset ring).
   All the old ::after props are explicitly reset so nothing lingers. */
.dir-card.is-featured::after {
  content: "";
  position: absolute;
  inset: auto;            /* clear the old inset:0 */
  top: 0;
  left: 0;
  right: 0;
  bottom: auto;
  height: 4px;
  width: auto;
  background: var(--orange);
  box-shadow: none;       /* clear the old inset 3px ring */
  border-radius: 0;
  z-index: 3;             /* sits over the left ribbon at the shared corner */
  pointer-events: none;
}

/* Hover: subtle lift + a glow in the card's OWN status colour (orange on the
   no-status default). Single rule, identical mechanism for every card. */
.dir-card:hover {
  border-color: rgba(var(--accent-rgb), 0.55);
  box-shadow:
    0 0 0 1px rgba(var(--accent-rgb), 0.35),
    0 8px 22px -10px rgba(var(--accent-rgb), 0.55);
  transform: translateY(-2px);
}

/* -----------------------------------------------------------------------------
   2. Listing names are ALWAYS blue (the link colour) — status comes from the
      icon + the side ribbon, not the text colour.
   ----------------------------------------------------------------------------- */
.dir-name,
.dir-card.is-verified .dir-name,
.dir-card.is-admitted .dir-name,
.dir-card.is-questionable .dir-name,
.dir-card.is-scam .dir-name,
.dir-name.is-scam-name {
  color: var(--cyan);
}
.dir-name:hover { color: var(--cyan-hover); }

/* -----------------------------------------------------------------------------
   3. Compact filter sidebar — smaller text, checkboxes and spacing so the whole
      panel fits taller viewports without scrolling.
   ----------------------------------------------------------------------------- */
:root { --filter-sidebar-w: 200px; }

.filter-layout { gap: clamp(14px, 1.6vw, 22px); }

.filter-sidebar { padding: 10px; }

.filter-sidebar-head {
  margin-bottom: 9px;
  padding-bottom: 8px;
}
.filter-sidebar-title {
  font-size: 0.74rem;
  letter-spacing: 0.08em;
}
.filter-sidebar .ui-clear { font-size: 0.74rem; }

.filter-sidebar .ui-fieldset {
  padding: 8px 9px !important;
  margin: 0 0 8px !important;
}
.filter-sidebar .ui-legend {
  font-size: 0.64rem !important;
  padding: 1px 7px !important;
  letter-spacing: 0.06em;
}

/* checkbox rows: tighter gap, smaller boxes, smaller labels */
.filter-sidebar .ui-checks-stack { gap: 4px; }
.filter-sidebar .ui-check {
  gap: 7px;
  font-size: 0.8rem;
  line-height: 1.2;
}
.filter-sidebar .ui-check span { font-size: 0.8rem; }
.filter-sidebar .ui-form input[type="checkbox"] {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
}

/* selects + search box a touch smaller */
.filter-sidebar select.ui-select {
  height: 30px !important;
  font-size: 12px !important;
}
.filter-sidebar .dir-search-input {
  height: 28px;
  font-size: 0.74rem;
}

/* tighter Apply button */
.filter-actions { margin-top: 10px; }
.filter-actions .btn-cta {
  min-height: 30px;
  font-size: 12px;
}

/* -----------------------------------------------------------------------------
   4. Show fewer tags by default (5, then expand). The existing 2026-05-31 rule
      shows 6; this tightens it to 5. "Show all tags" still reveals the rest.
   ----------------------------------------------------------------------------- */
.dir-tags .ui-check:nth-child(n+6) { display: none; }
#show-all-tags:checked ~ .dir-tags .ui-check { display: inline-flex; }