.aibutton[data-state="blue"] {
    background-color: #0078D7;
    border: 1px solid #0078D7;
    color: white;
    cursor: pointer;
}

    .aibutton[data-state="blue"]:hover {
        background-color: #106EBE;
        border-color: #106EBE;
    }

    .aibutton[data-state="blue"]:active {
        background-color: #005A9E;
        border-color: #005A9E;
    }

.aibutton[data-state="gray"] {
    background-color: #F3F3F3;
    border: 1px solid #8E8E8E;
    color: #000000;
    cursor: pointer;
}

    .aibutton[data-state="gray"]:hover {
        background-color: #E5E5E5;
        border-color: #707070;
    }

    .aibutton[data-state="gray"]:active {
        background-color: #D5D5D5;
        border-color: #505050;
    }

.aibutton[data-state="green"] {
    background-color: #107C10;
    border: 1px solid #107C10;
    color: white;
    cursor: pointer;
}

    .aibutton[data-state="green"]:hover {
        background-color: #0E6E0E;
        border-color: #0E6E0E;
    }

    .aibutton[data-state="green"]:active {
        background-color: #0B5B0B;
        border-color: #0B5B0B;
    }

.aibutton[data-state="red"] {
    background-color: #D83B01;
    border: 1px solid #D83B01;
    color: white;
    cursor: pointer;
}

    .aibutton[data-state="red"]:hover {
        background-color: #C23501;
        border-color: #C23501;
    }

    .aibutton[data-state="red"]:active {
        background-color: #A52C01;
        border-color: #A52C01;
    }

.aibutton[data-state="yellow"] {
    background-color: #FFB900;
    border: 1px solid #FFB900;
    color: black;
    cursor: pointer;
}

    .aibutton[data-state="yellow"]:hover {
        background-color: #F2A712;
        border-color: #F2A712;
    }

    .aibutton[data-state="yellow"]:active {
        background-color: #E59400;
        border-color: #E59400;
    }

.aibutton[data-state="disabled"] {
    background-color: #F3F3F3;
    border: 1px solid #C6C6C6;
    color: #A0A0A0;
    cursor: not-allowed;
}


/* 浅色模式 (Light) */
.win-light {
    --win-bg: #F3F3F3; /* 窗口背景 */
    --win-titlebar: #0078D7; /* 标题栏蓝色 */
    --win-border: #D6D6D6; /* 窗口边框 */
    --win-text: #000000; /* 文字颜色 */
    --win-shadow: 0 2px 10px rgba(0, 0, 0, 0.15); /* 窗口阴影 */
    --win-shadow-active: 0 4px 12px rgba(0, 0, 0, 0.2); /* 活动窗口阴影 */
    --win-controls-bg-hover: #E5E5E5; /* 控制按钮悬停 */
    --win-controls-bg-active: #CCCCCC; /* 控制按钮按下 */
}

/* 深色模式 (Dark) */
.win-dark {
    --win-bg: #202020; /* 窗口背景 */
    --win-titlebar: #005499; /* 标题栏深蓝 */
    --win-border: #444444; /* 窗口边框 */
    --win-text: #FFFFFF; /* 文字颜色 */
    --win-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); /* 深色阴影更强 */
    --win-shadow-active: 0 4px 12px rgba(0, 0, 0, 0.4);
    --win-controls-bg-hover: #3A3A3A;
    --win-controls-bg-active: #5E5E5E;
}
/* 主窗口容器（带阴影） */
.win-frame {
    border: 1px solid var(--win-border);
    background-color: var(--win-bg);
    color: var(--win-text);
    box-shadow: var(--win-shadow); /* 默认阴影 */
    border-radius: 2px; /* Win10 轻微圆角 */
}

    /* 活动窗口（更明显的阴影） */
    .win-frame.active {
        box-shadow: var(--win-shadow-active);
    }

/* 标题栏（无阴影，与窗口一体） */
.win-titlebar {
    background-color: var(--win-titlebar);
    border-bottom: 1px solid var(--win-border);
}
.win-control-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    transition: background 0.1s;
}

    /* 悬停时轻微内阴影（模拟凹陷效果） */
    .win-control-btn:hover {
        background-color: var(--win-controls-bg-hover);
        box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1);
    }

    /* 按下时更深的凹陷效果 */
    .win-control-btn:active {
        background-color: var(--win-controls-bg-active);
        box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.2);
    }

/* 关闭按钮特殊红色悬停 */
.win-close-btn:hover {
    background-color: #E81123 !important;
}
/* 输入框聚焦时浅蓝色外发光 */
.win-input {
    border: 1px solid #A0A0A0;
    background-color: #FFFFFF;
}

    .win-input:focus {
        border-color: #0078D7;
        outline: none;
        box-shadow: 0 0 0 2px rgba(0, 120, 215, 0.3); /* Win10 风格聚焦光环 */
    }

/* 分隔线 */
.win-separator {
    border-top: 1px solid var(--win-border);
}



/*消息弹窗系统css*/
.message-container {
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    z-index: 999999;
}

.message-box {
    min-width: 100px;
    padding: 10px 20px;
    margin-top: 10px;
    border-radius: 5px;
    color: white;
    cursor: pointer;
    animation: slideIn 0.5s ease-out, fadeIn 0.5s ease-out;
    transition: opacity 0.5s ease-out, transform 0.5s ease-out, filter 0.2s ease-out;
    opacity: 1;
    transform: translateY(0);
}

    .message-box.blue {
        background-color: #3498db;
    }

    .message-box.red {
        background-color: #e74c3c;
    }

    .message-box.cs {
        background-color: #ff992b;
    }

    .message-box.green {
        background-color: #2ecc71;
    }

    .message-box.yellow {
        background-color: #f1c40f;
    }

    .message-box.fade-out {
        opacity: 0;
        transform: translateY(-20px);
    }
    /* Hover effect: Darken the color by 10% */
    .message-box:hover {
        filter: brightness(90%);
    }

