/* ═══════════════════════════════════════════════════════════════  
   成绩查询前端样式  
   命名规范：所有 class 以 .eq- 开头，避免与主题样式冲突  
   ═══════════════════════════════════════════════════════════════ */  

/* ─────────────────────────────────────────────────────────────  
   CSS 自定义属性（主题变量，可被子主题覆盖）  
   ───────────────────────────────────────────────────────────── */  
:root {  
    --eq-primary:       #2271b1;   /* 主色：蓝色 */  
    --eq-primary-hover: #135e96;   /* 主色 hover */  
    --eq-success:       #00a32a;   /* 成功绿 */  
    --eq-danger:        #d63638;   /* 危险红 */  
    --eq-warning:       #dba617;   /* 警告黄 */  
    --eq-gray-100:      #F7F8FA;   /* 浅灰背景 */  
    --eq-gray-200:      #dcdcde;   /* 边框灰 */  
    --eq-gray-700:      #3c434a;   /* 深灰文字 */  
    --eq-radius:        20px;       /* 圆角 */  
    --eq-shadow:        0px 15px 30px 0px #ECEDEE /* 卡片阴影 */  
    --eq-transition:    0.2s ease; /* 过渡时间 */  
}  

/* ─────────────────────────────────────────────────────────────  
   1. 整体容器  
   ───────────────────────────────────────────────────────────── */  

.eq-wrap {  
    /*max-width: 700px;  */
    margin: 0 auto;  
    font-family: -apple-system, BlinkMacSystemFont,  
                 "Segoe UI", "PingFang SC", "Microsoft YaHei",  
                 sans-serif;  
    font-size: 15px;  
    color: var(--eq-gray-700);  
    line-height: 1.6;  
}  

/* 标题 */  
.eq-title {  
    font-size: 22px;  
    font-weight: 700;  
    margin: 0 0 20px;  
    padding-bottom: 12px;  
    border-bottom: 2px solid var(--eq-primary);  
    color: var(--eq-gray-700);  
    display:none;
}  

/* ─────────────────────────────────────────────────────────────  
   2. 查询表单  
   ───────────────────────────────────────────────────────────── */  

.eq-form {  
    background: #F7F8FA;  
    border: 0px solid var(--eq-gray-200);  
    border-radius: var(--eq-radius);  
    padding: 80px 80px;  
    box-shadow: var(--eq-shadow);  
}  
.eq-form-field-container{
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: center;
    align-items: flex-end;
    gap:30px;
}

/* 字段行 */  
.eq-field-wrap {  
    margin-bottom: 16px;  
    width: 25%;
}  
.eq-captcha-wrap-container{
    display: flex;
    order: 2;
}
    .eq-captcha-refresh{
        display: none;
    }
    .eq-captcha-row{
        flex-direction: row;
    }

@media (max-width:1024px){
    .eq-form{
        padding: 80px 20px 60px 20px;  
    }
    .eq-form-field-container{
        flex-wrap: wrap;
        gap:20px;
        align-items: flex-start;
    }
    .eq-field-wrap {  
        width: 25%;
    }  
    .eq-field-wrap.eq-captcha-wrap{
        
    }
    .eq-submit-wrap{
        width: 100%;
        margin-bottom: 0!important;
    }

}
@media (max-width:768px){
    /* 表单内边距缩小 */
    .eq-form {
    padding: 40px 20px 30px 20px;
    }
    .eq-form-field-container{
    flex-direction: column;
    gap:5px;
    }
    .eq-field-wrap{
        width:100%;
    }
    .eq-label{
        font-size:16px!important;
        margin-bottom: 0!important;
    }
    .eq-captcha-row{
        flex-direction: row;
    }
    .eq-input-captcha{
        max-width: calc(100% - 100px)!important;
    }
    .eq-input{
        height:35px!important;
    }
    button[type="submit"].eq-btn-submit{
        max-width: 100px;
        font-size: 14px!important;
        line-height: 1em;
        padding-block-start: 10px;
        padding-block-end: 10px;
        padding-inline-start: 20px;
        padding-inline-end: 20px;
        font-weight: normal;
        height: auto!important;
    }
}

.eq-field-wrap:last-of-type {  
    margin-bottom: 0;  
}  

/* 标签 */  
.eq-label {  
    display: block;  
    font-size: 18px;  
    font-weight: 600;  
    margin-bottom: 6px;  
    color: var(--eq-gray-700);  
}  

/* 必填星号 */  
.eq-required {  
    color: var(--eq-danger);  
    margin-left: 3px;  
    font-weight: 700;  
}  

/* 输入框通用 */  
.eq-input {  
    display: block;  
    width: 100%;  
    height: 42px;  
    padding: 0 12px;  
    border: 1px solid var(--eq-gray-200);  
    border-radius: var(--eq-radius);  
    font-size: 15px;  
    color: var(--eq-gray-700);  
    background: #fff;  
    transition: border-color var(--eq-transition),  
                box-shadow var(--eq-transition);  
    box-sizing: border-box;  
    outline: none;  
    -webkit-appearance: none;  
    appearance: none;  
}  

