@layer utilities {
    .content-auto {
        content-visibility: auto;
    }
    .card-hover {
        transition-property: all;
        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
        transition-duration: 300ms;
    }
    .card-hover:hover {
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
        box-shadow: 0 10px 15px -3px rgba(22, 93, 255, 0.1), 0 4px 6px -2px rgba(22, 93, 255, 0.05);
        transform: translateY(-1px);
    }
    .card-shadow {
        box-shadow: 0 10px 25px -5px rgba(22, 93, 255, 0.1), 0 8px 10px -6px rgba(22, 93, 255, 0.05);
    }
    .gradient-scale {
        background: linear-gradient(90deg, #F53F3F 0%, #FF7D00 30%, #FACC15 50%, #00B578 70%, #36BFFA 100%);
    }
    .gradient-border {
        position: relative;
        border-radius: 0.75rem;
        z-index: 0;
    }
    .gradient-border::before {
        content: "";
        position: absolute;
        inset: -2px;
        border-radius: 0.85rem;
        background: linear-gradient(320deg, #183d91, #b7d500, #0047b7);
        z-index: -1;
        background-size: 300%;
    }
    @keyframes rotate {
        0% { background-position: 0% 50%; }
        50% { background-position: 100% 50%; }
        100% { background-position: 0% 50%; }
    }
    .animate-pulse-slow {
        animation: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    }
    .chart-container {
        position: relative;
        width: 100%;
        height: 100%;
    }
    #bullishChart,
    #bearishChart,
    #neutralChart {
        position: relative;
        z-index: 1;
        width: 100% !important;
        height: 100% !important;
    }
    
    /* Tooltip样式 */
    .tooltip-container {
        position: relative;
        display: inline-block;
        margin-left: 8px; /* 增加与标题的间距至12px */
    }
    
    .tooltip-container::after {
        content: attr(data-tooltip);
        position: absolute;
        top: 100%; /* 显示在图标的下方，避免被标题遮挡 */
        left: 100px;
        transform: translateX(-50%);
        margin-top: 8px; /* 增加与图标之间的垂直间距 */
        background-color: #1f2937;
        color: #e5e7eb;
        padding: 8px 12px;
        border-radius: 6px;
        font-size: 14px; /* 增大字体大小提高可读性 */
        width: 300px; /* 固定宽度 */
        white-space: normal; /* 允许自动换行 */
        word-wrap: break-word; /* 长单词换行 */
        text-align: left;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.2s ease, visibility 0.2s ease;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
        z-index: 1000;
        pointer-events: none;
    }
    
    .tooltip-container::before {
        content: '';
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translateX(-50%);
        margin-top: 3px; /* 调整小三角的位置 */
        border: 5px solid transparent;
        border-bottom-color: #1f2937; /* 调整三角方向 */
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.2s ease, visibility 0.2s ease;
        z-index: 1000;
        pointer-events: none;
    }
    
    .tooltip-container:hover::after,
    .tooltip-container:hover::before {
        opacity: 1;
        visibility: visible;
    }
}