/* =============================================================
   HR BEAST — Telegram Mini App
   Полный CSS — тёмный, агрессивный, геометричный.
   Палитра построена вокруг логотипа: тигриный оранжевый,
   золото, кровавый красный, кремовый, полночно-синий.
   ============================================================= */

/* -------------------------------------------------------------
   0. ТОКЕНЫ И ШРИФТЫ
   ------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@500;600;700;800&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@500;700&display=swap');

:root {
  /* Поверхности */
  --bg-0:        #0a0b14;          /* самый низ — глубокий ночной */
  --bg-1:        #11131f;          /* основной фон */
  --bg-2:        #181b2a;          /* карточки */
  --bg-3:        #20263a;          /* поднятые карточки */
  --bg-4:        #2a3047;          /* hover / inputs */
  --line:        #2a304a;          /* границы */
  --line-soft:   rgba(255,255,255,0.06);

  /* Текст */
  --text-0:      #f3ecd8;          /* кремовый — основной */
  --text-1:      #d8d2bf;
  --text-2:      #8e91a8;          /* приглушённый */
  --text-3:      #5b5f78;          /* подсказки */

  /* Акценты — взяты с шерсти тигра */
  --orange:      #ec6a1c;
  --orange-2:    #ff8430;
  --orange-deep: #b34812;
  --gold:        #f0b030;
  --gold-2:      #ffc850;
  --blood:       #c8201a;
  --blood-2:     #e63a30;
  --cream:       #f0e0b0;
  --success:     #2ecf7f;
  --success-2:   #4be098;

  /* Семантика */
  --c-fav:       var(--gold);
  --c-trash:     var(--blood);
  --c-apply:     var(--success);

  /* Радиусы — небольшие, резкие */
  --r-1: 4px;
  --r-2: 8px;
  --r-3: 12px;
  --r-4: 16px;
  --r-pill: 999px;

  /* Тени */
  --shadow-1: 0 1px 0 rgba(255,255,255,0.04) inset, 0 8px 24px rgba(0,0,0,0.45);
  --shadow-2: 0 12px 40px rgba(0,0,0,0.55), 0 1px 0 rgba(255,255,255,0.05) inset;
  --shadow-orange: 0 14px 38px rgba(236,106,28,0.35), 0 1px 0 rgba(255,255,255,0.18) inset;
  --shadow-gold:   0 14px 38px rgba(240,176,48,0.35);
  --shadow-blood:  0 14px 38px rgba(200,32,26,0.35);

  /* Шрифты */
  --f-display: 'Manrope', system-ui, sans-serif;
  --f-text:    'Inter', system-ui, sans-serif;
  --f-mono:    'JetBrains Mono', ui-monospace, monospace;

  /* Анимация */
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in:    cubic-bezier(0.55, 0, 0.65, 0);
  --ease-back:  cubic-bezier(0.34, 1.56, 0.64, 1);
  --d-fast:     160ms;
  --d-mid:      280ms;
  --d-slow:     520ms;

  /* Геометрия — «когтистый» клип */
  --claw-clip: polygon(
    0 8px, 8px 0,
    calc(100% - 8px) 0, 100% 8px,
    100% calc(100% - 8px), calc(100% - 8px) 100%,
    8px 100%, 0 calc(100% - 8px)
  );
}

/* -------------------------------------------------------------
   1. БАЗА
   ------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg-1);
  color: var(--text-0);
  font-family: var(--f-text);
  font-size: 15px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  text-rendering: optimizeLegibility;
  overscroll-behavior: none;
}

body {
  background:
    radial-gradient(1100px 700px at 80% -10%, rgba(236,106,28,0.10), transparent 60%),
    radial-gradient(900px 800px at -10% 110%, rgba(240,176,48,0.06), transparent 60%),
    var(--bg-1);
  background-attachment: fixed;
}

button { font-family: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
input, textarea { font-family: inherit; color: inherit; }
a { color: var(--orange-2); text-decoration: none; }

/* Скроллбар */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-thumb { background: var(--bg-4); border-radius: 6px; }
::-webkit-scrollbar-track { background: transparent; }

/* Универсальная типографика */
h1,h2,h3,h4 { font-family: var(--f-display); font-weight: 800; letter-spacing: -0.01em; margin: 0; color: var(--text-0); }

/* Выделение */
::selection { background: var(--orange); color: #fff; }

/* -------------------------------------------------------------
   2. ОБЩИЕ ПРИМИТИВЫ — кнопки, инпуты, чипы
   ------------------------------------------------------------- */

/* «Когтистая» декоративная полоса — используется в карточках и кнопках */
.app-header::after,
.hero-card::before {
  content: '';
  position: absolute;
  pointer-events: none;
}

/* -------------------------------------------------------------
   3. APP HEADER (главная — шапка)
   ------------------------------------------------------------- */
.app-header {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: linear-gradient(180deg, rgba(10,11,20,0.95) 0%, rgba(10,11,20,0.80) 100%);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--line);
}
.app-header::after {
  inset: auto 0 -1px 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--orange) 30%, var(--gold) 50%, var(--orange) 70%, transparent);
  opacity: 0.55;
}

.logo-wrap {
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  font-family: var(--f-display);
  font-weight: 800;
  letter-spacing: 0.02em;
  font-size: 18px;
  line-height: 1;
  position: relative;
  padding: 6px 10px;
  background: linear-gradient(180deg, #1a1d2c, #0f111c);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}
.logo-hr    { color: var(--cream); }
.logo-beast { color: var(--orange); text-shadow: 0 0 18px rgba(236,106,28,0.45); }

.greeting {
  flex: 1;
  font-size: 14px;
  color: var(--text-1);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.greeting strong { color: var(--orange-2); font-weight: 700; }

/* Бейдж подписки в шапке */
.sub-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px 5px 8px;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: var(--r-pill);
  background: rgba(46,207,127,0.12);
  border: 1px solid rgba(46,207,127,0.32);
  color: var(--success-2);
}
.sub-badge-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 10px var(--success);
  animation: pulseDot 1.8s ease-in-out infinite;
}
.sub-badge-txt { line-height: 1; }

/* -------------------------------------------------------------
   4. HERO CARD — большой блок «Начать охоту»
   ------------------------------------------------------------- */
.hero-card {
  position: relative;
  margin: 16px;
  padding: 24px 22px 22px;
  border-radius: var(--r-4);
  background:
    radial-gradient(120% 120% at 100% 0%, rgba(236,106,28,0.35) 0%, transparent 55%),
    linear-gradient(180deg, #1d1322 0%, #14101c 100%);
  border: 1px solid rgba(236,106,28,0.32);
  overflow: hidden;
  isolation: isolate;
  box-shadow: var(--shadow-2);
}

/* «Полоски когтя» в углу */
.hero-scratch {
  position: absolute;
  top: -12px; right: -16px;
  width: 160px; height: 160px;
  pointer-events: none;
  background:
    linear-gradient(115deg, transparent 38%, var(--orange) 38%, var(--orange) 41%, transparent 41%),
    linear-gradient(115deg, transparent 50%, var(--gold) 50%, var(--gold) 52%, transparent 52%),
    linear-gradient(115deg, transparent 62%, var(--orange) 62%, var(--orange) 65%, transparent 65%);
  filter: blur(0.4px);
  opacity: 0.55;
  transform: rotate(8deg);
  mix-blend-mode: screen;
}
.hero-card::before {
  inset: 0;
  background: radial-gradient(80% 50% at 50% 100%, rgba(240,176,48,0.10), transparent 70%);
  z-index: -1;
}

.hero-count {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 64px;
  line-height: 0.92;
  letter-spacing: -0.04em;
  color: var(--cream);
  text-shadow: 0 2px 0 rgba(0,0,0,0.4);
  margin: 0 0 4px;
  font-variant-numeric: tabular-nums;
}
.hero-label {
  text-transform: uppercase;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--text-2);
  margin-bottom: 18px;
}

.hero-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 16px 18px;
  border-radius: var(--r-2);
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #1a0c00;
  background: linear-gradient(180deg, var(--orange-2) 0%, var(--orange) 60%, var(--orange-deep) 100%);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: var(--shadow-orange);
  position: relative;
  overflow: hidden;
  transition: transform var(--d-fast) var(--ease-out), filter var(--d-fast);
  will-change: transform;
}
.hero-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.4) 50%, transparent 70%);
  transform: translateX(-120%);
  animation: shineSweep 3.2s ease-in-out infinite;
  pointer-events: none;
}
.hero-btn:active { transform: translateY(1px) scale(0.99); filter: brightness(0.95); }

/* -------------------------------------------------------------
   5. STATS GRID — 2x2
   ------------------------------------------------------------- */
.stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 0 16px;
  margin-bottom: 16px;
}
.stat-cell {
  position: relative;
  padding: 16px 14px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  overflow: hidden;
  transition: transform var(--d-fast) var(--ease-out), border-color var(--d-fast);
}
.stat-cell::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--orange);
  opacity: 0.7;
}
.stat-cell:nth-child(2)::before { background: var(--gold); }
.stat-cell:nth-child(3)::before { background: var(--success); }
.stat-cell:nth-child(4)::before { background: var(--blood-2); }
.stat-cell:active { transform: scale(0.985); border-color: rgba(236,106,28,0.4); }

.stat-num {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 28px;
  line-height: 1;
  color: var(--cream);
  font-variant-numeric: tabular-nums;
}
.stat-lbl {
  margin-top: 6px;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-2);
  font-weight: 600;
}

/* -------------------------------------------------------------
   6. TOGGLE — глобальный (поиск, дайджест)
   ------------------------------------------------------------- */
.toggle-wrap, .search-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  margin: 0 16px 16px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
}
.search-status-txt {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-1);
}
.toggle-track {
  position: relative;
  width: 52px;
  height: 30px;
  flex: none;
  border-radius: var(--r-pill);
  background: var(--bg-4);
  border: 1px solid var(--line);
  cursor: pointer;
  transition: background var(--d-mid) var(--ease-out);
}
.toggle-thumb {
  position: absolute;
  top: 3px; left: 3px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: linear-gradient(180deg, #f7eed5, #cfc09a);
  box-shadow: 0 2px 6px rgba(0,0,0,0.5), 0 0 0 1px rgba(0,0,0,0.3);
  transition: transform var(--d-mid) var(--ease-back);
}
/* Скрываем нативный чекбокс — вся визуализация через кастомный трек */
.toggle-wrap input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

/* Состояние ON — через :checked нативного инпута (JS ставит .checked) */
.toggle-wrap input[type="checkbox"]:checked + .toggle-track,
.toggle-track[data-on="true"],
.toggle-track.on,
.toggle-wrap[data-on="true"] .toggle-track {
  background: linear-gradient(180deg, var(--orange-2), var(--orange));
  border-color: var(--orange-deep);
}
.toggle-wrap input[type="checkbox"]:checked + .toggle-track .toggle-thumb,
.toggle-track[data-on="true"] .toggle-thumb,
.toggle-track.on .toggle-thumb,
.toggle-wrap[data-on="true"] .toggle-thumb {
  transform: translateX(22px);
}

/* -------------------------------------------------------------
   7. RECENT LIST — последние отклики
   ------------------------------------------------------------- */
.recent-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0 16px;
  margin-bottom: 20px;
}
.recent-item {
  display: grid;
  /* JS рендерит 2 колонки: .recent-info | .recent-right */
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 12px 14px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  transition: background var(--d-fast), transform var(--d-fast) var(--ease-out);
}
.recent-item:active { transform: scale(0.99); background: var(--bg-3); }

/* Блок слева — заголовок + компания */
.recent-info { min-width: 0; }
.recent-title {
  font-weight: 700;
  font-size: 14px;
  color: var(--text-0);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* .recent-company — рендерится JS вместо .recent-meta */
.recent-company, .recent-meta {
  font-size: 12px;
  color: var(--text-2);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Блок справа — дата + точка статуса */
.recent-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  flex: none;
}
.recent-date, .recent-act {
  font-size: 11px;
  color: var(--text-2);
  text-align: right;
  white-space: nowrap;
}
/* Цветная точка статуса */
.recent-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--line);
}
.recent-dot.dot-interview { background: var(--gold); }
.recent-dot.dot-offer     { background: var(--success); }
.recent-dot.dot-rejected  { background: var(--blood); }

