/** ==============================================================
	tools.css — 工具页专属样式
	依赖 anzheng.css
============================================================== **/
/* ===== 页面布局 ===== */
body{display:flex;justify-content:center;align-items:center;min-height:100vh;padding:1em;}
/* ===== 表单元素 ===== */
.textArea{font-size:.75em;}
/* ===== 容器 ===== */
#page{display:flex;flex-direction:column;gap:.5em;width:100%;min-width:160px;max-width:1500px;padding:1em;border:1px solid var(--fg2);border-radius:1.5em;box-shadow:0 .75em 1.5em var(--fg2);transition:box-shadow .2s;}
#page:hover{box-shadow:0 1.5em 3em var(--fg2);}
main{display:contents;}
.box{border:1px solid var(--fg2);border-radius:1em;overflow:hidden;}
#header,.areaHeader,.areaFooter,#fileControls,#msg{padding:.5rem;}
/* ===== 内容布局 ===== */
.areaHeader,.areaHeaderLeft,.areaHeaderRight{display:flex;flex-wrap:wrap;align-items:center;gap:.5em;}
.areaHeader{justify-content:space-between;min-height:3.5em;}
.areaHeaderFill{background:var(--fg2);}
.areaFooter{font-size:.75em;}
.areaHeader+.areaBody,.areaBody+.areaFooter,.areaHeader+.areaFooter{border-top:1px solid var(--fg2);}
/* ===== 消息容器 ===== */
#msg{background:var(--fg2);color:var(--fg8);font-size:.75em;white-space:pre-wrap;transition:border-color .2s,background .2s;}
#msg.warning{border-color:#ff03;background:#ff03;color:var(--wn);}
#msg.error{border-color:#f003;background:#f003;color:var(--dg);}
@keyframes msgBreath{
	0%,100%{background-color:var(--fg2);}
	50%{background-color:#0ff0;}
}
#msg.running{animation:msgBreath 2.4s ease-in-out infinite;}
@media (prefers-reduced-motion:reduce){
	#msg.running{animation:none;background:var(--fg4);}
}
/* ===== 按钮 ===== */
.button{display:inline-block;flex-shrink:0;padding:.5em 1em;border:1px solid var(--fg4);border-radius:2em;background:var(--fg2);font-weight:600;text-align:center;white-space:nowrap;cursor:pointer;transition:background .2s,color .2s;}
.button:hover{background:var(--fg);color:var(--bg);}
.button:disabled{opacity:.4;cursor:not-allowed;}
.buttonMain{background:var(--fg4);border-color:var(--fg);}
.buttonSmall{border-radius:.5em;padding:.25em .5em;}
/* ===== 徽章 ===== */
.fileBadge,.countBadge{display:inline-flex;align-items:center;justify-content:center;padding:0 .25em;border-radius:1em;white-space:nowrap;}
.fileBadge{min-width:4em;background:#ff03;color:#ff0c;font-size:.625rem;}
.countBadge{background:var(--fg2);color:var(--fg8);font-weight:600;}
.badgeError{background:#f003;color:var(--dg);}
#fileList .countBadge{min-width:5em;}
/* ===== 滚动容器 ===== */
.scrollable{overflow-y:auto;}
/* ===== 文件列表 ===== */
#file{background:var(--fg2);}
#fileControls{display:flex;flex-wrap:wrap;align-items:center;gap:.5em;}
#fileInput{display:none;}
#fileListBox{min-height:5em;max-height:10em;overflow-y:auto;font-size:.75em;}
#fileList{list-style:none;margin:0;padding:0;}
#fileList li{display:flex;align-items:center;gap:.5em;padding:1px .5rem;border-top:1px solid var(--fg2);color:var(--fg8);transition:background .2s;}
#fileList li:hover{background:var(--fg2);}
#fileList li .fileStatus{flex-shrink:0;}
#fileList li .fileName{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
#fileList li .fileActions{display:flex;gap:.25em;flex-shrink:0;}
#fileList li .fileActions button{min-width:1em;border:none;border-radius:.25em;background:var(--bg40);color:var(--fg8);cursor:pointer;transition:background .2s,color .2s;}
#fileList li .fileActions button:hover{background:var(--fg2);}
#fileList li .fileActions .fileRemove{color:var(--dg);}
#fileList li .fileActions .fileRemove:hover{background:#f006;color:var(--dg);}
/* ===== 图片筛选 ===== */
#filterBar{min-height:6em;display:flex;flex-wrap:wrap;align-items:flex-start;gap:.25em .5em;padding:.5rem;border-bottom:1px solid var(--fg2);background:var(--fg2);font-size:.75em;}
.filterSide,.filterBottom,.filterGroup{display:flex;flex-wrap:wrap;align-items:center;gap:.25em .5em;}
.filterSide{flex:1 1 0;min-width:276px;}
.filterBottom{flex:0 0 100%;}
.filterSide .filterGroup{flex:1 1 276px;}
.filterGroupName{line-height:2;}
.filterGroupBody{display:inline-flex;flex-wrap:wrap;align-items:center;gap:.25em;}
#filterBar input[type="number"],#filterBar select{width:4.25em;height:2em;padding:.25em 2px;border-radius:.5em;}
/* ===== 图片网格 ===== */
#imageList{min-height:9em;display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:.5em;padding:.5rem;font-size:.75em;}
.imageItem{display:flex;flex-direction:column;gap:.25em;padding:.25em;border:1px solid var(--fg2);border-radius:.75em;box-shadow:0 .5em 1em var(--bg40);overflow:hidden;cursor:default;transition:border-color .2s,box-shadow .2s;}
.imageItem:hover{border-color:var(--fg4);box-shadow:0 0 2em var(--fg2);}
.imageItem.selected{border-color:var(--fg);background:var(--fg2);box-shadow:0 0 2.5em var(--fg2);}
.imageThumb{display:flex;align-items:center;justify-content:center;width:100%;min-height:0;min-width:0;aspect-ratio:1/1;border:1px solid var(--fg2);border-radius:.5em;overflow:hidden;}
.imageThumb img{width:100%;height:100%;object-fit:contain;}
.imageInfo,.imageAction{display:flex;align-items:center;justify-content:space-between;width:100%;gap:.25em;}
.imageInfo{font-family:monospace;}
.imageName{display:flex;align-items:center;flex:1;min-width:0;overflow:hidden;}
.imageTitle{flex:0 1 auto;min-width:0;color:var(--fg8);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.imageNumber{flex-shrink:0;color:var(--fg8);white-space:nowrap;}
.imageSize{flex-shrink:0;color:var(--fg4);white-space:nowrap;}
.imageActionLeft,.imageActionRight{display:flex;align-items:center;gap:.25em;}
#imageList input[type="checkbox"]{width:1rem;height:1rem;}
.extBadge{padding:0 .25em;border:1px solid var(--fg2);border-radius:.5em;background:var(--fg2);color:var(--fg8);font-family:monospace;line-height:1.5;white-space:nowrap;}
.btnView,.btnSingle{padding:.25em;border:1px solid var(--fg4);border-radius:.5em;background:var(--fg2);color:var(--fg);cursor:pointer;transition:background .2s,border-color .2s;}
.btnView:hover,.btnSingle:hover{background:var(--fg4);}
.imgLoadError{color:var(--dg);}
.emptyState{display:flex;align-items:center;justify-content:center;border:1px dashed var(--fg2);border-radius:.75em;}
/* ===== 字符网格页面（body.fullPage） ===== */
body.fullPage{height:100vh;overflow:hidden;}
body.fullPage #page{height:calc(100vh - 2em);}
body.fullPage .button{border-radius:.5em;}
body.fullPage .grpCheck{display:inline-flex;align-items:center;gap:.25em;flex-shrink:0;padding:.5em 1em;border:1px solid var(--fg4);border-radius:.5em;background:var(--fg2);font-weight:600;line-height:1.25;cursor:pointer;white-space:nowrap;user-select:none;transition:background .2s,color .2s;}
body.fullPage .grpCheck:hover,body.fullPage .grpCheck.checked{background:var(--fg);color:var(--bg);}
body.fullPage .grpCheck:focus-within{outline:2px solid var(--fg);outline-offset:2px;}
body.fullPage .grpCheck input{position:absolute;width:0;height:0;opacity:0;pointer-events:none;}
body.fullPage .grpCheck .mark{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:1em;height:1em;line-height:1;}
body.fullPage .grpCheck .mark::before{content:"\2610\FE0E";}
body.fullPage .grpCheck.checked .mark::before{content:"\2611\FE0E";}
body.fullPage #content{flex:1 1 0;min-height:0;min-width:0;padding:.5em;overflow-y:auto;overflow-x:hidden;}
body.fullPage #charGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(5em,1fr));gap:.5em;align-content:start;}
body.fullPage .charCard{display:flex;flex-direction:column;align-items:center;justify-content:center;aspect-ratio:1/1;padding:2px;border:1px solid var(--fg2);border-radius:.5em;overflow:hidden;transition:background .2s,color .2s,border-color .2s;}
body.fullPage .copy-on .charCard{cursor:pointer;}
body.fullPage .charCard:hover{background:var(--fg);color:var(--bg);border-color:var(--fg);}
body.fullPage .charCard:hover .charSymbol{color:var(--bg);}
body.fullPage .charCard:hover .charCode{background:var(--bg20);color:var(--bg);}
body.fullPage .charCardActive{outline:2px solid var(--fg);outline-offset:2px;}
body.fullPage .charSymbol{display:flex;align-items:center;justify-content:center;min-height:1.5em;font-family:monospace;font-size:2.5em;font-weight:500;color:var(--fg);transition:color .2s;}
body.fullPage .charSymbol:empty::before{content:"␣";font-family:monospace;font-size:.5em;color:var(--fg);opacity:.4;}
body.fullPage .charCode{padding:1px 2px;border-radius:1em;background:var(--fg2);color:var(--fg6);font:.6875em monospace;white-space:nowrap;transition:background .2s,color .2s;}
body.fullPage .charDec{font-weight:600;}
body.fullPage .charHex{margin-left:2px;opacity:.8;}
body.fullPage .compact #charGrid{grid-template-columns:repeat(auto-fill,minmax(3.5em,1fr));gap:.25em;}
body.fullPage .compact .charSymbol{min-height:1em;}
body.fullPage .compact .charCode{display:none;}
/* ===== 微信引导遮罩 ===== */
body.wechat-blocked,html.wechat-blocked{overflow:hidden;}
.wechatGuide{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;padding:1em;background:var(--bg80);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);}
.wechatGuideBox{position:relative;width:min(90vw,500px);padding:2em 1em;border:1px solid var(--fg4);border-radius:1em;background:var(--bg);box-shadow:0 0 3em var(--fg2),0 .75em 1.5em var(--bg40);text-align:center;color:var(--fg8);}
.wechatGuideArrow{position:absolute;top:-5em;right:0;font-size:2em;color:var(--fg);animation:arrowPulse 1.2s ease-in-out infinite;}
@keyframes arrowPulse{
	0%,100%{transform:translate(0,0);}
	50%{transform:translate(.5em,-.5em);}
}
.wechatGuideIcon{font-size:5em;line-height:1.25;margin:.5em 0 1em;}
.wechatGuideTitle{font-size:2.5em;font-weight:600;color:var(--fg);margin-bottom:1em;}
.wechatGuideText{font-size:1.5em;line-height:2;color:var(--fg8);margin-bottom:2em;}
.wechatGuideText b{color:var(--fg);font-weight:600;}
.wechatGuideBox .button{font-size:1.5em;margin-bottom:2em;}
/* ===== 小屏样式（≤500px） ===== */
@media (max-width:500px){
	body{min-height:0;padding:.5em;}
	#page{padding:0;border:none;box-shadow:none;}
	#page:hover{box-shadow:none;}
	#header,.areaHeader,.areaFooter,#fileControls,#msg{padding:.25rem;}
	h1{font-size:2rem;}
	textarea{padding:.25rem;}
	.button{padding:.25em .5em;}
	.areaHeaderRight,#fileControls{justify-content:center;}
	input[type="text"],input[type="number"],select{padding:.25em;}
	#fileListBox{height:5em;}
	#fileList li{padding:1px .25rem;}
	#btm .areaHeaderRight{margin:0 auto;}
	#filterBar{padding:.25rem;}
	.filterSide{min-width:100%;}
	.filterSide,.filterBottom{flex:unset;}
	#imageList{grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:.25em;padding:.25rem;}
	.emptyState,.imageItem{border-radius:1em;}
	.imageItem,.imageInfo,.imageAction,.imageActionLeft,.imageActionRight{gap:2px;}
	.imageThumb{border-radius:.75em;}
	.extBadge,.btnView,.btnSingle{padding:1px;}
	/* 页脚 */
	#footerLinks{display:grid;grid-template-columns:repeat(2,auto);text-align:left;}
	#footerLinks>a:last-child:nth-child(odd){grid-column:span 2;justify-self:center;}
	#footerHome{display:grid;grid-template-columns:1fr 1fr;gap:.25em;width:fit-content;margin:0 auto;text-align:left;}
	/* 字符网格页面（body.fullPage） */
	body.fullPage #page{height:calc(100vh - 1em);}
	body.fullPage #toolbar,body.fullPage #content{padding:.25em;}
	body.fullPage #toolbar{border-radius:.5em;}
	body.fullPage #charGrid{grid-template-columns:repeat(auto-fill,minmax(4em,1fr));gap:.25em;}
	body.fullPage .areaHeader,body.fullPage .areaHeaderLeft,body.fullPage .areaHeaderRight{gap:.25em;}
	body.fullPage .button,body.fullPage .grpCheck{font-size:.75em;padding:.25em;}
	body.fullPage .compact #charGrid{grid-template-columns:repeat(auto-fill,minmax(2.5em,1fr));}
	body.fullPage .charCard{border-radius:.75em;}
	body.fullPage .charSymbol{font-size:2em;}
	body.fullPage .charCode{font-size:.5625em;}
	/* 微信引导遮罩 */
	.wechatGuide{padding:1em;}
	.wechatGuideBox{padding:1.5em 1em;border-radius:1em;}
	.wechatGuideIcon{font-size:5em;}
	.wechatGuideTitle{font-size:2.5em;}
	.wechatGuideText{font-size:1.5em;}
	.wechatGuideArrow{top:-2em;font-size:2em;}
}