/* 在 styles.css 文件中 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 阵容卡片背景遮罩 */
.lineup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 999;
}

/* 阵容卡片样式 */
.lineup-card {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  max-width: 1400px;
  max-height: 90vh;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  z-index: 1000;
  overflow: auto;
}

.lineup-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  border-bottom: 1px solid #ddd;
  background-color: #f8f9fa;
  border-radius: 8px 8px 0 0;
}

.lineup-card-header h3 {
  margin: 0;
  font-size: 20px;
  color: #333;
}

.close-lineup-btn {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: #666;
  padding: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background-color 0.3s;
}

.close-lineup-btn:hover {
  background-color: #e9ecef;
}

.lineup-heroes {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 15px;
  padding: 15px;
  justify-content: center;
}

.hero-card {
  background-color: #f8f9fa;
  border-radius: 6px;
  padding: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  min-width: 0; /* 防止内容溢出 */
  display: flex;
  flex-direction: column;
  transition: all 0.3s ease;
}

/* 赛车信息弹窗样式 */
.cars-modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}

.cars-modal-content {
  background-color: #fefefe;
  margin: 5% auto;
  padding: 20px;
  border-radius: 8px;
  width: 90%;
  max-width: 800px;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.cars-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #ddd;
}

.cars-modal-buttons {
  display: flex;
  align-items: center;
  gap: 10px;
}

.cars-modal-header h3 {
  margin: 0;
  font-size: 16px;
  color: #333;
}

.cars-modal-header h3 .refresh-ticket-count {
  font-size: 12px;
  color: #888;
  margin-left: 8px;
}

.rewards-summary {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 12px 16px;
  border-radius: 8px;
  margin-bottom: 20px;
  font-size: 14px;
  font-weight: 500;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  border-left: 4px solid #ffd700;
}

.rewards-summary::before {
  content: "🏆 ";
  margin-right: 6px;
}

.close-cars-modal {
  color: #aaa;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
}

.close-cars-modal:hover {
  color: #000;
}

.car-item {
  background-color: #f8f9fa;
  border-radius: 6px;
  padding: 15px;
  margin-bottom: 15px;
  border-left: 4px solid #007bff;
}

.car-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.car-header h4 {
  margin: 0;
  color: #333;
  font-size: 14px;
  line-height: 1.4;
}

.car-header h4 .car-level {
  font-size: 12px;
  color: #666;
  margin-left: 4px;
}

.car-header h4 .refresh-count {
  font-size: 12px;
  color: #888;
  margin-left: 4px;
}

.refresh-car-btn {
  background-color: #28a745;
  color: white;
  border: none;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.refresh-car-btn:hover {
  background-color: #218838;
}

.refresh-car-btn:disabled {
  background-color: #6c757d;
  cursor: not-allowed;
}

.refresh-car-btn.sent {
  background-color: #007bff;
  color: white;
  cursor: not-allowed;
}

.refresh-car-btn.sent:disabled {
  background-color: #007bff;
  color: white;
  cursor: not-allowed;
}

.refresh-car-btn.waiting {
  background-color: #6c757d;
  color: white;
  cursor: not-allowed;
}

.refresh-car-btn.ready {
  background-color: #fd7e14;
  color: white;
  cursor: not-allowed;
}



.car-rewards {
  font-size: 14px;
  color: #555;
  line-height: 1.4;
}

/* 手机浏览器响应式优化 */
@media (max-width: 768px) {
  .cars-modal-content {
    width: 95%;
    margin: 2% auto;
    padding: 15px;
    max-height: 90vh;
  }
  
  .cars-modal-header {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
  }
  
  .cars-modal-buttons {
    width: auto;
    justify-content: flex-end;
  }
  
  .car-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  
  .car-header h4 {
    font-size: 13px;
    word-break: break-all;
  }
  
  .car-header h4 .car-level {
    font-size: 11px;
  }
  
  .car-header h4 .refresh-count {
    font-size: 11px;
  }
  
  .car-item {
    padding: 12px;
    margin-bottom: 12px;
  }
  
  .car-rewards {
    font-size: 13px;
  }
  
  .refresh-car-btn {
    font-size: 11px;
    padding: 3px 6px;
  }
  
  .task-btn {
    font-size: 12px;
    padding: 6px 10px;
  }
  
  .cars-modal-header h3 .refresh-ticket-count {
    font-size: 10px;
  }
}

.car-rewards h5 {
  margin: 0 0 8px 0;
  color: #666;
}

.car-rewards ul {
  margin: 0;
  padding-left: 20px;
}

.car-rewards li {
  margin-bottom: 4px;
  color: #555;
}

/* 响应式布局：根据屏幕宽度调整英雄卡片数量 */
@media (min-width: 1200px) {
  .hero-card {
    width: calc(20% - 12px); /* 5个英雄，减去间距 */
    padding: 10px;
  }
  
  .stat-row {
    gap: 5px;
  }
  
  .stat-name {
    font-size: 10px;
  }
}

@media (min-width: 992px) and (max-width: 1199px) {
  .hero-card {
    width: calc(33.333% - 10px); /* 3个英雄，减去间距 */
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  .hero-card {
    width: calc(50% - 7.5px); /* 2个英雄，减去间距 */
  }
}

@media (max-width: 767px) {
  .lineup-heroes {
    flex-direction: column;
  }
  
  .hero-card {
    width: 100%; /* 1个英雄，占满宽度 */
  }
}

.hero-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid #ddd;
}

.weapon-quench-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-left: auto;
  margin-right: 10px;
  gap: 3px;
}