/* Оставляем .recent-logo/.recent-salary на случай будущего использования */
.recent-logo {
  width: 36px; height: 36px;
  border-radius: var(--r-1);
  background: linear-gradient(135deg, #2a3047, #1a1d2c);
  display: grid; place-items: center;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 14px;
  color: var(--orange-2);
  border: 1px solid var(--line);
}
.recent-salary {
  font-family: var(--f-mono);
  font-weight: 700;
  font-size: 12px;
  color: var(--gold-2);
  white-space: nowrap;
}

/* Skeleton */
.skeleton-row {
  height: 60px;
  border-radius: var(--r-2);
  background: linear-gradient(90deg, var(--bg-2) 0%, var(--bg-3) 50%, var(--bg-2) 100%);
  background-size: 220% 100%;
  animation: shimmer 1.4s linear infinite;
  will-change: background-position;
}

/* -------------------------------------------------------------
   8. CHARTS — мини-аналитика
   ------------------------------------------------------------- */
.stats-charts {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0 16px 24px;
}
.chart-card {
  position: relative;
  padding: 16px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  overflow: hidden;
}
.chart-card-label {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-2);
  margin-bottom: 14px;
}

/* Кольцо конверсии */
.apply-rate-wrap {
  display: flex;
  align-items: center;
  gap: 18px;
}
/* Кольцо рисует SVG (JS обновляет strokeDashoffset) — conic-gradient убран */
.apply-rate-ring {
  width: 96px; height: 96px;
  flex: none;
  position: relative;
  display: grid;
  place-items: center;
}
/* SVG заполняет контейнер полностью */
.apply-rate-ring svg {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  display: block;
}
/* % поверх SVG */
.apply-rate-pct {
  position: relative;
  z-index: 1;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 20px;
  color: var(--cream);
  font-variant-numeric: tabular-nums;
  text-align: center;
}
/* JS уже ставит textContent = rate + '%', поэтому ::after убран */
.apply-rate-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 18px;
  flex: 1;
}
.ar-stat {}
.ar-num {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 18px;
  color: var(--text-0);
}
.ar-lbl {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-2);
  margin-top: 1px;
}

/* Bar chart по дням */
.bar-chart {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
  align-items: end;
  height: 110px;
}
.bar-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  height: 100%;
  justify-content: end;
}
.bar-fill {
  width: 100%;
  min-height: 4px;
  border-radius: 3px 3px 0 0;
  background: linear-gradient(180deg, var(--orange-2) 0%, var(--orange) 60%, var(--orange-deep) 100%);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.3) inset, 0 -2px 0 rgba(255,255,255,0.18) inset;
  animation: barGrow 700ms var(--ease-out) both;
  transform-origin: bottom;
}
.bar-col:nth-child(2n) .bar-fill { animation-delay: 60ms; }
.bar-col:nth-child(3n) .bar-fill { animation-delay: 120ms; }
.bar-col:nth-child(4n) .bar-fill { animation-delay: 180ms; }
.bar-lbl {
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--text-3);
  text-transform: uppercase;
}

/* Source bars */
.source-bars { display: flex; flex-direction: column; gap: 10px; }
.src-bar-row {
  display: grid;
  grid-template-columns: 80px 1fr 36px;
  gap: 10px;
  align-items: center;
}
.src-bar-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-1);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.src-bar-track {
  height: 8px;
  background: rgba(255,255,255,0.05);
  border-radius: var(--r-pill);
  overflow: hidden;
  position: relative;
}
.src-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--orange-deep), var(--orange) 50%, var(--gold));
  border-radius: var(--r-pill);
  box-shadow: 0 0 12px rgba(236,106,28,0.4);
  animation: barGrowX 800ms var(--ease-out) both;
  transform-origin: left;
}
.src-bar-num {
  font-family: var(--f-mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--cream);
  text-align: right;
}

/* -------------------------------------------------------------
   9. SWIPE — TOPBAR
   ------------------------------------------------------------- */
.swipe-topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: linear-gradient(180deg, rgba(10,11,20,0.95), rgba(10,11,20,0.78));
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--line);
}
.topbar-back, .topbar-trash, .topbar-filter-btn {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: var(--r-2);
  background: var(--bg-2);
  border: 1px solid var(--line);
  color: var(--text-1);
  font-size: 16px;
  position: relative;
  transition: transform var(--d-fast), background var(--d-fast), border-color var(--d-fast);
}
.topbar-back:active, .topbar-trash:active, .topbar-filter-btn:active {
  transform: scale(0.94);
  background: var(--bg-3);
  border-color: var(--orange);
}
.topbar-progress {
  flex: 1;
  text-align: center;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 16px;
  color: var(--cream);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}
.topbar-progress::before {
  content: '';
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--orange);
  margin-right: 8px;
  vertical-align: middle;
  box-shadow: 0 0 12px var(--orange);
  animation: pulseDot 1.6s ease-in-out infinite;
}
.filter-badge {
  position: absolute;
  top: -4px; right: -4px;
  min-width: 18px; height: 18px;
  padding: 0 5px;
  border-radius: var(--r-pill);
  background: var(--orange);
  color: #1a0c00;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 10px;
  display: grid; place-items: center;
  border: 2px solid var(--bg-1);
}

/* -------------------------------------------------------------
   10. SWIPE — CARD STACK
   ------------------------------------------------------------- */
.card-area {
  position: relative;
  padding: 16px;
  min-height: calc(100vh - 60px - 64px);
}
.card-stack {
  position: relative;
  width: 100%;
  height: 540px;
  perspective: 1200px;
}
.swipe-card {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #1a1d2c 0%, #14111d 100%);
  border: 1px solid var(--line);
  border-radius: var(--r-4);
  overflow: hidden;
  box-shadow: var(--shadow-2);
  display: flex;
  flex-direction: column;
  transition: transform var(--d-mid) var(--ease-out), opacity var(--d-mid);
  will-change: transform;
}
.swipe-card.card-top    { z-index: 3; transform: translateY(0)    scale(1);    }
.swipe-card.card-behind-1 { z-index: 2; transform: translateY(10px) scale(0.96); opacity: 0.8; filter: brightness(0.85); }
.swipe-card.card-behind-2 { z-index: 1; transform: translateY(20px) scale(0.92); opacity: 0.55; filter: brightness(0.7); }

.card-body { display: flex; flex-direction: column; height: 100%; }
.card-content {
  flex: 1;
  padding: 18px 18px 0;
  overflow-y: auto;
  scrollbar-width: thin;
}
.card-gap { height: 12px; flex: none; }
.card-footer {
  padding: 12px 14px 14px;
  border-top: 1px solid var(--line);
  background: linear-gradient(180deg, transparent, rgba(10,11,20,0.55));
}

