/*
 * 相对路径: OJS_ReviewerAssistant/assets/css/style.css
 * 说明: 全站 MDPI 通篇 Arial 字体大一统协议 & CSS 贝塞尔平滑拉帘动画样式
 */

/* ==========================================================================
   1. 全局字体与字号规矩 (MDPI Arial Font Protocol)
   ========================================================================== */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    /* 【这段代码的具体作用是什么？】强行指定全站通篇使用 Arial 字体。 */
    /* 【为什么要在这里做这样的修改？】对标 MDPI 官网的严肃学术标准，彻底取消 Times/Georgia 等杂乱字体，让全站文字排版保持 100% 绝对一致的大气感。 */
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif !important;
    background-color: #f8fafc;
    color: #1e293b;
    line-height: 1.6;
    /* 【这段代码的具体作用是什么？】彻底将 body 标签原先硬编码的 padding-bottom 设为 0。 */
    /* 【为什么要在这里做这样的修改？】原本的 80px 底部内边距会在整个 body 最下方（即页脚下方）强制留出一块 80px 高度的空白区域。将其设为 0 才能让蓝色页脚完美无缝贴紧视口最底边缘！ */
    padding-bottom: 0;
    -webkit-font-smoothing: antialiased;
}

/* ==========================================================================
   2. 顶栏导航（移除右上角画蛇添足，保持极简）
   ========================================================================== */
.navbar {
    background-color: #0b2545;
    color: #ffffff;
    padding: 18px 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 3px solid #134074;
    box-shadow: 0 4px 12px rgba(11, 37, 69, 0.08);
}

.navbar .brand {
    font-size: 20px;
    font-weight: 700;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif !important;
    letter-spacing: -0.2px;
    display: flex;
    align-items: center;
    gap: 14px;
}

/* 【这段代码的具体作用是什么？】页眉 navbar-logo 品牌图片 40px 舒展放大高清样式。 */
/* 【为什么要在这里做这样的修改？】将 Header Logo 显示高度由 30px 拓宽升级为 40px，赋予矢量的图案与文字细节更开阔的渲染空间，彻底解决小尺寸挤压造成的微模糊错觉，增强顶栏品牌仪式感。 */
.navbar-logo {
    height: 40px;
    width: auto;
    object-fit: contain;
    vertical-align: middle;
    display: inline-block;
    image-rendering: auto;
}

.navbar .badge, .badge {
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif !important;
    font-size: 11px;
    font-weight: 700;
    background: rgba(255, 255, 255, 0.15);
    color: #f1f5f9;
    border: 1px solid rgba(255, 255, 255, 0.3);
    padding: 3px 9px;
    border-radius: 3px;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    white-space: nowrap;
    display: inline-block;
}

/* ==========================================================================
   3. 通用卡片容器
   ========================================================================== */
.main-container {
    width: 100%;
    max-width: 960px;
    margin: 35px auto;
    padding: 0 20px;
}

/* 【这段代码的具体作用是什么？】显式设置 width: 100%; 并配合 max-width: 1140px;，卡片同步设置 width: 100%;。 */
/* 【为什么要在这里做这样的修改？】彻底消除 body 开启 display: flex 纵向布局时触发的子元素收缩包裹 (Shrink-Wrap) 塌陷 Bug，强行将容器与卡片横向拉伸撑满 1140px 宽屏工作区。 */
.container {
    width: 100%;
    max-width: 1140px;
    margin: 35px auto;
    padding: 0 20px;
}

.card {
    width: 100%;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 40px;
    margin-bottom: 28px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03), 0 8px 16px -4px rgba(15, 23, 42, 0.03);
}

