/* 现代化工具类 */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.d-flex { display: flex; }
.d-grid { display: grid; }
.d-block { display: block; }
.d-inline-block { display: inline-block; }
.d-none { display: none; }

.flex-wrap { flex-wrap: wrap; }
.flex-nowrap { flex-wrap: nowrap; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.align-center { align-items: center; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-md); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacing-md); }

@media (max-width: 768px) {
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
}

.mb-sm { margin-bottom: var(--spacing-sm); }
.mb-md { margin-bottom: var(--spacing-md); }
.mb-lg { margin-bottom: var(--spacing-lg); }
.mt-sm { margin-top: var(--spacing-sm); }
.mt-md { margin-top: var(--spacing-md); }
.mt-lg { margin-top: var(--spacing-lg); }

.p-sm { padding: var(--spacing-sm); }
.p-md { padding: var(--spacing-md); }
.p-lg { padding: var(--spacing-lg); }

.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }

.rounded { border-radius: var(--border-radius-md); }
.rounded-sm { border-radius: var(--border-radius-sm); }
.rounded-lg { border-radius: var(--border-radius-lg); }

.transition { transition: var(--transition-base); }
.transition-fast { transition: var(--transition-fast); }

.hover\:opacity-70:hover { opacity: 0.7; }
.hover\:scale-105:hover { transform: scale(1.05); }

/* 现代化卡片样式 */
.card {
  background: var(--bg-primary);
  border-radius: var(--border-radius-md);
  box-shadow: var(--shadow-sm);
  padding: var(--spacing-lg);
  transition: var(--transition-base);
}

.card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

/* 现代化按钮样式 */
.btn {
  display: inline-block;
  padding: var(--spacing-sm) var(--spacing-lg);
  background: var(--primary-color);
  color: white;
  text-decoration: none;
  border-radius: var(--border-radius-md);
  transition: var(--transition-base);
  border: none;
  cursor: pointer;
  font-family: inherit;
}

.btn:hover {
  background: color-mix(in srgb, var(--primary-color) 90%, black);
  transform: translateY(-1px);
}

.btn-secondary {
  background: var(--secondary-color);
}

.btn-secondary:hover {
  background: color-mix(in srgb, var(--secondary-color) 90%, black);
}

/* 现代化容器 */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--spacing-md);
}

@media (max-width: 768px) {
  .container {
    padding: 0 var(--spacing-sm);
  }
}