/* Source row */
.card-source-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.source-logo {
  width: 28px; height: 28px;
  border-radius: var(--r-1);
  display: grid; place-items: center;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 11px;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.src-hh        { background: linear-gradient(135deg, #d6001c, #ff3a3a); }
.src-djinni    { background: linear-gradient(135deg, #1a1a1a, #3a3a3a); color: var(--gold); border: 1px solid var(--gold); }
.src-habr      { background: linear-gradient(135deg, #4d8eb3, #2c5e83); }
.src-geekjob   { background: linear-gradient(135deg, #f0b030, #d6920a); color: #1a0c00; }
.src-wwr       { background: linear-gradient(135deg, #20a06b, #14724b); }
.src-remoteco  { background: linear-gradient(135deg, #4a47ff, #2520c0); }
.src-rabotaru  { background: linear-gradient(135deg, #ff7a00, #c84e00); }
.src-tg        { background: linear-gradient(135deg, #299bff, #0088cc); }
.src-default   { background: linear-gradient(135deg, #2a3047, #1a1d2c); color: var(--text-1); }

.source-name {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 12px;
  color: var(--text-2);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.card-share-btn {
  margin-left: auto;
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border-radius: var(--r-1);
  color: var(--text-2);
  background: transparent;
  border: 1px solid var(--line);
}

/* Title и компания */
.card-title {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 22px;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--cream);
  text-transform: uppercase;
  margin-bottom: 8px;
  text-wrap: balance;
}
.card-company {
  font-size: 14px;
  color: var(--text-1);
  font-weight: 500;
  margin-bottom: 12px;
}

/* Зарплата */
.card-salary {
  display: inline-block;
  font-family: var(--f-mono);
  font-weight: 700;
  font-size: 16px;
  color: var(--gold-2);
  padding: 6px 12px;
  background: rgba(240,176,48,0.10);
  border: 1px solid rgba(240,176,48,0.32);
  border-radius: var(--r-1);
  margin-bottom: 14px;
}
.card-salary-unknown {
  display: inline-block;
  font-size: 12px;
  color: var(--text-3);
  padding: 6px 10px;
  background: rgba(255,255,255,0.04);
  border: 1px dashed var(--line);
  border-radius: var(--r-1);
  margin-bottom: 14px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 600;
}

/* Meta */
.card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  margin-bottom: 14px;
  font-size: 12px;
  color: var(--text-2);
}
.card-meta-item { display: inline-flex; align-items: center; gap: 4px; }

/* Чипы */
.card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
}
.card-tag {
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  border-radius: var(--r-1);
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--line);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-1);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Date / dup badges */
.card-date-badge,
.card-dup-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: var(--r-1);
  font-family: var(--f-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.card-date-badge {
  background: rgba(255,255,255,0.04);
  color: var(--text-2);
  border: 1px solid var(--line);
}
.card-dup-badge {
  background: rgba(200,32,26,0.14);
  color: var(--blood-2);
  border: 1px solid rgba(200,32,26,0.4);
}

.card-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line), transparent);
  margin: 14px 0;
}

/* Описание + кнопка раскрытия */
.card-desc {
  font-size: 13px;
  color: var(--text-1);
  line-height: 1.55;
  max-height: 110px;
  overflow: hidden;
  position: relative;
  transition: max-height var(--d-slow) var(--ease-out);
  -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 60%, transparent 100%);
}
.card-desc.expanded {
  max-height: 2400px;
  -webkit-mask-image: none;
          mask-image: none;
}
.card-desc-loading {
  height: 90px;
  border-radius: var(--r-2);
  background: linear-gradient(90deg, var(--bg-3) 0%, var(--bg-4) 50%, var(--bg-3) 100%);
  background-size: 220% 100%;
  animation: shimmer 1.4s linear infinite;
}
.card-read-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 8px 12px;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--orange-2);
  background: rgba(236,106,28,0.08);
  border: 1px solid rgba(236,106,28,0.32);
  border-radius: var(--r-1);
}

/* Кнопка «Открыть вакансию» в футере */
.open-vacancy-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 14px;
  border-radius: var(--r-2);
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cream);
  background: var(--bg-3);
  border: 1px solid var(--line);
  transition: background var(--d-fast), border-color var(--d-fast);
}
.open-vacancy-btn:active { background: var(--bg-4); border-color: var(--orange); }

/* -------------------------------------------------------------
   11. SWIPE — OVERLAYS направлений (trash/apply/fav)
   ------------------------------------------------------------- */
.swipe-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  display: grid;
  place-items: center;
  border-radius: var(--r-4);
  opacity: 0;
  transition: opacity var(--d-fast) var(--ease-out);
  z-index: 5;
}
.swipe-overlay.show-trash,
.swipe-overlay.show-apply,
.swipe-overlay.show-fav { opacity: 1; }

.swipe-overlay.show-trash {
  background:
    linear-gradient(135deg, rgba(200,32,26,0.85), rgba(120,12,10,0.95));
  box-shadow: 0 0 0 2px var(--blood) inset, 0 0 60px rgba(200,32,26,0.5) inset;
}
.swipe-overlay.show-apply {
  background:
    linear-gradient(135deg, rgba(46,207,127,0.85), rgba(20,110,68,0.95));
  box-shadow: 0 0 0 2px var(--success) inset, 0 0 60px rgba(46,207,127,0.45) inset;
}
.swipe-overlay.show-fav {
  background:
    linear-gradient(135deg, rgba(240,176,48,0.92), rgba(180,120,16,0.95));
  box-shadow: 0 0 0 2px var(--gold) inset, 0 0 60px rgba(240,176,48,0.5) inset;
}

.overlay-text {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 38px;
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 4px 0 rgba(0,0,0,0.35);
  transform: rotate(-8deg) scale(0.9);
  animation: stampIn 360ms var(--ease-back) both;
  text-align: center;
  padding: 12px 22px;
  border: 4px solid #fff;
  border-radius: var(--r-2);
}
.swipe-overlay.show-fav .overlay-text { transform: rotate(6deg) scale(0.9); }
.swipe-overlay.show-apply .overlay-text { transform: rotate(-4deg) scale(0.9); }

/* «Когти» в оверлее — три рваные борозды через SVG path
   Используется встраиваемый url-encoded SVG: четыре изогнутых полосы.
   Можно повернуть/отзеркалить через transform на родителе. */
.overlay-claws-svg {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  opacity: 0.95;
  background-image: url('claws.svg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  mix-blend-mode: multiply;
  animation: clawSwipe 360ms var(--ease-out) both;
}
/* Слева — когти зеркалим (свайп в корзину) */
.swipe-overlay.show-trash .overlay-claws-svg { transform: scaleX(-1); }
/* Свайп вверх — поворачиваем 90° */
.swipe-overlay.show-fav   .overlay-claws-svg { transform: rotate(-90deg) scale(1.1); }

/* -------------------------------------------------------------
   12. SWIPE — большие кнопки действий (под карточкой)
   ------------------------------------------------------------- */
.card-actions {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
  margin-top: 14px;
}
.card-act {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 16px 10px;
  border-radius: var(--r-3);
  border: 1px solid var(--line);
  background: var(--bg-2);
  transition: transform var(--d-fast) var(--ease-back), border-color var(--d-fast), background var(--d-fast);
  position: relative;
  overflow: hidden;
}
.card-act:active { transform: scale(0.95); }
.cact-icon {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  font-size: 20px;
  border-radius: 50%;
}
.cact-lbl {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.card-act.act-trash { border-color: rgba(200,32,26,0.32); }
.card-act.act-trash .cact-icon { background: rgba(200,32,26,0.14); color: var(--blood-2); }
.card-act.act-trash .cact-lbl  { color: var(--blood-2); }
.card-act.act-trash:active { background: rgba(200,32,26,0.12); border-color: var(--blood); }

.card-act.act-fav   { border-color: rgba(240,176,48,0.32); }
.card-act.act-fav .cact-icon { background: rgba(240,176,48,0.14); color: var(--gold-2); }
.card-act.act-fav .cact-lbl  { color: var(--gold-2); }
.card-act.act-fav:active { background: rgba(240,176,48,0.14); border-color: var(--gold); }

.card-act.act-apply { border-color: rgba(46,207,127,0.32); }
.card-act.act-apply .cact-icon { background: rgba(46,207,127,0.14); color: var(--success-2); }
.card-act.act-apply .cact-lbl  { color: var(--success-2); }
.card-act.act-apply:active { background: rgba(46,207,127,0.14); border-color: var(--success); }

/* -------------------------------------------------------------
   13. FILTER SHEET — bottom sheet фильтров
   ------------------------------------------------------------- */
.filter-sheet-backdrop {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(5,6,12,0.7);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--d-mid) var(--ease-out);
}
.filter-sheet-backdrop.open { opacity: 1; pointer-events: auto; }

.filter-sheet {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 100;
  padding: 12px 16px calc(20px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, #181b2a 0%, #0f111c 100%);
  border-top: 1px solid var(--line);
  border-radius: 20px 20px 0 0;
  transform: translateY(100%);
  transition: transform var(--d-mid) var(--ease-out);
  box-shadow: 0 -20px 60px rgba(0,0,0,0.6);
  max-height: 86vh;
  overflow-y: auto;
}
.filter-sheet-backdrop.open + .filter-sheet,
.filter-sheet.open { transform: translateY(0); }

.filter-sheet-handle {
  width: 44px; height: 4px;
  border-radius: 2px;
  background: var(--line);
  margin: 0 auto 14px;
}
.filter-sheet-title {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 18px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--cream);
  margin-bottom: 18px;
}

.filter-section-label {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-2);
  margin: 18px 0 10px;
}
.filter-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.filter-chip {
  padding: 9px 14px;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--line);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-1);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: background var(--d-fast), border-color var(--d-fast), color var(--d-fast), transform var(--d-fast) var(--ease-back);
}
.filter-chip:active { transform: scale(0.95); }
.filter-chip.active {
  background: linear-gradient(180deg, var(--orange-2), var(--orange));
  border-color: var(--orange-deep);
  color: #1a0c00;
  box-shadow: 0 4px 14px rgba(236,106,28,0.4);
}

.filter-apply-btn {
  display: block;
  width: 100%;
  margin-top: 22px;
  padding: 16px;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #1a0c00;
  background: linear-gradient(180deg, var(--orange-2), var(--orange) 60%, var(--orange-deep));
  border-radius: var(--r-2);
  box-shadow: var(--shadow-orange);
}

/* -------------------------------------------------------------
   14. SWIPE — пустая колода / пауза
   ------------------------------------------------------------- */
.state-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 32px 20px;
  background:
    radial-gradient(60% 50% at 50% 30%, rgba(236,106,28,0.12), transparent 70%),
    linear-gradient(180deg, var(--bg-2), var(--bg-1));
  border: 1px solid var(--line);
  border-radius: var(--r-4);
  text-align: center;
  z-index: 8;
  animation: fadeUp 420ms var(--ease-out) both;
}
.empty-mascot-wrap {
  position: relative;
  width: 140px; height: 140px;
  display: grid; place-items: center;
  margin-bottom: 4px;
}
.empty-tiger-svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 6px 20px rgba(236,106,28,0.4));
  background-image: url("logo.svg");
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}
.empty-tiger-svg > * { display: none !important; }
.empty-zzz {
  position: absolute;
  top: -6px; right: -6px;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 22px;
  color: var(--gold-2);
  animation: zzzFloat 2.2s ease-in-out infinite;
}
.empty-title, .state-title {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 22px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--cream);
}
.empty-sub, .state-sub {
  font-size: 13px;
  color: var(--text-2);
  max-width: 280px;
  text-wrap: pretty;
}
.empty-stats-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  max-width: 300px;
  margin-top: 8px;
}
.estat-item {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
}
.estat-ico { font-size: 16px; text-align: center; }
.estat-lbl {
  font-size: 12px;
  color: var(--text-1);
  text-align: left;
  font-weight: 600;
}
.estat-val {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 14px;
  color: var(--orange-2);
  font-variant-numeric: tabular-nums;
}

.full-btn, .secondary-btn {
  display: block;
  width: 100%;
  max-width: 320px;
  padding: 14px 18px;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-radius: var(--r-2);
  margin-top: 8px;
}
.full-btn {
  color: #1a0c00;
  background: linear-gradient(180deg, var(--orange-2), var(--orange) 60%, var(--orange-deep));
  box-shadow: var(--shadow-orange);
}
.secondary-btn {
  background: var(--bg-3);
  color: var(--text-0);
  border: 1px solid var(--line);
}
.state-mascot { font-size: 56px; line-height: 1; }

/* Paywall (нет подписки) */
.swipe-paywall {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(8,9,16,0.7);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  z-index: 9;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--d-mid) var(--ease-out);
}
.swipe-paywall.visible { opacity: 1; pointer-events: auto; }
.swipe-paywall-card {
  width: 100%;
  max-width: 340px;
  padding: 28px 22px 22px;
  background:
    radial-gradient(80% 60% at 50% 0%, rgba(236,106,28,0.25), transparent 70%),
    linear-gradient(180deg, #1a1d2c, #0f111c);
  border: 1px solid rgba(236,106,28,0.45);
  border-radius: var(--r-4);
  text-align: center;
  box-shadow: 0 30px 60px rgba(0,0,0,0.6), 0 0 0 1px rgba(236,106,28,0.1) inset;
  animation: fadeUp 360ms var(--ease-back) both;
}
.swipe-paywall-icon {
  font-size: 44px;
  margin-bottom: 8px;
  filter: drop-shadow(0 4px 14px rgba(236,106,28,0.5));
}
.swipe-paywall-title {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 22px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--cream);
  margin-bottom: 6px;
}
.swipe-paywall-text {
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.5;
  margin-bottom: 18px;
}
.swipe-paywall-btn {
  display: block;
  width: 100%;
  padding: 14px;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #1a0c00;
  background: linear-gradient(180deg, var(--orange-2), var(--orange) 60%, var(--orange-deep));
  border-radius: var(--r-2);
  box-shadow: var(--shadow-orange);
}
.swipe-paywall-secondary {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 12px;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-2);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--r-2);
}

/* -------------------------------------------------------------
   15. MINE — табы, поиск, элементы списка
   ------------------------------------------------------------- */
.mine-tabs {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  gap: 4px;
  padding: 12px 14px;
  background: linear-gradient(180deg, rgba(10,11,20,0.95), rgba(10,11,20,0.78));
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
  scrollbar-width: none;
}
.mine-tabs::-webkit-scrollbar { display: none; }

.mine-tab {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border-radius: var(--r-pill);
  background: var(--bg-2);
  border: 1px solid var(--line);
  color: var(--text-2);
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: background var(--d-fast), color var(--d-fast), border-color var(--d-fast);
}
.mine-tab.active {
  background: linear-gradient(180deg, #281a1f, #1a0f12);
  color: var(--cream);
  border-color: rgba(236,106,28,0.5);
  box-shadow: 0 6px 18px rgba(236,106,28,0.25);
}
.mine-tab.active .tab-count { color: var(--orange-2); }
.tab-count {
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 700;
  padding: 2px 6px;
  background: rgba(255,255,255,0.06);
  border-radius: var(--r-1);
  color: var(--text-2);
  min-width: 18px;
  text-align: center;
}
.tab-lbl { line-height: 1; }

/* Поисковая строка */
.mine-search-bar {
  display: flex;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line-soft);
}
.mine-search-wrap {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
}
.mine-search-icon {
  position: absolute;
  left: 12px;
  color: var(--text-3);
  font-size: 14px;
  pointer-events: none;
}
.mine-search-input {
  width: 100%;
  padding: 11px 36px 11px 36px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  font-size: 14px;
  color: var(--text-0);
  transition: border-color var(--d-fast);
}
.mine-search-input:focus {
  outline: none;
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(236,106,28,0.15);
}
.mine-search-clear {
  position: absolute;
  right: 8px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--bg-4);
  color: var(--text-1);
  font-size: 12px;
  display: grid; place-items: center;
}
.mine-export-btn {
  padding: 0 14px;
  border-radius: var(--r-2);
  background: var(--bg-2);
  border: 1px solid var(--line);
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--orange-2);
}

/* Свайп-удаление в списке */
.msw-wrap {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-3);
  margin: 8px 14px 0;
}
.msw-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--blood) 0%, var(--blood-2) 100%);
  display: flex;
  align-items: center;
  padding-left: 22px;
  border-radius: var(--r-3);
}
.msw-lbl {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
  display: inline-flex; align-items: center; gap: 8px;
}
.msw-inner {
  position: relative;
  z-index: 1;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  transition: transform var(--d-mid) var(--ease-out);
}

/* Элемент списка */
.mine-item { padding: 14px; }
.mine-item-tap {}
.mine-item-top {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.mine-item-info { flex: 1; min-width: 0; }
.mine-item-title {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 14px;
  color: var(--text-0);
  letter-spacing: -0.005em;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.mine-item-meta {
  font-size: 12px;
  color: var(--text-2);
  margin-top: 4px;
}
.mine-open-link {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: var(--r-1);
  background: var(--bg-3);
  border: 1px solid var(--line);
  color: var(--orange-2);
  font-size: 14px;
}
.mine-item-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
  gap: 10px;
}
.mine-date {
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--text-3);
  letter-spacing: 0.04em;
}

