/* Estilos customizados - Tailwind via CDN no base.html */
/*
 * Camadas do admin:
 * 1. Tokens semânticos
 * 2. Shell premium
 * 3. Compatibilidade transitória controlada
 * 4. Componentes reutilizáveis
 */

:root {
	--premium-bg: #050816;
	--premium-bg-soft: #0b1022;
	--premium-surface: rgba(12, 18, 34, 0.88);
	--premium-surface-strong: rgba(18, 26, 48, 0.96);
	--premium-surface-soft: rgba(255, 255, 255, 0.06);
	--premium-surface-hover: rgba(255, 255, 255, 0.1);
	--premium-border: rgba(148, 163, 184, 0.16);
	--premium-border-strong: rgba(129, 140, 248, 0.28);
	--premium-text: #f8fbff;
	--premium-text-strong: #ffffff;
	--premium-text-muted: #c6d0e5;
	--premium-text-soft: #90a0bd;
	--premium-accent: #6d5efc;
	--premium-accent-hover: #7a6dff;
	--premium-green: #22c55e;
	--premium-red: #ef4444;
	--premium-amber: #f59e0b;
	--premium-cyan: #38bdf8;
}

body.admin-shell[data-admin-shell='premium'] {
	min-height: 100vh;
	background:
		radial-gradient(circle at top left, rgba(109, 94, 252, 0.22), transparent 24%),
		radial-gradient(circle at top right, rgba(56, 189, 248, 0.12), transparent 20%),
		radial-gradient(circle at bottom left, rgba(34, 197, 94, 0.12), transparent 22%),
		linear-gradient(180deg, #030612 0%, #050816 42%, #08101f 100%);
	color: var(--premium-text);
}

body.admin-shell[data-admin-shell='legacy'] {
	min-height: 100vh;
	background: #0f172a;
	color: #e2e8f0;
}

body.admin-shell[data-admin-shell='premium']::before {
	content: '';
	position: fixed;
	inset: 0;
	pointer-events: none;
	background:
		linear-gradient(135deg, rgba(255, 255, 255, 0.03), transparent 35%),
		linear-gradient(315deg, rgba(109, 94, 252, 0.05), transparent 30%);
	z-index: 0;
}

body.admin-shell[data-admin-shell='premium'] .admin-frame {
	position: relative;
	z-index: 1;
}

body.admin-shell[data-admin-shell='premium'] .admin-sidebar {
	position: relative;
	background: linear-gradient(180deg, rgba(4, 8, 24, 0.96), rgba(7, 12, 28, 0.92));
	border-right: 1px solid var(--premium-border);
	box-shadow: 28px 0 80px rgba(2, 6, 23, 0.24);
	backdrop-filter: blur(22px);
}

body.admin-shell[data-admin-shell='premium'] .admin-sidebar::after {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 22%);
}

