/* ═══════════════════════════════════════════════════════════════
   CHAMPLY WEBAPP · PREMIUM VISUAL LAYER (v2)
   Поверх styles-v2.css. Цель: выровнять мини-апп с эстетикой сайта,
   дать шапке / карточкам вакансий / таб-бару / action-кнопкам
   взрослый вид без правок разметки и без потери функциональности
   (spotlight / match-chips / actions). Только CSS.
   ═══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600;700&display=swap');

:root {
  --font-display: 'Space Grotesk', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --line:        rgba(255,255,255,.06);
  --line-2:      rgba(255,255,255,.10);
  --line-3:      rgba(255,255,255,.14);

  --lime:        #D4FF4F;
}

/* ── Ambient background (site/ recipe) ─────────────────────── */
html, body { background: var(--bg-deep, #060810) !important; }

body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 1100px 650px at 80% -12%,  rgba(30,68,119,.32) 0%, transparent 55%),
    radial-gradient(ellipse 800px  520px at 8% 18%,    rgba(59,130,246,.10) 0%, transparent 55%),
    radial-gradient(ellipse 700px  500px at 50% 110%,  rgba(30,68,119,.20) 0%, transparent 60%),
    radial-gradient(ellipse 500px  350px at 95% 55%,   rgba(59,130,246,.06) 0%, transparent 50%);
}
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    radial-gradient(rgba(255,255,255,.02) 1px, transparent 1px),
    radial-gradient(rgba(255,255,255,.014) 1px, transparent 1px);
  background-size: 3px 3px, 7px 7px;
  background-position: 0 0, 1px 2px;
  mix-blend-mode: overlay;
  opacity: .6;
}
/* Old rule "body > * { position: relative; z-index: 1 }" REMOVED — оно создавало
   stacking context на каждом direct-ребёнке body (включая #modal-root), из-за чего
   .app-modal (fixed, z:9999) ограничивалась контейнером с z:1, и snapshot-banner
   (z:100) перекрывал шапку модалки. Если нужен z-стек для каких-то секций — добавь
   локально, а не глобально. */

body { font-family: var(--font-body); }

/* ═══════════════════════════════════════════════════════════════
   TOPBAR — clean site-grade header (full-bleed, single row)
   ═══════════════════════════════════════════════════════════════ */
.app-shell {
  max-width: none !important;
  padding-top: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-bottom: 120px !important;
}
.app-shell > *:not(.topbar) {
  max-width: 1040px;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 20px;
  padding-right: 20px;
  box-sizing: border-box;
}
/* topbar is full-width and flush at top — restore vertical breathing room
   on the FIRST content sibling so cards don't slam into the sticky header */
.app-shell > .topbar + #banner:empty + #content,
.app-shell > .topbar + #content { padding-top: 24px !important; }
.app-shell > .topbar + #banner:not(:empty) { padding-top: 16px !important; }

/* #content — flex column to give consistent gap between cards (страница 13/14 etc.) */
#content {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
}
/* Header rows (e.g. "Резюме + кнопки") inside #content sit above gap */
#content > .row.space:first-child { margin-bottom: 0 !important; }

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 72px;
  margin: 0 !important;
  width: 100%;
  padding: 0 max(24px, calc((100% - 1040px) / 2 + 20px)) !important;
  background: rgba(8,10,15,.72) !important;
  backdrop-filter: blur(24px) saturate(1.4) !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.4) !important;
  border-bottom: 1px solid var(--line-2);
  box-shadow: 0 1px 0 rgba(255,255,255,.025) inset, 0 10px 30px -20px rgba(0,0,0,.7);
}

/* Left cluster: logo-mark + wordmark + divider + subtitle (inline row) */
.topbar > div:first-child {
  display: flex !important;
  align-items: center;
  gap: 14px;
  min-width: 0;
}
.topbar > div:first-child::before {
  content: '';
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  background: url('./logo-champly-purple-96.png') center / contain no-repeat;
  filter: drop-shadow(0 0 14px rgba(111,76,255,.45));
}
.topbar h1 {
  margin: 0 !important;
  font-family: var(--font-display) !important;
  font-size: 19px !important;
  font-weight: 700 !important;
  letter-spacing: -.018em !important;
  background: none !important;
  -webkit-text-fill-color: var(--text, #EDF2F7) !important;
  color: var(--text, #EDF2F7) !important;
  filter: none !important;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
}
.topbar h1::after {
  content: '';
  display: inline-block;
  width: 1px;
  height: 22px;
  margin: 0 0 0 14px;
  background: var(--line-2);
}
.topbar p {
  margin: 0 !important;
  font-family: var(--font-body) !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  color: var(--text-2, #CBD5E1) !important;
  white-space: nowrap;
  letter-spacing: -.005em;
}

.topbar-actions {
  display: flex !important;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.topbar-actions .usage-badge {
  padding: 8px 14px !important;
  border-radius: 999px !important;
  font-family: var(--font-display) !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  letter-spacing: -.005em;
  color: var(--blue-light, #60A5FA) !important;
  border: 1px solid rgba(59,130,246,.28) !important;
  background: rgba(59,130,246,.09) !important;
  transition: all .2s ease;
}
.topbar-actions .usage-badge:hover {
  background: rgba(59,130,246,.10) !important;
  border-color: rgba(59,130,246,.30) !important;
}
.topbar-actions .usage-badge .usage-dot {
  width: 6px !important;
  height: 6px !important;
  background: var(--blue-vivid) !important;
  box-shadow: 0 0 10px var(--blue-vivid);
}
.topbar-actions .topbar-back {
  padding: 8px 14px !important;
  border-radius: 999px !important;
  font-family: var(--font-display) !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  color: var(--text-2, #CBD5E1) !important;
  background: rgba(255,255,255,.04) !important;
  border: 1px solid var(--line-2) !important;
  transition: all .2s ease;
}
.topbar-actions .topbar-back:hover {
  color: var(--text) !important;
  background: rgba(255,255,255,.05) !important;
  border-color: var(--line-3) !important;
}
.topbar-actions .topbar-back svg { width: 13px; height: 13px; }

@media (max-width: 720px) {
  .topbar { height: 60px; gap: 12px; padding-left: 16px !important; padding-right: 16px !important; }
  .topbar h1::after { display: none !important; }
  .topbar p { display: none !important; }
  .topbar > div:first-child { gap: 10px; }
  .topbar > div:first-child::before { width: 22px; height: 22px; flex-basis: 22px; }
  .topbar h1 { font-size: 16px !important; }
  .topbar-actions { gap: 6px; }
  .topbar-actions .usage-badge,
  .topbar-actions .topbar-back { padding: 6px 10px !important; font-size: 11.5px !important; }
}

/* Hide the non-functional "Обновить" button on snapshot pages */
#refresh-vacancies { display: none !important; }

/* "Открыть" link button on application cards: subtle blue tint, not loud */
#app-list .app-head-row > .btn.ghost[data-open-url] {
  padding: 6px 14px !important;
  border-radius: 999px !important;
  font-family: var(--font-display) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: -.003em !important;
  background: rgba(59,130,246,.07) !important;
  border: 1px solid rgba(59,130,246,.22) !important;
  color: var(--blue-light, #60A5FA) !important;
  box-shadow: none !important;
  transition: all .18s ease;
}
#app-list .app-head-row > .btn.ghost[data-open-url]:hover {
  background: rgba(59,130,246,.13) !important;
  border-color: rgba(59,130,246,.38) !important;
  color: #93C5FD !important;
  transform: translateY(-1px);
}

/* ═══════════════════════════════════════════════════════════════
   CONTENT HEADER — sub-tabs row («Рекомендованные / Избранное»
   + «Обновить») становится премиальным рядом сегмент-контрола
   ═══════════════════════════════════════════════════════════════ */
#content > .row.space:first-child {
  margin: 28px 0 20px !important;
  padding: 6px !important;
  background: linear-gradient(180deg, rgba(16,20,30,.6), rgba(12,16,24,.7)) !important;
  border: 1px solid var(--line-2);
  border-radius: 16px !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.03) inset, 0 8px 28px -18px rgba(0,0,0,.6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
#content > .row.space:first-child > .row:first-child {
  display: inline-flex !important;
  gap: 4px !important;
  background: rgba(0,0,0,.18);
  border-radius: 12px;
  padding: 4px;
}
#content > .row.space:first-child > .row:first-child > button {
  padding: 9px 18px !important;
  font-family: var(--font-display) !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  letter-spacing: -.005em;
  border-radius: 9px !important;
  background: transparent !important;
  border: none !important;
  color: var(--text-2) !important;
  transition: all .18s ease;
  box-shadow: none !important;
}
#content > .row.space:first-child > .row:first-child > button:not(.primary):hover {
  color: var(--text) !important;
  background: rgba(255,255,255,.04) !important;
}
#content > .row.space:first-child > .row:first-child > button.primary {
  background: linear-gradient(180deg, rgba(59,130,246,.22), rgba(30,68,119,.28)) !important;
  color: #fff !important;
  border: 1px solid rgba(59,130,246,.35) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.08) inset, 0 4px 12px rgba(30,68,119,.35) !important;
}
#content > .row.space:first-child > button:last-child {
  padding: 9px 16px !important;
  font-family: var(--font-display) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  border-radius: 10px !important;
  background: rgba(255,255,255,.04) !important;
  border: 1px solid var(--line-2) !important;
  color: var(--text-2) !important;
  transition: all .18s ease;
}
#content > .row.space:first-child > button:last-child:hover {
  color: var(--text) !important;
  background: rgba(255,255,255,.07) !important;
  border-color: var(--line-3) !important;
  transform: translateY(-1px);
}

/* ═══════════════════════════════════════════════════════════════
   JOB CARDS — premium glass with strong hierarchy
   ═══════════════════════════════════════════════════════════════ */
.list { display: flex; flex-direction: column; gap: 12px; margin-top: 6px !important; }

/* Neutralize styles-v2 mount animations that leave elements at opacity:0 in snapshot. */
.app-modal,
.app-modal-sheet,
.modal,
.modal-card {
  opacity: 1 !important;
  animation: none !important;
  transform: none !important;
}

/* ── Status modal "Отлично! Что дальше по отклику?" ──
   styles-v2.css ставит .modal-card { bottom: 72px } для bottom-sheet
   на мобайле — это нормально для маленьких экранов, но на десктопе
   модалка прилипает к низу что выглядит странно. Центрируем для
   720px+. На мобиле остаётся как было. */
@media (min-width: 720px) {
  #status-modal .modal-card {
    bottom: auto !important;
    left: 50% !important;
    right: auto !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    max-width: 460px;
    width: calc(100% - 32px);
  }
}

.card {
  position: relative;
  /* Keep spotlight ink strictly inside the card box.
     Prevents hover-glow bleeding into neighbouring cards/buttons. */
  overflow: hidden;
  opacity: 1 !important; /* neutralize styles-v2 animation that leaves cards at opacity 0 in some states */
  animation: none !important;
  isolation: isolate; /* keep spotlight contained without clipping */
  background: linear-gradient(168deg,
    rgba(22,28,42,.78) 0%,
    rgba(14,18,30,.72) 100%) !important;
  border: 1px solid rgba(255,255,255,.06) !important;
  border-radius: 18px !important;
  padding: 20px 22px !important;
  margin: 0 !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.04) inset,
    0 12px 40px -24px rgba(0,0,0,.8),
    0 2px 4px -2px rgba(0,0,0,.3) !important;
  transition: transform .28s cubic-bezier(.22,1,.36,1),
              border-color .28s ease,
              box-shadow .28s ease !important;
}
.card:hover {
  transform: none !important;
  border-color: var(--line-2) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.04) inset,
    0 12px 40px -24px rgba(0,0,0,.8),
    0 2px 4px -2px rgba(0,0,0,.3) !important;
}
/* Spotlight hover — make sure pseudo-elements are visible above card bg */
.card:hover::before { opacity: 1 !important; z-index: 1 !important; }
.card:hover::after  { opacity: 1 !important; z-index: 1 !important; }
.card > * { position: relative; z-index: 2; }

