/**
 * 123AI Post - Professional Icon System
 * Business-grade linear SVG icons + platform brand colors
 */

/* ========== 通用图标样式 ========== */
.icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  vertical-align: middle;
}

.icon svg {
  width: 100%;
  height: 100%;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

.icon-sm { width: 16px; height: 16px; }
.icon-md { width: 20px; height: 20px; }
.icon-lg { width: 24px; height: 24px; }
.icon-xl { width: 32px; height: 32px; }

/* 图标容器 */
.icon-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: var(--brand-gradient-soft);
  color: var(--brand-primary);
}

.icon-box-sm { width: 32px; height: 32px; }
.icon-box-md { width: 40px; height: 40px; }
.icon-box-lg { width: 48px; height: 48px; }

/* ========== 平台品牌色图标 ========== */
.platform-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  font-weight: 800;
  font-size: 16px;
  color: white;
  letter-spacing: -0.5px;
  transition: transform 0.2s, box-shadow 0.2s;
  position: relative;
  overflow: hidden;
}

.platform-icon:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

.platform-icon-sm { width: 32px; height: 32px; font-size: 12px; border-radius: 8px; }
.platform-icon-lg { width: 56px; height: 56px; font-size: 20px; border-radius: 14px; }

/* 各平台品牌色 */
.pi-youtube { background: linear-gradient(135deg, #FF0000, #CC0000); }
.pi-tiktok { background: linear-gradient(135deg, #000000, #333333); position: relative; }
.pi-tiktok::after { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, transparent 40%, rgba(37,244,238,0.3) 50%, rgba(254,44,85,0.3) 60%, transparent 70%); }
.pi-facebook { background: linear-gradient(135deg, #1877F2, #0D65D9); }
.pi-instagram { background: linear-gradient(135deg, #F58529, #DD2A7B, #8134AF); }
.pi-twitter, .pi-x { background: linear-gradient(135deg, #000000, #1a1a1a); }
.pi-linkedin { background: linear-gradient(135deg, #0A66C2, #084D94); }
.pi-pinterest { background: linear-gradient(135deg, #E60023, #C4001C); }
.pi-telegram { background: linear-gradient(135deg, #0088CC, #006699); }
.pi-discord { background: linear-gradient(135deg, #5865F2, #4752C4); }
.pi-reddit { background: linear-gradient(135deg, #FF4500, #E63E00); }
.pi-medium { background: linear-gradient(135deg, #000000, #333333); }
.pi-wordpress { background: linear-gradient(135deg, #21759B, #1E6081); }
.pi-mastodon { background: linear-gradient(135deg, #6364FF, #4f4fe0); }
.pi-dailymotion { background: linear-gradient(135deg, #0066DC, #0052B0); }
.pi-vimeo { background: linear-gradient(135deg, #1AB7EA, #159AC4); }
.pi-tumblr { background: linear-gradient(135deg, #35465C, #2A3747); }
.pi-slack { background: linear-gradient(135deg, #4A154B, #3A103B); }
.pi-douyin { background: linear-gradient(135deg, #000000, #222222); position: relative; }
.pi-douyin::after { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, transparent 40%, rgba(37,244,238,0.25) 50%, rgba(254,44,85,0.25) 60%, transparent 70%); }
.pi-xiaohongshu, .pi-rednote { background: linear-gradient(135deg, #FF2442, #E61E3A); }
.pi-bilibili { background: linear-gradient(135deg, #00A1D6, #0088B8); }
.pi-kuaishou { background: linear-gradient(135deg, #FF4906, #E64105); }
.pi-wechat, .pi-weixin { background: linear-gradient(135deg, #07C160, #06AD56); }
.pi-wechat-mp { background: linear-gradient(135deg, #07C160, #06AD56); }
.pi-channels { background: linear-gradient(135deg, #07C160, #06AD56); }
.pi-zhihu { background: linear-gradient(135deg, #0066FF, #0052CC); }
.pi-weibo { background: linear-gradient(135deg, #E6162D, #CC1428); }

/* 平台图标文字 */
.pi-youtube::before { content: 'YT'; }
.pi-tiktok::before { content: 'TT'; }
.pi-facebook::before { content: 'f'; }
.pi-instagram::before { content: 'IG'; }
.pi-twitter::before, .pi-x::before { content: 'X'; }
.pi-linkedin::before { content: 'in'; }
.pi-pinterest::before { content: 'P'; }
.pi-telegram::before { content: 'TG'; }
.pi-discord::before { content: 'DC'; }
.pi-reddit::before { content: 'R'; }
.pi-medium::before { content: 'M'; }
.pi-wordpress::before { content: 'W'; }
.pi-mastodon::before { content: 'M'; }
.pi-dailymotion::before { content: 'DM'; }
.pi-vimeo::before { content: 'V'; }
.pi-tumblr::before { content: 't'; }
.pi-slack::before { content: 'S'; }
.pi-douyin::before { content: '抖'; }
.pi-xiaohongshu::before, .pi-rednote::before { content: '红'; }
.pi-bilibili::before { content: 'B站'; font-size: 12px; }
.pi-kuaishou::before { content: '快'; }
.pi-wechat::before, .pi-weixin::before { content: '微'; }
.pi-wechat-mp::before { content: 'MP'; }
.pi-channels::before { content: '视'; }
.pi-zhihu::before { content: '知'; }
.pi-weibo::before { content: '微'; }

/* ========== 功能图标颜色变体 ========== */
.icon-color-primary { color: var(--brand-primary); }
.icon-color-success { color: var(--success); }
.icon-color-warning { color: var(--warning); }
.icon-color-error { color: var(--error); }
.icon-color-info { color: var(--info); }
.icon-color-muted { color: var(--text-muted); }

/* 图标按钮 */
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: 1px solid var(--border-primary);
  background: var(--bg-card);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s;
}

.icon-btn:hover {
  border-color: var(--brand-primary);
  color: var(--brand-primary);
  background: var(--brand-gradient-soft);
}

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

/* 统计卡片图标 */
.stat-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}

.stat-icon-primary { background: linear-gradient(135deg, rgba(99,102,241,0.12), rgba(139,92,246,0.12)); color: var(--brand-primary); }
.stat-icon-success { background: var(--success-bg); color: var(--success); }
.stat-icon-warning { background: var(--warning-bg); color: var(--warning); }
.stat-icon-info { background: var(--info-bg); color: var(--info); }
.stat-icon-error { background: var(--error-bg); color: var(--error); }