/* 自定义样式 */
body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

/* 按钮悬停效果 */
button:hover {
  transform: translateY(-2px);
}

button:active {
  transform: translateY(0);
}

/* 生成成功动画 */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

#barcodeContainer {
  animation: fadeIn 0.5s ease-out;
}

/* 下载按钮动画 */
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(72, 187, 120, 0.7); }
  70% { box-shadow: 0 0 0 10px rgba(72, 187, 120, 0); }
  100% { box-shadow: 0 0 0 0 rgba(72, 187, 120, 0); }
}

#downloadBtn.active {
  animation: pulse 1.5s infinite;
}

/* 响应式调整 */
@media (max-width: 640px) {
  .container {
    padding: 1rem;
  }
  
  h1 {
    font-size: 1.75rem;
  }
  
  .flex {
    flex-direction: column;
  }
  
  button {
    width: 100%;
  }
}

/* 错误提示动画 */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
  20%, 40%, 60%, 80% { transform: translateX(5px); }
}

#errorAlert {
  animation: shake 0.5s cubic-bezier(.36,.07,.19,.97) both;
}

/* 加载状态 */
#loadingOverlay {
  backdrop-filter: blur(4px);
}

/* 条形码容器 */
#barcodeContainer {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 输入框焦点效果 */
input:focus, select:focus {
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);
}

/* 按钮禁用状态 */
button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

/* 卡片阴影效果 */
main, footer {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

/* 表格样式 */
table {
  border-collapse: collapse;
}

th, td {
  padding: 0.5rem;
  text-align: left;
}

th {
  background-color: #f9fafb;
  font-weight: 600;
}

tr:nth-child(even) {
  background-color: #f9fafb;
}

/* 字符计数样式 */
#charCount {
  color: #6b7280;
  font-size: 0.75rem;
}

/* 格式信息样式 */
#formatInfo {
  color: #6b7280;
  font-size: 0.75rem;
}