/* ============================================================
   КОМПОНЕНТЫ · общие для лендинга и кабинета
   ============================================================ */

/* ---------- кнопки ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  font-weight: 600;
  font-size: var(--t-base);
  letter-spacing: var(--tr-tight);
  padding: 13px 22px;
  border-radius: var(--r-sm);
  white-space: nowrap;
  transition: transform var(--fast) var(--ease), box-shadow var(--fast) ease,
              background-color var(--fast) ease, border-color var(--fast) ease, color var(--fast) ease;
}
.btn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.btn--sm { padding: 9px 15px; font-size: var(--t-sm); border-radius: var(--r-xs); }
.btn--lg { padding: 16px 28px; font-size: var(--t-md); border-radius: var(--r-md); }
.btn--block { width: 100%; }

.btn--primary { background: var(--blue-btn); color: #fff; box-shadow: var(--sh-blue); }
.btn--primary:hover { background: var(--blue-deep); transform: translateY(-1px); }
.btn--primary:active { transform: none; }

.btn--ghost { border: 1px solid var(--line); color: var(--ink); background: var(--card); }
.btn--ghost:hover { border-color: var(--line-strong); background: var(--surface); }

/* Второстепенное действие: без рамки, чтобы не спорить с главной кнопкой. */
.btn--quiet { color: var(--ink-soft); }
.btn--quiet:hover { color: var(--ink); background: var(--surface); }