.eq-input:focus {  
    border-color: var(--eq-primary);  
    box-shadow: 0 0 0 2px rgba(34, 113, 177, 0.18);  
}  

.eq-input::placeholder {  
    color: #a7aaad;  
    font-size: 14px;  
}  

/* ─────────────────────────────────────────────────────────────  
   3. 验证码区域  
   ───────────────────────────────────────────────────────────── */  

.eq-captcha-row {  
    display: flex;  
    align-items: center;  
    gap: 10px;  
    flex-wrap: nowrap;  
}  

/* 验证码输入框（宽度缩短，与图片并排）*/  
.eq-input-captcha {  
    flex: 1;  
    min-width: 120px;  
    max-width: 200px;  
    font-size: 18px;  
    text-transform: uppercase;  
}  

/* 验证码图片容器（含 loading 遮罩）*/  
.eq-captcha-img-wrap {  
    position: relative;  
    width: 100px;  
    height: 33px;  
    border-radius: 0;  
    overflow: hidden;  
    cursor: pointer;  
    flex-shrink: 0;  
    border: 1px solid var(--eq-gray-200);  
    transition: opacity var(--eq-transition);  
}  

.eq-captcha-img-wrap:hover {  
    opacity: 0.85;  
}  

/* 验证码图片 */  
.eq-captcha-img {  
    display: block;  
    width: 100px;  
    height: 33px;  
    object-fit: contain;  
}  

/* loading 遮罩（刷新时显示）*/  
.eq-captcha-loading {  
    position: absolute;  
    inset: 0;  
    background: rgba(255, 255, 255, 0.85);  
    display: flex;  
    align-items: center;  
    justify-content: center;  
    opacity: 0;  
    pointer-events: none;  
    transition: opacity var(--eq-transition);  
}  

.eq-captcha-loading.is-visible {  
    opacity: 1;  
}  

/* 刷新文字按钮 */  
.eq-captcha-refresh {  
    background: none!important;  
    border: none;  
    border-radius: 0!important;
    padding: 0;  
    font-size: 13px;  
    color: var(--eq-primary);  
    cursor: pointer;  
    white-space: nowrap;  
    text-decoration: underline;  
    text-underline-offset: 2px;  
    transition: color var(--eq-transition);  
}  

.eq-captcha-refresh:hover,
.eq-captcha-refresh:before{  
    color: var(--eq-primary-hover);  
    background: none!important;
    border-radius: 0!important;
}  

/* ─────────────────────────────────────────────────────────────  
   4. 表单错误提示  
   ───────────────────────────────────────────────────────────── */  

.eq-form-error {  
    display: none;  
    margin-top: 12px;  
    padding: 10px 14px;  
    background: #fcf0f1;  
    border: 1px solid #f8d7da;  
    border-left: 4px solid var(--eq-danger);  
    border-radius: var(--eq-radius);  
    color: var(--eq-danger);  
    font-size: 14px;  
    line-height: 1.5;  
    animation: eqFadeIn 0.2s ease;  
}  

.eq-form-error.is-visible {  
    display: block;  
}  

/* ─────────────────────────────────────────────────────────────  
   5. 提交按钮  
   ───────────────────────────────────────────────────────────── */  

.eq-submit-wrap {  
    margin-bottom: 20px;  
    text-align: center;  
    
}  

.eq-btn {  
    display: inline-flex;  
    align-items: center;  
    justify-content: center;  
    gap: 6px;  
    padding: 10px 28px;  
    border: none;  
    border-radius: var(--eq-radius);  
    font-size: 15px;  
    font-weight: 600;  
    cursor: pointer;  
    transition: background var(--eq-transition),  
                opacity var(--eq-transition),  
                transform 0.1s ease;  
    outline: none;  
    -webkit-appearance: none;  
    appearance: none;  
}  

.eq-btn:active {  
    transform: scale( 0.97 );  
}  

/* 主按钮 */  
.eq-btn-submit {  
    background: var(--eq-primary);  
    color: #fff;  
    min-width: 140px;  
    height: 46px;  
    font-size: 16px;  
    letter-spacing: 2px;  
    box-shadow: 0 2px 6px rgba(34, 113, 177, 0.3);  
}  

.eq-btn-submit:hover:not(:disabled) {  
    background: var(--eq-primary-hover);  
}  

.eq-btn-submit:disabled {  
    opacity: 0.7;  
    cursor: not-allowed;  
}  

/* 按钮内 loading 状态 */  
.eq-btn-loading {  
    display: none;  
    align-items: center;  
    gap: 6px;  
}  

/* ─────────────────────────────────────────────────────────────  
   6. Spinner 动画  
   ───────────────────────────────────────────────────────────── */  

