.icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1em;
    height: 1em;
    font-size: 1rem;
    vertical-align: -0.125em;
    flex-shrink: 0;
    line-height: 1;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.icon.fill {
    fill: currentColor;
    stroke: none;
}

.icon-sm  { font-size: 0.8125rem; }
.icon-md  { font-size: 1rem; }
.icon-lg  { font-size: 1.25rem; }
.icon-xl  { font-size: 1.75rem; }
.icon-2xl { font-size: 2.25rem; }

.icon-primary   { color: var(--primary-color, #1e40af);   stroke: var(--primary-color, #1e40af);   }
.icon-accent    { color: var(--accent-color, #f59e0b);    stroke: var(--accent-color, #f59e0b);    }
.icon-success   { color: var(--success-color, #10b981);   stroke: var(--success-color, #10b981);   }
.icon-danger    { color: var(--danger-color, #ef4444);    stroke: var(--danger-color, #ef4444);    }
.icon-white     { color: #ffffff; stroke: #ffffff; }
.icon-muted     { color: var(--text-secondary, #6b7280);  stroke: var(--text-secondary, #6b7280);  }
.icon-light     { color: var(--text-light, #9ca3af);      stroke: var(--text-light, #9ca3af);      }

.top-bar .icon-heart   { color: #ef4444; stroke: #ef4444; }
.top-bar .icon-weixin  { color: #07c160; stroke: #07c160; }

.icon-spin {
    animation: icon-spin 2s linear infinite;
}
@keyframes icon-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

.icon-heart-pulse {
    animation: icon-heartbeat 1.5s ease-in-out infinite;
}
@keyframes icon-heartbeat {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.15); }
}

.btn .icon { vertical-align: -0.15em; }

@media (max-width: 768px) {
    .icon-2xl { font-size: 1.5rem; }
    .icon-xl  { font-size: 1.25rem; }
}