@font-face {
	font-family: Roboto;
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("/static/fonts/roboto-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Bricolage Grotesque";
	font-style: normal;
	font-weight: 200 800;
	font-display: swap;
	src: url("/static/fonts/bricolage-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@view-transition {
	navigation: auto;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	font-family: var(--font-sans);
	font-size: var(--fs-md);
	font-weight: var(--fw-regular);
	line-height: var(--lh-body);
	color: var(--ink);
	background: var(--bg);
}

h1,
h2,
h3,
h4 {
	font-family: var(--font-display);
	font-weight: var(--fw-bold);
	line-height: var(--lh-tight);
	letter-spacing: var(--tracking-tight);
	text-wrap: balance;
}

h1 {
	font-size: var(--fs-3xl);
}

h2 {
	font-size: var(--fs-2xl);
}

h3 {
	font-size: var(--fs-xl);
}

h4 {
	font-size: var(--fs-lg);
}

p {
	text-wrap: pretty;
}

a:not([class*="inline-flex"]):not([class*="text-"]) {
	color: var(--accent);
	text-decoration: none;
}

a:not([class*="inline-flex"]):not([class*="text-"]):hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

:focus-visible {
	outline: 2px solid var(--focus);
	outline-offset: 2px;
	border-radius: var(--r-sm);
}

:focus:not(:focus-visible) {
	outline: none;
}

.container {
	max-width: var(--container);
	margin-inline: auto;
	padding: var(--s-5) var(--s-4);
	container-type: inline-size;
}

input,
select,
textarea {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	padding: var(--s-2) var(--s-3);
	font-size: 1rem;
	transition: border-color var(--dur-1) var(--ease);
}

input:hover,
select:hover,
textarea:hover {
	border-color: var(--line-strong);
}

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

input[type="file"] {
	padding: var(--s-1) 0;
	border: none;
}

.file-pick {
	display: inline-flex;
	align-items: center;
	gap: var(--s-2);
	padding: var(--s-2) var(--s-3);
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	font-size: var(--fs-sm);
	font-weight: var(--fw-medium);
	white-space: nowrap;
	cursor: pointer;
	transition: border-color var(--dur-1) var(--ease);
}

.file-pick:hover {
	border-color: var(--line-strong);
}

.file-pick-name {
	font-size: var(--fs-sm);
	color: var(--ink-soft);
}

/* Estilo por defecto de los botones del sitio. Los filtros van dentro de
   :where() para que la regla pese lo mismo que un selector de elemento: asi
   cualquier boton con clase propia (galeria, HUD del tour, carrusel, lightbox)
   la pisa sin tener que inflar su especificidad. */
button:where(:not([class*="inline-flex"]):not(.select-trigger)),
input[type="submit"] {
	padding: var(--s-2) var(--s-4);
	border: none;
	border-radius: var(--r-md);
	background: var(--accent);
	color: var(--accent-ink);
	font-size: 1rem;
	font-weight: 600;
	cursor: pointer;
	transition: background var(--dur-1) var(--ease), transform var(--dur-1) var(--ease);
}

button:where(:not([class*="inline-flex"]):not(.select-trigger)):hover,
input[type="submit"]:hover {
	background: var(--accent-hover);
}

button:where(:not([class*="inline-flex"]):not(.select-trigger)):active,
input[type="submit"]:active {
	transform: translateY(1px);
}

button:where(:not([class*="inline-flex"]):not(.select-trigger)):disabled,
input[type="submit"]:disabled {
	opacity: .5;
	cursor: not-allowed;
}

/* Corazon de favoritos: en rojo cuando el anuncio ya esta guardado. El :hover
   propio evita que las utilities hover:text-* del boton templUI lo apaguen. */
button.favourite-button-active,
button.favourite-button-active:hover {
	color: var(--danger);
}

table {
	width: 100%;
	border-collapse: collapse;
	font-variant-numeric: tabular-nums;
}

th {
	text-align: left;
	color: var(--ink-soft);
	font-size: var(--fs-sm);
}

td,
th {
	padding: var(--s-2) var(--s-3);
	border-bottom: 1px solid var(--line);
}

tbody tr:hover {
	background: var(--bg-sunken);
}

img,
video {
	max-width: 100%;
}

hr {
	border: 0;
	border-top: 1px solid var(--line);
}

.error {
	color: var(--danger);
	font-size: var(--fs-sm);
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}

	#ad-gallery-dropzone, #material-dropzone {
		transition: none;
	}

	.file-pick {
		transition: none;
	}
}

