:root {
  color-scheme: dark;
  --bg:#0A0C0F; --rail:#0C0F13; --surface:#12161B; --sunk:#0E1116;
  --line:#222932; --line-2:#2C3540; --line-soft:#1A1F26;
  --hi:#E9EDF2; --mid:#939FAD; --lo:#5E6975; --dim:#454F5A;
  --accent:#A9E34B; --accent-hi:#C4EF7E; --accent-dark:#7FB733;
  --info:#7FB2F2; --danger:#F2856B;
  --sans:'Onest', system-ui, 'Helvetica Neue', sans-serif;
  --display:var(--sans);
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--hi);
  font-family: var(--sans); -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
textarea, input { font-family: inherit; }
.mono { font-family: var(--mono); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }

.layout { display: flex; min-height: 100%; }

/* ── боковое меню ───────────────────────────────── */
.rail {
  width: 240px; flex: none; background: var(--rail);
  border-right: 1px solid var(--line-soft);
  display: flex; flex-direction: column; padding: 24px 16px; gap: 28px;
  position: sticky; top: 0; height: 100vh;
}
.brand { display: flex; align-items: center; gap: 11px; padding: 0 10px; }
/* Логотип — картинка, а не залитый акцентом квадрат: своя подложка
   у него внутри, поэтому фон здесь не нужен, только скругление. */
