:root {
  --bg: #f5f5f0; --surface: #fff; --ink: #1f1f1d; --muted: #6b6b66;
  --line: #e3e2da; --accent: #534ab7; --accent-ink: #fff;
  --ok-bg: #e1f5ee; --ok-ink: #0f6e56;
  --work-bg: #faeeda; --work-ink: #854f0b;
  --wait-bg: #f1efe8; --wait-ink: #5f5e5a;
  --fail-bg: #fcebeb; --fail-ink: #a32d2d;
  --info-bg: #e6f1fb; --info-ink: #185fa5;
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: -apple-system, "Segoe UI", Roboto, sans-serif; line-height: 1.55;
}
.topbar {
  display: flex; justify-content: space-between; align-items: center;
  padding: .8rem 1.2rem; background: var(--surface); border-bottom: 1px solid var(--line);
}
.brand { font-weight: 600; color: var(--ink); text-decoration: none; }
.userbox { display: flex; gap: 1rem; align-items: center; font-size: .9rem; }
.userbox .who { color: var(--muted); }
.userbox a { color: var(--accent); text-decoration: none; }
.container { max-width: 860px; margin: 1.4rem auto; padding: 0 1rem; }
.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  padding: 1.2rem 1.4rem; margin-bottom: 1.2rem;
}
.card.narrow { max-width: 380px; margin: 3rem auto; }
h1 { font-size: 1.4rem; margin: 0 0 .8rem; }
h2 { font-size: 1.15rem; margin: 0 0 .8rem; }
.form { display: flex; flex-direction: column; gap: .9rem; }
.form label { display: flex; flex-direction: column; gap: .3rem; font-size: .9rem; color: var(--muted); }
.form input, .form select, .form textarea {
  font: inherit; padding: .55rem .6rem; border: 1px solid var(--line);
  border-radius: 8px; background: #fff; color: var(--ink);
}
.btn {
  font: inherit; padding: .55rem 1.1rem; border: none; border-radius: 8px;
  cursor: pointer; align-self: flex-start;
}
.btn.primary { background: var(--accent); color: var(--accent-ink); }
.hint { font-size: .82rem; color: var(--muted); margin: .8rem 0 0; }
.alert { padding: .6rem .8rem; border-radius: 8px; font-size: .9rem; margin: .2rem 0 .8rem; }
.alert.err { background: var(--fail-bg); color: var(--fail-ink); }
.alert.ok { background: var(--ok-bg); color: var(--ok-ink); }
.alert.info { background: var(--info-bg); color: var(--info-ink); }
.empty, .muted { color: var(--muted); }
.rec-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.rec-table th { text-align: left; color: var(--muted); font-weight: 500; padding: .4rem .5rem; border-bottom: 1px solid var(--line); }
.rec-table td { padding: .6rem .5rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.rec-table tbody tr { cursor: pointer; }
.rec-table tbody tr:hover { background: #faf9f4; }
.rec-table .fn { display: flex; flex-direction: column; }
.rec-table .fn .muted { font-size: .78rem; }
.rec-table td.actions { width: 1%; text-align: right; white-space: nowrap; }
.dlg-summary { cursor: pointer; }
.dlg-summary h2 { margin: 0; }
.dialogue { margin-top: .8rem; display: flex; flex-direction: column; gap: .7rem;
  max-height: 60vh; overflow-y: auto; padding-right: .4rem; }
.dlg-turn { border-left: 3px solid var(--line); padding: .1rem 0 .1rem .7rem; }
.dlg-turn.cand { border-left-color: #534ab7; }
.dlg-turn.intv { border-left-color: #cbb86a; }
.dlg-head { display: flex; align-items: baseline; gap: .5rem; margin-bottom: .15rem; }
.dlg-who { font-weight: 600; font-size: .85rem; }
.dlg-who.cand { color: #534ab7; }
.dlg-who.intv { color: #9a8a3a; }
.dlg-who.unk { color: var(--muted); }
.dlg-ts { font-size: .75rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.dlg-text { font-size: .92rem; line-height: 1.5; white-space: pre-wrap; }
.vac-hidden td { opacity: .55; }
.btn-link { background: none; border: none; padding: 0; cursor: pointer;
  color: var(--accent); font: inherit; text-decoration: underline; }
.iv-resume { display: flex; align-items: center; justify-content: center; gap: .6rem;
  flex-wrap: wrap; margin-top: .6rem; }
.iv-resume .resume-ok { color: var(--ok-ink, #2a7d4f); font-size: .9rem; }
.file-btn { position: relative; overflow: hidden; cursor: pointer; }
.file-btn input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.integrity.i-high { border-left: 4px solid #c0392b; }
.integrity.i-warn { border-left: 4px solid #d4a72c; }
.integrity.i-ok { border-left: 4px solid #2a7d4f; }
.ig-list { margin: .4rem 0 0; padding-left: 1.1rem; line-height: 1.6; }
.ig-list ul { margin: .2rem 0; }
.btn-del { background: none; border: none; cursor: pointer; color: var(--muted);
  font-size: 1rem; line-height: 1; padding: .2rem .4rem; border-radius: 6px; }
.btn-del:hover { background: #fdecec; color: #c0392b; }
.badge { display: inline-block; padding: .15rem .55rem; border-radius: 20px; font-size: .8rem; }
.badge.done { background: var(--ok-bg); color: var(--ok-ink); }
.badge.work { background: var(--work-bg); color: var(--work-ink); }
.badge.wait { background: var(--wait-bg); color: var(--wait-ink); }
.badge.fail { background: var(--fail-bg); color: var(--fail-ink); }
.back a { color: var(--accent); text-decoration: none; font-size: .9rem; }
.rec-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.meta-row { display: flex; flex-wrap: wrap; gap: 1.2rem; color: var(--muted); font-size: .88rem; margin-top: .4rem; }
.cardview { overflow-x: auto; }
.cardview table { border-collapse: collapse; width: 100%; font-size: .88rem; margin: .6rem 0; }
.cardview th, .cardview td { border: 1px solid var(--line); padding: .45rem .6rem; text-align: left; vertical-align: top; }
.cardview th { background: #faf9f4; font-weight: 500; }
.cardview h1 { font-size: 1.25rem; }
.cardview h2 { font-size: 1.05rem; margin-top: 1.2rem; }
.cardview blockquote { border-left: 3px solid var(--line); margin: .6rem 0; padding: .2rem .9rem; color: var(--muted); }
.btn.ghost { background: #fff; border: 1px solid var(--line); color: var(--ink); }
.topic { border: 1px solid var(--line); border-radius: 10px; padding: 1rem; margin-bottom: 1rem; background: #faf9f4; position: relative; }
.topic .form, .topic label { display: flex; flex-direction: column; gap: .3rem; font-size: .9rem; color: var(--muted); margin-bottom: .7rem; }
.topic input, .topic select, .topic textarea { font: inherit; padding: .5rem .6rem; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--ink); }
.del-topic { float: right; background: none; border: none; color: var(--fail-ink); cursor: pointer; font-size: .82rem; }
textarea.full { width: 100%; font: inherit; padding: .55rem .6rem; border: 1px solid var(--line); border-radius: 8px; }
.rec-table td a { color: var(--accent); text-decoration: none; }
.metrics { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1rem; }
.metric { flex: 1; min-width: 140px; border: 1px solid var(--line); border-radius: 12px; padding: 1rem; background: #faf9f4; text-align: center; }
.metric .mv { font-size: 1.8rem; font-weight: 600; color: var(--accent); }
.metric .ml { font-size: .9rem; margin-top: .2rem; }
.metric .ms { font-size: .78rem; color: var(--muted); margin-top: .15rem; }
.iv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; margin-top: 1rem; }
@media (max-width: 720px){ .iv-grid { grid-template-columns: 1fr; } }
.iv-video { width: 100%; border-radius: 12px; background: #111; aspect-ratio: 4/3; object-fit: cover; }
.iv-status { font-size: .82rem; color: var(--muted); margin-top: .4rem; text-align: center; }
.iv-q { background: var(--info-bg); border-radius: 12px; padding: 1rem; margin-bottom: .8rem; }
.iv-q-label { font-size: .78rem; color: var(--info-ink); margin-bottom: .3rem; }
#question { font-size: 1.1rem; }
.iv-controls { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: .6rem; }
.iv-log { display: flex; flex-direction: column; gap: .5rem; }
.iv-line { padding: .5rem .7rem; border-radius: 8px; font-size: .92rem; }
.iv-line.ai { background: var(--info-bg); color: var(--info-ink); }
.iv-line.me { background: #faf9f4; border: 1px solid var(--line); }
/* аватар интервьюера («видео» ИИ) */
.iv-avatar { width: 100%; aspect-ratio: 4/3; border-radius: 12px; background: #1b2440;
  display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; }
.iv-orb { width: 92px; height: 92px; border-radius: 50%; background: #534ab7;
  display: flex; align-items: center; justify-content: center; color: #fff; font-size: 2rem;
  position: relative; transition: transform .15s; }
.iv-avatar.speaking .iv-orb { animation: orbPulse 1s ease-in-out infinite; }
.iv-avatar.speaking .iv-orb::after { content: ''; position: absolute; inset: -14px;
  border-radius: 50%; border: 3px solid #7f77dd; animation: ring 1.1s ease-out infinite; }
/* аватар-лицо Бориса */
.iv-face { width: 62%; max-width: 160px; height: auto; }
.iv-face #mouth { transform-box: fill-box; transform-origin: center; }
.iv-avatar.speaking .iv-face #mouth { animation: talk .26s ease-in-out infinite; }
.iv-avatar.speaking { box-shadow: inset 0 0 0 3px #7f77dd; }
@keyframes talk { 0%,100%{ transform: scaleY(.45);} 50%{ transform: scaleY(1.7);} }
@keyframes orbPulse { 0%,100%{ transform: scale(1);} 50%{ transform: scale(1.08);} }
@keyframes ring { 0%{ transform: scale(.85); opacity:.8;} 100%{ transform: scale(1.4); opacity:0;} }
.iv-tile-label { position: absolute; left: 10px; top: 8px; color: #cfd4e8; font-size: .8rem; }
.iv-sub { position: absolute; left: 8px; right: 8px; bottom: 8px; color: #fff;
  background: rgba(0,0,0,.55); border-radius: 8px; padding: .45rem .6rem; font-size: .92rem;
  line-height: 1.35; max-height: 55%; overflow: auto; }
/* граф диалога (тимлид) */
.graph-node { border-left: 3px solid var(--line); padding: .4rem 0 .4rem .8rem; margin-left: .3rem; }
.graph-node.q { border-color: #7f77dd; }
.graph-why { font-size: .82rem; color: var(--muted); margin-bottom: .2rem; }
.graph-q { font-weight: 500; }
.graph-cls { font-size: .85rem; margin-top: .25rem; }
.cov-strip { display: flex; flex-wrap: wrap; gap: .4rem; margin: .6rem 0; }
.cov-chip { font-size: .78rem; padding: .2rem .5rem; border-radius: 20px; border: 1px solid var(--line); }
.cov-chip.s-strong { background: var(--ok-bg); color: var(--ok-ink); }
.cov-chip.s-mid { background: var(--work-bg); color: var(--work-ink); }
.cov-chip.s-risk, .cov-chip.s-evasive, .cov-chip.s-off_topic { background: var(--fail-bg); color: var(--fail-ink); }
.cov-chip .must { font-weight: 600; }