/* ═══════════════════════════════════════════════════════════════════════════
   TGParser — тема Skyro, та же, что в админке Huntly
   ───────────────────────────────────────────────────────────────────────────
   Парсер жил на своей тёмной теме и выглядел чужим рядом с админкой: другая
   палитра, другие шрифты, другие кнопки. Здесь повторены токены и компоненты
   admin-skyro.css из huntly — светлая бумага, фиолетовый акцент, оранжевый
   второй, Onest в заголовках и Golos Text в тексте.

   Что добавлено сверх huntly — компоненты, которых там нет: шаги пайплайна,
   строки каналов, лог запуска, карточки вакансий и рекрутеров. Они названы
   так же (.a-*) и собраны из тех же токенов, чтобы страницы читались как один
   продукт, а не как две разные панели.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --a-violet-900: #1B1233;
  --a-violet-700: #4C1D95;
  --a-violet-600: #5B21B6;
  --a-violet-500: #7048E8;
  --a-violet-200: #C9B8FB;
  --a-violet-100: #E8E0FE;
  --a-violet-050: #F4F0FF;

  --a-orange-600: #C2410C;
  --a-orange-500: #FF6B2C;
  --a-orange-100: #FFE9DE;
  --a-orange-050: #FFF4EE;

  --a-green: #16A34A;
  --a-green-bg: #ECFDF3;
  --a-red: #DC2626;
  --a-red-bg: #FEF2F2;
  --a-amber: #B45309;
  --a-amber-bg: #FFFBEB;

  --a-paper: #FAF9FD;
  --a-sunken: #F1EFF8;
  --a-card: #FFFFFF;

  --a-ink: #1B1233;
  --a-ink-soft: #5B5169;
  --a-ink-faint: #8E8499;
  --a-line: rgba(27, 18, 51, .09);

  --a-r-sm: 10px;
  --a-r: 16px;
  --a-r-lg: 22px;
  --a-r-pill: 999px;

  --a-shadow: 0 2px 10px rgba(27, 18, 51, .05);
  --a-shadow-md: 0 12px 30px rgba(27, 18, 51, .08);

  --a-rail: 236px;
  --a-max: 1360px;

  --a-mono: 'JetBrains Mono', ui-monospace, monospace;
}

body.admin {
  background: var(--a-paper);
  color: var(--a-ink);
  font-family: 'Golos Text', system-ui, -apple-system, sans-serif;
  line-height: 1.55;
  margin: 0;
}
body.admin * { box-sizing: border-box; }
body.admin a { color: inherit; text-decoration: none; }
body.admin h1, body.admin h2, body.admin h3 {
  font-family: 'Onest', system-ui, sans-serif; font-weight: 800;
  letter-spacing: -.03em; line-height: 1.15; margin: 0;
}

/* ══════════════ РЕЙКА ══════════════ */
.a-rail {
  position: fixed; left: 0; top: 0; bottom: 0; width: var(--a-rail); z-index: 40;
  background: var(--a-card); border-right: 1px solid var(--a-line);
  display: flex; flex-direction: column; padding: 20px 12px 16px; overflow-y: auto;
}
.a-logo {
  display: flex; align-items: center; gap: 9px; padding: 0 8px 4px;
  font-family: 'Onest', sans-serif; font-weight: 800; font-size: 18px; letter-spacing: -.03em;
}
.a-logo i {
  width: 30px; height: 30px; border-radius: 9px; font-style: normal;
  background: var(--a-violet-500); color: #fff; display: grid; place-items: center;
  font-size: 15px; box-shadow: 2px 2px 0 var(--a-orange-500);
}
.a-logo-sub { padding: 0 8px 16px; font-family: var(--a-mono); font-size: 10px; color: var(--a-ink-faint) }
.a-nav { display: flex; flex-direction: column; gap: 1px; }
.a-nav a {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px;
  border-radius: var(--a-r-sm); font-size: 14px; font-weight: 500; color: var(--a-ink-soft);
}
.a-nav a:hover { background: var(--a-sunken); color: var(--a-ink); }
.a-nav a.on { background: var(--a-violet-050); color: var(--a-violet-700); font-weight: 600 }
.a-nav a .ic { width: 18px; text-align: center; font-size: 14px; opacity: .85; }
.a-nav a .n {
  margin-left: auto; background: var(--a-sunken); color: var(--a-ink-soft);
  border-radius: var(--a-r-pill); font-size: 11px; font-weight: 700; padding: 1px 7px;
}
.a-sec {
  font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--a-ink-faint); padding: 16px 12px 6px;
}
.a-rail-foot { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--a-line); }
.a-state { display: flex; align-items: center; gap: 8px; padding: 5px 10px; font-size: 12px;
           color: var(--a-ink-soft) }