.card-title {
    font-size: 18px;
    font-weight: 700;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif !important;
    color: #0b2545;
    margin-bottom: 22px;
    border-bottom: 1px solid #e2e8f0;
    padding-bottom: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* ==========================================================================
   4. 稿件信息区
   ========================================================================== */
.meta-tag {
    font-size: 12px;
    font-weight: 700;
    color: #475569;
    background-color: #f1f5f9;
    border: 1px solid #e2e8f0;
    padding: 4px 12px;
    border-radius: 4px;
    display: inline-block;
    margin-bottom: 14px;
    letter-spacing: 0.5px;
}

.paper-title {
    font-size: 18px;
    font-weight: 700;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif !important;
    color: #0b2545;
    line-height: 1.45;
    margin-bottom: 16px;
}

.abstract-box {
    background-color: #f8fafc;
    border-left: 3px solid #134074;
    border-top: 1px solid #f1f5f9;
    border-right: 1px solid #f1f5f9;
    border-bottom: 1px solid #f1f5f9;
    padding: 18px 22px;
    font-size: 14px;
    color: #334155;
    margin-bottom: 22px;
    text-align: justify;
    border-radius: 0 6px 6px 0;
}

/* 【这段代码的具体作用是什么？】定义按钮呼吸感渐变与辉光脉冲动画 (Breathing Glow Animation)。 */
/* 【为什么要在这里做这样的修改？】在 0.5 秒内实现从暗蓝到辉光亮蓝的平滑循环脉冲，赋予按钮极具科技感与大厂高级质感的呼吸高亮动效。 */
@keyframes btn-breath {
    0% {
        background-color: #0b2545;
        box-shadow: 0 2px 6px rgba(11, 37, 69, 0.2);
        filter: brightness(1);
    }
    100% {
        background-color: #1d4ed8;
        box-shadow: 0 0 14px rgba(29, 78, 216, 0.45);
        filter: brightness(1.2);
    }
}

.btn-download {
    background-color: #134074;
    color: #ffffff !important;
    text-decoration: none;
    padding: 11px 24px;
    font-size: 13.5px;
    border-radius: 5px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    border: none;
    box-shadow: 0 2px 4px rgba(19, 64, 116, 0.15);
}

.btn-download:hover {
    animation: btn-breath 0.5s ease-in-out infinite alternate;
}

.btn-download:active {
    transform: scale(0.98);
}

/* ==========================================================================
   5. 阶段 1：平滑拉帘展开面板 (Smooth Accordion Panels)
   ========================================================================== */
.decision-tabs {
    display: flex;
    gap: 20px;
    margin-bottom: 22px;
}

.decision-btn-label {
    flex: 1;
    border: 1.5px solid #cbd5e1;
    border-radius: 6px;
    padding: 16px;
    text-align: center;
    cursor: pointer;
    font-weight: 700;
    font-size: 15px;
    color: #475569;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.decision-btn-label:hover {
    border-color: #0b2545;
    color: #0b2545;
    background: #f8fafc;
}

.decision-btn-label input[type="radio"] {
    display: none;
}

.decision-btn-label.active-agree {
    border-color: #0b2545;
    background-color: #f1f5f9;
    color: #0b2545;
    box-shadow: 0 0 0 1px #0b2545;
}

.decision-btn-label.active-decline {
    border-color: #64748b;
    background-color: #f8fafc;
    color: #64748b;
}

/* 【这段代码的具体作用是什么？】平滑贝塞尔曲线折叠拉帘动画面板。 */
/* 【为什么要在这里做这样的修改？】彻底取消原先 display: block 硬突弹出的糟糕体验。使用 max-height 和 opacity 结合 cubic-bezier 贝塞尔曲线，实现像 iOS / MDPI 官网一样极其顺滑的下滑展开与折叠效果！ */
.smooth-accordion {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease, margin 0.3s ease;
    margin-bottom: 0;
}

.smooth-accordion.expanded {
    max-height: 500px;
    opacity: 1;
    margin-bottom: 22px;
}

.decline-panel-inner {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-left: 4px solid #64748b;
    padding: 22px;
    border-radius: 6px;
}

/* 【这段代码的具体作用是什么？】推荐同行文本框平滑拉帘展开与收起 CSS 贝塞尔曲线动画。 */
/* 【为什么要在这里做这样的修改？】使推荐同行输入框在勾选 I have recommendations 时像软帘一样顺滑向下滑出，消除硬突弹出的不适感。 */
.recommendations-accordion {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease, margin 0.3s ease;
    margin-top: 0;
}

.recommendations-accordion.expanded {
    max-height: 200px;
    opacity: 1;
    margin-top: 12px;
}

.decline-option {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    margin-bottom: 12px;
    color: #334155;
    cursor: pointer;
}

.declined-thankyou-card {
    background-color: #f8fafc;
    border: 1px solid #e2e8f0;
    border-left: 4px solid #64748b;
    padding: 28px;
    border-radius: 6px;
    font-size: 15px;
    color: #334155;
}

/* 【这段代码的具体作用是什么？】数据隐私合规告示卡片样式 (.privacy-disclaimer-card)。 */
/* 【为什么要在这里做这样的修改？】提供柔和淡雅的灰色浅框与 13px 严谨文本排版，点击 privacy policy 链接带蓝色高亮下划线，完全符合顶刊合规告知样式。 */
/* 【这段代码的具体作用是什么？】数据隐私合规告示卡片样式 (.privacy-disclaimer-card)。 */
/* 【为什么要在这里做这样的修改？】将背景色修改为与全站所有卡片完全一致的纯白色 #ffffff，圆角设为 8px，并加上轻微高雅阴影，消除原本灰色背景造成的视觉离群感。 */
.privacy-disclaimer-card {
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-left: 4px solid #0b2545;
    padding: 22px 28px;
    border-radius: 8px;
    margin-bottom: 28px;
    font-size: 13.5px;
    line-height: 1.65;
    color: #334155;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03), 0 8px 16px -4px rgba(15, 23, 42, 0.03);
}

.privacy-disclaimer-card a {
    color: #1d4ed8;
    text-decoration: underline;
    font-weight: 600;
}

.privacy-disclaimer-card a:hover {
    color: #0b2545;
}

/* ==========================================================================
   6. 利益冲突 (COI) 平滑拉帘与自定义动画下拉框 (Custom Dropdown)
   ========================================================================== */
.coi-box {
    background-color: #fefce8;
    border: 1px solid #fef08a;
    border-left: 4px solid #ca8a04;
    padding: 20px;
    border-radius: 6px;
    margin-bottom: 20px;
}

/* 【这段代码的具体作用是什么？】COI 理由文本框平滑拉帘展开与收起 CSS 贝塞尔曲线动画。 */
/* 【为什么要在这里做这样的修改？】彻底消除原先通过 JS 硬性 display: block 切换导致的刺眼突变。使用 max-height 和 opacity 贝塞尔曲线，使 COI 理由输入框在勾选 Yes 时像丝滑软帘一样向下滑出。 */
.coi-accordion {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease, margin 0.3s ease;
    margin-top: 0;
}

.coi-accordion.expanded {
    max-height: 250px;
    opacity: 1;
    margin-top: 15px;
}

/* 【这段代码的具体作用是什么？】自定义动画下拉框 (Custom Animated Dropdown) 样式表。 */
/* 【为什么要在这里做这样的修改？】解决浏览器原生 <select> 控件受操作系统约束无法施加 CSS 动画的问题。通过纯 CSS/JS 构建自定义下拉菜单，点击时展现顺滑下拉与淡入位移效果。 */
.custom-dropdown-container {
    position: relative;
    width: 100%;
}

.dropdown-selected-box {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    color: #1e293b;
    background-color: #ffffff;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.2s ease;
}

.dropdown-selected-box:hover {
    border-color: #0b2545;
}

.dropdown-selected-box .arrow {
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    font-size: 10px;
    color: #64748b;
}

.custom-dropdown-container.open .dropdown-selected-box {
    border-color: #0b2545;
    box-shadow: 0 0 0 3px rgba(11, 37, 69, 0.12);
}

.custom-dropdown-container.open .dropdown-selected-box .arrow {
    transform: rotate(180deg);
}

.dropdown-options-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.15);
    z-index: 99;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

