/* палитра MoonShine GrayPalette, как в CRM */
:root:not(.dark){--ms-cm-body:oklch(0.995 0.001 247.839);--ms-cm-primary:oklch(0.55 0.02 247.839);--ms-cm-primary-text:oklch(0.995 0.001 247.839);--ms-cm-secondary:oklch(0.92 0.005 247.839);--ms-cm-secondary-text:oklch(0.22 0.005 247.839);--ms-cm-base-text:oklch(0.22 0.005 247.839);--ms-cm-base-stroke:oklch(0.55 0.02 247.839 / 20%);--ms-cm-base-default:oklch(0.995 0.001 247.839);--ms-cm-base-50:oklch(0.985 0.002 247.839);--ms-cm-base-100:oklch(0.97 0.003 247.839);--ms-cm-base-200:oklch(0.94 0.005 247.839);--ms-cm-base-300:oklch(0.90 0.007 247.839);--ms-cm-base-400:oklch(0.85 0.01 247.839);--ms-cm-base-500:oklch(0.75 0.013 247.839);--ms-cm-base-600:oklch(0.65 0.016 247.839);--ms-cm-base-700:oklch(0.55 0.02 247.839);--ms-cm-base-800:oklch(0.45 0.015 247.839);--ms-cm-base-900:oklch(0.35 0.01 247.839);--ms-cm-success:oklch(0.64 0.22 142.49);--ms-cm-success-text:oklch(0.46 0.16 142.49);--ms-cm-warning:oklch(0.75 0.17 75.35);--ms-cm-warning-text:oklch(0.5 0.10 76.10);--ms-cm-error:oklch(0.58 0.21 26.855);--ms-cm-error-text:oklch(0.37 0.145 26.85);--ms-cm-info:oklch(0.60 0.219 257.63);--ms-cm-info-text:oklch(0.35 0.12 257.63)}
:root.dark{--ms-cm-body:oklch(0.18 0.003 247.839);--ms-cm-primary:oklch(0.70 0.015 247.839);--ms-cm-primary-text:oklch(0.16 0.005 247.839);--ms-cm-secondary:oklch(0.48 0.01 247.839);--ms-cm-secondary-text:oklch(0.94 0.003 247.839);--ms-cm-base-text:oklch(0.90 0.002 247.839);--ms-cm-base-stroke:oklch(0.70 0.015 247.839 / 20%);--ms-cm-base-default:oklch(0.22 0.004 247.839);--ms-cm-base-50:oklch(0.24 0.004 247.839);--ms-cm-base-100:oklch(0.28 0.005 247.839);--ms-cm-base-200:oklch(0.33 0.006 247.839);--ms-cm-base-300:oklch(0.39 0.007 247.839);--ms-cm-base-400:oklch(0.46 0.009 247.839);--ms-cm-base-500:oklch(0.54 0.011 247.839);--ms-cm-base-600:oklch(0.62 0.013 247.839);--ms-cm-base-700:oklch(0.70 0.015 247.839);--ms-cm-base-800:oklch(0.78 0.012 247.839);--ms-cm-base-900:oklch(0.86 0.008 247.839);--ms-cm-success:oklch(0.64 0.22 142.495);--ms-cm-success-text:oklch(0.93 0.12 144.46);--ms-cm-warning:oklch(0.9 0.22 92.72);--ms-cm-warning-text:oklch(0.99 0.072 107.64);--ms-cm-error:oklch(0.589 0.214 26.855);--ms-cm-error-text:oklch(0.71 0.24 25.96);--ms-cm-info:oklch(0.6 0.22 257.63);--ms-cm-info-text:oklch(0.88 0.065 244.38)}

/* переменные; одна колонка по центру: формы 600, списки 760, таблица сделок 1120
   на телефоне во всю ширину, главная кнопка и панель разделов внизу; цвета только из палитры CRM */