.quench-item {
  display: flex;
  align-items: center;
  gap: 3px;
}

.quench-icon {
  width: 16px;
  height: 16px;
  object-fit: contain;
}

.quench-count {
  font-size: 12px;
  font-weight: bold;
  color: #333;
  min-width: 12px;
  text-align: center;
}

.artifact-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-left: auto;
}

.artifact-icon {
  width: 51px;  /* 204/4=51，保持2:1比例 */
  height: 25px; /* 100/4=25，保持2:1比例 */
  object-fit: contain;
  border-radius: 2px;
  margin-bottom: 2px;
}

.artifact-stars {
  display: flex;
  gap: 1px;
  justify-content: center;
}

.spiritual-beads {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 4px;
}

.spiritual-bead {
  border: 1px solid #d4b106;
  background: linear-gradient(135deg, #fff9c4 0%, #fff176 100%);
  color: #8d6e00;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 500;
  text-align: center;
  min-width: 30px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.star-icon {
  width: 8px;
  height: 8px;
  object-fit: contain;
}

.hero-icon {
  width: 50px;
  height: 50px;
  object-fit: cover;
  border-radius: 4px;
}

.hero-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid #ddd;
}

.artifact-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-left: auto;
}

.artifact-icon {
  width: 51px;  /* 204/4=51，保持2:1比例 */
  height: 25px; /* 100/4=25，保持2:1比例 */
  object-fit: contain;
  border-radius: 2px;
  margin-bottom: 2px;
}

.artifact-stars {
  width: 40px;
  height: 10px;
  object-fit: contain;
}

.hero-info {
  flex: 1;
  min-width: 0;
}

.hero-name {
  font-weight: bold;
  font-size: 14px;
  color: #333;
  margin-bottom: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hero-level {
  font-size: 12px;
  color: #6c757d;
}

.hero-quench-slots {
  font-size: 11px;
  color: #6c757d;
  margin-top: 2px;
}

.hero-stats {
  margin-bottom: 10px;
}

.stat-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 5px;
}

.stat-name {
  font-size: 11px;
  color: #333;
  flex: 1;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stat-name {
  font-size: 12px;
  color: #333;
}



/* 响应式布局：根据屏幕宽度调整账号卡片显示数量 */
@media (min-width: 1920px) {
  .accounts-container {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 15px;
  }
}

@media (min-width: 1600px) and (max-width: 1919px) {
  .accounts-container {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 15px;
  }
}

@media (min-width: 1200px) and (max-width: 1599px) {
  .accounts-container {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 15px;
  }
}

@media (min-width: 768px) and (max-width: 1199px) {
  .accounts-container {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 15px;
  }
}

@media (max-width: 767px) {
  .accounts-container {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  
  .lineup-card-header h3 {
    font-size: 18px;
  }
  
  .hero-position {
    font-size: 13px;
  }
  
  .hero-id, .hero-level, .hero-star {
    font-size: 11px;
  }
  
  .stat-name {
    font-size: 11px;
  }
  
  .attribute-item {
    font-size: 11px;
  }
}

/* 优化滚动条样式 */
.hero-attributes::-webkit-scrollbar {
  width: 4px;
}

.hero-attributes::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 2px;
}

.hero-attributes::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 2px;
}

