:root {
	--bg: #0f1419;
	--panel: #161d26;
	--panel2: #1c2530;
	--line: #2a3644;
	--text: #d7e0ea;
	--muted: #7d8b9c;
	--accent: #4fb3a8;
	--accent2: #e0a458;
	--danger: #d4695f;
	--radius: .5rem;
}

* { box-sizing: border-box; }

html {
	/*Корень задаёт масштаб интерфейса: 13px * масштаб (1…3).*/
	font-size: 39px;
}

html, body {
	margin: 0;
	height: 100%;
	background: var(--bg);
	color: var(--text);
	font: 1rem/1.45 "Segoe UI", "Inter", system-ui, sans-serif;
}

body { display: flex; flex-direction: column; }

header {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: .45rem;
	padding: .5rem .8rem;
	min-height: 3.4rem;
	background: var(--panel);
	border-bottom: 1px solid var(--line);
	flex: 0 0 auto;
}

.brand { font-size: 1.2rem; font-weight: 600; letter-spacing: .3px; margin-right: .3rem; }
.brand span { color: var(--accent); }

.spacer { flex: 1; }

button, select, input, textarea {
	font: inherit;
	color: var(--text);
	background: var(--panel2);
	border: 1px solid var(--line);
	border-radius: .4rem;
	padding: .35rem .65rem;
	outline: none;
}

