:root {
  --bg: #0e1014;
  --bg-soft: #161922;
  --bg-card: #1b1f29;
  --bg-elev: #20242f;
  --border: #2a2f3b;
  --text: #e7e9ee;
  --muted: #8b93a3;
  --accent: #2ee67a;            /* яркий зелёный — фирменный акцент */
  --nutmeg: #80461b;            /* Nutmeg — фирменный (запас) */
  /* цвета веток — яркие и различимые на тёмном */
  --tech: #2ee67a;              /* зелёный — знания */
  --task: #ff9f43;             /* оранжевый — практика */
  --soft: #b388ff;             /* фиолетовый — софт */
  --topbar-h: 56px;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg); color: var(--text);
  font: 15px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.ico { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2;
       stroke-linecap: round; stroke-linejoin: round; vertical-align: -3px; }
.ico.big { width: 30px; height: 30px; }

/* ---- topbar ---- */
.topbar {
  position: sticky; top: 0; z-index: 30; height: var(--topbar-h);
  display: flex; align-items: center; gap: 18px; padding: 0 20px;
  background: var(--bg-soft); border-bottom: 1px solid var(--border);
}
.logo { font-weight: 800; font-size: 18px; color: var(--text); letter-spacing: -.3px; }
.logo span { color: var(--accent); }
.burger { display: none; background: none; border: none; color: var(--text);
          font-size: 20px; cursor: pointer; }
.search-box { display: flex; align-items: center; gap: 8px; flex: 1; max-width: 460px;
  background: var(--bg-elev); border: 1px solid var(--border); border-radius: 10px; padding: 0 12px; }
.search-box .ico { color: var(--muted); }
.search-box input { flex: 1; background: none; border: none; outline: none;
  color: var(--text); font-size: 14px; padding: 9px 0; }

/* ---- layout ---- */
.layout { display: flex; align-items: flex-start; }
.sidebar {
  position: sticky; top: var(--topbar-h); align-self: flex-start;
  width: 290px; min-width: 290px; height: calc(100vh - var(--topbar-h));
  overflow-y: auto; padding: 16px 12px 40px; border-right: 1px solid var(--border);
  background: var(--bg-soft);
}
.content { flex: 1; min-width: 0; max-width: 920px; padding: 26px 32px 70px; }

/* ---- sidebar ---- */
.side-links { display: flex; flex-direction: column; gap: 2px; margin-bottom: 14px; }
.side-links a { display: flex; align-items: center; gap: 10px; padding: 9px 10px;
  border-radius: 8px; color: var(--text); }
.side-links a:hover { background: var(--bg-elev); text-decoration: none; }
.side-links a.on { background: var(--bg-elev); color: var(--accent); }
.side-links a.reserved { color: var(--muted); opacity: .45; pointer-events: none; }
.reserved-block { opacity: .5; }
.side-recent { display: flex; justify-content: space-between; align-items: center;
  padding: 8px 10px; margin-bottom: 14px; border: 1px dashed var(--border); border-radius: 8px; }
.side-cap { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--muted); margin: 6px 10px; }

.tree-branch { margin-bottom: 8px; }
.tb-head { display: flex; align-items: center; gap: 8px; padding: 6px 10px;
  font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; }
.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--muted); flex: none; }
.b-tech .dot, .b-tech.dot { background: var(--tech); }
.b-task .dot { background: var(--task); }
.b-soft .dot { background: var(--soft); }
.tb-head .count { margin-left: auto; }
.count { color: var(--muted); font-size: 12px; font-weight: 400; }

.tree-sec { margin: 0 0 1px 6px; }
.tree-sec > summary { cursor: pointer; list-style: none; padding: 5px 10px; border-radius: 7px;
  font-size: 13.5px; display: flex; gap: 8px; color: var(--text); }
.tree-sec > summary::-webkit-details-marker { display: none; }
.tree-sec > summary:hover { background: var(--bg-elev); }
.tree-sec > summary .count { margin-left: auto; }
.tree-sec ul { list-style: none; margin: 2px 0 6px; padding: 0 0 0 18px; }
.tree-sec li a { display: flex; gap: 8px; padding: 4px 8px; border-radius: 6px;
  font-size: 13px; color: var(--muted); }
.tree-sec li a:hover { background: var(--bg-elev); color: var(--text); text-decoration: none; }
.tree-sec li a .count { margin-left: auto; }
.tree-sec li a.on { background: var(--bg-elev); color: var(--text); font-weight: 600;
  box-shadow: inset 3px 0 0 var(--accent); }
.b-task .tree-sec li a.on { box-shadow: inset 3px 0 0 var(--task); }
.b-soft .tree-sec li a.on { box-shadow: inset 3px 0 0 var(--soft); }

/* ---- typography ---- */
h1 { font-size: 27px; margin: 0 0 14px; letter-spacing: -.4px; }
h2 { font-size: 20px; }
h3 { font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; margin: 0 0 10px; }
.subtitle { color: var(--muted); margin-top: -6px; }
.breadcrumbs { color: var(--muted); font-size: 13px; margin-bottom: 14px; }
.breadcrumbs span { margin: 0 5px; }

/* branch helpers */
.branch-tag { font-size: 11px; padding: 1px 8px; border-radius: 20px; border: 1px solid currentColor; white-space: nowrap; }
.b-tech.branch-tag, .branch-tag.b-tech { color: var(--tech); }
.b-task.branch-tag, .branch-tag.b-task { color: var(--task); }
.b-soft.branch-tag, .branch-tag.b-soft { color: var(--soft); }
.bar { width: 4px; align-self: stretch; border-radius: 3px; background: var(--muted); flex: none; }
.b-tech > .bar, .b-tech .bar { background: var(--tech); }
.b-task > .bar, .b-task .bar { background: var(--task); }
.b-soft > .bar, .b-soft .bar { background: var(--soft); }

/* ---- home ---- */
.hero { margin-bottom: 24px; }
.entry-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 34px; }
.entry-card { display: block; padding: 22px; background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 14px; color: var(--text); transition: border-color .15s, transform .15s; }
.entry-card:hover { text-decoration: none; transform: translateY(-2px); }
.entry-card .ico { margin-bottom: 8px; }
.ec-questions:hover { border-color: var(--tech); } .ec-questions .ico { color: var(--tech); }
.ec-interviews:hover { border-color: var(--soft); } .ec-interviews .ico { color: var(--soft); }
.entry-card h2 { margin: 0 0 6px; } .entry-card p { margin: 0; color: var(--muted); }
.top-list { list-style: none; padding: 0; }
.top-list li { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 8px; }
.top-list li:hover { background: var(--bg-soft); }
.top-list .bar { height: 18px; }
.top-list a { flex: 1; color: var(--text); }
.freq { color: var(--muted); font-size: 12.5px; white-space: nowrap; }