.eq-spinner {  
    display: inline-block;  
    width: 14px;  
    height: 14px;  
    border: 2px solid currentColor;  
    border-top-color: transparent;  
    border-radius: 50%;  
    animation: eqSpin 0.7s linear infinite;  
    vertical-align: middle;  
    opacity: 0.8;  
}  

@keyframes eqSpin {  
    to { transform: rotate(360deg); }  
}  

@keyframes eqFadeIn {  
    from { opacity: 0; transform: translateY(-4px); }  
    to   { opacity: 1; transform: translateY(0); }  
}  

/* ─────────────────────────────────────────────────────────────  
   7. 查询结果区域  
   ───────────────────────────────────────────────────────────── */  

.eq-results-wrap {  
    margin-top: 24px;  
    border: 1px solid var(--eq-gray-200);  
    border-radius: var(--eq-radius);  
    overflow: hidden;  
    box-shadow: var(--eq-shadow);  
    background: #fff;  
}  

/* 结果头部 */  
.eq-results-header {  
    display: flex;  
    align-items: center;  
    justify-content: space-between;  
    padding: 12px 16px;  
    background: var(--eq-gray-100);  
    border-bottom: 1px solid var(--eq-gray-200);  
    font-size: 14px;  
}  

.eq-results-count {  
    color: var(--eq-gray-700);  
}  

.eq-results-count strong {  
    color: var(--eq-primary);  
    font-size: 16px;  
}  

/* 关闭结果按钮 */  
.eq-btn-close-results {  
    background: none;  
    border: none;  
    padding: 2px 8px;  
    font-size: 13px;  
    color: #787c82;  
    cursor: pointer;  
    border-radius: 3px;  
    transition: color var(--eq-transition),  
                background var(--eq-transition);  
}  

.eq-btn-close-results:hover {  
    color: var(--eq-danger);  
    background: #fcf0f1;  
}  

/* ─────────────────────────────────────────────────────────────  
   8. 成绩列表表格  
   ───────────────────────────────────────────────────────────── */  

.eq-table-wrap {  
    overflow-x: auto;  
    -webkit-overflow-scrolling: touch;  
}  

.eq-results-table {  
    width: 100%;  
    border-collapse: collapse;  
    font-size: 14px;  
    white-space: nowrap;  
}  

/* 表头 */  
.eq-results-table thead tr {  
    background: #f0f4f8;  
}  

.eq-results-table th {  
    padding: 10px 14px;  
    text-align: left;  
    font-weight: 600;  
    font-size: 13px;  
    color: #50575e;  
    border-bottom: 2px solid var(--eq-gray-200);  
    letter-spacing: 0.5px;  
}  

/* 数据行 */  
.eq-result-row td {  
    padding: 11px 14px;  
    border-bottom: 1px solid #f0f0f1;  
    vertical-align: middle;  
    color: var(--eq-gray-700);  
    transition: background var(--eq-transition);  
}  

.eq-result-row:hover td {  
    background: #f9fbfd;  
}  

.eq-result-row:last-child td {  
    border-bottom: none;  
}  

/* 列宽控制 */  
.eq-col-seq     { width: 50px;  text-align: center; }  
.eq-col-subject { min-width: 100px; }  
.eq-col-session { min-width: 80px; }  
.eq-col-date    { min-width: 100px; }  
.eq-col-no      { min-width: 120px; }  
.eq-col-status  { width: 70px;  text-align: center; }  
.eq-col-actions { width: 90px;  text-align: center; }  

/* 脱敏考号 */  
.eq-masked-no {  
    font-family: monospace;  
    letter-spacing: 1px;  
    color: #50575e;  
    cursor: help;  
    border-bottom: 1px dashed var(--eq-gray-200);  
}  

/* ─────────────────────────────────────────────────────────────  
   9. 状态徽标  
   ───────────────────────────────────────────────────────────── */  

.eq-status-badge {  
    display: inline-block;  
    padding: 2px 10px;  
    border-radius: 20px;  
    font-size: 12px;  
    font-weight: 600;  
    line-height: 1.8;  
    letter-spacing: 0.5px;  
}  

.eq-status-normal {  
    background: #edfaef;  
    color: #00692b;  
    border: 1px solid #b8e6c1;  
}  

.eq-status-absent {  
    background: #fff8e5;  
    color: #8a5e00;  
    border: 1px solid #f5d67a;  
}  

.eq-status-void {  
    background: #fcf0f1;  
    color: #8d1f24;  
    border: 1px solid #f5c2c4;  
}  

/* 详情页大号状态徽标 */  
.eq-status-lg {  
    padding: 4px 14px;  
    font-size: 14px;  
}  

/* ─────────────────────────────────────────────────────────────  
   10. "查看详情"按钮  
   ───────────────────────────────────────────────────────────── */  

