/* ================= токены ================= */
:root{
  --bg:#0e1116; --panel:#161a21; --panel2:#1c212a; --raise:#232935;
  --line:#252b36; --line2:#323a48;
  --text:#e8edf5; --muted:#8d99ad; --dim:#5f6b7e;
  --accent:#4d8dff; --accent-soft:rgba(77,141,255,.14);
  --green:#31c07d; --green-soft:rgba(49,192,125,.14);
  --red:#ff5f6d;   --red-soft:rgba(255,95,109,.14);
  --amber:#f0b429; --amber-soft:rgba(240,180,41,.14);
  --violet:#a78bfa;
  /* цвета блоков в таблицах — приглушённые, без зелёного и красного:
     они означают «плюс» и «минус», блок не должен их занимать */
  --g0:#6f9bf2; --g0s:rgba(111,155,242,.13);   /* синий      */
  --g1:#a68ce0; --g1s:rgba(166,140,224,.13);   /* сиреневый  */
  --g2:#cba15c; --g2s:rgba(203,161,92,.13);    /* песочный   */
  --g3:#93a1b8; --g3s:rgba(147,161,184,.14);   /* серо-синий */
  --g4:#bc8f72; --g4s:rgba(188,143,114,.13);   /* охра       */
  --shadow:0 8px 30px rgba(0,0,0,.45);
  --r:10px; --r-sm:7px;
}
[data-theme="light"]{
  --bg:#f4f6fa; --panel:#ffffff; --panel2:#f7f9fc; --raise:#eef2f8;
  --line:#e2e8f0; --line2:#cfd8e3;
  --text:#111827; --muted:#5b6879; --dim:#8b97a8;
  --accent:#2563eb; --accent-soft:rgba(37,99,235,.10);
  --green:#0f9d58; --green-soft:rgba(15,157,88,.12);
  --red:#dc2626;   --red-soft:rgba(220,38,38,.10);
  --amber:#b45309; --amber-soft:rgba(180,83,9,.12);
  --violet:#7c3aed;
  --g0:#2f6ad9; --g0s:rgba(47,106,217,.09);
  --g1:#7c53c9; --g1s:rgba(124,83,201,.09);
  --g2:#9a6a12; --g2s:rgba(154,106,18,.10);
  --g3:#5a6b85; --g3s:rgba(90,107,133,.09);
  --g4:#8a5a3c; --g4s:rgba(138,90,60,.09);
  --shadow:0 8px 28px rgba(15,23,42,.12);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--text);
  font:14px/1.45 -apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Inter,Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4{margin:0;font-weight:600;letter-spacing:-.01em}
a{color:var(--accent)}

/* ================= шапка ================= */
.topbar{
  position:sticky; top:0; z-index:50; display:flex; align-items:center; gap:20px;
  padding:0 18px; height:54px; background:var(--panel);
  border-bottom:1px solid var(--line);
}
.brand{display:flex;align-items:center;gap:9px;flex:0 0 auto}
.brand-mark{width:18px;height:18px;border-radius:5px;
  background:linear-gradient(135deg,var(--accent),var(--violet))}
.brand-name{font-weight:650;letter-spacing:-.02em}
.tabs{display:flex;gap:2px;flex:1;overflow-x:auto;scrollbar-width:none}
/* без этого атрибут hidden не работает: display:flex выше по силе,
   и полоса вкладок успевает мелькнуть со всеми разделами до входа */
.tabs[hidden]{display:none}
.tabs::-webkit-scrollbar{display:none}
.tab{
  background:none;border:0;padding:7px 13px;border-radius:var(--r-sm);
  color:var(--muted);cursor:pointer;white-space:nowrap;font-weight:500;
}
.tab:hover{color:var(--text);background:var(--panel2)}
.tab.active{color:var(--text);background:var(--raise)}
.topbar-right{display:flex;align-items:center;gap:8px}
.period{
  background:var(--panel2);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:6px 9px;cursor:pointer;
}
.icon-btn{
  background:var(--panel2);border:1px solid var(--line);border-radius:var(--r-sm);
  width:32px;height:32px;cursor:pointer;color:var(--muted);
}
.icon-btn:hover{color:var(--text);border-color:var(--line2)}

/* ================= каркас ================= */
.view{padding:18px;max-width:1560px;margin:0 auto}
.grid{display:grid;gap:14px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:14px}
@media(max-width:1080px){.split,.g2,.g3,.g4{grid-template-columns:1fr}}
/* окно в половину экрана: четыре показателя встают 2×2 и жмутся по высоте.
   В один столбец они съедали весь первый экран, до таблиц приходилось листать. */
@media(min-width:761px) and (max-width:1080px){
  .grid.g4{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .grid.g4 .kpi{padding:10px 13px;gap:2px}
  .grid.g4 .kpi .label{font-size:11.5px}
  .grid.g4 .kpi .value{font-size:21px}
  .grid.g4 .kpi .value.sm{font-size:18px}
  .grid.g4 .kpi .hint{font-size:11px}
}

.card{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;
}
.card-head{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:12px 14px;border-bottom:1px solid var(--line);
}
.card-head h3{font-size:13.5px}
.card-head .sub{color:var(--dim);font-size:12px;font-weight:400}
.card-body{padding:14px}
.card-body.flush{padding:0}

/* ================= KPI ================= */
.kpi{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:14px 16px;display:flex;flex-direction:column;gap:6px;position:relative;
  overflow:hidden;
}
.kpi::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--line2)}
.kpi.good::before{background:var(--green)} .kpi.bad::before{background:var(--red)}
.kpi.warn::before{background:var(--amber)} .kpi.info::before{background:var(--accent)}
.kpi .label{color:var(--muted);font-size:12px;letter-spacing:.01em}
.kpi .value{font-size:26px;font-weight:640;letter-spacing:-.025em;
  font-variant-numeric:tabular-nums}
.kpi .value.sm{font-size:21px}
.kpi .hint{color:var(--dim);font-size:11.5px}
.kpi.good .value{color:var(--green)} .kpi.bad .value{color:var(--red)}

