/* 重置 & 基础 */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  width: 100%;
  height: 100%;
  font-family: var(--font-family);
  background: var(--color-bg);
  color: var(--color-text-primary);
  font-size: var(--font-size-md);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow: hidden;
}

[v-cloak] { display: none !important; }
#app { width: 100%; height: 100%; }

/* 滚动条 */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--color-border-strong);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover { background: var(--color-text-tertiary); }

* {
  scrollbar-width: thin;
  scrollbar-color: var(--color-border-strong) transparent;
}

/* 关键帧动画 */
@keyframes spin { to { transform: rotate(360deg); } }

@keyframes az-breathing-light {
  0%, 100% { opacity: 1; }
  50%      { opacity: .4; }
}

@keyframes az-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: .3; }
}

@keyframes az-fadeSlideIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes az-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

@keyframes az-scaleIn {
  from { opacity: 0; transform: scale(.95); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes az-slideUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes az-slideRight {
  from { opacity: 0; transform: translateX(-12px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes az-bounceIn {
  0%   { transform: scale(0); }
  50%  { transform: scale(1.05); }
  100% { transform: scale(1); }
}

/* Vue 过渡 */
.az-fade-enter-active,
.az-fade-leave-active {
  transition: opacity .2s ease, transform .2s ease;
}
.az-fade-enter-from {
  opacity: 0;
  transform: translateY(8px);
}
.az-fade-leave-to {
  opacity: 0;
  transform: translateY(-4px);
}

.az-slide-enter-active,
.az-slide-leave-active {
  transition: opacity .25s ease, transform .25s ease;
}
.az-slide-enter-from {
  opacity: 0;
  transform: translateX(-12px);
}
.az-slide-leave-to {
  opacity: 0;
  transform: translateX(12px);
}

.az-scale-enter-active,
.az-scale-leave-active {
  transition: opacity .2s ease, transform .2s ease;
}
.az-scale-enter-from {
  opacity: 0;
  transform: scale(.95);
}
.az-scale-leave-to {
  opacity: 0;
  transform: scale(.95);
}

.az-list-enter-active {
  transition: opacity .3s ease, transform .3s ease;
}
.az-list-leave-active {
  transition: opacity .2s ease, transform .2s ease;
  position: absolute;
}
.az-list-enter-from {
  opacity: 0;
  transform: translateY(12px);
}
.az-list-leave-to {
  opacity: 0;
  transform: translateY(-12px);
}
.az-list-move {
  transition: transform .3s ease;
}

/* 工具类 */
.az-text-success { color: var(--color-success) !important; }
.az-text-danger  { color: var(--color-danger) !important; }
.az-text-warning { color: var(--color-warning) !important; }
.az-text-info    { color: var(--color-info) !important; }
.az-text-muted   { color: var(--color-text-tertiary) !important; }
.az-text-mono    { font-family: var(--font-family-mono) !important; }

.az-bg-success { background: var(--color-success-bg) !important; }
.az-bg-danger  { background: var(--color-danger-bg) !important; }
.az-bg-warning { background: var(--color-warning-bg) !important; }
.az-bg-info    { background: var(--color-info-bg) !important; }

.az-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.az-flex { display: flex; }
.az-flex--center { align-items: center; justify-content: center; }
.az-flex--between { justify-content: space-between; }
.az-gap-sm { gap: 8px; }
.az-gap-md { gap: 16px; }

.az-mt-sm { margin-top: 8px; }
.az-mt-md { margin-top: 16px; }
.az-mt-lg { margin-top: 24px; }
.az-mb-sm { margin-bottom: 8px; }
.az-mb-md { margin-bottom: 16px; }
.az-mb-lg { margin-bottom: 24px; }