/* ======================【全局基础】 ====================== */
body {
    margin: 0;
    padding: 0;
    background-color: #f5f5f5;
}

.page-container {
    max-width: 1920px;
    min-width: 1300px;
    width: 100%;
    margin: 0 auto;
    padding: 20px;
    box-sizing: border-box;
}

.page-module {
    display: none;
}

    .page-module.show {
        display: block;
    }
/* ======================【Tab切换】 ====================== */
.tab-wrap {
    margin: 10px 0;
    display: flex;
    gap: 8px;
}

.tab-btn {
    padding: 8px 24px;
    border: 1px solid #2e7d32;
    background: #fff;
    color: #2e7d32;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    border-radius: 6px;
    transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

    .tab-btn:hover {
        background: #e8f5e9;
    }

    .tab-btn.active {
        background: #2e7d32;
        color: #fff;
        border-color: #2e7d32;
    }
/* ======================【页面容器&卡片】 ====================== */
.setting-block {
    margin-bottom: 16px;
    padding: 24px;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

    .setting-block h3 {
        margin: 0 0 12px 0;
        color: #2c3545;
    }

.table-header-bar {
    display: flex;
    align-items: center;
}

    .table-header-bar h3 {
        margin: 0;
    }

    .table-header-bar button {
        margin-left: auto;
    }

.price-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    width: 100%;
    align-items: start;
}
/* ======================【表格样式】 ====================== */
table.appoint-table {
    border-collapse: collapse;
    width: 100%;
    margin-top: 10px;
    font-size: 13px;
}

.appoint-table th {
    background-color: #e8f5e9;
    color: #1b5e20;
    font-weight: 600;
    padding: 12px 10px;
    text-align: center;
    border: none;
    border-bottom: 2px solid #dcedc8;   /* 表头下分隔线，呼应卡片边框 */
}

.appoint-table td {
    padding: 11px 10px;
    border: none;
    border-bottom: 1px solid #f1f8e9;   /* 行细分隔线，与卡片浅绿边框统一 */
    text-align: center;
    color: #333;
}

.appoint-table tbody tr:nth-child(even) {
    background-color: #f4faf4;
}

.appoint-table tbody tr:nth-child(odd) {
    background-color: #ffffff;
}

.appoint-table tbody tr {
    transition: background-color 0.2s ease;
    cursor: pointer;
}

    .appoint-table tbody tr:hover {
        background-color: #dcedc8 !important;
    }
/* 订单状态徽章标签 */
.badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 12px;
    color: #ffffff;
}

.badge-paid {
    background-color: #67c23a; /* 待使用 */
}

.badge-queue {
    background-color: #36bccb; /* 排队中 */
}

.badge-wait {
    background-color: #E6A23C; /* 待模拟 */
}

.badge-doing {
    background-color: #409eff; /* 模拟中 */
}

.badge-finish {
    background-color: #00b42a; /* 已完成 */
}

.badge-cancel {
    background-color: #f56c6c; /* 已退款 */
}

.badge-pending {
    background-color: #ff9800; /* 待付款 */
}

.badge-default {
    background-color: #c0c4cc;
}
/* ======================【表单布局】 ====================== */
.form-two-col {
    display: flex;
    gap: 10px 18px;
    flex-wrap: wrap;
}

    .form-two-col .form-row {
        flex: 1 1 200px;
        margin-bottom: 1px;
    }

.form-row {
    display: flex;
    flex-direction: column;
    gap: 1px;
    margin-bottom: 10px;
}

.label-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.form-row label {
    font-size: 14px;
    white-space: nowrap;
}

.form-row input,
.form-row select {
    box-sizing: border-box;
    padding: 6px 8px;
    font-size: 14px;
    height: 32px;
    border: 1px solid #ccc;
    width: 100%;
}

.form-row select {
    appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23666'%3E%3Cpath d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    padding-right: 24px;
}

.validate-tip {
    font-size: 12px;
    margin-top: 2px;
}

    .validate-tip.error {
        color: red;
    }

    .validate-tip.ok {
        color: green;
    }

.tip-margin {
    margin: 4px 0;
}
/* ======================【弹窗模块】 ====================== */
.modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.4);
    align-items: center;
    justify-content: center;
}

.modal-inner {
    width: 250px;
    background: #fff;
    margin: 60px auto;
    padding: 20px;
    border-radius: 8px;
    position: relative;
}

    .modal-inner.modal-appoint {
        width: 515px;
        max-width: 92vw;
        max-height: 85vh;
        overflow-y: auto;
        margin: auto;
    }

.modal-close-btn {
    position: absolute;
    right: 10px;
    top: 6px;
    border: none;
    background: transparent;
    font-size: 20px;
    cursor: pointer;
    color: #666;
    width: 24px;
    height: 24px;
    line-height: 24px;
    text-align: center;
}

    .modal-close-btn:hover {
        color: #f00;
    }

.form-btn-row {
    width: 100%;
    display: flex;
    gap: 3px;
    justify-content: flex-end;
    margin-top: 10px;
}

    .form-btn-row button {
        padding: 6px 18px;
        border-radius: 4px;
        cursor: pointer;
        transition: background-color 0.22s ease;
        border: none;
    }

        .form-btn-row button:first-child {
            background: #1b5e20;
            color: #fff;
        }

            .form-btn-row button:first-child:hover {
                background: #2e7d32;
            }

            .form-btn-row button:first-child:active {
                background: #1b5e20;
            }

        .form-btn-row button:last-child {
            color: #fff;
            background: #9e9e9e;
        }

            .form-btn-row button:last-child:hover {
                background: #bdbdbd;
            }

            .form-btn-row button:last-child:active {
                background: #9e9e9e;
            }
/* ====================== 全局所有h3统一基础样式 ====================== */
h3 {
    margin: 0 0 12px 0;
    font-size: 18px;
    color: #2c3542;
    font-weight: 600;
}
/* ====================== 仅预约编辑弹窗h3：增加flex横向布局（标题+红字同行） ====================== */
.modal-appoint > h3 {
    display: flex;
    align-items: center;
    gap: 12px;
}

.edit-title-warn {
    color: red;
    display: none;
    font-size: 14px;
    font-weight: normal;
}
/* ======================【筛选栏】 ====================== */
.filter-bar {
    margin: 10px 0;
    font-size: 14px;
    padding: 4px 0;
}

.filter-bar-row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 8px;
}

