/* Premium SVG icon system for AI Crypto Project */
/* Usage: <span class="icon icon-analytics"></span> */

:root {
  --icon-size-sm: 20px;
  --icon-size-md: 26px;
  --icon-size-lg: 32px;
}

.icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--icon-size-md);
  height: var(--icon-size-md);
  border-radius: 12px;
  background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
  box-shadow: 0 8px 20px rgba(139, 69, 255, 0.3);
  transition: all 0.3s ease;
}

.icon:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(139, 69, 255, 0.4);
}

.icon::before {
  content: "";
  display: block;
  width: 65%;
  height: 65%;
  background: center/contain no-repeat;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}

.icon.sm { width: var(--icon-size-sm); height: var(--icon-size-sm); }
.icon.lg { width: var(--icon-size-lg); height: var(--icon-size-lg); }

/* Modern Premium Icon Set */
.icon-analytics::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M2 3h2v18H2V3zm4 8h2v10H6V11zm4-4h2v14h-2V7zm4 2h2v12h-2V9zm4-6h2v18h-2V3z' fill='white' stroke='white' stroke-width='0.5'/%3E%3C/svg%3E");
}

.icon-time::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Ccircle cx='12' cy='12' r='10' fill='none' stroke='white' stroke-width='2'/%3E%3Cpolyline points='12,6 12,12 16,14' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.icon-money::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm.5-13H11v1.5c-1.25.17-2 1.11-2 2.5 0 1.61 1.5 2.25 2.5 2.5V16h1v-1.5c1.25-.17 2-1.11 2-2.5 0-1.61-1.5-2.25-2.5-2.5V8h-1z' fill='white'/%3E%3C/svg%3E");
}

.icon-brain::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M9 2c-1.1 0-2 .9-2 2v1c-1.7.3-3 1.7-3 3.5 0 1 .4 1.9 1 2.6v.9c0 1.1.9 2 2 2h1v7h6v-7h1c1.1 0 2-.9 2-2v-.9c.6-.7 1-1.6 1-2.6 0-1.8-1.3-3.2-3-3.5V4c0-1.1-.9-2-2-2h-4zm1 2h2v2H10V4z' fill='white'/%3E%3C/svg%3E");
}

.icon-robot::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M12 2c1.1 0 2 .9 2 2v1h2c1.1 0 2 .9 2 2v10c0 1.66-1.34 3-3 3H9c-1.66 0-3-1.34-3-3V7c0-1.1.9-2 2-2h2V4c0-1.1.9-2 2-2zm-3 8c-.55 0-1 .45-1 1s.45 1 1 1 1-.45 1-1-.45-1-1-1zm6 0c-.55 0-1 .45-1 1s.45 1 1 1 1-.45 1-1-.45-1-1-1zm-3 6h2v2h-2v-2z' fill='white'/%3E%3C/svg%3E");
}

.icon-news::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M4 6H2v14c0 1.1.9 2 2 2h14v-2H4V6zm18-2H8c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm-1 12H9V8h12v8zm-8-6h6v2h-6v-2zm0 3h6v1h-6v-1z' fill='white'/%3E%3C/svg%3E");
}

.icon-calendar::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11zM7 10h5v5H7z' fill='white'/%3E%3C/svg%3E");
}

.icon-target::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Ccircle cx='12' cy='12' r='10' fill='none' stroke='white' stroke-width='2'/%3E%3Ccircle cx='12' cy='12' r='6' fill='none' stroke='white' stroke-width='2'/%3E%3Ccircle cx='12' cy='12' r='2' fill='white'/%3E%3C/svg%3E");
}

.icon-rocket::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M12 2l3.09 6.26L22 9l-5 4.74L18.18 22 12 18.77 5.82 22 7 13.74 2 9l6.91-.74L12 2z' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.icon-diamond::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M6 3h12l4 6-10 12L2 9l4-6z' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M6 9h12' stroke='white' stroke-width='2'/%3E%3Cpath d='M9.5 3L8 9l4 12' stroke='white' stroke-width='2'/%3E%3Cpath d='M14.5 3L16 9l-4 12' stroke='white' stroke-width='2'/%3E%3C/svg%3E");
}

.icon-world::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Ccircle cx='12' cy='12' r='10' fill='none' stroke='white' stroke-width='2'/%3E%3Cline x1='2' y1='12' x2='22' y2='12' stroke='white' stroke-width='2'/%3E%3Cpath d='M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z' fill='none' stroke='white' stroke-width='2'/%3E%3C/svg%3E");
}

.icon-free::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpolygon points='12,2 15.09,8.26 22,9 16,14.74 17.18,21.02 12,18.77 6.82,21.02 8,14.74 2,9 8.91,8.26 12,2' fill='white' stroke='white' stroke-width='1'/%3E%3C/svg%3E");
}

