/* ============================================================
   DirectoryDude — 2010s Toplist Directory Style
   ============================================================ */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
  background: #f4f4f4;
  color: #333;
  font-size: 13px;
  line-height: 1.4;
}
a { color: inherit; text-decoration: none; }
ol, ul { margin: 0; padding: 0; list-style: none; }

/* ===================== TOP BAR ===================== */
.topbar {
  background:
    radial-gradient(ellipse at 30% 0%, rgba(255,255,255,.18), transparent 60%),
    linear-gradient(180deg, #7a7a7a 0%, #5a5a5a 55%, #454545 100%);
  border-bottom: 1px solid #2f2f2f;
  box-shadow: inset 0 -2px 0 rgba(255,255,255,.08), 0 2px 4px rgba(0,0,0,.15);
  padding: 14px 0 0;
  position: sticky;
  top: 0;
  z-index: 100;
  overflow: visible;
}
/* A subtle elevation once the user starts scrolling, to make the sticky
   header feel like it's floating above the card grid. */
.topbar.is-stuck {
  box-shadow:
    inset 0 -2px 0 rgba(255,255,255,.08),
    0 4px 12px rgba(0,0,0,.25);
}
.topbar-inner {
  width: 1200px;
  max-width: calc(100% - 32px);
  margin: 0 auto;
  position: relative;
  padding: 4px 0 14px;
  min-height: 170px;
}

/* Logo */
.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  text-shadow:
    -2px -2px 0 #2a2a2a, 2px -2px 0 #2a2a2a,
    -2px  2px 0 #2a2a2a, 2px  2px 0 #2a2a2a,
    0 3px 0 rgba(0,0,0,.35);
  letter-spacing: -1px;
  user-select: none;
}
.logo-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px; height: 46px;
  background: transparent;
  border-radius: 50%;
  filter: drop-shadow(0 2px 0 rgba(0,0,0,.35));
  text-shadow: none;
}
.logo-mark svg { display: block; width: 46px; height: 46px; }
.logo-text {
  font-family: Impact, "Oswald", "Arial Black", sans-serif;
  font-size: 52px;
  line-height: 1;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 3px;
}
.logo-accent {
  color: #ffb347;
}