/* Title row: company meta under title via tweaking .row.space */
.card > .row.space:first-child {
  align-items: flex-start !important;
  gap: 16px;
  margin-bottom: 6px;
}
.card > .row.space:first-child > .title {
  font-family: var(--font-display) !important;
  font-size: 17px !important;
  font-weight: 600 !important;
  letter-spacing: -.015em !important;
  line-height: 1.3 !important;
  color: var(--text) !important;
  flex: 1;
  min-width: 0;
}
.card > .row.space:first-child > .small.muted {
  font-family: var(--font-display) !important;
  font-size: 11.5px !important;
  font-weight: 500 !important;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted, #64748B) !important;
  white-space: nowrap;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.03);
  border: 1px solid var(--line);
  flex-shrink: 0;
}

/* Company / metro line */
.card > p.muted {
  margin: 0 !important;
  font-family: var(--font-body) !important;
  font-size: 13.5px !important;
  color: var(--text-2) !important;
  line-height: 1.5;
  letter-spacing: -.005em;
}

/* Salary */
.card .salary-line {
  display: inline-block !important;
  margin: 10px 0 0 !important;
  padding: 5px 12px !important;
  font-family: var(--font-display) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--lime) !important;
  background: rgba(212,255,79,.08) !important;
  border: 1px solid rgba(212,255,79,.22);
  border-radius: 999px !important;
  letter-spacing: -.003em;
  -webkit-text-fill-color: var(--lime) !important;
}

/* Chips row — match % chip as hero, others as ghost */
.card .chips { margin-top: 14px !important; gap: 8px !important; }
.card .chip.match {
  padding: 6px 14px !important;
  font-family: var(--font-display) !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  letter-spacing: -.005em !important;
  background: linear-gradient(135deg, rgba(59,130,246,.18), rgba(30,68,119,.32)) !important;
  border: 1px solid rgba(59,130,246,.38) !important;
  color: #fff !important;
  border-radius: 999px !important;
  box-shadow: 0 0 24px -8px rgba(59,130,246,.45), 0 1px 0 rgba(255,255,255,.08) inset;
  -webkit-text-fill-color: #fff !important;
  background-clip: padding-box !important;
  position: relative;
}
.card .chip.match::before {
  content: '●';
  color: var(--blue-light);
  font-size: 10px;
  margin-right: 6px;
  vertical-align: middle;
  filter: drop-shadow(0 0 6px var(--blue-light));
}

/* ⚡ Горит — match геометрию match-чипа точь-в-точь, чтобы оба чипа были
   одинакового размера/высоты в одном ряду. Цвета — амбер на тёплом фоне. */
.card .chip.hot {
  padding: 6px 14px !important;
  font-family: var(--font-display) !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  letter-spacing: -.005em !important;
  background: linear-gradient(135deg, rgba(251,191,36,.20), rgba(180,83,9,.32)) !important;
  border: 1px solid rgba(251,191,36,.42) !important;
  color: #FDE68A !important;
  border-radius: 999px !important;
  box-shadow: 0 0 24px -8px rgba(251,191,36,.45), 0 1px 0 rgba(255,255,255,.08) inset;
  -webkit-text-fill-color: #FDE68A !important;
  background-clip: padding-box !important;
  display: inline-flex;
  align-items: center;
  line-height: 1;
}

/* Feed card: salary + match + hot in a single visual line */
.card.vacancy-feed-card .vacancy-topline {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.card.vacancy-feed-card .vacancy-topline .salary-line {
  margin: 0 !important;
  font-family: var(--font-display) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--lime) !important;
  background: rgba(212,255,79,.08) !important;
  border: 1px solid rgba(212,255,79,.24) !important;
  border-radius: 999px !important;
  padding: 6px 14px !important;
  -webkit-text-fill-color: var(--lime) !important;
}
.card.vacancy-feed-card .vacancy-topline .chip {
  margin: 0 !important;
}

/* Feed card header + meta line (recommendations tab) */
.card.vacancy-feed-card .vacancy-header-row {
  align-items: flex-start !important;
  gap: 12px !important;
}
.card.vacancy-feed-card .vacancy-header-main {
  min-width: 0;
  flex: 1 1 auto;
}
.card.vacancy-feed-card .vacancy-title {
  font-family: var(--font-display) !important;
  font-size: clamp(17px, 1.8vw, 24px) !important;
  line-height: 1.2 !important;
  letter-spacing: -.015em !important;
  margin: 0 !important;
}
.card.vacancy-feed-card .vacancy-date-pill {
  flex: 0 0 auto;
  margin-top: 2px;
  padding: 6px 11px;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  background: rgba(255,255,255,.025);
  color: var(--text-2);
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.card.vacancy-feed-card .vacancy-meta-line {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 0;
  color: var(--text-2);
}
.card.vacancy-feed-card .vacancy-meta-item {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  line-height: 1.2;
  padding-right: 12px;
  margin-right: 12px;
}
.card.vacancy-feed-card .vacancy-meta-item::after {
  content: '•';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-52%);
  color: var(--line-3);
  font-size: 14px;
}
.card.vacancy-feed-card .vacancy-meta-item:last-child {
  padding-right: 0;
  margin-right: 0;
}
.card.vacancy-feed-card .vacancy-meta-item:last-child::after {
  content: none;
}
.card.vacancy-feed-card .vacancy-meta-item::before {
  opacity: .9;
  font-size: 12px;
  line-height: 1;
}
.card.vacancy-feed-card .vacancy-meta-item--company::before { content: '🏢'; }
.card.vacancy-feed-card .vacancy-meta-item--city::before { content: '📍'; }
.card.vacancy-feed-card .vacancy-meta-item--metro::before { content: 'Ⓜ'; }
.card.vacancy-feed-card .vacancy-meta-item--format::before { content: '◌'; }

/* Short preview block in feed cards */
.card.vacancy-feed-card .vacancy-brief {
  margin-top: 10px;
}
.card.vacancy-feed-card .vacancy-brief ul {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
.card.vacancy-feed-card .vacancy-brief li {
  position: relative;
  padding-left: 18px;
  margin: 0 0 6px;
  color: var(--text-2) !important;
  font-size: 13px;
  line-height: 1.4;
}
.card.vacancy-feed-card .vacancy-brief li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .54em;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: radial-gradient(circle at 35% 35%, rgba(167,139,250,1) 0%, rgba(99,102,241,1) 72%);
  box-shadow: 0 0 12px -2px rgba(99,102,241,.7);
}

/* Stack chips below short preview (top 5 skills) */
.card.vacancy-feed-card .vacancy-stack {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 7px;
}
.card.vacancy-feed-card .vacancy-stack .vacancy-stack-label {
  padding-top: 2px;
  font-size: 12px !important;
}
.card.vacancy-feed-card .vacancy-stack-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.card.vacancy-feed-card .vacancy-stack-chips .stack-chip {
  padding: 5px 11px !important;
  font-family: var(--font-display) !important;
  font-size: 11px !important;
  font-weight: 550 !important;
  color: var(--text-2) !important;
  border: 1px solid var(--line-2) !important;
  background: rgba(255,255,255,.035) !important;
  border-radius: 999px !important;
}

@media (max-width: 640px) {
  .card.vacancy-feed-card .vacancy-stack {
    gap: 6px;
  }
  .card.vacancy-feed-card .vacancy-stack .vacancy-stack-label {
    width: 100%;
    padding-top: 0;
  }
  .card.vacancy-feed-card .vacancy-title {
    font-size: clamp(16px, 5.4vw, 22px) !important;
  }
  .card.vacancy-feed-card .vacancy-date-pill {
    font-size: 11px;
    padding: 6px 11px;
  }
  .card.vacancy-feed-card .vacancy-meta-item {
    font-size: 11px;
  }
  .card.vacancy-feed-card .vacancy-brief li {
    font-size: 12px;
  }
  .card.vacancy-feed-card .vacancy-stack .vacancy-stack-label {
    font-size: 11px !important;
  }
  .card.vacancy-feed-card .vacancy-stack-chips .stack-chip {
    font-size: 10px !important;
    padding: 4px 9px !important;
  }
}

/* Actions row buttons */
.card .actions-row {
  margin-top: 16px !important;
  gap: 8px !important;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.card .actions-row button {
  padding: 9px 14px !important;
  font-family: var(--font-display) !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  letter-spacing: -.005em !important;
  border-radius: 10px !important;
  background: rgba(255,255,255,.04) !important;
  border: 1px solid var(--line-2) !important;
  color: var(--text-2) !important;
  transition: all .18s ease;
}
.card .actions-row button:hover {
  color: var(--text) !important;
  background: rgba(255,255,255,.07) !important;
  border-color: var(--line-3) !important;
  transform: translateY(-1px);
}
.card .actions-row button.danger {
  color: #FCA5A5 !important;
  background: rgba(239,68,68,.06) !important;
  border-color: rgba(239,68,68,.22) !important;
}
.card .actions-row button.danger:hover {
  color: #FECACA !important;
  background: rgba(239,68,68,.12) !important;
  border-color: rgba(239,68,68,.38) !important;
}
.card .actions-row button[data-action="detail"] {
  margin-left: auto !important;
  background: linear-gradient(180deg, rgba(59,130,246,.22), rgba(30,68,119,.28)) !important;
  color: #fff !important;
  border: 1px solid rgba(59,130,246,.35) !important;
  font-weight: 600 !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.08) inset, 0 4px 14px -4px rgba(30,68,119,.45);
}
.card .actions-row button[data-action="detail"]:hover {
  background: linear-gradient(180deg, rgba(59,130,246,.32), rgba(30,68,119,.38)) !important;
  border-color: rgba(59,130,246,.5) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.1) inset, 0 8px 24px -6px rgba(30,68,119,.55);
}

/* Recommendation feed action bar layout polish (without touching spotlight) */
.card.vacancy-feed-card .actions-row {
  margin-top: 14px !important;
  padding-top: 14px !important;
}
.card.vacancy-feed-card .actions-row button {
  padding: 9px 14px !important;
  font-size: 12px !important;
}
.card.vacancy-feed-card .actions-row button[data-action="detail"] {
  min-width: 132px;
  font-size: 13px !important;
  background: linear-gradient(180deg, rgba(111,97,255,.42), rgba(78,56,245,.52)) !important;
  border-color: rgba(125,115,255,.55) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.12) inset, 0 10px 26px -8px rgba(93,73,255,.6) !important;
}
.card.vacancy-feed-card .actions-row button[data-action="detail"]:hover {
  background: linear-gradient(180deg, rgba(134,123,255,.5), rgba(94,72,255,.58)) !important;
  border-color: rgba(150,141,255,.62) !important;
}
@media (max-width: 720px) {
  .card.vacancy-feed-card .actions-row {
    gap: 8px !important;
  }
  .card.vacancy-feed-card .actions-row button {
    font-size: 11px !important;
    padding: 7px 10px !important;
  }
  .card.vacancy-feed-card .actions-row button[data-action="detail"] {
    margin-left: 0 !important;
    width: 100%;
    order: 3;
    min-width: 0;
    font-size: 12px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   BOTTOM TAB BAR — floating pill on gradient
   ═══════════════════════════════════════════════════════════════ */
nav.tabs {
  position: fixed !important;
  left: 50% !important;
  bottom: 20px !important;
  transform: translateX(-50%);
  display: flex !important;
  align-items: center;
  justify-content: stretch;
  gap: 4px !important;
  width: min(520px, calc(100vw - 32px)) !important;
  padding: 6px !important;
  background: rgba(8,10,15,.8) !important;
  backdrop-filter: blur(22px) saturate(1.5);
  -webkit-backdrop-filter: blur(22px) saturate(1.5);
  border: 1px solid var(--line-2) !important;
  border-radius: 999px !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.05) inset,
    0 12px 40px -8px rgba(0,0,0,.65),
    0 0 60px -20px rgba(59,130,246,.25);
  z-index: 30;
}
nav.tabs button {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  padding: 10px 20px !important;
  font-family: var(--font-display) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: -.005em !important;
  border-radius: 999px !important;
  background: transparent !important;
  border: none !important;
  color: var(--text-2) !important;
  transition: all .2s ease;
  box-shadow: none !important;
  min-height: 0 !important;
  text-align: center !important;
  white-space: nowrap !important;
}
nav.tabs button:hover {
  color: var(--text) !important;
  background: rgba(255,255,255,.04) !important;
}
nav.tabs button.active {
  background: linear-gradient(180deg, rgba(59,130,246,.28), rgba(30,68,119,.32)) !important;
  color: #fff !important;
  font-weight: 600 !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.12) inset, 0 4px 12px rgba(30,68,119,.35) !important;
}

