/* 挑号助手样式 */
.container {
  max-width: 680px;
  margin: 0 auto;
  padding: 10px;
}

/* 结果显示区域 */
.result-area {
  margin-bottom: 15px;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  position: sticky;
  top: 46px; /* 添加顶部空白 */
  background: white;
  z-index: 100;
  padding: 10px 0;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

/* 结果显示框 */
.result-box {
  width: 90%;
  height: 80px;
  padding: 10px;
  border: 2px solid #00b600;
  border-radius: 8px;
  font-size: 16px; /* 电脑端16px */
  font-weight: bold;
  background-color: #f8f9fa;
  text-align: left;
  line-height: 1.4;
  overflow-y: auto;
  white-space: normal;
  word-wrap: break-word;
}

/* 波色数字颜色 */
.red-number {
  color: #e74c3c;
  font-weight: bold;
}

.blue-number {
  color: #3498db;
  font-weight: bold;
}

.green-number {
  color: #2ecc71;
  font-weight: bold;
}

/* 号码数量显示 */
.result-count {
  margin-top: 8px;
  font-size: 16px; /* 电脑端16px */
  font-weight: bold;
  color: #2c3e50;
  text-align: center;
  padding: 5px 15px;
  background: #ecf0f1;
  border-radius: 20px;
  border: 1px solid #00b600;
  display: block;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}

/* 功能按钮 */
.button-row {
  display: flex;
  justify-content: center;
  gap: 15px;
  margin-bottom: 20px;
}

.button-row button {
  padding: 12px 20px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 16px; /* 电脑端16px */
  font-weight: bold;
  transition: all 0.3s ease;
  flex: 1;
  max-width: 130px;
}

#clearBtn {
  background-color: #e74c3c;
  color: white;
}

#copyBtn {
  background-color: #2ecc71;
  color: white;
}

/* 分类区域 */
.category-section {
  margin-bottom: 15px;
  padding: 12px;
  background: #f8f9fa;
  border-radius: 10px;
  border: 1px solid #e1e8ed;
  font-size: 16px; /* 电脑端16px */
}

.category-title {
  font-size: 16px; /* 电脑端16px */
  font-weight: bold;
  margin-bottom: 10px;
  color: #2c3e50;
  text-align: center;
  padding-bottom: 5px;
  border-bottom: 2px solid #00b600;
}

.category-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

.category-btn {
  background-color: #ecf0f1;
  color: #00b600;
  border: 2px solid #00b600;
  padding: 10px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 16px; /* 电脑端16px */
  font-weight: bold;
  flex: 1;
  min-width: 0;
  text-align: center;
  margin: 3px 0;
}

.category-btn:hover {
  background-color: #d5dbdb;
  transform: translateY(-2px);
}

.category-btn.active {
  background-color: #00b600;
  color: white;
  border-color: #00b600;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(52, 152, 219, 0.3);
}

/* 生肖按钮特殊布局 - 2行6列 */
#zodiac.category-buttons {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
}

#zodiac .category-btn {
  flex: none;
  min-width: auto;
  padding: 8px 4px;
  font-size: 16px; /* 电脑端16px */
}

/* 合数按钮特殊布局 - 2行5列 */
#sumNumbers.category-buttons {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
}

#sumNumbers .category-btn {
  flex: none;
  min-width: auto;
  padding: 8px 4px;
  font-size: 16px; /* 电脑端16px */
}

/* 尾数按钮布局 - 桌面端1行，手机端2行 */
#lastDigits.category-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
}

#lastDigits .category-btn {
  flex: 1;
  min-width: calc(10% - 6px);
}

/* 基础属性网格 - 单双、大小数、合数单双 */
.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 强制3列布局 */
  gap: 12px;
  margin-bottom: 15px;
}

.grid-container .category-section {
  margin-bottom: 0;
}

.grid-container .category-buttons {
  display: flex;
  flex-wrap: nowrap; /* 禁止换行 */
  gap: 6px;
}

.grid-container .category-btn {
  font-size: 16px; /* 电脑端16px */
  padding: 8px 6px;
  flex: 1;
  min-width: 0;
}

/* 生肖属性区域 */
.zodiac-attribute-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 15px;
}

.zodiac-attribute-group {
  flex: 1;
  min-width: 85px;
  background: #f8f9fa;
  padding: 10px;
  border-radius: 8px;
  border: 1px solid #e1e8ed;
}

.zodiac-attribute-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.zodiac-attribute-btn {
  background-color: #ecf0f1;
  color: #00b600;
  border: 2px solid #00b600;
  padding: 8px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 16px; /* 电脑端16px */
  font-weight: bold;
  flex: 1;
  text-align: center;
}

.zodiac-attribute-btn:hover {
  background-color: #00b600;
  transform: translateY(-1px);
}

.zodiac-attribute-btn.active {
  background-color: #00b600;
  color: white;
  border-color: #00b600;
  transform: translateY(-1px);
  box-shadow: 0 3px 6px rgba(52, 152, 219, 0.3);
}

/* 选择信息显示 */
.selection-info {
  text-align: center;
  margin: 15px 0;
  color: #00b600;
  font-weight: bold;
  font-size: 16px; /* 电脑端16px */
  padding: 10px;
  background: #ecf0f1;
  border-radius: 8px;
  border: 1px solid #00b600;
}