.btn--light { background: #fff; color: var(--on-light-blue); }
.btn--light:hover { background: #EDF3FF; transform: translateY(-1px); }

.btn--outline-light { border: 1px solid rgba(255,255,255,.32); color: #fff; }
.btn--outline-light:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.5); }

.btn--danger { background: var(--danger); color: #fff; }
.btn--danger:hover { filter: brightness(1.06); }

.btn[disabled], .btn[aria-busy="true"] { opacity: .6; pointer-events: none; }

/* Кнопка в работе: подпись остаётся, слева крутится индикатор. */
.btn[aria-busy="true"]::before {
  content: "";
  width: 14px; height: 14px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin .7s linear infinite;
}

.chipbtn {
  border: 1px solid var(--line);
  border-radius: var(--r-xs);
  padding: 8px 14px;
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--ink-soft);
  background: var(--card);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transition: all var(--fast) ease;
}
.chipbtn:hover { border-color: var(--line-strong); color: var(--ink); }
.chipbtn.on { background: var(--invert-bg); border-color: var(--invert-bg); color: var(--invert-ink); }
.chipbtn .ic { width: 15px; height: 15px; }

.iconbtn {
  width: 38px; height: 38px;
  border-radius: var(--r-xs);
  border: 1px solid var(--line);
  background: var(--card);
  display: grid;
  place-items: center;
  color: var(--ink-soft);
  transition: background-color var(--fast) ease, border-color var(--fast) ease, color var(--fast) ease;
}
.iconbtn:hover { background: var(--surface); border-color: var(--line-strong); color: var(--ink); }
.iconbtn svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.iconbtn__lang { font-family: var(--mono); font-size: var(--t-2xs); font-weight: 700; }

/* Иконка темы: показываем ту, в которую переключимся. */
.ic-theme-light { display: none; }
[data-theme="dark"] .ic-theme-dark { display: none; }
[data-theme="dark"] .ic-theme-light { display: block; }

.linkish { color: var(--blue-ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

/* ---------- логотип ---------- */

.logo { display: inline-flex; align-items: center; gap: 9px; color: var(--ink); }
.logo__mark { width: 34px; height: 34px; flex: none; }
.logo__mark svg { width: 100%; height: 100%; }

/* Тёмная часть знака берёт цвет текста: в тёмной теме силуэт светлеет,
   иначе тёмно-синяя фигура пропадала бы на тёмном фоне. */
.logo__body, .logo__head { fill: var(--ink); }
.logo__wing, .logo__star { fill: var(--blue); }

/* Прописные с разрядкой — как в знаке. Отрицательный трекинг строчных
   здесь только слепил бы буквы. */
.logo__wm { font-weight: 800; font-size: var(--t-md); letter-spacing: .04em; line-height: 1; white-space: nowrap; text-transform: uppercase; }
.logo__wm b { color: var(--ink); font-weight: 800; }
.logo__wm i { font-style: normal; color: var(--blue); margin-left: .3em; }

/* На тёмной боковине модалки чернильная часть знака невидима — светлеет. */
.modal__side .logo__body, .modal__side .logo__head { fill: #fff; }
.modal__side .logo__wing, .modal__side .logo__star { fill: #9EC0FF; }
.modal__side .logo__wm b { color: #fff; }
.modal__side .logo__wm i { color: #9EC0FF; }

/* ---------- поверхности ---------- */

.panel {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(20px, 2.4vw, 28px);
}
.panel--flush { padding: 0; overflow: hidden; }
/* Заголовок раздела экрана — h2, заголовок вложенного блока — h3.
   Размер у них один: уровень задаёт структуру, а не кегль. */
.panel :is(h2, h3) { font-size: var(--t-md); margin-bottom: var(--s-1); letter-spacing: var(--tr-tight); }
.panel__hint { font-size: var(--t-sm); color: var(--ink-soft); margin-bottom: var(--s-5); max-width: var(--measure); }
.panel__hint:last-child { margin-bottom: 0; }

.rowhead { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); margin-bottom: var(--s-4); flex-wrap: wrap; }

.mini {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--s-5);
  transition: border-color .25s ease;
}
.mini:hover { border-color: var(--line-strong); }
.mini__l { font-family: var(--mono); font-size: var(--t-2xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); }
.mini__v { font-family: var(--mono); font-weight: 700; font-size: var(--t-2xl); letter-spacing: -.03em; margin-top: var(--s-2); line-height: 1.1; }
.mini__v span { font-size: var(--t-sm); color: var(--ink-faint); }
.mini__d { font-size: var(--t-xs); color: var(--ink-soft); margin-top: var(--s-1); }

/* ---------- полосы прогресса ---------- */

.pgbar { height: 6px; border-radius: var(--r-full); background: var(--line); overflow: hidden; }
.pgbar i { display: block; height: 100%; border-radius: var(--r-full); background: var(--accent-pure); transition: width .6s var(--ease-out); }

.bar { height: 4px; border-radius: var(--r-full); background: var(--line); overflow: hidden; width: 104px; }
.bar i { display: block; height: 100%; background: var(--accent-pure); border-radius: var(--r-full); }

/* ---------- шаги ---------- */

.steps { display: grid; gap: var(--s-2); }
.step {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  align-items: center;
  gap: var(--s-4);
  padding: 13px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--card);
  transition: border-color .25s ease;
}
.step:hover { border-color: var(--line-strong); }
.step__i {
  width: 32px; height: 32px;
  border-radius: 10px;
  display: grid; place-items: center;
  font-family: var(--mono); font-size: var(--t-2xs); font-weight: 700;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--ink-faint);
}
.step__i .ic { width: 13px; height: 13px; }
.step__n { font-weight: 600; font-size: var(--t-base); letter-spacing: var(--tr-tight); }
.step__meta { font-family: var(--mono); font-size: var(--t-2xs); letter-spacing: .05em; text-transform: uppercase; color: var(--ink-faint); white-space: nowrap; }
/* Тёмный знак на светло-зелёном: белый на этом зелёном не дотягивает по контрасту. */
.step--done .step__i { background: var(--lime); border-color: var(--lime); color: #0B2A07; }
.step--done .step__meta { color: var(--lime-ink); }
.step--now { border-color: var(--accent-pure); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-pure) 9%, transparent); }
.step--now .step__i { border-color: var(--blue); color: var(--blue-ink); background: var(--blue-soft-bg); }
.step--now .step__meta { color: var(--blue-ink); }
.step--lock { opacity: .55; }

/* ---------- строки списков ---------- */

.itemrow {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: 14px var(--s-5);
  border-bottom: 1px solid var(--line);
  transition: background-color .2s ease;
  width: 100%;
  text-align: left;
}
.itemrow:last-child { border-bottom: 0; }
.itemrow:hover { background: var(--surface); }
.itemrow--flush { padding-inline: 0; }
.itemrow--flush:hover { background: none; }
/* Строка из полного гайда: единственная в списке, где цвет направления
   выходит наружу — она ведёт в разбор профессии, а не в раздел кабинета. */
.itemrow--accent { background: var(--accent-soft); border-bottom: 0; }
.itemrow--accent:hover { background: var(--accent-soft); filter: brightness(.97); }
.itemrow--accent .itemrow__ico { background: var(--card); color: var(--accent); }
.itemrow--accent .rt { color: var(--accent); }
.itemrow__ico {
  width: 36px; height: 36px;
  border-radius: 11px;
  background: var(--surface);
  color: var(--ink-soft);
  display: grid; place-items: center;
  font-size: 17px;
  flex: none;
}
/* Текстовая колонка строки должна уметь сжиматься: в гибкой строке
   у неё по умолчанию min-width: auto, поэтому длинное название программы
   не переносилось, а выталкивало статус и кнопку за край экрана —
   на 360 пикселях «Пришёл ответ» уезжала за границу окна на треть ширины. */
.itemrow > span:not(.itemrow__ico):not(.rt) { min-width: 0; flex: 1 1 auto; }
.itemrow b, .itemrow small { overflow-wrap: anywhere; }

/* На узком экране статус и действие переезжают под название,
   а не жмут его до одной буквы. */
@media (max-width: 560px) {
  .itemrow { flex-wrap: wrap; row-gap: var(--s-2); }
  .itemrow > .tag, .itemrow > .btn { margin-left: 0; }
}

.itemrow b { display: block; font-size: var(--t-base); font-weight: 600; letter-spacing: var(--tr-tight); }
.itemrow small { font-size: var(--t-xs); color: var(--ink-soft); }
.itemrow .rt { margin-left: auto; text-align: right; font-family: var(--mono); font-size: var(--t-2xs); color: var(--ink-faint); white-space: nowrap; }

/* ---------- поля ---------- */

.field { margin-bottom: var(--s-4); }
.field label { display: block; font-size: var(--t-xs); font-weight: 600; margin-bottom: 6px; color: var(--ink-soft); }
.field input, .field select, .field textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--card);
  font-size: var(--t-base);
  transition: border-color var(--fast) ease, box-shadow var(--fast) ease;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 12%, transparent);
}
/* Поле пароля с кнопкой «показать» внутри правого края. */
.field__peek { position: relative; }
.field__peek input { padding-right: 52px; }
.peek {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  /* 44 пикселя — минимум, в который уверенно попадают пальцем. */
  width: 44px; height: 44px;
  border-radius: var(--r-xs);
  display: grid; place-items: center;
  color: var(--ink-faint);
  transition: color var(--fast) ease, background-color var(--fast) ease;
}
.peek svg { width: 18px; height: 18px; stroke: currentColor; fill: none; }
.peek:hover { color: var(--ink); background: var(--surface); }
.peek[aria-pressed="true"] { color: var(--blue-ink); }