@media (max-width: 760px) {
  nav.tabs {
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
    transform: none !important;
  }
}

@media (max-width: 560px) {
  nav.tabs button { padding: 8px 14px !important; font-size: 12px !important; }
}

/* ═══════════════════════════════════════════════════════════════
   PANELS / MODALS — typography polish
   ═══════════════════════════════════════════════════════════════ */
.panel-title,
.panel-header h1, .panel-header h2,
.modal-card h1, .modal-card h2, .modal-card h3,
.paywall-modal-card h1, .paywall-modal-card h2, .paywall-modal-card h3,
.empty-title,
.stat-value,
.metric-value,
.usage-stat-value,
.plan-price .amount,
.big-number {
  font-family: var(--font-display);
  letter-spacing: -.015em;
}
.stat-value, .metric-value, .usage-stat-value, .big-number {
  letter-spacing: -.02em;
  font-weight: 700;
}

/* ═══════════════════════════════════════════════════════════════
   GALLERY PAGE CHROME (webapp/index.html)
   ═══════════════════════════════════════════════════════════════ */
.webapp-shell {
  position: relative;
  z-index: 1;
  max-width: 1280px;
  margin: 0 auto;
  padding: 72px 32px 96px;
  font-family: var(--font-body);
  color: var(--text, #EDF2F7);
}
.webapp-shell__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(59,130,246,.10);
  border: 1px solid rgba(59,130,246,.28);
  color: var(--blue-light, #60A5FA);
  font-family: var(--font-display);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.webapp-shell h1 {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.05;
  margin: 0 0 16px;
  color: var(--text);
}
.webapp-shell h1 em {
  font-style: normal;
  background: linear-gradient(120deg, var(--blue-vivid) 0%, var(--blue-light) 50%, #93C5FD 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.webapp-shell__lede {
  font-size: 1.08rem;
  color: var(--text-2, #CBD5E1);
  max-width: 64ch;
  margin: 0 0 48px;
  line-height: 1.55;
}
.webapp-shell__brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--text);
  text-decoration: none;
  letter-spacing: -.015em;
  margin-bottom: 40px;
}
.webapp-shell__brand::before {
  content: '';
  width: 22px;
  height: 22px;
  background: url('./logo-champly-purple-96.png') center / contain no-repeat;
  filter: drop-shadow(0 0 10px rgba(111,76,255,.45));
}
.webapp-section { margin-top: 56px; }
.webapp-section__title {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--text);
  margin: 0 0 6px;
}
.webapp-section__subtitle {
  color: var(--muted, #64748B);
  font-size: .92rem;
  margin: 0 0 22px;
}
.webapp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 18px;
}
.webapp-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 22px 22px 18px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(22,28,42,.78), rgba(14,18,28,.72));
  border: 1px solid var(--line-2);
  color: var(--text);
  text-decoration: none;
  min-height: 160px;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
  isolation: isolate;
  overflow: hidden;
}
.webapp-tile:hover {
  transform: translateY(-2px);
  border-color: rgba(59,130,246,.38);
  box-shadow: 0 10px 36px rgba(0,0,0,.45), 0 0 40px rgba(59,130,246,.14);
}
.webapp-tile__num {
  position: absolute;
  top: 14px;
  right: 18px;
  font-family: var(--font-display);
  font-size: .78rem;
  font-weight: 600;
  color: var(--muted, #64748B);
  letter-spacing: .08em;
}
.webapp-tile__kicker {
  font-family: var(--font-display);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--blue-light, #60A5FA);
  margin-bottom: 10px;
}
.webapp-tile__title {
  font-family: var(--font-display);
  font-size: 1.12rem;
  font-weight: 600;
  letter-spacing: -.012em;
  color: var(--text);
  line-height: 1.25;
  margin: 0 0 8px;
}
.webapp-tile__desc {
  font-size: .9rem;
  color: var(--text-2, #CBD5E1);
  line-height: 1.5;
  margin: 0 0 auto;
}
.webapp-tile__arrow {
  margin-top: 16px;
  font-family: var(--font-display);
  font-size: .82rem;
  font-weight: 600;
  color: var(--blue-light, #60A5FA);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.webapp-tile[data-kind="home"]     .webapp-tile__kicker { color: #60A5FA; }
.webapp-tile[data-kind="generate"] .webapp-tile__kicker { color: #93C5FD; }
.webapp-tile[data-kind="detail"]   .webapp-tile__kicker { color: #A5B4FC; }
.webapp-tile[data-kind="interview"].webapp-tile__kicker { color: #D4FF4F; }
.webapp-tile[data-kind="sub"]      .webapp-tile__kicker { color: #FBBF24; }

/* ═══════════════════════════════════════════════════════════════
   SNAPSHOT BANNER (injected into each page)
   ═══════════════════════════════════════════════════════════════ */
.snapshot-banner {
  position: sticky;
  top: 0;
  z-index: 100;
  background: linear-gradient(180deg, rgba(6,8,16,.94) 0%, rgba(6,8,16,.82) 100%);
  border-bottom: 1px solid var(--line-2);
  padding: 12px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  font-family: var(--font-body);
}
.snapshot-banner ~ .app-shell .topbar { top: 60px; } /* stack below banner */
.snapshot-banner__left,
.snapshot-banner__right {
  display: flex; align-items: center; gap: 12px; min-width: 0;
}
.snapshot-banner__back {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 13px; border-radius: 999px;
  font-family: var(--font-display); font-size: .82rem; font-weight: 500;
  color: var(--text-2); background: var(--glass, rgba(18,24,38,.52));
  border: 1px solid var(--line-2); text-decoration: none;
  transition: color .18s, background .18s, border-color .18s;
}
.snapshot-banner__back:hover {
  color: var(--text); background: var(--glass-hover, rgba(24,32,52,.62));
  border-color: rgba(59,130,246,.28);
}
.snapshot-banner__meta { display: flex; flex-direction: column; min-width: 0; }
.snapshot-banner__meta small {
  font-family: var(--font-display); font-size: .68rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--blue-light);
}
.snapshot-banner__meta strong {
  font-family: var(--font-display); font-size: .98rem; font-weight: 600;
  color: var(--text); letter-spacing: -.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.snapshot-banner__nav { display: inline-flex; gap: 6px; }
.snapshot-banner__nav a {
  width: 34px; height: 34px; display: inline-flex;
  align-items: center; justify-content: center;
  border-radius: 999px; border: 1px solid var(--line-2);
  background: var(--glass); color: var(--text-2);
  text-decoration: none; font-family: var(--font-display);
  font-weight: 600; font-size: .95rem;
  transition: color .18s, border-color .18s, background .18s;
}
.snapshot-banner__nav a:hover {
  color: var(--text); border-color: rgba(59,130,246,.35);
  background: var(--glass-hover);
}
.snapshot-banner__nav a.is-disabled { opacity: .35; pointer-events: none; }
@media (max-width: 620px) {
  .snapshot-banner { padding: 10px 14px; }
  .snapshot-banner__meta small { display: none; }
  .snapshot-banner__back .label-long { display: none; }
}

/* ═══════════════════════════════════════════════════════════════
   RESUME PAGE — заголовок «Резюме» + два больших action-button
   Этот заголовок ловит селектор #content > .row.space:first-child
   выше (сегмент-контрол) — на странице Резюме это смотрелось как
   странный пустой бар. Переопределяем: возвращаем заголовку
   нормальный page-header вид с typography.
   ═══════════════════════════════════════════════════════════════ */
#content > .row.space:first-child:has(> .title) {
  margin: 32px 0 24px !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}
#content > .row.space:first-child > .title {
  font-family: var(--font-display) !important;
  font-size: 28px !important;
  font-weight: 700 !important;
  letter-spacing: -.022em !important;
  margin: 0 !important;
  color: var(--text) !important;
  line-height: 1.1;
}
#content > .row.space:first-child:has(> .title) > .row {
  display: inline-flex !important;
  gap: 10px !important;
  background: transparent !important;
  border-radius: 0 !important;
  padding: 0 !important;
  position: relative;
  isolation: isolate;
  z-index: 2;
}
#content > .row.space:first-child:has(> .title) > .row > button {
  padding: 10px 18px !important;
  border-radius: 12px !important;
  font-family: var(--font-display) !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  letter-spacing: -.005em !important;
  background: rgba(255,255,255,.04) !important;
  border: 1px solid var(--line-2) !important;
  color: var(--text-2) !important;
  transition: all .18s ease;
  box-shadow: none !important;
  /* Prevent backdrop-filter compositor artifacts ("light stripe") when
     hovering neighbouring cards. */
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background-clip: padding-box;
  position: relative;
  isolation: isolate;
  z-index: 1;
}
#content > .row.space:first-child:has(> .title) > .row > button:hover {
  color: var(--text) !important;
  background: rgba(255,255,255,.07) !important;
  border-color: var(--line-3) !important;
  transform: translateY(-1px);
}
#content > .row.space:first-child:has(> .title) > .row > button.primary {
  background: linear-gradient(180deg, rgba(59,130,246,.28), rgba(30,68,119,.34)) !important;
  color: #fff !important;
  border: 1px solid rgba(59,130,246,.42) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.10) inset, 0 6px 18px -6px rgba(30,68,119,.5) !important;
}
#content > .row.space:first-child:has(> .title) > .row > button.primary:hover {
  background: linear-gradient(180deg, rgba(59,130,246,.36), rgba(30,68,119,.42)) !important;
  border-color: rgba(59,130,246,.55) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.12) inset, 0 10px 26px -8px rgba(30,68,119,.6) !important;
}

/* ═══════════════════════════════════════════════════════════════
   RESUME PAGE — карточки "Активное резюме" и "Все резюме"
   ═══════════════════════════════════════════════════════════════ */
/* Section-level cards now act as section frames, not glass tiles */
#content > .card:has(> .title) {
  padding: 22px 24px 24px !important;
}
#content > .card > .title {
  font-family: var(--font-display) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase;
  color: var(--blue-light, #60A5FA) !important;
  margin: 0 0 16px !important;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

/* Active resume row — spotlight card.
   The inner row's translucent gradient background covers the outer
   .card's ::before/::after spotlight, so we give it its own pair. */
#content > .card > .row.space.wrap {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 20px !important;
  padding: 18px 20px;
  background: linear-gradient(135deg, rgba(59,130,246,.07), rgba(30,68,119,.10));
  border: 1px solid rgba(59,130,246,.20);
  border-radius: 14px;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transition: border-color .25s ease, box-shadow .25s ease;
}
#content > .card > .row.space.wrap::before,
#content > .card > .row.space.wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity .35s ease;
  z-index: 0;
}
#content > .card > .row.space.wrap::before {
  background: radial-gradient(
    340px 280px at var(--_px, 50%) var(--_py, 50%),
    rgba(59,130,246,.32) 0%,
    rgba(30,68,119,.12) 38%,
    transparent 72%
  );
}
#content > .card > .row.space.wrap::after {
  background: radial-gradient(
    180px 180px at var(--_px, 50%) var(--_py, 50%),
    rgba(96,165,250,.30) 0%,
    transparent 70%
  );
  mix-blend-mode: normal;
}
#content > .card > .row.space.wrap:hover::before,
#content > .card > .row.space.wrap:hover::after { opacity: 1; }
#content > .card > .row.space.wrap:hover {
  border-color: rgba(59,130,246,.36);
  box-shadow: 0 0 0 1px rgba(59,130,246,.18) inset, 0 8px 24px -10px rgba(30,68,119,.4);
}
#content > .card > .row.space.wrap > * { position: relative; z-index: 1; }