/* Статусы */
.status-row { display: flex; gap: 6px; flex-wrap: wrap; }
.st-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  border-radius: var(--r-pill);
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.st-chip.st-none      { background: rgba(255,255,255,0.05); color: var(--text-2); border: 1px solid var(--line); }
.st-chip.st-interview { background: rgba(73,162,255,0.14); color: #6ab3ff; border: 1px solid rgba(73,162,255,0.4); }
.st-chip.st-offer     { background: rgba(46,207,127,0.14); color: var(--success-2); border: 1px solid rgba(46,207,127,0.4); }
.st-chip.st-rejected  { background: rgba(200,32,26,0.14); color: var(--blood-2); border: 1px solid rgba(200,32,26,0.4); }

/* Действия в элементе */
.mine-actions {
  display: flex;
  gap: 6px;
  margin-top: 10px;
  flex-wrap: wrap;
}
.mine-action-btn {
  padding: 7px 11px;
  border-radius: var(--r-1);
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid var(--line);
  background: var(--bg-3);
  color: var(--text-1);
  transition: all var(--d-fast);
}
.mine-action-btn:active { transform: scale(0.96); }
.btn-restore { color: var(--success-2); border-color: rgba(46,207,127,0.4); }
.btn-apply   { color: #1a0c00; background: linear-gradient(180deg, var(--orange-2), var(--orange)); border-color: var(--orange-deep); }
.btn-unfav   { color: var(--gold-2); border-color: rgba(240,176,48,0.4); }

/* История */
.hist-filters {
  display: flex;
  gap: 6px;
  padding: 12px 14px;
  overflow-x: auto;
  scrollbar-width: none;
  border-bottom: 1px solid var(--line-soft);
}
.hist-filters::-webkit-scrollbar { display: none; }
.hist-filter {
  flex: none;
  padding: 7px 12px;
  border-radius: var(--r-pill);
  background: var(--bg-2);
  border: 1px solid var(--line);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-2);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.hist-filter.active {
  color: var(--cream);
  background: var(--bg-3);
  border-color: var(--orange);
  box-shadow: inset 0 0 0 1px rgba(236,106,28,0.3);
}
.hist-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line-soft);
}
.hist-item-info { flex: 1; min-width: 0; }
.hist-item-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hist-item-sub {
  font-size: 11px;
  color: var(--text-3);
  margin-top: 2px;
  font-family: var(--f-mono);
}
.hist-reaction {
  font-size: 18px;
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border-radius: var(--r-1);
  background: var(--bg-3);
  border: 1px solid var(--line);
}

/* Дайджест */
.digest-card {
  margin: 14px;
  padding: 16px;
  border-radius: var(--r-3);
  background: linear-gradient(135deg, rgba(236,106,28,0.12), rgba(240,176,48,0.06));
  border: 1px solid rgba(236,106,28,0.32);
}
.digest-top { display: flex; align-items: center; gap: 10px; }
.digest-info { flex: 1; }
.digest-title {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--cream);
}
.digest-sub {
  font-size: 12px;
  color: var(--text-2);
  margin-top: 2px;
}

.load-more-btn {
  display: block;
  width: calc(100% - 28px);
  margin: 14px auto;
  padding: 12px;
  border-radius: var(--r-2);
  background: var(--bg-2);
  border: 1px solid var(--line);
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--orange-2);
}

/* Корзина */
.trash-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px;
  border-bottom: 1px solid var(--line-soft);
}
.trash-title {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 16px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--cream);
  flex: 1;
}
.trash-hint {
  font-size: 11px;
  color: var(--text-3);
  letter-spacing: 0.04em;
}
.trash-clear-btn {
  padding: 9px 14px;
  border-radius: var(--r-2);
  background: rgba(200,32,26,0.14);
  border: 1px solid rgba(200,32,26,0.4);
  color: var(--blood-2);
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.mine-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 60px 20px;
  text-align: center;
}
.mine-empty-icon {
  font-size: 56px;
  filter: grayscale(0.3);
  opacity: 0.7;
}
.mine-empty-txt {
  font-size: 13px;
  color: var(--text-2);
  max-width: 260px;
  text-wrap: pretty;
}

/* -------------------------------------------------------------
   16. SETTINGS — секции, ключевые слова, чипы выбора
   ------------------------------------------------------------- */
.set-section {
  padding: 18px 14px;
  border-bottom: 1px solid var(--line-soft);
}
.set-section > h3 {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-2);
  margin-bottom: 12px;
}
.set-hint {
  font-size: 12px;
  color: var(--text-3);
  margin-top: 8px;
  line-height: 1.4;
}

/* Ввод нового ключевого слова */
.kw-input-row {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}
.kw-input {
  flex: 1;
  padding: 11px 14px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  font-size: 14px;
  color: var(--text-0);
  transition: border-color var(--d-fast);
}
.kw-input::placeholder { color: var(--text-3); }
.kw-input:focus {
  outline: none;
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(236,106,28,0.15);
}
.kw-add-btn {
  padding: 0 16px;
  border-radius: var(--r-2);
  background: linear-gradient(180deg, var(--orange-2), var(--orange));
  color: #1a0c00;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 1px solid var(--orange-deep);
  box-shadow: 0 4px 14px rgba(236,106,28,0.3);
}

/* Чипы ключевых слов */
.keywords-edit-wrap, .keywords-wrap { width: 100%; }
.kw-chips-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.kw-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: var(--r-pill);
  background: var(--bg-3);
  border: 1px solid var(--line);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-1);
  transition: transform var(--d-fast) var(--ease-back);
  animation: chipIn 240ms var(--ease-back) both;
}
.kw-chip-hidden { display: none; }
.kw-chip.kw-chip-del {
  padding-right: 6px;
}
.kw-del-btn {
  width: 18px; height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(200,32,26,0.16);
  color: var(--blood-2);
  font-size: 14px;
  line-height: 1;
  font-weight: 500;
  border: 1px solid rgba(200,32,26,0.32);
  padding: 0;
  transition: all var(--d-fast);
}
/* × берётся из текста кнопки (JS), ::before убран чтобы не было двойного крестика */
.kw-del-btn:hover { background: var(--blood); color: #fff; }
.kw-show-more {
  padding: 6px 12px;
  border-radius: var(--r-pill);
  background: transparent;
  border: 1px dashed var(--line);
  font-size: 11px;
  font-weight: 700;
  color: var(--orange-2);
  letter-spacing: 0.04em;
}
.kw-empty {
  font-size: 12px;
  color: var(--text-3);
  font-style: italic;
}

/* Глобальные TG-каналы */
.ch-global {
  background: rgba(46,207,127,0.10);
  border-color: rgba(46,207,127,0.32);
  color: var(--success-2);
}
.ch-global-dot {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 8px var(--success);
}

/* Опции (формат, интервал, регион) */
.option-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.option-chip {
  padding: 9px 14px;
  border-radius: var(--r-pill);
  background: var(--bg-2);
  border: 1px solid var(--line);
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--text-1);
  text-transform: uppercase;
  transition: background var(--d-fast), border-color var(--d-fast), color var(--d-fast), transform var(--d-fast) var(--ease-back);
}
.option-chip:active { transform: scale(0.95); }
.option-chip.selected {
  background: linear-gradient(180deg, var(--orange-2), var(--orange));
  border-color: var(--orange-deep);
  color: #1a0c00;
  box-shadow: 0 4px 14px rgba(236,106,28,0.35);
}

/* -------------------------------------------------------------
   17. PROFILE
   ------------------------------------------------------------- */
.prof-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 22px 16px;
  border-bottom: 1px solid var(--line-soft);
}
.prof-avatar {
  width: 64px; height: 64px;
  border-radius: 16px;
  border: 2px solid var(--orange);
  box-shadow: 0 8px 24px rgba(236,106,28,0.35);
  flex: none;
  background-color: #1a1d2c;
  background-image: url("logo.svg");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  object-fit: cover;
}
.prof-info { min-width: 0; }
.prof-name {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 20px;
  letter-spacing: -0.01em;
  color: var(--cream);
  text-transform: uppercase;
}
.prof-username {
  font-family: var(--f-mono);
  font-size: 12px;
  color: var(--text-2);
  margin-top: 2px;
}

/* Sub card на профиле */
.sub-prof-card {
  margin: 14px;
  padding: 18px;
  border-radius: var(--r-3);
  background:
    radial-gradient(60% 80% at 100% 0%, rgba(46,207,127,0.18), transparent 70%),
    linear-gradient(180deg, #131a1a, #0e1014);
  border: 1px solid rgba(46,207,127,0.32);
  position: relative;
  overflow: hidden;
}
.sub-prof-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}
.sub-prof-status {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 18px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.sub-txt-active  { color: var(--success-2); }
.sub-txt-pending { color: var(--gold-2); }
.sub-txt-none    { color: var(--text-2); }

.sub-prof-badge {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: var(--r-pill);
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.badge-pro     { background: linear-gradient(180deg, var(--success-2), var(--success)); color: #062017; }
.badge-pending { background: rgba(240,176,48,0.18); color: var(--gold-2); border: 1px solid rgba(240,176,48,0.4); }
.badge-free    { background: var(--bg-3); color: var(--text-2); border: 1px solid var(--line); }

.sub-prof-date {
  font-family: var(--f-mono);
  font-size: 12px;
  color: var(--text-2);
  margin-bottom: 10px;
}
.sub-progress-wrap {
  height: 8px;
  background: rgba(255,255,255,0.05);
  border-radius: var(--r-pill);
  overflow: hidden;
}
.sub-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--success), var(--success-2));
  border-radius: var(--r-pill);
  transition: width var(--d-slow) var(--ease-out);
  box-shadow: 0 0 12px rgba(46,207,127,0.5);
}
.sub-progress-bar.warn { background: linear-gradient(90deg, var(--gold), var(--gold-2)); box-shadow: 0 0 12px rgba(240,176,48,0.5); }
.sub-progress-bar.crit { background: linear-gradient(90deg, var(--blood), var(--blood-2)); box-shadow: 0 0 12px rgba(200,32,26,0.5); }

.prof-section {
  padding: 18px 14px;
  border-bottom: 1px solid var(--line-soft);
}
.section-hd-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.section-hd-row h3, .section-hd-row > strong {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-2);
}
.section-count {
  font-family: var(--f-mono);
  font-size: 12px;
  font-weight: 700;
  padding: 3px 8px;
  background: rgba(236,106,28,0.14);
  color: var(--orange-2);
  border-radius: var(--r-1);
  border: 1px solid rgba(236,106,28,0.3);
}

/* Read-only список настроек */
.settings-list {
  display: flex;
  flex-direction: column;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  overflow: hidden;
}
.settings-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 13px 14px;
  border-bottom: 1px solid var(--line-soft);
}
.settings-item:last-child { border-bottom: 0; }
.settings-lbl {
  font-size: 13px;
  color: var(--text-2);
  font-weight: 500;
}
.settings-val {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 13px;
  color: var(--text-0);
  letter-spacing: 0.02em;
}
.settings-val.orange { color: var(--orange-2); }

/* Кнопка продления */
.renew-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: calc(100% - 28px);
  margin: 18px auto 24px;
  padding: 16px;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #1a0c00;
  background: linear-gradient(180deg, var(--gold-2), var(--gold) 55%, #c8920a);
  border: 1px solid #b07a08;
  border-radius: var(--r-2);
  box-shadow: var(--shadow-gold);
  position: relative;
  overflow: hidden;
}
.renew-btn::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.35) 50%, transparent 70%);
  transform: translateX(-120%);
  animation: shineSweep 3.4s ease-in-out infinite;
}

.admin-enter-btn {
  display: block;
  width: calc(100% - 28px);
  margin: 0 auto 18px;
  padding: 12px;
  background: var(--bg-2);
  border: 1px dashed var(--line);
  border-radius: var(--r-2);
  font-family: var(--f-mono);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
}

/* -------------------------------------------------------------
   18. ONBOARDING — приветственные слайды
   ------------------------------------------------------------- */