.eq-btn-detail {  
    background: #fff;  
    color: var(--eq-primary);  
    border: 1px solid var(--eq-primary);  
    padding: 4px 12px;  
    font-size: 13px;  
    font-weight: 500;  
    border-radius: 4px;  
    cursor: pointer;  
    transition: background var(--eq-transition),  
                color var(--eq-transition);  
    white-space: nowrap;  
}  

.eq-btn-detail:hover:not(:disabled) {  
    background: var(--eq-primary);  
    color: #fff;  
}  

.eq-btn-detail:disabled {  
    opacity: 0.6;  
    cursor: not-allowed;  
}  

/* ─────────────────────────────────────────────────────────────  
   11. 详情展开行  
   ───────────────────────────────────────────────────────────── */  

.eq-detail-row td.eq-detail-cell {  
    padding: 0;  
    background: #f8fafc;  
    border-bottom: 1px solid var(--eq-gray-200);  
}  

.eq-detail-content {  
    padding: 20px 24px;  
}  

/* 详情加载占位 */  
.eq-detail-placeholder {  
    display: flex;  
    align-items: center;  
    gap: 8px;  
    color: #787c82;  
    font-size: 14px;  
    padding: 8px 0;  
}  

/* 详情加载失败 */  
.eq-detail-error {  
    color: var(--eq-danger);  
    font-size: 14px;  
    margin: 0;  
    padding: 4px 0;  
}  

/* ─────────────────────────────────────────────────────────────  
   12. 详情卡片（query-detail.php 内容）  
   ───────────────────────────────────────────────────────────── */  

.eq-detail-card {  
    border: 1px solid #dde3ea;  
    border-radius: var(--eq-radius);  
    overflow: hidden;  
    background: #fff;  
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.06);  
    animation: eqFadeIn 0.25s ease;  
}  

/* 卡片头部 */  
.eq-detail-header {  
    display: flex;  
    align-items: center;  
    justify-content: space-between;  
    padding: 14px 20px;  
    background: linear-gradient(135deg, #f0f4f8 0%, #e8f0f8 100%);  
    border-bottom: 1px solid #dde3ea;  
    gap: 12px;  
    flex-wrap: wrap;  
}  

.eq-detail-title {  
    margin: 0;  
    font-size: 16px;  
    font-weight: 700;  
    color: var(--eq-gray-700);  
}  

/* 信息区块 */  
.eq-detail-section {  
    padding: 16px 20px;  
    border-bottom: 1px solid #f0f0f1;  
}  

.eq-detail-section:last-of-type {  
    border-bottom: none;  
}  

.eq-detail-section-title {  
    margin: 0 0 12px;  
    font-size: 13px;  
    font-weight: 700;  
    color: #787c82;  
    text-transform: uppercase;  
    letter-spacing: 1px;  
}  

/* 键值对列表 */  
.eq-detail-dl {  
    margin: 0;  
    display: grid;  
    grid-template-columns: 1fr 1fr;  
    gap: 10px 20px;  
}  

.eq-detail-row {  
    display: contents;  
}  

.eq-detail-dt {  
    font-size: 13px;  
    color: #787c82;  
    font-weight: 500;  
    align-self: center;  
}  

.eq-detail-dd {  
    margin: 0;  
    font-size: 15px;  
    font-weight: 600;  
    color: var(--eq-gray-700);  
    align-self: center;  
}  

/* 空值占位 */  
.eq-val-empty {  
    color: #a7aaad;  
    font-weight: 400;  
}  

/* ─────────────────────────────────────────────────────────────  
   13. 成绩分数网格  
   ───────────────────────────────────────────────────────────── */  

.eq-score-grid {  
    display: grid;  
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));  
    gap: 12px;  
}  

.eq-score-item {  
    background: var(--eq-gray-100);  
    border: 1px solid var(--eq-gray-200);  
    border-radius: var(--eq-radius);  
    padding: 12px 16px;  
    text-align: center;  
    transition: box-shadow var(--eq-transition);  
}  

.eq-score-item:hover {  
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);  
}  

.eq-score-label {  
    display: block;  
    font-size: 12px;  
    color: #787c82;  
    margin-bottom: 6px;  
    font-weight: 500;  
}  

.eq-score-value {  
    display: block;  
    font-size: 24px;  
    font-weight: 700;  
    color: var(--eq-primary);  
    line-height: 1.2;  
}  

.eq-score-unit {  
    font-size: 13px;  
    font-weight: 400;  
    color: #787c82;  
    margin-left: 2px;  
}  