#content > .card > .row.space.wrap > div:first-child {
  min-width: 0;
  flex: 1;
}
#content > .card > .row.space.wrap > div:first-child > .title {
  font-family: var(--font-display) !important;
  font-size: 17px !important;
  font-weight: 600 !important;
  letter-spacing: -.015em !important;
  color: var(--text) !important;
  margin: 0 0 6px !important;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#content > .card > .row.space.wrap > div:first-child > p.small.muted {
  margin: 0 !important;
  font-size: 12.5px !important;
  color: var(--text-2) !important;
  line-height: 1.5;
}
#content > .card > .row.space.wrap > div:first-child > p.small.muted + p.small.muted {
  color: var(--muted) !important;
  font-size: 11.5px !important;
  margin-top: 4px !important;
  letter-spacing: .03em;
  text-transform: uppercase;
  font-weight: 500;
}
#content > .card > .row.space.wrap > .row {
  display: inline-flex !important;
  gap: 6px !important;
  flex-shrink: 0;
}

/* Action buttons inside resume rows — premium ghost */
#content > .card .row > button[data-open-resume],
#content > .card .row > button[data-download-resume-pdf],
#content > .card .row > button[data-download-resume-docx],
#content > .card .row > button[data-activate-resume],
#content > .card .row > button[data-rename-resume],
#content > .card .row > button[data-delete-resume] {
  padding: 7px 12px !important;
  border-radius: 9px !important;
  font-family: var(--font-display) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: -.003em !important;
  background: rgba(255,255,255,.04) !important;
  border: 1px solid var(--line-2) !important;
  color: var(--text-2) !important;
  transition: all .15s ease;
  box-shadow: none !important;
}
#content > .card .row > button[data-open-resume]:hover,
#content > .card .row > button[data-download-resume-pdf]:hover,
#content > .card .row > button[data-download-resume-docx]:hover,
#content > .card .row > button[data-activate-resume]:hover,
#content > .card .row > button[data-rename-resume]:hover {
  color: var(--text) !important;
  background: rgba(255,255,255,.08) !important;
  border-color: var(--line-3) !important;
}
#content > .card .row > button[data-open-resume] {
  color: var(--blue-light) !important;
  background: rgba(59,130,246,.08) !important;
  border-color: rgba(59,130,246,.22) !important;
}
#content > .card .row > button[data-open-resume]:hover {
  color: #93C5FD !important;
  background: rgba(59,130,246,.14) !important;
  border-color: rgba(59,130,246,.4) !important;
}
#content > .card .row > button[data-activate-resume] {
  color: var(--lime) !important;
  background: rgba(212,255,79,.08) !important;
  border-color: rgba(212,255,79,.22) !important;
}
#content > .card .row > button[data-activate-resume]:hover {
  color: #E5FF7A !important;
  background: rgba(212,255,79,.14) !important;
  border-color: rgba(212,255,79,.42) !important;
}
#content > .card .row > button.danger,
#content > .card .row > button[data-delete-resume] {
  color: #FCA5A5 !important;
  background: rgba(239,68,68,.06) !important;
  border-color: rgba(239,68,68,.22) !important;
}
#content > .card .row > button.danger:hover,
#content > .card .row > button[data-delete-resume]:hover {
  color: #FECACA !important;
  background: rgba(239,68,68,.13) !important;
  border-color: rgba(239,68,68,.42) !important;
}

/* "Все резюме" — list of nested article.card → make them flat list rows */
#content > .card > article.card {
  background: rgba(255,255,255,.015) !important;
  border: 1px solid var(--line) !important;
  border-radius: 12px !important;
  padding: 16px 18px !important;
  margin: 0 0 10px !important;
  box-shadow: none !important;
  animation: none !important;
  opacity: 1 !important;
  transition: background .18s, border-color .18s, transform .18s;
}
#content > .card > article.card:hover {
  background: rgba(255,255,255,.035) !important;
  border-color: var(--line-3) !important;
  transform: none !important;
  box-shadow: none !important;
}
#content > .card > article.card:last-child { margin-bottom: 0 !important; }

/* card::before/after spotlight на строках резюме в списке — ОСТАВЛЕН. Раньше было display:none, сейчас работает. */

#content > .card > article.card > .row.space.wrap {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  padding: 0 !important;
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
}
#content > .card > article.card > .row.space.wrap > div:first-child > .title {
  font-size: 14.5px !important;
  font-weight: 600 !important;
  margin: 0 0 4px !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
#content > .card > article.card .chips {
  margin: 6px 0 4px !important;
  display: inline-flex !important;
  gap: 6px;
}
#content > .card > article.card .chips .chip {
  padding: 2px 9px !important;
  font-family: var(--font-display) !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  letter-spacing: .04em !important;
  text-transform: uppercase;
  color: var(--lime) !important;
  background: rgba(212,255,79,.10) !important;
  border: 1px solid rgba(212,255,79,.28) !important;
  border-radius: 999px !important;
}
#content > .card > article.card > .row.space.wrap > .row.wrap {
  flex-shrink: 0;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px !important;
  max-width: 60%;
}

/* Resume page mobile polish: preserve desktop composition, but on
   narrow screens make headers/buttons/cards flow without clipping. */
.resume-page-header .resume-page-actions,
.resume-action-row,
.resume-info {
  min-width: 0;
}

@media (max-width: 760px) {
  #content > .row.space.resume-page-header {
    align-items: flex-start !important;
    gap: 12px !important;
    margin: 26px 0 18px !important;
  }
  #content > .row.space.resume-page-header > .title {
    width: 100%;
    font-size: clamp(42px, 12vw, 56px) !important;
    line-height: 1.03 !important;
    letter-spacing: -.03em !important;
  }
  #content > .row.space.resume-page-header > .resume-page-actions {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 10px !important;
  }
  #content > .row.space.resume-page-header > .resume-page-actions > button {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 48px !important;
    padding: 10px 12px !important;
    white-space: normal !important;
    line-height: 1.2 !important;
    justify-content: center;
  }

  #content .resume-active-row,
  #content .resume-list-row {
    align-items: stretch !important;
    gap: 14px !important;
  }
  #content .resume-active-row > .resume-info > .title,
  #content .resume-list-row > .resume-info > .title {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    line-height: 1.28 !important;
  }
  #content .resume-active-row > .resume-info > p.small.muted,
  #content .resume-list-row > .resume-info > p.small.muted {
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }

  #content .resume-action-row {
    width: 100%;
    max-width: 100% !important;
    display: grid !important;
    gap: 8px !important;
    justify-content: stretch !important;
    flex-shrink: 1 !important;
  }
  #content .resume-action-row--active {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  #content .resume-action-row--list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  #content .resume-action-row > button {
    width: 100% !important;
    min-width: 0 !important;
    padding: 9px 10px !important;
    white-space: normal !important;
    line-height: 1.22 !important;
    text-align: center !important;
  }
}

@media (max-width: 560px) {
  #content > .row.space.resume-page-header > .resume-page-actions {
    grid-template-columns: 1fr;
  }
  #content .resume-active-row,
  #content .resume-list-row {
    padding: 14px !important;
  }
}

@media (max-width: 430px) {
  #content .resume-action-row--active,
  #content .resume-action-row--list {
    grid-template-columns: 1fr;
  }
}

/* HH Autopilot Pairing card — compact look */
#content > .card:last-child:has(#pair-generate) {
  background: linear-gradient(180deg, rgba(212,255,79,.04), rgba(168,208,61,.06)) !important;
  border: 1px solid rgba(212,255,79,.18) !important;
  margin-top: 16px !important;
}
#content > .card:has(#pair-generate) > .title {
  color: var(--lime) !important;
  border-bottom-color: rgba(212,255,79,.18) !important;
}
#content > .card:has(#pair-generate) > p.small.muted {
  color: var(--text-2) !important;
  font-size: 13px !important;
  line-height: 1.55;
  margin: 0 0 14px !important;
}
#content > .card:has(#pair-generate) #pair-generate {
  background: linear-gradient(180deg, rgba(212,255,79,.16), rgba(168,208,61,.22)) !important;
  border: 1px solid rgba(212,255,79,.38) !important;
  color: var(--lime) !important;
  font-family: var(--font-display) !important;
  font-weight: 600 !important;
  padding: 10px 18px !important;
  border-radius: 11px !important;
  font-size: 13px !important;
}
#content > .card:has(#pair-generate) #pair-copy {
  padding: 10px 14px !important;
  border-radius: 11px !important;
  font-family: var(--font-display) !important;
  font-size: 13px !important;
  background: rgba(255,255,255,.03) !important;
  border: 1px solid var(--line-2) !important;
  color: var(--text-2) !important;
}

/* ═══════════════════════════════════════════════════════════════
   APP-MODAL — большая премиальная модалка (визарды/просмотр/boost)
   Структура: .app-modal (fullscreen scroller)
              .app-modal-sheet (max-width container)
                 ├ .app-modal-head (sticky top)
                 ├ .app-modal-body (flowing content)
                 └ .app-modal-foot (sticky bottom inside sheet)
   ═══════════════════════════════════════════════════════════════ */
.app-modal {
  background: rgba(4,6,12,.78) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  align-items: flex-start !important;
  justify-content: center !important;
  padding: 32px 16px 100px !important; /* bottom padding leaves room for tab bar */
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  z-index: 9999 !important; /* above sticky topbar (z-index: ~10) so modal head is never covered */
}
/* When modal is open, hide the topbar so it never covers .app-modal-head.
   Use both class-based (live JS) and structural (:has — for static snapshots) so
   the screenshot pages with always-visible modals don't have the topbar overlap. */