.hero-attributes::-webkit-scrollbar-thumb:hover {
  background: #555;
}

body {
  font-family: 'Arial', sans-serif;
  background-color: #f5f5f5;
  color: #333;
  line-height: 1.6;
}

.container {
  max-width: none;
  margin: 0 auto;
  padding: 20px;
  width: 100%;
}

header {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #ddd;
  flex-wrap: nowrap;
}

header h1 {
  margin-right: auto;
  font-size: 30px;
}

/* 媒体查询：调整移动设备上的样式 */
@media (max-width: 768px) {
  header {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}

.account-count {
  background-color: #28a745;
  color: white;
  padding: 5px 10px;
  border-radius: 4px;
  font-size: 12px;
}

main {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.control-panel {
  background-color: white;
  padding: 15px;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.form-group {
  margin-bottom: 15px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form-group label {
  font-size: 14px;
}

.form-group input {
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
}

.form-group button {
  padding: 8px 12px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s;
  font-size: 14px;
}

#add-account {
  background-color: #007bff;
  color: white;
}

.primary-btn {
  background-color: #007bff;
  color: white;
  flex: 1;
  padding: 8px 12px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s;
  font-size: 14px;
}

.primary-btn:hover {
  background-color: #0056b3;
}

.button-group {
  display: flex;
  gap: 10px;
  margin-top: 10px;
}

#join-club, #join-rank {
  background-color: #007bff;
  color: white;
  flex: 1;
}

.accounts-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 15px;
  width: 100%;
  max-width: none;
}

.account-card {
  background-color: white;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  padding: 12px;
  transition: transform 0.3s;
  position: relative;
  min-width: 300px; /* 设置最小宽度为300px */
}

.account-card:hover {
  transform: translateY(-3px);
}

.account-header {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  position: relative;
  justify-content: space-between;
}

.account-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-right: 8px;
  object-fit: cover;
}

.account-info {
  flex: 1;
}

.account-nickname {
  font-weight: bold;
  margin-bottom: 3px;
  font-size: 14px;
}

.account-server {
  font-size: 0.8em;
  color: #666;
  display: flex;
  align-items: center;
  gap: 5px;
}

.quench-info {
  display: flex;
  align-items: center;
  gap: 1px;
  margin-left: 2px;
  white-space: nowrap;
}

.quench-info img.quench-icon {
  width: 12px;
  height: 12px;
  margin-right: 1px;
}