:root{
  --sat:env(safe-area-inset-top,0px); --sab:env(safe-area-inset-bottom,0px);
  --bg:var(--ms-cm-base-50); --surface:var(--ms-cm-base-default);
  --ink:var(--ms-cm-base-text); --stroke:var(--ms-cm-base-stroke);
  --muted:color-mix(in oklab, var(--ms-cm-base-text) 72%, var(--ms-cm-body));
  --soft:var(--ms-cm-base-100);
  --income:var(--ms-cm-success-text);
  --pad:16px; --nav-h:64px; --w:760px;
  --t-title:20px; --t-block:17px; --t-body:15px; --t-meta:13px;
  --r-box:14px; --r-ctl:8px;
  /* «Перевести» зеленая: деньги уходят, сделка становится «Закрыта» */
  --go-bg:color-mix(in oklab,var(--ms-cm-success-text) 82%,var(--ms-cm-base-800)); --go-ink:var(--ms-cm-primary-text);
  --gray-btn:var(--ms-cm-base-300);
  --skel:var(--ms-cm-base-200);
  /* значки в шапке сделки: отменить кирпичным, удалить красным */
  --c-cancel:oklch(0.58 0.17 42); --c-del:var(--ms-cm-error);
}
:root.dark{--bg:var(--ms-cm-body);--go-bg:color-mix(in oklab,var(--ms-cm-success) 72%,var(--ms-cm-base-700));--gray-btn:var(--ms-cm-base-200);--skel:var(--ms-cm-base-100);--c-cancel:oklch(0.66 0.17 38);--c-del:var(--ms-cm-error-text)}

/* база */
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink)}
body{font-family:Gilroy,Roboto,system-ui,sans-serif;font-size:var(--t-body);line-height:1.4;-webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums}
.num{font-variant-numeric:tabular-nums;white-space:nowrap}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
button,input,select{font-family:inherit}
:focus-visible{outline:2px solid var(--ms-cm-primary);outline-offset:2px}
main{max-width:var(--w);margin:0 auto;padding:calc(var(--sat) + 16px) var(--pad) calc(var(--nav-h) + var(--sab) + 140px)}
main.form-w{--w:600px} main.wide{--w:1120px}
.inc{color:var(--income);font-weight:600}
.zero{color:var(--muted);font-weight:400!important}

