body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  /*background-color: #f0f2f5;*/
  background-color: black;
  margin: 0;
  padding: 0px;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  width:98%;
  height:90%;
  border: 1px solid grey;
  border-radius: 8px;
}

.container {
  /*background-color: white;*/
  background-color: black;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  padding: 30px;
  max-width: 600px;
  width: 100%;
  height:100%;
  text-align: center;
}

h1 {
  color: #333;
  margin-bottom: 25px;
}

.button-container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 15px;
  margin-bottom: 30px;
}

.btn {
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.3s ease;
  color: white;
}

#btn1 { background-color: #4CAF50; }
#btn1:hover { background-color: #45a049; }

#btn2 { background-color: #2196F3; }
#btn2:hover { background-color: #0b7dda; }

#btn3 { background-color: #ff9800; }
#btn3:hover { background-color: #e68a00; }

#btn4 { background-color: #f44336; }
#btn4:hover { background-color: #d32f2f; }

#btn5 { background-color: #8bc34a; } 
#btn5:hover { background-color: #7cb342; } 

#btn6 { background-color: #009688; } 
#btn6:hover { background-color: #00867d; } 

#btn7 { background-color: #ff5722; } 
#btn7:hover { background-color: #e64a19; } 

#btn8 { background-color: #9c27b0; }
#btn8:hover { background-color: #7b1fa2; }

#btn9 { background-color: #795548; }
#btn9:hover { background-color: #6d4c41; }

#btn10 { background-color: #673ab7; } 
#btn10:hover { background-color: #5e35b1; } 

.btn:active {
  transform: translateY(2px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.output {
  /*min-height: 60px;*/
  height: 60px;
  padding: 15px;
  background-color: black;
  /*background-color: #f8f9fa;*/
  color:#00867d;
  border-radius: 4px;
  margin-top: 20px;
  text-align: left;
  font-size: 14px;
  line-height: 1.5;
  border: 1px solid #e9ecef;
}

.outputText{
  background-color: black;
  width: 100%;
  padding: 15px;
}

/* 添加按钮悬停提示样式 */
.btn {
  position: relative;
}

.btn::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%) scale(0.9);
  padding: 6px 10px;
  background-color: rgba(0, 0, 0, 0.8);
  color: white;
  border-radius: 4px;
  font-size: 12px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: all 0.2s ease;
  z-index: 50;
}

.btn:hover::after {
  opacity: 1;
  transform: translateX(-50%) scale(1);
}