:root {
    --bg-color: url();
    /* 背景颜色，初始为白色，白天模式 */

    --text-color: #ffffff;
    /* 文字颜色，初始为黑色 */

    --border-color: #999;
    --flim-color: #696969;
    /* 边框颜色示例 */

    --button-bg-color: #ffffff;
    /* 按钮背景色 */

    --button-text-color: #000000;
    /* 按钮文字颜色 */

    --sidebar-bg-color: rgb(0 0 0 / 48%);
    /* 侧边栏背景色 */

    --sidebar-text-color: #ffffff;
    /* 侧边栏文字颜色 */

    --tab-bg-color: #ffffff00;
    /* 选项卡背景色示例 */

    --table-border-color: #393939;
    /* 表格边框颜色 */

}

@media (min-width: 768px) {
    /*
body.dark-mode {
    --bg-color: url();
    /* 暗色背景颜色 *
    --text-color: #ffffff;
    /* 白色文字，在暗色背景上更清晰 *
    --border-color: #444;
    /* 较深的边框颜色 *
    --button-bg-color: #333;
    /* 较深的按钮背景色 *
    --button-text-color: #ffffff;
    /* 白色按钮文字 *
    --sidebar-bg-color: #181818;
    /* 加深的侧边栏背景色 *
    --sidebar-text-color: #ffffff;
    --flim-color: #2f2f2f;
    /* 白色侧边栏文字 *
    --tab-bg-color: #ffffff00;
    /* 较深的选项卡背景色 *
    --table-border-color: #333;
    /* 较深的表格边框颜色 *
}
*/

    /* 整体页面的样式设置，包括字体、文本对齐、背景颜色等 */
    body {
        font-family: Arial, sans-serif;
        font-size: 30px;
        background: var(--bg-color);
        background-size: 100vw 100vh;
        background-position: center;
        /* 让图片居中显示 */
        padding: 0;

    }

    #ww_9c4a364e2d4ba {
        position: fixed;
        /* 设置为固定定位，使其脱离文档流，可悬浮 */
        bottom: 0;
        /* 距离页面底部的距离为0，放置在底部 */
        left: 0;
        /* 可以根据需求调整水平位置，这里先设置在最左边 */
        z-index: 2;
        /* 设置一个较高的z-index值，确保它在最上层显示，可根据实际页面已有元素的z-index情况调整该值 */
        width: 100%;
        /* 可以根据需求调整宽度，比如设置固定宽度等，这里先设置占满页面宽度 */
        text-align: center;
        /* 文本内容居中显示，可按需调整 */
        padding: 10px 0;
        /* 上下内边距示例，可根据需要调整 */
    }

    #fullscreen-bg {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        z-index: -1;
    }

    /* 提示框整体样式 */
    .announcement-box {
        position: fixed;
        left: 0;
        top: 0;
        width: 43.33%;
        height: 100%;
        background-color: var(--sidebar-text-color);
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
        display: none;
        overflow-y: auto;
        z-index: 9999;
    }

    /* 提示框头部样式，包含关闭按钮 */
    .announcement-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid var(--border-color);
        height: 2em;
    }



    /* 数据展示列表样式（竖排） */
    .data-display-list {
        list-style-type: none;
        padding: 0;
        text-align: left;
        margin: 10px 0 5px 0;
    }

    /* 数据项样式 */
    .data-display-list li {
        margin: 10px 0 5px 0;
        padding: 8px 16px;
        text-align: left;
    }


    /* 时钟容器的样式，包括定位、大小等 */
    .single-demo {
        margin: 50px auto;
        padding: 30px;
        width: 600px;
        text-align: center;
        border: solid 1px var(--border-color);
    }


    .flip {
        display: inline-block;
        position: relative;
        width: 110px;
        height: 180px;
        line-height: 180px;
        border: solid 2px #ffffff29;
        border-radius: 18px;
        background-color: var(--flim-color);
        color: var(--text-color);
        font-size: 132px;
        box-shadow: 0 0 6px rgba(0, 0, 0, .5);
        text-align: center;
        font-family: "Helvetica Neue"
    }

    .flip .digital:before,
    .flip .digital:after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        background-color: var(--flim-color);
        color: var(--text-color);
        overflow: hidden;
        box-sizing: border-box;
    }

    .flip .digital:before {
        top: 0;
        bottom: 50%;
        border-radius: 10px 10px 0 0;
        border-bottom: solid 1px var(--text-color);
    }

    .flip .digital:after {
        top: 50%;
        bottom: 0;
        border-radius: 0 0 10px 10px;
        line-height: 0;
    }

    /*向下翻*/
    .flip.down .front:before {
        z-index: 3;
    }

    .flip.down .back:after {
        z-index: 2;
        transform-origin: 50% 0%;
        transform: perspective(160px) rotateX(180deg);
    }

    .flip.down .front:after,
    .flip.down .back:before {
        z-index: 1;
    }

    .flip.down.go .front:before {
        transform-origin: 50% 100%;
        animation: frontFlipDown 0.61s ease-in-out both;
        box-shadow: 0 -2px 6px var(--text-color);
        backface-visibility: hidden;
    }

    .flip.down.go .back:after {
        animation: backFlipDown 0.61s ease-in-out both;
    }

    /* 添加向下翻转的动画关键帧 */
    @keyframes frontFlipDown {
        0% {
            transform: perspective(160px) rotateX(0deg);
        }

        100% {
            transform: perspective(160px) rotateX(-180deg);
        }
    }

    @keyframes backFlipDown {
        0% {
            transform: perspective(160px) rotateX(180deg);
        }

        100% {
            transform: perspective(160px) rotateX(0deg);
        }
    }

    .clock {
        text-align: center;
        margin: 2.5vw;
    }

    .clock em {
        display: inline-block;
        line-height: 182px;
        font-size: 132px;
        font-style: normal;
        vertical-align: top;
        color: #ffffff;
    }


    .flip .number0:before,
    .flip .number0:after {
        content: "0";
    }

    .flip .number1:before,
    .flip .number1:after {
        content: "1";
    }

    .flip .number2:before,
    .flip .number2:after {
        content: "2";
    }

    .flip .number3:before,
    .flip .number3:after {
        content: "3";
    }

    .flip .number4:before,
    .flip .number4:after {
        content: "4";
    }

    .flip .number5:before,
    .flip .number5:after {
        content: "5";
    }

    .flip .number6:before,
    .flip .number6:after {
        content: "6";
    }

    .flip .number7:before,
    .flip .number7:after {
        content: "7";
    }

    .flip .number8:before,
    .flip .number8:after {
        content: "8";
    }

    .flip .number9:before,
    .flip .number9:after {
        content: "9";
    }



    /* 考务操作部分的样式，包括宽度、内边距、边框、布局等 */
    .exam-operations {
        position: absolute;
        /* 或者 position: fixed; 根据需求选择，绝对定位相对父元素定位，固定定位相对视口定位 */
        top: 0;
        /* 距离顶部的距离，可根据实际需求调整 */
        right: 0;
        /* 靠右侧，可结合 margin-right 来精准控制距离右边距的距离 */
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        justify-content: flex-start;
    }

    .elegant-button {
        gap: 20px;
        margin-right: 15px;
        width: 130px;
        border: none;
        padding: 8px;
        margin-top: 10px;
        font-weight: 1000;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
        border-radius: 8px;
        box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
        transition: background-color 0.3s ease;
        background-color: var(--tab-bg-color);
        color: var(--sidebar-text-color);
        position: relative;
        /* 如果需要基于.exam-operations 容器内部进行相对定位微调，可以添加此属性 */
    }



    .butbottom {
        bottom: 25px;
    }

    /* 鼠标悬停在优雅按钮上的样式变化 */
    .elegant-button:hover {
        background-color: #45a049;
    }

    /* 内容容器的样式，包括布局等 */
    #content {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        margin-top: 20px;
        color: var(--text-color);
    }



    /* 侧边栏整体样式 */
    .sidebar {
        background-color: var(--sidebar-bg-color);
        color: var(--tab-bg-color);
        width: 3vw;
        font-weight: 1000;
        /* 使用视口宽度单位vw，设置相对宽度，在屏幕放大缩小时有更好的适应性 */

        /* 修改文本颜色，使其与白色背景有明显区分，确保可见性 */
        transition: all 0.3s ease;
        position: fixed;
        top: 0;
        z-index: 100;
        height: 100vh;
        box-shadow: -2px 0 5px rgba(0, 0, 0, 0.2);
        /* 右侧阴影效果 */
        overflow: hidden;
        /* 防止折叠展开时内容溢出 */
        box-sizing: border-box;
        /* 将盒模型设置为border-box，确保宽度包含边框和内边距，计算更准确 */
    }

    /* 侧边栏的位置，右 */
    .sright {
        right: 0;
    }

    /* 侧边栏的位置，左 */
    .sleft {
        left: 0;
    }

    /* 侧边栏菜单列表样式 */
    .sidebar-menu {
        list-style-type: none;
        padding: 0;
        margin: 0;
        font-size: 1rem;
        /* 使用相对单位rem，基于根元素字体大小设置，更具通用性和稳定性 */
    }

    /* 侧边栏菜单选项样式 */
    .sidebar-menu li {
        border-bottom: 1px solid var(--text-color);
        display: block;
        padding: 15px;
        text-decoration: none;
        color: var(--text-color);
        transition: all 0.3s ease;
        box-sizing: border-box;
        /* 确保计算元素尺寸时包含内边距和边框 */
    }

    .sidebar-menu li a {
        color: var(--text-color);
        text-decoration: none;
        mix-blend-mode: difference
    }

    .sidebar.collapsed.sidebar-menu li a {
        text-align: center;
        padding: 15px 5px;
        box-sizing: border-box;
        /* 同样确保尺寸计算准确 */
    }


    .tab-container {
        width: 80%;
        margin: 0 auto;
        border-radius: 5px;
        position: relative;
        z-index: 1;
        margin-top: 140px;
    }

    .tab-buttons {
        display: flex;
        background-color: var(--bg-color);
        border-bottom: 1px solid var(--text-color);
    }

    .tab-button {
        padding: 10px 20px;
        border: none;
        background-color: inherit;
        cursor: pointer;
    }

    .tab-button:hover {
        background-color: var(--text-color);
    }

    .tab-button.active {
        background-color: var(--bg-color);
        border-bottom: 2px solid #000;
    }

    .tab-content {
        padding: 20px;
    }

    table {
        width: 100%;
        border-collapse: collapse;
        position: relative;
        z-index: 1;

        color: var(--text-color);
        background-color: rgba(0, 0, 0, 0.5);
        /* 这里设置背景为白色且透明度 0.5 */
        box-shadow: -2px 0 5px rgba(0, 0, 0, 0.2);
        font-weight: bolder;
        font-size: 1em
    }

    table thead th {
        flex: 1;
    }

    table tbody {
        display: block;
        /* 保留可滚动区域高度和滚动条设置 */
        height: 10em;
        overflow-y: scroll;
    }

    table tr {
        display: flex;
    }

    th,

    td {
        border-top: 1px solid var(--text-color);
        border-bottom: 1px solid var(--text-color);
        border-left: none;
        border-right: none;
        padding: 8px;
        text-align: center;
        /* 新增以下属性，确保表头和表体边框无缝对接 */
        border-collapse: collapse;
    }

    /* 对话框样式 */
    dialog {
        border: 1px solid var(--text-color);
        border-radius: 5px;
        box-shadow: 0 0 10px var(--text-color);
        padding: 20px;
        background-color: var(--bg-color);
        display: none;
        /* 初始隐藏对话框 */
    }

    /* 关闭按钮样式 */
    .close-button {
        position: absolute;
        top: 10px;
        right: 10px;
        cursor: pointer;
        font-size: 20px;
        color: var(--text-color);
    }

    .close-button:hover {
        color: var(--text-color);
    }

    footer {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;

        padding: 0;
        text-align: center;
        font-size: 8px;

        border-top: 1px solid var(--text-color);
        background-color: var(--bg-color);
        color: var(--text-color);
    }



    /* 确保翻转动画正常工作 */
    @keyframes frontFlipDown {
        0% {
            transform: perspective(160px) rotateX(0deg);
        }

        100% {
            transform: perspective(160px) rotateX(-180deg);
        }
    }

    @keyframes backFlipDown {
        0% {
            transform: perspective(160px) rotateX(180deg);
        }

        100% {
            transform: perspective(160px) rotateX(0deg);
        }
    }

    footer p {
        line-height: 10px;
        text-align: center
    }

    footer p a img {
        height: 8px;
    }





    /* ... existing code ... */


    .clock-container {
        position: relative;
        width: 100%;
        height: 120px;
        /* 仅容纳时钟显示 */
        display: flex;
        /* 使用flex布局方便子元素的对齐等操作 */
        justify-content: center;
        /* 水平向居中子元素 */


    }



    .clock {
        margin-top: 40px;
        margin: 0 auto;
        /* 实现水平居中 */
        display: block;
        /* 确保作为块级元素独占一行显示 */
        max-width: 100%;
        /* 限制最大宽度，使其自适应父容器宽度变化 */
        text-align: center;
        /* 内部内容水平居中 */

    }

    .clock.hidden,
    .countdown.hidden {
        opacity: 0;
    }


    .clock-status {
        text-align: center;
        font-size: 24px;
        color: var(--text-color);
        font-weight: bold;
        margin: 0px auto;
        /* 实现水平居中 */
        display: block;
        /* 确保作为块级元素独占一行显示 */
        max-width: 100%;
        /* 限制最大宽度，使其自适应父容器宽度变化 */
        text-align: center;
        /* 内部内容水平居中 */

    }


    /* 表单样式 */
    .custom-form {
        padding: 20px;
    }

    .form-group {
        margin-bottom: 15px;
        text-align: left;
    }

    .form-group label {
        display: block;
        margin-bottom: 5px;
        font-weight: bold;
    }

    /* Sweet Alert 自定义样式 */
    .custom-swal-popup {
        background: rgba(255, 255, 255, 0.95) !important;
        border-radius: 8px !important;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important;
        padding: 10px !important;
        width: 280px !important;
        position: fixed !important;
        bottom: 20px !important;
        right: 20px !important;
        margin: 0 !important;
    }

    /* 标题样式 */
    .swal2-title {
        color: #333 !important;
        font-size: 10px !important;
        font-weight: 200 !important;
        margin-bottom: 8px !important;
        padding: 0 !important;
        text-align: left !important;
    }

    /* 下拉菜单和输入框共同样式 */
    .swal2-select,
    .swal2-input {
        width: 100% !important;
        padding: 5px !important;
        border: 1px solid #e0e0e0 !important;
        border-radius: 4px !important;
        font-size: 12px !important;
        color: #333 !important;
        margin: 2px 0 6px 0 !important;
        height: 28px !important;
    }

    /* 按钮容器样式 */
    .swal2-actions {
        margin: 6px 0 0 0 !important;
        /* 减小顶部边距 */
        justify-content: flex-end !important;
        gap: 6px !important;
    }

    /* 按钮样式 */
    .swal2-confirm,
    .swal2-cancel {
        padding: 4px 8px !important;
        font-size: 12px !important;
        min-width: 45px !important;
        height: 24px !important;
        margin: 0 !important;
    }

    /* 表单组样式 */
    .form-group {
        margin-bottom: 6px !important;
    }

    .form-group label {
        font-size: 12px !important;
        margin-bottom: 2px !important;
        color: #666 !important;
    }

    /* 错误提示样式 */
    .swal2-validation-message {
        padding: 3px 6px !important;
        margin-top: 3px !important;
        font-size: 11px !important;
    }
}