.brand .mark { width: 36px; height: 36px; border-radius: 11px; flex: none; display: block; }
.brand .name { font-size: 17.5px; font-weight: 600; letter-spacing: .02em; white-space: nowrap; }
.menu { display: flex; flex-direction: column; gap: 3px; }
.menu a {
  display: flex; align-items: center; gap: 11px; height: 44px; padding: 0 12px;
  border-radius: 9px; color: var(--mid); font-size: 14.5px; font-weight: 500;
}
.menu a:hover { background: var(--surface); color: var(--hi); }
.menu a.on { background: #171C23; color: var(--hi); }
.menu a.on svg { color: var(--accent); }
.who {
  margin-top: auto; padding: 14px; border-radius: 12px;
  background: var(--surface); border: 1px solid #1F252E;
}
.who .top { display: flex; align-items: center; gap: 10px; }
.who .av {
  width: 32px; height: 32px; flex: none; border-radius: 9px; background: #1F252E;
  color: var(--accent); display: flex; align-items: center; justify-content: center; font-size: 13px;
}
.who .em { font-size: 13px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.who .role { font-size: 11.5px; color: var(--lo); margin-top: 1px; }
.who .out {
  width: 100%; margin-top: 10px; height: 32px; border-radius: 8px; font-size: 12.5px;
  color: var(--lo); border: 1px solid var(--line-soft);
}
.who .out:hover { color: var(--hi); border-color: var(--line-2); }

main { flex: 1; min-width: 0; padding: 32px 40px 64px; }
.wrap { max-width: 1120px; display: flex; flex-direction: column; gap: 22px; }

.crumbs { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--lo); flex-wrap: wrap; }
.crumbs .here { color: var(--mid); }
.crumbs a:hover { color: var(--mid); }

h1 { margin: 0; font-size: 32px; font-weight: 600; letter-spacing: -.02em; font-family: var(--display); }
.sub { font-size: 15px; color: var(--mid); margin-top: 6px; }

.panel { border-radius: 14px; background: var(--surface); border: 1px solid var(--line); }
.cap { font-size: 11.5px; letter-spacing: .07em; color: var(--lo); font-family: var(--mono); }

.bar { height: 6px; border-radius: 3px; background: #1F252E; overflow: hidden; }
.bar > i { display: block; height: 100%; border-radius: 3px; background: var(--accent); transition: width .25s; }

.badge {
  display: inline-flex; align-items: center; height: 24px; padding: 0 9px;
  border-radius: 6px; font-size: 11.5px; background: #1B2129; color: var(--mid); white-space: nowrap;
}
.badge.run { background: rgba(169,227,75,.12); color: var(--accent); }
.badge.soon { background: rgba(127,178,242,.12); color: var(--info); }
.badge.done { background: rgba(127,183,51,.12); color: var(--accent-dark); }

.btn {
  height: 46px; padding: 0 20px; border-radius: 10px; font-size: 14.5px; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
}
.btn.primary { background: var(--accent); color: var(--bg); }
.btn.primary:hover { background: var(--accent-hi); }
.btn.ghost { border: 1px solid var(--line-2); color: var(--mid); font-weight: 500; }
.btn.ghost:hover { color: var(--hi); border-color: var(--lo); }

/* ── карточки курсов ────────────────────────────── */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 18px; }
.card {
  display: flex; flex-direction: column; padding: 22px; border-radius: 14px;
  background: var(--surface); border: 1px solid var(--line); transition: border-color .15s, transform .15s;
}
.card:hover { border-color: #3A4552; transform: translateY(-2px); }
.card .top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.card h3 { margin: 0 0 8px; font-size: 19px; font-weight: 600; line-height: 1.25; letter-spacing: -.01em; }
.card p { margin: 0 0 20px; font-size: 13.5px; line-height: 1.55; color: var(--mid); }
.card .foot { margin-top: auto; }
.card .prog { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; font-size: 13px; }
.card .prog .r { font-family: var(--mono); font-size: 12px; color: var(--lo); }

/* ── программа ──────────────────────────────────── */
.module { border: 1px solid var(--line); border-radius: 14px; background: var(--surface); overflow: hidden; }
.mhead { width: 100%; display: flex; align-items: center; gap: 16px; padding: 19px 20px; text-align: left; }
.mhead:hover { background: #151A20; }
.mstat { width: 34px; height: 34px; flex: none; border-radius: 10px; display: flex; align-items: center; justify-content: center; }
.mstat.done { background: rgba(127,183,51,.14); color: var(--accent-dark); }
.mstat.current { background: var(--accent); color: var(--bg); }
.mstat.locked { background: #1B2129; color: var(--lo); }
.mtitle { flex: 1; min-width: 0; }
.mtitle .t { display: block; font-size: 16px; font-weight: 600; }
.mtitle .s { display: block; font-size: 13px; color: var(--lo); margin-top: 3px; }
.mpct { width: 44px; flex: none; text-align: right; font-size: 12px; color: var(--lo); font-family: var(--mono); }
.chev { color: var(--lo); display: flex; transition: transform .18s; }
.mhead[aria-expanded="true"] .chev { transform: rotate(90deg); color: var(--mid); }
.mbody { border-top: 1px solid #1C222A; padding: 8px 10px 12px; }

.row {
  width: 100%; display: flex; align-items: center; gap: 14px; min-height: 52px;
  padding: 0 12px; border-radius: 9px; text-align: left;
}
.row:hover { background: #171C23; }
.row .num { width: 24px; flex: none; text-align: right; font-size: 12px; color: #4F5964; font-family: var(--mono); }
.row .ico { width: 20px; flex: none; display: flex; align-items: center; justify-content: center; color: var(--lo); }
.row .ttl { flex: 1; min-width: 0; font-size: 14.5px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row .dur { font-size: 12px; color: var(--lo); flex: none; font-family: var(--mono); }
.row .tag {
  font-size: 10.5px; letter-spacing: .07em; color: var(--bg); background: var(--accent);
  padding: 3px 7px; border-radius: 5px; flex: none; font-family: var(--mono);
}
.row.done .ttl { color: var(--mid); }
.row.done .ico { color: var(--accent-dark); }
.row.current { background: rgba(169,227,75,.07); box-shadow: inset 0 0 0 1px rgba(169,227,75,.30); }
.row.current .ico { color: var(--accent); }
.row.current .ttl { font-weight: 600; }
.row.current:hover { background: rgba(169,227,75,.12); }
.row.locked .ttl { color: #56606C; }
.row.locked .ico { color: #454F5A; }
.row.locked:hover { background: #141920; }

.hint {
  display: flex; align-items: center; gap: 9px; margin: 2px 12px 8px 62px;
  padding: 10px 13px; border-radius: 9px; background: #171C23;
  border: 1px solid var(--line-2); font-size: 12.5px; color: var(--mid);
}
.hint svg { color: var(--lo); flex: none; }

/* ── урок ───────────────────────────────────────── */
.cols { display: flex; gap: 28px; align-items: flex-start; }
.col-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 22px; }
.col-side { width: 340px; flex: none; display: flex; flex-direction: column; gap: 16px; }

.player {
  position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden;
  background: radial-gradient(120% 120% at 30% 20%, #1A212A 0%, #0D1116 62%);
  border: 1px solid var(--line);
}
.player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.player .stub {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 14px; text-align: center; padding: 24px;
}
.player .grid {
  position: absolute; inset: 0;
  background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 44px 44px;
}
.stub .ring {
  width: 76px; height: 76px; border-radius: 50%; border: 1px dashed var(--line-2);
  color: var(--dim); display: flex; align-items: center; justify-content: center;
}
.stub .t { font-size: 15px; font-weight: 500; color: var(--mid); }
.stub .s { font-size: 12.5px; color: var(--lo); max-width: 420px; line-height: 1.6; }

.meta { font-size: 11.5px; letter-spacing: .08em; color: var(--lo); margin-bottom: 10px; font-family: var(--mono); }
.lead { margin: 0; font-size: 15px; line-height: 1.65; color: var(--mid); max-width: 660px; }

.rate { padding: 24px; }
.rate-top { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.rate-t { font-size: 16px; font-weight: 600; margin-bottom: 5px; }
.rate-s { font-size: 13.5px; color: var(--mid); }
.stars { display: flex; align-items: center; gap: 4px; }
.star {
  width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
  border-radius: 10px; color: #3D4753; transition: color .12s, background .12s;
}
.star svg { fill: none; }
.star:hover { background: #1B2129; }
.stars:hover .star { color: #3D4753; }
.star.lit, .stars:hover .star.pre { color: var(--accent); }
.star.lit svg, .stars:hover .star.pre svg { fill: currentColor; }

.comment { margin-top: 20px; padding-top: 20px; border-top: 1px solid #1F252E; }
.comment label { display: block; font-size: 13.5px; color: var(--mid); margin-bottom: 10px; }
.comment textarea {
  width: 100%; height: 84px; padding: 13px 15px; border-radius: 10px;
  background: var(--sunk); border: 1px solid var(--line-2); color: var(--hi);
  font-size: 14px; resize: vertical; outline: none;
}
.comment textarea:focus { border-color: var(--accent); }
.comment .row2 { display: flex; justify-content: flex-end; align-items: center; gap: 14px; margin-top: 12px; }
.btn-soft { height: 44px; padding: 0 20px; border-radius: 10px; background: #1F252E; color: var(--hi); font-size: 14px; font-weight: 500; }
.btn-soft:hover { background: #262E39; }

.done-btn {
  width: 100%; height: 48px; border-radius: 10px; display: flex; align-items: center;
  justify-content: center; gap: 9px; font-size: 14.5px; font-weight: 600;
  background: var(--accent); color: var(--bg);
}
.done-btn:hover { background: var(--accent-hi); }
.done-btn.is-done { background: transparent; border: 1px solid rgba(169,227,75,.45); color: var(--accent); }
.done-btn.is-done:hover { background: rgba(169,227,75,.08); }
.done-btn .tick { display: none; }
.done-btn.is-done .tick { display: block; }

.mats { padding: 18px 10px 14px; }
.mats .cap { padding: 0 12px; margin-bottom: 10px; display: block; }
.mat { display: flex; align-items: center; gap: 13px; padding: 12px; border-radius: 10px; }
.mat:hover { background: #171C23; }
.mat .mi {
  width: 36px; height: 36px; flex: none; border-radius: 10px; background: #1F252E;
  color: var(--mid); display: flex; align-items: center; justify-content: center;
}
.mat:hover .mi { color: var(--accent); }
.mat .mn { font-size: 14px; font-weight: 500; }
.mat .ms { font-size: 11.5px; color: var(--lo); margin-top: 2px; }
.mat .ma { color: var(--dim); flex: none; display: flex; }

.next .lk {
  width: 32px; height: 32px; flex: none; border-radius: 9px; background: #1F252E;
  color: var(--lo); display: flex; align-items: center; justify-content: center;
}

/* ── общее ──────────────────────────────────────── */
.empty { padding: 48px 20px; text-align: center; color: var(--lo); font-size: 14px; line-height: 1.6; }
.empty b { display: block; color: var(--hi); font-size: 18px; font-weight: 600; margin-bottom: 8px; }
.loading { padding: 48px 20px; text-align: center; color: var(--lo); font-size: 13.5px; }

.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 100;
  max-width: 520px; padding: 13px 18px; border-radius: 10px; font-size: 14px; line-height: 1.5;
  box-shadow: 0 12px 32px rgba(0,0,0,.5);
}
.toast.bad { background: #2A1614; border: 1px solid rgba(242,133,107,.45); color: var(--danger); }
.toast.ok  { background: #172113; border: 1px solid rgba(169,227,75,.40); color: var(--accent); }

.offline {
  min-height: 100vh; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 12px; text-align: center; padding: 40px 24px;
}
.offline b { font-size: 22px; font-weight: 600; }
.offline span { font-size: 14.5px; color: var(--mid); max-width: 460px; line-height: 1.6; }
.offline .cmd {
  margin-top: 10px; padding: 12px 16px; border-radius: 9px; font-family: var(--mono); font-size: 13px;
  background: var(--surface); border: 1px solid var(--line-2); color: var(--accent);
}

@media (max-width: 1180px) { .cols { flex-direction: column; } .col-side { width: 100%; } }
@media (max-width: 860px) {
  .layout { flex-direction: column; }
  .rail { position: static; height: auto; width: 100%; flex-direction: row; align-items: center;
          gap: 16px; padding: 12px 16px; border-right: 0; border-bottom: 1px solid var(--line-soft); }
  .menu, .who { display: none; }
  main { padding: 24px 20px 56px; }
  h1 { font-size: 25px; }
  .row .dur { display: none; }
}

/* ── отклики ────────────────────────────────────── */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
.tile { padding: 20px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); }
.tile .k { font-family: var(--mono); font-size: 10.5px; letter-spacing: .09em; color: var(--lo); }
.tile .v { font-size: 28px; font-weight: 600; letter-spacing: -.02em; margin-top: 10px; line-height: 1.1; }
.tile .n { font-size: 12px; color: var(--lo); margin-top: 6px; }
.tile.accent .v { color: var(--accent); }

.apps table { width: 100%; border-collapse: collapse; }
.apps thead th {
  /* см. admin/app.css: --lo на тёмной панели не читается */
  text-align: left; font-family: var(--mono); font-size: 13px; letter-spacing: .06em;
  color: var(--mid); font-weight: 500; white-space: nowrap;
  padding: 22px 20px 15px; border-bottom: 1px solid var(--line);
}
.apps tbody td { padding: 15px 20px; border-bottom: 1px solid var(--line-soft); font-size: 14px; vertical-align: middle; }
.apps tbody tr:last-child td { border-bottom: 0; }
.apps tbody tr:hover { background: #141920; }
.apps thead th:last-child, .apps tbody td:last-child { width: 1%; white-space: nowrap; }
.apps .co { font-weight: 600; }
.apps .pos { font-size: 12.5px; color: var(--lo); margin-top: 3px; }
.apps .dt { font-family: var(--mono); font-size: 12.5px; color: var(--mid); }

/* Статус меняется прямо в строке: ради одной смены стадии открывать
   отдельную форму — лишний шаг в самом частом действии. */
.st-select {
  appearance: none; height: 34px; padding: 0 30px 0 12px; border-radius: 8px;
  font-size: 13px; font-weight: 500; cursor: pointer; border: 1px solid transparent;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23939FAD' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9.5l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 8px center;
}
.st-select:hover { border-color: var(--line-2); }
.st-applied   { background-color: #1B2129; color: var(--mid); }
.st-screening { background-color: rgba(127,178,242,.12); color: var(--info); }
.st-tech      { background-color: rgba(127,178,242,.16); color: #A8CBF7; }
.st-final     { background-color: rgba(242,180,91,.14); color: #F2B45B; }
.st-offer     { background-color: rgba(169,227,75,.14); color: var(--accent); }
.st-rejected  { background-color: rgba(242,133,107,.12); color: var(--danger); }

.amount {
  width: 130px; height: 34px; padding: 0 10px; border-radius: 8px;
  background: var(--sunk); border: 1px solid var(--line-2); color: var(--hi);
  font-size: 13.5px; font-family: var(--mono); outline: none;
}
.amount:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(169,227,75,.12); }
.amount::-webkit-outer-spin-button, .amount::-webkit-inner-spin-button { appearance: none; margin: 0; }
.amount-shown { font-family: var(--mono); font-size: 13.5px; color: var(--accent); }
.amount-none { font-size: 13px; color: var(--dim); }

.icobtn {
  width: 34px; height: 34px; border-radius: 8px; display: flex; align-items: center;
  justify-content: center; color: var(--lo); flex: none;
}
.icobtn:hover { background: #171C23; color: var(--danger); }

.addform { padding: 22px; }
.addform .fields { display: flex; flex-direction: column; gap: 18px; }
.addform .frow { display: flex; gap: 14px; }
.addform .frow > * { flex: 1; min-width: 0; }
.addform .label {
  display: block; font-family: var(--mono); font-size: 11.5px; letter-spacing: .07em;
  color: var(--lo); margin-bottom: 10px;
}
.addform .label .req { color: var(--accent-dark); }
.addform .field {
  width: 100%; height: 46px; padding: 0 14px; border-radius: 9px;
  background: var(--sunk); border: 1px solid var(--line-2); color: var(--hi);
  font-size: 14.5px; outline: none;
}
.addform .field::placeholder { color: var(--dim); }
.addform .field:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(169,227,75,.12); }
.addform .field.bad { border-color: var(--danger); }
.addform .err { font-size: 13px; color: var(--danger); }

.filters { display: flex; gap: 8px; flex-wrap: wrap; }
.filters button {
  height: 40px; padding: 0 16px; border-radius: 9px; font-size: 13.5px; font-weight: 500;
  color: var(--mid); border: 1px solid transparent;
}
.filters button:hover { color: var(--hi); background: var(--surface); }
.filters button.on { background: #171C23; border-color: var(--line-2); color: var(--hi); }
.filters button .c { font-family: var(--mono); font-size: 11.5px; color: var(--lo); margin-left: 6px; }
.filters button.on .c { color: var(--accent-dark); }

@media (max-width: 900px) {
  .apps table, .apps thead, .apps tbody, .apps tr, .apps td { display: block; }
  .apps thead { display: none; }
  .apps tbody tr { border: 1px solid var(--line); border-radius: 12px; margin-bottom: 10px; padding: 6px; }
  .apps tbody td { border: 0; padding: 8px 10px; }
  .addform .frow { flex-direction: column; }
}

/* ── воронка ────────────────────────────────────── */
.funnel-wrap { display: flex; gap: 16px; align-items: stretch; }
.funnel { flex: 1; min-width: 0; padding: 24px 26px; }
.funnel h2 { margin: 0 0 4px; font-size: 17px; font-weight: 600; font-family: var(--display); }
.funnel .fsub { font-size: 12.5px; color: var(--lo); margin-bottom: 22px; }

.fstep { display: flex; align-items: center; gap: 14px; padding: 7px 0; }
.fstep .flabel { width: 104px; flex: none; font-size: 14px; }
.fstep .fnum { width: 34px; flex: none; text-align: right; font-family: var(--mono); font-size: 15px; font-weight: 500; }
.ftrack { flex: 1; min-width: 0; height: 26px; border-radius: 6px; background: #161B22; overflow: hidden; }
.ffill { display: block; height: 100%; border-radius: 6px; transition: width .3s; min-width: 3px; }
.fstep .fshare { width: 46px; flex: none; text-align: right; font-family: var(--mono); font-size: 13px; color: var(--mid); }
.fstep .fconv { width: 84px; flex: none; text-align: right; font-size: 12px; color: var(--lo); white-space: nowrap; }
.fstep .fconv.weak { color: var(--danger); }

.f-vacancies { background: #3A4552; }
.f-applied   { background: #4C5A6B; }
.f-screening { background: #5D86BA; }
.f-tech      { background: #7FB2F2; }
.f-final     { background: #F2B45B; }
.f-offer     { background: var(--accent); }

.money { width: 260px; flex: none; display: flex; flex-direction: column; gap: 16px; }
.money .tile { flex: 1; display: flex; flex-direction: column; justify-content: center; }

@media (max-width: 1000px) {
  .funnel-wrap { flex-direction: column; }
  .money { width: 100%; flex-direction: row; }
  .fstep .fconv { display: none; }
  .fstep .flabel { width: 88px; font-size: 13px; }
}

.contact { font-size: 13px; color: var(--mid); }

/* ── закреплённая полоса действий ────────────────────────────────
   Прилипает к верху: обе кнопки — про то, что происходит редко,
   но именно в такой момент их не должно приходиться искать. */
.pinbar {
  position: sticky; top: 0; z-index: 30; margin: -32px -40px 0; padding: 12px 40px;
  display: flex; align-items: center; gap: 10px;
  background: rgba(10,12,15,.86); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line-soft);
}
.pinbar .sp { flex: 1; }
.pin {
  display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px;
  border-radius: 8px; font-size: 13px; font-weight: 500; white-space: nowrap;
}
.pin.offer { background: var(--accent); color: var(--bg); font-weight: 600; }
.pin.offer:hover { background: var(--accent-hi); }
.pin.help { border: 1px solid var(--line-2); color: var(--mid); }
.pin.help:hover { color: var(--hi); border-color: var(--lo); }
.pin.help.pending { border-color: rgba(242,180,91,.45); color: #F2B45B; }
.pin svg { flex: none; }

.helpbox { padding: 22px; }
.helpbox .ht { font-size: 16px; font-weight: 600; margin-bottom: 5px; }
.helpbox .hs { font-size: 13.5px; color: var(--lo); line-height: 1.55; margin-bottom: 18px; }
.topics { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.topic {
  height: 38px; padding: 0 14px; border-radius: 9px; border: 1px solid var(--line-2);
  font-size: 13.5px; font-weight: 500; color: var(--mid);
}
.topic:hover { color: var(--hi); border-color: var(--lo); }
.topic.on { background: rgba(169,227,75,.10); border-color: rgba(169,227,75,.45); color: var(--accent); }

.pending-note {
  display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-radius: 11px;
  background: rgba(242,180,91,.07); border: 1px solid rgba(242,180,91,.28);
  font-size: 13.5px; line-height: 1.55; color: var(--mid); margin-bottom: 16px;
}
.pending-note svg { color: #F2B45B; flex: none; margin-top: 1px; }
.pending-note b { color: var(--hi); font-weight: 500; }
.pending-note .cancel { color: var(--lo); font-size: 12.5px; text-decoration: underline; margin-top: 6px; display: inline-block; }
.pending-note .cancel:hover { color: var(--danger); }

@media (max-width: 900px) {
  .pinbar { margin: -24px -20px 0; padding: 10px 20px; }
  .pin span:not(.only) { display: none; }
  .pin.offer span { display: inline; }
}

/* ── чаты курса ──────────────────────────────────────────────────── */
.chatlinks { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; }
.chatlink {
  display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 13px;
  background: var(--surface); border: 1px solid var(--line); transition: border-color .15s, transform .15s;
}
.chatlink:hover { border-color: rgba(169,227,75,.40); transform: translateY(-2px); }
.chatlink .ci {
  width: 42px; height: 42px; flex: none; border-radius: 12px; background: #1B2129;
  color: var(--accent); display: flex; align-items: center; justify-content: center;
}
.chatlink .cb { flex: 1; min-width: 0; }
.chatlink .cb b { display: block; font-size: 15.5px; font-weight: 600; }
.chatlink .cb span { display: block; font-size: 12.5px; color: var(--lo); margin-top: 3px; }
.chatlink .ca { color: var(--dim); flex: none; display: flex; }
.chatlink:hover .ca { color: var(--accent); }