/* Поле, из-за которого сервер отказал: видно, что править, ещё до чтения текста. */
.field input.is-bad, .field select.is-bad {
  border-color: var(--danger);
  background: var(--danger-soft);
}
.field input.is-bad:focus, .field select.is-bad:focus {
  border-color: var(--danger);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 14%, transparent);
}
.field input::placeholder { color: var(--ink-faint); }
.field small { display: block; margin-top: 6px; font-size: var(--t-xs); color: var(--ink-faint); }

.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
.chips { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-bottom: var(--s-2); }

.err {
  color: var(--danger);
  background: var(--danger-soft);
  border-radius: var(--r-xs);
  padding: 10px 12px;
  font-size: var(--t-sm);
  margin-bottom: var(--s-3);
  display: flex;
  gap: var(--s-2);
  align-items: center;
}

.search {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  padding-inline: 13px;
  background: var(--card);
  flex: 1;
  min-width: 220px;
  transition: border-color var(--fast) ease, box-shadow var(--fast) ease;
}
.search:focus-within { border-color: var(--blue); box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 12%, transparent); }
.search .ic { width: 17px; height: 17px; color: var(--ink-faint); }
.search input { border: 0; background: none; padding-block: 11px; width: 100%; font-size: var(--t-base); }
.search input:focus { outline: none; }

/* Группы по сроку на хабе возможностей: сначала то, что горит.
   Заголовок с числом отбивает списки друг от друга — иначе шестнадцать
   карточек идут одной стеной, и срочное теряется в середине. */
