:root{--bg:#f4f3f1;--card:#fff;--ink:#17171a;--muted:#6f6f78;--line:#e7e5e1;--acc:#e30613;--acc2:#b8050f;--good:#1f8a4c;--goodbg:#e5f4ea;--same:#8a6d10;--samebg:#faf1d6;--bad:#b4402c;--badbg:#f8e7e3;--side:#141416}
*{box-sizing:border-box}
html,body{margin:0}
body{font:15px/1.5 Onest,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:var(--bg);color:var(--ink);display:flex;min-height:100vh}
a{color:inherit}
.muted{color:var(--muted)}.small{font-size:13px}.nowrap{white-space:nowrap}.clip{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
h1{font-size:24px;margin:4px 0 2px;letter-spacing:-.01em}h2{font-size:17px;margin:18px 0 10px}h3{font-size:15px;margin:16px 0 8px}
code{background:#f1efeb;padding:2px 6px;border-radius:6px;font-size:13px}code.wrap{display:block;word-break:break-all;padding:8px 10px;margin:6px 0}
pre{background:#f1efeb;padding:10px;border-radius:8px;overflow:auto;font-size:12px;white-space:pre-wrap;word-break:break-word}
/* боковая панель */
.side{width:248px;flex:0 0 248px;background:var(--side);color:#e9e9ec;padding:18px 14px;display:flex;flex-direction:column;gap:12px;position:sticky;top:0;height:100vh;overflow:auto}
.who{display:flex;gap:10px;align-items:center}.who b{display:block;font-size:15px}.who span{font-size:12px;color:#9a9aa3}
.brand-mark{width:38px;height:38px;border-radius:11px;background:var(--acc);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:18px;flex:0 0 38px}
.mode{display:flex;align-items:center;gap:8px;background:#222226;border-radius:12px;padding:10px;font-size:12.5px;line-height:1.3}
.mode span:nth-child(3){flex:1}
.dot{width:9px;height:9px;border-radius:50%;background:#e2a800;flex:0 0 9px}.dot.on{background:#2fbf6b}
.switch{width:40px;height:22px;border-radius:11px;border:0;background:#e2a800;position:relative;cursor:pointer;flex:0 0 40px}
.switch i{position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;transition:.15s}
.switch.on{background:#2fbf6b}.switch.on i{left:21px}
.ready{display:block;text-decoration:none;background:#222226;border-radius:12px;padding:10px 12px}.ready b{display:block;font-size:20px;color:#fff}.ready span{font-size:12px;color:#9a9aa3}
.side nav{display:flex;flex-direction:column;gap:2px}
.side nav a{text-decoration:none;padding:9px 11px;border-radius:9px;color:#c9c9d0;display:flex;justify-content:space-between;align-items:center;font-size:14.5px}
.side nav a:hover{background:#222226;color:#fff}.side nav a.active{background:var(--acc);color:#fff}
.side nav em{font-style:normal;background:#fff;color:var(--acc);border-radius:10px;padding:0 7px;font-size:12px;font-weight:700}
.logout{margin-top:auto;color:#8b8b94;font-size:13px;text-decoration:none;padding:6px 11px}
main{flex:1;min-width:0;padding:22px 26px 60px;max-width:1240px}
.page-head{margin-bottom:14px}
/* карточки и формы */
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px;margin-bottom:14px}
details.card>summary{cursor:pointer;display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;list-style:none}details.card>summary::-webkit-details-marker{display:none}
details.card[open]>summary{margin-bottom:12px}
.grid-form{display:flex;flex-direction:column;gap:12px}
label{display:flex;flex-direction:column;gap:5px;font-size:13px;color:var(--muted)}
label.inline,.inline{display:inline-flex;flex-direction:row;align-items:center;gap:8px}
label.check{flex-direction:row;align-items:center;gap:8px;color:var(--ink);font-size:14px}
input,select,textarea{font:inherit;color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:10px;padding:9px 11px;width:100%;max-width:100%}
.inline input,.inline select,.check input,.toolbar select{width:auto}
input[type=checkbox],input[type=radio]{width:auto;accent-color:var(--acc)}
textarea{resize:vertical;line-height:1.45}
input:focus,select:focus,textarea:focus{outline:2px solid #f6b6ba;border-color:var(--acc)}
.two-in{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.btn{font:inherit;font-size:14px;font-weight:600;border-radius:10px;padding:9px 15px;border:1px solid var(--line);background:#fff;color:var(--ink);cursor:pointer;text-decoration:none;display:inline-block}
.btn:hover{background:#f6f5f3}.btn[disabled]{opacity:.45;cursor:not-allowed}
.btn.primary{background:var(--acc);border-color:var(--acc);color:#fff}.btn.primary:hover{background:var(--acc2)}
.btn.ghost{background:transparent}.btn.danger{color:var(--bad);border-color:#efc9c1;background:#fff}.btn.small{padding:5px 10px;font-size:13px}.btn.wide{width:100%;padding:12px}
.link{color:var(--acc);text-decoration:none;font-weight:500}.link:hover{text-decoration:underline}
.alert{background:var(--goodbg);color:var(--good);border-radius:12px;padding:11px 14px;margin-bottom:14px;font-size:14px}
.alert.bad{background:var(--badbg);color:var(--bad)}.alert.warn{background:var(--samebg);color:var(--same)}
.empty{background:var(--card);border:1px dashed #d6d3cd;border-radius:16px;padding:26px;text-align:center;color:var(--muted);margin-bottom:14px}
.toolbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:14px}.toolbar input[name=q]{flex:1;min-width:200px;width:auto}
.draft-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:8px}
form.inline{display:inline-flex}
.tag{display:inline-block;background:#f1efeb;color:#55555c;border-radius:20px;padding:2px 10px;font-size:12px;font-weight:500}
.tag.good{background:var(--goodbg);color:var(--good)}.tag.same{background:var(--samebg);color:var(--same)}.tag.bad{background:var(--badbg);color:var(--bad)}
.score{display:inline-flex;align-items:center;justify-content:center;min-width:30px;height:26px;border-radius:8px;font-weight:700;font-size:13px;padding:0 6px}
.score.good{background:var(--goodbg);color:var(--good)}.score.same{background:var(--samebg);color:var(--same)}.score.bad{background:var(--badbg);color:var(--bad)}
.learn-state{font-size:14px}
/* ответы */
.answer-list{display:flex;flex-direction:column;gap:14px}
.answer{margin:0}.answer.sent{opacity:.6}
.answer-head{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;margin-bottom:10px}.answer-head .link{margin-left:auto}
.answer-body{display:grid;grid-template-columns:1fr 1.15fr;gap:16px}
.thread{display:flex;flex-direction:column;gap:6px;background:#faf9f7;border-radius:12px;padding:10px;max-height:420px;overflow:auto}
.thread.full{max-height:none}
.msg{max-width:88%;padding:7px 11px;border-radius:12px;background:#fff;border:1px solid var(--line);align-self:flex-start;word-wrap:break-word}
.msg.manager{align-self:flex-end;background:#fdecee;border-color:#f7d3d6}.msg.bot{align-self:flex-end;background:#eeedf8;border-color:#deddf0}
.msg-head{font-size:11.5px;color:var(--muted);font-weight:600}.msg-head time{font-weight:400;margin-left:4px}
.msg-text{font-size:14px}
.media-note{font-size:12.5px;color:#55555c;font-style:italic;margin-top:3px}
.thumb{max-width:200px;max-height:200px;border-radius:9px;margin-top:5px;display:block}
audio{max-width:240px;height:34px;margin-top:4px}
.draft-head{font-weight:600;margin-bottom:8px;display:flex;gap:8px;align-items:center}
.variants{display:flex;flex-direction:column;gap:6px;margin-bottom:8px}
.variant{font:inherit;text-align:left;border:1px solid var(--line);background:#fff;border-radius:11px;padding:8px 11px;cursor:pointer;color:var(--ink)}
.variant b{display:block;font-size:12px;color:var(--muted)}.variant span{font-size:14px}
.variant.on{border-color:var(--acc);box-shadow:0 0 0 1px var(--acc) inset}.variant.on b{color:var(--acc)}
.status{font-size:13px;color:var(--muted)}.status.good{color:var(--good)}.status.bad{color:var(--bad)}
/* таблицы */
.table{padding:4px 0}
.table .row{display:flex;gap:12px;padding:11px 16px;border-bottom:1px solid var(--line);text-decoration:none;align-items:center}
.table .row:last-child{border-bottom:0}.table a.row:hover{background:#faf9f7}
.table .row.th{font-size:12px;color:var(--muted);font-weight:600}.table .row.off{opacity:.45}
.table .row>*{flex:1 1 0;min-width:0}.table .row>*:first-child{flex:0 0 190px}.table .row>.clip{flex:3 1 0}.table .row>.nowrap{flex:0 0 auto}
/* оценки */
.readiness-main b{font-size:28px;display:block}.readiness-main span{color:var(--muted);font-size:14px}
.bar{display:flex;height:12px;border-radius:6px;overflow:hidden;background:#efede9;margin:12px 0 8px}
.bar i.good{background:#2fbf6b}.bar i.same{background:#e2b400}.bar i.bad{background:#e0533a}
.legend{display:flex;gap:16px;flex-wrap:wrap;font-size:13px;color:var(--muted)}.legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:5px}
.legend i.good{background:#2fbf6b}.legend i.same{background:#e2b400}.legend i.bad{background:#e0533a}
.checks{list-style:none;padding:0;margin:12px 0 0}.checks li{display:flex;gap:10px;padding:7px 0;border-top:1px solid var(--line);font-size:14px}
.checks li span{color:#b0aea8;font-weight:700;width:16px}.checks li.ok span{color:var(--good)}.checks li em{margin-left:auto;font-style:normal;color:var(--muted)}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{text-decoration:none;padding:6px 12px;border-radius:20px;background:#fff;border:1px solid var(--line);font-size:13px}.chip.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.pair-q{background:#faf9f7;border-radius:10px;padding:9px 12px;font-size:14px;margin-bottom:10px}
.pair-meta{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:10px}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:12px}.cols.two{margin-bottom:14px}
.col{background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px 12px;font-size:14px}
.col.script{background:#fdf2f3;border-color:#f7d3d6}
.col-head{font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.03em;margin-bottom:5px;display:flex;gap:6px;align-items:center}
.gb{display:flex;flex-direction:column;gap:4px;margin-top:10px;font-size:13px}.gb .g{color:var(--good)}.gb .b{color:var(--bad)}
.review{border-color:#efc9c1}
.cand{padding:8px 0;border-top:1px solid var(--line)}
.kv{display:flex;justify-content:space-between;align-items:center;padding:5px 0;font-size:14px}
.script-card summary b{font-size:15px}
details.log{border-top:1px solid var(--line);padding:7px 0}details.log summary{cursor:pointer;display:flex;gap:10px;font-size:13px;min-width:0}
/* вход */
.login-page{align-items:center;justify-content:center;padding:16px}
.login-card{background:#fff;border:1px solid var(--line);border-radius:20px;padding:28px;width:100%;max-width:380px;display:flex;flex-direction:column;gap:12px}
.login-card h1{margin:4px 0 0}
/* обучение */
.train-page{display:block}.train-page main{max-width:820px;margin:0 auto;padding:20px 16px 60px}
.train-page .page-head{display:flex;flex-direction:column;gap:4px}
.quiz{padding:10px 0;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:5px}.quiz:first-child{border-top:0}
.check.right{color:var(--good);font-weight:600}.check.wrong{color:var(--bad)}
/* мобильный */
@media (max-width:900px){
  body{flex-direction:column}
  .side{width:auto;flex:none;height:auto;position:static;padding:12px;gap:10px}
  .side nav{flex-direction:row;overflow-x:auto;gap:4px;scrollbar-width:none}.side nav::-webkit-scrollbar{display:none}
  .side nav a{white-space:nowrap;padding:7px 10px;font-size:14px}
  .logout{margin-top:0;align-self:flex-end;padding:0}
  main{padding:14px 12px 50px}
  .answer-body,.cols,.two-in{grid-template-columns:1fr}
  .table .row{flex-wrap:wrap;gap:4px 12px}.table .row>*:first-child{flex:1 0 100%}.table .row>.clip{flex:1 0 100%}
  .msg{max-width:94%}
}

.status-box h2{margin-top:0}.status-box.all-good{border-color:#b9e2c7}.status-box.has-bad{border-color:#efc9c1}
.st-row{display:flex;gap:10px;padding:8px 0;border-top:1px solid var(--line);font-size:14px;align-items:flex-start}.st-row:first-of-type{border-top:0}
.st-row>span{width:22px;height:22px;flex:0 0 22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px}
.st-row.good>span{background:var(--goodbg);color:var(--good)}.st-row.warn>span{background:var(--samebg);color:var(--same)}.st-row.bad>span{background:var(--badbg);color:var(--bad)}
.st-row.bad{color:var(--bad)}

/* диалог: переписка слева, ответ по скрипту справа - как во вкладке «Ответы» */
.dialog-view .thread{max-height:calc(100vh - 230px);min-height:420px}
.dialog-view .draft{position:sticky;top:16px;align-self:start}
.answer .thread{max-height:560px}