/* ---- catalog overview ---- */
.branch-overview { margin-bottom: 26px; }
.branch-head { display: flex; align-items: center; gap: 10px; }
.ov-sections { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.ov-section { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; }
.ov-sec-title { font-weight: 600; margin-bottom: 8px; display: flex; }
.ov-sec-title .count { margin-left: auto; }
.ov-themes { list-style: none; margin: 0; padding: 0; }
.ov-themes li { display: flex; gap: 8px; padding: 4px 0; }
.ov-themes li a { flex: 1; }
.ov-themes .count { margin-left: auto; }

/* ---- theme + question lists ---- */
.themed-title { display: flex; align-items: center; gap: 12px; }
.qlist { list-style: none; padding: 0; margin: 14px 0; }
.qlist li { display: flex; align-items: baseline; gap: 10px; padding: 11px 12px; border-radius: 9px;
  border-left: 3px solid transparent; }
.qlist li:hover { background: var(--bg-soft); }
.b-tech.qlist li, .qlist li.b-tech:hover { border-left-color: var(--tech); }
.qlist li.b-task:hover { border-left-color: var(--task); }
.qlist li.b-soft:hover { border-left-color: var(--soft); }
.qlist li a { flex: 1; color: var(--text); font-size: 15px; }
.qlist.big li { padding: 13px 14px; }
.low { font-size: 10.5px; color: #e09c9c; border: 1px solid #6b3b3b; border-radius: 8px; padding: 0 6px; }

/* ---- question page ---- */
.q-head { display: flex; gap: 18px; align-items: flex-start; border-left: 4px solid var(--border);
  padding-left: 16px; margin-bottom: 22px; }
.q-head.b-tech { border-color: var(--tech); } .q-head.b-task { border-color: var(--task); } .q-head.b-soft { border-color: var(--soft); }
.q-head-main { flex: 1; }
.question-text { font-size: 26px; line-height: 1.32; margin: 2px 0 12px; }
.meta-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.freq-plate { background: var(--bg-elev); border: 1px solid var(--border); border-radius: 8px; padding: 4px 12px; font-size: 13px; }
.freq-plate b { color: var(--accent); }
.q-actions { display: flex; gap: 6px; flex-wrap: wrap; max-width: 180px; }
.q-actions .act { background: var(--bg-elev); border: 1px solid var(--border); color: var(--muted);
  border-radius: 8px; padding: 5px 9px; font-size: 12px; cursor: not-allowed; }
.occ-block { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 16px 18px; margin-bottom: 16px; }
/* «Где задавался» — основной способ разобрать вопрос, делаем заметнее */
.occ-block.prominent { border-color: rgba(46,230,122,.35); border-left: 4px solid var(--accent);
  background: linear-gradient(180deg, rgba(46,230,122,.05), transparent 60%), var(--bg-card); }
.occ-head { margin-bottom: 10px; }
.occ-block h3 { color: var(--accent); text-transform: none; letter-spacing: 0; font-size: 17px; margin: 0; }
.occ-hint { color: var(--muted); font-size: 13px; margin: 4px 0 0; }
.occ-list { list-style: none; padding: 0; margin: 0; }
.occ-list li { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--border); }
.occ-list li:last-child { border-bottom: none; }
.occ-list .occ-name { color: var(--text); } .occ-list li:hover .occ-name { color: var(--accent); }
.tc { font-variant-numeric: tabular-nums; color: var(--accent); white-space: nowrap; }

/* ---- interviews ---- */
.interview-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.interview-card { display: flex; flex-direction: column; gap: 6px; padding: 15px 16px; background: var(--bg-card);
  border: 1px solid var(--border); border-radius: 12px; color: var(--text); border-top: 3px solid var(--soft); }
.interview-card:hover { border-color: var(--soft); text-decoration: none; transform: translateY(-2px); transition: .15s; }
.iv-name { font-weight: 600; } .iv-count { color: var(--muted); font-size: 12.5px; }
.iv-title-row { display: flex; align-items: center; gap: 14px; justify-content: space-between; }
.listened { font-size: 12px; color: var(--muted); border: 1px dashed var(--border); border-radius: 20px; padding: 3px 12px; }
.back-to-question { display: inline-block; margin-bottom: 14px; padding: 9px 14px; background: var(--bg-elev);
  border: 1px solid var(--border); border-radius: 10px; color: var(--text); }
.back-to-question:hover { border-color: var(--accent); text-decoration: none; }
.back-to-question span { color: var(--accent); }
.player-stub { background: var(--bg-card); border: 1px dashed var(--border); border-radius: 12px;
  padding: 20px; text-align: center; color: var(--muted); margin-bottom: 20px; }
.iv-q-list { list-style: none; padding: 0; margin: 0; }
.iv-q-list li { display: flex; align-items: baseline; gap: 12px; padding: 9px 8px; border-radius: 8px;
  border-left: 3px solid transparent; }
.iv-q-list li:hover { background: var(--bg-soft); }
.iv-q-list li.b-tech:hover { border-left-color: var(--tech); }
.iv-q-list li.b-task:hover { border-left-color: var(--task); }
.iv-q-list li.b-soft:hover { border-left-color: var(--soft); }
.iv-q-list .tc { min-width: 58px; } .iv-q-list a { flex: 1; color: var(--text); }
/* строка-якорь не должна прятаться под липкой шапкой */
.iv-q-list li { scroll-margin-top: 76px; }
/* все вхождения вопроса, с которого пришли */
.iv-q-list li.from-q { background: rgba(46,230,122,.06); }
/* конкретная реплика по таймкоду (#t=N) — яркая подсветка с затухающим импульсом */
.iv-q-list li:target {
  background: rgba(46,230,122,.16);
  border-left-color: var(--accent);
  box-shadow: inset 0 0 0 1px rgba(46,230,122,.35);
  animation: targetPulse 1.6s ease-out 1;
}
.iv-q-list li:target .tc { color: var(--accent); font-weight: 700; }
@keyframes targetPulse {
  0% { background: rgba(46,230,122,.42); }
  100% { background: rgba(46,230,122,.16); }
}

/* ---- бейдж повторов ×N ---- */
.times { font-size: 11px; color: var(--muted); border: 1px solid var(--border);
  border-radius: 8px; padding: 0 6px; white-space: nowrap; }

/* ---- кнопка помощи в шапке ---- */
.help-btn { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--border);
  background: var(--bg-elev); color: var(--muted); font-weight: 700; cursor: pointer; flex: none; }
