/* Цвета — с логотипа KENTRON: красная крыша и графитовая надпись */
:root{
  --red:#c4281f;--red-dark:#a01f18;--red-soft:#fbeceb;
  --ink:#2e2e2e;--muted:#6b6b6b;--line:#e3e1de;
  --bg:#f4f3f1;--card:#fff;
  --r:12px;--shadow:0 1px 2px rgba(0,0,0,.05),0 6px 20px rgba(0,0,0,.06);
  --head:"Roboto Condensed","Arial Narrow",system-ui,sans-serif;
}
*{box-sizing:border-box}
body{margin:0;font:16px/1.45 Roboto,system-ui,sans-serif;background:var(--bg);color:var(--ink)}
.wrap,main{max-width:1040px;margin:0 auto;padding:0 16px}

/* Шапка */
header{background:var(--card);border-bottom:3px solid var(--red);box-shadow:var(--shadow)}
header .wrap{display:flex;align-items:center;gap:20px;padding-top:14px;padding-bottom:14px}
.logo{height:52px;width:auto;display:block}
.title{border-left:1px solid var(--line);padding-left:20px}
h1{margin:0;font:italic 800 28px/1.1 var(--head);text-transform:uppercase;letter-spacing:.02em}
.title p{margin:2px 0 0;color:var(--muted);font-size:14px}
#sections{margin-left:auto}
#sections button{white-space:nowrap;font:700 14px var(--head);text-transform:uppercase;letter-spacing:.04em;padding:10px 16px}
@media (max-width:560px){header .wrap{flex-wrap:wrap;gap:10px}.title{border:0;padding:0}.logo{height:40px}h1{font-size:22px}#sections{width:100%}#sections button{flex:1 1 0;padding:10px 6px;font-size:13px}}

main{padding-top:20px;padding-bottom:28px}
h2{margin:0 0 12px;font:700 18px/1.2 var(--head);text-transform:uppercase;letter-spacing:.04em}
h2 small{font:400 14px Roboto,system-ui,sans-serif;text-transform:none;letter-spacing:0;color:var(--muted)}
.card{background:var(--card);border-radius:var(--r);box-shadow:var(--shadow);padding:18px;margin:0 0 16px}
.hint{font-size:13px;color:var(--muted);margin:4px 0}
.error{color:var(--red);min-height:1.2em;margin:4px 0}
.error:empty{min-height:0}
.toolbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:12px 0}
.toolbar label{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:14px}
footer{color:var(--muted);font-size:13px;padding:8px 0 28px}