.ob-wrap {
  position: fixed;
  inset: 0;
  z-index: 200;
  background:
    radial-gradient(80% 60% at 50% 0%, rgba(236,106,28,0.18), transparent 70%),
    radial-gradient(60% 50% at 50% 100%, rgba(240,176,48,0.10), transparent 70%),
    var(--bg-0);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.ob-track {
  display: flex;
  flex: 1;
  width: 300%;
  transform: translate3d(0, 0, 0);
  transition: transform var(--d-slow) var(--ease-out);
}
.ob-slide {
  flex: 0 0 33.3333%;
  width: 33.3333%;
  height: 100%;
  overflow-y: auto;
  padding: 16px 24px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
}

/* Лого сверху */
.ob-logo-top {
  display: inline-flex;
  align-items: baseline;
  gap: 1px;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 18px;
  letter-spacing: 0.04em;
  margin-bottom: 12px;
  padding: 6px 12px;
  background: linear-gradient(180deg, #1a1d2c, #0f111c);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
}
.ob-logo-hr    { color: var(--cream); }
.ob-logo-beast { color: var(--orange); text-shadow: 0 0 18px rgba(236,106,28,0.45); }

/* «Когтистые» полосы под логотипом */
.ob-scratch {
  position: absolute;
  top: 70px;
  left: 50%;
  transform: translateX(-50%) rotate(-4deg);
  width: 200px; height: 24px;
  background:
    linear-gradient(95deg, transparent 5%, var(--orange) 5%, var(--orange) 8%, transparent 8%),
    linear-gradient(95deg, transparent 25%, var(--gold) 25%, var(--gold) 27%, transparent 27%),
    linear-gradient(95deg, transparent 50%, var(--orange) 50%, var(--orange) 53%, transparent 53%);
  opacity: 0.5;
  pointer-events: none;
}

/* Маскот с свечением */
.ob-mascot-wrap {
  position: relative;
  width: 160px; height: 160px;
  display: grid; place-items: center;
  margin: 4px 0 12px;
}
.ob-mascot-glow {
  position: absolute;
  inset: -10%;
  background: radial-gradient(closest-side, rgba(236,106,28,0.45), transparent 70%);
  filter: blur(4px);
  animation: pulseGlow 3.4s ease-in-out infinite;
}
.ob-mascot-ring {
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  border: 1px dashed rgba(236,106,28,0.4);
  animation: spin 26s linear infinite;
}
.ob-mascot-ring::after {
  content: '';
  position: absolute;
  inset: 12px;
  border-radius: 50%;
  border: 1px dashed rgba(240,176,48,0.18);
}
.ob-tiger-svg {
  position: relative;
  width: 78%;
  height: 78%;
  filter: drop-shadow(0 12px 40px rgba(236,106,28,0.55));
  animation: floaty 5s ease-in-out infinite;
  background-image: url("logo.svg");
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  border-radius: 24%;
}
.ob-tiger-svg > * { display: none !important; }

.ob-h1, .ob-h2 {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 30px;
  line-height: 1.05;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--cream);
  margin-bottom: 10px;
  text-wrap: balance;
}
.ob-hl {
  color: var(--orange-2);
  background: linear-gradient(120deg, var(--orange-2), var(--gold-2));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}
.ob-sub1 {
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-2);
  max-width: 320px;
  text-wrap: pretty;
}
.ob-slide1-foot {
  margin-top: 16px; /* было auto — толкало блок к самому низу */
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--text-3);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* Слайд 2 — как работает */
.ob-slide-how { justify-content: flex-start; }
.ob-features {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 28px;
  width: 100%;
  max-width: 360px;
}
.ob-feat {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 14px;
  align-items: center;
  padding: 16px 14px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  text-align: left;
  position: relative;
  overflow: hidden;
  animation: fadeUp 480ms var(--ease-out) both;
}
.ob-feat:nth-child(2) { animation-delay: 80ms; }
.ob-feat:nth-child(3) { animation-delay: 160ms; }
.ob-feat:nth-child(4) { animation-delay: 240ms; }
.ob-feat-accent {
  border-color: rgba(236,106,28,0.4);
  background: linear-gradient(135deg, rgba(236,106,28,0.10), rgba(240,176,48,0.04));
}
.ob-feat-ico {
  width: 56px; height: 56px;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--bg-3), var(--bg-2));
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  font-size: 26px;
}
.ob-feat-text {
  font-size: 14px;
  color: var(--text-1);
  line-height: 1.45;
  font-weight: 500;
}
.ob-feat-text strong { color: var(--cream); font-weight: 700; }

/* Слайд 3 — оплата */
.ob-slide-pay { justify-content: flex-start; }
.ob-pay-head {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 22px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--cream);
  margin-top: 4px;
}
.ob-pay-price {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: 14px 0 22px;
}
.ob-price-val {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 64px;
  line-height: 0.9;
  color: var(--orange-2);
  text-shadow: 0 0 28px rgba(236,106,28,0.5);
  letter-spacing: -0.04em;
}
.ob-price-per {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 16px;
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.ob-perks {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  max-width: 340px;
  margin-bottom: 20px;
}
.ob-perk {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  font-size: 13px;
  color: var(--text-1);
  text-align: left;
}
.ob-perk-ico {
  width: 22px; height: 22px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(46,207,127,0.18);
  color: var(--success-2);
  font-size: 12px;
  font-weight: 800;
  flex: none;
}

.ob-pay-btns {
  width: 100%;
  max-width: 340px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ob-btn-stars {
  padding: 16px;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #1a0c00;
  background: linear-gradient(180deg, var(--gold-2), var(--gold) 55%, #c8920a);
  border: 1px solid #b07a08;
  border-radius: var(--r-2);
  box-shadow: var(--shadow-gold);
}
.ob-btn-crypto {
  padding: 14px;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cream);
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
}
.ob-skip-link {
  margin-top: 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-3);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  background: transparent;
  border: 0;
  padding: 8px;
}

/* Навигация — поверх трека слайдов */
.ob-nav {
  position: fixed;
  bottom: calc(env(safe-area-inset-bottom) + 52px);
  left: 0; right: 0;
  z-index: 210;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.ob-num { display: none; } /* номер слайда не нужен с новым лейаутом */
.ob-dots {
  display: inline-flex;
  gap: 8px;
}
.ob-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--bg-4);
  transition: all var(--d-mid) var(--ease-out);
}
.ob-dot.active {
  width: 28px;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--orange), var(--gold));
  box-shadow: 0 0 8px rgba(236,106,28,0.4);
}
/* Кнопка — широкая, по центру */
.ob-arrow {
  width: auto;
  min-width: 160px;
  height: 46px;
  padding: 0 28px;
  border-radius: var(--r-pill);
  background: linear-gradient(180deg, var(--orange-2), var(--orange-deep));
  color: #1a0c00;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: var(--shadow-orange);
  transition: transform var(--d-fast) var(--ease-back);
}
.ob-arrow:active { transform: scale(0.96); }

/* Овлей onboarding (туториал) */
.ob-overlay {
  position: fixed;
  inset: 0;
  z-index: 250;
  background: transparent; /* затемнение делает box-shadow у .ob-spotlight */
  pointer-events: auto;
  transition: background 0.3s ease, backdrop-filter 0.3s ease;
}
/* Слайды без таргета (первый/последний): весь экран тёмный и размытый */
.ob-overlay.dimmed {
  background: rgba(5,6,12,0.88);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.ob-spotlight {
  position: absolute;
  border-radius: 8px;
  box-shadow:
    0 0 0 9999px rgba(5,6,12,0.88),
    0 0 0 1px var(--orange);
  pointer-events: none;
  animation: pulseSpot 1.8s ease-in-out infinite;
  transition: all 240ms var(--ease-out);
}
.ob-tooltip {
  position: absolute;
  /* JS ставит top/bottom, мы фиксируем горизонталь */
  left: 14px;
  right: 14px;
  max-width: none;
  padding: 14px 16px;
  background: linear-gradient(180deg, #1a1d2c, #0f111c);
  border: 1px solid rgba(236,106,28,0.45);
  border-radius: var(--r-3);
  box-shadow: var(--shadow-2);
  color: var(--text-0);
}
.ob-step-dots { display: flex; gap: 6px; margin-top: 12px; }
.ob-emoji   { font-size: 28px; margin-bottom: 6px; line-height: 1; }
.ob-title   { font-family: var(--f-display); font-weight: 800; font-size: 14px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--cream); margin-bottom: 6px; }
.ob-text    { font-size: 13px; color: var(--text-2); line-height: 1.45; }
.ob-actions { display: flex; gap: 8px; margin-top: 12px; justify-content: flex-end; }
.ob-skip    { font-size: 11px; color: var(--text-3); padding: 8px 10px; letter-spacing: 0.1em; text-transform: uppercase; }
.ob-next    {
  padding: 8px 14px;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #1a0c00;
  background: linear-gradient(180deg, var(--orange-2), var(--orange));
  border-radius: var(--r-1);
}

/* -------------------------------------------------------------
   19. PAYMENT BOTTOM SHEET
   ------------------------------------------------------------- */
.bottom-sheet {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 110;
  transform: translateY(100%);
  transition: transform var(--d-mid) var(--ease-out);
}
.bottom-sheet.open { transform: translateY(0); }

.sheet-box {
  padding: 12px 16px calc(20px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, #181b2a 0%, #0f111c 100%);
  border-top: 1px solid var(--line);
  border-radius: 22px 22px 0 0;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 -20px 60px rgba(0,0,0,0.6);
}
.sheet-handle {
  width: 44px; height: 4px;
  border-radius: 2px;
  background: var(--line);
  margin: 0 auto 14px;
}
.sheet-title {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 18px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--cream);
  margin-bottom: 16px;
  text-align: center;
}

.pay-amount-row {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 8px;
  margin-bottom: 18px;
  padding: 18px 0;
  background:
    radial-gradient(80% 100% at 50% 0%, rgba(236,106,28,0.16), transparent 70%);
  border-radius: var(--r-3);
}
.pay-amount {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 48px;
  color: var(--cream);
  letter-spacing: -0.03em;
  line-height: 1;
  text-shadow: 0 0 24px rgba(236,106,28,0.35);
}
.pay-period {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 14px;
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.pay-stars-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 16px;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #1a0c00;
  background: linear-gradient(180deg, var(--gold-2), var(--gold) 55%, #c8920a);
  border: 1px solid #b07a08;
  border-radius: var(--r-2);
  box-shadow: var(--shadow-gold);
}

.pay-or-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 16px 0;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-3);
}
.pay-or-row::before, .pay-or-row::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--line);
}

/* Кошельки */
.pay-wallet-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 12px 14px;
  margin-bottom: 8px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
}
.pay-wallet-info { min-width: 0; }
.pay-wallet-name {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--orange-2);
}
.pay-wallet-addr {
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--text-2);
  margin-top: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pay-copy-btn {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border-radius: var(--r-1);
  background: var(--bg-3);
  border: 1px solid var(--line);
  color: var(--text-1);
  font-size: 14px;
  transition: all var(--d-fast);
}
.pay-copy-btn:active { background: var(--orange); color: #1a0c00; transform: scale(0.95); }

/* Hash input */
.pay-hash-section { margin-top: 16px; }
.pay-hash-label {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-2);
  margin-bottom: 8px;
}
.pay-hash-row { display: flex; gap: 8px; }
.pay-hash-input {
  flex: 1;
  padding: 11px 14px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  font-family: var(--f-mono);
  font-size: 12px;
  color: var(--text-0);
}
.pay-hash-input:focus { outline: none; border-color: var(--orange); box-shadow: 0 0 0 3px rgba(236,106,28,0.15); }
.pay-hash-btn {
  padding: 0 16px;
  border-radius: var(--r-2);
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #1a0c00;
  background: linear-gradient(180deg, var(--orange-2), var(--orange));
  border: 1px solid var(--orange-deep);
}
.pay-hash-hint {
  font-size: 11px;
  color: var(--text-3);
  margin-top: 6px;
  line-height: 1.4;
}

.sheet-cancel-btn {
  display: block;
  width: 100%;
  margin-top: 14px;
  padding: 14px;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-2);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--r-2);
}

/* -------------------------------------------------------------
   20. BOTTOM NAV
   ------------------------------------------------------------- */
.bottom-nav {
  position: sticky;
  bottom: 0;
  z-index: 60;
  display: grid;
  grid-template-columns: repeat(5, 1fr); /* 5 кнопок: Главная Свайп Моё Настройки Профиль */
  padding: 6px 4px calc(8px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, rgba(10,11,20,0.78), rgba(10,11,20,0.96));
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-top: 1px solid var(--line);
}
.bottom-nav::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--orange) 30%, var(--gold) 50%, var(--orange) 70%, transparent);
  opacity: 0.4;
}

