/* =========================================================================
   LogiTrack — мобильный вид (телефон, тёмная тема).
   Подключается только с media="(max-width:820px)", поэтому ни одно правило
   отсюда не может дотянуться до десктопа: десктопная тема живёт в app.css
   и остаётся светлой.

   Язык экрана — с эталона заказчицы (shots/etalon_dany_mobile3.webp):
   очень тёмный сине-чёрный фон с градиентом, белые карточки поверх него,
   единственный акцент — синий.
   ========================================================================= */

:root{
  --m-bg:#080C18;
  --m-bg-1:#151E3E;        /* верх градиента — чуть светлее и синее */
  --m-bg-2:#0B1124;
  --m-panel:#161E38;       /* тёмные плашки: поиск, вкладки, сортировка */
  --m-panel-2:#1E2848;
  --m-line:rgba(255,255,255,.09);
  --m-tx:#EEF2FB;
  --m-mute:#93A0C0;
  --m-faint:#8B97B8;      /* 5.6:1 на тёмных плашках */
  --m-acc:#2F6BFF;         /* синий акцент с эталона */
  --m-acc-d:#2457D8;
  --m-acc-l:#5A8CFF;
  --m-card:#FFFFFF;
  --m-r:14px;              /* скругление карточек с эталона */
  --m-top:58px;
  --m-bot:64px;
  --m-safe:env(safe-area-inset-bottom,0px);

  /* Акцент интерфейса на телефоне — синий с эталона. Переопределяем те же
     переменные, что задаёт app.css, поэтому кнопки, ссылки, активные вкладки
     и подсветки внутри белых карточек становятся синими без правки разметки.
     На десктопе эти строки не читаются: файл подключён только до 820px.     */
  --acc:#2F6BFF;
  --acc-d:#2457D8;
  --acc-l:#5A8CFF;
  --acc-t:#E9F0FF;
  --acc-t2:#D6E3FF;
}

/* --------------------------- Каркас страницы ---------------------------- */
html{background:var(--m-bg)}
body.app{display:block;background:var(--m-bg);background-image:none;overflow-x:hidden}
/* Градиент прибит к экрану, поэтому не «уезжает» при прокрутке длинных списков */
body.app:before{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,var(--m-bg-1) 0,var(--m-bg-2) 42%,var(--m-bg) 100%)}
/* Цвет текста по умолчанию остаётся ТЁМНЫМ, как на десктопе: почти всё
   содержимое лежит на белых карточках и таблицах. Светлым делаем только то,
   что действительно лежит прямо на тёмном фоне (см. ниже). Так любая новая
   белая карточка читается сразу, без правки этого файла. */
body.app{color:var(--ink)}

.wrap{min-height:0;display:block}
main{max-width:100%;padding:14px 14px calc(var(--m-bot) + var(--m-safe) + 22px)}

/* Десктопная верхняя полоса не нужна там, где есть мобильная шапка.
   В кабинетах (_cab_head.ejs) своей шапки нет — там .top остаётся, но
   перекрашивается под тёмную тему, а нижняя панель не показывается: её
   разделы кабинету клиента или водителя не принадлежат. */
body:has(.m-top) header.top{display:none}
body:not(:has(.m-top)) header.top{background:rgba(14,20,42,.86);border-bottom-color:var(--m-line);
  padding:0 14px;gap:10px}