/* Кнопки */
button,.btn,select{font:500 15px Roboto,system-ui,sans-serif;padding:9px 16px;border:1px solid #cfcbc6;border-radius:8px;background:var(--card);color:var(--ink);cursor:pointer;text-decoration:none;transition:background .15s,border-color .15s,color .15s}
button:hover,.btn:hover{border-color:var(--ink)}
select{padding-right:10px;min-width:200px}
button.primary{background:var(--red);border-color:var(--red);color:#fff;font-family:var(--head);font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:10px 22px}
button.primary:hover{background:var(--red-dark);border-color:var(--red-dark)}
button:disabled{opacity:.5;cursor:not-allowed}
button:focus-visible,.btn:focus-within,select:focus-visible{outline:2px solid var(--red);outline-offset:2px}
input[type=range]{accent-color:var(--red)}
input[type=checkbox]{accent-color:var(--red)}

.seg{display:flex}
.seg button{border-radius:0;margin-left:-1px}
.seg button:first-child{border-radius:8px 0 0 8px;margin-left:0}
.seg button:last-child{border-radius:0 8px 8px 0}
.seg button.on{background:var(--ink);border-color:var(--ink);color:#fff;position:relative}

/* Вкладки режимов */
.pills{margin:0 0 16px;gap:6px;flex-wrap:wrap}
.seg.pills button{border-radius:999px;margin:0;padding:10px 22px;font:700 15px var(--head);text-transform:uppercase;letter-spacing:.05em;background:var(--card);border-color:transparent;box-shadow:var(--shadow)}
.seg.pills button.on{background:var(--red);border-color:var(--red);color:#fff}

/* Примеры */
#examples{display:flex;gap:12px;overflow-x:auto;padding:2px 2px 8px;scroll-snap-type:x proximity}
#examples button{flex:0 0 156px;padding:0;display:flex;flex-direction:column;font-size:13px;text-align:left;border-radius:10px;overflow:hidden;border:1px solid var(--line);scroll-snap-align:start}
#examples button span{padding:7px 10px 9px;line-height:1.25}
#examples img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block}
#examples button:hover{border-color:#bdb8b2}
#examples button.on{border-color:var(--red);box-shadow:0 0 0 2px var(--red)}
#examples button.on span{color:var(--red);font-weight:500}
.upload{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:12px}
.upload .hint{margin:0}

/* Фото, кисть и шторка */
#stage,#cmp{position:relative;display:inline-block;max-width:100%;line-height:0;touch-action:none;-webkit-user-select:none;user-select:none;border-radius:8px;overflow:hidden}
#photo,#after,#before,#was{max-width:100%;max-height:70vh;display:block}
#overlay{position:absolute;left:0;top:0;width:100%;height:100%;opacity:.5;cursor:crosshair;touch-action:none}
#marks{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none}
#before,#was{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:fill;clip-path:inset(0 50% 0 0)}
#handle,#split{position:absolute;top:0;bottom:0;left:50%;width:3px;margin-left:-1.5px;background:#fff;box-shadow:0 0 6px rgba(0,0,0,.45);cursor:ew-resize;touch-action:none}
#handle::after,#split::after{content:"‹ ›";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:var(--red);color:#fff;border:3px solid #fff;border-radius:50%;width:40px;height:40px;line-height:33px;text-align:center;font:700 18px/33px var(--head);letter-spacing:2px;box-shadow:0 2px 8px rgba(0,0,0,.35)}
#cmp img,#photo{-webkit-user-drag:none;user-drag:none}
#cmp img,#was{pointer-events:none}

#status{color:var(--muted);font-size:14px}
#status:empty{display:none}
.spin{display:inline-block;width:14px;height:14px;border:2px solid var(--line);border-top-color:var(--red);border-radius:50%;animation:s 1s linear infinite;vertical-align:-2px;margin-right:6px}
@keyframes s{to{transform:rotate(360deg)}}

/* Расшифровка звонков: агент — красный КЕНТРОН, клиент — графит */
#sec-calls{--agent:var(--red);--agent-bg:var(--red-soft);--client:var(--ink);--client-bg:#efedea}
#sec-calls .hint{margin:-6px 0 14px;max-width:760px}
#cplayer{position:sticky;top:8px;z-index:10}
#cplayer h2{margin-bottom:10px}
.ctl{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ctl button{min-height:40px;min-width:44px;padding:0 12px}
#bPlay{min-width:120px}
.time{font-variant-numeric:tabular-nums;font-size:14px;color:var(--muted);margin-left:auto}
.seek{width:100%;margin:10px 0 0;height:24px}
#sum{font-size:14px}
.sum-row{display:flex;gap:18px;flex-wrap:wrap;margin-bottom:8px}
.share{display:flex;height:12px;border-radius:6px;overflow:hidden;background:var(--line)}
.share i{display:block;height:100%}
.share .a{background:var(--agent)}.share .c{background:var(--client)}
.legend{display:flex;gap:16px;margin-top:6px;font-size:13px;color:var(--muted);flex-wrap:wrap}
.dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:5px}
#chat{display:flex;flex-direction:column;gap:12px;padding-bottom:40px}
.u{max-width:86%;padding:10px 14px;border-radius:14px;border:2px solid transparent;transition:border-color .15s}
.u.agent{align-self:flex-start;background:var(--agent-bg);border-bottom-left-radius:4px}
.u.client{align-self:flex-end;background:var(--client-bg);border-bottom-right-radius:4px}
.u.agent .who{color:var(--agent)}.u.client .who{color:var(--client)}
.u.on.agent{border-color:var(--agent)}.u.on.client{border-color:var(--client)}
.who{font:700 13px var(--head);text-transform:uppercase;letter-spacing:.05em;margin-bottom:3px;display:flex;gap:8px;align-items:baseline}
.who button{font:400 12.5px Roboto,system-ui,sans-serif;font-variant-numeric:tabular-nums;border:0;background:none;color:var(--muted);padding:2px 4px;text-decoration:underline dotted}
.txt{font-size:17px;line-height:1.7;color:var(--ink);font-family:Roboto,"Noto Sans Armenian",system-ui,sans-serif}
.w{cursor:pointer;border-radius:4px;padding:0 1px;color:#8a8580}
.w:hover{background:rgba(0,0,0,.07)}
.w.past{color:var(--ink)}
.w.cur{background:var(--red);color:#fff;box-shadow:0 0 0 2px var(--red)}
.tr{cursor:pointer}
#chat:not(.ru) .tr,#chat.ru .txt:not(.tr){display:none}

[hidden]{display:none !important}
@media (max-width:560px){.pills{flex-wrap:nowrap}.seg.pills button{flex:1 1 auto;padding:9px 8px;font-size:13px;letter-spacing:.02em}.card{padding:14px}.u{max-width:94%}.txt{font-size:16px}#cplayer h2{display:none}.ctl{gap:6px}.ctl button{padding:0 9px}#bPlay{min-width:96px}#lang button{padding:0 10px}}