@charset "utf-8";

/* global */
* {margin:0;padding:0;box-sizing:border-box;}
html, body {
	width:100%;
	height:100%;
	min-width:1200px;
	min-height:600px;
	overflow:hidden;
}
body {
	position:relative;
	font-family:"Microsoft Yahei", Arial, sans-serif;
	background:rgb(40, 30, 47) url("../img/bg.png") 0 0 / 100% 100% no-repeat;
}

/* layout */
#header {
	position:relative;
	height:72px;
	background:url("../img/header.png") 0 0 / 100% 100% no-repeat;
	overflow:hidden;
}
.header-title {line-height:64px;text-align:center;font-size:34px;font-weight:400;color:#fff;}
.header-info {position:absolute;top:32px;font-size:18px;color:#73aae5;}
.header-info-l {left:20px;}
.header-info-r {right:20px;}

/* 全屏按钮样式 */
.fullscreen-btn {
	position: absolute;
	top: 50%;
	left: 200px; /* 移动到左侧，在"AI智能租房平台"后面 */
	transform: translateY(-50%);
	background: rgba(115, 170, 229, 0.15); /* 使用同色系，低调的背景 */
	border: 1px solid rgba(115, 170, 229, 0.2);
	border-radius: 6px;
	padding: 6px 12px;
	color: #73aae5; /* 使用和header-info相同的颜色 */
	font-size: 12px;
	font-weight: 400;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 4px;
	transition: all 0.3s ease;
	backdrop-filter: blur(5px);
}

.fullscreen-btn:hover {
	background: rgba(115, 170, 229, 0.25); /* 悬停时稍微加深 */
	border-color: rgba(115, 170, 229, 0.4);
	color: #b0c2f9; /* 悬停时稍微亮一点 */
	transform: translateY(-50%) scale(1.02); /* 减小放大幅度 */
}

.fullscreen-btn:active {
	transform: translateY(-50%) scale(0.98);
}

.fullscreen-icon {
	font-size: 12px; /* 调整图标大小 */
	line-height: 1;
	transition: transform 0.3s ease;
}

.fullscreen-btn:hover .fullscreen-icon {
	transform: scale(1.05); /* 减小悬停放大效果 */
}

.fullscreen-text {
	font-family: "Microsoft Yahei", Arial, sans-serif;
	line-height: 1;
}

/* 全屏提示样式 */
.fullscreen-hint {
	position: fixed;
	top: 20px;
	left: 50%;
	transform: translateX(-50%);
	background: rgba(0, 0, 0, 0.8);
	color: #fff;
	padding: 8px 16px;
	border-radius: 20px;
	font-size: 12px;
	font-family: "Microsoft Yahei", Arial, sans-serif;
	z-index: 10000;
	border: 1px solid rgba(255, 255, 255, 0.2);
	backdrop-filter: blur(10px);
	animation: fadeInDown 0.5s ease-out;
}

@keyframes fadeInDown {
	0% {
		opacity: 0;
		transform: translateX(-50%) translateY(-20px);
	}
	100% {
		opacity: 1;
		transform: translateX(-50%) translateY(0);
	}
}

/* 全屏状态下的样式调整 */
.fullscreen-active .fullscreen-btn {
	background: rgba(115, 170, 229, 0.2); /* 全屏时稍微明显一点 */
	border-color: rgba(115, 170, 229, 0.3);
	color: #b0c2f9;
}

.fullscreen-active .fullscreen-btn:hover {
	background: rgba(115, 170, 229, 0.35);
	border-color: rgba(115, 170, 229, 0.5);
	color: #c8d4f7;
}

/* 全屏模式下的页面优化 */
.fullscreen-active #header {
	z-index: 9999; /* 确保头部在最上层 */
}

.fullscreen-active .chart-wrapper {
	border-color: rgba(176, 194, 249, 0.3); /* 全屏时增强边框可见性 */
}

.fullscreen-active .chart-title {
	text-shadow: 0 0 10px rgba(154, 168, 212, 0.5); /* 全屏时增加标题发光效果 */
}

/* 全屏模式下的过渡动画 */
body {
	transition: all 0.3s ease;
}

.fullscreen-active {
	background-attachment: fixed; /* 全屏时固定背景 */
}
#footer {
	position:absolute;
	bottom:0;
	left:0;
	right:0;
	height:28px;
	background:url("../img/footer.png") 0 0 / 100% 100% no-repeat;
}
#container {position:absolute;top:72px;bottom:22px;left:0;right:0;}