.game-btn, .remove-account-btn {
  border: none;
  color: white;
  cursor: pointer;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  font-size: 12px;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.game-btn {
  background: linear-gradient(135deg, #4dabf7, #339af0);
  right: 35px;
  top: 2px;
}

.game-btn:hover {
  background: linear-gradient(135deg, #339af0, #228be6);
  transform: scale(1.1);
  box-shadow: 0 4px 8px rgba(77, 171, 247, 0.4);
  animation: pulse 1s infinite;
}

.remove-account-btn {
  background: linear-gradient(135deg, #dc3545, #c82333);
  right: 5px;
  top: 2px;
}

.remove-account-btn:hover {
  background: linear-gradient(135deg, #c82333, #bd2130);
  transform: scale(1.1);
  box-shadow: 0 4px 8px rgba(220, 53, 69, 0.4);
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(40, 167, 69, 0.7);
  }
  70% {
    box-shadow: 0 0 0 6px rgba(40, 167, 69, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(40, 167, 69, 0);
  }
}

.account-status {
  margin-bottom: 10px;
  font-size: 0.9em;
}

.account-resources {
  margin-top: 8px;
}

.resources-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
}

.resource-item {
  display: flex;
  align-items: center; /* 垂直对齐 */
  font-size: 0.8em;
}

.resource-icon {
  width: 24px;
  height: 24px;
  margin-right: 5px;
  object-fit: contain; /* 确保图标在容器内显示完整 */
}

.resource-value {
  font-weight: bold;
  width: 50px; /* 设置固定宽度确保对齐 */
  text-align: right; /* 右对齐数值 */
}

.resource-item img {
  float: left; /* 确保图标在左边 */
  margin-right: 5px;
}

.resource-item span {
  display: inline-block; /* 确保数值在右边 */
  text-align: left;
}


.task-buttons {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
}

.task-btn {
  padding: 8px 12px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-weight: bold;
  transition: all 0.3s;
  width: 48%;
}

.daily-task-btn.pending,
.weekly-quiz-btn.pending {
  background-color: #4285f4;
  color: white;
}

.daily-task-btn.completed,
.weekly-quiz-btn.completed {
  background-color: #34a853;
  color: white;
}

footer {
  text-align: center;
  margin-top: 20px;
  padding-top: 15px;
  border-top: 1px solid #ddd;
  color: #666;
  font-size: 14px;
}

/* 媒体查询：调整移动设备上的样式 */
@media (max-width: 768px) {
  .container {
    padding: 10px;
  }
  
  header {
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
  }
  
  .header-buttons {
    flex-wrap: wrap;
    gap: 5px;
  }
  
  .form-group {
    flex-direction: column;
  }

  .button-group {
    flex-direction: row; /* 保持按钮并排显示 */
    flex-wrap: wrap;
  }

  .button-group button {
    flex: 1;
    min-width: 120px; /* 确保按钮有最小宽度，易于点击 */
    padding: 10px 8px; /* 调整内边距，适应小屏幕 */
    font-size: 13px; /* 调整字体大小 */
  }

  .accounts-container {
    grid-template-columns: 1fr;
  }
  
  .modal-content {
    width: 95%;
    margin: 15% auto;
  }
}
/* 小号管理弹窗 */
#minion-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1000;
}

#minion-modal.show {
  display: block;
}

/* 俱乐部管理弹窗 */
#club-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1000;
}

#club-modal.show {
  display: block;
}

.modal-content {
  position: relative;
  background-color: white;
  margin: 10% auto;
  padding: 20px;
  width: 80%;
  max-width: 800px;
  border-radius: 5px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  max-height: 80vh; /* 设置最大高度为视口高度的80% */
  overflow-y: auto; /* 添加垂直滚动条 */
}

.close {
  position: absolute;
  top: 10px;
  right: 20px;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
}

/* 小号管理和欧皇人员管理表格样式 */
#minions-table, #club-accounts-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
  font-size: 14px;
}

#minions-table th, #minions-table td,
#club-accounts-table th, #club-accounts-table td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
  word-break: break-word;
}

#minions-table th, #club-accounts-table th {
  background-color: #f2f2f2;
  font-weight: bold;
}

#minions-table tr:nth-child(even),
#club-accounts-table tr:nth-child(even) {
  background-color: #f9f9f9;
}

#minions-table tr:hover,
#club-accounts-table tr:hover {
  background-color: #f1f1f1;
}

/* 手机模拟器适配样式 */
@media (max-width: 768px) {
  #minions-table, #club-accounts-table {
    font-size: 12px;
  }
  
  #minions-table th, #minions-table td,
  #club-accounts-table th, #club-accounts-table td {
    padding: 6px 4px;
  }
  
  /* 表格响应式布局 */
  .modal-content {
    width: 95%;
    max-width: 100%;
    margin: 10px auto;
    padding: 15px;
  }
  
  /* 按钮样式优化 */
  .query-lineup-btn, .remove-club-account-btn, .game-btn {
    font-size: 11px;
    padding: 4px 8px;
    margin: 2px;
  }
  
  /* 头像大小调整 */
  .account-avatar {
    width: 30px !important;
    height: 30px !important;
  }
}

/* 卡片按钮组样式 */
.card-buttons {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  z-index: 10;
}

/* 列表视图样式修复 */
.accounts-container.list-view .account-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.accounts-container.list-view .account-header-with-buttons {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
}

.accounts-container.list-view .account-main-info {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex: 1;
  min-width: 0;
}