.filter-bar label {
    font-size: 14px;
    color: #555;
}

.filter-bar input,
.filter-bar select {
    box-sizing: border-box;
    height: 32px;
    font-size: 14px;
    padding: 0 8px;
    border: 1px solid #d5dae0;
    border-radius: 4px;
    background: #fff;
    outline: none;
    transition: border-color 0.2s;
}

.filter-bar input:focus,
.filter-bar select:focus {
    border-color: #2e7d32;
}

.filter-bar input {
    width: 120px;
}

.filter-bar select {
    width: 100px;
}

.filter-bar input[type="date"] {
    width: 110px;
}

.filter-bar button {
    box-sizing: border-box;
    height: 32px;
    padding: 0 16px;
    font-size: 14px;
    cursor: pointer;
    border: none;
    border-radius: 4px;
    background: #1b5e20;
    color: #fff;
    transition: background-color 0.2s;
}

.filter-bar button:not(.filter-btn-ghost):hover {
    background: #2e7d32;
    color: #fff;
}

.filter-bar button.filter-btn-ghost {
    background: #fff;
    color: #2e7d32;
    border: 1px solid #2e7d32;
}

    .filter-bar button.filter-btn-ghost:hover {
        background: #e8f5e9;
        color: #2e7d32;
        border-color: #2e7d32;
    }

.input-file-hidden {
    display: none;
}
/* ======================【分页组件】 ====================== */
.pagination-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    margin: 10px 0;
    flex-wrap: wrap;
}

.pagination-total {
    color: #666;
}

.pagination-sum {
    margin-left: auto;
}

.pagination-btn {
    border: 1px solid #ddd;
    background: #fff;
    padding: 5px 11px;
    cursor: pointer;
    font-size: 14px;
    color: #333;
    border-radius: 4px;
}

    .pagination-btn.active {
        background-color: #2e7d32;
        color: #ffffff;
        border-color: #2e7d32;
    }

    .pagination-btn:hover:not(.active) {
        border-color: #2e7d32;
        color: #2e7d32;
    }

.pagination-wrap span {
    padding: 0 4px;
    color: #666;
}
/* ======================【按钮公用】 ====================== */
.page1-btn-base {
    padding: 4px 15px;
    cursor: pointer;
}

/* 排队登记核对模式按钮配色：已核销=主操作主题绿、取消=中性灰 */
button[id="btnQueueConfirm"] { background-color: #1b5e20; color: #fff; border: none; border-radius: 4px; }
button[id="btnQueueConfirm"]:hover { background-color: #2e7d32; }
button[id="btnQueueCancel"] { background-color: #9e9e9e; color: #fff; border: none; border-radius: 4px; }
button[id="btnQueueCancel"]:hover { background-color: #bdbdbd; }

/* 所有"取消"按钮统一中性灰（白字），!important 防止被 .form-btn-row 等较高优先级规则覆盖 */
.btn-cancel { background-color: #9e9e9e !important; color: #fff !important; border: none !important; border-radius: 4px; }
.btn-cancel:hover { background-color: #bdbdbd !important; }

/* 预约订单弹窗按钮统一配色：主操作=主题绿、功能操作=蓝、破坏/资金操作=警示红 */
button[id="btnEditSubmit"] { background-color: #1b5e20; color: #fff; border: none; border-radius: 4px; }
button[id="btnEditSubmit"]:hover { background-color: #2e7d32; }
button[id="btnPaid"] { background-color: #1b5e20; color: #fff; border: none; border-radius: 4px; }
button[id="btnPaid"]:hover { background-color: #2e7d32; }
button[id="btnPrintTicket"] { background-color: #1565c0; color: #fff; border: none; border-radius: 4px; }
button[id="btnPrintTicket"]:hover { background-color: #1976d2; }
button[id="btnRefund"] { background-color: #c62828; color: #fff; border: none; border-radius: 4px; }
button[id="btnRefund"]:hover { background-color: #d32f2f; }

/* 管理员核验弹窗：确认退费=资金操作警示红（与 btnRefund / btnDelete 同色）；取消走系统统一灰 .btn-cancel */
button[id="btnAdminPwdOk"] { background-color: #c62828 !important; color: #fff; border: none; border-radius: 4px; }
button[id="btnAdminPwdOk"]:hover { background-color: #d32f2f !important; }
button[id="btnAdminPwdOk"]:disabled { opacity: .65; cursor: not-allowed; }

/* 预约订单弹窗的删除按钮：统一警示红 */button[id="btnDelete"] {
    background-color: #c62828;
    color: #fff;
    border: none;
    border-radius: 4px;
}

    button[id="btnDelete"]:hover {
        background-color: #d32f2f;
    }

.btn-save-primary {
    background-color: #1b5e20 !important;
    color: #fff !important;
    border: none !important;
}

    .btn-save-primary:hover {
        background-color: #2e7d32 !important;
    }

    .btn-save-primary:active {
        background-color: #1b5e20 !important;
    }

#modalEdit input:read-only {
    background-color: #ffffff;
    cursor: not-allowed;
}
/* 透明遮罩，盖住下拉框，拦截点击，不改变原有外观 */
.select-lock-mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    background: transparent;
    cursor: not-allowed;
}

#modalEdit select {
    position: relative;
}
/* ========== 排队四张并排表格模块 ========== */
/* 排队表独立白色卡片 */
.queue-block {
    margin-bottom: 16px;
    padding: 16px;
}
/* 卡片顶部大标题（科目二 / 科目三）——与 vm-label 统一 */
.block-title {
    font-weight: 700;
    font-size: 18px;
    color: #1b5e20;
    margin: 0 0 12px 0;
    padding-bottom: 10px;
    border-bottom: 1px solid #e5e7eb;
}
/* 标题行：左侧标题 + 右侧操作按钮（右上角） */
.block-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #e5e7eb;
    padding-bottom: 10px;
    margin-bottom: 12px;
}
.block-title-row .block-title {
    margin: 0;
    padding-bottom: 0;
    border-bottom: none;
}
.board-call-btn {
    box-sizing: border-box;
    height: 32px;
    padding: 0 16px;
    font-size: 14px;
    cursor: pointer;
    border: none;
    border-radius: 4px;
    background: #1b5e20;
    color: #fff;
    transition: background-color 0.2s;
}
.board-call-btn:hover {
    background: #2e7d32;
    color: #fff;
}
/* 信息看板卡（科目二/科目三各一张卡，左右并列） */
.board-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.board-card {
    margin-bottom: 12px;
}
.board-app {
    margin: 0;
}
/* 信息看板：6 区域宫格，灰色线划分，数值红色加粗 */
.board-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    border: 1px solid #dfe3e8;
    border-radius: 6px;
    overflow: hidden;
    background: #fff;
}
.board-cell {
    border-right: 1px solid #dfe3e8;
    border-bottom: 1px solid #dfe3e8;
    padding: 12px 6px;
    text-align: center;
}
.board-cell:nth-child(3n) { border-right: none; }
.board-cell:nth-child(n+4) { border-bottom: none; }
.cell-label {
    font-size: 13px;
    color: #555;
    margin-bottom: 6px;
}
.cell-value {
    font-size: 26px;
    font-weight: 700;
    color: #d32f2f;
}
/* 排队表网格布局，现在是2栏：科目二、科目三 */
.queue-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 0;
}

    .queue-wrap > div {
        border: 1px solid #e5e7eb;
        background: #ffffff;
        border-radius: 6px;
        padding: 10px;
    }

    .queue-wrap h4 {
        text-align: center;
        margin: 0 0 8px 0;
        font-size: 14px;
        font-weight: 600;
    }

    .queue-wrap .appoint-table {
        font-size: 12px;
        width: 100%;
    }
/* 中等屏幕：2列不变；更小屏幕自动1列 */
@media (max-width: 1100px) {
    .queue-wrap {
        grid-template-columns: 1fr;
    }
}
/* ========== 新增预约后询问是否加入排队弹窗 ========== */
#queueModal {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #ffffff;
    padding: 24px;
    border-radius: 10px;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.15);
    z-index: 9999;
    min-width: 320px;
}

    #queueModal > p {
        font-size: 15px;
        color: #333;
        margin: 0 0 20px 0;
        text-align: center;
    }

    #queueModal .modal-btn-row {
        display: flex;
        gap: 12px;
        justify-content: flex-end;
    }

    #queueModal button {
        padding: 6px 20px;
        border-radius: 4px;
        border: none;
        cursor: pointer;
        font-size: 14px;
    }

#cancelQueueBtn {
    background-color: #9e9e9e;
    color: #fff;
}

    #cancelQueueBtn:hover {
        background-color: #bdbdbd;
    }

#addQueueBtn {
    background-color: #1b5e20;
    color: #ffffff;
}

    #addQueueBtn:hover {
        background-color: #2e7d32;
    }
/* ========== 绿色模式：手动输入工牌排队号弹窗 ========== */
#greenNoModal {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #ffffff;
    padding: 24px;
    border-radius: 10px;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.15);
    z-index: 10000;
    min-width: 340px;
}

    #greenNoModal > p {
        font-size: 15px;
        color: #333;
        margin: 0 0 16px 0;
        text-align: center;
    }

    #greenNoModal .modal-btn-row {
        display: flex;
        gap: 12px;
        justify-content: flex-end;
    }

    #greenNoModal button {
        padding: 6px 20px;
        border-radius: 4px;
        border: none;
        cursor: pointer;
        font-size: 14px;
    }

    #greenNoModal #greenNoOk {
        background-color: #1b5e20;
        color: #fff;
    }

    #greenNoModal #greenNoOk:hover {
        background-color: #2e7d32;
    }