.help-btn:hover { color: var(--accent); border-color: var(--accent); }

/* ---- модальное обучение ---- */
body.guide-locked { overflow: hidden; }
.guide-overlay { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center;
  justify-content: center; padding: 20px; background: rgba(6,8,12,.78); backdrop-filter: blur(3px); }
.guide-overlay[hidden] { display: none; }
/* режим прожектора: затемнение даёт сам спотлайт, фон оверлея прозрачный */
.guide-overlay.spotlighting { background: transparent; backdrop-filter: none; }
.gm-spotlight { position: fixed; z-index: 1000; display: none; border-radius: 12px;
  border: 2px solid var(--accent); pointer-events: none; transition: all .28s cubic-bezier(.4,0,.2,1);
  box-shadow: 0 0 0 9999px rgba(6,8,12,.82), 0 0 22px rgba(46,230,122,.55),
              inset 0 0 16px rgba(46,230,122,.35); animation: spotPulse 1.8s ease-in-out infinite; }
@keyframes spotPulse {
  0%,100% { box-shadow: 0 0 0 9999px rgba(6,8,12,.82), 0 0 18px rgba(46,230,122,.45), inset 0 0 14px rgba(46,230,122,.3); }
  50% { box-shadow: 0 0 0 9999px rgba(6,8,12,.82), 0 0 28px rgba(46,230,122,.7), inset 0 0 20px rgba(46,230,122,.45); }
}
/* окно прижимается вниз, чтобы не перекрывать подсвеченный блок */
.guide-modal.docked { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%);
  margin: 0; z-index: 1002; max-width: 520px; }
.guide-modal.docked .gm-body { max-height: 34vh; }
.guide-modal { width: 100%; max-width: 560px; background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 16px; padding: 22px 24px; box-shadow: 0 20px 60px rgba(0,0,0,.6); }
.gm-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.gm-head h2 { margin: 0; font-size: 20px; }
.gm-step { color: var(--muted); font-size: 13px; white-space: nowrap; }
.gm-step b { color: var(--accent); }
.gm-dots { display: flex; gap: 7px; margin: 14px 0 16px; flex-wrap: wrap; }
.gm-dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--border); transition: .2s; }
.gm-dots i.done { background: var(--soft); }
.gm-dots i.cur { background: var(--accent); box-shadow: 0 0 0 3px rgba(46,230,122,.2); }
.gm-body { max-height: min(52vh, 420px); overflow-y: auto; }
.gm-card { display: none; }
.gm-card.active { display: block; animation: gmIn .22s ease; }
@keyframes gmIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.gm-card h3 { color: var(--accent); text-transform: none; letter-spacing: 0; font-size: 17px; margin: 0 0 10px; }
.gm-text { color: var(--text); line-height: 1.6; }
.gm-text p { margin: 0 0 10px; }
.gm-text ul { margin: 8px 0; padding-left: 4px; list-style: none; }
.gm-text li { padding: 4px 0; display: flex; align-items: baseline; gap: 9px; }
.cdot { width: 9px; height: 9px; border-radius: 50%; background: var(--muted); flex: none; transform: translateY(1px); }
.cdot.b-tech { background: var(--tech); } .cdot.b-task { background: var(--task); } .cdot.b-soft { background: var(--soft); }
.gm-nav { display: flex; align-items: center; gap: 10px; margin-top: 18px; }
.gm-nav button { background: var(--bg-elev); border: 1px solid var(--border); color: var(--text);
  border-radius: 9px; padding: 10px 18px; font-size: 14px; cursor: pointer; }