/* 列表视图手机端适配 */
@media (max-width: 768px) {
  .accounts-container.list-view {
    gap: 8px;
  }
  
  .accounts-container.list-view .account-card {
    padding: 10px;
    flex-direction: column;
    align-items: stretch;
  }
  
  .accounts-container.list-view .account-header-with-buttons {
    flex-direction: row;
    align-items: center;
  }
  
  .accounts-container.list-view .account-main-info {
    flex-direction: row;
    align-items: center;
    flex: 1;
    min-width: 0;
  }
  
  .accounts-container.list-view .account-info {
    margin-left: 10px;
    min-width: 0;
    flex: 1;
  }
  
  .accounts-container.list-view .account-nickname {
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  
  .accounts-container.list-view .account-server {
    font-size: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    align-items: center;
  }
  
  .accounts-container.list-view .account-status {
    display: none;
    /* 在手机端隐藏详细状态信息，节省空间 */
  }
  
  /* 卡片按钮组样式 */
  .card-buttons {
    gap: 6px;
    margin-left: 8px;
  }
  
  /* 优化按钮大小和间距，适合触摸操作 */
  .toggle-resources-btn,
  .accounts-container.list-view .account-card .game-btn,
  .accounts-container.list-view .account-card .remove-account-btn {
    width: 24px;
    height: 24px;
    padding: 5px;
    font-size: 12px;
    margin: 0;
    position: static !important; /* 重置为静态定位，确保按钮在按钮组中正常排列 */
    right: auto !important; /* 重置绝对定位的right属性 */
    top: auto !important; /* 重置绝对定位的top属性 */
  }
  
  /* 优化展开状态的卡片样式 */
  .accounts-container.list-view .account-card.expanded {
    padding: 12px;
  }
  
  /* 优化资源显示 */
  .accounts-container.list-view .account-card.expanded .account-resources {
    padding-top: 10px;
  }
  
  /* 优化任务按钮布局 */
  .accounts-container.list-view .account-card.expanded .task-buttons {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
  }
  
  .accounts-container.list-view .account-card.expanded .task-buttons button {
    flex: 0 0 calc(50% - 4px);
    margin: 0;
  }
  
  /* 优化资源行布局 */
  .accounts-container.list-view .account-card.expanded .resources-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 10px;
  }
  
  .accounts-container.list-view .account-card.expanded .resource-item {
    flex: 0 0 auto;
    min-width: auto;
    margin-right: 15px;
  }
  
  /* 优化卡片hover效果，在移动设备上简化 */
  .accounts-container.list-view .account-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* 拖拽排序样式 */
.drag-container {
    position: relative;
}

.account-card[draggable="true"] {
    cursor: move;
    transition: all 0.3s ease;
}

.account-card[draggable="true"]:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.account-card[draggable="true"]:active {
    opacity: 0.8;
}

/* 拖拽时的视觉反馈 */
.account-card.dragging {
    opacity: 0.5;
    transform: scale(1.02);
}

/* 拖拽指示器 */
.drag-indicator {
    height: 2px;
    background-color: var(--ink-gold);
    position: absolute;
    left: 0;
    right: 0;
    z-index: 1000;
    transition: all 0.2s ease;
}

/* 列表视图下的拖拽样式优化 */
.accounts-container.list-view .account-card[draggable="true"] {
    border-left: 4px solid transparent;
}

.accounts-container.list-view .account-card[draggable="true"]:hover {
    border-left-color: var(--ink-gold);
}

.accounts-container.list-view .account-card[draggable="true"]:active {
    border-left-color: var(--ink-red);
}
}

/* 电脑端列表视图样式 */
@media (min-width: 769px) {
  .accounts-container.list-view .account-card {
    padding: 12px 15px;
  }
  
  .accounts-container.list-view .account-main-info {
    flex-direction: row;
  }
  
  .accounts-container.list-view .account-info {
    margin-left: 12px;
    min-width: 250px;
  }
  
  .accounts-container.list-view .account-status {
    margin-left: 30px;
    min-width: 180px;
    font-size: 12px;
  }
  
  .card-buttons {
    gap: 8px;
    margin-left: 20px;
  }
  
  .toggle-resources-btn,
  .accounts-container.list-view .account-card .game-btn,
  .accounts-container.list-view .account-card .remove-account-btn {
    width: 24px;
    height: 24px;
    padding: 5px;
    font-size: 12px;
    margin: 0;
    position: static !important; /* 重置为静态定位，确保按钮在按钮组中正常排列 */
    right: auto !important; /* 重置绝对定位的right属性 */
    top: auto !important; /* 重置绝对定位的top属性 */
  }
  
  /* 电脑端任务按钮并排显示 */
  .accounts-container.list-view .account-card.expanded .task-buttons {
    flex-direction: row;
    gap: 8px;
    margin-top: 8px;
  }
  
  .accounts-container.list-view .account-card.expanded .task-buttons button {
    flex: 1;
    margin: 0;
  }
  
  /* 电脑端资源行布局 */
  .accounts-container.list-view .account-card.expanded .resources-row {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 12px;
  }
  
  .accounts-container.list-view .account-card.expanded .resource-item {
    flex: 0 0 auto;
    min-width: auto;
    margin-right: 20px;
  }
}

