.word-table {
    width: 100%;
    border: 1px solid #ddd;
    border-radius: 6px;
    overflow: hidden;
    font-family: Arial, sans-serif;
    font-size: 14px;
  }
  .word-table ul {
    display: flex;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .word-table ul li {
    padding: 10px;
    border-bottom: 1px solid #eee;
    display: flex;
    align-items: center;
    justify-content: center; /* ����������ˮƽ���� */
  }
  
  .word-table ul:not(.headertable):hover {
  background-color: #f9f9f9;
}
  /* ���еĿ�ȱ��� */
  .col-1 { width: 10%; min-width: 80px; }
  .col-2 { width: 30%; }
  .col-3 { width: 20%; font-style: italic; color: #555; }
  .col-4 { width: 40%; color: #333; }

  /* ��ͷ��ʽ */
  .headertable {
    background: #f5f5f5;
    font-weight: bold;
	    width: 100% !important;
		 height: 45px !important;
  }
  .headertable li {
    border-bottom: 2px solid #ccc;
  }

  /* ��ѡ��Ŵ� */
  input[type="checkbox"] {
    transform: scale(1.3);
    cursor: pointer;
  }

  
  .icon-speaker {
  margin-left: 8px;
  cursor: pointer;
  color: #007bff;
  font-size: 18px;
  font-weight: bold;
  display: inline-block;
  transition: transform 0.2s ease;
}

/* ����������������� */
.icon-speaker.playing {
  animation: pulse 1s infinite;
  color: #e74c3c; /* ����ʱ��ɺ�ɫ */
}

@keyframes pulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.3); }
  100% { transform: scale(1); }
}
  .icon-speaker:hover {
    color: #0056b3;
  }
      /* ѡ���б�dz�� */
    .word-table ul.selected {
      background-color: #e6f9e6 !important;
    }

/* ������� */
.control-panel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 15px;
  padding: 12px 15px;
  background-color: #f5f5f5;
  border: 1px solid #ddd;
  border-radius: 6px;
  margin-bottom: 15px;
  font-family: Arial, sans-serif;
}

.control-item {
  display: flex;
  align-items: center;
  gap: 5px;
}

