*{box-sizing:border-box}

body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto;
  background:linear-gradient(135deg,#eef3f8,#f8fbff);
  color:#2c3e50;
}

header{
  background:linear-gradient(90deg,#1f2f46,#2c3e50);
  color:#fff;
  padding:18px 28px;
  font-size:18px;
  font-weight:600;
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.container{
  max-width:1200px;
  margin:40px auto;
  padding:0 20px;
}

/* 搜索区域 */

.search-box{
  background:#fff;
  padding:24px;
  border-radius:18px;
  box-shadow:0 10px 30px rgba(0,0,0,0.05);
  margin-bottom:30px;
}

.search-row input{
  width:100%;
  padding:12px 14px;
  border-radius:12px;
  border:1px solid #e3e8ef;
  font-size:14px;
}

.search-buttons{
  display:flex;
  gap:12px;
  margin-top:12px;
}

.search-buttons button{
  flex:1;
  padding:12px;
  border:none;
  border-radius:12px;
  font-size:14px;
  cursor:pointer;
}

.search-buttons button:first-child{
  background:#3498db;
  color:#fff;
}

.search-buttons button:last-child{
  background:#ecf0f3;
}

/* ===== 电脑保持原 grid ===== */

.table-header,
.table-row{
  display:grid;
  grid-template-columns:90px 150px 150px 150px 100px 120px 100px;
  align-items:center;
  padding:14px 16px;
}

.table-header{
  background:linear-gradient(90deg,#3a8dde,#2f7dd1);
  color:#fff;
  font-weight:600;
  border-radius:14px 14px 0 0;
}

.table-row{
  background:#fff;
  border-bottom:1px solid #f0f2f5;
}

.img-col img{
  width:70px;
  height:70px;
  object-fit:cover;
  border-radius:10px;
}

.low-stock{
  color:#e74c3c;
  font-weight:600;
}

/* ===== 手机横向紧凑卡片 ===== */

@media(max-width:768px){

  .table-header{
    display:none !important;
  }

  .table-row{
    display:flex !important;
    gap:12px;
    padding:14px;
    margin-bottom:14px;
    border-radius:16px;
    background:#fff;
    box-shadow:0 6px 18px rgba(0,0,0,0.06);
  }

  .img-col{
    flex-shrink:0;
  }

  .img-col img{
    width:80px;
    height:80px;
  }

  /* 右侧信息区域 */
  .table-row > div:not(.img-col){
    flex:1;
    display:grid !important;
    grid-template-columns:1fr 1fr;
    gap:4px 10px;
    font-size:13px;
  }

  .table-row > div:not(.img-col) > div{
    display:flex;
    justify-content:space-between;
  }

  .table-row div[data-label]::before{
    content:attr(data-label);
    font-weight:600;
    color:#555;
    margin-right:6px;
  }

}

/* 图片放大 */

.modal{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.85);
  justify-content:center;
  align-items:center;
  z-index:9999;
}

.modal img{
  max-width:90%;
  max-height:90%;
  border-radius:16px;
}
/* ===== 手机横向卡片最终稳定版 ===== */

.mobile-card{
  background:#fff;
  padding:14px;
  border-radius:16px;
  margin-bottom:14px;
  box-shadow:0 6px 18px rgba(0,0,0,0.06);
  display:flex;
  gap:12px;
  align-items:flex-start;
}

.mobile-img{
  flex-shrink:0;
}

.mobile-img img{
  width:80px;
  height:80px;
  object-fit:cover;
  border-radius:12px;
}

.mobile-info{
  flex:1;
}

.mobile-info div{
  display:flex;
  justify-content:space-between;
  font-size:14px;
  padding:3px 0;
}

.mobile-info span:first-child{
  font-weight:600;
  color:#555;
}
/* ===== 手机高级卡片 ===== */

@media(max-width:768px){

  .table-header,
  .table-row{
    display:none;
  }

  .mobile-card{
    display:flex;
    gap:14px;
    background:#fff;
    padding:14px;
    border-radius:16px;
    margin-bottom:16px;
    box-shadow:0 6px 18px rgba(0,0,0,0.06);
    align-items:flex-start;

    border: 1px solid rgba(0,0,0,0.05);
}
  }

  .mobile-left img{
    width:90px;
    height:90px;
    object-fit:cover;
    border-radius:14px;
  }

  .mobile-right{
    flex:1;
    font-size:14px;
  }

  .mobile-right .row{
    display:flex;
    justify-content:space-between;
    margin-bottom:6px;
  }

  .mobile-right .label{
    color:#666;
    font-weight:500;
  }

  .stock-badge{
    padding:4px 10px;
    border-radius:20px;
    font-weight:600;
    font-size:13px;
  }

  .stock-zero{
    background:#fdecea;
    color:#e74c3c;
  }

  .stock-low{
    background:#fff4e5;
    color:#ff7a00;
  }

  .stock-ok{
    background:#eafaf1;
    color:#2ecc71;
  }
}