.skip-link {
	position: absolute;
	left: -999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.skip-link:focus {
	position: fixed;
	top: var(--s-2);
	left: var(--s-2);
	width: auto;
	height: auto;
	padding: var(--s-2) var(--s-4);
	background: var(--accent);
	color: var(--accent-ink);
	border-radius: var(--r-md);
	z-index: var(--z-modal);
}

.site-header {
	position: sticky;
	top: 0;
	z-index: var(--z-hud);
	background: color-mix(in srgb, var(--surface) 85%, transparent);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--line);
	container-type: inline-size;
	box-shadow: none;
	transition: box-shadow var(--dur-2) var(--ease), background var(--dur-2) var(--ease);
}

.site-header-scrolled {
	background: var(--surface);
	box-shadow: var(--shadow-2);
}

@container (max-width: 40rem) {
	.site-burger {
		display: inline-flex;
	}
}

.account-menu,
.lang-menu {
	position: relative;
}

.account-menu-btn,
.lang-menu-btn {
	border: 0;
	background: none;
	cursor: pointer;
	padding: var(--s-1);
	color: var(--ink);
}

.account-menu-panel,
.lang-menu-panel {
	position: absolute;
	right: 0;
	top: calc(100% + var(--s-2));
	min-width: 200px;
	display: grid;
	gap: var(--s-2);
	padding: var(--s-3);
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	box-shadow: var(--shadow-3);
	z-index: var(--z-panel);
}

.account-menu-panel[hidden],
.lang-menu-panel[hidden] {
	display: none;
}

.lang-menu-btn {
	display: inline-flex;
	align-items: center;
}

.lang-menu-panel a {
	display: flex;
	align-items: center;
	gap: var(--s-2);
	color: var(--ink);
}

.site-burger {
	display: none;
}

.site-offcanvas {
	position: fixed;
	inset: 0;
	z-index: var(--z-modal);
	background: rgba(16, 22, 19, .45);
}

.site-offcanvas-close {
	border: 0;
	background: none;
	cursor: pointer;
	padding: var(--s-1);
	color: var(--ink);
	justify-self: end;
}

.icon {
	flex: none;
	vertical-align: -.2em;
	width: 20px;
	height: 20px;
}

form {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	max-width: none;
}

#municipality-control {
	display: block;
}

#municipality-control input {
	width: 100%;
}

label {
	font-weight: 600;
	font-size: 0.9rem;
}

fieldset {
	display: flex;
	flex-direction: column;
	gap: var(--s-3);
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	padding: var(--s-4);
}

legend {
	padding-inline: var(--s-2);
	font-weight: 600;
	font-size: var(--fs-sm);
	color: var(--ink-soft);
}

.field {
	display: flex;
	flex-direction: column;
	gap: var(--s-1);
}

.account-page {
	max-width: var(--container);
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	gap: var(--s-4);
}

.account-section {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	box-shadow: var(--shadow-1);
	padding: var(--s-5);
}

.account-section h2 {
	margin-block: 0 var(--s-4);
}

.account-avatar {
	width: 96px;
	height: 96px;
	border-radius: var(--r-full);
	object-fit: cover;
}

.account-avatar-form {
	flex-direction: row;
	align-items: center;
	gap: var(--s-3);
}

.empty-state {
	max-width: var(--container);
	margin-inline: auto;
	padding: var(--s-7) var(--s-4);
	text-align: center;
	color: var(--ink-soft);
}

.empty-state .btn-ghost {
	display: inline-block;
	margin-block-start: var(--s-4);
}

.tour-page {
	position: fixed;
	inset: 0;
	z-index: var(--z-panel);
	background: #000;
	display: flex;
	flex-direction: column;
	gap: 0;
	overflow: hidden;
}

.tour-stage {
	position: relative;
	flex: 1;
	height: 100%;
}

.tour-viewer {
	width: 100%;
	height: 100%;
	background-color: #000;
	background-size: cover;
	background-position: center;
}