/* 预约行闪烁高亮 */
@keyframes flashHighlight {
    0% {
        background-color: #fff3cd;
    }

    50% {
        background-color: transparent;
    }

    100% {
        background-color: #fff3cd;
    }
}

tr.flash-animate {
    animation: flashHighlight 0.6s ease‑in‑out 3;
}

/* 排队号按车型区分：C1蓝色，C2橙色 */
td.queue-no {
    /* 单元格开启flex，直接内部居中 */
    display: flex;
    justify-content: center;
    align-items: center;
}

    td.queue-no > span {
        padding: 4px 8px;
        border-radius: 6px;
        font-weight: bold;
    }

    td.queue-no.type-c1 > span {
        background-color: #eef4ff;
        color: #2f6fed;
        border: 1px solid #dce7ff;
    }

    td.queue-no.type-c2 > span {
        background-color: #fff7e6;
        color: #d48806;
        border: 1px solid #ffe7ba;
    }

/* ========= 原HTML内联弹窗样式 迁移到此css ========= */
/* 排队登记弹窗：采用 Vue 模板风格（modal-overlay + modal-inner + form-row + form-btn-row） */
#queueRegisterModal {
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

#queueRegisterModal .modal-inner {
    margin: 0;
}

#regOrderNo {
    font-size: 16px;
}

/* 核销确认弹窗 */
#checkModal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.4);
    z-index: 10000;
}

    #checkModal > div {
        width: 380px;
        margin: 120px auto;
        background: #fff;
        padding: 24px;
        border-radius: 8px;
        text-align: center;
    }

    #checkModal p {
        font-size: 16px;
        margin-bottom: 24px;
    }

/*日期确认弹窗 */
#dateConfirmModal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.4);
    z-index: 10001;
}

    #dateConfirmModal > div {
        width: 420px;
        margin: 120px auto;
        background: #fff;
        padding: 24px;
        border-radius: 8px;
        text-align: center;
    }

#dateConfirmText {
    font-size: 16px;
    margin-bottom: 24px;
}

#dateConfirmModal .btn-group {
    display: flex;
    gap: 16px;
    justify-content: center;
}

#callStudentModal .form-row {
    margin: 8px 0;
}

#callStudentModal input {
    width: 100%;
    box-sizing: border-box;
}








