/* MonHunt design system — editorial dark field journal (Golos Text, Cyrillic-first) */
:root {
  color-scheme: dark;
  /* Color — ink on void; cyan as quiet underline, not neon chrome */
  --void: #080c14;
  --void-mid: #0b1220;
  --navy: #121a28;
  --cyan: #2a9aa8;
  --cyan-mid: #3aadb8;
  --cyan-deep: #1a7a86;
  --cyan-hot: #5bc4ce;
  --magenta: #7a4a8c;
  --violet: #7a4a8c;
  --violet-deep: #4e2f5c;
  --ink: #e6ebf2;
  --ink-soft: #9aa6b8;
  --muted: #6b778c;
  --paper: #080c14;
  --paper-2: #0b1220;
  --mist: #0a1018;
  --white: #f4f6f9;
  --line: rgba(154, 166, 184, 0.14);
  --line-strong: rgba(154, 166, 184, 0.28);
  --danger: #d45a6a;
  --ok: #3da87a;

  /* Type — one family so Latin + Cyrillic share x-height / weight */
  --font: "Golos Text", "Golos Text Fallback", sans-serif;
  --font-display: var(--font);
  --font-body: var(--font);

  /* Type scale — brand masthead heavy; body calm like help/SEO shell */
  --fs-display: clamp(2.75rem, 7.5vw, 4.5rem);
  --fs-title: clamp(1.25rem, 2.4vw, 1.65rem);
  --fs-body: 1.05rem;
  --fs-meta: 0.76rem;
  --lh-display: 0.94;
  --lh-title: 1.22;
  --lh-body: 1.58;
  --lh-meta: 1.4;
  --track-display: -0.035em;
  --track-title: -0.02em;
  --track-body: -0.006em;
  --track-meta: 0.06em;
  /* Optical tokens kept for rare clip-safe CTA padding only — never indent kickers vs titles. */
  --track-optical-start: 0;
  --track-optical-end: 0;

  /* Space + shared content rhythm (landing + help/SEO) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 72px;
  /* Sitewide horizontal inset — never flush/clipped to viewport edge */
  --page-x: clamp(24px, 5.5vw, 44px);
  --page-inline-start: max(var(--page-x), env(safe-area-inset-left, 0px));
  --page-inline-end: max(var(--page-x), env(safe-area-inset-right, 0px));
  --content-max: 720px;
  --radar-max: 960px;
  --radius: 8px;
  --radius-sm: 6px;
  --radius-xs: 4px;

  --bot-url: https://t.me/kufar_spy_radar_bot;
  --shadow-soft: 0 12px 28px rgba(0, 0, 0, 0.35);

  /* Atmosphere — shared by landing + seo-shell (not decorative-only) */
  --bg-atmosphere:
    radial-gradient(ellipse 50% 28% at 88% -4%, rgba(42, 154, 168, 0.06), transparent 55%),
    linear-gradient(180deg, var(--void) 0%, var(--void-mid) 100%);

  /* Aliases — Mini App / SEO */
  --teal: var(--cyan);
  --teal-bright: var(--cyan-mid);
  --teal-deep: var(--cyan-deep);
  --alert: var(--cyan);
  --alert-deep: var(--cyan-deep);
  --gold: #c9b06a;
  --season: #c4a06a;
  --season-soft: rgba(196, 160, 106, 0.1);
  --season-line: rgba(196, 160, 106, 0.32);
  --silver: #c8d4e0;
  --navy-mid: var(--void-mid);
  --bg-color: var(--void);
  --card-bg: rgba(12, 20, 36, 0.92);
  --border-color: var(--line);
  --text-color: var(--ink);
  --text-muted: var(--muted);
  --primary: var(--cyan);
  --primary-hover: var(--cyan-mid);
  --accent: var(--magenta);
  --font-title: var(--font-display);
}

@font-face {
  font-family: "Golos Text Fallback";
  src: local("Arial");
  size-adjust: 102%;
  ascent-override: 95%;
  descent-override: 25%;
  line-gap-override: 0%;
}

/*
 * Sitewide page column — first glyphs must never clip at the viewport edge.
 * Root causes of “режет” kickers:
 *  1) html overflow-x:clip + positive letter-spacing (trailing space omitted by CSS)
 *  2) animation-fill-mode:both leaving a transform containing block that clips ink
 * Guard: --page-x + overflow:visible on kickers. Do NOT pad kickers — optical inset
 * shifted labels vs titles/links (plan-tier, Поддержка, etc.) and looked “везде смещено”.
 */