/* шапка экрана: значки по краям колонки */
.top{display:flex;align-items:center;gap:8px;min-height:48px;margin-bottom:12px}
.top h1{font-size:var(--t-title);font-weight:600;margin:0;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.top .sp{flex:1}
.top .badge{flex:none}
.ed{flex:none;font-size:var(--t-meta);color:var(--muted)}
.iconbtn{display:inline-grid;place-items:center;flex:none;width:44px;height:44px;border:0;border-radius:10px;background:transparent;color:var(--ink);cursor:pointer;text-decoration:none}
.iconbtn:hover{background:var(--soft)}
.iconbtn svg{width:20px;height:20px}
.top .back{margin-left:-18px}
.top > .iconbtn:last-child{margin-right:-12px}

/* плитки */
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.tiles.one{grid-template-columns:1fr}
.tile{display:flex;align-items:center;gap:8px;padding:12px 10px 12px 14px;border:1px solid var(--stroke);border-radius:var(--r-box);background:var(--surface);text-decoration:none;color:var(--ink);min-height:72px}
.tile:hover{background:var(--soft)}
.tile .t{flex:1;min-width:0}
.tile small{display:block;font-size:var(--t-meta);color:var(--muted)}
.tile b{display:block;font-size:22px;font-weight:600;line-height:1.25;overflow:hidden;text-overflow:ellipsis}
.tile svg,.chev{width:18px;height:18px;color:var(--muted);flex:none}

/* блок */
.block{margin-top:24px;border:1px solid var(--stroke);border-radius:var(--r-box);background:var(--surface);overflow:hidden}
.block.flush{margin-top:0}
.block h2{font-size:var(--t-block);font-weight:600;margin:0;padding:12px 14px}
.more{display:flex;width:calc(100% - 16px);margin:8px;min-height:44px;font-size:var(--t-body)!important}
.block .rows > .deal:first-child{border-top:1px solid var(--stroke)}
.first-flat > .deal:first-child{border-top:0!important}

/* строка сделки: вся строка ссылка на сделку */
.deal{position:relative;display:grid;grid-template-columns:1fr auto;grid-template-areas:"who sum" "date badge";align-items:center;column-gap:12px;row-gap:2px;padding:9px 14px;border-top:1px solid var(--stroke);min-height:60px}
.deal:hover{background:color-mix(in oklab,var(--soft) 60%,transparent)}
.deal .open{position:absolute;inset:0;z-index:0}
.deal .open:focus-visible,.client:focus-visible,.rowlink:focus-visible::after{outline:2px solid var(--ms-cm-primary);outline-offset:-2px}
.deal .who{grid-area:who;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.deal .sum{grid-area:sum;font-weight:600;text-align:right}
.deal .date{grid-area:date;white-space:nowrap}
.deal .badge{grid-area:badge;justify-self:end}
/* операция без сделки, «не оплачено», сделка удаленного клиента */
.deal.pay .who{color:var(--ink)}
.deal.pay .cm{color:var(--muted)}
.unp{margin-right:6px;vertical-align:1px}
.deal .who .unp{font-size:12px}
.deal.gone .who{color:var(--muted)}
.deal.gone .cm{color:var(--muted)}

/* статусы */
.badge{white-space:nowrap}
:root.dark .badge-warning{--ms-badge-bg-color:color-mix(in oklab,var(--ms-cm-warning) 35%,transparent)}
:root.dark .badge-success{--ms-badge-bg-color:color-mix(in oklab,var(--ms-cm-success) 35%,transparent)}
:root.dark .badge-error{--ms-badge-bg-color:color-mix(in oklab,var(--ms-cm-error) 22%,transparent)}

/* закрепленные действия внизу экрана */
.actions{position:fixed;left:0;right:0;bottom:calc(var(--nav-h) + var(--sab));padding:12px var(--pad) 10px;background:linear-gradient(to top,var(--bg) 75%,transparent);display:grid;gap:8px;z-index:5}
.actions .btn{width:100%}
body.kb .actions,body.kb .nav{display:none}
.actions.bulk{grid-template-columns:1fr 1fr}
.actions.bulk[hidden]{display:none}
.actions.bulk.one{grid-template-columns:1fr}

/* кнопки */
.main{min-height:52px;font-size:16px!important;font-weight:600!important}
.sub{min-height:44px;font-size:var(--t-body)!important;font-weight:500!important}
.btn-go{background:var(--go-bg)!important;color:var(--go-ink)!important;border-color:transparent!important}
.btn-go:hover{background:color-mix(in oklab,var(--go-bg) 88%,var(--ms-cm-base-text))!important}
.btn-gray{background:var(--gray-btn)!important;color:var(--ink)!important;border-color:transparent!important}
.btn-gray:hover{background:color-mix(in oklab,var(--gray-btn) 85%,var(--ms-cm-base-text))!important}
.btn-cancel{background:var(--c-cancel)!important;color:var(--go-ink)!important;border-color:transparent!important}
.btn-del{background:var(--c-del)!important;color:var(--go-ink)!important;border-color:transparent!important}
.b-cancel{color:var(--c-cancel)!important} .b-del{color:var(--c-del)!important}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.45;cursor:default}
.btn[aria-busy="true"]{opacity:.75;pointer-events:none}
.spin{width:16px;height:16px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:sp 0.8s linear infinite}
@keyframes sp{to{rotate:360deg}}
@media (prefers-reduced-motion:reduce){.spin{animation:none}}
.btn{transition-duration:.15s}
.btn[aria-busy] .spin{margin-right:2px}
@media (max-width:1023px){.btn{min-height:44px;font-size:14px!important}}

/* панель разделов */
.nav{position:fixed;left:0;right:0;bottom:0;padding-bottom:var(--sab);background:var(--surface);border-top:1px solid var(--stroke);z-index:6}
.nav ul{display:grid;grid-template-columns:repeat(4,1fr);max-width:520px;margin:0 auto;padding:0;list-style:none}
.nav a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;height:var(--nav-h);font-size:12px;color:var(--muted);text-decoration:none}
.nav a span.ic{display:grid;place-items:center;width:52px;height:30px;border-radius:15px}
.nav a svg{width:22px;height:22px}
.nav a[aria-current="page"]{color:var(--ink);font-weight:600}
.nav a[aria-current="page"] span.ic{background:var(--soft)}