.a-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; background: var(--a-ink-faint) }
.a-dot.g { background: var(--a-green) }
.a-dot.r { background: var(--a-red) }
.a-dot.a { background: var(--a-orange-500) }

/* ══════════════ РАБОЧАЯ ОБЛАСТЬ ══════════════ */
.a-work { margin-left: var(--a-rail); padding: 30px 36px 72px; }
.a-work > .a-inner { max-width: var(--a-max); }
.a-head { display: flex; align-items: flex-start; justify-content: space-between;
          gap: 16px; flex-wrap: wrap; margin-bottom: 26px }
.a-head h1 { font-size: 27px }
.a-head p { margin: 6px 0 0; color: var(--a-ink-soft); font-size: 14px }
.a-stamp { font-family: var(--a-mono); font-size: 11.5px; color: var(--a-ink-faint) }

.a-card { background: var(--a-card); border-radius: var(--a-r-lg); padding: 24px 26px;
          box-shadow: var(--a-shadow); margin-bottom: 22px }
.a-card-h { display: flex; align-items: center; justify-content: space-between;
            gap: 12px; margin-bottom: 18px; flex-wrap: wrap }
.a-card-h h3 { font-size: 15.5px }
.a-card-h .a-link { font-size: 12.5px; font-weight: 600; color: var(--a-violet-600) }

.a-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: 14px; margin-bottom: 22px;
}
.a-stat {
  display: flex; flex-direction: column; gap: 2px;
  background: var(--a-card); border-radius: var(--a-r); padding: 16px 18px;
  box-shadow: var(--a-shadow);
}
.a-stat b { font-family: 'Onest', sans-serif; font-weight: 800; font-size: 27px;
            letter-spacing: -.04em; line-height: 1.05; font-variant-numeric: tabular-nums }
.a-stat span { font-size: 12.5px; color: var(--a-ink-soft); line-height: 1.25 }
.a-stat em { font-style: normal; font-size: 11.5px; color: var(--a-ink-faint) }
.a-stat.v b { color: var(--a-violet-500) }
.a-stat.o b { color: var(--a-orange-500) }
.a-stat.g b { color: var(--a-green) }

/* ══════════════ КНОПКИ, ПОЛЯ, МЕТКИ ══════════════ */
.a-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px;
         padding: 8px 16px; border-radius: var(--a-r-pill); border: 0; cursor: pointer;
         font-family: inherit; font-size: 13px; font-weight: 700; min-height: 38px; white-space: nowrap }
.a-btn.p { background: var(--a-violet-500); color: #fff }
.a-btn.p:hover { background: var(--a-violet-600) }
.a-btn.s { background: var(--a-violet-050); color: var(--a-violet-700) }
.a-btn.s:hover { background: var(--a-violet-100) }
.a-btn.o { background: var(--a-orange-500); color: #fff }
.a-btn.o:hover { background: var(--a-orange-600) }
.a-btn.g { background: transparent; color: var(--a-ink-soft); box-shadow: inset 0 0 0 1.5px var(--a-line) }
.a-btn.g:hover { color: var(--a-ink) }
.a-btn.d { background: var(--a-red-bg); color: var(--a-red) }
.a-btn.sm { padding: 5px 12px; min-height: 30px; font-size: 12px }
.a-btn.w { width: 100% }
.a-btn[disabled] { opacity: .45; cursor: not-allowed }

.a-input, .a-select, textarea.a-input {
  width: 100%; padding: 9px 12px; border: 1px solid var(--a-line); border-radius: var(--a-r);
  font-family: inherit; font-size: 13.5px; background: var(--a-card); color: var(--a-ink);
  -webkit-appearance: none; appearance: none;
}
.a-input:focus, .a-select:focus { outline: none; border-color: var(--a-violet-200) }
.a-field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px }
.a-field > label { font-size: 12.5px; font-weight: 600; color: var(--a-ink-soft) }
.a-hint { font-size: 11.5px; color: var(--a-ink-faint); line-height: 1.4 }
/* Панель фильтров: подписи сверху, кнопка «Найти» на одной линии с полями */
.a-filters { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 18px }
.a-filters .a-field { margin-bottom: 0; min-width: 150px }

.a-pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px;
          border-radius: var(--a-r-pill); font-size: 11.5px; font-weight: 700; white-space: nowrap }
