:root{
	--radius:12px;
	--shadow-sm: 0 4px 12px rgba(0,0,0,.08);
	--shadow-md: 0 10px 30px rgba(0,0,0,.12);
	--brand-start: #5B86E5;
	--brand-end: #36D1DC;
	--brand-text: #0b1020;
}

@media (prefers-color-scheme: dark){
	:root{
		--brand-text: #e8eefc;
	}
}

[data-theme="dark"] body{ background:#0f1115; color:#e7ebf3; }
[data-theme="dark"] .header, [data-theme="dark"] .footer{ background:#0b0f16; }

.header{
	background: linear-gradient(135deg, var(--brand-start), var(--brand-end));
	color: var(--brand-text);
	position: sticky; top: 0; z-index: 50;
	box-shadow: var(--shadow-sm);
}
.header a, .header button{ color: var(--brand-text) !important; }
[data-theme="dark"] .header a, [data-theme="dark"] .header button{ color: inherit !important; }
.footer{
	border-top:1px solid rgba(127,127,127,.2);
	padding:.75rem 0; color:rgba(255,255,255,.75);
}

.container-narrow{ max-width: 1280px; }

/* Карточки */
article, .card-narrow{
	border-radius: var(--radius);
	box-shadow: var(--shadow-sm);
	background: var(--pico-color-background);
	padding: 1rem 1.25rem;
}
.card-narrow{ max-width: 520px; margin: 0 auto; }
article header{ margin-bottom:.5rem; }
article footer{ margin-top:.75rem; display:flex; gap:.5rem; flex-wrap: wrap; }

/* Таблицы */
.table-wrapper{ overflow:auto; border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.table-wrapper table{ width:100%; border-collapse:collapse; }
.table-wrapper thead th{ position:sticky; top:0; background:var(--pico-color-muted-background); backdrop-filter: blur(6px); }
.table-wrapper tbody tr:hover{ background: rgba(127,127,127,.06); }
.table-wrapper td, .table-wrapper th{ padding:.65rem .75rem; vertical-align: top; }
.table-wrapper td code{ white-space: nowrap; }
.table-wrapper td{ word-break: break-word; overflow-wrap: anywhere; }
.table-wrapper td.cell-note{ max-width: 560px; white-space: pre-wrap; }
.table-wrapper tbody tr.row-stale{ background: rgba(255,235,59,.35); }
.table-wrapper tbody tr.row-stale td{ background: rgba(255,235,59,.35); }
.table-wrapper tbody tr.row-stale:hover{ background: rgba(255,235,59,.5); }
.table-wrapper tbody tr.row-stale:hover td{ background: rgba(255,235,59,.5); }

/* >2 часов — голубым */
.table-wrapper tbody tr.row-very-stale{ background: rgba(59,165,255,.25); }
.table-wrapper tbody tr.row-very-stale td{ background: rgba(59,165,255,.25); }
.table-wrapper tbody tr.row-very-stale:hover{ background: rgba(59,165,255,.4); }
.table-wrapper tbody tr.row-very-stale:hover td{ background: rgba(59,165,255,.4); }

/* Подсветка по статусу */
.table-wrapper tbody tr.row-status-cut{ background: rgba(59,165,255,.25); }
.table-wrapper tbody tr.row-status-cut td{ background: rgba(59,165,255,.25); }
.table-wrapper tbody tr.row-status-cut:hover{ background: rgba(59,165,255,.4); }
.table-wrapper tbody tr.row-status-cut:hover td{ background: rgba(59,165,255,.4); }

.table-wrapper tbody tr.row-status-bomzh{ background: rgba(76,175,80,.28); }
.table-wrapper tbody tr.row-status-bomzh td{ background: rgba(76,175,80,.28); }
.table-wrapper tbody tr.row-status-bomzh:hover{ background: rgba(76,175,80,.42); }
.table-wrapper tbody tr.row-status-bomzh:hover td{ background: rgba(76,175,80,.42); }

.table-wrapper tbody tr.row-status-callback{ background: rgba(255,235,59,.35); }
.table-wrapper tbody tr.row-status-callback td{ background: rgba(255,235,59,.35); }
.table-wrapper tbody tr.row-status-callback:hover{ background: rgba(255,235,59,.5); }
.table-wrapper tbody tr.row-status-callback:hover td{ background: rgba(255,235,59,.5); }

/* НБТ — фиолетовым */
.table-wrapper tbody tr.row-status-nbt{ background: rgba(156,39,176,.22); }
.table-wrapper tbody tr.row-status-nbt td{ background: rgba(156,39,176,.22); }
.table-wrapper tbody tr.row-status-nbt:hover{ background: rgba(156,39,176,.33); }
.table-wrapper tbody tr.row-status-nbt:hover td{ background: rgba(156,39,176,.33); }

/* Передан на 3 этап — зеленым */
.table-wrapper tbody tr.row-status-stage3{ background: rgba(76,175,80,.25); }
.table-wrapper tbody tr.row-status-stage3 td{ background: rgba(76,175,80,.25); }
.table-wrapper tbody tr.row-status-stage3:hover{ background: rgba(76,175,80,.38); }
.table-wrapper tbody tr.row-status-stage3:hover td{ background: rgba(76,175,80,.38); }

/* Прокручиваемый вывод */
pre.scrollable{
	max-height: 55vh;
	overflow:auto;
	border:1px solid rgba(127,127,127,.2);
	border-radius: var(--radius);
	padding: 1rem;
	background: var(--pico-color-muted-background);
	box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}

/* Кнопки */
button, [role="button"], a[role="button"]{
	border-radius: 10px;
	box-shadow: var(--shadow-sm);
	transition: transform .08s ease, box-shadow .2s ease, background .2s ease;
}
button:hover, [role="button"]:hover, a[role="button"]:hover{ transform: translateY(-1px); box-shadow: var(--shadow-md); }
button:active, [role="button"]:active, a[role="button"]:active{ transform: translateY(0); box-shadow: var(--shadow-sm); }

/* Чипсы/бейджи */
.chips{ display:flex; gap:.5rem; flex-wrap: wrap; margin:.5rem 0 1rem; }
.chip{
	border-radius: 999px;
	padding:.35rem .7rem;
	background: linear-gradient(135deg, rgba(91,134,229,.15), rgba(54,209,220,.15));
	border: 1px solid rgba(91,134,229,.25);
	font-weight: 600; font-size: .95rem;
}

/* Инфо-блок статистики */
.stat-card{
	display:flex; align-items:center; gap:.75rem;
	padding: .9rem 1rem; border-radius: 14px;
	background: linear-gradient(135deg, rgba(91,134,229,.18), rgba(54,209,220,.18));
	border: 1px solid rgba(91,134,229,.3);
	box-shadow: var(--shadow-sm);
}
.stat-card .value{ font-size: 1.25rem; font-weight: 800; }
.stat-card .label{ opacity:.85; }

/* Алерты */
.alert{ padding:.6rem .9rem; border-radius: var(--radius); margin:.35rem 0; box-shadow: var(--shadow-sm); }
.alert.success{ background: linear-gradient(0deg,#edfdf3,#f3fff7); color:#03543f; border:1px solid #b7f0ce; }
.alert.error{ background: linear-gradient(0deg,#fff0f0,#fff7f7); color:#7d0000; border:1px solid #f3b6b6; }
.alert.warning{ background: linear-gradient(0deg,#fff8e6,#fffbef); color:#8a6d3b; border:1px solid #f0d8a8; }

/* Статусы */
.success{ background: linear-gradient(0deg,#edfdf3,#f3fff7); color:#03543f; border:1px solid #b7f0ce; padding:.3rem .6rem; border-radius: 6px; font-size:.9rem; }
.warning{ background: linear-gradient(0deg,#fff8e6,#fffbef); color:#8a6d3b; border:1px solid #f0d8a8; padding:.3rem .6rem; border-radius: 6px; font-size:.9rem; }

/* Мелочи */
.muted{ opacity:.75; }
.grid{ gap: 1rem; }