/* Additional Premium Icons */
.icon-education::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M12 3L1 9l4 2.18v6L12 21l7-3.82v-6L22 9l-10-6zm2.5 12.5L12 17l-2.5-1.5V11.5L12 13l2.5-1.5v4z' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.icon-mail::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z' fill='none' stroke='white' stroke-width='2'/%3E%3Cpolyline points='22,6 12,13 2,6' fill='none' stroke='white' stroke-width='2'/%3E%3C/svg%3E");
}

.icon-telegram::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M21 2L3 10.5l5.5 2L12 22l1.5-6.5L22 7L21 2z' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M8.5 12.5L13 8' fill='none' stroke='white' stroke-width='2'/%3E%3C/svg%3E");
}

.icon-link::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.icon-bell::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M13.73 21a2 2 0 0 1-3.46 0' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.icon-chain::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M9 12l2 2 4-4' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M21 12c.552 0 1-.448 1-1V8c0-.552-.448-1-1-1h-3c-.552 0-1 .448-1 1v3c0 .552.448 1 1 1h3zM10 12c.552 0 1-.448 1-1V8c0-.552-.448-1-1-1H7c-.552 0-1 .448-1 1v3c0 .552.448 1 1 1h3z' fill='none' stroke='white' stroke-width='2'/%3E%3Cpath d='M21 17c.552 0 1-.448 1-1v-3c0-.552-.448-1-1-1h-3c-.552 0-1 .448-1 1v3c0 .552.448 1 1 1h3zM10 17c.552 0 1-.448 1-1v-3c0-.552-.448-1-1-1H7c-.552 0-1 .448-1 1v3c0 .552.448 1 1 1h3z' fill='none' stroke='white' stroke-width='2'/%3E%3C/svg%3E");
}

.icon-user::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='12' cy='7' r='4' fill='none' stroke='white' stroke-width='2'/%3E%3C/svg%3E");
}

.icon-whale::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M2 16.1A5 5 0 0 1 5.9 20M6.5 17.5L13 11l6 6-6.5 6.5L6.5 17.5z' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M13 7.5c0-2.5 2-4.5 4.5-4.5s4.5 2 4.5 4.5c0 1-1.5 2-1.5 2s-1.5-1-1.5-2c0-1.5-1-2.5-2.5-2.5S13 6 13 7.5z' fill='none' stroke='white' stroke-width='2'/%3E%3Ccircle cx='17.5' cy='6.5' r='1.5' fill='white'/%3E%3C/svg%3E");
}

/* Special icon for tools/strategies */
.icon-tools::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.77 3.77z' fill='none' stroke='white' stroke-width='2'/%3E%3C/svg%3E");
}

/* Helper: outlined container-less icon (no gradient box) */
.icon.plain {
  background: none;
  box-shadow: none;
}

/* Additional icons for roadmap */
.icon-chart::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M3 3v18h18V3H3zm16 16H5V5h14v14z'/%3E%3Cpath d='M7 12h4v5H7zM13 7h4v10h-4z'/%3E%3C/svg%3E");
}

.icon-portfolio::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M20 7h-3V4c0-1.1-.9-2-2-2H9c-1.1 0-2 .9-2 2v3H4c-1.1 0-2 .9-2 2v11c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V9c0-1.1-.9-2-2-2zM9 4h6v3H9V4zm11 15H4v-2h16v2zm0-4H4v-6h2v2h2v-2h6v2h2v-2h2v6z'/%3E%3C/svg%3E");
}

.icon-backtest::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M9 11H7v6h2v-6zm4 0h-2v6h2v-6zm4 0h-2v6h2v-6zM4 3v2h16V3H4zm0 4v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V7H4z'/%3E%3C/svg%3E");
}

.icon-execute::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M12 2l3.09 6.26L22 9l-5 4.74L18.18 22 12 18.77 5.82 22 7 13.74 2 9l6.91-.74L12 2z'/%3E%3C/svg%3E");
}

.icon-risk::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z'/%3E%3C/svg%3E");
}

.icon-security::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4z'/%3E%3C/svg%3E");
}

.icon-transfer::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M4 6h16v2H4V6zm0 4h16v2H4v-2zm0 4h16v2H4v-2zm0 4h16v2H4v-2z'/%3E%3C/svg%3E");
}

.icon-alert::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z'/%3E%3C/svg%3E");
}

.icon-marketplace::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M7 18c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zM1 2v2h2l3.6 7.59-1.35 2.45c-.16.28-.25.61-.25.96 0 1.1.9 2 2 2h12v-2H7.42c-.14 0-.25-.11-.25-.25l.03-.12L8.1 13h7.45c.75 0 1.41-.41 1.75-1.03L21.7 4H5.21l-.94-2H1zm16 16c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z'/%3E%3C/svg%3E");
}

.icon-filter::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M10 18h4v-2h-4v2zM3 6v2h18V6H3zm3 7h12v-2H6v2z'/%3E%3C/svg%3E");
}