.a-pill.v { background: var(--a-violet-050); color: var(--a-violet-700) }
.a-pill.o { background: var(--a-orange-050); color: var(--a-orange-600) }
.a-pill.g { background: var(--a-green-bg); color: var(--a-green) }
.a-pill.r { background: var(--a-red-bg); color: var(--a-red) }
.a-pill.n { background: var(--a-sunken); color: var(--a-ink-soft) }
.a-pill.mono { font-family: var(--a-mono); font-weight: 500 }

.a-ok { background: var(--a-green-bg); color: var(--a-green); border-radius: var(--a-r);
        padding: 12px 14px; font-size: 13.5px; font-weight: 600; margin-bottom: 16px }
.a-err { background: var(--a-red-bg); color: var(--a-red); border-radius: var(--a-r);
         padding: 12px 14px; font-size: 13.5px; font-weight: 600; margin-bottom: 16px }
.a-info { background: var(--a-sunken); color: var(--a-ink-soft); border-radius: var(--a-r);
          padding: 12px 14px; font-size: 13.5px; margin-bottom: 16px }
.a-note { background: var(--a-sunken); border-radius: var(--a-r); padding: 12px 14px;
          font-size: 13px; color: var(--a-ink-soft); line-height: 1.5 }
.a-warn { background: var(--a-amber-bg); color: var(--a-amber); border-radius: var(--a-r-sm);
          padding: 7px 11px; font-size: 12px; font-weight: 600; margin-bottom: 10px }
.a-empty { text-align: center; padding: 40px 20px; color: var(--a-ink-faint); font-size: 14px }
.a-empty .em { font-size: 34px; display: block; margin-bottom: 8px }

.a-grid { display: grid; gap: 22px }
.a-g2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)) }
.a-g3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) }
.a-muted { color: var(--a-ink-soft); font-size: 13px }
.a-mono { font-family: var(--a-mono) }

/* ══════════════ ШАГИ ПАЙПЛАЙНА ══════════════
   Три шага независимы, и это должно быть видно: одинаковые карточки в ряд,
   номер шага меткой, кнопка прижата к низу — тогда карточки разной высоты
   не «пляшут» кнопками. */
.a-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 14px }
.a-step { display: flex; flex-direction: column; gap: 8px; background: var(--a-sunken);
          border-radius: var(--a-r); padding: 16px 18px }
.a-step h4 { font-family: 'Onest', sans-serif; font-weight: 800; font-size: 15px; margin: 0 }
.a-step p { margin: 0; font-size: 12.5px; color: var(--a-ink-soft); line-height: 1.5 }
.a-step form { margin-top: auto; padding-top: 4px }
.a-runbar { display: flex; align-items: center; justify-content: space-between; gap: 12px;
            flex-wrap: wrap; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--a-line) }
.a-runbar .btns { display: flex; gap: 8px; flex-wrap: wrap }

/* Источник-скрейпер: слева описание, справа форма запуска */
.a-src { display: grid; grid-template-columns: 1fr minmax(240px, 340px); gap: 22px; align-items: start }
.a-src p { margin: 0 0 8px; font-size: 13px; color: var(--a-ink-soft); line-height: 1.6 }

/* ══════════════ СТРОКИ-СПИСКИ (каналы, запуски) ══════════════ */
.a-rows { display: flex; flex-direction: column }
.a-row { display: flex; align-items: center; justify-content: space-between; gap: 12px;
         padding: 11px 2px; border-bottom: 1px solid var(--a-line); flex-wrap: wrap }
.a-row:last-child { border-bottom: none }
.a-row-t { font-weight: 600; font-size: 13.5px }
.a-row-m { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 3px;
           font-size: 11.5px; color: var(--a-ink-faint); font-family: var(--a-mono) }