body.modal-open .topbar,
body:has(#modal-root .app-modal) .topbar,
body:has(#modal-root .app-modal) nav.tabs { display: none !important; }
/* Lift the modal body bottom padding since the tab bar is hidden */
body:has(#modal-root .app-modal) .app-modal { padding-bottom: 24px !important; }
.app-modal-backdrop {
  background: transparent !important;
  position: fixed !important;
  inset: 0 !important;
}

.app-modal-sheet {
  position: relative;
  width: 100% !important;
  max-width: 1100px !important;
  max-height: none !important;
  height: auto !important;
  margin: 0 auto !important;
  background: linear-gradient(180deg, rgba(20,26,40,.97), rgba(12,16,26,.97)) !important;
  border: 1px solid var(--line-2) !important;
  border-radius: 22px !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.06) inset,
    0 30px 90px -20px rgba(0,0,0,.85),
    0 0 100px -20px rgba(59,130,246,.22) !important;
  overflow: visible !important;
  display: flex;
  flex-direction: column;
  opacity: 1 !important;
  animation: none !important;
  transform: none !important;
  z-index: 1;
}

.app-modal-head {
  padding: 16px 22px !important;
  background: linear-gradient(180deg, rgba(30,40,60,.92), rgba(18,24,38,.88)) !important;
  border-bottom: 1px solid var(--line-2) !important;
  border-radius: 22px 22px 0 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  position: static !important; /* был sticky — теперь скроллится с контентом */
  z-index: 1;
  flex: 0 0 auto;
}
.app-modal-head h3 {
  font-family: var(--font-display) !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  letter-spacing: -.012em !important;
  color: var(--text) !important;
  margin: 0 !important;
  line-height: 1.3 !important;
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.app-modal-head button {
  width: 32px !important;
  height: 32px !important;
  padding: 0 !important;
  min-height: 0 !important;
  border-radius: 9px !important;
  background: rgba(255,255,255,.04) !important;
  border: 1px solid var(--line-2) !important;
  color: var(--text-2) !important;
  font-size: 13px !important;
  flex-shrink: 0;
  transition: all .18s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.app-modal-head button:hover {
  color: var(--text) !important;
  background: rgba(255,255,255,.08) !important;
  border-color: var(--line-3) !important;
}

.app-modal-body {
  padding: 22px 24px 24px !important;
  background: transparent !important;
  flex: 1 1 auto !important;
  min-height: 0;
}

.app-modal-foot {
  padding: 16px 22px 18px !important;
  background: transparent !important;
  border-top: 1px solid var(--line-2) !important;
  border-radius: 0 0 22px 22px !important;
  position: static !important; /* кнопки в потоке, не прибиты ко дну экрана */
  z-index: 1;
  flex: 0 0 auto;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  margin-top: 8px !important;
}
/* Hide foot when it has no actionable buttons (cosmetic empty bar) */
.app-modal-foot:empty,
.app-modal-foot:not(:has(button)) {
  display: none !important;
}

/* Modal-actions — горизонтальная компактная панель кнопок */
.app-modal-foot > .modal-actions {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  width: 100% !important;
  grid-template-columns: none !important;
}
.app-modal-foot > .modal-actions > button,
.app-modal-foot > button {
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 0 !important;
  padding: 9px 16px !important;
  font-family: var(--font-display) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: -.005em !important;
  border-radius: 10px !important;
  background: rgba(255,255,255,.04) !important;
  border: 1px solid var(--line-2) !important;
  color: var(--text-2) !important;
  transition: all .18s ease;
  box-shadow: none !important;
  flex-basis: auto !important;
}
.app-modal-foot > .modal-actions > button:hover,
.app-modal-foot > button:hover {
  color: var(--text) !important;
  background: rgba(255,255,255,.08) !important;
  border-color: var(--line-3) !important;
  transform: translateY(-1px);
}
/* "Отмена" — push to left */
.app-modal-foot > .modal-actions > button[data-modal-close],
.app-modal-foot > button[data-modal-close],
.app-modal-foot > .modal-actions > button:first-child:not(.primary):not([id*="prev"]):not([id*="back"]) {
  margin-right: auto !important;
  color: var(--muted) !important;
}
/* Primary — blue */
.app-modal-foot > .modal-actions > button.primary,
.app-modal-foot > button.primary {
  background: linear-gradient(180deg, rgba(59,130,246,.32), rgba(30,68,119,.40)) !important;
  border: 1px solid rgba(59,130,246,.50) !important;
  color: #fff !important;
  font-weight: 600 !important;
  padding: 9px 22px !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.10) inset, 0 4px 14px -4px rgba(30,68,119,.5) !important;
  grid-column: auto !important;
  flex-basis: auto !important;
}
.app-modal-foot > .modal-actions > button.primary:hover,
.app-modal-foot > button.primary:hover {
  background: linear-gradient(180deg, rgba(59,130,246,.42), rgba(30,68,119,.50)) !important;
  border-color: rgba(59,130,246,.65) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.12) inset, 0 8px 22px -6px rgba(30,68,119,.6) !important;
}
/* Disable wide-primary stretching */
.app-modal-foot > .modal-actions > button.wide-primary {
  grid-column: auto !important;
  flex: 0 0 auto !important;
  width: auto !important;
}

@media (max-width: 560px) {
  .app-modal { padding: 16px 10px 90px !important; }
  .app-modal-foot { padding: 10px 14px !important; }
  .app-modal-foot > .modal-actions { gap: 6px !important; }
  .app-modal-foot > .modal-actions > button,
  .app-modal-foot > button {
    flex: 1 1 calc(50% - 3px) !important;
    text-align: center;
    padding: 9px 10px !important;
    font-size: 12.5px !important;
  }
  .app-modal-foot > .modal-actions > button[data-modal-close]:first-child {
    margin-right: 0 !important;
  }
  .app-modal-foot > .modal-actions > button.primary { flex-basis: 100% !important; order: 99; }
}

/* Modal step card — keep them as proper spotlight cards.
   Раньше всё было flatten'ed — но из-за этого spotlight был только на всей модалке
   целиком, не на отдельных секциях. Возвращаем настоящие карточки с spotlight. */
.app-modal-body > .card {
  background: linear-gradient(168deg,
    rgba(22,28,42,.78) 0%,
    rgba(16,22,34,.72) 100%) !important;
  border: 1px solid var(--line-2) !important;
  border-radius: 16px !important;
  padding: 18px 20px !important;
  margin: 0 0 14px !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.04) inset,
    0 8px 24px -12px rgba(0,0,0,.4),
    0 2px 4px -2px rgba(0,0,0,.3) !important;
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
  position: relative;
  isolation: isolate;
}
/* Inner nested .card inside a step — keep flat (avoid card-in-card spotlight) */
.app-modal-body > .card > .card {
  background: rgba(255,255,255,.025) !important;
  border: 1px solid var(--line-2) !important;
  border-radius: 12px !important;
  padding: 14px 16px !important;
  margin: 12px 0 !important;
  box-shadow: none !important;
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
}
.app-modal-body > .card > .card::before,
.app-modal-body > .card > .card::after,
.app-modal-body > .card > .card:hover::before,
.app-modal-body > .card > .card:hover::after { display: none !important; }
.app-modal-body > .card > .card:hover {
  transform: none !important;
  border-color: var(--line-2) !important;
  box-shadow: none !important;
}

/* Per-section spotlight glow — appears on hover of each step card */
.app-modal-body > .card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity .35s ease;
  background: radial-gradient(
    520px 420px at var(--_mx, 50%) var(--_my, 0%),
    rgba(59,130,246,.16) 0%,
    rgba(30,68,119,.06) 35%,
    transparent 70%
  );
  z-index: 0;
}
.app-modal-body > .card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity .35s ease;
  background: radial-gradient(
    260px 260px at var(--_mx, 50%) var(--_my, 0%),
    rgba(96,165,250,.20) 0%,
    transparent 70%
  );
  mix-blend-mode: screen;
  z-index: 0;
}
.app-modal-body > .card:hover::before,
.app-modal-body > .card:hover::after { opacity: 1; }
.app-modal-body > .card > * { position: relative; z-index: 1; }

/* Drop the previous full-sheet spotlight — now lives on each .card */
.app-modal-sheet::before,
.app-modal-sheet::after { display: none !important; }
/* Wizard step heading */
.app-modal-body > .card > .title:first-child {
  font-family: var(--font-display) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  letter-spacing: -.018em !important;
  color: var(--text) !important;
  margin: 0 0 6px !important;
  line-height: 1.25 !important;
  padding: 0 !important;
  border: none !important;
  text-transform: none !important;
  display: block;
}
.app-modal-body > .card > .title:first-child + .small.muted {
  margin: 0 0 18px !important;
  font-size: 13px !important;
  color: var(--text-2) !important;
}

/* Sub-section .title inside wizard (e.g. "Языки", "Опыт 1") */
.app-modal-body > .card > .title:not(:first-child) {
  font-family: var(--font-display) !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  letter-spacing: -.005em !important;
  color: var(--text) !important;
  text-transform: none !important;
  margin: 22px 0 10px !important;
  padding: 12px 0 0 !important;
  border-top: 1px solid var(--line) !important;
  border-bottom: none !important;
}

/* Wizard label (Hard skills, Инструменты, ...) */
.app-modal-body label {
  display: block;
  font-family: var(--font-display) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase;
  color: var(--blue-light, #60A5FA) !important;
  margin: 14px 0 8px !important;
}
.app-modal-body label:first-of-type,
.app-modal-body > .card > label:first-of-type { margin-top: 0 !important; }

.app-modal-body input:not([type="checkbox"]):not([type="radio"]),
.app-modal-body textarea,
.app-modal-body select {
  width: 100%;
  padding: 9px 12px !important;
  border-radius: 9px !important;
  font-family: var(--font-body) !important;
  font-size: 13px !important;
  color: var(--text) !important;
  background: rgba(0,0,0,.28) !important;
  border: 1px solid var(--line-2) !important;
  transition: border-color .18s, background .18s, box-shadow .18s;
  box-sizing: border-box;
  min-height: 0 !important;
}

/* Dropdown affordance: always show a visible chevron on the right so
   users immediately recognize select fields as expandable lists. */
select:not([multiple]),
.app-modal-body select:not([multiple]) {
  appearance: none !important;
  -webkit-appearance: none !important;
  padding-right: 38px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%239DB2CC' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E") !important;
  background-position: calc(100% - 14px) center !important;
  background-size: 12px 8px !important;
  background-repeat: no-repeat !important;
  transition: border-color .18s, background-color .18s, box-shadow .18s, background-image .12s ease;
}

/* Open/interaction state: switch chevron direction to "up" (common DS pattern). */
select:not([multiple]).is-open,
.app-modal-body select:not([multiple]).is-open {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 6.5L6 1.5L11 6.5' stroke='%23BFD0E6' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E") !important;
}

/* Legacy IE arrow; safe no-op elsewhere. */
select::-ms-expand { display: none; }

.app-modal-body textarea { min-height: 80px !important; resize: vertical; }
.app-modal-body input:not([type="checkbox"]):not([type="radio"]):focus,
.app-modal-body textarea:focus,
.app-modal-body select:focus {
  outline: none;
  border-color: rgba(59,130,246,.5) !important;
  /* Keep the custom dropdown chevron visible on focus:
     use background-color instead of background shorthand
     so background-image (arrow) is not reset to none. */
  background-color: rgba(0,0,0,.38) !important;
  box-shadow: 0 0 0 3px rgba(59,130,246,.12) !important;
}
.app-modal-body input::placeholder,
.app-modal-body textarea::placeholder { color: var(--muted); font-size: 12.5px; }

/* Chip-toggle (Удалёнка/Гибрид/Офис, типы занятости и пр.) — pill-кнопки.
   Защищаем от агрессивных .app-modal-body .chips .chip правил. */
.app-modal-body .chips:has(.chip-toggle),
.chips:has(.chip-toggle),
.review-tags.editable,
.skill-list {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)) !important;
  justify-content: flex-start !important;
  align-content: flex-start !important;
  align-items: stretch !important;
  gap: 8px !important;
  width: 100% !important;
  margin: 0 0 8px !important;
}
.app-modal-body .chip-toggle,
.chip-toggle,
.review-tags.editable .review-tag-input,
.skill-list label {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 6px !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  min-height: 30px !important;
  height: auto !important;
  padding: 6px 10px !important;
  border: 1px solid rgba(126, 143, 185, .24) !important;
  border-radius: 999px !important;
  box-sizing: border-box !important;
  font-family: var(--font-display) !important;
  font-size: 10.5px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-align: left !important;
  color: #c5cede !important;
  background: linear-gradient(180deg, rgba(39, 45, 72, .34), rgba(22, 27, 48, .48)) !important;
  cursor: pointer !important;
  transition: all .18s !important;
  user-select: none !important;
  white-space: normal !important;
  overflow: visible !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
  text-overflow: initial !important;
  line-height: 1.18 !important;
  margin: 0 !important;
  position: relative !important;
  top: 0 !important;
}
.review-tags.editable .review-tag-input {
  border-color: rgba(255,255,255,.14) !important;
  background: rgba(25, 31, 54, .48) !important;
}
.review-tags.editable .review-tag-input.positive {
  background: linear-gradient(180deg, rgba(30, 84, 66, .24), rgba(17, 52, 39, .34)) !important;
  border-color: rgba(74, 163, 111, .26) !important;
}
.review-tags.editable .review-tag-input.negative {
  background: linear-gradient(180deg, rgba(103, 45, 61, .24), rgba(70, 31, 45, .34)) !important;
  border-color: rgba(199, 92, 104, .24) !important;
}
.app-modal-body .chip-toggle:hover,
.chip-toggle:hover,
.review-tags.editable .review-tag-input:hover,
.skill-list label:hover {
  background: linear-gradient(180deg, rgba(47, 54, 86, .42), rgba(28, 35, 63, .56)) !important;
  border-color: rgba(145, 160, 205, .36) !important;
  color: #d8e0ee !important;
}
.app-modal-body .chip-toggle:has(input:checked),
.chip-toggle:has(input:checked),
.review-tags.editable .review-tag-input:has(input:checked),
.skill-list label:has(input:checked) {
  background: linear-gradient(180deg, rgba(72, 83, 139, .42), rgba(43, 53, 102, .54)) !important;
  border-color: rgba(149, 164, 215, .42) !important;
  color: #edf2fb !important;
  box-shadow: 0 0 0 1px rgba(146, 160, 219, .12) inset !important;
}
.app-modal-body .chip-toggle input,
.chip-toggle input,
.review-tags.editable .review-tag-input input,
.skill-list label input {
  appearance: auto !important;
  -webkit-appearance: auto !important;
  width: 13px !important;
  height: 13px !important;
  margin: 0 !important;
  padding: 0 !important;
  accent-color: #7b8ee2;
  flex: 0 0 13px !important;
  align-self: center !important;
  vertical-align: middle !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  min-height: 0 !important;
}
/* Single long-option rows (e.g. "Только вакансии с указанной зарплатой"):
   keep same style but allow full-width chip so text is never clipped. */