@media (max-width: 767px) {
    /* 针对移动端的样式 */


    body {
        font-size: 16px;
        /* 调整字体大小 */
        padding: 0;
        background-color: var(--bg-color);
        /* 设置背景颜色 */
    }

    .clock {
        font-size: 24px;
        /* 调整时钟字体大小 */
        margin: 20px auto;
        /* 实现水平居中 */
        text-align: center;
        /* 内部内容水平居中 */
    }

    #fullscreen-bg {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: var(--bg-color);
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        z-index: -1;
    }

    .clock em {
        font-size: 36px;
        /* 调整时钟数字字体大小 */
        color: var(--text-color);
        /* 设置时钟数字颜色 */
    }

    .countdown {
        font-size: 20px;
        /* 调整倒计时字体大小 */
        color: var(--text-color);
        /* 设置倒计时颜色 */
        margin: 10px 0;
        /* 添加上下间距 */
    }

    .elegant-button {
        width: 100%;
        /* 按钮宽度适应屏幕 */
        margin-right: 0;
        /* 移除右边距 */
        background-color: var(--button-bg-color);
        /* 设置按钮背景颜色 */
        color: var(--button-text-color);
        /* 设置按钮文字颜色 */
        border-radius: 5px;
        /* 添加圆角 */
        padding: 10px;
        /* 添加内边距 */
        transition: background-color 0.3s ease;
        /* 添加过渡效果 */
        font-size: 18px;
        /* 调整按钮字体大小 */
    }

    .elegant-button:hover {
        background-color: #0056b3;
        /* 悬停时的背景颜色 */
    }

    .tab-container {
        width: 100%;
        /* 选项卡容器宽度适应屏幕 */
        margin-top: 20px;
        /* 添加顶部间距 */
    }

    .tab-buttons {
        display: flex;
        /* 使用flex布局 */
        background-color: var(--bg-color);
        /* 设置背景颜色 */
        border-bottom: 1px solid var(--text-color);
        /* 设置底部边框 */
    }

    .tab-button {
        padding: 10px;
        /* 调整内边距 */
        border: none;
        /* 移除边框 */
        background-color: inherit;
        /* 继承背景颜色 */
        cursor: pointer;
        /* 设置鼠标指针 */
        font-size: 16px;
        /* 调整按钮字体大小 */
        flex: 1;
        /* 使按钮均匀分布 */
        text-align: center;
        /* 文本居中 */
    }

    .tab-button:hover {
        background-color: var(--text-color);
        /* 悬停时的背景颜色 */
        color: var(--bg-color);
        /* 悬停时的文字颜色 */
    }

    table {
        width: 100%;
        /* 表格宽度适应屏幕 */
        border-collapse: collapse;
        /* 合并边框 */
        font-size: 14px;
        /* 调整表格字体大小 */
    }

    th,
    td {
        border-top: 1px solid var(--text-color);
        /* 设置顶部边框 */
        border-bottom: 1px solid var(--text-color);
        /* 设置底部边框 */
        padding: 8px;
        /* 添加内边距 */
        text-align: center;
        /* 文本居中 */
    }

    footer {
        font-size: 10px;
        /* 调整页脚字体大小 */
        background-color: var(--bg-color);
        /* 设置页脚背景颜色 */
        color: var(--text-color);
        /* 设置页脚文字颜色 */
        padding: 10px;
        /* 添加内边距 */
        text-align: center;
        /* 文本居中 */
        position: relative;
        /* 使其相对定位 */
        bottom: 0;
        /* 固定在底部 */
        width: 100%;
        /* 宽度适应屏幕 */
    }

    /* 其他样式根据需要进行调整 */
    /* ... existing code ... */

    .flip {
        display: inline-block;
        /* 确保flim元素是内联块元素 */
        width: 50px;
        /* 设置宽度 */
        height: 100px;
        /* 设置高度 */
        position: relative;
        /* 使其相对定位 */
        overflow: hidden;
        /* 隐藏溢出内容 */
    }

    .digital {
        position: absolute;
        /* 绝对定位 */
        width: 100%;
        /* 宽度适应父元素 */
        height: 100%;
        /* 高度适应父元素 */
        text-align: center;
        /* 文本居中 */
        font-size: 36px;
        /* 调整数字字体大小 */
        color: var(--text-color);
        /* 设置数字颜色 */
        transition: transform 0.5s;
        /* 添加过渡效果 */
    }

    /* 其他样式根据需要进行调整 */
    /* ... existing code ... */
}