/* 页脚 */
.footer {
  text-align: center;
  margin-top: 20px;
  color: #7f8c8d;
  font-size: 16px; /* 电脑端16px */
  padding: 10px;
}

/* ========== 响应式设计 ========== */

/* 平板和手机适配 */
@media (max-width: 768px) {
  .container {
    padding: 8px;
  }
  
  .result-area {
    position: sticky;
    top: 46px; /* 手机端也保持46px空白 */
    background: white;
    z-index: 100;
    padding: 8px 0;
  }
  
  .result-box {
    width: calc(100% - 30px); /* 减去左右外边距 */
    margin: 0 15px; /* 左右外边距各15px */
    height: 100px;
    font-size: 14px; /* 手机端15px */
    padding: 8px;
  }
  
  .result-count {
    font-size: 14px; /* 手机端15px */
    padding: 4px 12px;
  }
  
  .button-row button {
    padding: 10px 15px;
    font-size: 14px; /* 手机端15px */
    max-width: 110px;
  }
  
  .category-section {
    padding: 10px;
    margin-bottom: 12px;
    font-size: 14px; /* 手机端15px */
  }
  
  .category-title {
    font-size: 14px; /* 手机端15px */
    margin-bottom: 8px;
  }
  
  .category-btn {
    font-size: 14px; /* 手机端15px */
    padding: 8px 6px;
    margin: 2px 0;
  }
  
  /* 基础属性网格 - 手机端保持3列一行 */
  .grid-container {
    grid-template-columns: repeat(3, 1fr); /* 手机端也保持3列 */
    gap: 8px;
  }
  
  .grid-container .category-btn {
    font-size: 14px; /* 手机端15px */
    padding: 6px 4px;
  }
  
  /* 手机端生肖布局 */
  #zodiac.category-buttons {
    grid-template-columns: repeat(6, 1fr);
    gap: 4px;
  }
  
  #zodiac .category-btn {
    padding: 6px 3px;
    font-size: 14px; /* 手机端15px */
  }
  
  /* 手机端合数布局 */
  #sumNumbers.category-buttons {
    grid-template-columns: repeat(5, 1fr);
    gap: 4px;
  }
  
  #sumNumbers .category-btn {
    padding: 6px 3px;
    font-size: 14px; /* 手机端15px */
  }
  
  /* 手机端尾数布局 - 2行5列 */
  #lastDigits.category-buttons {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 4px;
  }
  
  #lastDigits .category-btn {
    flex: none;
    min-width: auto;
    padding: 6px 3px;
    font-size: 14px; /* 手机端15px */
  }
  
  .zodiac-attribute-btn {
    font-size: 14px; /* 手机端15px */
    padding: 6px 8px;
  }
  
  .zodiac-attribute-group {
    min-width: 75px;
    padding: 8px;
  }
  
  .selection-info {
    font-size: 14px; /* 手机端15px */
    padding: 8px;
  }
  
  .footer {
    font-size: 14px; /* 手机端15px */
  }
}

/* 小屏手机适配 */
@media (max-width: 480px) {
  .container {
    padding: 5px;
  }
  
  .result-area {
    position: sticky;
    top: 46px; /* 小屏手机也保持46px空白 */
    background: white;
    z-index: 100;
    padding: 5px 0;
  }
  
  .result-box {
    width: calc(100% - 30px); /* 减去左右外边距 */
    margin: 0 15px; /* 左右外边距各15px */
    height: 90px;
    font-size: 14px; /* 手机端15px */
  }
  
  .result-count {
    font-size: 14px; /* 手机端15px */
    padding: 3px 10px;
  }
  
  .button-row {
    gap: 10px;
  }
  
  .button-row button {
    padding: 8px 12px;
    font-size: 14px; /* 手机端15px */
    max-width: 100px;
  }
  
  .category-btn {
    font-size: 14px; /* 手机端15px */
    padding: 7px 5px;
  }
  
  /* 基础属性网格 - 小屏手机保持3列 */
  .grid-container {
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
  }
  
  .grid-container .category-btn {
    font-size: 14px; /* 手机端15px */
    padding: 5px 3px;
  }
  
  /* 小屏手机生肖布局 */
  #zodiac.category-buttons {
    grid-template-columns: repeat(6, 1fr);
    gap: 3px;
  }
  
  #zodiac .category-btn {
    padding: 5px 2px;
    font-size: 14px; /* 手机端15px */
  }
  
  /* 小屏手机合数布局 */
  #sumNumbers.category-buttons {
    grid-template-columns: repeat(5, 1fr);
    gap: 3px;
  }
  
  #sumNumbers .category-btn {
    padding: 5px 2px;
    font-size: 14px; /* 手机端15px */
  }
  
  /* 小屏手机尾数布局 */
  #lastDigits.category-buttons {
    grid-template-columns: repeat(5, 1fr);
    gap: 3px;
  }
  
  #lastDigits .category-btn {
    padding: 5px 2px;
    font-size: 14px; /* 手机端15px */
  }
  
  .zodiac-attribute-btn {
    font-size: 14px; /* 手机端15px */
    padding: 5px 6px;
  }
  
  .zodiac-attribute-group {
    min-width: 70px;
    padding: 6px;
  }
  
  .category-title {
    font-size: 14px; /* 手机端15px */
  }
  
  .selection-info {
    font-size: 14px; /* 手机端15px */
  }
  
  .footer {
    font-size: 14px; /* 手机端15px */
  }
}