.tour-hud,
.tour-hotspot-panel,
.tour-contact-panel {
	background: var(--vr-glass);
	backdrop-filter: blur(14px) saturate(1.4);
	-webkit-backdrop-filter: blur(14px) saturate(1.4);
	border: 1px solid var(--vr-glass-line);
	border-radius: var(--r-lg);
	box-shadow: var(--shadow-hud);
	color: var(--vr-ink);
}

@keyframes tour-panel-in {
	from {
		transform: translateX(-50%) scale(0.96);
		opacity: 0;
	}
	to {
		transform: translateX(-50%) scale(1);
		opacity: 1;
	}
}

.tour-hud button {
	background: color-mix(in srgb, var(--vr-ink) 12%, transparent);
	color: var(--vr-ink);
	border: 1px solid var(--vr-glass-line);
}

.tour-hud .tour-exit, .tour-hud .tour-preview {
	display: inline-block;
	padding: var(--s-2) var(--s-4);
	border-radius: var(--r-md);
	background: color-mix(in srgb, var(--vr-ink) 12%, transparent);
	color: var(--vr-ink);
	border: 1px solid var(--vr-glass-line);
	font-size: 1rem;
	font-weight: 600;
	text-decoration: none;
}

.tour-hud-bottom {
	position: fixed;
	bottom: var(--s-4);
	left: var(--s-4);
	right: var(--s-4);
	z-index: var(--z-hud);
	display: flex;
	align-items: center;
	gap: var(--s-3);
	padding: var(--s-3);
	flex-wrap: wrap;
}

.tour-hud .tour-scene-switcher {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.tour-hud .tour-scene-thumb {
	scroll-snap-align: center;
	flex-shrink: 0;
	transition: transform var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
}

.tour-hud .tour-scene-thumb-active {
	border-color: var(--accent);
	transform: scale(1.06);
}

.tour-hud .tour-scene-thumb-placeholder {
	position: relative;
}

.tour-hud .tour-scene-thumb-placeholder::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, color-mix(in srgb, var(--vr-bg) 85%, transparent), transparent 60%);
}

.tour-veil {
	position: fixed;
	inset: 0;
	z-index: var(--z-modal);
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--vr-bg);
	transition: opacity var(--dur-3) var(--ease);
}

.tour-veil-out {
	opacity: 0;
	pointer-events: none;
}

.tour-veil-bg {
	position: absolute;
	inset: -20px;
	background-size: cover;
	background-position: center;
	filter: blur(20px);
}

.tour-veil-spinner {
	position: relative;
	width: 48px;
	height: 48px;
	border: 3px solid var(--vr-glass-line);
	border-top-color: var(--accent);
	border-radius: var(--r-full);
	animation: tour-veil-spin 800ms linear infinite;
}

@keyframes tour-veil-spin {
	to {
		transform: rotate(360deg);
	}
}

.tour-controls {
	display: flex;
	gap: var(--s-2);
}

.tour-controls button {
	transition: transform var(--dur-1) var(--ease);
}

.tour-controls button:hover {
	transform: scale(1.06);
}

.tour-controls button:active {
	transform: scale(0.96);
}

.tour-actions {
	display: flex;
	gap: var(--s-2);
}

.tour-stats {
	display: flex;
	align-items: center;
	gap: var(--s-2);
	margin-left: auto;
}

.tour-hits {
	font-size: var(--fs-xs);
	color: var(--vr-ink);
	opacity: 0.85;
	white-space: nowrap;
}

.tour-map-toggle {
	position: absolute;
	top: var(--s-2);
	right: var(--s-2);
}

.tour-map-collapsed img,
.tour-map-collapsed .tour-map-pin {
	display: none;
}

.tour-map-pin-active {
	animation: tour-pin-pulse 2s infinite;
}

@keyframes tour-pin-pulse {
	0%,
	100% {
		box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent);
	}
	50% {
		box-shadow: 0 0 0 8px color-mix(in srgb, var(--accent) 0%, transparent);
	}
}

.tour-scene-switcher {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.tour-scene-thumb {
	padding: 0;
	border: 2px solid transparent;
	border-radius: 4px;
	background: none;
	cursor: pointer;
	overflow: hidden;
	width: 96px;
	height: 64px;
}

.tour-scene-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.tour-scene-thumb-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	background: #e0e0e0;
	color: #1a1a1a;
	font-size: 0.75rem;
	text-align: center;
	padding: 0.25rem;
}