.custom-dropdown-container.open .dropdown-options-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown-option-item {
    padding: 12px 16px;
    font-size: 14px;
    font-weight: 500;
    color: #334155;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.dropdown-option-item:hover {
    background-color: #f1f5f9;
    color: #0b2545;
}

.dropdown-option-item.selected {
    background-color: #f8fafc;
    color: #0b2545;
    font-weight: 700;
}

.coi-question {
    font-weight: 700;
    color: #854d0e;
    margin-bottom: 12px;
    font-size: 14px;
}

.radio-group {
    display: flex;
    gap: 25px;
    margin-bottom: 10px;
}

.radio-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    color: #334155;
}

.matrix-table {
    width: 100%;
    /* 【这段代码的具体作用是什么？】改用 border-collapse: separate; border-spacing: 0; 分立无缝模式，并配合 overflow: hidden。 */
    /* 【为什么要在这里做这样的修改？】彻底突破 Chrome/Edge 浏览器在 collapse 模式下封锁 table 圆角裁切的限制，利用父级 border-radius: 6px 与 overflow: hidden 像一把剪刀一样，强制将深蓝色表头的左右直角物理剪裁成 6px 优雅圆角。 */
    border-collapse: separate;
    border-spacing: 0;
    margin-bottom: 25px;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    overflow: hidden;
}