html {
  overflow-x: clip;
}
body {
  overflow-x: clip;
}

/* Kickers + column labels — flush with sibling titles / link stacks (Δleft ≈ 0). */
:where(
  .mh-section-kicker,
  .mh-filter-bar .mh-filter-label,
  .plan-tier,
  .support-kicker,
  .free-entry-kicker,
  .pulse-row,
  .hero-aside-label,
  .niche-group-label,
  .mh-site-footer .footer-col-label,
  .seo-kicker,
  .seo-brand-mark
) {
  padding-inline: 0;
  overflow: visible;
}

/* Card / listing body copy — hard flush after image divider (no optical inherit) */
.deal-title,
.deal-price,
.deal-loc,
.deal-hotline,
.deal-meta-bar,
.mh-card-title,
.mh-card-title-text,
.lot-spot .meta,
.lot-spot .lot-spot-title,
.lot-spot .nums,
.lot-spot .lot-spot-cta,
.free-card-title,
.free-card-price,
.seo-item .seo-price,
.seo-item a.mh-card-title,
.mh-stats-row span,
.mh-stats-row strong,
.mh-type-display,
.mh-type-title,
.mh-type-body,
.mh-type-meta,
.mh-section-title,
.seo-brand-name,
.hero-brand,
.radar-brand,
.legal-brand-name {
  padding-inline: 0;
}

/* Shared rise — end on transform:none; callers MUST use fill-mode: backwards (not both) */
@keyframes mhRise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}
.mh-rise {
  animation: mhRise 0.55s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}

/* Shared primitives */
.mh-type-display {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  font-weight: 800;
  line-height: var(--lh-display);
  letter-spacing: var(--track-display);
}
.mh-type-title {
  font-family: var(--font-display);
  font-size: var(--fs-title);
  font-weight: 600;
  line-height: var(--lh-title);
  letter-spacing: var(--track-title);
}
.mh-type-body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: var(--lh-body);
  letter-spacing: var(--track-body);
}
.mh-type-meta {
  font-family: var(--font-body);
  font-size: var(--fs-meta);
  font-weight: 500;
  line-height: var(--lh-meta);
  letter-spacing: var(--track-meta);
  text-transform: uppercase;
}

.mh-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  gap: 8px;
  min-height: 42px;
  padding: 12px 18px;
  border-radius: var(--radius-sm);
  font-family: var(--font);
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: -0.01em;
  line-height: 1.2;
  /* Same 1px border on every variant so filled/outline CTAs share one baseline */
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  overflow: visible;
  transform: none;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
/* Donate / «Помочь» CTAs — optical pad vs overflow-x:clip on tracked Cyrillic */
.mh-btn[data-mh-cta="donate"],
a.mh-btn[href*="start=donate"] {
  padding-inline: calc(18px + 0.06em) calc(18px + 0.1em);
}
.mh-btn-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem;
  margin: 0.45rem 0 1.35rem;
}
.mh-btn:hover { transform: none; }
.mh-btn-primary {
  background: var(--cyan-deep);
  border-color: var(--cyan-deep);
  color: var(--white);
}
.mh-btn-primary:hover {
  background: var(--cyan);
  border-color: var(--cyan);
}
.mh-btn-ghost {
  background: transparent;
  color: var(--white);
  border-color: rgba(242, 246, 250, 0.18);
}
.mh-btn-ghost:hover {
  border-color: rgba(58, 173, 184, 0.4);
  background: rgba(42, 154, 168, 0.06);
}
.mh-btn-magenta {
  background: var(--violet-deep);
  border-color: var(--violet-deep);
  color: var(--white);
}
.mh-btn-magenta:hover {
  background: var(--magenta);
  border-color: var(--magenta);
}
.mh-btn-line {
  background: transparent;
  color: var(--ink);
  border-color: var(--line-strong);
}
.mh-btn-line:hover {
  border-color: var(--cyan);
  color: var(--cyan-mid);
}

/* Shared site navbar (landing / SEO / help / legal / prices)
 * One row: brand left · links · CTA right. Links hide <768; never stack under logo. */