@keyframes slideIn {
    from {
        transform: translateX(100%);
    }

    to {
        transform: translateX(0);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.ZDYWindow_CloseLayer {
    width: 100vw;
    height: 100vh;
    top: 0px;
    left: 0px;
    position: absolute;
    background-color: #6a6a6a2e;
    display: flex;
    align-items: center; /* 垂直居中 */
    justify-content: center; /* 水平居中（可选） */
    z-index: 1000;
}

.ZDYWindow {
    background-color: #ffffff;
    border-radius: 2px;
    box-shadow: 0 0 15px #8f8f8f;
}

.ZDYWindow_Head {
    height: 36px;
    position: relative;
    border-bottom: 1px solid #6a6a6a2e;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

    .ZDYWindow_Head > div {
        display: inline-block;
        height: 36px;
        line-height: 36px;
    }

        .ZDYWindow_Head > div[name="Title"] {
            padding-left: 10px;
        }

        .ZDYWindow_Head > div[name="ColseButton"] {
            position: absolute;
            right: 0px;
            width: 42px;
            text-align: center;
            border-radius: 2px;
        }

            .ZDYWindow_Head > div[name="ColseButton"]:hover {
                background-color: #e74c3c;
                color: #fff;
            }

            .ZDYWindow_Head > div[name="ColseButton"]:active {
                background-color: #bd1e0d;
                color: #fff;
            }

.ZDYWindow_Body {
    height: calc(100% - 36px - 76px);
    position: relative;
    overflow: auto;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.ZDYWindow_Button {
    height: 76px;
    position: relative;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    text-align: right;
    padding: 20px;
}

    .ZDYWindow_Button > div {
        height: 36px;
        min-width: 64px;
        text-align: center;
        padding: 5px 10px;
        border-radius: 3px;
        width: max-content;
        display: inline-block;
    }

.lansebutton {
    background-color: #49a6ff;
    color: #ffffff;
}

    .lansebutton:hover {
        background-color: #3d8cd8;
        color: #ffffff;
    }

    .lansebutton:active {
        background-color: #1f62a3;
        color: #ffffff;
    }


.ZDYWindow_Body[name="WebCSSelectWindow"] {
    display: flex;
    flex-wrap: wrap;
    padding: 20px;
    row-gap: 10px;
    flex-direction: row;
    align-content: flex-start;
}

    .ZDYWindow_Body[name="WebCSSelectWindow"] > div {
        padding: 5px 30px;
        height: 36px;
        line-height: 22px;
        min-width: 20px;
        width: max-content;
        text-align: center;
        border-radius: 4px;
        border: 2px solid #49a6ff;
        background-color: #ffffff;
        color: #49a6ff;
        margin: 5px 10px;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        cursor: pointer;
    }

        .ZDYWindow_Body[name="WebCSSelectWindow"] > div[state="1"] {
            background-color: #3b95eb;
            color: #fff;
        }

            .ZDYWindow_Body[name="WebCSSelectWindow"] > div[state="1"]::after {
                content: " √";
            }

        .ZDYWindow_Body[name="WebCSSelectWindow"] > div[state="0"]::after {
            content: " ✕";
        }


        .ZDYWindow_Body[name="WebCSSelectWindow"] > div:hover {
            background-color: #49a6ff;
            color: #fff;
        }

        .ZDYWindow_Body[name="WebCSSelectWindow"] > div:active {
            background-color: #337dc3;
            color: #fff;
        }

/*自定义提示框*/
.custom-tooltip-container {
    position: fixed;
    z-index: 9999;
    pointer-events: none;
    width: max-content;
    padding: 4px 10px;
    color: #fff;
    border-radius: 4px;
    font-size: 14px;
    line-height: 1.6;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.30);
    opacity: 0;
    transition: opacity 0.2s;
}

    .custom-tooltip-container.show {
        opacity: 1;
    }

    .custom-tooltip-container::after {
        content: '';
        position: absolute;
        width: 0;
        height: 0;
        border: 5px solid transparent;
        left: -10px;
        top: 50%;
        transform: translateY(-50%);
    }

    /* 不同状态的提示框颜色 */
    .custom-tooltip-container.state-0 {
        background-color: #d1ecff; /* 浅蓝色 - 成功 */
        color: #1976D2;
    }

        .custom-tooltip-container.state-0::after {
            border-right-color: #d1ecff;
        }

    .custom-tooltip-container.state-1 {
        background-color: #ffc2c2; /* 浅红色 - 失败 */
        color: #cc0000;
    }

        .custom-tooltip-container.state-1::after {
            border-right-color: #ffc2c2;
        }

    .custom-tooltip-container.state-2 {
        background-color: #ffe1b6; /* 橙色 - 通知 */
        color: #b17200;
    }

        .custom-tooltip-container.state-2::after {
            border-right-color: #ffe1b6;
        }

    .custom-tooltip-container.state-3 {
        background-color: #b3ffb3; /* 浅绿色 */
        color: #009900;
    }

        .custom-tooltip-container.state-3::after {
            border-right-color: #b3ffb3;
        }

    .custom-tooltip-container.state-4 {
        background-color: #e6b3ff; /* 浅紫色 */
        color: #6600cc;
    }

        .custom-tooltip-container.state-4::after {
            border-right-color: #e6b3ff;
        }