body {
    display: flex;
    height: 100%;
    min-height: 100vh;
    width: 100%;
    background: var(--main-bg-color, linear-gradient(50deg, #a2d1ff, #ffffff));
    overflow-x: hidden;
    justify-content: center;
    color: var(--main-text-color, #000000);

}

.iconContainer {
    width: 100%;
    gap: 8px;
    height: 60px;
    display: flex;
    align-items: center;
    /* overflow-x: scroll;*/
    margin-top: 20px;

}

.iconContainer::-webkit-scrollbar {
    display: none;
}



.iconItem {
    width: 47px;
    height: 40px;
    box-sizing: border-box;
    background: var(--icon-bg-color, rgba(249, 250, 251, 0.6));
    border-radius: 7px;
    display: flex;
    gap: 5px;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.switch {
    width: 55px;
}

.iconTip {
    white-space: nowrap;
    display: none;
}





.iconItem:nth-child(1):hover {
    width: 95px;
    transform: translateY(-2px);
    background: var(--icon-1-hover-color, rgb(137, 172, 255));
}

.iconItem:nth-child(2):hover {
    width: 80px;
    transform: translateY(-2px);
    background: var(--icon-2-hover-color, rgb(251, 173, 255));
}

.iconItem:nth-child(3):hover {
    width: 80px;
    transform: translateY(-2px);
    background: var(--icon-3-hover-color, rgb(169, 255, 248));
}

.iconItem:nth-child(4):hover {
    width: 80px;
    transform: translateY(-2px);
    background: var(--icon-4-hover-color, rgb(255, 167, 161));
}

.iconItem:nth-child(5):hover {
    width: 80px;
    transform: translateY(-2px);
    background: var(--icon-5-hover-color, rgb(255, 183, 156));
}

.iconItem:hover .iconTip {
    display: block;
}




.tc {
    position: fixed;
    display: flex;
    visibility: hidden;
    width: 100vw;
    height: 100vh;

    background: rgba(255, 255, 255, 0);
    z-index: 99999;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.tc-main {
    z-index: 100000;
    width: 80%;
    max-width: 300px;
    /* 根据需要调整最大宽度 */
    min-height: 200px;
    background-color: #ffffff;
    border-radius: 12px;
    opacity: 0;
    display: flex;
    transition: all 0.15s linear;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transform: translateY(20%);
}

.tc-img {
    width: 100%;
    height: 100%;
}

.tc.active {
    visibility: visible;
}

.tc-main.active {
    opacity: 1;
    transform: translateY(0);
}

.tc-close {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 40px;
    width: 40px;
    background-color: var(--project-item-bg-color, rgba(249, 250, 251, 0.6));
    margin-top: 30px;
    border-radius: 50%;
}