.control-item label { font-size: 14px; color: #333; }
.control-item select {
  padding: 5px 8px;
  font-size: 14px;
  border: 1px solid #ccc;
  border-radius: 4px;
  outline: none;
  cursor: pointer;
  transition: border-color 0.2s ease;
}
.control-item select:hover,
.control-item select:focus { border-color: #007bff; }

#start-dictation, #pause-dictation {
  padding: 6px 14px;
  font-size: 14px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
#start-dictation { background-color: #007bff; color:white; }
#start-dictation:hover { background-color: #0056b3; }
#pause-dictation { background-color: #ffc107; color:white; }
#pause-dictation:hover { background-color: #e0a800; }

/* ��� */
.word-table { width:100%; border:1px solid #ddd; border-radius:6px; overflow:hidden; font-family:Arial; font-size:14px; }
.word-table ul { display:flex; margin:0; padding:0; list-style:none; transition: background-color 0.2s ease; }
.word-table ul li { padding:10px; border-bottom:1px solid #eee; display:flex; align-items:center; justify-content:center; }
.col-1 { width:10%; min-width:80px; }
.col-2 { width:30%; justify-content:flex-start; }
.col-3 { width:20%; font-style:italic; color:#555; }
.col-4 { width:40%; color:#333; }
.headertable { background:#f5f5f5; font-weight:bold; }
.headertable li { border-bottom:2px solid #ccc; }
input[type="checkbox"] { transform: scale(1.3); cursor:pointer; }
.icon-speaker { margin-left:8px; cursor:pointer; color:#007bff; font-size:18px; font-weight:bold; display:inline-block; transition: transform 0.2s ease; }
.icon-speaker.playing { animation: pulse 1s infinite; color:#e74c3c; }
@keyframes pulse { 0%{transform:scale(1);} 50%{transform:scale(1.3);} 100%{transform:scale(1);} }
.word-table ul:not(.headertable):hover { background-color:#f9f9f9; }
.word-table ul.selected { background-color:#e6f9e6 !important; }
#dictation-popup {
background: #e6f7e6; 
  position: fixed;
  top: 15%;
  left: 50%;
  transform: translateX(-50%);
  border: 1px solid #ccc;
 padding: 20px 25px;
  border-radius: 8px;
  box-shadow: 0 0 15px rgba(0,0,0,0.3);
  z-index: 999;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  font-family: Arial, sans-serif;
  width: 350px;
  height:200px;
}

#dictation-popup.show { opacity:1; visibility:visible; }

#popup-close {
  position: absolute;
  top:8px;
  right:8px;
  font-size:28px;
  font-weight:bold;
  color:#888;
  cursor:pointer;
}
#popup-close:hover { color:red; }

#popup-word-row {
  display:flex;
  align-items:center;
  gap:10px;
  line-height: 1.8;          
}

#popup-word { font-weight:bold; font-size: 30px;       }
#popup-progress { color:#888; font-size:18px; }

#popup-meaning { margin-top:8px; color:#555; font-size:24px;  line-height: 1.5;}

/* ��ʾС�� */
#tip-popup {
  position:fixed; top:20%; left:50%; transform:translateX(-50%);
  background:#fffae6; border:1px solid #ffd324; padding:10px 15px;
  border-radius:6px; font-size:14px; color:#8a6d3b; opacity:0; visibility:hidden;
  transition:opacity 0.3s, visibility 0.3s;
  z-index:9999;
}
#tip-popup.show { opacity:1; visibility:visible; }

#popup-phonetic {
  margin-top: 8px;
  color: #555;
  font-size: 24px;
  font-style: italic;
  line-height: 1.6;
}

/* ����ͼ������ */
.icon-speaker.flashing { animation: flash 0.5s infinite; }
@keyframes flash {
  0% { opacity: 1; }
  50% { opacity: 0.3; }
  100% { opacity: 1; }
}




#top-right-execute {
  position: relative;       /* ��Ը�������λ */
  display: flex;
  align-items: center;
  gap: 15px;
  background: #e6f7e6;
  padding: 10px 15px;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0,0,0,0.2);
  font-family: Arial, sans-serif;
  margin-top: 37px;         /* ���� main-right ������� */
  z-index: 1000;
}

/* �ֻ�ͼ�� */
.icon-container {
  position: relative;
  cursor: pointer;
}

.mobile-icon {
  font-size: 24px;  /* ͼ���Դ�һ�� */
}

/* ��ά�뵯���� */
.qrcode-popup {
  position: absolute;
  padding: 5px;           /* ��ά����߿��� */
  top: 30px;
  left: 50%;
  transform: translateX(-50%);
  display: none;
  padding: 5px;
  background: white;
  border: 1px solid #ccc;
  border-radius: 6px;
  box-shadow: 0 0 8px rgba(0,0,0,0.2);
}



.qrcode-popup img {
  width: 120px;
  height: 120px;
}

/* hover ��ʾ��ά�� */
.icon-container:hover .qrcode-popup {
  display: block;
}

/* ������ť */
#export-words {
  background: #4CAF50; /* ��ɫ��ť */
  color: white;
  border: none;
  border-radius: 6px;
  padding: 8px 12px;
  cursor: pointer;
  font-size: 14px;
  transition: background 0.2s;
}

#export-words:hover {
  background: #45a049;
}

/* ����������ʽ */
#download-link {
  margin-left: 10px;             /* �밴ť��� */
  background: #FF9800;           /* ��ɫ */
  color: white;
  padding: 6px 10px;
  border-radius: 6px;
  text-decoration: none;
  font-size: 14px;
  transition: background 0.2s;
}

#download-link:hover {
 background: #fb8c00;           /* ��ͣ��ɫ���� */
}

#export-words {
  background: #4CAF50;
  color: white;
  border: none;
  border-radius: 6px;
  padding: 8px 12px;
  cursor: pointer;
  font-size: 14px;
  transition: background 0.2s;
}

#export-words:hover {
  background: #45a049;
}

/* ���Ա����밴ťһ�µĸ߶Ⱥ�Բ�� */
#export-words, #download-link {
  line-height: 1.5;
}
/* �������� */
#qrcode {
  width: 120px;       /* �����ɶ�ά���Сһ�� */
  height: 120px;
}
  .list-container {
    display: flex;
    flex-wrap: wrap;
    gap: 0; /* 不要空隙，像表格 */
    border: 1px solid #ccc;
    border-radius: 8px;
    overflow: hidden;
    width: 94%; /* 控制整体宽度，可以改 */
    margin: 20px auto; /* 上下20px，左右居中 */
  }
  .list-container li {
    list-style: none;
    flex: 0 0 50%; /* 每行两列 */
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    padding: 12px;
    box-sizing: border-box;
    text-align: center;
    cursor: pointer;
  }

  .list-container li:nth-child(2n) {
    border-right: none;
  }

  .list-container li:hover {
    background: #f5f5f5;
  }

  .list-container li.curr {
    background: #e6ffe6; /* 浅绿色背景 */
  }

  .list-container li.curr a {
    color: #008000; /* 绿色文字 */
    font-weight: bold;
  }
  .main-left .title{margin-left: 20px;
    border-bottom: 0px!important;
  }