/* 针对超小屏幕的特殊优化 */
@media (max-width: 480px) {
  .accounts-container.list-view .account-main-info {
    flex-direction: row;
  }
  
  .accounts-container.list-view .account-avatar {
    width: 28px !important;
    height: 28px !important;
  }
  
  .accounts-container.list-view .account-info {
    margin-left: 8px;
    flex: 1;
  }
  
  /* 卡片按钮组在超小屏幕的样式 */
  .card-buttons {
    gap: 5px;
    margin-left: 5px;
  }
  
  .toggle-resources-btn,
  .accounts-container.list-view .account-card .game-btn,
  .accounts-container.list-view .account-card .remove-account-btn {
    width: 24px;
    height: 24px;
    padding: 5px;
    font-size: 12px;
    margin: 0;
    position: static !important; /* 重置为静态定位，确保按钮在按钮组中正常排列 */
    right: auto !important; /* 重置绝对定位的right属性 */
    top: auto !important; /* 重置绝对定位的top属性 */
  }
  
  /* 简化账号信息显示 */
  .accounts-container.list-view .account-server {
    font-size: 10px;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  
  /* 优化资源行布局 */
  .accounts-container.list-view .account-card.expanded .resources-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 8px;
  }
  
  .accounts-container.list-view .account-card.expanded .resource-item {
    flex: 0 0 auto;
    min-width: auto;
    margin-right: 10px;
  }
  
  /* 优化超小屏幕下的账号昵称显示 */
  .accounts-container.list-view .account-nickname {
    font-size: 12px;
  }
  
  /* 超小屏幕下任务按钮布局 */
  .accounts-container.list-view .account-card.expanded .task-buttons {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 6px;
  }
  
  .accounts-container.list-view .account-card.expanded .task-buttons button {
    flex: 0 0 calc(50% - 3px);
    margin: 0;
  }
}

/* 表格操作按钮样式 */
.query-lineup-btn, .view-lineup-btn, .remove-club-account-btn {
  background-color: #007bff;
  color: white;
  border: none;
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  margin: 2px;
  transition: background-color 0.3s;
  display: inline-block;
  text-align: center;
  min-width: 40px;
}

.query-lineup-btn:hover, .view-lineup-btn:hover, .remove-club-account-btn:hover {
  background-color: #0056b3;
}

.remove-club-account-btn {
  background-color: #dc3545;
}

.remove-club-account-btn:hover {
  background-color: #c82333;
}

/* 表格中的游戏按钮样式 */
#club-accounts-table .game-btn, #minions-table .game-btn {
  background: linear-gradient(135deg, #4dabf7, #339af0);
  color: white;
  border: none;
  padding: 6px 8px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  margin: 2px;
  transition: background-color 0.3s, transform 0.3s;
  display: inline-block;
  text-align: center;
  min-width: 40px;
  position: static !important;
  width: auto !important;
  height: auto !important;
}

#club-accounts-table .game-btn:hover, #minions-table .game-btn:hover {
  background: linear-gradient(135deg, #339af0, #228be6);
  transform: scale(1.05);
}

.game-btn:hover {
  background: linear-gradient(135deg, #339af0, #228be6);
  transform: scale(1.05);
}

/* 游戏按钮图标样式 */
.game-btn i {
  font-size: 14px;
}

/* 账号头像样式 */
.account-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}

/* BOSS信息弹窗 */
.boss-info-popup {
  position: fixed;
  background-color: white;
  border: 1px solid #ddd;
  border-radius: 5px;
  padding: 15px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 300px;
  max-height: 80vh;
  overflow-y: auto;
}

.popup-content {
  margin-bottom: 15px;
}