.nav-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 6px 2px;
  border-radius: var(--r-2);
  color: var(--text-3);
  position: relative;
  transition: color var(--d-fast);
  width: 100%;
}
.nav-btn.active { color: var(--orange-2); }
.nav-btn.active::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 28px; height: 3px;
  background: linear-gradient(90deg, var(--orange), var(--gold));
  border-radius: 0 0 3px 3px;
  box-shadow: 0 0 10px rgba(236,106,28,0.6);
}
.nav-btn.nav-disabled { color: var(--text-3); opacity: 0.4; pointer-events: none; }
.nav-ico { font-size: 20px; line-height: 1; }
.nav-lbl {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* -------------------------------------------------------------
   21. ТОСТЫ, UNDO, CONFIRM
   ------------------------------------------------------------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: 92px;
  transform: translateX(-50%) translateY(20px);
  z-index: 300;
  padding: 12px 18px;
  background: linear-gradient(180deg, #1a1d2c, #0f111c);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--text-0);
  box-shadow: 0 14px 40px rgba(0,0,0,0.5);
  opacity: 0;
  transition: all var(--d-mid) var(--ease-back);
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.success { border-color: rgba(46,207,127,0.45); color: var(--success-2); }
.toast.error   { border-color: rgba(200,32,26,0.45); color: var(--blood-2); }

.undo-toast {
  position: fixed;
  left: 14px;
  right: 14px;
  bottom: 92px;
  z-index: 300;
  display: none; /* JS добавляет .show чтобы показать */
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: linear-gradient(180deg, #1a1d2c, #0f111c);
  border: 1px solid var(--line);
  border-left: 3px solid var(--orange);
  border-radius: var(--r-2);
  box-shadow: 0 14px 40px rgba(0,0,0,0.5);
  animation: fadeUp 280ms var(--ease-out) both;
}
.undo-toast.show {
  display: flex;
}
.undo-label {
  font-size: 13px;
  color: var(--text-1);
  font-weight: 500;
}
.undo-btn {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--orange-2);
  padding: 6px 12px;
  border-radius: var(--r-1);
  background: rgba(236,106,28,0.12);
  border: 1px solid rgba(236,106,28,0.32);
}

.confirm-sheet {
  position: fixed;
  inset: 0;
  z-index: 350;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(5,6,12,0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: fadeIn var(--d-fast) ease-out;
}
.confirm-box {
  width: 100%;
  max-width: 340px;
  padding: 22px 20px;
  background: linear-gradient(180deg, #1a1d2c, #0f111c);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  box-shadow: var(--shadow-2);
  animation: fadeUp 240ms var(--ease-back) both;
}
.confirm-title {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 17px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--cream);
  margin-bottom: 6px;
}
.confirm-text {
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.5;
  margin-bottom: 16px;
}
.confirm-btns { display: flex; gap: 8px; }
.confirm-cancel, .confirm-ok {
  flex: 1;
  padding: 13px;
  border-radius: var(--r-2);
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.confirm-cancel { background: var(--bg-3); border: 1px solid var(--line); color: var(--text-1); }
.confirm-ok {
  background: linear-gradient(180deg, var(--blood-2), var(--blood));
  border: 1px solid #6a1611;
  color: #fff;
  box-shadow: var(--shadow-blood);
}

/* -------------------------------------------------------------
   22. DETAIL SHEET (просмотр вакансии)
   ------------------------------------------------------------- */
.detail-box {
  padding: 12px 0 calc(20px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, #181b2a 0%, #0f111c 100%);
  border-top: 1px solid var(--line);
  border-radius: 22px 22px 0 0;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
}
.detail-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 6px 16px 14px;
  border-bottom: 1px solid var(--line-soft);
}
.detail-head-info { flex: 1; min-width: 0; }
.detail-company-line {
  font-size: 12px;
  color: var(--text-2);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.detail-title-line {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 18px;
  line-height: 1.2;
  color: var(--cream);
  margin-top: 4px;
  text-transform: uppercase;
}
.detail-x {
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--bg-3);
  border: 1px solid var(--line);
  color: var(--text-1);
  font-size: 14px;
  flex: none;
}

.detail-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 14px 16px;
}
.detail-salary {
  display: inline-block;
  font-family: var(--f-mono);
  font-weight: 700;
  font-size: 16px;
  color: var(--gold-2);
  padding: 6px 12px;
  background: rgba(240,176,48,0.10);
  border: 1px solid rgba(240,176,48,0.32);
  border-radius: var(--r-1);
  margin-bottom: 14px;
}
.detail-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.detail-chip {
  padding: 5px 10px;
  border-radius: var(--r-pill);
  background: var(--bg-3);
  border: 1px solid var(--line);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-1);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.detail-desc {
  font-size: 14px;
  color: var(--text-1);
  line-height: 1.6;
  margin-bottom: 16px;
}
.detail-section-hd {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-2);
  margin: 18px 0 10px;
}
.detail-status-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.detail-note {
  width: 100%;
  min-height: 90px;
  padding: 12px 14px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  font-size: 13px;
  color: var(--text-0);
  resize: vertical;
}
.detail-note:focus { outline: none; border-color: var(--orange); box-shadow: 0 0 0 3px rgba(236,106,28,0.15); }
.detail-save-note {
  margin-top: 8px;
  padding: 10px 16px;
  border-radius: var(--r-2);
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #1a0c00;
  background: linear-gradient(180deg, var(--orange-2), var(--orange));
  border: 1px solid var(--orange-deep);
}
.detail-action-row {
  display: flex;
  gap: 8px;
  padding: 12px 16px 0;
  border-top: 1px solid var(--line-soft);
}
.detail-share-btn {
  padding: 12px 16px;
  border-radius: var(--r-2);
  background: var(--bg-3);
  border: 1px solid var(--line);
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-1);
}

/* -------------------------------------------------------------
   23. KEYFRAMES — анимации
   ------------------------------------------------------------- */
@keyframes pulseDot {
  0%, 100% { box-shadow: 0 0 10px currentColor; transform: scale(1); }
  50%      { box-shadow: 0 0 18px currentColor; transform: scale(1.15); }
}

@keyframes pulseGlow {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50%      { opacity: 0.85; transform: scale(1.06); }
}

@keyframes pulseSpot {
  0%, 100% { box-shadow: 0 0 0 9999px rgba(5,6,12,0.88), 0 0 0 1px var(--orange), 0 0 8px rgba(236,106,28,0.3); }
  50%      { box-shadow: 0 0 0 9999px rgba(5,6,12,0.88), 0 0 0 1px var(--orange), 0 0 12px rgba(236,106,28,0.5); }
}

@keyframes shineSweep {
  0%        { transform: translateX(-120%); }
  60%, 100% { transform: translateX(120%); }
}

@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes chipIn {
  from { opacity: 0; transform: scale(0.8); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes barGrow {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}
@keyframes barGrowX {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes floaty {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

@keyframes zzzFloat {
  0%   { transform: translateY(0) rotate(-6deg); opacity: 0.4; }
  50%  { transform: translateY(-10px) rotate(6deg); opacity: 1; }
  100% { transform: translateY(-20px) rotate(-6deg); opacity: 0; }
}

@keyframes stampIn {
  0%   { opacity: 0; transform: rotate(-30deg) scale(2.4); }
  60%  { opacity: 1; transform: rotate(-6deg) scale(0.85); }
  100% { opacity: 1; transform: rotate(-8deg) scale(0.9); }
}

@keyframes clawSwipe {
  from { opacity: 0; transform: translateX(-20%); }
  to   { opacity: 0.85; transform: translateX(0); }
}

/* -------------------------------------------------------------
   24. JUNGLE — декоративные элементы джунглей
   Листья пальм, лианы, силуэты — добавляют атмосферу охоты.
   Все слои pointer-events:none, не мешают тапам.
   ------------------------------------------------------------- */

/* Базовый фон-джунгли — добавляется к body как глобальный декор.
   Силуэты листьев пальм по углам экрана. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    /* Левый верхний угол — большой пальмовый лист */
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 300' fill='none'><g opacity='0.55' fill='%23051018'><path d='M-20 -10 Q40 30 80 90 Q60 60 30 50 Q70 80 100 130 Q70 90 40 80 Q90 130 120 180 Q80 130 50 120 Q110 180 130 230 Q90 180 60 170 Q120 230 140 280 Q60 200 -20 240 Z'/><path d='M-10 -20 Q50 0 110 40 Q70 20 30 20 Q90 50 130 90 Q80 60 40 60 L-10 -20 Z'/></g></svg>"),
    /* Правый нижний — лианы и листья */
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 300' fill='none'><g opacity='0.5' fill='%23051018'><path d='M320 320 Q260 280 220 220 Q240 250 270 260 Q230 230 200 180 Q230 220 260 230 Q210 180 180 130 Q220 180 250 190 Q190 130 170 80 Q210 130 240 140 Q180 80 160 30 Q240 110 320 70 Z'/></g></svg>");
  background-position: top -40px left -40px, bottom -40px right -40px;
  background-size: 360px 360px, 360px 360px;
  background-repeat: no-repeat;
  opacity: 0.9;
}

/* Утилитарный класс — листья пальмы можно подмешивать к элементам */
.jungle-leaves {
  position: relative;
  isolation: isolate;
}
.jungle-leaves::before,
.jungle-leaves::after {
  content: '';
  position: absolute;
  pointer-events: none;
  z-index: 0;
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0.18;
  filter: drop-shadow(0 4px 14px rgba(0,0,0,0.6));
}
.jungle-leaves > * { position: relative; z-index: 1; }

/* Пальмовый лист (svg) — крупный, с длинными «перьями» */
.jungle-leaves::before {
  top: -28px; left: -22px;
  width: 160px; height: 160px;
  transform: rotate(-18deg);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' fill='none' stroke='%23ec6a1c' stroke-width='1.4'><path d='M100 195 Q98 100 60 30' fill='none'/><g fill='%23ec6a1c' opacity='0.6'><path d='M100 180 Q60 150 30 130 Q70 145 100 165 Z'/><path d='M99 160 Q55 130 22 105 Q65 125 100 148 Z'/><path d='M97 138 Q50 110 18 80 Q60 100 98 125 Z'/><path d='M93 115 Q48 88 22 55 Q60 75 96 100 Z'/><path d='M88 90 Q50 65 30 30 Q60 50 92 78 Z'/><path d='M82 65 Q55 45 45 18 Q70 35 88 55 Z'/><path d='M100 180 Q140 150 170 130 Q130 145 100 165 Z'/><path d='M101 160 Q145 130 178 105 Q135 125 100 148 Z'/><path d='M103 138 Q150 110 182 80 Q140 100 102 125 Z'/><path d='M107 115 Q152 88 178 55 Q140 75 104 100 Z'/><path d='M112 90 Q150 65 170 30 Q140 50 108 78 Z'/></g></svg>");
}
.jungle-leaves::after {
  bottom: -22px; right: -18px;
  width: 130px; height: 130px;
  transform: rotate(160deg);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' fill='none'><g fill='%23f0b030' opacity='0.55'><path d='M100 180 Q60 150 30 130 Q70 145 100 165 Z'/><path d='M99 160 Q55 130 22 105 Q65 125 100 148 Z'/><path d='M97 138 Q50 110 18 80 Q60 100 98 125 Z'/><path d='M100 180 Q140 150 170 130 Q130 145 100 165 Z'/><path d='M101 160 Q145 130 178 105 Q135 125 100 148 Z'/><path d='M103 138 Q150 110 182 80 Q140 100 102 125 Z'/></g></svg>");
}

/* Hero card — добавим лист в углу */
.hero-card::after {
  content: '';
  position: absolute;
  top: -24px; left: -32px;
  width: 140px; height: 140px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' fill='none'><g fill='%23ec6a1c' opacity='0.5'><path d='M100 180 Q60 150 30 130 Q70 145 100 165 Z'/><path d='M99 160 Q55 130 22 105 Q65 125 100 148 Z'/><path d='M97 138 Q50 110 18 80 Q60 100 98 125 Z'/><path d='M93 115 Q48 88 22 55 Q60 75 96 100 Z'/><path d='M88 90 Q50 65 30 30 Q60 50 92 78 Z'/><path d='M100 180 Q140 150 170 130 Q130 145 100 165 Z'/><path d='M101 160 Q145 130 178 105 Q135 125 100 148 Z'/></g></svg>");
  background-size: contain;
  background-repeat: no-repeat;
  transform: rotate(-32deg);
  opacity: 0.45;
  pointer-events: none;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.5));
  z-index: 0;
}
.hero-card > * { position: relative; z-index: 1; }

/* Onboarding — листья джунглей по углам */
.ob-wrap::before,
.ob-wrap::after {
  content: '';
  position: absolute;
  pointer-events: none;
  background-repeat: no-repeat;
  background-size: contain;
  z-index: 1;
}
.ob-wrap::before {
  top: -30px; left: -40px;
  width: 220px; height: 220px;
  transform: rotate(-15deg);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' fill='none'><g fill='%23ec6a1c' opacity='0.45'><path d='M100 195 Q60 165 30 145 Q70 160 100 180 Z'/><path d='M99 175 Q55 145 22 120 Q65 140 100 163 Z'/><path d='M97 153 Q50 125 18 95 Q60 115 98 140 Z'/><path d='M93 130 Q48 103 22 70 Q60 90 96 115 Z'/><path d='M88 105 Q50 80 30 45 Q60 65 92 93 Z'/><path d='M100 195 Q140 165 170 145 Q130 160 100 180 Z'/><path d='M101 175 Q145 145 178 120 Q135 140 100 163 Z'/><path d='M103 153 Q150 125 182 95 Q140 115 102 140 Z'/></g></svg>");
  filter: drop-shadow(0 8px 20px rgba(0,0,0,0.5));
}
.ob-wrap::after {
  bottom: 80px; right: -50px;
  width: 200px; height: 200px;
  transform: rotate(155deg);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' fill='none'><g fill='%23f0b030' opacity='0.35'><path d='M100 195 Q60 165 30 145 Q70 160 100 180 Z'/><path d='M99 175 Q55 145 22 120 Q65 140 100 163 Z'/><path d='M97 153 Q50 125 18 95 Q60 115 98 140 Z'/><path d='M93 130 Q48 103 22 70 Q60 90 96 115 Z'/><path d='M100 195 Q140 165 170 145 Q130 160 100 180 Z'/><path d='M101 175 Q145 145 178 120 Q135 140 100 163 Z'/></g></svg>");
}
.ob-slide { position: relative; z-index: 2; }
.ob-nav   { position: relative; z-index: 3; }

/* Фоновые «полосы тигра» — еле видимые диагональные штрихи */
.app-header,
.swipe-topbar,
.mine-tabs {
  background-image:
    linear-gradient(180deg, rgba(10,11,20,0.95), rgba(10,11,20,0.78)),
    repeating-linear-gradient(118deg,
      transparent 0px,
      transparent 22px,
      rgba(236,106,28,0.04) 22px,
      rgba(236,106,28,0.04) 24px,
      transparent 24px,
      transparent 46px,
      rgba(240,176,48,0.025) 46px,
      rgba(240,176,48,0.025) 48px);
}

/* Bottom-nav — тигриные полосы между иконками */
.bottom-nav {
  background-image:
    linear-gradient(180deg, rgba(10,11,20,0.78), rgba(10,11,20,0.96)),
    repeating-linear-gradient(118deg,
      transparent 0px,
      transparent 18px,
      rgba(236,106,28,0.05) 18px,
      rgba(236,106,28,0.05) 20px);
}

/* Empty-state — пара пальмовых листьев в углах */
.state-overlay::before,
.state-overlay::after {
  content: '';
  position: absolute;
  pointer-events: none;
  width: 180px; height: 180px;
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0.35;
  z-index: 0;
}
.state-overlay::before {
  top: -20px; left: -30px;
  transform: rotate(-22deg);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' fill='none'><g fill='%23ec6a1c'><path d='M100 195 Q60 165 30 145 Q70 160 100 180 Z'/><path d='M99 175 Q55 145 22 120 Q65 140 100 163 Z'/><path d='M97 153 Q50 125 18 95 Q60 115 98 140 Z'/><path d='M100 195 Q140 165 170 145 Q130 160 100 180 Z'/><path d='M101 175 Q145 145 178 120 Q135 140 100 163 Z'/></g></svg>");
}
.state-overlay::after {
  bottom: -20px; right: -30px;
  transform: rotate(168deg);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' fill='none'><g fill='%23f0b030'><path d='M100 195 Q60 165 30 145 Q70 160 100 180 Z'/><path d='M99 175 Q55 145 22 120 Q65 140 100 163 Z'/><path d='M100 195 Q140 165 170 145 Q130 160 100 180 Z'/><path d='M101 175 Q145 145 178 120 Q135 140 100 163 Z'/></g></svg>");
}
.state-overlay > * { position: relative; z-index: 1; }

/* Лиана — тонкая декоративная линия со свешивающимися листьями.
   Используется в section headers — добавляется атмосферы. */
.set-section,
.prof-section {
  position: relative;
}
.set-section > h3::before,
.prof-section .section-hd-row > strong::before {
  content: '';
  display: inline-block;
  width: 16px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--orange));
  margin-right: 8px;
  vertical-align: middle;
}