.matrix-table th {
    background-color: #0b2545;
    color: #ffffff;
    font-weight: 700;
    text-align: center;
    padding: 14px 10px;
    font-size: 13px;
    letter-spacing: 0.3px;
    border-bottom: 1px solid #0b2545;
    border-right: 1px solid #134074;
}

.matrix-table th:last-child {
    border-right: none;
}

.matrix-table th.first-col {
    text-align: left;
    padding-left: 18px;
    width: 55%;
}

.matrix-table td {
    padding: 13px 10px;
    border-bottom: 1px solid #e2e8f0;
    border-right: 1px solid #e2e8f0;
    font-size: 13px;
    text-align: center;
    vertical-align: middle;
}

.matrix-table td:last-child {
    border-right: none;
}

.matrix-table tr:last-child td {
    border-bottom: none;
}

.matrix-table td.first-col {
    text-align: left;
    padding-left: 18px;
    color: #1e293b;
    font-weight: 600;
}

.matrix-table tr:nth-child(even) {
    background-color: #f8fafc;
}

.matrix-table input[type="radio"] {
    width: 17px;
    height: 17px;
    cursor: pointer;
    accent-color: #134074;
}

/* 【这段代码的具体作用是什么？】评分矩阵表格行悬浮高亮穿透。 */
/* 【为什么要在这里做这样的修改？】直接穿透到 td 单元格级别，并设置 cursor: pointer 手型指针与醒目的冷浅蓝色高光 (#e2e8f0)，解决原先 tr:hover 被 td 背景色盖住看不到变色效果的 Bug。 */
.matrix-table tbody tr {
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.matrix-table tbody tr:hover td {
    background-color: #e2e8f0 !important;
}

.section-label {
    font-size: 15px;
    font-weight: 700;
    color: #0b2545;
    margin: 22px 0 12px 0;
}

.block-radio-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 22px;
}

.block-radio-label {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    color: #334155;
    background: #f8fafc;
    padding: 13px 18px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.block-radio-label:hover {
    background: #f1f5f9;
    border-color: #cbd5e1;
}

.block-radio-label input[type="radio"] {
    width: 17px;
    height: 17px;
    accent-color: #134074;
}

/* ==========================================================================
   7. 表单控件与提交按钮
   ========================================================================== */
.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* 【这段代码的具体作用是什么？】将双列表单项的横纵网格间距由 18px 提升至 24px。 */
    /* 【为什么要在这里做这样的修改？】配合 1140px 的宽屏容器，让表单各项输入框之间拥有更加呼吸、大气的间距与视效。 */
    gap: 24px;
}

.full-width {
    grid-column: span 2;
}

.form-group {
    margin-bottom: 18px;
}

.form-group label {
    display: block;
    font-weight: 700;
    font-size: 13px;
    color: #475569;
    margin-bottom: 6px;
}

.form-control, .form-textarea, .form-select {
    width: 100%;
    padding: 11px 14px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    font-size: 14px;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif !important;
    color: #1e293b;
    background-color: #ffffff;
    transition: all 0.2s ease;
}