/* значки действий в шапке */
.acts{display:flex;gap:4px;margin-right:-12px}
.act-cancel{color:var(--c-cancel)} .act-del{color:var(--c-del)}
.act-cancel:hover{background:color-mix(in oklab,var(--c-cancel) 16%,transparent)}
.act-del:hover{background:color-mix(in oklab,var(--c-del) 16%,transparent)}
.acts svg{width:22px;height:22px}

/* уведомления */
.toast{display:flex;align-items:center;gap:10px;padding:8px 8px 8px 14px;border-radius:var(--r-box);background:var(--soft);border:1px solid var(--stroke)}
.toast .sp{flex:1}
.toast .btn{flex:none}
.toast.err{border-color:var(--ms-cm-error)}
.toast.live{position:fixed;left:var(--pad);right:var(--pad);bottom:calc(var(--nav-h) + var(--sab) + 12px);max-width:600px;margin:0 auto;z-index:9;box-shadow:0 8px 24px color-mix(in oklab,var(--ms-cm-base-text) 18%,transparent);opacity:0;translate:0 8px;transition:opacity .15s,translate .15s}
.toast.live.in{opacity:1;translate:0 0;transition:opacity .2s,translate .2s}
@media (prefers-reduced-motion:reduce){.toast.live,.toast.live.in{translate:none;transition:opacity .2s}}

/* поля */
.form{display:grid;grid-template-columns:1fr 150px;gap:16px 12px;border:0;margin:0;padding:0;min-width:0}
label.l{display:block;font-size:var(--t-meta);color:var(--muted);margin-bottom:4px}
.field{position:relative}
.field svg{position:absolute;right:12px;top:50%;translate:0 -50%;width:18px;height:18px;color:var(--muted);pointer-events:none}
.form-input,.form-select{width:100%;min-height:44px;font-size:16px!important}
.field .form-input{padding-right:38px!important}
.field.sfx::after{content:attr(data-sfx);position:absolute;right:12px;top:50%;translate:0 -50%;color:var(--muted);pointer-events:none;font-size:var(--t-body)}
.field.sfx .form-input{padding-right:34px!important}
.field.pm-wrap .form-input{padding-left:46px!important}
.pm{position:absolute;left:4px;top:50%;translate:0 -50%;z-index:1;width:36px;height:calc(100% - 8px);min-height:0!important;border:0;border-radius:6px;background:var(--soft);color:var(--ink);font:inherit;font-size:17px;line-height:1;cursor:pointer;padding:0}
.pm:hover{background:var(--gray-btn)}
.pm[hidden]{display:none}
/* дата: календарь открывается по всему полю */
.field.date input::-webkit-calendar-picker-indicator{opacity:0;position:absolute;right:0;top:0;width:44px;height:100%;cursor:pointer}
.field.date input{position:relative}
.field.date{cursor:pointer}
input[type=date].form-input{-webkit-appearance:none;appearance:none;display:flex;align-items:center}
input[type=date]::-webkit-date-and-time-value{text-align:left}
/* подсказки клиентов */
.sugg{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:20;margin:0;padding:4px;list-style:none;background:var(--surface);border:1px solid var(--stroke);border-radius:var(--r-ctl);box-shadow:0 8px 24px color-mix(in oklab,var(--ms-cm-base-text) 14%,transparent);max-height:260px;overflow:auto}
.sugg li{padding:10px 12px;border-radius:6px;cursor:pointer;min-height:44px;display:flex;align-items:center}
.sugg li:hover,.sugg li[aria-selected=true]{background:var(--soft)}