/* Paywall card — рваный лист сверху */
.swipe-paywall-card {
  isolation: isolate;
}
.swipe-paywall-card::after {
  content: '';
  position: absolute;
  top: -28px; right: -22px;
  width: 130px; height: 130px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' fill='none'><g fill='%23ec6a1c' opacity='0.55'><path d='M100 180 Q60 150 30 130 Q70 145 100 165 Z'/><path d='M99 160 Q55 130 22 105 Q65 125 100 148 Z'/><path d='M97 138 Q50 110 18 80 Q60 100 98 125 Z'/><path d='M100 180 Q140 150 170 130 Q130 145 100 165 Z'/><path d='M101 160 Q145 130 178 105 Q135 125 100 148 Z'/></g></svg>");
  background-size: contain;
  background-repeat: no-repeat;
  transform: rotate(40deg);
  opacity: 0.45;
  pointer-events: none;
  filter: drop-shadow(0 4px 14px rgba(0,0,0,0.5));
}

/* Снижение анимаций для пользователей с reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* =============================================================
   COMPATIBILITY + MISSING SECTIONS
   Поверх нового дизайна: layout shell, --nav-h, .show алиасы,
   .section-hd, admin panel
   ============================================================= */

/* ── CSS var --nav-h + --accent (используется в JS/inline) ── */
:root { --nav-h: 66px; --accent: var(--orange); }

/* ── App shell & pages ────────────────────────────────────── */
#app {
  display: flex; flex-direction: column;
  height: 100dvh; height: 100vh;
  overflow: hidden; position: relative;
  background: var(--bg-1);
}
.page {
  flex: 1; display: none; flex-direction: column;
  overflow: hidden; padding-bottom: var(--nav-h);
}
.page.active { display: flex; }
.page-scroll {
  flex: 1; overflow-y: auto; overflow-x: hidden;
  padding: 0 14px 24px;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.page-scroll::-webkit-scrollbar { display: none; }

#page-swipe { display: none; flex-direction: column; height: 100%; }
#page-swipe.active { display: flex; }
#action-row { display: none !important; }

/* ── section-hd ──────────────────────────────────────────── */
.section-hd {
  font-family: var(--f-display); font-weight: 800;
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--text-2); margin-bottom: 12px;
}

/* ── .bottom-sheet.show алиас (JS использует .show) ─────── */
.bottom-sheet.show { transform: translateY(0); }
.confirm-sheet { display: none; }
.confirm-sheet.show { display: grid; }
.admin-modal.show { transform: translateY(0); }

/* Mine panels */
.mine-panel { flex: 1; min-height: 0; overflow: hidden; }
.mine-scroll {
  height: 100%; overflow-y: auto; overflow-x: hidden;
  padding: 12px 14px 20px; scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.mine-scroll::-webkit-scrollbar { display: none; }

/* ── ADMIN MODAL ─────────────────────────────────────────── */
.admin-modal {
  position: fixed; inset: 0; background: var(--bg-1);
  z-index: 600; display: flex; flex-direction: column;
  transform: translateY(100%);
  transition: transform var(--d-mid) var(--ease-out);
}
.admin-inner { display: flex; flex-direction: column; height: 100%; overflow: hidden; }
.admin-topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 14px 14px; flex-shrink: 0;
  background: var(--bg-2); border-bottom: 1px solid var(--line);
}
.admin-title {
  font-family: var(--f-display); font-weight: 800;
  font-size: 16px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--cream);
}
.admin-tabs {
  display: flex; flex-shrink: 0; gap: 4px;
  padding: 10px 12px; background: var(--bg-0);
  border-bottom: 1px solid var(--line);
  overflow-x: auto; scrollbar-width: none;
}
.admin-tabs::-webkit-scrollbar { display: none; }
.admin-tab {
  flex: none; padding: 8px 14px; border-radius: var(--r-pill);
  background: var(--bg-2); border: 1px solid var(--line);
  font-family: var(--f-display); font-weight: 700;
  font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-2); transition: all var(--d-fast);
}
.admin-tab.active {
  background: rgba(236,106,28,0.12);
  border-color: rgba(236,106,28,0.5); color: var(--orange-2);
}
.admin-body { flex: 1; overflow: hidden; position: relative; }
.admin-panel { height: 100%; overflow-y: auto; padding: 12px 14px 24px; scrollbar-width: none; }
.admin-panel::-webkit-scrollbar { display: none; }
.admin-search-wrap { margin-bottom: 12px; }
.admin-search-input {
  width: 100%; box-sizing: border-box;
  background: var(--bg-2); border: 1px solid var(--line);
  border-radius: var(--r-2); padding: 10px 14px;
  color: var(--text-0); font-size: 14px; outline: none;
  transition: border-color var(--d-fast);
}
.admin-search-input::placeholder { color: var(--text-3); }
.admin-search-input:focus { border-color: var(--orange); box-shadow: 0 0 0 3px rgba(236,106,28,0.15); }

/* Admin user cards */
.au-card {
  display: flex; align-items: center; gap: 12px;
  background: var(--bg-2); border: 1px solid var(--line);
  border-radius: var(--r-3); padding: 12px 14px; margin-bottom: 8px;
}
.au-ava {
  flex-shrink: 0; width: 42px; height: 42px; border-radius: 50%;
  background: linear-gradient(135deg, var(--orange), var(--orange-deep));
  display: flex; align-items: center; justify-content: center;
  font-family: var(--f-display); font-size: 17px; font-weight: 800; color: #1a0c00;
}
.au-info { flex: 1; min-width: 0; }
.au-name {
  font-size: 14px; font-weight: 700; color: var(--text-0);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.au-tappable { cursor: pointer; }
.au-tappable:active { opacity: 0.6; }
.au-meta { font-size: 11px; color: var(--text-2); margin-top: 2px; font-family: var(--f-mono); }
.au-sub {
  display: inline-block; font-family: var(--f-display);
  font-size: 10px; font-weight: 800; letter-spacing: 0.08em;
  border-radius: var(--r-1); padding: 2px 7px; text-transform: uppercase;
}
.au-sub-active  { background: rgba(46,207,127,0.15); color: var(--success-2); border: 1px solid rgba(46,207,127,0.35); }
.au-sub-expired { background: rgba(200,32,26,0.12);  color: var(--blood-2);   border: 1px solid rgba(200,32,26,0.32); }
.au-sub-pending { background: rgba(240,176,48,0.12); color: var(--gold-2);    border: 1px solid rgba(240,176,48,0.32); }
.au-sub-none    { background: rgba(255,255,255,0.05); color: var(--text-3);   border: 1px solid var(--line); }
.au-actions { display: flex; gap: 6px; align-items: center; flex-shrink: 0; }
.au-btn {
  width: 36px; height: 36px; border-radius: var(--r-2); border: none;
  font-size: 16px; cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: opacity var(--d-fast), transform var(--d-fast) var(--ease-back);
}
.au-btn:active { opacity: 0.7; transform: scale(0.93); }
.au-approve { background: rgba(46,207,127,0.16); color: var(--success-2); border: 1px solid rgba(46,207,127,0.35); }
.au-reject  { background: rgba(200,32,26,0.14);  color: var(--blood-2);   border: 1px solid rgba(200,32,26,0.32); }
.au-extend  {
  background: rgba(236,106,28,0.15); color: var(--orange-2);
  border: 1px solid rgba(236,106,28,0.35);
  font-family: var(--f-display); font-size: 10px; font-weight: 800;
  letter-spacing: 0.06em; width: auto; padding: 0 9px;
}
.au-shrink  {
  background: rgba(100,100,220,0.15); color: #9999ee;
  border: 1px solid rgba(100,100,220,0.35);
  font-family: var(--f-display); font-size: 10px; font-weight: 800;
  letter-spacing: 0.06em; width: auto; padding: 0 9px;
}

/* Admin analytics */
.analytics-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 8px; margin-bottom: 16px;
}
.analytics-card {
  background: var(--bg-2); border: 1px solid var(--line);
  border-radius: var(--r-3); padding: 18px 12px; text-align: center;
  position: relative; overflow: hidden;
}
.analytics-card::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px; background: var(--orange);
}
.analytics-num {
  font-family: var(--f-display); font-weight: 800;
  font-size: 34px; color: var(--orange-2); font-variant-numeric: tabular-nums;
}
.analytics-lbl {
  font-size: 10px; font-weight: 700; letter-spacing: 0.12em;
  color: var(--text-2); text-transform: uppercase; margin-top: 4px;
}