.form-control:focus, .form-textarea:focus, .form-select:focus {
    border-color: #134074;
    outline: none;
    box-shadow: 0 0 0 3px rgba(19, 64, 116, 0.12);
}

.form-textarea {
    min-height: 110px;
    resize: vertical;
}

.btn-submit {
    background-color: #0b2545;
    color: #ffffff;
    border: none;
    padding: 15px 35px;
    font-size: 15px;
    font-weight: 700;
    border-radius: 6px;
    cursor: pointer;
    width: 100%;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 6px rgba(11, 37, 69, 0.12);
}

/* 【这段代码的具体作用是什么？】提交按钮快节律呼吸光效与按压回弹。 */
/* 【为什么要在这里做这样的修改？】鼠标悬浮时触发 btn-breath 0.5s 快速呼吸脉冲，点击按压时伴有 scale(0.985) 触觉反馈。 */
.btn-submit:hover {
    animation: btn-breath 0.5s ease-in-out infinite alternate;
}

.btn-submit:active {
    transform: scale(0.985);
}

.task-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 15px;
    font-size: 13px;
}

.task-table th, .task-table td {
    padding: 12px 14px;
    border: 1px solid #e2e8f0;
    text-align: left;
}

.task-table th {
    background: #f8fafc;
    color: #475569;
    font-weight: 700;
}

.status-badge {
    padding: 3px 8px;
    border-radius: 4px;
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.badge-pending { background: #fef3c7; color: #92400e; }
.badge-agreed { background: #e0f2fe; color: #0369a1; }
.badge-completed { background: #dcfce7; color: #15803d; }
.badge-declined { background: #fee2e2; color: #b91c1c; }

/* 【这段代码的具体作用是什么？】定义表单未填写时的红色边框高亮、警示抖动动画与矩阵行报错背景。 */
/* 【为什么要在这里做这样的修改？】当审稿人漏填任何必填项或未选裁决时，触发红色边框与 0.4 秒抖动动画，吸引视线并提示补全。 */
.field-error-highlight {
    border: 2px solid #ef4444 !important;
    box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.2) !important;
    animation: error-shake 0.4s ease-in-out;
}

.matrix-row-error td {
    background-color: #fef2f2 !important;
    border-top: 1px solid #fca5a5 !important;
    border-bottom: 1px solid #fca5a5 !important;
    animation: error-shake 0.4s ease-in-out;
}

@keyframes error-shake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-6px); }
    40%, 80% { transform: translateX(6px); }
}


/* ==========================================================================
   全局页脚（Footer）与毛玻璃 Modal 弹窗样式（无内联样式）
   ========================================================================== */

/* 【这段代码的具体作用是什么？】配置 html 和 body 标签为全局纵向 100vh Flexbox 弹性盒子布局。 */
/* 【为什么要在这里做这样的修改？】配合页脚的 margin-top: auto，在页面内容较少时也能将页脚强行推至屏幕视口最底部，彻底消除页脚下方的白色悬空块。 */
html {
    height: 100%;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin: 0;
}

/* 【这段代码的具体作用是什么？】将中间主内容区域 .main-container 的弹性伸缩属性 flex 设为 1 0 auto。 */
/* 【为什么要在这里做这样的修改？】使其像橡皮筋一样能够自动拉伸并吃掉屏幕上多余的垂直高度，将底部的页脚自然顶到屏幕的最下边缘。 */
.main-container {
    flex: 1 0 auto;
}

/* 全局页脚容器 */
.footer-container {
    background-color: #0b2545;
    color: #94a3b8;
    padding: 30px 20px;
    text-align: center;
    font-size: 13px;
    border-top: 1px solid #1e293b;
    margin-top: auto;
}

.footer-logo-box {
    margin-bottom: 12px;
}

/* 【这段代码的具体作用是什么？】页脚 footer-logo 极简平滑高清样式。 */
/* 【为什么要在这里做这样的修改？】将高度微调为 24px 精致尺寸，擦除引起锯齿的硬边缘采样算法，恢复平滑抗锯齿重采样，让底栏小 Logo 呈现自然高清且无任何硬锯齿的优雅观感。 */
.footer-logo {
    height: 24px;
    width: auto;
    object-fit: contain;
    display: inline-block;
    vertical-align: middle;
    image-rendering: auto;
}

.footer-links {
    margin-bottom: 12px;
}

.footer-links a {
    color: #e2e8f0;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s ease;
}

.footer-links a:hover {
    color: #38bdf8;
    text-decoration: underline;
}

.footer-divider {
    margin: 0 10px;
    color: #475569;
}

.footer-copy {
    font-size: 12px;
    color: #64748b;
}

/* 强校验合规复选框样式 */
.agreement-checkbox-box {
    background-color: #f8fafc;
    border: 1px solid #cbd5e1;
    border-left: 4px solid #0b2545;
    padding: 14px 18px;
    border-radius: 4px;
    margin: 20px 0;
    transition: all 0.25s ease;
}

/* 【这段代码的具体作用是什么？】未勾选提交时触发的复选框卡片红色高亮与平滑抖动样式。 */
/* 【为什么要在这里做这样的修改？】取代原生 alert 弹窗，使用卡片红色高亮 + error-shake 0.4s 抖动效果，醒目直观且极大提升学术系统的视觉精致度。 */
.agreement-box-error {
    border-color: #ef4444 !important;
    border-left-color: #dc2626 !important;
    background-color: #fef2f2 !important;
    animation: error-shake 0.4s ease-in-out;
}

/* 【这段代码的具体作用是什么？】复选框卡片内部正下方滑出的英文行内错误提示文字（无 Emoji）。 */
/* 【为什么要在这里做这样的修改？】提供纯正无 Emoji 的英文提示，搭配 12.5px 严谨字体与虚线分隔，保持顶级 SCI 系统的严肃专业感。 */
.agreement-inline-error-text {
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px dashed #fca5a5;
    font-size: 12.5px;
    font-weight: 600;
    color: #dc2626;
    line-height: 1.4;
    animation: fadeIn 0.3s ease;
}

.agreement-label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13px;
    color: #334155;
    line-height: 1.5;
    cursor: pointer;
}

