.ukrmedia-alarm {
	--alarm-air: #e23232;
	--alarm-artillery: #f07a24;
	--alarm-urban: #8e1515;
	--alarm-chemical: #7b3fc6;
	--alarm-info: #3478d4;
	--alarm-clear: #dce4e9;
	--alarm-line: #ffffff;
	--alarm-ink: #15212b;
	--alarm-muted: #667580;
	position: relative;
	margin: 24px 0;
	padding: clamp(18px, 3vw, 32px);
	border: 1px solid #e4eaee;
	border-radius: 18px;
	background: #ffffff;
	box-shadow: 0 14px 40px rgba(28, 44, 55, 0.08);
	color: var(--alarm-ink);
	font-family: inherit;
}

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

.ukrmedia-alarm__top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 20px;
	margin-bottom: 20px;
}

.ukrmedia-alarm__eyebrow {
	margin: 0 0 4px;
	color: #d42d2d;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.ukrmedia-alarm__heading {
	margin: 0;
	font-size: clamp(24px, 4vw, 38px);
	line-height: 1.1;
}

.ukrmedia-alarm__sync {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
	gap: 8px;
	margin-top: 7px;
	color: var(--alarm-muted);
	font-size: 13px;
}

.ukrmedia-alarm__sync-dot {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: #2fa468;
	box-shadow: 0 0 0 4px rgba(47, 164, 104, 0.12);
}

.ukrmedia-alarm.has-error .ukrmedia-alarm__sync-dot,
.ukrmedia-alarm.has-stale-data .ukrmedia-alarm__sync-dot {
	background: #ed9d25;
	box-shadow: 0 0 0 4px rgba(237, 157, 37, 0.14);
}

.ukrmedia-alarm__layout {
	display: grid;
	grid-template-columns: minmax(0, 1.65fr) minmax(250px, 0.75fr);
	gap: 24px;
	align-items: stretch;
}

.ukrmedia-alarm__map-wrap {
	position: relative;
	min-height: 430px;
	border-radius: 14px;
	background:
		radial-gradient(circle at 50% 42%, rgba(36, 121, 198, 0.08), transparent 56%),
		#f5f8fa;
	overflow: hidden;
}

.ukrmedia-alarm__map {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 430px;
	padding: 20px;
}

.ukrmedia-alarm__map svg {
	display: block;
	width: 100%;
	height: auto;
	max-height: 460px;
	filter: drop-shadow(0 12px 14px rgba(36, 54, 67, 0.12));
}

.ukrmedia-alarm__map path {
	stroke: var(--alarm-line);
	stroke-width: 1.8;
	vector-effect: non-scaling-stroke;
	transition: fill 180ms ease, opacity 180ms ease, filter 180ms ease;
	outline: none;
}

.ukrmedia-alarm__map path:hover,
.ukrmedia-alarm__map path:focus {
	opacity: 0.86;
	filter: brightness(1.04);
	cursor: help;
}