.app-modal-body .chips:has(.chip-toggle) > .chip-toggle:only-child,
.chips:has(.chip-toggle) > .chip-toggle:only-child {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  max-width: 100% !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: initial !important;
  height: auto !important;
  min-height: 30px !important;
  padding-top: 6px !important;
  padding-bottom: 6px !important;
  line-height: 1.2 !important;
}
@media (max-width: 560px) {
  .app-modal-body .chips:has(.chip-toggle),
  .chips:has(.chip-toggle),
  .review-tags.editable,
  .skill-list {
    grid-template-columns: 1fr !important;
    justify-content: stretch !important;
  }
}

/* Inline row "input + button" or multi-input rows */
.app-modal-body .row {
  display: flex !important;
  gap: 6px !important;
  align-items: center;
  flex-wrap: wrap;
}
.app-modal-body .row > input { flex: 1 1 160px; min-width: 0; }
.app-modal-body .row > input + button,
.app-modal-body .row > button[data-add-skill] {
  padding: 9px 14px !important;
  border-radius: 9px !important;
  font-family: var(--font-display) !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  background: rgba(59,130,246,.10) !important;
  border: 1px solid rgba(59,130,246,.32) !important;
  color: var(--blue-light) !important;
  transition: all .18s;
  white-space: nowrap;
  min-height: 0 !important;
  flex: 0 0 auto;
}
.app-modal-body .row > input + button:hover,
.app-modal-body .row > button[data-add-skill]:hover {
  background: rgba(59,130,246,.18) !important;
  border-color: rgba(59,130,246,.5) !important;
  color: #93C5FD !important;
}

/* ═══════════════════════════════════════════════════════════════
   SUGGEST CHIPS — 1:1 from original styles-v2.css
   ═══════════════════════════════════════════════════════════════ */

/* Base .chip / .chips inside modal — match the original */
.app-modal-body .chips {
  display: flex !important;
  flex-wrap: wrap;
  gap: 8px !important;
  margin-top: 8px !important;
}
.app-modal-body .chips .chip {
  font-family: var(--font-display) !important;
  font-size: 11px !important;
  font-weight: 560 !important;
  padding: 3px 11px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.04) !important;
  border: 1px solid rgba(255,255,255,.06) !important;
  color: var(--text-2) !important;
  letter-spacing: .015em !important;
  cursor: pointer;
  transition: all .2s;
  text-transform: none;
  line-height: 1.3 !important;
  min-height: 0 !important;
  white-space: nowrap;
}
.app-modal-body .chips .chip:hover {
  background: rgba(255,255,255,.08) !important;
  border-color: rgba(255,255,255,.15) !important;
  color: var(--text-2) !important;
}

/* ── Spotlight wrapper for stack / tasks / results / skills-suggest ── */
.app-modal-body .chips[data-suggest-stack]:not(:empty),
.app-modal-body .chips[data-suggest-tasks]:not(:empty),
.app-modal-body .chips[data-suggest-results]:not(:empty),
.app-modal-body #skills-suggest-hard:not(:empty),
.app-modal-body #skills-suggest-tools:not(:empty) {
  display: flex !important;
  flex-wrap: wrap;
  gap: 8px !important;
  background: linear-gradient(165deg, rgba(18,24,38,.65) 0%, rgba(14,20,32,.75) 100%) !important;
  border: 1px solid rgba(59,130,246,.15) !important;
  border-radius: 12px !important;
  padding: 10px 12px !important;
  margin: 6px 0 14px !important;
  box-shadow: 0 4px 20px rgba(0,0,0,.2),
              inset 0 1px 0 rgba(255,255,255,.04) !important;
  backdrop-filter: blur(16px);
}

/* Caption */
.app-modal-body .chips[data-suggest-stack]:not(:empty)::before,
.app-modal-body .chips[data-suggest-tasks]:not(:empty)::before,
.app-modal-body .chips[data-suggest-results]:not(:empty)::before,
.app-modal-body #skills-suggest-hard:not(:empty)::before,
.app-modal-body #skills-suggest-tools:not(:empty)::before {
  content: 'Рекомендации (нажмите → добавить)';
  display: block;
  width: 100%;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 580;
  color: var(--blue-light);
  margin-bottom: 6px;
  letter-spacing: .02em;
  opacity: .8;
  text-transform: none;
}
.app-modal-body .chips[data-suggest-stack]:not(:empty)::before {
  content: 'Рекомендуемый стек';
}
/* Step 2 custom captions (same visual style, different text). */
.app-modal-body .chips.step2-suggest-chips[data-step2-title]:not(:empty)::before {
  content: attr(data-step2-title) !important;
}

/* Tasks / Results — stacked full-width pills */
.app-modal-body .chips[data-suggest-tasks],
.app-modal-body .chips[data-suggest-results] {
  flex-direction: column !important;
  min-width: 0;
}
.app-modal-body .chips[data-suggest-tasks] .chip,
.app-modal-body .chips[data-suggest-results] .chip {
  display: block !important;
  width: 100% !important;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding: 8px 12px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 1.45 !important;
  white-space: normal !important;
  overflow-wrap: anywhere;
  word-break: break-word;
  text-align: center;
  background: rgba(59,130,246,.08) !important;
  border: 1px solid rgba(59,130,246,.18) !important;
  border-radius: 999px !important;
  color: var(--text) !important;
  letter-spacing: 0 !important;
}
.app-modal-body .chips[data-suggest-tasks] .chip:hover,
.app-modal-body .chips[data-suggest-results] .chip:hover {
  background: rgba(59,130,246,.18) !important;
  border-color: rgba(59,130,246,.35) !important;
  color: var(--blue-pale) !important;
}

/* Stack / skill suggestions — pill chips inside the spotlight box */
.app-modal-body .chips[data-suggest-stack] .chip,
.app-modal-body #skills-suggest-hard .chip,
.app-modal-body #skills-suggest-tools .chip {
  padding: 8px 12px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  border-radius: 999px !important;
  background: rgba(59,130,246,.08) !important;
  border: 1px solid rgba(59,130,246,.18) !important;
  color: var(--text) !important;
  white-space: normal !important;
  line-height: 1.45 !important;
  letter-spacing: 0 !important;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.app-modal-body .chips[data-suggest-stack] .chip:hover,
.app-modal-body #skills-suggest-hard .chip:hover,
.app-modal-body #skills-suggest-tools .chip:hover {
  background: rgba(59,130,246,.18) !important;
  border-color: rgba(59,130,246,.35) !important;
  color: var(--blue-pale) !important;
}

/* Skill list (already-added) */
.app-modal-body .skill-list {
  margin: 0 0 8px !important;
  min-height: 0;
}
.app-modal-body .skill-list:empty {
  padding: 4px 10px;
  border: 1px dashed var(--line-2);
  border-radius: 8px;
  background: rgba(0,0,0,.15);
}
.app-modal-body .skill-list:empty::before {
  content: 'Пока пусто — выбирайте из подсказок ниже или добавьте свои';
  font-size: 11.5px;
  color: var(--muted);
  font-style: italic;
}

/* Hint text below sections */
.app-modal-body #skills-summary-hints,
.app-modal-body .small.muted {
  font-size: 12px !important;
  line-height: 1.5;
}

/* Language row */
.app-modal-body .lang-row {
  gap: 6px !important;
  margin-bottom: 6px;
}
.app-modal-body .lang-row > input { flex: 1 1 0; }
.app-modal-body .add-language-btn,
.app-modal-body button.add-language-btn {
  margin-top: 6px !important;
  padding: 7px 12px !important;
  border-radius: 8px !important;
  font-family: var(--font-display) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  background: rgba(255,255,255,.03) !important;
  border: 1px dashed var(--line-2) !important;
  color: var(--text-2) !important;
  min-height: 0 !important;
}
.app-modal-body .add-language-btn:hover {
  color: var(--blue-light) !important;
  border-color: rgba(59,130,246,.4) !important;
  border-style: solid !important;
}

.app-modal-body .add-experience-btn,
.app-modal-body button.add-experience-btn,
.app-modal-body #add-experience {
  display: inline-flex !important;
  align-items: center;
  margin-top: 16px !important;
  padding: 8px 12px !important;
  border-radius: 8px !important;
  font-family: var(--font-display) !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  background: rgba(255,255,255,.03) !important;
  border: 1px dashed var(--line-2) !important;
  color: var(--text-2) !important;
  position: relative;
  z-index: 2;
}
.app-modal-body .add-experience-btn:hover,
.app-modal-body #add-experience:hover {
  color: var(--blue-light) !important;
  border-color: rgba(59,130,246,.4) !important;
  border-style: solid !important;
}

/* Experience block (page 8) — nested .card inside wizard */
.app-modal-body > .card > .card,
.app-modal-body > .card > .exp-block,
.app-modal-body > .card > div[id*="exp-"] {
  background: rgba(255,255,255,.025) !important;
  border: 1px solid var(--line-2) !important;
  border-radius: 12px !important;
  padding: 14px 16px !important;
  margin: 12px 0 !important;
  box-shadow: none !important;
  animation: none !important;
  opacity: 1 !important;
}
/* Inner wizard cards — spotlight ОСТАВЛЕН. */
.app-modal-body > .card > .card > .row.space {
  margin-bottom: 10px;
}
.app-modal-body > .card > .card > .row.space > .title {
  font-size: 13.5px !important;
  font-weight: 600 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  color: var(--text) !important;
  text-transform: none !important;
  letter-spacing: -.005em !important;
}

/* ═══════════════════════════════════════════════════════════════
   SPLIT-COLUMNS layout (boost / resume preview)
   ═══════════════════════════════════════════════════════════════ */
.app-modal-body .split-columns {
  display: grid !important;
  grid-template-columns: 1.25fr 1fr;
  gap: 16px !important;
  margin-top: 16px;
  align-items: start;
}
.app-modal-body .split-columns > div {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}
@media (max-width: 820px) {
  .app-modal-body .split-columns { grid-template-columns: 1fr !important; }
}