.a-row-a { display: flex; gap: 6px; flex-shrink: 0 }

/* Лог запуска раскрывается по клику — строка сама себе кнопка */
.a-job { border-bottom: 1px solid var(--a-line); padding: 10px 2px; cursor: pointer }
.a-job:last-child { border-bottom: none }
.a-job-h { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12.5px }
.a-job-t { font-family: var(--a-mono); font-size: 11.5px; color: var(--a-ink-faint) }
.a-job-d { color: var(--a-ink-soft); font-size: 12px; margin-left: auto }
.a-log { display: none; margin-top: 8px; padding: 10px 12px; background: var(--a-sunken);
         border-radius: var(--a-r-sm); font-family: var(--a-mono); font-size: 11px;
         color: var(--a-ink-soft); line-height: 1.7; max-height: 220px; overflow-y: auto }
.a-job.open .a-log { display: block }

/* ══════════════ ТАБЛИЦЫ ══════════════
   Как в админке: шапка мелкими прописными, строки в одну линию, подсветка при
   наведении. Обёртка прокручивается по горизонтали — иначе широкая таблица
   тянет за собой всю страницу. */
.a-table-wrap { overflow-x: auto; margin: 0 -26px; padding: 0 26px }
table.a-table { width: 100%; border-collapse: collapse; font-size: 13px }
table.a-table th {
  text-align: left; font-size: 10.5px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--a-ink-faint); padding: 0 12px 10px;
  white-space: nowrap; border-bottom: 1px solid var(--a-line);
}
table.a-table th a { color: inherit; display: inline-flex; align-items: center; gap: 4px }
table.a-table th a:hover { color: var(--a-violet-600) }
table.a-table th.on a { color: var(--a-violet-600) }
table.a-table td { padding: 10px 12px; border-bottom: 1px solid var(--a-line); vertical-align: top }
table.a-table tr:last-child td { border-bottom: none }
table.a-table tbody tr:hover { background: var(--a-violet-050) }
table.a-table .num { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap }
table.a-table .mono { font-family: var(--a-mono); font-size: 12px }
/* Контакты в ячейке столбиком: у рекрутера бывает две почты и три хендла */
.a-cell-l { display: flex; flex-direction: column; gap: 3px }
.a-cell-l a { color: var(--a-violet-600) }
.a-cut { display: block; max-width: 230px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.a-name-c { font-weight: 600 }
.a-name-c.none { color: var(--a-ink-faint); font-weight: 500 }
.a-sub { font-size: 11.5px; color: var(--a-ink-faint) }

/* ══════════════ ВАКАНСИИ ══════════════ */
.a-vacs { display: flex; flex-direction: column; gap: 14px }
.a-vac { background: var(--a-card); border-radius: var(--a-r-lg); padding: 20px 22px;
         box-shadow: var(--a-shadow) }
.a-vac-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
           flex-wrap: wrap; margin-bottom: 8px }
.a-vac-t { font-family: 'Onest', sans-serif; font-weight: 800; font-size: 16.5px;
           letter-spacing: -.02em; line-height: 1.25 }
.a-vac-t a:hover { color: var(--a-violet-600) }
.a-vac-c { font-size: 12.5px; color: var(--a-violet-600); font-weight: 600 }
.a-vac-s { font-family: 'Onest', sans-serif; font-weight: 800; font-size: 15px; color: var(--a-green);
           white-space: nowrap }
.a-vac-b { font-size: 13px; line-height: 1.6; color: var(--a-ink-soft); white-space: pre-wrap;
           word-break: break-word; margin-bottom: 12px }
.a-vac-f { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding-top: 11px;
           border-top: 1px solid var(--a-line); font-size: 11.5px; color: var(--a-ink-faint);
           font-family: var(--a-mono) }
.a-vac-f .links { display: flex; gap: 8px; margin-left: auto; flex-wrap: wrap }
.a-toggle { font-size: 11.5px; color: var(--a-ink-faint); cursor: pointer; font-family: var(--a-mono);
            text-decoration: underline; display: inline-block; margin-bottom: 8px }
.a-raw { display: none; margin-bottom: 12px; padding: 12px 14px; background: var(--a-sunken);
         border-radius: var(--a-r-sm); font-family: var(--a-mono); font-size: 11.5px;
         color: var(--a-ink-soft); line-height: 1.65; white-space: pre-wrap; word-break: break-word;
         max-height: 240px; overflow-y: auto }
