/* ===== 全局重置 ===== */
*{box-sizing:border-box;margin:0;padding:0;}
body{display:flex;justify-content:center;align-items:center;min-height:100vh;padding:1em;background:#000;font:16px/1.25 system-ui,Arial,'Microsoft YaHei',sans-serif;color:#0ff;}
a{text-decoration:none;transition:color .2s,background .2s;}
a:link,a:visited{color:#0f0;}
a:hover,a:active{color:#0ff;text-shadow:0 0 .5em #0ff3;}
::selection{background:#ff0;color:#00f;}
/* ===== 标题元素 ===== */
h1,h2,h3,h4,h5,h6{color:#0ff;}
h1{font-size:2.5rem;font-weight:900;text-align:center;text-shadow:0 0 1.5em #0ff3;}
h2{font-size:1.5rem;font-weight:600;line-height:1.625;}
h3{font-size:1.25rem;font-weight:600;}
h4{font-size:1.125rem;font-weight:600;}
h5{font-size:1rem;font-weight:600;}
h6{font-size:1rem;font-weight:500;}
h1 a,h2 a,h3 a,h4 a,h5 a,h6 a{color:inherit;}
/* ===== 表单元素 ===== */
button,input,select,textarea{outline:none;background:#000;color:#0ff;font:inherit;}
input,select,textarea{font-family:monospace;}
input[type="text"],input[type="number"],select{border:1px solid #0ff6;border-radius:.5em;padding:.25em .5em;}
textarea{width:100%;border:none;padding:.5rem;resize:vertical;}
textarea:focus{box-shadow:inset 0 0 0 1px #0ff6;}
input[type="text"]:focus,input[type="number"]:focus,select:focus{border-color:#0ff;box-shadow:0 0 1em #0ff3;}
input::placeholder,textarea::placeholder{color:#0ff9;}
input[type="checkbox"],input[type="radio"]{width:1em;height:1em;accent-color:#0ff;cursor:pointer;}
.textArea{font-size:.75em;}
/* ===== 容器盒子 ===== */
#page{display:flex;flex-direction:column;gap:.5em;width:100%;min-width:160px;max-width:1500px;border:1px solid #0ff3;border-radius:1.5em;padding:1em;box-shadow:0 .75em 1.5em #0ff3;transition:box-shadow .2s;}
#page:hover{box-shadow:0 1.5em 3em #0ff3;}
main{display:contents;}
.box{border:1px solid #0ff3;border-radius:1em;overflow:hidden;}
#header,.areaHeader,.areaFooter,#fileControls,#msg,#footer{padding:.5rem;}
/* ===== 内容布局 ===== */
.areaHeader,.areaHeaderLeft,.areaHeaderRight{display:flex;flex-wrap:wrap;align-items:center;gap:.5em;}
.areaHeader{justify-content:space-between;}
.areaHeaderFill{background:#0ff3;}
.areaFooter{font-size:.75em;}
.areaHeader+.areaBody,.areaBody+.areaFooter,.areaHeader+.areaFooter{border-top:1px solid #0ff3;}
/* ===== 消息容器 ===== */
#msg{background:#0ff3;font-size:.75em;color:#0ffc;white-space:pre-wrap;transition:border-color .2s,background .2s;}
#msg.warning{border-color:#ff03;background:#ff03;color:#ff0;}
#msg.error{border-color:#f003;background:#f003;color:#f33;}
/* 进行中状态：呼吸动画（青色强度 20% ↔ 0% 循环） */
@keyframes msgBreath{
  0%,100%{background-color:#0ff3;}
  50%{background-color:#0ff0;}
}
#msg.running{animation:msgBreath 2.4s ease-in-out infinite;}
/* 无障碍降级：系统开启"减少动态效果"时改为静态深青色 */
@media (prefers-reduced-motion:reduce){#msg.running{animation:none;background:#0ff6;}}
/* ===== 页脚 ===== */
#footer{display:flex;flex-direction:column;background:#0ff3;font-size:.75em;line-height:1.5;text-align:center;}
#footer a{padding:0 .25em;border-radius:.5em;}
#footer a:hover{background:#0ff3;}
#footerLinks,#footerHome{display:flex;flex-wrap:wrap;justify-content:center;gap:0 .25em;}
#footerCopyright,#footerDomain a{color:#0ff6;}
#footerDomain a:hover{color:#0ff;}
/* ===== 按钮 ===== */
.button{display:inline-block;flex-shrink:0;border:1px solid #0ff6;border-radius:2em;padding:.5em 1em;background:#0ff3;font-weight:600;text-align:center;white-space:nowrap;cursor:pointer;transition:background .2s,color .2s;}
.button:hover{background:#0ff;color:#000;}
.button:disabled{opacity:.4;cursor:not-allowed;}
.buttonMain{background:#0ff6;border-color:#0ff;}
.buttonSmall{border-radius:.5em;padding:.25em .5em;}
/* ===== 徽章 ===== */
.badge{display:inline-flex;align-items:center;justify-content:center;border-radius:1em;padding:0 .25em;background:#0ff3;color:#0ffc;font-weight:600;white-space:nowrap;}
/* ===== 滚动条 ===== */
*::-webkit-scrollbar{width:.5em;height:.5em;}
*::-webkit-scrollbar-track{background:#0006;border-radius:2px;}
*::-webkit-scrollbar-thumb{background:#0ff6;border-radius:2px;}
*::-webkit-scrollbar-thumb:hover{background:#0ff;}
.scrollable{overflow-y:auto;}
/* ===== 文件列表 ===== */
#file{border-top:1px solid #0ff3;background:#0ff3;}
#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;border-top:1px solid #0ff3;padding:1px .5rem;color:#0ffc;transition:background .2s;}
/*#fileList li:last-child{border-bottom:none;}*/
#fileList li:hover{background:#0ff3;}
#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:1em;background:#0006;color:#0ffc;cursor:pointer;transition:all .2s;}
#fileList li .fileActions button:hover{background:#0ff3;}
#fileList li .fileActions .fileRemove{color:#f00;}
#fileList li .fileActions .fileRemove:hover{background:#f006;color:#f33;}
.fileEncoding{flex-shrink:0;min-width:4em;border-radius:1em;padding:0 .25em;background:#ff03;color:#ff0c;font-size:.625rem;text-align:center;white-space:nowrap;}
/* ===== 图片筛选 ===== */
#filterBar{display:flex;flex-wrap:wrap;align-items:flex-start;gap:.25em .5em;border-bottom:1px solid #0ff3;padding:.5rem;background:#0ff3;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;}
/* ===== 图片网格 ===== */
#imageList{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;border:1px solid #0ff3;border-radius:.75em;padding:.25em;box-shadow:0 .5em 1em #0006;overflow:hidden;cursor:default;transition:.2s;}
.imageItem:hover{border-color:#0ff6;box-shadow:0 0 2em #0ff3;}
.imageItem.selected{border-color:#0ff;background:#0ff3;box-shadow:0 0 2.5em #0ff3;}
.imageThumb{display:flex;align-items:center;justify-content:center;width:100%;min-height:0;min-width:0;aspect-ratio:1/1;border:1px solid #0ff3;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:#0ffc;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.imageNumber{flex-shrink:0;color:#0ffc;white-space:nowrap;}
.imageSize{flex-shrink:0;color:#0ff6;white-space:nowrap;}
.imageActionLeft,.imageActionRight{display:flex;align-items:center;gap:.25em;}
#imageList input[type="checkbox"]{width:1rem;height:1rem;}
.extBadge{border:1px solid #0ff3;border-radius:.5em;padding:0 .25em;background:#0ff3;color:#0ffc;font-family:monospace;line-height:1.5;white-space:nowrap;}
.btnView,.btnSingle{border:1px solid #0ff6;border-radius:.5em;padding:.25em;background:#0ff3;color:#0ff;cursor:pointer;transition:.2s;}
.btnView:hover,.btnSingle:hover{background:#0ff6;}
.imgLoadError{color:#f33;}
.emptyState{display:flex;align-items:center;justify-content:center;width:156px;height:156px;border:1px dashed #0ff3;border-radius:.75em;}
/* ===== 微信引导遮罩 ===== */
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:#000c;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);}
.wechatGuideBox{position:relative;width:min(90vw,500px);padding:2em 1em;border:1px solid #0ff6;border-radius:1em;background:#000;box-shadow:0 0 3em #0ff3,0 .75em 1.5em #0006;text-align:center;color:#0ffc;}
.wechatGuideArrow{position:absolute;top:-5em;right:0;font-size:2em;color:#0ff;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:#0ff;margin-bottom:1em;}
.wechatGuideText{font-size:1.5em;line-height:2;color:#0ffc;margin-bottom:2em;}
.wechatGuideText b{color:#0ff;font-weight:600;}
.wechatGuideBox .button{font-size:1.5em;margin-bottom:2em;}
/* ===== 小屏样式 ===== */
@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,#footer{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));padding:.25rem;gap:.25em;}
  .emptyState{width:118px;height:118px;}
  .emptyState,.imageItem{border-radius:1em;}
  .imageItem,.imageInfo,.imageAction,.imageActionLeft,.imageActionRight{gap:2px;}
  .imageThumb{border-radius:.75em;}
  .extBadge,.btnView,.btnSingle{padding:1px;line-height:1.25;}
  #footerLinks{display:grid;grid-template-columns:repeat(2,auto);justify-content:center;text-align:left;gap:0 .25em;}
  #footerLinks>a:last-child:nth-child(odd){grid-column:span 2;justify-self:center;}
  /* 微信引导遮罩 */
  .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;}
}