.close-popup-btn {
  margin-top: 10px;
  padding: 5px 10px;
  background-color: #28a745;
  color: white;
  border: none;
  border-radius: 3px;
  cursor: pointer;
}

.close-popup-btn:hover {
  background-color: #218838;
}

/* 在 styles.css 文件中添加以下内容 */
.header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.header-buttons {
  display: flex;
  align-items: center;
  gap: 5px;
}

.account-count {
  background-color: #28a745;
  color: white;
  padding: 5px 10px;
  border-radius: 4px;
  font-size: 12px;
}

.simple-account-count {
  color: black;
  font-size: 14px;
  font-weight: normal;
  margin-left: 6px;
  background: none;
  padding: 0;
  border: none;
}

/* 卡片隐藏状态样式 */
.account-card.card-hidden .account-resources,
.account-card.card-hidden .task-buttons {
  display: none;
}

.account-card.card-hidden {
  padding: 12px;
  min-height: auto;
}

/* 列表视图样式 */
.accounts-container.list-view {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.accounts-container.list-view .account-card {
  display: flex;
  align-items: center;
  flex-direction: row;
  padding: 10px 15px;
  min-width: auto;
  justify-content: space-between;
  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.accounts-container.list-view .account-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  border-color: #007bff;
}

.accounts-container.list-view .account-header {
  display: flex;
  align-items: center;
  margin: 0;
  flex: 1;
}

.accounts-container.list-view .account-info {
  flex: 1;
  margin-left: 12px;
  min-width: 250px;
}

.accounts-container.list-view .account-nickname {
  font-weight: 600;
  color: #333;
  font-size: 14px;
  margin-bottom: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.accounts-container.list-view .account-server {
  font-size: 11px;
  color: #666;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
}

.accounts-container.list-view .account-status {
  display: flex;
  flex-direction: column;
  margin-left: 25px;
  min-width: 160px;
  font-size: 12px;
  color: #555;
}

.accounts-container.list-view .account-status > div {
  margin-bottom: 2px;
}

.accounts-container.list-view .account-resources,
.accounts-container.list-view .task-buttons {
  display: none;
}

.accounts-container.list-view .account-resources.visible,
.accounts-container.list-view .task-buttons.visible {
  display: block;
}

/* 显示/隐藏按钮样式 */
.toggle-resources-btn {
  background-color: #007bff;
  color: white;
  border: none;
  padding: 5px;
  border-radius: 50%;
  font-size: 12px;
  cursor: pointer;
  margin: 0;
  transition: all 0.3s ease;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 4px rgba(0, 123, 255, 0.2);
}

/* 资源区域中的账号状态样式 */
.accounts-container.list-view .account-card.expanded .account-status {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid #e9ecef;
  font-size: 14px;
  color: #555;
  font-weight: 500;
}

.toggle-resources-btn:hover {
  background-color: #0056b3;
  transform: scale(1.05);
  box-shadow: 0 3px 6px rgba(0, 123, 255, 0.3);
}

.toggle-resources-btn:active {
  transform: scale(0.95);
}

.accounts-container.list-view .account-card.expanded {
  flex-direction: column;
  align-items: flex-start;
  background: white;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}

.accounts-container.list-view .account-card.expanded .account-resources,
.accounts-container.list-view .account-card.expanded .task-buttons {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #e9ecef;
}

.accounts-container.list-view .account-card .account-header-with-buttons {
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: space-between;
}

.accounts-container.list-view .account-card .account-main-info {
  display: flex;
  align-items: center;
  flex: 1;
}

/* 优化按钮组间距 */
.accounts-container.list-view .account-card .toggle-resources-btn,
.accounts-container.list-view .account-card .game-btn,
.accounts-container.list-view .account-card .remove-account-btn {
  margin: 0;
  width: 24px;
  height: 24px;
  padding: 5px;
  font-size: 12px;
  position: static !important; /* 重置为静态定位，确保按钮在按钮组中正常排列 */
  right: auto !important; /* 重置绝对定位的right属性 */
  top: auto !important; /* 重置绝对定位的top属性 */
}

.accounts-container.list-view .account-card .remove-account-btn {
  background: linear-gradient(135deg, #dc3545, #c82333);
}

.accounts-container.list-view .account-card .game-btn {
  background: linear-gradient(135deg, #4dabf7, #339af0);
}

/* 优化展开动画 */
.accounts-container.list-view .account-card {
  overflow: hidden;
}

.accounts-container.list-view .account-card.expanded {
  transition: all 0.3s ease;
}

/* 优化任务按钮布局 */
.accounts-container.list-view .account-card.expanded .task-buttons {
  display: flex;
  flex-direction: row;
  gap: 8px;
  margin-top: 8px;
  flex-wrap: wrap;
}

.accounts-container.list-view .account-card.expanded .task-buttons button {
  flex: 0 0 calc(50% - 4px);
  margin: 0;
}

.accounts-container.list-view .account-card.expanded .task-buttons:first-of-type {
  margin-top: 12px;
}

/* 装备洗练弹窗样式 */
.equipment-quench-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1001;
}

.equipment-quench-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 95%;
  max-width: 700px;
  max-height: 70vh;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  z-index: 1001;
  overflow: auto;
  box-sizing: border-box;
}

.equipment-quench-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  border-bottom: 1px solid #ddd;
  background-color: #f8f9fa;
  border-radius: 8px 8px 0 0;
}

.equipment-quench-header h3 {
  margin: 0;
  font-size: 16px;
  color: #333;
}

.close-equipment-quench-btn {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: #666;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: background 0.3s;
}

.close-equipment-quench-btn:hover {
  background: #e9ecef;
}

.equipment-quench-content {
  padding: 15px;
}

.equipment-row {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  margin: 0 -2px;
  justify-content: space-between;
}

.equipment-column {
  flex: 1;
  min-width: 0;
  max-width: 24%;
  padding: 8px;
  background: #ffffff;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  margin-bottom: 8px;
  box-sizing: border-box;
}

.equipment-type {
  margin: 0 0 12px 0;
  font-size: 14px;
  color: #333;
  font-weight: 600;
  text-align: center;
  padding-bottom: 8px;
  border-bottom: 1px solid #f0f0f0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
}

.quench-times {
  font-size: 11px;
  color: #6c757d;
  font-weight: normal;
}

.equipment-quenches {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.quench-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 4px 6px;
  background: #f8f9fa;
  border-radius: 3px;
  font-size: 12px;
}

.quench-item.locked {
  background: #f8f9fa;
}

.quench-item.empty {
  background: #e9ecef;
  opacity: 0.7;
  justify-content: center;
}

.color-1 { color: #6c757d; }
.color-2 { color: #28a745; }
.color-3 { color: #007bff; }
.color-4 { color: #6f42c1; }
.color-5 { color: #fd7e14; }
.color-6 { color: #dc3545; }

.quench-attr {
  flex: 1;
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
}

.quench-value {
  font-weight: 600;
  min-width: 35px;
  text-align: right;
}

.quench-lock {
  font-size: 11px;
  min-width: 12px;
  text-align: center;
}

.quench-empty {
  color: #6c757d;
  font-size: 12px;
}

.no-quench {
  text-align: center;
  color: #6c757d;
  font-style: italic;
  padding: 20px;
}

@media (max-width: 768px) {
  .equipment-quench-modal {
    width: 95%;
    max-width: 90vw;
    margin: 1px;
    max-height: 85vh;
    overflow-y: auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  
  .equipment-quench-header h3 {
    font-size: 14px;
  }
  
  .equipment-row {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 -4px;
  }
  
  .equipment-column {
    flex: 0 0 calc(50% - 8px);
    min-width: calc(50% - 8px);
    max-width: calc(50% - 8px);
    padding: 4px;
  }
  
  .equipment-type {
    font-size: 12px;
    margin: 0 0 6px 0;
  }
  
  .quench-item {
    font-size: 11px;
    gap: 4px;
    padding: 3px 5px;
  }
  
  .quench-value {
    min-width: 25px;
  }
}

@media (max-width: 480px) {
  .equipment-quench-modal {
    width: 95%;
    max-width: 85vw;
    margin: 1px;
    max-height: 80vh;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  
  .equipment-row {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 6px;
  }
  
  .equipment-column {
    flex: 1 0 calc(50% - 12px);
    min-width: 120px;
  }
  
  .equipment-type {
    font-size: 11px;
  }
  
  .quench-item {
    font-size: 10px;
    padding: 2px 4px;
  }
}