/* 全局样式 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  /*user-select: none;*/
  -webkit-tap-highlight-color: transparent;
}

html {
  /*touch-action: manipulation; /* 优化触控响应 */
  -webkit-text-size-adjust: 100%; /* 禁止字体自动缩放 */
}

img, svg {
  max-width: 100%; /* 媒体元素自适应 */
  height: auto;
}
.icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: inherit;
}
.icon img {
margin-bottom: 0px;
}
body {
  font-family: Arial, sans-serif;
  display: flex;
  flex-direction: column;
  height: 100vh;
  min-height: 100vh; 
  line-height: 1.6;
  min-width: 320px; /* 兼容小屏设备 */
  overflow-x: hidden; /* 防止横向溢出 */
  font-size: clamp(16px, 4vw, 24px); 

}

/* 修改1：通过计算高度占满空间 */
main {
  padding: 10px;
  height: calc(87vh); 
  width: 100vw; /* 新增 *//* 120px=header(40px)+footer(80px)预估值 */
  flex: 1;
}

/* 修改2：弹性容器设置 */
main ul {
  list-style-type: none;
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* 修改3：弹性项撑满 */
main ul li {
  flex: 1;
  min-height: 60px;
  display: flex;
  font-size: 18px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  padding: 10px 0;
 /* font-size: clamp(16px, 4vw, 24px);*/ 
  font-weight: bolder;
}
main ul li.sec {
flex: 1;
min-height: 60px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border-top: 1px solid #ccc;
border-bottom: none;
padding: 20px 0;
font-size: clamp(18px, 4vw, 24px);
}

/* 保持你原有的特殊样式 */
/* 统一所有格子的边框和高度 */
main.page[data-page="home"] ul li {
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  position: relative;
  padding: 12px 0;
}

/* 移除.fir的特殊边框设置 */
.fir {
  /* border-top: 1px solid #ccc !important; */
  border-bottom: 1px solid #ccc !important;
  top: 0px; /* 减少位移 */
}
/* .spec{
  position: relative;
  top: -10px;
} */
/* 只对第一个和最后一个格子做特殊处理 */
main.page[data-page="home"] ul li:first-child {
  border-top: none;
  padding-top: 18px; /* 第一个格子顶部间距稍大 */
}
main.page[data-page="home"] {
  padding: 0px 10px; /* 完全移除顶部内边距 */
  position: relative;
  top: -30px; /* 整个容器向上移动 */
}
main.page[data-page="home"] ul li:last-child {
  border-bottom: none;
  padding-bottom: 18px; /* 最后一个格子底部间距稍大 */
}

/* 统一调整.gai和.gao的定位 */
.gai{
  position: relative;
  top: 40px;
  left: 9px;
}

.gai span{
position: relative;
left: 49px;
}
.gai p{
position: relative;
left: -29px;
}

ul h1 {
  font-size: 20px;
  position: relative;
  right: 30px;
  bottom: 30px;
}

ul span {
  color: green;
  font-size: 18px;
  font-weight: bolder;
  position: relative;
  left: 60px;
}
ul p {
  font-size: 12px;
  margin-top: 5px;
  font-weight: bolder;
  position: relative;
  right: 47px;
  bottom: 35px;
}

/* 修复高度计算 */
#moduleContainer {
  height: 100vh; /* 覆盖原有设置 */
  overflow-y: auto; /* 允许垂直滚动 */
  -webkit-overflow-scrolling: touch; /* iOS滚动优化 */
}

[data-module] {
  min-height: 100%; /* 确保模块撑满容器 */
  position: relative; /* 替代absolute避免脱离文档流 */
  transform: none !important; /* 临时禁用动画定位 */
}

@keyframes clickPulse {
0% { transform: scale(1); }
25% { transform: scale(0.92); }
50% { transform: scale(0.98); }
75% { transform: scale(0.95); }
100% { transform: scale(1); }
}

/* 保持原有悬停效果 */


footer .icon img:hover {
transform: scale(1.1);
}


/* 保持footer原有样式 */
footer {
display: flex;
justify-content: space-around;
align-items: center;
background-color:white;
padding: 10px 0;
bottom: 0;
width: 100%;
flex: 0 0 auto;
height:calc(13vh);
border-top: 3px solid seagreen;	
}
footer a{
text-decoration: none;
color: #008000;
}