#flexCon {
	height:100%;
	display:-webkit-flex;
	display:-ms-flexbox;
	display:flex;
	-webkit-flex-direction:column;
	-ms-flex-direction:column;
	flex-direction:column;
}

/* 上半部分2×2布局 */
.upper-section {
	-webkit-flex:4;
	-ms-flex:4;
	flex:4;
	display:-webkit-flex;
	display:-ms-flexbox;
	display:flex;
}

/* 下半部分1×3布局 */
.lower-section {
	-webkit-flex:1.5;
	-ms-flex:1.5;
	flex:1.5;
	display:-webkit-flex;
	display:-ms-flexbox;
	display:flex;
}

.flex-row {
	display:-webkit-flex;
	display:-ms-flexbox;
	display:flex;
}

.flex-cell {padding:8px;}
.flex-cell-l,
.flex-cell-r {-webkit-flex:1;-ms-flex:1;flex:1;}
.flex-cell-third {-webkit-flex:1;-ms-flex:1;flex:1;}

/* 双模块容器 */
.double-module {
	height: 100%;
	display: flex;
	flex-direction: column;
}

/* 左侧模块 - 公寓统计占比极小，地图占比极大 */
.double-module.left-side .upper-module {
	flex: 0.3; /* 公寓统计稍微增加到30% */
	margin-bottom: 8px;
}

.double-module.left-side .lower-module {
	flex: 1.7; /* 地图占70% */
}

/* 右侧模块 - 核心指标占较大比例，趋势图适中 */
.double-module.right-side .upper-module {
	flex: 0.8; /* 核心指标占45% */
	margin-bottom: 8px;
}

.double-module.right-side .lower-module {
	flex: 1.2; /* 趋势图占55% */
}

/* 通用模块样式（备用） */
.upper-module {
	flex: 0.4;
	margin-bottom: 8px;
}

.lower-module {
	flex: 1.6;
}

