:root {
  --bg:#f4f6fa; --panel:#fff; --line:#e2e6ee; --ink:#1f2733; --mut:#6b7688;
  --accent:#3a6df0; --accent2:#eef3ff; --ok:#1f9d55; --warn:#d9822b; --bad:#d64545;
}
* { box-sizing:border-box; }
body { margin:0; font-family:-apple-system,Segoe UI,Roboto,Arial,sans-serif; background:var(--bg); color:var(--ink); font-size:14px; }
button { font:inherit; cursor:pointer; border:1px solid var(--line); background:#fff; border-radius:8px; padding:7px 12px; }
button.primary { background:var(--accent); color:#fff; border-color:var(--accent); }
button.ghost { background:transparent; }
button:hover { filter:brightness(0.97); }
input,select,textarea { font:inherit; padding:7px 9px; border:1px solid var(--line); border-radius:8px; background:#fff; }
.hidden { display:none !important; }
.err { color:var(--bad); min-height:18px; font-size:13px; }

#login { max-width:340px; margin:12vh auto; background:var(--panel); padding:24px; border-radius:14px; box-shadow:0 8px 30px rgba(30,40,60,.08); }
#login h1 { font-size:18px; margin:0 0 16px; }
#login input { width:100%; margin-bottom:10px; }
#login button { width:100%; }

header { display:flex; align-items:center; gap:14px; background:var(--panel); padding:10px 18px; border-bottom:1px solid var(--line); position:sticky; top:0; z-index:5; }
header .logo { font-weight:700; color:var(--accent); }
header .spacer { flex:1; }
header .who { color:var(--mut); }
nav.tabs { display:flex; gap:4px; }
nav.tabs button.active { background:var(--accent2); border-color:var(--accent); color:var(--accent); font-weight:600; }
main { padding:16px 18px 48px; }

.toolbar { display:flex; gap:10px; align-items:center; margin-bottom:12px; flex-wrap:wrap; }
.toolbar .grow { flex:1; }
.hint { color:var(--mut); font-size:12px; }

table { width:100%; border-collapse:collapse; background:var(--panel); border-radius:10px; overflow:hidden; }
th,td { padding:8px 10px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; font-size:13px; }
th { background:#fafbfe; color:var(--mut); font-weight:600; }
tr:hover td { background:#fafcff; }
.badge { display:inline-block; padding:2px 8px; border-radius:20px; font-size:12px; }
.badge.kval { background:#e6f7ec; color:#1f8a4c; }
.badge.nekval { background:#fdeaea; color:#c23b3b; }
select.mini { font-size:12px; padding:3px 6px; }
td .rec a { color:var(--accent); }
td.cmt { max-width:340px; white-space:pre-wrap; }

/* карточки зарплаты */
.cards { display:flex; gap:14px; flex-wrap:wrap; }
.card { background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:16px 18px; min-width:230px; }
.card h3 { margin:0 0 10px; font-size:15px; }
.card .big { font-size:26px; font-weight:700; color:var(--accent); }
.card .row { display:flex; justify-content:space-between; color:var(--mut); margin:4px 0; }
.card .row b { color:var(--ink); }

/* мультивыбор проектов */
.p-tools { margin-bottom:6px; color:var(--mut); font-size:12px; }
.p-all { color:var(--accent); cursor:pointer; }
.p-all:hover { text-decoration:underline; }
.p-list { max-height:44vh; overflow:auto; display:flex; flex-direction:column; gap:2px; border:1px solid var(--line); border-radius:8px; padding:6px; }
.p-item { display:flex; align-items:center; gap:7px; padding:3px 4px; border-radius:6px; cursor:pointer; }
.p-item:hover { background:var(--accent2); }
td .phone { color:var(--accent); text-decoration:none; }
td .phone:hover { text-decoration:underline; }

/* плеер + транскрибация */
td.editcmt, td.editacc { cursor:text; max-width:240px; white-space:pre-wrap; }
td.editcmt:hover, td.editacc:hover { background:var(--accent2); }
td .play { padding:2px 8px; font-size:13px; }
tr.detail td { background:#f5f8ff; padding:6px 12px; }
.hist-hdr { font-weight:600; margin:4px 0 8px; color:var(--ink); }
.player { display:flex; gap:22px; align-items:flex-start; padding:8px 4px; border-top:1px dashed var(--line); }
.player:first-of-type { border-top:none; }
.p-left { flex:0 0 auto; }
.p-left audio { width:340px; margin-top:4px; display:block; }
.tr-box { flex:1; min-width:280px; }
.tr-text { white-space:pre-wrap; margin-top:6px; max-height:220px; overflow:auto; line-height:1.5; }

.modal-bg { position:fixed; inset:0; background:rgba(20,28,40,.4); display:flex; align-items:center; justify-content:center; z-index:20; }
.modal { background:#fff; border-radius:12px; padding:20px; min-width:480px; max-width:640px; }
.grp-row { display:flex; gap:8px; align-items:center; margin-bottom:8px; }
.grp-row input { flex:1; min-width:0; }
.actions { display:flex; gap:8px; justify-content:flex-end; margin-top:10px; }
.sep { border-top:1px solid var(--line); margin:12px 0; }
label.chk { display:inline-flex; align-items:center; gap:5px; }

/* Скрипты: панель при прослушке + вкладка */
.sc-panel { padding:6px 4px 8px; border-bottom:1px dashed var(--line); margin-bottom:4px; }
.sc-toggle { padding:3px 10px; font-size:13px; }
.sc-panel-text { white-space:pre-wrap; margin-top:8px; max-height:260px; overflow:auto; line-height:1.5;
                 background:#fff; border:1px solid var(--line); border-radius:8px; padding:10px; }
.sc-row { cursor:pointer; }
.sc-row:hover { background:var(--accent2); }
.script-box { white-space:pre-wrap; line-height:1.55; background:#fff; border:1px solid var(--line);
              border-radius:8px; padding:12px; max-height:420px; overflow:auto; }
.script-edit { width:100%; height:320px; font-family:inherit; line-height:1.5; resize:vertical; }
.sc-edit, .sc-del { border:none; background:transparent; cursor:pointer; font-size:14px; padding:0 4px; opacity:.55; }
.sc-edit:hover, .sc-del:hover { opacity:1; }
.sc-del { color:#c0392b; }

/* Отчёты + удаление лида */
.rep-wrap { overflow-x:auto; margin-bottom:18px; }
.del-rec { border:none; background:transparent; color:#c0392b; cursor:pointer; font-size:13px; padding:0 4px; opacity:.55; }
.del-rec:hover { opacity:1; }

/* ================= Мобильная версия (телефон) ================= */
@media (max-width: 760px) {
  body { font-size:15px; }
  input, select, textarea { font-size:16px; }         /* >=16px — iOS не зумит поле */
  main { padding:12px 12px 40px; }

  /* Шапка: перенос строк, вкладки — горизонтальная прокрутка */
  header { flex-wrap:wrap; gap:8px; padding:8px 12px; }
  header .logo { font-size:14px; }
  header .spacer { display:none; }
  header .who { font-size:11px; margin-left:auto; text-align:right; }
  nav.tabs { order:10; flex-basis:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; padding-bottom:2px; }
  nav.tabs button { white-space:nowrap; }

  /* Тулбар фильтров — в столбик, во всю ширину */
  .toolbar { flex-direction:column; align-items:stretch; gap:8px; }
  .toolbar > * { width:100%; }
  .toolbar label.hint { display:flex; align-items:center; gap:6px; }
  .toolbar label.hint input[type=date] { flex:1; }
  .toolbar label.chk { justify-content:flex-start; }

  /* Карточки (зарплата/отчёты) — один столбец */
  .cards { flex-direction:column; }
  .card { min-width:0; width:100%; }

  /* Проверки: широкая таблица -> карточки */
  #r-table thead { display:none; }
  #r-table table { background:transparent; border-radius:0; }
  #r-table tbody, #r-table tr, #r-table td { display:block; }
  #r-table tr { background:var(--panel); border:1px solid var(--line); border-radius:12px; margin-bottom:12px; padding:8px 12px; }
  #r-table tr:hover td { background:transparent; }
  #r-table td { border:none; padding:7px 0; display:flex; justify-content:space-between; align-items:center; gap:12px; }
  #r-table td::before { content:attr(data-label); color:var(--mut); font-size:12px; font-weight:600; flex:0 0 auto; }
  #r-table td.cmt, #r-table td.editcmt, #r-table td.editacc { flex-direction:column; align-items:stretch; max-width:none; }
  #r-table td.cmt::before, #r-table td.editcmt::before, #r-table td.editacc::before { margin-bottom:4px; }
  #r-table td.editcmt, #r-table td.editacc { cursor:text; }
  #r-table td.editcmt:hover, #r-table td.editacc:hover { background:transparent; }
  #r-table td .mini { flex:1; padding:10px; font-size:16px; }
  #r-table td.rec .play { flex:1; padding:10px; }
  #r-table td .editcmt textarea, #r-table td.editcmt textarea, #r-table td.editacc textarea { width:100% !important; }

  /* строка-деталь (плеер + транскрибация) как блок, вертикально */
  #r-table tr.detail { padding:8px; }
  #r-table tr.detail td { display:block; padding:6px; }
  #r-table tr.detail td::before { content:none; }
  .player { flex-direction:column; gap:10px; }
  .p-left, .tr-box { width:100%; min-width:0; }
  .p-left audio { width:100%; }
  .tr-text { max-height:none; }

  /* Скрипты на телефоне: таблица — карточками, текст на всю ширину */
  #sc-tbl table, #sc-tbl thead, #sc-tbl tbody, #sc-tbl tr, #sc-tbl td { display:block; width:100%; }
  #sc-tbl thead { display:none; }
  #sc-tbl tr.sc-row { border:1px solid var(--line); border-radius:10px; margin-bottom:8px; padding:8px; background:#fff; }
  #sc-tbl td { border:none; padding:3px 0; }
  #sc-tbl td::before { content:attr(data-label) ": "; color:var(--muted); font-size:12px; }
  #sc-tbl td[data-label=""]::before { content:none; }
  .script-box, .sc-panel-text { max-height:none; }
  .script-edit { height:50vh; }

  /* Модалки (мультивыбор проектов, входы) — почти на весь экран */
  .modal { min-width:0; width:94vw; max-width:94vw; padding:16px; }
  .grp-row { flex-wrap:wrap; }
  .grp-row input, .grp-row select { flex:1 1 46%; }
}