/* 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, 0.96);
	--shadow: 0 12px 32px rgba(0, 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, 0.16);
	--ok-fg: #7be3a0;
	--bad-bg: rgba(255, 92, 77, 0.18);
	--bad-fg: #ff8a7e;
	--soon-bg: rgba(236, 111, 14, 0.18);
	--soon-fg: #ffb37a;
	--flash-bg: rgba(76, 210, 122, 0.14);
	--flash-fg: #a9e9bf;
	--flash-bad-bg: rgba(255, 92, 77, 0.16);
	--flash-bad-fg: #ff8d84;
	--bar: #c45a0b;
	--bar-today: #ff8226;
	--bar-fut: rgba(236, 111, 14, 0.22);
	--grid: #34343a;
	--weekend: #ff8a7e;
	--i-orange: rgba(236, 111, 14, 0.18);
	--i-orange-fg: #ff9a4d;
	--i-blue: rgba(90, 150, 255, 0.16);
	--i-blue-fg: #8db4ff;
	--i-violet: rgba(150, 110, 255, 0.18);
	--i-violet-fg: #b9a2ff;
	--i-red: rgba(255, 92, 77, 0.18);
	--i-red-fg: #ff8a7e;
	--i-green: rgba(76, 210, 122, 0.16);
	--i-green-fg: #7be3a0;
	--i-teal: rgba(40, 200, 200, 0.15);
	--i-teal-fg: #6fdcdc;
	--i-grey: #34343a;
	--i-grey-fg: #c9c9ce;
	--tabbar: rgba(22, 22, 24, 0.96);
	--shadow: 0 12px 32px rgba(0, 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, 0.16);
		--ok-fg: #7be3a0;
		--bad-bg: rgba(255, 92, 77, 0.18);
		--bad-fg: #ff8a7e;
		--soon-bg: rgba(236, 111, 14, 0.18);
		--soon-fg: #ffb37a;
		--flash-bg: rgba(76, 210, 122, 0.14);
		--flash-fg: #a9e9bf;
		--flash-bad-bg: rgba(255, 92, 77, 0.16);
		--flash-bad-fg: #ff8d84;
		--bar: #c45a0b;
		--bar-today: #ff8226;
		--bar-fut: rgba(236, 111, 14, 0.22);
		--grid: #34343a;
		--weekend: #ff8a7e;
		--i-orange: rgba(236, 111, 14, 0.18);
		--i-orange-fg: #ff9a4d;
		--i-blue: rgba(90, 150, 255, 0.16);
		--i-blue-fg: #8db4ff;
		--i-violet: rgba(150, 110, 255, 0.18);
		--i-violet-fg: #b9a2ff;
		--i-red: rgba(255, 92, 77, 0.18);
		--i-red-fg: #ff8a7e;
		--i-green: rgba(76, 210, 122, 0.16);
		--i-green-fg: #7be3a0;
		--i-teal: rgba(40, 200, 200, 0.15);
		--i-teal-fg: #6fdcdc;
		--i-grey: #34343a;
		--i-grey-fg: #c9c9ce;
		--tabbar: rgba(22, 22, 24, 0.96);
		--shadow: 0 12px 32px rgba(0, 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, 0.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: 0.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: -0.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: -0.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: -0.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 .tile-main {
	display: inline;
	text-decoration: none;
}
.tile-main::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: var(--r-xl);
}
.tile-arrow {
	display: inline-block;
	vertical-align: middle;
	margin-left: 6px;
	width: 14px;
	height: 14px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.tile:has(.tile-main):hover,
.tile:has(.tile-main:focus-visible) {
	outline: 2px solid var(--link);
	outline-offset: 2px;
}
.tile .sub a,
.tile .tprogt a {
	display: inline-block;
	max-width: 100%;
	position: relative;
	z-index: 2;
	color: inherit;
	text-decoration: none;
}
.dash-back a {
	display: inline-block;
	padding: 10px 0;
}
@media (max-width: 360px) {
	.tiles.dash:has(.tile-main) {
		grid-template-columns: 1fr;
	}
	.tiles.dash .tile.hero {
		grid-column: auto;
	}
}
.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: #381b05;
}
.tile.hero .val {
	color: #fff;
	font-size: 46px;
}
.tile.hero .ico {
	background: rgba(255, 255, 255, 0.22);
	color: #fff;
}
.tprog {
	margin-top: 14px;
	height: 10px;
	border-radius: 6px;
	background: rgba(255, 255, 255, 0.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: #381b05;
}
.bbat.stale {
	color: var(--muted);
}
.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: -0.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: 76px;
}
section:has(.mchart) {
	overflow: visible;
}
.mplot {
	position: relative;
	height: 230px;
}
.mday-link {
	position: absolute;
	top: 0;
	height: calc(100% + 24px);
	z-index: 2;
	border-radius: 3px;
	cursor: pointer;
}
.mday-link::before {
	content: "";
	position: absolute;
	left: 16%;
	width: 68%;
	bottom: 24px;
	height: calc((100% - 24px) * var(--bar-height));
	box-sizing: border-box;
	pointer-events: none;
}
.mday-link:hover::before, .mday-link:focus-visible::before {
	border: none;
}
.mday-link::before { border-radius: .5vw .5vw 0 0; }
.mday-tip { display: none; }
.mday-link.selected::before { border: none; }
.mday-panel {
    display: grid;
    grid-template-columns: minmax(180px, .9fr) minmax(250px, 1.5fr) auto;
    column-gap: 28px;
    row-gap: 8px;
    margin-top: 24px;
    padding: 26px;
    border-radius: 18px;
    background: var(--i-orange);
    color: var(--ink);
    min-height: 200px;
    box-sizing: border-box;
}
.mday-panel > strong { grid-column: 1; grid-row: 1; font-size: 18px; align-self: end; }
.mday-tip-total { grid-column: 1; grid-row: 2 / span 5; font-size: clamp(30px, 3.5vw, 48px); font-weight: 750; line-height: 1.15; white-space: nowrap; }
.mday-tip-row { grid-column: 2; display: flex; justify-content: space-between; gap: 16px; padding: 4px 0; border-bottom: 1px solid color-mix(in srgb, var(--i-orange-fg) 15%, transparent); font-size: 15px; }
.mday-tip-row b { white-space: nowrap; }
.mday-tip-note { grid-column: 2; color: var(--muted); font-size: 12px; line-height: 1.5; }
.mday-tip-action { grid-column: 3; grid-row: 1 / span 7; align-self: end; justify-self: end; border: 1px solid var(--i-orange-fg); border-radius: 12px; padding: 12px 16px; color: var(--i-orange-fg); text-decoration: none; font-weight: 650; white-space: nowrap; }
.mday-tip-action:hover { background: color-mix(in srgb, var(--i-orange-fg) 8%, transparent); }
.mday-tip-action:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
@media (max-width: 1100px) {
    .mday-panel { grid-template-columns: minmax(180px, .8fr) minmax(220px, 1.2fr); gap: 10px 24px; }
    .mday-tip-action { grid-column: 2; grid-row: auto; justify-self: start; margin-top: 8px; }
}
@media (max-width: 600px) {
    .mday-panel { grid-template-columns: minmax(0, 1fr); padding: 20px; gap: 10px; min-height: 0; }
    .mday-panel > strong, .mday-tip-total, .mday-tip-row, .mday-tip-note, .mday-tip-action { grid-column: 1; grid-row: auto; }
    .mday-tip-total { font-size: 36px; margin-bottom: 8px; }
    .mday-tip-row { font-size: 14px; }
    .mday-tip-action { justify-self: stretch; white-space: normal; text-align: center; }
}
.mday-link:focus-visible {
	outline: none;
}
.mavg, .mtop {
	pointer-events: none;
}
.mplot svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
	overflow: visible;
}
.mplot rect.past {
	fill: color-mix(in srgb, var(--bar) 78%, var(--card));
}
.mplot rect.today {
	fill: var(--bar-today);
}
.mplot rect.fut {
	fill: color-mix(in srgb, var(--bar-today) 5%, var(--card));
	stroke: var(--bar-today);
	stroke-dasharray: 3 3;
	stroke-opacity: 0.3;
}
.mplot rect.selected {
	fill: var(--bar-today);
	stroke: #000;
	stroke-width: 1px;
	stroke-dasharray: none;
	stroke-opacity: 1;
}
.mplot line.g {
	stroke: var(--grid);
	opacity: .45;
}
.mplot line.yaxis { stroke: var(--ink); stroke-opacity: .45; }
.mplot line.avg {
	stroke: var(--bar-today);
	stroke-dasharray: 5 4;
	opacity: 1;
}
.mylab {
	position: absolute;
	left: -76px;
	width: 66px;
	white-space: nowrap;
	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: 0.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: -0.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(0.9) hue-rotate(180deg) brightness(0.85) contrast(0.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, 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.cform {
	display: block;
}
form.cform > button {
	margin-top: 14px;
}
.grid.cform {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	align-items: start;
	gap: 12px 14px;
}
.grid.cform label {
	display: flex;
	flex-direction: column;
	gap: 5px;
}
.grid.cform label input,
.grid.cform label select {
	margin-top: 0;
	width: 100%;
	min-width: 0;
}
.grid.cform .flabel {
	display: block;
	min-height: 36px;
	line-height: 1.35;
}
.grid.cform .fhint {
	margin-top: 0;
}
.grid.cform > button {
	grid-column: 1 / -1;
	justify-self: start;
}
@media (max-width: 1180px) {
	.grid.cform {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}
@media (max-width: 820px) {
	.grid.cform {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (max-width: 520px) {
	.grid.cform {
		grid-template-columns: minmax(0, 1fr);
	}
}
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: 0.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: 0.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, 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: 64px;
	}
	.mylab {
		left: -64px;
		width: 56px;
		font-size: 10px;
	}
	.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, 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;
}
/* в карточке байка аватарка клиента мелкая: кружок 30px и отступ от имени */
.facts .selfie {
	width: 30px;
	height: 30px;
	margin-right: 8px;
	vertical-align: -1px;
	box-shadow: 0 0 0 2px var(--card);
}
.facts .selfie > span {
	font-size: 12px;
}
.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, 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, 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, 0.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;
}

/* Редактирование анкеты в заявке */
.app-heading-title {
	display: flex;
	align-items: center;
	gap: 10px;
}
.app-heading-title h2 {
	margin: 0;
}
.app-gear {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 8px;
}
.app-heading {
	gap: 12px;
	flex-wrap: wrap;
}
#app-edit[hidden],
#app-facts[hidden] {
	display: none;
}
#app-edit {
	margin-top: 18px;
}
#app-edit .grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px 20px;
}
#app-edit .acts {
	margin-top: 16px;
}
@media (max-width: 560px) {
	#app-edit .grid {
		grid-template-columns: 1fr;
	}
}

/* список парка: строка с клиентом — ссылка на байк лежит поверх всей строки, а кружок с фото над ней и открывает фото */
.item.fl {
	position: relative;
}
.item.fl > .cover {
	position: absolute;
	inset: 0;
	z-index: 1;
}
.item.fl .rside .selfie {
	z-index: 2;
	width: 30px;
	height: 30px;
	box-shadow: 0 0 0 2px var(--card);
}
.item.fl .rside .selfie > span {
	font-size: 12px;
}
.item.fl .rside {
	gap: 8px;
}