/* AKBIKE CRM, оформление 2026-10: раскладка в духе приложений Яндекса (серый фон, белые карточки с крупным скруглением, пилюли,
   нижняя панель на телефоне) и фирменный оранжевый AKBIKE #ec6f0e. Тема — светлая, тёмная или «как в телефоне», её выбирает
   каждый сотрудник в настройках (атрибут data-theme у <html>). Шрифт Onest лежит у нас (static/fonts) — со сторонних сайтов ничего не грузится. */
@font-face { font-family: "Onest"; font-style: normal; font-weight: 500; font-display: swap; src: url(/static/fonts/onest-cyrillic-500-normal.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Onest"; font-style: normal; font-weight: 600; font-display: swap; src: url(/static/fonts/onest-cyrillic-600-normal.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Onest"; font-style: normal; font-weight: 700; font-display: swap; src: url(/static/fonts/onest-cyrillic-700-normal.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Onest"; font-style: normal; font-weight: 800; font-display: swap; src: url(/static/fonts/onest-cyrillic-800-normal.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Onest"; font-style: normal; font-weight: 500; font-display: swap; src: url(/static/fonts/onest-latin-ext-500-normal.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Onest"; font-style: normal; font-weight: 600; font-display: swap; src: url(/static/fonts/onest-latin-ext-600-normal.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Onest"; font-style: normal; font-weight: 700; font-display: swap; src: url(/static/fonts/onest-latin-ext-700-normal.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Onest"; font-style: normal; font-weight: 800; font-display: swap; src: url(/static/fonts/onest-latin-ext-800-normal.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Onest"; font-style: normal; font-weight: 500; font-display: swap; src: url(/static/fonts/onest-latin-500-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Onest"; font-style: normal; font-weight: 600; font-display: swap; src: url(/static/fonts/onest-latin-600-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Onest"; font-style: normal; font-weight: 700; font-display: swap; src: url(/static/fonts/onest-latin-700-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Onest"; font-style: normal; font-weight: 800; font-display: swap; src: url(/static/fonts/onest-latin-800-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ---- цвета: светлая тема */
:root {
  color-scheme: light;
  --bg: #f2f3f5; --card: #ffffff; --ink: #21201f; --text: #21201f; --muted: #6b6966; --line: #e6e6e8; --fill: #edeef0; --hover: #e4e5e8;
  --brand: #ec6f0e; --accent: #ec6f0e; --accent2: #ec6f0e; --lime: #8bcd0d;
  --btn: #bd5500; --btn-press: #a34900; --btn-fg: #ffffff;            /* белый текст на оранжевой кнопке — 4.7:1 */
  --link: #b35000;                                                     /* ссылка на белом — 5.2:1 */
  --solid: #21201f; --on-solid: #ffffff;                               /* активный пункт меню — чёрная пилюля */
  --field: #edeef0; --field-line: transparent; --chip: #edeef0;
  --good: #1a8a3c; --bad: #d2331b; --warn: #b35a00;
  --ok-bg: #e3f5e8; --ok-fg: #11622b; --bad-bg: #fde6e2; --bad-fg: #b3240f; --soon-bg: #fff0e3; --soon-fg: #8a3d00;
  --flash-bg: #e3f5e8; --flash-fg: #11622b; --flash-bad-bg: #fde6e2; --flash-bad-fg: #b3240f;
  --bar: #f4a468; --bar-today: #ec6f0e; --bar-fut: #fbe3cf; --grid: #ececee; --weekend: #d2331b;
  --i-orange: #fff0e3; --i-orange-fg: #d2600a; --i-blue: #e8f0fe; --i-blue-fg: #1a5fd6; --i-violet: #f0eafe; --i-violet-fg: #6b3fd6;
  --i-red: #fde6e2; --i-red-fg: #d2331b; --i-green: #e3f5e8; --i-green-fg: #1a8a3c; --i-teal: #e0f4f4; --i-teal-fg: #0f7f7f; --i-grey: #eeeef0; --i-grey-fg: #55535a;
  --tabbar: rgba(255, 255, 255, .96); --shadow: 0 12px 32px rgba(0, 0, 0, .14);
  --r-xl: 26px; --r-l: 18px; --r-m: 14px;
}
/* ---- тёмная тема: выбрана вручную */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #161618; --card: #232326; --ink: #f5f5f2; --text: #e9e9e6; --muted: #a3a3a8; --line: #303034; --fill: #2f2f33; --hover: #38383d;
  --btn: #ec6f0e; --btn-press: #ff8226; --btn-fg: #161618; --link: #ff9a4d; --solid: #ec6f0e; --on-solid: #ffffff;
  --field: #2f2f33; --chip: #2f2f33; --good: #7be3a0; --bad: #ff8a7e; --warn: #ffb37a;
  --ok-bg: rgba(76, 210, 122, .16); --ok-fg: #7be3a0; --bad-bg: rgba(255, 92, 77, .18); --bad-fg: #ff8a7e; --soon-bg: rgba(236, 111, 14, .18); --soon-fg: #ffb37a;
  --flash-bg: rgba(76, 210, 122, .14); --flash-fg: #a9e9bf; --flash-bad-bg: rgba(255, 92, 77, .16); --flash-bad-fg: #ff8d84;
  --bar: #c45a0b; --bar-today: #ff8226; --bar-fut: rgba(236, 111, 14, .22); --grid: #34343a; --weekend: #ff8a7e;
  --i-orange: rgba(236, 111, 14, .18); --i-orange-fg: #ff9a4d; --i-blue: rgba(90, 150, 255, .16); --i-blue-fg: #8db4ff; --i-violet: rgba(150, 110, 255, .18); --i-violet-fg: #b9a2ff;
  --i-red: rgba(255, 92, 77, .18); --i-red-fg: #ff8a7e; --i-green: rgba(76, 210, 122, .16); --i-green-fg: #7be3a0; --i-teal: rgba(40, 200, 200, .15); --i-teal-fg: #6fdcdc; --i-grey: #34343a; --i-grey-fg: #c9c9ce;
  --tabbar: rgba(22, 22, 24, .96); --shadow: 0 12px 32px rgba(0, 0, 0, .55);
}
/* ---- «как в телефоне»: тёмная, если тёмная включена в телефоне */
@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] {
    color-scheme: light dark;
    --bg: #161618; --card: #232326; --ink: #f5f5f2; --text: #e9e9e6; --muted: #a3a3a8; --line: #303034; --fill: #2f2f33; --hover: #38383d;
    --btn: #ec6f0e; --btn-press: #ff8226; --btn-fg: #161618; --link: #ff9a4d; --solid: #ec6f0e; --on-solid: #ffffff;
    --field: #2f2f33; --chip: #2f2f33; --good: #7be3a0; --bad: #ff8a7e; --warn: #ffb37a;
    --ok-bg: rgba(76, 210, 122, .16); --ok-fg: #7be3a0; --bad-bg: rgba(255, 92, 77, .18); --bad-fg: #ff8a7e; --soon-bg: rgba(236, 111, 14, .18); --soon-fg: #ffb37a;
    --flash-bg: rgba(76, 210, 122, .14); --flash-fg: #a9e9bf; --flash-bad-bg: rgba(255, 92, 77, .16); --flash-bad-fg: #ff8d84;
    --bar: #c45a0b; --bar-today: #ff8226; --bar-fut: rgba(236, 111, 14, .22); --grid: #34343a; --weekend: #ff8a7e;
    --i-orange: rgba(236, 111, 14, .18); --i-orange-fg: #ff9a4d; --i-blue: rgba(90, 150, 255, .16); --i-blue-fg: #8db4ff; --i-violet: rgba(150, 110, 255, .18); --i-violet-fg: #b9a2ff;
    --i-red: rgba(255, 92, 77, .18); --i-red-fg: #ff8a7e; --i-green: rgba(76, 210, 122, .16); --i-green-fg: #7be3a0; --i-teal: rgba(40, 200, 200, .15); --i-teal-fg: #6fdcdc; --i-grey: #34343a; --i-grey-fg: #c9c9ce;
    --tabbar: rgba(22, 22, 24, .96); --shadow: 0 12px 32px rgba(0, 0, 0, .55);
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--bg); }
body { margin: 0; background: var(--bg); color: var(--text); font: 500 15px/1.45 "Onest", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; }
a { color: var(--link); text-decoration: none; font-weight: 600; }
b, strong { font-weight: 700; }
::selection { background: rgba(236, 111, 14, .28); }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* ---- шапка: логотип, поиск, кто вошёл */
header { background: var(--card); color: var(--ink); display: flex; align-items: center; gap: 20px; padding: calc(10px + env(safe-area-inset-top)) 24px 10px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 18px; color: var(--ink); flex: 0 0 auto; }
.brand img { width: 40px; height: 40px; display: block; border-radius: 50%; }
.brand b { color: var(--ink); font-weight: 800; }
.brand.big { font-size: 24px; justify-content: center; margin-bottom: 20px; gap: 14px; } .brand.big b { color: var(--brand); } .brand.big img { width: 64px; height: 64px; }
form.ysearch { flex: 1; max-width: 640px; display: flex; align-items: center; gap: 6px; background: var(--fill); border: 2px solid var(--brand); border-radius: var(--r-m); padding: 3px 3px 3px 14px; margin: 0; }
form.ysearch input { background: transparent; border: 0; padding: 7px 0; font-size: 15px; }
form.ysearch input:focus { background: transparent; }
form.ysearch button { padding: 8px 16px; border-radius: 11px; }
header .who { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--muted); white-space: nowrap; font-weight: 600; min-width: 0; margin-left: auto; }
header .who a.me { color: var(--muted); font-weight: 600; }
header .who form { margin: 0; } header .who button.link { background: var(--fill); color: var(--ink); padding: 8px 14px; border-radius: 12px; font-size: 14px; font-weight: 600; }
header .who button.link:hover { background: var(--hover); text-decoration: none; }

/* ---- меню: серые пилюли, активная — тёмная */
nav { background: var(--card); display: flex; flex-wrap: wrap; gap: 6px; padding: 2px 24px 14px; position: sticky; top: 0; z-index: 5; }
nav > a, nav summary { background: var(--fill); color: var(--ink); padding: 9px 16px; border-radius: 12px; white-space: nowrap; font-weight: 600; font-size: 15px; }
nav > a:hover, nav summary:hover { background: var(--hover); }
nav > a.on, nav summary.on { background: var(--solid); color: var(--on-solid); }
nav details.dd { position: relative; } nav summary { cursor: pointer; list-style: none; user-select: none; } nav summary::-webkit-details-marker { display: none; }
nav summary::after { content: " ▾"; opacity: .55; } nav details[open] > summary:not(.on) { background: var(--hover); }
nav .ddm { position: absolute; top: calc(100% + 6px); left: 0; min-width: 230px; background: var(--card); border-radius: var(--r-l); padding: 6px;
  box-shadow: var(--shadow); display: flex; flex-direction: column; z-index: 20; }
nav .ddm a { color: var(--ink); padding: 11px 14px; border-radius: 12px; font-weight: 600; font-size: 15px; } nav .ddm a:hover { background: var(--fill); }
nav .ddm a.on { background: var(--solid); color: var(--on-solid); }
nav details.dd:last-child .ddm { left: auto; right: 0; }
/* нижняя панель — только на телефоне */
.ytab { display: none; }

main { max-width: 1180px; margin: 0 auto; padding: 22px 24px calc(48px + env(safe-area-inset-bottom)); }
h1 { font-size: 32px; font-weight: 800; letter-spacing: -.02em; margin: 6px 0 18px; color: var(--ink); line-height: 1.15; overflow-wrap: anywhere; }
h2 { font-size: 19px; margin: 0 0 14px; font-weight: 700; letter-spacing: -.01em; color: var(--ink); }
section { background: var(--card); border-radius: var(--r-xl); padding: 20px 22px; margin: 14px 0; overflow-x: auto; }
section > h2:first-child, section > .row:first-child { margin: 0 0 14px; }
section > .row:first-child h2 { margin: 0; } section > .row:first-child a { font-size: 14px; }
section.warn { box-shadow: inset 0 0 0 2px var(--brand); }
.row { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.row > h1, .row > h2 { margin-bottom: 0; }
.pager { display: flex; gap: 6px; flex-wrap: wrap; }
.pager a, .acts a { background: var(--fill); border-radius: var(--r-m); padding: 10px 16px; color: var(--ink); font-weight: 600; font-size: 14px; }
.pager a:hover, .acts a:hover { background: var(--hover); }
.acts { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; } .acts a b { font-weight: 800; }
/* главное действие — оранжевое, редкое — тихое с рамкой */
.acts a.go, .pager a.go { background: var(--btn); color: var(--btn-fg); } .acts a.go:hover, .pager a.go:hover { background: var(--btn-press); }
.acts a.quiet { background: transparent; box-shadow: inset 0 0 0 1.5px var(--line); }

/* ---- плитки: иконка у подписи, крупная цифра; главная плитка — большая оранжевая */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.tiles.dash { grid-template-columns: repeat(4, 1fr); }
.tile { background: var(--card); border-radius: var(--r-xl); padding: 18px 20px 20px; min-width: 0; position: relative; }
.tile .th { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.tile .lbl { color: var(--muted); font-size: 14px; font-weight: 500; }
.tile .val { font-size: 30px; font-weight: 800; letter-spacing: -.02em; margin: 6px 0 4px; font-variant-numeric: tabular-nums; color: var(--ink); line-height: 1.15; }
.tile .sub { color: var(--muted); font-size: 13px; overflow-wrap: anywhere; }
.tile.bad .val { color: var(--bad); } .tile.good .val { color: var(--good); }
.tile .val a { color: inherit; font-weight: inherit; }
.tile.accent { box-shadow: inset 0 0 0 2px var(--brand); }
.tile.hero { grid-column: span 2; background: var(--brand); box-shadow: none; }
.tile.hero .lbl, .tile.hero .sub { color: rgba(255, 255, 255, .9); } .tile.hero .val { color: #fff; font-size: 46px; }
.tile.hero .ico { background: rgba(255, 255, 255, .22); color: #fff; }
.tprog { margin-top: 14px; height: 10px; border-radius: 6px; background: rgba(255, 255, 255, .28); overflow: hidden; }
.tprog i { display: block; height: 100%; border-radius: 6px; background: #fff; }
.tprogt { margin-top: 7px; font-size: 13px; font-weight: 600; color: rgba(255, 255, 255, .95); }
.ico { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 14px; flex: 0 0 auto; }
.ico svg { width: 58%; height: 58%; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ico.orange { background: var(--i-orange); color: var(--i-orange-fg); } .ico.blue { background: var(--i-blue); color: var(--i-blue-fg); }
.ico.violet { background: var(--i-violet); color: var(--i-violet-fg); } .ico.red { background: var(--i-red); color: var(--i-red-fg); }
.ico.green { background: var(--i-green); color: var(--i-green-fg); } .ico.teal { background: var(--i-teal); color: var(--i-teal-fg); }
.ico.grey { background: var(--i-grey); color: var(--i-grey-fg); }

/* ---- «Деньги по дням»: сводка, шкала в рублях, средний день, прогноз на остаток месяца */
.mstats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 0 0 18px; }
.mstat { background: var(--fill); border-radius: 16px; padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mstat span { font-size: 13px; color: var(--muted); font-weight: 500; } .mstat b { font-size: 20px; font-weight: 800; color: var(--ink); letter-spacing: -.01em; }
.mstat i { font-style: normal; font-size: 12px; color: var(--muted); } .mstat b.up { color: var(--good); } .mstat b.down { color: var(--bad); }
.mchart { position: relative; padding-left: 56px; }
.mplot { position: relative; height: 230px; }
.mplot svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; }
.mplot rect.past { fill: var(--bar); } .mplot rect.today { fill: var(--bar-today); } .mplot rect.fut { fill: var(--bar-fut); stroke: var(--bar-today); stroke-dasharray: 3 3; stroke-opacity: .55; }
.mplot line.g { stroke: var(--grid); } .mplot line.avg { stroke: var(--ink); stroke-dasharray: 5 4; opacity: .55; }
.mylab { position: absolute; left: -56px; width: 48px; text-align: right; font-size: 11px; color: var(--muted); transform: translateY(-50%); font-variant-numeric: tabular-nums; }
.mavg { position: absolute; right: 0; transform: translateY(-120%); font-size: 12px; font-weight: 600; color: var(--ink); background: var(--card); padding: 0 4px; border-radius: 4px; }
.mtop { position: absolute; transform: translate(-50%, -125%); font-size: 12px; font-weight: 700; color: var(--ink); white-space: nowrap; }
.mtop.today { color: var(--bar-today); }
.barlab { position: relative; height: 18px; margin-top: 6px; }
.barlab span { position: absolute; top: 0; transform: translateX(-50%); font-size: 11px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.barlab span.wk { color: var(--weekend); } .barlab span.td { color: var(--bar-today); font-weight: 800; }
.mlegend { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 12px; font-size: 12px; color: var(--muted); }
.mlegend span { display: inline-flex; align-items: center; gap: 6px; } .mlegend i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; }
.mlegend i.past { background: var(--bar); } .mlegend i.today { background: var(--bar-today); } .mlegend i.fut { background: var(--bar-fut); outline: 1px dashed var(--bar-today); }
.mlegend i.wk { background: var(--weekend); width: 8px; height: 8px; border-radius: 50%; }

/* ---- строки списков и чипы */
.list { display: flex; flex-direction: column; }
.item { display: grid; grid-template-columns: 1fr auto; gap: 3px 10px; align-items: start; padding: 13px 2px; border-top: 1px solid var(--line); color: var(--text); font-weight: 500; }
.item:first-child { border-top: 0; }
.item > div:first-child { display: contents; }
.item b { display: block; font-weight: 700; color: var(--ink); font-size: 15.5px; } .item span { color: var(--muted); font-size: 13px; overflow-wrap: anywhere; grid-column: 1 / -1; } .item small { color: var(--muted); font-weight: 500; }
.item a.who { color: var(--ink); min-width: 0; overflow-wrap: anywhere; } .item > .chip { grid-column: 2; grid-row: 1; white-space: normal; text-align: right; max-width: 46vw; } .item .cts { grid-column: 1 / -1; margin-top: 5px; }
.chip { border-radius: 10px; padding: 5px 10px; font-size: 13px; font-weight: 600; white-space: nowrap; background: var(--chip); color: var(--ink); }
.chip.ok { background: var(--ok-bg); color: var(--ok-fg); }
.chip.today, .chip.soon { background: var(--soon-bg); color: var(--soon-fg); }
.chip.overdue { background: var(--bad-bg); color: var(--bad-fg); }
.tabs { display: flex; gap: 6px; overflow-x: auto; margin-bottom: 16px; scrollbar-width: none; } .tabs::-webkit-scrollbar { display: none; }
.tabs a { padding: 9px 14px; color: var(--ink); background: var(--fill); border-radius: 12px; white-space: nowrap; font-weight: 600; font-size: 14px; }
.tabs a:hover { background: var(--hover); }
.tabs a.on { background: var(--solid); color: var(--on-solid); }
.av { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: var(--i-blue); color: var(--i-blue-fg);
  font-size: 12px; font-weight: 700; margin-right: 8px; vertical-align: middle; flex: 0 0 auto; }

/* ---- таблицы и факты */
table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
th { text-align: left; color: var(--muted); font-size: 13px; padding: 6px 8px; font-weight: 500; }
td { padding: 10px 8px; border-top: 1px solid var(--line); vertical-align: top; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
td.neg { color: var(--bad); font-weight: 700; } tr.off td { opacity: .45; } table.rt td.t a { font-weight: 700; }
.facts { display: grid; grid-template-columns: max-content 1fr; gap: 9px 20px; margin: 0; background: var(--card); border-radius: var(--r-xl); padding: 18px 22px; }
.facts dt { color: var(--muted); font-size: 14px; } .facts dd { margin: 0; overflow-wrap: anywhere; font-weight: 600; color: var(--ink); }

/* ---- шапка карточки байка: рисунок, кто ездит, связь, заряд, мини-карта */
.bhero { display: grid; grid-template-columns: 140px 1fr 230px; gap: 22px; align-items: center; background: var(--card); border-radius: var(--r-xl); padding: 18px 22px; margin: 0 0 14px; }
.bhero.nomap { grid-template-columns: 140px 1fr; }
.bhero .bart { width: 140px; height: 104px; border-radius: 22px; background: var(--i-orange); display: flex; align-items: center; justify-content: center; }
.bhero .bart svg { width: 112px; height: 82px; fill: none; stroke: var(--brand); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.bhero h3 { margin: 0 0 4px; font-size: 21px; font-weight: 800; color: var(--ink); letter-spacing: -.01em; }
.bpills { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 12px; }
.bpill { display: inline-flex; align-items: center; gap: 6px; background: var(--fill); border-radius: 10px; padding: 5px 10px; font-size: 13px; font-weight: 600; color: var(--ink); }
.bpill i { width: 8px; height: 8px; border-radius: 50%; background: var(--good); } .bpill i.off { background: var(--bad); }
.bbat { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; color: var(--ink); flex-wrap: wrap; }
.bbat .cell { position: relative; width: 180px; height: 16px; border-radius: 6px; box-shadow: inset 0 0 0 2px var(--line); padding: 3px; }
.bbat .cell::after { content: ""; position: absolute; right: -5px; top: 4px; width: 3px; height: 8px; border-radius: 0 2px 2px 0; background: var(--line); }
.bbat .cell i { display: block; height: 100%; border-radius: 3px; }
.bbat small { color: var(--muted); font-weight: 500; font-size: 12px; }
.bmap { position: relative; width: 230px; height: 136px; border-radius: 20px; overflow: hidden; background: var(--fill); display: block; }
.bmap .tiles9 { position: absolute; width: 768px; height: 768px; }
.bmap .tiles9 img { position: absolute; width: 256px; height: 256px; }
:root[data-theme="dark"] .bmap .tiles9 { filter: invert(.9) hue-rotate(180deg) brightness(.85) contrast(.9); }
.bmap .pin { position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; background: var(--brand); border: 4px solid #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, .35); }

/* ---- формы и кнопки */
form.inline { display: flex; gap: 8px; margin: 0 0 12px; }
form.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; align-items: end; }
form.grid label { display: block; color: var(--muted); font-size: 13px; font-weight: 500; } form.grid label input, form.grid label select { margin-top: 5px; }
form.wrap { flex-wrap: wrap; } form.wrap input:not([type]) { flex: 1 1 180px; }
input, select { width: 100%; padding: 11px 14px; border: 2px solid var(--field-line); border-radius: var(--r-m); background: var(--field); color: var(--ink); font: inherit; min-width: 0; }
input:focus, select:focus { outline: none; border-color: var(--brand); }
input::placeholder { color: var(--muted); opacity: .9; }
button { padding: 11px 18px; border: 0; border-radius: var(--r-m); background: var(--btn); color: var(--btn-fg); font: inherit; font-weight: 600; font-size: 15px; cursor: pointer; white-space: nowrap; }
button:hover { background: var(--btn-press); } button:disabled { opacity: .55; cursor: default; }
button.ghost { background: var(--fill); color: var(--ink); } button.ghost:hover { background: var(--hover); }
button.link { background: none; color: var(--link); padding: 0; font-weight: 600; font-size: 14px; } button.link:hover { background: none; text-decoration: underline; }
/* длинная подпись переносится, а галочка не сжимается */
label.chk { display: flex; align-items: center; gap: 7px; font-weight: 600; color: var(--ink); min-width: 0; } label.chk input, .chkrow input[type=radio] { width: auto; flex: 0 0 auto; accent-color: var(--brand); }
/* подсказка под полем */
.fhint { display: block; color: var(--muted); font-size: 12.5px; font-weight: 500; margin-top: 4px; line-height: 1.4; }
input[type=file] { padding: 7px 8px; color: var(--muted); font-size: 13px; }
input[type=file]::file-selector-button { margin-right: 10px; padding: 8px 14px; border: 0; border-radius: 10px; background: var(--card); color: var(--ink); font: inherit; font-weight: 600; cursor: pointer; }
.boxes { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.muted, .hint { color: var(--muted); } .hint { font-size: 13px; margin: 12px 0 0; line-height: 1.5; }
details.hintfold { margin: 12px 0 0; } details.hintfold > summary { cursor: pointer; color: var(--muted); font-size: 13px; font-weight: 600; list-style: none; width: fit-content; }
details.hintfold > summary::-webkit-details-marker { display: none; } details.hintfold > summary::after { content: " ▾"; } details[open].hintfold > summary::after { content: " ▴"; }
details.hintfold > .hint { margin-top: 6px; }
p.flash { background: var(--flash-bg); color: var(--flash-fg); border-radius: var(--r-l); padding: 12px 16px; font-weight: 600; }
p.flash.bad { background: var(--flash-bad-bg); color: var(--flash-bad-fg); } td i.chip, .task i.chip { font-style: normal; font-size: 11.5px; padding: 2px 8px; }

/* ---- задачи, осмотр, фото */
.task { padding: 13px 2px; border-top: 1px solid var(--line); } h2 + .task, .row + .task { border-top: 0; }
.task b { display: block; overflow-wrap: anywhere; color: var(--ink); } .task span { color: var(--muted); font-size: 13px; display: block; }
.task form.inline { margin: 8px 0 0; } .task.done b { color: var(--muted); text-decoration: line-through; font-weight: 500; }
.task span.by { color: var(--good); font-size: 13.5px; font-weight: 700; margin: 2px 0; }
.task span.tk { color: var(--warn); font-weight: 700; } .task span.cm { color: var(--ink); background: var(--fill); border-radius: 10px; padding: 7px 10px; margin-top: 5px; }
.task.urgent { box-shadow: inset 3px 0 0 var(--bad); padding-left: 12px; } .task i.chip { vertical-align: 1px; }
.task button { padding: 9px 14px; font-size: 13px; } .task button.ghost { padding: 9px 12px; } .task button.link { padding: 0; font-size: 13px; }
.chkrow { display: grid; grid-template-columns: 1fr auto auto; gap: 6px 14px; align-items: center; padding: 11px 2px; border-top: 1px solid var(--line); }
.chkrow:first-child { border-top: 0; } .chkrow > input { grid-column: 1 / -1; } .chkrow label { display: flex; align-items: center; gap: 5px; }
.photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; } .photos figure { margin: 0; }
.photos img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 14px; display: block; background: var(--line); }
.photos figcaption { font-size: 13px; margin-top: 4px; overflow-wrap: anywhere; } .photos figcaption span { display: block; color: var(--muted); }

/* ---- связь с клиентом */
.cts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; } dd > .cts { margin: 7px 0 0; } td > .cts { display: inline-flex; margin: 0 0 0 4px; vertical-align: middle; }
a.ct, span.ct { display: inline-block; border-radius: 10px; padding: 5px 11px; font-size: 13px; font-weight: 600; color: var(--ink); white-space: nowrap; background: var(--fill); font-variant-numeric: tabular-nums; }
a.ct.msg { background: var(--soon-bg); color: var(--link); } span.ct.off { color: var(--muted); font-weight: 500; white-space: normal; background: transparent; box-shadow: inset 0 0 0 1px var(--line); }

details.fold, details.pick { background: var(--card); border-radius: var(--r-xl); margin: 14px 0; overflow-x: auto; }
details.fold > summary, details.pick > summary { cursor: pointer; padding: 16px 22px; font-weight: 700; font-size: 16px; list-style: none; user-select: none; color: var(--ink); }
details.fold > summary::-webkit-details-marker, details.pick > summary::-webkit-details-marker { display: none; }
details.fold > summary::after, details.pick > summary::after { content: "▾"; float: right; color: var(--muted); } details[open].fold > summary::after, details[open].pick > summary::after { content: "▴"; }
details.fold > :not(summary), details.pick > :not(summary) { margin: 0 22px 18px; } details.fold > .facts { padding: 0; }
details[open].pick { box-shadow: inset 0 0 0 2px var(--brand); }
details.pick form:not(.grid) { display: flex; flex-direction: column; gap: 8px; }

/* ---- переключатель темы */
.themes { display: flex; gap: 8px; flex-wrap: wrap; } .themes form { margin: 0; }
.themes button { background: var(--fill); color: var(--ink); } .themes button.on { background: var(--solid); color: var(--on-solid); }
/* меню целиком для телефона */
.menu a { display: flex; align-items: center; gap: 12px; padding: 14px 4px; border-top: 1px solid var(--line); color: var(--ink); font-size: 16px; font-weight: 600; }
.menu a:first-child { border-top: 0; } .menu h2 { margin-top: 6px; }

video.cam { width: 100%; max-height: 62vh; background: #000; border-radius: var(--r-l); object-fit: cover; display: block; }
select.tall { height: auto; padding: 4px; } select.tall option { padding: 8px 6px; }
.login { max-width: 380px; margin: 12vh auto 0; background: var(--card); border-radius: var(--r-xl); padding: 30px 24px; }
.login label { display: block; font-weight: 600; margin-bottom: 14px; color: var(--ink); } .login input { margin-top: 6px; font-size: 17px; }
.login button { width: 100%; padding: 14px; font-size: 16px; }
#map { height: min(70vh, 640px); border-radius: var(--r-xl); z-index: 1; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; margin: 0 0 10px; color: var(--muted); font-size: 13px; }
.dot { display: inline-block; width: 11px; height: 11px; border-radius: 50%; margin-right: 6px; vertical-align: -1px; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--line); }
.dot.rented { background: #3f8a00; } .dot.free { background: #6a6a6a; } .dot.locked { background: #d92d20; }
/* быстрый наряд: один экран, крупные кнопки под палец */
form.qo { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); } form.qo .wide { grid-column: 1 / -1; }
.qlbl { display: block; color: var(--muted); font-size: 13px; font-weight: 500; margin-bottom: 5px; }
.qp { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; } .qp select { flex: 1; min-width: 0; } .qp .psearch { flex: 1 0 100%; }
/* поиск запчасти над списком — с лупой, чтобы было видно, что сюда можно писать */
input.psearch { padding-left: 36px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23888' stroke-width='2'%3E%3Ccircle cx='7' cy='7' r='5'/%3E%3Cpath d='M11 11l4 4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: 12px center; }
.qty { display: flex; flex: 0 0 auto; } .qty input { width: 54px; text-align: center; border-radius: 0; padding: 11px 4px; font-weight: 700; }
.qty button { background: var(--fill); color: var(--ink); padding: 0 15px; font-size: 18px; border-radius: var(--r-m) 0 0 var(--r-m); }
.qty button:last-child { border-radius: 0 var(--r-m) var(--r-m) 0; } .qty button:hover { background: var(--hover); }
.qsum { margin: 2px 0; font-size: 14px; color: var(--text); line-height: 1.5; } .qsum b { color: var(--ink); font-weight: 800; }
.qgo button { width: 100%; padding: 15px; font-size: 16px; }
/* новая запчасть одним шагом */
form.padd .wide { grid-column: 1 / -1; } form.padd { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.like { display: flex; flex-direction: column; gap: 4px; font-size: 13px; } .like:empty { display: none; }
.like b { color: var(--warn); } .like a { font-weight: 700; padding: 6px 10px; box-shadow: inset 0 0 0 1.5px var(--brand); border-radius: 10px; } .like span { color: var(--muted); font-size: 12px; }
/* склад картинками */
.pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.pcard { display: flex; flex-direction: column; gap: 3px; border-radius: var(--r-l); padding: 8px; color: var(--ink); background: var(--fill); min-width: 0; }
.pcard img, .pcard .nopic { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 12px; background: var(--card); }
.pcard .nopic { display: flex; align-items: center; justify-content: center; text-align: center; color: var(--muted); font-size: 12px; font-weight: 500; }
.pcard b { font-size: 13.5px; line-height: 1.25; overflow-wrap: anywhere; } .pcard span { font-size: 12.5px; color: var(--muted); font-weight: 600; } .pcard span.neg { color: var(--bad); }
.pthumb { display: inline-block; vertical-align: middle; margin-right: 8px; } .pthumb img { width: 40px; height: 40px; object-fit: cover; border-radius: 9px; display: block; }
/* маршрут байка */
.trk-who { margin: -6px 0 10px; font-weight: 600; color: var(--ink); } .trk-day { margin: 10px 0; flex-wrap: wrap; } .trk-day input { flex: 0 1 190px; }
.trk-bar { display: flex; align-items: center; gap: 10px; margin: 10px 0 2px; color: var(--muted); font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.trk-bar input[type=range] { flex: 1; padding: 0; border: 0; background: none; accent-color: var(--brand); height: 28px; }
.trk-now { margin: 0 0 12px; text-align: center; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.moon { width: 34px; height: 34px; border-radius: 50%; background: #171717; color: #ffd27a; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.35);
  display: flex; align-items: center; justify-content: center; font-size: 15px; line-height: 1; } .moon b { font-size: 11px; color: #fff; margin-left: 1px; }
.leaflet-popup-content { font: 500 14px/1.4 "Onest", system-ui, sans-serif; color: #171717; } .leaflet-popup-content a.ct { background: #f2f3f5; color: #171717; }
.err { color: var(--bad); font-weight: 700; } .ok { color: var(--good); font-weight: 700; }

@media (max-width: 900px) {
  .tiles.dash { grid-template-columns: repeat(2, 1fr); }
  .bhero { grid-template-columns: 110px 1fr; } .bhero .bart { width: 110px; height: 90px; } .bhero .bmap { grid-column: 1 / -1; width: 100%; }
}
@media (max-width: 640px) {
  /* длинная надпись на кнопке переносится, а не вылезает за край экрана */
  button { white-space: normal; max-width: 100%; line-height: 1.25; } button.link { text-align: left; }
  /* строка таблицы на телефоне — карточка */
  table.rt thead { display: none; } table.rt, table.rt tbody { display: block; }
  table.rt tr { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; padding: 12px 0; border-top: 1px solid var(--line); } table.rt tr:first-child { border-top: 0; padding-top: 0; }
  table.rt td { display: flex; flex-direction: column; border: 0; padding: 0; text-align: left; white-space: normal; overflow-wrap: anywhere; min-width: 0; font-weight: 600; color: var(--ink); }
  table.rt td::before { content: attr(data-l); color: var(--muted); font-size: 12px; font-weight: 500; }
  table.rt td.t { grid-column: 1 / -1; display: block; font-weight: 700; font-size: 15.5px; } table.rt td.t::before, table.rt td[data-l=""]::before { content: none; }
  table.rt td.t .chip { margin-left: 6px; }
  table.rt td[data-l=""] { grid-column: 1 / -1; flex-direction: row; gap: 14px; align-items: center; } table.rt td:empty { display: none; }
  table.rt tr.empty { display: block; } table.rt tr.empty td { display: block; font-weight: 500; } table.rt td input { max-width: 150px; margin-top: 2px; }
}
@media (max-width: 560px) {
  body { font-size: 15px; } h1 { font-size: 26px; } h2 { font-size: 18px; }
  .facts { grid-template-columns: 1fr; gap: 1px; padding: 16px; } .facts dd { margin-bottom: 10px; }
  header { padding: calc(8px + env(safe-area-inset-top)) 14px 8px; gap: 10px; } .brand span { display: none; } .brand img { width: 38px; height: 38px; }
  header .who { display: none; }
  form.ysearch { padding: 2px 2px 2px 12px; } form.ysearch button { display: none; } form.ysearch input { padding: 9px 0; }
  nav { display: none; }
  .ytab { position: fixed; left: 0; right: 0; bottom: 0; background: var(--tabbar); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 7px 4px calc(9px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); z-index: 50; }
  .ytab a { display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 11px; font-weight: 600; color: var(--muted); }
  .ytab a svg { width: 34px; height: 30px; padding: 3px 5px; border-radius: 10px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .ytab a.on { color: var(--ink); } .ytab a.on svg { background: var(--brand); stroke: #fff; }
  main { padding: 14px 12px calc(96px + env(safe-area-inset-bottom)); } section { padding: 16px; border-radius: 22px; }
  .tiles, .tiles.dash { grid-template-columns: 1fr 1fr; gap: 10px; }
  .tile { padding: 14px 15px; border-radius: 22px; } .tile .val { font-size: 23px; } .tile .lbl { font-size: 13px; } .tile .sub { font-size: 12.5px; }
  .tile.hero .val { font-size: 36px; } .ico { width: 34px; height: 34px; border-radius: 12px; }
  .mstats { grid-template-columns: 1fr 1fr; } .mstat b { font-size: 17px; }
  .mchart { padding-left: 40px; } .mylab { left: -40px; width: 34px; } .mplot { height: 190px; }
  .barlab span:not(.d5):not(.td) { display: none; }
  .bhero { grid-template-columns: 76px 1fr; gap: 12px 14px; padding: 16px; } .bhero .bart { width: 76px; height: 76px; border-radius: 18px; } .bhero .bart svg { width: 60px; height: 46px; }
  .bhero h3 { font-size: 17px; } .bbat .cell { width: 140px; } .bhero .bmap { height: 130px; }
  form.inline { flex-wrap: wrap; } form.inline > input, form.inline > select { flex: 1 1 140px; }
  /* формы на телефоне — в одну колонку */
  form.grid, form.qo, form.padd { grid-template-columns: 1fr; }
  nav .ddm { position: fixed; left: 8px; right: 8px; top: auto; margin-top: 4px; }
}
@media (max-width: 640px) { .qgo { position: sticky; bottom: calc(84px + env(safe-area-inset-bottom)); z-index: 5; } .qgo button { box-shadow: 0 4px 14px rgba(0,0,0,.25); } }

/* селфи клиента: кружок у ФИО, по нажатию — фото в обычном размере поверх страницы */
.face { display: flex; align-items: center; gap: 14px; min-width: 0; } .face h1 { margin: 0; }
.selfie { position: relative; flex: 0 0 auto; width: 52px; height: 52px; border-radius: 50%; padding: 0; border: 0; overflow: hidden; cursor: zoom-in;
  background: var(--i-blue); color: var(--i-blue-fg); display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--line); }
.selfie img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.selfie > span { font-size: 17px; font-weight: 800; } .selfie.none { cursor: default; }
.selfiebox { padding: 0; border: 0; border-radius: 18px; background: var(--card); max-width: 94vw; max-height: 92vh; overflow: hidden; }
.selfiebox::backdrop { background: rgba(0, 0, 0, .72); }
.selfiebox img { display: block; max-width: min(94vw, 760px); max-height: 88vh; width: auto; height: auto; }
.selfiebox .x { position: absolute; top: 10px; right: 10px; width: 40px; height: 40px; border-radius: 50%; border: 0; padding: 0; font-size: 26px; line-height: 40px;
  background: rgba(0, 0, 0, .55); color: #fff; cursor: pointer; }
@media (max-width: 560px) { .selfie { width: 44px; height: 44px; } .selfie > span { font-size: 15px; } .face { gap: 10px; } }
/* дневной лист: четыре столбика, как в тетради; на телефоне — вкладки */
.dnav { display: flex; align-items: center; gap: 8px; } .dnav a, .dnav span { display: inline-flex; width: 40px; height: 40px; align-items: center; justify-content: center;
  border-radius: 12px; background: var(--fill); color: var(--ink); font-size: 22px; font-weight: 700; } .dnav span { visibility: hidden; } .dnav input { width: auto; }
.dtop { display: grid; grid-template-columns: 1fr auto; gap: 12px 24px; align-items: center; }
.dtotal { display: flex; flex-direction: column; gap: 2px; } .dtotal span, .dtotal small { color: var(--muted); font-size: 13px; font-weight: 500; } .dtotal b { font-size: 22px; color: var(--ink); }
.dcrewday { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; } .dcrewday b { font-size: 14px; }
.dgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; align-items: start; }
.dgrid .dcol { margin: 0; padding: 16px; display: flex; flex-direction: column; min-height: 220px; }
.dcol h2 { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 17px; } .dsum { font-size: 15px; color: var(--brand); white-space: nowrap; }
.drows { flex: 1; } .drow { display: grid; grid-template-columns: 1fr auto auto; gap: 2px 8px; align-items: baseline; padding: 8px 0; border-top: 1px solid var(--line); }
.drow:first-child { border-top: 0; } .drow > span { overflow-wrap: anywhere; font-weight: 600; color: var(--ink); } .drow small { color: var(--muted); font-weight: 500; }
.drow .dx { font-size: 20px; line-height: 1; padding: 0 4px; color: var(--muted); } .drow .dcrew { grid-column: 1 / -1; }
.dcrew summary { cursor: pointer; color: var(--muted); font-size: 12.5px; font-weight: 600; } .dcrew form { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: 6px; }
.dadd { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--line); }
.dadd > input[name="text"], .dadd > input[name="part"], .dadd > input[name="bike"], .dadd > details, .dadd > button, .dadd > label.chk { grid-column: 1 / -1; }
.dadd .dqty { max-width: 100%; } .dadd details { display: flex; flex-wrap: wrap; gap: 6px 12px; } .dadd details summary { cursor: pointer; color: var(--muted); font-size: 13px; font-weight: 600; }
.dtabs { display: none; }
@media (max-width: 1180px) { .dgrid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) {
  .dtop { grid-template-columns: 1fr; }
  .dtabs { display: flex; gap: 6px; overflow-x: auto; margin: 10px 0; } .dtabs button { flex: 0 0 auto; background: var(--fill); color: var(--ink); box-shadow: none; padding: 9px 14px; }
  .dtabs button.on { background: var(--ink); color: var(--card); }
  .dgrid { display: block; } .dgrid .dcol { display: none; } .dgrid .dcol.on { display: flex; }
}
/* GPS потерян: примерное место по сотовым вышкам — пунктирный круг на мини-карте */
.bmap .cellring { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: 50%; border: 2px dashed var(--brand);
  background: rgba(236, 111, 14, .16); box-sizing: border-box; }
.bmap .celldot { position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--brand); border: 2px solid #fff; }
/* заявки на подарок за отзывы: два скриншота рядом, по нажатию — во весь размер */
.shots { display: flex; gap: 12px; flex-wrap: wrap; margin: 6px 0 4px; }
.shot { width: 150px; height: 260px; border-radius: 14px; overflow: hidden; padding: 0; border: 0; background: var(--fill); cursor: zoom-in; }
.shot img { width: 100%; height: 100%; object-fit: cover; display: block; } .shot.none { display: flex; align-items: center; justify-content: center; text-align: center; padding: 12px; color: var(--muted); font-size: 13px; cursor: default; }
/* список аренд: справа плашка срока, под ней лицо клиента */
.item > .rside { grid-column: 2; grid-row: 1 / span 4; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; max-width: 46vw; }
.item > .rside .chip { white-space: normal; text-align: right; } .item:has(> .rside) > div:first-child > * { grid-column: 1; }
.item .rside .selfie { width: 46px; height: 46px; } .item .selfie > span { grid-column: auto; color: var(--i-blue-fg); font-size: 15px; font-weight: 800; }