/* Section card inside modal split column */
.app-modal-body .split-columns .card {
  background: rgba(255,255,255,.02) !important;
  border: 1px solid var(--line) !important;
  border-radius: 16px !important;
  padding: 18px 20px !important;
  margin: 0 !important;
  box-shadow: none !important;
  animation: none !important;
  opacity: 1 !important;
}
/* Split-columns wizard cards — spotlight ОСТАВЛЕН. */
.app-modal-body .split-columns > div > .card > .title:first-child {
  font-family: var(--font-display) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase;
  color: var(--blue-light, #60A5FA) !important;
  margin: 0 0 14px !important;
  padding: 0 0 12px !important;
  border-bottom: 1px solid var(--line);
}

/* Nested article inside split-column card → flat callout */
.app-modal-body .split-columns article.card {
  background: rgba(255,255,255,.025) !important;
  border: 1px solid var(--line-2) !important;
  border-left: 3px solid rgba(59,130,246,.45) !important;
  border-radius: 10px !important;
  padding: 14px 16px !important;
  margin: 0 0 10px !important;
}
.app-modal-body .split-columns article.card:last-child { margin-bottom: 0 !important; }
.app-modal-body .split-columns article.card .small b {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -.012em;
  color: var(--text);
  display: block;
  margin-bottom: 6px;
}
.app-modal-body .split-columns article.card p.small.muted {
  font-size: 13px !important;
  color: var(--text-2) !important;
  line-height: 1.55 !important;
  margin: 0 0 8px !important;
}
.app-modal-body .split-columns article.card p.small.muted:last-of-type { margin-bottom: 0 !important; }

/* Lists inside split-columns cards */
.app-modal-body .split-columns ul {
  margin: 0 !important;
  padding-left: 0 !important;
  list-style: none;
}
.app-modal-body .split-columns ul li {
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text-2);
}
.app-modal-body .split-columns ul li:last-child { border-bottom: none; }
.app-modal-body .split-columns ul li b {
  font-family: var(--font-display);
  color: var(--text);
  font-weight: 600;
}

/* ═══════════════════════════════════════════════════════════════
   MARKET BOOST — стратегия + диапазон
   ═══════════════════════════════════════════════════════════════ */
.market-boost-summary.card {
  background: linear-gradient(135deg,
    rgba(34,197,94,.06) 0%,
    rgba(212,255,79,.04) 60%,
    rgba(59,130,246,.06) 100%) !important;
  border: 1px solid rgba(212,255,79,.25) !important;
  border-radius: 18px !important;
  padding: 22px 24px !important;
  margin: 0 0 16px !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.05) inset,
    0 0 50px -20px rgba(212,255,79,.18) !important;
  animation: none !important;
  opacity: 1 !important;
}
/* Market-boost-summary card — spotlight ОСТАВЛЕН. */
.market-boost-summary.card > .title:first-child {
  font-family: var(--font-display) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase;
  color: var(--lime) !important;
  margin: 0 0 14px !important;
  padding: 0 !important;
  border: none !important;
}
.market-boost-summary p.small {
  font-size: 14px !important;
  line-height: 1.6 !important;
  color: var(--text) !important;
  margin: 0 0 14px !important;
  letter-spacing: -.005em;
}

.market-caution {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 14px 0 !important;
  padding: 12px 14px !important;
  border-radius: 10px;
  background: rgba(251,191,36,.06);
  border: 1px solid rgba(251,191,36,.20);
  color: #FBBF24;
  font-size: 12.5px;
  line-height: 1.5;
}
.market-caution::before {
  content: '⚠';
  font-size: 14px;
  flex-shrink: 0;
  margin-top: 1px;
}

.market-boost-inline {
  display: flex !important;
  flex-wrap: wrap;
  gap: 10px !important;
  margin-top: 14px !important;
}
.market-boost-inline > span {
  flex: 1 1 0;
  min-width: 180px;
  padding: 12px 16px;
  background: rgba(0,0,0,.25);
  border: 1px solid var(--line-2);
  border-radius: 12px;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -.005em;
  position: relative;
  text-align: left;
}
.market-boost-inline > span::before {
  content: '';
  position: absolute;
  left: 12px;
  top: 6px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--blue-light);
}
.market-boost-inline > span:nth-child(1) { color: #94A3B8; }
.market-boost-inline > span:nth-child(1)::before { background: #94A3B8; box-shadow: 0 0 8px #94A3B8; }
.market-boost-inline > span:nth-child(2) { color: var(--blue-light); border-color: rgba(59,130,246,.3); }
.market-boost-inline > span:nth-child(2)::before { background: var(--blue-light); box-shadow: 0 0 8px var(--blue-light); }
.market-boost-inline > span:nth-child(3) { color: var(--lime); border-color: rgba(212,255,79,.32); }
.market-boost-inline > span:nth-child(3)::before { background: var(--lime); box-shadow: 0 0 8px var(--lime); }

/* market-uplift inside articles — green glow */
.market-uplift {
  display: inline-block;
  padding: 4px 10px;
  margin: 6px 0 8px !important;
  font-family: var(--font-display) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--lime) !important;
  background: rgba(212,255,79,.08);
  border: 1px solid rgba(212,255,79,.25);
  border-radius: 999px;
  letter-spacing: -.003em;
}
.market-note {
  font-size: 12.5px !important;
  color: var(--muted) !important;
  font-style: italic;
  margin: 0 0 12px !important;
  line-height: 1.5;
}

/* ═══════════════════════════════════════════════════════════════
   RESUME PREVIEW (page 11 — large modal with full resume)
   ═══════════════════════════════════════════════════════════════ */
.resume-header-bar {
  margin: 0 0 18px;
  padding: 16px 20px;
  background: linear-gradient(135deg, rgba(59,130,246,.08), rgba(30,68,119,.10));
  border: 1px solid rgba(59,130,246,.22);
  border-radius: 14px;
}
.resume-header-bar .small.muted:first-child {
  font-family: var(--font-display);
  font-size: 13px !important;
  color: var(--text) !important;
  font-weight: 500;
  margin-bottom: 8px;
  display: block;
  line-height: 1.4;
}
.resume-badges-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0;
}
.badge {
  padding: 4px 11px;
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.badge-score {
  color: var(--lime);
  background: rgba(212,255,79,.10);
  border: 1px solid rgba(212,255,79,.30);
}
.resume-header-bar .small.muted:last-child {
  font-size: 11.5px !important;
  color: var(--muted) !important;
  font-style: italic;
  display: block;
  margin-top: 6px;
}

/* Resume preview — sections inside split-columns become readable doc */
.app-modal-body .split-columns .card > .title:first-child {
  /* For resume preview, use a slightly different title style — section headings */
}
.app-modal-body .split-columns .card ul li {
  padding: 6px 0 !important;
  border-bottom: none !important;
  font-size: 13.5px !important;
}
.app-modal-body .split-columns .card p {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text-2);
  margin: 0 0 8px;
}
.app-modal-body .split-columns article.card .row.space {
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 8px;
}
.app-modal-body .split-columns article.card .row.space b {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -.005em;
  display: block;
  line-height: 1.35;
}
.app-modal-body .split-columns article.card .row.space .small.muted {
  font-size: 11.5px;
  color: var(--muted);
  white-space: nowrap;
  letter-spacing: .03em;
  text-transform: uppercase;
  flex-shrink: 0;
  padding-top: 2px;
}
.app-modal-body .split-columns article.card ul {
  margin: 6px 0 0 !important;
  padding-left: 18px !important;
  list-style: disc;
}
.app-modal-body .split-columns article.card ul li {
  border-bottom: none !important;
  padding: 3px 0 !important;
}

/* ═══════════════════════════════════════════════════════════════
   JOB DETAIL PAGES (13/14) — cleaner spacing for description
   ═══════════════════════════════════════════════════════════════ */
#content > .card .small.muted + ul {
  margin-top: 6px !important;
}
#content > .card ul + .small.muted {
  margin-top: 18px !important;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--blue-light) !important;
  display: block;
}

/* Detail page header (Backend-разработчик title row) */
#content > .card:first-child:has(#back-to-list) {
  padding: 22px 24px !important;
}
#content > .card:has(#back-to-list) > .row.space {
  margin-bottom: 14px !important;
}
#content > .card:has(#back-to-list) > .title {
  font-family: var(--font-display) !important;
  font-size: 26px !important;
  font-weight: 700 !important;
  letter-spacing: -.022em !important;
  color: var(--text) !important;
  margin: 0 0 6px !important;
  border: none !important;
  padding: 0 !important;
  text-transform: none !important;
}
#back-to-list {
  padding: 7px 14px !important;
  border-radius: 10px !important;
  font-family: var(--font-display) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  background: rgba(255,255,255,.04) !important;
  border: 1px solid var(--line-2) !important;
  color: var(--text-2) !important;
}
#back-to-list:hover {
  color: var(--text) !important;
  background: rgba(255,255,255,.07) !important;
  border-color: var(--line-3) !important;
}

/* ═══════════════════════════════════════════════════════════════
   PRE-CHECKOUT MODAL — readable legal disclosure before Robokassa
   ═══════════════════════════════════════════════════════════════ */
.precheckout-modal-shell {
  position: fixed !important;
  inset: 0 !important;
  z-index: 10000 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: clamp(12px, 4vw, 28px) !important;
  background:
    radial-gradient(900px 520px at 50% 0%, rgba(59,130,246,.20), transparent 62%),
    rgba(3,6,16,.76) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
}

.precheckout-modal-card {
  width: min(620px, 100%) !important;
  max-height: min(88vh, 760px) !important;
  overflow: auto !important;
  overscroll-behavior: contain;
  color: var(--text) !important;
  background:
    linear-gradient(180deg, rgba(25,32,50,.98), rgba(11,15,26,.99)) !important;
  border: 1px solid rgba(255,255,255,.15) !important;
  border-radius: 24px !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.08) inset,
    0 34px 100px -24px rgba(0,0,0,.92),
    0 0 90px -36px rgba(91,139,255,.50) !important;
  padding: clamp(18px, 4vw, 30px) !important;
}

.precheckout-eyebrow {
  margin: 0 0 8px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  color: var(--blue-light) !important;
}

.precheckout-title {
  margin: 0 !important;
  font-family: var(--font-display) !important;
  font-size: clamp(22px, 5vw, 30px) !important;
  line-height: 1.08 !important;
  letter-spacing: -.035em !important;
  color: var(--text) !important;
}

.precheckout-meta,
.precheckout-summary,
.precheckout-legal,
.precheckout-links {
  color: rgba(235,242,255,.82) !important;
}

.precheckout-meta {
  margin: 10px 0 16px !important;
  font-size: 14px !important;
  line-height: 1.45 !important;
}

.precheckout-summary {
  margin: 0 0 16px !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
}

.precheckout-features {
  display: grid !important;
  gap: 9px !important;
  margin: 0 0 18px !important;
  padding: 0 !important;
  list-style: none !important;
}

.precheckout-features li {
  position: relative;
  padding-left: 22px !important;
  font-size: 14px !important;
  line-height: 1.48 !important;
  color: rgba(248,251,255,.90) !important;
}

.precheckout-features li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .55em;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--lime);
  box-shadow: 0 0 14px rgba(212,255,79,.45);
}

.precheckout-notice {
  display: grid !important;
  gap: 6px !important;
  margin: 0 0 16px !important;
  padding: 14px 16px !important;
  border: 1px solid rgba(212,255,79,.26) !important;
  border-radius: 16px !important;
  background: linear-gradient(180deg, rgba(212,255,79,.12), rgba(212,255,79,.06)) !important;
  color: rgba(249,255,229,.94) !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
}

.precheckout-notice strong {
  color: var(--lime) !important;
}

