:root {
	--icon-color: orange;
	--window-width: 100%;
	--decoration-color: #bbb;
}
.placeholder{
	width:205px;
	height:0;
}
* {
	margin: 0;
	padding: 0;
	font-family: 'Microsoft Yahei', tahoma, Srial, helvetica, sans-serif;
	font-weight: normal;
	font-style: normal;
}

body,html {
	margin: 0;
	padding:0;
	height:100%;
}
body{
	display:flex;
	flex-direction: column;
}
ul,
ol {
	list-style: none;
}

button,
a {
	cursor: pointer;
}

a {
	color: black;
	text-decoration: none;
	transition: all var(--animate-time-medium) ease;
}

input,
button,
select,
textarea,
a:focus,
img,
a:active {
	border: 0;
	outline: none;
}

textarea {
	resize: none;
}


img {
	object-position: center;
}

.mainWrap {
	display: grid;
	grid-template-columns: minmax(0, 200px) minmax(960px, 1fr) minmax(0, 200px);
	width: 100%;
	margin-bottom: 80px;
}

.icon {
	display: inline-block;
	background: var(--icon-color);
	background-blend-mode: multiply;
	mask-size: 100% 100%;
}

.tabpanel {
	display: grid;
	grid-template-columns: 100%;
	grid-template-areas:
		"main";
}

.tabpanelitem {
	grid-area: main;
	visibility: hidden;
	opacity: 0;
	transition: all 0.5s ease;
	width: 100%;
}

.product_card:hover {
	border-color: var(--main-color);
	transform: translateY(-10px);
	box-shadow: 2px 2px 10px -6px;
}

.product_card {
	display: inline-block;
	width: 200px;
	height: 200px;
	border: 1px solid #ccc;
	border-radius: 5px;
	margin-top: 2em;
	text-align: center;
	margin-left: 10px;
	margin-right: 10px;
	padding: 2px;
	transition: all 0.3s ease;
}

.product_card a {
	text-decoration: none;
	display: block;
}

.product_thumbnail {
	width: 200px;
	height: 168px;
	object-fit: contain;
}

.product_card label {
	display: inline-block;
	font-size: 16px;
	font-weight: bold;
	line-height: 32px;
}



.search_banner {
	display: grid;
	grid-template:
		". . ." 3fr
		". search ." 60px
		". . ." 1fr /1fr minmax(200px,30em) 1fr;
}
.search_banner img{
	aspect-ratio: 16/4;
	object-fit: cover;
	width: 100%;
	grid-column: 1/4;
	grid-row: 1/4;
	opacity: 0.5;
}
.search_banner .search_box{
	flex-direction:row;
	align-items: center;
	grid-area: search;
	height: fit-content;
	font-size: x-large;
	z-index: 9;
	position: relative;
	width:80%;
	transition: width 0.3s ease;
	justify-self: center;
	align-self: center;
	display: flex;
}
.search_banner .search_box input{
		font-size: large;
		padding: 0.5em 20% 0.5em 10%;
		display: block;
		width: 70%;
		border-radius:3em;
		box-shadow: 0 0 10px -7px;
		transition:all 0.3 ease;
}

.search_banner .search_box input:hover ,.search_banner .search_box input:focus-within{
	box-shadow:0 0 20px -10px;
}
.search_banner .search_box:focus-within{
	width: 100%;
}
.search_banner .search_box::after{
	content: "";
	display: block;
	font-size: large;
	width: 2em;
	background: url(/utils/src/img/search.png);
	background-size: 100% 100%;
	background-position: center;
	aspect-ratio: 1;
	z-index: 12;
	color: black;
	position: absolute;
	right: 5%;
	cursor: pointer;
}
.location {
	font-size: medium;
	padding-left: 2em;
	color: gray;
	border-bottom: solid 1px;
}
.location button{
	background:none;
	color:gray;
	padding:10px;
}
.location button:hover{
	color:dodgerblue;
}
.location button:disabled{
	color:gray;
	cursor:default;
}

/* 全局重置：去掉默认列表样式、统一字体 */
        .treeview ul, .treeview li {
        list-style: none;
        }



        /* 核心：隐藏checkbox（仅用于状态控制） */
        .tree-checkbox {
            display: none;
        }

        /* 菜单项容器：控制行高、缩进、对齐 */
        .tree-item {
             /* 基础缩进（箭头/图标区域） */
             display: grid;
             grid-template:
                  "label name" auto
                  ". children"auto/1em 1fr;
             width: 100%;
             grid-column-gap: 0.3em;
        }

		.file .tree-label{cursor:default}
        .tree-label{
            cursor:pointer;
            /* position: relative; */
            align-self: center;
            grid-area: label;
            transition: all 0.3s ease;
            aspect-ratio: 1;
            user-select: none;
        }
		.tree-button{
			font-size: large;
			background:none;
			grid-area: name;
			text-align: start;
			width: 100%;
			display: inline-block;
			padding:5px 5px 5px 3px;
			border-radius:0.5em;
			transition: all 0.3s ease;
		}
		.tree-button:hover{
			color: dodgerblue;
		}
        /* 选中（展开）时，箭头旋转90度 */
        label:has(.tree-checkbox:checked) {
            transform: rotate(90deg);
        }

        /* 子节点容器：默认隐藏，缩进 */
        .tree-children {
            height:0;
            display: flex;
            overflow:hidden;
             /* 每级缩进18px，递归生效 */
            width: max-content;
            grid-area: children;
            flex-wrap: nowrap;
            flex-direction: column;
        }

        /* 展开时显示子节点 */
        .tree-label:has( .tree-checkbox:checked) ~ .tree-children {
        height: auto;
        }