footer .icon img {
width: 60px;
height: 60px;
object-fit: cover;
border-radius: 50%; /* 可选：圆形图标 */
transition: transform 0.3s; 
cursor: pointer; /* 添加手型光标 */
}

footer .icon img:active {
animation: clickPulse 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}


footer .icon  {
font-size: 5px;
font-weight: bolder;
position: relative;
left: -5px;
}

footer .icon p{
font-size: 10px;
position: relative;
top: -5px;
}

footer #four {
position: relative;
top: -3px;
width: 60px;
height: 60px;
}

footer #zhandian {
size: 50px;
position: relative;
top: -5px;
}

footer #huanduan {
position: relative;
top: -5px;
}

footer #my {
position: relative;
top: -18px;
width: 50px;
height: 50px;
}

footer .center-icon:hover img {
transform: scale(1.1);
}

/* 新增样式 */
.page-container {
  position: relative;
  width: 100%;
  height: calc(100vh - 13vh);
  overflow: hidden;
}

.page {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: none; /* 初始化时禁用过渡 */
  transform: translateX(100%);
  opacity: 0;
  pointer-events: none;
  background-color:white;
}

.page.active {
  transform: translateX(0);
  opacity: 1;
  pointer-events: auto;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* 动态添加过渡 */
  z-index: 1;
}

[v-cloak] {
  visibility: hidden;
  opacity: 0;
}

.page:not(.active) {
  pointer-events: none;
  opacity: 0;
  transform: translateX(100%);
}
.page::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30px;
  height: 30px;
  border: 3px solid #ccc;
  border-radius: 50%;
  border-top-color: seagreen;
  animation: spin 1s linear infinite;
  display: none;
}