/* ========== 学员模拟排队表：固定高度，最多展示6条，超出滚动 ========== */
table.queue-scroll-table {
    display: block;
    width: 100%;
    max-height: 294px; /* 表头1行 + 数据6行 */
    overflow-y: auto;
}
table.queue-scroll-table thead {
    position: sticky;
    top: 0;
    z-index: 1;
    display: table-header-group;
}
table.queue-scroll-table tbody {
    display: table-row-group;
}
table.queue-scroll-table thead th {
    border-bottom: 1px solid #c8e6c9;
}
/* 滚动条样式（可选美化） */
table.queue-scroll-table::-webkit-scrollbar {
    width: 8px;
}
table.queue-scroll-table::-webkit-scrollbar-thumb {
    background: #a5d6a7;
    border-radius: 4px;
}
table.queue-scroll-table::-webkit-scrollbar-track {
    background: #f1f8e9;
}
/* ========== 学员模拟排队表：多列卡片网格 ========== */
.queue-cards {
    display: grid;
    /* 一行 2 个，固定 6 行 */
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 38px;   /* 每行高度与状态表卡片一致 */
    gap: 10px;
    height: 278px;          /* 固定6行：6*38 + 5*10 */
    overflow-y: auto;       /* 超出滚动 */
    padding: 2px;
    align-content: start;
}
.queue-card {
    border: 1px solid #dcedc8;
    background: #ffffff;
    border-radius: 6px;
    padding: 0 10px;
    cursor: pointer;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    height: 38px;
    box-sizing: border-box;
    transition: box-shadow 0.15s;
}
.queue-card:hover {
    box-shadow: 0 2px 8px rgba(27, 94, 32, 0.15);
    border-color: #aed581;
}
/* 科目三排队卡片：按性别标记底色区分（男=浅蓝、女=浅粉、未标记=默认白） */
.queue-card.g-male {
    background: #e3f2fd;
    border-color: #90caf9;
}
.queue-card.g-male:hover {
    border-color: #42a5f5;
}
.queue-card.g-female {
    background: #fce4ec;
    border-color: #f48fb1;
}
.queue-card.g-female:hover {
    border-color: #ec407a;
}
/* 卡片上的性别小标签 */
.qc-gender {
    font-size: 12px;
    line-height: 16px;
    padding: 0 5px;
    border-radius: 3px;
    flex-shrink: 0;
    color: #fff;
    background: #9e9e9e;
}
.queue-card.g-male .qc-gender { background: #1976d2; }
.queue-card.g-female .qc-gender { background: #e91e63; }
/* 右键性别标记菜单 */
.queue-gender-menu {
    position: fixed;
    z-index: 12000;
    display: none;
    min-width: 120px;
    background: #fff;
    border: 1px solid #cfd8dc;
    border-radius: 6px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
    padding: 4px 0;
}
.queue-gender-menu .qgm-item {
    padding: 8px 16px;
    font-size: 13px;
    color: #333;
    cursor: pointer;
    white-space: nowrap;
}
.queue-gender-menu .qgm-item:hover {
    background: #f1f8e9;
    color: #1b5e20;
}
.qc-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.qc-no {
    font-weight: 700;
    font-size: 14px;
    flex-shrink: 0;
}
.qc-no.type-c1 { color: #2e7d32; }
.qc-no.type-c2 { color: #ef6c00; }
.qc-body {
    text-align: left;
}
.qc-name {
    flex: 1;
    text-align: left;
    font-size: 14px;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.qc-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.qc-time {
    font-size: 12px;
    color: #555;
    font-family: monospace;
    flex-shrink: 0;
}
.queue-cards::-webkit-scrollbar {
    width: 8px;
}
.queue-cards::-webkit-scrollbar-thumb {
    background: #a5d6a7;
    border-radius: 4px;
}
.queue-cards::-webkit-scrollbar-track {
    background: #f1f8e9;
}

/* ========== 学员模拟状态表：按科目拆分，上下排列充满卡片 ========== */
.status-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.status-sub .status-title {
    text-align: center;
    margin: 0 0 8px 0;
    font-size: 13px;
    font-weight: 600;
    color: #555;
}
/* 拆分的子表每张内部单列（一行一条），信息更清晰 */
.status-sub .status-cards {
    grid-template-columns: 1fr;
    align-content: start;  /* 卡片从上往下排列，不拉伸上下均分 */
    height: 272px;       /* 固定高度：恰好展示6条卡片，超出滚动 */
    overflow-y: auto;
}
.status-sub .status-card {
    box-sizing: border-box;
    height: 38px;        /* 每条固定高度（含内边距），保证正好6条 */
}

/* ========== 学员模拟状态表：长条卡片（一行两条） ========== */
.status-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 一行两条 */
    gap: 8px;
    max-height: 420px; /* 固定高度，超出滚动 */
    overflow-y: auto;
    padding: 2px;
}
.status-card {
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid #dcedc8;
    background: #ffffff;
    border-radius: 6px;
    padding: 8px 10px;
    cursor: pointer;
    transition: box-shadow 0.15s;
    flex-wrap: nowrap;
    overflow: hidden;
    white-space: nowrap;
}
.status-card:hover {
    box-shadow: 0 2px 8px rgba(27, 94, 32, 0.15);
    border-color: #aed581;
}
.status-card.status-wait {
    border-left: 4px solid #fbc02d; /* 待模拟：黄边 */
}
.status-card.status-doing {
    border-left: 4px solid #2e7d32; /* 模拟中：绿边 */
}
.sc-no {
    font-weight: 700;
    font-size: 14px;
    min-width: 0;
    flex-shrink: 0;
}
.sc-no.type-c1 { color: #2e7d32; }
.sc-no.type-c2 { color: #ef6c00; }
.sc-name {
    font-size: 14px;
    color: #333;
    font-weight: 600;
    min-width: 0;
    flex-shrink: 0;
}
.sc-cell {
    font-size: 12px;
    color: #555;
    min-width: 0;
    flex-shrink: 0;
}
.sc-state {
    margin-left: auto;
    flex-shrink: 0;
}
.sc-time {
    font-size: 13px;
    color: #c00;
    font-family: monospace;
    font-weight: 600;
    flex-shrink: 0;
}
.status-cards::-webkit-scrollbar {
    width: 8px;
}
.status-cards::-webkit-scrollbar-thumb {
    background: #a5d6a7;
    border-radius: 4px;
}
.status-cards::-webkit-scrollbar-track {
    background: #f1f8e9;
}

/* ========== 呼叫类型选择弹窗：两列按钮（Vue 风格） ========== */
#callKModal,
#callCountModal,
#callStudentModal {
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}
#callKModal .modal-inner {
    margin: 0;
    width: 380px;
}
#callCountModal .modal-inner,
#callStudentModal .modal-inner {
    margin: 0;
}
#callKModal h3 {
    text-align: center;
    color: #1b5e20;
    margin: 0 0 18px 0;
}
#callKModal .form-btn-row {
    justify-content: center;
}
.k-btn-row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
    width: 100%;
}
.k-btn-row .k-type-btn {
    flex: 1 1 0;
    width: calc(50% - 8px);
    box-sizing: border-box;
    padding: 14px 0;
    font-size: 16px;
    font-weight: 600;
    border: 1px solid #2e7d32;
    border-radius: 6px;
    background: #e8f5e9;
    color: #2e7d32;
    cursor: pointer;
    transition: all 0.2s;
}
.k-btn-row .k-type-btn:hover {
    background: #2e7d32;
    color: #fff;
}