.chart-wrapper {
	position:relative;
	height:100%;
	border: 2px solid rgba(176, 194, 249, 0.2);
	border-radius: 8px;
	background: rgba(0, 0, 0, 0.4); /* 半透明背景 */
	backdrop-filter: blur(5px); /* 毛玻璃效果 */
}
.chart-title {height:32px;font-size:20px;font-weight:normal;color:#9aa8d4;text-align:center;padding-top:8px;}
.chart-div {position:absolute;top:40px;bottom:10px;left:10px;right:10px;}

/* 入驻统计样式 */
.apartment-stats {
	width: 100%;
	height: 100%;
	border-collapse: collapse;
}
.stat-item {
	text-align: center;
	vertical-align: middle;
	padding: 20px;
}
.stat-icon {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-bottom: 15px;
	height: 60px;
}
.stat-icon svg {
	filter: drop-shadow(0 0 10px rgba(24, 141, 240, 0.3));
	transition: all 0.3s ease;
}
.stat-item:hover .stat-icon svg {
	filter: drop-shadow(0 0 20px rgba(24, 141, 240, 0.6));
	transform: scale(1.1);
}
.stat-content p {
	margin: 5px 0;
	line-height: 1;
	font-size: 14px;
	color: #b0c2f9;
}
.stat-content p span {
	font-size: 56px; /* 🔧 从36px增大到56px，提升公寓统计数值醒目度 */
	font-weight: bold;
	color: #fff;
	display: block;
	margin-bottom: 10px;
	text-shadow: 0 0 20px rgba(255, 255, 255, 0.5); /* 添加发光效果 */
}

/* 压缩版统计样式 */
.compact-stats {
	min-height: 60px; /* 进一步压缩高度 */
}

.compact-stats .chart-title {
	height: 28px; /* 稍微增加标题高度 */
	font-size: 20px; /* 🔧 增大标题字体 */
	padding-top: 4px;
	font-weight: 600; /* 增加字体粗细 */
}

.compact-stats .chart-div {
	top: 28px; /* 调整内容位置 */
}

.compact-stats-container {
	display: flex;
	align-items: center;
	justify-content: space-around;
	height: 100%;
	padding: 8px;
}

.stat-item-compact {
	display: flex;
	align-items: center;
	gap: 10px;
}

.stat-icon-small {
	display: flex;
	justify-content: center;
	align-items: center;
}

.stat-icon-small svg {
	filter: drop-shadow(0 0 6px rgba(24, 141, 240, 0.3));
	transition: all 0.3s ease;
}

.stat-item-compact:hover .stat-icon-small svg {
	filter: drop-shadow(0 0 12px rgba(24, 141, 240, 0.6));
	transform: scale(1.05);
}

.stat-content-compact {
	text-align: left;
}

.stat-content-compact p {
	margin: 1px 0;
	line-height: 1.1;
}

.stat-content-compact p:first-child {
	font-size: 16px; /* 文字大小 */
	font-weight: bold;
	color: #fff;
	text-shadow: 0 0 10px rgba(24, 141, 240, 0.8);
}

/* 🔧 专门针对数值span的样式 */
.stat-content-compact p:first-child span {
	font-size: 42px; /* 🔧 进一步增大数值字体大小 */
	font-weight: bold;
	color: #fff;
	text-shadow: 0 0 20px rgba(24, 141, 240, 1); /* 增强发光效果 */
}

.stat-content-compact p:last-child {
	font-size: 14px; /* 🔧 增大标签字体 */
	color: #b0c2f9;
	font-weight: 500; /* 增加字体粗细 */
}

.stat-divider {
	width: 1px;
	height: 35px;
	background: linear-gradient(to bottom, 
		transparent, 
		rgba(176, 194, 249, 0.3) 20%, 
		rgba(176, 194, 249, 0.6) 50%, 
		rgba(176, 194, 249, 0.3) 80%, 
		transparent
	);
}

/* 三列指标样式 */
.data-metrics-three-col {
	width: 100%;
	height: 100%;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: repeat(2, 1fr);
	gap: 6px;
	padding: 8px;
}

/* 二列指标样式 - 2×2网格布局 */
.data-metrics-two-col {
	width: 100%;
	height: 100%;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-template-rows: repeat(2, 1fr);
	gap: 10px; /* 增加间距，因为空间更宽敞 */
	padding: 12px; /* 增加内边距 */
}

.metric-card {
	background: rgba(24, 141, 240, 0.1);
	border: 1px solid rgba(24, 141, 240, 0.3);
	border-radius: 6px;
	padding: 8px;
	text-align: center;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 60px;
}

/* 二列布局下的metric-card优化样式 */
.data-metrics-two-col .metric-card {
	padding: 12px; /* 更大的内边距 */
	min-height: 80px; /* 增加最小高度 */
	transition: all 0.3s ease;
}

.data-metrics-two-col .metric-card:hover {
	background: rgba(24, 141, 240, 0.15);
	border-color: rgba(24, 141, 240, 0.5);
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(24, 141, 240, 0.3);
}

.data-metrics-two-col .metric-card h4 {
	font-size: 18px; /* 🔧 增大标题字体 */
	margin-bottom: 8px;
	font-weight: 600; /* 增加字体粗细 */
}

.data-metrics-two-col .metric-value {
	font-size: 50px; /* 🔧 进一步增大数值字体 */
}

.metric-card h4 {
	font-size: 11px;
	color: #9aa8d4;
	margin-bottom: 6px;
	line-height: 1.2;
}

.metric-value {
	font-size: 36px; /* 🔧 从20px增大到36px，提升核心指标醒目度 */
	font-weight: bold;
	color: #fff;
	text-shadow: 0 0 15px rgba(24, 141, 240, 0.8); /* 增强发光效果 */
	line-height: 1;
}

/* 平台用户数据样式（保持原有的两列样式作为备用） */
.data-metrics {
	width: 100%;
	height: 100%;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-template-rows: repeat(3, 1fr);
	gap: 15px;
}
.metric-card {
	background: rgba(24, 141, 240, 0.1);
	border: 1px solid rgba(24, 141, 240, 0.3);
	border-radius: 6px;
	padding: 15px;
	text-align: center;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.metric-card h4 {
	font-size: 14px;
	color: #9aa8d4;
	margin-bottom: 10px;
}
.metric-value {
	font-size: 18px; /* 容器字体 */
	font-weight: bold;
	color: #fff;
	text-shadow: 0 0 18px rgba(24, 141, 240, 0.9);
}

/* 🔧 专门针对核心指标数值span的样式 */
.metric-value span {
	font-size: 52px; /* 🔧 进一步增大核心指标数值字体 */
	font-weight: bold;
	color: #fff;
	text-shadow: 0 0 25px rgba(24, 141, 240, 1); /* 增强发光效果 */
}

/* 响应度样式 - 重新设计美化 */
.response-rate-container {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height: 100%;
	padding: 20px 15px; /* 🔧 减少内边距，确保内容完全显示 */
	text-align: center;
}

.response-rate-display {
	margin-bottom: 15px; /* 🔧 减少间距，确保两个指标都能显示 */
	position: relative;
}

/* 🔧 响应度指标：文字左对齐，数值右对齐 */
.rate-header {
	display: flex;
	justify-content: space-between; /* 两端对齐：文字左，数值右 */
	align-items: baseline;
	margin-bottom: 8px;
}

.rate-value {
	font-size: 32px; /* 🔧 在横向布局中调整字体大小 */
	font-weight: bold;
	color: #fff;
	text-shadow: 0 0 15px rgba(230, 182, 0, 0.9);
	line-height: 1; /* 🔧 确保行高紧凑 */
	margin: 0; /* 🔧 横向布局时移除边距 */
}

.rate-unit {
	font-size: 20px; /* 🔧 在横向布局中调整单位字体大小 */
	color: #e6b600;
	vertical-align: top; /* 🔧 调整单位符号位置 */
}

.rate-label {
	font-size: 15px; /* 🔧 标签字体大小 */
	color: #9aa8d4;
	margin: 0; 
	white-space: nowrap; /* 🔧 防止标签文字换行 */
	flex-shrink: 0; /* 🔧 防止标签被压缩 */
}

.rate-progress {
	width: 100%; /* 🔧 左对齐时进度条使用全宽 */
	margin: 8px 0; /* 🔧 左对齐布局的边距 */
}

.progress-bar {
	width: 100%;
	height: 6px; /* 🔧 稍微减小进度条高度 */
	background: rgba(176, 194, 249, 0.2);
	border-radius: 3px;
	overflow: hidden;
	position: relative;
}

.progress-fill {
	height: 100%;
	background: linear-gradient(90deg, #e6b600 0%, #ceac09 100%);
	border-radius: 3px;
	transition: width 0.5s ease;
	box-shadow: 0 0 8px rgba(230, 182, 0, 0.5); /* 🔧 添加发光效果 */
}

/* 用户动态样式 */
.user-activity-container {
	height: 100%;
	overflow: hidden;
}
.activity-list {
	height: 100%;
	overflow: hidden;
	position: relative;
	max-height: 360px; /* 限制最大高度，约8行 */
}
.activity-item {
	display: flex;
	align-items: center;
	padding: 8px 15px;
	height: 45px; /* 固定行高 */
	border-bottom: 1px solid rgba(176, 194, 249, 0.1);
	background: rgba(24, 141, 240, 0.05);
	margin-bottom: 2px;
	border-radius: 4px;
	transition: all 0.3s ease;
	flex-shrink: 0; /* 防止压缩 */
}
.activity-item:hover {
	background: rgba(24, 141, 240, 0.1);
}
.activity-icon {
	font-size: 16px;
	margin-right: 10px;
	width: 20px;
	flex-shrink: 0;
}
.activity-text {
	flex: 1;
	font-size: 13px;
	color: #b0c2f9;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.activity-time {
	font-size: 11px;
	color: #73aae5;
	flex-shrink: 0;
	margin-left: 10px;
}

/* 加载动画 */
.chart-loader {
	position:absolute;
	top:0;
	left:0;
	z-index:99;
	width:100%;
	height:100%;
	background:rgba(0, 0, 0, 0.3);
	transition:all .8s;
	display: flex;
	align-items: center;
	justify-content: center;
}
.chart-done .chart-loader {
	opacity: 0;
	visibility: hidden;
}
.loader {
	border: 4px solid rgba(176, 194, 249, 0.3);
	border-top: 4px solid #188df0;
	border-radius: 50%;
	width: 40px;
	height: 40px;
	animation: spin 1s linear infinite;
}
@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

/* 数字跳动动画 */
@keyframes pulse {
	0% { transform: scale(1); }
	50% { transform: scale(1.05); }
	100% { transform: scale(1); }
}
.pulse-animation {
	animation: pulse 0.6s ease-in-out;
}

/* 响应式媒体查询 */
@media (max-width:1900px) {
	#header {height:48px;}
	.header-title {line-height:42px;font-size:24px;}
	.header-info {top:17px;font-size:14px;}
	.header-info-l {left:15px;}
	.header-info-r {right:15px;}
	.flex-cell {padding:6px;}
	.chart-title {height:24px;font-size:16px;}
	.chart-div {top:28px;}
	
	/* 中等屏幕全屏按钮调整 */
	.fullscreen-btn {
		left: 180px; /* 调整左侧位置 */
		padding: 5px 10px;
		font-size: 11px;
	}
	
	.fullscreen-icon {
		font-size: 11px;
	}
	
	/* 压缩版统计调整 */
	.compact-stats {min-height: 50px;}
	.compact-stats .chart-title {height: 24px; font-size: 18px;} /* 🔧 保持较大字体 */
	.compact-stats .chart-div {top: 28px;}
	.stat-content-compact p:first-child {font-size: 16px;} /* 🔧 保持较大字体 */
	.stat-content-compact p:first-child span {font-size: 36px;} /* 🔧 数值字体 */
	.stat-content-compact p:last-child {font-size: 12px;} /* 🔧 标签字体 */
	.stat-divider {height: 30px;}
	
	/* 三列指标调整 */
	.metric-card {min-height: 50px; padding: 6px;}
	.metric-card h4 {font-size: 10px;}
	.metric-value {font-size: 18px;}
	.rate-value {font-size: 36px;}
	.rate-unit {font-size: 28px;}
	
	/* 二列布局在中等屏幕的调整 */
	.data-metrics-two-col {
		gap: 8px;
		padding: 10px;
	}
	
	.data-metrics-two-col .metric-card {
		min-height: 65px;
		padding: 8px;
	}
	
	.data-metrics-two-col .metric-card h4 {
		font-size: 16px; /* 🔧 保持较大字体 */
	}
	
	.data-metrics-two-col .metric-value {
		font-size: 44px; /* 🔧 保持较大字体 */
	}
	
	#footer {height:16px;}
	#container {top:48px;bottom:12px;}
}

@media (max-width:1400px) {
	.header-title {font-size:20px;}
	.chart-title {font-size:14px;}
	
	/* 小屏幕全屏按钮调整 */
	.fullscreen-btn {
		left: 160px; /* 调整左侧位置 */
		padding: 4px 8px;
		font-size: 10px;
	}
	
	.fullscreen-icon {
		font-size: 10px;
	}
	
	.fullscreen-text {
		display: none; /* 小屏幕隐藏文字，只显示图标 */
	}
	
	/* 更小屏幕的调整 */
	.compact-stats {min-height: 45px;}
	.stat-content-compact p:first-child {font-size: 14px;} /* 🔧 保持较大字体 */
	.stat-content-compact p:first-child span {font-size: 32px;} /* 🔧 数值字体 */
	.metric-value {font-size: 18px;}
	.metric-card h4 {font-size: 11px;} /* 🔧 稍大字体 */
	.rate-value {font-size: 32px;}
	
	/* 可能需要调整为2×3布局 */
	.data-metrics-three-col {
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: repeat(3, 1fr);
	}
	
	/* 小屏幕下二列布局调整 */
	.data-metrics-two-col {
		gap: 8px;
		padding: 10px;
	}
	
	.data-metrics-two-col .metric-card {
		min-height: 70px;
		padding: 10px;
	}
	
	.data-metrics-two-col .metric-card h4 {
		font-size: 14px; /* 🔧 保持较大字体 */
	}
	
	.data-metrics-two-col .metric-value {
		font-size: 40px; /* 🔧 保持较大字体 */
	}
}

/* 滚动动画 */
@keyframes slideUp {
	0% {
		transform: translateY(100%);
		opacity: 0;
	}
	100% {
		transform: translateY(0);
		opacity: 1;
	}
}
.slide-up {
	animation: slideUp 0.5s ease-out;
}

/* 地图标签动效 */
@keyframes labelPulse {
	0% {
		transform: scale(1);
		box-shadow: 0 0 0 0 rgba(230, 182, 0, 0.7);
	}
	50% {
		transform: scale(1.05);
		box-shadow: 0 0 0 10px rgba(230, 182, 0, 0.3);
	}
	100% {
		transform: scale(1);
		box-shadow: 0 0 0 20px rgba(230, 182, 0, 0);
	}
}

@keyframes labelGlow {
	0% {
		text-shadow: 0 0 5px rgba(24, 141, 240, 0.5);
	}
	50% {
		text-shadow: 0 0 20px rgba(24, 141, 240, 0.9), 0 0 30px rgba(230, 182, 0, 0.6);
	}
	100% {
		text-shadow: 0 0 5px rgba(24, 141, 240, 0.5);
	}
}

@keyframes fadeInUp {
	0% {
		opacity: 0;
		transform: translateY(10px) scale(0.9);
	}
	100% {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

/* 地图点闪烁动效 */
@keyframes pointShine {
	0% {
		box-shadow: 0 0 5px rgba(230, 182, 0, 0.5);
	}
	50% {
		box-shadow: 0 0 25px rgba(230, 182, 0, 0.9), 0 0 35px rgba(24, 141, 240, 0.6);
	}
	100% {
		box-shadow: 0 0 5px rgba(230, 182, 0, 0.5);
	}
}