/* Promo bubble */
.topbar-promo {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-30%);
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 3;
}
.promo-bubble {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #ffffff;
  color: #333;
  border: 2px solid #ff8a00;
  border-radius: 12px;
  padding: 8px 14px;
  max-width: 440px;
  box-shadow: 0 3px 0 rgba(0,0,0,.2);
  position: relative;
}
.promo-bubble::after {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 30px;
  width: 18px; height: 18px;
  background: #fff;
  border-right: 2px solid #ff8a00;
  border-bottom: 2px solid #ff8a00;
  transform: rotate(45deg);
}
.promo-bell {
  font-size: 22px;
}
.promo-text { display: flex; flex-direction: column; line-height: 1.25; }
.promo-text strong { color: #ff8a00; font-size: 14px; }
.promo-text span { color: #555; font-size: 12px; }
.promo-cta {
  margin-top: 12px;
  background: #fff;
  color: #ff8a00;
  border: 2px solid #ff8a00;
  border-radius: 14px;
  padding: 4px 14px;
  font-weight: 900;
  font-size: 12px;
  letter-spacing: .5px;
  box-shadow: 0 2px 0 rgba(0,0,0,.2);
}
.promo-cta:hover { background: #fff6e8; }

/* Search */
.search {
  margin-top: 18px;
  display: flex;
  width: 460px;
  background: #fff;
  border: 2px solid #2c2c2c;
  border-radius: 22px;
  overflow: visible;
  box-shadow: 0 2px 0 rgba(0,0,0,.25);
  position: relative;
}
.search input {
  flex: 1;
  border: 0;
  padding: 9px 16px;
  font-size: 14px;
  color: #333;
  outline: none;
  background: transparent;
  border-radius: 20px 0 0 20px;
  min-width: 0;
}
.search input::placeholder { color: #aaa; }
.search button[type="submit"] {
  width: 52px;
  border: 0;
  border-left: 2px solid #2c2c2c;
  background: linear-gradient(180deg, #ffb347, #ff8a00);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0 20px 20px 0;
  transition: filter .08s ease;
}
.search button[type="submit"]:hover { filter: brightness(1.05); }

.search-clear {
  position: absolute;
  right: 60px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px; height: 22px;
  border: 0;
  border-radius: 50%;
  background: #c9c9c9;
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background .08s ease, transform .08s ease;
}
.search-clear:hover { background: #888; transform: translateY(-50%) scale(1.08); }
.search-clear[hidden] { display: none; }

.search-status {
  margin: 8px 0 0;
  font-size: 12px;
  color: #fff;
  background: rgba(0,0,0,.35);
  display: inline-block;
  padding: 4px 10px;
  border-radius: 12px;
  font-weight: 700;
  letter-spacing: .3px;
}

/* Top nav */
.topbar-nav {
  position: absolute;
  right: 0;
  top: 90px;
  display: flex;
  gap: 10px;
}
.nav-pill {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #2c2c2c;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  box-shadow: 0 2px 0 rgba(0,0,0,.25);
  transition: transform .08s ease, filter .08s ease;
}
.nav-pill:hover { transform: translateY(-1px); filter: brightness(1.05); }
.nav-pill.orange { background: linear-gradient(180deg, #ffb347, #ff8a00); }

/* =============== Custom Language Switcher =============== */
.lang-switch {
  position: absolute;
  top: 8px;
  right: 0;
  z-index: 20;
  font-family: inherit;
}
.lang-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 10px;
  border: 2px solid #2c2c2c;
  border-radius: 16px;
  background: #fff;
  color: #333;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .4px;
  cursor: pointer;
  box-shadow: 0 2px 0 rgba(0,0,0,.25);
  transition: transform .08s ease, filter .08s ease, box-shadow .08s ease;
}
.lang-btn:hover,
.lang-switch.is-open .lang-btn {
  transform: translateY(-1px);
  filter: brightness(1.04);
  box-shadow: 0 3px 0 rgba(0,0,0,.28);
}
.lang-btn .lang-globe { color: #ff8a00; }
.lang-btn .lang-label { min-width: 18px; text-align: center; }
.lang-btn .lang-chevron {
  color: #777;
  transition: transform .12s ease;
}
.lang-switch.is-open .lang-btn .lang-chevron { transform: rotate(180deg); }

.lang-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 152px;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: #fff;
  border: 1px solid #d9d9d9;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity .12s ease, transform .12s ease, visibility 0s linear .12s;
  z-index: 30;
}
.lang-switch.is-open .lang-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity .12s ease, transform .12s ease;
}
.lang-option {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 7px 10px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #333;
  font: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
  transition: background .08s ease, color .08s ease;
}
.lang-option:hover,
.lang-option:focus {
  background: #fff3e0;
  color: #c86a00;
  outline: none;
}
.lang-option.is-active {
  background: #fff0d6;
  color: #c86a00;
  font-weight: 800;
}
.lang-option.is-active::before {
  content: "✓";
  margin-right: 8px;
  font-weight: 900;
  color: #ff8a00;
}
.lang-option:not(.is-active)::before {
  content: "";
  display: inline-block;
  width: 16px;
  margin-right: 0;
}

/* Loading state — shown while the translation engine is fetching.
   We hide the chevron + globe and show a small CSS spinner in their
   place; the button becomes non-interactive so users can't trigger a
   second translation mid-flight. */
.lang-switch.is-loading .lang-btn {
  cursor: progress;
  opacity: .85;
  pointer-events: none;
}
.lang-switch.is-loading .lang-globe,
.lang-switch.is-loading .lang-chevron { display: none; }
.lang-spinner {
  display: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid rgba(255,138,0,.25);
  border-top-color: #ff8a00;
  animation: langspin .7s linear infinite;
}
.lang-switch.is-loading .lang-spinner { display: inline-block; }
@keyframes langspin {
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .lang-spinner { animation-duration: 1.6s; }
}

/* =============== i18n (non-Google translation engine) ===============
   The site is translated by a small client-side engine at the bottom
   of index.html that walks text nodes, calls the free MyMemory API,
   and caches results in localStorage. There are no Google iframes or
   banners to hide. Brand / site names can be protected by adding the
   class "brand-lock" (or data-i18n-lock) to any element — its text
   will be left untouched during translation. */
.brand-lock,
[data-i18n-lock] {
  /* No visual change; this class only tells the translation engine
     to skip the element. */
}

/* ===================== MAIN / GRID ===================== */
.container {
  width: 1200px;
  max-width: calc(100% - 24px);
  margin: 14px auto 0;
  padding-bottom: 20px;
}
.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  align-items: stretch;
}

/* Card */
.card {
  background: #ffffff;
  border: 1px solid #d9d9d9;
  border-radius: 10px;
  padding: 12px 12px 10px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 1px 0 rgba(0,0,0,.03);
  position: relative;
  min-width: 0;
}
.card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid #eee;
  margin-bottom: 8px;
}
.cat-icon {
  width: 34px; height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 34px;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0;
  padding: 0;
  color: #fff;
  filter: drop-shadow(0 2px 0 rgba(0,0,0,.22));
}
.cat-icon svg {
  width: 100%; height: 100%;
  display: block;
}
.cat-title {
  margin: 0;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: #333;
}
.cat-desc {
  margin: 0 0 8px;
  color: #777;
  font-size: 11.5px;
  line-height: 1.4;
  min-height: 32px;
}
.cat-note {
  margin: 0 0 8px;
  padding: 6px 8px;
  font-size: 11px;
  line-height: 1.35;
  color: #888;
  background: #fafafa;
  border-left: 3px solid #2fb6c6;
  border-radius: 3px;
}

/* Site list */
.site-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin-bottom: 10px;
  flex: 1;
  overflow-y: auto;
  /* Cap to ~10 rows (10 * 26px line + padding).
     Longer lists scroll inside the card; shorter lists simply show all. */
  max-height: 272px;
  min-height: 0;
  scrollbar-width: thin;
  scrollbar-color: #cfcfcf transparent;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  /* Reset counter on each card so numbering is 1..N within the card */
  counter-reset: card-item;
}
/* Custom scrollbar (WebKit) */
.site-list::-webkit-scrollbar {
  width: 8px;
}
.site-list::-webkit-scrollbar-track {
  background: transparent;
}
.site-list::-webkit-scrollbar-thumb {
  background: #d4d4d4;
  border-radius: 4px;
  border: 2px solid #fff;
}
.site-list::-webkit-scrollbar-thumb:hover {
  background: #b8b8b8;
}
/* When filtering, expand the list so all matches are visible without scrolling */
.card.is-filtered .site-list {
  max-height: none;
  overflow: visible;
}
/* Shorter list (≤10) still looks fine; long list shows scrollbar naturally */
.site-list li {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  /* Room for a 28px number column; prevents the badge/text from sliding under it */
  padding: 3px 8px 3px 30px;
  font-size: 13px;
  color: #333;
  border-radius: 4px;
  transition: background .1s ease;
  min-height: 24px;
  counter-increment: card-item;
}
.site-list li:hover {
  background: #f3f3f3;
}
.site-list li:hover::before {
  content: "";
  position: absolute;
  left: 0; top: 3px; bottom: 3px;
  width: 3px;
  background: #ff8a00;
  border-radius: 2px;
  opacity: .55;
}
/* number — absolutely positioned in its own 24px column so it can't overlap the badge/text */
.site-list li::after {
  content: counter(card-item);
  position: absolute;
  left: 4px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  text-align: right;
  font-size: 10px;
  color: #aaa;
  font-weight: 700;
  font-family: "Arial Rounded MT Bold", "Helvetica Rounded", Arial, sans-serif;
  line-height: 1;
}
.badge {
  width: 14px; height: 14px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
  border: 1px solid rgba(0,0,0,.1);
}
.site-list li > .tag,
.site-list li > .flag {
  flex-shrink: 0;
}
.dot-orange { background: #f5a623; }
.dot-red    { background: #ef5350; }
.dot-pink   { background: #e94e8b; }
.dot-blue   { background: #3aa6e0; }
.dot-cyan   { background: #2fb6c6; }
.dot-green  { background: #62c451; }
.dot-purple { background: #7e6bd4; }
.dot-yellow { background: #f7c842; }
.dot-dark   { background: #444; }
.dot-gray   { background: #9aa0a6; }

.flag { font-size: 12px; }
.tag {
  display: inline-block;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .4px;
  padding: 1px 5px;
  border-radius: 3px;
  color: #fff;
  margin-left: 2px;
  line-height: 1.4;
}
.tag.hot { background: #ef5350; }
.tag.new { background: #62c451; }
.tag.ai  { background: #3aa6e0; }
.tag.vr  { background: #7e6bd4; }

/* Search filter states */
.card.is-hidden { display: none; }
.card.is-filtered.has-match {
  border-color: #ff8a00;
  box-shadow: 0 0 0 2px rgba(255,138,0,.18), 0 1px 0 rgba(0,0,0,.03);
}
mark.search-hl {
  background: #fff2a8;
  color: #1a1a1a;
  padding: 0 2px;
  border-radius: 2px;
  font-weight: 700;
}
.cat-title mark.search-hl,
.cat-desc  mark.search-hl {
  background: #fff2a8;
  color: #b35900;
  padding: 0 2px;
  border-radius: 2px;
}

/* See-all button */
.see-all {
  margin-top: auto;
  display: block;
  text-align: center;
  text-transform: uppercase;
  color: #fff;
  font-weight: 900;
  font-size: 12.5px;
  letter-spacing: .6px;
  padding: 9px 10px;
  border-radius: 8px;
  border: 1px solid rgba(0,0,0,.15);
  box-shadow: 0 2px 0 rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.25);
  transition: transform .08s ease, filter .08s ease;
  text-shadow: 0 1px 0 rgba(0,0,0,.18);
}
.see-all::after { content: " →"; }
.see-all:hover { transform: translateY(-1px); filter: brightness(1.08); }
.see-all.cyan   { background: linear-gradient(180deg, #3bc6d6, #2fb6c6); }
.see-all.blue   { background: linear-gradient(180deg, #4bb4ea, #3aa6e0); }
.see-all.green  { background: linear-gradient(180deg, #72d261, #62c451); }
.see-all.orange { background: linear-gradient(180deg, #ffb14a, #f5a623); }
.see-all.red    { background: linear-gradient(180deg, #f46a67, #ef5350); }
.see-all.purple { background: linear-gradient(180deg, #8e7ce0, #7e6bd4); }
.see-all.teal   { background: linear-gradient(180deg, #16a0a0, #0f8a8a); }

/* ===================== FOOTER ===================== */
.footer {
  background: #ff9a1f;
  background: linear-gradient(180deg, #ffae3a 0%, #ff8a00 100%);
  border-top: 3px solid #e07a00;
  padding: 18px 0 12px;
  color: #1a1a1a;
  text-align: center;
}
.footer-nav {
  width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 26px;
}
.footer-nav a {
  text-transform: uppercase;
  font-weight: 900;
  font-size: 13px;
  letter-spacing: .5px;
  padding: 4px 8px;
  border-bottom: 1px solid transparent;
}
.footer-nav a:hover { border-bottom-color: #1a1a1a; }
.footer-nav .rta {
  background: #111;
  color: #fff;
  padding: 3px 10px;
  border-radius: 3px;
  font-weight: 900;
  letter-spacing: 1px;
}
.footer-hiring {
  margin-top: 14px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.pulse-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #34d058;
  box-shadow: 0 0 0 0 rgba(52,208,88,.7);
  animation: pulse 1.6s infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(52,208,88,.7); }
  70%  { box-shadow: 0 0 0 8px rgba(52,208,88,0); }
  100% { box-shadow: 0 0 0 0 rgba(52,208,88,0); }
}
.footer-copy {
  margin-top: 10px;
  font-size: 11px;
  color: #4a2b00;
  opacity: .8;
}

/* ===================== SITE PREVIEW TOOLTIP ===================== */
.site-list li {
  cursor: pointer;
}
.site-list li:focus-visible {
  outline: 2px solid #ff8a00;
  outline-offset: 1px;
  border-radius: 4px;
}
.site-list li.is-active {
  background: #fff4e0;
}
.site-list li.is-active::before {
  content: "";
  position: absolute;
  left: 0; top: 3px; bottom: 3px;
  width: 3px;
  background: #ff8a00;
  border-radius: 2px;
}

.site-preview {
  position: fixed;
  z-index: 9999;
  max-width: 340px;
  min-width: 260px;
  background: #ffffff;
  color: #1a1a1a;
  border: 1px solid #d9d9d9;
  border-radius: 12px;
  padding: 18px 20px 16px;
  box-shadow:
    0 12px 28px rgba(0,0,0,.22),
    0 2px 6px rgba(0,0,0,.12);
  opacity: 0;
  transform: translateY(4px) scale(.98);
  pointer-events: none;
  transition: opacity .12s ease, transform .12s ease;
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}
.site-preview.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.site-preview[data-placement="top"] .sp-arrow {
  bottom: -8px;
  left: var(--sp-arrow-x, 50%);
  transform: translateX(-50%) rotate(45deg);
  border-right: 1px solid #d9d9d9;
  border-bottom: 1px solid #d9d9d9;
  box-shadow: 3px 3px 6px rgba(0,0,0,.06);
}
.site-preview[data-placement="bottom"] .sp-arrow {
  top: -8px;
  left: var(--sp-arrow-x, 50%);
  transform: translateX(-50%) rotate(45deg);
  border-left: 1px solid #d9d9d9;
  border-top: 1px solid #d9d9d9;
  box-shadow: -3px -3px 6px rgba(0,0,0,.06);
}
.sp-arrow {
  position: absolute;
  width: 14px; height: 14px;
  background: #ffffff;
}
.sp-preview-inner { position: relative; }

.sp-badge {
  display: inline-block;
  vertical-align: middle;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: #f5a623;
  margin-right: 10px;
  border: 2px solid #1a1a1a;
  position: relative;
  top: -2px;
}
.sp-badge::after {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 2px;
  background: #1a1a1a;
  clip-path: polygon(20% 0, 80% 0, 80% 25%, 100% 25%, 100% 50%, 75% 50%, 75% 100%, 25% 100%, 25% 50%, 0 50%, 0 25%, 20% 25%);
}
.sp-title {
  display: inline-block;
  vertical-align: middle;
  margin: 0;
  font-size: 32px;
  line-height: 1.1;
  font-weight: 900;
  color: #111;
  letter-spacing: -.5px;
  max-width: calc(100% - 52px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sp-desc {
  margin: 14px 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: #555;
  text-align: center;
}

/* When the list is filtered, keep click targets working normally */
.card.is-filtered .site-list li { cursor: pointer; }

/* Touch devices: bigger hit area and full-width bottom sheet feel */
@media (hover: none), (pointer: coarse) {
  .site-list li {
    min-height: 40px;
    padding-top: 9px;
    padding-bottom: 9px;
    -webkit-tap-highlight-color: rgba(0,0,0,.05);
    touch-action: manipulation;
  }
  .site-preview {
    left: 12px !important;
    right: 12px !important;
    top: auto !important;
    bottom: 12px !important;
    max-width: none;
    min-width: 0;
    width: auto;
    transform: translateY(16px);
    border-radius: 16px;
    padding: 18px 18px 16px;
  }
  .site-preview.is-visible { transform: translateY(0); }
  .sp-arrow { display: none; }
  .sp-title { font-size: 26px; }
  .sp-desc { font-size: 14px; }
}

/* ===================== LOADER MODAL ===================== */
.loader-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, .65);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s ease, visibility .2s ease;
}
.loader-modal.is-visible {
  opacity: 1;
  visibility: visible;
}
.loader-card {
  position: relative;
  width: min(560px, calc(100vw - 32px));
  padding: 36px 40px 32px;
  border-radius: 20px;
  background: linear-gradient(160deg, #283844 0%, #1f2d38 100%);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow:
    0 24px 60px rgba(0,0,0,.45),
    0 4px 12px rgba(0,0,0,.25),
    inset 0 1px 0 rgba(255,255,255,.05);
  color: #e8edf0;
  text-align: center;
  transform: translateY(8px) scale(.98);
  transition: transform .2s ease;
}
.loader-modal.is-visible .loader-card { transform: translateY(0) scale(1); }

.loader-close {
  position: absolute;
  top: 14px; right: 14px;
  width: 36px; height: 36px;
  border: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  color: #cfd6db;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s ease, color .15s ease;
}
.loader-close:hover { background: rgba(255,255,255,.16); color: #fff; }

/* Spinner */
.loader-spinner {
  display: flex;
  justify-content: center;
  margin-bottom: 18px;
}
.spinner-ring {
  transform-origin: center;
  stroke-dasharray: 160;
  stroke-dashoffset: 120;
  animation: spin-ring 1.6s cubic-bezier(.6,.2,.4,.9) infinite;
}
.spinner-ring-2 {
  stroke-dasharray: 100;
  stroke-dashoffset: 70;
  animation-duration: 2.2s;
  animation-direction: reverse;
  opacity: .8;
}
@keyframes spin-ring {
  0%   { transform: rotate(0deg);   stroke-dashoffset: 120; }
  50%  { stroke-dashoffset: 40; }
  100% { transform: rotate(360deg); stroke-dashoffset: 120; }
}

.loader-title {
  margin: 0;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: .2px;
  color: #ffffff;
}
.loader-title.error-title { color: #ff6b6b; }
.loader-subtitle {
  margin: 10px 0 24px;
  font-size: 14px;
  line-height: 1.55;
  color: #a3b0ba;
}

.loader-progress-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 18px 0 8px;
  font-size: 13px;
}
.loader-step { color: #c0c9d0; }
.loader-percent {
  font-weight: 800;
  font-size: 20px;
  color: #4ade80;
  font-variant-numeric: tabular-nums;
}
.loader-percent.error-percent { color: #ff6b6b; }

.loader-bar {
  width: 100%;
  height: 10px;
  background: rgba(0,0,0,.35);
  border-radius: 6px;
  overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.4);
}
.loader-bar-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #22c55e, #4ade80);
  border-radius: 6px;
  transition: width .35s cubic-bezier(.4,0,.2,1);
  box-shadow: 0 0 10px rgba(74,222,128,.4);
}
.loader-bar-fill.error {
  background: linear-gradient(90deg, #b91c1c, #ef4444);
  box-shadow: 0 0 10px rgba(239,68,68,.4);
}

/* Error icon */
.loader-icon-error {
  display: flex;
  justify-content: center;
  margin: 6px 0 14px;
  color: #ff6b6b;
}
.loader-icon-error svg {
  filter: drop-shadow(0 0 12px rgba(255,107,107,.35));
}

/* Success icon + CTA */
.loader-icon-success {
  display: flex;
  justify-content: center;
  margin: 6px 0 14px;
  color: #4ade80;
}
.loader-icon-success svg {
  filter: drop-shadow(0 0 14px rgba(74,222,128,.45));
}
.success-title { color: #4ade80; }

.btn-continue {
  min-width: 180px;
  padding: 12px 32px;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(180deg, #38bdf8, #0ea5e9);
  color: #062233;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: .4px;
  cursor: pointer;
  box-shadow: 0 4px 0 #0369a1, 0 8px 18px rgba(14,165,233,.35);
  transition: transform .08s ease, filter .08s ease, box-shadow .08s ease;
}
.btn-continue:hover { filter: brightness(1.05); }
.btn-continue:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 #0369a1, 0 4px 10px rgba(14,165,233,.3);
}

.loader-actions {
  margin-top: 22px;
  display: flex;
  justify-content: center;
}
.btn-retry {
  min-width: 160px;
  padding: 12px 32px;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(180deg, #4ade80, #22c55e);
  color: #0b2a15;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: .4px;
  cursor: pointer;
  box-shadow: 0 4px 0 #15803d, 0 8px 18px rgba(34,197,94,.35);
  transition: transform .08s ease, filter .08s ease, box-shadow .08s ease;
}
.btn-retry:hover { filter: brightness(1.05); }
.btn-retry:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 #15803d, 0 4px 10px rgba(34,197,94,.3);
}

/* ===================== RESPONSIVE ===================== */

/* Tablet & small desktop: 2 columns */
@media (max-width: 1100px) {
  .grid { grid-template-columns: repeat(2, 1fr); }
  .topbar-promo { left: auto; right: 0; transform: none; }
  .promo-bubble { max-width: 320px; }
  .search { width: 100%; max-width: 480px; }
  .topbar-nav { position: static; margin-top: 12px; justify-content: flex-start; }
  .footer-nav { width: calc(100% - 32px); gap: 14px 20px; }
}

/* Mobile: 1 card per row, single column */
@media (max-width: 640px) {
  body { font-size: 13px; }

  .topbar-inner {
    width: 100%;
    max-width: 100%;
    padding: 8px 12px 14px;
    min-height: 0;
  }
  .logo-mark {
    width: 36px; height: 36px;
  }
  .logo-mark svg { width: 32px; height: 32px; }
  .logo-text { font-size: 34px; letter-spacing: 1px; }

  .topbar-promo {
    position: static;
    transform: none;
    margin: 10px 0 0;
    align-items: stretch;
  }
  .promo-bubble {
    max-width: none;
    padding: 8px 12px;
  }
  .promo-bubble::after { display: none; }
  .promo-cta { align-self: center; margin-top: 8px; }

  .search {
    width: 100%;
    margin-top: 12px;
  }
  .search input { font-size: 13px; padding: 8px 12px; }

  .topbar-nav {
    position: static;
    margin-top: 12px;
    gap: 8px;
    flex-wrap: wrap;
  }
  .nav-pill { width: 34px; height: 34px; font-size: 15px; }

  .lang-switch {
    top: 10px;
    right: 12px;
  }
  .lang-btn {
    height: 30px;
    padding: 0 8px;
    font-size: 11px;
  }
  .lang-menu {
    min-width: 140px;
    right: 0;
  }

  .container {
    width: 100%;
    max-width: 100%;
    margin-top: 10px;
    padding: 0 12px 16px;
  }
  .grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .card {
    /* mobile: show more items before scroll, but still cap at ~10 rows */
  }
  .site-list {
    max-height: 330px; /* ≈ 10 rows on mobile */
  }
  .cat-desc { min-height: 0; }

  .footer { padding: 14px 12px 10px; }
  .footer-nav {
    width: 100%;
    gap: 10px 14px;
  }
  .footer-nav a { font-size: 12px; }
  .footer-hiring {
    flex-direction: column;
    gap: 4px;
    text-align: center;
  }
}

/* ============================================================
   i18n toast — shown when translation service is unreachable
   ============================================================ */
#i18n-toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translate(-50%, 12px);
  background: #2d2d2d;
  color: #fff;
  padding: 10px 18px;
  border-radius: 24px;
  font-size: 13px;
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
  letter-spacing: .2px;
  box-shadow: 0 8px 24px rgba(0,0,0,.22);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
  z-index: 9999;
  max-width: calc(100vw - 32px);
  text-align: center;
}
#i18n-toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}