.oppgroup + .oppgroup { margin-top: var(--s-10); }
.profgroup + .profgroup { margin-top: var(--s-10); }
.oppgroup__head { display: flex; align-items: baseline; gap: var(--s-3); }
.oppgroup__head h2 { font-size: var(--t-lg); letter-spacing: -.01em; }
.oppgroup__n { font-family: var(--mono); font-size: 11px; color: var(--ink-faint); white-space: nowrap; }
.oppgroup .panel__hint { margin: 4px 0 var(--s-4); }

.filters { display: flex; gap: var(--s-2); flex-wrap: wrap; margin-bottom: var(--s-5); align-items: center; }

/* ---------- тосты ---------- */

.toast {
  position: fixed;
  right: var(--s-5);
  bottom: var(--s-5);
  z-index: 300;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  align-items: flex-end;
  pointer-events: none;
}
.toast__i {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  background: var(--invert-bg);
  color: var(--invert-ink);
  padding: 12px 16px;
  border-radius: var(--r-sm);
  box-shadow: var(--sh-3);
  font-weight: 600;
  font-size: var(--t-sm);
  animation: toastin .35s var(--ease-out);
}
.toast__i i { font-style: normal; display: inline-flex; font-size: 18px; opacity: .85; }
.toast__i small { display: block; font-weight: 450; font-size: var(--t-xs); opacity: .7; }
@keyframes toastin { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }

/* ---------- пустые состояния ---------- */

.empty { text-align: center; padding: clamp(40px, 6vw, 64px) var(--s-6); color: var(--ink-soft); }
.empty i { font-style: normal; font-size: 30px; display: block; margin-bottom: var(--s-3); color: var(--ink-faint); }
.empty b { display: block; font-size: var(--t-lg); color: var(--ink); margin-bottom: var(--s-2); letter-spacing: var(--tr-tight); }

/* ---------- скелетоны ---------- */

.skel { display: grid; gap: var(--s-3); }
.skel__line, .skel__block {
  border-radius: var(--r-sm);
  background: linear-gradient(90deg, var(--surface), var(--line), var(--surface));
  background-size: 200% 100%;
  animation: shimmer 1.4s linear infinite;
}
.skel__line { height: 14px; }
.skel__line--sm { width: 40%; }
.skel__line--md { width: 70%; }
.skel__block { height: 120px; border-radius: var(--r-lg); }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* ---------- модалка ---------- */

.modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: var(--s-5);
  animation: fadein .2s ease;
}
.modal__bg { position: absolute; inset: 0; background: var(--overlay); backdrop-filter: blur(6px); }
.modal__card {
  position: relative;
  width: min(920px, 100%);
  max-height: 92vh;
  overflow: auto;
  background: var(--card);
  border-radius: var(--r-xl);
  display: grid;
  grid-template-columns: .82fr 1.18fr;
  box-shadow: var(--sh-3);
  animation: rise .3s var(--ease-out);
}
.modal__side {
  background: linear-gradient(155deg, #2C5BEF 0%, #3B34B8 62%, #221C6E 100%);
  color: #fff;
  padding: var(--s-10) var(--s-8);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.modal__side::before { content: ""; position: absolute; inset: 0; opacity: .3; background-image: radial-gradient(rgba(255,255,255,.4) 1px, transparent 1.1px); background-size: 24px 24px; }
.modal__side > * { position: relative; }
.modal__side .logo { color: #fff; margin-bottom: var(--s-8); }
.modal__side h3 { font-size: var(--t-2xl); line-height: var(--lh-snug); margin-bottom: var(--s-3); }
.modal__side p { font-size: var(--t-sm); color: rgba(255,255,255,.76); margin-bottom: var(--s-6); }
.perk { display: flex; gap: var(--s-3); align-items: flex-start; font-size: var(--t-sm); margin-bottom: var(--s-3); color: rgba(255,255,255,.92); }
.perk .ic { width: 17px; height: 17px; margin-top: 3px; stroke-width: 2.2; }
.modal__quote { margin-top: auto; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); border-radius: var(--r-md); padding: var(--s-4); font-size: var(--t-xs); line-height: var(--lh-normal); }
.modal__quote b { display: block; font-family: var(--mono); font-size: var(--t-2xs); margin-top: var(--s-2); color: rgba(255,255,255,.62); font-weight: 500; }

.modal__body { padding: var(--s-8) var(--s-10) var(--s-8); position: relative; }
.modal__close {
  position: absolute; top: var(--s-4); right: var(--s-4);
  width: 36px; height: 36px;
  border-radius: var(--r-xs);
  display: grid; place-items: center;
  border: 1px solid var(--line);
  color: var(--ink-soft);
  transition: background-color .2s ease;
}
.modal__close:hover { background: var(--surface); color: var(--ink); }
.modal__close svg { width: 16px; height: 16px; stroke: currentColor; fill: none; }
.modal h2 { font-size: var(--t-2xl); margin-bottom: var(--s-2); }
.modal__sub { font-size: var(--t-sm); color: var(--ink-soft); margin-bottom: var(--s-6); }
.modal__legal { margin-top: var(--s-4); font-size: var(--t-xs); color: var(--ink-faint); line-height: var(--lh-normal); }
.modal__row { display: flex; gap: var(--s-2); }
.modal__row .btn { flex: 1; }

/* ---------- вход через провайдеров ---------- */

.oauths { display: grid; gap: var(--s-2); margin-bottom: var(--s-5); }
.gbtn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  padding: 12px 16px;
  font-weight: 600;
  font-size: var(--t-sm);
  color: var(--ink);
  background: var(--card);
  transition: border-color var(--fast) ease, background-color var(--fast) ease, transform var(--fast) var(--ease);
}
.gbtn:hover { background: var(--surface); border-color: var(--ink-faint); transform: translateY(-1px); }
.gbtn .brand { width: 18px; height: 18px; flex: none; }
.gbtn--apple .brand { color: var(--ink); }

.divider {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-bottom: var(--s-5);
  color: var(--ink-faint);
  font-family: var(--mono);
  font-size: var(--t-2xs);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }

.dotsteps { display: flex; gap: 5px; margin-bottom: var(--s-6); }
.dotsteps i { height: 3px; flex: 1; border-radius: var(--r-full); background: var(--line); transition: background-color .3s ease; }
.dotsteps i.on { background: var(--blue); }

.authstep--done { text-align: center; padding-block: var(--s-5); }
.done-ring {
  width: 76px; height: 76px;
  border-radius: 50%;
  background: var(--lime-soft);
  display: grid; place-items: center;
  margin: 0 auto var(--s-5);
  animation: pop .45s var(--ease-out);
}
.done-ring svg { width: 34px; height: 34px; stroke: var(--lime-ink); fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
@keyframes rise { from { opacity: 0; transform: translateY(14px) scale(.99); } to { opacity: 1; transform: none; } }
@keyframes pop { from { transform: scale(.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes spin { to { transform: rotate(360deg); } }

.spin { width: 16px; height: 16px; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; }

/* ---------- правовые документы ---------- */

.doc { display: grid; gap: var(--s-6); margin-block: var(--s-8); }
.doc__upd { font-family: var(--mono); font-size: var(--t-2xs); color: var(--ink-faint); margin: var(--s-2) 0 var(--s-5); }
.doc__s b { display: flex; align-items: flex-start; gap: var(--s-3); font-size: var(--t-md); font-weight: 600; letter-spacing: var(--tr-tight); margin-bottom: var(--s-2); }
.doc__s b i { font-style: normal; font-family: var(--mono); font-size: var(--t-2xs); font-weight: 700; color: var(--ink-faint); flex: none; margin-top: 4px; }
.doc__s p { font-size: var(--t-base); line-height: var(--lh-loose); color: var(--ink-soft); padding-left: var(--s-8); max-width: var(--measure); }
.doc__note { font-size: var(--t-xs); color: var(--ink-faint); border-top: 1px solid var(--line); padding-top: var(--s-4); }
.doc__nav { display: flex; gap: var(--s-2); flex-wrap: wrap; margin-top: var(--s-6); }

@media (max-width: 1040px) {
  .modal__card { grid-template-columns: 1fr; }
  .modal__side { display: none; }
}
@media (max-width: 680px) {
  .modal__body { padding: var(--s-6) var(--s-5); }
  .grid2 { grid-template-columns: 1fr; }
  .toast { left: var(--s-3); right: var(--s-3); bottom: var(--s-3); align-items: stretch; }
  .doc__s p { padding-left: 0; }
}