.agreement-label input[type="checkbox"] {
    margin-top: 2px;
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.agreement-label a {
    color: #1d4ed8;
    text-decoration: underline;
    font-weight: 600;
}

/* 毛玻璃 Modal 遮罩层 (Glassmorphism Modal) */
.modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(15, 23, 42, 0.65);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 9999;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.modal-overlay.active {
    display: flex;
    opacity: 1;
}

/* 弹窗主体容器 */
.modal-glass-container {
    background: #ffffff;
    /* 【这段代码的具体作用是什么？】移除白边边框，并加上强制的圆角裁切 overflow: hidden 与无缝深色阴影。 */
    /* 【为什么要在这里做这样的修改？】彻底消除弹窗四周难看的白边、漏缝与视觉锯齿，呈现顶刊级精致沉浸感。 */
    border: none;
    width: 90%;
    max-width: 860px;
    max-height: 85vh;
    border-radius: 10px;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.45);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: modalSlideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes modalSlideUp {
    from { transform: translateY(30px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

/* Modal 顶部 Header */
.modal-header {
    background-color: #0b2545;
    color: #ffffff;
    padding: 18px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0;
    border: none;
    /* 【这段代码的具体作用是什么？】强制设置 flex-shrink: 0。 */
    /* 【为什么要在这里做这样的修改？】锁定 Header 容器的高度，绝对不允许被下方巨量的文章正文压缩。 */
    flex-shrink: 0;
}

.modal-title {
    font-size: 17px;
    font-weight: bold;
    /* 【这段代码的具体作用是什么？】强行将 Modal 标题字体设为全站统一的 Arial 无衬线字体。 */
    /* 【为什么要在这里做这样的修改？】消除先前的 Georgia 衬线体异类，恪守项目的 MDPI Arial Font Protocol 全站字体大一统规范。 */
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif !important;
}

.modal-close-btn {
    background: none;
    border: none;
    color: #94a3b8;
    font-size: 26px;
    cursor: pointer;
    line-height: 1;
    transition: color 0.2s ease;
}

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

/* Tab 选项卡横条 */
.modal-tabs-bar {
    display: flex;
    /* 【这段代码的具体作用是什么？】将选项卡背板色设为暗蓝色 #0b2545，并强制设置 flex-shrink: 0。 */
    /* 【为什么要在这里做这样的修改？】1. 消除背板白缝；2. 设置 flex-shrink: 0 彻底解决正文文本量极大时将 Tab 栏挤扁拉变形、导致选项卡按钮与文字重叠的经典 Flexbox 布局 Bug！ */
    background-color: #0b2545;
    border-bottom: 1px solid #1e3a5f;
    overflow-x: auto;
    flex-shrink: 0;
}

.modal-tab-btn {
    background: #1e3a5f;
    border: none;
    padding: 12px 20px;
    font-size: 13px;
    font-weight: 600;
    color: #94a3b8;
    cursor: pointer;
    white-space: nowrap;
    border-bottom: 3px solid transparent;
    transition: all 0.2s ease;
}

.modal-tab-btn:hover {
    color: #ffffff;
    background: #134074;
}

.modal-tab-btn.active {
    color: #0b2545;
    border-bottom-color: #0b2545;
    background-color: #ffffff;
}

/* Body 文本与独立滚动条 */
.modal-body {
    padding: 28px;
    overflow-y: auto;
    font-size: 14px;
    line-height: 1.7;
    color: #334155;
    /* 【这段代码的具体作用是什么？】配置 flex: 1 1 auto; 与 min-height: 0;。 */
    /* 【为什么要在这里做这样的修改？】将巨量的文章正文隔离在独立的滚动区域中，当文章很长时自动在内部出现平滑滚动条，而不会影响上方顶固定的 Header 与 Tab 选项卡。 */
    flex: 1 1 auto;
    min-height: 0;
}

.policy-tab-panel {
    display: none;
}

.policy-tab-panel.active {
    display: block;
}

.policy-article h3 {
    font-size: 18px;
    color: #0b2545;
    margin-bottom: 14px;
    /* 【这段代码的具体作用是什么？】强行将 Policy 文章标题字体设为全站统一的 Arial 无衬线字体。 */
    /* 【为什么要在这里做这样的修改？】统一全站所有级别的标题与正文样式，确保弹窗内文章字体与主界面卡片、表单保持 100% 毫无违和的大气感。 */
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif !important;
    border-bottom: 1px solid #cbd5e1;
    padding-bottom: 8px;
}

.policy-article h4 {
    font-size: 15px;
    color: #1e293b;
    margin: 18px 0 8px 0;
}

.policy-article p {
    margin-bottom: 12px;
}

.policy-list {
    margin: 10px 0 16px 20px;
}

.policy-list li {
    margin-bottom: 8px;
}

/* ==========================================================================
   后台控制台高级 UI 样式 (Admin Panel Refinement)
   ========================================================================== */

/* 退出登录高对比度按钮 */
.user-info .btn-logout {
    color: #f87171 !important;
    text-decoration: none;
    margin-left: 12px;
    font-weight: 700;
    transition: color 0.2s ease;
}

.user-info .btn-logout:hover {
    color: #ffffff !important;
    text-decoration: underline;
}

/* 后台主视图导航切卡 (Admin View Sub-Navigation) */
.admin-view-nav {
    display: flex;
    gap: 12px;
    margin-bottom: 24px;
    border-bottom: 2px solid #e2e8f0;
    padding-bottom: 2px;
}

.admin-nav-item {
    padding: 10px 22px;
    font-size: 14px;
    font-weight: 700;
    color: #64748b;
    text-decoration: none;
    border-radius: 6px 6px 0 0;
    transition: all 0.2s ease;
    border-bottom: 3px solid transparent;
}

.admin-nav-item:hover {
    color: #0b2545;
    background-color: #f1f5f9;
}

.admin-nav-item.active {
    color: #0b2545;
    background-color: #ffffff;
    border-bottom-color: #0b2545;
    box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.02);
}