/* =============================================
   图灵软件 - 图标系统样式
   使用 SVG Sprite + CSS 方式统一管理图标
   ============================================= */

/* 图标基础样式 */
.tl-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1em;
  height: 1em;
  color: inherit;
  vertical-align: middle;
  flex-shrink: 0;
}

.tl-icon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
}

/* 尺寸变体 */
.tl-icon-xs { width: 16px; height: 16px; }
.tl-icon-sm { width: 24px; height: 24px; }
.tl-icon-md { width: 36px; height: 36px; }
.tl-icon-lg { width: 48px; height: 48px; }
.tl-icon-xl { width: 64px; height: 64px; }

/* 圆形背景容器 */
.tl-icon-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: linear-gradient(135deg, #e3f2fd, #bbdefb);
  flex-shrink: 0;
  width: 80px;
  height: 80px;
}

.tl-icon-circle .tl-icon {
  color: #1565C0;
  width: 40px;
  height: 40px;
}

/* 圆角方形背景容器 */
.tl-icon-square {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: linear-gradient(135deg, #e3f2fd, #bbdefb);
  flex-shrink: 0;
  width: 80px;
  height: 80px;
}

.tl-icon-square .tl-icon {
  color: #1565C0;
  width: 40px;
  height: 40px;
}

/* 深色背景（用于深色区域） */
.tl-icon-circle-dark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  flex-shrink: 0;
  width: 80px;
  height: 80px;
}

.tl-icon-circle-dark .tl-icon {
  color: #ffffff;
  width: 40px;
  height: 40px;
}

.tl-icon-square-dark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.15);
  flex-shrink: 0;
  width: 80px;
  height: 80px;
}

.tl-icon-square-dark .tl-icon {
  color: #ffffff;
  width: 40px;
  height: 40px;
}