/* ========== 车辆/教练管理页（Vue 卡片，上下排列） ========== */
.manage-col {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    align-items: start;
    margin-bottom: 12px;
}
.manage-col .manage-block {
    margin-bottom: 0;
}
/* ========== 排队表 / 模拟状态表：两个独立卡片并排 ========== */
.queue-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    align-items: stretch;
    margin-bottom: 12px;
}
#module-book > .manage-block {
    margin-bottom: 12px;
}
.queue-col .setting-block {
    margin-bottom: 0;
    min-width: 0;   /* 防止内容撑开，保证左右两列 50/50 等分 */
}
/* queue-wrap 默认两列，但新结构里每个卡片只放一个区块，需改为单列充满 */
.queue-col .queue-wrap {
    grid-template-columns: 1fr;
}
/* 状态表：去掉外层整圈灰线，改为科目二、科目三各自一圈灰线 */
.queue-col .status-col {
    border: none;
    background: transparent;
    padding: 0;
}
.queue-col .status-sub {
    border: 1px solid #e5e7eb;
    background: #ffffff;
    border-radius: 6px;
    padding: 10px;
    min-width: 0;   /* 防止卡片内两列被内容撑开，保证等分 */
}
.manage-block {
    background: #ffffff;
    border: 1px solid #dcedc8;
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    margin-bottom: 20px;
}
.manage-block .table-header-bar {
    justify-content: space-between;
    margin-bottom: 10px;
}
.manage-block .table-header-bar h3 {
    color: #2e7d32;
}
.coach-form-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 12px;
}
.coach-form-row input {
    width: 100px;
    height: 32px;
    box-sizing: border-box;
    padding: 7px 10px;
    border: 1px solid #c8e6c9;
    border-radius: 6px;
    font-size: 13px;
}
/* 场次新增行：开始/结束时间、数量三框等宽等高，与整体输入框协调 */
#add_sess2_start_inline, #add_sess2_end_inline, #add_sess2_qty_inline,
#add_sess3_start_inline, #add_sess3_end_inline, #add_sess3_qty_inline {
    width: 100px;
    height: 32px;
    box-sizing: border-box;
}
.manage-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
    max-height: 480px;
    overflow-y: auto;
    padding: 2px;
}
.manage-card {
    border: 1px solid #dcedc8;
    background: #ffffff;
    border-radius: 8px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
.manage-card:hover {
    border-color: #aed581;
    box-shadow: 0 2px 8px rgba(27, 94, 32, 0.15);
}
.mc-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 6px;
}
.mc-no {
    font-weight: 700;
    font-size: 16px;
    color: #1b5e20;
}
.mc-id {
    font-size: 12px;
    color: #999;
}
.mc-sub {
    font-size: 13px;
    color: #555;
    text-align: left;
}
.mc-foot {
    display: flex;
    justify-content: flex-end;
    margin-top: 2px;
}
.mc-del {
    background: #f5f5f5;
    color: #c00;
    padding: 5px 12px;
    font-size: 12px;
    border-radius: 6px;
}
.manage-cards::-webkit-scrollbar {
    width: 8px;
}
.manage-cards::-webkit-scrollbar-thumb {
    background: #a5d6a7;
    border-radius: 4px;
}
.manage-cards::-webkit-scrollbar-track {
    background: #f1f8e9;
}