.tour-hotspot {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.85);
	background-size: cover;
	background-position: center;
	border: 2px solid #0a5f38;
	cursor: pointer;
}

.tour-hotspot-panel {
	position: fixed;
	top: 10%;
	left: 50%;
	transform: translateX(-50%);
	max-width: 480px;
	width: 90%;
	max-height: 80vh;
	overflow-y: auto;
	padding: 1rem;
	animation: tour-panel-in var(--dur-2) var(--ease);
}

.tour-hotspot-panel-close {
	float: right;
}

.tour-hotspot-panel-photos {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.tour-hotspot-panel-photos img {
	width: 120px;
	height: 90px;
	object-fit: cover;
	border-radius: 4px;
}

.tour-hotspot-panel-link {
	display: block;
	margin: var(--s-2) 0;
	color: var(--accent);
	word-break: break-all;
}

.tour-embed {
	width: 200px;
	transform-origin: center;
}

.tour-embed img,
.tour-embed video {
	width: 100%;
	display: block;
}

.tour-map {
	position: fixed;
	bottom: 1rem;
	right: 1rem;
	width: 200px;
}

.tour-map img {
	width: 100%;
	display: block;
	border-radius: 4px;
}

.tour-map-pin {
	position: absolute;
	width: 12px;
	height: 12px;
	padding: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.85);
	border: 2px solid #0a5f38;
	cursor: pointer;
	transform: translate(-50%, -50%);
}

.tour-map-pin-active {
	background: #0a5f38;
	border-color: #fff;
}

.tour-marquee {
	position: fixed;
	top: 0;
	padding-right: var(--s-4);
	left: 0;
	width: 100%;
	overflow: hidden;
	background: rgba(0, 0, 0, 0.6);
	color: #fff;
	padding: 0.5rem 0;
	white-space: nowrap;
	z-index: 10;
}

.tour-marquee-text {
	display: inline-block;
	padding-left: 100%;
	animation: tour-marquee-scroll 15s linear infinite;
}

@keyframes tour-marquee-scroll {
	from {
		transform: translateX(0);
	}
	to {
		transform: translateX(-100%);
	}
}

.tour-logo {
	position: fixed;
	top: 1rem;
	left: 1rem;
	z-index: 10;
}

.tour-logo img {
	max-height: 48px;
	display: block;
}

.tour-intro {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 20;
	background: #000;
	display: flex;
	align-items: center;
	justify-content: center;
}

.tour-intro-media {
	width: 100%;
	height: 100%;
	object-fit: contain;
	border: 0;
}

.tour-intro-enter {
	position: absolute;
	bottom: 2rem;
	left: 50%;
	transform: translateX(-50%);
}

.tour-intro-countdown {
	position: absolute;
	top: 1rem;
	right: 1rem;
	color: #fff;
}

.tour-contact-btn {
	position: fixed;
	bottom: 1rem;
	left: 1rem;
	z-index: 10;
}

.tour-contact-panel {
	position: fixed;
	top: 10%;
	left: 50%;
	transform: translateX(-50%);
	max-width: 480px;
	width: 90%;
	padding: 1rem;
	z-index: 20;
	animation: tour-panel-in var(--dur-2) var(--ease);
}

.tour-stage-editor {
	height: 100%;
}

.tour-editor {
	display: grid;
	grid-template-columns: 1fr min(380px, 38vw);
}

.tour-editor .tour-hud-bottom {
	right: calc(min(380px, 38vw) + var(--s-4));
}

@container (max-width: 60rem) {
	.tour-editor {
		grid-template-columns: 1fr;
	}
}

.editor-panel {
	display: flex;
	flex-direction: column;
	gap: 0;
	overflow-y: auto;
	background: var(--surface);
	border-left: 1px solid var(--line);
}

.editor-section {
	padding: var(--s-3);
	border-bottom: 1px solid var(--line);
}

.editor-section h2 {
	font-size: var(--fs-sm);
	text-transform: uppercase;
	color: var(--ink-faint);
	margin: 0 0 var(--s-2);
	letter-spacing: 0.04em;
	font-weight: 600;
}

