.cam-root {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	width: 100%;
	max-width: 100%;
	display: block;
	color: #0c182d;
}

/* ---- map wrap ---- */
.cam-map-wrap {
	position: relative;
	width: 100%;
	max-width: 100%;
	overflow: visible;
}
.cam-svg {
	width: 100%;
	height: auto;
	display: block;
}

/* ---- regions ---- */
.cam-region {
	stroke: #fff;
	stroke-width: 1.2;
	transition: filter 0.15s;
	cursor: pointer;
}
.cam-region.is-hover { filter: brightness( 1.08 ) saturate( 1.1 ); }
.cam-region-faint { stroke: #fff; }
.cam-region-faint.is-hover { filter: brightness( 0.97 ); }

/* ---- routes ---- */
.cam-route {
	fill: none;
	stroke-width: 2.4;
	stroke-dasharray: 7 6;
	opacity: 0.9;
	animation: cam-dash 1.1s linear infinite;
}
@keyframes cam-dash { to { stroke-dashoffset: -26; } }

/* ---- vehicle ---- */
.cam-vehicle-glow {
	opacity: 0.3;
	filter: blur( 3px );
}

/* ---- city dots ---- */
.cam-city { }
.cam-city-label {
	font-size: 9px;
	fill: #0c182d;
	pointer-events: none;
}
.cam-city-label-capital {
	font-size: 10px;
	font-weight: 600;
	fill: #0c182d;
}

/* ---- idle bubbles ---- */
.cam-bubble-bg {
	fill: rgba( 255, 255, 255, 0.88 );
	stroke: rgba( 36, 123, 255, 0.4 );
	stroke-width: 1;
}
.cam-bubble-title {
	font-size: 11px;
	font-weight: 600;
	fill: #0c182d;
	pointer-events: none;
}
.cam-bubble-line {
	font-size: 10px;
	fill: #3a567a;
	pointer-events: none;
}

/* ---- glass popup ---- */
.cam-popup {
	position: absolute;
	z-index: 5;
	width: 280px;
	max-width: calc( 100% - 16px );
	background: rgb( 255 255 255 / 52% );
	backdrop-filter: blur( 2px ) saturate( 10% );
	-webkit-backdrop-filter: blur( 2px ) saturate( 10% );
	border: 1px solid rgba( 36, 123, 255, 0.4 );
	border-radius: 16px;
	padding: 16px 18px;
	box-shadow:
		0 0 0 1px rgba( 255, 255, 255, 0.4 ) inset,
		0 4px 10px rgba( 12, 24, 45, 0.18 ),
		0 0 2px rgba( 36, 123, 255, 0.28 );
	color: #0c182d;
}
.cam-popup-close {
	position: absolute;
	top: 8px;
	right: 10px;
	background: none;
	border: none;
	font-size: 18px;
	line-height: 1;
	color: #3a567a;
	cursor: pointer;
	padding: 4px;
}
.cam-popup-close:hover { color: #0c182d; }

/* ---- popup content ---- */
.cam-panel-hint {
	font-size: 13px;
	color: #3a567a;
	margin: 0;
}
.cam-panel-kicker {
	font-size: 12px;
	color: #3a567a;
	margin: 0 0 4px;
	display: flex;
	align-items: center;
	gap: 6px;
}
.cam-route-swatch {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	display: inline-block;
	box-shadow: 0 0 6px currentColor;
}
.cam-panel-title {
	font-weight: 600;
	font-size: 16px;
	margin: 0 20px 10px 0;
	color: #0c182d;
}
.cam-panel-summary {
	font-size: 13px;
	color: #2a3c54;
	line-height: 1.5;
	margin: 0 0 10px;
}
.cam-panel-image {
	width: 100%;
	border-radius: 10px;
	margin-bottom: 10px;
}
.cam-panel-inactive-notice {
	font-size: 13px;
	color: #4a4f57;
	background: rgba( 12, 24, 45, 0.06 );
	border-radius: 10px;
	padding: 10px 12px;
	line-height: 1.5;
	margin: 0;
}
.cam-panel-more-link {
	display: inline-block;
	font-size: 13px;
	font-weight: 600;
	margin-top: 10px;
	color: #247bff;
	text-decoration: none;
}
.cam-panel-more-link:hover { text-decoration: underline; }

/* ---- packages count row ---- */
.cam-packages-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	background: rgba( 36, 123, 255, 0.08 );
	border: 1px solid rgba( 36, 123, 255, 0.2 );
	border-radius: 10px;
	padding: 10px 14px;
	margin-bottom: 10px;
}
.cam-packages-label {
	font-size: 12px;
	color: #3a567a;
}
.cam-packages-value {
	font-size: 22px;
	font-weight: 700;
	color: #247bff;
	letter-spacing: -0.5px;
}

/* ---- tags ---- */
.cam-panel-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 4px;
}
.cam-tag {
	font-size: 11px;
	background: rgba( 36, 123, 255, 0.1 );
	border: 1px solid rgba( 36, 123, 255, 0.3 );
	color: #0c182d;
	border-radius: 20px;
	padding: 3px 10px;
}

/* ---- route popup ---- */
.cam-route-stops {
	font-size: 13px;
	color: #2a3c54;
	padding-left: 18px;
	margin: 0 0 10px;
}

.cam-error {
	font-size: 13px;
	color: #b3261e;
	padding: 16px;
}