.mh-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 1.65rem;
  flex-wrap: nowrap;
}
/* SEO/legal shells: nav lives outside .seo-wrap so chrome matches landing width */
body > .mh-nav:not(.mh-nav-sticky) {
  max-width: var(--radar-max);
  width: 100%;
  margin: 1.15rem auto 1.05rem;
  padding-inline: var(--page-inline-start) var(--page-inline-end);
  box-sizing: border-box;
}
.mh-nav-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font);
  font-weight: 700;
  letter-spacing: var(--track-title);
  font-size: 1.05rem;
  color: var(--white);
  text-decoration: none;
  line-height: 1;
  flex-shrink: 0;
}
.mh-nav-brand img {
  width: 34px;
  height: 34px;
  border-radius: 10px;
}
.mh-nav-links {
  display: flex;
  gap: 18px;
  align-items: center;
  margin-left: 8px;
  margin-right: auto;
  flex-wrap: wrap;
}
.mh-nav-link {
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--ink-soft);
  text-decoration: none;
  transition: color 0.2s ease;
  white-space: nowrap;
}
.mh-nav-link:hover,
.mh-nav-link.is-active {
  color: var(--cyan-mid);
}

/* Dropdown Menu styling for condensed navigation */
.mh-nav-dropdown {
  position: relative;
  display: inline-block;
}

.mh-nav-dropdown-trigger {
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--ink-soft);
  text-decoration: none;
  cursor: pointer;
  padding-bottom: 4px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  user-select: none;
}

.mh-nav-dropdown-trigger:hover {
  color: var(--cyan-mid);
}

.mh-nav-dropdown-content {
  display: none;
  position: absolute;
  background: var(--void-mid);
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.55);
  min-width: 170px;
  z-index: 100;
  padding: 6px 0;
  top: 100%;
  left: 0;
  margin-top: 6px;
}

.mh-nav-dropdown-content::before {
  content: "";
  position: absolute;
  top: -10px;
  left: 0;
  right: 0;
  height: 10px;
  background: transparent;
}

.mh-nav-dropdown-content a {
  color: var(--ink-soft);
  padding: 8px 16px;
  text-decoration: none;
  display: block;
  font-size: 0.85rem;
  font-weight: 500;
  transition: background 0.15s ease, color 0.15s ease;
}

.mh-nav-dropdown-content a:hover {
  background: rgba(74, 192, 214, 0.08);
  color: var(--cyan-mid);
}

.mh-nav-dropdown:hover .mh-nav-dropdown-content {
  display: block;
}
.mh-nav-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
  align-items: center;
}
.mh-nav .mh-btn {
  padding: 10px 14px;
  font-size: 0.88rem;
}
.mh-nav-sticky {
  margin-bottom: 0;
  padding: 12px var(--page-inline-end, 24px) 12px var(--page-inline-start, 24px);
  border-bottom: 1px solid var(--line);
  background: rgba(7, 11, 20, 0.85);
  backdrop-filter: blur(14px);
  position: sticky;
  top: 0;
  z-index: 20;
  flex-wrap: nowrap;
}
.mh-nav-sticky .mh-nav-links {
  margin-left: 24px;
}
.mh-nav-sticky .mh-nav-brand img {
  width: 36px;
  height: 36px;
}
@media (max-width: 768px) {
  .mh-nav-links {
    display: none !important;
  }
}