/* 综合成绩高亮 

/* 综合成绩高亮卡片 */
.eq-score-overall {
background: linear-gradient(135deg, #eef4fb 0%, #ddeaf8 100%);
border-color: #b8d4f0;
}

.eq-score-value-lg {
font-size: 32px;
color: var(--eq-primary);
}

/* ─────────────────────────────────────────────────────────────
14. 备注区
───────────────────────────────────────────────────────────── */

.eq-detail-remark-section {
background: #fffbf0;
border-top: 1px solid #f5e6b8;
}

.eq-detail-remark {
margin: 0;
font-size: 14px;
color: #6d5a00;
line-height: 1.7;
padding: 4px 0;
white-space: pre-wrap; /* 保留备注中的换行 */
}

/* ─────────────────────────────────────────────────────────────
15. 详情卡片底部
───────────────────────────────────────────────────────────── */

.eq-detail-footer {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 20px;
background: var(--eq-gray-100);
border-top: 1px solid var(--eq-gray-200);
gap: 12px;
flex-wrap: wrap;
}

/* 收起详情按钮 */
.eq-btn-close-detail {
background: #fff;
color: #50575e;
border: 1px solid var(--eq-gray-200);
padding: 6px 16px;
font-size: 13px;
font-weight: 500;
border-radius: 4px;
cursor: pointer;
transition: background var(--eq-transition),
border-color var(--eq-transition),
color var(--eq-transition);
white-space: nowrap;
}

.eq-btn-close-detail:hover {
background: var(--eq-gray-200);
color: var(--eq-gray-700);
}

/* 底部提示文字 */
.eq-detail-tip {
font-size: 12px;
color: #a7aaad;
line-height: 1.5;
}

/* ─────────────────────────────────────────────────────────────
16. 响应式：平板（≤ 768px）
───────────────────────────────────────────────────────────── */

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

/* 验证码行允许换行 */
.eq-captcha-row {
flex-wrap: wrap;
gap: 8px;
}

/* 验证码输入框占满一行 */
.eq-input-captcha {
/*flex: 0 0 100%;*/
order: 1;
}

/* 图片 + 刷新按钮在同一行 */
.eq-captcha-img-wrap {
order: 2;
}

.eq-captcha-refresh {
order: 3;
}

/* 表格横向滚动 */
.eq-table-wrap {
overflow-x: auto;
}

/* 隐藏部分列（考次、日期）节省空间 */
.eq-col-session {
display: none;
}

/* 分数网格：两列 */
.eq-score-grid {
grid-template-columns: 1fr 1fr;
}

/* 详情 dl 改为单列 */
.eq-detail-dl {
grid-template-columns: 1fr;
gap: 8px;
}

.eq-detail-dt {
font-size: 12px;
color: #a7aaad;
margin-bottom: 0;
}

/* 详情头部垂直排列 */
.eq-detail-header {
flex-direction: column;
align-items: flex-start;
gap: 8px;
}

/* 详情底部垂直排列 */
.eq-detail-footer {
flex-direction: column;
align-items: flex-start;
gap: 8px;
}

}

/* ─────────────────────────────────────────────────────────────
17. 响应式：手机（≤ 480px）
───────────────────────────────────────────────────────────── */

@media screen and (max-width: 480px) {

/* 标题缩小 */
.eq-title {
font-size: 18px;
}

/* 分数网格：手机单列 */
.eq-score-grid {
grid-template-columns: 1fr;
}

/* 综合成绩字体缩小 */
.eq-score-value-lg {
font-size: 26px;
}

/* 隐藏准考证号列（可通过详情查看）*/
.eq-col-no {
display: none;
}

/* 提交按钮全宽 */
.eq-btn-submit {
width: 100%;
}

/* 结果头部垂直排列 */
.eq-results-header {
flex-direction: column;
align-items: flex-start;
gap: 6px;
}

}

/* ─────────────────────────────────────────────────────────────
18. 无障碍：高对比度模式适配
───────────────────────────────────────────────────────────── */

@media (forced-colors: active) {

.eq-status-badge {
border: 2px solid ButtonText;
}

.eq-btn,
.eq-btn-detail,
.eq-btn-close-detail {
border: 2px solid ButtonText;
}

.eq-captcha-img-wrap {
border: 2px solid ButtonText;
}

}

/* ─────────────────────────────────────────────────────────────
19. 无障碍：减少动画（尊重系统偏好）
───────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {

*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}

}

/* ─────────────────────────────────────────────────────────────
20. 打印样式
───────────────────────────────────────────────────────────── */

@media print {

/* 隐藏操作按钮和验证码区域 */
.eq-form,
.eq-col-actions,
.eq-btn-close-results,
.eq-btn-close-detail,
.eq-detail-footer {
display: none !important;
}

/* 展开所有详情行 */
.eq-detail-row {
display: table-row !important;
}

/* 移除阴影和边框 */
.eq-results-wrap,
.eq-detail-card {
box-shadow: none;
border: 1px solid #000;
}

/* 表格头部黑底白字 */
.eq-results-table thead tr {
background: #000 !important;
color: #fff !important;
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}

/* 分数卡片边框加深 */
.eq-score-item {
border: 1px solid #666;
background: #fff !important;
}

}



