/* HunterKitty Mini App — терминал 2000-х: чёрный фон, зелёный текст,
   фиолетово-фуксиевые пиксельные заголовки. Светлая тема (2026-09-29) — тот же стиль
   на «бумаге» Windows XP: переключатель вверху справа на вкладке «Поиск». */
:root {
  color-scheme: dark;
  --bg: #030604;
  --panel: #06100a;
  --line: #143a21;
  --green: #41ff7e;
  --green-dim: #27a653;
  --green-faint: #0d3319;
  --green-soft: #78f29f;
  --muted: #1c7d3d;  /* подсказки и строка терминала — тише, не шумят (2026-10-01) */  /* текст описания — мягче, чтобы подсветка читалась */
  --bright: #eafff0;
  --fuchsia: #ff3fd8;
  --violet: #9b5cff;
  --ink-on-green: #021006;
  --scan: rgba(0, 0, 0, .2);            /* полоски развёртки */
  --glow-title: rgba(255, 63, 216, .35);
  --glow-button: rgba(65, 255, 126, .35);
  --logo-filter: none;
  --pixel: "Press Start 2P", "Courier New", monospace;
  --mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
}
/* ---------- светлая тема: «бумага» XP, тёмно-зелёный текст, те же фиолетовые заголовки ---------- */
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f3efe0;
  --panel: #e8e2cc;
  --line: #bdb596;
  --green: #0b6b2e;
  --green-dim: #5a7a62;
  --green-faint: #d6ead8;
  --green-soft: #1d4d2c;
  --muted: #8a9a8c;
  --bright: #02230f;
  --fuchsia: #b8138f;
  --violet: #5b27c9;
  --ink-on-green: #f6fff7;
  --scan: rgba(60, 50, 20, .045);
  --glow-title: rgba(184, 19, 143, .18);
  --glow-button: rgba(11, 107, 46, .25);
  --logo-filter: none;  /* у лого чёрная обводка — на светлом и так виден (2026-09-30) */
}
* { box-sizing: border-box; }
html, body { min-height: 100%; }
/* свайп «назад» уводит страницу за правый край — без clip документ на миг становился шире
   экрана и в конце дёргался (2026-10-07). clip, а не hidden: hidden ломает sticky у кнопки */
body { overflow-x: clip; touch-action: pan-y; }  /* вбок листает только наш свайп «назад» — браузер не мешает */
body {
  margin: 0;
  background: var(--bg);
  color: var(--green);
  font: 16px/1.55 var(--mono);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: none;
}
body::after {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0 2px, var(--scan) 2px 3px);
  z-index: 50;
}
.app {
  max-width: 480px;
  margin: 0 auto;
  padding-inline: 16px;
  padding-block: calc(14px + var(--tg-content-safe-area-inset-top, 0px)) calc(100px + env(safe-area-inset-bottom, 0px));
  display: flex; flex-direction: column; gap: 16px;
}

/* ---------- шапка ---------- */
.top { display: flex; align-items: center; gap: 12px; }
.logo { height: 72px; width: auto; image-rendering: pixelated; flex: none; position: relative; z-index: 51; /* над полосками развёртки (body::after) */ filter: var(--logo-filter); }
/* статус и строка терминала — столбиком, строка терминала по низу логотипа (2026-10-01) */
.top { align-items: stretch; }
.brand { display: flex; flex-direction: column; gap: 6px; min-width: 0; justify-content: flex-start; }
.brand .prompt { margin-top: auto; }
.grad {
  background: linear-gradient(90deg, var(--violet), var(--fuchsia));
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 6px var(--glow-title));
}
.brand h1 { margin: 0; font: 16px/1.2 var(--pixel); letter-spacing: .04em; }
.status { color: var(--green-dim); font-size: 14px; display: flex; gap: 10px; flex-wrap: wrap; }
.dot { color: var(--green); animation: pulse 1.6s steps(2) infinite; }
/* строка терминала — не кнопка: мелко и приглушённо, чуть темнее подсказок (2026-10-01) */
.prompt { color: var(--muted); font-size: 13px; overflow-wrap: anywhere; opacity: .8; }
.prompt b { color: var(--muted); font-weight: 400; }
.cursor { display: inline-block; width: .6em; height: 1.05em; background: var(--muted); vertical-align: -2px; margin-left: 2px; animation: blink 1s steps(1) infinite; }