/* Quiet text filter / related links — landing tabs + help/SEO nav */
.mh-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  align-items: center;
  padding: 0.75rem 0 0.9rem;
  margin-bottom: 0.85rem;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.mh-filter-bar .mh-filter-label {
  font-size: var(--fs-meta);
  font-weight: 500;
  letter-spacing: var(--track-meta);
  text-transform: uppercase;
  color: var(--muted);
  margin-right: 0.15rem;
}
.mh-filter-bar button,
.mh-filter-bar a {
  appearance: none;
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  margin: 0;
  font: inherit;
  font-size: 0.86rem;
  font-weight: 500;
  color: var(--ink-soft);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  padding: 0.42rem 0.8rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: rgba(12, 20, 36, 0.4);
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.mh-filter-bar button:hover,
.mh-filter-bar a:hover {
  color: var(--cyan-hot);
  border-color: rgba(58, 173, 184, 0.45);
  background: rgba(42, 154, 168, 0.08);
}
.mh-filter-bar button.is-active,
.mh-filter-bar a.is-active,
.mh-filter-bar button[aria-selected="true"] {
  color: var(--white);
  font-weight: 600;
  border-color: rgba(58, 173, 184, 0.55);
  background: rgba(42, 154, 168, 0.16);
  box-shadow: none;
}

/* Compact segmented control — BYN|USD and similar dual toggles */
.mh-seg {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: rgba(8, 12, 20, 0.55);
  vertical-align: middle;
}
.mh-seg button,
.mh-seg .mh-seg-btn {
  appearance: none;
  border: 0;
  margin: 0;
  background: transparent;
  color: var(--muted);
  font-family: var(--font);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1;
  /* Extra inline pad: parent .mh-seg uses overflow:hidden */
  padding: 0.48rem 0.82rem;
  min-width: 3.1rem;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.mh-seg button + button,
.mh-seg .mh-seg-btn + .mh-seg-btn {
  border-left: 1px solid var(--line);
}
.mh-seg button.is-active,
.mh-seg .mh-seg-btn.is-active,
.mh-seg button[aria-pressed="true"],
.mh-seg .mh-seg-btn[aria-pressed="true"] {
  background: rgba(42, 154, 168, 0.22);
  color: var(--white);
}
.mh-seg button:hover:not(.is-active),
.mh-seg .mh-seg-btn:hover:not(.is-active) {
  color: var(--ink-soft);
  background: rgba(42, 154, 168, 0.08);
}

/* Editorial section kicker + title block */
.mh-section-kicker {
  font-size: var(--fs-meta);
  font-weight: 500;
  letter-spacing: var(--track-meta);
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.35rem;
}
.mh-section-title {
  font-family: var(--font-display);
  font-size: var(--fs-title);
  font-weight: 600;
  letter-spacing: var(--track-title);
  line-height: var(--lh-title);
  color: var(--white);
  margin: 0 0 0.45rem;
}
.mh-section-lead {
  color: var(--muted);
  /* Short section intros: wrap only when viewport forces it — no artificial 2-line chop */
  max-width: none;
  font-weight: 400;
  margin: 0 0 1.1rem;
}

/* Stats strip — same rhythm as help/SEO */
.mh-stats-row {
  display: flex;
  gap: 1.35rem;
  flex-wrap: wrap;
  margin: 0.85rem 0 1.25rem;
  padding: 0.15rem 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.mh-stats-row > div { padding: 0.75rem 0; }
.mh-stats-row span {
  display: block;
  font-size: var(--fs-meta);
  font-weight: 500;
  letter-spacing: var(--track-meta);
  text-transform: uppercase;
  color: var(--muted);
}
.mh-stats-row strong {
  display: block;
  font-size: 1.35rem;
  letter-spacing: var(--track-title);
  margin-top: 0.12rem;
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* Shared site footer — same box model as .radar / .seo-wrap / .wrap:
   max-width + horizontal padding live on the inner shell (border-box),
   not outer padding + separate max-width (that made footer stick out left). */
.mh-site-footer {
  width: 100%;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: 400;
  background: var(--void);
}
.mh-site-footer .footer-shell {
  width: 100%;
  max-width: var(--footer-max, var(--radar-max));
  margin: 0 auto;
  padding: 28px var(--page-inline-end, 24px) 36px var(--page-inline-start, 24px);
  box-sizing: border-box;
  display: grid;
  gap: 22px;
}
.mh-site-footer .footer-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px 32px;
  width: 100%;
}
@media (min-width: 800px) {
  .mh-site-footer .footer-cols {
    grid-template-columns: 1.35fr 1fr 1fr 1fr;
    gap: 24px 40px;
  }
}
.mh-site-footer .footer-col {
  display: grid;
  gap: 7px;
  align-content: start;
  min-width: 0;
}
.mh-site-footer .footer-col-label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 2px;
}
.mh-site-footer .footer-col a {
  color: var(--ink-soft);
  font-weight: 500;
  font-size: 0.88rem;
  line-height: 1.35;
  text-decoration: none;
}
.mh-site-footer .footer-col a:hover { color: var(--cyan-mid); }
.mh-site-footer .footer-niche-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
}
.mh-site-footer .footer-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  justify-content: space-between;
  align-items: baseline;
  width: 100%;
  padding-top: 14px;
  border-top: 1px solid rgba(110, 124, 144, 0.12);
}
.mh-site-footer .footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
}
.mh-site-footer .footer-legal a {
  color: var(--muted);
  font-size: 0.82rem;
  text-decoration: none;
}
.mh-site-footer .footer-legal a:hover { color: var(--cyan-mid); }