.editor-section:has(:focus-within) {
	box-shadow: inset 2px 0 0 var(--accent);
}

.editor-section label {
	display: flex;
	flex-direction: column;
	gap: var(--s-1);
	font-size: var(--fs-sm);
	color: var(--ink-faint);
	margin-bottom: var(--s-2);
}

.editor-section input[type="text"],
.editor-section input[type="url"],
.editor-section input[type="number"],
.editor-section select,
.editor-section textarea {
	width: 100%;
	border: 1px solid var(--line-strong);
	border-radius: var(--r-sm);
	padding: var(--s-1) var(--s-2);
	font-size: var(--fs-sm);
	background: var(--surface);
	color: var(--ink);
}

.editor-section button:not(.editor-toggle) {
	padding: var(--s-1) var(--s-3);
	font-size: var(--fs-sm);
	background: var(--surface);
	color: var(--ink);
	border: 1px solid var(--line-strong);
	font-weight: 500;
}

.editor-section button:not(.editor-toggle):hover {
	background: var(--accent-soft);
}

.editor-section form > button[type="submit"]:not(.editor-toggle) {
	background: var(--accent);
	color: var(--accent-ink);
	border-color: var(--accent);
}

.editor-section .editor-toggle {
	padding: var(--s-1) var(--s-3);
	font-size: var(--fs-sm);
	font-weight: 500;
	border: 1px solid var(--line-strong);
	border-radius: var(--r-full);
	background: var(--surface);
	color: var(--ink-faint);
}

.editor-section .editor-toggle::before {
	content: "";
	display: inline-block;
	width: 0.5rem;
	height: 0.5rem;
	border-radius: var(--r-full);
	background: var(--line-strong);
	margin-right: var(--s-1);
	vertical-align: baseline;
}

.editor-section .editor-toggle-on {
	background: var(--accent-soft);
	color: var(--ink);
	border-color: var(--accent);
}

.editor-section .editor-toggle-on::before {
	background: var(--accent);
}

#ad-gallery-dropzone, #material-dropzone {
	transition: border-color var(--dur-1) var(--ease), background-color var(--dur-1) var(--ease);
}

.ad-image-delete-form {
	align-items: flex-start;
}

.editor-place-btn {
	width: 100%;
}

.editor-place-btn-active {
	background: var(--accent-soft);
	outline: 2px solid var(--accent);
}

.editor-config-toggles {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: 0.5rem;
}

.editor-audio-scenes {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	margin-top: 0.5rem;
}

.editor-audio-inherit {
	color: #666;
	font-size: 0.85rem;
}

#editor-hotspot-list {
	list-style: none;
	margin: 0.5rem 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

#editor-hotspot-list li {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	border-top: 1px solid #eee;
	padding-top: 0.5rem;
}

.editor-hotspot-photos {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.editor-hotspot-photos img {
	width: 60px;
	height: 45px;
	object-fit: cover;
	border-radius: 4px;
}

.editor-scene-add {
	margin-bottom: 0.5rem;
}

.editor-scene-add select {
	min-height: 100px;
	width: 100%;
}

#editor-scene-list {
	list-style: none;
	margin: 0.5rem 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

#editor-scene-list li {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	border-top: 1px solid #eee;
	padding-top: 0.5rem;
}

#editor-map-image {
	width: 100%;
	display: block;
	border-radius: 4px;
	cursor: crosshair;
}

#editor-map-points {
	list-style: none;
	margin: 0.5rem 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

#editor-map-points li {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	border-top: 1px solid #eee;
	padding-top: 0.5rem;
}

#editor-embed-list {
	list-style: none;
	margin: 0.5rem 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

#editor-embed-list li {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	border-top: 1px solid #eee;
	padding-top: 0.5rem;
}

.admin-header {
	background: #1a1a1a;
	border-bottom: 1px solid #333;
}

.admin-nav {
	max-width: 1100px;
	margin: 0 auto;
	padding: 0.75rem 1rem;
	display: flex;
	align-items: center;
	gap: 1rem;
}

.admin-nav .logo {
	font-weight: 700;
	color: #ffffff;
}

.admin-nav a {
	color: #dddddd;
}

.admin-nav form {
	margin: 0;
}