/* ---------- секции ---------- */
main { display: flex; flex-direction: column; gap: 18px; }
h2 { margin: 0 0 10px; font: 13px/1.5 var(--pixel); letter-spacing: .06em; text-wrap: balance; }
.block { border-top: 1px dashed var(--line); padding-top: 14px; margin-top: 10px; }
.hint { color: var(--muted); font-size: 13px; margin: 8px 0 0; }
.warn { color: var(--fuchsia); font-size: 14px; margin: 8px 0 0; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  font: 15px/1.2 var(--mono);
  color: var(--green);
  background: transparent;
  border: 1px solid var(--green-dim);
  padding: 8px 10px;
  cursor: pointer;
  text-align: left;
}
.chip[aria-pressed="true"] { background: var(--green-faint); border-color: var(--green); }
.chip[aria-pressed="true"]::before { content: "[x] "; color: var(--fuchsia); }
.chip[aria-pressed="false"]::before { content: "[ ] "; color: var(--green-dim); }
.chip.tag { border-color: var(--green); background: var(--green-faint); }
.chip .x { color: var(--fuchsia); margin-left: 6px; }
.more { all: unset; cursor: pointer; color: var(--green-dim); font-size: 14px; padding: 8px 0; }
.add { display: flex; gap: 8px; margin-top: 10px; }
.add input {
  flex: 1; min-width: 0;
  background: var(--panel); color: var(--green);
  border: 1px solid var(--line); border-radius: 0; padding: 9px 10px;
  font: 17px var(--mono); /* 16px: iOS не зумит поле при вводе */
}
.add input::placeholder { color: var(--green-dim); font-size: 13px; }
.ghost {
  font: 15px var(--mono); color: var(--fuchsia);
  background: transparent; border: 1px solid var(--fuchsia); padding: 8px 12px; cursor: pointer;
}
.ghost:disabled { opacity: .5; }

.hunt {
  width: 100%;
  font: 15px/1 var(--pixel);
  letter-spacing: .06em;
  color: var(--ink-on-green);
  background: var(--green);
  border: 0;
  padding: 18px 12px;
  cursor: pointer;
  box-shadow: 0 0 0 1px var(--green), 0 0 22px var(--glow-button);
}
.hunt:active { transform: translateY(1px); }
.hunt:disabled { opacity: .6; }
.meta { color: var(--green-dim); font-size: 14px; text-align: center; margin: 10px 0 0; }

/* ---------- лог «сканирования» ---------- */
.log { background: var(--panel); border: 1px solid var(--line); padding: 12px; font-size: 15px; min-height: 140px; }
.log p { margin: 0 0 4px; overflow-wrap: anywhere; }
.log .ok { color: var(--green); }
.log .dim { color: var(--green-dim); }
.log .hi { color: var(--fuchsia); }
.letter-progress { white-space: pre-wrap; margin: 0; font: inherit; min-height: 0; overflow-wrap: anywhere; }

