:root {
	--blue: #12813d;
	--blue-dark: #0e6b32;
	--text: #1f2430;
	--text-soft: #6b7280;
	--border: #e5e8ee;
	--bg: #ffffff;
	--bg-soft: #f7f8fa;
	--green: #1e8e3e;
	--red: #d93025;
	--radius: 12px;
	--shadow: 0 1px 3px rgba(20, 30, 60, .08), 0 4px 16px rgba(20, 30, 60, .06);
}

* { box-sizing: border-box; }

body {
	margin: 0;
	font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
	background: var(--bg);
	color: var(--text);
	font-size: 15px;
}

.hidden { display: none !important; }

/* ---------- Кнопки ---------- */
.btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 16px;
	border: 1px solid transparent;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	background: none;
	color: var(--text);
	transition: background .15s, border-color .15s, color .15s;
	white-space: nowrap;
}
.btn-primary { background: var(--blue); color: #fff; }
.btn-primary:hover { background: var(--blue-dark); }
.btn-light { background: var(--bg); border-color: var(--border); }
.btn-light:hover { background: var(--bg-soft); }
.btn-ghost { padding: 6px; color: var(--text-soft); border-radius: 8px; }
.btn-ghost:hover { background: var(--bg-soft); color: var(--text); }
.btn-danger { color: var(--red); border-color: transparent; }
.btn-danger:hover { background: #fdeceb; }
.btn-block { width: 100%; justify-content: center; }
.btn:disabled { opacity: .55; cursor: default; }

/* ---------- Авторизация ---------- */
.auth-screen {
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--bg-soft);
	padding: 24px;
}
.auth-card {
	width: 100%;
	max-width: 400px;
	background: var(--bg);
	border: 1px solid var(--border);
	border-radius: 16px;
	box-shadow: var(--shadow);
	padding: 36px 32px;
	text-align: center;
}
.auth-logo { margin-bottom: 12px; }
.auth-card h1 { font-size: 22px; margin: 0 0 6px; }
.auth-sub { color: var(--text-soft); margin: 0 0 24px; font-size: 14px; }
.auth-card form { text-align: left; }
.auth-switch { margin-top: 20px; font-size: 14px; color: var(--text-soft); }
.auth-switch a { color: var(--blue); text-decoration: none; font-weight: 600; }
.auth-call { display: grid; gap: 14px; font-size: 15px; color: var(--text-soft); }
.auth-call-number { font-size: 26px; font-weight: 700; color: var(--text); text-align: center; letter-spacing: 0.5px; }
.auth-call-wait { text-align: center; }
.auth-ezid { margin-top: 12px; background: #fff; border: 1px solid var(--line, #d7ddd9); color: var(--text); font-weight: 600; }
.auth-ezid:hover { border-color: var(--green, #12813d); color: var(--green, #12813d); }

/* ---------- Формы ---------- */
label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	color: var(--text);
	margin-bottom: 14px;
}
label .hint { font-weight: 400; color: var(--text-soft); }
input[type="text"], input[type="password"], input[type="number"], input[type="email"], input[type="tel"] {
	display: block;
	width: 100%;
	margin-top: 6px;
	padding: 10px 12px;
	border: 1px solid var(--border);
	border-radius: 8px;
	font-size: 14px;
	font-family: inherit;
	background: var(--bg);
	color: var(--text);
	outline: none;
	transition: border-color .15s, box-shadow .15s;
}
input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(18, 129, 61, .12); }
.form-error {
	background: #fdeceb;
	color: var(--red);
	border-radius: 8px;
	padding: 10px 12px;
	font-size: 13px;
	margin-bottom: 14px;
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.input-check { display: flex; gap: 8px; margin-top: 6px; }
.input-check input { margin-top: 0; flex: 1; min-width: 0; }
.check-result { display: block; font-weight: 400; font-size: 12px; margin-top: 5px; min-height: 15px; }
.check-result.ok { color: var(--green); }
.check-result.fail { color: var(--red); }

/* ---------- Каркас приложения ---------- */
.topbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 28px;
	border-bottom: 1px solid var(--border);
	background: var(--bg);
	position: sticky;
	top: 0;
	z-index: 10;
}
.topbar-brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 16px; }
.topbar-user { display: flex; align-items: center; gap: 10px; color: var(--text-soft); font-size: 14px; }
.account-trigger {
	display: inline-flex; align-items: center; gap: 8px; padding: 4px 8px 4px 4px;
	border: 1px solid transparent; border-radius: 999px; background: transparent;
	color: var(--text); font: inherit; font-weight: 600; cursor: pointer;
	transition: background .15s, border-color .15s;
}
.account-trigger:hover { background: var(--bg-soft); border-color: var(--border); }
.account-avatar {
	display: inline-flex; align-items: center; justify-content: center; width: 29px; height: 29px;
	border-radius: 50%; background: linear-gradient(135deg, #12813d, #0e6b32); color: #fff;
	font-size: 13px; font-weight: 800; box-shadow: 0 3px 10px rgba(18, 129, 61,.2);
}

.content { max-width: 1080px; margin: 0 auto; padding: 32px 28px 64px; }
.content-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }
.content-head h2 { margin: 0; font-size: 24px; }

.bot-view-tabs {
	display: inline-flex; gap: 4px; padding: 4px; margin: -10px 0 22px;
	background: #f1f4f9; border: 1px solid #e1e6ee; border-radius: 12px;
}
.bot-view-tab {
	min-height: 40px; display: inline-flex; align-items: center; gap: 8px; padding: 8px 15px;
	border: 0; border-radius: 9px; background: transparent; color: var(--text-soft);
	font: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
	transition: background .16s, color .16s, box-shadow .16s;
}
.bot-view-tab:hover { color: var(--text); background: rgba(255,255,255,.65); }
.bot-view-tab.active { background: #fff; color: var(--blue); box-shadow: 0 2px 8px rgba(31,49,79,.1); }
.bot-view-tab:focus-visible { outline: 3px solid rgba(18, 129, 61,.2); outline-offset: 1px; }

.monitor-summary {
	display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px;
}
.monitor-summary-card {
	position: relative; overflow: hidden; min-height: 92px; padding: 16px;
	border: 1px solid var(--border); border-radius: 13px; background: #fff;
	box-shadow: 0 3px 12px rgba(25,40,70,.045);
}
.monitor-summary-card::before {
	content: ''; position: absolute; inset: 0 auto 0 0; width: 4px; background: #12813d;
}
.monitor-summary-card.green::before { background: #1e8e3e; }
.monitor-summary-card.orange::before { background: #e37400; }
.monitor-summary-card.violet::before { background: #7b61c9; }
.monitor-summary-card span { display: block; color: var(--text-soft); font-size: 12px; font-weight: 600; }
.monitor-summary-card strong { display: block; margin-top: 9px; color: var(--text); font-size: 23px; letter-spacing: -.02em; }
.monitor-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.monitor-card {
	padding: 18px; border: 1px solid var(--border); border-radius: 14px; background: #fff;
	box-shadow: var(--shadow); transition: transform .18s, box-shadow .18s, border-color .18s;
}
.monitor-card:hover { transform: translateY(-2px); border-color: #d0d9e7; box-shadow: 0 8px 22px rgba(25,40,70,.1); }
.monitor-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.monitor-card-head h3 { margin: 0; font-size: 15px; word-break: break-word; }
.monitor-card-head p { margin: 3px 0 0; color: var(--text-soft); font-size: 12px; }
.monitor-owner {
	display: flex; justify-content: space-between; gap: 10px; margin: 14px 0; padding: 9px 11px;
	border-radius: 8px; background: #f7f9fc; font-size: 12px;
}
.monitor-owner span { color: var(--text-soft); }
.monitor-owner strong { color: var(--text); }
.monitor-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.monitor-metric { min-height: 74px; padding: 11px; border: 1px solid #e3e8f0; border-radius: 10px; background: #fbfcfe; }
.monitor-metric.memory { background: #fbf9ff; border-color: #e7e0f5; }
.monitor-metric-label { display: flex; flex-direction: column; gap: 5px; }
.monitor-metric-label span { color: var(--text-soft); font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .035em; }
.monitor-metric-label strong { color: var(--text); font-size: 17px; }
.monitor-bar { height: 5px; margin-top: 10px; overflow: hidden; border-radius: 999px; background: #e7ecf4; }
.monitor-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #12813d, #3fb56b); transition: width .3s ease; }
.monitor-card-foot { display: flex; justify-content: space-between; gap: 10px; margin-top: 13px; color: #8993a3; font-size: 11px; }
.monitor-empty { padding: 54px 20px; border: 1px dashed var(--border); border-radius: 14px; color: var(--text-soft); text-align: center; }

/* ---------- Пустое состояние ---------- */
.empty { text-align: center; padding: 72px 24px; color: var(--text-soft); }
.empty h3 { color: var(--text); margin: 16px 0 6px; }
.empty p { max-width: 420px; margin: 0 auto; font-size: 14px; }

/* ---------- Карточки ботов ---------- */
.bots-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	gap: 20px;
}
.bot-card {
	border: 1px solid var(--border);
	border-radius: var(--radius);
	background: var(--bg);
	box-shadow: var(--shadow);
	padding: 20px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.bot-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.bot-card-title { font-weight: 700; font-size: 16px; margin: 0; word-break: break-word; }
.bot-card-username { color: var(--text-soft); font-size: 13px; margin-top: 2px; }
.bot-status {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	font-weight: 700;
	padding: 4px 10px;
	border-radius: 999px;
	flex-shrink: 0;
}
.bot-status .dot { width: 7px; height: 7px; border-radius: 50%; }
.bot-status.running { background: #e6f4ea; color: var(--green); }
.bot-status.running .dot { background: var(--green); }
.bot-status.stopped { background: var(--bg-soft); color: var(--text-soft); }
.bot-status.stopped .dot { background: #9aa3b2; }
.bot-status.error { background: #fdeceb; color: var(--red); }
.bot-status.error .dot { background: var(--red); }

.bot-meta { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--text-soft); }
.bot-meta-row { display: flex; align-items: center; gap: 8px; }
.bot-meta-row svg { flex-shrink: 0; }

.bot-actions {
	display: grid; gap: 9px; border-top: 1px solid var(--border); padding-top: 14px; margin-top: auto;
}
.bot-runtime-actions, .bot-manage-actions, .bot-secondary-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.bot-runtime-actions.single { grid-template-columns: 1fr; }
.bot-actions .bot-action {
	min-height: 44px; justify-content: flex-start; gap: 8px; padding: 9px 11px;
	border: 1px solid #dfe4ed; border-radius: 9px; background: #fff;
	color: #303847; font-size: 12.5px; font-weight: 700; box-shadow: 0 1px 2px rgba(20,30,50,.025);
}
.bot-actions .bot-action svg { width: 16px; height: 16px; flex: 0 0 auto; color: #657187; }
.bot-actions .bot-action:hover {
	background: #f3faf5; border-color: #bfe0ca; color: #0e6b32;
	box-shadow: 0 3px 9px rgba(18, 129, 61,.09); transform: translateY(-1px);
}
.bot-actions .bot-action:hover svg { color: currentColor; }
.bot-actions .bot-action:focus-visible { outline: 3px solid rgba(18, 129, 61,.2); outline-offset: 1px; }
.bot-actions .btn-primary.bot-action { background: var(--blue); border-color: var(--blue); color: #fff; }
.bot-actions .btn-primary.bot-action svg { color: #fff; }
.bot-actions .btn-primary.bot-action:hover { background: var(--blue-dark); border-color: var(--blue-dark); color: #fff; }
.bot-actions .bot-action-stop { background: #fff9f5; border-color: #f2d7c7; color: #9a471d; }
.bot-actions .bot-action-stop svg { color: #b65a2b; }
.bot-actions .bot-action-stop:hover { background: #fff2e9; border-color: #e8b997; color: #873b16; }
.bot-actions .bot-action-restart { background: #f3faf5; border-color: #cfe7d7; color: #0e6b32; }
.bot-actions .bot-action-restart svg { color: #0e6b32; }
.bot-secondary-actions { border-top: 1px dashed #e3e7ee; padding-top: 9px; margin-top: 1px; }
.bot-actions .bot-action-logs { background: #f8fafc; }
.bot-actions .bot-action-delete { background: transparent; border-color: transparent; color: #c23b32; box-shadow: none; }
.bot-actions .bot-action-delete svg { color: #d34a40; }
.bot-actions .bot-action-delete:hover { background: #fff0ef; border-color: #f3cbc7; color: #a92f28; box-shadow: none; }

/* ---------- Модалки ---------- */
.modal-backdrop {
	position: fixed;
	inset: 0;
	background: rgba(25, 32, 45, .45);
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding: 5vh 16px;
	z-index: 100;
	overflow-y: auto;
}
.modal {
	width: 100%;
	max-width: 560px;
	background: var(--bg);
	border-radius: 16px;
	box-shadow: var(--shadow);
}
.modal-wide { max-width: 760px; }
.modal-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 18px 24px;
	border-bottom: 1px solid var(--border);
}
.modal-head h3 { margin: 0; font-size: 18px; }
.modal-body { padding: 24px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 8px; }
/* нижняя панель модалки вне .modal-body (Админы бота): свои отступы и линия сверху */
.modal-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 24px; border-top: 1px solid var(--border); }

.form-section { margin-bottom: 20px; }
.form-section-title {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--text-soft);
	margin-bottom: 12px;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--border);
}

.create-intro {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 14px;
	margin-bottom: 22px;
	border: 1px solid #d9ecdf;
	border-radius: 12px;
	background: #f3faf5;
}
.create-intro-icon {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border-radius: 10px;
	background: #fff;
	color: var(--blue);
	box-shadow: 0 1px 4px rgba(18, 129, 61, .12);
	flex: 0 0 auto;
}
.create-intro strong, .create-intro span, .create-progress strong, .create-progress span { display: block; }
.create-intro strong, .create-progress strong { font-size: 14px; }
.create-intro span, .create-progress span { margin-top: 3px; color: var(--text-soft); font-size: 12.5px; line-height: 1.45; }
.create-progress {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 14px;
	margin-bottom: 14px;
	border-radius: 10px;
	background: var(--bg-soft);
}
.create-spinner {
	width: 22px;
	height: 22px;
	border: 3px solid #d8e5f8;
	border-top-color: var(--blue);
	border-radius: 50%;
	animation: create-spin .75s linear infinite;
}
@keyframes create-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .create-spinner { animation-duration: 1.5s; } }

/* ---------- Логи ---------- */
.logs-body {
	margin: 0;
	padding: 20px 24px;
	max-height: 60vh;
	overflow: auto;
	font-family: 'Cascadia Mono', Consolas, monospace;
	font-size: 12px;
	line-height: 1.6;
	color: var(--text);
	background: var(--bg-soft);
	border-radius: 0 0 16px 16px;
	white-space: pre-wrap;
	word-break: break-all;
}

/* ---------- Toast ---------- */
.toast {
	position: fixed;
	bottom: 24px;
	left: 50%;
	transform: translateX(-50%);
	background: var(--text);
	color: #fff;
	padding: 11px 20px;
	border-radius: 10px;
	font-size: 14px;
	box-shadow: var(--shadow);
	z-index: 200;
}

@media (max-width: 560px) {
	.form-row { grid-template-columns: 1fr; }
	.content { padding: 20px 16px 48px; }
	.topbar { padding: 12px 16px; }
}

/* ---------- Студия дизайна ---------- */
.modal-design { max-width: 1060px; }
.design-layout {
	display: grid;
	grid-template-columns: 1fr 380px;
	gap: 0;
}
.design-editor {
	padding: 20px 24px;
	max-height: 68vh;
	overflow-y: auto;
	border-right: 1px solid var(--border);
}
.design-themes-bar { display: flex; gap: 8px; margin-bottom: 16px; }
.design-themes-bar select {
	flex: 1;
	padding: 9px 12px;
	border: 1px solid var(--border);
	border-radius: 8px;
	font-size: 14px;
	font-family: inherit;
	background: var(--bg);
	color: var(--text);
}
.color-input { display: flex; gap: 8px; margin-top: 6px; align-items: center; }
.color-input input[type="color"] {
	width: 38px;
	height: 38px;
	padding: 2px;
	border: 1px solid var(--border);
	border-radius: 8px;
	background: var(--bg);
	cursor: pointer;
	flex-shrink: 0;
}
.color-input input[type="text"] { margin-top: 0; flex: 1; }
input[type="range"] { width: 100%; margin-top: 8px; accent-color: var(--blue); }
.check-label { display: flex; align-items: center; gap: 8px; font-weight: 500; }
.check-label input { accent-color: var(--blue); width: 16px; height: 16px; }

.design-ms {
	border: 1px solid #cde8d3;
	background: #f2faf4;
	border-radius: 10px;
	padding: 12px 14px;
	margin-bottom: 16px;
	font-size: 13px;
}
.design-ms.design-ms-fail { border-color: #f5c9c5; background: #fdf1f0; }
.design-ms.design-ms-fail .design-ms-head svg { display: none; }
.design-ms-head { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.design-ms-body { color: var(--text-soft); margin-top: 6px; line-height: 1.6; }
.design-ms-body b { color: var(--text); }

.design-rule {
	display: grid;
	grid-template-columns: 1fr 1fr auto;
	gap: 8px;
	margin-bottom: 10px;
	align-items: center;
}
.design-rule select, .design-rule input {
	margin-top: 0 !important;
	padding: 8px 10px;
	border: 1px solid var(--border);
	border-radius: 8px;
	font-size: 13px;
	font-family: inherit;
	background: var(--bg);
	color: var(--text);
	width: 100%;
}
.design-actions { padding: 14px 24px; border-top: 1px solid var(--border); align-items: center; margin-top: 0; }
.design-actions .hint { margin-right: auto; font-size: 13px; color: var(--text-soft); }

/* ---------- iPhone 17 Pro Max превью ---------- */
.design-preview {
	background: var(--bg-soft);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 28px 20px;
}
.iphone {
	position: relative;
	width: 300px;
	height: 620px;
	background: #0a0a0a;
	border-radius: 52px;
	padding: 9px;
	box-shadow:
		0 0 0 2.5px #3a3a3c,
		0 0 0 4px #1a1a1a,
		0 24px 48px rgba(15, 25, 45, .35);
}
.iphone-island {
	position: absolute;
	top: 22px;
	left: 50%;
	transform: translateX(-50%);
	width: 92px;
	height: 26px;
	background: #000;
	border-radius: 999px;
	z-index: 5;
}
.iphone-screen {
	width: 100%;
	height: 100%;
	background: #f4f5f7;
	border-radius: 44px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	position: relative;
}
.iphone-statusbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 18px 26px 4px;
	font-size: 13px;
	font-weight: 700;
	color: #0a0a0a;
}
.iphone-status-icons { display: flex; align-items: center; gap: 5px; color: #0a0a0a; }
.phone-app-head {
	padding: 16px 20px 8px;
	font-size: 17px;
	font-weight: 800;
	color: #14171c;
}
.phone-hint {
	margin-top: auto;
	text-align: center;
	padding: 14px;
	font-size: 11px;
	color: #9aa3b2;
}

/* карта лояльности в превью */
.loyalty-card {
	position: relative;
	margin: 8px 14px;
	border-radius: 20px;
	overflow: hidden;
	background: linear-gradient(180deg, #0b0b0b 0%, #000 100%);
	color: #fff;
	aspect-ratio: 1.586;
	box-shadow: 0 10px 26px rgba(10, 15, 30, .35);
}
.loyalty-card-bgimg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	opacity: 0;
}
.loyalty-card-overlay { position: absolute; inset: 0; }
.loyalty-card-inner {
	position: relative;
	z-index: 2;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 16px;
}
.loyalty-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.loyalty-brand { display: flex; align-items: center; gap: 9px; min-width: 0; }
.loyalty-logo { height: 34px; max-width: 90px; object-fit: contain; border-radius: 7px; }
.loyalty-brand-title { font-size: 15px; font-weight: 800; letter-spacing: .02em; line-height: 1.15; }
.loyalty-brand-sub { font-size: 10px; opacity: .75; margin-top: 2px; }
.loyalty-balance { text-align: right; flex-shrink: 0; }
.loyalty-balance-label { font-size: 9px; text-transform: uppercase; letter-spacing: .08em; opacity: .7; }
.loyalty-balance-value { font-size: 22px; font-weight: 800; line-height: 1.1; }
.loyalty-bottom { display: flex; align-items: flex-end; gap: 10px; }
.loyalty-owner { font-size: 12px; font-weight: 600; opacity: .92; flex: 1; }
.loyalty-pill {
	font-size: 10px;
	font-weight: 800;
	padding: 3px 8px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .18);
	backdrop-filter: blur(4px);
}
.loyalty-qr {
	position: relative;
	width: 52px;
	height: 52px;
	background: #fff;
	border-radius: 9px;
	padding: 5px;
	flex-shrink: 0;
}
.loyalty-qr-logo {
	position: absolute;
	inset: 0;
	margin: auto;
	width: 30%;
	height: 30%;
	object-fit: contain;
	background: #fff;
	border-radius: 4px;
	padding: 2px;
}

@media (max-width: 900px) {
	.design-layout { grid-template-columns: 1fr; }
	.design-preview { order: -1; padding: 18px; }
	.iphone { width: 240px; height: 500px; border-radius: 44px; }
	.design-editor { border-right: none; max-height: none; }
}

/* ---------- Редактор мини-приложения ---------- */
.ma-section-flash {
	animation: ma-flash 1.2s ease;
	border-radius: 10px;
}
@keyframes ma-flash {
	0% { box-shadow: 0 0 0 3px rgba(18, 129, 61, .45); background: rgba(18, 129, 61, .07); }
	100% { box-shadow: 0 0 0 3px rgba(18, 129, 61, 0); background: transparent; }
}
.ma-collapse summary {
	cursor: pointer;
	user-select: none;
	list-style: none;
}
.ma-collapse summary::-webkit-details-marker { display: none; }
.ma-collapse summary::after {
	content: '▸';
	margin-left: 6px;
	color: var(--text-soft);
	font-size: 12px;
	transition: transform .15s;
	display: inline-block;
}
.ma-collapse[open] summary::after { transform: rotate(90deg); }
.ma-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ma-prize {
	border: 1px solid var(--border);
	border-radius: 10px;
	padding: 10px;
	margin-bottom: 8px;
	background: var(--bg-soft);
}
.ma-prize-row {
	display: grid;
	grid-template-columns: 2fr 1fr auto;
	gap: 8px;
}
.ma-prize-row + .ma-prize-row { margin-top: 8px; grid-template-columns: 1fr 1fr 1.4fr; }
.ma-prize input, .ma-prize select {
	margin-top: 0 !important;
	padding: 8px 10px;
	font-size: 13px;
}
.ma-code {
	display: block;
	width: 100%;
	margin-top: 6px;
	padding: 10px 12px;
	border: 1px solid var(--border);
	border-radius: 8px;
	font-family: 'Cascadia Mono', Consolas, monospace;
	font-size: 12.5px;
	line-height: 1.5;
	background: var(--bg-soft);
	color: var(--text);
	resize: vertical;
	outline: none;
}
.ma-code:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(18, 129, 61, .12); }
.ma-text-row {
	display: grid;
	grid-template-columns: 1fr 1fr auto;
	gap: 8px;
	margin-bottom: 8px;
}
.ma-text-row input {
	margin-top: 0 !important;
	padding: 8px 10px;
	font-size: 13px;
}
.iphone-screen-app { background: #fff; position: relative; }
/* Приложение рендерится в реальной ширине телефона (390px) и масштабируется под рамку,
   иначе вёрстка мини-приложения не помещается и обрезается */
.ma-frame {
	position: absolute;
	top: 0;
	left: 0;
	transform-origin: top left;
	border: none;
	border-radius: 0;
	background: #fff;
}
.ma-frame-off {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	background: #f4f5f7;
	border-radius: 44px;
	text-align: center;
	font-size: 13px;
	color: var(--text-soft);
	z-index: 4;
	padding: 24px;
}

/* ---------- Админ-панель ---------- */
.account-modal { max-width: 720px; }
.account-subtitle { margin: 3px 0 0; color: var(--text-soft); font-size: 13px; }
.account-body { display: grid; gap: 16px; background: #f7f9fc; }
.account-section {
	background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 18px;
	box-shadow: 0 3px 12px rgba(32,44,69,.04);
}
.account-section-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.account-section-head h4 { margin: 0 0 3px; font-size: 15px; }
.account-section-head p { margin: 0; color: var(--text-soft); font-size: 12.5px; }
.account-section-icon {
	width: 38px; height: 38px; border-radius: 11px; display: flex; align-items: center; justify-content: center;
	background: #e8f5ec; color: var(--blue); flex: 0 0 auto;
}
.account-section-icon.green { background: #e6f4ea; color: #188038; }
.account-password-form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.account-password-form label:first-child { grid-column: 1 / -1; }
.account-password-form .form-error, .account-password-form .btn { grid-column: 1 / -1; }
.account-password-form .btn { justify-self: start; }
.sessions-heading #sessions-revoke-all { margin-left: auto; white-space: nowrap; }
.sessions-list { display: grid; gap: 9px; }
.session-item {
	display: flex; align-items: center; gap: 12px; padding: 12px;
	border: 1px solid var(--border); border-radius: 11px; background: #fff;
}
.session-item.current { border-color: #b7dfc2; background: #f6fbf7; }
.session-device-icon {
	width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center;
	background: var(--bg-soft); color: var(--text-soft); flex: 0 0 auto;
}
.session-item.current .session-device-icon { background: #e6f4ea; color: #188038; }
.session-info { min-width: 0; flex: 1; }
.session-title { font-size: 13.5px; font-weight: 700; color: var(--text); }
.session-current {
	display: inline-block; margin-left: 6px; padding: 2px 7px; border-radius: 999px;
	background: #d9f2df; color: #137333; font-size: 10px; font-weight: 800; vertical-align: 1px;
}
.session-meta, .session-created { color: var(--text-soft); font-size: 11.5px; margin-top: 3px; overflow-wrap: anywhere; }
.session-created { color: #8a94a3; }
.session-revoke { flex: 0 0 auto; }
@media (max-width: 620px) {
	.account-password-form { grid-template-columns: 1fr; }
	.account-password-form label:first-child { grid-column: auto; }
	.sessions-heading { align-items: flex-start; flex-wrap: wrap; }
	.sessions-heading #sessions-revoke-all { margin-left: 50px; }
	.session-item { align-items: flex-start; flex-wrap: wrap; }
	.session-revoke { margin-left: 50px; }
	.account-trigger svg { display: none; }
}
.admin-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
	gap: 12px;
	margin-bottom: 20px;
}
.admin-stat {
	border: 1px solid var(--border);
	border-radius: 10px;
	padding: 14px;
	text-align: center;
}
.admin-stat-value { font-size: 26px; font-weight: 800; color: var(--blue); }
.admin-stat-label { font-size: 12px; color: var(--text-soft); margin-top: 2px; }
.admin-subhead { margin: 20px 0 10px; font-size: 15px; }
.admin-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 10px; }
.admin-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.admin-table th {
	text-align: left;
	padding: 10px 12px;
	background: var(--bg-soft);
	color: var(--text-soft);
	font-weight: 700;
	border-bottom: 1px solid var(--border);
	white-space: nowrap;
}
.admin-table td { padding: 9px 12px; border-bottom: 1px solid var(--border); }
.admin-table tr:last-child td { border-bottom: none; }
.admin-table .btn { padding: 4px 10px; font-size: 12px; }

/* ---------- Редактор сообщений бота ---------- */
#messages-modal .modal-wide { max-width: 1000px; }
.messages-layout { display: grid; grid-template-columns: 1fr 340px; gap: 22px; }
@media (max-width: 900px) { .messages-layout { grid-template-columns: 1fr; } }

.msg-tabs { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.msg-tab {
	padding: 7px 14px; border: 1px solid var(--border); border-radius: 20px;
	background: var(--bg); font-size: 13px; font-weight: 600; cursor: pointer; color: var(--text-soft);
}
.msg-tab.active { background: var(--blue); border-color: var(--blue); color: #fff; }

#msg-text {
	width: 100%; border: 1px solid var(--border); border-radius: 8px;
	padding: 10px 12px; font: inherit; resize: vertical; min-height: 140px;
}
#msg-text:focus { outline: none; border-color: var(--blue); }

.msg-menu-actions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }

.menu-row {
	display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
	padding: 8px; border: 1px dashed var(--border); border-radius: 8px; margin-bottom: 8px;
}
.menu-btn {
	display: flex; gap: 4px; align-items: center;
	background: var(--bg-soft); border-radius: 8px; padding: 4px;
}
.menu-btn input[type="text"] { width: 130px; border: 1px solid var(--border); border-radius: 6px; padding: 6px 8px; font-size: 13px; }
.menu-btn select { border: 1px solid var(--border); border-radius: 6px; padding: 6px 4px; font-size: 12px; background: #fff; }
.menu-btn [data-f="url"] { width: 120px; }
.menu-btn .btn-danger { padding: 4px 8px; }
.menu-add-btn { padding: 5px 10px; font-size: 12px; }

/* chat preview: Telegram or MAX phone */
.messages-preview { position: sticky; top: 0; display: flex; flex-direction: column; align-items: center; }
.chat-phone { position: relative; width: 300px; height: 620px; padding: 9px; border-radius: 52px; background: #0a0a0a; box-shadow: 0 0 0 2.5px #3a3a3c, 0 0 0 4px #1a1a1a, 0 24px 48px rgba(15, 25, 45, .35); }
.chat-phone-island { position: absolute; top: 19px; left: 50%; z-index: 5; width: 88px; height: 25px; transform: translateX(-50%); border-radius: 999px; background: #000; }
.tg-chat {
	--tg-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
	position: relative; display: flex; flex-direction: column; height: 100%; overflow: hidden;
	border-radius: 44px; background: #fff; font-family: var(--tg-font); color: #000;
}
.tg-status-bar { display: flex; align-items: center; justify-content: space-between; padding: 15px 26px 4px 30px; background: #f6f6f6; font-size: 14px; font-weight: 600; letter-spacing: -.01em; }
.tg-status-icons { display: flex; align-items: center; gap: 5px; }
.tg-chat-head { display: flex; align-items: center; gap: 8px; padding: 6px 12px 8px; background: #f6f6f6; border-bottom: .5px solid #d9d9dc; }
.tg-back { display: inline-flex; align-items: center; gap: 4px; flex: none; min-width: 66px; color: #007aff; font-size: 15px; }
.tg-chat-title { flex: 1; min-width: 0; text-align: center; }
.tg-chat-name { overflow: hidden; color: #000; font-size: 15px; font-weight: 600; line-height: 1.2; white-space: nowrap; text-overflow: ellipsis; }
.tg-chat-status { color: #8e8e93; font-size: 12px; line-height: 1.3; transition: color .2s; }
.tg-chat-status.typing { color: #007aff; }
.tg-avatar { display: grid; place-items: center; flex: none; width: 34px; height: 34px; margin-left: 32px; border-radius: 50%; background: linear-gradient(180deg, #72d5fd 0%, #2a9ef1 100%); color: #fff; font-size: 15px; font-weight: 600; }
.tg-chat-body {
	flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; padding: 10px 8px 10px; overflow: hidden;
	background-color: #c5ddb0;
	background-image:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180' fill='none' stroke='%23284d24' stroke-opacity='.13' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M24 30l4 8 9 1-7 6 2 9-8-5-8 5 2-9-7-6 9-1z'/%3E%3Cpath d='M120 22c-4-6-14-3-12 5 1 5 12 11 12 11s11-6 12-11c2-8-8-11-12-5z'/%3E%3Crect x='70' y='70' width='22' height='16' rx='4'/%3E%3Cpath d='M76 70v-4h10v4M92 76h4a4 4 0 0 1 0 8h-4'/%3E%3Cpath d='M150 96h18v14h-18zM148 96h22M159 96v14M159 96c-3-5-9-3-6 0M159 96c3-5 9-3 6 0'/%3E%3Cpath d='M30 120h22a6 6 0 0 1 6 6v8a6 6 0 0 1-6 6h-12l-8 6v-6h-2a6 6 0 0 1-6-6v-8a6 6 0 0 1 6-6z'/%3E%3Cpath d='M112 140l22-10-8 22-4-8z'/%3E%3Ccircle cx='150' cy='158' r='6'/%3E%3Ccircle cx='60' cy='168' r='3'/%3E%3Ccircle cx='100' cy='108' r='3'/%3E%3C/svg%3E"),
		radial-gradient(circle at 12% 14%, #e8f2c8 0%, rgba(232, 242, 200, 0) 55%),
		radial-gradient(circle at 88% 22%, #b3dab4 0%, rgba(179, 218, 180, 0) 55%),
		radial-gradient(circle at 20% 88%, #a6d2c4 0%, rgba(166, 210, 196, 0) 60%),
		radial-gradient(circle at 86% 86%, #dde9a8 0%, rgba(221, 233, 168, 0) 55%);
	background-size: 180px 180px, auto, auto, auto, auto;
}
.tg-date-chip { align-self: center; margin-bottom: 2px; padding: 2px 9px; border-radius: 11px; background: rgba(53, 88, 52, .32); color: #fff; font-size: 12px; font-weight: 500; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.tg-bubble { position: relative; max-width: 84%; padding: 6px 9px 4px 10px; border-radius: 16px; box-shadow: 0 1px .5px rgba(0, 0, 0, .13); }
.tg-bubble.tg-in { align-self: flex-start; margin-left: 6px; background: #fff; border-bottom-left-radius: 5px; }
.tg-bubble.tg-out { align-self: flex-end; margin-right: 6px; background: #e1fec6; border-bottom-right-radius: 5px; }
.tg-bubble.tg-in::before, .tg-bubble.tg-out::before { content: ''; position: absolute; bottom: 0; width: 10px; height: 14px; }
.tg-bubble.tg-in::before { left: -6px; background: #fff; clip-path: path("M10 14C5 14 2 11 0 14L0 0C0 7 5 14 10 14Z"); }
.tg-bubble.tg-out::before { right: -6px; background: #e1fec6; clip-path: path("M0 14C5 14 8 11 10 14L10 0C10 7 5 14 0 14Z"); }
.tg-msg-text { color: #000; font-size: 15px; line-height: 1.32; word-break: break-word; }
.tg-msg-text b { font-weight: 600; }
.tg-msg-footer { margin-top: 6px; color: #8a94a0; font-size: 13px; font-style: italic; }
.tg-msg-time { display: flex; align-items: center; justify-content: flex-end; gap: 3px; margin-top: 1px; color: #a1aab3; font-size: 11px; line-height: 1.2; }
.tg-out .tg-msg-time { color: #5fb359; }
.tg-pop { animation: tgPop .38s cubic-bezier(.2, .9, .3, 1.15) backwards; }
.tg-inline-kb.tg-pop { animation-delay: .08s; }
@keyframes tgPop { from { opacity: 0; transform: translateY(8px) scale(.96); } to { opacity: 1; transform: none; } }
.tg-inline-kb { display: flex; flex-direction: column; gap: 4px; width: calc(84% + 6px); max-width: none; margin: 0 0 0 6px; }
.tg-inline-kb:empty { display: none; }
.tg-inline-btn { background: rgba(48, 82, 46, .34); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border-radius: 10px; font-size: 14px; }
.tg-input-row { display: flex; align-items: center; gap: 5px; padding: 7px 5px 6px 7px; background: #f6f6f6; border-top: .5px solid #d9d9dc; }
.tg-menu-pill { display: inline-flex; flex: none; align-items: center; gap: 4px; height: 32px; padding: 0 10px 0 8px; overflow: hidden; border-radius: 16px; background: linear-gradient(180deg, #43a0f2 0%, #2f8ae5 100%); box-shadow: 0 2px 6px -2px rgba(47, 138, 229, .55); color: #fff; font-size: 12.5px; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; cursor: default; transition: transform .15s ease, box-shadow .15s ease; animation: tgPillIn .5s cubic-bezier(.2, .9, .3, 1.2) .2s backwards; }
.tg-menu-pill > span { flex: none; font-size: 12.5px; line-height: 1; }
.tg-menu-pill .tg-menu-pill-text { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.tg-menu-pill:hover { transform: translateY(-1px); box-shadow: 0 6px 12px -4px rgba(47, 138, 229, .7); }
@keyframes tgPillIn { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: none; } }
.tg-input-field { display: flex; flex: 1 1 auto; align-items: center; gap: 3px; min-width: 0; height: 34px; padding: 0 6px 0 11px; border: .5px solid #d3d3d8; border-radius: 17px; background: #fff; }
.tg-input-placeholder { flex: 1; min-width: 0; overflow: hidden; color: #a2a2a7; font-size: 14px; white-space: nowrap; text-overflow: ellipsis; }
.tg-input-icon { flex: none; color: #8e8e93; }
.tg-mic { display: grid; flex: none; place-items: center; width: 24px; height: 30px; color: #8e8e93; }
.tg-input-field .tg-input-icon { width: 19px; height: 19px; }
.tg-chat:not(.is-max) .tg-input-field .tg-input-icon { display: none; }
.tg-home-bar { flex: none; height: 22px; background: #f6f6f6; }
.tg-home-bar::after { content: ''; display: block; width: 110px; height: 4px; margin: 9px auto 0; border-radius: 99px; background: #111; }

/* MAX chat look */
.tg-chat.is-max .tg-status-bar, .tg-chat.is-max .tg-chat-head, .tg-chat.is-max .tg-input-row, .tg-chat.is-max .tg-home-bar { background: #fff; }
.tg-chat.is-max .tg-back { min-width: 0; color: #1a1a1a; }
.tg-chat.is-max .tg-back span { display: none; }
.tg-chat.is-max .tg-chat-title { text-align: left; }
.tg-chat.is-max .tg-avatar { order: -1; margin-left: 0; background: linear-gradient(135deg, #4d7cff 0%, #8f5cff 100%); }
.tg-chat.is-max .tg-back { order: -2; }
.tg-chat.is-max .tg-chat-status.typing { color: #4d6dff; }
.tg-chat.is-max .tg-chat-body { background: linear-gradient(170deg, #eef1fb 0%, #e6e9f8 50%, #ece7fb 100%); }
.tg-chat.is-max .tg-date-chip { background: rgba(60, 70, 120, .18); color: #3f4766; }
.tg-chat.is-max .tg-bubble { border-radius: 18px; box-shadow: none; }
.tg-chat.is-max .tg-bubble::before { display: none; }
.tg-chat.is-max .tg-bubble.tg-out { background: #d9e4ff; }
.tg-chat.is-max .tg-out .tg-msg-time { color: #5b74c7; }
.tg-chat.is-max .tg-inline-btn { background: #fff; color: #2d5bff; -webkit-backdrop-filter: none; backdrop-filter: none; border-radius: 12px; }
.tg-chat.is-max .tg-menu-pill { display: none; }
.tg-chat.is-max .tg-input-field { border-color: #e1e4ee; background: #f4f6fb; }

/* ---------- Анимации ---------- */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp { from { opacity: 0; transform: translateY(26px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes cardIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes toastIn { from { opacity: 0; transform: translate(-50%, 14px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .45; } }

.modal-backdrop { animation: fadeIn .18s ease-out; }
.modal { animation: slideUp .24s cubic-bezier(.2,.8,.25,1); }
.bot-card { animation: cardIn .3s ease-out backwards; transition: box-shadow .2s, transform .2s, border-color .2s; }
.bot-card:nth-child(2) { animation-delay: .05s; }
.bot-card:nth-child(3) { animation-delay: .1s; }
.bot-card:nth-child(4) { animation-delay: .15s; }
.bot-card:nth-child(n+5) { animation-delay: .2s; }
.bot-card:hover { box-shadow: 0 6px 20px rgba(20,30,60,.12), 0 2px 6px rgba(20,30,60,.08); transform: translateY(-2px); border-color: #d5dbe6; }
.btn { transition: background .15s, border-color .15s, color .15s, transform .1s, box-shadow .15s; }
.btn:active { transform: scale(.96); }
.btn-primary:hover { box-shadow: 0 4px 12px rgba(18, 129, 61,.35); }
.toast { animation: toastIn .25s cubic-bezier(.2,.8,.25,1); }
.bot-status.running .dot { animation: pulse 1.6s ease-in-out infinite; }
.auth-card { animation: slideUp .3s cubic-bezier(.2,.8,.25,1); }
.empty { animation: fadeIn .4s ease-out; }
input, textarea, select { transition: border-color .15s, box-shadow .15s; }
input:focus, textarea:focus, select:focus { box-shadow: 0 0 0 3px rgba(18, 129, 61,.12); }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- Мобильная версия ---------- */
@media (max-width: 560px) {
	.bots-grid { grid-template-columns: 1fr; gap: 14px; }
	.bot-actions .btn { flex: 1 1 44%; justify-content: center; }
	.modal-backdrop { padding: 0; align-items: flex-end; }
	.modal, .modal-wide, .modal-design {
		max-width: 100%;
		border-radius: 16px 16px 0 0;
		max-height: 94vh;
		overflow-y: auto;
		animation: slideUp .28s cubic-bezier(.2,.8,.25,1);
	}
	.modal-head { position: sticky; top: 0; background: var(--bg); z-index: 5; border-radius: 16px 16px 0 0; }
	.modal-body { padding: 18px 16px; }
	.modal-actions { position: sticky; bottom: 0; background: var(--bg); padding: 12px 0; margin-top: 0; }
	.modal-actions .btn { flex: 1; justify-content: center; }
	.content-head { flex-wrap: wrap; gap: 12px; }
	.msg-tabs { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; padding-bottom: 4px; }
	.msg-tab { white-space: nowrap; flex-shrink: 0; }
	.menu-btn { flex-wrap: wrap; }
	.menu-btn input[type="text"] { width: 110px; }
	.messages-preview { position: static; }
	.input-check { flex-wrap: wrap; }
	h2 { font-size: 20px; }
	.bot-view-tabs { display: flex; margin-top: -6px; }
	.bot-view-tab { flex: 1; justify-content: center; min-height: 44px; }
	.monitor-summary { grid-template-columns: 1fr 1fr; gap: 9px; }
	.monitor-summary-card { min-height: 82px; padding: 13px; }
	.monitor-summary-card strong { font-size: 19px; }
	.monitor-grid { grid-template-columns: 1fr; }
}

/* ---------- Анимации: закрытие модалок, доп. эффекты ---------- */
@keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } }
@keyframes slideDown { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(22px) scale(.98); } }

.modal-backdrop.closing { animation: fadeOut .18s ease-in forwards; pointer-events: none; }
.modal-backdrop.closing .modal { animation: slideDown .18s ease-in forwards; }

/* повторные перерисовки списка — без анимации появления (нет «мигания») */
.bots-grid.no-anim .bot-card { animation: none; }

/* плавная смена статуса бота */
.bot-status { transition: background .3s, color .3s; }
.bot-status .dot { transition: background .3s; }

/* кнопки в Telegram-превью «нажимаются» */

/* сообщение в превью плавно обновляется */

/* переключение вкладок сообщений */
.msg-tab { transform: translateZ(0); }
.msg-tab:hover { border-color: var(--blue); color: var(--blue); }
.msg-tab.active:hover { color: #fff; }

/* появление рядов кнопок в редакторе меню */
.menu-row { animation: cardIn .2s ease-out; }

/* топбар: лёгкая тень при прокрутке уже есть у карточек; иконка логотипа */
.topbar svg:first-child { transition: transform .3s; }
.topbar:hover svg:first-child { transform: rotate(-8deg) scale(1.06); }

/* тост исчезает мягко */
.toast { transition: opacity .25s, transform .25s; }

/* строки таблицы админки */
.admin-table tr { transition: background .15s; }

/* ---------- баннер состояния доступа ---------- */
.access-banner {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 16px;
	margin: 0 0 16px;
	border-radius: 12px;
	border: 1px solid #ffe0a3;
	background: #fff8e8;
	color: #6b4e00;
	font-size: 14px;
}
.access-banner.danger {
	border-color: #ffc9c9;
	background: #fff1f1;
	color: #8a1f1f;
}
.access-banner.ok {
	border-color: #cdeacd;
	background: #f2fbf2;
	color: #1f5c2e;
}
.access-banner-text { display: flex; flex-direction: column; gap: 2px; }
.access-banner-text strong { font-weight: 600; }
.access-banner-text span { opacity: .85; }

/* ---------- управление тарифом в админке ---------- */
.admin-plan-cell { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.admin-plan-cell select,
.admin-plan-cell input[type="date"] {
	padding: 4px 6px;
	border: 1px solid #d7dde7;
	border-radius: 8px;
	font: inherit;
	font-size: 13px;
}
.admin-access-tag {
	display: inline-block;
	padding: 2px 8px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
	white-space: nowrap;
}
.admin-access-tag.active { background: #e7f6ea; color: #1f7a37; }
.admin-access-tag.inactive { background: #fdeaea; color: #a32020; }

/* бот остановлен из-за неоплаты — это не поломка */
.bot-status.suspended { background: #fff4e0; color: #8a5a00; }
.bot-status.suspended .dot { background: #e09b1f; }

/* ---------- Telegram ID: подсказка и форма ---------- */
.tg-id-guide {
	background: #f6f8fb;
	border: 1px solid #e6ebf2;
	border-radius: 12px;
	padding: 12px 14px;
	margin: 0 0 14px;
	font-size: 13px;
	line-height: 1.55;
}
.tg-id-guide b { display: block; margin-bottom: 6px; }
.tg-id-guide ol { margin: 0 0 6px; padding-left: 20px; }
.tg-id-guide code { background: #fff; border: 1px solid #e0e6ee; border-radius: 5px; padding: 1px 5px; }
.tg-id-guide .hint { margin: 6px 0 0; }
.account-tg-form label { display: block; margin-bottom: 10px; }
.account-tg-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.account-section-icon.blue { background: #e8f5ec; color: #12813d; }

/* ---------- админы бота ---------- */
.roles-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.role-row { display: flex; gap: 8px; align-items: center; }
.role-row input, .role-row select {
	padding: 8px 10px;
	border: 1px solid #d7dde7;
	border-radius: 10px;
	font: inherit;
	font-size: 14px;
}
.role-row input { flex: 1; min-width: 0; }
.roles-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.roles-empty { color: #7b8595; font-size: 14px; padding: 10px 0; }

/* ---------- клиенты ---------- */
.clients-toolbar { display: flex; gap: 12px; align-items: center; margin-bottom: 12px; }
.clients-toolbar input[type="search"] {
	flex: 1;
	padding: 10px 12px;
	border: 1px solid #d7dde7;
	border-radius: 10px;
	font: inherit;
	font-size: 14px;
}
.clients-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 340px); gap: 16px; align-items: start; }
@media (max-width: 900px) { .clients-layout { grid-template-columns: 1fr; } }
.clients-list { display: flex; flex-direction: column; gap: 6px; max-height: 52vh; overflow: auto; }
.client-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	border: 1px solid #e6ebf2;
	border-radius: 10px;
	cursor: pointer;
	background: #fff;
	text-align: left;
	font: inherit;
}
.client-row:hover { border-color: #c3d4ef; background: #fbfcfe; }
.client-row.active { border-color: #12813d; background: #f1f9f3; }
.client-row-main { min-width: 0; }
.client-row-name { font-weight: 600; font-size: 14px; }
.client-row-meta { font-size: 12px; color: #7b8595; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.client-row-bonus { font-size: 13px; font-weight: 600; color: #1f7a37; white-space: nowrap; }
.client-row-card { font-size: 12px; color: #7b8595; white-space: nowrap; }
.clients-pager { display: flex; gap: 10px; align-items: center; justify-content: center; margin-top: 12px; }
.client-card {
	border: 1px solid #e6ebf2;
	border-radius: 12px;
	padding: 14px;
	background: #fbfcfe;
}
.client-card label { display: block; margin-bottom: 10px; font-size: 13px; color: #55606f; }
.client-card label input, .client-card label select {
	display: block;
	width: 100%;
	margin-top: 4px;
	padding: 8px 10px;
	border: 1px solid #d7dde7;
	border-radius: 9px;
	font: inherit;
	font-size: 14px;
	box-sizing: border-box;
}
.client-card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 12px; }
.client-card-head h4 { margin: 0; font-size: 15px; }
.client-bonus-box { display: flex; gap: 6px; align-items: center; margin: 10px 0 14px; }
.client-bonus-box input { flex: 1; min-width: 0; padding: 8px 10px; border: 1px solid #d7dde7; border-radius: 9px; font: inherit; }
.client-card-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.client-card-stat { font-size: 13px; color: #55606f; margin: 0 0 4px; }
.client-card-stat b { color: #1f2933; }


/* ---------- Мобильный: модалки с превью ---------- */
/* minmax(0,1fr): колонка не может раздуться шире экрана из-за прокручиваемых вкладок */
.messages-layout { grid-template-columns: minmax(0, 1fr) 340px; }
.messages-editor, .design-editor, .clients-list-wrap { min-width: 0; }
@media (max-width: 900px) {
	.messages-layout { grid-template-columns: minmax(0, 1fr); }
	.messages-preview { position: static; }
}
@media (max-width: 560px) {
	/* телефон-превью не должен съедать весь первый экран */
	.iphone { width: 200px; height: 420px; border-radius: 38px; padding: 7px; }
	.iphone-screen { border-radius: 32px; }
	.iphone-island { width: 70px; height: 20px; top: 16px; }
	.design-preview { padding: 14px; }
	.modal-actions .btn, .modal-foot .btn { flex: 1; justify-content: center; }
	.clients-toolbar { flex-wrap: wrap; }
	.role-row { flex-wrap: wrap; }
	.role-row input { flex: 1 1 100%; }
}

/* ---------- Мобильный: шапка и админка ---------- */
@media (max-width: 560px) {
	/* шапка не должна раздвигать страницу шире экрана — иначе на телефоне
	   «растёт» весь layout viewport и модалки вылезают за край */
	.topbar { gap: 8px; }
	.topbar-brand .topbar-brand-title { display: none; }
	.topbar-user { gap: 6px; }
	#admin-btn { padding-left: 10px; padding-right: 10px; }
	.account-trigger { max-width: 130px; }
	.account-trigger #user-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
	/* модалки всегда в ширину экрана; внутренние таблицы прокручиваются сами */
	.modal, .modal-wide, .modal-design { min-width: 0; max-width: 100vw; overflow-x: hidden; }
	.modal-body > * { min-width: 0; }
	.admin-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
	.admin-stat { padding: 12px 8px; }
	.admin-stat-value { font-size: 22px; }
}

/* Режим встраивания в кабинет ez-business (?embed=1): без своей шапки и лишних отступов */
html.embed body { background: transparent; }
html.embed .topbar { display: none !important; }
html.embed .content { padding-top: 0; }
html.embed .auth-screen { min-height: 60vh; }
html.ez { --blue: #1b1f24; --blue-dark: #000000; --bg-soft: #f5f6f8; --radius: 14px; }
html.embed .content { padding: 4px 0 40px; max-width: none; }
/* embed: тариф уже показан в шапке кабинета — зелёный баннер не нужен, только предупреждения */
html.embed .access-banner.ok { display: none !important; }
html.embed .content { padding: 0 0 40px; }
html.embed.modal-open .app { visibility: hidden; }
html.ez .modal-backdrop { background: rgba(20, 26, 34, .5); padding: 24px 16px; }
/* margin:auto центрирует по вертикали, а слишком высокая модалка не обрезается сверху */
html.ez .modal { margin: auto; }

html.embed .content-head { margin-bottom: 16px; }
html.embed .content-head h2 { font-size: 20px; }
/* пустой экран в кабинете: белая карточка на сером фоне, как остальные разделы */
html.ez .empty { text-align: left; padding: 0; color: var(--text); }
html.ez .empty-card { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 36px; padding: 30px 34px; background: #fff; border: 1px solid #e6ebf3; border-radius: 16px; }
html.ez .empty-lead h3 { margin: 0 0 8px; font-size: 21px; color: var(--text); }
html.ez .empty-lead p { margin: 0 0 20px; max-width: none; color: #5c6a7d; font-size: 14px; line-height: 1.55; }
html.ez .empty-features { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; color: #3d4756; font-size: 13px; }
html.ez .empty-features li { display: flex; align-items: center; gap: 7px; }
html.ez .empty-features li::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #8fd91a; }
html.ez .empty-steps { list-style: none; margin: 0; padding: 22px 0 0 24px; border-left: 1px solid #e6ebf3; display: grid; gap: 16px; align-content: start; }
html.ez .empty-steps li { display: flex; gap: 12px; align-items: flex-start; }
html.ez .empty-steps li span { flex: none; width: 26px; height: 26px; border-radius: 50%; background: #eef8e6; color: #12813d; font-weight: 700; font-size: 13px; display: grid; place-items: center; }
html.ez .empty-steps b { display: block; font-size: 14px; color: var(--text); }
html.ez .empty-steps small { display: block; color: #5c6a7d; font-size: 13px; line-height: 1.45; margin-top: 2px; }
@media (max-width: 720px) { html.ez .empty-card { grid-template-columns: 1fr; gap: 22px; padding: 20px; } html.ez .empty-steps { padding: 20px 0 0; border-left: 0; border-top: 1px solid #e6ebf3; } }
html.ez .form-section-title svg, html.ez .topbar-brand svg { stroke: #232a35; }
html.ez input:focus, html.ez textarea:focus, html.ez select:focus { box-shadow: 0 0 0 3px rgba(143,217,26,.2); border-color: #8fd91a; }

/* буква-аватар в карточке бота: показывается только во встроенном режиме кабинета */
.bot-avatar { display: none; }

/* --- встроенный режим: широкая карточка бота вместо столбика кнопок --- */
html.ez .bots-grid { grid-template-columns: 1fr; gap: 14px; }
html.ez .bot-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "head runtime" "meta runtime" "tools secondary"; gap: 4px 0; padding: 20px 24px 16px; align-items: center; border-radius: 16px; box-shadow: none; border-color: #e6ebf3; animation: none; }
html.ez .bot-card-head { grid-area: head; align-items: center; justify-content: flex-start; gap: 14px; }
html.ez .bot-avatar { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: #eef8e6; color: #12813d; font-weight: 700; font-size: 18px; flex: none; }
html.ez .bot-card-title { font-size: 17px; }
html.ez .bot-card-head .bot-status { margin-left: 4px; }
html.ez .bot-meta { grid-area: meta; flex-direction: row; flex-wrap: wrap; gap: 4px 18px; padding-left: 58px; margin-top: 2px; }
html.ez .bot-actions { display: contents; }
html.ez .bot-runtime-actions { grid-area: runtime; display: flex; gap: 8px; margin-left: 20px; }
html.ez .bot-runtime-actions.single { display: flex; }
html.ez .bot-manage-actions { grid-area: tools; display: flex; flex-wrap: wrap; gap: 4px; padding-top: 12px; margin-top: 12px; border-top: 1px solid #edf1f6; }
html.ez .bot-secondary-actions { grid-area: secondary; display: flex; gap: 4px; padding-top: 12px; margin-top: 12px; border-top: 1px solid #edf1f6; justify-content: flex-end; }
html.ez .bot-actions .bot-action { padding: 7px 10px; font-size: 13px; min-height: 36px; box-shadow: none; }
html.ez .bot-manage-actions .bot-action, html.ez .bot-secondary-actions .bot-action { background: transparent; border-color: transparent; color: #3d4756; }
html.ez .bot-manage-actions .bot-action:hover, html.ez .bot-secondary-actions .bot-action-logs:hover { background: #f3f5f8; border-color: transparent; color: #1b1f24; }
html.ez .bot-actions .bot-action-delete { color: #b42318; }
html.ez .bot-actions .bot-action-delete:hover { background: #fdeceb; border-color: transparent; }
html.ez .bot-actions .bot-action-stop { background: #fff; border-color: #dfe5ee; color: #3d4756; }
html.ez .bot-actions .bot-action-stop svg { color: #b42318; }
html.ez .bot-actions .bot-action-restart { background: #fff; border-color: #dfe5ee; color: #3d4756; }
html.ez .bot-actions .bot-action-restart svg { color: #12813d; }
html.ez .bot-actions .bot-action-stop:hover, html.ez .bot-actions .bot-action-restart:hover { background: #f3f5f8; border-color: #cfd7e3; color: #1b1f24; }
@media (max-width: 720px) {
	html.ez .bot-card { grid-template-columns: 1fr; grid-template-areas: "head" "meta" "runtime" "tools" "secondary"; padding: 16px; }
	html.ez .bot-meta { padding-left: 0; }
	html.ez .bot-runtime-actions { margin: 10px 0 0; }
	html.ez .bot-runtime-actions .bot-action { flex: 1; justify-content: center; }
	html.ez .bot-secondary-actions { justify-content: flex-start; margin-top: 0; padding-top: 0; border-top: 0; }
}

/* --- встроенный режим: форма нового бота у пользователей кабинета --- */
html.ez .modal-head-text { display: grid; gap: 3px; min-width: 0; }
html.ez .editor-sub { margin: 0; color: #5c6a7d; font-size: 13px; line-height: 1.45; }
html.ez .modal-head { align-items: flex-start; }
html.ez .modal-head .btn-ghost { margin-top: -4px; }
html.ez .editor-ez.editor-creating #main-section .form-section-title { display: none; }
html.ez .editor-ez.editor-creating #main-section { margin-bottom: 8px; }
html.ez .editor-ez #ms-section.hidden { display: none; }
html.ez .editor-ez .hint a { color: #12813d; text-decoration: none; border-bottom: 1px solid rgba(18,129,61,.35); }
html.ez .editor-ez .hint a:hover { border-bottom-color: #12813d; }
html.ez .form-section.ez-link { background: none; border: 0; padding: 2px 0 0; color: #5c6a7d; font-size: 13px; }
html.ez .form-section.ez-link b { color: #232a35; font-weight: 600; }

/* привязка бота к аккаунту кабинета ez-business (вместо секции МойСклад) */
.form-section.ez-link { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border: 1px solid #d9e9dc; background: #f4faf5; border-radius: 10px; color: #1f2a22; font-size: 13px; line-height: 1.45; }
.form-section.ez-link svg { flex: none; color: #12813d; margin-top: 1px; }
.form-section.ez-link.hidden { display: none; }

.bot-legal-warn { border: 0; background: none; padding: 0; font: inherit; color: #b25d00; cursor: pointer; text-align: left; }
.bot-legal-warn:hover { text-decoration: underline; }
#ma-lg-status.ma-lg-missing { color: #b25d00; }

.tg-inline-row { display: flex; gap: 4px; }
.tg-inline-btn {
	flex: 1; position: relative; min-width: 0;
	border: none; cursor: default; color: #fff;
	padding: 9px 12px; font: inherit; font-weight: 500;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tg-inline-arrow { position: absolute; top: 5px; right: 5px; opacity: .9; }

.content-head-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.token-input { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; }
.access-banner { flex-wrap: wrap; }
.access-banner-text { flex: 1; min-width: 220px; }
.access-banner-pay { flex: none; }
.bot-tg-error { color: #b42318; }
.ma-r-warn { color: #b25d00; margin: 6px 0 8px; }
.design-theme-new { display: flex; gap: 8px; margin: 8px 0 0; flex-wrap: wrap; }
.design-theme-new input { flex: 1; min-width: 160px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; font: inherit; }
#ma-i-about { font: inherit; font-size: 14px; }
.design-editor select { padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: #fff; font: inherit; font-size: 14px; }

@media (max-width: 560px) {
	.content-head { flex-wrap: wrap; gap: 10px; }
	.content-head-actions { width: 100%; justify-content: stretch; }
	.content-head-actions .btn { flex: 1; justify-content: center; }
	.design-actions { flex-wrap: wrap; gap: 8px; padding-left: 16px; padding-right: 16px; }
	.design-actions #ma-status, .design-actions #design-status { flex: 1 1 100%; order: -1; white-space: normal; }
	.design-actions .btn { flex: 1 1 auto; justify-content: center; }
}
.msg-tab, .menu-btn { transition: background .15s, color .15s, border-color .15s; }

/* ---------- Встроенный режим ---------- */
html.ez { --blue: #12813d; --blue-dark: #0e6b32; --green: #12813d; --text: #1b1f24; --text-soft: #5c6a7d; --border: #e3e8ef; --bg-soft: #f4f6f8; --radius: 14px; }
html.ez body { font-family: Inter, system-ui, -apple-system, 'Segoe UI', sans-serif; color: #232a35; }
html.ez input:focus, html.ez textarea:focus, html.ez select:focus { outline: none; box-shadow: 0 0 0 3px rgba(18, 129, 61, .14); border-color: #12813d; }
html.ez .empty-features li::before { background: #12813d; }
html.ez .btn { border-radius: 10px; min-height: 40px; }
html.ez .btn-primary { background: #12813d; border-color: #12813d; color: #fff; }
html.ez .btn-primary:hover:not(:disabled) { background: #0e6b32; border-color: #0e6b32; }
html.ez .btn-light, html.ez .btn-secondary { background: #fff; border: 1px solid #dfe5ee; color: #232a35; }
html.ez .btn-light:hover:not(:disabled), html.ez .btn-secondary:hover:not(:disabled) { background: #f4f6f8; border-color: #cfd7e3; }
html.ez .btn-danger { background: #c8372d; border-color: #c8372d; color: #fff; }
html.ez .content-head h2 { font-size: 19px; font-weight: 700; color: #1b1f24; }
html.ez .access-banner { border-radius: 14px; }
html.ez .access-banner .btn, html.ez .access-banner-pay { background: #12813d; border-color: #12813d; color: #fff; }
html.ez .access-banner .btn:hover, html.ez .access-banner-pay:hover { background: #0e6b32; }
html.ez .bot-card { border-color: #e6ebf2; box-shadow: 0 1px 2px rgba(16, 24, 40, .04); }
html.ez .bot-status.running { background: #e8f5ec; color: #0e5a2b; }
html.ez .bot-status.running::before { background: #12813d; }
html.ez .bot-copy { border-radius: 10px; }

html.ez input[type=text], html.ez input[type=number], html.ez input[type=url], html.ez input[type=tel], html.ez input[type=email], html.ez input:not([type]), html.ez input[type=password], html.ez textarea, html.ez select { border: 1px solid #dfe5ee; border-radius: 10px; background: #fff; color: #232a35; font: inherit; font-size: 14px; }
html.ez input[type=text], html.ez input[type=number], html.ez input[type=url], html.ez input[type=tel], html.ez input[type=email], html.ez input:not([type]), html.ez input[type=password], html.ez select { min-height: 40px; padding: 8px 11px; }
html.ez textarea { padding: 9px 11px; line-height: 1.45; width: 100%; min-height: 72px; box-sizing: border-box; }
html.ez select { appearance: none; -webkit-appearance: none; padding-right: 32px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235c6a7d' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 11px center; font-weight: 400; }
html.ez input[type=checkbox], html.ez input[type=radio] { accent-color: #12813d; width: 17px; height: 17px; }
html.ez label { color: #232a35; }

html.ez .modal { border-radius: 16px; border: 0; box-shadow: 0 30px 70px -30px rgba(15, 23, 42, .45); }
html.ez .modal-head { padding-bottom: 14px; border-bottom: 1px solid #f0f3f6; }
html.ez .modal-head h3, html.ez .modal-head h2 { font-size: 18px; color: #1b1f24; }
html.ez .form-section-title { font-size: 12px; letter-spacing: .06em; color: #5c6a7d; border-bottom-color: #f0f3f6; }
html.ez .form-section-title svg { stroke: #12813d; }
html.ez .design-actions, html.ez .modal-foot { border-top: 1px solid #f0f3f6; }

html.ez .msg-tab, html.ez .bot-view-tab { border-radius: 9px; border: 1px solid transparent; color: #5c6a7d; font-weight: 600; }
html.ez .msg-tab:hover, html.ez .bot-view-tab:hover { background: #f4f6f8; color: #232a35; }
html.ez .msg-tab.active, html.ez .bot-view-tab.active { background: #e8f5ec; border-color: #cfe7d7; color: #0e5a2b; }
html.ez .menu-btn { border-radius: 9px; }
html.ez .toast { background: #1b1f24; border-radius: 12px; }
html.ez a { color: #12813d; }
html.ez .empty-steps li span, html.ez .bot-avatar { background: #e8f5ec; color: #0e6b32; }
@media (max-width: 640px) {
	html.ez .bot-max-app { flex-wrap: wrap; }
	html.ez .bot-max-app > span { flex: 1 1 0; min-width: 0; }
	html.ez .bot-max-app .bot-copy { flex: 1 1 100%; margin-left: 24px; }
}

/* ---------- ez-business look: header, sign-in, cards, motion ---------- */
html:not(.embed) body { background: #f4f6f8; }
html.ez .topbar { padding: 12px 28px; background: rgba(255, 255, 255, .86); border-bottom-color: #e6ebf1; -webkit-backdrop-filter: saturate(160%) blur(10px); backdrop-filter: saturate(160%) blur(10px); }
html.ez .topbar-brand { gap: 12px; font-size: 16px; letter-spacing: -.01em; }
.brand-mark { display: inline-grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 10px; background: linear-gradient(135deg, #1fa652 0%, #0e6b32 100%); box-shadow: 0 6px 14px -6px rgba(18, 129, 61, .7); }
html.ez .brand-mark svg { stroke: #fff; }
.topbar-brand-sub { padding: 3px 9px; border-radius: 999px; background: #e8f5ec; color: #0e6b32; font-size: 11.5px; font-weight: 700; letter-spacing: 0; }
html.ez .account-avatar { background: linear-gradient(135deg, #1fa652, #0e6b32); box-shadow: 0 3px 10px rgba(18, 129, 61, .25); }
html.ez #logout-btn:hover { color: #b42318; background: #fdeceb; }
html.ez #admin-btn { border-radius: 10px; }

html:not(.embed) .content { padding-top: 36px; }
.content-head-text { display: grid; gap: 4px; min-width: 0; }
.bots-summary { margin: 0; color: #5c6a7d; font-size: 14px; }
.bots-summary:empty { display: none; }
html:not(.embed) .content-head h2 { font-size: 26px; letter-spacing: -.02em; }
html:not(.embed) .content-head { align-items: flex-end; margin-bottom: 22px; }

html.ez .bot-card { background: #fff; border-color: #e6ebf2; box-shadow: 0 1px 2px rgba(16, 24, 40, .04); transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease; animation: cardRise .45s cubic-bezier(.2, .8, .2, 1) backwards; }
html.ez .bot-card:hover { transform: translateY(-1px); border-color: #dbe2ea; box-shadow: 0 14px 34px -16px rgba(16, 24, 40, .22); }
html.ez .bots-grid .bot-card:nth-child(2) { animation-delay: .05s; }
html.ez .bots-grid .bot-card:nth-child(3) { animation-delay: .1s; }
html.ez .bots-grid .bot-card:nth-child(4) { animation-delay: .15s; }
html.ez .bots-grid .bot-card:nth-child(n+5) { animation-delay: .2s; }
@keyframes cardRise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
html.ez .bot-avatar { background: linear-gradient(135deg, #eef8f1, #dcefe3); }
html.ez .bot-status.running .dot { animation: statusRing 2.2s ease-out infinite; }
@keyframes statusRing { 0% { box-shadow: 0 0 0 0 rgba(18, 129, 61, .45); } 70% { box-shadow: 0 0 0 6px rgba(18, 129, 61, 0); } 100% { box-shadow: 0 0 0 0 rgba(18, 129, 61, 0); } }

.bot-skeleton { display: grid !important; grid-template-columns: 1fr !important; grid-template-areas: none !important; align-content: start; gap: 12px; min-height: 136px; padding: 24px !important; }
.bot-skeleton:hover { transform: none !important; box-shadow: 0 1px 2px rgba(16, 24, 40, .04) !important; }
.bot-skeleton i { display: block; height: 14px; border-radius: 7px; background: linear-gradient(90deg, #eef1f5 25%, #f8fafb 37%, #eef1f5 63%); background-size: 400% 100%; animation: shimmer 1.3s ease infinite; }
.bot-skeleton i:nth-child(1) { width: 36%; height: 18px; }
.bot-skeleton i:nth-child(2) { width: 62%; }
.bot-skeleton i:nth-child(3) { width: 84%; }
@keyframes shimmer { from { background-position: 100% 50%; } to { background-position: 0 50%; } }

html.ez .btn { transition: background .18s, border-color .18s, color .18s, box-shadow .18s, transform .12s; }
html.ez .btn:active:not(:disabled) { transform: scale(.97); }
html.ez .btn-primary { box-shadow: 0 8px 18px -10px rgba(18, 129, 61, .8); }
html.ez .btn-primary:hover:not(:disabled) { box-shadow: 0 10px 22px -10px rgba(18, 129, 61, .9); }

html.ez .modal-backdrop { background: rgba(17, 24, 39, .42); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
html.ez .modal { box-shadow: 0 30px 80px -24px rgba(15, 23, 42, .38); animation: modalIn .32s cubic-bezier(.2, .8, .2, 1); }
@keyframes modalIn { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }
html.ez .toast { display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-radius: 12px; box-shadow: 0 14px 34px -12px rgba(15, 23, 42, .5); }
html.ez .toast::before { content: ''; flex: none; width: 8px; height: 8px; border-radius: 50%; background: #3fd07a; }

html:not(.embed) .auth-screen { background: radial-gradient(1100px 560px at 0% 0%, #e3f3e8 0%, rgba(227, 243, 232, 0) 60%), #f4f6f8; }
.auth-aside { display: none; }
html:not(.embed) .auth-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); max-width: 920px; padding: 0; overflow: hidden; text-align: left; border-color: #e6ebf1; border-radius: 20px; box-shadow: 0 30px 80px -32px rgba(15, 23, 42, .32); animation: modalIn .45s cubic-bezier(.2, .8, .2, 1); }
html:not(.embed) .auth-aside { position: relative; display: flex; flex-direction: column; gap: 22px; padding: 40px; overflow: hidden; color: #fff; background: linear-gradient(150deg, #0e6b32 0%, #12813d 55%, #1fa652 100%); }
.auth-aside::after { content: ''; position: absolute; right: -130px; bottom: -150px; width: 360px; height: 360px; border-radius: 50%; background: rgba(255, 255, 255, .08); }
.auth-aside-brand { display: flex; align-items: center; gap: 12px; font-weight: 700; font-size: 16px; }
.auth-aside-brand small { display: block; margin-top: 1px; font-size: 12px; font-weight: 500; opacity: .75; }
html.ez .auth-aside .brand-mark { background: rgba(255, 255, 255, .16); box-shadow: none; }
.auth-aside h2 { position: relative; z-index: 1; margin: 26px 0 0; font-size: 26px; line-height: 1.22; letter-spacing: -.02em; }
.auth-aside-list { position: relative; z-index: 1; display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; font-size: 14.5px; line-height: 1.45; }
.auth-aside-list li { display: flex; gap: 10px; align-items: flex-start; animation: cardRise .5s cubic-bezier(.2, .8, .2, 1) backwards; }
.auth-aside-list li:nth-child(1) { animation-delay: .15s; }
.auth-aside-list li:nth-child(2) { animation-delay: .25s; }
.auth-aside-list li:nth-child(3) { animation-delay: .35s; }
.auth-aside-list li::before { content: ''; flex: none; width: 20px; height: 20px; margin-top: 1px; border-radius: 50%; background: rgba(255, 255, 255, .18) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 12px no-repeat; }
html:not(.embed) .auth-main { padding: 48px 44px; }
html:not(.embed) .auth-logo { display: none; }
html:not(.embed) .auth-card h1 { font-size: 24px; letter-spacing: -.02em; }
html.ez .auth-switch a { color: #12813d; }

@media (max-width: 760px) {
	html:not(.embed) .auth-card { grid-template-columns: 1fr; max-width: 440px; }
	html:not(.embed) .auth-aside { gap: 14px; padding: 26px 24px; }
	.auth-aside h2 { margin-top: 8px; font-size: 20px; }
	.auth-aside-list { font-size: 13.5px; gap: 8px; }
	html:not(.embed) .auth-main { padding: 28px 24px 32px; }
}
@media (max-width: 560px) {
	html.ez .topbar { padding: 10px 14px; }
	.topbar-brand-sub, html.ez #user-name { display: none; }
	html:not(.embed) .content { padding-top: 22px; }
	html:not(.embed) .content-head { align-items: stretch; }
	html:not(.embed) .content-head h2 { font-size: 22px; }
	html.ez .bot-card-head { flex-wrap: wrap; row-gap: 8px; }
	html.ez .bot-card-head .bot-status { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
	html.ez .bot-card:hover, html.ez .btn:active:not(:disabled) { transform: none; }
}

.auth-hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.auth-terms { display: flex !important; gap: 10px; align-items: flex-start; margin: 4px 0 14px; color: #5c6a7d; font-size: 13px; font-weight: 400; line-height: 1.45; cursor: pointer; }
.auth-terms.hidden { display: none !important; }
.auth-terms input { flex: none; width: 17px; height: 17px; margin: 1px 0 0; accent-color: #12813d; }
.auth-terms a { color: #12813d; }

.account-profile-form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.account-profile-foot { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.account-profile-form .check-result { grid-column: 1 / -1; }
.account-upsell { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 16px; border: 1px solid #d9ecdf; border-radius: 12px; background: linear-gradient(135deg, #f3faf5, #e8f5ec); }
.account-upsell b { display: block; color: #1b1f24; font-size: 14px; }
.account-upsell span { display: block; margin-top: 2px; color: #5c6a7d; font-size: 13px; line-height: 1.45; }
.account-upsell .btn { flex: none; text-decoration: none; }
.plan-status { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 14px; padding: 14px 16px; border: 1px solid #d9ecdf; border-radius: 12px; background: #f3faf5; }
.plan-status:empty { display: none; }
.plan-status.trial { border-color: #d6e4ff; background: #f4f8ff; }
.plan-status.warn { border-color: #ffe0a3; background: #fff8e8; }
.plan-status.danger { border-color: #f7c9c4; background: #fdf1ef; }
.plan-status-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.plan-status-main b { font-size: 15px; }
.plan-status-main span { color: #5c6a7d; font-size: 13px; }
.plan-meter { height: 6px; margin-top: 8px; overflow: hidden; border-radius: 3px; background: rgba(15, 23, 42, .08); }
.plan-meter i { display: block; height: 100%; border-radius: 3px; background: #12813d; transition: width .5s cubic-bezier(.2, .8, .2, 1); }
.plan-status.trial .plan-meter i { background: #3b6fd8; }
.plan-status.warn .plan-meter i { background: #d48806; }
.plan-renew { margin-bottom: 14px; }
.plan-renew.hidden, .plan-payments.hidden { display: none; }
.plan-renew-title { display: block; margin-bottom: 10px; font-size: 14px; }
.plan-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.plan-option { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 14px; border: 1px solid #e3e8ef; border-radius: 12px; background: #fff; color: #1b1f24; font: inherit; text-align: left; cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .15s; }
.plan-option:hover:not(:disabled) { border-color: #12813d; box-shadow: 0 6px 18px -10px rgba(18, 129, 61, .5); transform: translateY(-1px); }
.plan-option:disabled { cursor: default; opacity: .65; }
.plan-option.featured { border-color: #9fd3b0; background: linear-gradient(180deg, #f6fbf7, #fff); }
.plan-option.featured::after { content: 'Популярный'; position: absolute; top: -9px; right: 10px; padding: 2px 8px; border-radius: 999px; background: #12813d; color: #fff; font-size: 11px; font-weight: 700; }
.plan-option.loading { opacity: .6; }
.plan-option-term { color: #5c6a7d; font-size: 13px; font-weight: 600; }
.plan-option b { font-size: 20px; letter-spacing: -.01em; }
.plan-option small { color: #8a94a3; font-size: 12px; }
.plan-renew .hint { margin: 10px 0 0; }
.plan-payments { margin-bottom: 14px; }
.plan-payment { display: grid; grid-template-columns: 1.2fr 1fr auto auto auto; align-items: center; gap: 10px; padding: 8px 12px; border-top: 1px solid #edf1f5; font-size: 13px; }
.plan-payment-status { padding: 2px 8px; border-radius: 999px; background: #f1f4f7; color: #5c6a7d; font-size: 12px; font-weight: 600; }
.plan-payment.paid .plan-payment-status { background: #e8f5ec; color: #0e6b32; }
.plan-payment.pending .plan-payment-status { background: #fff4d6; color: #8a5a00; }
.plan-payment .btn { padding: 5px 10px; font-size: 12.5px; }
.team-form { display: grid; grid-template-columns: 1fr 170px auto; gap: 8px; }
html .team-form input, html .team-form select { min-width: 0; margin: 0; }
.team-hint { margin: 8px 0 12px; }
.team-list { display: grid; gap: 8px; }
.team-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid #e6ebf2; border-radius: 10px; background: #fff; animation: cardRise .3s ease backwards; }
.team-avatar { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 10px; background: #e8f5ec; color: #0e6b32; font-weight: 700; }
.team-info { flex: 1; min-width: 0; }
.team-info b { display: block; overflow: hidden; font-size: 14px; white-space: nowrap; text-overflow: ellipsis; }
.team-info span { display: block; margin-top: 2px; color: #5c6a7d; font-size: 12.5px; }
.team-memberships { display: flex; flex-direction: column; gap: 4px; margin-top: 12px; padding: 12px 14px; border-radius: 10px; background: #f7f9fb; font-size: 13px; }
.team-memberships.hidden { display: none; }
.team-memberships span { color: #5c6a7d; }
.auth-support { margin: 14px 0 0; color: #8a94a3; font-size: 13px; }
.auth-support a { color: #12813d; font-weight: 600; text-decoration: none; }
.auth-support a:hover { text-decoration: underline; }
html.ms .auth-support { display: none; }
html.embed .account-body .support-line { display: block; }
.account-body .support-line { margin: 18px 0 4px; }
.bot-team-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; background: #eef3ff; color: #3b5bb5; font-size: 12px; font-weight: 600; }
.bot-team-badge svg { width: 12px; height: 12px; }
@media (max-width: 600px) {
	.plan-status { flex-direction: column; align-items: stretch; }
	.plan-options { grid-template-columns: minmax(0, 1fr); }
	.plan-option { flex-direction: row; flex-wrap: wrap; align-items: baseline; column-gap: 10px; }
	.plan-option small { width: 100%; }
	.plan-payment { grid-template-columns: 1fr auto; }
	.team-form { grid-template-columns: 1fr; }
}
.account-api-form { display: flex; gap: 8px; }
.account-api-form input { flex: 1; min-width: 0; }
.api-key-new { margin-top: 12px; padding: 12px 14px; border: 1px solid #f2d27a; border-radius: 12px; background: #fffbea; font-size: 13px; }
.api-key-new.hidden { display: none; }
.api-key-copy { display: flex; gap: 8px; align-items: center; margin-top: 8px; }
.api-key-copy code { flex: 1; min-width: 0; padding: 8px 10px; border-radius: 8px; background: #fff; border: 1px solid #ecdca5; font: 12.5px ui-monospace, SFMono-Regular, Menlo, monospace; word-break: break-all; }
.api-keys-list { display: grid; gap: 8px; margin-top: 12px; }
.api-key-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border: 1px solid #e6ebf2; border-radius: 10px; background: #fff; animation: cardRise .3s ease backwards; }
.api-key-row b { display: block; font-size: 14px; }
.api-key-row span { display: block; margin-top: 2px; color: #5c6a7d; font-size: 12.5px; }
.api-key-delete:hover { color: #b42318; background: #fdeceb; }
@media (max-width: 560px) {
	.account-profile-form { grid-template-columns: 1fr; }
	.account-upsell { flex-direction: column; align-items: stretch; }
}

.topbar-help { gap: 7px; text-decoration: none; color: #3d4756; font-weight: 600; font-size: 14px; }
.topbar-help:hover { color: #0e6b32; background: #eef8f1; }
.ez-upsell { position: relative; display: flex; align-items: center; gap: 16px; margin-top: 20px; padding: 18px 52px 18px 20px; border: 1px solid #d9ecdf; border-radius: 16px; background: linear-gradient(120deg, #ffffff 0%, #f1f9f3 60%, #e3f3e8 100%); animation: cardRise .5s cubic-bezier(.2, .8, .2, 1) .15s backwards; }
.ez-upsell.hidden { display: none; }
.ez-upsell-icon { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: #fff; color: #12813d; box-shadow: 0 4px 12px -6px rgba(18, 129, 61, .4); }
.ez-upsell-text { flex: 1; min-width: 0; }
.ez-upsell-text b { display: block; color: #1b1f24; font-size: 15px; }
.ez-upsell-text span { display: block; margin-top: 3px; color: #5c6a7d; font-size: 13.5px; line-height: 1.45; }
.ez-upsell-cta { flex: none; text-decoration: none; }
.ez-upsell-close { position: absolute; top: 10px; right: 10px; color: #8a94a3; }
.local-clients-stat { display: flex; align-items: baseline; gap: 10px; padding: 16px 18px; border-radius: 12px; background: #f4f6f8; }
.local-clients-stat strong { font-size: 32px; letter-spacing: -.02em; color: #12813d; }
.local-clients-stat span { color: #5c6a7d; }
.local-clients-list { display: grid; gap: 8px; margin: 14px 0; }
.local-client-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid #e6ebf2; border-radius: 12px; animation: cardRise .3s ease backwards; }
.local-client-row:nth-child(3) { animation-delay: .04s; } .local-client-row:nth-child(4) { animation-delay: .08s; } .local-client-row:nth-child(5) { animation-delay: .12s; } .local-client-row:nth-child(6) { animation-delay: .16s; }
.local-client-avatar { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 50%; background: #e8f5ec; color: #0e6b32; font-weight: 700; }
.local-client-row div { flex: 1; min-width: 0; }
.local-client-row b { display: block; font-size: 14px; }
.local-client-row small { display: block; color: #5c6a7d; font-size: 12.5px; }
.local-client-row strong { color: #12813d; font-size: 14px; }
.local-clients-upsell { padding: 16px 18px; border: 1px solid #d9ecdf; border-radius: 14px; background: linear-gradient(135deg, #f3faf5, #e8f5ec); }
.local-clients-upsell b { font-size: 15px; }
.local-clients-upsell p { margin: 6px 0 12px; color: #5c6a7d; font-size: 13.5px; line-height: 1.5; }
.local-clients-upsell a:not(.btn) { color: #12813d; }
.local-clients-upsell .btn { text-decoration: none; }
@media (max-width: 720px) {
	.ez-upsell { flex-direction: column; align-items: flex-start; padding: 16px 44px 16px 16px; }
	.ez-upsell-cta { width: 100%; justify-content: center; }
	.topbar-help span { display: none; }
}

.access-banner.trial { border-color: #d9ecdf; background: linear-gradient(120deg, #f3faf5, #e8f5ec); color: #1f5c2e; }

/* rich text editor */
.rich-editor { border: 1px solid #dfe5ee; border-radius: 12px; background: #fff; transition: border-color .18s, box-shadow .18s; }
.rich-editor:focus-within { border-color: #12813d; box-shadow: 0 0 0 3px rgba(18, 129, 61, .12); }
.rich-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; padding: 6px; border-bottom: 1px solid #edf1f5; }
.rich-btn { display: inline-grid; place-items: center; min-width: 32px; height: 32px; padding: 0 8px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: #3d4756; font: inherit; font-size: 14px; cursor: pointer; transition: background .15s, color .15s, transform .1s; }
.rich-btn:hover { background: #f1f4f7; color: #1b1f24; }
.rich-btn:active { transform: scale(.94); }
.rich-btn.active { background: #e8f5ec; border-color: #cfe7d7; color: #0e6b32; }
.rich-btn-code { font: 600 12px ui-monospace, SFMono-Regular, Menlo, monospace; }
.rich-btn-wide { display: inline-flex; gap: 5px; font-size: 13px; font-weight: 600; }
.rich-sep { width: 1px; height: 20px; margin: 0 4px; background: #e3e8ef; }
.rich-tip { margin-left: auto; padding-right: 6px; color: #8a94a3; font-size: 12px; }
.rich-area { min-height: 190px; max-height: 360px; overflow-y: auto; padding: 12px 14px; outline: none; color: #1b1f24; font-size: 15px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; cursor: text; }
.rich-area:empty::before { content: attr(data-placeholder); color: #a0a9b6; pointer-events: none; }
.rich-area code, .tg-msg-text code { padding: 1px 5px; border-radius: 5px; background: #eef2f6; font: .9em ui-monospace, SFMono-Regular, Menlo, monospace; }
.rich-area b { font-weight: 700; }
.rich-menu { position: fixed; z-index: 400; min-width: 252px; padding: 6px; border: 1px solid #e3e8ef; border-radius: 12px; background: rgba(255, 255, 255, .97); box-shadow: 0 18px 44px -14px rgba(15, 23, 42, .35), 0 2px 6px rgba(15, 23, 42, .06); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transform-origin: 0 0; animation: richMenuIn .14s cubic-bezier(.2, .8, .2, 1); }
.rich-menu.hidden { display: none; }
@keyframes richMenuIn { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
.rich-menu button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 10px; border: 0; border-radius: 8px; background: transparent; color: #1b1f24; font: inherit; font-size: 14px; text-align: left; cursor: pointer; }
.rich-menu button:hover:not(:disabled), .rich-menu button:focus-visible { outline: none; background: #f1f4f7; }
.rich-menu button:disabled { color: #b2bac6; cursor: default; }
.rich-menu button.active { color: #0e6b32; }
.rich-menu button.active .rich-menu-ico { background: #e8f5ec; color: #0e6b32; }
.rich-menu-ico { display: inline-grid; place-items: center; width: 24px; height: 24px; flex: none; border-radius: 6px; background: #f4f6f8; color: #3d4756; font-size: 13px; }
.rich-menu-mono { font: 600 10.5px ui-monospace, SFMono-Regular, Menlo, monospace; }
.rich-menu kbd { margin-left: auto; padding-left: 14px; color: #9aa3b0; font: 12px Inter, system-ui, sans-serif; }
.rich-menu-sep { height: 1px; margin: 5px 6px; background: #edf1f5; }
@media (max-width: 560px) { .rich-tip { display: none; } .rich-area { min-height: 150px; } }

/* bot page */
.content.on-bot-page > .content-head, .content.on-bot-page > #bot-view-tabs, .content.on-bot-page > #bots-empty, .content.on-bot-page > #bots-list, .content.on-bot-page > #ez-upsell, .content.on-bot-page > #all-bots-panel { display: none !important; }
.content:not(.on-bot-page) > #bot-page { display: none; }
.content.on-bot-page > #bot-page { display: block; animation: cardRise .35s cubic-bezier(.2, .8, .2, 1); }
.bot-page-back { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 14px; color: #5c6a7d; font-size: 14px; font-weight: 600; text-decoration: none; transition: color .15s, transform .15s; }
.bot-page-back:hover { color: #0e6b32; transform: translateX(-2px); }
.bot-page-head { display: flex; align-items: center; gap: 16px; padding: 20px 22px; border: 1px solid #e6ebf2; border-radius: 18px; background: #fff; box-shadow: 0 1px 2px rgba(16, 24, 40, .04); }
.bp-avatar { display: grid !important; place-items: center; width: 52px; height: 52px; flex: none; border-radius: 15px; background: linear-gradient(135deg, #eef8f1, #dcefe3); color: #0e6b32; font-size: 22px; font-weight: 700; }
.bot-page-title { flex: 1; min-width: 0; }
.bot-page-title h2 { margin: 0; overflow: hidden; font-size: 22px; letter-spacing: -.02em; white-space: nowrap; text-overflow: ellipsis; }
.bot-page-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: 4px; }
.bot-page-sub a { color: #5c6a7d; font-size: 14px; text-decoration: none; }
.bot-page-sub a:hover { color: #0e6b32; text-decoration: underline; }
.bot-page-actions { display: flex; gap: 8px; flex: none; }
.bot-page-actions .bp-stop svg { color: #b42318; }
.bot-tabs { position: sticky; top: 58px; z-index: 6; display: flex; gap: 4px; margin: 14px 0 18px; padding: 5px; overflow-x: auto; border: 1px solid #e6ebf2; border-radius: 14px; background: rgba(255, 255, 255, .92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); scrollbar-width: none; }
html.embed .bot-tabs { top: 0; }
.bot-tabs::-webkit-scrollbar { display: none; }
.bot-tabs button { flex: none; padding: 9px 14px; border: 0; border-radius: 10px; background: transparent; color: #5c6a7d; font: inherit; font-size: 14px; font-weight: 600; white-space: nowrap; cursor: pointer; transition: background .18s, color .18s; }
.bot-tabs button:hover { background: #f3f5f8; color: #1b1f24; }
.bot-tabs button.active { background: #e8f5ec; color: #0e6b32; box-shadow: inset 0 0 0 1px #cfe7d7; }
.bp-panel.hidden { display: none; }
.bp-panel { animation: cardRise .3s cubic-bezier(.2, .8, .2, 1); }
html .modal-backdrop.as-page { position: static; inset: auto; z-index: auto; display: block; padding: 0; overflow: visible; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; animation: none; }
html .modal-backdrop.as-page.hidden { display: none; }
html .modal-backdrop.as-page .modal { max-width: none !important; width: 100%; margin: 0; border: 1px solid #e6ebf2; border-radius: 18px; box-shadow: 0 1px 2px rgba(16, 24, 40, .04); animation: cardRise .3s cubic-bezier(.2, .8, .2, 1); }
html .modal-backdrop.as-page .modal-head { display: none; }
html .modal-backdrop.as-page .design-editor { max-height: none; }
html .modal-backdrop.as-page .clients-list { max-height: 620px; }
html .modal-backdrop.as-page .logs-body { max-height: 70vh; border-radius: 18px; }
html .modal-backdrop.as-page #editor-cancel, html .modal-backdrop.as-page #design-cancel, html .modal-backdrop.as-page #messages-cancel { display: none; }
html .modal-backdrop.as-page .design-actions, html .modal-backdrop.as-page .modal-actions { position: sticky; bottom: 0; z-index: 3; padding-top: 12px; padding-bottom: 12px; background: #fff; border-radius: 0 0 18px 18px; }
html .modal-backdrop.as-page .messages-preview { top: 130px; }
.bp-card { padding: 20px 22px; border: 1px solid #e6ebf2; border-radius: 18px; background: #fff; box-shadow: 0 1px 2px rgba(16, 24, 40, .04); }
.bp-card + .bp-card { margin-top: 16px; }
.bp-card h3 { margin: 0 0 4px; font-size: 17px; }
.bp-card > p, .bp-card .bp-sub { margin: 0 0 14px; color: #5c6a7d; font-size: 14px; }
.bp-note b { display: block; font-size: 16px; }
.bp-note p { margin: 6px 0 14px; color: #5c6a7d; }
.support-line { margin: 28px 0 0; color: #8a94a3; font-size: 13.5px; text-align: center; }
.support-line a { color: #12813d; font-weight: 600; text-decoration: none; }
.support-line a:hover { text-decoration: underline; }
html.ms .support-line, html.embed .support-line { display: none; }
.bp-card-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
.bp-card-head .bp-sub { margin: 0; font-size: 13px; }
.bp-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
.bp-grid2 .bp-card + .bp-card { margin-top: 0; }
.bp-grid2 + .bp-card, .stat-grid + .bp-card { margin-top: 16px; }
.bp-actions-row { display: flex; flex-wrap: wrap; gap: 8px; }
.bp-actions-row .btn { text-decoration: none; }
.bot-skeleton-inline { display: grid; gap: 10px; }
.bot-skeleton-inline i { display: block; height: 14px; border-radius: 7px; background: linear-gradient(90deg, #f1f4f7 0%, #e7ecf1 40%, #f1f4f7 80%); background-size: 200% 100%; animation: bpShimmer 1.2s linear infinite; }
.bot-skeleton-inline i:nth-child(2) { width: 70%; }
.bot-skeleton-inline i:nth-child(3) { width: 45%; }
@keyframes bpShimmer { to { background-position: -200% 0; } }

.stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.stat-card { display: flex; flex-direction: column; gap: 2px; padding: 16px 18px; border: 1px solid #e6ebf2; border-radius: 16px; background: #fff; box-shadow: 0 1px 2px rgba(16, 24, 40, .04); animation: cardRise .35s cubic-bezier(.2, .8, .2, 1) both; }
.stat-card:nth-child(2) { animation-delay: 40ms; }
.stat-card:nth-child(3) { animation-delay: 80ms; }
.stat-card:nth-child(4) { animation-delay: 120ms; }
.stat-card span { color: #5c6a7d; font-size: 13px; font-weight: 600; }
.stat-card strong { color: #1b1f24; font-size: 28px; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; font-variant-numeric: tabular-nums; }
.stat-card small { color: #8a94a3; font-size: 12.5px; }

.chart { margin-top: 12px; }
.chart-area { position: relative; height: 150px; border-bottom: 1px solid #e6ebf2; background: repeating-linear-gradient(to top, transparent 0, transparent 37px, #f2f4f7 37px, #f2f4f7 38px); }
.chart-bar { position: absolute; bottom: 0; height: 100%; display: flex; align-items: flex-end; justify-content: center; padding: 0 2px; }
.chart-bar i { display: block; width: 100%; max-width: 18px; border-radius: 5px 5px 2px 2px; background: linear-gradient(180deg, #2fa35a, #12813d); transform-origin: bottom; animation: barGrow .5s cubic-bezier(.2, .8, .2, 1) both; transition: filter .15s; }
.chart-bar:hover i { filter: brightness(1.15); }
@keyframes barGrow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.chart-axis { display: flex; justify-content: space-between; margin-top: 6px; color: #8a94a3; font-size: 12px; }

.rank-list { display: grid; gap: 6px; margin: 8px 0 12px; padding: 0; list-style: none; counter-reset: rank; }
.rank-list li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; background: #f7f9fb; font-size: 14px; counter-increment: rank; }
ol.rank-list li::before { content: counter(rank); display: inline-grid; place-items: center; width: 22px; height: 22px; flex: none; border-radius: 7px; background: #e8f5ec; color: #0e6b32; font-size: 12px; font-weight: 700; }
.rank-list li span { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.rank-list li b { font-variant-numeric: tabular-nums; }
.bp-link-card { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; }
.bp-link-card .bp-sub { margin-bottom: 0; }
.bp-link-row { display: flex; align-items: center; gap: 8px; min-width: 0; max-width: 100%; }
.bp-link-row code { min-width: 0; overflow: hidden; padding: 9px 12px; border: 1px solid #e6ebf2; border-radius: 10px; background: #f7f9fb; font: 13px ui-monospace, SFMono-Regular, Menlo, monospace; white-space: nowrap; text-overflow: ellipsis; }

.bc-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; }
.bc-layout .bp-card + .bp-card { margin-top: 16px; }
.bc-side { position: sticky; top: 124px; }
.bc-layout .rich-editor { margin-top: 4px; }
.bc-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin-top: 14px; }
.bc-row.hidden { display: none; }
.bc-photo { display: flex; gap: 6px; }
.bc-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; margin: 0; color: #3d4756; font-size: 13px; font-weight: 600; }
.bc-field-wide { flex: 1; min-width: 220px; }
html .bc-field input, html .bc-field select { width: 100%; height: 40px; min-height: 40px; margin: 0; padding: 0 12px; border: 1px solid #dfe5ee; border-radius: 10px; background: #fff; color: #1b1f24; font: inherit; font-size: 14px; font-weight: 400; transition: border-color .15s, box-shadow .15s; }
.bc-field input:focus, .bc-field select:focus { outline: none; border-color: #12813d; box-shadow: 0 0 0 3px rgba(18, 129, 61, .12); }
.bc-range { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.bc-subtitle { margin: 22px 0 10px; font-size: 15px; }
.bc-filters { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.bc-send-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 20px; padding-top: 16px; border-top: 1px solid #edf1f5; }
.bc-count { color: #5c6a7d; font-size: 14px; }
.bc-count b { color: #0e6b32; font-size: 16px; }
.bc-preview { padding: 16px 12px; border-radius: 14px; background: #cfe0c3 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cpath d='M10 10h4v4h-4zM40 30h3v3h-3zM25 48h4v2h-4z' fill='%23b9cfa9'/%3E%3C/svg%3E"); }
.bc-bubble { max-width: 92%; overflow: hidden; border-radius: 14px 14px 14px 4px; background: #fff; box-shadow: 0 1px 1px rgba(0, 0, 0, .12); }
.bc-bubble img { display: block; width: 100%; max-height: 260px; object-fit: cover; }
.bc-bubble .tg-msg-text { padding: 8px 11px 9px; white-space: pre-wrap; }
.bc-kb { max-width: 92%; margin-top: 4px; padding: 9px; border-radius: 10px; background: rgba(0, 0, 0, .22); color: #fff; font-size: 14px; font-weight: 600; text-align: center; }
.bc-history { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; max-height: 420px; overflow-y: auto; }
.bc-history .bp-sub { margin: 0; }
.bc-job { display: flex; justify-content: space-between; gap: 10px; padding: 10px 12px; border: 1px solid #edf1f5; border-radius: 12px; font-size: 13px; }
.bc-job-main { display: flex; flex: 1; flex-direction: column; gap: 2px; min-width: 0; }
.bc-job-main span { overflow: hidden; color: #3d4756; white-space: nowrap; text-overflow: ellipsis; }
.bc-job-main small, .bc-job-stat small { color: #8a94a3; }
.bc-job-stat { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; flex: none; text-align: right; }
.bc-job-status { padding: 2px 8px; border-radius: 999px; background: #f1f4f7; color: #5c6a7d; font-size: 12px; font-weight: 600; }
.bc-job.running .bc-job-status { background: #fff4d6; color: #8a5a00; }
.bc-job.done .bc-job-status { background: #e8f5ec; color: #0e6b32; }
.bc-job.failed .bc-job-status { background: #fdecea; color: #b42318; }
.bc-progress { width: 110px; height: 6px; overflow: hidden; border-radius: 3px; background: #edf1f5; }
.bc-progress i { display: block; height: 100%; background: #12813d; transition: width .4s; }
.bc-job-stat .btn { padding: 5px 10px; font-size: 12.5px; }

.promo-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin-bottom: 14px; }
.promo-form .bc-field:not(.bc-field-wide) { width: 190px; }
.promo-form .btn { height: 40px; }
.promo-list { display: grid; gap: 8px; }
.promo-list > .bp-sub { margin: 0; }
.promo-row { display: grid; grid-template-columns: minmax(110px, auto) 1fr auto auto auto; align-items: center; gap: 14px; padding: 10px 12px; border: 1px solid #edf1f5; border-radius: 12px; font-size: 14px; transition: opacity .2s; }
.promo-row code { padding: 4px 9px; border-radius: 8px; background: #e8f5ec; color: #0e6b32; font: 600 13px ui-monospace, SFMono-Regular, Menlo, monospace; justify-self: start; }
.promo-row .bp-sub { margin: 0; font-size: 13px; }
.promo-row.off { opacity: .6; }
.promo-row.off code { background: #f1f4f7; color: #5c6a7d; }
.promo-switch { display: inline-flex; align-items: center; gap: 8px; margin: 0; color: #3d4756; font-size: 13px; font-weight: 500; white-space: nowrap; cursor: pointer; }
html .promo-switch input[type=checkbox] { flex: none; appearance: none; -webkit-appearance: none; position: relative; width: 34px; height: 20px; margin: 0; border-radius: 10px; background: #d5dbe3; cursor: pointer; transition: background .18s; }
.promo-switch input[type=checkbox]::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .2); transition: transform .18s; }
html .promo-switch input[type=checkbox]:checked { background: #12813d; }
.promo-switch input[type=checkbox]:checked::after { transform: translateX(14px); }

@media (max-width: 1080px) {
	.stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.bc-layout { grid-template-columns: minmax(0, 1fr); }
	.bc-side { position: static; }
}
@media (max-width: 720px) {
	.bp-grid2 { grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 12px; }
	.stat-grid { gap: 10px; }
	.stat-card { padding: 12px 14px; }
	.stat-card strong { font-size: 22px; }
	.bp-link-row { width: 100%; }
	.bp-link-row code { flex: 1; }
	.bc-send-row .btn { width: 100%; justify-content: center; }
	.promo-form .bc-field:not(.bc-field-wide) { width: calc(50% - 6px); }
	.promo-form .btn { width: 100%; justify-content: center; }
	.promo-row { grid-template-columns: auto 1fr auto auto; gap: 6px 10px; }
	.promo-row .bp-sub { grid-column: 1 / -1; grid-row: 2; }
	.promo-switch span { display: none; }
	.promo-form .bc-field:nth-child(3) { width: 100%; }
	.bc-row .bc-field { flex: 1 1 100%; }
	.bc-photo { flex: 1 1 100%; }
	.bc-photo .btn:first-of-type { flex: 1; justify-content: center; }
	.bc-job { flex-direction: column; }
	.bc-job-stat { align-items: flex-start; text-align: left; }
}
@media (max-width: 720px) {
	.bot-page-head { flex-wrap: wrap; gap: 12px; padding: 16px; }
	.bot-page-actions { width: 100%; }
	.bot-page-actions .btn { flex: 1; justify-content: center; }
	.bot-tabs { top: 52px; margin: 10px -12px 14px; border-radius: 0; border-left: 0; border-right: 0; }
	.bp-card { padding: 16px; }
	html .modal-backdrop.as-page .modal { border-radius: 14px; }
}

/* ---------- MoySklad solution window (/moysklad/) ---------- */
html.ms body { background: #fff; color: #091739; font-family: Roboto, 'Segoe UI', Helvetica, Arial, sans-serif; }
html.ms .content { padding: 24px 24px 32px; max-width: 1180px; margin: 0 auto; }
html.ms .auth-screen { min-height: 0; padding: 72px 16px; background: transparent; }
html.ms .auth-logo { display: none; }
.ms-account { display: flex; flex-direction: column; gap: 2px; padding: 12px 16px; margin: 0 0 16px; border: 1px solid #e3e8ef; border-radius: 12px; background: #f7f9fb; font-size: 14px; line-height: 1.45; }
.ms-account strong { font-weight: 600; color: #1b1f24; }
.ms-account span { color: #5c6a7d; }
.ms-account.warn { border-color: #ffe0a3; background: #fff8e8; }
.ms-account.warn strong { color: #6b4e00; }
.ms-account.warn span { color: #6b4e00; }
html.ms.modal-open .app { display: none; }
html.ms .modal-backdrop { position: static; inset: auto; display: block; background: transparent; padding: 24px; overflow: visible; animation: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
html.ms .modal-backdrop:not(.hidden):has(~ .modal-backdrop:not(.hidden)) { display: none; }
html.ms .modal { margin: 0 auto; border: 1px solid #e3e8ef; box-shadow: none; animation: none; }
html.ms .modal-backdrop.closing, html.ms .modal-backdrop.closing .modal { animation: none; }
html.ms .logs-body { max-height: 520px; }
html.ms .design-editor { max-height: 680px; }
html.ms .clients-list { max-height: 480px; }
html.ms .toast { position: absolute; bottom: auto; }
@media (max-width: 560px) {
	html.ms .content { padding: 16px 12px 24px; }
	html.ms .modal-backdrop { padding: 12px; }
	html.ms .modal, html.ms .modal-wide, html.ms .modal-design { max-height: none; border-radius: 14px; }
}

/* onboarding tour */
.tour { position: fixed; inset: 0; z-index: 500; display: grid; place-items: center; padding: 16px; background: rgba(15, 23, 42, .42); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: tourFade .2s ease; }
.tour.hidden { display: none; }
@keyframes tourFade { from { opacity: 0; } to { opacity: 1; } }
.tour-card { position: relative; width: 100%; max-width: 440px; padding: 32px 28px 22px; border-radius: 22px; background: #fff; box-shadow: 0 30px 70px -20px rgba(15, 23, 42, .45); text-align: center; }
.tour-card.tour-anim .tour-art, .tour-card.tour-anim h3, .tour-card.tour-anim p { animation: tourIn .32s cubic-bezier(.2, .8, .2, 1) both; }
.tour-card.tour-anim h3 { animation-delay: 30ms; }
.tour-card.tour-anim p { animation-delay: 60ms; }
@keyframes tourIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.tour-skip { position: absolute; top: 14px; right: 14px; padding: 6px 10px; border: 0; border-radius: 8px; background: transparent; color: #8a94a3; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.tour-skip:hover { background: #f3f5f8; color: #1b1f24; }
.tour-art { display: grid; place-items: center; width: 92px; height: 92px; margin: 4px auto 14px; border-radius: 28px; background: linear-gradient(135deg, #eef8f1, #dcefe3); font-size: 46px; line-height: 1; }
.tour-art img.ez-emoji { width: 52px; height: 52px; margin: 0; vertical-align: middle; }
.tour-step-label { color: #12813d; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.tour-card h3 { margin: 6px 0 8px; font-size: 21px; letter-spacing: -.02em; }
.tour-card p { min-height: 66px; margin: 0 0 20px; color: #5c6a7d; font-size: 14.5px; line-height: 1.55; }
.tour-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.tour-dots { display: flex; gap: 6px; }
.tour-dots button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 4px; background: #d5dbe3; cursor: pointer; transition: width .2s, background .2s; }
.tour-dots button.active { width: 22px; background: #12813d; }
.tour-buttons { display: flex; gap: 8px; }
.invisible { visibility: hidden; }
@media (max-width: 480px) {
	.tour { align-items: end; padding: 0; }
	.tour-card { max-width: none; padding: 28px 20px calc(18px + env(safe-area-inset-bottom)); border-radius: 22px 22px 0 0; }
	.tour-foot { flex-direction: column-reverse; align-items: stretch; }
	.tour-dots { justify-content: center; }
	.tour-buttons .btn { flex: 1; justify-content: center; }
}
.plan-renew .hint, .team-hint { color: #5c6a7d; font-size: 13px; font-weight: 400; line-height: 1.45; }
html .team-form input, html .team-form select, .team-form .btn { height: 42px; min-height: 42px; }