.precheckout-legal {
  display: grid !important;
  gap: 8px !important;
  margin: 0 0 14px !important;
  padding-top: 14px !important;
  border-top: 1px solid rgba(255,255,255,.12) !important;
  font-size: 13px !important;
  line-height: 1.55 !important;
}

.precheckout-legal p,
.precheckout-links {
  margin: 0 !important;
}

.precheckout-legal strong {
  color: var(--text) !important;
}

.precheckout-legal a,
.precheckout-links a {
  color: var(--blue-light) !important;
  text-decoration: none !important;
  border-bottom: 1px solid rgba(126,174,255,.35) !important;
}

.precheckout-links {
  margin: 0 0 20px !important;
  font-size: 13px !important;
  line-height: 1.55 !important;
}

.precheckout-actions {
  display: flex !important;
  justify-content: flex-end !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
}

.precheckout-secondary,
.precheckout-primary {
  min-height: 44px !important;
  padding: 11px 18px !important;
  border-radius: 13px !important;
  font-family: var(--font-display) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
}

.precheckout-secondary {
  color: var(--text-2) !important;
  background: rgba(255,255,255,.04) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
}

.precheckout-primary {
  color: #08111f !important;
  background: linear-gradient(180deg, var(--lime), #bfe83a) !important;
  border: 1px solid rgba(212,255,79,.55) !important;
  box-shadow: 0 14px 34px -18px rgba(212,255,79,.75) !important;
}

.precheckout-secondary:hover,
.precheckout-primary:hover {
  transform: none !important;
}

@media (max-width: 520px) {
  .precheckout-modal-shell {
    align-items: center !important;
    padding: 10px !important;
  }
  .precheckout-modal-card {
    max-height: 92vh !important;
    border-radius: 22px !important;
    padding: 18px !important;
  }
  .precheckout-actions {
    flex-direction: column-reverse !important;
  }
  .precheckout-secondary,
  .precheckout-primary {
    width: 100% !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   Reduced motion
   ═══════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .card:hover,
  .webapp-tile:hover,
  .topbar-actions .usage-badge:hover,
  .topbar-actions .topbar-back:hover { transform: none !important; }
}

/* ═══════════════════════════════════════════════════════════════
   SPOTLIGHT EXTENSION — карточки, у которых нет класса .card,
   но визуально они карточки. Добавляем тот же glow.
   ═══════════════════════════════════════════════════════════════ */
.plan-card,
.billing-current {
  position: relative;
  isolation: isolate;
}

.plan-card::before,
.billing-current::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity .35s ease;
  background: radial-gradient(
    320px 320px at var(--_px) var(--_py),
    rgba(30,68,119,.28) 0%,
    rgba(59,130,246,.10) 35%,
    transparent 70%
  );
  z-index: 0;
}

.plan-card::after,
.billing-current::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity .35s ease;
  background: radial-gradient(
    200px 200px at var(--_px) var(--_py),
    rgba(59,130,246,.35) 0%,
    transparent 70%
  );
  mask: linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
  mask-composite: exclude;
  -webkit-mask-composite: xor;
  padding: 1px;
  z-index: 0;
}

.plan-card:hover::before,
.plan-card:hover::after,
.billing-current:hover::before,
.billing-current:hover::after { opacity: 1; }

.plan-card > *,
.billing-current > * { position: relative; z-index: 1; }

/* ═══════════════════════════════════════════════════════════════
   QUIET HOVER — пользователь не хочет случайных свечений / полосок
   при наведении на не-карточки. Оставляем ТОЛЬКО spotlight glow
   на .card / .plan-card / .billing-current (через ::before/::after,
   управляемые --_px/--_py через pointermove tracker).
   Всё остальное — никаких сдвигов, никаких цветных box-shadow,
   никаких подсветок фона у соседей.
   ═══════════════════════════════════════════════════════════════ */

/* Кнопки сегмент-контрола / page-header (Рекомендованные / Избранное /
   Обновить / заголовки страниц): убираем lift и любые цветные тени */
#content > .row.space:first-child > .row:first-child > button,
#content > .row.space:first-child > .row:first-child > button:hover,
#content > .row.space:first-child > button:last-child,
#content > .row.space:first-child > button:last-child:hover,
#content > .row.space:first-child:has(> .title) > .row > button,
#content > .row.space:first-child:has(> .title) > .row > button:hover,
#content > .row.space:first-child:has(> .title) > .row > button.primary,
#content > .row.space:first-child:has(> .title) > .row > button.primary:hover {
  transform: none !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.06) inset !important;
}

/* Сама обёртка сегмент-контрола / page-header: статичный border, никакого hover */
#content > .row.space:first-child,
#content > .row.space:first-child:hover {
  box-shadow: 0 1px 0 rgba(255,255,255,.03) inset !important;
  transform: none !important;
}

/* .card — оставляем только border-цвет на hover, отрубаем lift и box-shadow blue glow.
   Spotlight ::before/::after продолжает работать (он управляется --_px/--_py). */
.card:hover,
.plan-card:hover,
.billing-current:hover {
  transform: none !important;
  box-shadow: var(--shadow-card) !important;
}

/* Tabbar и верхние pill-кнопки: убираем lift */
nav.tabs button:hover,
.topbar-actions .usage-badge:hover,
.topbar-actions .topbar-back:hover,
.snapshot-banner__back:hover,
.snapshot-banner__nav a:hover,
.webapp-tile:hover,
#back-to-list:hover {
  transform: none !important;
  box-shadow: none !important;
}

/* Кнопки внутри карточек (actions-row, resume-actions): без свечений и lift */
.card .actions-row button:hover,
.card .actions-row button[data-action="detail"]:hover,
#content > .card .row > button:hover,
.app-modal-foot button:hover,
.app-modal-head button:hover {
  transform: none !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.06) inset !important;
}

/* Same artifact guard for in-card action buttons (vacancy/resume cards). */
.card .actions-row button,
#content > .card .row > button,
.app-modal-foot button,
.app-modal-head button {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background-clip: padding-box;
  position: relative;
  isolation: isolate;
}

/* Чипы — статичны на hover (только background/border допустим) */
.chip:hover,
.chip-toggle:hover,
.app-modal-body .chips .chip:hover {
  transform: none !important;
  box-shadow: none !important;
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE LAYOUT FIXES
   На десктопе nav.tabs — floating pill в центре (left:50%, translate),
   но на узких экранах он шире viewport-а и его края уезжают наружу.
   Плюс пара мест с фиксированными min-width даёт горизонтальный
   скролл (которого на мобиле быть не должно).
   ═══════════════════════════════════════════════════════════════ */

/* Belt-and-suspenders: no accidental horizontal scroll anywhere */
html, body { overflow-x: hidden; max-width: 100%; }

@media (max-width: 600px) {
  /* Tabs back to edge-to-edge bar with safe-area awareness.
     Pill remains rounded but stretches to fill width and each
     button claims an equal slice — fits 320px+ phones cleanly. */
  nav.tabs {
    left: 8px !important;
    right: 8px !important;
    bottom: max(8px, env(safe-area-inset-bottom, 0px)) !important;
    transform: none !important;
    display: flex !important;
    width: auto !important;
    padding: 5px !important;
    gap: 2px !important;
    justify-content: stretch;
  }
  nav.tabs button {
    flex: 1 1 0 !important;
    padding: 10px 4px !important;
    font-size: 12px !important;
    min-width: 0 !important;
    text-align: center;
    white-space: nowrap;
  }

  /* Content rails — tighten side padding so 360px screens get full
     card width instead of squeeze + horizontal jitter. */
  .app-shell > *:not(.topbar) {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  /* Market-boost row had min-width:180px on each cell, which
     creates 360+px content for a 320px screen → forces page to
     scroll horizontally. Let cells shrink. */
  .market-boost-inline > span {
    min-width: 0 !important;
    flex-basis: 100% !important;
  }

  /* Subscription tab: 3-column usage grid into stacked rows on tiny
     phones (already had a 480px breakpoint inline in index.html
     for billing-usage-grid; this catches the same in production CSS). */
  .billing-usage-grid {
    grid-template-columns: 1fr 1fr !important;
  }

  /* Topbar actions cluster shouldn't outgrow viewport. */
  .topbar-actions { flex-wrap: wrap; gap: 6px !important; }
}

@media (max-width: 380px) {
  /* iPhone SE / very narrow: tighten further so all four tabs fit. */
  nav.tabs button {
    padding: 9px 2px !important;
    font-size: 11px !important;
    letter-spacing: -.01em !important;
  }
  .billing-usage-grid {
    grid-template-columns: 1fr !important;
  }
}
/* Header rows (e.g. "Резюме + кнопки") inside #content sit above gap */
#content > .row.space:first-child { margin-bottom: 0 !important; }

/* ── First-login legal consent gate ─────────────────────────── */
#content:has(.legal-consent-shell) {
  min-height: calc(100svh - 220px);
  justify-content: center;
}
.legal-consent-shell {
  width: 100%;
  display: flex;
  justify-content: center;
  padding: clamp(18px, 6vh, 56px) 0;
  box-sizing: border-box;
}
.legal-consent-card {
  width: min(760px, 100%) !important;
  margin: 0 auto !important;
  padding: clamp(24px, 4vw, 36px) !important;
  border-radius: 22px !important;
}
.legal-consent-eyebrow {
  color: #93c5fd;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line-2);
}
.legal-consent-copy,
.legal-consent-note {
  margin: 0;
  color: var(--text-2, #CBD5E1);
  line-height: 1.68;
}
.legal-consent-copy { margin-top: 16px; }
.legal-consent-links {
  display: grid;
  gap: 12px;
  margin: 20px 0 18px;
  padding: 18px 22px;
  border-radius: 18px;
  background: rgba(15, 23, 42, .48);
  border: 1px solid rgba(147, 197, 253, .14);
}
.legal-consent-links a {
  color: #93c5fd !important;
  text-decoration: none;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.legal-consent-links a:hover { color: #bfdbfe !important; }
.legal-consent-error {
  margin: 18px 0 0;
  color: #fca5a5;
  line-height: 1.5;
}
.legal-consent-error:empty { display: none; }
.legal-consent-button {
  width: 100%;
  min-height: 50px;
  margin-top: 22px;
  justify-content: center;
}

@media (max-width: 560px) {
  #content:has(.legal-consent-shell) {
    min-height: calc(100svh - 180px);
    justify-content: flex-start;
  }
  .legal-consent-shell { padding: 18px 0 28px; }
  .legal-consent-card {
    padding: 22px 18px !important;
    border-radius: 20px !important;
  }
  .legal-consent-links { padding: 16px; }
}

/* ── Web empty/auth cards spacing ─────────────────────────────
   Keep this CSS-only: these cards are emitted from app.js in several
   states, and the stable child ids let us polish spacing without
   touching the rendering logic. */
#content > .card:has(#web-login-btn) {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
#content > .card:has(#web-login-btn) > div[style*="font-size"] {
  margin-bottom: 0 !important;
}
#content > .card:has(#web-login-btn) .title,
#content > .card:has(#web-login-btn) p.muted {
  margin-bottom: 0 !important;
}
#content > .card:has(#web-login-btn) p.muted {
  margin-bottom: 8px !important;
}
#content > .card:has(#web-login-btn) #web-login-btn {
  margin-top: 10px;
}

#content > .card:has(#vacancies-open-resume-tab) p.small.muted,
#content > .card:has(#vacancy-open-resume-tab) p.small.muted {
  margin-bottom: 16px !important;
}
#content > .card:has(#vacancies-open-resume-tab) button.primary,
#content > .card:has(#vacancy-open-resume-tab) button.primary {
  margin-top: 2px;
}

@media (max-width: 560px) {
  #content > .card:has(#web-login-btn) {
    gap: 16px;
    padding-top: 2.25rem !important;
    padding-bottom: 2.25rem !important;
  }
}