.a-raw.open { display: block }

/* Короткая карточка вакансии — сводка на дашборде */
.a-vi { padding: 11px 0; border-bottom: 1px solid var(--a-line) }
.a-vi:last-child { border-bottom: none }
.a-vi-t { font-weight: 600; font-size: 13.5px }
.a-vi-c { font-size: 11.5px; color: var(--a-violet-600) }
.a-vi-x { font-size: 12.5px; color: var(--a-ink-soft); line-height: 1.5; margin: 4px 0;
          display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden }
.a-vi-f { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; font-size: 11px;
          color: var(--a-ink-faint); font-family: var(--a-mono) }

/* ══════════════ РЕКРУТЕРЫ ══════════════ */
.a-recs { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px }
.a-rec { background: var(--a-card); border-radius: var(--a-r-lg); padding: 18px 20px;
         box-shadow: var(--a-shadow); display: flex; flex-direction: column }
.a-rec-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px }
.a-rec-n { font-family: 'Onest', sans-serif; font-weight: 800; font-size: 15.5px; letter-spacing: -.02em }
.a-rec-n.none { color: var(--a-ink-faint); font-weight: 700 }
.a-rec-p { font-size: 12px; color: var(--a-orange-600); font-weight: 600; margin-top: 1px }
.a-rec-c { font-size: 12px; color: var(--a-violet-600); font-weight: 600; margin-top: 4px }
.a-rec-l { display: flex; flex-direction: column; gap: 5px; margin: 12px 0 }
.a-rec-r { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-family: var(--a-mono);
           word-break: break-all }
.a-rec-r .ic { width: 15px; text-align: center; flex-shrink: 0; opacity: .55 }
.a-rec-f { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-top: auto;
           padding-top: 11px; border-top: 1px solid var(--a-line); font-size: 11px;
           color: var(--a-ink-faint); font-family: var(--a-mono) }

/* ══════════════ ПОСТРАНИЧНО ══════════════ */
.a-pg { display: flex; gap: 10px; margin-top: 24px; justify-content: center; align-items: center }
.a-pg span { font-family: var(--a-mono); font-size: 12px; color: var(--a-ink-faint) }

/* ══════════════ ВХОД / АВТОРИЗАЦИЯ ══════════════ */
body.admin.solo { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px }
.a-solo { background: var(--a-card); border-radius: var(--a-r-lg); box-shadow: var(--a-shadow-md);
          padding: 32px 34px; width: 100%; max-width: 440px }
.a-solo h1 { font-size: 22px; margin-bottom: 6px }
.a-solo .sub { color: var(--a-ink-soft); font-size: 13.5px; margin-bottom: 20px; line-height: 1.6 }
.a-back { display: block; text-align: center; margin-top: 14px; color: var(--a-ink-faint); font-size: 13px }
.a-back:hover { color: var(--a-violet-600) }

/* ══════════════ МОБИЛЬНОЕ ══════════════
   Рейка уезжает и открывается якорем — без JavaScript, как в админке. */
.a-mtop { display: none; align-items: center; gap: 10px; padding: 12px 0 }
.a-burger { width: 42px; height: 42px; border-radius: var(--a-r); background: var(--a-card);
            box-shadow: var(--a-shadow); display: grid; place-items: center; font-size: 17px }
.a-veil { display: none }

@media (max-width: 900px) {
  .a-rail { transform: translateX(-102%); transition: transform .22s ease-out;
            z-index: 60; width: min(84vw, 290px) }
  .a-rail:target { transform: none }
  .a-rail:target ~ .a-veil { display: block; position: fixed; inset: 0; z-index: 55;
                             background: rgba(27, 18, 51, .42) }
  .a-work { margin-left: 0; padding: 0 14px 40px }
  .a-mtop { display: flex }
  .a-card { padding: 16px; margin-bottom: 12px }
  .a-stats { gap: 10px }
  .a-stat b { font-size: 23px }
  .a-src { grid-template-columns: 1fr }
  .a-table-wrap { margin: 0 -16px; padding: 0 16px }
  .a-recs { grid-template-columns: 1fr }
  .a-grid { gap: 12px }
}