button { cursor: pointer; }
button:hover { border-color: #3b4b5e; background: #202a36; }
button:disabled { opacity: .45; cursor: default; }
button.primary { background: #1f4a46; border-color: #2f6b64; color: #dff5f1; }
button.primary:hover { background: #265a55; }
button.danger { border-color: #6a3733; color: #f0b8b3; }

input:focus, select:focus, textarea:focus { border-color: var(--accent); }

#dirty { color: var(--accent2); visibility: hidden; font-size: 1.2rem; }
#dirty.on { visibility: visible; }

.muted { color: var(--muted); font-size: .85rem; }

main { flex: 1 1 auto; display: flex; min-height: 0; }

aside {
	width: clamp(260px, 22rem, 430px);
	flex: 0 0 auto;
	background: var(--panel);
	border-right: 1px solid var(--line);
	display: flex;
	flex-direction: column;
	min-height: 0;
}

.aside-bar { display: flex; flex-wrap: wrap; gap: .4rem; padding: .5rem; border-bottom: 1px solid var(--line); }
.aside-bar button { flex: 1 1 auto; font-size: .85rem; white-space: nowrap; }

#tree { overflow: auto; padding: .4rem; }

.node {
	padding: .25rem .4rem;
	border-radius: .35rem;
	cursor: pointer;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.node:hover { background: #1e2833; }
.node.sel { background: #234047; }
.node .tag { color: var(--muted); font-size: .8rem; margin-left: .4rem; }

.group { margin-top: .7rem; }
.group > .head {
	font-size: .8rem;
	text-transform: uppercase;
	letter-spacing: .5px;
	color: var(--muted);
	padding: .3rem .4rem;
}

.child { padding-left: 1.2rem; }
.child2 { padding-left: 2.2rem; }

#work { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; min-height: 0; }

.tabs { display: flex; gap: .15rem; padding: .5rem .8rem 0; border-bottom: 1px solid var(--line); flex-wrap: wrap; flex: 0 0 auto; }
.tabs button {
	border: 1px solid transparent;
	border-bottom: none;
	background: transparent;
	border-radius: .4rem .4rem 0 0;
	padding: .4rem .9rem;
	color: var(--muted);
}
.tabs button.active { background: var(--panel); border-color: var(--line); color: var(--text); }

.tab { padding: .8rem; overflow: auto; flex: 1 1 auto; min-height: 0; }
.hidden { display: none !important; }

.toolbar { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: .5rem; }
.toolbar h3 { margin: 0; font-size: .95rem; }

.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }

.panel {
	background: var(--panel);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: .8rem;
	margin-bottom: .8rem;
}

.panel h3 { margin: 0 0 .6rem; font-size: .85rem; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); }

.fields { display: grid; grid-template-columns: minmax(7rem, 10rem) 1fr; gap: .45rem .7rem; align-items: center; margin-bottom: .8rem; }
.fields.two { grid-template-columns: minmax(9rem, 12rem) 1fr minmax(9rem, 12rem) 1fr; }
.fields label { color: var(--muted); font-size: .85rem; }
.fields input, .fields select { width: 100%; }
.fields input[type="checkbox"] { width: auto; }
.fields .wide { grid-column: 2; display: flex; gap: .4rem; align-items: center; }
.fields .wide select { flex: 1 1 auto; min-width: 8rem; }

/* Узкая правая панель: эталон и кнопки — столбиком, без горизонтального выноса. */
.fields .wide.ref-stack { flex-direction: column; align-items: stretch; gap: .35rem; }
.fields .wide.ref-stack select { min-width: 0; width: 100%; }
.fields .wide.ref-stack button { width: 100%; }

/* Форма «Модель»: поля без подписей, друг под другом. */
.model-about-form { display: grid; gap: .5rem; margin-bottom: .8rem; }
.model-about-form input, .model-about-form textarea { width: 100%; }

/* Подписи — над полями: блок помещается в узкую панель без горизонтального выноса. */
#run-pane-initial .fields { display: block; }
#run-pane-initial .fields > label { display: block; margin: .45rem 0 .2rem; }
#run-pane-initial .fields > div { margin-bottom: .3rem; }
#run-pane-initial .fields input,
#run-pane-initial .fields select { width: 100%; }
#run-pane-initial .check { white-space: normal; }

.series-list { display: grid; grid-template-columns: 1fr 1fr; gap: .1rem .8rem; margin-bottom: .6rem; max-height: 16rem; overflow: auto; }
.series-list label { font-size: .85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.check { color: var(--muted); font-size: .85rem; white-space: nowrap; }

.chart { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: .5rem; margin-bottom: .6rem; }
.chart svg { display: block; width: 100%; height: clamp(220px, 18rem, 460px); }
.chart.small svg { height: clamp(140px, 11rem, 280px); }

.legend { display: flex; flex-wrap: wrap; gap: .2rem .9rem; padding: .2rem .1rem .5rem; }
.legend label { display: inline-flex; align-items: center; gap: .4rem; font-size: .8rem; color: var(--muted); cursor: pointer; }
.legend .swatch { width: .8rem; height: .2rem; border-radius: 2px; display: inline-block; }
.legend input { margin: 0; }

.table-wrap { overflow: auto; border: 1px solid var(--line); border-radius: var(--radius); }
table { border-collapse: collapse; width: 100%; font-size: .78rem; }
th, td { text-align: left; padding: .3rem .5rem; border-bottom: 1px solid var(--line); white-space: nowrap; }
th { color: var(--muted); font-weight: 500; position: sticky; top: 0; background: var(--panel); }
tr.sel td { background: #234047; }
tbody tr { cursor: pointer; }
tbody tr:hover td { background: #1e2833; }

.progress { height: .4rem; background: var(--panel2); border-radius: .2rem; overflow: hidden; margin-bottom: .6rem; }
.progress div { height: 100%; width: 0; background: var(--accent); transition: width .25s; }

#log-list { font-family: "JetBrains Mono", Consolas, monospace; font-size: .8rem; }
#log-list div { padding: .1rem 0; border-bottom: 1px solid #1b232d; }
#log-list .t { color: var(--muted); margin-right: .5rem; }
#log-list .err { color: var(--danger); }
#log-list .ok { color: var(--accent); }

#toast {
	position: fixed;
	right: .8rem;
	bottom: 4rem;
	background: var(--panel2);
	border: 1px solid var(--line);
	border-left: 3px solid var(--accent);
	border-radius: .4rem;
	padding: .6rem .9rem;
	max-width: 24rem;
	box-shadow: 0 8px 24px rgba(0,0,0,.45);
	z-index: 20;
}
#toast.error { border-left-color: var(--danger); }

.hint { color: var(--muted); font-size: .8rem; margin: .5rem 0 0; }

.kv { display: grid; grid-template-columns: auto 1fr; gap: .25rem .8rem; font-size: .85rem; }
.kv .k { color: var(--muted); }
.mono { font-family: "JetBrains Mono", Consolas, monospace; }

/* Кнопка «Зафиксировать задачу» и форма задачи */
#btn-feedback {
	position: fixed;
	right: .8rem;
	bottom: .8rem;
	font-size: .8rem;
	padding: .3rem .6rem;
	z-index: 15;
	background: #2a3a4c;
	border-color: #3b5168;
	box-shadow: 0 6px 18px rgba(0,0,0,.4);
}
#btn-feedback:hover { background: #33465c; }

dialog#feedback-dialog {
	width: min(92vw, 34rem);
	background: var(--panel);
	color: var(--text);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 0;
}
dialog#feedback-dialog::backdrop { background: rgba(0,0,0,.6); }
dialog#feedback-dialog form { padding: .9rem; display: grid; gap: .6rem; }
dialog#feedback-dialog h3 { margin: 0; font-size: 1rem; }
dialog#feedback-dialog textarea { resize: vertical; min-height: 6rem; width: 100%; }
dialog#feedback-dialog .fields { margin: 0; }

.task {
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: .6rem;
	margin-bottom: .6rem;
	background: var(--panel);
}
.task .head { display: flex; gap: .6rem; flex-wrap: wrap; color: var(--muted); font-size: .8rem; margin-bottom: .3rem; }
.task .text { white-space: pre-wrap; }

/* Экраны: вход, кабинет, рабочее место */
.view { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
.view.hidden { display: none !important; }

#auth-view { align-items: center; justify-content: center; padding: 1rem; }
.auth-card {
	width: min(92vw, 26rem);
	background: var(--panel);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 1.2rem;
	display: grid;
	gap: .7rem;
}
.auth-form { display: grid; gap: .5rem; }
.auth-form h3 { margin: 0; font-size: 1rem; }
.auth-form input { width: 100%; }
button.link {
	background: none;
	border: none;
	color: var(--accent);
	text-decoration: underline;
	padding: 0;
	justify-self: start;
}

#dashboard header { min-height: 3rem; }
.dash-main { flex: 1 1 auto; overflow: auto; padding: 1rem; display: block; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: .8rem; }
.card {
	background: var(--panel);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: .8rem;
	cursor: pointer;
	display: grid;
	gap: .25rem;
}
.card:hover { border-color: var(--accent); }
.card .name { font-weight: 600; font-size: 1rem; }
.card .meta { color: var(--muted); font-size: .8rem; }

h2 { margin: 0; font-size: 1.15rem; }
h4 { margin: .9rem 0 .4rem; color: var(--muted); font-size: .8rem; text-transform: uppercase; letter-spacing: .5px; }

.balance {
	font-size: .85rem;
	padding: .15rem .5rem;
	border-radius: 1rem;
	border: 1px solid #2f6b64;
	color: #9fe3d8;
	background: #16322f;
}
.balance.neg { border-color: #7a3b34; color: #f2b3ac; background: #3a1d1a; }

.run-group { margin-bottom: .8rem; border: 1px solid var(--line); border-radius: var(--radius); }
.run-group > .head {
	display: flex; align-items: center; gap: .6rem;
	padding: .5rem .7rem; border-bottom: 1px solid var(--line);
	background: var(--panel); font-weight: 600;
}
.run-group > .head .count { color: var(--muted); font-weight: 400; font-size: .8rem; }
.run-row {
	display: grid; grid-template-columns: 2.2fr 1fr 1.4fr auto;
	gap: .6rem; align-items: center;
	padding: .45rem .7rem; border-bottom: 1px solid #1b232d; cursor: pointer;
}
.run-row:last-child { border-bottom: none; }
.run-row:hover { background: #1e2833; }
.run-row .name { font-weight: 500; }
.run-row .muted { font-size: .8rem; }
.run-row .tag {
	display: inline-block; padding: 0 .4rem; margin-right: .25rem;
	border: 1px solid var(--line); border-radius: 1rem; font-size: .75rem; color: var(--muted);
}
dialog#run-dialog, dialog#model-meta-dialog {
	width: min(92vw, 32rem); background: var(--panel); color: var(--text);
	border: 1px solid var(--line); border-radius: var(--radius); padding: 0;
}
dialog#run-dialog form, dialog#model-meta-dialog form { padding: .9rem; display: grid; gap: .6rem; }
dialog#reactor-dialog {
	width: min(94vw, 46rem); background: var(--panel); color: var(--text);
	border: 1px solid var(--line); border-radius: var(--radius); padding: 0;
}
dialog#reactor-dialog::backdrop { background: rgba(0,0,0,.6); }
dialog#reactor-dialog form { padding: .9rem; display: grid; gap: .6rem; }
dialog#reactor-dialog .table-wrap { max-height: 46vh; overflow: auto; }
dialog#reactor-dialog h4 { margin: .4rem 0 .2rem; font-size: .85rem; color: var(--muted); }
dialog::backdrop { background: rgba(0,0,0,.6); }

/* Раскладка проекта: закладки Модель / Прогон / Оптимизация */
.pane { flex: 1 1 auto; overflow: auto; padding: .8rem; min-height: 0; }
.pane.hidden { display: none !important; }
.model-pane { padding: 0; display: flex; flex-direction: column; }
.model-toolbar { padding: .6rem .8rem; margin: 0; border-bottom: 1px solid var(--line); }
/* На широком экране в тулбаре остаётся только мобильная кнопка «Дерево». */
@media (min-width: 601px) {
	.model-toolbar { display: none; }
}
.model-body { flex: 1 1 auto; display: flex; min-height: 0; }
.props-pane { flex: 1 1 auto; overflow: auto; padding: .8rem; min-width: 0; }
.main-tabs { padding: .5rem .8rem 0; border-bottom: 1px solid var(--line); }
.subtabs { display: flex; gap: .2rem; margin: 0 0 .6rem; }
.subtabs button {
	background: transparent; border: 1px solid transparent; border-bottom: none;
	border-radius: .4rem .4rem 0 0; color: var(--muted); padding: .35rem .8rem;
}
.subtabs button.active { background: var(--panel); border-color: var(--line); color: var(--text); }
#dash-log, #dash-tasks { padding: .8rem 0; }

dialog#data-dialog {
	width: min(92vw, 40rem); background: var(--panel); color: var(--text);
	border: 1px solid var(--line); border-radius: var(--radius); padding: 0;
}
dialog#data-dialog form { padding: .9rem; display: grid; gap: .6rem; }

/* ---------- левая панель модели: параметры и реакторы ---------- */

.aside-tabs {
	display: flex;
	gap: .2rem;
	padding: .4rem .4rem 0;
	border-bottom: 1px solid var(--line);
	flex: 0 0 auto;
}
.aside-tabs button {
	flex: 1 1 auto;
	background: transparent;
	border: 1px solid transparent;
	border-bottom: none;
	border-radius: .4rem .4rem 0 0;
	color: var(--muted);
	padding: .35rem .5rem;
	font-size: .85rem;
}
.aside-tabs button.active {
	background: var(--panel2);
	border-color: var(--line);
	color: var(--text);
}
.aside-add { padding: .2rem 0 .5rem; }
.aside-add button { width: 100%; font-size: .85rem; }

.node .caret {
	display: inline-block;
	width: 1.05rem;
	color: var(--muted);
	user-select: none;
}
.node.reactor { font-weight: 600; }
.node.child2 { padding-left: 2.6rem; }

/* ---------- задачи: отметка «в работе» ---------- */

.task .badge {
	padding: 0 .45rem;
	border-radius: 1rem;
	border: 1px solid var(--line);
	font-size: .75rem;
}
.task .badge.new { color: #9fb6cf; border-color: #33465c; background: #1b2733; }
.task .badge.approved { color: #f0c88a; border-color: #6b5632; background: #2a2418; }
.task .badge.done { color: #9fe3d8; border-color: #2f6b64; background: #16322f; }
.task .badge.rejected { color: #f2b3ac; border-color: #7a3b34; background: #3a1d1a; }
.task.approved { border-left: .3rem solid var(--accent2); background: #1b2523; }
.task.done { opacity: .7; }
.task .toolbar button[disabled] { opacity: .8; border-color: #6b5632; color: #f0c88a; }

/* ---------- адаптация под планшет и телефон ---------- */

html { -webkit-text-size-adjust: 100%; }
body { min-height: 100dvh; }

@media (max-width: 900px) {
	.grid2 { grid-template-columns: 1fr; }
	.model-body { flex-direction: column; }
	aside {
		width: 100%;
		max-height: 45vh;
		border-right: none;
		border-bottom: 1px solid var(--line);
	}
	.props-pane { padding: .6rem; }
	.fields.two { grid-template-columns: minmax(8rem, 10rem) 1fr; }
}

@media (max-width: 600px) {
	header { padding: .35rem .5rem; gap: .3rem; }
	header .brand { font-size: 1rem; }
	#user-email { display: none; }

	.main-tabs {
		flex-wrap: nowrap;
		overflow-x: auto;
		padding: .4rem .4rem 0;
		scrollbar-width: none;
	}
	.main-tabs::-webkit-scrollbar { display: none; }
	.main-tabs button { flex: 0 0 auto; padding: .45rem .7rem; }

	.dash-main { padding: .5rem; }
	.cards { grid-template-columns: 1fr; }
	.pane { padding: .5rem; }
	.panel { padding: .6rem; }

	.fields, .fields.two { grid-template-columns: 1fr; gap: .2rem; }
	.fields .wide { grid-column: 1; flex-wrap: wrap; }
	.fields .wide input[type="number"] { flex: 1 1 0; width: auto; min-width: 0; }
	.fields label { margin-top: .35rem; }
	.fields input, .fields select { min-width: 0; }

	.series-list { grid-template-columns: 1fr; }
	.run-row { grid-template-columns: 1fr; gap: .15rem; }

	.model-toolbar { padding: .4rem; }

	dialog, dialog#data-dialog, dialog#run-dialog,
	dialog#feedback-dialog { width: 96vw; max-height: 92dvh; }

	.chart svg { height: 200px; }
	.chart.small svg { height: 150px; }
	.task .head { gap: .35rem; }
	#toast {
		left: .5rem;
		right: .5rem;
		bottom: calc(.5rem + env(safe-area-inset-bottom));
		max-width: none;
	}
	button, select, input, textarea { min-height: 2.2rem; }
}

/* ---------- телефон: левая панель за кнопкой ---------- */

.only-mobile { display: none; }
#btn-aside.on { border-color: var(--accent); color: var(--accent); }

@media (max-width: 600px) {
	.only-mobile { display: inline-block; }
	.model-body.aside-closed aside { display: none; }
	.model-body:not(.aside-closed) .props-pane { display: none; }
	.model-body:not(.aside-closed) aside {
		max-height: none;
		flex: 1 1 auto;
	}
	.model-body:not(.aside-closed) #tree {
		flex: 1 1 auto;
		min-height: 0;
	}
}

/* ---------- ползунок времени ---------- */

.run-slider {
	display: flex;
	align-items: center;
	gap: .6rem;
	width: 100%;
	margin-bottom: .7rem;
}
.run-slider input[type="range"] { flex: 1 1 auto; width: 100%; min-width: 0; }
.run-slider #run-step-label { min-width: 2.5rem; text-align: right; font-variant-numeric: tabular-nums; }

#run-rule .table-wrap { margin-top: .35rem; }
#run-rule table { font-size: .76rem; }
#run-rule .num { font-family: "JetBrains Mono", Consolas, monospace; }
#run-rule h4 { margin-top: .6rem; }

dialog#feedback-edit-dialog {
	width: min(92vw, 40rem);
	background: var(--panel);
	color: var(--text);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 0;
}
dialog#feedback-edit-dialog::backdrop { background: rgba(0,0,0,.6); }
dialog#feedback-edit-dialog form { padding: .9rem; display: grid; gap: .6rem; }
dialog#feedback-edit-dialog h3 { margin: 0; font-size: 1rem; }
dialog#feedback-edit-dialog textarea { resize: vertical; min-height: 10rem; width: 100%; }

@media (max-width: 600px) {
	.run-slider { gap: .4rem; }
}

/* ---------- выбор реакторов для графиков Power ---------- */

.run-power-bar {
	display: flex;
	align-items: center;
	gap: .5rem;
	flex-wrap: wrap;
	margin-bottom: .5rem;
}
.run-power-bar label { color: var(--muted); font-size: .85rem; }
.run-power-bar select { min-width: 12rem; max-width: 100%; }
.run-power-bar .hint { margin: 0; }

@media (max-width: 600px) {
	.run-power-bar select { min-width: 0; flex: 1 1 12rem; }
}

/* Значение сенсора и переключатель точки/диапазона — одной строкой. */
.fields .wide input[data-path="insideValue"],
.fields .wide input[data-path="inside.0"],
.fields .wide input[data-path="inside.1"] { flex: 1 1 5rem; width: auto; min-width: 4rem; }
.fields .wide button { flex: 0 0 auto; }

/* Описание реактора и ИИ-интерпретация. */
.fields textarea {
	width: 100%;
	min-height: 4.5rem;
	resize: vertical;
}
#ai-form input[type="password"] { font-family: ui-monospace, monospace; }

/* Контекст доработки: что было открыто. */
#fb-context { margin: .3rem 0 0; white-space: pre-wrap; }
.task-context { margin: .3rem 0 0; }
.task-context summary { cursor: pointer; color: var(--muted); font-size: .85rem; }
.task-context pre {
	max-height: 20rem;
	overflow: auto;
	white-space: pre-wrap;
	font-size: .78rem;
	line-height: 1.35;
	background: #0f1419;
	border: 1px solid var(--line);
	border-radius: 6px;
	padding: .5rem;
	margin: .3rem 0 0;
}

/* Описание модели в панели «Модель». */
.model-description {
	white-space: pre-wrap;
	line-height: 1.45;
	color: var(--text);
}

/* ---------- прогон: три панели ---------- */

#tab-run { overflow: hidden; }
.run-layout {
	display: flex;
	gap: .6rem;
	height: calc(100vh - 11.5rem);
	min-height: 30rem;
	align-items: stretch;
}
.run-side {
	flex: 0 0 16rem;
	display: flex;
	flex-direction: column;
	min-height: 0;
	overflow: hidden;
	background: var(--panel);
	border: 1px solid var(--line);
	border-radius: var(--radius);
}
.run-side.run-right { flex: 0 0 23rem; }
.run-layout.left-collapsed #run-left { display: none; }
.run-layout.right-collapsed #run-right { display: none; }
.run-side-head {
	display: flex;
	align-items: center;
	gap: .45rem;
	padding: .45rem .55rem;
	border-bottom: 1px solid var(--line);
	flex: 0 0 auto;
}
.run-side-head h3 { margin: 0; font-size: .95rem; }
.run-side-head .icon { margin-left: auto; }
.run-side-tools { margin: 0; padding: .4rem .5rem; flex: 0 0 auto; }
#history-list { flex: 1 1 auto; overflow: auto; padding: .35rem; min-height: 0; }
.run-center {
	flex: 1 1 auto;
	min-width: 0;
	min-height: 0;
	display: flex;
	flex-direction: column;
	overflow: auto;
}
.run-center-head {
	display: flex;
	align-items: center;
	gap: .5rem;
	padding: .1rem .1rem .35rem;
	flex: 0 0 auto;
}
.run-center-title { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; min-width: 0; }
.run-center-title h3 { margin: 0; font-size: 1rem; }
.run-center .chart { flex: 0 0 auto; }
.run-pane { flex: 1 1 auto; overflow: auto; padding: .55rem; min-height: 0; }
#run-info .panel { margin-top: 0; }
#run-right-tabs { margin: 0; flex-wrap: wrap; }
#run-right-tabs button { padding: .25rem .5rem; font-size: .8rem; }
.run-row.sel { border-color: var(--accent); background: #1b2a2a; }
.icon {
	min-width: 2rem;
	padding: .2rem .4rem;
	line-height: 1;
}

@media (max-width: 1100px) {
	.run-side { flex: 0 0 13rem; }
	.run-side.run-right { flex: 0 0 19rem; }
}

@media (max-width: 900px) {
	#tab-run { overflow: auto; }
	.run-layout { flex-direction: column; height: auto; min-height: 0; }
	.run-side, .run-side.run-right { flex: 0 0 auto; max-height: 40vh; }
	.run-center { overflow: visible; }
}

/* ---------- админка: закладки ---------- */

#admin-tabs { margin-bottom: .8rem; }
.admin-pane { min-height: 0; }
.task.done {
	opacity: 1;
	border-left: .3rem solid #5aa0ff;
	background: rgba(90, 160, 255, .12);
}
.task.done .head { color: #a9c8f5; }
.task.done .badge {
	color: #a9c8f5;
	border-color: #2f5d8a;
	background: rgba(90, 160, 255, .18);
}

/* Строка прогона в левой панели — только название. */
.run-row {
	display: flex;
	align-items: center;
	padding: .45rem .7rem;
}
.run-row .name {
	flex: 1 1 auto;
	min-width: 0;
	font-weight: 500;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Верхняя строка: логотип, контекстные закладки, справа — пользователь. */
header { flex-wrap: wrap; row-gap: .3rem; }
header .main-tabs {
	padding: 0;
	margin: 0 0 0 .3rem;
	border-bottom: none;
	flex-wrap: wrap;
}
header .main-tabs button {
	padding: .3rem .55rem;
	font-size: .9rem;
}

/* Выбор модели в верхней строке: вместо закладки «Модель». */
.model-menu { position: relative; display: flex; }
.model-menu-btn {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	max-width: min(18rem, 46vw);
	border: 1px solid transparent;
	border-right: 0;
	border-bottom: none;
	background: transparent;
	border-radius: .4rem 0 0 0;
	padding: .3rem .5rem;
	font-size: .9rem;
	color: var(--muted);
}
.model-menu-toggle {
	display: inline-flex;
	align-items: center;
	border: 1px solid transparent;
	border-bottom: none;
	background: transparent;
	border-radius: 0 .4rem 0 0;
	padding: .3rem .45rem;
	font-size: .8rem;
	color: var(--muted);
}
.model-menu-btn:hover, .model-menu-toggle:hover { color: var(--text); }
.model-menu-btn.active, .model-menu-toggle.active {
	background: var(--panel);
	border-color: var(--line);
	color: var(--text);
}
.model-menu-btn .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.model-menu-list {
	position: absolute;
	top: calc(100% + .2rem);
	left: 0;
	z-index: 60;
	min-width: 12rem;
	max-width: min(24rem, calc(100vw - 1rem));
	max-height: 60vh;
	overflow: auto;
	background: var(--panel2);
	border: 1px solid var(--line);
	border-radius: .4rem;
	padding: .25rem;
	box-shadow: 0 12px 32px rgba(0, 0, 0, .5);
}
.model-menu-item, .model-menu-new {
	display: block;
	width: 100%;
	text-align: left;
	border: 0;
	border-radius: .3rem;
	background: transparent;
	padding: .35rem .5rem;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.model-menu-item:hover, .model-menu-new:hover { background: #202a36; }
.model-menu-item.sel { color: var(--accent); }
.model-menu-new {
	margin-top: .25rem;
	padding-top: .45rem;
	border-top: 1px solid var(--line);
	border-radius: 0 0 .3rem .3rem;
	color: var(--accent);
}
#btn-back {
	min-width: 2rem;
	padding: .2rem .45rem;
}

/* nxReact: бренд-ссылка и подпись проекта. */
.brand-link {
	background: none;
	border: 0;
	padding: 0;
	font: inherit;
	color: inherit;
	cursor: pointer;
}
.brand-link:hover { color: var(--accent); }
#btn-back { min-width: 0; padding: 0; border: 0; background: none; }
.project-name {
	font-style: italic;
	color: #e0a458;
	font-weight: 400;
	white-space: nowrap;
}
.project-name::before { content: "["; }
.project-name::after { content: "]"; }

/* Сплиттеры между панелями прогона. */
.run-splitter {
	flex: 0 0 6px;
	align-self: stretch;
	cursor: col-resize;
	border-radius: 3px;
	background: transparent;
}
.run-splitter:hover, .run-splitter.drag { background: var(--accent); }
body.resizing { cursor: col-resize; user-select: none; }

/* Параметры прогона в правой панели. */
.run-params {
	display: flex;
	flex-direction: column;
	gap: .15rem;
	padding: .2rem .1rem .5rem;
	border-bottom: 1px solid var(--line);
	margin-bottom: .5rem;
	max-height: 14rem;
	overflow: auto;
}
.run-param {
	display: flex;
	align-items: center;
	gap: .45rem;
	font-size: .82rem;
	color: var(--muted);
	cursor: pointer;
}
.run-param input { margin: 0; }
.run-param .swatch {
	width: .9rem;
	height: .2rem;
	border-radius: 2px;
	display: inline-block;
	flex: 0 0 auto;
}

/* График заполняет ширину: высота по соотношению, без пустых полей. */
#run-chart svg { height: auto; }

/* Описание прогона: подписи над полями, а не в один ряд. */
#run-info .fields { display: block; }
#run-info .fields > label {
	display: block;
	margin: .45rem 0 .2rem;
}
#run-info .fields > div { margin-bottom: .3rem; }
#run-info .fields input,
#run-info .fields textarea { width: 100%; }

/* Параметры прогона: чекбокс, цвет, имя и значение в одной строке. */
.run-params { max-height: 24rem; }
.run-param .param-name {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.run-param input[type="number"] {
	width: 7.5rem;
	flex: 0 0 auto;
	margin-left: auto;
}