.admin-sections {
	list-style: none;
	margin: 0.5rem 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.btn-ghost {
	background: transparent;
	border: 1px solid var(--line-strong);
	color: var(--ink);
}

.badge {
	display: inline-flex;
	align-items: center;
	border-radius: var(--r-full);
	font-size: var(--fs-xs);
	padding: var(--s-1) var(--s-2);
	background: color-mix(in srgb, var(--ink) 8%, transparent);
}

.badge-ok {
	background: color-mix(in srgb, var(--ok) 16%, transparent);
	color: var(--ok);
}

.badge-warn {
	background: color-mix(in srgb, var(--warn) 16%, transparent);
	color: var(--warn);
}

.badge-muted {
	background: color-mix(in srgb, var(--ink-faint) 16%, transparent);
	color: var(--ink-faint);
}

.tag {
	display: inline-flex;
	padding: var(--s-1) var(--s-2);
	border: 1px solid var(--line);
	border-radius: var(--r-sm);
	font-size: var(--fs-xs);
	color: var(--ink-soft);
}

.page-head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: var(--s-4);
	flex-wrap: wrap;
	margin-block-end: var(--s-5);
}

.page-head h1,
.page-head h2 {
	color: var(--navy);
}

.page-head-cta {
	font-weight: 600;
	font-size: var(--fs-sm);
	white-space: nowrap;
}

.page-head p {
	color: var(--ink-soft);
	font-size: var(--fs-sm);
}

.toolbar {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-2);
	align-items: center;
}

@container (max-width: 48rem) {

}

.gallery-lightbox[open] {
	position: fixed;
	inset: 0;
	margin: auto;
	width: 100vw;
	height: 100vh;
	max-width: 100vw;
	max-height: 100vh;
	padding: var(--s-4);
	border: 0;
	background: transparent;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--s-4);
}

.gallery-lightbox::backdrop {
	background: color-mix(in srgb, #000 85%, transparent);
}

.gallery-lightbox-img {
	max-width: 90vw;
	max-height: 90vh;
	object-fit: contain;
	border-radius: var(--r-lg);
}

.gallery-lightbox-close,
.gallery-lightbox-prev,
.gallery-lightbox-next {
	background: color-mix(in srgb, var(--vr-ink) 12%, transparent);
	color: var(--vr-ink);
	border: 1px solid var(--vr-glass-line);
	border-radius: var(--r-full);
}

.gallery-lightbox-close {
	position: absolute;
	top: var(--s-4);
	right: var(--s-4);
}

.order-button {
	width: 100%;
}

.ad-pagination,
.admin-ads-pagination,
.admin-users-pagination {
	display: flex;
	gap: var(--s-1);
}

.ad-pagination a,
.admin-ads-pagination a,
.admin-users-pagination a {
	padding: var(--s-1) var(--s-3);
	border: 1px solid var(--line);
	border-radius: var(--r-full);
}

.ad-pagination-current,
.admin-ads-pagination-current,
.admin-users-pagination-current {
	background: var(--accent);
	color: var(--accent-ink);
}

.ad-row {
	display: grid;
	grid-template-columns: 1fr auto auto auto;
	align-items: center;
	gap: var(--s-3);
	padding: var(--s-3);
	flex: 1;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r-md);
}

.ad-video {
	display: flex;
	flex-direction: column;
	gap: var(--s-3);
}

.ad-video video {
	width: 100%;
	border-radius: var(--r-md);
}

.ad-video-form {
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--s-2);
}

.ad-form-map {
	height: 320px;
	border: 1px solid var(--line);
	border-radius: var(--r-md);
}

.ad-form-map-region {
	stroke: var(--navy);
	fill: var(--navy);
	fill-opacity: 0.08;
}

.ad-orders {
	color: var(--ink-soft);
}

.ad-orders-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--s-2);
}

.ad-order {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-3);
	padding: var(--s-3);
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r-md);
}

.material-title {
	font-weight: 600;
	font-size: var(--fs-sm);
}

.scene-list-item {
	display: flex;
	align-items: center;
	gap: var(--s-3);
	padding: var(--s-2) var(--s-3);
	border: 1px solid var(--line);
	border-radius: var(--r-md);
}

.scene-list-title {
	flex: 1;
}