/* ═══════════════════════════════════════════════════════════════  
   作废名单样式补充  
   命名规范：所有 class 以 .ev- 开头，与查询模块 .eq- 隔离  
   ═══════════════════════════════════════════════════════════════ */  

/* ─────────────────────────────────────────────────────────────  
   1. 整体容器  
   ───────────────────────────────────────────────────────────── */  

.ev-wrap {  
    /*max-width: 900px;  */
    margin: 0 auto;  
    font-family: -apple-system, BlinkMacSystemFont,  
                 "Segoe UI", "PingFang SC", "Microsoft YaHei",  
                 sans-serif;  
    font-size: 16px;  
    color: var(--eq-gray-700, #3c434a);  
    line-height: 1.6;  
}  

/* 标题 */  
.ev-title {  
    font-size: 22px;  
    font-weight: 700;  
    margin: 0 0 20px;  
    padding-bottom: 12px;  
    border-bottom: 2px solid var(--eq-danger, #d63638);  
    color: var(--eq-gray-700, #3c434a);  
    display: none;
}  

/* ─────────────────────────────────────────────────────────────  
   2. 科目筛选  
   ───────────────────────────────────────────────────────────── */  

.ev-filter-wrap {  
    display: flex;  
    align-items: center;  
    gap: 10px;  
    margin-bottom: 14px;  
    flex-wrap: wrap;  
}  

.ev-filter-label {  
    font-size: 14px;  
    font-weight: 600;  
    color: #50575e;  
    white-space: nowrap;  
}  

.ev-filter-subject {  
    height: 38px;  
    padding: 0 32px 0 12px;  
    border: 1px solid var(--eq-gray-200, #dcdcde);  
    border-radius: var(--eq-radius, 6px);  
    font-size: 14px;  
    color: var(--eq-gray-700, #3c434a);  
    background: #fff;  
    cursor: pointer;  
    transition: border-color var(--eq-transition, 0.2s ease);  
    appearance: none;  
    -webkit-appearance: none;  
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2350575e' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");  
    background-repeat: no-repeat;  
    background-position: right 10px center;  
    min-width: 160px;  
}  

.ev-filter-subject:focus {  
    outline: none;  
    border-color: var(--eq-primary, #2271b1);  
    box-shadow: 0 0 0 2px rgba(34, 113, 177, 0.18);  
}  

/* ─────────────────────────────────────────────────────────────  
   3. 统计信息  
   ───────────────────────────────────────────────────────────── */  

.ev-stats {  
    font-size: 13px;  
    color: #787c82;  
    margin-bottom: 12px;  
    padding: 6px 12px;  
    background: #f6f7f7;  
    border-radius: 4px;  
    border-left: 3px solid var(--eq-danger, #d63638);  
}  

.ev-stats strong {  
    color: var(--eq-danger, #d63638);  
    font-size: 15px;  
}  

/* ─────────────────────────────────────────────────────────────  
   4. 表格容器  
   ───────────────────────────────────────────────────────────── */  

.ev-table-container {  
    position: relative; /* 用于 loading 遮罩定位 */  
    min-height: 60px;  
}  

.ev-table-wrap {  
    overflow-x: auto;  
    -webkit-overflow-scrolling: touch;  
    border: 0px solid var(--eq-gray-200, #dcdcde);  
    border-radius: var(--eq-radius, 6px);  
    box-shadow: none;  
    padding: 80px 80px;
    background: #F7F8FA;
}  

.ev-recent-notice-wrap{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap:0 20px;
}
.ev-one-notice{
    border-bottom: 1px solid #0000001a;
    padding-bottom: 10px;
    margin-bottom: 10px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 10px;
    align-items: flex-start;
    width: calc(50% - 10px);
}

.ev-one-col-tag{
    border-radius: 20px;
    background: #FF4534;
    font-size: 12px;
    text-align: center;
    width: auto;
    line-height: 20px;
    height: 20px;
    padding:0 8px;
    color: #fff;
    white-space: nowrap;
}
.ev-one-col-name{
    font-size: 14px;
}

@media (max-width: 1024px) {
    .ev-table-wrap {
        padding: 80px 20px 60px 20px;
    }
}

@media (max-width: 768px) {
    .ev-table-wrap {
        padding: 40px 20px 30px 20px;
    }
    .ev-more-wrap{
        max-width: 150px!important;
    }
    .ev-btn-more{
        height: 35px!important;
    }
    .ev-recent-notice-wrap{
        gap: 0;
    }
    .ev-one-notice{
        width: 100%;
    }
}




/* ─────────────────────────────────────────────────────────────  
   5. 作废名单表格  
   ───────────────────────────────────────────────────────────── */  

.ev-table {  
    width: 100%;  
    border-collapse: collapse;  
    font-size: 14px;  
    background: #fff;  
    white-space: nowrap;  
}  

/* 表头 */  
.ev-table thead tr {  
    background: #fdf2f2; /* 浅红色底，与作废主题呼应 */  
}  

.ev-table th {  
    padding: 10px 14px;  
    text-align: left;  
    font-weight: 700;  
    font-size: 13px;  
    color: #8d1f24;  
    border-bottom: 2px solid #f5c2c4;  
    letter-spacing: 0.5px;  
}  

/* 数据行 */  
.ev-row td {  
    padding: 10px 14px;  
    border-bottom: 1px solid #f5f5f5;  
    vertical-align: middle;  
    color: var(--eq-gray-700, #3c434a);  
    transition: background 0.15s ease;  
}  

.ev-row:hover td {  
    background: #fff8f8;  
}  

.ev-row:last-child td {  
    border-bottom: none;  
}  

/* 空数据行 */  
.ev-row-empty td.ev-empty-cell,  
.ev-empty {  
    text-align: center;  
    padding: 28px;  
    color: #a7aaad;  
    font-size: 14px;  
}  

/* 列宽控制 */  
.ev-col-seq     { width: 50px;  text-align: center; }  
.ev-col-name    { min-width: 80px; }  
.ev-col-no      { min-width: 140px; font-family: monospace; }  
.ev-col-subject { min-width: 100px; }  
.ev-col-session { min-width: 80px; }  
.ev-col-date    { min-width: 100px; }  
.ev-col-remark  { min-width: 120px; white-space: normal; }  

/* 脱敏考号 */  
.ev-masked-no {  
    /*font-family: "Courier New", Courier, monospace;  */
    letter-spacing: 0.5px;  
    color: #50575e;  
    cursor: help;  
    border-bottom: 1px dashed var(--eq-gray-200, #dcdcde);  
    /*font-size: 13px;  */
}  

/* 空值占位 */  
.ev-val-empty {  
    color: #a7aaad;  
    font-weight: 400;  
}  

/* ─────────────────────────────────────────────────────────────  
   6. loading 遮罩  
   ───────────────────────────────────────────────────────────── */  

.ev-loading-mask {  
    position: absolute;  
    inset: 0;  
    background: rgba(255, 255, 255, 0.82);  
    display: flex;  
    align-items: center;  
    justify-content: center;  
    gap: 8px;  
    font-size: 14px;  
    color: #787c82;  
    z-index: 10;  
    border-radius: var(--eq-radius, 6px);  
}  

/* spinner 复用 .eq-spinner 动画，单独定义避免依赖 */  
.ev-spinner {  
    display: inline-block;  
    width: 16px;  
    height: 16px;  
    border: 2px solid #dcdcde;  
    border-top-color: var(--eq-primary, #2271b1);  
    border-radius: 50%;  
    animation: evSpin 0.7s linear infinite;  
    flex-shrink: 0;  
}  

@keyframes evSpin {  
    to { transform: rotate(360deg); }  
}  

/* ─────────────────────────────────────────────────────────────  
   7. AJAX 错误提示  
   ───────────────────────────────────────────────────────────── */  

.ev-ajax-error {  
    margin-bottom: 12px;  
    padding: 10px 14px;  
    background: #fcf0f1;  
    border: 1px solid #f8d7da;  
    border-left: 4px solid var(--eq-danger, #d63638);  
    border-radius: var(--eq-radius, 6px);  
    color: var(--eq-danger, #d63638);  
    font-size: 14px;  
    animation: evFadeIn 0.2s ease;  
}  

@keyframes evFadeIn {  
    from { opacity: 0; transform: translateY(-4px); }  
    to   { opacity: 1; transform: translateY(0); }  
}  

/* ─────────────────────────────────────────────────────────────  
   8. 分页控件  
   ───────────────────────────────────────────────────────────── */  

.ev-pagination {  
    display: flex;  
    align-items: center;  
    justify-content: center;  
    gap: 14px;  
    margin-top: 20px;  
    flex-wrap: wrap;  
}  

/* 上一页 / 下一页按钮 */  
.ev-page-btn {  
    display: inline-flex;  
    align-items: center;  
    gap: 4px;  
    height: 36px;  
    padding: 0 16px;  
    background: #fff;  
    border: 1px solid var(--eq-gray-200, #dcdcde);  
    border-radius: var(--eq-radius, 6px);  
    font-size: 14px;  
    font-weight: 500;  
    color: var(--eq-primary, #2271b1);  
    cursor: pointer;  
    transition: background 0.2s ease,  
                border-color 0.2s ease,  
                color 0.2s ease;  
    white-space: nowrap;  
}  

.ev-page-btn:hover:not(:disabled) {  
    background: var(--eq-primary, #2271b1);  
    border-color: var(--eq-primary, #2271b1);  
    color: #fff;  
}  

.ev-page-btn:disabled {  
    opacity: 0.45;  
    cursor: not-allowed;  
    color: #a7aaad;  
}  

/* 页码信息 */  
.ev-page-info {  
    font-size: 14px;  
    color: #50575e;  
    white-space: nowrap;  
}  

.ev-page-info strong {  
    color: var(--eq-primary, #2271b1);  
}  

/* ─────────────────────────────────────────────────────────────  
   9. "查看更多"按钮（[exam_void_recent] 专用）  
   ───────────────────────────────────────────────────────────── */  

.ev-more-wrap {  
    display: flex;  
    align-items: center;  
    justify-content: center;
    padding-top: 14px;  
    border-top: 0px solid var(--eq-gray-200, #dcdcde);  
    gap: 12px;  
    flex-wrap: wrap;  
    margin:0 auto;
    max-width:220px;
}  

.ev-more-hint {  
    font-size: 13px;  
    color: #787c82;  
}  

.ev-more-hint strong {  
    color: var(--eq-danger, #d63638);  
}  

.ev-btn-more {  
    display: inline-flex;  
    align-items: center;  
    height: 50px;  
    padding: 0 20px;  
    background: var(--eq-danger, #d63638);  
    color: #fff;  
    border: none;  
    border-radius: 10px;  
    font-size: 14px;  
    font-weight: normal;  
    text-decoration: none;  
    cursor: pointer;  
    transition: background 0.2s ease,  
                transform 0.1s ease;  
    white-space: nowrap;  
    box-shadow: 0 2px 6px rgba(214, 54, 56, 0.28);  
    justify-content: center;
    width: 100%;
}  

.ev-btn-more:hover {  
    background: #b32d2e;  
    color: #fff;  
    text-decoration: none;  
    transform: translateY(-1px);  
}  

.ev-btn-more:active {  
    transform: scale(0.97);  
}  




/* ─────────────────────────────────────────────────────────────  
   10. 响应式：平板（≤ 768px）  
   ───────────────────────────────────────────────────────────── */  

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

    /* 隐藏考次列，节省空间 */  
    .ev-col-session {  
        display: none;  
    }  

    /* 科目筛选占满宽度 */  
    .ev-filter-wrap {  
        flex-direction: column;  
        align-items: flex-start;  
    }  

    .ev-filter-subject {  
        width: 100%;  
        min-width: unset;  
    }  

    /* "查看更多"区域垂直排列 */  
    .ev-more-wrap {  
        flex-direction: column;  
        align-items: flex-start;  
    }  

    .ev-btn-more {  
        width: 100%;  
        justify-content: center;  
    }  

    /* 分页控件紧凑 */  
    .ev-pagination {  
        gap: 8px;  
    }  

    .ev-page-btn {  
        padding: 0 12px;  
        font-size: 13px;  
    }  
}  

/* ─────────────────────────────────────────────────────────────  
   11. 响应式：手机（≤ 480px）  
   ───────────────────────────────────────────────────────────── */  

@media screen and (max-width: 480px) {  

    .ev-title {  
        font-size: 18px;  
    }  

    /* 手机上隐藏备注列（内容较长影响布局）*/  
    .ev-col-remark {  
        display: none;  
    }  

    /* 分页按钮全宽 */  
    .ev-pagination {  
        flex-direction: column;  
        gap: 8px;  
    }  

    .ev-page-btn {  
        width: 100%;  
        justify-content: center;
    }

    /* 统计信息字号缩小 */
    .ev-stats {
        font-size: 12px;
    }
}

/* ─────────────────────────────────────────────────────────────
   12. 无障碍：高对比度模式适配
   ───────────────────────────────────────────────────────────── */

@media (forced-colors: active) {

    .ev-page-btn {
        border: 2px solid ButtonText;
    }

    .ev-btn-more {
        border: 2px solid ButtonText;
    }

    .ev-table th {
        border-bottom: 2px solid ButtonText;
    }

    .ev-loading-mask {
        border: 2px solid ButtonText;
    }
}

/* ─────────────────────────────────────────────────────────────
   13. 无障碍：减少动画
   ───────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {

    .ev-spinner {
        animation: none;
        border-top-color: var(--eq-primary, #2271b1);
    }

    .ev-btn-more:hover {
        transform: none;
    }

    .ev-ajax-error {
        animation: none;
    }
}

/* ─────────────────────────────────────────────────────────────
   14. 打印样式
   ───────────────────────────────────────────────────────────── */

@media print {

    /* 隐藏交互控件 */
    .ev-filter-wrap,
    .ev-pagination,
    .ev-more-wrap,
    .ev-loading-mask,
    .ev-ajax-error {
        display: none !important;
    }

    /* 移除阴影和圆角 */
    .ev-table-wrap {
        box-shadow: none;
        border: 1px solid #000;
        border-radius: 0;
    }

    /* 表头深色背景打印 */
    .ev-table thead tr {
        background: #f5c2c4 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    /* 隔行底色打印 */
    .ev-row:nth-child(even) td {
        background: #fdf2f2 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    /* 脱敏考号去掉下划线 */
    .ev-masked-no {
        border-bottom: none;
    }
}
        
        