.gm-nav button:disabled { opacity: .4; cursor: not-allowed; }
.gm-prev { margin-right: auto; }
.gm-close { color: var(--muted); }
.gm-next { background: var(--accent) !important; color: #04210f !important; border: none !important; font-weight: 700; }
@media (max-width: 640px) {
  .guide-modal { padding: 18px 16px; } .gm-body { max-height: 60vh; }
}

/* ---- search ---- */
.search-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.search-filters .sf-text { flex: 1; min-width: 200px; }
.search-filters input, .search-filters select { background: var(--bg-elev); border: 1px solid var(--border);
  color: var(--text); border-radius: 8px; padding: 8px 10px; font-size: 14px; }
.search-filters button { background: var(--accent); color: #04210f; border: none; border-radius: 8px;
  padding: 8px 18px; font-weight: 700; cursor: pointer; }
.search-summary { color: var(--muted); margin-bottom: 14px; }
.search-group { margin-bottom: 20px; }
.sg-head { color: var(--text); text-transform: none; font-size: 15px; border-bottom: 1px solid var(--border); padding-bottom: 6px; }
.empty { color: var(--muted); }

/* ---- pager ---- */
.pager { display: flex; justify-content: center; align-items: center; gap: 18px; margin-top: 26px; }
.pager .disabled { color: var(--muted); opacity: .45; }
.page-info { color: var(--muted); font-size: 13px; }

/* ---- responsive ---- */
@media (max-width: 900px) {
  .burger { display: block; }
  .sidebar { position: fixed; left: 0; top: var(--topbar-h); z-index: 25; transform: translateX(-100%);
    transition: transform .2s; box-shadow: 4px 0 20px rgba(0,0,0,.5); }
  body.nav-open .sidebar { transform: translateX(0); }
  .content { padding: 20px 18px 60px; }
  .entry-cards { grid-template-columns: 1fr; }
  .q-head { flex-direction: column; } .q-actions { max-width: none; }
}

/* ============ слой пользователей ============ */

/* шапка: пользователь / вход */
.user-box { display: flex; align-items: center; gap: 12px; }
.u-name { color: var(--text); font-weight: 600; font-size: 14px; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.u-link { color: var(--muted); font-size: 14px; }
.u-link:hover { color: var(--text); text-decoration: none; }
.login-link { color: var(--accent); font-weight: 600; }

/* индикаторы прогресса в списках — текстовые бейджи */
.qind { display: inline-flex; gap: 6px; align-items: center; margin-left: 2px; flex-wrap: wrap; }
.qb { font-size: 11.5px; line-height: 1.5; padding: 1px 9px; border-radius: 20px;
  border: 1px solid currentColor; white-space: nowrap; font-weight: 600; }
.qb.st-learning { color: var(--task); } .qb.st-learned { color: var(--tech); }
.qb.c-shaky { color: #e8788a; } .qb.c-ok { color: var(--task); } .qb.c-confident { color: var(--tech); }
.qb-star { color: var(--accent); font-size: 14px; padding: 0 7px; }
.qb-fail { color: #e8788a; }
.qb-note { color: var(--accent); cursor: help; position: relative; }
/* кастомный тултип на бейдже «Заметка» — сразу при наведении */
.qb-note:hover::after {
  content: attr(data-tip); position: absolute; left: 0; bottom: calc(100% + 8px); z-index: 60;
  background: var(--bg-elev); border: 1px solid var(--border); color: var(--text);
  padding: 8px 11px; border-radius: 9px; font-size: 13px; font-weight: 400; line-height: 1.45;
  white-space: pre-wrap; width: max-content; max-width: 340px; box-shadow: 0 10px 28px rgba(0,0,0,.55); }

/* панель контролов на странице вопроса (Вариант A) */
.qc-bar { background: var(--bg-soft); border: 1px solid var(--border); border-radius: 12px;
  padding: 12px 14px; margin-bottom: 18px; }
.qc-main { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.qc-sub { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 13px; color: var(--muted); flex-wrap: wrap; }
.seg { display: inline-flex; border: 1px solid var(--border); border-radius: 9px; overflow: hidden; }
.seg button { background: var(--bg-elev); color: var(--muted); border: none; border-right: 1px solid var(--border);
  padding: 7px 14px; font-size: 13px; cursor: pointer; }
.seg button:last-child { border-right: none; }
.seg button:hover { color: var(--text); }
.seg button.on { background: var(--accent); color: #04210f; font-weight: 700; }
.iconbtn { background: var(--bg-elev); border: 1px solid var(--border); color: var(--muted);
  border-radius: 9px; padding: 7px 12px; font-size: 13px; cursor: pointer; }
.iconbtn:hover { color: var(--text); }
.qc-fav.on { color: var(--accent); border-color: var(--accent); }
.qc-failed.on { color: #e8788a; border-color: #6b3b44; }
.qc-note-btn.has-note { color: var(--accent); border-color: var(--accent); }
.qc-note { position: relative; }
.qc-note-panel { position: absolute; top: 110%; left: 0; z-index: 20; width: 340px; max-width: 80vw;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; padding: 10px; box-shadow: 0 12px 30px rgba(0,0,0,.5); }
.qc-note-panel textarea { width: 100%; background: var(--bg-elev); border: 1px solid var(--border); color: var(--text);
  border-radius: 8px; padding: 8px; resize: vertical; font: inherit; }
.qc-note-save { margin-top: 8px; background: var(--accent); color: #04210f; border: none; border-radius: 8px; padding: 6px 14px; font-weight: 700; cursor: pointer; }
.qc-conf { display: inline-flex; gap: 4px; }
.qc-conf button { background: none; border: 1px solid var(--border); color: var(--muted); border-radius: 20px;
  padding: 2px 10px; font-size: 12px; cursor: pointer; }
.qc-conf button.on { background: var(--soft); color: #1a1030; border-color: var(--soft); font-weight: 700; }
.qc-archive { margin-left: auto; background: none; border: none; color: var(--muted); font-size: 12px; cursor: pointer; text-decoration: underline; }
.qc-archive.on { color: #e8a05a; }
.qc-anon { background: var(--bg-soft); border: 1px dashed var(--border); border-radius: 10px; padding: 10px 14px; margin-bottom: 18px; color: var(--muted); }
.qc-anon a { font-weight: 600; }

/* кнопка «прослушано» */
.iv-listened { background: var(--bg-elev); border: 1px solid var(--border); color: var(--muted);
  border-radius: 20px; padding: 5px 14px; font-size: 13px; cursor: pointer; }
.iv-listened:hover { color: var(--text); }
.iv-listened.on { background: var(--soft); color: #1a1030; border-color: var(--soft); font-weight: 700; }

/* фильтры прогресса в поиске */
.pfilter { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); font-size: 13px; cursor: pointer; }

/* страница входа */
.login-card { max-width: 380px; margin: 30px auto; background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 14px; padding: 26px; }
.login-form { display: flex; flex-direction: column; gap: 14px; margin: 16px 0; }
.login-form label { display: flex; flex-direction: column; gap: 5px; font-size: 13px; color: var(--muted); }
.login-form input { background: var(--bg-elev); border: 1px solid var(--border); color: var(--text);
  border-radius: 8px; padding: 10px; font-size: 15px; }
.login-form button { background: var(--accent); color: #04210f; border: none; border-radius: 8px; padding: 11px; font-weight: 700; font-size: 15px; cursor: pointer; }
.login-err { background: #3a1f24; border: 1px solid #6b3b44; color: #f0b9c2; border-radius: 8px; padding: 9px 12px; font-size: 14px; }

/* дневник */
.diary-list { list-style: none; padding: 0; margin: 16px 0; display: flex; flex-direction: column; gap: 10px; }
.diary-item { background: var(--bg-card); border: 1px solid var(--border); border-left: 3px solid var(--border);
  border-radius: 10px; padding: 12px 14px; }
.diary-item.b-tech { border-left-color: var(--tech); } .diary-item.b-task { border-left-color: var(--task); } .diary-item.b-soft { border-left-color: var(--soft); }
.diary-item.resolved { opacity: .5; }
.di-head { display: flex; gap: 12px; align-items: baseline; justify-content: space-between; }
.di-q { flex: 1; color: var(--text); font-size: 15px; }
.diary-resolve { background: var(--bg-elev); border: 1px solid var(--border); color: var(--tech); border-radius: 8px; padding: 5px 12px; font-size: 13px; cursor: pointer; white-space: nowrap; }
.diary-resolve:hover { border-color: var(--tech); }
.di-note { margin-top: 8px; color: var(--muted); font-size: 14px; background: var(--bg-soft); border-radius: 8px; padding: 7px 10px; }
.di-src { margin-top: 8px; font-size: 13px; color: var(--muted); }

/* админка */
.admin-layout { display: flex; gap: 22px; align-items: flex-start; }
.admin-nav { display: flex; flex-direction: column; gap: 2px; min-width: 170px; }
.admin-nav a { padding: 9px 12px; border-radius: 8px; color: var(--muted); font-size: 14px; }
.admin-nav a:hover { background: var(--bg-soft); color: var(--text); text-decoration: none; }
.admin-nav a.on { background: var(--bg-elev); color: var(--accent); }
.admin-nav a.reserved { opacity: .4; pointer-events: none; }
.admin-main { flex: 1; min-width: 0; }
.flash { border-radius: 10px; padding: 11px 14px; margin-bottom: 16px; }
.flash-ok { background: #11301f; border: 1px solid #2a5c3e; color: #b6e6c8; }
.flash-err { background: #3a1f24; border: 1px solid #6b3b44; color: #f0b9c2; }
.cred { margin-top: 6px; } .cred code { background: var(--bg-elev); padding: 2px 8px; border-radius: 6px; color: var(--accent); }
.create-box { background: var(--bg-soft); border: 1px solid var(--border); border-radius: 10px; padding: 8px 14px; margin-bottom: 18px; }
.create-box summary { cursor: pointer; font-weight: 600; padding: 6px 0; }
.admin-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 8px 0; }
.admin-form input, .admin-form select { background: var(--bg-elev); border: 1px solid var(--border); color: var(--text); border-radius: 8px; padding: 8px 10px; font-size: 14px; }
.admin-form button { background: var(--accent); color: #04210f; border: none; border-radius: 8px; padding: 8px 16px; font-weight: 700; cursor: pointer; }
.admin-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.admin-table th, .admin-table td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--border); }
.admin-table th { color: var(--muted); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
.admin-table tr.inactive { opacity: .5; }
.role { font-size: 11px; padding: 1px 8px; border-radius: 20px; border: 1px solid var(--border); }
.role-admin { color: var(--accent); border-color: var(--accent); }
.admin-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.admin-actions form { display: inline; }
.admin-actions button { background: var(--bg-elev); border: 1px solid var(--border); color: var(--muted); border-radius: 7px; padding: 4px 9px; font-size: 12px; cursor: pointer; }
.admin-actions button:hover { color: var(--text); }
.admin-actions button.danger:hover { color: #e8788a; border-color: #6b3b44; }
@media (max-width: 700px) { .admin-layout { flex-direction: column; } .admin-nav { flex-direction: row; flex-wrap: wrap; } }

/* ============ плеер на странице записи ============ */
.iv-player { position: sticky; top: var(--topbar-h); z-index: 20; margin-bottom: 18px;
  background: var(--bg-soft); border: 1px solid var(--border); border-radius: 12px;
  padding: 12px 14px; box-shadow: 0 6px 20px rgba(0,0,0,.35); }
.iv-player audio { width: 100%; display: block; height: 40px; }
.iv-player-meta { display: flex; gap: 14px; align-items: center; margin-top: 8px; font-size: 13px; flex-wrap: wrap; }
.iv-player-meta .hint { font-size: 12px; }
.resume-hint { color: var(--accent); }
.resume-link { color: var(--accent); }
.resume-link b { font-variant-numeric: tabular-nums; }

.tc.seek { cursor: pointer; }
.tc.seek:hover { color: var(--text); text-decoration: underline; }
/* текущая реплика во время воспроизведения */
.iv-q-list li { scroll-margin-top: calc(var(--topbar-h) + 120px); }
.iv-q-list li.playing { background: rgba(46,230,122,.12); border-left-color: var(--accent); }
.iv-q-list li.playing .tc { color: var(--accent); font-weight: 700; }

/* контролы прогресса по текущему вопросу — внутри плеера */
.ivq-controls { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.ivq-cur { font-size: 13px; color: var(--muted); margin-bottom: 10px; }
.ivq-cur-text { color: var(--text); font-weight: 600; }
.ivq-controls .qc-main { gap: 8px; }
.ivq-controls .qc-sub { margin-top: 8px; }
.ivq-controls .qc-note-panel.ivq-note { position: static; width: auto; max-width: none; box-shadow: none;
  margin-top: 10px; background: var(--bg-elev); }
.ivq-anon { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); color: var(--muted); font-size: 13px; }
/* убрать иконку скачивания в Chrome/WebKit (controlsList уже скрывает в большинстве) */
audio::-webkit-media-controls-enclosure { overflow: hidden; }

/* индикаторы уверенности и заметки в списках */

/* страница «Мои заметки» */
.notes-list { list-style: none; padding: 0; margin: 16px 0; display: flex; flex-direction: column; gap: 10px; }
.note-item { background: var(--bg-card); border: 1px solid var(--border); border-left: 3px solid var(--border);
  border-radius: 10px; padding: 12px 14px; }
.note-item.b-tech { border-left-color: var(--tech); } .note-item.b-task { border-left-color: var(--task); } .note-item.b-soft { border-left-color: var(--soft); }
.ni-head { display: flex; gap: 10px; align-items: baseline; }
.ni-q { flex: 1; color: var(--text); font-size: 15px; }
.ni-note { margin-top: 8px; color: var(--text); background: var(--bg-soft); border-radius: 8px;
  padding: 9px 12px; font-size: 14px; white-space: pre-wrap; }

/* ============ админка: ревью ============ */
.admin-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 16px; }
.admin-filters input[type=text], .admin-filters select { background: var(--bg-elev); border: 1px solid var(--border);
  color: var(--text); border-radius: 8px; padding: 7px 10px; font-size: 14px; }
.admin-filters input[type=text] { min-width: 200px; flex: 1; }
.admin-filters button { background: var(--accent); color: #04210f; border: none; border-radius: 8px; padding: 7px 14px; font-weight: 700; cursor: pointer; }
.review-table .rt-q { max-width: 520px; }
.review-table .rt-q a { color: var(--text); }
.review-table .rt-q a:hover { color: var(--accent); }
.btn-sm { background: var(--bg-elev); border: 1px solid var(--border); color: var(--text);
  border-radius: 7px; padding: 4px 10px; font-size: 12px; cursor: pointer; white-space: nowrap; }
.btn-sm:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }

.admin-edit-form { display: flex; flex-direction: column; gap: 12px; background: var(--bg-card);
  border: 1px solid var(--border); border-radius: 12px; padding: 16px; margin-bottom: 14px; }
.admin-edit-form label { display: flex; flex-direction: column; gap: 5px; font-size: 13px; color: var(--muted); }
.admin-edit-form .row { flex-direction: row; flex-wrap: wrap; gap: 14px; }
.admin-edit-form .row > label { flex: 1; min-width: 160px; }
.admin-edit-form textarea, .admin-edit-form input[type=text], .admin-edit-form input:not([type]), .admin-edit-form select {
  background: var(--bg-elev); border: 1px solid var(--border); color: var(--text); border-radius: 8px; padding: 9px 10px; font: inherit; }
.admin-edit-form .pfilter { flex-direction: row; align-items: center; }
.form-actions button { background: var(--accent); color: #04210f; border: none; border-radius: 8px; padding: 9px 20px; font-weight: 700; cursor: pointer; }
.danger-form { margin-bottom: 22px; }
button.danger { background: none; border: 1px solid #6b3b44; color: #e8788a; border-radius: 8px; padding: 7px 14px; cursor: pointer; }
button.danger:hover { background: #3a1f24; }

.merge-box, .occ-review { background: var(--bg-soft); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; margin-bottom: 16px; }
.merge-box h3, .occ-review h3 { color: var(--text); text-transform: none; font-size: 15px; }
.merge-list { list-style: none; padding: 0; margin: 10px 0 0; }
.merge-list li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.merge-list li:last-child { border-bottom: none; }
.occ-rev-list { list-style: none; padding: 0; margin: 8px 0 0; }
.occ-rev-list li { padding: 9px 0; border-bottom: 1px solid var(--border); }
.occ-rev-list .raw { margin-top: 4px; }
.rename-form { display: flex; gap: 6px; align-items: center; }
.rename-form input { background: var(--bg-elev); border: 1px solid var(--border); color: var(--text); border-radius: 7px; padding: 6px 9px; font-size: 13px; min-width: 220px; }

/* ============ тренажёр ============ */
.tr-link svg { color: var(--accent); }
.tr-modes { display: flex; flex-direction: column; gap: 14px; margin: 20px 0 30px; }
.tr-mode { display: flex; flex-direction: row; align-items: center; gap: 20px;
  background: var(--bg-card); border: 1px solid var(--border); border-left: 4px solid var(--muted);
  border-radius: 14px; padding: 18px 22px; }
.tr-mode-text { flex: 1; min-width: 0; }
.tr-mode-text h2 { margin: 0 0 4px; font-size: 18px; }
.tr-mode-text p { margin: 0; font-size: 13.5px; }
.tr-mode-action { display: flex; align-items: center; gap: 12px; flex: none; }
.tr-mode select { background: var(--bg-elev); border: 1px solid var(--border); color: var(--text);
  border-radius: 8px; padding: 9px 10px; font: inherit; max-width: 240px; }
.tr-mode .tr-len { display: flex; flex-direction: column; gap: 3px; font-size: 11px; color: var(--muted); }
.tr-mode button { background: var(--accent); color: #04210f; border: none; border-radius: 9px;
  padding: 11px 20px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.tr-mode button:disabled { background: var(--bg-elev); color: var(--muted); cursor: not-allowed; }
.tr-weak { border-left-color: var(--tech); }
.tr-theme { border-left-color: var(--soft); }
.tr-mock { border-left-color: var(--task); }
@media (max-width: 760px) {
  .tr-mode { flex-direction: column; align-items: stretch; gap: 12px; }
  .tr-mode-action { flex-wrap: wrap; }
}
.tr-history-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.tr-history td { vertical-align: middle; }
.tr-history-row { cursor: pointer; }
.tr-history-row:hover { background: var(--bg-soft); }
.tr-drill { margin-left: 8px; opacity: 0; }
.tr-history-row:hover .tr-drill { opacity: 1; }

/* ход сессии */
.tr-top { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.tr-badge { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: var(--accent); white-space: nowrap; }
.tr-progress { flex: 1; height: 6px; background: var(--bg-elev); border-radius: 4px; overflow: hidden; }
.tr-bar { height: 100%; background: var(--accent); transition: width .2s; }
.tr-quit { margin: 0; }

.tr-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px;
  padding: 26px 28px; box-shadow: inset 4px 0 0 var(--muted); }
.tr-card.b-tech { box-shadow: inset 4px 0 0 var(--tech); }
.tr-card.b-task { box-shadow: inset 4px 0 0 var(--task); }
.tr-card.b-soft { box-shadow: inset 4px 0 0 var(--soft); }
.tr-card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.tr-fav { margin-left: auto; background: none; border: none; cursor: pointer; font-size: 22px;
  color: var(--border); line-height: 1; }
.tr-fav.on { color: #ffd24a; }
.tr-question { font-size: 22px; line-height: 1.4; margin: 0 0 22px; }
.tr-reveal { background: var(--bg-elev); border: 1px solid var(--border); color: var(--text);
  border-radius: 10px; padding: 12px 22px; font-size: 15px; font-weight: 600; cursor: pointer; }
.tr-reveal:hover { border-color: var(--accent); color: var(--accent); }
.tr-reveal-wrap p { margin: 8px 0 0; }
.tr-revealed h3 { margin-top: 18px; }
.tr-occ { list-style: none; padding: 0; margin: 6px 0 14px; }
.tr-occ li { padding: 5px 0; border-bottom: 1px solid var(--border); }
.tr-grade { display: flex; gap: 12px; margin-top: 6px; }
.tr-grade button { flex: 1; border: 1px solid; background: none; border-radius: 11px;
  padding: 14px; font-size: 15px; font-weight: 700; cursor: pointer; }
.g-unknown { color: #e8788a; } button.g-unknown { border-color: #6b3b44; }
button.g-unknown:hover { background: #3a1f24; }
.g-partial { color: var(--task); } button.g-partial { border-color: #6b4a23; }
button.g-partial:hover { background: #3a2b16; }
.g-confident { color: var(--accent); } button.g-confident { border-color: #245c3b; }
button.g-confident:hover { background: #133024; }

/* итог */
.tr-summary { display: flex; gap: 16px; margin: 22px 0; }
.tr-stat { flex: 1; text-align: center; background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 14px; padding: 20px; }
.tr-stat b { display: block; font-size: 34px; }
.tr-stat span { color: var(--muted); font-size: 13px; }
.tr-done-actions { display: flex; gap: 12px; margin-top: 18px; }
.entry-card-btn { display: inline-block; background: var(--bg-elev); border: 1px solid var(--border);
  color: var(--text); border-radius: 10px; padding: 11px 18px; font-weight: 600; }
.entry-card-btn:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }

/* «Недавнее» в сайдбаре */
.side-recent-list { margin-bottom: 14px; }
.recent-item { display: flex; align-items: center; gap: 8px; padding: 5px 10px; border-radius: 7px;
  color: var(--muted); font-size: 12.5px; }
.recent-item:hover { background: var(--bg-elev); color: var(--text); text-decoration: none; }
.recent-item .bar { height: 14px; }
.recent-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ============ тренажёр: разбор сессии + аналитика ============ */
.grade-badge { font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 20px;
  border: 1px solid currentColor; white-space: nowrap; }
.grade-badge.g-unknown { color: #e8788a; }
.grade-badge.g-partial { color: var(--task); }
.grade-badge.g-confident { color: var(--accent); }

.tr-ans-list { list-style: none; padding: 0; margin: 16px 0; }
.tr-ans-list li { display: flex; align-items: center; gap: 12px; padding: 10px 12px;
  border-radius: 9px; border: 1px solid var(--border); margin-bottom: 8px; background: var(--bg-card); }
.tr-ans-list .bar { height: 26px; }
.tr-ans-q { flex: 1; min-width: 0; color: var(--text); }
.tr-ans-q:hover { color: var(--accent); }
.tr-ans-meta { flex: none; max-width: 230px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.tr-weakthemes { margin: 6px 0 18px; }
.wt-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.wt-chip { background: var(--bg-elev); border: 1px solid var(--border); border-radius: 20px;
  padding: 5px 12px; font-size: 13px; }
.wt-chip b { color: #e8788a; }

.tr-stats th.g-unknown, .tr-stats th.g-partial, .tr-stats th.g-confident { white-space: nowrap; }
.tr-stats .ta-c { text-align: center; color: var(--muted); }
.tr-stats .ta-c.on { font-weight: 700; }
.tr-stats .ta-c.on.g-unknown { color: #e8788a; }
.tr-stats .ta-c.on.g-partial { color: var(--task); }
.tr-stats .ta-c.on.g-confident { color: var(--accent); }
.tr-stats .rt-q { max-width: 420px; }

/* прослушанные записи в /interviews */
.interview-card { position: relative; }
.interview-card.is-listened { border-color: var(--accent); }
.iv-done { position: absolute; top: 10px; right: 12px; font-size: 11px; font-weight: 700;
  color: var(--accent); letter-spacing: .02em; }
.interview-card.is-listened .iv-name { color: var(--muted); }

/* ============ тренажёр: акцентная кнопка аналитики + сортировка ============ */
.tr-analytics-cta { display: flex; align-items: center; gap: 16px; margin: 18px 0 22px;
  padding: 16px 22px; border-radius: 14px; color: #04210f;
  background: linear-gradient(100deg, var(--accent), #38d977);
  box-shadow: 0 4px 18px rgba(46,230,122,.22); transition: transform .12s, box-shadow .12s; }
.tr-analytics-cta:hover { text-decoration: none; transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(46,230,122,.32); }
.tr-analytics-cta .ico { color: #04210f; flex: none; }
.tr-cta-text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.tr-cta-text b { font-size: 18px; }
.tr-cta-text span { font-size: 13px; opacity: .85; }
.tr-cta-arrow { font-size: 26px; font-weight: 800; flex: none; }

/* видимая вторая цифра в чипах «где проседаешь» */
.wt-sep { color: var(--text); opacity: .75; }

/* сортируемые заголовки в аналитике */
.tr-stats th.sortable a { color: var(--muted); }
.tr-stats th.sortable a:hover { color: var(--text); text-decoration: none; }
.tr-stats th.sort-on a { color: var(--text); font-weight: 700; }
.tr-stats th.sort-on.g-unknown a { color: #e8788a; }
.tr-stats th.sort-on.g-partial a { color: var(--task); }
.tr-stats th.sort-on.g-confident a { color: var(--accent); }
.tr-stats .ta-c { text-align: center; }

/* ============ админка: split вхождений ============ */
.split-form .occ-rev-list li { padding: 0; border-bottom: none; }
.occ-pick { display: flex; gap: 10px; align-items: flex-start; padding: 9px 8px;
  border-radius: 8px; cursor: pointer; }
.occ-pick:hover { background: var(--bg-elev); }
.occ-pick input { margin-top: 4px; flex: none; }
.occ-body { display: block; min-width: 0; }
.occ-body .raw { display: block; margin-top: 3px; }
.split-actions { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.split-actions input[type=text] { flex: 1; min-width: 240px; background: var(--bg-elev);
  border: 1px solid var(--border); color: var(--text); border-radius: 8px; padding: 9px 11px; font: inherit; }

/* ============ дневник трудоустройства ============ */
/* стадии-цвета */
.st-applied   { --st: #6ea8ff; }
.st-screening { --st: #b388ff; }
.st-interview { --st: #ff9f43; }
.st-offer     { --st: #2ee67a; }
.st-rejected  { --st: #e8788a; }
.st-declined  { --st: #8b93a3; }

/* дашборд */
.jdash { background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px;
  padding: 16px 18px; margin-bottom: 16px; }
.funnel { display: flex; align-items: stretch; gap: 0; flex-wrap: wrap; }
.funnel-step { flex: 1; min-width: 90px; text-align: center; padding: 8px 6px; border-radius: 10px;
  border: 1px solid var(--border); border-bottom: 3px solid var(--st); background: var(--bg-elev); }
.funnel-step b { display: block; font-size: 28px; line-height: 1.1; color: var(--st); }
.funnel-step span { font-size: 12px; color: var(--muted); }
.funnel-conv { display: flex; align-items: center; padding: 0 10px; color: var(--muted); font-size: 12px; }
.jdash-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.jchip { background: var(--bg-elev); border: 1px solid var(--border); border-radius: 20px;
  padding: 5px 12px; font-size: 13px; color: var(--muted); }
.jchip b { color: var(--text); margin-left: 4px; }
.jchip.ok b { color: var(--accent); } .jchip.bad b { color: #e8788a; }

.jupcoming { background: var(--bg-soft); border: 1px solid var(--border); border-radius: 12px;
  padding: 10px 16px 14px; margin-bottom: 16px; }
.jupcoming ul { list-style: none; padding: 0; margin: 6px 0 0; }
.jupcoming li { display: flex; align-items: center; gap: 10px; padding: 5px 0; }
.ju-date { font-weight: 700; color: var(--task); min-width: 44px; }

/* форма добавления/правки */
.jadd { margin-bottom: 18px; }
.jadd > summary { cursor: pointer; display: inline-block; background: var(--accent); color: #04210f;
  font-weight: 700; padding: 9px 16px; border-radius: 9px; list-style: none; }
.jadd > summary::-webkit-details-marker { display: none; }
.jadd[open] > summary { margin-bottom: 12px; }
.jform-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px; }
.jform-grid label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); }
.jform-grid label.wide { grid-column: 1 / -1; }
.jform-grid input, .jform-grid select, .jform-grid textarea { background: var(--bg-elev);
  border: 1px solid var(--border); color: var(--text); border-radius: 8px; padding: 8px 10px; font: inherit; }
.jform > button { background: var(--accent); color: #04210f; border: none; border-radius: 9px;
  padding: 10px 20px; font-weight: 700; cursor: pointer; }

/* канбан */
.kanban { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 18px; }
@media (max-width: 860px) { .kanban { grid-template-columns: 1fr 1fr; } }
.kcol { background: var(--bg-soft); border: 1px solid var(--border); border-radius: 12px; padding: 8px;
  border-top: 3px solid var(--st); min-height: 80px; }
.kcol-head { font-weight: 700; font-size: 13px; padding: 4px 6px 8px; display: flex; }
.kcol-head .count { margin-left: auto; color: var(--muted); }
.kempty { text-align: center; padding: 14px 0; }

.jcard { background: var(--bg-card); border: 1px solid var(--border); border-left: 3px solid var(--st);
  border-radius: 10px; padding: 10px 11px; margin-bottom: 8px; }
.jc-top { display: flex; align-items: baseline; gap: 8px; }
.jc-company { font-weight: 600; color: var(--text); flex: 1; min-width: 0; }
.jc-company:hover { color: var(--accent); }
.jc-salary { font-size: 12px; color: var(--accent); white-space: nowrap; }
.jc-pos { font-size: 13px; color: var(--muted); margin-top: 2px; }
.jc-badges { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.jb { font-size: 11px; background: var(--bg-elev); border: 1px solid var(--border);
  border-radius: 6px; padding: 1px 7px; color: var(--muted); }
.jb-date { color: var(--task); border-color: var(--task); }
.jc-note { margin-top: 7px; }
.jc-actions { display: flex; align-items: center; gap: 4px; margin-top: 9px; }
.jbtn { background: var(--bg-elev); border: 1px solid var(--border); color: var(--text);
  border-radius: 7px; padding: 3px 9px; font-size: 13px; cursor: pointer; line-height: 1.4; }
.jbtn:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }
.jbtn:disabled { opacity: .35; cursor: not-allowed; }
.jbtn.bad:hover { border-color: #e8788a; color: #e8788a; }
.jbtn.mut:hover { border-color: var(--muted); color: var(--muted); }
.jbtn.edit { margin-left: auto; }
.jc-sep { flex: 1; }
.jc-actions form { margin: 0; }

.jstage-tag { font-size: 12px; padding: 2px 10px; border-radius: 20px; border: 1px solid var(--st); color: var(--st); }
.jclosed { margin-bottom: 18px; }
.jclosed > summary { cursor: pointer; color: var(--muted); }
.jclosed-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; margin-top: 10px; }
.jcard.closed { opacity: .8; }

.japp-stage-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 16px 0; }
.japp-stage-row form { margin: 0; }

/* лог активности */
.jactivity { margin-top: 8px; }
.jact-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin-bottom: 14px; }
.jact-form label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); }
.jact-form label.wide { flex: 1; min-width: 180px; }
.jact-form input { background: var(--bg-elev); border: 1px solid var(--border); color: var(--text);
  border-radius: 8px; padding: 8px 10px; font: inherit; }
.jact-form input[type=number] { width: 90px; }
.jact-form button { background: var(--accent); color: #04210f; border: none; border-radius: 9px;
  padding: 9px 16px; font-weight: 700; cursor: pointer; }
.jact-table td { vertical-align: middle; }

/* три действия в дневнике: отклики / скрининг / собес */
.jadd-row { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; }
.jadd-row .jadd { margin-bottom: 0; }
.a-scr > summary { background: var(--soft); color: #1a1030; }
.a-int > summary { background: var(--task); color: #2a1705; }
.jb-scr { color: var(--soft); border-color: var(--soft); }

/* дневник: именные списки (собесы / жду ОС / отказы) */
.jcols2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; }
@media (max-width: 720px) { .jcols2 { grid-template-columns: 1fr; } }
.jcols2 .jupcoming { margin-bottom: 0; }
.jupcoming li.overdue .ju-date { color: #e8788a; }
.ov-tag { font-size: 10px; font-weight: 700; color: #e8788a; border: 1px solid #6b3b44;
  border-radius: 6px; padding: 0 6px; }
.jrejects { margin-bottom: 18px; }
.jrej-table td { vertical-align: middle; }
.jrej-table td:nth-child(4) { color: var(--text); }

/* ============ кнопка «как пользоваться разделом» + модалка ============ */
.sec-help-btn { display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  background: rgba(46,230,122,.12); border: 1px solid var(--accent); color: var(--accent);
  border-radius: 10px; padding: 9px 16px; font-weight: 700; font-size: 14px; margin: 2px 0 18px; }
.sec-help-btn:hover { background: rgba(46,230,122,.2); }
.sec-help-btn .ico { color: var(--accent); }

.sec-help-overlay { position: fixed; inset: 0; z-index: 60; background: rgba(0,0,0,.62);
  display: flex; align-items: flex-start; justify-content: center; padding: 6vh 16px; overflow: auto; }
.sec-help-overlay[hidden] { display: none; }
.sec-help-modal { position: relative; background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 16px; max-width: 580px; width: 100%; padding: 24px 26px; }
.sec-help-x { position: absolute; top: 12px; right: 14px; background: none; border: none;
  color: var(--muted); font-size: 18px; cursor: pointer; line-height: 1; }
.sec-help-x:hover { color: var(--text); }
.sec-help-gate { background: rgba(232,120,138,.12); border: 1px solid #6b3b44; border-radius: 10px;
  padding: 12px 14px; margin-bottom: 16px; font-size: 14px; line-height: 1.5; }
.sec-help-gate a { font-weight: 700; white-space: nowrap; }
.sec-help-body h3 { font-size: 20px; color: var(--text); text-transform: none; letter-spacing: 0; margin: 0 0 8px; }
.sec-help-body h4 { font-size: 12px; color: var(--accent); text-transform: uppercase; letter-spacing: .05em; margin: 16px 0 6px; }
.sec-help-body p { margin: 0 0 8px; }
.sec-help-body ul, .sec-help-body ol { margin: 0 0 8px; padding-left: 20px; }
.sec-help-body li { margin: 3px 0; }

/* закрытая страница для гостя */
.gated-hero { background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px;
  padding: 34px 32px; text-align: center; max-width: 580px; }
.gated-lock { font-size: 42px; line-height: 1; }
.gated-hero h2 { margin: 10px 0 6px; }
.gated-actions { display: flex; gap: 12px; justify-content: center; align-items: center; margin-top: 18px; flex-wrap: wrap; }
.gated-actions .sec-help-btn { margin: 0; }
.entry-card-btn.primary { background: var(--accent); color: #04210f; border-color: var(--accent); }
.entry-card-btn.primary:hover { color: #04210f; opacity: .9; text-decoration: none; }

/* «закрытые» пункты сайдбара для гостя */
.side-links a.locked { color: var(--muted); }
.side-links a.locked:hover { background: var(--bg-elev); color: var(--text); }
.lock-i { margin-left: auto; font-size: 11px; opacity: .7; }