body:not(:has(.m-top)) header.top .burger{display:flex;color:#fff}
body:not(:has(.m-top)) header.top .me{color:#C2CCE6;font-size:12.5px;gap:8px}
body:not(:has(.m-top)) header.top .me b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:38vw}
body:not(:has(.m-top)) header.top .me .rl{display:none}
body:not(:has(.m-top)) header.top .me .out{color:#8FB0FF}
body:not(:has(.m-top)) .m-bot,body:not(:has(.m-top)) .m-sheet{display:none}
body:not(:has(.m-top)) main{padding-bottom:34px}
/* В кабинетах своя мобильная шапка есть, а нижней панели быть не должно:
   её разделы принадлежат основной системе, а не кабинету роли. */
body.cab .m-bot,body.cab .m-sheet{display:none}
body.cab main{padding-bottom:34px}
body.cab .m-av{cursor:default}
.m-only{display:block}
.m-hide{display:none}

/* --------------------------- Типографика на тёмном ---------------------- */
main h1,main h2,main h3{color:#fff}
main>h1,main>form>h1{font-size:30px;line-height:1.12;letter-spacing:-.03em;margin:2px 0 7px}
main>h2{margin:24px 0 10px}
main>.sub{color:var(--m-mute);font-size:14px;line-height:1.45;margin-bottom:16px;max-width:none}
main>.sub b{color:#C9D3EC}
main>.legend,main>p,main>ul,main>ol{color:var(--m-mute)}
main>.muted{color:var(--m-faint)}
/* ...а заголовки ВНУТРИ белых карточек остаются тёмными */
.card h1,.card h2,.card h3,.acard h2,.acard h3,.dcard h3,.opan h3,.pcard h3,.m-card h3,
.empty h1,.empty h2,.msgbox h1,.msgbox h2,.login-form h2,table h2,table h3{color:inherit}
/* Шкала этапов: светлая, только когда лежит прямо на тёмном фоне страницы.
   Внутри белых карточек (карточка заказа) она остаётся тёмной — иначе
   «Назначен» уходит в 1.61:1 светло-серым по белому. */
main>.track .tstep{color:var(--m-faint)}
main>.track .tstep.done{color:#C2CCE6}
main>.track .tstep.cur{color:var(--acc-l)}
.card .tstep.cur,.acard .tstep.cur,.dcard .tstep.cur,.m-card .tstep.cur{color:var(--acc-d)}

/* --------------------------- Шапка -------------------------------------- */
.m-top{display:flex;align-items:center;gap:8px;height:var(--m-top);padding:0 12px;
  position:sticky;top:0;z-index:35;
  background:rgba(14,20,42,.86);backdrop-filter:saturate(1.5) blur(14px);
  border-bottom:1px solid var(--m-line)}
.m-burger{background:none;border:none;color:#fff;padding:6px;margin-left:-4px;border-radius:9px;
  line-height:0;cursor:pointer;flex:0 0 auto}
.m-burger svg{width:23px;height:23px}
.m-logo{font-size:19px;font-weight:600;letter-spacing:-.02em;color:#fff;margin-left:2px;white-space:nowrap}
.m-logo:hover{color:#fff;text-decoration:none}
.m-logo span{color:var(--m-acc-l)}
.m-acts{margin-left:auto;display:flex;align-items:center;gap:8px}
.m-rb{width:36px;height:36px;flex:0 0 36px;border-radius:50%;background:var(--m-panel-2);
  border:1px solid var(--m-line);color:#DCE3F5;display:flex;align-items:center;justify-content:center;
  cursor:pointer;position:relative;padding:0}
.m-rb:hover{color:#fff;text-decoration:none}
.m-rb svg{width:19px;height:19px}
.m-badge{position:absolute;top:-3px;right:-3px;min-width:17px;height:17px;padding:0 4px;
  border-radius:9px;background:#C92E32;color:#fff;font-size:10.5px;font-weight:700;line-height:17px;
  text-align:center;border:2px solid #101736;box-sizing:content-box}
.m-av{width:36px;height:36px;flex:0 0 36px;border-radius:50%;background:#38456D;border:1px solid var(--m-line);
  color:#fff;font-size:12.5px;font-weight:600;letter-spacing:.02em;cursor:pointer;position:relative;
  display:flex;align-items:center;justify-content:center;font-family:inherit;padding:0}
.m-av i{position:absolute;right:0;bottom:1px;width:9px;height:9px;border-radius:50%;
  background:#2ECC71;border:2px solid #131A33}

/* --------------------------- Выдвижное боковое меню --------------------- */
.side{position:fixed;left:0;top:0;bottom:0;height:100%;width:282px;flex-basis:282px;
  background:#0E1428;border-right:1px solid var(--m-line);
  transform:translateX(-100%);transition:transform .2s ease;z-index:60;box-shadow:none}
html.side-off .side{width:282px;flex-basis:282px}
/* Там, где есть мобильная шапка, меню открывает только гамбургер (класс m-nav),
   десктопное «свернуть» на телефоне ничего не значит. */
html.side-off body:has(.m-top) .side{transform:translateX(-100%)}
/* В кабинетах шапка десктопная, её бургер переключает side-off — это и есть открытие */
html.side-off body:not(:has(.m-top)) .side{transform:none;box-shadow:0 0 60px rgba(0,0,0,.55)}
html.side-off body:not(:has(.m-top)) .m-scrim{display:block}
html.m-nav .side{transform:none !important;box-shadow:0 0 60px rgba(0,0,0,.55)}
.side-brand{padding:0 8px 0 16px;height:var(--m-top);flex:0 0 var(--m-top);border-bottom-color:var(--m-line)}
html.side-off .side-brand{padding:0 8px 0 16px;justify-content:flex-start;gap:9px}
html.side-off .side-brand a{display:flex}
.side-brand a span{color:var(--m-acc-l)}
/* фирменный знак в тёмном меню: петроль заменён на синий акцент телефона */
.side-brand svg circle:first-of-type{stroke:var(--m-acc)}
.side-brand svg path{stroke:#4E5D87}
.side-toggle{display:none}
.m-close{display:flex;margin-left:auto;background:none;border:none;color:var(--m-mute);cursor:pointer;
  width:34px;height:34px;border-radius:9px;align-items:center;justify-content:center;padding:0}
.m-close svg{width:19px;height:19px}
.side-nav{padding:8px 0 20px}
html.side-off .ng-h span,html.side-off .side-foot,html.side-off .ng-s{display:block}
html.side-off .ng-h{justify-content:flex-start;padding:10px 16px;border-left-width:2px;border-right:none}
.ng-h{padding:10px 16px;font-size:15px}
.ng.on>.ng-h,html.side-off .ng.on>.ng-h{background:rgba(47,107,255,.14);border-left-color:var(--m-acc);color:#fff}
.ng.on>.ng-h i{color:var(--m-acc-l)}
.ng-s a{padding:8px 16px 8px 48px;font-size:14px}
.ng-s a.cur{background:rgba(47,107,255,.12);box-shadow:inset 3px 0 0 var(--m-acc)}
.plus{background:rgba(47,107,255,.24);color:#8FB0FF}

.m-scrim{display:none;position:fixed;inset:0;background:rgba(4,7,16,.62);z-index:50;
  backdrop-filter:blur(1px)}
html.m-nav .m-scrim,html.m-more .m-scrim{display:block}
html.m-nav,html.m-more{overflow:hidden}

/* --------------------------- Нижняя панель ------------------------------ */
.m-bot{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:45;
  background:rgba(13,18,38,.94);backdrop-filter:saturate(1.5) blur(16px);
  border-top:1px solid var(--m-line);
  padding:6px 2px calc(6px + var(--m-safe));align-items:stretch}
.m-bot a,.m-bot button{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;
  gap:3px;padding:2px 1px;background:none;border:none;cursor:pointer;font-family:inherit;
  color:var(--m-faint);font-size:10px;text-decoration:none;line-height:1.15}
.m-bot a:hover,.m-bot button:hover{text-decoration:none;color:var(--m-mute)}
.m-bot i{display:flex;align-items:center;justify-content:center;width:38px;height:30px;border-radius:10px;
  line-height:0;transition:background .14s,color .14s}
.m-bot svg{width:21px;height:21px}
.m-bot span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.m-bot a.on{color:var(--m-acc-l)}
.m-bot a.on i{background:var(--m-acc);color:#fff}
html.m-more .m-bot button{color:var(--m-acc-l)}
html.m-more .m-bot button i{background:var(--m-acc);color:#fff}

/* --------------------------- Панель «Ещё» ------------------------------- */
.m-sheet{display:flex;flex-direction:column;position:fixed;left:0;right:0;bottom:0;z-index:55;
  max-height:82vh;background:#111834;border-top:1px solid var(--m-line);
  border-radius:20px 20px 0 0;transform:translateY(101%);transition:transform .22s ease;
  box-shadow:0 -18px 60px rgba(0,0,0,.5)}
html.m-more .m-sheet{transform:none}
.m-sheet-h{display:flex;align-items:center;gap:12px;padding:16px 16px 12px;border-bottom:1px solid var(--m-line)}
.m-sheet-h:before{content:'';position:absolute;top:7px;left:50%;margin-left:-19px;width:38px;height:4px;
  border-radius:2px;background:rgba(255,255,255,.18)}
.m-who{min-width:0;overflow:hidden}
.m-who b{display:block;color:#fff;font-size:15.5px;font-weight:600;letter-spacing:-.01em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.m-who span{color:var(--m-mute);font-size:12.5px}
.m-sheet-h .m-rb{margin-left:auto}
.m-sheet-b{overflow-y:auto;padding:6px 12px calc(18px + var(--m-safe));-webkit-overflow-scrolling:touch}
.m-grp{color:var(--m-faint);font-size:11.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  margin:14px 6px 7px}
.m-links{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.m-links a{display:flex;align-items:center;gap:9px;background:var(--m-panel);border:1px solid var(--m-line);
  border-radius:11px;padding:11px 12px;color:#DCE3F5;font-size:13.5px;font-weight:500;min-width:0}
.m-links a:hover{text-decoration:none;color:#fff}
.m-links a span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.m-links a i{flex:0 0 20px;line-height:0;color:var(--m-mute)}
.m-links a svg{width:19px;height:19px}
.m-links a.on{background:rgba(47,107,255,.16);border-color:rgba(47,107,255,.42);color:#fff}
.m-links a.on i{color:var(--m-acc-l)}
.m-out{display:flex;align-items:center;justify-content:center;gap:9px;margin-top:18px;padding:13px;
  border-radius:12px;background:rgba(229,72,77,.12);border:1px solid rgba(229,72,77,.3);
  color:#FF8D91;font-size:14.5px;font-weight:600}
.m-out:hover{text-decoration:none;color:#FFB0B3}
.m-out i{line-height:0}

/* =========================== Экран «Заказы» ============================== */
.m-head{display:flex;align-items:flex-start;gap:12px;margin:2px 0 14px}
.m-head-t{flex:1;min-width:0}
.m-head h1{color:#fff;font-size:31px;line-height:1.08;letter-spacing:-.032em;margin:0 0 6px}
.m-head .m-lead{color:var(--m-mute);font-size:13.5px;line-height:1.42}
.m-new{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;background:var(--m-acc);color:#fff;
  border-radius:12px;padding:11px 15px;font-size:14px;font-weight:600;margin-top:5px;
  box-shadow:0 6px 18px rgba(47,107,255,.3)}
.m-new:hover{background:var(--m-acc-d);color:#fff;text-decoration:none}
.m-new svg{width:17px;height:17px}

/* -------- поиск и фильтры -------- */
.m-find{display:flex;gap:9px;margin-bottom:13px}
.m-find form{flex:1;min-width:0;position:relative;display:flex;align-items:center}
.m-find form>svg{position:absolute;left:13px;width:18px;height:18px;color:var(--m-faint);pointer-events:none}
.m-find input{background:var(--m-panel);border:1px solid var(--m-line);color:var(--m-tx);
  border-radius:13px;padding:12px 13px 12px 40px;font-size:14.5px;height:46px}
.m-find input::placeholder{color:var(--m-faint)}
.m-find input:hover{border-color:var(--m-line)}
.m-find input:focus{border-color:var(--m-acc);box-shadow:0 0 0 3px rgba(47,107,255,.2);background:var(--m-panel-2)}
.m-filt{flex:0 0 auto;display:inline-flex;align-items:center;gap:7px;height:46px;padding:0 14px;
  background:var(--m-panel);border:1px solid var(--m-line);border-radius:13px;color:#DCE3F5;
  font-size:14px;font-weight:500;font-family:inherit;cursor:pointer}
.m-filt svg{width:17px;height:17px;color:var(--m-mute)}
.m-filt b{min-width:20px;height:20px;border-radius:10px;background:var(--m-acc);color:#fff;font-size:11.5px;
  font-weight:700;line-height:20px;text-align:center;padding:0 5px}
html.m-filters .m-filt{background:var(--m-acc);border-color:var(--m-acc);color:#fff}
html.m-filters .m-filt svg{color:#fff}
html.m-filters .m-filt b{background:rgba(255,255,255,.25)}

/* -------- плитки-счётчики -------- */
.m-tiles{display:flex;gap:8px;align-items:stretch;margin-bottom:13px;overflow-x:auto;padding-bottom:2px;
  scrollbar-width:none;-webkit-overflow-scrolling:touch}
.m-tiles::-webkit-scrollbar{display:none}
/* Как на эталоне: значок и число в одну строку, подпись под ними —
   так все четыре плитки помещаются по ширине телефона. */
.m-tile{flex:1 1 0;min-width:0;border-radius:var(--m-r);padding:9px 9px 10px;
  border:1px solid rgba(0,0,0,.05);display:flex;flex-direction:column;justify-content:center}
.m-tile .m-tv{display:flex;align-items:center;gap:6px;min-width:0}
.m-tile i{display:flex;align-items:center;justify-content:center;width:22px;height:22px;line-height:0;
  flex:0 0 22px}
.m-tile svg{width:18px;height:18px}
.m-tile b{font-size:21px;font-weight:700;letter-spacing:-.035em;color:#101828;
  font-variant-numeric:tabular-nums;line-height:1.05}
.m-tile span{display:block;font-size:10.5px;color:#5B6478;margin-top:3px;line-height:1.2}
.m-tile.t-blue {background:#E6EEFF} .m-tile.t-blue  i{color:#2F6BFF}
.m-tile.t-green{background:#E2F6E9} .m-tile.t-green i{color:#189A55}
.m-tile.t-amber{background:#FDF1DC} .m-tile.t-amber i{color:#DF8A12}
.m-tile.t-red  {background:#FDE6E6} .m-tile.t-red   i{color:#DC3F3F}

/* -------- вкладки-фильтры -------- */
.m-tabs{display:flex;gap:8px;margin-bottom:11px;overflow-x:auto;padding-bottom:2px;
  scrollbar-width:none;-webkit-overflow-scrolling:touch}
.m-tabs::-webkit-scrollbar{display:none}
.m-tabs a{flex:0 0 auto;display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:12px;
  background:var(--m-panel);border:1px solid var(--m-line);color:#C2CCE6;font-size:13.5px;font-weight:500;
  white-space:nowrap}
.m-tabs a:hover{text-decoration:none;color:#fff}
.m-tabs a em{font-style:normal;font-size:12px;color:var(--m-faint);font-variant-numeric:tabular-nums}
.m-tabs a.on{background:var(--m-acc);border-color:var(--m-acc);color:#fff;font-weight:600}
.m-tabs a.on em{background:rgba(0,0,0,.26);color:#fff;border-radius:9px;padding:1px 7px;font-weight:600}

/* -------- сортировка -------- */
.m-sort{display:flex;align-items:center;margin-bottom:12px}
.m-sort label{display:inline-flex;align-items:center;gap:8px;background:var(--m-panel);
  border:1px solid var(--m-line);border-radius:12px;padding:0 6px 0 12px;height:42px;margin:0;
  color:#C2CCE6;font-size:13.5px;font-weight:500}
.m-sort label>svg{width:17px;height:17px;color:var(--m-mute);flex:0 0 17px}
.m-sort select{background:transparent;border:none;color:#DCE3F5;font-size:13.5px;font-weight:500;
  padding:0 26px 0 0;height:40px;width:auto;min-width:0;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%2393A0C0' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 6px center}
.m-sort select:focus{outline:none;box-shadow:none}
.m-sort select option{background:#161E38;color:#EEF2FB}

/* -------- карточка заказа -------- */
.m-list{display:flex;flex-direction:column;gap:11px}
.m-card{display:block;position:relative;background:var(--m-card);border-radius:var(--m-r);
  padding:13px 15px 13px 20px;color:var(--ink);overflow:hidden;cursor:pointer;
  box-shadow:0 2px 10px rgba(0,0,0,.22)}
.m-card:active{transform:scale(.994)}
/* цветная полоса статуса во всю высоту карточки */
.m-card:before{content:'';position:absolute;left:0;top:0;bottom:0;width:6px;background:var(--st)}
.m-chev{flex:0 0 auto;color:#B7C0D0;line-height:0;align-self:flex-end;padding-bottom:3px}
.m-chev svg{width:17px;height:17px}
/* раскрытие «Все данные заказа» — то, что не поместилось на карточку */
.m-card .m-d{margin-top:9px}
.m-card .m-d>summary{padding-top:9px}

.m-c1{display:flex;align-items:center;gap:10px}
.m-cnum{font-family:var(--mono);font-size:16px;font-weight:600;letter-spacing:-.04em;color:#101828}
.m-st{margin-left:auto;display:inline-flex;align-items:center;gap:5px;border-radius:9px;padding:4px 9px;
  font-size:12px;font-weight:600;white-space:nowrap;background:var(--st-bg);color:var(--st-tx)}
.m-st svg{width:14px;height:14px;flex:0 0 14px}
.m-c2{font-family:var(--mono);font-size:12.5px;color:#6A7385;letter-spacing:-.02em;margin-top:3px}
.m-c3{display:flex;align-items:center;gap:7px;font-size:13.5px;color:#2C3444;margin-top:7px;min-width:0}
.m-c3 svg{width:15px;height:15px;flex:0 0 15px;color:#707A8C}
.m-c3 span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.m-c4{display:flex;align-items:flex-end;gap:10px;margin-top:6px}
.m-c4 .m-where{display:flex;align-items:center;gap:7px;font-size:13.5px;color:#2C3444;min-width:0;flex:1;
  padding-bottom:2px}
.m-c4 .m-where svg{width:15px;height:15px;flex:0 0 15px;color:#707A8C}
.m-c4 .m-where span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.m-money{flex:0 0 auto;text-align:right}
.m-money b{display:block;font-size:18px;font-weight:700;letter-spacing:-.035em;color:#101828;
  font-variant-numeric:tabular-nums;line-height:1.15}
.m-money span{display:block;font-size:11.5px;color:#6A7385;margin-top:1px}

/* цвета шести реальных фаз заказа */
.st-amber {--st:#F0A82A;--st-bg:#FDF1DC;--st-tx:#8E5C0B}
.st-blue  {--st:#2F6BFF;--st-bg:#E6EEFF;--st-tx:#1E4CC0}
.st-teal  {--st:#17878E;--st-bg:#DDF2F3;--st-tx:#0F6167}
.st-green {--st:#189A55;--st-bg:#E2F6E9;--st-tx:#12703F}
.st-violet{--st:#7A5AF0;--st-bg:#EDE8FD;--st-tx:#4C2FA6}
.st-grey  {--st:#98A2B8;--st-bg:#EBEEF4;--st-tx:#5A6478}

.m-empty{background:var(--m-panel);border:1px solid var(--m-line);border-radius:var(--m-r);
  padding:30px 20px;text-align:center;color:var(--m-mute);font-size:14px;line-height:1.6}
.m-empty a{color:var(--m-acc-l);font-weight:600}

/* -------- панель фильтров: та же форма, что и на десктопе -------- */
.fbox{display:none}
html.m-filters .fbox{display:block;background:var(--m-panel);border-color:var(--m-line);
  border-radius:var(--m-r);padding:14px;margin-bottom:14px}
html.m-filters .fbox label{color:var(--m-mute)}
html.m-filters .fbox .ftabs{color:var(--m-mute)}
html.m-filters .fbox .ftabs a{background:var(--m-panel-2);border-color:var(--m-line);color:#C2CCE6}
html.m-filters .fbox .ftabs a.on{background:var(--m-acc);border-color:var(--m-acc);color:#fff}
html.m-filters .fbox input,html.m-filters .fbox select{background:#0F1630;border-color:var(--m-line);
  color:var(--m-tx);border-radius:10px;padding:11px 12px}
html.m-filters .fbox select option{background:#161E38;color:#EEF2FB}
html.m-filters .fbox .fnote{background:var(--m-panel-2);border-color:var(--m-line);color:var(--m-mute)}
html.m-filters .fbox .frow.act{border-top-color:var(--m-line)}
html.m-filters .fbox .btn{border-radius:11px;padding:11px 16px;background:var(--m-acc);border-color:var(--m-acc)}
html.m-filters .fbox .btn.sec{background:var(--m-panel-2);border-color:var(--m-line);color:#C2CCE6}
html.m-filters .fbox .plus{background:rgba(47,107,255,.24);color:#8FB0FF}

/* -------- карточка справочника (клиенты, перевозчики) -------- */
.m-row{background:var(--m-card);border-radius:var(--m-r);overflow:hidden;color:var(--ink);
  box-shadow:0 2px 10px rgba(0,0,0,.22)}
.m-row-main{display:block;position:relative;padding:13px 34px 12px 15px;color:var(--ink)}
.m-row-main:hover{text-decoration:none;color:var(--ink)}
.m-row .m-chev{position:absolute;right:11px;top:50%;margin-top:-8px;color:#B7C0D0;line-height:0}
.m-row .m-chev svg{width:17px;height:17px}
.m-rname{font-size:15.5px;font-weight:600;letter-spacing:-.015em;color:#101828;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.m-cnt{margin-left:auto;text-align:right;flex:0 0 auto;padding:0 4px 0 8px}
.m-cnt b{display:block;font-size:16px;font-weight:700;color:var(--acc);letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;line-height:1.1}
.m-cnt span{display:block;font-size:10.5px;color:#6A7385}
.m-row .m-c3{margin-top:6px;font-size:13px;color:#4A5468}
.m-row-act{display:flex;gap:8px;padding:10px 15px 12px;border-top:1px solid #EDEFF3}
.m-row-act .btn{flex:1;min-height:38px;font-size:13.5px}
.m-row-act form{flex:1;display:flex}
.m-row-act form .btn{width:100%}

/* ======================= Общие карточки вместо таблиц ====================
   Строит /static/mcards.js. Ни одна колонка не теряется: важное видно сразу,
   остальное — в «Ещё N полей». Исходная таблица остаётся в DOM и прячется. */
.g-src{display:none !important}
.g-list{display:flex;flex-direction:column;gap:10px;margin:0 0 18px}
.g-card{position:relative;background:var(--m-card);border-radius:var(--m-r);
  padding:13px 15px;color:var(--ink);box-shadow:0 2px 10px rgba(0,0,0,.22)}
.g-card.g-link{padding-right:32px;cursor:pointer}
.g-card.g-link:active{transform:scale(.995)}
.g-chev{position:absolute;right:10px;top:14px;color:#B7C0D0;line-height:0}

.g-h{display:flex;align-items:flex-start;gap:10px;margin-bottom:2px}
.g-t{flex:1;min-width:0;font-size:15.5px;font-weight:600;letter-spacing:-.015em;color:#101828;
  line-height:1.3;overflow:hidden;text-overflow:ellipsis}
.g-t b,.g-t a{font-weight:600;color:#101828}
.g-t a:hover{text-decoration:none}
.g-t .mono,.g-t b.mono{font-family:var(--mono);letter-spacing:-.04em}
.g-t .muted{display:block;font-size:12px;font-weight:400;margin-top:2px}
.g-s{flex:0 0 auto;max-width:52%;text-align:right}
.g-s .badge{white-space:normal}
.g-s .muted{display:block;font-size:11px;margin-top:3px}

.g-f{display:flex;flex-direction:column;gap:0}
.g-r{display:flex;align-items:baseline;gap:10px;padding:5px 0;border-top:1px solid #F0F2F6;
  font-size:13.5px;line-height:1.35;min-width:0}
.g-r:first-child{border-top:none;padding-top:7px}
.g-l{flex:0 0 40%;max-width:40%;font-weight:400;color:#6A7385;font-size:12px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.g-v{flex:1;min-width:0;color:#2C3444;overflow-wrap:anywhere}
.g-v .muted{display:block;font-size:11.5px;margin-top:1px}
.g-v .mono{font-family:var(--mono);letter-spacing:-.03em}
/* Деньги — то, за что глаз цепляется третьим после номера и статуса */
.g-money .g-v{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums;
  font-weight:600;font-size:15px;letter-spacing:-.03em;color:#101828}
.g-money .g-v .muted{text-align:right;font-weight:400;letter-spacing:0}

.g-d{margin-top:2px}
.g-d>summary{list-style:none;cursor:pointer;padding:7px 0 2px;font-size:12.5px;font-weight:600;
  color:var(--acc);border-top:1px solid #F0F2F6;display:flex;align-items:center;gap:6px}
.g-d>summary::-webkit-details-marker{display:none}
.g-d>summary:before{content:'';width:7px;height:7px;border-right:1.6px solid currentColor;
  border-bottom:1.6px solid currentColor;transform:rotate(45deg) translate(-2px,-2px);flex:0 0 auto}
.g-d[open]>summary:before{transform:rotate(-135deg) translate(-1px,-1px)}
.g-a{display:flex;gap:8px;margin-top:10px;padding-top:10px;border-top:1px solid #F0F2F6}
.g-a .btn,.g-a form{flex:1}
.g-a form{display:flex}
.g-a .btn{width:100%;min-height:38px;font-size:13.5px}

/* Заголовок раздела над списком карточек */
main>h2+.g-list,main>.sub+.g-list{margin-top:2px}

/* =========================== Остальные экраны ============================
   Общее правило: ничего не выезжает за экран. Таблицы прокручиваются
   внутри белой карточки, ключ-значение в одну колонку, кнопки не жмутся. */
h1{font-size:23px;letter-spacing:-.025em}
h2{font-size:17px}
.sub{max-width:none}

table{display:block;width:100%;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;
  border-radius:var(--m-r);border-color:transparent;box-shadow:0 2px 10px rgba(0,0,0,.22)}
th{position:static;white-space:nowrap}
td{vertical-align:top}
/* Служебные таблицы «ключ — значение» внутри панелей остаются таблицами:
   им нужны две колонки, а не горизонтальная прокрутка. */
.opan-fin,.opan-kv,.opan-money table{display:table;box-shadow:none;overflow:visible}

/* Зелёный чип остаётся зелёным: он про «рассчитались», а не про акцент */
.b-green{background:#E2F6E9;color:#12703F;border-color:#C4E9D3}
.b-blue{background:var(--acc-t);color:var(--acc-d);border-color:var(--acc-t2)}
.card,.empty,.sumbar,.chain li,.msgbox,.opan,.tile,.pcard,.role{border-radius:var(--m-r)}
.card,.empty,.msgbox{box-shadow:0 2px 10px rgba(0,0,0,.2);border-color:transparent}

.kv{grid-template-columns:1fr;gap:2px 0}
.kv dt{margin-top:9px}
.split>*{min-width:0;flex:1 1 100%}
.row>div,.frow>div,.toolbar .grow{flex:1 1 100%}
/* Тёмной плашкой оформляем только панель с полями (поиск, фильтр).
   Панель из одних кнопок остаётся просто рядом кнопок — лишней рамки не нужно. */
.toolbar{gap:10px;margin-bottom:14px}
.toolbar:has(input,select,textarea){background:var(--m-panel);border:1px solid var(--m-line);
  border-radius:var(--m-r);padding:12px}
.toolbar label{color:var(--m-mute)}
.toolbar input,.toolbar select{background:#0F1630;border-color:var(--m-line);color:var(--m-tx)}
.toolbar input::placeholder{color:var(--m-faint)}
.toolbar .btn.sec{background:var(--m-panel-2);border-color:var(--m-line);color:#C2CCE6}
.toolbar .btn,.frow.act .btn{flex:1 1 auto}

/* Сводная панель по выборке. Четыре плитки выше — витрина, а здесь остаются
   ВСЕ показатели (заказы, грузы, рейсы, вес, объём, фрахт, прибыль, маржа):
   строкой с горизонтальной прокруткой, ничего не выброшено. */
.sumbar{display:flex;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;background:var(--m-panel);border:1px solid var(--m-line);
  border-radius:var(--m-r);box-shadow:none;margin-bottom:13px;color:var(--m-tx)}
.sumbar::-webkit-scrollbar{display:none}
.sumbar>div{flex:0 0 auto;width:auto;padding:9px 14px;border-right:1px solid var(--m-line);
  border-bottom:none;gap:2px}
.sumbar>div:last-child{border-right:none}
.sumbar span{color:var(--m-faint);font-size:11.5px;white-space:nowrap}
.sumbar b{color:#EEF2FB;font-size:14.5px;white-space:nowrap;font-variant-numeric:tabular-nums}
.sumbar b.neg{color:#FF8D91}

/* Плитки отчётов */
.tiles{gap:10px}
.tile{flex:1 1 calc(50% - 5px);min-width:0;border-color:transparent;box-shadow:0 2px 10px rgba(0,0,0,.2);
  padding:12px 13px}
.tile .tv{font-size:19px;letter-spacing:-.03em;line-height:1.2}
.tile .tl{font-size:11.5px}

/* Карточка заказа: панель и вкладки */
.ocard{gap:14px}
.opan{flex:1 1 100%;width:auto;border-color:transparent;box-shadow:0 2px 10px rgba(0,0,0,.22)}
.opan-h{background:#101736}
.obody{min-width:0;flex:1 1 100%}
.otabs,.tabs{gap:6px;flex-wrap:nowrap;overflow-x:auto;border-bottom:none;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;margin-bottom:14px;padding-bottom:2px}
.otabs::-webkit-scrollbar,.tabs::-webkit-scrollbar{display:none}
.otabs a,.tabs a{flex:0 0 auto;background:var(--m-panel);border:1px solid var(--m-line);border-radius:11px;
  color:#C2CCE6;padding:9px 14px;font-size:13.5px;margin-bottom:0;border-bottom:1px solid var(--m-line)}
.otabs a:hover,.tabs a:hover{background:var(--m-panel-2);color:#fff}
.otabs a.on,.tabs a.on{background:var(--m-acc);border-color:var(--m-acc);color:#fff;font-weight:600}
.otabs a.on em{color:#fff}
.otabs a:not(.on) em{color:var(--m-faint)}
.track{margin:14px 0 18px;overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none}
.track::-webkit-scrollbar{display:none}
.tstep{min-width:86px;flex:0 0 auto}

.hist,.route{color:var(--ink)}
.hist .who{color:var(--ink)}

/* Кнопки под палец */
.btn{min-height:44px;border-radius:11px;padding:10px 16px}
.btn.sm{min-height:36px;padding:7px 12px}
input,select,textarea{font-size:16px;padding:11px 12px;border-radius:10px}  /* 16px — iOS не зумит */
.protobar,.err,.ok{border-radius:11px}

/* Прототип «телефон в телефоне» на /cab/* — рамку убираем, показываем содержимое */
body.phonepage{padding:12px;background:var(--m-bg)}
.phone{flex:1 1 100%;width:100%;max-width:100%;height:auto;padding:0;border-radius:var(--m-r);
  box-shadow:none;background:transparent}
.phone-in{border-radius:var(--m-r);height:auto;min-height:70vh}
.phonesay h1,.phonesay h2{color:#fff}
.phonesay p{color:var(--m-mute)}
.phonenav a{background:var(--m-panel);border-color:var(--m-line);color:#C2CCE6}
.phonenav a.on{background:var(--m-acc);border-color:var(--m-acc);color:#fff}

/* =========================== Кабинет водителя ============================
   Водитель работает только с телефона: тёмный фон, белые карточки,
   крупные кнопки под палец, синий акцент — как на эталоне.               */
body.drv{background:var(--m-bg);color:var(--ink);
  background-image:linear-gradient(180deg,var(--m-bg-1) 0,var(--m-bg-2) 46%,var(--m-bg) 100%);
  background-attachment:fixed}
.dwrap{padding:0 0 34px}
.dhead{background:transparent;padding:20px 16px 6px}
.dhead .n{font-size:27px;letter-spacing:-.03em;color:#fff}
.dhead .c{color:var(--m-mute);font-size:13.5px;margin-top:4px}
.dcard{background:var(--m-card);border-color:transparent;border-radius:var(--m-r);margin:12px 14px;
  padding:16px;box-shadow:0 2px 12px rgba(0,0,0,.26)}
.dcard h3{color:#6A7385;font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;margin-bottom:10px}
.dcard .muted{color:#6A7385}
.dstatus{color:var(--m-acc);font-size:21px;letter-spacing:-.02em}
.dsteps li{font-size:14.5px;color:#5A6570}
.dsteps li.done{color:#16211F}
.dsteps li.done:before{border-left-color:#189A55;border-bottom-color:#189A55}
.dsteps li.cur{color:var(--m-acc)}
.dsteps li.cur:before{background:var(--m-acc);box-shadow:0 0 0 3px rgba(47,107,255,.2)}
.dbtn{background:var(--m-acc);border-color:var(--m-acc);border-radius:12px;padding:16px;font-size:16.5px;
  min-height:54px;box-shadow:0 6px 18px rgba(47,107,255,.28)}
.dbtn:active{background:var(--m-acc-d)}
.dbtn.done{background:#E2F6E9;color:#12703F;border-color:#C4E9D3;box-shadow:none}
.dcard input,.dcard select,.dcard textarea{font-size:16px;border-radius:10px;padding:12px}
.route li{border-left-color:#D8DEE9}
.route li.load:before{background:var(--m-acc);box-shadow:0 0 0 1px var(--m-acc)}
.route li.unload:before{background:#101828;box-shadow:0 0 0 1px #101828}
.hist li{border-left-color:#E2E6EE}
.hist li:before{box-shadow:0 0 0 3px #fff}
.hist li.drv:before{background:var(--m-acc)}
.hist .when{color:#707A8C}

/* Страница входа на телефоне */
body.loginpage{background:var(--m-bg)}
.login-brand span{color:var(--m-acc-l)}
.login-hero h1{font-size:26px;max-width:18ch}
.login-foot{color:var(--m-faint)}
.login-left{background:transparent;padding:26px 20px 10px}
.login-right{padding:16px 20px 40px}
.login-form{background:var(--m-card);border-radius:var(--m-r);padding:20px;
  box-shadow:0 2px 14px rgba(0,0,0,.26)}
.login-form h2{color:var(--ink)}

/* ======================= Кабинеты ролей (cab.css) ========================
   Те же правила, что и в основной системе: тёмный фон, белые карточки,
   синий акцент, ничего не выезжает за экран. */
.periods{display:flex;gap:7px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
  margin-bottom:12px;padding-bottom:2px}
.periods::-webkit-scrollbar{display:none}
.periods a{flex:0 0 auto;background:var(--m-panel);border-color:var(--m-line);color:#C2CCE6;
  border-radius:11px;padding:9px 14px;font-size:13.5px;white-space:nowrap}
.periods a.on{background:var(--acc);border-color:var(--acc);color:#fff;font-weight:600}
.acard{background:var(--m-card);border-color:transparent;border-radius:var(--m-r);padding:15px;
  box-shadow:0 2px 10px rgba(0,0,0,.2);color:var(--ink)}
.acard h3{font-size:14.5px}
.acard .hint{font-size:12px}
.actbar{gap:8px}
.actbar form{width:100%;gap:8px}
.actbar input,.actbar select,.actbar input.w-sum,.actbar input.w-txt{width:100%;min-width:0;
  font-size:16px;padding:11px 12px;border-radius:10px}
.actbar .btn{flex:1 1 auto;min-height:42px}
.todobar{border-radius:var(--m-r);font-size:13px;line-height:1.5;color:#6B4E0E;
  background:#FFF6E2;border-color:#F0DFAF}
.linkbox{gap:8px}
.linkbox input{flex:1 1 100%;font-size:13px}
.delta{font-size:11.5px}
/* Плитки кабинетов — те же белые карточки, две в ряд */
body.cab .tiles{gap:9px}
body.cab .tile{flex:1 1 calc(50% - 5px)}

/* ---------------- Общая огранка: воздух, разряды, обрезка ---------------- */
/* Все цифры на телефоне — табличными разрядами, чтобы столбцы сумм читались */
.num,.mono,.g-money .g-v,.m-money b,.m-tile b,.tile .tv,.sumbar b,.g-v .mono{
  font-variant-numeric:tabular-nums}

/* Длинное название обрезается двумя строками и не растягивает карточку */
.g-t,.m-rname{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;white-space:normal}
.g-v{max-height:none}

/* Воздух между смысловыми блоками: заголовок раздела отделён сильнее, чем строки */
main>h2{margin:26px 0 4px}
main>h2+.sub{margin-bottom:12px}
main>.tiles{margin-bottom:14px}
main>.toolbar+h2{margin-top:20px}

/* Одна лестница размеров на экран: 30 — заголовок, 18 — деньги,
   15.5 — название карточки, 13.5 — текст, 11.5 — подписи. */
.muted,.g-v .muted,.m-money span,.g-s .muted{font-size:11.5px}
.tile .th{font-size:11.5px}

/* ------------- Контраст: точечные добивки поверх палитры --------------- */
/* Ссылка на тёмном фоне — светлый синий, тёмный на тёмном не читается */
main>.sub a,main>p a,main>.legend a,.m-empty a,.g-list+.sub a{color:var(--m-acc-l)}
/* Тело карточки заказа лежит на тёмном фоне: подписи и ссылки внутри него
   тоже светлые, иначе «Счета по заказу…» уходит в 3.35:1. */
.obody>.sub,.obody>p,.obody>.legend,.obody>.muted,.obody>h2,.obody>label{color:var(--m-tx)}
.obody>.sub,.obody>.muted{color:var(--m-mute)}
.obody>.sub a,.obody>p a,.obody>.legend a{color:#8FB2FF}
/* Чип «+» (наше дополнение) внутри белых поверхностей */
main .plus,.opan .plus{background:var(--acc-t);color:#1B4CC0}
/* Маршрут, журнал и шкала этапов лежат прямо на тёмном фоне страницы —
   тёмный текст на тёмном давал 1.18:1. Правим парой «фон + цвет текста»:
   белая карточка и тёмный текст, независимо от того, лежит блок прямо в main
   или внутри тела карточки заказа (.obody). */
.route,.hist,.dsteps{background:var(--m-card);color:var(--ink);
  border-radius:var(--m-r);padding:12px 15px;margin:0 0 16px;
  box-shadow:0 2px 10px rgba(0,0,0,.2)}
.route li:last-child,.hist li:last-child,.dsteps li:last-child{padding-bottom:2px}
/* Всё внутри этих карточек — на белом, поэтому подписи тёмные, а не светлые. */
.route .muted,.hist .muted,.dsteps .muted,
.route label,.hist label{color:var(--faint)}
.route a,.hist a{color:var(--acc-d)}
.hist .when{color:#5A6570}
.hist .src{color:#5A6570}
.dsteps li{color:#5A6570}
.dsteps li.done{color:#16211F}
/* Кабинет водителя: страница тёмная, но её карточки белые — текст в них тёмный */
body.drv{color:var(--ink)}
body.drv .dhead .n{color:#fff}
body.drv .dhead .c{color:var(--m-mute)}

/* ------- Подписи: безопасное по умолчанию + перечень ТЁМНЫХ панелей -------
   `label` и `.muted` по умолчанию остаются тёмными (как в app.css): почти всё
   содержимое лежит на белых карточках, и белым по белому там ничего не станет.
   Светлыми они делаются только внутри панелей, которые на телефоне реально
   тёмные, — список ниже. Если появится новая тёмная панель, проверка контраста
   в scripts/mshots.js сразу покажет тёмное на тёмном.                        */
main>.sub,main>.legend,main>p,main>.muted,main>label,
.toolbar label,.toolbar .muted,.toolbar .sub,
.fbox label,.fbox .muted,.fbox .ftabs,
.bfilter label,.bfilter .muted,.bfilter .right,.bfilter .right *,
.dper,
.periods .muted,.ow .muted,
.m-head .m-lead,.m-grp,.sumbar span{color:var(--m-mute)}
main>.muted,.dh .note,.dper .rng{color:var(--m-mute)}
/* Ссылка-подпись на тёмном фоне */
.dh .more,.dh a,main>.sub a,main>p a,main>.legend a,.m-empty a{color:var(--m-acc-l)}

.dsteps li{color:#5A6570}

/* ============== Новые экраны: доска задач и сводка (board/dash) ==========
   Жёсткие сетки на 4–6 колонок на телефоне не помещаются: складываем их
   в две колонки, а колонки доски — в горизонтальную прокрутку по одной
   на экран. Ничего не убрано, только переставлено.                        */
.kpis,.stat,.jam,.mny{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:9px}
.kpi,.st,.jm,.mn{padding:12px 13px;border-color:transparent;box-shadow:0 2px 10px rgba(0,0,0,.2)}
.dv-money{grid-template-columns:repeat(2,minmax(0,1fr))}
.chartbox,.dbox{border-color:transparent;box-shadow:0 2px 10px rgba(0,0,0,.2);overflow-x:auto}
.chartbox svg{max-width:100%;height:auto}

.board{grid-template-columns:none !important;display:flex;overflow-x:auto;gap:10px;
  scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:4px}
.board::-webkit-scrollbar{display:none}
.board>.col{flex:0 0 86vw;max-width:86vw;scroll-snap-align:start}

.dper,.dv-tabs,.dv-filter,.bfilter .seg{display:flex;flex-wrap:nowrap;overflow-x:auto;
  scrollbar-width:none;gap:7px}
.dper::-webkit-scrollbar,.dv-tabs::-webkit-scrollbar,.dv-filter::-webkit-scrollbar,
.bfilter .seg::-webkit-scrollbar{display:none}
.bfilter{flex-direction:column;align-items:stretch;gap:10px}
.bfilter form,.bfilter .right{width:100%;flex-wrap:wrap}
.bfilter select{width:100%;min-width:0}
.bfilter .seg a{flex:0 0 auto;white-space:nowrap;min-height:40px;display:flex;align-items:center;padding:0 16px}
.ow{overflow-x:auto;scrollbar-width:none}
.newtask{width:100%}

/* «Главная» (dash.css) подключается ПОСЛЕ m.css, поэтому по равному весу
   выигрывает она. Поднимаем специфичность через body.app — иначе подписи
   периода остаются тёмными на тёмном фоне. */
body.app .dper .rng,body.app .dper form label,body.app .dh .note,
body.app .dper .note{color:var(--m-mute)}
body.app .dh .more,body.app .dh a{color:var(--m-acc-l)}
body.app .dper a{background:var(--m-panel);border-color:var(--m-line);color:#C2CCE6}
body.app .dper a.on{background:var(--acc);border-color:var(--acc);color:#fff}
body.app .dper{flex-direction:column;align-items:stretch;gap:10px;overflow:visible}
body.app .dper .pl{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;gap:7px}
body.app .dper .pl::-webkit-scrollbar{display:none}
body.app .dper .pl a{flex:0 0 auto;white-space:nowrap;min-height:40px;display:flex;align-items:center}
body.app .dper form{margin-left:0;flex-wrap:wrap;width:100%}
body.app .dper form>div{flex:1 1 44%}
body.app .dper form input{width:100%;min-width:0}

/* --- действия прямо на карточке заказа (телефон) --- */
@media (max-width:820px){
  .m-act{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:10px 0 2px;
    padding-top:10px;border-top:1px solid rgba(255,255,255,.08)}
  .m-act form{margin:0}
  .m-act select{padding:7px 10px;font:inherit;font-size:13px;border-radius:9px;
    background:rgba(255,255,255,.07);color:#EAF0FF;border:1px solid rgba(255,255,255,.14)}
  .m-actb{display:inline-flex;align-items:center;padding:7px 13px;font-size:13px;font-weight:500;
    border-radius:9px;background:rgba(90,140,255,.18);color:#BBD0FF;
    border:1px solid rgba(90,140,255,.34);cursor:pointer;font-family:inherit}
  .m-actb:hover{background:rgba(90,140,255,.28);text-decoration:none;color:#DCE7FF}
  .m-actd{font-size:12.5px;color:#8FA6B8}
  /* поиск над таблицей на телефоне */
  .tfind{margin-bottom:10px}
  .tfind-i{flex:1 1 auto;background:rgba(255,255,255,.06);color:#EAF0FF;
    border-color:rgba(255,255,255,.14)}
  .tfind-n{color:#8FA6B8}
}