/* ---------- лента ---------- */
.feedhead { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.feedhead h2 { margin: 0; }
.count { color: var(--green-dim); font-size: 14px; font-variant-numeric: tabular-nums; }
.day { font: 12px/1 var(--pixel); color: var(--violet); margin: 16px 0 4px; letter-spacing: .08em; text-transform: uppercase; }
.list { display: flex; flex-direction: column; }
.job {
  display: grid; grid-template-columns: 1fr auto; gap: 10px;
  align-items: start;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
.open { all: unset; cursor: pointer; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.open .t { font-weight: 700; color: var(--green); overflow-wrap: anywhere; }
.open .c { color: var(--green-dim); font-size: 14px; overflow-wrap: anywhere; }
.open .age { color: var(--green-dim); font-size: 14px; }
.open .age.fresh { color: var(--fuchsia); }
.closed { color: var(--fuchsia); display: block; margin: 2px 0; }
.src { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 2px; }
.src span { font-size: 13px; color: var(--green-dim); border: 1px solid var(--line); padding: 1px 5px; }
.save {
  font: 15px var(--mono); color: var(--green-dim);
  background: transparent; border: 1px solid var(--line);
  width: 46px; height: 38px; cursor: pointer;
}
.save[aria-pressed="true"] { color: var(--fuchsia); border-color: var(--fuchsia); }
.loadmore { margin-top: 14px; }
.empty { color: var(--green-dim); border: 1px dashed var(--line); padding: 18px; text-align: center; }
.quota { border: 1px solid var(--violet); padding: 10px 12px; font-size: 14px; color: var(--green-dim); }
.quota b { color: var(--fuchsia); font-weight: 400; }

/* ---------- карточка ---------- */
.detail h2 { font-size: 14px; line-height: 1.6; margin-top: 4px; }
.kv { display: grid; grid-template-columns: 96px 1fr; gap: 4px 10px; font-size: 15px; margin: 12px 0; }
.kv dt { color: var(--green-dim); }
.kv dd { margin: 0; overflow-wrap: anywhere; }
.desc { white-space: pre-wrap; overflow-wrap: anywhere; color: var(--green); max-width: 65ch; margin: 0; }
.row { display: flex; gap: 8px; flex-wrap: wrap; margin: 14px 0; }
.row .hunt { flex: 2; font-size: 13px; padding: 14px 10px; }
.row .ghost { flex: 1; }
.contacts { display: flex; flex-wrap: wrap; gap: 8px; }
.link { all: unset; cursor: pointer; color: var(--fuchsia); text-decoration: underline; overflow-wrap: anywhere; }

/* ---------- система ---------- */
.radio { display: flex; flex-direction: column; }
.radio button {
  all: unset; cursor: pointer; padding: 10px 0; border-bottom: 1px solid var(--line);
  display: flex; justify-content: space-between; gap: 12px;
}
.radio button[disabled] { opacity: .45; cursor: default; }
.radio button > span:first-child { flex: 1; }
.radio button span:last-child { color: var(--green-dim); font-size: 14px; }
.radio button::before { content: "( ) "; color: var(--green-dim); }
.radio button[aria-checked="true"]::before { content: "(•) "; color: var(--fuchsia); }
.pro { border: 1px solid var(--violet); padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.pro p { margin: 0; }

/* ---------- вкладки ---------- */
nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  background: var(--bg);
  border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
nav .in { max-width: 480px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); }
nav button {
  all: unset; cursor: pointer; text-align: center;
  padding: 12px 4px 14px;
  font: 13px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase;
  color: var(--green-dim);
  display: flex; flex-direction: column; gap: 6px; align-items: center;
}
nav button .k { font: 10px/1 var(--pixel); color: var(--green-faint); }
nav button[aria-current="page"] { color: var(--green); }
nav button[aria-current="page"] .k { color: var(--fuchsia); }

.toast {
  position: fixed; left: 50%; bottom: calc(80px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%);
  background: var(--panel); border: 1px solid var(--fuchsia); color: var(--fuchsia);
  padding: 8px 14px; font-size: 15px; z-index: 45; max-width: calc(100% - 32px);
}
.fatal { border: 1px solid var(--fuchsia); padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.fatal p { margin: 0; }

button:focus-visible, input:focus-visible, .open:focus-visible, .link:focus-visible {
  outline: 2px solid var(--fuchsia); outline-offset: 2px;
}
@keyframes blink { 50% { opacity: 0; } }
@keyframes pulse { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) {
  .cursor, .dot { animation: none; }
}

/* ---------- подсветка в карточке (app.js, highlight) ---------- */
.desc { color: var(--green-soft); }
.desc .dh { display: inline-block; color: var(--violet); font-weight: 700; margin-top: 8px; }
.desc .bul { color: var(--fuchsia); }
.desc mark { background: none; color: inherit; }
.desc mark.hl-mine { background: var(--green); color: var(--ink-on-green); padding: 0 2px; }
.desc mark.hl-skill { color: var(--bright); border-bottom: 1px dotted var(--green-dim); }
.stack { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 0; }
.stack span { font-size: 14px; color: var(--green-soft); border: 1px solid var(--line); padding: 2px 6px; }
.stack span.on { color: var(--ink-on-green); background: var(--green); border-color: var(--green); }

/* ---------- оплата и обратная связь ---------- */
.cmp { margin: 0; font: 14px/1.5 var(--mono); color: var(--green-dim); white-space: pre-wrap; }
.paym { display: flex; flex-direction: column; gap: 8px; }
.paym .hunt { font: 700 15px/1.4 var(--mono); padding: 14px 10px; }
.fb { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.fb textarea {
  background: var(--panel); color: var(--green);
  border: 1px solid var(--line); border-radius: 0; padding: 9px 10px;
  font: 17px/1.4 var(--mono); resize: vertical; min-height: 96px;
}
.fb textarea::placeholder { color: var(--green-dim); }
.fb .ghost { align-self: flex-start; }

/* ---------- 🇷🇸 Сербия, источники, статистика ---------- */
.chips.col { flex-direction: column; align-items: stretch; }
.chip.wide { width: 100%; }
.label { color: var(--green-dim); font-size: 14px; margin: 12px 0 8px; }
.more.center { display: block; margin: 8px auto 0; }
.src span.ru { color: var(--fuchsia); border-color: var(--fuchsia); }
.switches button[aria-checked="true"] span:last-child { color: var(--green); }
.stats { color: var(--green); }

.backbtn { align-self: flex-start; border: 1px solid var(--green-dim); color: var(--green); padding: 6px 10px; margin: 8px 0 10px; }  /* не липнет к лого (2026-10-01) */

/* ---------- переключатель темы (вкладка «Поиск», вверху справа) ---------- */
.topbar { display: flex; justify-content: flex-end; align-items: center; margin-bottom: -6px; }
.topbar .backbtn { margin-right: auto; }  /* «назад» слева, тумблер справа */
/* квадратный тумблер 90-х: вдавленная «прорезь» и выпуклый рычажок с рифлёнкой */
.themesw { display: inline-flex; align-items: center; gap: 7px; background: transparent; border: 0; padding: 6px 0; cursor: pointer;
  font: 8px/1 var(--pixel); color: var(--green-dim); }
.themesw .lbl.on { color: var(--green); text-shadow: 0 0 6px var(--glow-button); }
.themesw .track { position: relative; width: 44px; height: 22px; background: var(--panel);
  border: 2px solid var(--green-dim); box-shadow: inset 2px 2px 0 rgba(0,0,0,.45), inset -2px -2px 0 rgba(255,255,255,.08); }
.themesw .knob { position: absolute; top: 1px; left: 1px; width: 16px; height: 16px; background: var(--green);
  box-shadow: inset -2px -2px 0 rgba(0,0,0,.35), inset 2px 2px 0 rgba(255,255,255,.45);
  background-image: repeating-linear-gradient(90deg, transparent 0 4px, rgba(0,0,0,.35) 4px 5px);
  background-size: 11px 8px; background-position: 3px 4px; background-repeat: no-repeat;
  transition: left .12s steps(3); }
.themesw[aria-checked="true"] .knob { left: 23px; }
.themesw:active .knob { box-shadow: inset 2px 2px 0 rgba(0,0,0,.35); }
:root[data-theme="light"] nav button .k { color: var(--line); }

/* ---------- письмо и «о себе» ---------- */
.ghost.wide { width: 100%; padding: 12px; }
textarea.letter {
  width: 100%; background: var(--panel); color: var(--green); border: 1px solid var(--line); border-radius: 0;
  padding: 10px; font: 15px/1.5 var(--mono); resize: vertical;
}
.filebtn { display: inline-block; text-align: center; color: var(--green); border-color: var(--line); }
.src span.match { color: var(--green); border-color: var(--line); }

/* «настроить ▸» у источников — в рамке (2026-10-01), размер и цвет как были */
.more.framed { border: 1px solid var(--line); padding: 4px 8px; }

/* ---------- сворачиваемые блоки: нажал на розовый заголовок — блок свернулся (2026-10-01) ---------- */
section > h2[data-fold] { cursor: pointer; user-select: none; -webkit-user-select: none; }
section > h2[data-fold] .arr {
  display: inline-block; transition: transform .15s;
  transform: rotate(90deg);  /* открыт — стрелка вниз */
  color: var(--violet); -webkit-text-fill-color: var(--violet);  /* у заголовка текст — градиент */
}
section.folded > h2[data-fold] .arr { transform: none; }  /* свёрнут — вправо */
section.folded > :not(h2) { display: none; }
section.folded > h2 { margin-bottom: 0; }
@media (prefers-reduced-motion: reduce) { section > h2[data-fold] .arr { transition: none; } }

/* ---------- «ДОСТУП · PRO» в «Системе» — последним, отступ побольше и светится (2026-10-01) ---------- */
.pro-block { margin-top: 26px; border-top-style: solid; border-top-color: var(--fuchsia); }
.pro-block > h2 { filter: drop-shadow(0 0 10px var(--glow-title)) drop-shadow(0 0 18px var(--glow-title)); }
.pro-block > h2 .arr { color: var(--fuchsia); -webkit-text-fill-color: var(--fuchsia); }

/* 🤫 группы интровертных профессий — строкой во всю ширину */
.more.introgrp { display: block; box-sizing: border-box; width: 100%; text-align: left; margin: 8px 0 6px; padding: 8px 10px; border: 1px solid var(--line); color: var(--green); }
section.folded > .introgrp { display: none; }  /* свёрнутый раздел прячет и блоки (иначе .more.introgrp перебивал) */
/* 🤫 тумблер «с опытом / без опыта» — справа от заголовка раздела, только когда раскрыт */
section.hasexp { position: relative; }
section.hasexp:not(.folded) > h2 { padding-right: 180px; }
.themesw.exptoggle { position: absolute; top: 15.5px; right: 0; gap: 5px; padding: 0; }
section.folded > .exptoggle { display: none; }
/* «ПРОФЕССИИ» — ровно под «ИНТРОВЕРТНЫЕ»: стрелка и текст — две колонки */
section.intro > h2[data-fold] { display: flex; align-items: baseline; gap: .55em; }  /* baseline — стрелка на уровне текста, как у остальных */
section.intro > h2[data-fold] .arr { flex: none; }
section.hasexp > h2[data-fold] .tx, section.hasexp > h2[data-fold] .arr { padding: 4px 0; cursor: pointer; }
section.hasexp > h2[data-fold] { cursor: default; }
/* тумблер темы — в шапке, в конце строки «online · free · user», справа */
section.hasexp:not(.block) > .exptoggle { top: 5px; }  /* «Профессия» — первый блок, без отступа сверху */
/* Маленькие тумблеры (тема в шапке и «с опытом / без опыта») — одного размера, подписи одной
   ширины: тумблер темы стоит ровно над тумблером опыта (владелец, 2026-10-02) */
.themesw.mini { gap: 5px; padding: 0; }
.themesw.mini .lbl { font-size: 7px; line-height: 1.15; white-space: nowrap; letter-spacing: 0; width: 68px; }
.themesw.mini .lbl:first-child { text-align: right; }
.themesw.mini .lbl:last-child { text-align: left; }
.themesw.mini .track { width: 34px; height: 16px; border-width: 2px; }
.themesw.mini .knob { width: 10px; height: 10px; background-size: 7px 5px; background-position: 2px 3px; }
.themesw.mini[aria-checked="true"] .knob { left: 19px; }
.top { position: relative; }
.status .themesw.mini { position: absolute; right: 0; transform: translateY(2.5px); }  /* центр рычажка = центр строки «online» */  /* по правому краю, как тумблер опыта под ним */
/* больше воздуха между шапкой и первым блоком «Профессия» */
section.hasexp:not(.block) { margin-top: 34px; }
/* «Выбрать все» интровертные — фиолетовый тумблер внизу раздела */
.allrow { display: flex; justify-content: flex-end; margin: 12px 0 4px; }
.themesw.violet { color: var(--violet); }
.themesw.violet .lbl.on { color: var(--violet); text-shadow: 0 0 6px var(--violet); }
.themesw.violet .track { border-color: var(--violet); }
.themesw.violet .knob { background-color: var(--violet); }
.themesw.violet .lbl { width: auto; }  /* «ВЫБРАТЬ ВСЕ» длиннее — без фиксированной ширины, не вылезает за край */
/* «НАЙТИ РАБОТУ» закреплена над вкладками на экране «Поиск» */
.huntbar { position: sticky; bottom: var(--navh, 64px); z-index: 30; margin: 0 -2px; padding: 10px 2px 12px;
  background: linear-gradient(to bottom, transparent, var(--bg) 22%); }

/* окно «Как пользоваться» (2026-10-04) */
.howto { position: fixed; inset: 0; z-index: 60; background: rgba(0, 0, 0, .7); display: flex; align-items: center; justify-content: center; padding: 16px; }
.howto-card { background: var(--bg); border: 1px solid var(--fuchsia); max-width: 520px; width: 100%; max-height: 100%; overflow-y: auto; padding: 18px 16px; color: var(--green-soft); box-shadow: 0 0 24px var(--glow-title); }
.howto-card h2 { margin: 0 0 10px; }
.howto-card h3 { color: var(--bright); font-size: 1em; margin: 14px 0 6px; }
.howto-card p { margin: 6px 0; }
.howto-card ul { margin: 0; padding-left: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.howto-card b { color: var(--bright); }
.howto-card .hunt { margin-top: 14px; width: 100%; }

/* 💡 подсказка про источники (2026-10-05): висит, пока не закроют, над вкладками */
.tipbox {
  position: fixed; left: 12px; right: 12px; bottom: calc(76px + env(safe-area-inset-bottom, 0px)); z-index: 60;
  background: var(--panel); border: 1px solid var(--fuchsia); padding: 12px; font-size: 15px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .35);
}
.tipbox p { margin: 0 0 10px; overflow-wrap: anywhere; }
.tipbox .row { display: flex; gap: 8px; flex-wrap: wrap; }

/* Редизайн старта (2026-10-07): строка root — не в шапке, а подписью внизу «Настроек» */
.top .prompt { display: none; }
.rootfoot { margin: 18px 0 4px; }
/* Мастер первого входа: без статуса, вкладок; крупные шаги и навигация */
body.onb nav, body.onb .themesw:not(.exptoggle) { display: none !important; }
body.onb main { padding-bottom: 24px; }
.onb-step { color: var(--muted); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; margin: 6px 0 10px; }
.onb-block h2 { margin-bottom: 12px; }
.onb-nav { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 18px 0 8px; }
.onb-nav .hunt { width: auto; padding: 10px 18px; }
.onb-nav .hunt[disabled] { opacity: .45; cursor: not-allowed; }
/* «↓ нажми [+]» над первой вакансией — справа, над кнопкой сохранения */
.savehint { text-align: right; color: var(--fuchsia); font-size: 13px; margin: 2px 4px -2px 0; }
.onb-step { margin-bottom: 2px; }
section.onb-block { margin-top: 8px !important; padding-top: 0; }
.onb-block > h2 { margin-top: 0; }
section.onb-block.hasexp > .exptoggle { top: 2px; }
/* стрелки мастера — без слов «далее/назад» (владелец, 2026-10-07) */
.onb-nav .onb-arrow { min-width: 64px; font-size: 22px; line-height: 1; padding: 8px 18px; }
/* шаг и стрелки — одной строкой сверху (2026-10-07) */
.onb-top { display: grid; grid-template-columns: 64px 1fr 64px; align-items: center; margin: 4px 0 6px; }
.onb-top .onb-step { margin: 0; text-align: center; }
.onb-top > span:last-child { justify-self: end; }
.onb-top .onb-arrow { min-width: 52px; font-size: 22px; line-height: 1; padding: 6px 12px; }
.onb-go { width: 100%; margin-top: 18px; }
.onb-go[disabled] { opacity: .45; cursor: not-allowed; }

/* ================= «Ночной радар» (v2, 2026-10-08) — пока только своим (state.design_v2) =================
   Макет: D:\jobradar_upwork\design\final.png. Только тёмная тема; светлая — как была. */
/* цвета v2: тёмная «Ночной радар» и светлая такая же на «бумаге» (владелец, 2026-10-09) */
body.v2 {
  --v2-bg: #000;
  --v2-panel: #050a05;
  --v2-line: #2f5f2c;
  --v2-green: #41ff7e;  /* зелёный старого дизайна */
  --v2-dim: #27a653;
  --v2-faint: #1e3d1c;
  --v2-bright: #e6ffe0;
  --v2-pink: #ff3fd8;
  --v2-accent: #41ff7e;
  --v2-title: #ff3fd8; --v2-violet: #9b5cff; --v2-glow: rgba(255, 63, 216, .35);  /* HUNTERKITTY и заголовки — фуксия старого дизайна (2026-10-09) */
  --v2-fresh: #d9ffd2;
  --v2-label: #27a653;
  --v2-frame: #3d7a38;
  --v2-code: #0a250d;
  --v2-hz: #2c6a2a;
  --v2-pressed: #0d3319;  /* нажатая кнопка — зелёная заливка, как в старом дизайне */
  --v2-navoff: #3f7a3a;
  --v2-muted: #4f8a4a;
  --v2-ink: #021006;
  --v2-shadow: #000;
}
html[data-theme="light"] body.v2 {
  --v2-bg: #f3efe0;
  --v2-panel: #e8e2cc;
  --v2-line: #a9bd98;
  --v2-green: #1d7a2c;
  --v2-dim: #5a7a62;
  --v2-faint: #d3e2c4;
  --v2-bright: #0d2a12;
  --v2-pink: #b8138f;
  --v2-accent: #2c8a38;
  --v2-title: #b8138f; --v2-violet: #5b27c9; --v2-glow: rgba(184, 19, 143, .18);  /* светлая: HUNTERKITTY и заголовки разделов — фуксия (2026-10-09) */
  --v2-fresh: #0b4f1d;
  --v2-label: #4f7a52;
  --v2-frame: #8fb08a;
  --v2-code: #dde5cc;
  --v2-hz: #a3c399;
  --v2-pressed: #dcebcf;
  --v2-navoff: #7f927f;
  --v2-muted: #7f8f80;
  --v2-ink: #f6fff7;
  --v2-shadow: #f3efe0;
}
body.v2 {
  --bg: var(--v2-bg);
  --panel: var(--v2-panel);
  --line: var(--v2-line);
  --green: var(--v2-green);
  --green-dim: var(--v2-dim);
  --green-faint: var(--v2-faint);
  --green-soft: var(--v2-green);
  --bright: var(--v2-bright);
  --fuchsia: var(--v2-pink);
  --scan: transparent;  /* на макете без полосок развёртки */
  background: var(--v2-bg);
}
/* вместо обычной шапки — небо, одно на все вкладки (#v2head) */
body.v2 .top { display: none; }
body.v2 #v2head { display: flex; flex-direction: column; gap: 10px; margin: -8px 0 -8px; }  /* выше и ближе к экрану (2026-10-09) */
body.v2 #v2head[hidden] { display: none; }
/* строка online · PRO · user и тумблер темы — наверху неба, над ней справа маленькое лого (2026-10-09) */
body.v2 .v2sky .v2status {
  position: absolute; left: 18px; right: 18px; top: 6px; z-index: 3; font-size: 13px; min-height: 18px;
  text-shadow: 0 0 4px var(--v2-shadow);
}
body.onb:not(.v2) #v2head { display: none !important; }  /* v2: шапка с Унчи и на шагах первого входа (2026-10-09) */
/* шапка компактная (2026-10-09): код-фон, Унчи маленький справа над тумблером, заголовок и строка под ним */
body.v2 .v2sky { position: relative; height: 100px; margin: 0 -16px; overflow: hidden; }
body.v2 .v2sky .code {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: 0; padding: 8px 14px; z-index: 0; overflow: hidden;  /* без inset — старые WebView */
  font: 700 11px/1.45 var(--mono); color: var(--v2-code); white-space: pre; pointer-events: none;
}
body.v2 .v2sky .corner {
  position: absolute; z-index: 2; font-size: 11px; color: var(--v2-label);
  border: 1px solid var(--v2-frame); padding: 2px 7px; background: var(--v2-bg);
}
body.v2 .v2sky .corner.r { right: 80px; top: 30px; }
/* Унчи — оригинал без изменений; клетка рисунка 16 px → ровно 1×1 (1088/16 = 68) */
body.v2 .v2sky .unchi {
  position: absolute; left: 12px; top: 3px; z-index: 2;  /* чуть выше и левее (2026-10-09) */
  height: 88px; image-rendering: auto;  /* 1,5× клетки: плавное сжатие, без «рваных» пикселей */ filter: saturate(.62) brightness(.92);
}
body.v2 .v2sky .brand2 { position: absolute; left: 0; right: 0; top: 6px; z-index: 2; text-align: center; }
body.v2 .v2sky .scan {
  display: inline-block; font: 400 26px/1.1 var(--pixel); letter-spacing: 0;
  /* шрифт и цвет заголовка старой версии (владелец, 2026-10-09), но крупно.
     Без JS-замеров: пиксельный знак = 1 em → 11 букв = 11 em; место между Унчи (18 + 63 px) и тем же отступом справа */
  font-size: min(30px, calc((100vw - 182px) / 11));
  background: linear-gradient(90deg, var(--v2-violet), var(--fuchsia));
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 6px var(--v2-glow));
}
body.v2 .v2sky .tag { white-space: nowrap; line-height: 1.4; margin-top: -2px; }  /* ближе к HUNTERKITTY (2026-10-09) */
body.v2 .v2sky .tag span {
  color: var(--v2-green); text-shadow: 0 0 4px var(--v2-shadow);
  /* 45 знаков × 0,57 em (с -0,03 em) = 25,65 em; ширина = 0,95 ширины заголовка (11 em заголовка) */
  font-size: calc(min(30px, calc((100vw - 182px) / 11)) * 11 * .95 / 25.65);
}
body.v2 .v2sky .hz {
  position: absolute; left: 0; right: 0; bottom: 0; height: 22px; z-index: 1;
  background: repeating-linear-gradient(180deg, var(--v2-hz) 0 1px, transparent 1px 7px);
}
body.v2 .v2sky .hz::before {
  content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px;
  background: var(--v2-accent); box-shadow: 0 0 8px var(--v2-accent);
}
/* вакансии — в рамках, время в линии рамки */
body.v2 .vjob { border: 1px solid var(--v2-line); margin: 0 0 12px; padding: 4px 12px 10px; min-width: 0; }
body.v2 .vjob legend { padding: 0 6px; color: var(--v2-label); font-size: 12px; }
body.v2 .vjob legend.fresh { color: var(--v2-fresh); }
body.v2 .vjob.hot { border-color: var(--v2-green); }
body.v2 .vjob.hot legend { color: var(--v2-fresh); }
body.v2 .vjob .job { border-bottom: 0; padding: 0; }
body.v2 .vjob .t { color: var(--v2-bright); font-weight: 500; }
body.v2 .vjob .c { color: var(--v2-dim); }
body.v2 .vjob .bar { font-size: 12px; color: var(--v2-accent); letter-spacing: 1px; }
body.v2 .vjob .bar .pc { color: var(--v2-pink); }
body.v2 .day { color: var(--v2-label); font-family: var(--mono); }
/* нижнее меню — как на макете: без F1–F4, активная вкладка светлая с розовым ▸ */
body.v2 nav { background: var(--v2-bg); border-top-color: var(--v2-faint); }
body.v2 nav button .k { display: none; }
body.v2 nav button { color: var(--v2-navoff); }
body.v2 nav button[aria-current="page"] { color: var(--v2-bright); }
body.v2 nav button[aria-current="page"] .l::before { content: "▸ "; color: var(--v2-pink); }

/* ---------- v2: остальные вкладки и карточка — те же цвета и шрифт, что на ленте ---------- */
body.v2 { --violet: var(--v2-accent); --muted: var(--v2-muted); --ink-on-green: var(--v2-ink); --glow-title: transparent; --glow-button: transparent; }
body.v2 .grad {  /* градиент старой версии: фиолетовый → фуксия (владелец, 2026-10-09) */
  background: linear-gradient(90deg, var(--v2-violet), var(--fuchsia));
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 6px var(--v2-glow));
}
body.v2 h2 { font: 11px/1.6 var(--pixel); letter-spacing: .06em; }  /* шрифт как у всех, мельче */
body.v2 section > h2[data-fold] .arr { color: var(--v2-accent); -webkit-text-fill-color: var(--v2-accent); }
body.v2 .block { border-top: 1px solid var(--v2-faint); }
body.v2 .pro-block { border-top-color: var(--v2-green); }
body.v2 .pro-block > h2 { filter: none; }
body.v2 .pro-block > h2 .arr { color: var(--v2-pink); -webkit-text-fill-color: var(--v2-pink); }
/* кнопки: главная — светло-зелёная плашка, как «ОТКЛИКНУТЬСЯ» на макете; второстепенные — рамкой */
body.v2 .hunt {
  font: 700 15px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase;
  background: var(--v2-green); color: var(--v2-ink); box-shadow: none;
}
body.v2 .ghost { color: var(--v2-pink); border-color: var(--v2-pink); }
body.v2 .chip { border-color: var(--v2-line); color: var(--v2-green); }
body.v2 .chip[aria-pressed="true"] { background: var(--v2-pressed); border-color: var(--v2-green); color: var(--v2-bright); }
body.v2 .chip.tag { background: var(--v2-pressed); border-color: var(--v2-green); }
body.v2 .quota,
body.v2 .pro { border-color: var(--v2-line); }
body.v2 .log { background: var(--v2-bg); border-color: var(--v2-line); }
body.v2 .empty { border-color: var(--v2-line); }
body.v2 .add input,
body.v2 .fb textarea,
body.v2 textarea.letter { background: var(--v2-bg); border-color: var(--v2-line); color: var(--v2-bright); }
body.v2 .huntbar { background: linear-gradient(to bottom, transparent, var(--v2-bg) 22%); }
body.v2 .themesw.violet { color: var(--v2-accent); }
body.v2 .themesw.violet .lbl.on { color: var(--v2-green); text-shadow: none; }
body.v2 .themesw.violet .track { border-color: var(--v2-accent); }
body.v2 .themesw.violet .knob { background-color: var(--v2-green); }
body.v2 .themesw .lbl.on { text-shadow: none; }
/* карточка вакансии — данные в рамке, как на макете */
body.v2 .detail h2 { font: 12px/1.6 var(--pixel); letter-spacing: 0; text-transform: none; color: var(--v2-bright); -webkit-text-fill-color: var(--v2-bright); }
body.v2 .kv { border: 1px solid var(--v2-green); padding: 10px 12px; }
body.v2 .kv dd { color: var(--v2-bright); }
body.v2 .desc .dh { color: var(--v2-pink); }  /* как «составить письмо» — заголовки в описании выделяются */
body.v2 .stack span { border-color: var(--v2-line); }
body.v2 .stack span.on { background: var(--v2-green); border-color: var(--v2-green); color: var(--v2-ink); }
body.v2 .howto-card,
body.v2 .tipbox { border-color: var(--v2-green); box-shadow: none; }
/* v2: тумблер темы — у правого края на уровне HUNTERKITTY; столбиком, чтобы не налезать на заголовок (2026-10-09) */
body.v2 .v2sky .v2status .themesw.mini {
  right: 4px; top: 1px; transform: none; flex-direction: column; gap: 3px;  /* верх DARK = верх HUNTERKITTY (2026-10-09) */
}
body.v2 .v2sky .v2status .themesw.mini .lbl { width: auto; text-align: center; }
body.v2 .v2cnt { font-size: 11px; color: var(--v2-label); border: 1px solid var(--v2-frame); padding: 2px 7px; margin: 8px 0 10px auto; }
/* v2: «СЕГОДНЯ» и вакансии ближе к «← назад» */
body.v2 .topbar .backbtn, body.v2 .v2cnt { margin-bottom: 4px; }
body.v2 .day { margin-top: 4px; }
/* v2: нижнее меню выше (владелец, 2026-10-09: «какие-то низкие») */
body.v2 nav button { padding: 20px 4px 24px; }
/* подсказки: обе кнопки рядом, одинаковые, в рамке — «понятно» не на отшибе и видно, что это кнопка (2026-10-09) */
.tipbox .row { flex-wrap: nowrap; }
.tipbox .row > button { flex: 1; text-align: center; box-sizing: border-box; }
.tipbox .row > .more { border: 1px solid var(--green-dim); color: var(--green); padding: 8px 12px; font-size: 15px; }
/* v2: фразы в шапке (кроме HUNTERKITTY) чуть уже */
body.v2 .v2sky .tag span, body.v2 .v2sky .v2status { letter-spacing: -.03em; }
body.v2 nav button .l { white-space: nowrap; letter-spacing: .02em; }
/* v2 «Профессия» на «Фильтрах» — чуть выше */
body.v2 .topbar { margin-bottom: -14px; }
/* v2: шаги первого входа — полоска прогресса как у вакансий */
body.v2 .onb-step .bar { color: var(--v2-accent); letter-spacing: 1px; margin-right: 6px; }
body.v2 .onb-step { color: var(--v2-label); }
/* v2: названия вакансий в ленте и сейфе — широкий моноширинный Martian Mono (владелец, 2026-10-09) */
body.v2 .job .open .t { font-family: "Martian Mono", var(--mono); font-weight: 500; font-size: 14px; line-height: 1.45; letter-spacing: 0; }
/* «ИСТОЧНИКИ»: список скрыт — стрелка вправо (раскрытие по заголовку, 2026-10-09) */

/* ---------- первый вход одним экраном: «Должность» + «Где» + НАЙТИ (владелец, 2026-10-13, макет B) ---------- */
.onb-one > h2 { margin: 6px 0 10px; font-size: 18px; line-height: 1.5; }
.onb-sub { margin: 0 0 14px; font-weight: 700; line-height: 1.45; color: var(--bright); }
.onb-sub em { font-style: normal; color: var(--fuchsia); }
.onb-lbl { display: block; margin: 14px 0 0; font-size: 13px; font-weight: 700; color: var(--green-dim); }
.onb-field { margin-top: 6px; }
.onb-field input { padding: 14px 12px; font-weight: 700; border-width: 2px; }
.onb-field input:focus { outline: none; border-color: var(--green); }
.onb-field input::placeholder { font-size: 15px; }
.onb-picked { margin-top: 8px; }
.onb-fmt { margin-top: 14px; }
.onb-one + .onb-go { margin-top: 20px; }
.onb-intro {
  all: unset; box-sizing: border-box; cursor: pointer; width: 100%; margin-top: 14px;
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  border: 1px dashed var(--line); padding: 12px 14px; color: var(--green); font-family: var(--mono);
}
.onb-intro b { display: block; color: var(--fuchsia); font-size: 15px; }
.onb-intro small { display: block; color: var(--green-dim); font-size: 13px; margin-top: 2px; }
body.v2 .onb-sub { color: var(--v2-bright); }
body.v2 .onb-sub em { color: var(--v2-pink); }
body.v2 .onb-lbl { color: var(--v2-label); }
body.v2 .onb-field input { border-color: var(--v2-line); }
body.v2 .onb-field input:focus { border-color: var(--v2-green); }
body.v2 .onb-intro { border-color: var(--v2-line); color: var(--v2-green); }
body.v2 .onb-intro b { color: var(--v2-pink); }
body.v2 .onb-intro small { color: var(--v2-label); }

/* подсказки при вводе профессии (2026-10-14, макет «D») */
.tsugg { margin: -6px 0 10px; border: 2px solid var(--green, #41ff7e); border-top: 0; background: var(--panel, #050a05); display: flex; flex-direction: column; }
.tsugg button { min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px; background: transparent; border: 0; border-bottom: 1px solid var(--line, #1e3d1c); color: inherit; font: inherit; font-weight: 700; text-align: left; cursor: pointer; }
.tsugg button:last-child { border-bottom: 0; }
.tsugg b { color: var(--v2-pink, #ff3fd8); }
.tsugg i { font-style: normal; font-size: .8em; color: var(--green, #41ff7e); }

/* место под клавиатурой, пока вводят текст (app.js, keepFieldVisible, 2026-10-16) */
body.kb-open #screen { padding-bottom: 55vh; }

/* подсказки при почти пустой ленте (app.js, lowHints, 2026-10-16) */
.lowhints { margin: 16px 0 8px; }
.lowhints .chips { margin-top: 6px; }