.page.loading::after {
  display: block;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* 修改激活状态样式 */
footer .icon.active {
transform: translateY(-8px);
filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
}

/* 移除边框效果 */
footer .icon.active img {
border: none !important;
}

/* 添加平滑过渡 */
footer .icon {
transition: transform 0.3s ease;
}

footer .icon img {
transition: transform 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}

/* 新增页面特殊效果 */
.page[data-page="add"] {
background: #f8f9fa;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
color: seagreen;
animation: gentleAppear 0.4s ease-out;
}
.page[data-page="switch"] {
background: #f8f9fa;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
color: seagreen;
animation: gentleAppear 0.4s ease-out;
}
.page[data-page="user"] {
background: #f8f9fa;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
color: seagreen;
animation: gentleAppear 0.4s ease-out;
}
@keyframes gentleAppear {
from {
    opacity: 0.9;
    transform: scale(0.98);
}
to {
    opacity: 1;
    transform: scale(1);
}
}
/* CSS (仅order模块) */
/* CSS (仅order模块) */
.page[data-page="order"] {
padding: 15px;
min-height: calc(100vh - 60px);
}

.order-container {
max-width: 600px;
margin: 0 auto;
width: 100%; /* 新增 */
}

.order-item {
display: block;
padding: 12px;
min-height: 52px;
position: relative;
top: -10px;
font-weight: bolder;
margin-bottom: 1px;
width: 100%; /* 强制宽度一致 */
box-sizing: border-box; /* 确保内边距不影响总宽度 */
}
.orderfix {
display: block;
padding: 12px;
min-height: 30px;
position: relative;
top: 0px;
font-weight: bolder;
margin-bottom: 1px;
width: 100%; /* 强制宽度一致 */
box-sizing: border-box; /* 确保内边距不影响总宽度 */
}
.page[data-page="info"] {
  z-index: 1000;
  background: white;
  transform: translateX(100%);
  box-shadow: -5px 0 15px rgba(0,0,0,0.1);
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), 
              opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
a.orderfix{
  text-decoration: none;
  color: inherit;
  display: block;
}
a.orderfix:active {
  animation: clickPulse 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.order-content {
display: flex;
align-items: center;
flex-wrap: nowrap; /* 禁止换行 */
padding: 8px 0;
min-height: 55px;
position: relative;
left: -20px;
top: 0px;
}
/* 修复文字显示 */
.notice-text {
color: #666 !important;
font-size: 12px;
line-height: 1.5;
padding: 10px;
white-space: normal;
width: 100%;
}

/* 其他样式保持不变... */

/* 绿色分界线 */
.order-item::after {
content: "";
position: absolute;
bottom: 0;
left: 50%;
width: 95vw; /* 视口宽度的90% */
height: 1px;
background: #4CAF50;
margin-left: -47.5vw; /* 向左偏移45%视口宽度 */
}

a.order-item {
text-decoration: none;
color: #333;
height: 30px;
}


.green-bracket {
color:seagreen; /* 方括号绿色 */
}

.order-title {
font-size: 15px;
margin-right: 10px;
white-space: nowrap; /* 禁止标题换行 */
letter-spacing: 0px;
}

.order-tag {
font-size: 13px;
color:black;
white-space: nowrap; /* 保持括号内容不换行 */
position: relative;
left: 0px;
}
.official{
position: absolute;
left: 260px;
}
.official1{
position: absolute;
left: 286px;
}
.parenthesis-content {
color:black;
}

/* 最后一个特殊格子 */
.order-item.blank:last-child .order-content {
color:black;
font-size: 12px;
font-weight: bolder;
line-height: 1.5;
text-align: center;
position: relative;
left: -6px;
}
/* 新增样式 */
.back-button {
position: sticky;
top: 10px;
background: seagreen;
padding: 8px 20px;
border-radius: 25px;
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
z-index: 1000;
cursor: pointer;
transition: opacity 0.3s;
}

.back-button:hover {
opacity: 0.9;
}

.editable-content {
margin-top: 60px;
padding: 20px;
font-size: 16px;
min-height: 300px;
border: 2px dashed #4CAF50;
margin: 20px;
border-radius: 8px;
}

/* 修改订单模块链接样式 */
a.order-item {
transition: transform 0.2s;
}
a.order-item:active {
transform: scale(0.98);
}

.page[data-page^="energy"],
.page[data-page^="price"],
.page[data-page^="recycle"],
.page[data-page^="official"] {
  z-index: 1000;
  background: white;
  transform: translateX(100%);
  box-shadow: -5px 0 15px rgba(0,0,0,0.1);
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), 
              opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
} 

.page.sub-active {
  transform: translateX(0) !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  z-index: 1000 !important;
}

/* 虫换端 - 切换按钮样式 */
.page[data-page="switch"] {
  padding: 15px;
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: white;
}
.switch-tabs {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 20px;
  flex-shrink: 0;
}
.tab-button {
  padding: 8px 20px;
  border: none;
  border-radius: 20px;
  font-weight: bold;
  color: #333;
  background: #f0f0f0;
  cursor: pointer;
  transition: 0.3s;
}
.tab-button.active {
  background: seagreen;
  color: white;
}

/* 虫换端 - 表单样式（和现有页面统一） */
.switch-form-container {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.form-tab {
  display: none;
}
.form-tab.active {
  display: block;
}
.form-row {
  padding: 12px 0;
  border-bottom: 1px solid #4CAF50; /* 和现有页面一致的绿色分隔线 */
  margin-bottom: 8px;
  font-weight: bolder;
  font-size: 15px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.form-row label {
  min-width: 120px;
  color: #333;
}
.checkbox-group, .radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  flex: 1;
}
.checkbox-group label, .radio-group label {
  min-width: auto;
  cursor: pointer;
}
.form-input {
  padding: 6px 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 14px;
  flex: 1;
  min-width: 150px;
}

/* ========== 回收站端样式调整：强制贴近切换按钮 + 居中 + 边框规则 ========== */
/* 1. 彻底移除顶部间距，让第一行紧贴切换按钮 */
.form-tab[data-tab="recycler"] main {
  padding: 0 10px !important; /* 仅保留左右内边距，顶部间距清零 */
  margin-top: 0 !important;
  top: 0 !important;
  height: calc(100% - 5px) !important; /* 进一步压缩高度，减少空隙 */
}
.form-tab[data-tab="recycler"] ul {
  padding-top: 0 !important;
  margin-top: 0 !important;
  gap: 0 !important; /* 去掉列表项之间的默认间距 */
  margin-bottom: 0 !important;
}
/* 减少切换按钮容器的底部间距（如果仍有间隙，添加这行） */
.switch-tabs {
  margin-bottom: 5px !important; /* 原20px改为5px，可根据需要调至0 */
}

/* 2. 强制所有数字/文字居中（保留之前的居中规则） */
.form-tab[data-tab="recycler"] ul li {
  display: flex !important;
  align-items: center !important; /* 垂直居中 */
  justify-content: center !important; /* 水平居中 */
  position: static !important; /* 取消所有定位偏移 */
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  padding: 0px 0 !important; /* 减少格子内边距，进一步贴近 */
  min-height: 50px !important; /* 可选：缩小格子高度，更紧凑 */
}
.form-tab[data-tab="recycler"] .gai {
  position: static !important; /* 取消定位偏移 */
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  text-align: center !important; /* 文字水平居中 */
  margin: 0 auto !important;
  padding: 0 !important;
}
.form-tab[data-tab="recycler"] .gai h1,
.form-tab[data-tab="recycler"] .gai span,
.form-tab[data-tab="recycler"] .gai p {
  position: static !important; /* 取消所有文字定位偏移 */
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  color: #000;
  margin: 0 auto !important;
  text-align: center !important; /* 强制文字居中 */
  display: inline-block !important; /* 避免文字块错位 */
}
.form-tab[data-tab="recycler"] .gai h1 {
  width: 100% !important; /* 占满父容器，确保居中 */
}

/* 3. 每个数字上下仅保留一条边框线（保留之前的边框规则） */
.form-tab[data-tab="recycler"] ul li {
  border-top: none !important; /* 去掉顶部边框 */
  border-bottom: 1px solid #ccc !important; /* 仅保留底部边框 */
}
.form-tab[data-tab="recycler"] ul li:first-child {
  border-top: none !important; /* 第一行上方绝对无边框 */
}
.form-tab[data-tab="recycler"] ul li.sec {
  border-bottom: none !important; /* 最后一行去掉底部边框 */
}

/* 1. 第一行容器：flex 布局拆分左、中、右 */
.form-tab[data-tab="recycler"] ul li.fir.spec .gai {
  padding: 0 5px !important; /* 左右留间距，避免贴边 */
  width: 100% !important;
}
.form-tab[data-tab="recycler"] ul li.fir.spec .gai h1 {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important; /* 左、中、右分布 */
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #000 !important; /* 基础文字黑色 */
}

/* 2. 左侧文字：XX地XX制造商（稍靠左，留间距） */
.form-tab[data-tab="recycler"] ul li.fir.spec .gai h1 span.left-text {
  text-align: left !important;
  font-size: large;
  margin-left: 10px !important; /* 离左边框的间距 */
  color: #000 !important; /* 黑色 */
  flex: 1; /* 占左侧空间 */
}

/* 3. 中间数字：1（居中，与其他行一致） */
.form-tab[data-tab="recycler"] ul li.fir.spec .gai h1 span.num {
  width: 30px !important; /* 固定宽度确保居中 */
  text-align: center !important;
  color: #000 !important; /* 黑色 */
  flex: 0 0 auto; /* 不拉伸，固定宽度 */
}

/* 4. 右侧文字：(需求信息)（稍靠右，绿色） */
.form-tab[data-tab="recycler"] ul li.fir.spec .gai h1 span.right-text {
  text-align: right !important;
  margin-right: 10px !important; /* 离右边框的间距 */
  color: seagreen !important; /* 单独绿色 */
  flex: 1; /* 占右侧空间 */
}

/* 5. 下方小字：与左侧文字对齐，缩小间距 */
.form-tab[data-tab="recycler"] ul li.fir.spec .gai p {
  text-align: left !important;
  margin-left: 10px !important; /* 与左侧文字左对齐 */
  margin-top: 5px !important; /* 缩小与上方文字的间距 */
  color: #000 !important; /* 黑色 */
  font-size: small !important; /* 保持字体大小一致 */
  width: 100% !important;
  padding: 0 !important;
}