/* сделка */
.calc{border:1px solid var(--stroke);border-radius:var(--r-box);background:var(--surface)}
.calc div{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:12px 14px;border-top:1px solid var(--stroke)}
.calc div:first-child{border-top:0}
.calc span{color:var(--muted)}
.calc b{font-weight:600}
.calc .cmt{font-weight:400;text-align:right;overflow-wrap:anywhere}
.calc.mt{margin-top:24px}
/* закрытая сделка только для просмотра: значения без рамок и значков */
fieldset.form:disabled .form-input{background:transparent!important;border-color:transparent!important;padding-left:0!important;opacity:1!important;color:var(--ink)!important;-webkit-text-fill-color:var(--ink)}
fieldset.form:disabled .field svg{display:none}
fieldset.form:disabled .field.sfx::after{position:static;translate:none;margin-left:4px}
fieldset.form:disabled .field.sfx{display:flex;align-items:center}
fieldset.form:disabled .field.sfx .form-input{width:auto;field-sizing:content;padding-right:0!important}
/* «не оплачено»: клиент еще не заплатил */
.unpaid-box{margin-top:16px;padding:12px 14px;border:1px solid color-mix(in oklab,var(--ms-cm-info) 35%,var(--stroke));border-radius:var(--r-box);background:color-mix(in oklab,var(--ms-cm-info) 7%,var(--surface));display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.unpaid-box p{margin:0;flex:1 1 240px}
.unpaid-box .btn{flex:none;min-width:140px}
.created{margin:12px 0 0;color:var(--muted);font-size:var(--t-meta)}

/* списки */
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.filters .form-select{width:auto;flex:none;padding-right:36px!important;field-sizing:content;max-width:100%}
.tbl{display:none}
.search{position:relative;margin-bottom:16px}
.search svg{position:absolute;left:12px;top:50%;translate:0 -50%;width:18px;height:18px;color:var(--muted)}
.search input{padding-left:38px!important}
.client{display:flex;align-items:center;gap:12px;min-height:56px;padding:8px 10px 8px 14px;border-top:1px solid var(--stroke);color:var(--ink);text-decoration:none}
.client:first-child{border-top:0}
.client:hover{background:color-mix(in oklab,var(--soft) 60%,transparent)}
.client .n{flex:1}
.client .num{font-weight:600}
.client .ed{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
button.client{width:100%;border:0;background:transparent;font:inherit;text-align:left;cursor:pointer}
.client.exit{color:var(--c-del)}
.client.exit svg{width:20px;height:20px;flex:none}

/* состояния */
.skel{height:12px;border-radius:6px;background:var(--skel);margin:6px 0}
.skel-row{pointer-events:none}
.skel-row .skel{display:block}
.empty{padding:20px 14px;color:var(--muted);text-align:center}
.hint{font-size:var(--t-meta);color:var(--muted);margin:12px 0 0}
.form-invalid{border-color:var(--ms-cm-error)!important}
.err-msg{color:var(--ms-cm-error-text);font-size:var(--t-meta);margin-top:4px}
:root.dark .err-msg{color:oklch(0.78 0.16 26)}

/* таблицы */
table.t{width:100%;border-collapse:collapse}
table.t th{font-weight:500;color:var(--muted);text-align:left;padding:10px 14px;font-size:13px;border-bottom:1px solid var(--stroke)}
table.t td{padding:6px 14px;border-bottom:1px solid var(--stroke);height:48px}
table.t tr:last-child td{border-bottom:0}
table.t tr.r{position:relative}
table.t tr.r:hover td{background:color-mix(in oklab,var(--soft) 60%,transparent)}
table.t .rt{text-align:right}
table.t .s{font-weight:600}
table.t .gap{padding-left:32px}
.rowlink{color:inherit;text-decoration:none}
.rowlink::after{content:"";position:absolute;inset:0;z-index:0}
table.hist{table-layout:fixed}
table.hist col.c1{width:40%} table.hist col.c2,table.hist col.c3{width:30%}

/* выбор нескольких: «Выбрать» в шапке, флажки у строк, действия внизу */
.ck{display:none}
.form-checkbox{width:20px;height:20px}
.form-checkbox:checked{background-color:var(--ms-cm-primary);border-color:var(--ms-cm-primary);color:var(--ms-cm-primary-text)}
.form-checkbox:checked:before{transform:translateY(-1px) rotate(-45deg) scale(1)}
.form-checkbox:indeterminate{background-color:var(--ms-cm-primary);border-color:var(--ms-cm-primary)}
.form-checkbox:indeterminate:before{content:"";width:.6em;height:0;border:0;border-top:.125em solid var(--ms-cm-primary-text);transform:none}
body.sel td.ck,body.sel th.ck{display:table-cell;width:44px;padding-right:0}
body.sel .deal .ck{display:grid;position:absolute;left:14px;top:50%;translate:0 -50%;z-index:1}
body.sel .deal{padding-left:48px}
table.t td.ck{position:relative;z-index:1}
body.sel tr.r.on td,body.sel .deal.on{background:color-mix(in oklab,var(--soft) 80%,transparent)}
body.sel .client .ck{display:grid;flex:none}
body.sel .client.on{background:color-mix(in oklab,var(--soft) 80%,transparent)}
.selbar{display:flex;align-items:center;gap:12px;min-height:48px;margin:0 0 8px;padding:0 14px;border:1px solid var(--stroke);border-radius:var(--r-box);background:var(--surface);cursor:pointer}
.selbar[hidden]{display:none}
.selbar .sp{flex:1}
.selbar .num{color:var(--muted)}
#selToggle[aria-pressed=true]{background:var(--soft)}
@media (max-width:1023px){ body.sel .xl{display:none} }
@media (max-width:1023px){ .selbar .pc{display:none} }

/* окна «Точно?» */
dialog.ask{width:min(400px,calc(100% - 2 * var(--pad)));padding:20px;border:1px solid var(--stroke);border-radius:var(--r-box);background:var(--surface);color:var(--ink);display:block;position:fixed;inset:0;margin:auto;height:fit-content;min-height:0;max-width:none;pointer-events:auto}
dialog.ask:not([open]){display:none}
dialog.ask::backdrop{background:color-mix(in oklab,var(--ms-cm-base-text) 35%,transparent)}
dialog.ask h2{font-size:var(--t-block);font-weight:600;margin:0 0 8px}
dialog.ask p{margin:0 0 20px;color:var(--muted)}
.ask-btns{display:grid;grid-template-columns:1fr 1fr;gap:8px}
dialog.pay-ask .l{display:block;margin:12px 0 6px}
dialog.pay-ask .ask-btns{margin-top:20px}

/* «Мой баланс»: лента как в банке */
.pay-btns{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
.pay-btns .btn{width:100%}
.bal-now{padding:4px 2px 0}
.bal-now small{display:block;font-size:var(--t-meta);color:var(--muted)}
.bal-now b{display:block;font-size:34px;font-weight:600;line-height:1.15;margin-top:2px}
.bal-month{margin:6px 0 0;font-size:var(--t-meta);color:var(--muted);white-space:normal}
.bal-month .inc{font-weight:600}
.chips{display:flex;gap:8px;margin-top:20px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.chip{flex:none;display:inline-flex;align-items:center;min-height:36px;padding:0 14px;border:1px solid var(--stroke);border-radius:999px;background:var(--surface);color:var(--ink);text-decoration:none;font-size:var(--t-body)}
.chip:hover{background:var(--soft)}
.chip.on{background:var(--ms-cm-base-text);border-color:transparent;color:var(--ms-cm-body)}
.feed-day{margin-top:16px}
.feed-day h2{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:var(--t-body)}
.feed-day h2 .tot{color:var(--muted);font-weight:400;font-size:var(--t-meta)}
.fr{position:relative;display:grid;grid-template-columns:40px 1fr auto;align-items:center;gap:12px;padding:10px 14px;border-top:1px solid var(--stroke);min-height:64px}
.fr:has(.open):hover{background:color-mix(in oklab,var(--soft) 60%,transparent)}
.fr .open{position:absolute;inset:0;z-index:0}
.fr .open:focus-visible{outline:2px solid var(--ms-cm-primary);outline-offset:-2px}
.fr .ic{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--soft);color:var(--ms-cm-base-800)}
.fr .ic svg{width:20px;height:20px}
.fr.pos .ic{background:color-mix(in oklab,var(--ms-cm-success) 16%,var(--surface));color:var(--income)}
.fr.neg .ic{background:color-mix(in oklab,var(--c-del) 13%,var(--surface));color:var(--c-del)}
.neg-am{color:var(--c-del);font-weight:600}
.fr .tx{min-width:0}
.fr .tx b{display:block;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fr .tx small,.fr .am small{display:block;font-size:var(--t-meta);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fr .am{text-align:right;font-weight:600}
.fr .am small{font-weight:400}
.feed-more{width:100%;margin:16px 0 0;text-decoration:none;justify-content:center}

/* журнал */
.jr{align-items:flex-start;padding-block:10px}
.jr small{display:block;color:var(--muted);font-size:var(--t-meta);margin-top:2px}
.jr.undone .jt{text-decoration:line-through;color:var(--muted)}

/* настройки */
.ok-note{margin-bottom:16px}
.hint.who{text-align:center}
button.client[hidden]{display:none}
dialog.instruction-ask{width:min(440px,calc(100% - 2 * var(--pad)));max-height:calc(100dvh - var(--sat) - var(--sab) - 24px);overflow:auto;overscroll-behavior:contain}
dialog.instruction-ask h2:focus{outline:none}
.instruction-steps{display:grid;gap:20px;list-style:none;counter-reset:instruction;margin:20px 0;padding:0}
.instruction-steps li{display:grid;gap:8px;min-width:0;counter-increment:instruction}
.instruction-steps h3{margin:0;font-size:var(--t-body);font-weight:600;line-height:1.4}
.instruction-steps h3::before{content:counter(instruction) ". "}
dialog.instruction-ask .instruction-steps p{margin:0}
dialog.instruction-ask .btn{width:100%;min-height:44px;display:flex;align-items:center;justify-content:center}
.install-preview{display:flex;align-items:center;gap:12px;margin:16px 0}
.install-preview img{border-radius:14px}
dialog.install-ask{display:flex;flex-direction:column;overflow:hidden}
dialog.install-ask h2{flex:none}
.install-body{min-height:0;overflow:auto;overscroll-behavior:contain}
dialog.install-ask .install-close{flex:none;margin-top:16px}
.safari-guide{display:grid;gap:8px;margin:0;min-width:0}
.safari-guide-row{display:grid;grid-template-columns:32px minmax(0,1fr) 24px;align-items:center;gap:8px;min-height:48px;padding:8px 12px;background:var(--soft);border-radius:12px}
.safari-guide-symbol{display:grid;place-items:center;width:32px;height:32px}
.safari-guide-menu{outline:2px solid var(--ms-cm-primary);border-radius:8px}
.safari-guide svg{display:block;width:24px;height:24px;color:var(--ink)}
.safari-guide .safari-guide-menu-icon{width:22px;height:27px}
.safari-guide-label{min-width:0;font-size:var(--t-meta);overflow-wrap:anywhere}
.safari-guide .safari-guide-arrow{margin-left:16px}
.safari-guide-line{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.safari-guide figcaption{font-size:var(--t-meta);color:var(--muted)}

/* настройки уведомлений */
body[data-page=notifications] main{padding-bottom:calc(var(--nav-h) + var(--sab) + 24px)}
body[data-page=notifications] .notification-section{margin-top:16px}
body[data-page=notifications] .notification-section h2{padding-bottom:0}
body[data-page=notifications] .notification-section > form,body[data-page=notifications] .notification-content{padding:12px 14px 14px}
body[data-page=notifications] .notification-section p{margin:0 0 12px}
body[data-page=notifications] .notification-section .form-input + .btn,body[data-page=notifications] .notification-section .err-msg + .btn{margin-top:12px}
body[data-page=notifications] .notification-buttons{display:flex;flex-wrap:wrap;gap:8px}
body[data-page=notifications] textarea{font-family:inherit;resize:none}
dialog.telegram-ask .telegram-note{margin-bottom:16px}

/* вход, первый запуск, смена пароля */
.auth{--w:400px;padding-bottom:calc(var(--sab) + 32px);min-height:100dvh;display:flex;flex-direction:column;justify-content:center}
.auth .brand{margin:0 0 16px;text-align:center;font-weight:600;color:var(--muted)}
.auth-box{padding:24px 20px;border:1px solid var(--stroke);border-radius:var(--r-box);background:var(--surface)}
.auth-box h1{font-size:var(--t-title);font-weight:600;margin:0 0 20px;line-height:1.2}
.auth-box .lead{margin:-12px 0 20px;color:var(--muted)}
.auth-box form,.pwform{display:grid}
.auth-box label.l,.pwform .l{margin-top:16px}
.auth-box label.l:first-of-type,.pwform label.l:first-of-type{margin-top:0}
.auth-box .main{width:100%;margin-top:20px}
.auth-box .form-input,.pwform .form-input{font-size:16px!important;min-height:48px}
.pw .form-input{padding-right:48px!important}
.pw .eye{position:absolute;right:2px;top:50%;translate:0 -50%;display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:var(--r-ctl);background:transparent;color:var(--muted);cursor:pointer}
.pw .eye:hover{color:var(--ink)}
.field.pw .eye svg{position:static;translate:none;width:20px;height:20px}
.check{display:flex;align-items:center;gap:10px;margin-top:16px;min-height:44px;cursor:pointer;user-select:none}
.wait{margin:16px 0 -8px;font-size:var(--t-body)}
.wait.ok{color:var(--muted)!important}
.auth .alt{display:block;margin:16px auto 0;padding:10px;text-align:center;color:var(--muted);font-size:var(--t-body)}
.auth .alt:hover{color:var(--ink)}
.auth-box > .main{display:flex;align-items:center;justify-content:center;text-decoration:none}

/* компьютер, MacBook 13" и шире */
@media (min-width:1024px){
  :root{--pad:32px;--nav-h:60px;--t-title:22px;--t-body:14px}
  main{padding-top:32px}
  .btn{min-height:40px}
  /* главная кнопка внизу над панелью, как на телефоне, в ширину колонки */
  .actions{max-width:var(--w);margin:0 auto}
  /* на Главной кнопка сразу под блоками сделок, в «Клиентах» под поиском */
  .actions.home{position:static;max-width:none;background:none;padding:0;margin-top:24px}
  .actions.cl{position:static;max-width:none;background:none;padding:0;margin:0 0 16px}
  .deal{grid-template-columns:1fr 120px 120px 92px;grid-template-areas:"who sum date badge";min-height:48px;padding-block:6px}
  .deal .date{padding-left:20px}
  .deal .badge{justify-self:start}
  .client{min-height:48px}
  .form{grid-template-columns:1fr 160px}
  .form-input,.form-select{min-height:40px;font-size:14px!important}
  .main{min-height:48px;font-size:15px!important}
  .sub{min-height:40px;font-size:14px!important}
  .list-m{display:none}
  .tbl{display:block}
  .filters .form-select{min-width:200px}
  .sugg li{min-height:36px;padding:8px 12px}
  .bal-now b{font-size:38px}
  .fr{min-height:56px;padding-block:8px}
  .auth-box{padding:32px}
}