.ukrmedia-alarm__map path.is-clear { fill: var(--alarm-clear); }
.ukrmedia-alarm__map path.is-air { fill: var(--alarm-air); }
.ukrmedia-alarm__map path.is-artillery { fill: var(--alarm-artillery); }
.ukrmedia-alarm__map path.is-urban { fill: var(--alarm-urban); }
.ukrmedia-alarm__map path.is-chemical,
.ukrmedia-alarm__map path.is-nuclear { fill: var(--alarm-chemical); }
.ukrmedia-alarm__map path.is-info { fill: var(--alarm-info); }
.ukrmedia-alarm__map path.is-unknown { fill: #d7a42f; }

.ukrmedia-alarm__loading,
.ukrmedia-alarm__muted {
	color: var(--alarm-muted);
}

.ukrmedia-alarm__tooltip {
	position: absolute;
	z-index: 5;
	width: 220px;
	padding: 11px 13px;
	border-radius: 9px;
	background: rgba(18, 29, 38, 0.96);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
	color: #ffffff;
	pointer-events: none;
}

.ukrmedia-alarm__tooltip strong,
.ukrmedia-alarm__tooltip span,
.ukrmedia-alarm__tooltip small {
	display: block;
}

.ukrmedia-alarm__tooltip strong {
	margin-bottom: 2px;
	font-size: 14px;
}

.ukrmedia-alarm__tooltip span {
	font-size: 13px;
}

.ukrmedia-alarm__tooltip small {
	margin-top: 4px;
	color: #bdc8cf;
	font-size: 11px;
}

.ukrmedia-alarm__panel {
	display: flex;
	flex-direction: column;
	min-height: 430px;
	padding: 20px;
	border: 1px solid #e4eaee;
	border-radius: 14px;
	background: #fbfcfd;
}

.ukrmedia-alarm__counter {
	display: flex;
	align-items: flex-end;
	gap: 10px;
	padding-bottom: 16px;
	border-bottom: 1px solid #e4eaee;
}

.ukrmedia-alarm__counter strong {
	font-size: 42px;
	line-height: 0.9;
}

.ukrmedia-alarm__counter span {
	max-width: 130px;
	color: var(--alarm-muted);
	font-size: 13px;
	line-height: 1.25;
}

.ukrmedia-alarm__active-list {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 6px;
	max-height: 350px;
	margin-top: 13px;
	overflow-y: auto;
}

.ukrmedia-alarm__region {
	display: grid;
	grid-template-columns: 9px minmax(0, 1fr);
	gap: 10px;
	padding: 8px 4px;
}

.ukrmedia-alarm__region > i {
	width: 8px;
	height: 8px;
	margin-top: 5px;
	border-radius: 50%;
	background: #d7a42f;
}

.ukrmedia-alarm__region > i.is-air { background: var(--alarm-air); }
.ukrmedia-alarm__region > i.is-artillery { background: var(--alarm-artillery); }
.ukrmedia-alarm__region > i.is-urban { background: var(--alarm-urban); }
.ukrmedia-alarm__region > i.is-chemical,
.ukrmedia-alarm__region > i.is-nuclear { background: var(--alarm-chemical); }
.ukrmedia-alarm__region > i.is-info { background: var(--alarm-info); }

.ukrmedia-alarm__region strong,
.ukrmedia-alarm__region span {
	display: block;
}

.ukrmedia-alarm__region strong {
	font-size: 14px;
	line-height: 1.25;
}

.ukrmedia-alarm__region span {
	margin-top: 2px;
	color: var(--alarm-muted);
	font-size: 12px;
	line-height: 1.3;
}

.ukrmedia-alarm__all-clear {
	display: flex;
	flex: 1;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 20px 0;
	text-align: center;
}

.ukrmedia-alarm__all-clear::before {
	content: "✓";
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	margin-bottom: 12px;
	border-radius: 50%;
	background: #e0f4e9;
	color: #258556;
	font-size: 24px;
	font-weight: 800;
}

.ukrmedia-alarm__all-clear span {
	margin-top: 4px;
	color: var(--alarm-muted);
	font-size: 12px;
}

.ukrmedia-alarm__legend {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 18px;
	margin-top: 18px;
	color: #52616c;
	font-size: 12px;
}

.ukrmedia-alarm__legend span {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.ukrmedia-alarm__legend i {
	width: 10px;
	height: 10px;
	border-radius: 3px;
	background: var(--alarm-clear);
}

.ukrmedia-alarm__legend .is-air { background: var(--alarm-air); }
.ukrmedia-alarm__legend .is-artillery { background: var(--alarm-artillery); }
.ukrmedia-alarm__legend .is-urban { background: var(--alarm-urban); }
.ukrmedia-alarm__legend .is-chemical { background: var(--alarm-chemical); }
.ukrmedia-alarm__legend .is-clear { background: var(--alarm-clear); }

.ukrmedia-alarm__notice {
	margin-top: 18px;
	padding: 13px 15px;
	border-left: 4px solid #e23232;
	border-radius: 6px;
	background: #fff3f3;
	color: #502323;
	font-size: 13px;
	line-height: 1.5;
}

.ukrmedia-alarm__source {
	margin: 12px 0 0;
	color: #7b8992;
	font-size: 11px;
}

.ukrmedia-alarm__error {
	margin: auto;
	padding: 20px;
	color: #a22323;
	text-align: center;
}

@media (max-width: 820px) {
	.ukrmedia-alarm__layout {
		grid-template-columns: 1fr;
	}

	.ukrmedia-alarm__panel {
		min-height: auto;
	}

	.ukrmedia-alarm__active-list {
		max-height: 280px;
	}
}

@media (max-width: 560px) {
	.ukrmedia-alarm {
		padding: 15px;
		border-radius: 12px;
	}

	.ukrmedia-alarm__top {
		display: block;
	}

	.ukrmedia-alarm__sync {
		margin-top: 10px;
	}

	.ukrmedia-alarm__map-wrap,
	.ukrmedia-alarm__map {
		min-height: 300px;
	}

	.ukrmedia-alarm__map {
		padding: 10px;
	}

	.ukrmedia-alarm__panel {
		padding: 15px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ukrmedia-alarm__map path {
		transition: none;
	}
}