/* >>>>>>>>>> 全局变量 <<<<<<<<<< */
:root {
	--title: 6vh;   /* 标题区域高度 */
	--size: 8vh;    /* 滑块区域高度 */
	--code: 15vh;   /* 代码区域高度 */
	--bottom: 4vh;  /* 底部区域高度 */
	--view: calc(100vh - var(--title) - var(--size) - var(--code) - var(--bottom)); /* 图标显示区域高度 */
	--thumb-size: 12px; /* 滑块手柄大小 */
}
/* >>>>>>>>>> 全局样式 <<<<<<<<<< */
body{ margin:0 auto; padding:0; font-family:segoe ui,Tahoma,Geneva,Verdana,sans-serif; }
/* >>>>>>>>>> 标题区域 <<<<<<<<<< */
#zone_title{ font-size:32px; font-weight:700; text-align:center; position:fixed; top:0; width:100vw; height:var(--title); line-height:var(--title); font-family: YouYuan; }
/* >>>>>>>>>> 滑块区域 <<<<<<<<<< */
/* 滑块外层容器 */
.zone_size { position: fixed;   top: var(--title);  left: 25vw; z-index: 999;   width: 50vw;    height: var(--size);    }
/* 标签区域 > 标题 */
.zone_size_label {  display: flex;  justify-content: space-between; align-items: center;    margin-bottom: 10px;    color: #333;    font-weight: 500;   }
/* 标签区域 > 数量 */
.zone_size_view { background:linear-gradient(135deg,#667eea 0%,#764ba2 100%); color:#FFF; padding: 4px 12px; border-radius: 20px; font-size: 14px; min-width: 40px; text-align: center; }
/* >>>>>>>>>> 滑块区域 > 滑块组件 <<<<<<<<<< */
/* 滑块组件 > 基础样式 */
.zone_size_obj {
	-webkit-appearance:none; -moz-appearance:none; appearance: none;/* 重置浏览器默认样式 */
	width:100%; height:8px; border-radius:10px; background:#e0e0e0; outline:none; position:relative; transition:all 0.3s ease;
}
/* 滑块组件 > 手柄 > Chrome/Safari/Edge */
.zone_size_obj::-webkit-slider-thumb {
	-webkit-appearance: none; appearance: none; width:var(--thumb-size); height:var(--thumb-size); border-radius:50%; background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);
	cursor: pointer; box-shadow: 0 0 0 3px white,0 4px 12px rgba(102, 126, 234, 0.4); transition: all 0.3s ease;
}
/* 滑块组件 > 手柄 > Firefox */
.zone_size_obj::-moz-range-thumb {
	-moz-appearance:none !important; appearance:none !important; width:var(--thumb-size) !important; height:var(--thumb-size) !important; border-radius:50% !important;
	background:linear-gradient(135deg,#667eea 0%,#764ba2 100%)!important;
	cursor:pointer!important; border:3px solid #FFF !important; box-shadow:0 4px 12px rgba(102,126,234,0.4)!important; transition:all 0.3s ease !important;
}
/* 滑块组件 > 手柄 > IE/旧版Edge */
.zone_size_obj::-ms-thumb {
	-webkit-appearance:none; -moz-appearance:none; appearance:none; width:var(--thumb-size); height:var(--thumb-size); border-radius:50%;
	background:linear-gradient(135deg, #667eea 0%, #764ba2 100%); cursor:pointer; box-shadow:0 0 0 3px #FFF,0 4px 12px rgba(102, 126, 234, 0.4); transition:all 0.3s ease;
}
/* 滑块组件 > 手柄 > 悬停效果 > Chrome/Safari/Edge */
.zone_size_obj::-webkit-slider-thumb:hover {    transform: scale(1.2);  box-shadow:0 0 0 3px white,0 6px 20px rgba(102, 126, 234, 0.6); }
/* 滑块组件 > 手柄 > 悬停效果 > Firefox */
.zone_size_obj::-moz-range-thumb:hover { transform: scale(1.2) !important; border: 3px solid #FFF !important; box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6) !important; }
/* 滑块组件 > 手柄 > 悬停效果 > IE/旧版Edge */
.zone_size_obj::-ms-thumb:hover {   transform: scale(1.2);  box-shadow:0 0 0 3px white,0 6px 20px rgba(102, 126, 234, 0.6);  }
/* 滑块组件 > Firefox专用轨道样式，允许父元素的渐变背景透出来 */
.zone_size_obj::-moz-range-track { height:8px; border-radius:10px; background:transparent; border:none; }
/* 滑块组件 > 轨道悬停效果 > 非填充状态的悬停：浅灰色渐变 */
.zone_size_obj:not(.fill):hover {   background: linear-gradient(to right, #e0e0e0 0%, #f0f0f0 100%);}
/* 滑块组件 > 轨道悬停效果 > 填充状态的悬停：保持填充渐变 */
.zone_size_obj.fill:hover { background: linear-gradient(to right,#667eea 0%,#764ba2 var(--value-percent),#e0e0e0 var(--value-percent),#e0e0e0 100%);    }
/* 滑块组件 > 动态进度条填充效果 > CSS变量 --value-percent 由JavaScript动态更新 */
.zone_size_obj.fill {   background: linear-gradient(to right,#667eea 0%,#764ba2 var(--value-percent),#e0e0e0 var(--value-percent),#e0e0e0 100%);}
/* >>>>>>>>>> 图标显示区域 <<<<<<<<<< */
/* 图标显示区域 > 全局 > 包裹层 */
#iconbox {
	position:fixed; top:calc(var(--title) + var(--size)); width:100vw; height:calc(var(--view) - 10px);  padding-top:10px;
	display:flex; flex-wrap:wrap; flex-direction:row; align-content:flex-start; justify-content:center; align-items:center; gap:10px; overflow-y:auto;
}
/* 图标显示区域 > 节点 > 包裹层 */
.viewbox {  background-color: #FFF; box-shadow: 0 0 4px rgba(0, 0, 0, .2); border:1px solid #e0e0e0; border-radius: 10px;  position: relative; }
/* 图标显示区域 > 节点 > 悬停效果 */
.viewbox:hover { cursor: pointer; background-color:#e0e0e0;}
/* 图标显示区域 > 节点  > 图标 */
.viewbox img {  margin: 10px; display: block;  width: var(--icon-size); height: var(--icon-size);}
/* 图标显示区域 > 节点  > 名称 */
.viewbox>.vb_name { 
	text-align: center; color: #555; font-size:var(--font-size); font-weight: 600; white-space:nowrap; overflow: hidden; text-overflow: ellipsis;
	width:calc(var(--icon-size) + 10px); margin:5px;
}
.viewbox>.vb_type { color:rgba(255, 85, 0, 0.5); font-family:Impact; font-size:var(--type-font-size); text-align:right; padding-right:0.5em}
.viewbox>.vb_type::before { content: attr(data-size); width:40%; color:rgb(25, 25, 112); display:inline-block; position:absolute; left:0; text-align:left; padding-left:0.5em; font-family:Arial;}
/* >>>>>>>>>> 代码显示区域 <<<<<<<<<< */
/* 代码显示区域 > 全局 > 包裹层 */
#zone_code {
	background:linear-gradient(135deg,#667eea 0%,#764ba2 100%); box-shadow: 0px 2px 2px rgba(0, 0, 0, .7);
	height:var(--code); width:calc(100vw - 8px); position:fixed; bottom:var(--bottom); left:4px;
}
/* 代码显示区域 > 头部 */
#zone_code_head{ 
	height: calc(var(--code) - (var(--code) - 2rem) - 2px);  position: relative;    padding-right:4px;
	display: flex; flex-direction: row; align-content: center; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 10px;
}
/* 代码显示区域 > 标题 */
#zone_code_title { color: #FFF; display:table-cell; position: absolute; left: 4px; }
#zone_code_title::after { content: attr(data-filename);}
/* 代码显示区域 > 按钮 */
.zone_code_btn { display: table-cell; width:100px; border-radius:5px; border-style:none; cursor: pointer;}
.zone_code_btn:hover { background-color:#AAA; }
/* 代码显示区域 > 显示 */
#zone_code_view {
	background-color:#e0e0e0; border-style:none; outline: none; height:calc(var(--code) - 2rem - 10px); width: calc(100% - 16px); padding:4px;
	margin-left:4px; margin-right: 4px; overflow-y:auto;   resize: none; border-radius:5px; word-break:break-all;
}
/* Firefox 浏览器 滚动条样式 */
#zone_code_view{ scrollbar-width: 8px; /* 细滚动条 */ scrollbar-color: #3498db transparent; /* 滑块颜色和轨道颜色 */ }
/* Webkit 浏览器 (Chrome, Safari, Edge) */
#zone_code_view::-webkit-scrollbar { width: 8px; }/* 滚动条样式 */
#zone_code_view::-webkit-scrollbar-track { background: transparent; }/* 滚动条轨道 */
#zone_code_view::-webkit-scrollbar-thumb { background: #e74c3c; border-radius: 4px; } /* 滚动条滑块 */
#zone_code_view::-webkit-scrollbar-thumb:hover { background: #2980b9; cursor: pointer; } /* 滚动条滑块悬停 */

/* >>>>>>>>>> 底部区域 <<<<<<<<<< */
#zone_bottom {  position: fixed;  bottom: 0px;  text-align: center;   height: var(--bottom); line-height: var(--bottom);  width: 100vw;font-size:12px;}
/* 底部区域 > 消息提示框 */
#message_box {
	position: fixed;
	top: 20px;
	right: 20px;
	padding: 15px 20px;
	border-radius: 5px;
	color: white;
	font-weight: bold;
	opacity: 0;
	transform: translateX(100%);
	transition: all 0.3s ease;
	z-index: 1000;
	background: #e74c3c;
}
#message_box.show { opacity: 1; transform: translateX(0); }