.nav-link {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 0.75rem;
	border-radius: 0.5rem;
	color: var(--premium-text-muted);
	border: 1px solid transparent;
	transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.nav-link:hover {
	background: rgba(255, 255, 255, 0.06);
	border-color: rgba(255, 255, 255, 0.05);
	color: var(--premium-text-strong);
	transform: translateX(1px);
}

.nav-link__icon {
	color: var(--premium-text-soft);
	transition: color 0.18s ease;
}

.nav-link--active {
	background: linear-gradient(135deg, rgba(109, 94, 252, 0.22), rgba(79, 70, 229, 0.18));
	border-color: rgba(109, 94, 252, 0.36);
	color: var(--premium-text-strong);
	box-shadow: 0 12px 30px rgba(79, 70, 229, 0.18);
}

.nav-link--active .nav-link__icon {
	color: #d5d0ff;
}

.admin-sidebar__section-label {
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: rgba(148, 163, 184, 0.7);
}

body.admin-shell[data-admin-shell='premium'] .admin-main {
	position: relative;
	overflow: hidden;
	color: var(--premium-text);
}

body.admin-shell[data-admin-shell='premium'] .admin-main::before {
	content: '';
	position: absolute;
	inset: 0 0 auto;
	height: 360px;
	pointer-events: none;
	background:
		radial-gradient(circle at 15% 15%, rgba(109, 94, 252, 0.18), transparent 28%),
		radial-gradient(circle at 82% 12%, rgba(34, 197, 94, 0.08), transparent 18%),
		radial-gradient(circle at 70% 32%, rgba(56, 189, 248, 0.1), transparent 22%);
	z-index: 0;
}

body.admin-shell[data-admin-shell='premium'] .admin-main > * {
	position: relative;
	z-index: 1;
}

.admin-main__content {
	position: relative;
	z-index: 1;
}

.admin-global-feedback {
	position: sticky;
	top: 0.75rem;
	z-index: 40;
	display: flex;
	justify-content: flex-end;
	pointer-events: none;
	margin-bottom: 1rem;
}

.admin-feedback-stack {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	width: min(100%, 26rem);
}

.admin-feedback-item {
	pointer-events: auto;
	animation: admin-toast-in 0.22s ease;
	transition: opacity 0.2s ease, transform 0.2s ease;
}

.admin-feedback-item.is-hiding {
	opacity: 0;
	transform: translateY(-6px);
}

@keyframes admin-toast-in {
	from {
		opacity: 0;
		transform: translateY(-8px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Compatibilidade transitória controlada para templates ainda apoiados em utilitários Tailwind. */
body.admin-shell[data-admin-shell='premium'] .admin-compat-layer .text-gray-800 {
	color: var(--premium-text-strong);
}

body.admin-shell[data-admin-shell='premium'] .admin-compat-layer .text-gray-700,
body.admin-shell[data-admin-shell='premium'] .admin-compat-layer .text-gray-600 {
	color: var(--premium-text-muted);
}

body.admin-shell[data-admin-shell='premium'] .admin-compat-layer .text-gray-500,
body.admin-shell[data-admin-shell='premium'] .admin-compat-layer .text-gray-400,
body.admin-shell[data-admin-shell='premium'] .admin-compat-layer .text-gray-300 {
	color: var(--premium-text-soft);
}

body.admin-shell[data-admin-shell='premium'] .admin-compat-layer .border-gray-100,
body.admin-shell[data-admin-shell='premium'] .admin-compat-layer .border-gray-200,
body.admin-shell[data-admin-shell='premium'] .admin-compat-layer .border-gray-300,
body.admin-shell[data-admin-shell='premium'] .admin-compat-layer .border-gray-700 {
	border-color: var(--premium-border);
}

body.admin-shell[data-admin-shell='premium'] .admin-compat-layer .bg-white.rounded-lg,
body.admin-shell[data-admin-shell='premium'] .admin-compat-layer .bg-white.rounded-2xl,
body.admin-shell[data-admin-shell='premium'] .admin-compat-layer .bg-white.rounded-3xl,
body.admin-shell[data-admin-shell='premium'] .admin-compat-layer .bg-white.rounded-[28px],
body.admin-shell[data-admin-shell='premium'] .admin-compat-layer .bg-white.rounded-[32px] {
	background: linear-gradient(180deg, rgba(15, 22, 40, 0.92), rgba(8, 12, 24, 0.96));
	border: 1px solid var(--premium-border);
	box-shadow: 0 24px 70px rgba(2, 6, 23, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.04);
	backdrop-filter: blur(18px);
}

body.admin-shell[data-admin-shell='premium'] .admin-compat-layer .bg-white:not(.rounded-lg):not(.rounded-2xl):not(.rounded-3xl):not(.rounded-\[28px\]):not(.rounded-\[32px\]) {
	background-color: rgba(13, 19, 35, 0.92);
}

body.admin-shell[data-admin-shell='premium'] .admin-compat-layer .bg-gray-50 {
	background-color: rgba(255, 255, 255, 0.04);
}

body.admin-shell[data-admin-shell='premium'] .admin-compat-layer .bg-gray-100 {
	background-color: rgba(255, 255, 255, 0.06);
}

body.admin-shell[data-admin-shell='premium'] .admin-compat-layer .bg-gray-200 {
	background-color: rgba(255, 255, 255, 0.1);
}

body.admin-shell[data-admin-shell='premium'] .admin-compat-layer .bg-black,
body.admin-shell[data-admin-shell='premium'] .admin-compat-layer .bg-gray-900 {
	box-shadow: 0 16px 45px rgba(2, 6, 23, 0.28);
}

body.admin-shell[data-admin-shell='premium'] .admin-compat-layer .shadow,
body.admin-shell[data-admin-shell='premium'] .admin-compat-layer .shadow-sm,
body.admin-shell[data-admin-shell='premium'] .admin-compat-layer .shadow-md,
body.admin-shell[data-admin-shell='premium'] .admin-compat-layer .shadow-xl,
body.admin-shell[data-admin-shell='premium'] .admin-compat-layer .shadow-2xl {
	box-shadow: 0 24px 70px rgba(2, 6, 23, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

body.admin-shell[data-admin-shell='premium'] .admin-compat-layer input:not([type='checkbox']):not([type='radio']):not([type='color']),
body.admin-shell[data-admin-shell='premium'] .admin-compat-layer select,
body.admin-shell[data-admin-shell='premium'] .admin-compat-layer textarea {
	background: rgba(8, 12, 24, 0.86);
	color: var(--premium-text-strong);
	border-color: rgba(148, 163, 184, 0.22);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

body.admin-shell[data-admin-shell='premium'] .admin-compat-layer input:not([type='checkbox']):not([type='radio']):not([type='color'])::placeholder,
body.admin-shell[data-admin-shell='premium'] .admin-compat-layer textarea::placeholder {
	color: rgba(144, 160, 189, 0.7);
}

body.admin-shell[data-admin-shell='premium'] .admin-compat-layer input:not([type='checkbox']):not([type='radio']):not([type='color']):focus,
body.admin-shell[data-admin-shell='premium'] .admin-compat-layer select:focus,
body.admin-shell[data-admin-shell='premium'] .admin-compat-layer textarea:focus,
body.admin-shell[data-admin-shell='premium'] .admin-compat-layer [contenteditable='true']:focus {
	outline: none;
	border-color: rgba(109, 94, 252, 0.65);
	box-shadow: 0 0 0 3px rgba(109, 94, 252, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

body.admin-shell[data-admin-shell='premium'] .admin-compat-layer input[type='checkbox'],
body.admin-shell[data-admin-shell='premium'] .admin-compat-layer input[type='radio'] {
	accent-color: var(--premium-accent);
}

body.admin-shell[data-admin-shell='premium'] .admin-compat-layer select option {
	background: #0b1121;
	color: var(--premium-text-strong);
}

body.admin-shell[data-admin-shell='premium'] .admin-compat-layer table {
	color: var(--premium-text-muted);
}

body.admin-shell[data-admin-shell='premium'] .admin-compat-layer thead,
body.admin-shell[data-admin-shell='premium'] .admin-compat-layer thead.bg-gray-50 {
	background: rgba(255, 255, 255, 0.04);
}

body.admin-shell[data-admin-shell='premium'] .admin-compat-layer thead th {
	color: var(--premium-text-soft);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 0.72rem;
	border-bottom: 1px solid var(--premium-border);
}

body.admin-shell[data-admin-shell='premium'] .admin-compat-layer tbody tr,
body.admin-shell[data-admin-shell='premium'] .admin-compat-layer .border-t {
	border-color: var(--premium-border);
}

body.admin-shell[data-admin-shell='premium'] .admin-compat-layer tbody tr:hover,
body.admin-shell[data-admin-shell='premium'] .admin-compat-layer tr.hover\:bg-gray-50:hover {
	background: rgba(255, 255, 255, 0.035);
}

body.admin-shell[data-admin-shell='premium'] .admin-compat-layer code,
body.admin-shell[data-admin-shell='premium'] .admin-compat-layer pre {
	border: 1px solid rgba(148, 163, 184, 0.16);
}

body.admin-shell[data-admin-shell='premium'] .admin-compat-layer code.bg-gray-100,
body.admin-shell[data-admin-shell='premium'] .admin-compat-layer pre.bg-gray-100 {
	background: rgba(255, 255, 255, 0.05);
	color: var(--premium-text-muted);
}

body.admin-shell[data-admin-shell='premium'] .admin-compat-layer #email-preview-frame {
	background: rgba(255, 255, 255, 0.04);
	border-color: rgba(148, 163, 184, 0.18);
}

body.admin-shell[data-admin-shell='premium'] .admin-compat-layer #email-preview {
	background: #ffffff;
	color: #0f172a;
	box-shadow: 0 16px 45px rgba(15, 23, 42, 0.14);
}

body.admin-shell[data-admin-shell='premium'] .admin-compat-layer .bg-blue-600 {
	background: linear-gradient(135deg, var(--premium-accent), #4f46e5);
	color: #ffffff;
	box-shadow: 0 14px 35px rgba(79, 70, 229, 0.28);
}

body.admin-shell[data-admin-shell='premium'] .admin-compat-layer .hover\:bg-blue-700:hover {
	background: linear-gradient(135deg, var(--premium-accent-hover), #5b54f5);
}

body.admin-shell[data-admin-shell='premium'] .admin-compat-layer .bg-green-600 {
	background: linear-gradient(135deg, #22c55e, #16a34a);
	color: #ffffff;
	box-shadow: 0 14px 35px rgba(34, 197, 94, 0.24);
}

body.admin-shell[data-admin-shell='premium'] .admin-compat-layer .hover\:bg-green-700:hover {
	background: linear-gradient(135deg, #2ad06a, #15803d);
}

body.admin-shell[data-admin-shell='premium'] .admin-compat-layer .bg-purple-600 {
	background: linear-gradient(135deg, #8b5cf6, #6d5efc);
	color: #ffffff;
	box-shadow: 0 14px 35px rgba(139, 92, 246, 0.24);
}

body.admin-shell[data-admin-shell='premium'] .admin-compat-layer .hover\:bg-purple-700:hover {
	background: linear-gradient(135deg, #9568ff, #5b54f5);
}

body.admin-shell[data-admin-shell='premium'] .admin-compat-layer .bg-red-600 {
	background: linear-gradient(135deg, #ef4444, #dc2626);
	color: #ffffff;
	box-shadow: 0 14px 35px rgba(239, 68, 68, 0.22);
}

body.admin-shell[data-admin-shell='premium'] .admin-compat-layer .hover\:bg-red-700:hover {
	background: linear-gradient(135deg, #f05555, #b91c1c);
}

body.admin-shell[data-admin-shell='premium'] .admin-compat-layer .bg-amber-500 {
	background: linear-gradient(135deg, #f59e0b, #d97706);
	color: #ffffff;
	box-shadow: 0 14px 35px rgba(245, 158, 11, 0.22);
}

body.admin-shell[data-admin-shell='premium'] .admin-compat-layer .hover\:bg-amber-600:hover {
	background: linear-gradient(135deg, #f5a91b, #b45309);
}

body.admin-shell[data-admin-shell='premium'] .admin-compat-layer .bg-gray-600 {
	background: rgba(255, 255, 255, 0.1);
	color: var(--premium-text-strong);
}

body.admin-shell[data-admin-shell='premium'] .admin-compat-layer .hover\:bg-gray-700:hover {
	background: rgba(255, 255, 255, 0.16);
}

body.admin-shell[data-admin-shell='premium'] .admin-compat-layer .bg-gray-900 {
	background: linear-gradient(135deg, rgba(30, 41, 59, 0.96), rgba(15, 23, 42, 0.96));
	color: #ffffff;
}

body.admin-shell[data-admin-shell='premium'] .admin-compat-layer .hover\:bg-black:hover,
body.admin-shell[data-admin-shell='premium'] .admin-compat-layer .hover\:bg-gray-950:hover {
	background: linear-gradient(135deg, rgba(43, 56, 77, 0.98), rgba(17, 24, 39, 0.98));
}

body.admin-shell[data-admin-shell='premium'] .admin-compat-layer button.bg-white,
body.admin-shell[data-admin-shell='premium'] .admin-compat-layer a.bg-white {
	background: rgba(255, 255, 255, 0.06);
	color: var(--premium-text-muted);
	border-color: var(--premium-border);
}

body.admin-shell[data-admin-shell='premium'] .admin-compat-layer .hover\:bg-gray-50:hover,
body.admin-shell[data-admin-shell='premium'] .admin-compat-layer .hover\:bg-gray-200:hover {
	background: rgba(255, 255, 255, 0.1);
}

body.admin-shell[data-admin-shell='premium'] .admin-compat-layer .bg-blue-100 {
	background: rgba(96, 165, 250, 0.18);
}

body.admin-shell[data-admin-shell='premium'] .admin-compat-layer .text-blue-700,
body.admin-shell[data-admin-shell='premium'] .admin-compat-layer .text-blue-600 {
	color: #a8c7ff;
}

body.admin-shell[data-admin-shell='premium'] .admin-compat-layer .bg-indigo-100 {
	background: rgba(129, 140, 248, 0.18);
}

body.admin-shell[data-admin-shell='premium'] .admin-compat-layer .text-indigo-700,
body.admin-shell[data-admin-shell='premium'] .admin-compat-layer .text-indigo-600 {
	color: #c9d1ff;
}

body.admin-shell[data-admin-shell='premium'] .admin-compat-layer .bg-green-100,
body.admin-shell[data-admin-shell='premium'] .admin-compat-layer .bg-emerald-50 {
	background: rgba(34, 197, 94, 0.16);
}

body.admin-shell[data-admin-shell='premium'] .admin-compat-layer .text-green-700,
body.admin-shell[data-admin-shell='premium'] .admin-compat-layer .text-emerald-800,
body.admin-shell[data-admin-shell='premium'] .admin-compat-layer .text-emerald-900 {
	color: #97f0b7;
}

body.admin-shell[data-admin-shell='premium'] .admin-compat-layer .border-green-200,
body.admin-shell[data-admin-shell='premium'] .admin-compat-layer .border-emerald-200 {
	border-color: rgba(34, 197, 94, 0.22);
}

body.admin-shell[data-admin-shell='premium'] .admin-compat-layer .bg-yellow-100,
body.admin-shell[data-admin-shell='premium'] .admin-compat-layer .bg-amber-50 {
	background: rgba(245, 158, 11, 0.16);
}

body.admin-shell[data-admin-shell='premium'] .admin-compat-layer .text-yellow-600,
body.admin-shell[data-admin-shell='premium'] .admin-compat-layer .text-yellow-700,
body.admin-shell[data-admin-shell='premium'] .admin-compat-layer .text-amber-700,
body.admin-shell[data-admin-shell='premium'] .admin-compat-layer .text-amber-900 {
	color: #ffd996;
}

body.admin-shell[data-admin-shell='premium'] .admin-compat-layer .border-amber-200 {
	border-color: rgba(245, 158, 11, 0.2);
}

body.admin-shell[data-admin-shell='premium'] .admin-compat-layer .bg-red-100,
body.admin-shell[data-admin-shell='premium'] .admin-compat-layer .bg-red-50 {
	background: rgba(239, 68, 68, 0.16);
}

body.admin-shell[data-admin-shell='premium'] .admin-compat-layer .text-red-700 {
	color: #ffb4be;
}

body.admin-shell[data-admin-shell='premium'] .admin-compat-layer .border-red-200 {
	border-color: rgba(239, 68, 68, 0.24);
}

body.admin-shell[data-admin-shell='premium'] .admin-compat-layer .bg-blue-50 {
	background: rgba(56, 189, 248, 0.16);
}

body.admin-shell[data-admin-shell='premium'] .admin-compat-layer .text-blue-700 {
	color: #a8dfff;
}

body.admin-shell[data-admin-shell='premium'] .admin-compat-layer .border-blue-200 {
	border-color: rgba(56, 189, 248, 0.2);
}

body.admin-shell[data-admin-shell='premium'] .admin-compat-layer .bg-slate-950,
body.admin-shell[data-admin-shell='premium'] .admin-compat-layer .bg-slate-100 {
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

body.admin-shell[data-admin-shell='premium'] .admin-compat-layer .text-purple-600 {
	color: #c1b7ff;
}

body.admin-shell[data-admin-shell='premium'] .admin-compat-layer .text-orange-600 {
	color: #ffc78d;
}

body.admin-shell[data-admin-shell='premium'] .admin-compat-layer .text-cyan-600 {
	color: #8ce0ff;
}

body.admin-shell[data-admin-shell='premium'] .admin-compat-layer .text-sm,
body.admin-shell[data-admin-shell='premium'] .admin-compat-layer .text-xs {
	letter-spacing: 0.01em;
}

body.admin-shell[data-admin-shell='premium'] .admin-compat-layer .rounded-full,
body.admin-shell[data-admin-shell='premium'] .admin-compat-layer .rounded-md,
body.admin-shell[data-admin-shell='premium'] .admin-compat-layer .rounded-lg,
body.admin-shell[data-admin-shell='premium'] .admin-compat-layer .rounded-2xl,
body.admin-shell[data-admin-shell='premium'] .admin-compat-layer .rounded-3xl {
	backdrop-filter: blur(14px);
}

body.admin-login {
	min-height: 100vh;
	background:
		radial-gradient(circle at top left, rgba(109, 94, 252, 0.24), transparent 26%),
		radial-gradient(circle at bottom right, rgba(34, 197, 94, 0.14), transparent 22%),
		linear-gradient(180deg, #040714 0%, #060916 45%, #091224 100%);
	color: var(--premium-text);
}

.admin-login-card {
	background: linear-gradient(180deg, rgba(15, 22, 40, 0.94), rgba(8, 12, 24, 0.96));
	border: 1px solid var(--premium-border);
	box-shadow: 0 35px 100px rgba(2, 6, 23, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.04);
	backdrop-filter: blur(18px);
}

body.admin-login label {
	color: var(--premium-text-muted) !important;
}

body.admin-login input {
	background: rgba(8, 12, 24, 0.82) !important;
	border-color: rgba(148, 163, 184, 0.22) !important;
	color: var(--premium-text-strong) !important;
}

body.admin-login input::placeholder {
	color: rgba(144, 160, 189, 0.7) !important;
}

body.admin-login input:focus {
	outline: none !important;
	border-color: rgba(109, 94, 252, 0.65) !important;
	box-shadow: 0 0 0 3px rgba(109, 94, 252, 0.18) !important;
}

.admin-login-field {
	border: 1px solid rgba(148, 163, 184, 0.22);
	background: #0b1121;
	color: #f8fbff;
	-webkit-text-fill-color: #f8fbff;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.admin-login-field::placeholder {
	color: rgba(144, 160, 189, 0.7);
}

body.admin-login #error {
	background: rgba(239, 68, 68, 0.14) !important;
	border-color: rgba(239, 68, 68, 0.22) !important;
	color: #ffb4be !important;
}

@media (max-width: 1024px) {
	body.admin-shell[data-admin-shell='premium'] .admin-sidebar {
		width: 5.25rem;
	}

	body.admin-shell[data-admin-shell='premium'] .admin-sidebar h1 span:last-child,
	body.admin-shell[data-admin-shell='premium'] .admin-sidebar p,
	body.admin-shell[data-admin-shell='premium'] .admin-sidebar .nav-link__label,
	body.admin-shell[data-admin-shell='premium'] .admin-sidebar button {
		display: none;
	}

	body.admin-shell[data-admin-shell='premium'] .admin-sidebar .nav-link {
		justify-content: center;
	}
}

.admin-page {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

.page-hero {
	position: relative;
	overflow: hidden;
	border-radius: 2rem;
	border: 1px solid var(--premium-border);
	background: linear-gradient(135deg, rgba(8, 13, 30, 0.98) 0%, rgba(11, 17, 37, 0.96) 54%, rgba(20, 30, 64, 0.94) 100%);
	box-shadow: 0 30px 90px rgba(2, 6, 23, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.04);
	padding: 1.5rem;
}

.page-hero::before {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		radial-gradient(circle at top right, rgba(109, 94, 252, 0.22), transparent 30%),
		radial-gradient(circle at bottom left, rgba(34, 197, 94, 0.12), transparent 24%),
		linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent 22%);
}

.page-hero > * {
	position: relative;
	z-index: 1;
}

.page-hero__header {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 1rem;
	flex-wrap: wrap;
}

.page-hero__kicker {
	display: block;
	margin-bottom: 0.65rem;
	font-size: 0.7rem;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: rgba(198, 208, 229, 0.62);
}

.page-hero__title {
	margin: 0;
	font-size: clamp(2rem, 3vw, 3rem);
	line-height: 1.05;
	font-weight: 700;
	color: var(--premium-text-strong);
}

.page-hero__copy {
	max-width: 50rem;
	margin-top: 0.85rem;
	font-size: 0.98rem;
	line-height: 1.7;
	color: rgba(226, 232, 240, 0.82);
}

.page-actions {
	display: flex;
	gap: 0.75rem;
	flex-wrap: wrap;
	align-items: center;
}

.hero-meta-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 1rem;
	margin-top: 1.5rem;
}

.hero-meta-card {
	padding: 1rem 1.05rem;
	border-radius: 1.3rem;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.09);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.hero-meta-label {
	display: block;
	font-size: 0.74rem;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: rgba(198, 208, 229, 0.58);
}

.hero-meta-value {
	display: block;
	margin-top: 0.35rem;
	font-size: 1.55rem;
	font-weight: 700;
	color: var(--premium-text-strong);
}

.hero-meta-copy {
	display: block;
	margin-top: 0.45rem;
	font-size: 0.88rem;
	color: rgba(198, 208, 229, 0.78);
}

.metric-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 1rem;
}

.metric-card {
	position: relative;
	overflow: hidden;
	padding: 1.2rem;
	border-radius: 1.5rem;
	border: 1px solid var(--premium-border);
	background: linear-gradient(180deg, rgba(14, 21, 38, 0.94), rgba(9, 13, 26, 0.98));
	box-shadow: 0 20px 55px rgba(2, 6, 23, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.metric-card::after {
	content: '';
	position: absolute;
	inset: 0 auto auto 0;
	width: 100%;
	height: 3px;
	background: linear-gradient(90deg, rgba(109, 94, 252, 0.92), rgba(56, 189, 248, 0.3));
	opacity: 0.9;
}

.metric-card__label {
	margin: 0;
	font-size: 0.78rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(198, 208, 229, 0.58);
}

.metric-card__value {
	margin: 0.55rem 0 0;
	font-size: 2.15rem;
	line-height: 1;
	font-weight: 700;
	color: var(--premium-text-strong);
}

.metric-card__hint {
	margin: 0.7rem 0 0;
	font-size: 0.88rem;
	color: rgba(198, 208, 229, 0.74);
}

.content-grid {
	display: grid;
	gap: 1.5rem;
}

.content-grid--sidebar {
	grid-template-columns: minmax(0, 1.55fr) minmax(320px, 0.95fr);
}

.content-grid--split {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.stack-column {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

.panel {
	border-radius: 1.75rem;
	border: 1px solid var(--premium-border);
	background: linear-gradient(180deg, rgba(15, 22, 40, 0.92), rgba(8, 12, 24, 0.96));
	box-shadow: 0 24px 65px rgba(2, 6, 23, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.03);
	padding: 1.4rem;
}

.panel--soft {
	background: linear-gradient(180deg, rgba(18, 26, 48, 0.72), rgba(8, 12, 24, 0.92));
}

.panel__header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 1rem;
	margin-bottom: 1rem;
}

.panel__title {
	margin: 0;
	font-size: 1.08rem;
	font-weight: 600;
	color: var(--premium-text-strong);
}

.panel__copy {
	margin: 0.35rem 0 0;
	font-size: 0.92rem;
	line-height: 1.65;
	color: rgba(198, 208, 229, 0.76);
}

.panel__actions {
	display: flex;
	gap: 0.6rem;
	flex-wrap: wrap;
}

.btn-premium {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.55rem;
	padding: 0.8rem 1rem;
	border-radius: 1rem;
	border: 1px solid transparent;
	font-size: 0.9rem;
	font-weight: 600;
	line-height: 1;
	transition: transform 0.18s ease, filter 0.18s ease, background-color 0.18s ease, border-color 0.18s ease;
}

.btn-premium:hover {
	transform: translateY(-1px);
	filter: brightness(1.03);
}

.btn-premium svg {
	width: 1rem;
	height: 1rem;
}

.btn-premium--primary {
	color: #fff;
	background: linear-gradient(135deg, var(--premium-accent), #4f46e5);
	box-shadow: 0 16px 38px rgba(79, 70, 229, 0.26);
}

.btn-premium--secondary {
	color: var(--premium-text-strong);
	background: rgba(255, 255, 255, 0.06);
	border-color: rgba(255, 255, 255, 0.08);
}

.btn-premium--success {
	color: #fff;
	background: linear-gradient(135deg, #22c55e, #16a34a);
	box-shadow: 0 16px 38px rgba(34, 197, 94, 0.22);
}

.btn-premium--danger {
	color: #fff;
	background: linear-gradient(135deg, #ef4444, #dc2626);
	box-shadow: 0 16px 38px rgba(239, 68, 68, 0.2);
}

.btn-premium--ghost {
	color: var(--premium-text-muted);
	background: transparent;
	border-color: var(--premium-border);
}

.btn-premium--compact {
	padding: 0.58rem 0.84rem;
	border-radius: 999px;
	font-size: 0.78rem;
}

.toolbar-panel {
	margin-top: 1.5rem;
	padding: 1rem;
	border-radius: 1.5rem;
	border: 1px solid rgba(255, 255, 255, 0.08);
	background: rgba(255, 255, 255, 0.045);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
	backdrop-filter: blur(12px);
}

.toolbar-row {
	display: flex;
	gap: 0.85rem;
	flex-wrap: wrap;
	align-items: stretch;
}

.toolbar-row__group {
	display: flex;
	gap: 0.75rem;
	flex-wrap: wrap;
	align-items: center;
}

.toolbar-row__group--stretch {
	flex: 1 1 420px;
	align-items: stretch;
}

.toolbar-field {
	flex: 1 1 230px;
	min-width: 200px;
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	padding: 0.85rem 1rem;
	border-radius: 1.15rem;
	border: 1px solid rgba(255, 255, 255, 0.08);
	background: rgba(255, 255, 255, 0.05);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.toolbar-field--compact {
	flex: 0 0 180px;
	min-width: 180px;
}

.toolbar-field__label {
	font-size: 0.68rem;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: rgba(198, 208, 229, 0.56);
}

.toolbar-field input,
.toolbar-field select {
	width: 100%;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	min-height: 0;
	color: var(--premium-text-strong) !important;
}

.toolbar-field input:focus,
.toolbar-field select:focus {
	box-shadow: none !important;
	outline: none !important;
	border: 0 !important;
}

.code-shell {
	display: block;
	padding: 0.85rem 1rem;
	border-radius: 1rem;
	border: 1px solid rgba(255, 255, 255, 0.08);
	background: rgba(255, 255, 255, 0.05);
	color: rgba(226, 232, 240, 0.82);
	line-height: 1.6;
	word-break: break-all;
}

.feedback-banner,
.feedback-card {
	border-radius: 1.2rem;
	border: 1px solid transparent;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.feedback-banner {
	padding: 0.95rem 1rem;
	font-size: 0.92rem;
	line-height: 1.6;
}

.feedback-card {
	padding: 1.2rem;
	line-height: 1.7;
}

.feedback-banner--success,
.feedback-card--success {
	background: rgba(34, 197, 94, 0.12);
	border-color: rgba(34, 197, 94, 0.18);
	color: #bbf7d0;
}

.feedback-banner--error,
.feedback-card--error {
	background: rgba(239, 68, 68, 0.12);
	border-color: rgba(239, 68, 68, 0.18);
	color: #fecaca;
}

.report-grid {
	display: grid;
	gap: 1rem;
}

.report-grid--metrics {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.report-grid--split {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.report-grid--temps {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.report-card {
	padding: 1rem 1.05rem;
	border-radius: 1.25rem;
	border: 1px solid rgba(255, 255, 255, 0.08);
	background: rgba(255, 255, 255, 0.04);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.report-card__label {
	font-size: 0.72rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(198, 208, 229, 0.56);
}

.report-card__value {
	display: block;
	margin-top: 0.45rem;
	font-size: 2rem;
	line-height: 1;
	font-weight: 700;
	color: var(--premium-text-strong);
}

.report-card__title {
	margin: 0;
	font-size: 0.96rem;
	font-weight: 600;
	color: var(--premium-text-strong);
}

.report-line {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding-top: 0.7rem;
	font-size: 0.9rem;
	color: rgba(226, 232, 240, 0.78);
}

.report-line strong {
	color: var(--premium-text-strong);
}

.report-temperature {
	padding: 1rem;
	border-radius: 1.15rem;
	border: 1px solid transparent;
	background: rgba(255, 255, 255, 0.04);
}

.report-temperature p:first-child {
	margin: 0;
	font-size: 0.82rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
}

.report-temperature p:last-child {
	margin: 0.45rem 0 0;
	font-size: 1.85rem;
	font-weight: 700;
	line-height: 1;
}

.report-temperature--hot {
	background: rgba(239, 68, 68, 0.1);
	border-color: rgba(239, 68, 68, 0.16);
	color: #fda4af;
}

.report-temperature--warm {
	background: rgba(245, 158, 11, 0.1);
	border-color: rgba(245, 158, 11, 0.16);
	color: #fcd34d;
}

.report-temperature--cold {
	background: rgba(96, 165, 250, 0.1);
	border-color: rgba(96, 165, 250, 0.16);
	color: #93c5fd;
}

.editor-card {
	padding: 1rem;
	border-radius: 1.4rem;
	border: 1px solid rgba(255, 255, 255, 0.08);
	background: rgba(255, 255, 255, 0.04);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.editor-toolbar {
	display: flex;
	gap: 0.45rem;
	flex-wrap: wrap;
	margin-bottom: 0.35rem;
}

.list-stack {
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
}

.list-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	padding: 1rem 1rem 0.95rem;
	border-radius: 1.25rem;
	border: 1px solid rgba(255, 255, 255, 0.08);
	background: rgba(255, 255, 255, 0.04);
}

.list-item__title {
	margin: 0;
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--premium-text-strong);
}

.list-item__meta {
	margin: 0.28rem 0 0;
	font-size: 0.82rem;
	color: rgba(198, 208, 229, 0.7);
}

.list-item__aside {
	text-align: right;
}

.table-shell {
	overflow: hidden;
	border-radius: 1.75rem;
	border: 1px solid var(--premium-border);
	background: linear-gradient(180deg, rgba(15, 22, 40, 0.92), rgba(8, 12, 24, 0.96));
	box-shadow: 0 24px 65px rgba(2, 6, 23, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.table-shell__scroller {
	overflow-x: auto;
}

.table-shell table {
	width: 100%;
	min-width: 880px;
	border-collapse: collapse;
}

.table-shell th,
.table-shell td {
	padding: 1rem 1.15rem;
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.table-shell thead th {
	font-size: 0.72rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(198, 208, 229, 0.56);
	background: rgba(255, 255, 255, 0.035);
}

.table-shell tbody tr:hover {
	background: rgba(255, 255, 255, 0.035);
}

.table-shell td {
	color: rgba(226, 232, 240, 0.84);
}

.table-shell__footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	flex-wrap: wrap;
	padding: 1rem 1.15rem;
}

.status-pill {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.4rem 0.75rem;
	border-radius: 999px;
	border: 1px solid transparent;
	font-size: 0.72rem;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.04em;
}

.status-pill--success {
	color: #9cf2bc;
	background: rgba(34, 197, 94, 0.14);
	border-color: rgba(34, 197, 94, 0.2);
}

.status-pill--warning {
	color: #ffd996;
	background: rgba(245, 158, 11, 0.14);
	border-color: rgba(245, 158, 11, 0.18);
}

.status-pill--danger {
	color: #ffb4be;
	background: rgba(239, 68, 68, 0.14);
	border-color: rgba(239, 68, 68, 0.2);
}

.status-pill--info {
	color: #b7c9ff;
	background: rgba(96, 165, 250, 0.14);
	border-color: rgba(96, 165, 250, 0.18);
}

.status-pill--neutral {
	color: rgba(226, 232, 240, 0.76);
	background: rgba(255, 255, 255, 0.06);
	border-color: rgba(255, 255, 255, 0.08);
}

.tag-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.52rem 0.82rem;
	border-radius: 999px;
	background: rgba(109, 94, 252, 0.16);
	border: 1px solid rgba(109, 94, 252, 0.24);
	color: #d7d2ff;
	font-size: 0.82rem;
	font-weight: 600;
}

.empty-state {
	padding: 1.2rem;
	border-radius: 1.25rem;
	border: 1px dashed rgba(148, 163, 184, 0.2);
	background: rgba(255, 255, 255, 0.03);
	color: rgba(198, 208, 229, 0.66);
	text-align: center;
}

.helper-list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 0.8rem;
}

.helper-list li {
	padding: 0.95rem 1rem;
	border-radius: 1.2rem;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.06);
	color: rgba(226, 232, 240, 0.8);
	line-height: 1.6;
}

.badge {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.36rem 0.7rem;
	border-radius: 999px;
	border: 1px solid transparent;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.04em;
}

.badge--neutral {
	background: rgba(255, 255, 255, 0.06);
	border-color: rgba(255, 255, 255, 0.08);
	color: rgba(226, 232, 240, 0.76);
}

.badge--success {
	background: rgba(34, 197, 94, 0.14);
	border-color: rgba(34, 197, 94, 0.2);
	color: #9cf2bc;
}

.badge--warning {
	background: rgba(245, 158, 11, 0.14);
	border-color: rgba(245, 158, 11, 0.2);
	color: #ffd996;
}

.badge--danger {
	background: rgba(239, 68, 68, 0.14);
	border-color: rgba(239, 68, 68, 0.2);
	color: #ffb4be;
}

.badge--info {
	background: rgba(96, 165, 250, 0.14);
	border-color: rgba(96, 165, 250, 0.18);
	color: #a8dfff;
}

.preview-shell {
	padding: 1rem;
	border-radius: 1.4rem;
	border: 1px solid rgba(255, 255, 255, 0.08);
	background: linear-gradient(180deg, rgba(14, 21, 38, 0.9), rgba(8, 12, 24, 0.96));
	box-shadow: 0 22px 55px rgba(2, 6, 23, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.builder-step-list {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	margin-top: 0.85rem;
	padding-left: 1rem;
	border-left: 1px solid rgba(255, 255, 255, 0.08);
}

.builder-step-link {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	padding: 0.9rem 1rem;
	border-radius: 1.1rem;
	border: 1px solid rgba(255, 255, 255, 0.08);
	background: rgba(255, 255, 255, 0.03);
	text-decoration: none;
	transition: border-color 0.2s ease, transform 0.2s ease, background 0.2s ease;
}

.builder-step-link:hover,
.builder-step-link:focus-visible {
	border-color: rgba(103, 232, 249, 0.32);
	background: rgba(34, 211, 238, 0.08);
	transform: translateY(-1px);
	outline: none;
}

.builder-step-link--active {
	border-color: rgba(103, 232, 249, 0.4);
	background: rgba(34, 211, 238, 0.12);
	box-shadow: 0 10px 30px rgba(8, 145, 178, 0.16);
}

.builder-inspector-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr);
	gap: 1rem;
}

.builder-field-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem;
}

.builder-chip-list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
}

.builder-preview-frame {
	display: flex;
	flex-direction: column;
	gap: 0.8rem;
	margin-top: 0.85rem;
	padding: 1rem;
	border-radius: 1.2rem;
	border: 1px solid rgba(255, 255, 255, 0.08);
	background: rgba(2, 6, 23, 0.28);
}

.builder-preview-body {
	padding: 1rem;
	border-radius: 1rem;
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.06);
	color: rgba(226, 232, 240, 0.86);
	line-height: 1.7;
}

@media (max-width: 1024px) {
	.builder-inspector-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 768px) {
	.builder-field-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

.modal-backdrop {
	position: fixed;
	inset: 0;
	background: rgba(2, 6, 23, 0.58);
	backdrop-filter: blur(6px);
}

.modal-shell {
	position: relative;
	display: flex;
	min-height: 100%;
	align-items: center;
	justify-content: center;
	padding: 1rem;
}

.modal-card {
	border-radius: 1.75rem;
	border: 1px solid var(--premium-border);
	background: linear-gradient(180deg, rgba(15, 22, 40, 0.96), rgba(8, 12, 24, 0.98));
	box-shadow: 0 30px 100px rgba(2, 6, 23, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.color-preview-chip {
	background: var(--preview-color, #3B82F6);
}

.tag-color-dot {
	background: var(--tag-color, #6B7280);
}

.flow-builder-shell {
	display: flex;
	gap: 1rem;
	min-height: calc(100vh - 220px);
}

.flow-canvas {
	position: relative;
	min-height: 600px;
	background: linear-gradient(180deg, rgba(9, 13, 27, 0.96), rgba(7, 11, 24, 0.98));
	border-radius: 1rem;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, 0.08);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.flow-canvas::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image: radial-gradient(circle, rgba(255, 255, 255, 0.08) 1px, transparent 1px);
	background-size: 30px 30px;
}

.flow-node {
	position: absolute;
	min-width: 200px;
	border-radius: 12px;
	padding: 16px;
	cursor: grab;
	user-select: none;
	z-index: 10;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
	transition: box-shadow 0.2s ease, transform 0.2s ease;
	color: #ffffff;
}

.flow-node:hover {
	box-shadow: 0 6px 30px rgba(0, 0, 0, 0.5);
	transform: translateY(-1px);
}

.flow-node.dragging {
	cursor: grabbing;
	opacity: 0.9;
	z-index: 100;
	transform: scale(1.01);
}

.node-trigger {
	background: linear-gradient(135deg, #f59e0b, #d97706);
}

.node-email {
	background: linear-gradient(135deg, #3b82f6, #2563eb);
}

.node-delay {
	background: linear-gradient(135deg, #8b5cf6, #7c3aed);
}

.node-condition {
	background: linear-gradient(135deg, #10b981, #059669);
}

.node-tag {
	background: linear-gradient(135deg, #ec4899, #db2777);
}

.node-webhook {
	background: linear-gradient(135deg, #6366f1, #4f46e5);
}

.node-connector {
	position: absolute;
	width: 12px;
	height: 12px;
	background: #ffffff;
	border-radius: 50%;
	border: 2px solid rgba(0, 0, 0, 0.3);
	z-index: 11;
	cursor: crosshair;
}

.node-connector.out {
	bottom: -6px;
	left: 50%;
	transform: translateX(-50%);
}

.node-connector.in {
	top: -6px;
	left: 50%;
	transform: translateX(-50%);
}

svg.connections {
	position: absolute;
	inset: 0;
	z-index: 5;
	pointer-events: none;
}

.sidebar-block {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 12px;
	border-radius: 8px;
	cursor: grab;
	font-size: 13px;
	font-weight: 500;
	transition: transform 0.1s ease, box-shadow 0.1s ease;
	color: #ffffff;
}

.sidebar-block:hover {
	transform: scale(1.02);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

@media (max-width: 1100px) {
	.content-grid--sidebar,
	.content-grid--split {
		grid-template-columns: 1fr;
	}

	.report-grid--metrics,
	.report-grid--split,
	.report-grid--temps {
		grid-template-columns: 1fr;
	}

	.flow-builder-shell {
		flex-direction: column;
		min-height: auto;
	}
}

@media (max-width: 720px) {
	.page-hero,
	.panel,
	.table-shell {
		border-radius: 1.4rem;
	}

	.page-hero {
		padding: 1.2rem;
	}

	.metric-grid,
	.hero-meta-grid {
		grid-template-columns: 1fr;
	}

	.toolbar-row,
	.toolbar-row__group,
	.toolbar-row__group--stretch {
		flex-direction: column;
		align-items: stretch;
	}

	.toolbar-field,
	.toolbar-field--compact {
		min-width: 100%;
		flex-basis: 100%;
	}
}