/* Broadcast audience toggle */
.bc-seg { display: flex; gap: 6px; margin-bottom: 14px; }
.bc-seg-btn {
  flex: 1; padding: 9px 4px; border-radius: var(--r-2);
  border: 1px solid var(--line); background: var(--bg-2);
  color: var(--text-2); font-family: var(--f-display);
  font-size: 11px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; cursor: pointer; transition: all var(--d-fast);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bc-seg-btn.active {
  background: rgba(236,106,28,0.14); border-color: rgba(236,106,28,0.5); color: var(--orange-2);
}
.bc-seg-btn:active { opacity: 0.75; }
.broadcast-counter { font-family: var(--f-mono); font-size: 11px; color: var(--text-3); text-align: right; margin-top: 4px; }
.broadcast-status { font-size: 13px; color: var(--text-2); text-align: center; margin-top: 14px; min-height: 20px; }

/* ── Promo codes admin panel ────────────────────────────────── */
.promo-create-box {
  background: var(--bg-2); border: 1px solid var(--line);
  border-radius: var(--r-3); padding: 18px 16px; margin-bottom: 20px;
}
.promo-field-label {
  font-size: 10px; font-weight: 700; letter-spacing: 0.12em;
  color: var(--text-3); text-transform: uppercase; margin-bottom: 6px;
}
.promo-row { margin-bottom: 14px; }
.promo-row:last-child { margin-bottom: 0; }

.promo-seg { display: flex; gap: 5px; flex-wrap: wrap; }
.promo-seg-btn {
  flex: 1; min-width: 40px; padding: 8px 6px;
  border-radius: var(--r-2); border: 1px solid var(--line);
  background: var(--bg-3); color: var(--text-2);
  font-family: var(--f-display); font-size: 11px; font-weight: 700;
  letter-spacing: 0.04em; cursor: pointer; transition: all var(--d-fast);
  text-align: center; white-space: nowrap;
}
.promo-seg-btn.active {
  background: rgba(236,106,28,0.16); border-color: rgba(236,106,28,0.55); color: var(--orange-2);
}
.promo-seg-btn:active { opacity: 0.7; }

.promo-hint-zero {
  font-size: 10px; font-weight: 500; letter-spacing: 0;
  text-transform: none; color: var(--text-3);
}
/* Hide number input spinners */
.promo-input[type="number"]::-webkit-inner-spin-button,
.promo-input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.promo-input[type="number"] { -moz-appearance: textfield; appearance: textfield; }

.promo-input {
  width: 100%; padding: 9px 12px;
  background: var(--bg-3); border: 1px solid var(--line);
  border-radius: var(--r-2); color: var(--text-0);
  font-family: var(--f-display); font-size: 13px; font-weight: 600;
  outline: none; box-sizing: border-box; transition: border-color var(--d-fast);
}
.promo-input:focus { border-color: var(--orange); }
.promo-input::placeholder { color: var(--text-3); font-weight: 500; }

.promo-date-input {
  width: 100%; padding: 9px 12px;
  background: var(--bg-3); border: 1px solid var(--line);
  border-radius: var(--r-2); color: var(--text-0);
  font-family: var(--f-display); font-size: 13px; outline: none;
  box-sizing: border-box; transition: border-color var(--d-fast);
  color-scheme: dark;
}
.promo-date-input:focus { border-color: var(--orange); }

.promo-code-card {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--bg-2); border: 1px solid var(--line);
  border-radius: var(--r-3); padding: 12px 14px; margin-bottom: 8px;
  gap: 10px;
}
.promo-code-card:last-child { margin-bottom: 0; }
.promo-code-info { flex: 1; min-width: 0; }
.promo-code-name {
  font-family: var(--f-mono); font-size: 13px; font-weight: 700;
  color: var(--orange-2); letter-spacing: 0.06em;
}
.promo-code-meta {
  font-size: 11px; color: var(--text-3); margin-top: 3px; line-height: 1.5;
}
.promo-code-note {
  font-size: 11px; color: var(--text-2); margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.promo-del-btn {
  flex-shrink: 0; padding: 7px 12px;
  background: rgba(200,32,26,0.12); border: 1px solid rgba(200,32,26,0.35);
  border-radius: var(--r-2); color: var(--blood-2);
  font-family: var(--f-display); font-size: 11px; font-weight: 700;
  cursor: pointer; letter-spacing: 0.04em; transition: all var(--d-fast);
}
.promo-del-btn:active { opacity: 0.7; }

/* Promo redeem row (profile page) */
.promo-redeem-row {
  display: flex; gap: 8px; margin-top: 6px;
}
.promo-redeem-row input {
  flex: 1; padding: 10px 12px;
  background: var(--bg-3); border: 1px solid var(--line);
  border-radius: var(--r-2); color: var(--text-0);
  font-family: var(--f-mono); font-size: 13px; font-weight: 600;
  letter-spacing: 0.08em; outline: none;
  transition: border-color var(--d-fast); box-sizing: border-box;
  text-transform: uppercase;
}
.promo-redeem-row input::placeholder { text-transform: none; letter-spacing: 0; color: var(--text-3); }
.promo-redeem-row input:focus { border-color: var(--orange); }
.promo-redeem-row .hero-btn {
  flex-shrink: 0; padding: 10px 16px; font-size: 12px; margin: 0;
}
.promo-redeem-msg {
  font-size: 12px; min-height: 18px; margin-top: 6px; font-weight: 600;
}
.promo-redeem-msg.ok  { color: var(--success-2); }
.promo-redeem-msg.err { color: var(--blood-2); }

/* ── Ticket open button (profile page) ─────────────────────── */
.ticket-open-btn {
  width: 100%; padding: 13px 16px;
  background: rgba(236,106,28,0.1); border: 1px solid rgba(236,106,28,0.35);
  border-radius: var(--r-3); color: var(--orange-2);
  font-family: var(--f-display); font-size: 13px; font-weight: 700;
  letter-spacing: 0.06em; cursor: pointer; text-align: center;
  transition: all var(--d-fast);
}
.ticket-open-btn:active { opacity: 0.75; }

/* ── Ticket modal ───────────────────────────────────────────── */
.ticket-modal-backdrop {
  position: fixed; inset: 0; z-index: 9000;
  background: rgba(5,6,12,0.82); backdrop-filter: blur(6px);
  display: flex; align-items: flex-end; justify-content: center;
}
.ticket-modal {
  background: var(--bg-1); border: 1px solid var(--line);
  border-radius: var(--r-4) var(--r-4) 0 0;
  padding: 20px 18px 32px; width: 100%; max-height: 90vh;
  overflow-y: auto; box-sizing: border-box;
  animation: slideUp var(--d-mid) ease;
}
.ticket-modal-hd {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 20px;
}
.ticket-modal-title {
  font-family: var(--f-display); font-size: 15px; font-weight: 800;
  color: var(--text-0); letter-spacing: 0.04em;
}
.ticket-modal-close {
  background: none; border: none; color: var(--text-3);
  font-size: 18px; cursor: pointer; padding: 4px 8px; line-height: 1;
}
.ticket-field { margin-bottom: 14px; }
.ticket-field-label {
  font-size: 10px; font-weight: 700; letter-spacing: 0.12em;
  color: var(--text-3); text-transform: uppercase; margin-bottom: 6px;
}
.ticket-req { color: var(--orange); }
.ticket-opt { font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--text-3); }
.ticket-input {
  width: 100%; padding: 10px 12px;
  background: var(--bg-3); border: 1px solid var(--line);
  border-radius: var(--r-2); color: var(--text-0);
  font-family: var(--f-display); font-size: 13px; font-weight: 500;
  outline: none; box-sizing: border-box; transition: border-color var(--d-fast);
}
.ticket-input:focus { border-color: var(--orange); }
.ticket-input::placeholder { color: var(--text-3); }
.ticket-textarea {
  width: 100%; padding: 10px 12px; height: 110px; resize: none;
  background: var(--bg-3); border: 1px solid var(--line);
  border-radius: var(--r-2); color: var(--text-0);
  font-family: var(--f-display); font-size: 13px; font-weight: 500;
  outline: none; box-sizing: border-box; transition: border-color var(--d-fast);
  line-height: 1.55;
}
.ticket-textarea:focus { border-color: var(--orange); }
.ticket-textarea::placeholder { color: var(--text-3); }
.ticket-modal-err {
  font-size: 12px; color: var(--blood-2); font-weight: 600;
  min-height: 16px; margin-bottom: 10px;
}
.ticket-submit-btn {
  width: 100%; padding: 14px; border-radius: var(--r-3); border: none;
  background: linear-gradient(135deg, var(--orange), var(--orange-deep));
  color: #fff; font-family: var(--f-display); font-size: 13px;
  font-weight: 800; letter-spacing: 0.1em; cursor: pointer;
  transition: opacity var(--d-fast);
}
.ticket-submit-btn:active { opacity: 0.8; }
.ticket-submit-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ── Tickets admin list ─────────────────────────────────────── */
.ticket-card {
  display: flex; align-items: flex-start; gap: 10px;
  background: var(--bg-2); border: 1px solid var(--line);
  border-radius: var(--r-3); padding: 12px 14px; margin-bottom: 8px;
  cursor: pointer; transition: border-color var(--d-fast);
}
.ticket-card:last-child { margin-bottom: 0; }
.ticket-card:active { border-color: var(--orange); }
.ticket-card.status-closed { opacity: 0.6; }
.ticket-card-dot {
  flex-shrink: 0; width: 8px; height: 8px; border-radius: 50%;
  margin-top: 5px;
}
.ticket-card-dot.open   { background: var(--blood-2); box-shadow: 0 0 6px var(--blood-2); }
.ticket-card-dot.closed { background: var(--success); }
.ticket-card-body { flex: 1; min-width: 0; }
.ticket-card-title {
  font-family: var(--f-display); font-size: 13px; font-weight: 700;
  color: var(--text-0); margin-bottom: 3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ticket-card-meta {
  font-size: 11px; color: var(--text-3); line-height: 1.5;
}
.ticket-card-desc {
  font-size: 12px; color: var(--text-2); margin-top: 4px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.ticket-card-arrow {
  flex-shrink: 0; color: var(--text-3); font-size: 14px; margin-top: 2px;
}

/* ── Ticket detail view ─────────────────────────────────────── */
.ticket-back-btn {
  background: none; border: none; color: var(--orange-2);
  font-family: var(--f-display); font-size: 12px; font-weight: 700;
  letter-spacing: 0.06em; cursor: pointer; padding: 0 0 14px;
  display: block;
}
.ticket-detail-hd {
  margin-bottom: 14px;
}
.ticket-detail-title {
  font-family: var(--f-display); font-size: 16px; font-weight: 800;
  color: var(--text-0); margin-bottom: 6px;
}
.ticket-detail-meta {
  font-size: 11px; color: var(--text-3); line-height: 1.6;
}
.ticket-detail-desc {
  background: var(--bg-2); border: 1px solid var(--line);
  border-radius: var(--r-3); padding: 12px 14px;
  font-size: 13px; color: var(--text-1); line-height: 1.6;
  white-space: pre-wrap; margin-bottom: 16px;
}
.ticket-replies-hd {
  font-size: 10px; font-weight: 700; letter-spacing: 0.12em;
  color: var(--text-3); text-transform: uppercase; margin-bottom: 10px;
}
.ticket-reply-bubble {
  padding: 10px 14px; border-radius: var(--r-3);
  font-size: 13px; line-height: 1.55; margin-bottom: 8px;
  max-width: 88%; white-space: pre-wrap;
}
.ticket-reply-bubble.admin {
  background: rgba(236,106,28,0.14); border: 1px solid rgba(236,106,28,0.3);
  color: var(--text-0); margin-left: auto;
}
.ticket-reply-bubble.user {
  background: var(--bg-2); border: 1px solid var(--line);
  color: var(--text-1);
}
.ticket-reply-time {
  font-size: 10px; color: var(--text-3); margin-top: 3px; text-align: right;
}
.ticket-reply-time.left { text-align: left; }
.ticket-reply-actions { display: flex; flex-direction: column; gap: 8px; }
.ticket-status-toggle-btn {
  width: 100%; padding: 11px; border-radius: var(--r-3);
  background: rgba(46,207,127,0.1); border: 1px solid rgba(46,207,127,0.35);
  color: var(--success-2); font-family: var(--f-display);
  font-size: 12px; font-weight: 700; letter-spacing: 0.06em;
  cursor: pointer; transition: all var(--d-fast);
}
.ticket-status-toggle-btn.is-open {
  background: rgba(200,32,26,0.1); border-color: rgba(200,32,26,0.35);
  color: var(--blood-2);
}
.ticket-status-toggle-btn:active { opacity: 0.75; }

/* Misc */
.swipe-paywall-card { position: relative; }