/* ========== 车辆管理：小卡片（只显示车号，颜色区分 空闲/占用/维修，单击切换 维修/空闲） ========== */
#vehicleCardsApp {
    grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
    max-height: 220px;
}
.vcard {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    height: 32px;
    border-radius: 6px;
    border: 1px solid #e5e7eb;
    cursor: pointer;
    user-select: none;
    font-size: 15px;
    font-weight: 700;
    box-sizing: border-box;
    transition: transform .12s, box-shadow .12s;
}
.vcard:active { transform: scale(.94); }
/* 轮排管理卡：缩小卡片只显示姓名 */
.rest-card {
    border: 1px solid #dcedc8;
    background: #ffffff;
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 13px;
    font-weight: 600;
    color: #1b5e20;
    text-align: center;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    cursor: default;
    user-select: none;
    height: 32px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
}
.rest-free { background: #e8f5e9; color: #2e7d32; border-color: #a5d6a7; }
.rest-using { background: #fdecea; color: #c62828; border-color: #ef9a9a; }
/* 选择轮排人员弹窗 */
.rest-pick-list {
    max-height: 320px;
    overflow-y: auto;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    padding: 4px 8px;
}
.rest-pick-row {
    padding: 6px 4px;
    border-bottom: 1px solid #f0f0f0;
    font-size: 14px;
    color: #333;
}
.rest-pick-row:last-child { border-bottom: none; }
.rest-pick-row label { cursor: pointer; display: flex; align-items: center; gap: 6px; }
.rest-pick-row input { width: 16px; height: 16px; accent-color: #2e7d32; }
.vc-dot {
    position: absolute;
    top: 4px;
    left: 4px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.25);
}
.vc-dot-oil { background: #f57c00; }
.vc-dot-ele { background: #1e88e5; }
.vc-free    { background: #e8f5e9; color: #2e7d32; border-color: #a5d6a7; }
.vc-using   { background: #fdecea; color: #c62828; border-color: #ef9a9a; cursor: not-allowed; }
.vc-repair  { background: #eeeeee; color: #757575; border-color: #bdbdbd; }


/* ========== 车辆管理：行首标签 + 车号卡片 + 详细信息按钮 ========== */
.vehicle-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 0;
}
.vm-label {
    font-weight: 700;
    font-size: 18px;
    color: #1b5e20;
    white-space: nowrap;
    flex-shrink: 0;
}
.vehicle-bar #vehicleCardsApp,
.vehicle-bar #restCardsApp {
    flex: 1;
    min-width: 0;
    max-height: 220px;
}
/* 轮排姓名卡更紧凑：窄列 */
#restCardsApp { grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); }
.vm-detail-btn {
    flex-shrink: 0;
    height: 32px;
    padding: 0 16px;
    line-height: 32px;
    background: #1b5e20;
    color: #ffffff;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    cursor: pointer;
}
.vm-detail-btn:hover { background: #2e7d32; }

/* filter-bar 内也用 vm-detail-btn 样式（覆盖 .filter-bar button 的通用按钮样式） */
.filter-bar button.vm-detail-btn {
    flex-shrink: 0;
    height: 32px;
    padding: 0 16px;
    line-height: 32px;
    background: #1b5e20;
    color: #ffffff;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    cursor: pointer;
}
.filter-bar button.vm-detail-btn:hover { background: #2e7d32; }


/* ========== 车辆管理编辑弹窗（添加/修改/删除） ========== */
.vm-add-row {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}
.vm-add-row input {
    flex: 1;
    min-width: 0;
    padding: 8px 10px;
    border: 1px solid #c0c4cc;
    border-radius: 6px;
    font-size: 14px;
}
.vm-add-row select {
    flex-shrink: 0;
    padding: 8px 10px;
    border: 1px solid #c0c4cc;
    border-radius: 6px;
    font-size: 14px;
    background: #fff;
}
.vm-list {
    max-height: 380px;
    overflow-y: auto;
    border-top: 1px solid #eee;
}
.vm-empty {
    color: #999;
    text-align: center;
    padding: 30px;
}
.vm-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 4px;
    border-bottom: 1px solid #f0f0f0;
}
.vm-car {
    font-weight: 700;
    font-size: 15px;
    color: #1b5e20;
    width: 55px;
    flex-shrink: 0;
}
.vm-plate {
    flex: 1;
    font-size: 13px;
    color: #555;
    min-width: 60px;
}
.vm-energy {
    font-size: 12px;
    padding: 2px 8px;
    border-radius: 4px;
    background: #fff3e0;
    color: #e65100;
    flex-shrink: 0;
}
.vm-st {
    width: 110px;
    flex-shrink: 0;
    font-size: 13px;
    padding: 2px 8px;
    border-radius: 4px;
}
.vm-st-free   { background: #e8f5e9; color: #2e7d32; }
.vm-st-using  { background: #fdecea; color: #c62828; }
.vm-st-repair { background: #eeeeee; color: #757575; }
.vm-ops {
    display: flex;
    gap: 6px;
    margin-left: auto;
}
.vm-btn {
    padding: 5px 12px;
    font-size: 12px;
    border-radius: 6px;
}
.vm-btn-del { background: #fdecea; color: #c00; }

/* 修改车辆弹窗下拉 */
.ve-select {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #c0c4cc;
    border-radius: 6px;
    font-size: 14px;
    background: #fff;
    box-sizing: border-box;
}

/* ========== 车辆管理弹窗（表格版，覆盖旧样式） ========== */
.vm-add-row { display: flex; gap: 8px; margin-bottom: 14px; }
.vm-add-row input { flex: 1; min-width: 0; padding: 9px 10px; border: 1px solid #d0d5dd; border-radius: 6px; font-size: 14px; box-sizing: border-box; }
.vm-add-row select { width: 90px; padding: 9px 10px; border: 1px solid #d0d5dd; border-radius: 6px; font-size: 14px; background: #fff; box-sizing: border-box; }
.vm-table { width: 100%; border-collapse: collapse; margin-top: 2px; }
.vm-table th { background: #f7f8fa; color: #666; font-size: 13px; font-weight: 600; text-align: left; padding: 9px 12px; border-bottom: 1px solid #e5e7eb; }
.vm-table td { padding: 8px 12px; font-size: 14px; border-bottom: 1px solid #f0f0f0; vertical-align: middle; }
.vm-car { font-weight: 700; color: #1b5e20; }
.vm-plate { color: #555; }
.vm-energy { font-size: 12px; padding: 2px 9px; border-radius: 10px; background: #fff3e0; color: #e65100; display: inline-block; }
.vm-st { font-size: 12px; padding: 2px 9px; border-radius: 10px; display: inline-block; }
.vm-st-free { background: #e8f5e9; color: #2e7d32; }
.vm-st-using { background: #fdecea; color: #c62828; }
.vm-st-repair { background: #eeeeee; color: #757575; }
.vm-ops { text-align: right; white-space: nowrap; }
.vm-btn { padding: 4px 12px; font-size: 12px; border-radius: 6px; margin-left: 6px; }
.vm-btn-del { background: #fdecea; color: #c00; }
.vm-empty { color: #999; text-align: center; padding: 26px; }

/* 车辆列表滚动容器：车辆多时内部滚动、不超出屏幕，表头固定 */
.vm-table-wrap {
    max-height: 400px;
    overflow-y: auto;
    border: 1px solid #eee;
    border-radius: 6px;
}
.vm-table-wrap th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: #f7f8fa;
}
.vm-table-wrap::-webkit-scrollbar { width: 8px; }
.vm-table-wrap::-webkit-scrollbar-thumb { background: #c5cbd5; border-radius: 4px; }
.vm-table-wrap::-webkit-scrollbar-track { background: #f7f8fa; }

/* ========== 修改车辆弹窗（紧凑表单） ========== */
.edit-row { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.edit-row label { width: 70px; font-size: 14px; color: #555; flex-shrink: 0; }
.edit-row input,
.edit-row select { flex: 1; min-width: 0; padding: 9px 10px; border: 1px solid #d0d5dd; border-radius: 6px; font-size: 14px; box-sizing: border-box; background: #fff; }
.edit-row input:focus,
.edit-row select:focus { outline: none; border-color: #66bb6a; box-shadow: 0 0 0 2px rgba(102,187,106,0.2); }
.edit-save { width: 100%; background: #1b5e20; color: #fff; padding: 10px; border: none; border-radius: 6px; font-size: 15px; cursor: pointer; margin-top: 6px; }
.edit-save:hover { background: #2e7d32; }

/* 油车 / 电车颜色区分 */
.vm-energy { background: transparent; color: inherit; }
.vm-energy-oil { background: #fff3e0; color: #e65100; }   /* 油车 橙色 */
.vm-energy-ele { background: #e0f2fe; color: #0b5ca5; }   /* 电车 蓝色 */

/* 车辆管理表格：固定列宽，防止车牌号换行与操作列错位 */
.vm-table { table-layout: fixed; }
.vm-table th, .vm-table td { overflow: hidden; text-overflow: ellipsis; }
.vm-plate { white-space: nowrap; }
.vm-ops { white-space: nowrap; text-align: right; }

/* 禁止车辆表格横向滚动 */
.vm-table-wrap { overflow-x: hidden; }

/* 车辆管理表格表头居中 */
.vm-table th { text-align: center; }

/* 修改车辆弹窗：删除+保存按钮并排 */
.edit-actions { display: flex; gap: 10px; margin-top: 6px; }
/* 编辑弹窗：修改/删除按钮行平均分、等高、大小一致（覆盖 vm-detail-btn / edit-del） */
.edit-actions button { flex: 1 1 0; min-width: 0; height: 32px; line-height: 32px; padding: 0 12px; display: inline-flex; align-items: center; justify-content: center; }
/* 导入订单预览弹窗 */
.import-preview-stat { margin-bottom: 10px; font-size: 14px; color: #333; font-weight: 600; }
.import-preview-scroll { overflow: auto; max-height: 56vh; }
.import-preview-table { font-size: 12px; }
.import-preview-table th, .import-preview-table td { white-space: nowrap; padding: 6px 8px; }
/* 预览表头吸顶：下拉滚动时始终显示 */
.import-preview-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background-color: #e8f5e9;
}
/* 号牌打印弹窗 */
.ticket-modal-inner { width: 460px; }
/* 打印号牌弹窗始终置顶，避免被扫码登记等其他弹窗遮挡 */
#ticketModal { z-index: 20000; }
.ticket-setup { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 13px; }
.ticket-setup select { height: 32px; width: 100px; padding: 0 6px; border: 1px solid #c8e6c9; border-radius: 6px; }
.ticket-setup .hint { color: #999; font-size: 12px; }
.ticket-card { width: 80mm; box-sizing: border-box; border: 2px solid #1b5e20; border-radius: 4px; padding: 6mm 4mm; background: #fff; margin: 0 auto; }
.ticket-no { font-size: 20px; font-weight: 700; color: #1b5e20; text-align: center; border-bottom: 1px dashed #c8e6c9; padding-bottom: 5px; margin-bottom: 5px; }
.ticket-row { display: flex; justify-content: space-between; align-items: center; padding: 2px 0; font-size: 12px; }
.ticket-row span { color: #666; flex: 0 0 auto; }
.ticket-row b { color: #1b5e20; font-weight: 600; flex: 1 1 auto; text-align: right; word-break: break-all; overflow-wrap: anywhere; white-space: normal; }
/* 打印：只打印号牌卡片，隐藏页面其他内容 */
@media print {
    body * { visibility: hidden; }
    #ticketCard, #ticketCard * { visibility: visible; }
    #ticketCard { position: fixed; left: 0; top: 0; margin: 0; border: 2px solid #000; }
    .modal-overlay { background: #fff !important; }
}
/* 全局轻提示：灰色半透明、自动关闭（替代原生 alert） */
.toast-box { position: fixed; top: 56px; left: 50%; transform: translateX(-50%); z-index: 99999; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; max-width: 86%; }
.toast-item { background: rgba(60, 60, 60, 0.85); color: #fff; padding: 10px 18px; border-radius: 8px; font-size: 14px; line-height: 1.5; box-shadow: 0 2px 10px rgba(0,0,0,.25); opacity: 0; transform: translateY(-6px); transition: opacity .25s, transform .25s; white-space: pre-wrap; word-break: break-all; }
.toast-item.show { opacity: 1; transform: translateY(0); }
/* 学员自助预约二维码 */
.qr-hint { color: #888; font-size: 12px; margin-top: 6px; }
.ticket-set-check { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.tick-check { display: inline-flex; align-items: center; height: 32px; gap: 5px; font-size: 13px; color: #333; cursor: pointer; }
.tick-check input { width: 15px; height: 15px; accent-color: #1b5e20; }
.qr-modal-inner { width: 360px; text-align: center; }
.qr-canvas { display: flex; justify-content: center; margin: 8px 0; }
.qr-canvas img, .qr-canvas canvas { width: 200px; height: 200px; }
.qr-url { font-size: 13px; color: #333; word-break: break-all; background: #f5f5f5; border-radius: 6px; padding: 6px 10px; margin: 6px 0; }
.qr-tip { font-size: 12px; color: #888; text-align: left; line-height: 1.6; margin-top: 6px; }
.edit-save { flex: 1; width: auto; }
.edit-del { flex: 1; background: #c62828; color: #fff; padding: 10px; border: none; border-radius: 6px; font-size: 15px; cursor: pointer; }
.edit-del:hover { background: #d32f2f; }
/* 车辆列表行：双击修改提示 */
#vm_list tr { cursor: pointer; }
#vm_list tr:hover { background: #f5f8f5; }

/* 删除与保存按钮等宽 */
.edit-save, .edit-del { flex: 1 1 0; width: 50%; box-sizing: border-box; }

/* 删除与保存按钮绝对等高、文字居中 */
.edit-save, .edit-del { height: 40px; line-height: 20px; padding: 0; display: flex; align-items: center; justify-content: center; }

/* 教练呼叫确认（电脑端拦截弹窗） */
.edit-danger { background: #c62828; }
.edit-danger:hover { background: #d32f2f; }
.pending-call-info { border: 1px solid #e5e7eb; border-radius: 8px; padding: 8px 12px; }
.pending-row { display: flex; justify-content: space-between; align-items: center; padding: 7px 0; border-bottom: 1px dashed #eef0f2; }
.pending-row:last-child { border-bottom: none; }
.pending-label { color: #666; font-size: 14px; }
.pending-val { color: #111; font-size: 14px; font-weight: 600; }


/* 修正：保存按钮去除多余的上边距，与删除按钮对齐 */
.edit-save { margin-top: 0; }

/* 车辆管理表格：所有列内容居中 */
.vm-table td { text-align: center; }

/* ======================【页面头 / 页面尾】 ====================== */
.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px 20px;
    padding: 22px 28px;
    background: linear-gradient(135deg, #1b5e20, #2e7d32);
    color: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(27,94,32,.25);
    margin-bottom: 12px;
}
.ph-left { display: flex; align-items: center; }
.ph-title { font-size: 24px; font-weight: 700; letter-spacing: 1px; white-space: nowrap; }
.ph-right { font-size: 15px; opacity: .95; letter-spacing: 1px; display: flex; align-items: center; flex-wrap: wrap; gap: 4px 14px; }
.page-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px 20px;
    margin-top: 20px;
    background: #ffffff;
    border-radius: 12px;
    color: #8a8f98;
    font-size: 13px;
    box-shadow: 0 2px 8px rgba(0,0,0,.06);
}

/* ======================【管理员登录】 ====================== */
.login-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #e8f0e8, #f0f5f0);
}
.login-box {
    width: 360px;
    background: #fff;
    border-radius: 14px;
    padding: 36px 32px 28px;
    box-shadow: 0 10px 34px rgba(27,94,32,.18);
    text-align: center;
}
.login-box h2 { color: #1b5e20; margin: 0 0 4px; font-size: 16px; letter-spacing: 1px; }
.login-sub { color: #8a8f98; margin: 0 0 22px; font-size: 13px; }
.login-box input {
    width: 100%;
    padding: 11px 12px;
    border: 1px solid #d0d5dd;
    border-radius: 8px;
    font-size: 14px;
    box-sizing: border-box;
    margin-bottom: 12px;
    outline: none;
}
.login-box input:focus { border-color: #66bb6a; box-shadow: 0 0 0 2px rgba(102,187,106,.2); }
.login-btn {
    width: 100%;
    background: #1b5e20;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 11px;
    font-size: 15px;
    cursor: pointer;
    letter-spacing: 6px;
}
.login-btn:hover { background: #2e7d32; }
.login-msg { color: #c62828; font-size: 13px; margin-top: 10px; min-height: 18px; }
.ph-user { font-size: 15px; }
.ph-info { display: flex; flex-direction: column; align-items: center; gap: 5px; line-height: 1.15; margin-right: 14px; }
.ph-info-top { display: flex; align-items: center; gap: 4px; }
.ph-info .ph-settings { margin-right: 0; }
.ph-info .ph-user { margin-right: 0; }
.ph-coach-url {
    margin-right: 4px;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0;
    color: #e8f5e9;
    cursor: pointer;
    background: rgba(255,255,255,.16);
    border: 1px solid rgba(255,255,255,.35);
    padding: 6px 12px;
    border-radius: 6px;
    white-space: nowrap;
    user-select: all;
}
.ph-coach-url:hover { background: rgba(255,255,255,.32); color: #fff; }
.ph-urls { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; margin-right: 10px; }
.ph-urls .ph-coach-url { margin-right: 0; font-size: 13px; background: none; border: none; padding: 0; border-radius: 0; }
.ph-urls .ph-coach-url:hover { background: none; color: #fff; }
.ph-dash-url {
    font-size: 13px;
    font-weight: 600;
    color: #e8f5e9;
    cursor: pointer;
    white-space: nowrap;
    user-select: all;
}
.ph-dash-url:hover { color: #fff; }
.ph-settings {
    background: none;
    border: none;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    color: #fff;
    margin-right: 10px;
    padding: 0 2px;
    opacity: .95;
    transition: transform 0.2s;
}
.ph-settings:hover { transform: rotate(45deg); color: #fff; }
.ph-logout {
    margin-left: 4px;
    background: rgba(255,255,255,.18);
    color: #fff;
    border: 1px solid rgba(255,255,255,.55);
    border-radius: 6px;
    padding: 6px 16px;
    font-size: 14px;
    cursor: pointer;
}
.ph-logout:hover { background: rgba(255,255,255,.34); }

/* 系统设置页：价目表/场次表卡片对齐教练管理风格 */
.price-col .setting-block {
    border: 1px solid #dcedc8;
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    margin-bottom: 20px;
}
.price-col .setting-block .table-header-bar {
    justify-content: space-between;
    margin-bottom: 10px;
}
.price-col .setting-block .table-header-bar h3 { color: #2e7d32; }
.price-col .setting-block .table-header-bar button {
    background: #1b5e20;
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 6px 14px;
    font-size: 13px;
    cursor: pointer;
}
.price-col .setting-block .table-header-bar button:hover { background: #2e7d32; }

/* 价目/场次表空态 */
.td-empty { text-align: center; color: #999; padding: 20px 10px; }

/* 价目/场次卡片空态 */
.mc-empty { grid-column: 1 / -1; text-align: center; color: #999; padding: 30px 0; }

/* ======================【大表格弹窗：模拟数据明细 / 操作日志】位置：左右居中、上下靠上；整体限定在视口内，内容多时内部滚动 ====================== */
#simHistoryModal,
#modalOpLog {
    align-items: flex-start;   /* 纵向靠上（不再垂直居中） */
    justify-content: center;   /* 横向居中 */
}

#simHistoryModal .modal-inner,
#modalOpLog .modal-inner {
    box-sizing: border-box;
    margin: 4vh auto 0;        /* 距屏幕顶部 4vh，水平居中 */
    max-height: 88vh;
    overflow: auto;
}

/* 滚动时表头吸附在弹窗顶部，始终可见 */
#simHistoryModal .appoint-table thead th,
#modalOpLog .appoint-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
}

/* 操作日志筛选区：日期/动作/关键字/按钮统一尺寸（原先用的是 .filter-bar-row，没有尺寸规则，控件各按浏览器原生大小显示） */
#modalOpLog .filter-bar-row input,
#modalOpLog .filter-bar-row select {
    box-sizing: border-box;
    height: 32px;
    padding: 0 8px;
    font-size: 14px;
    color: #333;
    border: 1px solid #d5dae0;
    border-radius: 4px;
    background: #fff;
    outline: none;
}

#modalOpLog .filter-bar-row input:focus,
#modalOpLog .filter-bar-row select:focus {
    border-color: #2e7d32;
}

#oplogStart, #oplogEnd { width: 140px; }
#oplogAction { width: 120px; }
#oplogKeyword { width: 200px; }

#modalOpLog .filter-bar-row button {
    box-sizing: border-box;
    height: 32px;
    padding: 0 16px;
    font-size: 14px;
    border-radius: 4px;
    line-height: 1;
}

#modalOpLog .filter-bar-row label {
    font-size: 14px;
    color: #555;
}

/* 模拟数据明细弹窗筛选区：与操作日志筛选区统一尺寸 */
#simHistoryModal .filter-bar-row input {
    box-sizing: border-box;
    height: 32px;
    padding: 0 8px;
    font-size: 14px;
    color: #333;
    border: 1px solid #d5dae0;
    border-radius: 4px;
    background: #fff;
    outline: none;
}

#simHistoryModal .filter-bar-row input:focus {
    border-color: #2e7d32;
}

#simHistoryDate { width: 140px; }

#simHistoryModal .filter-bar-row label {
    font-size: 14px;
    color: #555;
}