/* Soft-help jargon tips (n / медиана / почему горячий) — editorial dark, not browser-default-only */
.mh-tip {
  position: relative;
  cursor: help;
  border-bottom: 1px dotted rgba(154, 166, 184, 0.45);
  color: inherit;
  outline: none;
  overflow: visible !important;
}
.mh-tip:hover,
.mh-tip:focus,
.mh-tip:focus-visible {
  border-bottom-color: var(--cyan-mid);
  color: var(--cyan-hot);
}
.mh-tip::after,
.mh-card-title[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  left: 50%;
  width: min(42ch, 78vw);
  padding: 8px 10px;
  border-radius: 6px;
  background: #121a28;
  border: 1px solid rgba(154, 166, 184, 0.22);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
  color: var(--ink-soft);
  font-size: 0.72rem;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.01em;
  text-align: left;
  white-space: normal;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.14s ease, transform 0.14s ease;
  z-index: 80;
}
/* Jargon tips (n / медиана): open above the word */
.mh-tip::after {
  bottom: calc(100% + 8px);
  top: auto;
  transform: translateX(-50%) translateY(4px);
}
/* Listing titles sit under images / near card top — open BELOW to escape card clip */
.mh-card-title[data-tip]::after {
  top: calc(100% + 6px);
  bottom: auto;
  transform: translateX(-50%) translateY(-4px);
}
.mh-tip:hover::after,
.mh-tip:focus::after,
.mh-tip:focus-visible::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: none !important;
}
.mh-card-title[data-tip]:hover::after,
.mh-card-title[data-tip]:focus::after,
.mh-card-title[data-tip]:focus-visible::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: none !important;
}
/* Stuck :hover/:focus after click→Kufar→return: force-hide via html.mh-tips-off */
html.mh-tips-off .mh-tip::after {
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translateX(-50%) translateY(4px) !important;
  transition: none !important;
}
html.mh-tips-off .mh-card-title[data-tip]::after {
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translateX(-50%) translateY(-4px) !important;
  transition: none !important;
}
@media (max-width: 640px) {
  .mh-tip::after,
  .mh-card-title[data-tip]::after {
    left: 50%;
    width: min(48ch, 88vw);
  }
  .mh-tip::after {
    transform: translateX(-50%) translateY(4px);
  }
  .mh-card-title[data-tip]::after {
    transform: translateX(-50%) translateY(-4px);
  }
  .mh-tip:hover::after,
  .mh-tip:focus::after,
  .mh-tip:focus-visible::after {
    transform: translateX(-50%) translateY(0) !important;
  }
  .mh-card-title[data-tip]:hover::after,
  .mh-card-title[data-tip]:focus::after,
  .mh-card-title[data-tip]:focus-visible::after {
    transform: translateX(-50%) translateY(0) !important;
  }
  html.mh-tips-off .mh-tip::after {
    transform: translateX(-50%) translateY(4px) !important;
  }
  html.mh-tips-off .mh-card-title[data-tip]::after {
    transform: translateX(-50%) translateY(-4px) !important;
  }
}
/* Card shells: never clip title tips — radius lives on media */
.deal,
.deal-body,
.lot-day,
.lot-hour,
.seo-item,
.realty-card {
  overflow: visible;
}
.mh-card-title {
  position: relative;
  display: block;
  max-width: 100%;
  min-width: 0;
  line-height: 1.35;
  outline: none;
  overflow: visible;
  z-index: 1;
}
.mh-card-title:hover,
.mh-card-title:focus,
.mh-card-title:focus-visible {
  z-index: 5;
}
.deal-why .mh-tip,
.seo-why .mh-tip,
.tinder-card-market .mh-tip {
  font-size: inherit;
}
.mh-card-title-text {
  display: block;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.35;
  min-height: 1.35em;
  /* Prefer soft end-ellipsis over aggressive mid-word clip on narrow columns */
  word-break: normal;
  overflow-wrap: normal;
}