body {

            background: linear-gradient(135deg, #f4f6fb, #e9f3ff);

            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

            min-height: 100vh;

            display: none; /* 默认隐藏，登录验证通过后显示 */

        }

        body.authenticated {

            display: block; /* 验证通过后显示 */

        }

        .container { max-width: 1400px; margin-top: 24px; margin-bottom: 32px; }

        .card { box-shadow: 0 0 12px rgba(15, 23, 42, 0.08); border-radius: 12px; }

        .page-header {

            padding: 16px 20px;

            border-radius: 12px;

            background: radial-gradient(circle at top left, #0d6efd, #0b5ed7);

            color: #f8fafc;

            box-shadow: 0 10px 30px rgba(15, 23, 42, 0.25);

            margin-bottom: 18px;

        }

        .page-header h1 {

            font-size: 1.75rem;

            margin: 0;

        }

        .page-header small 

        .page-header .btn-outline-light {

            border-color: rgba(248, 250, 252, 0.6);

            color: #f8fafc;

        }

        .page-header .btn-outline-light:hover {

            background-color: #f8fafc;

            color: #0d6efd;

        }

        .table th { background: #e9ecef; }

        .btn-sm { margin-right: 5px; }

        .form-container { background: white; border-radius: 8px; padding: 20px; margin-top: 20px; box-shadow: 0 0 10px rgba(0,0,0,0.1); }

        .status { margin-top: 10px; }

        .nav-tabs {

            border-bottom: none;

            margin-bottom: 4px;

        }

        .nav-tabs .nav-link {

            cursor: pointer;

            border: none;

            border-radius: 999px;

            margin-right: 6px;

            padding: 8px 18px;

            color: #495057;

        }

        .nav-tabs .nav-link.active {

            background-color: #0d6efd;

            color: #fff;

            box-shadow: 0 4px 12px rgba(13, 110, 253, 0.35);

        }

        .tab-pane {

            background: #ffffff;

            border-radius: 12px;

            box-shadow: 0 0 12px rgba(15, 23, 42, 0.06);

            margin-top: 8px;

        }

        /* 明细行整体背景 */

        .detail-row td {

            background-color: #f8fafc;

            padding-left: 30px !important;

            border-top: 1px dashed #ccc !important;  /* 添加虚线与上部分隔 */

        }

        

        /* 明细表格的标题行特殊样式 */

        .detail-row .details-content table {

            background-color: white;

            border-radius: 4px;

            margin: 10px 0;

            width: 100%;

            border-collapse: collapse;

            box-shadow: 0 1px 3px rgba(0,0,0,0.1);

            border-left: 3px solid #6c757d;  /* 左边竖条强调 */

        }

        .detail-row .details-content th {

            background-color: #d1e7fd;  /* 更明显的浅蓝色 */

            font-size: 0.85em;

            padding: 5px 8px;

            color: #0d3e6f;

            font-weight: 600;

        }

        .detail-row .details-content td {

            background-color: white;

            padding: 5px 8px;

            border-bottom: 1px solid #dee2e6;

        }

        /* 分页样式优化 */

        .pagination {

            margin-top: 20px;

            margin-bottom: 10px;

        }

        .pagination .page-link {

            color: #0d6efd;

            border-color: #dee2e6;

        }

        .pagination .page-item.active .page-link {

            background-color: #0d6efd;

            border-color: #0d6efd;

        }

        .pagination .page-item.disabled .page-link {

            color: #6c757d;

        }

        /* 表格加载状态 */

        .table-loading {

            opacity: 0.6;

            pointer-events: none;

        }

        

        /* ========== 移动端响应式 ========== */

        @media (max-width: 768px) {

            /* 容器 */

            .container {

                padding: 0 8px;

                margin-top: 0;

                margin-bottom: 60px; /* 底部导航空间 */

            }



            /* 顶部标题栏：紧凑单行 */

            .page-header {

                padding: 10px 12px;

                border-radius: 0;

                margin-bottom: 0;

                position: sticky;

                top: 0;

                z-index: 100;

                flex-direction: row !important;

                align-items: center !important;

                gap: 8px;

            }

            .page-header > div:first-child {

                flex: 1;

                min-width: 0;

            }

            .page-header h1 {

                font-size: 1rem;

                margin: 0;

                white-space: nowrap;

                overflow: hidden;

                text-overflow: ellipsis;

            }

            .page-header small { display: none; }

            .page-header .text-end {

                flex-shrink: 0;

                display: flex;

                align-items: center;

                gap: 6px;

            }

            .page-header .text-end .mb-1 { display: none; }

            .page-header .btn-outline-light {

                padding: 4px 10px;

                font-size: 0.8rem;

                white-space: nowrap;

            }

            #current-user { font-size: 0.8rem; }

            #current-groups { display: none; }



            /* 选项卡导航：横向滚动 */

            .nav-tabs {

                flex-wrap: nowrap;

                overflow-x: auto;

                overflow-y: hidden;

                -webkit-overflow-scrolling: touch;

                scrollbar-width: none;

                -ms-overflow-style: none;

                padding: 6px 4px;

                background: #fff;

                position: sticky;

                top: 52px;

                z-index: 99;

                box-shadow: 0 2px 6px rgba(0,0,0,0.08);

                gap: 4px;

            }

            .nav-tabs::-webkit-scrollbar { display: none; }

            .nav-tabs .nav-item { flex-shrink: 0; }

            .nav-tabs .nav-link {

                white-space: nowrap;

                font-size: 0.78rem;

                padding: 5px 10px;

                margin-right: 0;

            }



            /* 选项卡内容 */

            .tab-pane {

                padding: 10px 8px !important;

                border-radius: 0;

                margin-top: 0;

            }

            .tab-pane h3 {

                font-size: 1.05rem;

                margin-bottom: 8px;

            }



            /* 标题行：标题+农历年+按钮 */

            .tab-pane > .d-flex.justify-content-between {

                flex-wrap: wrap;

                gap: 6px;

                align-items: center !important;

                flex-direction: row !important;

            }

            .tab-pane > .d-flex.justify-content-between h3 {

                margin: 0;

                flex: 0 0 auto;

            }

            .tab-pane > .d-flex.justify-content-between > div,

            .tab-pane > .d-flex.justify-content-between > .d-flex {

                flex-wrap: wrap;

                gap: 4px;

            }

            .tab-pane > .d-flex.justify-content-between .btn {

                font-size: 0.78rem;

                padding: 4px 8px;

                width: auto !important;

            }

            /* 农历年选择框在标题行 */

            .tab-pane > .d-flex.justify-content-between select {

                font-size: 0.78rem;

                padding: 4px 6px;

                height: auto;

            }



            /* 筛选区域：两列布局 */

            .row.g-2 > [class*='col-md'],

            .row.mb-2 > [class*='col-md'],

            .row.mb-3 > [class*='col-md'] {

                width: 50% !important;

                flex: 0 0 50%;

                max-width: 50%;

                margin-bottom: 6px;

            }

            .row.g-2 > [class*='col-md'].col-md-5,

            .row.g-2 > [class*='col-md'].col-md-4 {

                width: 100% !important;

                flex: 0 0 100%;

                max-width: 100%;

            }

            .form-select-sm, .form-control-sm {

                font-size: 0.82rem;

                padding: 4px 6px;

            }

            .form-label {

                font-size: 0.8rem;

                margin-bottom: 2px;

            }

            /* 筛选按钮行 */

            .row.g-2 .d-flex.gap-2 {

                flex-wrap: wrap;

                gap: 4px !important;

            }

            .row.g-2 .d-flex.gap-2 .btn {

                font-size: 0.72rem;

                padding: 3px 7px;

            }



            /* 表格：横向滚动 + 紧凑 */

            .table-responsive {

                overflow-x: auto;

                -webkit-overflow-scrolling: touch;

                border-radius: 6px;

            }

            .table {

                font-size: 0.75rem;

                min-width: 480px;

            }

            .table th, .table td {

                padding: 5px 4px;

                white-space: nowrap;

            }

            .table .btn-sm {

                font-size: 0.68rem;

                padding: 2px 5px;

                margin-right: 2px;

            }

            /* 操作列按钮隐藏文字，只留图标 */

            .table .btn-sm .btn-text { display: none; }

            /* 隐藏次要列 */

            .table .hide-mobile { display: none !important; }



            /* 分页 */

            .pagination {

                font-size: 0.8rem;

                flex-wrap: wrap;

                justify-content: center;

                margin-top: 10px;

            }

            .pagination .page-link { padding: 4px 8px; }



            /* 弹窗：底部抽屉式 */

            .modal-dialog {

                margin: 0 !important;

                max-width: 100% !important;

                width: 100%;

                position: fixed;

                bottom: 0;

                left: 0;

                right: 0;

            }

            .modal-content {

                border-radius: 16px 16px 0 0;

                max-height: 90vh;

                overflow-y: auto;

            }

            .modal-header {

                padding: 12px 16px;

                position: sticky;

                top: 0;

                background: #fff;

                z-index: 1;

                border-radius: 16px 16px 0 0;

            }

            .modal-body {

                padding: 12px 16px;

                overflow-y: auto;

            }

            .modal-footer {

                padding: 10px 16px;

                position: sticky;

                bottom: 0;

                background: #fff;

            }

            .modal-title { font-size: 1rem; }



            /* 表单字段 */

            .form-control, .form-select {

                font-size: 0.9rem;

                padding: 8px 10px;

            }

            .form-container {

                padding: 10px;

                margin-top: 10px;

            }



            /* 明细行 */

            .detail-row td { padding-left: 8px !important; }

            .detail-row .details-content table { font-size: 0.7rem; }



            /* 徽章 */

            .badge { font-size: 0.68rem; padding: 2px 5px; }



            /* 卡片 */

            .card { margin-bottom: 8px; }

            .card-body { padding: 10px; }



            /* 汇总信息框 */

            #payroll-total, #payroll-filters {

                font-size: 0.82rem;

                padding: 6px 10px;

            }

        }



        /* 小屏手机 < 480px */

        @media (max-width: 480px) {

            .page-header h1 { font-size: 0.9rem; }

            .page-header h1 i { display: none; }

            .nav-tabs .nav-link {

                font-size: 0.72rem;

                padding: 4px 8px;

            }

            .table { font-size: 0.68rem; min-width: 420px; }

            .table th, .table td { padding: 4px 3px; }

            .table .btn-sm { font-size: 0.62rem; padding: 2px 4px; }

            /* 筛选区域全宽 */

            .row.g-2 > [class*='col-md'] {

                width: 100% !important;

                flex: 0 0 100%;

                max-width: 100%;

            }

        }



        /* 横屏 */

        @media (max-width: 768px) and (orientation: landscape) {

            .page-header { padding: 6px 12px; }

            .page-header h1 { font-size: 0.9rem; }

            .nav-tabs { top: 44px; }

            .nav-tabs .nav-link { padding: 3px 8px; font-size: 0.75rem; }

            .container { margin-bottom: 20px; }

        }