/* ================= таблицы ================= */
.tbl{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.tbl th{
  text-align:left;font-size:11px;font-weight:600;letter-spacing:.04em;
  text-transform:uppercase;color:var(--dim);padding:9px 12px;
  border-bottom:1px solid var(--line);background:var(--panel2);
  position:sticky;top:0;z-index:1;white-space:nowrap;
}
.tbl td{padding:9px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
.tbl tbody tr:last-child td{border-bottom:0}
.tbl tbody tr:hover{background:var(--panel2)}
.tbl .num{text-align:right;white-space:nowrap}
.tbl tfoot td{
  padding:10px 12px;border-top:1px solid var(--line2);font-weight:650;
  background:var(--panel2);
}
.tbl .name{font-weight:500}
.scroll{max-height:520px;overflow:auto}
.scroll.tall{max-height:640px}
/* у QR-таблицы много строк и она не выше окна — нижняя дымка там только мешает */
.scroll.no-fade.more-below{-webkit-mask-image:none;mask-image:none}

/* таблица QR: 18 узких колонок с курсами — обычный padding раздувал строку
   вширь без надобности, здесь он ощутимо теснее */
.tbl.compact th,.tbl.compact td{padding:6px 7px}

/* ================= мелочи ================= */
.money{font-variant-numeric:tabular-nums;white-space:nowrap}
.pos{color:var(--green)} .neg{color:var(--red)} .mut{color:var(--muted)}
.dim{color:var(--dim)} .small{font-size:12px}
.pill{
  display:inline-block;padding:2px 8px;border-radius:20px;font-size:11px;font-weight:600;
  background:var(--raise);color:var(--muted);white-space:nowrap;
}
.pill.b{background:var(--accent-soft);color:var(--accent)}
.pill.g{background:var(--green-soft);color:var(--green)}
.pill.r{background:var(--red-soft);color:var(--red)}
.pill.a{background:var(--amber-soft);color:var(--amber)}
.btn{
  background:var(--raise);border:1px solid var(--line2);border-radius:var(--r-sm);
  padding:7px 13px;cursor:pointer;font-weight:550;color:var(--text);
}
.btn:hover{border-color:var(--muted)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.primary:hover{filter:brightness(1.1)}
.btn.ghost{background:none;border-color:var(--line)}
.btn.sm{padding:4px 9px;font-size:12px;border-radius:6px}
.btn.plus{padding:2px 10px;font-size:17px;line-height:19px;font-weight:500}
.btn.on{background:var(--raise);border-color:var(--line2);color:var(--text)}
.btn.danger{color:var(--red);border-color:var(--line2)}
.btn.danger:hover{background:var(--red-soft);border-color:var(--red)}
.row{display:flex;align-items:center;gap:8px}
.row.wrap{flex-wrap:wrap}
.spacer{flex:1}
.empty{padding:30px;text-align:center;color:var(--dim)}

/* полоса выполнения */
.bar{height:5px;border-radius:3px;background:var(--raise);overflow:hidden;min-width:60px}
.bar>i{display:block;height:100%;background:var(--accent);border-radius:3px}
.bar>i.g{background:var(--green)} .bar>i.a{background:var(--amber)} .bar>i.r{background:var(--red)}

/* ================= формы ================= */
.field{display:flex;flex-direction:column;gap:5px}
.field>label{font-size:11.5px;color:var(--muted);font-weight:550}
.input,select.input,textarea.input{
  background:var(--panel2);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:8px 10px;width:100%;outline:none;
}
.input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.input.num{text-align:right;font-variant-numeric:tabular-nums}
.form-grid{display:grid;gap:12px;grid-template-columns:repeat(2,minmax(0,1fr))}
.form-grid .wide{grid-column:1/-1}
/* два коротких поля в одной ячейке — дата и номер счёта рядом */
.form-grid .pair{display:grid;gap:10px;grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:640px){.form-grid{grid-template-columns:1fr}}

/* ================= модалка ================= */
.backdrop{
  position:fixed;inset:0;background:rgba(3,6,12,.62);backdrop-filter:blur(3px);
  display:flex;align-items:flex-start;justify-content:center;padding:6vh 16px;z-index:100;
}
.modal{
  background:var(--panel);border:1px solid var(--line2);border-radius:12px;
  width:min(660px,100%);box-shadow:var(--shadow);max-height:88vh;display:flex;
  flex-direction:column;
}
.modal.wide{width:min(980px,100%)}
.modal-head{display:flex;align-items:center;justify-content:space-between;
  padding:14px 16px;border-bottom:1px solid var(--line)}
.modal-body{padding:16px;overflow:auto}
.modal-foot{display:flex;gap:8px;justify-content:flex-end;padding:13px 16px;
  border-top:1px solid var(--line);background:var(--panel2)}

/* итог расчёта в форме сделки */
.calc{
  background:var(--panel2);border:1px solid var(--line);border-radius:var(--r);
  padding:12px 14px;display:grid;gap:8px;
}
.calc .line{display:flex;justify-content:space-between;font-size:13px}
.calc .line span:first-child{color:var(--muted)}
.calc .line.total{border-top:1px solid var(--line2);padding-top:8px;
  font-weight:660;font-size:15px}
.calc .line.total span:last-child{color:var(--green)}

/* ================= тост ================= */
.toast-root{position:fixed;right:16px;bottom:16px;display:flex;flex-direction:column;
  gap:8px;z-index:200}
.toast{
  background:var(--raise);border:1px solid var(--line2);border-left:3px solid var(--accent);
  border-radius:var(--r-sm);padding:10px 14px;box-shadow:var(--shadow);
  animation:slide .2s ease-out;max-width:330px;
}
.toast.err{border-left-color:var(--red)}
.toast.ok{border-left-color:var(--green)}
@keyframes slide{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ================= график ================= */
.chart{width:100%;display:block}
.chart .axis{stroke:var(--line);stroke-width:1}
.chart .lbl{fill:var(--dim);font-size:10px}
.chart .barr{fill:var(--accent);opacity:.85}
.chart .barr2{fill:var(--green)}
.chart .lin{fill:none;stroke:var(--green);stroke-width:2}

/* ================= вкладки внутри раздела ================= */
.subtabs{display:flex;gap:4px;padding:2px;background:var(--panel2);
  border:1px solid var(--line);border-radius:var(--r-sm);width:fit-content}
.subtab{background:none;border:0;padding:6px 12px;border-radius:5px;color:var(--muted);
  cursor:pointer;font-weight:500}
.subtab.active{background:var(--raise);color:var(--text)}
.section-head{display:flex;align-items:center;gap:12px;margin:0 0 14px}
.section-head h2{font-size:17px}

/* ================= правка прямо в таблице ================= */
.tbl td.cell{cursor:text}
.tbl td.cell:hover{
  background:var(--raise);
  box-shadow:inset 0 0 0 1px var(--line2);
  border-radius:5px;
}
.cell-input{
  width:100%;background:var(--panel);border:1px solid var(--accent);
  border-radius:5px;padding:3px 6px;outline:none;font:inherit;
  box-shadow:0 0 0 3px var(--accent-soft);
  font-variant-numeric:tabular-nums;
}
.row-act{white-space:nowrap;display:flex;gap:1px;justify-content:flex-end}
.tbl tbody tr .row-act{opacity:.2;transition:opacity .12s}
.tbl tbody tr:hover .row-act,.tbl tbody tr:focus-within .row-act{opacity:1}
.mini{
  background:none;border:1px solid transparent;border-radius:5px;
  width:25px;height:25px;padding:0;line-height:1;cursor:pointer;color:var(--muted);
}
.mini:hover:not(:disabled){background:var(--raise);border-color:var(--line2);color:var(--text)}
.mini:disabled{opacity:.2;cursor:default}
.mini.danger:hover{color:var(--red);border-color:var(--red);background:var(--red-soft)}
.hint-row{padding:8px 14px;border-top:1px solid var(--line);color:var(--dim);font-size:11.5px}

/* ================= перетаскивание строк ================= */
.tbl tbody tr[draggable]{cursor:grab}
.tbl tbody tr.dragging{opacity:.4;cursor:grabbing}
.tbl tbody tr.drop-before td{box-shadow:inset 0 2px 0 var(--accent)}
.tbl tbody tr.drop-after  td{box-shadow:inset 0 -2px 0 var(--accent)}
.grab{color:var(--dim);cursor:grab;user-select:none;padding-right:2px}
.tbl tbody tr:hover .grab{color:var(--muted)}

/* ================= блоки внутри таблицы ================= */
.tbl tr.grp-row td{
  background:var(--panel2);border-bottom:1px solid var(--line2);
  padding:7px 12px;font-size:11px;font-weight:650;letter-spacing:.04em;
  text-transform:uppercase;color:var(--muted);
}
.tbl tr.grp-row .grp-name{cursor:text}

/* у каждого блока свой цвет — иначе соседние блоки сливаются в одну простыню.
   Цвет берётся по номеру блока, поэтому новый блок получает его сам. */
.tbl tr[data-gi="0"]{--gc:var(--g0);--gcs:var(--g0s)}
.tbl tr[data-gi="1"]{--gc:var(--g1);--gcs:var(--g1s)}
.tbl tr[data-gi="2"]{--gc:var(--g2);--gcs:var(--g2s)}
.tbl tr[data-gi="3"]{--gc:var(--g3);--gcs:var(--g3s)}
.tbl tr[data-gi="4"]{--gc:var(--g4);--gcs:var(--g4s)}
.tbl tr[data-gi] td:first-child{border-left:3px solid var(--gc)}
.tbl.blocks th:first-child,
.tbl.blocks tfoot td:first-child{border-left:3px solid transparent}
.tbl tr.grp-row[data-gi] td{background:var(--gcs);color:var(--gc)}
.tbl tr.grp-row[data-gi]{border-top:1px solid var(--line2)}
.tbl tr.grp-row[data-gi] .grp-name:hover{color:var(--gc);text-decoration:underline dotted}
.tbl tr.grp-row[data-gi]:hover td{background:var(--gcs)}
.tbl tr.grp-row .grp-name:hover{color:var(--text);text-decoration:underline dotted}
.tbl tr.grp-row.drop-before td{box-shadow:inset 0 2px 0 var(--accent)}
/* блок целиком: ⠿ у названия тянет блок со всеми строками, линия — куда он встанет */
.tbl tr.grp-row .gmove{margin-right:7px;letter-spacing:0;font-size:12px}
.tbl tr.blk-dragging td{opacity:.4}
.tbl.blk-collapsed tbody tr:not(.grp-row){display:none}   /* тянем блок — видны одни заголовки */
.tbl tr.blk-before td{box-shadow:inset 0 3px 0 var(--accent)}
.tbl tr.blk-after td{box-shadow:inset 0 -3px 0 var(--accent)}
.gmv .mini{width:30px;height:26px;margin-left:6px;font-size:11px;vertical-align:middle}
.gmv .mini[disabled]{opacity:.3;cursor:default}
html[data-ro] .gmv{display:none}
select.cell-input{cursor:pointer}

/* перетаскивание строк — курсор и запрет выделения на время */
body.dragging-rows{user-select:none;cursor:grabbing}
body.dragging-rows *{cursor:grabbing !important}

/* ================= три колонки: ввод | наличие | выдачи ================= */
.split3{
  display:grid;
  grid-template-columns:minmax(250px,0.8fr) minmax(0,1.1fr) minmax(0,1.1fr);
  gap:14px;
  align-items:stretch;
}

/* Высоту ряда задаёт только «Расчёты» (.h-lead) — она видна целиком.
   Соседние карточки подстраиваются под неё, а их списки листаются внутри:
   height:0 + min-height:100% как раз и означает «не влияй на высоту ряда,
   но займи её всю». */
.split3 > .card{display:flex;flex-direction:column;min-height:0}
.split3 > .card:not(.h-lead){height:0;min-height:100%}
.split3 > .card > .card-body.flush{flex:1;min-height:0;display:flex;flex-direction:column}
.split3 > .card > .card-body.flush > .scroll{
  flex:1;min-height:0;
  max-height:none;        /* высоту задаёт карточка, а не потолок в 520px,
                             иначе внизу оставалась пустая полоса */
}
@media(max-width:1250px){.split3{grid-template-columns:minmax(230px,.9fr) 1fr}}
@media(max-width:900px){
  .split3{grid-template-columns:1fr}
  /* в одну колонку карточки тянутся по содержимому: приём с height:0 нужен
     только для выравнивания высот в ряду, а в столбце он их схлопывал */
  .split3 > .card:not(.h-lead){height:auto;min-height:0}
  .split3 > .card > .card-body.flush > .scroll{max-height:none}
}

/* форма быстрого ввода */
.qf{display:flex;flex-direction:column;gap:9px}
.qf .big-num{
  font-size:22px;font-weight:640;letter-spacing:-.02em;padding:9px 11px;
  text-align:right;font-variant-numeric:tabular-nums;
}
.seg{display:grid;grid-template-columns:1fr 1fr;gap:3px;padding:3px;
  background:var(--panel2);border:1px solid var(--line);border-radius:var(--r-sm)}
.seg-btn{
  background:none;border:0;border-radius:5px;padding:6px 8px;cursor:pointer;
  color:var(--muted);font-weight:600;
}
.seg-btn:hover{color:var(--text)}
.seg-btn.on{background:var(--raise);color:var(--text)}
.seg-btn.on.plus{background:var(--green-soft);color:var(--green)}
.seg-btn.on.minus{background:var(--red-soft);color:var(--red)}

/* подсветка кошелька, которого коснулась операция */
@keyframes flashrow{
  0%{background:var(--accent-soft)}
  60%{background:var(--accent-soft)}
  100%{background:transparent}
}
.tbl tbody tr.flash td{animation:flashrow 1.4s ease-out}

/* в узких колонках таблицы плотнее */
.split3 .tbl th,.split3 .tbl td{padding:8px 10px}
.split3 .tbl th{font-size:10.5px;letter-spacing:.03em}

/* режим «перевод» в форме баланса */
.seg3{grid-template-columns:1fr 1fr 1fr}
.seg-btn.on.move{background:var(--accent-soft);color:var(--accent)}
.xfer{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:6px}
.xfer[hidden]{display:none}          /* иначе display:grid перебивает скрытие */
.xfer-arrow{color:var(--dim);font-size:13px}
.xfer .input{min-width:0}

/* перевод в ленте — одна нейтральная строка */
.tbl tr.xfer-row td{background:var(--accent-soft)}
.tbl tr.xfer-row:hover td{background:var(--accent-soft);filter:brightness(1.15)}
.tbl tr.xfer-row .pill{padding:1px 6px;font-size:10px;margin-right:3px}

/* пустой блок — тоже цель для перетаскивания */
.tbl tr.grp-empty td{padding:10px 12px}
.tbl tr.grp-empty.drop-before td{box-shadow:inset 0 2px 0 var(--accent);background:var(--accent-soft)}

/* ================= полосы прокрутки не показываем ================= */
/* Прокрутка работает как раньше — колёсиком, трекпадом, клавишами.
   Просто сами полоски не рисуются: они резали таблицы по краю. */
.scroll,
.modal-body,
.card-body,
body{
  scrollbar-width:none;          /* Firefox */
  -ms-overflow-style:none;       /* старый Edge */
}
.scroll::-webkit-scrollbar,
.modal-body::-webkit-scrollbar,
.card-body::-webkit-scrollbar,
body::-webkit-scrollbar{
  width:0;
  height:0;
  display:none;                  /* Safari и Chrome */
}

/* ============ структура: холст со схемой ============ */
.st-bar{padding:8px 12px;margin:0;border-bottom:1px solid var(--line)}
/* Окно в большое поле: прокручивается само, размер ему задаёт код —
   по высоте экрана. Поле внутри куда больше окна, по нему «бегают»
   рукой за пустое место, колёсиком и полоской снизу. */
.st-view{position:relative}
.st-wrap{position:relative;cursor:grab}
.st-wrap.pan{cursor:grabbing}
.st-wrap.pan .st-node{pointer-events:none}
/* рамка размером «поле × масштаб»: по ней считается прокрутка */
.st-size{position:relative;overflow:hidden}
.st-canvas{
  position:relative;transform-origin:0 0;
  --inv:1;                       /* 1/масштаб: что должно на экране остаться прежним */
  background:var(--panel);
  background-image:radial-gradient(var(--line) 1px, transparent 1px);
  background-size:22px 22px;
}
.st-canvas svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
/* стрелка — две линии: широкая прозрачная ловит нажатие, тонкая видна */
.st-canvas svg .hit{pointer-events:stroke;stroke:transparent;fill:none;cursor:pointer}
.st-canvas svg .ln{fill:none;stroke:var(--line2)}
.st-canvas svg .hit:hover + .ln{stroke:var(--muted)}
.st-canvas svg .ln.sel{stroke:var(--accent)}
/* наконечник на конце линии: теперь видно, куда идут деньги. Размер задан
   в долях толщины линии, а та делится на масштаб — значит, на экране
   наконечник остаётся одинаковым при любом увеличении. */
.st-canvas svg .ln{marker-end:url(#st-ar)}
.st-canvas svg .ln.sel{marker-end:url(#st-ar-on)}
/* наконечник светлее самой линии: он несёт новое — куда идут деньги,
   а линия только соединяет */
#st-ar path{fill:var(--muted)}
#st-ar-on path{fill:var(--accent)}
/* рамка выбора: обводим несколько блоков разом */
.st-band{
  position:absolute;pointer-events:none;z-index:1;
  border:calc(1px * var(--inv)) dashed var(--accent);
  background:var(--accent-soft);border-radius:calc(4px * var(--inv));
}
/* метка там, куда нажали: сюда ляжет вставленный блок */
.st-mark{
  position:absolute;width:calc(14px * var(--inv));height:calc(14px * var(--inv));
  margin:calc(-7px * var(--inv)) 0 0 calc(-7px * var(--inv));
  border:calc(1.5px * var(--inv)) dashed var(--accent);border-radius:50%;
  opacity:.7;pointer-events:none;
}

/* ---- масштаб: ползунок у правого края поля, вверх — крупнее ---- */
.st-zoom{
  position:absolute;right:12px;top:50%;transform:translateY(-50%);z-index:2;
  display:flex;flex-direction:column;align-items:center;gap:4px;
  padding:6px 4px;border-radius:10px;
  background:var(--panel2);border:1px solid var(--line);
  box-shadow:0 2px 10px rgba(0,0,0,.28);
}
.st-zb{
  width:22px;height:22px;border:0;border-radius:6px;background:none;
  color:var(--muted);font-size:15px;line-height:1;cursor:pointer;padding:0;
}
.st-zb:hover{background:var(--raise);color:var(--text)}
.st-ztrack{
  position:relative;width:6px;height:150px;margin:6px 0;border-radius:3px;
  background:var(--line);cursor:pointer;touch-action:none;
}
.st-zthumb{
  position:absolute;left:50%;top:0;width:14px;height:14px;
  margin:-7px 0 0 -7px;border-radius:50%;
  background:var(--accent);box-shadow:0 1px 4px rgba(0,0,0,.4);cursor:grab;
}
.st-zthumb.drag{cursor:grabbing}
.st-zpct{
  border:0;background:none;color:var(--dim);font-size:10.5px;
  cursor:pointer;padding:2px 3px;font-variant-numeric:tabular-nums;
}
.st-zpct:hover{color:var(--text)}
.st-zfit{
  border:0;background:none;color:var(--dim);font-size:10.5px;
  cursor:pointer;padding:2px 5px;border-radius:5px;
}
.st-zfit:hover{background:var(--raise);color:var(--text)}
.st-node{
  position:absolute;border-radius:12px;padding:11px 15px;
  background:var(--panel2);border:1px solid var(--line2);
  font-weight:600;font-size:13px;line-height:1.3;color:var(--text);
  cursor:grab;user-select:none;touch-action:none;
  box-shadow:0 2px 10px rgba(0,0,0,.28);
  /* ужатый блок обрезает текст, а не разъезжается наружу */
  overflow:hidden;
}
/* уголок, за который блок тянут по размеру — как у окна */
.st-grip{
  position:absolute;right:0;bottom:0;width:16px;height:16px;
  cursor:nwse-resize;opacity:0;transition:opacity .12s;
}
.st-grip::before{
  content:'';position:absolute;right:4px;bottom:4px;width:6px;height:6px;
  border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);
  border-bottom-right-radius:3px;
}
.st-node:hover .st-grip,.st-node.sel .st-grip{opacity:.8}
.st-node.resize{cursor:nwse-resize;opacity:.85}
.st-node.resize .st-grip{opacity:1}
/* кнопок в ряду стало больше — пусть жмётся подсказка, а не они сами */
.st-bar .btn{white-space:nowrap;flex:none}
.st-bar #st-hint{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;min-width:0}
/* «Назад» гаснет, когда отменять нечего */
.st-bar .btn:disabled{opacity:.35;cursor:default}
.st-bar .btn:disabled:hover{background:none;border-color:var(--line)}
.st-node small{display:block;font-weight:400;font-size:11.5px;color:var(--muted);margin-top:3px}
/* ужатые блоки: поля и шрифт уменьшаются вместе с ними, иначе в маленьком
   блоке от названия остаётся одна верхняя строчка */
.st-node.sm{padding:6px 8px;font-size:12px}
.st-node.sm .st-t{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.st-node.short small{display:none}       /* подписи уже не поместиться */
.st-node.xs{padding:3px 6px;font-size:11px;line-height:1.25;border-radius:8px}
.st-node.xs .st-grip{width:11px;height:11px}
.st-node.xs .st-grip::before{right:2px;bottom:2px;width:5px;height:5px}
.st-node.drag{cursor:grabbing;opacity:.85}
.st-node.sel{outline:calc(2px * var(--inv)) solid var(--accent);outline-offset:calc(2px * var(--inv))}
/* Цвет блока: красим сам блок слабой заливкой, рамку — тем же цветом
   погуще. Одной рамкой было не обойтись: на светлой теме линия в пиксель
   пропадала. Смешиваем с фоном, а не кладём полупрозрачным: иначе сквозь
   блок просвечивала бы сетка холста. */
.st-node.tint{border-color:var(--nc)}
@supports (background:color-mix(in srgb, red 10%, white)){
  .st-node.tint{background:color-mix(in srgb, var(--nc) 15%, var(--panel2))}
  [data-theme="light"] .st-node.tint{
    background:color-mix(in srgb, var(--nc) 14%, #fff);
    border-color:color-mix(in srgb, var(--nc) 76%, #16233a);
  }
}

/* ---- выбор цвета: готовые кружки, кольцо оттенков, код ---- */
.cp{width:242px;padding:12px}
.cp-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:7px}
.cp-grid i{
  height:26px;border-radius:7px;display:block;cursor:pointer;
  border:1.5px solid var(--nc);background:var(--nc);
}
.cp-grid i.on{outline:2px solid var(--text);outline-offset:2px}
.cp-mid{display:flex;gap:12px;align-items:center;margin-top:12px}
.cp-wheel{
  position:relative;width:96px;height:96px;border-radius:50%;flex:none;
  cursor:crosshair;touch-action:none;
  background:conic-gradient(from 90deg,
    #ff5f5f,#ff9a3c,#e3c341,#9bd45e,#3ecf8e,#2dd4bf,
    #3bc9db,#4d8dff,#7c6cff,#a78bfa,#ff6ec7,#ff5f5f);
}
.cp-wheel::after{
  content:'';position:absolute;inset:24px;border-radius:50%;
  background:var(--nc,var(--panel2));border:1px solid var(--line2);
}
.cp-dot{
  position:absolute;width:13px;height:13px;margin:-7px 0 0 -7px;border-radius:50%;
  border:2px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.55);pointer-events:none;
}
.cp-col{flex:1;min-width:0}
.cp-lab{font-size:11px;color:var(--dim);margin-bottom:4px}
.cp-sl{width:100%;margin:0 0 10px;accent-color:var(--nc)}
.cp-hex{
  width:100%;font:500 12px ui-monospace,Menlo,monospace;text-transform:uppercase;
  background:var(--raise);border:1px solid var(--line2);border-radius:7px;
  padding:6px 8px;color:var(--text);
}
.cp-foot{display:flex;gap:8px;margin-top:11px}
.cp-foot .btn{flex:1;justify-content:center}

/* ============ юнитка ============ */
.u-grp td{background:var(--panel2);font-weight:650;font-size:11.5px;
  letter-spacing:.5px;text-transform:uppercase;color:var(--muted)}
.u-grp.inc td{color:#7fb0ff}
.u-grp.exp td{color:#f0a58a}
.u-grp.per td{color:#c9a6e8}
.u-sum td{font-weight:650;background:var(--raise)}
/* итог доходов выделяем зелёным: это главная строка верхнего блока */
.u-sum.inc td{background:rgba(110,214,164,.12);color:#6ed6a4}
/* два главных итога: остаток от работы и чистый остаток */
.u-res td{font-weight:700;font-size:13.5px;
  border-top:2px solid var(--line2);border-bottom:2px solid var(--line2)}
.u-res.one td{background:rgba(77,141,255,.10);color:#8fbcff}
.u-res.two td{background:rgba(110,214,164,.12);color:#6ed6a4}
/* минус в итоговой строке читается минусом, а не цветом блока */
.u-res td.neg{color:#ff7a7a}
/* итог долгов: это не прибыль, зелёным его красить нельзя */
.u-res.debt td{background:var(--red-soft);color:var(--red)}

/* ============ долги ============ */
/* сумма блока стоит в той же строке, что и его название, — отдельного
   «Итого» под каждым блоком нет: лист от него только длиннее */
.u-grp td.num{text-transform:none;letter-spacing:0;font-size:12.5px;
  color:var(--text);font-weight:650}
#debt-table td.pad{padding-left:22px}

/* доля блока в общем долге — полосами, а не таблицей цифр */
.d-bar{display:flex;align-items:center;gap:9px;margin-bottom:9px;font-size:12.5px}
.d-bar:last-child{margin-bottom:0}
.d-nm{width:104px;flex:none;color:var(--muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.d-track{flex:1;height:9px;border-radius:5px;background:var(--raise);overflow:hidden}
.d-track i{display:block;height:100%;border-radius:5px;background:var(--red);opacity:.75}
.d-val{width:92px;flex:none;text-align:right;font-weight:650}
.d-pct{width:34px;flex:none;text-align:right;color:var(--dim);font-size:11.5px}

.d-tips{margin:0;padding-left:18px;color:var(--muted);font-size:12.5px;line-height:1.5}
.d-tips li{margin-bottom:9px}
.d-tips li:last-child{margin-bottom:0}
.d-tips b{color:var(--text);font-weight:600}

/* подсказка в пустой ячейке — видна только при наведении на строку */
#debt-table .hint-cell{color:var(--dim);opacity:0;transition:opacity .12s}
#debt-table tr:hover .hint-cell{opacity:.8}
#debt-table td.due-late{color:var(--red)}
#debt-table .grab{color:var(--dim);cursor:grab;margin-right:2px}

/* очередь погашения */
.d-queue{margin:0;padding:0;list-style:none;counter-reset:q}
.d-queue li{display:grid;grid-template-columns:20px 1fr auto auto;gap:4px 8px;
  align-items:baseline;padding:8px 0;border-bottom:1px solid var(--line)}
.d-queue li:last-child{border-bottom:0;padding-bottom:0}
.d-queue li:first-child{padding-top:0}
.q-n{color:var(--dim);font-size:11.5px}
.q-nm{font-weight:600;font-size:13px}
.q-why{font-size:10.5px;padding:2px 7px;border-radius:999px;white-space:nowrap;
  background:var(--raise);color:var(--muted)}
.q-why.r0{background:var(--red-soft);color:var(--red)}
.q-why.r1{background:var(--amber-soft);color:var(--amber)}
.q-sum{font-weight:650;font-size:13px;text-align:right}
.d-queue small{grid-column:2 / -1;color:var(--muted);font-size:11.5px;line-height:1.4}
.u-auto{display:inline-block;font-size:10px;line-height:1;padding:3px 6px;
  border-radius:999px;background:var(--accent-soft);color:var(--accent);
  margin-left:7px;vertical-align:1px}
/* блок расходов раскрывается: видно, из чего сложилась сумма */
.u-open > td:first-child{cursor:pointer;user-select:none}
.u-open .chev2{display:inline-block;width:13px;color:var(--dim);font-size:10px}
.u-open.on > td{background:var(--raise)}
.u-open.on .chev2{color:var(--accent)}
.u-kid td{background:rgba(255,255,255,.012);font-size:12.5px}
.u-kid td:first-child{padding-left:30px;color:var(--muted)}
.u-cnt{display:inline-block;font-size:10.5px;color:var(--dim);margin-left:8px}

/* ============ стадии выкупа ============ */
/* Кружок показывает, где сейчас деньги, и им же отмечают следующий шаг.
   Цвет дублируется словом: по одному цвету статус читать нельзя. */
.bst{
  display:inline-flex;align-items:center;gap:6px;border-radius:999px;
  padding:3px 9px;font-size:11.5px;white-space:nowrap;cursor:pointer;
  transition:filter .12s;
}
.bst:hover{filter:brightness(1.25)}
.bst b{font-size:12px;line-height:1}
.bst-0{background:var(--raise);color:var(--muted)}
.bst-1{background:rgba(77,141,255,.16);color:#7fb0ff}
.bst-2{background:rgba(110,214,164,.15);color:#6ed6a4}

/* ============ своя полоска прокрутки вбок ============ */
/* Системную взять нельзя: на Маке она всплывающая — места не занимает
   и видна только в момент прокрутки, поймать её мышкой невозможно,
   да и о том, что таблица длиннее экрана, догадаться неоткуда.
   Эта видна всегда. На вид 6px, а площадь захвата — 14px. */
.xbar{
  position:relative;height:14px;margin:0 14px 6px;
  cursor:pointer;touch-action:none;
}
.xbar::before{                       /* дорожка */
  content:'';position:absolute;left:0;right:0;top:50%;
  height:6px;transform:translateY(-50%);
  background:var(--line);border-radius:999px;
}
.xbar-thumb{
  position:absolute;top:50%;height:6px;transform:translateY(-50%);
  background:var(--line2);border-radius:999px;transition:background .12s;
}
.xbar:hover .xbar-thumb{background:var(--dim)}
.xbar-thumb.drag{background:var(--accent)}

/* нижняя кромка списка растворяется, пока ниже есть строки */
.scroll.more-below{
  -webkit-mask-image:linear-gradient(to bottom, #000 calc(100% - 26px), transparent);
  mask-image:linear-gradient(to bottom, #000 calc(100% - 26px), transparent);
}

/* ================= сводка одной строкой ================= */
.summary{margin-bottom:14px}
.summary-line{
  display:flex;align-items:center;gap:22px;width:100%;
  background:none;border:0;padding:11px 14px;cursor:pointer;text-align:left;
  flex-wrap:wrap;
}
.summary-line:hover{background:var(--panel2)}
.summary .chev{color:var(--dim);width:12px;flex:0 0 auto}
.s-item{display:flex;align-items:baseline;gap:7px;white-space:nowrap}
.s-lbl{color:var(--muted);font-size:12px}
.s-val{font-weight:640;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.summary-body{padding:0 14px 14px;border-top:1px solid var(--line)}
.summary-body .grid{padding-top:14px}

/* ================= стадия сделки ================= */
.stage{
  width:12px;height:12px;padding:0;border-radius:50%;cursor:pointer;
  border:1.5px solid var(--line2);background:var(--panel2);display:block;
}
.stage:hover{border-color:var(--muted)}
.tbl tr.st-process td{background:rgba(240,180,41,.10)}
.tbl tr.st-process:hover td{background:rgba(240,180,41,.16)}
.tbl tr.st-process .stage{background:var(--amber);border-color:var(--amber)}
.tbl tr.st-done td{background:rgba(49,192,125,.10)}
.tbl tr.st-done:hover td{background:rgba(49,192,125,.16)}
.tbl tr.st-done .stage{background:var(--green);border-color:var(--green)}

/* реестр сделок — много колонок, назначение платежа не растягивает строку */
.tbl.deals td,.tbl.deals th{white-space:nowrap}
.tbl.deals .purpose{max-width:230px;overflow:hidden;text-overflow:ellipsis}
.tbl.deals .grab{padding:0 2px}

/* поставщик — подписью под плательщиком: пустую показываем только под курсором,
   чтобы в таблице не было ряда одинаковых прочерков */
.tbl .sup{cursor:text;border-bottom:1px dotted transparent}
.tbl tbody tr:hover .sup{border-bottom-color:var(--line2)}
.tbl .sup.sup-empty{opacity:0}
.tbl tbody tr:hover .sup.sup-empty{opacity:.45}
/* поставщик под клиентом в «К выдаче»: только показываем — правят его
   в реестре сделок, поэтому ни курсора правки, ни подчёркивания */
.tbl .psup{color:var(--dim);font-size:11.5px;line-height:1.3;margin-top:1px}
.tbl .psup.none{opacity:.5}
/* «К выдаче»: комментарий — строчкой под именем; пустой — «+ комментарий» при наведении на имя */
.tbl .pcom{color:var(--amber);font-size:12px;line-height:1.35;margin-top:2px;cursor:pointer}
.tbl tr.issued .pcom{cursor:default}
.tbl .pcom-add{display:none;color:var(--dim);font-size:11.5px;margin-top:2px;cursor:pointer}
@media (hover:hover){ .tbl td.name:hover .pcom-add{display:block} }   /* только над «Кому» */
.tbl .pcom-add[data-editing]{display:block}   /* пока вписывают — не прятать */
/* у строк «Сергея» в «Расчётах» меню «⋯» нет — на телефоне надпись видна сразу */
@media (hover:none){ .tbl tr[data-wid] .pcom-add{display:block} }
.tbl .pcom .cell-input,.tbl .pcom-add .cell-input{font-size:12.5px}
/* метка режима чтения: и в списке людей, и в шапке у самого читателя */
.pill.ro{background:var(--amber-soft);color:var(--amber)}
.pill.bot{background:var(--accent-soft);color:var(--accent)}
/* чей проект на доске задач: общий или чужой, куда позвали */
.chip .sh{font-size:10.5px;color:var(--dim);margin-left:4px}
/* кому поручена задача — видно прямо на карточке в общем проекте */
.twho{font-size:10.5px;padding:1px 7px;border-radius:999px;
  background:var(--raise);color:var(--muted);white-space:nowrap}
.twho.me{background:var(--accent-soft);color:var(--accent)}
/* окно доступа к проекту: человек слева, его уровень справа */
.acc-list{display:grid;gap:4px}
.acc-row{display:flex;align-items:center;gap:10px;min-height:32px}
.acc-row > label{flex:1;min-width:0}
.acc-row .input.sm{width:168px;flex:none;padding:5px 8px;font-size:12.5px}
.acc-row .input:disabled{opacity:.35}
/* режим чтения: убираем то, чем правят. Это только вежливость —
   настоящий запрет стоит на сервере, он отклонит любую запись */
html[data-ro] .grab,
html[data-ro] .mini.danger,
html[data-ro] .section-head .btn.primary,
html[data-ro] .section-head .btn.danger,
html[data-ro] .card-head .btn.primary,
html[data-ro] .card-head .btn.danger{display:none}
html[data-ro] .cell{cursor:default}

/* закрытый для правок месяц: показываем, но не даём трогать */
.locked .grab,.locked .stage,.locked [data-del],.locked .pick{display:none}
.locked td.cell{cursor:default}
.locked td.cell:hover{background:none;box-shadow:none}

/* ================= QR: цвета колонок как в Excel =================
   В светлой теме — ровно те же заливки, что в файле, чтобы можно было
   сверяться глазами. В тёмной те же цвета, но полупрозрачные: сплошная
   пастель на тёмном фоне не читается.                                  */
.tbl .f-lav  {background:rgba(217,210,233,.16)}   /* клиент   */
.tbl .f-pink {background:rgba(234,209,220,.16)}   /* дата     */
.tbl .f-grn  {background:rgba(217,234,211,.14)}   /* суммы    */
.tbl .f-blue {background:rgba(201,218,248,.16)}   /* курсы    */
.tbl .f-gray {background:rgba(239,239,239,.08)}   /* комиссия */
.tbl .f-white{background:rgba(255,255,255,.06)}   /* Serg     */
.tbl .f-grn2 {background:rgba(182,215,168,.22)}   /* BG       */
.tbl tr.qr-day  td{background:rgba(162,196,201,.26);font-weight:650}
.tbl tr.qr-week td{background:rgba(249,203,156,.26);font-weight:650}
.tbl tr.qr-day td,.tbl tr.qr-week td{border-bottom:1px solid var(--line2)}
.tbl tr.qr-day:hover td{background:rgba(162,196,201,.32)}
.tbl tr.qr-week:hover td{background:rgba(249,203,156,.32)}

[data-theme="light"] .tbl .f-lav  {background:#D9D2E9}
[data-theme="light"] .tbl .f-pink {background:#EAD1DC}
[data-theme="light"] .tbl .f-grn  {background:#D9EAD3}
[data-theme="light"] .tbl .f-blue {background:#C9DAF8}
[data-theme="light"] .tbl .f-gray {background:#EFEFEF}
[data-theme="light"] .tbl .f-white{background:#FFFFFF}
[data-theme="light"] .tbl .f-grn2 {background:#B6D7A8}
[data-theme="light"] .tbl tr.qr-day td{background:#A2C4C9}
[data-theme="light"] .tbl tr.qr-week td{background:#F9CB9C}
[data-theme="light"] .tbl tr.qr-day:hover td{background:#93b8bd}
[data-theme="light"] .tbl tr.qr-week:hover td{background:#f5be86}
/* на цветных ячейках hover не перекрашиваем — иначе колонка теряется */
.tbl tbody tr:hover td.f-lav,.tbl tbody tr:hover td.f-pink,
.tbl tbody tr:hover td.f-grn,.tbl tbody tr:hover td.f-blue,
.tbl tbody tr:hover td.f-gray,.tbl tbody tr:hover td.f-white,
.tbl tbody tr:hover td.f-grn2{filter:brightness(1.06)}

.tbl .pay-done[data-dundo]{cursor:pointer}

/* ================= вход в систему ================= */
.login-wrap{
  position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;
  background:var(--bg);
}
.login-wrap[hidden]{display:none}    /* иначе display:flex перебивает скрытие */
.login-card{
  display:flex;flex-direction:column;gap:10px;width:320px;padding:26px;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow);
}
.login-card h2{font-size:19px;margin:0}
.login-card p{margin:0 0 6px}
.login-mark{width:26px;height:26px;border-radius:8px;margin-bottom:6px;
  background:linear-gradient(135deg,var(--accent),var(--violet))}
.login-err{color:var(--red);font-size:12.5px}
#who{width:auto;padding:0 10px;font-weight:600}

/* ================= меню под кнопкой «+» ================= */
.popmenu{
  position:absolute;z-index:120;min-width:210px;padding:5px;
  background:var(--panel);border:1px solid var(--line2);border-radius:var(--r);
  box-shadow:var(--shadow);
}
.popmenu button{
  display:flex;flex-direction:column;gap:2px;width:100%;text-align:left;
  background:none;border:0;border-radius:var(--r-sm);padding:8px 10px;cursor:pointer;
  color:var(--text);font-weight:500;
}
.popmenu button:hover{background:var(--panel2)}
.popmenu .dim{font-weight:400}

/* ================= изменение ширины колонок ================= */
.tbl.fixed{table-layout:fixed;width:100%}
/* «fixed» обычно растягивается на всю карточку — ширины колонок задают только
   пропорции, реальная колонка почти всегда шире написанного. У QR-таблицы это
   и делало строку неоправданно широкой. Ширину самой таблицы задаёт инлайн-
   style в qr.js (сумма её же колонок) — он и перебивает это правило. */
.tbl.fixed th{position:sticky;top:0}
.tbl.fixed td,.tbl.fixed th{
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.tbl.fixed td .dim.small{overflow:hidden;text-overflow:ellipsis}
/* оборот при правке — с копейками, в узкую колонку не влезает: поле шире ячейки, растёт влево */
.tbl.fixed td[data-f="gross"][data-editing]{overflow:visible}
.tbl td[data-f="gross"] .cell-input{position:relative;z-index:2;width:9.5em;margin-left:calc(100% - 9.5em)}
.col-resize{
  position:absolute;right:0;top:0;bottom:0;width:8px;
  cursor:col-resize;user-select:none;touch-action:none;
}
.col-resize:hover{background:var(--accent);opacity:.55}
body.col-resizing,body.col-resizing *{cursor:col-resize !important;user-select:none}

/* «Расчёты» показываем целиком, остальные списки листаются как обычно */
.scroll.full{max-height:none}

/* уже выданные — приглушённой строкой в конце списка */
.tbl tr.grp-row.done-row td{background:var(--green-soft);color:var(--green)}
/* «Выдано» — свой цвет был и раньше: зелёный значит «уже отдали».
   Полоса слева просто продолжает ту же линию, что у остальных блоков. */
.tbl.blocks tr.done-row td:first-child,
.tbl.blocks tr.issued td:first-child{border-left:3px solid var(--green)}
/* оплаченная статья расхода — зелёная строка, как «выдано» у сделок */
.tbl tr.paid td{background:rgba(49,192,125,.10)}
.tbl tr.paid:hover td{background:rgba(49,192,125,.16)}
[data-theme="light"] .tbl tr.paid td{background:rgba(15,157,88,.10)}
[data-theme="light"] .tbl tr.paid:hover td{background:rgba(15,157,88,.16)}
.tbl tr.paid td.name{color:var(--green)}
.tbl tr.issued td{opacity:.62}
.tbl tr.issued:hover td{opacity:1}

/* кнопка «создать выдачу» в строке сделки */
.payout-btn{font-size:13px;line-height:1}
.payout-btn:hover:not(:disabled){color:var(--accent);border-color:var(--accent)}
.payout-btn.done{color:var(--green);opacity:.85}
.payout-btn.done:disabled{opacity:.85}

/* выбор строк для выдачи */
.tbl .pick{cursor:pointer;margin:0}
.pay-done{color:var(--green);font-size:13px}

/* ================= график: прокрутка и подсказка ================= */
.chart-wrap{position:relative;overflow-x:auto;overflow-y:hidden;padding-bottom:2px}
/* ширину графику задаёт число месяцев, старое правило width:100% его сжимало */
.chart-wrap .chart{display:block;width:auto;max-width:none}
.chart .barr{cursor:pointer;transition:opacity .12s}
.chart .barr:hover{opacity:1;fill:var(--accent)}
.chart-tip{
  position:absolute;transform:translate(-50%,-100%);
  background:var(--raise);border:1px solid var(--line2);border-radius:var(--r-sm);
  padding:7px 10px;font-size:12px;white-space:nowrap;pointer-events:none;
  box-shadow:var(--shadow);z-index:5;
}
.chart-tip b{display:block;margin-bottom:4px}
.chart-tip div{display:flex;gap:12px;justify-content:space-between;
  font-variant-numeric:tabular-nums}
.chart-tip div span{color:var(--muted)}
.chart-tip i{font-style:normal}

/* ================= «Китай»: чей курс — видно по цвету ================= */
/* слева колонки клиента, справа наши — чтобы глаз не путал их местами */
.tbl .g-client{background:rgba(77,141,255,.07)}
.tbl .g-our{background:rgba(49,192,125,.07)}

/* Шапка таблицы приклеена к верху, а краска цветных колонок полупрозрачная —
   при прокрутке строки просвечивали сквозь заголовок. Кладём ту же краску
   поверх сплошного фона шапки: цвет прежний, насквозь больше не видно. */
.tbl th.g-client{background:linear-gradient(rgba(77,141,255,.07),rgba(77,141,255,.07)),var(--panel2)}
.tbl th.g-our   {background:linear-gradient(rgba(49,192,125,.07),rgba(49,192,125,.07)),var(--panel2)}
.tbl th.f-lav   {background:linear-gradient(rgba(217,210,233,.16),rgba(217,210,233,.16)),var(--panel2)}
.tbl th.f-pink  {background:linear-gradient(rgba(234,209,220,.16),rgba(234,209,220,.16)),var(--panel2)}
.tbl th.f-grn   {background:linear-gradient(rgba(217,234,211,.14),rgba(217,234,211,.14)),var(--panel2)}
.tbl th.f-blue  {background:linear-gradient(rgba(201,218,248,.16),rgba(201,218,248,.16)),var(--panel2)}
.tbl th.f-gray  {background:linear-gradient(rgba(239,239,239,.08),rgba(239,239,239,.08)),var(--panel2)}
.tbl th.f-white {background:linear-gradient(rgba(255,255,255,.06),rgba(255,255,255,.06)),var(--panel2)}
.tbl th.f-grn2  {background:linear-gradient(rgba(182,215,168,.22),rgba(182,215,168,.22)),var(--panel2)}
.tbl th.g-client{color:var(--accent)}
.tbl th.g-our{color:var(--green)}
.tbl tbody tr:hover .g-client{background:rgba(77,141,255,.13)}
.tbl tbody tr:hover .g-our{background:rgba(49,192,125,.13)}
.tbl td.cell.g-client:hover,.tbl td.cell.g-our:hover{
  box-shadow:inset 0 0 0 1px var(--line2);border-radius:5px;
}

/* заголовки блоков в выпадающем списке «К выдаче» */
.input optgroup{background:var(--panel);color:var(--muted);font-size:11px;
  text-transform:uppercase;letter-spacing:.04em}
.input optgroup option{color:var(--text);text-transform:none;letter-spacing:0;font-size:13px}

/* ================= личный кабинет: доска задач ================= */
.brand{background:none;border:0;padding:0;cursor:default;color:inherit}
body[data-aside] .brand{cursor:pointer;border-radius:var(--r-sm);padding:4px 6px;margin-left:-6px}
body[data-aside] .brand:hover{background:var(--panel2)}
body[data-role="admin"] .brand.on .brand-name{color:var(--accent)}

.badge{
  padding:3px 9px;border-radius:20px;font-size:12px;font-weight:600;
  background:var(--raise);color:var(--muted);
}
.badge.red{background:var(--red-soft);color:var(--red)}
.badge.amber{background:var(--amber-soft);color:var(--amber)}

.proj-bar{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.chip{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--panel);border:1px solid var(--line);border-radius:20px;
  padding:5px 12px;cursor:pointer;color:var(--muted);white-space:nowrap;
}
.chip:hover{color:var(--text);border-color:var(--line2)}
.chip.on{color:var(--text);background:var(--raise);border-color:var(--line2)}
.chip.add{color:var(--dim)}
.chip .dim{font-size:11.5px}
.chip[data-gi="0"]{--gc:var(--g0)} .chip[data-gi="1"]{--gc:var(--g1)}
.chip[data-gi="2"]{--gc:var(--g2)} .chip[data-gi="3"]{--gc:var(--g3)}
.chip[data-gi="4"]{--gc:var(--g4)}
.dot{width:8px;height:8px;border-radius:50%;background:var(--gc,var(--dim));flex:0 0 auto}

/* виджет «Задачи» на iPhone: шаги настройки и ключ */
.wk-lead{margin:0 0 10px;color:var(--dim);line-height:1.45}
.wk-steps{margin:0 0 14px;padding-left:20px;display:flex;flex-direction:column;gap:9px;line-height:1.45}
.wk-steps .btn.sm{margin:0 6px 2px 0}
.wk-box{border-top:1px solid var(--line);padding-top:12px;display:flex;flex-direction:column;gap:8px}
.wk-key{display:flex;gap:8px}
.wk-val{flex:1;min-width:0;font:500 13px ui-monospace,Menlo,monospace}
.wk-btns{display:flex;gap:8px;flex-wrap:wrap}
.wk-state{line-height:1.45}
@media (max-width:640px){ .wk-key{flex-direction:column} }

.quick-add{display:flex;gap:8px;margin-bottom:14px}
.quick-add #t-new{flex:1}
.quick-add select.input{max-width:190px}
.quick-add input[type="date"]{max-width:150px}

.board{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;align-items:start}
.tcol{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  display:flex;flex-direction:column;min-height:180px}
.tcol-head{display:flex;align-items:center;gap:8px;padding:10px 12px;
  border-bottom:1px solid var(--line)}
.tcol-name{font-weight:600;font-size:13px}
.tcol-n{margin-left:auto;color:var(--dim);font-size:12px;
  background:var(--raise);border-radius:20px;padding:1px 8px}
.tcol-body{padding:8px;display:flex;flex-direction:column;gap:8px;min-height:80px}
.tcol-empty{color:var(--dim);font-size:12.5px;text-align:center;padding:18px 6px}
.tcol-more{background:none;border:0;border-top:1px solid var(--line);color:var(--dim);
  padding:8px;cursor:pointer;font-size:12px;border-radius:0 0 var(--r) var(--r)}
.tcol-more:hover{color:var(--text);background:var(--panel2)}

.tcard{
  background:var(--panel2);border:1px solid var(--line);border-left:3px solid var(--gc,var(--line2));
  border-radius:var(--r-sm);padding:9px 10px;cursor:pointer;touch-action:none;
}
.tcard:hover{border-color:var(--line2);background:var(--raise)}
.tcard[data-gi="0"]{--gc:var(--g0)} .tcard[data-gi="1"]{--gc:var(--g1)}
.tcard[data-gi="2"]{--gc:var(--g2)} .tcard[data-gi="3"]{--gc:var(--g3)}
.tcard[data-gi="4"]{--gc:var(--g4)}
.tcard.done{opacity:.6}
.tcard.done .tcard-title{text-decoration:line-through;text-decoration-color:var(--dim)}
.tcard.drag{box-shadow:var(--shadow);transform:rotate(1.2deg);opacity:.95}
.tcard-ph{border:1px dashed var(--line2);border-radius:var(--r-sm);background:var(--accent-soft)}
.tcard-top{display:flex;gap:6px;align-items:flex-start}
.tcard-title{line-height:1.35}
.tflag{color:var(--amber);flex:0 0 auto}
.tcard-foot{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:7px;
  font-size:11.5px;color:var(--dim)}
.tproj{display:inline-flex;align-items:center;gap:5px;color:var(--gc,var(--dim))}
.tdue{background:var(--raise);border-radius:5px;padding:1px 6px}
.tdue.late{background:var(--red-soft);color:var(--red)}
.tdue.now{background:var(--amber-soft);color:var(--amber)}
.tnote{margin-left:auto}

@media (max-width:1100px){
  .board{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:700px){
  .board{grid-template-columns:1fr}
  .quick-add{flex-wrap:wrap}
  .quick-add select.input,.quick-add input[type="date"]{max-width:none;flex:1}
}

.fold-mark{display:none}
.block-switch{display:none}
@media (max-width:760px){.fold-mark{display:inline-block}}

/* ================= телефон =================
   Узкий экран: шапка в две строки, поля крупнее пальца, широкие таблицы
   листаются вбок, а не сплющиваются в нечитаемую кашу. */
@media (max-width:760px){
  .topbar{height:auto;flex-wrap:wrap;gap:8px;padding:8px 12px}
  .brand{flex:0 0 auto}
  .topbar-right{margin-left:auto;gap:6px}
  /* имя не влезает — показываем первую букву, шапка остаётся в одну строку */
  #who{font-size:0;padding:7px 0;width:32px;text-align:center}
  #who::before{content:attr(data-short);font-size:13px;font-weight:600}
  .tabs{order:3;flex:1 0 100%;gap:4px;padding-bottom:2px}
  .tab{padding:8px 12px}
  .period{padding:7px 6px;max-width:124px;font-size:13px}
  .topbar{gap:6px}

  /* четыре карточки-показателя на телефоне занимали пол-экрана: собираем их
     в один блок строками «название — значение», шрифт мельче */
  .grid.g4{
    gap:0;background:var(--panel);border:1px solid var(--line);
    border-radius:var(--r);overflow:hidden;
  }
  .grid.g4 .kpi{
    display:grid;grid-template-columns:1fr auto;align-items:center;
    column-gap:10px;padding:8px 12px 8px 14px;gap:0;
    background:none;border:0;border-bottom:1px solid var(--line);border-radius:0;
  }
  .grid.g4 .kpi:last-child{border-bottom:0}
  .grid.g4 .kpi::before{width:3px}
  .grid.g4 .kpi .label{grid-area:1/1;font-size:12px}
  .grid.g4 .kpi .hint{grid-area:2/1;font-size:10.5px}
  .grid.g4 .kpi .value,.grid.g4 .kpi .value.sm{
    grid-area:1/2/3/3;font-size:18px;text-align:right;align-self:center;
  }

  /* три больших блока по одному: переключатель между «Последними операциями»
     и самим блоком, высота списка ограничена — дальше прокрутка внутри */
  .block-switch{display:flex;gap:5px;margin:10px 0 2px}
  .block-switch button{
    flex:1;padding:5px 6px;font-size:12.5px;line-height:1.5;
    border:1px solid var(--line);border-radius:6px;
    background:var(--panel);color:var(--muted);font-weight:550;cursor:pointer;
  }
  .block-switch button.on{
    background:var(--accent);border-color:var(--accent);color:#fff;
  }
  #view[data-mob="wallet"] .b-payout,#view[data-mob="wallet"] .b-china,
  #view[data-mob="payout"] .b-wallet,#view[data-mob="payout"] .b-china,
  #view[data-mob="china"]  .b-wallet,#view[data-mob="china"]  .b-payout{display:none}
  /* доска задач: одна колонка на экране, переключатель сверху */
  #view[data-tcol] .tcol{display:none}
  #view[data-tcol="new"]  .tcol[data-col="new"],
  #view[data-tcol="work"] .tcol[data-col="work"],
  #view[data-tcol="wait"] .tcol[data-col="wait"],
  #view[data-tcol="done"] .tcol[data-col="done"]{display:flex}
  #view[data-tcol] .tcol-body{max-height:62vh;overflow:auto}
  /* название колонки уже написано на кнопке переключателя — шапку не дублируем */
  #view[data-tcol] .tcol-head{display:none}
  #tcol-switch button{padding:5px 2px;font-size:12px}
  #tcol-switch .dim{font-size:11px;margin-left:3px}
  .tcol-head{padding:8px 10px}
  .tcard{padding:7px 9px}
  .tcard-title{font-size:13.5px}
  .tcard-foot{margin-top:5px}
  .proj-bar{gap:5px;margin-bottom:10px}
  .chip{padding:4px 10px;font-size:12.5px}

  #view[data-mob="income"] .b-expense,
  #view[data-mob="expense"] .b-income{display:none}
  #view[data-mob] .b-wallet .scroll,
  #view[data-mob] .b-payout .scroll,
  #view[data-mob] .b-china .scroll,
  #view[data-mob] .b-income .scroll,
  #view[data-mob] .b-expense .scroll{max-height:62vh;overflow:auto}

  /* верхняя сводка — в две строки вместо трёх, «Быстрый ввод» — в одну */
  .summary-line{gap:4px 10px;padding:7px 11px}
  .s-item{gap:5px}
  /* пять показателей в две строки: «Сделок» короткое — поднимаем в первую,
     «Себестоимость» сокращаем, стрелку прячем (строка и так нажимается) */
  #mp-summary .summary-line > .s-item:nth-child(4),
  #mp-summary .summary-line > .s-item:nth-child(5){order:1}
  .summary .chev{display:none}
  #mp-summary .s-item:nth-child(4) .s-lbl{font-size:0}
  #mp-summary .s-item:nth-child(4) .s-lbl::before{content:"Себест.";font-size:10.5px}
  .s-lbl{font-size:10.5px}
  .s-val{font-size:12.5px}
  .summary{margin-bottom:8px}
  #quick .s-item.dim{display:none}          /* подпись не нужна, пока форма свёрнута */
  #quick{margin-bottom:8px !important}      /* отступ задан прямо в разметке */
  #quick .s-val{font-size:13px}

  .view{padding:12px 12px 28px}
  .section-head{flex-wrap:wrap;gap:8px}
  .section-head h2{font-size:16px}
  .card-head{flex-wrap:wrap;row-gap:6px}
  .kpi .value{font-size:23px}
  .kpi .value.sm{font-size:19px}

  /* меньше 16px — и iOS при вводе зумит страницу */
  /* 16px — нижняя граница, при меньшем шрифте iOS зумит страницу на фокусе;
     ужимаем за счёт отступов и промежутков, а не букв */
  .input,select.input,textarea.input,.cell-input{font-size:16px;padding:7px 9px}
  .field{gap:3px}
  .field>label{font-size:11px}
  .form-grid{gap:9px}
  .qf{gap:6px}
  .qf .big-num{font-size:18px;padding:7px 10px}
  .subtab{padding:6px 10px;font-size:12.5px}
  .modal-head{padding:11px 14px}
  .modal-body{padding:13px 14px}
  .modal-foot{padding:10px 14px}
  .btn{padding:9px 14px}
  .btn.sm{padding:6px 10px}
  .row.wrap{row-gap:8px}

  /* таблицы: вертикально листается вся страница, вбок — сама таблица */
  .scroll,.scroll.tall{max-height:none;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .tbl.fixed th{position:static}
  .tbl td,.tbl th{padding:10px 10px}
  /* QR: колонки по числам, а не по заданной ширине — таблица уже */
  #qr-table{table-layout:auto;min-width:0;font-size:11.5px}
  #qr-table th{width:auto !important;font-size:9.5px}
  #qr-table th,#qr-table td{padding:5px 6px;white-space:nowrap}
  /* заголовкам разрешаем перенос: длинная шапка колонки тянула всю таблицу */
  #qr-table th,#deals-table th{white-space:normal;line-height:1.15}
  /* Справочники: вкладки листаются вбок, таблицы — по содержимому, длинные
     названия обрезаются многоточием (полное видно при правке) */
  .subtabs{flex-wrap:nowrap;overflow-x:auto;max-width:100%;width:auto}
  .subtab{white-space:nowrap}
  #r-search{width:100% !important}
  #r-body .tbl{font-size:12px}
  #r-body .tbl th{font-size:9.5px;white-space:normal;line-height:1.15}
  #r-body .tbl th,#r-body .tbl td{padding:5px 7px;white-space:nowrap}
  #r-body .tbl td.name{max-width:168px;overflow:hidden;text-overflow:ellipsis}
  #r-body .tbl td.small{max-width:140px;overflow:hidden;text-overflow:ellipsis}

  /* доходы и расходы: колонка «Клиент»/«Статья» задана без ширины и на узком
     экране схлопывалась в ноль — переводим таблицы на ширину по содержимому */
  #income-table,#expense-table{table-layout:auto;min-width:0;font-size:12px}
  #income-table th,#expense-table th{
    width:auto !important;font-size:9.5px;white-space:normal;line-height:1.15;
  }
  #income-table th,#income-table td,
  #expense-table th,#expense-table td{padding:5px 7px;white-space:nowrap}
  #income-table td.name,#expense-table td.name{
    max-width:150px;overflow:hidden;text-overflow:ellipsis;
  }

  /* Реестр сделок — так же по содержимому, но длинные текстовые колонки
     подрезаем, иначе одно «назначение платежа» растянет всю таблицу */
  #deals-table{table-layout:auto;min-width:0;font-size:11.5px}
  #deals-table th{width:auto !important;font-size:9.5px}
  #deals-table th,#deals-table td{padding:4px 6px;white-space:nowrap}
  #deals-table td.name{max-width:116px;overflow:hidden;text-overflow:ellipsis}
  #deals-table td.purpose{max-width:96px;overflow:hidden;text-overflow:ellipsis}
  #deals-table td[data-f="entity"]{max-width:104px;overflow:hidden;text-overflow:ellipsis}
  #deals-table td[data-f="bank"]{max-width:70px;overflow:hidden;text-overflow:ellipsis}
  /* «Китай»: мельче шрифт и теснее ячейки — строки ниже, а вся таблица уже,
     меньше листать и вбок, и вниз */
  #china-table{table-layout:auto;min-width:0;font-size:11.5px}
  /* ширины колонок заданы в разметке и сохранёнными настройками — на телефоне
     снимаем их: пусть колонка будет ровно по числу, а не по «как на мониторе» */
  #china-table th{width:auto !important;font-size:9.5px}
  #china-table th,#china-table td{padding:5px 6px;white-space:nowrap}

  /* строка быстрого ввода на телефоне занимала три ряда — задачу заводим
     кнопкой «+ Задача» в шапке, там та же форма и целиком */
  .quick-add{display:none}

  /* «Последние операции» на телефоне свёрнуты в одну строку: нажал — раскрылось
     примерно на пять записей, остальные прокручиваются внутри */
  .card-head.fold{cursor:pointer;user-select:none}
  .card-head.fold:active{background:var(--panel2)}
  .fold-mark{color:var(--dim);transition:transform .15s;font-size:12px}
  .card-head.fold.folded .fold-mark{transform:rotate(-90deg)}
  /* перебиваем display:flex у .split3 > .card > .card-body.flush — он «весомее» */
  .fold-body.folded,
  .split3 > .card > .card-body.fold-body.folded{display:none}
  /* раскрытый список — примерно пять строк, дальше прокрутка внутри него;
     селектор длинный, чтобы перебить max-height:none у карточек .split3 */
  .fold-body .scroll,
  .split3 > .card > .card-body.fold-body > .scroll{max-height:246px;overflow-y:auto}

  .backdrop{padding:3vh 10px}
  .modal{max-height:92vh}
  .modal-foot{flex-wrap:wrap}
  .hint-row{font-size:11px}
}

/* ================= панель выбора на телефоне ================= */
.sheet-wrap{
  position:fixed;inset:0;z-index:120;background:rgba(3,6,12,.5);
  display:flex;align-items:flex-end;
}
.sheet{
  width:100%;max-height:82vh;display:flex;flex-direction:column;
  background:var(--panel);border-top-left-radius:14px;border-top-right-radius:14px;
  box-shadow:var(--shadow);padding-bottom:env(safe-area-inset-bottom);
}
.sheet-head{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:12px 14px;border-bottom:1px solid var(--line);font-weight:600;
}
.sheet-find{margin:10px 14px 4px;width:calc(100% - 28px)}
.sheet-list{overflow:auto;padding:6px 0 10px;-webkit-overflow-scrolling:touch}
.sheet-grp{
  padding:8px 14px 4px;font-size:11px;font-weight:650;color:var(--muted);
  text-transform:uppercase;letter-spacing:.04em;
}
.sheet-row{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:none;border:0;padding:11px 14px;cursor:pointer;color:var(--text);
  text-align:left;font-size:15px;
}
.sheet-row:active{background:var(--panel2)}
.sheet-row.on{background:var(--accent-soft);color:var(--accent);font-weight:600}
.sheet-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ================= меню строки «К выдаче» (кнопка «⋯») =================
   Та же панель снизу, что у выбора из списка; на широком экране — не во всю ширину */
.mini.more{font-size:15px;letter-spacing:1px}
.sheet.pay-sheet{max-width:480px;margin:0 auto}
.sheet-head .money{font-variant-numeric:tabular-nums;white-space:nowrap}
.ps-body{padding:12px 14px 16px;overflow:auto}
.ps-lbl{margin:14px 0 7px;font-size:11px;font-weight:650;letter-spacing:.05em;
  text-transform:uppercase;color:var(--dim)}
.ps-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ps-opt{min-height:44px;padding:6px 10px;border:1px solid var(--line2);border-radius:10px;
  background:var(--panel2);color:var(--text);font-weight:600;font-size:14px;cursor:pointer}
.ps-opt:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}
.ps-opt:disabled{opacity:.45;cursor:default}
.ps-opt.cur{border-style:dashed;background:var(--raise);color:var(--dim);opacity:1}
.ps-opt.danger{color:var(--red)}
.ps-note{width:100%;text-align:left;font-weight:500;color:var(--amber)}
.ps-note.empty{color:var(--dim)}
.ps-acts{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:16px;
  padding-top:14px;border-top:1px solid var(--line)}
html[data-ro] [data-pmore]{display:none}
.phone-only{display:none}
/* на телефоне у строки одна кнопка «⋯»: остальные живут в меню, тянуть за ⠿ некуда */
@media (max-width:760px){
  .tbl tbody tr[data-pid] .row-act{opacity:1}
  .tbl tbody tr[data-pid] .row-act > :not(.more),
  .tbl tbody tr[data-pid] .grab,
  .tbl tr.grp-row .gmove{display:none}             /* блоки на телефоне — стрелками */
  .mini.more{width:34px;height:30px;border:1px solid var(--line);border-radius:8px;
    background:var(--panel2);color:var(--text);font-size:17px}
  .desk-only{display:none}
  .phone-only{display:inline}
}

/* сообщение на случай, если скрипты не доехали: без них интерфейс не рисуется,
   и вместо белого экрана человек должен видеть, что делать */
.boot-msg{
  max-width:520px;margin:60px auto;padding:20px 22px;text-align:center;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  color:var(--muted);line-height:1.5;
}
.boot-msg b{display:block;margin-bottom:6px;color:var(--text);font-size:15px}

/* ================= год и месяц в шапке =================
   Сначала год, рядом месяц. В окне месяца — двенадцать месяцев и «Весь год»;
   когда выбран год целиком, кнопка подсвечена, чтобы не забыть об этом. */
.per{display:flex;align-items:center;gap:6px}
.per[hidden],.period.pb[hidden]{display:none}
.period.pb{display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 10px 0 12px;
  font-weight:500;color:var(--text);white-space:nowrap}
.period .cv{width:6px;height:6px;border-right:1.6px solid var(--muted);
  border-bottom:1.6px solid var(--muted);transform:translateY(-2px) rotate(45deg)}
.period.open{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.period.yr{background:var(--accent-soft);border-color:transparent;color:var(--accent);font-weight:600}
.period.yr .cv{border-color:var(--accent)}
.per .short{display:none}
.mpick{position:absolute;z-index:120;width:250px;padding:8px;background:var(--panel);
  border:1px solid var(--line2);border-radius:var(--r);box-shadow:var(--shadow)}
.mpick .all{width:100%;display:flex;justify-content:space-between;align-items:center;
  padding:9px 11px;margin-bottom:8px;border:1px solid var(--line2);border-radius:var(--r-sm);
  background:var(--raise);font-weight:600;cursor:pointer;color:var(--text)}
.mpick .all .dim{font-weight:400;font-size:12px}
.mpick .all.on{background:var(--accent);border-color:var(--accent);color:#fff}
.mpick .all.on .dim{color:rgba(255,255,255,.75)}
.mpick .mg{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
.mpick .mg button{padding:8px 0;border:0;border-radius:6px;background:none;cursor:pointer;
  color:var(--text);font-weight:500}
.mpick .mg button:hover:not(:disabled){background:var(--panel2)}
.mpick .mg button.on{background:var(--accent);color:#fff}
.mpick .mg button:disabled{color:var(--dim);opacity:.55;cursor:default}

/* ================= клиенты MPTrans: поиск, сортировка, раскрытие ================= */
.ch-r{display:flex;align-items:center;gap:12px}
.sbox{position:relative}
.srch{width:220px;padding:6px 26px 6px 31px;font-size:13px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%238b97a8' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='6' cy='6' r='4.6'/%3E%3Cpath d='M9.6 9.6 13 13'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:10px 50%}
.sbox .clr{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:22px;height:22px;
  border:0;background:none;color:var(--dim);font-size:16px;line-height:1;cursor:pointer;border-radius:5px}
.sbox .clr:hover{color:var(--text);background:var(--raise)}
.sbox .clr[hidden]{display:none}
.tbl th.srt{cursor:pointer;user-select:none}
.tbl th.srt:hover{color:var(--muted)}
.tbl th.srt .ar{display:inline-block;margin-left:5px;font-style:normal;opacity:.4;font-size:11px}
.tbl th.srt.on{color:var(--text)}
.tbl th.srt.on .ar{opacity:1;color:var(--accent);font-weight:700}
.tbl.clients tr.cl{cursor:pointer}
.tbl.clients .chv{display:inline-block;width:12px;color:var(--dim);font-size:10px}
.tbl.clients tr.cl.open td{background:var(--accent-soft)}
.tbl.clients tr.cl.open .chv{color:var(--accent)}
.tbl.clients tr.rcp td{background:var(--panel2);font-size:13px;padding-top:7px;padding-bottom:7px}
.tbl.clients tr.rcp td.name{padding-left:27px;font-weight:400}
.tbl.clients tr.rcp.last td{border-bottom:1px solid var(--line2)}
.tbl.clients .rcp .to{font-weight:600}
.tbl.clients .rcp .bk{color:var(--dim);font-size:12px;margin-left:7px}
.bar.soft>i{opacity:.45}

/* за целый год расход добавить нельзя — ему нужен месяц */
.section-head .btn[data-act="expense"]:disabled{opacity:.45;cursor:not-allowed}

/* метка месяца у строки, когда открыт целый год */
.mtag{display:inline-block;min-width:30px;margin-right:6px;padding:0 5px;border-radius:4px;
  background:var(--raise);color:var(--muted);font-size:11px;font-weight:500;text-align:center}

@media (max-width:760px){
  .per{gap:4px}
  .period.pb{padding:0 8px;gap:6px;font-size:13px}
  .per .full{display:none}
  .per .short{display:inline}
  .srch{width:150px}
}

/* ================= архив «Китая» =================
   Кнопка «Архив» рядом с переносом; под таблицей — убранные строки по дням,
   новые сверху, «Показать раньше» добавляет ещё день. */
.arch-toggle.on{background:var(--accent);border-color:var(--accent);color:#fff}
.arch{border-top:6px solid var(--bg)}
.arch-head{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:10px 14px;border-bottom:1px solid var(--line)}
.arch-title b{font-size:13.5px}
.arch-title .sub{color:var(--dim);font-size:12px}
.arch-find{width:220px;padding:5px 9px;font-size:12.5px}
.arch-scroll{max-height:640px}
.arch-empty{padding:22px 14px;text-align:center;color:var(--dim)}
.arch-tbl tbody tr.arch-month td{background:var(--raise);font-weight:600;font-size:12.5px;
  padding:7px 12px;border-bottom:1px solid var(--line2)}
.arch-tbl tbody tr.arch-day td{background:var(--panel2);font-weight:650;font-size:12.5px;
  padding:7px 12px}
.arch-tbl tbody tr.arch-month:hover,.arch-tbl tbody tr.arch-day:hover{background:none}
.arch-tbl tbody tr[data-aid] td{color:var(--muted)}
.arch-tbl tbody tr[data-aid] td.name,.arch-tbl tbody tr[data-aid]:hover td{color:var(--text)}
.arch-st{text-align:center}
.arch-more{padding:12px;text-align:center;border-top:1px solid var(--line)}
.arch-list{display:none}
.as-date{color:var(--muted);font-size:13px;margin:0 0 8px}
.as-kv{display:flex;justify-content:space-between;gap:10px;padding:8px 0;
  border-bottom:1px solid var(--line);font-size:14px;font-variant-numeric:tabular-nums}
.as-kv span{color:var(--muted)}
.as-kv.pos b{color:var(--green)}
.as-note{margin:12px 0 0;font-size:13px;color:var(--muted)}
.as-acts{grid-template-columns:1fr 1fr}

/* телефон: строки архива карточками, по нажатию — подробности */
@media (max-width:760px){
  .b-china .card-head{flex-wrap:wrap}
  .b-china .card-head .row{flex:1 0 100%;flex-wrap:wrap;gap:6px}
  .b-china .card-head .btn{white-space:nowrap}
  .b-china .card-head .row > .money{margin-left:auto}
  .arch-scroll{display:none}
  .arch-list{display:block;padding:0 0 12px}
  .arch-head{flex-wrap:wrap}
  .arch-head .row{width:100%}
  .arch-find{flex:1;width:auto;font-size:14px;padding:7px 10px}
  .al-month{padding:10px 14px 6px;font-size:13px;font-weight:600;background:var(--raise)}
  .al-day{display:flex;justify-content:space-between;align-items:baseline;gap:8px;
    padding:9px 14px 5px;font-size:13px}
  .al-day span{color:var(--muted);font-size:12px}
  .al-row{display:block;width:calc(100% - 20px);margin:0 10px 6px;padding:9px 11px;
    border:1px solid var(--line);border-radius:10px;background:var(--panel);text-align:left;
    cursor:pointer;color:var(--text)}
  .al-row:active{background:var(--panel2)}
  .al-l1,.al-l2{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
  .al-name{font-weight:600;font-size:14.5px}
  .al-cny{font-weight:650;font-variant-numeric:tabular-nums}
  .al-l2{margin-top:3px;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
  .al-ok{color:var(--green);font-weight:600;white-space:nowrap}
  .al-found{margin:8px 14px 0;font-weight:600;font-size:13px}
  .arch-list .arch-more{border-top:0;padding:10px 0 0}
}

/* ================= колокольчик: уведомления о задачах ================= */
.bell{position:relative;display:inline-flex;align-items:center;justify-content:center}
.bell[hidden],.bell-n[hidden]{display:none}
.bell-n{position:absolute;top:-6px;right:-6px;min-width:18px;height:18px;padding:0 4px;
  border-radius:9px;background:var(--red);color:#fff;font-size:10.5px;font-weight:700;
  line-height:14px;border:2px solid var(--panel);text-align:center}
.npop{position:absolute;z-index:130;width:390px;max-width:calc(100vw - 16px);
  background:var(--panel);border:1px solid var(--line2);border-radius:12px;
  box-shadow:var(--shadow);overflow:hidden;display:flex;flex-direction:column}
.npop .nl-list{max-height:min(460px, 70vh);overflow:auto}
.nl-head{display:flex;align-items:center;gap:8px;padding:11px 12px 9px 14px;
  border-bottom:1px solid var(--line);min-height:46px}
.nl-head .btn{margin-left:auto}
.nl-cnt{font-size:11px;font-weight:650;color:#fff;background:var(--red);border-radius:999px;
  padding:1px 7px}
.nl-empty{padding:22px 16px;text-align:center;color:var(--dim);font-size:13px}
.nl-day{padding:9px 14px 3px;font-size:11px;font-weight:650;letter-spacing:.04em;
  text-transform:uppercase;color:var(--dim)}
.nl-row{display:grid;grid-template-columns:30px 1fr auto;gap:10px;align-items:start;width:100%;
  padding:9px 14px;background:none;border:0;text-align:left;cursor:pointer;color:var(--text)}
.nl-row:hover{background:var(--panel2)}
.nl-row.unread{background:var(--accent-soft)}
.nl-txt{display:flex;flex-direction:column;gap:1px;min-width:0}
.nl-txt b{font-weight:600;font-size:13.5px}
.nl-txt span{color:var(--muted);font-size:12.5px}
.nl-row:not(.unread) .nl-txt b{font-weight:500}
.nl-at{color:var(--dim);font-size:11.5px;white-space:nowrap;display:flex;align-items:center;gap:6px}
.nl-at i{width:8px;height:8px;border-radius:50%;background:var(--accent)}
.ni{width:30px;height:30px;border-radius:50%;display:inline-flex;align-items:center;
  justify-content:center}
.ni-as{background:var(--accent-soft);color:var(--accent)}
.ni-ok{background:var(--green-soft);color:var(--green)}
.ni-due{background:var(--amber-soft);color:var(--amber)}
.nl-set{display:flex;justify-content:space-between;width:100%;padding:12px 14px;border:0;
  border-top:1px solid var(--line);background:var(--panel2);font-weight:600;cursor:pointer;
  color:var(--accent);text-align:left}
.note-sheet .nl-list{overflow:auto;flex:1}
.note-sheet .nl-row{padding:11px 14px}
.note-sheet .nl-txt b{font-size:14.5px}
.note-sheet .nl-txt span{font-size:13px}
.note-sheet .nl-set{font-size:15px;padding:14px}

/* настройки: это устройство, мои устройства, что присылать */
.ns-sheet{max-height:92vh}
.ns-dev{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--green);
  background:var(--green-soft);border-radius:10px}
.ns-dev.off{border-color:var(--line2);background:var(--panel2)}
.ns-dot{width:10px;height:10px;border-radius:50%;background:var(--green);flex:0 0 auto}
.ns-dev.off .ns-dot{background:var(--dim)}
.ns-dev-t{display:flex;flex-direction:column;flex:1;min-width:0}
.ns-dev-t small{color:var(--muted);font-size:12px}
.ns-link{background:none;border:0;padding:8px 2px 0;color:var(--muted);font-size:12.5px;
  cursor:pointer;text-decoration:underline}
.ns-note{padding:10px 12px;border:1px solid var(--line2);border-radius:10px;background:var(--panel2);
  font-size:13.5px;line-height:1.45}
.ns-note ol{margin:8px 0 0;padding-left:20px}
.ns-note li{margin:0 0 4px}
.ns-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:7px 0;
  border-bottom:1px solid var(--line)}
.ns-row > span{display:flex;flex-direction:column;font-size:14px}
.ns-row small{color:var(--muted);font-size:12px}
.tg{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:7px 0;
  border-bottom:1px solid var(--line);cursor:pointer}
.tg-t{display:flex;flex-direction:column;font-size:14.5px}
.tg-t small{color:var(--muted);font-size:12px}
input.sw{appearance:none;-webkit-appearance:none;position:relative;flex:0 0 auto;margin:0;
  width:44px;height:26px;border-radius:13px;background:var(--line2);cursor:pointer;
  transition:background .15s}
input.sw::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;
  border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:left .15s}
input.sw:checked{background:var(--green)}
input.sw:checked::after{left:21px}
.ns-foot{margin:14px 0 0;font-size:12px;color:var(--dim)}

/* ================= «Разница» по дням =================
   Нажали на карточку «Разница» — под показателями таблица: остаток на конец
   каждого дня; нажали на день — из чего сложилось изменение. */
.kpi-click{cursor:pointer;transition:border-color .12s,box-shadow .12s}
.kpi-click:hover{border-color:var(--line2)}
.kpi-click.on{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.kpi .kpi-more{color:var(--accent);font-weight:600;white-space:nowrap}
.diff-card{margin:0 0 14px}
.diff-scroll{max-height:620px}
.diff-tbl .dd-diff{font-weight:650}
.dd-today{display:inline-block;margin-left:6px;padding:0 7px;border-radius:999px;
  background:var(--raise);color:var(--muted);font-size:11px;font-weight:600}
/* «≈» — день восстановлен из утренней копии, а ночью ещё вносили правки */
.dd-rough{color:var(--amber);margin-right:4px;font-weight:700}
.dd-span{display:block;color:var(--dim);font-size:11px;font-weight:400}
@media (max-width:760px){
  .diff-tbl .dd-side{display:none}
  .diff-tbl{font-size:13px}
  .diff-tbl th,.diff-tbl td{padding:8px 10px}
  .grid.g4 .kpi.kpi-click.on{box-shadow:none;background:var(--accent-soft)}
}
.diff-tbl tbody tr.dd-month td{background:var(--raise);font-weight:600;font-size:12.5px;padding:7px 12px}
.diff-tbl tbody tr.dd-month:hover{background:none}

/* MPTrans: три поиска в шапке реестра — на телефоне каждый на всю ширину */
@media (max-width:760px){
  .section-head .mp-find{width:100% !important;flex:1 1 100%}
}

/* ================= задачи: список проектов =================
   Вместо полосы чипов — одна кнопка; под ней проекты, а ниже «Мои» и «Поручил я»:
   та же доска с отбором по людям. */
.pm-bar{display:flex;align-items:center;gap:10px;margin:0 0 12px}
.pm-btn{display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border:1px solid var(--line2);
  border-radius:9px;background:var(--panel);font-weight:600;font-size:14px;cursor:pointer;color:var(--text)}
.pm-btn:hover{border-color:var(--muted)}
.pm-btn.flt{background:var(--accent);border-color:var(--accent);color:#fff}
.pm-btn.flt .pm-n{background:rgba(255,255,255,.22);color:#fff}
.pm-btn[data-gi="0"]{--gc:var(--g0)} .pm-btn[data-gi="1"]{--gc:var(--g1)} .pm-btn[data-gi="2"]{--gc:var(--g2)}
.pm-btn[data-gi="3"]{--gc:var(--g3)} .pm-btn[data-gi="4"]{--gc:var(--g4)}
.pm-btn .cv{width:6px;height:6px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;
  transform:rotate(45deg) translate(-1px,-1px);opacity:.6;margin-left:2px}
.pm-n{font-size:11.5px;font-weight:650;color:var(--muted);background:var(--raise);border-radius:999px;
  padding:0 7px;line-height:18px}
.pm-x{background:none;border:0;color:var(--muted);cursor:pointer;font-size:13px}
.pm-x:hover{color:var(--text)}
.pm-pop{position:absolute;z-index:130;width:340px;max-width:calc(100vw - 16px);background:var(--panel);
  border:1px solid var(--line2);border-radius:12px;box-shadow:var(--shadow);padding:6px 0}
.pm-grp{padding:9px 14px 4px;font-size:11px;font-weight:650;letter-spacing:.04em;text-transform:uppercase;color:var(--dim)}
.pm-it{display:grid;grid-template-columns:18px 1fr auto;gap:8px;align-items:center;width:100%;padding:8px 14px;
  border:0;background:none;text-align:left;cursor:pointer;color:var(--text);font-size:14px}
.pm-it:hover{background:var(--panel2)}
.pm-it.on{background:var(--accent-soft)}
.pm-ck{color:var(--accent);font-weight:700}
.pm-name{display:flex;flex-direction:column;gap:1px;min-width:0}
.pm-name small{color:var(--dim);font-size:12px}
.pm-row{display:flex;align-items:center;gap:7px}
.pm-row .sh{font-size:10.5px;color:var(--dim);font-weight:500;margin-left:2px}
.pm-it[data-gi="0"]{--gc:var(--g0)} .pm-it[data-gi="1"]{--gc:var(--g1)} .pm-it[data-gi="2"]{--gc:var(--g2)}
.pm-it[data-gi="3"]{--gc:var(--g3)} .pm-it[data-gi="4"]{--gc:var(--g4)}
.pm-foot{display:flex;gap:8px;padding:8px 14px 6px;border-top:1px solid var(--line);margin-top:6px}
.pm-sheet .sheet-list{padding-bottom:14px}
.pm-sheet .pm-it{padding:12px 16px;font-size:15px}
@media (max-width:760px){ .pm-btn{flex:1;justify-content:space-between} }

/* карточка на доске: что внутри и чьё */
.tcnt{display:inline-flex;gap:8px;color:var(--muted)}
.tcnt > span{display:inline-flex;align-items:center;gap:3px}
.tbadge{font-size:10.5px;padding:1px 7px;border-radius:999px;background:var(--amber-soft);color:var(--amber);font-weight:600}

/* ================= задачи: открытая задача =================
   Слева название, описание, подзадачи, чек-лист и файлы; справа — поля.
   На телефоне всё в одну колонку: поля сразу под описанием. */
.tk{display:grid;grid-template-columns:minmax(0,1fr) 250px;column-gap:20px;align-items:start}
.tk > .tk-title,.tk > .tk-note,.tk > .tk-secs{grid-column:1}
.tk > .tk-side{grid-column:2;grid-row:1 / span 3;padding-left:16px;border-left:1px solid var(--line)}
.tk-title{font-size:17px;font-weight:600;padding:8px 10px;width:100%}
.tk-note{margin-top:8px;resize:vertical;width:100%}
.tk-props{grid-template-columns:1fr}
.tk-meta{margin-top:10px;font-size:11.5px;color:var(--dim);line-height:1.5}
.tk-sec{margin-top:18px}
.tk-sec-h{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.tk-sec-h b{font-size:13.5px}
.tk-n{color:var(--muted);font-size:12.5px}
.tk-bar{flex:0 0 110px;height:6px;border-radius:3px;background:var(--raise);overflow:hidden}
.tk-bar i{display:block;height:100%;background:var(--green);border-radius:3px}
.tk-sec-h .tk-up{margin-left:auto}
.tk-cb{width:18px;height:18px;accent-color:var(--green);flex:0 0 auto;margin:0;cursor:pointer}
.tk-cb.big{width:22px;height:22px;margin-top:9px}
.tk-sub{display:grid;grid-template-columns:18px 1fr auto 14px;gap:10px;align-items:center;padding:8px 10px;
  border:1px solid var(--line);border-radius:8px;margin-bottom:6px;background:var(--panel2);cursor:pointer}
.tk-sub:hover{border-color:var(--line2)}
.tk-sub.done .tk-sub-t{text-decoration:line-through;color:var(--dim)}
.tk-sub-m{display:inline-flex;gap:6px;align-items:center;font-size:11.5px;color:var(--dim)}
.tk-go{color:var(--dim);font-size:16px}
.tk-chk{display:flex;gap:10px;align-items:center;padding:6px 2px;border-bottom:1px solid var(--line)}
.tk-chk-t{flex:1}
.tk-chk.done .tk-chk-t{text-decoration:line-through;color:var(--dim)}
.tk-chk .mini{opacity:.35}
.tk-chk:hover .mini{opacity:1}
.tk-add{display:flex;gap:8px;align-items:center;margin-top:6px}
.tk-add > span{width:18px;text-align:center;color:var(--dim);font-size:16px}
.tk-add .input{flex:1;padding:6px 9px;font-size:13px;border-style:dashed}
.tk-empty{color:var(--dim);font-size:12.5px;padding:4px 0}
.tk-files{display:flex;flex-direction:column;gap:6px}
.tk-file{display:grid;grid-template-columns:44px minmax(0,1fr) auto auto;gap:10px;align-items:center;
  padding:6px 8px;border:1px solid var(--line);border-radius:8px}
.tk-file a.mini{display:inline-flex;align-items:center;justify-content:center;text-decoration:none}
.tk-file.bad{border-color:var(--red);background:var(--red-soft)}
.tk-file.bad small{color:var(--red)}
.tk-thumb{width:44px;height:44px;border-radius:6px;object-fit:cover;background:var(--raise)}
.tk-ext{width:44px;height:44px;border-radius:6px;display:inline-flex;align-items:center;justify-content:center;
  font-size:10.5px;font-weight:700;color:#fff;background:#64748b;overflow:hidden}
.tk-pdf{background:#e5484d} .tk-xlsx,.tk-xls,.tk-csv{background:#1d9a5b} .tk-docx,.tk-doc{background:#3b6fd8}
.tk-jpg,.tk-jpeg,.tk-png,.tk-heic,.tk-webp{background:#5b8def} .tk-mov,.tk-mp4{background:#8b5cf6}
.tk-fn{display:flex;flex-direction:column;min-width:0}
.tk-thumb[data-view]{cursor:zoom-in}
/* фото задачи поверх всего; .full — в натуральную величину, листается */
.tk-lb{position:fixed;inset:0;z-index:300;background:rgba(3,6,12,.9);display:flex;align-items:center;
  justify-content:center;padding:calc(56px + env(safe-area-inset-top)) 12px 12px;overflow:auto}
.tk-lb img{max-width:100%;max-height:100%;object-fit:contain;border-radius:4px;cursor:zoom-in;background:#fff}
.tk-lb.full{align-items:flex-start;justify-content:flex-start}
.tk-lb.full img{max-width:none;max-height:none;cursor:zoom-out}
.tk-lb-bar{position:fixed;top:0;left:0;right:0;display:flex;align-items:center;gap:8px;
  padding:10px 12px;padding-top:max(10px, env(safe-area-inset-top));background:rgba(3,6,12,.75);color:#fff}
.tk-lb-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13.5px}
.tk-lb-name small{color:#aab;margin-left:6px}
.tk-lb-bar a.btn{text-decoration:none}
.tk-lb-go{position:fixed;top:50%;transform:translateY(-50%);width:44px;height:64px;border:0;border-radius:8px;
  background:rgba(255,255,255,.12);color:#fff;font-size:30px;cursor:pointer}
.tk-lb-go.prev{left:8px} .tk-lb-go.next{right:8px}
.tk-lb.full .tk-lb-go{display:none}
.tk-fn a{color:inherit;text-decoration:none}
.tk-fn a:hover b{text-decoration:underline}
.tk-fn b{font-weight:500;font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}
.tk-fn small{color:var(--dim);font-size:11.5px}
.up-bar{display:block;height:5px;border-radius:3px;background:var(--raise);margin-top:4px;overflow:hidden}
.up-bar i{display:block;height:100%;width:0;background:var(--accent);transition:width .15s}
.tk-drop{margin-top:8px;padding:12px;border:1.5px dashed var(--line2);border-radius:8px;text-align:center;
  color:var(--dim);font-size:12.5px;cursor:pointer}
.tk-drop.over{border-color:var(--accent);background:var(--accent-soft);color:var(--accent)}
.tk-back{background:none;border:0;color:var(--accent);padding:0 0 10px;cursor:pointer;font-weight:600;
  text-align:left;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tk-subhead{display:flex;gap:10px;align-items:flex-start}
.tk-row{margin-top:10px}
@media (max-width:760px){
  .tk{grid-template-columns:1fr}
  .tk > *{grid-column:1 !important;grid-row:auto !important}
  .tk > .tk-side{padding:0;border:0;margin-top:10px}
  .tk-props{grid-template-columns:1fr 1fr}
  .tk-bar{flex-basis:70px}
  .tk-sub{grid-template-columns:18px 1fr 12px;gap:8px}
  .tk-sub-m{grid-column:2;grid-row:2}
  .tk-go{grid-column:3;grid-row:1 / 3}
  .tk-file{grid-template-columns:40px minmax(0,1fr) auto auto}
  .tk-thumb,.tk-ext{width:40px;height:40px}
  .tk-chk .mini{opacity:1}
}

/* Справочники → Выгрузка: свои даты, наши ИП и их банки (для сделок MPTrans) */
.ex-dates{display:flex;gap:8px;align-items:center;margin-top:8px}
.ex-dates .input{flex:1;min-width:0}
.ex-pick{margin-top:16px;border-top:1px solid var(--line);padding-top:14px}
.ex-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.ex-head .spacer{flex:1}
.ex-findwrap{max-width:440px;margin-bottom:10px}
.ex-find{width:100%}
/* подсказка — в общем потоке, а не поверх: карточка обрезает всё, что из неё торчит */
.ex-sug{margin-top:4px;background:var(--panel);border:1px solid var(--line2);border-radius:8px;
  box-shadow:var(--shadow);max-height:300px;overflow:auto}
.ex-opt{display:flex;align-items:center;gap:10px;width:100%;padding:9px 12px;border:0;background:none;
  color:var(--text);text-align:left;cursor:pointer;font:inherit}
.ex-opt:hover,.ex-opt.on{background:var(--raise)}
.ex-sel{border:1px solid var(--line);border-radius:8px}
.ex-sel:empty{display:none}
.ex-ent{padding:9px 12px;border-bottom:1px solid var(--line)}
.ex-ent:last-child{border-bottom:0}
.ex-row{display:flex;align-items:center;gap:10px;cursor:pointer}
.ex-name{font-weight:600;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ex-n{color:var(--muted);font-size:12.5px;white-space:nowrap;font-variant-numeric:tabular-nums}
.ex-ent.off .ex-name{color:var(--dim);font-weight:500}
.ex-banks{display:flex;flex-wrap:wrap;gap:6px 16px;margin:7px 0 1px 0}
.ex-bank{display:inline-flex;align-items:center;gap:6px;font-size:13px;cursor:pointer;white-space:nowrap}
.ex-bank.off{color:var(--dim);text-decoration:line-through}
.ex-none{padding:12px}
@media (max-width:760px){ .ex-banks{margin-left:0} .ex-n{font-size:11.5px} }