/**
 * CICN智橙 - 统一图标样式
 * 年轻清新风格
 */

.icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1em;
  height: 1em;
  vertical-align: middle;
}

.icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* 不同尺寸 */
.icon-xs { font-size: 14px; }
.icon-sm { font-size: 16px; }
.icon-md { font-size: 20px; }
.icon-lg { font-size: 24px; }
.icon-xl { font-size: 32px; }
.icon-2xl { font-size: 48px; }

/* 带边距 */
.icon-mr { margin-right: 6px; }
.icon-ml { margin-left: 6px; }

/* 导航图标 */
.nav-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  margin-right: 10px;
}

.nav-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Logo图标 */
.logo-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: linear-gradient(135deg, #FF2C55, #FF6B81);
  color: white;
}

.logo-icon svg {
  width: 20px;
  height: 20px;
}

/* 按钮图标 */
.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  margin-right: 6px;
}

.btn-icon svg {
  width: 100%;
  height: 100%;
}

/* 卡片图标 */
.card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  margin-bottom: 12px;
}

.card-icon svg {
  width: 24px;
  height: 24px;
}

/* 动画效果 */
.icon-spin {
  animation: icon-spin 1s linear infinite;
}

@keyframes icon-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.icon-pulse {
  animation: icon-pulse 2s ease-in-out infinite;
}

@keyframes icon-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}